/* ========================================================================== Noshery - marketing site Fresh light redesign. Native CSS, no build step. Radius system (locked): - buttons / pills ...... 999px - cards / frames / media 16px - inputs / small panels .. 10px - chips .................. 8px Accent (locked): --accent, the app's brand orange #e8602e. One accent, whole site. Theme: light by default, with a dark override under prefers-color-scheme: dark. ========================================================================== */ :root { color-scheme: light dark; /* neutrals - cool off-white, not cream. Each token carries its light value and its dark value via light-dark(); the browser picks per color-scheme. */ --bg: light-dark(#fbfbfa, #141310); --bg-alt: light-dark(#f4f4f2, #1c1b17); --bg-tint: light-dark(#fdf1ec, #26190f); /* faint accent wash for panels */ --surface: light-dark(#ffffff, #1e1c18); --text: light-dark(#191917, #f3f1ea); --text-soft: light-dark(#55554f, #b6b3a8); --text-faint: light-dark(#86867d, #827e72); --border: light-dark(#e6e6e1, #322f28); --border-strong: light-dark(#d6d6cf, #454137); /* accent - Noshery brand orange */ --accent: #e8602e; --accent-press: light-dark(#cf4f20, #ff7a48); --accent-soft: light-dark(#f5c4b0, #4a2417); --accent-ink: light-dark(#7c3212, #ff9e73); /* accessible orange-brown text on light */ --ok: light-dark(#2f8f5b, #4caf7d); --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --maxw: 1120px; --gutter: clamp(20px, 5vw, 72px); --r-card: 16px; --r-input: 10px; --r-chip: 8px; /* multi-layer shadows: light-dark() is a function, so it wraps each layer's color only - the layer list stays at the top level */ --shadow-sm: 0 1px 2px light-dark(rgba(25, 25, 23, 0.05), rgba(0, 0, 0, 0.4)), 0 2px 8px light-dark(rgba(25, 25, 23, 0.04), rgba(0, 0, 0, 0.3)); --shadow-md: 0 4px 12px light-dark(rgba(25, 25, 23, 0.08), rgba(0, 0, 0, 0.45)), 0 12px 32px light-dark(rgba(25, 25, 23, 0.07), rgba(0, 0, 0, 0.4)); --shadow-phone: 0 8px 24px light-dark(rgba(25, 25, 23, 0.12), rgba(0, 0, 0, 0.5)), 0 28px 64px light-dark(rgba(25, 25, 23, 0.14), rgba(0, 0, 0, 0.55)); --shadow-phone-front: 0 12px 30px light-dark(rgba(25, 25, 23, 0.16), rgba(0, 0, 0, 0.5)), 0 34px 76px light-dark(rgba(25, 25, 23, 0.2), rgba(0, 0, 0, 0.55)); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================================== Theme. Tokens above define both light and dark values through light-dark(), so the palette follows `color-scheme`. By default that is `light dark`, which tracks the OS via prefers-color-scheme. The header toggle forces one mode by setting data-theme on , which the two rules below pin down. ========================================================================== */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent-ink); text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); } a:hover { text-decoration-color: var(--accent); } h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; } p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent-soft); color: var(--text); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- layout primitives ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: clamp(56px, 9vw, 112px); } .section-lead { max-width: 34ch; margin-bottom: clamp(32px, 5vw, 56px); } .section-lead h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); } .section-lead p { margin-top: 16px; color: var(--text-soft); max-width: 46ch; } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--text-faint); margin-bottom: 14px; } .num { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } /* ---------- buttons ---------- */ .btn { --_bg: var(--accent); --_fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; background: var(--_bg); color: var(--_fg); font: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease); } .btn:hover { background: var(--accent-press); } .btn:active { transform: translateY(1px) scale(0.97); } .btn--ghost { --_bg: transparent; --_fg: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { --_bg: var(--bg-alt); background: var(--bg-alt); border-color: var(--text-faint); } .btn--disabled, .btn[aria-disabled='true'] { pointer-events: none; opacity: 0.5; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .brand__mark { width: 26px; height: 26px; display: block; flex-shrink: 0; } .site-nav { display: flex; align-items: center; gap: 26px; } .site-nav a { color: var(--text-soft); text-decoration: none; font-size: 0.9375rem; font-weight: 500; } .site-nav a:hover { color: var(--text); } .header-tools { display: flex; align-items: center; gap: 14px; } .lang-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; font-family: var(--font-mono); font-size: 0.75rem; } .lang-switch button { appearance: none; border: 0; background: transparent; color: var(--text-faint); padding: 6px 11px; cursor: pointer; font: inherit; letter-spacing: 0.04em; } .lang-switch button[aria-pressed='true'] { background: var(--text); color: var(--bg); } /* the toggle needs script.js to do anything; hide it when JS is off */ html:not(.js) .theme-toggle { display: none; } .theme-toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-soft); cursor: pointer; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--text-faint); } .theme-toggle svg { width: 17px; height: 17px; } /* the button shows the icon of the theme it switches TO */ .theme-toggle .theme-toggle__sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .theme-toggle__sun { display: block; } :root:not([data-theme='light']) .theme-toggle .theme-toggle__moon { display: none; } } :root[data-theme='dark'] .theme-toggle .theme-toggle__sun { display: block; } :root[data-theme='dark'] .theme-toggle .theme-toggle__moon { display: none; } :root[data-theme='light'] .theme-toggle .theme-toggle__sun { display: none; } :root[data-theme='light'] .theme-toggle .theme-toggle__moon { display: block; } @media (max-width: 720px) { .site-nav { display: none; } } /* narrow phones: the header CTA is redundant (hero + Get-the-app section both carry it) and pushes the tools row past the viewport. The ghost "back" link on the doc pages stays. */ @media (max-width: 560px) { .site-header .btn:not(.btn--ghost) { display: none; } .header-tools { gap: 10px; } } /* ---------- hero ---------- */ /* The hero is a sticky-scrub pinned scrollytelling block. `.hero__track` is a tall spacer that supplies the scroll distance; `.hero__pin` stays fixed in the viewport while the track scrolls past, and the centre-phone screen reel steps through its 6 frames across that distance, landing on the last frame as `#how` scrolls in. Under reduced motion the track collapses (see the prefers-reduced-motion block far below) and the hero is a normal block. */ .hero { padding-block: 0; /* per-frame scrub distance: each of the 6 frames gets ~1 viewport of scroll, the active frame sitting fully still for ~82% of its window and the swap confined to a short band near the boundary (see script.js hold logic) */ --hero-frame-vh: 100vh; } .hero__track { position: relative; height: calc(100vh + 5 * var(--hero-frame-vh)); } .hero__pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: clamp(40px, 7vw, 88px); } .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .hero__copy { max-width: 34ch; } .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--accent-soft); color: var(--accent-ink); font-size: 0.8125rem; font-weight: 500; margin-bottom: 22px; } .status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); } .hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); letter-spacing: -0.03em; } .hero__sub { margin-top: 20px; font-size: 1.1875rem; color: var(--text-soft); max-width: 42ch; } .hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; } .hero__note { margin-top: 16px; font-size: 0.875rem; color: var(--text-faint); } /* per-frame narration captions, crossfaded in sync with the reel. All six stack in one grid cell so the block sizes to the tallest and never shifts layout as captions swap. */ .hero__reel-captions { display: grid; margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--accent); max-width: 40ch; } .hero__caption { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.36s var(--ease); font-size: 0.9375rem; color: var(--text-soft); pointer-events: none; } .hero__caption.is-active { opacity: 1; transform: none; pointer-events: auto; } .hero__caption b { display: block; color: var(--text); font-weight: 600; } /* phone frame */ .phone { position: relative; width: min(300px, 78vw); margin-inline: auto; border-radius: 34px; padding: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-phone); } .phone img { border-radius: 24px; width: 100%; /* screenshots differ slightly in height; crop the bottom to one ratio so reel frames and fanned pairs line up */ aspect-ratio: 9 / 20; height: auto; object-fit: cover; object-position: top; } .phone--sm { width: min(240px, 62vw); } /* ---------- fanned screenshot pair ---------- */ /* Two phone frames stacked: dark (EN) behind, light (PL) in front, fanned like cards. The fan geometry here is the resting state; a scroll-in reveal (defined later, under prefers-reduced-motion: no-preference) rides independent translate/scale properties so this resting transform is never touched. */ .phone-fan { display: grid; justify-content: center; place-items: center; margin-inline: auto; padding-block: 7%; } .phone-fan > .phone { grid-area: 1 / 1; } .phone-fan .phone--back { transform: translate(-13%, -4%) rotate(-5deg) scale(0.94); z-index: 1; } .phone-fan .phone--front { transform: translate(10%, 4%) rotate(4deg); z-index: 2; box-shadow: var(--shadow-phone-front); } /* compact variant - bento "Dishes" cell */ .phone-fan--compact > .phone { width: 124px; padding: 6px; border-radius: 22px; } .phone-fan--compact .phone img { width: 100%; border-radius: 16px; } .phone-fan--compact .phone--back { transform: translate(-17%, -3%) rotate(-4deg) scale(0.95); } .phone-fan--compact .phone--front { transform: translate(13%, 3%) rotate(3deg); } .bento__cell--shot:has(.phone-fan--compact) { grid-template-columns: 172px 1fr; } /* keep the fan inside its column on narrow screens: roughly half the spread */ @media (max-width: 780px) { .phone-fan .phone--back { transform: translate(-7%, -2%) rotate(-2.5deg) scale(0.95); } .phone-fan .phone--front { transform: translate(5%, 2%) rotate(2deg); } .phone-fan--compact > .phone { width: 112px; } .phone-fan--compact .phone--back { transform: translate(-10%, -2%) rotate(-2deg) scale(0.96); } .phone-fan--compact .phone--front { transform: translate(8%, 2%) rotate(1.5deg); } .bento__cell--shot:has(.phone-fan--compact) { grid-template-columns: 148px 1fr; } } .hero .phone-fan { rotate: 1.5deg; } @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; text-align: left; } .hero__copy { max-width: none; } .hero .phone-fan { rotate: 0deg; } /* stacked copy + fan can exceed 100vh on a phone: anchor the pin to the top and let the track height keep driving the scrub */ .hero__pin { align-items: flex-start; min-height: 100vh; padding-top: 76px; } } /* 428vh of scroll to clear the hero is a lot on a phone - shorten the per-frame distance so the reel still steps but the block passes sooner */ @media (max-width: 780px) { .hero { --hero-frame-vh: 62vh; } } /* ---------- light polish on the how / bento / history fans ---------- These sit inside [data-reveal] wrappers that gain .is-in on scroll. The entrance rides the independent translate/scale properties so the resting `transform` (the fan geometry) is never touched. A barely-there idle float lives on the front phone's . Both are wrapped in no-preference, so a reduced-motion visitor gets the phones instantly and no float. */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] .phone-fan:not(.phone-fan--hero) .phone { opacity: 0; translate: 0 8px; scale: 0.97; transition: opacity 0.5s var(--ease), translate 0.6s var(--ease), scale 0.6s var(--ease); } .js [data-reveal].is-in .phone-fan:not(.phone-fan--hero) .phone { opacity: 1; translate: 0 0; scale: 1; } .js [data-reveal].is-in .phone-fan:not(.phone-fan--hero) .phone--back { transition-delay: 0s; } .js [data-reveal].is-in .phone-fan:not(.phone-fan--hero) .phone--front { transition-delay: 70ms; } @keyframes phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .phone-fan:not(.phone-fan--hero) .phone--front img { animation: phone-float 6s ease-in-out infinite; animation-delay: 1s; } } /* ========================================================================== Hero fan - three phones, one orchestrated entrance spring, a small scroll-driven side drift on p1/p3, and a staggered light/dark flip on p1/p3 when the site theme is toggled. The centre phone (p2) is a scroll-driven screen reel (four frames) instead of a flipper. All motion degrades: the flip becomes an instant swap, the reel shows frame 0. Layers per phone: .phone--3d -> fan position + entrance spring (transform) .phone__tilt -> inert preserve-3d wrapper .phone__inner-> light/dark flip (p1/p3) or reel container (p2) .phone__face -> the two screenshots (p1/p3) .phone__frame-> one reel screenshot (p2) ========================================================================== */ .hero__media { position: relative; perspective: 1400px; perspective-origin: 50% 42%; } /* slim vertical frame progress indicator beside the phone fan */ .hero__progress { position: absolute; top: 50%; right: clamp(-4px, -1vw, 8px); translate: 0 -50%; display: flex; flex-direction: column; gap: 8px; z-index: 4; } .hero__tick { width: 3px; height: 26px; border-radius: 999px; background: var(--border-strong); transform: scaleY(0.77); transform-origin: center; transition: transform 0.4s var(--ease), background 0.4s var(--ease); } .hero__tick.is-on { background: var(--accent); transform: scaleY(1); } @media (max-width: 860px) { .hero__progress { display: none; } } .phone-fan--hero { padding-block: 10%; } .phone-fan--hero > .phone { width: min(232px, 60vw); transform-style: preserve-3d; /* entrance: rise + fan out from a near-stack (strong ease-out, no overshoot) */ transition: transform 0.72s var(--ease), opacity 0.5s ease; transition-delay: calc(var(--i, 0) * 80ms); opacity: 0; } /* stacked (pre-spread) state */ .phone-fan--hero:not(.is-spread) > .phone { transform: translateY(26px) rotate(0deg) scale(0.9); } /* fanned (resting) state - p2 is the primary reel: front, centred, full size, never overlapped. p1 / p3 are secondary reels tucked behind it, peeking out the sides and dimmed for depth. */ .phone-fan--hero.is-spread > .phone { opacity: 1; } .phone-fan--hero.is-spread > .phone--p1 { transform: translate(-54%, 4%) rotate(-11deg) scale(0.8); } .phone-fan--hero.is-spread > .phone--p2 { transform: translate(0, -4%) rotate(-1deg) scale(1); } .phone-fan--hero.is-spread > .phone--p3 { transform: translate(54%, 7%) rotate(10deg) scale(0.8); } .phone--p1, .phone--p3 { z-index: 1; filter: brightness(0.86) saturate(0.94); } .phone--p2 { z-index: 3; } /* inert preserve-3d wrapper (pointer parallax removed) */ .phone__tilt { transform-style: preserve-3d; } /* light / dark flip */ .phone__inner { position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1); } .phone.is-flipped .phone__inner { transform: rotateY(180deg); } .phone__face { display: block; width: 100%; border-radius: 24px; backface-visibility: hidden; } .phone__face--dark { position: absolute; inset: 0; transform: rotateY(180deg); } /* centre phone (p2): scroll-driven screen reel */ .phone__reel { position: relative; } .phone__frame { position: absolute; inset: 0; width: 100%; border-radius: 24px; opacity: 0; transform: translateY(6%) scale(0.985); transition: opacity 0.3s var(--ease), transform 0.36s var(--ease); } .phone__frame:first-child { position: relative; } .phone__frame.is-active { opacity: 1; transform: translateY(0) scale(1); } .phone__frame.is-past { opacity: 0; transform: translateY(-6%) scale(0.99); } .phone-fan--hero > .phone { box-shadow: var(--shadow-phone); } .phone-fan--hero > .phone--p2 { box-shadow: var(--shadow-phone-front); } @media (prefers-reduced-motion: reduce) { /* collapse the scroll track: no pin, no scrub - the hero is a normal block */ .hero__track { height: auto; } .hero__pin { position: static; min-height: 0; display: block; padding-block: clamp(40px, 7vw, 88px); } .phone-fan--hero > .phone { transition: none; } .phone__inner { transition: none; } .phone__frame { transition: none; } /* no-JS / reduced-motion fallback: keep the first reel frame visible (JS, when it runs, overrides this with .is-active) */ .phone__reel .phone__frame:first-child { opacity: 1; transform: none; } /* ...and the first narration caption */ .hero__caption { transition: none; } .hero__reel-captions .hero__caption:first-child { opacity: 1; transform: none; } } /* tighten the spread on narrow columns; the primary reel (p2) stays front and full size, the flanking reels peek out less */ @media (max-width: 860px) { .phone-fan--hero > .phone { width: min(208px, 58vw); } .phone-fan--hero.is-spread > .phone--p1 { transform: translate(-44%, 3%) rotate(-9deg) scale(0.76); } .phone-fan--hero.is-spread > .phone--p2 { transform: translate(0, -3%) rotate(-1deg) scale(1); } .phone-fan--hero.is-spread > .phone--p3 { transform: translate(44%, 6%) rotate(8deg) scale(0.76); } } @media (max-width: 460px) { .phone-fan--hero > .phone { width: min(184px, 56vw); } .phone-fan--hero.is-spread > .phone--p1 { transform: translate(-36%, 3%) rotate(-8deg) scale(0.72); } .phone-fan--hero.is-spread > .phone--p3 { transform: translate(36%, 5%) rotate(7deg) scale(0.72); } } /* ---------- how it works ---------- */ .how { background: var(--bg-alt); border-block: 1px solid var(--border); } .how .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 64px); align-items: center; } .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding-block: 22px; border-top: 1px solid var(--border-strong); } .step:first-child { border-top: 0; } .step__n { font-family: var(--font-mono); font-size: 0.875rem; color: var(--accent-ink); padding-top: 3px; } .step h3 { font-size: 1.1875rem; font-weight: 600; } .step p { margin-top: 6px; color: var(--text-soft); font-size: 0.9375rem; } .calc { margin-top: 12px; display: grid; gap: 8px; max-width: 100%; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-chip); padding: 12px 14px; } .calc__label { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .calc p { margin: 0; font-size: inherit; line-height: 1.5; } .calc__steps { margin: 0; display: grid; gap: 4px; padding-top: 8px; border-top: 1px dashed var(--border); } .calc__steps > div { display: grid; grid-template-columns: minmax(0, 6.5em) 1fr; gap: 2px 12px; align-items: baseline; } .calc__steps dt { color: var(--text-faint); } .calc__steps dd { margin: 0; } .calc__note { font-size: 0.75rem; color: var(--text-faint); } @media (max-width: 480px) { .calc__steps > div { grid-template-columns: 1fr; } } .calc b { white-space: nowrap; color: var(--accent-ink); font-weight: 700; } @media (max-width: 860px) { .how .wrap { grid-template-columns: 1fr; } } .how__text h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); } /* ---------- features: bento ---------- */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .bento__cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-sm); } .bento__cell h3 { font-size: 1.125rem; font-weight: 600; } .bento__cell p { margin-top: 10px; color: var(--text-soft); font-size: 0.9375rem; } .bento__cell--wide { grid-column: span 2; } .bento__cell--full { grid-column: span 3; } .bento__cell--tint { background: var(--bg-tint); border-color: var(--accent-soft); } .bento__cell--shot { grid-column: span 2; display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; } .bento__figure { margin: 0; } .bento__figure picture, .bento__figure img { display: block; width: 150px; border-radius: 12px; } .bento__figure picture { overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); } .bento__caption .mini-steps__lead { margin-top: 14px; font-weight: 600; color: var(--text); } .mini-steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: mini; display: grid; gap: 8px; } .bento__caption .mini-steps li { counter-increment: mini; display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 0.875rem; color: var(--text-soft); } .mini-steps li::before { content: counter(mini); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); border: 1px solid var(--border-strong); } .bento__caption h3 { font-size: 1.125rem; } .bento__caption p { margin-top: 10px; } @media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bento__cell--wide, .bento__cell--full, .bento__cell--shot { grid-column: span 2; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento__cell--wide, .bento__cell--full, .bento__cell--shot { grid-column: auto; } .bento__cell--shot { grid-template-columns: 120px 1fr; gap: 16px; } .bento__figure picture, .bento__figure img { width: 120px; } } /* ---------- feature rows (zigzag) ---------- */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; } .feature + .feature { margin-top: clamp(48px, 8vw, 104px); } .feature:nth-child(even) .feature__media, .feature--flip .feature__media { order: -1; } .feature.feature--plain .feature__media { order: 0; } .feature__body h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .feature__body p { margin-top: 14px; color: var(--text-soft); } .feature__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .feature__list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 0.9375rem; color: var(--text-soft); } .feature__list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); flex-shrink: 0; } .shot-caption { margin-top: 12px; text-align: center; font-size: 0.8125rem; color: var(--text-faint); } @media (max-width: 780px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature__media { order: 0; } } /* ---------- privacy strip ---------- */ .privacy { background: var(--bg-tint); border-block: 1px solid var(--accent-soft); } .privacy .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: start; } .privacy h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); } .privacy h2 + p { margin-top: 16px; color: var(--text-soft); } .privacy .btn { margin-top: 24px; } .dont-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .dont-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 0.9375rem; } .dont-list svg { width: 20px; height: 20px; color: var(--accent-ink); flex-shrink: 0; margin-top: 2px; } @media (max-width: 780px) { .privacy .wrap { grid-template-columns: 1fr; } } /* ---------- what's coming ---------- */ .coming .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 6vw, 64px); } .coming__cards { display: grid; gap: 16px; } .coming__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; box-shadow: var(--shadow-sm); } .coming__card h3 { font-size: 1.125rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .coming__card p { margin-top: 8px; font-size: 0.9375rem; color: var(--text-soft); } .tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); background: var(--bg-tint); border: 1px solid var(--accent-soft); border-radius: var(--r-chip); padding: 3px 7px; } .coming__card a { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.9375rem; } @media (max-width: 820px) { .coming .wrap { grid-template-columns: 1fr; } } /* ---------- get the app ---------- */ .get { background: var(--bg-alt); border-top: 1px solid var(--border); } .get .wrap { max-width: 720px; text-align: center; } .get__banner { /* break out of the narrow 720px column so the graphic reads at full size */ position: relative; left: 50%; width: min(920px, calc(100vw - 48px)); transform: translateX(-50%); margin-bottom: 44px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-phone); line-height: 0; } .get__banner-img { width: 100%; height: auto; } /* same theme logic as the header toggle: show the graphic that matches */ .get__banner-img--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .get__banner-img--light { display: none; } :root:not([data-theme='light']) .get__banner-img--dark { display: block; } } :root[data-theme='dark'] .get__banner-img--light { display: none; } :root[data-theme='dark'] .get__banner-img--dark { display: block; } :root[data-theme='light'] .get__banner-img--light { display: block; } :root[data-theme='light'] .get__banner-img--dark { display: none; } .get h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); } .get > .wrap > p { margin-top: 14px; color: var(--text-soft); } .get__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .get__panel { margin-top: 26px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px 22px; display: grid; gap: 14px; } .get__panel h3 { font-size: 1rem; font-weight: 600; } .get__panel p { font-size: 0.9rem; color: var(--text-soft); } .get__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-faint); } .get__meta code { word-break: break-all; } .callout { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; font-size: 0.9rem; color: var(--text-soft); } /* ---------- footer ---------- */ .site-footer { padding-block: 48px; border-top: 1px solid var(--border); background: var(--bg); } .site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .site-footer a { color: var(--text-soft); text-decoration: none; font-size: 0.9375rem; } .site-footer a:hover { color: var(--text); } .site-footer small { color: var(--text-faint); font-size: 0.8125rem; } /* ---------- motion ---------- */ @media (prefers-reduced-motion: no-preference) { /* section + element scroll reveal, with optional stagger via --i. Gated on .js so a no-JS visitor never gets stuck at opacity 0. */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* hero entrance - staggered, runs once on load */ .hero__copy > * { opacity: 0; animation: rise 0.5s var(--ease) forwards; } .hero__copy > :nth-child(1) { animation-delay: 0.04s; } .hero__copy > :nth-child(2) { animation-delay: 0.09s; } .hero__copy > :nth-child(3) { animation-delay: 0.14s; } .hero__copy > :nth-child(4) { animation-delay: 0.19s; } .hero__copy > :nth-child(5) { animation-delay: 0.24s; } @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* button hover lift */ .btn { transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0) scale(0.97); } /* sticky header gains depth once the page is scrolled */ .site-header { transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease); } .site-header.is-scrolled { box-shadow: 0 1px 0 var(--border), var(--shadow-sm); } } /* ---------- helpers ---------- */ [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }