/* ========================================================================== Fewest.app — stylesheet Design tokens are lifted directly from the app's Compose theme: core/ui/theme/Color.kt, Type.kt, Shape.kt. Two identities — paper (light) and onyx (dark) — are switched by [data-theme] on . A tiny inline script in each page's guesses the OS theme before first paint (dark when there is no preference) and the header toggle overrides it. ========================================================================== */ /* ---------- Fonts (self-hosted, variable) --------------------------------- */ @font-face { font-family: "Noto Serif Display"; src: url("assets/fonts/noto-serif-display-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Serif Display"; src: url("assets/fonts/noto-serif-display-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("assets/fonts/noto-sans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Raw palette ---------------------------------------------------- */ :root { /* paper identity (app light theme) — warm neutrals, no green undertone */ --sand: #f4efe7; --paper-bright: #fbf8f3; --paper-container: #f1ebe3; --clay: #e2d8ca; --outline: #c5c0b6; --ink: #1c1917; --ink-soft: #52524e; /* soft lavender tint for the light-theme hero glow (replaces the old mint --mist) */ --lavender-mist: #ece6f7; /* onyx identity (app dark theme / phone screens) */ --onyx: #0a0b0d; --true-black: #000000; --carbon: #16181c; --surface-dark: #141416; --hairline-dark: #2e3136; --slate: #2a2d33; --ash: #9da0a6; --pewter: #5e626a; --pearl: #f7f6f3; /* Deep Purple — the one brand accent (app core/ui/theme/Color.kt DeepPurple ramp). Light theme reads the deep anchor (500); dark theme reads the luminous end (200) so it glows against Onyx, matching the mascot and the onboarding/ceremony gradient. */ --purple-deep: #673ab7; --purple-light: #b39ddb; /* Ceremony gold stays out of marketing — caged to the app's unlock ceremony only. */ /* type */ --serif: "Noto Serif Display", "Iowan Old Style", Georgia, serif; --sans: "Noto Sans", "Segoe UI", Roboto, system-ui, sans-serif; /* shape — FewestShapes + the asymmetric brand CTA corner */ --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-badge: 18px 18px 8px 18px; /* motion — LauncherMotion.standard: no bounce, settle */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --page-max: 74rem; --gutter: clamp(1.25rem, 5vw, 3rem); /* distance from the viewport edge to page content once --page-max caps it */ --edge: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))); } /* ---------- Semantic tokens (dark is the default) -------------------------- */ :root { color-scheme: dark; --bg: var(--onyx); --text: var(--pearl); --text-soft: var(--ash); --text-faint: var(--pewter); --accent: var(--purple-light); --line: var(--hairline-dark); --card: var(--carbon); --shot-bg: var(--true-black); --shot-line: var(--hairline-dark); --badge-fill: var(--pearl); --badge-fill-text: var(--onyx); --blob-a-c: rgba(179, 157, 219, 0.13); --blob-b-c: rgba(42, 45, 51, 0.6); --phone-ring: rgba(255, 255, 255, 0.06); --shadow-near: rgba(0, 0, 0, 0.5); --shadow-far: rgba(0, 0, 0, 0.85); --selection-bg: var(--slate); --selection-text: var(--pearl); } :root[data-theme="light"] { color-scheme: light; --bg: var(--sand); --text: var(--ink); --text-soft: var(--ink-soft); --text-faint: color-mix(in srgb, var(--ink-soft) 72%, transparent); --accent: var(--purple-deep); --line: color-mix(in srgb, var(--outline) 60%, transparent); --card: var(--paper-bright); --shot-bg: var(--onyx); --shot-line: transparent; --badge-fill: var(--ink); --badge-fill-text: var(--sand); --blob-a-c: var(--lavender-mist); --blob-b-c: var(--clay); --phone-ring: transparent; --shadow-near: rgba(23, 33, 30, 0.16); --shadow-far: rgba(23, 33, 30, 0.45); --selection-bg: var(--lavender-mist); --selection-text: var(--ink); } /* ---------- Base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; overflow-x: clip; /* the hero blobs bleed past the edge on purpose */ background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 260ms var(--ease-standard), color 260ms var(--ease-standard); } h1, h2, h3 { margin: 0; font-weight: 400; } p { margin: 0; } p + p { margin-top: 1em; } img { max-width: 100%; height: auto; } ul { margin: 0; padding: 0; list-style: none; } figure { margin: 0; } button { font: inherit; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--selection-bg); color: var(--selection-text); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--text); color: var(--bg); padding: 0.6rem 1rem; z-index: 99; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ---------- One-screen shell ----------------------------------------------- */ /* header / content / footer share the viewport; on roomy screens the page is locked to exactly one viewport — no vertical scroll. */ .shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); } /* keep the horizontally scrolling rail from blowing the grid track open */ .shell > * { min-width: 0; } @media (min-width: 981px) and (min-height: 620px) { body.one-screen { height: 100vh; height: 100dvh; overflow: hidden; } body.one-screen .shell { height: 100%; min-height: 0; } } /* ---------- Header --------------------------------------------------------- */ .top { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: clamp(0.9rem, 2.6vh, 1.5rem) var(--gutter); display: flex; align-items: center; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; } .brand-mascot { width: 44px; height: 44px; flex: none; } .wordmark { font-family: var(--serif); font-weight: 420; font-size: 1.4rem; letter-spacing: -0.02em; } .theme-toggle { margin-left: auto; width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--text-soft); cursor: pointer; transition: color 180ms, border-color 180ms; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .theme-toggle svg { width: 19px; height: 19px; } /* the icon shows the theme you would switch to */ .icon-moon { display: none; } :root[data-theme="light"] .icon-moon { display: block; } :root[data-theme="light"] .icon-sun { display: none; } /* ---------- Hero ----------------------------------------------------------- */ .hero { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 1rem var(--gutter) 2rem; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); min-height: 0; } .hero > * { min-width: 0; } .hero h1 { font-family: var(--serif); font-weight: 340; font-size: clamp(2.7rem, 6.4vw, 4.8rem); line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance; } .lede { margin-top: 1.4rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.7; color: var(--text-soft); max-width: 31rem; } .meta-row { margin-top: 1.5rem; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-faint); } /* store badges */ .store-row { margin-top: 2.1rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.62rem 1.3rem 0.68rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r-badge); /* ShapeAsymmetricCta — the app's signature corner */ text-decoration: none; color: var(--text); transition: transform 200ms var(--ease-standard), border-color 200ms, box-shadow 200ms var(--ease-standard); } .store-badge:hover { transform: translateY(-2px); border-color: var(--accent); } .store-badge:active { transform: none; } .store-badge svg { width: 25px; height: 25px; flex: none; } .badge-fill { background: var(--badge-fill); color: var(--badge-fill-text); border-color: transparent; } .badge-fill:hover { box-shadow: 0 10px 24px -10px var(--shadow-far); border-color: transparent; } .badge-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .badge-text small { font-size: 0.66rem; font-weight: 570; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.72; } .badge-text strong { font-size: 1.04rem; font-weight: 640; letter-spacing: -0.01em; } .badge-small { padding: 0.45rem 0.95rem 0.5rem 0.8rem; gap: 0.6rem; } .badge-small svg { width: 19px; height: 19px; } .badge-small .badge-text small { font-size: 0.56rem; } .badge-small .badge-text strong { font-size: 0.9rem; } /* device column */ .hero-device { --phone-w: min(300px, 74vw, calc((100dvh - 270px) * 0.468)); position: relative; display: flex; align-items: center; justify-content: center; justify-self: center; min-height: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; } .blob-a { width: min(430px, 56vw); height: min(430px, 56vw); background: var(--blob-a-c); top: -10%; left: -32%; } .blob-b { width: min(350px, 46vw); height: min(350px, 46vw); background: var(--blob-b-c); bottom: -8%; right: -28%; } /* ---------- Phone frame ---------------------------------------------------- */ .phone { position: relative; z-index: 1; width: var(--phone-w); aspect-ratio: 9 / 19.2; background: linear-gradient(160deg, #23262a, #101215 70%); border-radius: 46px; padding: 9px; box-shadow: 0 0 0 1px var(--phone-ring), 0 2px 6px var(--shadow-near), 0 32px 64px -24px var(--shadow-far), inset 0 1px 1px rgba(255, 255, 255, 0.14); } /* side buttons */ .phone::before, .phone::after { content: ""; position: absolute; right: -2px; width: 2.5px; border-radius: 0 2px 2px 0; background: #191c1f; } .phone::before { top: 20%; height: 8.5%; } /* volume */ .phone::after { top: 30.5%; height: 5%; } /* power */ .phone-screen { position: relative; width: 100%; height: 100%; background: var(--true-black); /* the app's dark home is true black */ border-radius: 38px; overflow: hidden; } /* punch-hole camera */ .phone-screen::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #17191c; box-shadow: inset 0 0 2px 1px #000; z-index: 3; } /* Drop-in real device screenshot: replace the .screen element inside .phone-screen with and it fills the frame. See website/README.md for the adb capture recipe. */ .screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Screen: home (hero, live) -------------------------------------- */ .screen { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--sans); } /* everything inside scales with the frame width */ .screen-home { padding: calc(var(--phone-w) * 0.17) calc(var(--phone-w) * 0.08) calc(var(--phone-w) * 0.13); } /* homeClock: Noto Serif Display Light, tight tracking (Type.kt displayLarge) */ .scr-clock { font-family: var(--serif); font-weight: 310; font-size: calc(var(--phone-w) * 0.178); line-height: 1; letter-spacing: -0.035em; color: var(--pearl); display: flex; align-items: baseline; } /* rolling digit cells (RollingDigits.kt) */ .roll-cell { position: relative; display: inline-block; overflow: hidden; height: 1.06em; vertical-align: bottom; } .roll-cell .glyph { display: inline-block; } .roll-cell .glyph.next { position: absolute; left: 0; top: 0; transform: translateY(105%); } .roll-cell.rolling .glyph.cur { transform: translateY(-105%); transition: transform 340ms var(--ease-standard); } .roll-cell.rolling .glyph.next { transform: translateY(0); transition: transform 340ms var(--ease-standard); } .scr-meridiem { font-family: var(--sans); font-size: calc(var(--phone-w) * 0.05); font-weight: 500; letter-spacing: 0.06em; color: var(--ash); margin-left: 0.5rem; } /* homeMeta: tracked label (Type.kt labelLarge) */ .scr-date { margin-top: calc(var(--phone-w) * 0.04); font-size: calc(var(--phone-w) * 0.0385); font-weight: 560; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ash); } .scr-pins { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--phone-w) * 0.014); padding-bottom: calc(var(--phone-w) * 0.08); } .scr-pins span { font-size: calc(var(--phone-w) * 0.0545); font-weight: 520; letter-spacing: -0.01em; color: color-mix(in srgb, var(--pearl) 94%, transparent); padding: calc(var(--phone-w) * 0.03) 0; /* one-time enter choreography, like the app's home enter — then stillness */ opacity: 0; transform: translateY(10px); animation: pin-enter 520ms var(--ease-standard) forwards; } .scr-pins span:nth-child(1) { animation-delay: 260ms; } .scr-pins span:nth-child(2) { animation-delay: 330ms; } .scr-pins span:nth-child(3) { animation-delay: 400ms; } .scr-pins span:nth-child(4) { animation-delay: 470ms; } .scr-pins span:nth-child(5) { animation-delay: 540ms; } @keyframes pin-enter { to { opacity: 1; transform: none; } } /* ---------- Entrance (page load, once) -------------------------------------- */ .hero-copy > * { opacity: 0; transform: translateY(14px); animation: rise 620ms var(--ease-standard) forwards; } .hero-copy > :nth-child(1) { animation-delay: 60ms; } .hero-copy > :nth-child(2) { animation-delay: 140ms; } .hero-copy > :nth-child(3) { animation-delay: 220ms; } .hero-copy > :nth-child(4) { animation-delay: 300ms; } .hero-device, .features-head, .fgrid { opacity: 0; animation: rise 620ms var(--ease-standard) forwards; } .hero-device { animation-delay: 200ms; } .features-head { animation-delay: 60ms; } .fgrid { animation-delay: 180ms; } @keyframes rise { to { opacity: 1; transform: none; } } /* ---------- Features page --------------------------------------------------- */ /* Normal scrolling document (not one-screen) — a grid of ~18 cards doesn't fit a single viewport, and forcing it to would defeat the point of showing everything. Desktop mouse users get a real grid instead of a swipe-tunnel. */ .features { width: 100%; padding: clamp(1.5rem, 4vh, 2.5rem) 0 clamp(3rem, 8vh, 5rem); display: flex; flex-direction: column; gap: clamp(1.5rem, 3vh, 2.25rem); } .features-head { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } .overline { font-size: 0.75rem; font-weight: 640; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } .features-title { font-family: var(--serif); font-weight: 380; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.08; letter-spacing: -0.022em; } .features-sub { margin-top: 0.7rem; color: var(--text-soft); max-width: 38rem; } /* Responsive grid: 1 column on phones, 2 on tablets, 3 from desktop up. */ .fgrid { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: clamp(0.9rem, 1.6vw, 1.25rem); } @media (min-width: 620px) { .fgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 981px) { .fgrid { grid-template-columns: repeat(3, 1fr); } } .fcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.05rem 1.15rem 1.3rem; display: flex; flex-direction: column; transition: background 260ms var(--ease-standard), border-color 260ms var(--ease-standard); } .fcard h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 620; letter-spacing: -0.01em; line-height: 1.35; margin: 1rem 0 0.45rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; } .fcard > p { color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; } .fcard table { width: 100%; margin-top: 1rem; border-collapse: collapse; color: var(--text-soft); font-size: 0.86rem; line-height: 1.45; } .fcard caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fcard th, .fcard td { padding: 0.6rem 0.45rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } .fcard thead th { color: var(--text); font-weight: 650; } .fcard tbody th { color: var(--text); font-weight: 600; } @media (max-width: 460px) { .fcard table { font-size: 0.78rem; } .fcard th, .fcard td { padding: 0.5rem 0.3rem; } } /* Positioning/pricing cards (no free/premium chip) span two columns from tablet up so they read as a summary, not just another feature. */ @media (min-width: 620px) { .fcard-wide { grid-column: span 2; } } @media (min-width: 981px) { .fcard-wide { grid-column: span 3; } .fcard-wide .shot { max-width: 22rem; } } /* Free/premium chip — quiet by default so it doesn't compete with the accent. */ .fchip { font-size: 0.62rem; font-weight: 640; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text-faint); } .fchip-premium { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* the last card: a small call to action */ .fcard-cta { align-items: center; justify-content: center; text-align: center; gap: 0.5rem; } .fcard-cta img { width: 84px; height: 84px; } .fcard-cta h2 { font-family: var(--serif); font-style: italic; font-weight: 340; font-size: 1.45rem; letter-spacing: -0.015em; margin: 0.4rem 0 0.2rem; justify-content: center; } .fcard-cta .store-badge { margin-top: 0.5rem; } /* paper-theme demo card: always shows the app's light theme regardless of the site's own current theme, so visitors can see it even while browsing dark. Compound `.shot.shot-paper` selectors so these reliably beat the base `.shot` rule declared below, regardless of source order (equal single-class specificity would otherwise let source order decide, silently). */ .shot.shot-paper { background: var(--sand); border-color: var(--outline); } .shot-clock.shot-clock-paper, .shot-pins.shot-pins-paper span { color: var(--ink); } .shot-date.shot-date-paper { color: var(--ink-soft); } .shot-count { font-style: normal; font-size: 0.78em; color: var(--text-faint); margin-left: 0.4em; } .shot.shot-align { justify-content: center; gap: 0.5rem; } .shot-align-row { display: flex; width: 100%; } .shot-align-row span { font-size: 0.8rem; font-weight: 520; color: color-mix(in srgb, var(--pearl) 93%, transparent); } .shot-align-start { justify-content: flex-start; } .shot-align-center { justify-content: center; } .shot-align-end { justify-content: flex-end; } .shot.shot-textsize { justify-content: center; gap: 0.5rem; } .shot-textsize span { color: color-mix(in srgb, var(--pearl) 93%, transparent); } .ts-sm { font-size: 0.7rem; } .ts-md { font-size: 0.9rem; } .ts-lg { font-size: 1.15rem; } .link-quiet { font-size: 0.85rem; font-weight: 560; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding-bottom: 1px; transition: border-color 180ms; } .link-quiet:hover { border-color: var(--accent); } /* mini screen fragments inside cards — always the app's dark home */ .shot { position: relative; flex: none; height: clamp(104px, 15vh, 138px); border-radius: var(--r-md); background: var(--shot-bg); border: 1px solid var(--shot-line); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; overflow: hidden; } .shot-clock { font-family: var(--serif); font-weight: 310; font-size: 1.95rem; line-height: 1; letter-spacing: -0.03em; color: var(--pearl); } .shot-clocks { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .shot-clock-secondary { display: flex; flex-direction: column; align-items: flex-end; gap: 0.12rem; line-height: 1; } .shot-tz { font-size: 0.55rem; font-weight: 620; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); } .shot-clock-sm { font-family: var(--serif); font-weight: 340; font-size: 1.15rem; letter-spacing: -0.02em; color: color-mix(in srgb, var(--pearl) 78%, transparent); } .shot-date { font-size: 0.6rem; font-weight: 560; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); } .shot-pins { margin-top: auto; display: flex; flex-direction: column; gap: 0.26rem; font-size: 0.8rem; font-weight: 520; color: color-mix(in srgb, var(--pearl) 93%, transparent); } /* Pins-first mocks (rename, hidden) keep labels at the top so the note can sit below */ .shot-pins:first-child:not(:last-child) { margin-top: 0; } .shot-renamed-from { font-size: 0.68rem; font-weight: 500; text-decoration: line-through; color: var(--pewter); } .shot-renamed-to { color: var(--pearl); font-weight: 560; } .shot-muted { color: var(--pewter); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--pewter) 70%, transparent); } .shot-group { gap: 0.18rem; } .shot-group-name { font-weight: 620; color: var(--pearl); margin-bottom: 0.12rem; } .shot-branch { font-size: 0.72rem; font-weight: 480; letter-spacing: 0.02em; color: color-mix(in srgb, var(--pearl) 72%, transparent); font-variant-numeric: tabular-nums; } .shot-lock { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pearl) 28%, transparent); color: var(--pearl); } .shot-lock svg { width: 22px; height: 22px; } .shot-note-center { margin-top: 0.65rem; position: relative; } .shot-search { display: flex; align-items: center; flex: none; height: 32px; padding: 0 0.8rem; background: var(--surface-dark); border: 1px solid var(--hairline-dark); border-radius: 999px; /* ShapePill */ font-size: 0.8rem; color: var(--pearl); } .caret { width: 1.5px; height: 0.85rem; background: var(--purple-light); margin-left: 2px; animation: caret 1.1s steps(2, start) infinite; } @keyframes caret { to { visibility: hidden; } } .shot-hit { align-self: flex-start; margin-top: 0.3rem; font-size: 0.82rem; font-weight: 520; color: var(--pearl); background: color-mix(in srgb, var(--purple-light) 16%, transparent); padding: 0.28rem 0.6rem; border-radius: 10px; } /* Always sits on the shot's dark backdrop (shot-bg is dark in both page themes), so this reads the dark-canvas purple directly rather than the theme-switched --accent. */ .shot-note { margin-top: auto; font-size: 0.62rem; font-weight: 620; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-light); } .shot-center { align-items: center; justify-content: center; } .breath-ring { position: absolute; width: 74px; height: 74px; border: 1.5px solid color-mix(in srgb, var(--pearl) 85%, transparent); border-radius: 50%; animation: breath 3.4s var(--ease-standard) infinite alternate; } .breath-ring.soft { width: 94px; height: 94px; border-width: 1px; border-color: color-mix(in srgb, var(--purple-light) 38%, transparent); animation-delay: 180ms; } @keyframes breath { from { transform: scale(0.84); } to { transform: scale(1); } } .breath-label { position: relative; font-family: var(--serif); font-weight: 460; font-size: 1rem; letter-spacing: -0.02em; color: var(--pearl); } .shot-chips { flex-flow: row wrap; align-content: center; justify-content: center; gap: 0.4rem; } .shot-chips span { border: 1px solid var(--hairline-dark); border-radius: 999px; padding: 0.3rem 0.62rem; font-size: 0.64rem; font-weight: 570; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); } .shot-list { justify-content: center; gap: 0.3rem; } .shot-list span { font-size: 0.8rem; font-weight: 520; color: color-mix(in srgb, var(--pearl) 93%, transparent); } /* ---------- Footer ---------------------------------------------------------- */ .foot { border-top: 1px solid var(--line); padding: clamp(1.2rem, 3.2vh, 2.1rem) var(--gutter) clamp(1.3rem, 3.4vh, 2.2rem); text-align: center; } .foot-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.35rem 1.05rem; } .foot-links li { display: flex; align-items: center; gap: 1.05rem; } .foot-links li + li::before { content: "\2022"; color: var(--text-faint); font-size: 0.8em; } .foot-links a { font-size: 0.98rem; font-weight: 540; color: var(--text-soft); text-decoration: none; transition: color 160ms; } .foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--text); } .foot-copy { margin-top: 0.85rem; font-size: 0.88rem; color: var(--text-faint); } /* ---------- Privacy policy page --------------------------------------------- */ .prose { width: 100%; max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 5vh, 3rem) var(--gutter) clamp(4rem, 9vh, 6rem); } .prose h1 { font-family: var(--serif); font-weight: 360; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.06; letter-spacing: -0.025em; margin-bottom: 0.4em; } .prose h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.015em; margin: 2.2em 0 0.6em; } .prose h3 { font-size: 1.08rem; font-weight: 620; margin: 1.8em 0 0.5em; } .prose p, .prose li { color: var(--text-soft); } .prose ul { list-style: disc; padding-left: 1.3em; margin: 0.7em 0; } .prose li { margin: 0.32em 0; } .prose strong { color: var(--text); } .prose .policy-date { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 2.2rem; } .prose a { color: var(--accent); } /* ---------- Responsive ------------------------------------------------------ */ @media (max-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: 1.5rem; gap: 2.4rem; } .hero-copy { display: flex; flex-direction: column; align-items: center; } .lede { max-width: 34rem; } .store-row { justify-content: center; } .hero-device { --phone-w: min(240px, 66vw); margin-bottom: 1.5rem; } .features { padding-top: 1rem; } } /* ---------- Reduced motion -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body, .fcard { transition: none; } .hero-copy > *, .hero-device, .features-head, .fgrid, .scr-pins span { animation: none; opacity: 1; transform: none; } .caret { animation: none; } .breath-ring { animation: none; transform: scale(0.94); } .store-badge, .theme-toggle { transition: none; } .store-badge:hover { transform: none; } .roll-cell.rolling .glyph.cur, .roll-cell.rolling .glyph.next { transition: none; } }