/* ========================================================================== Fasta Wellness — marketing site design system Direction: warm paper + instrument. The palette is the app's own LIGHT theme (fasta/theme/tokens.ts `lightColors`); the six data hues are its fasting stages. Structure borrows from print: hairline rules, a visible column grid, mono numerals, and tables instead of cards where a table is honestly the better object. Vanilla CSS, no build step, no third-party requests. ========================================================================== */ /* --------------------------------------------------------------- fonts -- */ /* Self-hosted so the site makes zero third-party requests, which is what the privacy positioning requires. Same families the app ships with. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("./assets/fonts/fraunces-latin-var.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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./assets/fonts/inter-latin-var.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; } /* -------------------------------------------------------------- tokens -- */ :root { color-scheme: light; /* paper */ --paper: #faf6f1; --paper-2: #f2ebe1; --paper-3: #f5e3da; --card: #ffffff; /* ink */ --ink: #2a1f18; --ink-2: #7a6a5c; --ink-3: #9c8b7c; /* brand */ --accent: #c2664a; --accent-text: #b0563b; --accent-soft: #e8a98f; --accent-bg: #f5e3da; /* the app's six fasting-stage hues, used here as data colours */ --s1: #d4b896; /* anabolic */ --s2: #c9a876; /* catabolic */ --s3: #c2664a; /* fat burn */ --s4: #9b4d3a; /* ketosis */ --s5: #6b8e5a; /* autophagy */ --s6: #4a6b47; /* deep fast */ --rule: #e8dfd3; --rule-strong: #d8cbba; --grid-line: rgba(42, 31, 24, 0.045); --shell: 1200px; --gutter: 40px; --radius: 4px; --radius-lg: 8px; --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------------------------------------------------------------- base -- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--paper); -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.62; letter-spacing: -0.009em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(194, 102, 74, 0.16); } /* Never put overflow-x on : it makes the body a scroll container and silently breaks every position:sticky descendant. Clip on .page instead. */ .page { position: relative; overflow-x: clip; } /* The column grid. Faint enough to read as paper texture, present enough that every rule and column on the page looks deliberate. Hung off so the shared pages, which have no .page wrapper, get it too. A negative z-index paints it above body's background but under all content. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 120px 100%; background-position: center top; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, a { touch-action: manipulation; } :target { scroll-margin-top: 104px; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: rgba(194, 102, 74, 0.22); } .shell { width: min(100% - 48px, var(--shell)); margin-inline: auto; } .skip-link { position: fixed; top: 14px; left: 16px; z-index: 200; padding: 12px 18px; background: var(--accent); color: #fff; font-weight: 600; transform: translateY(-160%); transition: transform 0.25s var(--ease); } .skip-link:focus-visible { transform: none; } /* ---------------------------------------------------------------- type -- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.024em; line-height: 1.08; text-wrap: balance; margin: 0 0 0.5em; color: var(--ink); } p { text-wrap: pretty; margin: 0 0 1em; } p:last-child { margin-bottom: 0; } h1 { font-size: clamp(38px, 5.4vw, 62px); } h2 { font-size: clamp(31px, 4.2vw, 50px); } h3 { font-size: clamp(22px, 2.4vw, 30px); } .lead { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.62; color: var(--ink-2); max-width: 62ch; } /* Mono is the site's "instrument" voice: labels, numerals, axes, tables. */ .mono { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } /* Section index — "01 / HOW IT WORKS" sitting on a drawn rule. */ .sec-head { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0 24px; align-items: start; padding-top: 22px; margin-bottom: clamp(38px, 4.2vw, 62px); border-top: 1px solid var(--rule); } .sec-head .idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent-text); padding-top: 6px; } .sec-head .idx b { display: block; font-weight: 500; } .sec-head h2 { margin: 0 0 14px; } .sec-head .lead { margin: 0; } .sec-head.center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .sec-head.center .idx { padding: 0 0 12px; } /* Rules that draw themselves as they scroll into view. */ .drawn { height: 1px; border: 0; margin: 0; background: var(--rule); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out); } .drawn.is-visible { transform: scaleX(1); } html:not(.js) .drawn { transform: scaleX(1); } section { position: relative; } .section { padding: clamp(72px, 8vw, 118px) 0; } /* -------------------------------------------------------------- accent -- */ .accent { color: var(--accent-text); } .serif-i { font-style: italic; } /* ------------------------------------------------------------- buttons -- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 26px; border: 1px solid transparent; border-radius: 2px; font-family: var(--font); font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: transform 0.3s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); } .button.primary { background: var(--accent); color: #fff; } .button.primary:hover { background: #b0563b; transform: translateY(-2px); } .button.secondary { border-color: var(--rule-strong); color: var(--ink); background: transparent; } .button.secondary:hover { border-color: var(--ink); transform: translateY(-2px); } .button.full { display: flex; width: 100%; } /* --------------------------------------------------------- store badges -- */ .store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 30px 0 0; } .store-badge { display: inline-flex; transition: transform 0.3s var(--ease); } .store-badge img { height: 56px; width: auto; border-radius: 9px; } a.store-badge:hover { transform: translateY(-3px); } /* There is no Google Play listing, so this is a , never an . */ .store-badge.is-pending { opacity: 0.32; filter: grayscale(1); cursor: default; } /* flex-basis alone still shrinks onto the badge line; 0 0 100% forces the wrap. */ .store-note { flex: 0 0 100%; margin: 4px 0 0; font-size: 13px; color: var(--ink-3); } /* ------------------------------------------------------------ spec bar -- */ /* The annual-report fact table, sitting under the hero copy. */ .spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 34px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .spec div { padding: 16px 18px 16px 0; border-right: 1px solid var(--rule); } .spec div:last-child { border-right: 0; } .spec div + div { padding-left: 18px; } .spec dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; } .spec dd { margin: 0; font-size: 15px; font-weight: 500; } /* ----------------------------------------------------------------- nav -- */ .nav-shell { position: sticky; top: 0; z-index: 90; border-bottom: 1px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .nav-shell.is-stuck { background: rgba(250, 246, 241, 0.9); border-bottom-color: var(--rule); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); } .nav { display: flex; align-items: center; gap: 24px; height: 76px; } .brand-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; } .brand-link img { width: 32px; height: 32px; } .nav-links { display: flex; gap: 30px; margin-inline: auto; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); } .nav-links a { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .nav-links a:hover { color: var(--ink); border-bottom-color: var(--accent); } .nav-cta { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 2px; background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 600; transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .nav-cta:hover { background: #b0563b; transform: translateY(-1px); } .progress-rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; } /* ---------------------------------------------------------------- hero -- */ .hero-home { padding: clamp(34px, 5vw, 66px) 0 clamp(50px, 6vw, 80px); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(30px, 4vw, 64px); align-items: center; } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; } .hero-copy > *:not(.eyebrow) { align-self: stretch; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 7px 14px 7px 11px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--card); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s5); box-shadow: 0 0 0 0 rgba(107, 142, 90, 0.5); animation: pulse-dot 2.6s ease-out infinite; } @keyframes pulse-dot { 70% { box-shadow: 0 0 0 8px rgba(107, 142, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(107, 142, 90, 0); } } .hero-title { font-size: clamp(44px, 7.6vw, 86px); font-weight: 300; line-height: 0.99; letter-spacing: -0.034em; margin-bottom: 24px; } .hero-title .line { display: block; } .hero-title em { font-style: italic; font-weight: 400; color: var(--accent-text); } .hero-lead { font-size: clamp(17.5px, 1.6vw, 20px); color: var(--ink-2); max-width: 42ch; margin: 0; } /* Device on paper. The app is dark, the page is cream — the phone becomes an object photographed on a sheet rather than a glowing hologram. */ .hero-stage { position: relative; display: grid; place-items: center; padding: 10px 0; perspective: 1500px; } .phone { position: relative; z-index: 2; width: min(296px, 70vw); aspect-ratio: 9 / 19.5; border-radius: 44px; padding: 8px; background: linear-gradient(150deg, #ffffff, #e6dbcd 32%, #d4c6b4 62%, #f4ece2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 34px 60px -28px rgba(42, 31, 24, 0.42), 0 3px 10px -3px rgba(42, 31, 24, 0.14), 0 0 0 1px rgba(42, 31, 24, 0.08); transform: perspective(1300px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.7s var(--ease-out); } .phone.is-tracking { transition: transform 0.12s linear; } .phone::after { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 82px; height: 24px; border-radius: 999px; background: #000; z-index: 3; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: #140c08; } .phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .phone-screen[data-seq] img { position: absolute; inset: 0; } .js .phone-screen[data-seq] img { opacity: 0; z-index: 1; transition: opacity 0.4s var(--ease-out); } .js .phone-screen[data-seq] img.is-active { opacity: 1; z-index: 2; transition: opacity 0.5s var(--ease-out) 0.16s; } /* Measured annotations: leader lines with mono labels, drafting-style. */ .annot { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; pointer-events: none; } .annot .lbl { padding-bottom: 5px; border-bottom: 1px solid var(--rule-strong); } .annot .leader { width: 46px; height: 1px; background: var(--rule-strong); position: relative; } .annot .leader::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .annot.left { flex-direction: row; } .annot.left .leader::after { right: -3px; } .annot.right { flex-direction: row-reverse; } .annot.right .leader::after { left: -3px; } .annot b { color: var(--ink); font-weight: 600; } /* All three callouts live in the gutter left of the device — the space right of it is only ~130px at 1440 and a leader there would run off the shell. Staggered leader lengths keep it reading as a drafting sheet, not a list. */ .an-1 { top: 19%; right: calc(50% + 148px); } .an-2 { top: 49%; right: calc(50% + 148px); } .an-3 { bottom: 15%; right: calc(50% + 148px); } .an-1 .leader { width: 42px; } .an-2 .leader { width: 78px; } .an-3 .leader { width: 56px; } /* ------------------------------------------------------------- ticker -- */ .ticker-band { border-block: 1px solid var(--rule); background: var(--paper-2); padding: 13px 0; } .ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* This animation is the no-JS fallback. When site.js loads it sets `animation: none` inline and drives the transform itself — rescaling a CSS animation's duration preserves elapsed time rather than progress, which made the band visibly jump back on every scroll-velocity change. */ .ticker-track { display: flex; width: max-content; gap: 0; animation: ticker 46s linear infinite; will-change: transform; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { to { transform: translateX(-50%); } } .ticker-track span { display: inline-flex; align-items: center; padding: 0 26px; border-right: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } /* ----------------------------------------------------------- statement -- */ .statement { padding: clamp(84px, 10vw, 140px) 0 clamp(58px, 7vw, 92px); } .statement p { margin: 0 auto; max-width: 22ch; text-align: center; font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 52px); font-weight: 300; line-height: 1.16; letter-spacing: -0.026em; } .statement mark { background: none; color: inherit; } .statement .w { display: inline-block; color: var(--ink-3); transition: color 0.2s linear, opacity 0.2s linear; } @supports (color: color-mix(in srgb, red 50%, blue)) { .js .statement .w { color: color-mix(in srgb, var(--ink) calc(var(--lit, 0) * 100%), #cdbfae); opacity: calc(0.5 + var(--lit, 0) * 0.5); } .js .statement .w.hl { color: color-mix(in srgb, var(--accent-text) calc(var(--lit, 0) * 100%), #dbc4b6); } } .statement .w.hl { color: var(--accent-text); } .statement .attrib { margin: 34px auto 0; max-width: 54ch; font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--ink-2); } /* ------------------------------------------------------- the 24h spine -- */ .spine-wrap { padding-bottom: clamp(60px, 7vw, 96px); } .spine { position: relative; margin: 0 0 42px; padding-top: 34px; } /* the axis */ .spine-axis { position: relative; height: 74px; border: 1px solid var(--rule); background: var(--card); overflow: hidden; } .spine-band { position: absolute; top: 0; bottom: 0; opacity: 0.22; transition: opacity 0.5s var(--ease); } .spine-band.is-on { opacity: 1; } .spine-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(250, 246, 241, 0.82); transform-origin: 100% 50%; transform: scaleX(calc(1 - var(--p, 0))); right: 0; } /* playhead */ .spine-head { position: absolute; top: -14px; bottom: -14px; width: 1px; background: var(--ink); left: calc(var(--p, 0) * 100%); z-index: 3; } .spine-head::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 8px; height: 8px; background: var(--ink); } .spine-readout { position: absolute; top: -34px; left: calc(var(--p, 0) * 100%); transform: translateX(-50%); z-index: 4; display: flex; align-items: baseline; gap: 8px; padding: 3px 9px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; } .spine-readout .st { color: var(--stage-hue, var(--accent-soft)); text-transform: uppercase; } /* hour ticks */ .spine-ticks { position: relative; height: 26px; margin-top: 8px; } .spine-ticks i { position: absolute; top: 0; width: 1px; height: 5px; background: var(--rule-strong); left: calc(var(--at) / 24 * 100%); } .spine-ticks i.major { height: 9px; background: var(--ink-3); } .spine-ticks i.major::after { content: attr(data-h); position: absolute; top: 11px; left: 0; transform: translateX(-50%); font-family: var(--font-mono); font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-3); } /* stage table */ .stage-table { width: 100%; border-collapse: collapse; font-size: 15px; } .stage-table th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0 16px 10px 0; border-bottom: 1px solid var(--rule-strong); } .stage-table th:last-child { padding-right: 0; } .stage-table td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .stage-table td:last-child { padding-right: 0; } .stage-table tr { opacity: 0.4; transition: opacity 0.45s var(--ease), background 0.45s var(--ease); } .stage-table thead tr, .stage-table tr.is-on { opacity: 1; } .stage-table tr.is-on td:first-child { background: linear-gradient(90deg, var(--hue-soft), transparent); } .stage-table .c-h { width: 78px; font-family: var(--font-mono); font-size: 14px; color: var(--hue); font-weight: 600; } .stage-table .c-n { width: 26%; font-family: var(--font-display); font-size: 18px; font-weight: 500; } .stage-table .c-n span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; font-weight: 500; } .stage-table .c-d { color: var(--ink-2); font-size: 15px; } .stage-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 9px; background: var(--hue); vertical-align: 1px; } /* -------------------------------------------------------------- chapters */ .chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .chapter { padding: 30px 30px 34px 0; border-top: 2px solid var(--ink); } .chapter + .chapter { padding-left: 30px; border-left: 1px solid var(--rule); } .chapter .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent-text); display: block; margin-bottom: 22px; } .chapter h3 { font-size: 23px; margin-bottom: 10px; } .chapter p { color: var(--ink-2); font-size: 15.5px; margin: 0; } /* ------------------------------------------------------------ showcase -- */ .showcase-sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; } .showcase-media { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; } .show-panel { min-height: 82vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; transition: opacity 0.5s var(--ease); } .js .show-panel { opacity: 0.28; } .js .show-panel.is-active { opacity: 1; } .show-panel .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 16px; } .show-panel h3 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; } .show-panel > p { color: var(--ink-2); max-width: 46ch; } .show-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; } .show-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-2); } .show-list li:last-child { border-bottom: 1px solid var(--rule); } .show-list li i { font-family: var(--font-mono); font-size: 10.5px; font-style: normal; color: var(--ink-3); padding-top: 4px; } .show-panel .phone-inline { display: none; } /* -------------------------------------------------------- capability tbl */ .matrix { width: 100%; border-collapse: collapse; font-size: 15.5px; } .matrix caption { text-align: left; padding-bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .matrix th { text-align: left; padding: 0 14px 12px 0; border-bottom: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); } .matrix th.c, .matrix td.c { width: 116px; text-align: center; padding-right: 0; } .matrix td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule); } .matrix tbody tr:hover { background: var(--paper-2); } .matrix .grp td { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-top: 26px; border-bottom-color: var(--rule-strong); } .matrix .yes { color: var(--s5); font-weight: 700; } .matrix .no { color: #cdbfae; } .matrix .c svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; } /* ---------------------------------------------------------- comparison -- */ .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .compare-col { padding: 26px 28px 30px 0; border-top: 2px solid var(--rule-strong); } .compare-col.is-ours { padding-left: 28px; border-top-color: var(--accent); border-left: 1px solid var(--rule); } .compare-col h3 { font-size: 21px; margin-bottom: 4px; } .compare-col .cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; display: block; } .compare-col ul { margin: 0; padding: 0; list-style: none; } .compare-col li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-2); } .compare-col li:last-child { border-bottom: 1px solid var(--rule); } .compare-col li svg { width: 15px; height: 15px; margin-top: 4px; color: #cdbfae; } .compare-col.is-ours li { color: var(--ink); } .compare-col.is-ours li svg { color: var(--s5); } /* --------------------------------------------------------------- stats -- */ .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .stat { padding: 30px 20px 32px 0; border-right: 1px solid var(--rule); } .stat:last-child { border-right: 0; } .stat + .stat { padding-left: 20px; } .stat .v { font-family: var(--font-display); font-size: clamp(40px, 5vw, 62px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent-text); } .stat .k { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } /* --------------------------------------------------------------- panel -- */ .panel { background: var(--card); border: 1px solid var(--rule); padding: clamp(30px, 4vw, 52px); } .panel.tinted { background: var(--paper-3); border-color: #e6c9b8; } .trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 34px; } .trust-grid > div { padding: 24px 24px 0 0; border-top: 1px solid var(--rule); } .trust-grid > div + div { padding-left: 24px; border-left: 1px solid var(--rule); } .trust-grid h4 { font-size: 18px; margin-bottom: 8px; } .trust-grid p { font-size: 15px; color: var(--ink-2); margin: 0; } .trust-grid a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------- pricing -- */ .price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .price-card { background: var(--card); border: 1px solid var(--rule); padding: 32px 30px 34px; } .price-card.featured { background: var(--paper-3); border-color: #e6c9b8; } .price-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .price-card h3 { margin: 0; font-size: 22px; } .price-tag { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 38px); font-weight: 300; letter-spacing: -0.03em; margin: 14px 0 4px; } .price-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; } .price-card ul { margin: 0 0 26px; padding: 0; list-style: none; } .price-card li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); } .price-card li:last-child { border-bottom: 1px solid var(--rule); } .price-card li svg { width: 14px; height: 14px; margin-top: 4px; color: var(--accent); } .pill { padding: 5px 11px; border: 1px solid var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; } .legal-line { margin: 26px auto 0; max-width: 76ch; text-align: center; font-size: 13px; line-height: 1.65; color: var(--ink-3); } /* ----------------------------------------------------------------- faq -- */ .faq { max-width: 880px; margin-inline: auto; border-top: 1px solid var(--rule-strong); } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 4px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.015em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 11px; height: 11px; flex: none; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease); } .faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .faq .answer { padding: 0 4px 24px; color: var(--ink-2); font-size: 15.5px; max-width: 68ch; } .faq .answer a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* ----------------------------------------------------------- final CTA -- */ .final { background: var(--paper-3); border-top: 3px solid var(--accent); padding: clamp(52px, 6.5vw, 88px) clamp(26px, 5vw, 64px); text-align: center; } .final h2 { font-size: clamp(32px, 4.6vw, 56px); margin-bottom: 16px; } .final p { margin-inline: auto; max-width: 50ch; color: var(--ink-2); } .final .store-row { justify-content: center; } .final .store-note { text-align: center; } .tagline { margin-top: 36px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 300; color: var(--ink); white-space: nowrap; } .tagline b { font-weight: 500; font-style: italic; color: var(--accent-text); } .requirements { margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } /* -------------------------------------------------------------- footer -- */ .site-footer { padding: 54px 0 44px; border-top: 1px solid var(--rule); margin-top: clamp(60px, 7vw, 96px); } .footer-top { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); } .footer-links a:hover { color: var(--accent-text); } .footer-fine { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.7; color: var(--ink-3); max-width: 82ch; } .footer-fine a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------- sticky mobile bar -- */ .dl-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; display: none; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--rule-strong); background: rgba(250, 246, 241, 0.96); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transform: translateY(140%); transition: transform 0.42s var(--ease); } .dl-bar.is-in { transform: none; } .dl-bar img { width: 32px; height: 32px; flex: none; } .dl-bar .dl-copy strong { display: block; font-size: 15px; font-weight: 600; } .dl-bar .dl-copy span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .dl-bar .button { margin-left: auto; padding: 11px 20px; } .to-top { position: fixed; right: 24px; bottom: 24px; z-index: 87; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .to-top.is-in { opacity: 1; pointer-events: auto; transform: none; } .to-top svg { width: 17px; height: 17px; } /* -------------------------------------------------------------- motion -- */ .rise { animation: rise-in 0.8s var(--ease-out) both; animation-delay: var(--reveal-delay, 0ms); } @keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Ink-reveal headline: letters rise and darken, no blur, no 3D — it should read as type being printed, not as a title sequence. */ .js .hero-title .char { display: inline-block; opacity: 0; transform: translateY(0.28em); animation: char-in 0.7s var(--ease-out) forwards; animation-delay: var(--char-delay, 0ms); } @keyframes char-in { to { opacity: 1; transform: none; } } /* ---------------------------------------------------------- responsive -- */ /* The callout gutter disappears before the layout does. */ @media (max-width: 1120px) { .annot { display: none; } } @media (max-width: 1080px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--rule); } } @media (max-width: 960px) { /* With the links gone the CTA has to claim the free space itself. */ .nav-links { display: none; } .nav-cta { margin-left: auto; } .hero-grid { grid-template-columns: minmax(0, 1fr); } .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec div:nth-child(2) { border-right: 0; } .spec div:nth-child(3) { padding-left: 0; } .spec div:nth-child(3), .spec div:nth-child(4) { border-top: 1px solid var(--rule); } .chapters { grid-template-columns: minmax(0, 1fr); } .chapter { padding-right: 0; } .chapter + .chapter { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } .compare { grid-template-columns: minmax(0, 1fr); } .compare-col { padding-right: 0; } .compare-col.is-ours { padding-left: 0; border-left: 0; margin-top: 34px; } .price-grid { grid-template-columns: minmax(0, 1fr); } .sec-head { grid-template-columns: minmax(0, 1fr); } .sec-head .idx { padding: 0 0 14px; } .dl-bar { display: flex; } .to-top { display: none; } /* A pinned device eats too much of a small viewport: inline it instead. */ .showcase-sticky { grid-template-columns: minmax(0, 1fr); } .showcase-media { display: none; } .show-panel { min-height: 0; padding: 38px 0; } .js .show-panel { opacity: 1; } .show-panel .phone-inline { display: block; margin: 28px 0 0; width: min(262px, 64vw); } .show-panel .phone-inline img { border-radius: 28px; border: 1px solid var(--rule-strong); } } @media (max-width: 720px) { .shell { width: min(100% - 32px, var(--shell)); } /* The status chip is wider than a phone at nowrap; let it breathe. */ .eyebrow { white-space: normal; font-size: 10px; letter-spacing: 0.1em; line-height: 1.5; } body::before { background-size: 90px 100%; } .store-badge img { height: 50px; } .trust-grid { grid-template-columns: minmax(0, 1fr); } .trust-grid > div + div { padding-left: 0; border-left: 0; } .site-footer { padding-bottom: 96px; } .tagline { white-space: normal; } .stage-table .c-d { display: none; } .stage-table .c-n { width: auto; } .matrix th.c, .matrix td.c { width: 74px; } .spine-readout { font-size: 10px; } } /* ------------------------------------------------------ reduced motion -- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } /* Match the .js prefix or these lose on specificity and the page is blank. */ .js [data-reveal], [data-reveal] { opacity: 1 !important; transform: none !important; } .js .hero-title .char, .hero-title .char { opacity: 1 !important; transform: none !important; } .js .show-panel, .show-panel { opacity: 1 !important; } .js .statement .w, .statement .w { opacity: 1 !important; color: var(--ink) !important; } .js .statement .w.hl, .statement .w.hl { color: var(--accent-text) !important; } .js .phone-screen[data-seq] img { opacity: 0 !important; } .js .phone-screen[data-seq] img.is-active { opacity: 1 !important; } .rise { animation: none !important; opacity: 1 !important; transform: none !important; } .drawn { transform: scaleX(1) !important; } .phone { transform: none !important; } .stage-table tr, .spine-band { opacity: 1 !important; } .showcase-media { position: static !important; height: auto !important; } .ticker-track { animation: none !important; } .dl-bar { transition: none !important; } } @media print { .nav-shell, .dl-bar, .to-top, .progress-rail, .ticker-band { display: none !important; } body::before { display: none; } } /* ========================================================================== Shared pages — legal, support, press, walkthrough, the SEO landers and the OAuth callbacks. These carry their own small class vocabulary from the previous build; redefining it here means every page gets the paper direction without rewriting 21 files of markup. ========================================================================== */ /* -------------------------------------------------------- page header --- */ .site-header { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 24px; width: min(100% - 48px, var(--shell)); margin-inline: auto; height: 76px; background: rgba(250, 246, 241, 0.92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); } .site-header .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; } .site-header .brand img { width: 32px; height: 32px; } .site-header nav { display: flex; gap: 28px; margin-inline: auto; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); } .site-header nav a { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .site-header nav a:hover { color: var(--ink); border-bottom-color: var(--accent); } /* ---------------------------------------------------- article pages ----- */ /* .legal-page carries privacy, terms, support, press and the SEO landers. Keep the h1 modest here — the billboard treatment belongs to .hero-title on the home page only. */ .legal-page { width: min(100% - 48px, 800px); margin: 0 auto; padding: clamp(40px, 6vw, 76px) 0 clamp(70px, 8vw, 110px); } .legal-page > h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 18px; } .legal-page h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 2.2em 0 0.5em; } .legal-page h3 { font-size: clamp(19px, 2.1vw, 23px); margin: 1.8em 0 0.4em; } .legal-page p, .legal-page li { color: var(--ink-2); max-width: 74ch; } .legal-page strong { color: var(--ink); } .legal-page a:not(.button) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .legal-page ul, .legal-page ol { padding-left: 1.15em; } .legal-page li { margin-bottom: 0.5em; } .legal-page section + section { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 30px; } .legal-page table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15.5px; } .legal-page th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); padding: 0 14px 12px 0; border-bottom: 1.5px solid var(--ink); } .legal-page td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: top; } .legal-page details { border-bottom: 1px solid var(--rule); } .legal-page details:first-of-type { border-top: 1px solid var(--rule-strong); } .legal-page summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 18.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); } .legal-page summary::-webkit-details-marker { display: none; } .legal-page summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease); } .legal-page details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .legal-page details > *:not(summary) { padding: 0 4px 20px; margin: 0; } /* An eyebrow above an article h1 — the pill treatment is home-page-only. */ /* Scoped to the walkthrough hero, NOT `.hero-copy` generally — the home page hero uses .hero-copy too and must keep its pill. */ .legal-page .eyebrow, .page-shell .eyebrow, .section-copy .eyebrow, .walkthrough-hero .hero-copy .eyebrow { display: block; padding: 0; border: 0; background: none; border-radius: 0; margin: 0 0 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-text); white-space: normal; } .hero-lede { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--ink-2); max-width: 62ch; } /* OAuth callback stubs */ .page-shell { width: min(100% - 48px, 620px); margin: 0 auto; padding: clamp(60px, 12vw, 140px) 0; text-align: center; } /* ------------------------------------------------------- walkthrough ---- */ .hero.walkthrough-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); align-items: center; width: min(100% - 48px, var(--shell)); margin-inline: auto; padding: clamp(40px, 5vw, 72px) 0; } .walkthrough-hero h1 { font-size: clamp(34px, 4.6vw, 52px); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* The walkthrough capture is portrait phone footage — at full column width it becomes a two-storey block. Cap it to device width. */ .walkthrough-video { display: flex; justify-content: center; } .walkthrough-video video { width: min(300px, 72vw); display: block; border-radius: 26px; border: 1px solid var(--rule-strong); background: #140c08; box-shadow: 0 30px 56px -30px rgba(42, 31, 24, 0.4); } /* ---------------------------------------------------- horizontal gallery - Replaces a five-across static grid, where each phone landed at ~215px and was unreadable. The row now moves sideways as you scroll down: the section is tall, the inner frame sticks, and scroll progress drives translateX. Cards lift and sharpen as they cross the middle of the viewport. */ .gallery { /* JS overwrites this from the row's real travel distance so the vertical: horizontal ratio stays honest at any viewport. This is the no-JS value. */ height: 200vh; border-top: 1px solid var(--rule); } .gallery-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 3vw, 40px); overflow: hidden; } .gallery-head { width: min(100% - 48px, var(--shell)); margin-inline: auto; flex: none; } .gallery-head h2 { margin: 0; font-size: clamp(26px, 3.1vw, 40px); } .gallery-progress { display: flex; align-items: center; gap: 16px; margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); } .gp-track { position: relative; display: block; width: min(280px, 40vw); height: 2px; background: var(--rule); } .gp-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; } .gp-label b { color: var(--accent-text); font-weight: 500; } .gallery-track { display: flex; align-items: center; gap: clamp(26px, 3.4vw, 54px); padding-inline: max(24px, calc((100vw - var(--shell)) / 2)); width: max-content; will-change: transform; } .gcard { margin: 0; flex: none; /* Also capped against viewport HEIGHT: a 19.5:9 phone plus its caption and the section head has to fit inside the 100vh sticky frame, or the devices get sliced off at the bottom. */ width: min(clamp(220px, 23vw, 330px), 29vh); /* staggered baseline so the row reads as a composition, not a shelf */ transform: translateY(calc(var(--stagger, 0) * 1px)) scale(var(--s, 0.94)); opacity: var(--o, 0.55); transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out); } .gcard:nth-child(even) { --stagger: 34; } .gcard.is-near { --s: 1; --o: 1; } .gcard-phone { position: relative; aspect-ratio: 9 / 19.5; border-radius: 40px; padding: 8px; background: linear-gradient(150deg, #ffffff, #e6dbcd 32%, #d4c6b4 62%, #f4ece2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 26px 46px -26px rgba(42, 31, 24, 0.36), 0 0 0 1px rgba(42, 31, 24, 0.08); transition: box-shadow 0.6s var(--ease-out); } .gcard.is-near .gcard-phone { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 40px 70px -30px rgba(42, 31, 24, 0.46), 0 0 0 1px rgba(42, 31, 24, 0.1); } .gcard-phone::after { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 74px; height: 21px; border-radius: 999px; background: #000; z-index: 2; } .gcard-screen { width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #140c08; } .gcard-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .gcard figcaption { margin-top: 16px; } .gcard .gnum { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--accent-text); margin-bottom: 5px; } .gcard figcaption strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; } .gcard .gdesc { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 30ch; } /* The walkthrough page ships its own IntersectionObserver for .reveal. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .js .reveal.visible { opacity: 1; transform: none; } /* -------------------------------------------- shared-page footer -------- */ /* The shared footer is a flat list of links; the home page's is a grid and opts out with .home. */ .site-footer:not(.home) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; width: min(100% - 48px, var(--shell)); margin: 0 auto; padding: 34px 0 44px; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-2); } .site-footer .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); } .site-footer .brand img { width: 30px; height: 30px; } .site-footer:not(.home) p { margin: 0 auto 0 0; } .site-footer:not(.home) a:not(.brand) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 960px) { .site-header nav { display: none; } .site-header .nav-cta { margin-left: auto; } .hero.walkthrough-hero { grid-template-columns: minmax(0, 1fr); } /* A pinned horizontal rail fights a touch device's own scrolling, so below this width the gallery becomes a native snap-scroller instead. */ .gallery { height: auto; border-bottom: 1px solid var(--rule); } .gallery-sticky { position: static; height: auto; padding: clamp(50px, 8vw, 80px) 0; overflow: visible; } .gallery-progress { display: none; } .gallery-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-inline: 24px; padding-bottom: 8px; } .gallery-track::-webkit-scrollbar { display: none; } .gcard { width: min(240px, 62vw) !important; scroll-snap-align: center; transform: none; opacity: 1; } .gcard:nth-child(even) { --stagger: 0; } } @media (max-width: 720px) { .legal-page, .page-shell, .site-header, .screens-section, .hero.walkthrough-hero, .site-footer:not(.home) { width: min(100% - 32px, var(--shell)); } } @media (prefers-reduced-motion: reduce) { .js .reveal, .reveal { opacity: 1 !important; transform: none !important; } /* No pinned rail: fall back to an ordinary scrollable row. */ .gallery { height: auto !important; } .gallery-sticky { position: static !important; height: auto !important; padding: 60px 0; overflow: visible !important; } .gallery-track { width: auto !important; overflow-x: auto; transform: none !important; } .gcard { transform: none !important; opacity: 1 !important; } }