/* SuperWebView — superwebview.roozbehzarei.com Shared stylesheet for index.html, donate.html and 404.html. The site is dark-only; there is no theme toggle and never was, so there is one palette rather than a light/dark pair. */ /* ------------------------------------------------------------------ tokens */ :root { --bg: #0a0a0a; --fg: #fafafa; --card: #171717; --muted-fg: #a1a1a1; --border: rgb(255 255 255 / 0.1); /* Material 3 brand roles the Android app is themed with. */ --brand: #415f91; --brand-strong: #284777; --brand-light: #aac7ff; --brand-light-dim: #7491c7; --accent-purple: #705575; --accent-pink: #ddbce0; /* Phone mock surfaces. */ --device-surface: #111318; --device-chrome: #202124; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* The old build overrode Tailwind's radius scale off a --radius of .625rem, so the corner values here are not the framework defaults: lg is 10px (not 8) and xl is 14px (not 12). 14px on a 28px box is a circle, which is why the avatar in the phone mock is round. 2xl (16px) and 3xl (24px) were left at stock. */ /* -------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; /* Matches the old build's base layer, where every element defaulted to the border token rather than currentColor. */ border-color: var(--border); } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); /* Ubuntu is shipped so every visitor gets the same typography. Before this, the Next build declared Geist but never applied it (it defined --font-geist-sans on and resolved it at :root), so the site fell back to whatever the OS supplied. See CLAUDE.md. */ font-family: "Ubuntu", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p { margin: 0; } img { max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; color: inherit; margin: 0; } /* ------------------------------------------------------------------- fonts */ /* Ubuntu, self-hosted from Google Fonts, latin subset. Two faces, and the weight ranges are deliberate rather than the obvious 400/500 mapping. A locally installed Ubuntu is matched loosely by fontconfig: requests for 500 land on Regular and requests for 600 land on Medium. That is how this site rendered for years, so the ranges below reproduce it exactly -- Regular covers 400-500, Medium covers 600. Mapping 500 to the real Medium face instead makes the badge, buttons and footer visibly heavier than they were. Ubuntu has no variable build and no SemiBold. Nothing here asks for 700, so no Bold file ships; add one with a font-weight: 700 face before using bold text, or the browser will synthesise it. */ @font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(assets/fonts/ubuntu-regular.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/ubuntu-medium.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/geist-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Mono Fallback"; src: local("Arial"); ascent-override: 74.67%; descent-override: 21.92%; line-gap-override: 0%; size-adjust: 134.59%; } @font-face { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/material-symbols-subset.woff2) format("woff2"); } .icon { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; display: inline-block; flex-shrink: 0; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-size: var(--icon-size, 24px); width: var(--icon-size, 24px); height: var(--icon-size, 24px); } .icon--inline { vertical-align: text-bottom; color: var(--brand-light); } /* ------------------------------------------------------------------ reveal */ /* Elements start at their final state so the page is complete without JS; app.js sets .js on , which is what arms the hidden state. */ .reveal { --reveal-y: 16px; --reveal-duration: 0.5s; --reveal-delay: 0s; } html.js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); } html.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--reveal-duration) var(--ease) var(--reveal-delay), transform var(--reveal-duration) var(--ease) var(--reveal-delay); } /* ------------------------------------------------------------------ layout */ .page { position: relative; display: flex; min-height: 100vh; flex-direction: column; overflow: hidden; background: var(--bg); } .main { position: relative; z-index: 10; flex: 1 1 0%; } .shell { position: relative; z-index: 10; } /* Ambient wash behind the whole page. */ .ambient { pointer-events: none; position: fixed; inset: 0; z-index: 0; } .ambient__glow { position: absolute; border-radius: 9999px; } .ambient__glow--top { left: 50%; top: -18rem; height: 34rem; width: 54rem; transform: translateX(-50%); background: rgb(65 95 145 / 0.07); filter: blur(120px); } .ambient__glow--left { bottom: 12%; left: -14rem; height: 28rem; width: 28rem; background: rgb(112 85 117 / 0.06); filter: blur(110px); } .ambient__glow--right { right: -12rem; top: 38%; height: 30rem; width: 30rem; background: rgb(170 199 255 / 0.045); filter: blur(120px); } .ambient__grid { position: absolute; inset: 0; background-image: radial-gradient( circle at center, hsl(220 20% 70% / 0.045) 1px, transparent 1px ); background-size: 28px 28px; -webkit-mask-image: linear-gradient( to bottom, transparent, black 18%, black 82%, transparent ); mask-image: linear-gradient( to bottom, transparent, black 18%, black 82%, transparent ); } /* -------------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; padding: 3rem 1.25rem 5rem; } .hero__bg { pointer-events: none; position: absolute; inset: 0; z-index: -10; } .hero__glow { position: absolute; border-radius: 9999px; } .hero__glow--top { left: 50%; top: -10%; height: 440px; width: 860px; transform: translateX(-50%); background: rgb(65 95 145 / 0.1); filter: blur(120px); } .hero__glow--side { left: 12%; top: 40%; height: 280px; width: 280px; background: rgb(112 85 117 / 0.1); filter: blur(100px); } .hero__grid { position: absolute; inset: 0; opacity: 0.12; background-image: radial-gradient( circle at 1px 1px, hsl(220 20% 50% / 0.25) 1px, transparent 0 ); background-size: 32px 32px; -webkit-mask-image: radial-gradient( ellipse 80% 60% at 50% 30%, black, transparent 80% ); mask-image: radial-gradient( ellipse 80% 60% at 50% 30%, black, transparent 80% ); } .hero__inner { margin: 0 auto; display: grid; max-width: 72rem; align-items: center; gap: 3rem; } .hero__copy { text-align: center; } .hero__badge-row { --reveal-y: 12px; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .badge { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgb(255 255 255 / 0.07); border-radius: 9999px; background: rgb(10 10 10 / 0.6); padding: 0.375rem 0.75rem; font-size: 12px; font-weight: 500; color: var(--muted-fg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .badge__status { position: relative; display: flex; height: 0.375rem; width: 0.375rem; } .badge__ping { position: absolute; display: inline-flex; height: 100%; width: 100%; border-radius: 9999px; background: rgb(16 185 129 / 0.7); animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .badge__dot { position: relative; display: inline-flex; height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: #10b981; } .hero__title { --reveal-duration: 0.6s; --reveal-delay: 0.05s; margin-top: 1.25rem; font-size: 2.25rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; } .hero__highlight { position: relative; display: inline-block; } .hero__highlight-text { background: linear-gradient( to bottom right in oklab, var(--brand-light), var(--brand-light-dim) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__underline { position: absolute; bottom: -0.25rem; left: 0; width: 100%; color: rgb(170 199 255 / 0.4); } .hero__lead { --reveal-duration: 0.6s; --reveal-delay: 0.12s; margin: 1.5rem auto 0; max-width: 36rem; font-size: 16px; line-height: 1.625; color: var(--muted-fg); } .hero__lead p:not(:last-child) { margin-bottom: 1rem; } .hero__lead strong { font-weight: 600; color: var(--fg); } .hero__actions { --reveal-duration: 0.6s; --reveal-delay: 0.18s; margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; flex-shrink: 0; outline: none; text-decoration: none; transition: all 0.15s; } .btn:focus-visible { border-color: var(--ring, #737373); box-shadow: 0 0 0 3px rgb(115 115 115 / 0.5); } .btn--primary { height: 3rem; border-width: 0; border-radius: 9999px; background: var(--brand); padding: 0 1.5rem; font-size: 14.5px; font-weight: 500; color: #fff; box-shadow: 0 8px 24px -8px rgb(65 95 145 / 0.6); cursor: pointer; } .btn--primary:hover { background: var(--brand-strong); } .btn--primary .icon { margin-left: 0.25rem; } .hero__phone { --reveal-y: 24px; --reveal-duration: 0.8s; --reveal-delay: 0.2s; position: relative; margin: 0 auto; width: 100%; max-width: 340px; } html.js .hero__phone { transform: translateY(var(--reveal-y)) rotate(-2deg); } /* Scroll-to-next-section chevron. */ .nav-next { position: absolute; bottom: 1.25rem; left: 50%; z-index: 20; display: flex; height: 2.75rem; width: 2.75rem; transform: translateX(-50%); cursor: pointer; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 0.07); border-radius: 9999px; background: rgb(10 10 10 / 0.75); color: var(--muted-fg); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color 0.15s, background-color 0.15s; } .nav-next:hover { background: var(--bg); color: var(--fg); } /* -------------------------------------------------------------- phone mock */ .phone { position: relative; } .phone__halo { position: absolute; inset: -1.5rem; z-index: -10; border-radius: 60px; background: linear-gradient( to bottom right in oklab, rgb(170 199 255 / 0.25), rgb(65 95 145 / 0.1), rgb(221 188 224 / 0.2) ); filter: blur(40px); } .phone__frame { position: relative; aspect-ratio: 9 / 19.8; width: 100%; border-radius: 36px; background: linear-gradient(to bottom right in oklab, #666b76, #2a2d36, #101217); padding: 3px; box-shadow: 0 34px 90px -22px rgb(170 199 255 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.2); } .phone__gloss-top, .phone__gloss-bottom { position: absolute; height: 1px; border-radius: 9999px; } .phone__gloss-top { left: 2.25rem; right: 2.25rem; top: 2px; background: rgb(255 255 255 / 0.35); } .phone__gloss-bottom { left: 2.5rem; right: 2.5rem; bottom: 2px; background: rgb(0 0 0 / 0.45); } .phone__key { position: absolute; right: -3px; width: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(to bottom in oklab, #494c54, #17191e); } .phone__key--power { top: 17%; height: 2.25rem; } .phone__key--volume { top: 28%; height: 4rem; } .phone__key--left { position: absolute; left: -2px; top: 23%; height: 5rem; width: 2px; border-radius: 2px 0 0 2px; background: rgb(0 0 0 / 0.35); } .phone__bezel { position: relative; height: 100%; width: 100%; border-radius: 33px; background: #000; padding: 5px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); } .phone__screen { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: 28px; background: var(--device-surface); } .phone__camera { position: absolute; left: 50%; top: 0.5rem; z-index: 40; height: 0.5rem; width: 0.5rem; transform: translateX(-50%); border-radius: 9999px; background: #000; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.1); } .phone__earpiece { position: absolute; left: 50%; top: 3px; z-index: 40; height: 2px; width: 2.5rem; transform: translateX(-50%); border-radius: 9999px; background: rgb(0 0 0 / 0.45); } .phone__status { position: relative; z-index: 30; display: flex; height: 2rem; align-items: center; justify-content: space-between; background: var(--device-surface); padding: 0.375rem 1rem 0; font-size: 9px; font-weight: 500; color: rgb(250 250 250 / 0.8); } .phone__clock { letter-spacing: -0.025em; } .phone__status-icons { display: flex; align-items: center; gap: 0.25rem; } .phone__status-icons svg + svg { margin-left: 0.125rem; } .phone__progress { position: relative; z-index: 20; height: 2px; width: 100%; overflow: hidden; background: rgb(65 95 145 / 0.1); } .phone__progress-bar { height: 100%; background: var(--brand-light); animation: phone-progress-width 7s linear infinite, phone-progress-fade 7s linear infinite; } .phone__content { position: absolute; inset: 34px 0 0; overflow-y: auto; padding: 0.75rem 1rem 1.5rem; scrollbar-width: none; } .phone__content::-webkit-scrollbar { display: none; } .phone__fade { pointer-events: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; height: 2.5rem; background: linear-gradient( to top in oklab, var(--device-surface), rgb(17 19 24 / 0.7), transparent ); } .phone__spinner { position: absolute; left: 50%; top: 34px; z-index: 10; transform: translateX(-50%); animation: phone-spinner-fade 7s linear infinite, phone-spinner-drop 7s ease-in-out infinite; } .phone__spinner-disc { display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--device-chrome); box-shadow: 0 3px 8px rgb(0 0 0 / 0.28), 0 1px 2px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(255 255 255 / 0.1); color: var(--brand-light); } .phone__spinner-disc svg { animation: phone-spinner-rotate 1.35s linear infinite; } .phone__spinner-disc circle { animation: phone-spinner-dash 1.35s ease-in-out infinite; } .phone__home { position: absolute; bottom: 0.5rem; left: 50%; z-index: 10; height: 0.25rem; width: 4rem; transform: translateX(-50%); border-radius: 9999px; background: rgb(250 250 250 / 0.4); } /* Mock content blocks, staggered in after the frame lands. */ .pm-block { --reveal-y: 8px; } .pm-block:nth-child(1) { --reveal-delay: 1.2s; } .pm-block:nth-child(2) { --reveal-delay: 1.28s; margin-top: 1.25rem; } .pm-block:nth-child(3) { --reveal-delay: 1.36s; margin-top: 1.25rem; } .pm-block:nth-child(4) { --reveal-delay: 1.44s; margin-top: 1rem; } .pm-block:nth-child(5) { --reveal-delay: 1.52s; margin-top: 1.25rem; } .pm-block:nth-child(6) { --reveal-delay: 1.6s; margin-top: 1.25rem; } .pm-block:nth-child(7) { --reveal-delay: 1.68s; margin-top: 1.25rem; } /* Skeleton bars. The suffix is the foreground alpha. */ .pm-bar { border-radius: 9999px; background: rgb(250 250 250 / 0.2); } .pm-bar--25 { background: rgb(250 250 250 / 0.25); } .pm-bar--18 { background: rgb(250 250 250 / 0.18); } .pm-bar--12 { background: rgb(250 250 250 / 0.12); } .pm-bar--10 { background: rgb(250 250 250 / 0.1); } .pm-bar--08 { background: rgb(250 250 250 / 0.08); } .pm-row { display: flex; align-items: center; justify-content: space-between; } .pm-row__left { display: flex; align-items: center; gap: 0.5rem; } .pm-avatar { height: 1.75rem; width: 1.75rem; border-radius: 14px; background: var(--brand-light); } .pm-title { height: 0.5rem; width: 5rem; } .pm-subtitle { margin-top: 0.25rem; height: 0.375rem; width: 3.5rem; } .pm-dots { display: flex; gap: 0.25rem; } .pm-dots span { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: rgb(250 250 250 / 0.2); } .pm-chip { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; background: rgb(170 199 255 / 0.1); padding: 0.25rem 0.5rem; } .pm-chip__dot { height: 0.25rem; width: 0.25rem; border-radius: 9999px; background: currentcolor; } .pm-chip__bar { height: 0.375rem; width: 4rem; border-radius: 9999px; background: rgb(170 199 255 / 0.45); } .pm-headline { margin-top: 0.75rem; height: 1.25rem; width: 88%; } .pm-headline + .pm-headline { margin-top: 0.375rem; width: 72%; } .pm-line { margin-top: 0.75rem; height: 0.375rem; width: 100%; } .pm-line + .pm-line { margin-top: 0.375rem; width: 84%; } .pm-actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .pm-actions__primary { height: 1.75rem; width: 6rem; border-radius: 9999px; background: var(--brand-light); } .pm-actions__ghost { height: 1.75rem; width: 4rem; border-radius: 9999px; border: 1px solid rgb(170 199 255 / 0.25); } .pm-feature { position: relative; overflow: hidden; border-radius: 1rem; background: linear-gradient( to bottom right in oklab, rgb(170 199 255 / 0.2), rgb(221 188 224 / 0.12), rgb(170 199 255 / 0.05) ); padding: 0.75rem; } .pm-feature__glow { position: absolute; right: -1.5rem; top: -1.5rem; height: 5rem; width: 5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.1); filter: blur(24px); } .pm-feature__grid { position: relative; display: grid; grid-template-columns: 1fr 0.78fr; gap: 0.75rem; } .pm-card { border-radius: 14px; background: rgb(255 255 255 / 0.1); padding: 0.5rem; } .pm-card:not(:last-child) { margin-bottom: 0.5rem; } .pm-card__head { display: flex; align-items: center; gap: 0.375rem; } .pm-card__icon { height: 1.5rem; width: 1.5rem; border-radius: 10px; background: rgb(170 199 255 / 0.15); } .pm-card__title { height: 0.375rem; width: 3rem; } .pm-card__meta { margin-top: 0.25rem; height: 0.25rem; width: 4rem; } .pm-chart { margin-top: 0.5rem; display: flex; height: 2rem; align-items: flex-end; gap: 0.25rem; } .pm-chart span { flex: 1 1 0%; border-radius: 0.25rem 0.25rem 0 0; background: rgb(170 199 255 / 0.55); } .pm-card__wide-title { height: 0.375rem; width: 4rem; } .pm-card__wide-meta { margin-top: 0.375rem; height: 0.25rem; width: 6rem; } .pm-media { border-radius: 1rem; background: rgb(255 255 255 / 0.1); padding: 0.5rem; } .pm-media__thumb { height: 5rem; border-radius: 14px; background: linear-gradient( to bottom right in oklab, rgb(170 199 255 / 0.35), rgb(221 188 224 / 0.25) ); } .pm-media__title { margin-top: 0.5rem; height: 0.375rem; width: 4rem; } .pm-media__meta { margin-top: 0.25rem; height: 0.25rem; width: 3rem; } .pm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .pm-stat { border-radius: 14px; border: 1px solid rgb(250 250 250 / 0.05); background: rgb(250 250 250 / 0.035); padding: 0.5rem; text-align: center; } .pm-stat__value { margin: 0 auto; height: 0.625rem; width: 2.5rem; border-radius: 9999px; background: rgb(170 199 255 / 0.3); } .pm-stat__label { margin: 0.375rem auto 0; height: 0.25rem; width: 3rem; } .pm-section-head { display: flex; align-items: flex-end; justify-content: space-between; } .pm-section-head__title { height: 0.625rem; width: 6rem; } .pm-section-head__sub { margin-top: 0.375rem; height: 0.375rem; width: 4rem; } .pm-section-head__action { height: 1rem; width: 2.5rem; border-radius: 9999px; background: rgb(170 199 255 / 0.1); } .pm-tiles { margin-top: 0.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; } .pm-tile { border-radius: 1rem; border: 1px solid rgb(250 250 250 / 0.05); background: rgb(250 250 250 / 0.035); padding: 0.625rem; } .pm-tile__icon { display: flex; height: 1.75rem; width: 1.75rem; align-items: center; justify-content: center; border-radius: 14px; background: rgb(170 199 255 / 0.1); color: var(--brand-light); } .pm-tile__glyph { height: 0.75rem; width: 0.75rem; border-radius: 0.25rem; background: rgb(170 199 255 / 0.45); } .pm-tile__title { margin-top: 0.5rem; height: 0.375rem; width: 3.5rem; } .pm-tile__line { margin-top: 0.375rem; height: 0.25rem; width: 100%; } .pm-tile__line + .pm-tile__line { margin-top: 0.25rem; width: 75%; } .pm-promo { border-radius: 1rem; background: rgb(170 199 255 / 0.07); padding: 0.75rem; } .pm-promo__head { display: flex; align-items: center; gap: 0.5rem; } .pm-promo__badge { display: flex; height: 1.75rem; width: 1.75rem; align-items: center; justify-content: center; border-radius: 9999px; background: rgb(255 255 255 / 0.1); } .pm-promo__badge span { height: 0.75rem; width: 0.75rem; border-radius: 9999px; background: rgb(170 199 255 / 0.4); } .pm-promo__text { flex: 1 1 0%; } .pm-promo__title { height: 0.375rem; width: 6rem; } .pm-promo__sub { margin-top: 0.375rem; height: 0.25rem; width: 8rem; } .pm-promo__tags { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.375rem; } .pm-promo__tags span { height: 1rem; border-radius: 9999px; background: rgb(10 10 10 / 0.6); } .pm-footer { border-top: 1px solid rgb(250 250 250 / 0.1); padding-top: 0.75rem; } .pm-footer__row { display: flex; align-items: center; justify-content: space-between; } .pm-footer__left { height: 0.375rem; width: 4rem; } .pm-footer__right { height: 0.375rem; width: 6rem; } /* ---------------------------------------------------------------- features */ .features { position: relative; padding: 3.5rem 1.25rem; } .features__glow { pointer-events: none; position: absolute; left: 50%; top: 50%; z-index: -10; height: 18rem; width: 36rem; transform: translate(-50%, -50%); border-radius: 9999px; background: rgb(65 95 145 / 0.045); filter: blur(90px); } .features__inner { margin: 0 auto; max-width: 72rem; } .features__head { margin: 0 auto; max-width: 42rem; text-align: center; } .features__title { font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.025em; } .features__lead { margin-top: 0.75rem; font-size: 14.5px; line-height: 1.625; color: var(--muted-fg); } .feature-grid { margin-top: 2rem; display: grid; gap: 0.75rem; } .feature { --reveal-y: 12px; position: relative; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.06); border-radius: 1rem; background: rgb(23 23 23 / 0.35); padding: 1rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background-color 0.15s; } .feature:nth-child(2) { --reveal-delay: 0.05s; } .feature:nth-child(3) { --reveal-delay: 0.1s; } .feature:nth-child(4) { --reveal-delay: 0.15s; } .feature:nth-child(5) { --reveal-delay: 0.2s; } .feature:hover { background: rgb(23 23 23 / 0.45); } /* Two stacked radial washes that track the cursor via --spotlight-x/y. */ .feature__spotlight { pointer-events: none; position: absolute; opacity: 0; transition: opacity 0.5s; } .feature:hover .feature__spotlight { opacity: 1; } .feature__spotlight--wide { inset: -2.5rem; filter: blur(64px); background: radial-gradient( 260px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgb(170 199 255 / 0.055), transparent 68% ); } .feature__spotlight--tight { inset: -1.5rem; background: radial-gradient( 220px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgb(65 95 145 / 0.04), transparent 72% ); } .feature__icon { position: relative; display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 0.06); border-radius: 14px; background: rgb(10 10 10 / 0.6); color: var(--brand-light); } .feature__title { position: relative; margin-top: 0.75rem; font-size: 14.5px; font-weight: 600; letter-spacing: -0.025em; } .feature__text { position: relative; margin-top: 0.375rem; font-size: 13px; line-height: 1.625; color: var(--muted-fg); } /* ------------------------------------------------------------------ donate */ .donate { position: relative; overflow: hidden; padding: 3.5rem 1rem; } .donate__glow { pointer-events: none; position: absolute; bottom: 3rem; left: 50%; z-index: -10; height: 20rem; width: 42rem; transform: translateX(-50%); border-radius: 9999px; background: rgb(112 85 117 / 0.05); filter: blur(100px); } .donate__inner { margin: 0 auto; max-width: 64rem; min-width: 0; } .donate__head { margin: 0 auto; max-width: 42rem; text-align: center; } .donate__title { font-size: 1.875rem; font-weight: 600; line-height: 2.25rem; letter-spacing: -0.025em; } .donate__title span { background: linear-gradient( to right in oklab, var(--brand-light), var(--accent-pink), var(--brand-light) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .donate__lead { margin: 1rem auto 0; max-width: 32rem; font-size: 14.5px; line-height: 1.625; color: var(--muted-fg); } .coins { --reveal-delay: 0.08s; position: relative; margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .coin { position: relative; display: flex; cursor: pointer; align-items: center; gap: 0.5rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 9999px; background: rgb(24 24 27 / 0.5); padding: 0.5rem 0.875rem; transition: border-color 0.3s, background-color 0.3s, color 0.3s; } .coin[aria-pressed="true"] { border-color: var(--coin-accent); background: var(--coin-accent-soft); } .coin__icon { height: 1rem; width: 1rem; object-fit: contain; } .coin__symbol { font-size: 12.5px; font-weight: 600; letter-spacing: -0.025em; } .coin[aria-pressed="true"] .coin__symbol { color: var(--coin-accent); } /* Slides between buttons; app.js FLIPs it after moving it in the DOM. */ .coin__dot { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: var(--coin-accent); } .panel { --reveal-y: 24px; --reveal-duration: 0.6s; --reveal-delay: 0.12s; position: relative; margin-top: 2rem; max-width: 100%; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.06); border-radius: 24px; background: rgb(24 24 27 / 0.35); box-shadow: 0 24px 80px -56px rgb(170 199 255 / 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .panel__glow { pointer-events: none; position: absolute; top: -8rem; left: 50%; height: 16rem; width: 16rem; transform: translateX(-50%); border-radius: 9999px; filter: blur(100px); background: var(--coin-accent-soft); transition: background-color 0.6s var(--ease); } .panel__grid { position: relative; display: grid; min-width: 0; gap: 0; } .panel__qr { display: flex; min-width: 0; align-items: center; justify-content: center; border-bottom: 1px solid rgb(255 255 255 / 0.06); padding: 1.25rem; } .qr { position: relative; margin: 0 auto; width: 100%; max-width: 11rem; } .qr__frame { display: flex; aspect-ratio: 1 / 1; width: 100%; align-items: center; justify-content: center; border-radius: 1.5rem; background: #fff; padding: 0.75rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } .qr__frame img { height: 100%; width: 100%; object-fit: contain; } .qr__caption { margin-top: 1rem; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--muted-fg); } .panel__detail { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 1.25rem; } .detail__badge { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; padding: 0.25rem 0.625rem; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--coin-accent-soft); color: var(--coin-accent); } .detail__name { margin-top: 0.75rem; font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.025em; } .detail__network { margin-top: 0.25rem; font-size: 13px; color: var(--muted-fg); } .address { margin-top: 1.5rem; min-width: 0; } .address__label { margin-bottom: 0.5rem; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-fg); } .address__box { display: flex; min-width: 0; flex-direction: column; align-items: stretch; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.06); border-radius: 1rem; background: rgb(9 9 11 / 0.6); } .address__code { min-width: 0; flex: 1 1 0%; overflow-wrap: break-word; word-break: break-all; padding: 0.875rem; font-family: "Geist Mono", "Geist Mono Fallback"; font-size: 12px; line-height: 1.625; color: rgb(250 250 250 / 0.9); } .copy-btn { display: flex; min-height: 2.75rem; width: 100%; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.375rem; border-width: 0; border-top: 1px solid rgb(255 255 255 / 0.06); background: transparent; padding: 0 1rem; font-size: 12px; font-weight: 500; color: var(--muted-fg); cursor: pointer; transition: background-color 0.15s, color 0.15s; } .copy-btn:hover { background: #27272a; color: var(--fg); } .copy-btn.is-copied { color: #34d399; } /* "Copy" is hidden on narrow screens, but the "Copied" confirmation is not. */ .copy-btn__label--wide { display: none; } .copy-btn.is-copied .copy-btn__label--wide { display: inline; } /* Crossfade for the QR and the detail column when the coin changes. */ .swap { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .qr__frame.is-leaving { opacity: 0; transform: scale(0.92) rotate(3deg); } .qr__frame.is-entering { opacity: 0; transform: scale(0.92) rotate(-3deg); } .detail { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .detail.is-leaving { opacity: 0; transform: translateY(-12px); } .detail.is-entering { opacity: 0; transform: translateY(12px); } /* ------------------------------------------------------------------ footer */ .footer { margin-top: auto; border-top: 1px solid rgb(255 255 255 / 0.06); background: rgb(10 10 10 / 0.6); } .footer__inner { margin: 0 auto; max-width: 72rem; padding: 2rem 1.25rem; } .footer__text { text-align: center; font-size: 13px; color: var(--muted-fg); } .footer__text a { font-weight: 500; color: var(--fg); text-decoration: none; text-underline-offset: 2px; } .footer__text a:hover { text-decoration: underline; } /* -------------------------------------------------------------- animations */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } /* One 7s cycle: load, settle, pull-to-refresh, reload. */ @keyframes phone-progress-width { 0% { width: 0; } 28.6% { width: 100%; } 61.4% { width: 100%; } 61.5% { width: 0; } 68.6% { width: 0; } 92.9% { width: 100%; } 100% { width: 100%; } } @keyframes phone-progress-fade { 0% { opacity: 0; } 4.3% { opacity: 1; } 28.6% { opacity: 1; } 32.9% { opacity: 0; } 61.5% { opacity: 0; } 68.6% { opacity: 0; } 72.9% { opacity: 1; } 92.9% { opacity: 1; } 97.1% { opacity: 0; } 100% { opacity: 0; } } @keyframes phone-spinner-fade { 0% { opacity: 0; } 61.4% { opacity: 0; } 68.6% { opacity: 1; } 92.9% { opacity: 1; } 97.1% { opacity: 1; } 100% { opacity: 0; } } @keyframes phone-spinner-drop { 0% { transform: translate(-50%, -44px); } 61.4% { transform: translate(-50%, -44px); } 68.6% { transform: translate(-50%, 10px); } 92.9% { transform: translate(-50%, 10px); } 97.1% { transform: translate(-50%, -44px); } 100% { transform: translate(-50%, -44px); } } @keyframes phone-spinner-rotate { to { transform: rotate(360deg); } } @keyframes phone-spinner-dash { 0% { stroke-dasharray: 1 54; stroke-dashoffset: 0; } 33% { stroke-dasharray: 24 31; stroke-dashoffset: -8; } 66% { stroke-dasharray: 24 31; stroke-dashoffset: -32; } 100% { stroke-dasharray: 1 54; stroke-dashoffset: -55; } } /* ---------------------------------------------------------------- viewport */ @media (min-width: 640px) { .hero { padding: 4rem 2rem 7rem; } .hero__title { font-size: 3rem; } .hero__actions { flex-direction: row; } .features { padding: 5rem 2rem; } .features__title { font-size: 1.875rem; line-height: 2.25rem; } .donate { padding: 7rem 2rem; } .donate__title { font-size: 40px; line-height: 1.1; } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel { border-radius: 28px; } .panel__qr { padding: 2rem; } .panel__detail { padding: 2rem; } .qr { max-width: 13rem; } .detail__name { font-size: 1.875rem; line-height: 2.25rem; } .address__box { flex-direction: row; } .address__code { overflow-x: auto; white-space: nowrap; word-break: normal; overflow-wrap: normal; padding: 0.875rem 1rem; font-size: 12.5px; scrollbar-width: none; } .address__code::-webkit-scrollbar { display: none; } .copy-btn { width: auto; border-top: 0; border-left: 1px solid rgb(255 255 255 / 0.06); } .copy-btn__label--wide { display: inline; } .footer__inner { padding: 2rem; } } @media (min-width: 768px) { .panel__grid { grid-template-columns: 0.85fr 1.15fr; } .panel__qr { border-bottom: 0; border-right: 1px solid rgb(255 255 255 / 0.06); } .panel__detail { padding: 2.5rem; } } @media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: 2rem; } .hero__copy { text-align: left; } .hero__badge-row { justify-content: flex-start; } .hero__title { font-size: 58px; } .hero__lead { margin-left: 0; margin-right: 0; font-size: 17px; } .hero__actions { justify-content: flex-start; } .feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* --------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .hero__phone { opacity: 1; transform: none; transition: none; } .badge__ping, .phone__progress-bar, .phone__spinner, .phone__spinner-disc svg, .phone__spinner-disc circle { animation: none; } .phone__progress-bar { width: 100%; opacity: 0; } .phone__spinner { opacity: 0; } .swap, .detail, .coin, .panel__glow, .feature__spotlight { transition: none; } }