/* =================================================================== GETIME v2 — Real-app recreation Mirrors the iOS app: black canvas, Apple system colors, frosted cards, themeColor accent = Grimace Purple #894FA3. Ported aurora + metaball. =================================================================== */ :root { /* Real app theme color (ThemeManager default "Grimace Purple") */ --accent: #894FA3; --accent-bright: #b56fd0; --accent-soft: #d6a7ec; /* Real profile colors (from the seed) */ --p-deepwork: #007AFF; /* Ocean Blue */ --p-social: #FF5966; /* Sunset Coral */ --p-walk: #0B6E4F; /* Forest Green */ --p-quick: #FF9300; /* Tangerine */ /* iOS system colors — dark */ --bg: #000000; --surface: #1c1c1e; /* systemGray6 */ --surface-2: #2c2c2e; /* systemGray5 */ --label: #f5f5f7; --label-2: rgba(235,235,245,0.60); --label-3: rgba(235,235,245,0.30); --separator: rgba(84,84,88,0.55); --hairline: rgba(255,255,255,0.10); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --rounded: ui-rounded, "SF Pro Rounded", var(--font); /* ---- type scale ---- 58 raw font-size values collapsed onto these. Every step sits on a cluster that already existed, so nothing on the page moves more than about half a pixel; what changes is that there is now one place to tune each role. Fluid steps carry their own clamp. */ --f-3xs: .68rem; --f-2xs: .75rem; --f-xs: .82rem; --f-sm: .88rem; --f-md: .95rem; --f-base: 1.05rem; --f-lg: 1.18rem; --f-24: 1.5rem; --f-sm-fluid: clamp(.82rem, 1.4vw, .94rem); --f-lede: clamp(1.02rem, 1.5vw, 1.2rem); --f-h3: clamp(1.16rem, 2vw, 1.5rem); --f-h2: clamp(1.9rem, 4.4vw, 3rem); --f-display: clamp(2.7rem, 6.6vw, 4.8rem); --f-num: 1.625rem; /* tabular UI numerals */ --f-stat: clamp(1.5rem, 2.6vw, 2rem); /* stat and price numerals */ /* ---- weights: three, as a system should have ---- */ --w-reg: 400; --w-semi: 600; --w-bold: 700; /* ---- elevation: two steps. Focus rings, inset highlights and component glows are deliberately NOT elevation and keep their own values. ---- */ --shadow-1: 0 1px 2px rgba(0,0,0,.20), 0 8px 24px -12px rgba(0,0,0,.45); --shadow-2: 0 2px 6px rgba(0,0,0,.24), 0 24px 60px -28px rgba(0,0,0,.55); --sec-y: clamp(72px, 9vw, 128px); /* the one vertical rhythm between sections */ --gut: 22px; /* the one horizontal page gutter */ --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:28px; --r-pill:999px; --ease: cubic-bezier(0.4,0,0.2,1); --ease-out: cubic-bezier(0.16,1,0.3,1); --maxw: 1140px; --nav-h: 64px; color-scheme: dark; } /* ================================================================= THEME — dark is default. JS sets data-theme explicitly on (from the OS preference, or the user's manual toggle choice). ================================================================= */ :root[data-theme="light"] { --bg: #ffffff; --surface: #f2f2f7; /* systemGray6 light */ --surface-2: #e6e6eb; /* systemGray5 light */ --label: #1d1d1f; --label-2: rgba(60,60,67,0.75); --label-3: rgba(60,60,67,0.42); --separator: rgba(60,60,67,0.24); --hairline: rgba(0,0,0,0.10); --accent-bright: #7a3f96; /* darker for text contrast on white */ --accent-soft: #8a53a8; color-scheme: light; } /* light-mode fixes for the few surfaces that hard-code dark values */ :root[data-theme="light"] .nav { background: rgba(255,255,255,0.72); } :root[data-theme="light"] .nav.is-scrolled { border-color: rgba(0,0,0,0.12); box-shadow: var(--shadow-1); } :root[data-theme="light"] .aurora { opacity: 0.42; contain: paint; will-change: filter; } :root[data-theme="light"] .aurora-veil { background: radial-gradient(120% 60% at 50% 0%, transparent 40%, rgba(255,255,255,0.55) 78%, var(--bg) 100%), linear-gradient(180deg, rgba(255,255,255,0.20), transparent 20%, transparent 62%, var(--bg) 100%); } :root[data-theme="light"] .nav__burger { background: var(--surface); } /* ---- nav toggle buttons (language + theme) ---- */ .iconbtn { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface); color: var(--label); font-weight: var(--w-bold); font-size: var(--f-base); line-height: 1; font-family: var(--font); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); } .iconbtn:hover { background: var(--surface-2); transform: translateY(-1px); } .iconbtn svg { width: 18px; height: 18px; } /* ---- Google Play "coming soon" placeholder ---- */ .btn.is-soon { opacity: 0.62; cursor: not-allowed; } .btn.is-soon:hover { transform: none; box-shadow: none; } .soonbadge { font-style: normal; font-size: var(--f-3xs); font-weight: var(--w-bold); letter-spacing: .02em; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent); color: #fff; margin-inline-start: 2px; } .btn:not(.is-soon) .soonbadge { display: none; } /* ---- privacy → full policy link ---- */ .privacy__more { margin-top: var(--s5); } .privacy__arrow { margin-inline-start: 2px; } [dir="rtl"] .privacy__arrow { transform: scaleX(-1); } /* ---- RTL (Arabic) structural fixes ---- */ [dir="rtl"] .nav { padding: 0 16px 0 12px; } [dir="rtl"] .nav__links { margin-left: 0; margin-right: auto; } [dir="rtl"] .nav__actions { margin-left: 0; margin-right: var(--s4); } [dir="rtl"] .nav__burger { margin-left: 0; margin-right: auto; } [dir="rtl"] .nav__links a::after { left: auto; right: 0; transform-origin: right; } [dir="rtl"] .hero__meta i, [dir="rtl"] .breakdown .dur { direction: rtl; } /* ---- user stories (buyer-gated reviews) ---- */ .stories__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; margin:0 auto clamp(32px, 5vw, 48px); max-width:var(--maxw); } .stories__grid:empty { display:none; } .story { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px 24px 20px; margin:0; } .story blockquote { font-size: var(--f-base); line-height:1.55; color:var(--label); } .story blockquote::before { content:"\201C"; color:var(--accent-soft); font-weight: var(--w-bold); margin-inline-end:2px; } .story figcaption { margin-top:16px; font-size: var(--f-sm); color:var(--label-2); font-weight: var(--w-semi); } .stories__empty { grid-column:1/-1; text-align:center; color:var(--label-2); padding:24px; } .stories__form-wrap { max-width:600px; margin:0 auto; } .stories__form { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:24px; } .stories__form h3 { font-size: var(--f-lg); letter-spacing:-.01em; margin-bottom:8px; } .stories__note { color:var(--label-2); font-size: var(--f-sm); margin-bottom:16px; } .stories__row { display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; } .stories__row input { flex:1; min-width:150px; } .stories__form input, .stories__form textarea { width:100%; background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r-sm); color:var(--label); font:inherit; padding:12px 16px; outline:none; transition:border-color .15s var(--ease); } .stories__form input:focus, .stories__form textarea:focus { border-color:var(--accent-bright); } .stories__form input::placeholder, .stories__form textarea::placeholder { color:var(--label-3); } .stories__form textarea { margin-bottom:16px; resize:vertical; min-height:84px; } .stories__form .btn { width:100%; } .stories__msg { margin-top:12px; font-size: var(--f-sm); text-align:center; min-height:1.1em; } .stories__msg.is-ok { color:#34d399; } .stories__msg.is-err { color:#ff6b6b; } .stories__cta { text-align:center; margin-top:clamp(28px, 4vw, 40px); } /* ---- share-your-story modal (Apple-style sheet) ---- */ .storymodal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; } .storymodal[hidden] { display:none; } .storymodal__scrim { position:absolute; inset:0; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:scrimIn .25s var(--ease); } .storymodal__panel { position:relative; width:min(520px,100%); max-height:calc(100dvh - 40px); overflow:auto; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:32px 24px 24px; box-shadow: var(--shadow-2); animation:sheetIn .3s var(--ease-out); } .storymodal__panel .stories__form { background:transparent; border:0; padding:0; } .storymodal__x { position:absolute; top:14px; inset-inline-end:14px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--bg); border:1px solid var(--hairline); color:var(--label-2); cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); } .storymodal__x:hover { color:var(--label); background:var(--surface-2); } .storymodal__x svg { width:18px; height:18px; } @keyframes scrimIn { from { opacity:0; } to { opacity:1; } } @keyframes sheetIn { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { .storymodal__scrim, .storymodal__panel { animation:none; } } /* Visually hidden, RTL-SAFE. `left:-9999px` is invisible in LTR but in an RTL document it extends the scrollable area — it gave the Arabic pages a 10,000px horizontal scroll on a phone. This hides the honeypot without moving it off-canvas. */ input.hp { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; opacity:0; pointer-events:none; } * , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 28px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } } body { font-family: var(--font); background: var(--bg); color: var(--label); line-height: 1.5; font-size: var(--f-base); -webkit-font-smoothing: antialiased; overflow-x: clip; } svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: #fff; } /* ---- Aurora background (canvas) — top-only, forested green ---- */ .aurora { position: absolute; top: 0; left: 0; width: 100%; height: 88vh; z-index: -2; opacity: 0.62; pointer-events: none; filter: blur(26px); /* soft blur layer over the gooey aurora */ -webkit-mask-image: linear-gradient(to bottom, #000 36%, transparent 96%); mask-image: linear-gradient(to bottom, #000 36%, transparent 96%); } .aurora-veil { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; background: radial-gradient(120% 60% at 50% 0%, transparent 36%, rgba(0,0,0,0.40) 74%, #000 100%), linear-gradient(180deg, rgba(0,0,0,0.25), transparent 18%, transparent 60%, #000 100%); } /* ---- Type ---- */ /* Leading has to GROW as the type shrinks. A fixed ratio tuned for the desktop size leaves a phone with almost no space between the lines of a two line heading: at 390px this heading was 30.4px tall on a 31.9px line box, so the lines nearly touched. calc(em + rem) gives a larger ratio at small sizes and the tight desktop ratio at large ones, with no media query. */ .h2 { font-size: var(--f-h2); line-height: calc(1.04em + 0.14rem); letter-spacing: -0.025em; font-weight: var(--w-bold); text-wrap: balance; } .lede { font-size: var(--f-lede); color: var(--label-2); max-width: 56ch; line-height: 1.5; } .kicker { display:inline-block; font-size: var(--f-xs); font-weight: var(--w-semi); letter-spacing:.08em; text-transform:uppercase; color: var(--accent-soft); margin-bottom: var(--s3); } .accent { color: var(--accent-bright); } /* ---- Nav ---- */ .nav { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(var(--maxw), calc(100% - 28px)); height: var(--nav-h); display: flex; align-items: center; gap: var(--s4); padding: 0 12px 0 16px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: rgba(20,20,22,0.6); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); z-index: 100; transition: width .5s var(--ease-out), padding .45s var(--ease-out), height .35s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .nav.is-scrolled { box-shadow: var(--shadow-2); border-color: rgba(255,255,255,0.16); } /* ---- Dynamic-island nav: a full pill at the top that contracts into a compact island on scroll; tap the island to expand the menu (desktop + mobile). ---- */ .nav--compact { width: min(214px, calc(100% - 28px)); height: 54px; padding: 0 8px 0 16px; } .nav--compact .nav__links, .nav--compact .nav__actions { display: none; } .nav--compact .nav__burger { display: block; } .nav.is-open { flex-direction: column; align-items: stretch; height: auto; width: min(360px, calc(100% - 28px)); border-radius: var(--r-lg); padding: 16px 16px; gap: 16px; } .nav.is-open .brand { padding-inline-end: 40px; } .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 16px; margin: 0; width: 100%; font-size: var(--f-base); } .nav.is-open .nav__actions { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; } .nav.is-open .nav__actions .btn { flex: 1; } .nav.is-open .nav__burger { display: block; position: absolute; top: 12px; inset-inline-end: 14px; margin: 0; } .brand { display: flex; align-items: center; gap: 8px; font-weight: var(--w-bold); } .brand__dot { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d6a7ec, #894fa3 58%, #5b2a86); box-shadow: 0 0 12px rgba(137,79,163,0.6); flex-shrink: 0; } .brand__logo { width: 34px; height: 34px; display: block; } .brand__word { font-size: var(--f-base); letter-spacing: -0.01em; } .nav__links { display: flex; gap: var(--s5); margin-left: auto; font-size: var(--f-md); } .nav__links a { color: var(--label-2); transition: color .2s var(--ease); position: relative; } .nav__links a::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background: var(--accent-bright); border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform .25s var(--ease); } .nav__links a:hover { color: var(--label); } .nav__links a:hover::after { transform: scaleX(1); } /* Reading position, drawn with the same underline the hover state already uses, so the nav gains a map without gaining a new visual language. */ .nav__links a.is-current { color: var(--label); } .nav__links a.is-current::after { transform: scaleX(1); } .nav__actions { margin-left: var(--s4); display: flex; align-items: center; gap: 8px; } .nav__burger { display:none; width:42px; height:42px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--hairline); cursor:pointer; margin-left:auto; position:relative; } .nav__burger span { position:absolute; left:50%; top:50%; width:16px; height:2px; background:var(--label); border-radius:2px; transform: translate(-50%,-50%) translateY(-4px); transition: transform .25s var(--ease); } .nav__burger span:last-child { transform: translate(-50%,-50%) translateY(4px); } .nav.is-open .nav__burger span { transform: translate(-50%,-50%) rotate(45deg); } .nav.is-open .nav__burger span:last-child { transform: translate(-50%,-50%) rotate(-45deg); } /* ---- Buttons ---- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size: var(--f-md); font-weight: var(--w-semi); letter-spacing:-0.01em; padding:12px 24px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; white-space:nowrap; min-height:44px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .btn--sm { padding:8px 16px; min-height:40px; font-size: var(--f-md); } .btn--lg { padding:16px 28px; font-size: var(--f-base); } .ic { stroke-width:1.6; } .btn--primary { color:#fff; background: linear-gradient(180deg, var(--accent-bright), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); } .btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26); } .btn--glass { background: var(--surface); color: var(--label); border-color: var(--hairline); } .btn--glass:hover { background: var(--surface-2); transform: translateY(-2px); } /* ---- Layout ---- */ .section { max-width: var(--maxw); margin: 0 auto; padding: var(--sec-y) var(--gut) 0; } .section__head { max-width: 720px; margin: 0 auto clamp(36px, 6vw, 60px); text-align: center; } .section__head .lede { margin: var(--s4) auto 0; } /* ---- Hero ---- */ .hero { max-width: var(--maxw); margin: 0 auto; min-height: 100svh; display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: var(--s7); padding: calc(var(--nav-h) + 52px) 22px 48px; } .hero__copy { max-width: 560px; } .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--r-pill); background: var(--surface); border:1px solid var(--hairline); font-size: var(--f-sm); color: var(--label-2); margin-bottom: var(--s5); } .eyebrow__pulse { width:7px; height:7px; border-radius:50%; background:#32d74b; box-shadow:0 0 0 4px rgba(50,215,75,0.18); } .hero__title { font-size: var(--f-display); line-height: calc(1.02em + 0.16rem); letter-spacing:-0.035em; font-weight: var(--w-bold); text-wrap: balance; margin-bottom: var(--s5); } .hero__sub { font-size: var(--f-lede); color: var(--label-2); margin-bottom: var(--s6); max-width: 50ch; } .hero__cta { display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom: var(--s6); } .hero__meta { display:flex; align-items:center; gap:var(--s3); font-size: var(--f-md); color: var(--label-2); flex-wrap: wrap; } .hero__meta strong { color: var(--label); } .hero__meta i { width:4px; height:4px; border-radius:50%; background: var(--label-3); display:inline-block; } /* ---- Phone ---- */ .hero__phone { display: grid; place-items: center; } .phone { width: 300px; max-width: 86vw; filter: drop-shadow(0 50px 90px rgba(0,0,0,0.7)); } .phone__frame { position: relative; border-radius: 54px; padding: 12px; background: linear-gradient(155deg, #2a2330, #141118); box-shadow: inset 0 1px 1px rgba(255,255,255,0.14), 0 0 0 1px rgba(255,255,255,0.06); } .phone__island { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:96px; height:30px; background:#000; border-radius:var(--r-pill); z-index:5; } .phone__screen { position:relative; border-radius:44px; overflow:hidden; aspect-ratio: 9/19.5; background:#000; } /* ---- App UI (real dashboard) ---- */ .appui { position:absolute; inset:0; padding: 40px 16px 16px; display:flex; flex-direction:column; color: var(--label); } .appui__status { display:flex; justify-content:space-between; align-items:center; font-size: var(--f-2xs); font-weight: var(--w-semi); padding: 0 8px 4px; } .appui__sig { display:inline-flex; gap:2px; align-items:flex-end; height:11px; } .appui__sig i { width:3px; background: var(--label); border-radius:1px; } .appui__sig i:nth-child(1){height:4px} .appui__sig i:nth-child(2){height:6px} .appui__sig i:nth-child(3){height:8px} .appui__sig i:nth-child(4){height:11px} .appui__title { font-size: var(--f-num); font-weight: var(--w-bold); letter-spacing:-0.02em; padding: 2px 8px 0; } .appui__section { font-size: var(--f-xs); color: var(--label-2); padding: 8px 8px 8px; } .appui__card { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); padding: 16px 12px 12px; } .appui__dots { display:flex; justify-content:center; gap:8px; padding-top:12px; } .appui__dots i { width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.25); } .appui__dots i.on { background: var(--accent); } /* ---- Hero "Emergency Unblock" (exact port of MetaballTest ContentView) ---- The stage is a phone-proportioned screen (390:844); the box the goo lives in is an upright ISO credit card sized by ContentView's own formula. Z-order is the ContentView ZStack: title → card outline → pixel bloom → goo field → sealed message → spilled caption. */ .hero__box { display:flex; flex-direction:column; align-items:center; gap:20px; } /* mobile-screen sized or smaller: capped at 320px wide AND never taller than ~78% of the viewport (36svh × the 844/390 aspect ≈ 78svh) */ /* A WIDE, SHALLOW BAND. This was a phone-shaped portrait (~1:2.2): it pushed the copy around it out of view and made the shader repaint a needlessly large surface every frame. 16:10 keeps the goo readable while the headline above and the tap affordance below stay on screen together, on a laptop and on a phone. */ .mbox { position:relative; width: min(320px, 86vw); width: min(320px, 86vw, 36svh); aspect-ratio: 390 / 844; border-radius: 28px; overflow:hidden; cursor:pointer; background: #000; border:1px solid var(--hairline); box-shadow: 0 44px 90px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05); -webkit-tap-highlight-color: transparent; transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); } .mbox:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; } /* once sealed the phone panel melts away — just the sealed card and its pixels */ .mbox.is-sealed { background: transparent; border-color: transparent; box-shadow: none; cursor: default; } /* headline + brief, flowed ABOVE the card so they never overlap the goo; they melt away once the card seals (JS toggles .is-gone) */ .mb-head { text-align:center; max-width:40ch; transition: opacity .5s var(--ease); } .mb-head.is-gone { opacity:0; } .mb-title { font-size: var(--f-h3); font-weight: var(--w-semi); color:var(--label); letter-spacing:-0.01em; margin-bottom:8px; } .mb-brief { font-size: var(--f-sm-fluid); font-weight: var(--w-reg); color:var(--label-2); line-height:1.55; } /* the Getime-card outline the goo is sealed in (theme tint at 30%); visible whenever the goo is boxed — including sealed — hidden while spilled */ .mb-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:2; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: opacity .3s var(--ease); } .mbox.is-filled .mb-card { opacity:0; } /* the pixel grid blooms inside the card, BEHIND the dissolving goo; it pops off instantly when the sealed card is tapped (no fade — as the prototype) */ .mb-bloom { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; z-index:3; } .mbox.is-sealed .mb-bloom { opacity:1; } /* the goo field: card-sized in the box, full-stage while spilled. The resize springs — spill ≈ spring(0.9, 0.85), reseal ≈ spring(0.4, 0.85) (damping 0.85 ⇒ <1% overshoot, so a smooth ease-out IS the spring) — and the sealed fade is 0.15s each way, exactly pixelStartDelay. */ .mb-field { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); overflow:hidden; z-index:4; transition: width .5s cubic-bezier(0.25,1,0.35,1), height .5s cubic-bezier(0.25,1,0.35,1), border-radius .5s cubic-bezier(0.25,1,0.35,1), opacity .15s ease-in-out; } .mbox.is-filled .mb-field { transition-duration: .9s, .9s, .9s, .15s; } .mb-field.no-anim { transition: none !important; } .mbox.is-sealed .mb-field { opacity:0; } .mb-gl, .mb-labels { position:absolute; inset:0; width:100%; height:100%; display:block; } .mb-labels { pointer-events:none; } /* "Sealed. Back to focus." — SplitTextView: each letter rises 40px on power3.out over 1.2s; per-span transition-delay carries the 0.05s stagger */ .mb-promise { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; pointer-events:none; z-index:5; padding:0 16px; font-weight: var(--w-semi); font-size: var(--f-lg); line-height:1.2; color:#fff; text-shadow:0 0 6px rgba(0,0,0,0.6); } .mb-promise span { display:inline-block; opacity:0; transform:translateY(40px); white-space:pre; transition: opacity 1.2s cubic-bezier(0.215,0.61,0.355,1), transform 1.2s cubic-bezier(0.215,0.61,0.355,1); } .mb-promise.is-in span { opacity:1; transform:none; } /* "Tap 3× to gather it back into the box" — footnote capsule centred at y=54 */ .mb-caption { position:absolute; left:50%; top:54px; transform:translate(-50%,-50%); z-index:6; pointer-events:none; font-size: var(--f-xs); font-weight: var(--w-semi); color:rgba(255,255,255,0.9); white-space:nowrap; padding:8px 16px; border-radius:var(--r-pill); background:rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity:0; transition: opacity .25s var(--ease); } .mbox.is-filled .mb-caption { opacity:1; } /* light mode: the stage goes white (site-level adaptation; the prototype is dark-only) — and still melts away once sealed */ :root[data-theme="light"] .mbox { background:#fff; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.16); border-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .mbox.is-sealed { background: transparent; border-color: transparent; box-shadow: none; } :root[data-theme="light"] .mb-promise { color: var(--label); text-shadow: 0 1px 6px rgba(255,255,255,0.65); } :root[data-theme="light"] .mb-caption { background: rgba(0,0,0,0.5); color:#fff; } /* ---- Week strip ---- */ .weekstrip { display:grid; grid-template-columns: repeat(7,1fr); gap:2px; margin-bottom: 12px; } .weekday { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; } .weekday__l { font-size:10px; color: var(--label-2); width:16px; height:16px; display:grid; place-items:center; border-radius:50%; } .weekday.is-today .weekday__l { background: var(--accent); color:#fff; font-weight: var(--w-bold); } .weekday.is-sel .weekday__l { color: var(--accent-bright); font-weight: var(--w-bold); } .weekday__mini { width: 26px; height: 26px; } .weekday.is-sel .weekday__mini { outline: 1.5px solid var(--accent-bright); outline-offset: 2px; border-radius: 50%; } /* ---- Rings ---- */ .ringwrap { position:relative; display:grid; place-items:center; margin: 4px auto; width: 168px; height: 168px; } .ringwrap--lg { width: clamp(240px, 34vw, 320px); height: clamp(240px, 34vw, 320px); } .rings { width:100%; height:100%; } .rings svg { width:100%; height:100%; transform: rotate(-90deg); overflow: visible; } .rings__label { position:absolute; text-align:center; display:flex; flex-direction:column; gap:1px; } .rings__total { font-family: var(--rounded); font-size: var(--f-num); font-weight: var(--w-bold); letter-spacing:-0.02em; font-variant-numeric: tabular-nums; } .rings__total--lg { font-size: clamp(40px, 6vw, 60px); } .rings__goal { font-size: var(--f-3xs); color: var(--label-2); } .ringwrap--lg .rings__goal { font-size: var(--f-md); } .rings__date { margin-top:8px; font-size: var(--f-sm); color: var(--accent-soft); font-weight: var(--w-semi); } /* ---- Rings showcase ---- */ .rings-show__stage { display:grid; grid-template-columns: 1fr 0.9fr; align-items:center; gap: clamp(28px, 5vw, 64px); max-width: 980px; margin: 0 auto; } .bigring { display:grid; place-items:center; } .dayselect { display:flex; gap:12px; margin-bottom: var(--s5); flex-wrap: wrap; } .daybtn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:56px; height:56px; padding:0; border-radius:50%; background: var(--surface); border:1px solid var(--hairline); cursor:pointer; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .daybtn:hover { background: var(--surface-2); transform: translateY(-2px); } .daybtn.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent); } .daybtn__d { font-size: var(--f-2xs); color: var(--label-2); font-weight: var(--w-semi); } .daybtn.is-sel .daybtn__d { color: var(--accent-soft); } .daybtn__n { font-size: var(--f-base); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; } .breakdown { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom: var(--s4); min-height: 132px; } .breakdown li { display:flex; align-items:center; gap:12px; font-size: var(--f-md); opacity:0; transform: translateY(6px); animation: bdin .4s var(--ease-out) forwards; } @keyframes bdin { to { opacity:1; transform:none; } } .breakdown .dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; } .breakdown .nm { font-weight: var(--w-semi); } .breakdown .dur { margin-left:auto; color: var(--label-2); font-variant-numeric: tabular-nums; } .autobadge { display:inline-flex; align-items:center; gap:8px; font-size: var(--f-sm); color: var(--label-2); padding:8px 16px; border-radius:var(--r-pill); background: var(--surface); border:1px solid var(--hairline); } .autobadge::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--accent-bright); animation: blink 1.6s var(--ease) infinite; } .autobadge.is-paused::before { background: var(--label-3); animation:none; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } /* ---- Profile cards (frosted, per-profile aurora glow) ---- */ .profile-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s4); } .pcard { position:relative; overflow:hidden; border-radius: var(--r-lg); border:1px solid var(--hairline); padding: 12px 16px; background: var(--surface); transition: transform .25s var(--ease), border-color .25s var(--ease); } .pcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--label) 18%, transparent); } /* the glow bled well past the card vertically, which is most of why it read as tall */ .pcard__glow { position:absolute; width:44%; aspect-ratio:1.6; right:-4%; top:50%; transform: translateY(-50%); border-radius:50%; background: radial-gradient(circle, var(--c), transparent 65%); opacity:.42; filter: blur(18px); pointer-events:none; } .pcard__body { position:relative; z-index:1; } .pcard__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 3px; } .pcard__name { font-size: var(--f-base); font-weight: var(--w-bold); letter-spacing:-0.02em; } .pcard__chev { width:20px; height:20px; border-radius:50%; background: color-mix(in srgb, var(--label) 8%, transparent); display:grid; place-items:center; color: var(--label-2); } .pcard__chev svg { stroke-width:2.2; } .pcard__tags { display:flex; gap:12px; margin: 1px 0 8px; flex-wrap:wrap; } .pcard__tag { display:inline-flex; align-items:center; gap:4px; font-size: var(--f-3xs); color: var(--label-2); } .pcard__tag::before { content:""; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.7); } .pcard__strat { display:flex; align-items:center; gap:8px; padding: 4px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); } .pcard__sicon { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); } .pcard__sicon svg { stroke-width:2; width:13px; height:13px; } .pcard__sname { font-size: var(--f-sm); font-weight: var(--w-semi); } /* one compact row: label and value on the SAME line, which is where most of the old height went (three stacked two-line columns) */ .pcard__stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px; } .pcard__stat { display:flex; flex-direction:row; align-items:baseline; gap:4px; } .pcard__stat .k { font-size: var(--f-3xs); order:2; color: var(--label-2); } .pcard__stat .v { font-size: var(--f-md); order:1; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; } .pcard__cta { margin-top: 8px; display:flex; align-items:center; justify-content:center; gap:8px; height:30px; border-radius: var(--r-sm); font-weight: var(--w-semi); font-size: var(--f-sm); background: color-mix(in srgb, var(--label) 7%, transparent); border:1px solid var(--hairline); color: var(--label); } .pcard__cta svg { stroke-width:2; color: var(--c); } .pcard--active { border-color: color-mix(in srgb, var(--c) 50%, transparent); } .pcard__live { position:absolute; top:12px; inset-inline-end:14px; z-index:2; font-size: var(--f-3xs); font-weight: var(--w-bold); color: var(--c); } /* ---- Habit: heatmap + chart ---- */ .habit { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s4); max-width: var(--maxw); } .panel { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); padding: 20px; height: 100%; display:flex; flex-direction:column; } /* push both charts to the bottom so the bar baselines line up with the heatmap's bottom row across the two equal-height panels */ .heatmap, .barchart { margin-top: auto; } .panel__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--s5); } .panel__head h3 { font-size: var(--f-base); font-weight: var(--w-semi); color: var(--label-2); } .panel__big { font-family: var(--rounded); font-size: var(--f-24); font-weight: var(--w-bold); } .panel__legend { display:flex; align-items:center; gap:4px; font-size: var(--f-2xs); color: var(--label-2); } .panel__legend i { width:11px; height:11px; border-radius:3px; } .heatmap { display:flex; flex-direction:column; gap:4px; } .heatmap__row { display:grid; grid-template-columns: repeat(7,1fr); gap:4px; } .heatmap__cell { aspect-ratio:1; border-radius:4px; background: color-mix(in srgb, var(--label) 7%, transparent); } .barchart { display:grid; grid-template-columns: repeat(7,1fr); gap:8px; align-items:end; height: 180px; padding-top: 8px; } .bar { position:relative; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; } .bar__fill { width:100%; max-width:30px; border-radius:6px 6px 0 0; background: var(--accent); min-height:4px; transition: height 1s var(--ease-out); } /* labels out of flow so the bar baselines line up with the heatmap's bottom row */ .bar__l { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; font-size: var(--f-2xs); color: var(--label-2); font-weight: var(--w-semi); white-space:nowrap; } /* ---- Strategies ---- */ .strat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); } .strat { position:relative; overflow:hidden; padding: var(--s5); border-radius: var(--r-md); background: var(--surface); border:1px solid var(--hairline); transition: transform .25s var(--ease), border-color .25s var(--ease); } .strat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--label) 18%, transparent); } .strat__icn { position:relative; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 18%, transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); margin-bottom: var(--s4); } .strat__icn svg { width:17px; height:17px; } .strat__plus { position:absolute; top:-5px; inset-inline-end:-5px; width:17px; height:17px; border-radius:50%; background:var(--accent); color:#fff; font-weight: var(--w-bold); font-size: var(--f-2xs); line-height: 17px; font-family: var(--font); text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.3); } .strat__tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .strat__tag { font-size: var(--f-3xs); font-weight: var(--w-semi); letter-spacing:.02em; padding:3px 8px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .strat__note { margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline); font-size: var(--f-xs); line-height:1.5; color:var(--label-3); } /* card header: icon + title + tag on one row, above the brief */ /* one line: icon, title, then the mode tag. nowrap keeps the tag beside the title instead of dropping it to a second row, and the title is the part allowed to shrink. */ /* One head block: the icon sits beside the title and the mode tag tucks under it, so the three read as a single unit. Forcing all three onto one physical row squeezed the longer titles into four lines, which is the opposite of unified. */ .strat__head { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; row-gap:8px; margin-bottom: var(--s3); } .strat__head .strat__icn { grid-row:1; align-self:center; } .strat__head h3 { grid-column:2; margin:0; font-size: var(--f-base); line-height:1.25; text-wrap: balance; } .strat__head .strat__tags { grid-column:2; margin:0; } /* the mode tag is a label, not a heading: it gives the title back the width it needs to stay on one line beside the icon */ /* the mode is a quiet label, not a badge: a capsule here competed with the title it describes */ .strat__head .strat__tag { padding:0; border:0; background:none; color: var(--label-3); font-size: var(--f-2xs); font-weight: var(--w-reg); letter-spacing:.04em; text-transform:uppercase; } .strat__head .strat__icn { margin-bottom:0; flex:none; } .strat__head h3 { margin:0; } .strat__head .strat__tags { margin:0; } .strat h3 { font-size: var(--f-lg); letter-spacing:-0.02em; margin-bottom:8px; } .strat p { color: var(--label-2); font-size: var(--f-md); } .strat__beta { position:absolute; top:18px; right:18px; font-size: var(--f-3xs); font-weight: var(--w-bold); letter-spacing:.06em; color: var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%, transparent); padding:3px 8px; border-radius:var(--r-pill); } /* ---- The Card ---- */ .card-show { display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(32px, 6vw, 80px); } .card-show__media { position:relative; display:grid; place-items:center; min-height: 360px; } /* was a fixed 340px circle, i.e. wider than a 320px phone, so this decorative glow was pushing the page sideways. It is decoration: it should never define the page width. */ .card-show__halo { position:absolute; width:min(340px, 100%); aspect-ratio:1; height:auto; border-radius:50%; background: radial-gradient(circle, var(--accent), transparent 62%); opacity:.45; filter: blur(28px); } .card-show__img { position:relative; width: clamp(220px,30vw,300px); filter: drop-shadow(0 40px 50px rgba(0,0,0,0.5)); z-index:2; animation: floaty 6s var(--ease) infinite alternate; } @keyframes floaty { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-16px) rotate(-2deg); } } .tap-hint { position:absolute; top:22%; right:14%; z-index:4; font-size: var(--f-xs); font-weight: var(--w-bold); color:#fff; padding:8px 16px; border-radius:var(--r-pill); background: var(--accent); box-shadow:0 8px 20px -6px rgba(137,79,163,0.9); animation: tapb 2.6s var(--ease) infinite; transition: opacity .4s var(--ease); pointer-events:none; } @keyframes tapb { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } /* ---- Tap-to-reveal pixel card (narrow black Getime card) ---- */ .pixelcard { position:relative; width: clamp(184px, 23vw, 224px); aspect-ratio: 1 / 1.58; border-radius: 20px; overflow:hidden; cursor:pointer; z-index:2; background:#05140d; border:1px solid rgba(255,255,255,0.12); outline:none; animation: floaty 7s var(--ease) infinite alternate; } .pixelcard:focus-visible { box-shadow: 0 0 0 3px var(--accent-bright); } .pixelcard__canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; } /* flat purple card — no aurora, no shine */ .gcard { position:absolute; inset:0; background:#894FA3; border-radius:20px; overflow:hidden; transition: filter .55s var(--ease); } .gcard.is-blurred { filter: blur(10px); } .gcard__body { position:absolute; inset:0; padding:16px 16px; display:flex; flex-direction:column; justify-content:space-between; color:#ffffff; z-index:1; } .gcard__top { display:flex; align-items:flex-start; justify-content:space-between; } .gcard__brand { font-weight: var(--w-bold); font-size: var(--f-lg); letter-spacing:-0.02em; } .gcard__chip { width:34px; height:26px; border-radius:6px; background:#e8d9a0; } .gcard__nfc { align-self:flex-end; color:rgba(255,255,255,0.92); } .gcard__nfc svg { stroke-width:2; } .gcard__bottom { display:flex; flex-direction:column; gap:4px; } .gcard__label { font-size: var(--f-2xs); font-weight: var(--w-semi); color:rgba(255,255,255,0.92); letter-spacing:.02em; } .gcard__dots { font-size: var(--f-sm); letter-spacing:.14em; color:rgba(255,255,255,0.8); font-variant-numeric:tabular-nums; } .ticks { list-style:none; display:flex; flex-direction:column; gap:12px; margin: var(--s5) 0 var(--s6); } .ticks li { display:flex; align-items:center; gap:12px; font-size: var(--f-base); } .ticks svg { flex-shrink:0; color:#32d74b; stroke-width:2.2; } /* ---- Privacy (text-only) ---- */ .privacy__card { padding: clamp(32px, 5vw, 60px); border-radius: var(--r-xl); background: var(--surface); border:1px solid var(--hairline); } .privacy__copy { max-width: 64ch; } .pills { display:flex; flex-wrap:wrap; gap:8px; margin-top: var(--s5); } .pill { display:inline-flex; align-items:center; gap:8px; font-size: var(--f-sm); font-weight: var(--w-semi); padding:8px 16px; border-radius:var(--r-pill); background: var(--surface-2); border:1px solid var(--hairline); color: var(--label-2); } .pill svg { color: var(--accent-soft); } /* ---- CTA ---- */ .cta { max-width: var(--maxw); margin: var(--sec-y) auto 0; padding: 0 var(--gut); } .cta__inner { position:relative; overflow:hidden; text-align:center; padding: clamp(48px, 8vw, 88px) 24px; border-radius: var(--r-xl); background: var(--surface); border:1px solid color-mix(in srgb, var(--label) 16%, transparent); } .cta__inner::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 50% 0%, rgba(137,79,163,0.4), transparent 70%); } .cta__inner > * { position: relative; } .cta__logo { width: 92px; height: 92px; margin: 0 auto var(--s5); display:block; } .cta__title { font-size: clamp(2.2rem,5.5vw,4rem); line-height: calc(1.02em + 0.16rem); letter-spacing:-0.035em; font-weight: var(--w-bold); text-wrap: balance; } .cta__sub { color: var(--label-2); font-size: var(--f-lede); margin: var(--s4) auto var(--s6); max-width: 44ch; } .cta__buttons { display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; } /* ---- Footer ---- */ .footer { max-width: var(--maxw); margin: var(--sec-y) auto 0; padding: var(--s7) var(--gut); border-top:1px solid var(--hairline); } .footer__top { display:flex; align-items:center; gap: var(--s4); flex-wrap:wrap; } .footer__tag { color: var(--label-2); } .footer__links { display:flex; flex-wrap:wrap; gap: var(--s5); margin: var(--s5) 0; font-size: var(--f-md); } .footer__links a { color: var(--label-2); } .footer__links a:hover { color: var(--label); } .footer__legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); font-size: var(--f-xs); color: var(--label-2); padding-top: var(--s5); border-top:1px solid var(--hairline); } /* ---- Keyboard focus (WCAG 2.4.7) ---- */ /* Visible ring for keyboard/switch users only; mouse clicks stay clean. */ :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: inherit; } :focus:not(:focus-visible) { outline: none; } /* Pill buttons: clear the rounded corners and mirror the hover lift */ .btn:focus-visible { outline-offset: 4px; } .btn--primary:focus-visible { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26); } .btn--glass:focus-visible { background: var(--surface-2); transform: translateY(-2px); } /* Nav links: mirror the underline + colour change */ .nav__links a:focus-visible { color: var(--label); outline-offset: 5px; } .nav__links a:focus-visible::after { transform: scaleX(1); } .nav__burger:focus-visible { outline-offset: 3px; } /* Day selector + cards/tiles + footer links: mirror their hover affordance */ .daybtn:focus-visible { background: var(--surface-2); transform: translateY(-2px); } .pcard:focus-visible, .strat:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--label) 18%, transparent); } .footer__links a:focus-visible { color: var(--label); } /* ---- Reveal ---- */ [data-reveal] { opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } [data-reveal].is-in { opacity:1; transform:none; } /* ---- Responsive ---- */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; text-align:center; min-height:auto; gap: var(--s7); padding-top: calc(var(--nav-h) + 36px); } .hero__copy { max-width: 620px; margin: 0 auto; } .hero__cta, .hero__meta { justify-content:center; } .hero__sub { margin-left:auto; margin-right:auto; } .rings-show__stage { grid-template-columns: 1fr; justify-items:center; } .rings-show__side { text-align:center; } .dayselect, .breakdown { justify-content:center; align-items:center; } .card-show, .privacy__card { grid-template-columns: 1fr; text-align:center; } .card-show__copy .ticks { align-items:center; } .privacy__copy .lede, .card-show__copy .lede { margin-left:auto; margin-right:auto; } .pills { justify-content:center; } .habit { grid-template-columns: 1fr; } } @media (max-width: 760px) { .nav__links, .nav__actions { display:none; } .nav__burger { display:block; } .profile-grid, .strat-grid { grid-template-columns: 1fr; } } /* ================================================================ APP SCREENSHOTS (#screens) Placeholder frames are visible on purpose until real screenshots exist: a device outline, a hairline border and a faint diagonal hatch, so an empty frame reads as a deliberate slot rather than a failed image. When the real s land they fill the frame edge to edge and the hatch is dropped (.is-placeholder is removed). ================================================================ */ .screens__row { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 860px; margin-inline: auto; } .screens__fig { margin:0; display:flex; flex-direction:column; gap:12px; } .screens__frame { position:relative; aspect-ratio: 9 / 19.5; border-radius:44px; overflow:hidden; border:1px solid var(--hairline); background: var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 60px -20px rgba(0,0,0,0.55); display:grid; place-items:center; } .screens__frame img { width:100%; height:100%; object-fit:cover; display:block; } /* the placeholder treatment: faint tint + diagonal hatch, dropped once real shots ship */ .screens.is-placeholder .screens__frame { background-image: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 3%, transparent)), repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 9%, transparent) 0 2px, transparent 2px 11px); } .screens__ph { display:none; font-size: var(--f-2xs); font-weight: var(--w-semi); letter-spacing:.06em; text-transform:uppercase; color: var(--label-3); padding:8px 12px; border-radius:var(--r-pill); background: color-mix(in srgb, var(--bg) 78%, transparent); border:1px solid var(--hairline); } .screens.is-placeholder .screens__ph { display:inline-block; } .screens__cap { font-size: var(--f-sm); color: var(--label-2); text-align:center; text-wrap:balance; } /* Phones: one frame at a time, swiped, with snap. The row is allowed to bleed to the viewport edges so the next card peeks — but the PAGE must never scroll sideways, so the scrolling lives on this container only. */ @media (max-width: 760px) { /* NO vw UNITS HERE. `vw` includes the scrollbar width, so `100vw`/`62vw` inside a scroll container computed ~10px wider than the actual content box and pushed the whole PAGE sideways at 320px. Percentages resolve against the container, which is what we want. */ .screens__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(68%, 240px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-inline: 24px; margin-inline: 0; max-width: 100%; scrollbar-width: none; } .screens__row::-webkit-scrollbar { display:none; } .screens__item { scroll-snap-align:center; } .screens__frame { border-radius:34px; } } /* ================================================================ FAQ (#faq) Native

: accessible and searchable with no JS. The marker is a custom +/× rule pair so it reads the same in both directions; `inset-inline-end` keeps it on the correct side in Arabic without a separate RTL rule. ================================================================ */ .faq__wrap { max-width: 760px; margin-inline: auto; } .faq__group { font-size: var(--f-2xs); font-weight: var(--w-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); margin: clamp(24px, 3.4vw, 40px) 0 12px; } .faq__group:first-child { margin-top: 0; } .faq__item { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); margin-bottom: 12px; overflow: hidden; transition: border-color .2s var(--ease), background .2s var(--ease); } .faq__item[open] { border-color: color-mix(in srgb, var(--accent) 34%, var(--hairline)); } .faq__item:hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--hairline)); } .faq__q h3 { font: inherit; margin: 0; display: inline; } .faq__q { cursor: pointer; list-style: none; position: relative; padding: 16px 52px 16px 20px; font-size: var(--f-base); font-weight: var(--w-semi); color: var(--label); display: block; } [dir="rtl"] .faq__q { padding: 16px 20px 16px 52px; } .faq__q::-webkit-details-marker { display: none; } /* the +/× marker, drawn from two rules so it needs no glyph and mirrors cleanly */ .faq__q::before, .faq__q::after { content: ""; position: absolute; top: 50%; inset-inline-end: 20px; width: 13px; height: 2px; border-radius: 2px; background: var(--accent-soft); transition: transform .22s var(--ease), background .22s var(--ease); } .faq__q::before { transform: translateY(-50%); } .faq__q::after { transform: translateY(-50%) rotate(90deg); } .faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(0deg); } .faq__item[open] .faq__q::before, .faq__item[open] .faq__q::after { background: var(--accent-bright); } .faq__q:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -3px; border-radius: var(--r-md); } .faq__a { padding: 0 20px 16px; color: var(--label-2); font-size: var(--f-md); line-height: 1.62; } .faq__a p + p { margin-top: 12px; } .faq__a .linklike { color: var(--accent-bright); } /* price/delivery pulled from the shared keys, so they read as fact rather than prose */ .faq__fact { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: baseline; color: var(--label); font-weight: var(--w-semi); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); padding: 8px 12px; border-radius: var(--r-pill); font-size: var(--f-sm); } @media (prefers-reduced-motion: reduce) { .faq__q::before, .faq__q::after, .faq__item { transition: none; } } /* ---- the hook kicker above the demo (batch 4a) ---- */ .mb-kicker { font-size: var(--f-2xs); font-weight: var(--w-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 8px; } /* The card section carries the answer the hook sets up, so its lede gets room to breathe instead of being one more paragraph. */ .card-show__copy .lede { font-size: var(--f-lede); line-height: 1.62; max-width: 46ch; } /* ================================================================ THE REALITY (#reality) Rings and arcs, matching the app's activity-ring language rather than a generic chart. The arc length is driven by --arc (0-1) and drawn with stroke-dashoffset so it can be animated by CSS alone; the count-up is the only JS involved. ================================================================ */ .reality__grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px, 2vw, 24px); max-width: var(--maxw); margin-inline:auto; } .rtile { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(16px, 2.2vw, 24px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; } .rtile--turn { border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); } .rtile__viz { position:relative; width: clamp(94px, 11vw, 118px); aspect-ratio:1; display:grid; place-items:center; } .rtile__ring { position:absolute; inset:0; width:100%; height:100%; transform: rotate(-90deg); } .rtile__track, .rtile__arc { fill:none; stroke-width:7; stroke-linecap:round; /* r=42 → circumference 2πr ≈ 263.9 */ stroke-dasharray: 263.9; } .rtile__track { stroke: var(--hairline); } .rtile__arc { stroke: var(--accent-bright); stroke-dashoffset: 263.9; transition: stroke-dashoffset 1.1s var(--ease-out); } .reality.is-live .rtile__arc { stroke-dashoffset: calc(263.9 - (263.9 * var(--arc))); } .rtile--turn .rtile__arc { stroke: var(--accent-soft); } .rtile__num { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: var(--w-bold); letter-spacing:-0.03em; color: var(--label); font-variant-numeric: tabular-nums; line-height:1; } .rtile__word { font-size: var(--f-sm-fluid); font-weight: var(--w-bold); color: var(--label); letter-spacing:-0.01em; max-width: 74%; line-height:1.2; } .rtile__unit { font-size: var(--f-2xs); font-weight: var(--w-semi); letter-spacing:.06em; text-transform:uppercase; color: var(--accent-soft); margin-top:-4px; } .rtile__claim { font-size: var(--f-md); line-height:1.55; color: var(--label-2); text-wrap:balance; } .rtile__src { font-size: var(--f-2xs); color: var(--label-3); font-style:italic; } @media (max-width: 900px) { .reality__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 480px) { .reality__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .rtile__arc { transition: none; } } /* ============================================================ v2 sections — cost (repurposed #reality), why, how, limits. Built on the existing tokens + .section/.rtile primitives. ============================================================ */ /* cost: five sourced stat tiles, no ring viz */ .cost__grid { grid-template-columns: repeat(5, minmax(0,1fr)); align-items: stretch; } .cost .rtile { align-items: flex-start; text-align: start; gap: var(--s3); padding: var(--s4); } .rtile__num--stat { font-size: var(--f-stat); font-weight: var(--w-bold); letter-spacing: -0.03em; color: var(--accent-soft); font-variant-numeric: tabular-nums; line-height: 1.1; } .cost__src { max-width: 760px; margin: var(--s5) auto 0; text-align: center; font-size: var(--f-2xs); color: var(--label-3); line-height: 1.6; } @media (max-width: 900px) { .cost__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 480px) { .cost__grid { grid-template-columns: 1fr; } } /* prose blocks: why, limits */ .prose { max-width: 62ch; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); } .prose p { font-size: var(--f-lede); line-height: 1.62; color: var(--label-2); } .prose .pull { font-size: var(--f-h3); line-height: 1.35; font-weight: var(--w-semi); color: var(--label); letter-spacing: -0.02em; border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s4); margin-top: var(--s2); text-wrap: balance; } /* how: three numbered steps */ .how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); } .how__step { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); } .how__n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--w-bold); font-size: var(--f-base); line-height: 1; font-family: var(--rounded); color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .how__t { font-size: var(--f-lg); letter-spacing: -0.02em; } .how__b { font-size: var(--f-md); line-height: 1.55; color: var(--label-2); } @media (max-width: 760px) { .how__steps { grid-template-columns: 1fr; } } /* closing: the Android-in-review line */ .cta__android { margin: var(--s5) auto 0; max-width: 42ch; font-size: var(--f-sm); color: var(--label-2); } /* card: sub-headings introduced in the formatting pass */ .card-show__sub { font-size: var(--f-2xs); font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); margin-top: var(--s5); margin-bottom: var(--s3); } .mb-caption { transition: opacity .2s var(--ease); } /* SEO landing pages (/exams, /study, /ramadan) — reuse .section/.how__steps/.cta */ .landing { padding-top: calc(var(--sec-y) + var(--nav-h)); } .landing__back { display: table; margin: 0 auto var(--s4); } .landing__lead { max-width: 62ch; margin: var(--s5) auto 0; text-align: center; } .landing__lead p { font-size: var(--f-lede); line-height: 1.6; color: var(--label-2); } .landing__steps { margin-top: var(--s2); } /* card: the distance paragraph + the three real use-cases */ .card-show__body { color: var(--label-2); font-size: var(--f-md); line-height: 1.62; margin-top: var(--s4); max-width: 46ch; } .card-show__uses { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .card-show__uses li { position: relative; padding-inline-start: var(--s4); font-size: var(--f-sm); color: var(--label-2); line-height: 1.5; } .card-show__uses li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); } /* ---- price + delivery on the homepage card section (batch 5) ---- */ .cardprice { margin: var(--s5) 0 var(--s4); } .cardprice__row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .cardprice__amount { font-size: var(--f-stat); font-weight: var(--w-bold); letter-spacing:-0.03em; color: var(--label); font-variant-numeric: tabular-nums; } .cardprice__cod { font-size: var(--f-xs); font-weight: var(--w-semi); color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); padding:4px 12px; border-radius: var(--r-pill); } .cardprice__ship { margin-top:8px; font-size: var(--f-sm); color: var(--label-2); } /* ---- strategies 3D carousel ---- Active card centred and crisp; neighbours peek left/right, scaled and dimmed; the rest hidden. Fixed height, so the page scrolls past normally (no pinned wheel). */ /* overflow-x: clip (not hidden) contains the peeking side cards, which translate far enough past the track to open a sideways scrollbar on phones. "clip" does not create a scroll container, so it cannot break position:sticky elsewhere on the page the way hidden does. */ .strat-carousel { position: relative; height: clamp(300px, 46svh, 420px); max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow-x: clip; overflow-y: visible; } /* height:auto so the card is exactly as tall as its own text; the track keeps a fixed height and centres each card in it, which is what makes the space above and below match. */ /* Every card takes the height of the one with the most text (the track is measured to that in initStratStack), so the deck never resizes as it turns and the section is only as tall as it actually needs to be. Content starts at the top, as text should. */ .strat-carousel .strat { position: absolute; width: min(440px, 84%); height: 100%; margin: 0; display: flex; flex-direction: column; cursor: pointer; transition: transform .5s var(--ease), opacity .5s var(--ease); backface-visibility: hidden; opacity: 0; z-index: 1; } .strat-carousel .strat:hover { transform: none; } .strat-carousel .strat.is-active { transform: scale(1); opacity: 1; z-index: 20; cursor: default; box-shadow: var(--shadow-2); } .strat-carousel .strat.is-next { transform: translateX(42%) scale(.9); opacity: .5; z-index: 10; } .strat-carousel .strat.is-prev { transform: translateX(-42%) scale(.9); opacity: .5; z-index: 10; } .strat-carousel .strat.is-far { transform: scale(.85); opacity: 0; z-index: 1; pointer-events: none; } [dir="rtl"] .strat-carousel .strat.is-next { transform: translateX(-42%) scale(.9); } [dir="rtl"] .strat-carousel .strat.is-prev { transform: translateX(42%) scale(.9); } .caro-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--hairline); color: var(--label); display: grid; place-items: center; cursor: pointer; z-index: 30; transition: transform .15s var(--ease), border-color .15s var(--ease); } .caro-arrow:hover { transform: translateY(-50%) scale(1.08); border-color: var(--accent); } /* Logical, not physical: in Arabic the card that is visually "next" sits on the LEFT, so the next arrow has to travel there with it. Physical left/right left the arrows pointing at the wrong cards, which is what made the Arabic carousel feel inverted. */ .caro-arrow--prev { inset-inline-start: clamp(4px, 3vw, 30px); } .caro-arrow--next { inset-inline-end: clamp(4px, 3vw, 30px); } [dir="rtl"] .caro-arrow svg { transform: scaleX(-1); } .caro-dots { display: flex; gap: 8px; justify-content: center; margin-top: var(--s5); } .caro-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--label-3); border: none; cursor: pointer; padding: 0; transition: width .25s var(--ease), background .25s var(--ease); } .caro-dots button.on { background: var(--accent-bright); width: 22px; border-radius: 5px; } @media (max-width: 760px) { .caro-arrow { display: none; } /* On a phone the peeking neighbours have to stay out of the reading area: push them further to the edge, shrink and fade them so only a hint shows. */ .strat-carousel .strat { width: min(440px, 90%); } .strat-carousel .strat.is-next { transform: translateX(56%) scale(.84); opacity: .28; } .strat-carousel .strat.is-prev { transform: translateX(-56%) scale(.84); opacity: .28; } [dir="rtl"] .strat-carousel .strat.is-next { transform: translateX(-56%) scale(.84); } [dir="rtl"] .strat-carousel .strat.is-prev { transform: translateX(56%) scale(.84); } } /* ---- narrow phones (batch 11) ---- At 320px the CTA buttons' intrinsic width (icon + label + "Coming soon" badge) exceeded the viewport. Letting the label wrap and trimming the oversized padding keeps them inside the page instead of creating a horizontal scroll for the whole document. */ @media (max-width: 380px) { .btn--lg { padding: 16px 16px; font-size: var(--f-md); } .cta__buttons .btn { max-width: 100%; white-space: normal; text-align: center; } .cta__buttons { width: 100%; } } /* ---- light-mode contrast fixes (batch 14) ---- --accent-soft on a translucent accent tint lands at ~4.4:1 in light mode, just under the 4.5:1 AA threshold for text this size. --accent-bright is the darker token and clears it at ~5.8:1. Dark mode already passed comfortably, so this is scoped to light only. */ :root[data-theme="light"] .cardprice__cod, :root[data-theme="light"] .rtile__unit, :root[data-theme="light"] .strat__tag { color: var(--accent-bright); } /* ---- "Ordered a card? Share your story" ---- Was a text link (.linklike) sitting among real buttons, so it read as a different system. It is the same affordance as every other action on the page and now looks like one. */ .card-show__story { margin-top: var(--s4); } #storyOpenAlt { font: inherit; } /* the two FAQ actions, centred as a pair (homepage teaser + the FAQ page foot) */ .faq__cta { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap: var(--s3); margin-top: var(--s5); } /* ---- solo hero (story beat 1: the promise, copy only) ---- */ .hero--solo { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: calc(88svh); padding-bottom: 24px; } .hero--solo .hero__copy { max-width: 720px; } .hero--solo .hero__sub { margin-inline: auto; } .hero--solo .hero__cta, .hero--solo .hero__meta { justify-content: center; } /* ---- pull-quotes: the owner's four lines, distributed between the beats. A quiet grey aside — small, light, a couple of lines — not a headline. ---- */ .quote { max-width: 560px; margin: 0 auto; padding: calc(var(--sec-y) * 0.55) clamp(20px, 5vw, 40px); text-align: center; } .quote__text { font-size: var(--f-lede); line-height: 1.55; font-weight: var(--w-reg); letter-spacing: -0.005em; color: var(--label-2); text-wrap: pretty; } .quote__text::before { content: "\201C"; display: block; font-size: var(--f-24); line-height: .5; color: var(--accent-soft); opacity: .7; margin-bottom: 4px; font-family: Georgia, serif; } [dir="rtl"] .quote__text::before { content: "\00AB"; } /* ---- the goo, as its own story beat ---- */ .goo { display: flex; flex-direction: column; align-items: center; } .goo .hero__box { width: 100%; max-width: 640px; margin: 0 auto; } .mb-cta { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s5); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .6s var(--ease) .9s, transform .6s var(--ease) .9s, visibility 0s linear 1.5s; } .goo:has(.mbox.is-sealed) .mb-cta { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .9s, transform .6s var(--ease) .9s, visibility 0s; } /* ============================================================ Big-edit batch: store badges, no-select, compact "how", full-screen goo ============================================================ */ /* ---- App Store / Google Play badges (theme-aware black&white) ---- */ /* Official store artwork, used as supplied. The badges are images, not restyled buttons: Apple and Google both forbid redrawing them, and a real badge reads as a real product. */ .storebadge-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; } .storebadge { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; line-height: 0; border-radius: 8px; overflow: hidden; text-decoration: none; transition: transform .15s var(--ease), opacity .15s var(--ease); } .storebadge:hover { transform: translateY(-2px); } .storebadge__img { height: 44px; width: auto; display: block; border-radius: 8px; } /* Apple ships two variants; the dark-background one is only correct on the dark theme. */ .storebadge__img--onlight { display: none; } [data-theme="light"] .storebadge__img--ondark { display: none; } [data-theme="light"] .storebadge__img--onlight { display: block; } .storebadge--soon { opacity: .55; cursor: default; } .storebadge--soon:hover { transform: none; } @supports not (overflow: clip) { body { overflow-x: hidden; } } .storebadge-note { margin: 0; text-align: center; color: var(--label-3); font-size: var(--f-sm); } /* Where the badges appear, the CTA stacks: two store badges and a secondary button do not belong on one wrapping row, and the badges must read as the primary action. */ .cta__buttons:has(.storebadge-row) { flex-direction: column; align-items: center; gap: var(--s4); } /* A choice reads as a choice when both options are visible at once, so each pair stays on one row and splits the width instead of stacking. min-width:0 lets them shrink below their intrinsic label width rather than wrapping the row. */ .hero__cta, .cta__pair, .mb-cta { display: flex; flex-wrap: nowrap; gap: var(--s3); width: 100%; max-width: 460px; margin-inline: auto; } .hero__cta .btn, .cta__pair .btn, .mb-cta .btn { min-width: 0; padding-inline: clamp(16px, 3vw, 28px); } /* the primary takes the room it can and the secondary hugs its label, so the main action visibly dominates the pair instead of the two splitting the row 50/50 */ .hero__cta .btn--primary, .cta__pair .btn--primary, .mb-cta .btn--primary { flex: 1 1 auto; } .hero__cta .btn--glass, .cta__pair .btn--glass, .mb-cta .btn--glass { flex: 0 1 auto; } /* ---- privacy, collapsed by default ---- The full card is unchanged; it just starts folded so the page does not spend a screen of scroll on an objection most readers do not have. */ .privacy__disclosure { max-width: 860px; margin: 0 auto; border: 1px solid var(--hairline); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; } .privacy__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 32px); cursor: pointer; list-style: none; } .privacy__summary::-webkit-details-marker { display: none; } .privacy__summary:hover .privacy__summary-more { color: var(--label); } .privacy__summary-title { font-size: var(--f-lede); font-weight: var(--w-semi); letter-spacing: -.01em; } .privacy__summary-more { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: var(--f-md); color: var(--accent-bright); transition: color .2s var(--ease); } .privacy__chev { transition: transform .25s var(--ease); } .privacy__disclosure[open] .privacy__chev { transform: rotate(180deg); } /* the card inside the disclosure must not repeat the frame the disclosure already draws */ .privacy__disclosure .privacy__card { border: 0; background: none; border-radius: 0; padding: 0 clamp(20px, 3vw, 32px) clamp(24px, 3.4vw, 40px); } /* ---- selection: nothing of ours is selectable (holding the goo shouldn't select text). Fields the visitor types into stay selectable. ---- */ body { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } /* ---- how: number BESIDE the title (one row), body below — takes less height ---- */ .how__step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); row-gap: var(--s2); align-items: center; } .how__n { grid-row: 1; grid-column: 1; width: 30px; height: 30px; font-size: var(--f-md); } .how__t { grid-row: 1; grid-column: 2; margin: 0; font-size: var(--f-base); } .how__b { grid-column: 1 / -1; } /* ---- goo: full-width, full-height section (fills the screen when reached) ---- */ .goo { min-height: 100svh; justify-content: center; padding-top: calc(var(--nav-h) + 16px); } .goo .hero__box { width: 100%; max-width: 620px; gap: 12px; } .goo .mb-head .mb-title { font-size: var(--f-h3); } .goo .mb-head .mb-brief { font-size: var(--f-md); } .goo .mbox { width: 100%; max-width: none; height: min(72svh, 760px); aspect-ratio: auto; } /* the three steps and the closing pull quote now live inside #why */ .why .how__steps { margin-top: var(--s6); } .why__close { margin-top: var(--s6); } /* ---- #proof: three former sections, one header ---- The sub-blocks used to be .section elements, so they each brought a full --sec-y of top padding and their own kicker + h2 + lede. They are plain blocks now; the rhythm between them is one step tighter than the rhythm between sections, which is what makes them read as parts of one beat rather than three separate claims. */ .proof__block + .proof__block { margin-top: clamp(56px, 7vw, 96px); } .proof__h3 { font-size: var(--f-h3); font-weight: var(--w-semi); letter-spacing: -0.02em; line-height: calc(1.06em + 0.14rem); text-align: center; text-wrap: balance; margin-bottom: clamp(20px, 3vw, 32px); } /* ---- form controls join the type scale ---- Text-entry controls do not inherit font-size, so the story form's inputs were rendering at the browser default 13.3px. iOS Safari zooms the whole page when a focused field is under 16px. --f-base is 16.8px, comfortably over the line. Buttons keep their per-component sizes: most of ours are icon buttons whose glyphs are sized by the SVG, not the text. */ input, select, textarea { font-family: inherit; font-size: var(--f-base); } button { font-family: inherit; } /* size stays per component: these are mostly icon buttons */