/* Stryda web — dark theme mirroring apps/mobile/src/theme/tokens.ts One viewport on desktop (no scroll). Tighter, type-only on mobile. Theming: the dark palette is the default and lives on :root. The light palette lives on [data-theme="light"] (set by intro.js on ). All surface/text/grain values are routed through tokens so the toggle only has to swap variables — no per-rule overrides. Constants that don't change between themes (fonts, avatar hues, chrome heights) stay below. */ :root { /* ---- Dark palette (default) ---- */ --bg: #0a0e13; --fg: #f2efea; --card: #11161d; --elevated: #1a222c; --muted: #161d26; --muted-fg: #7a8896; --tertiary: #4d5966; --border: #262f3a; --moss: #7fe0a6; --moss-soft: #4e8e69; --moss-deep: #1f3a2e; --electric: #8fd8e8; --positive: #6fd49a; --negative: #e26854; --cream: #e8e1d2; /* Theme-dependent compositional tokens (alpha-on-bg etc.) so light mode can re-derive them rather than fight hardcoded rgba(38,47,58,...) hairlines. */ --hairline: rgba(38, 47, 58, 0.55); --hairline-soft: rgba(38, 47, 58, 0.35); --hairline-faint: rgba(38, 47, 58, 0.3); --grain-blend: screen; --grain-opacity: 0.06; --glow-a-opacity: 0.32; --glow-b-opacity: 0.32; --on-moss: var(--bg); /* text/icon color on a moss fill */ --cta-fg: var(--bg); /* App Store pill foreground */ --toggle-bg: rgba(255, 255, 255, 0.07); /* theme-toggle glass fill (dark) */ --toggle-rim: rgba(255, 255, 255, 0.14); --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --display: "Fraunces", "Times New Roman", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --av-0: #6b8e5a; --av-1: #c9a24a; --av-2: #7a6bb0; --av-3: #c46a5c; /* Single source of truth for vertical chrome heights so the stage can size to (100dvh - nav - footer). */ --nav-h: 0px; --foot-h: 42px; /* Theme-crossfade. Backgrounds/colors transition so the toggle feels intentional. Suppressed before first paint via .theme-preload (set in ) to avoid a flash. */ --theme-transition: background-color 360ms ease, color 360ms ease, border-color 360ms ease, box-shadow 360ms ease; } /* ---- Light palette ---- Warm paper, not cold white — keeps the editorial brand feel. Moss is darkened slightly so it carries enough contrast on a light background; the negative red is deepened for the same reason. */ :root[data-theme="light"] { --bg: #f4f1ea; /* warm paper */ --fg: #15191e; /* near-ink */ --card: #ffffff; --elevated: #ffffff; --muted: #e9e5db; --muted-fg: #5d6670; --tertiary: #8b94a0; --border: #d8d2c5; --moss: #2f9e63; /* darkened for contrast on paper */ --moss-soft: #4e8e69; --moss-deep: #cdebd9; --electric: #2f93ad; --positive: #1f9e60; --negative: #c44a36; --cream: #2c3138; /* "cream" is really the body-copy tone; ink on light */ --hairline: rgba(60, 66, 74, 0.22); --hairline-soft: rgba(60, 66, 74, 0.14); --hairline-faint: rgba(60, 66, 74, 0.12); --grain-blend: multiply; --grain-opacity: 0.04; --glow-a-opacity: 0.5; --glow-b-opacity: 0.4; --on-moss: #ffffff; /* white reads better on the darker light-mode moss */ --cta-fg: #15191e; --toggle-bg: rgba(21, 25, 30, 0.06); --toggle-rim: rgba(60, 66, 74, 0.2); } /* Suppress the crossfade until intro.js has applied the resolved theme, so initial paint doesn't animate from default → resolved. */ html.theme-preload * { transition: none !important; } * { box-sizing: border-box; } html, body { height: 100%; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--bg); color: var(--fg); transition: var(--theme-transition); font-family: var(--sans); font-size: 16px; line-height: 1.45; /* JS sets --vh = innerHeight/100 so 100*var(--vh) is the REAL viewport height, immune to dvh weirdness on Chromium/Safari. Fallback: 100dvh. */ height: 100dvh; height: calc(var(--vh, 1vh) * 100); overflow: hidden; } /* Ambient atmosphere */ .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml;utf8,"); } .glow { position: fixed; z-index: 0; pointer-events: none; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: 0.32; } .glow-a { top: -20vmax; left: -10vmax; opacity: var(--glow-a-opacity); background: radial-gradient(closest-side, rgba(127, 224, 166, 0.18), transparent 70%); } .glow-b { bottom: -25vmax; right: -15vmax; opacity: var(--glow-b-opacity); background: radial-gradient(closest-side, rgba(143, 216, 232, 0.10), transparent 70%); } /* Nav */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 4; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 40px); font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-fg); } .brand { color: var(--fg); font-weight: 700; } /* Theme toggle — fixed top-right round glass button. One icon shows at a time: sun in dark mode (tap to go light), moon in light mode. Icons are absolutely positioned in the same spot and cross-fade. (Variable overrides for each theme live in the :root / :root[data-theme="light"] palette blocks above.) */ .theme-toggle { position: fixed; top: clamp(14px, 3.5vw, 24px); right: clamp(14px, 3.5vw, 24px); z-index: 6; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--fg); background: var(--toggle-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 0 0 1px var(--toggle-rim) inset, 0 6px 18px -10px rgba(0, 0, 0, 0.6); transition: transform 200ms ease, box-shadow 220ms ease, background-color 360ms ease, color 360ms ease; } .theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(127, 224, 166, 0.45) inset, 0 8px 22px -10px rgba(127, 224, 166, 0.3); } .theme-toggle:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; } .theme-toggle:active { transform: scale(0.94); } .tt-icon { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.15, 1); } .tt-moon { opacity: 0; transform: rotate(-40deg) scale(0.6); } .tt-sun { opacity: 1; transform: none; } :root[data-theme="light"] .tt-sun { opacity: 0; transform: rotate(40deg) scale(0.6); } :root[data-theme="light"] .tt-moon { opacity: 1; transform: none; } /* Stage — sized to the real viewport height, no scroll */ .stage { position: relative; z-index: 2; height: 100dvh; height: calc(var(--vh, 1vh) * 100); padding: var(--nav-h) clamp(20px, 5vw, 56px) var(--foot-h); display: grid; place-items: center; overflow: hidden; } .hero { width: 100%; height: 100%; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); /* Children should not stretch past stage interior. */ min-height: 0; } .copy, .device-stage { min-height: 0; max-height: 100%; } /* COPY */ .copy { max-width: 560px; opacity: 0; animation: rise 500ms 200ms cubic-bezier(0.2,0.7,0.15,1) forwards; } @keyframes rise { to { opacity: 1; transform: none; } } .live-dot { background: var(--moss); box-shadow: 0 0 0 0 rgba(127, 224, 166, 0.5); animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(127, 224, 166, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(127, 224, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 224, 166, 0); } } /* Wordmark — clamp tuned so it never forces the column past one viewport. */ .wordmark { margin: 0; font-family: var(--display); font-weight: 600; /* Cap on vh prevents very short windows from blowing it up. */ font-size: clamp(48px, min(9vw, 16vh), 124px); line-height: 0.92; letter-spacing: -0.04em; color: var(--fg); display: flex; user-select: none; } .ltr { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(6px); animation: letterIn 500ms cubic-bezier(0.2, 0.7, 0.15, 1) forwards; animation-delay: calc(45ms * var(--i)); will-change: transform, opacity, filter; } @keyframes letterIn { 0% { opacity: 0; transform: translateY(0.4em); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .lede { margin: clamp(12px, 1.6vh, 18px) 0 0; font-family: var(--display); font-style: italic; font-size: clamp(18px, min(2vw, 2.6vh), 24px); font-weight: 500; color: var(--moss); letter-spacing: -0.01em; } .pitch { margin: clamp(14px, 2vh, 20px) 0 0; font-size: clamp(14px, min(1.3vw, 1.9vh), 17px); color: var(--cream); max-width: 48ch; line-height: 1.55; } /* Desktop shows the prose pitch, mobile shows the list — toggled in the media query. */ .mobile-pitch { display: none; list-style: none; padding: 0; } .mobile-pitch li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline); } .mobile-pitch li:last-child { border-bottom: 0; } .mobile-pitch .mark { width: 14px; display: inline-grid; place-items: center; font-family: var(--mono); color: var(--tertiary); font-size: 14px; } .mobile-pitch .mark.moss { color: var(--moss); } /* CTA */ .cta-row { margin-top: clamp(20px, 3vh, 32px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* [hidden] must always beat display:flex on .cta-row */ .cta-row[hidden] { display: none !important; } /* App Store CTA — iOS 26 Liquid Glass treatment. - Translucent fill so the glow + grain show through - Backdrop-filter blur with high saturation for the "refractive" feel - Bright top-edge inset + soft bottom shadow for depth - Hover lifts subtly and brightens the rim */ .cta { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 20px; color: var(--cta-fg); background: rgba(255, 255, 255, 0.86); background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 245, 245, 0.78) 60%, rgba(220, 220, 220, 0.66) 100% ); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-radius: 9999px; text-decoration: none; font-family: var(--sans); font-weight: 600; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -1px 0 rgba(0, 0, 0, 0.06) inset, 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 18px 40px -16px rgba(0, 0, 0, 0.55), 0 4px 14px -6px rgba(0, 0, 0, 0.35); } .cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 -1px 0 rgba(0, 0, 0, 0.06) inset, 0 0 0 1px rgba(127, 224, 166, 0.35) inset, 0 22px 48px -14px rgba(127, 224, 166, 0.22), 0 4px 14px -6px rgba(0, 0, 0, 0.35); } /* Light mode: the glossy-white pill would vanish on warm paper, so flip it to a dark "ink" pill with white type — high contrast, still reads as the primary action. */ :root[data-theme="light"] .cta { color: #f4f1ea; background: rgba(21, 25, 30, 0.92); background-image: linear-gradient( 180deg, rgba(36, 41, 48, 0.96) 0%, rgba(21, 25, 30, 0.92) 60%, rgba(12, 15, 19, 0.9) 100% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 0 0 1px rgba(0, 0, 0, 0.12) inset, 0 18px 40px -16px rgba(20, 30, 24, 0.4), 0 4px 14px -6px rgba(0, 0, 0, 0.2); } :root[data-theme="light"] .cta:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 0 0 1px rgba(47, 158, 99, 0.5) inset, 0 22px 48px -14px rgba(47, 158, 99, 0.28), 0 4px 14px -6px rgba(0, 0, 0, 0.2); } .cta-icon { width: 26px; height: 26px; fill: currentColor; } .cta-stack { display: flex; flex-direction: column; line-height: 1.05; } .cta-sm { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .cta-lg { font-size: 18px; letter-spacing: -0.01em; font-weight: 700; } /* Notify form — visible by default so the waitlist is front-and-center. Used to be reveal-on-CTA-click, now we want every visitor to see the email capture immediately. */ .notify { margin-top: clamp(14px, 2vh, 22px); max-height: 240px; opacity: 1; transition: max-height 420ms cubic-bezier(0.2, 0.7, 0.15, 1), opacity 280ms ease, margin-top 280ms ease; } .notify.open { max-height: 240px; opacity: 1; } .notify-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted-fg); margin-bottom: 10px; } /* Notify form — Liquid Glass capsule. Translucent background, backdrop-blur, soft inset rim. The whole row acts like one inset capsule with the email input flush-left and the notify button as a tighter Liquid Glass pill inside. */ .notify-row { display: flex; gap: 6px; align-items: stretch; background: var(--notify-bg, rgba(20, 26, 34, 0.55)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-radius: 9999px; padding: 6px; max-width: 460px; box-shadow: var(--notify-shadow, 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 10px 28px -14px rgba(0, 0, 0, 0.6)); transition: box-shadow 220ms ease, background-color 360ms ease; } :root[data-theme="light"] { --notify-bg: rgba(255, 255, 255, 0.7); --notify-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 -1px 0 rgba(0, 0, 0, 0.04) inset, 0 0 0 1px rgba(60, 66, 74, 0.12) inset, 0 10px 28px -16px rgba(40, 50, 44, 0.3); --notify-btn-bg: linear-gradient( 180deg, rgba(58, 184, 117, 1) 0%, rgba(47, 158, 99, 1) 60%, rgba(38, 138, 85, 1) 100% ); } .notify-row:focus-within { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 0 0 1px rgba(127, 224, 166, 0.45) inset, 0 0 0 4px rgba(127, 224, 166, 0.12), 0 10px 28px -14px rgba(0, 0, 0, 0.6); } .notify-row input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg); font-family: var(--sans); font-size: 15px; padding: 10px 14px; } .notify-row input::placeholder { color: var(--tertiary); } .notify-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--moss); background-image: var(--notify-btn-bg, linear-gradient( 180deg, rgba(180, 244, 207, 0.95) 0%, rgba(127, 224, 166, 1) 60%, rgba(110, 200, 148, 1) 100% )); color: var(--on-moss); border: 0; border-radius: 9999px; padding: 10px 16px; font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: transform 150ms ease, filter 200ms ease, box-shadow 200ms ease; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(0, 0, 0, 0.06) inset, 0 6px 16px -8px rgba(127, 224, 166, 0.55); } .notify-btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(0, 0, 0, 0.06) inset, 0 10px 22px -8px rgba(127, 224, 166, 0.6); } .notify-btn-arrow { width: 16px; height: 16px; } .notify-msg { margin: 10px 2px 0; min-height: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--moss); } .notify-msg.warn { color: var(--negative); } /* DEVICE MOCKUP — sized off viewport height so it always fits */ .device-stage { display: grid; place-items: center; width: 100%; perspective: 1400px; opacity: 0; animation: deviceIn 600ms 350ms cubic-bezier(0.2, 0.7, 0.15, 1) forwards; } @keyframes deviceIn { 0% { opacity: 0; transform: translateY(20px) rotateY(-8deg); } 100% { opacity: 1; transform: translateY(0) rotateY(-4deg); } } .device { position: relative; /* HEIGHT-first sizing with a hard cap. Device height never exceeds 640px so it doesn't dwarf the type column on tall monitors, and never exceeds the viewport interior on short ones. Width derives via aspect-ratio. */ height: min( 640px, calc(var(--vh, 1vh) * 100 - var(--nav-h) - var(--foot-h) - 32px), calc(32vw * 19.5 / 9) ); aspect-ratio: 9 / 19.5; transform: rotateY(-4deg) rotateX(2deg); transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.15, 1); } .device-frame { position: relative; width: 100%; height: 100%; background: var(--device-frame); border-radius: 14% / 6.4%; padding: 8px; box-shadow: var(--device-frame-shadow), inset 0 0 0 1px var(--device-frame-rim), inset 0 0 0 2px var(--device-frame-inset); } .device-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30%; height: 20px; background: #000; border-radius: 999px; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .device-screen { position: relative; width: 100%; height: 100%; background: var(--bg); border-radius: 12% / 5.4%; overflow: hidden; padding: 48px 16px 14px; font-size: 11px; color: var(--fg); } /* The phone mockup mirrors the real app, which has both a dark "athletic" theme and a light "country-club" theme (parchment + emerald + brass). Re-pin the palette tokens locally on the device so the screen follows whichever theme the page is in, instead of fighting the page-level palette (which is paper-warm for the rest of the website chrome). Values mirror apps/mobile/src/theme/themes.ts. */ .device { --bg: #0a0e13; --fg: #f2efea; --muted-fg: #7a8896; --tertiary: #4d5966; --border: #262f3a; --moss: #7fe0a6; --positive: #6fd49a; --negative: #e26854; --on-moss: #0a0e13; --device-hairline: rgba(38, 47, 58, 0.55); --device-hairline-soft: rgba(38, 47, 58, 0.4); --device-hairline-faint: rgba(38, 47, 58, 0.3); --device-hairline-lb: rgba(38, 47, 58, 0.35); --device-current-tint: rgba(127, 224, 166, 0.06); --device-frame: linear-gradient(155deg, #2a2f37 0%, #11141a 60%, #06080b 100%); --device-frame-inset: rgba(0, 0, 0, 0.85); --device-frame-rim: rgba(255, 255, 255, 0.05); --device-frame-shadow: 0 60px 80px -40px rgba(0, 0, 0, 0.8), 0 30px 60px -20px rgba(127, 224, 166, 0.08); } :root[data-theme="light"] .device { --bg: #f4efe3; /* parchment */ --fg: #1a1f18; /* ink */ --muted-fg: #5a5f52; --tertiary: #8a8e81; --border: rgba(26, 31, 24, 0.18); --moss: #1f3d2d; /* emerald accent */ --positive: #1f3d2d; --negative: #b53a2a; --on-moss: #f4efe3; --device-hairline: rgba(26, 31, 24, 0.16); --device-hairline-soft: rgba(26, 31, 24, 0.10); --device-hairline-faint: rgba(26, 31, 24, 0.08); --device-hairline-lb: rgba(26, 31, 24, 0.10); --device-current-tint: rgba(31, 61, 45, 0.06); /* Quiet graphite bezel — reads as phone hardware and lets the parchment screen carry the brand. Brass was fighting the page; this stays neutral. */ --device-frame: linear-gradient(155deg, #3a3f47 0%, #1f242b 60%, #14181d 100%); --device-frame-inset: rgba(0, 0, 0, 0.75); --device-frame-rim: rgba(255, 255, 255, 0.08); --device-frame-shadow: 0 60px 80px -40px rgba(40, 35, 28, 0.35), 0 30px 60px -20px rgba(31, 61, 45, 0.12); } .device-shadow { position: absolute; left: 8%; right: 8%; bottom: -22px; height: 28px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%); filter: blur(6px); z-index: -1; } /* Status bar */ .status-bar { position: absolute; top: 13px; left: 0; right: 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--fg); } .status-right { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); } .status-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; } .status-bars i { width: 2.5px; background: currentColor; border-radius: 1px; } .status-bars i:nth-child(1) { height: 3.5px; } .status-bars i:nth-child(2) { height: 5px; } .status-bars i:nth-child(3) { height: 7px; } .status-bars i:nth-child(4) { height: 9px; } .status-wifi svg { width: 12px; height: 10px; } .status-batt { width: 20px; height: 10px; border: 1px solid currentColor; border-radius: 3px; position: relative; padding: 1px; } .status-batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; } .status-batt b { display: block; width: 80%; height: 100%; background: currentColor; border-radius: 1px; } /* Round header */ .r-header { padding-bottom: 8px; border-bottom: 1px solid var(--device-hairline); } .r-header-row { display: flex; align-items: center; justify-content: space-between; } .r-live { display: inline-flex; align-items: center; } .r-avatars { display: inline-flex; } .r-avatars .av { margin-left: -6px; border: 2px solid var(--bg); } .r-avatars .av:first-child { margin-left: 0; } .live-dot { width: 7px; height: 7px; border-radius: 50%; } .av { width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--mono); font-size: 7.5px; font-weight: 700; color: rgba(0, 0, 0, 0.78); letter-spacing: 0.04em; } .av.sm { width: 14px; height: 14px; font-size: 6.5px; } .av[data-c="0"] { background: var(--av-0); } .av[data-c="1"] { background: var(--av-1); } .av[data-c="2"] { background: var(--av-2); } .av[data-c="3"] { background: var(--av-3); } .r-course { margin-top: 10px; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; } .r-format { margin-top: 3px; font-family: var(--mono); font-size: 8.5px; color: var(--tertiary); } .r-now { padding: 10px 0 4px; } .r-eyebrow { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--muted-fg); } .r-eyebrow.moss { color: var(--moss); } .r-eyebrow.muted { color: var(--tertiary); } .r-hole { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; margin-top: 3px; } .r-hole-meta { font-family: var(--mono); font-size: 8.5px; color: var(--muted-fg); margin-top: 2px; } .r-eyebrow-row { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 5px; } /* Scorecard grid */ .r-card { border-top: 1px solid var(--device-hairline); border-bottom: 1px solid var(--device-hairline); } .r-card-head, .r-row { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); align-items: center; } .r-card-head { height: 20px; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.16em; color: var(--muted-fg); border-bottom: 1px solid var(--device-hairline-soft); } .r-card-head > * { padding: 0 4px; } .r-card-head .r-hole-col { text-align: center; } .r-card-head .r-hole-col.current { color: var(--moss); font-weight: 700; } .r-row { height: 28px; border-bottom: 1px solid var(--device-hairline-faint); } .r-row.last { border-bottom: 0; } .r-name { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--fg); padding-left: 2px; } .r-name .you { font-family: var(--mono); font-style: normal; font-size: 6.5px; letter-spacing: 0.18em; color: var(--moss); margin-left: 3px; } .r-score { text-align: center; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); } .r-score.under { color: var(--positive); font-weight: 700; } .r-score.over { color: var(--negative); } .r-score.current { background: var(--device-current-tint); } .r-score.writing { color: var(--tertiary); animation: blink 1.1s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.25; } } /* Hole strip */ .r-strip { display: flex; gap: 3px; margin: 10px 0 14px; } .r-chip { flex: 1; height: 16px; display: grid; place-items: center; font-family: var(--mono); font-size: 8.5px; color: var(--tertiary); border-radius: 3px; border: 1px solid transparent; } .r-chip.filled { color: var(--fg); border-color: var(--border); } .r-chip.active { background: var(--moss); color: var(--bg); font-weight: 700; border-color: transparent; } /* Leaderboard */ .r-lb-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; } .r-lb-title { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; } .r-lb { margin-top: 6px; } .r-lb-row { display: grid; grid-template-columns: 12px 14px 1fr auto; align-items: center; gap: 7px; height: 22px; border-bottom: 1px solid var(--device-hairline-lb); } .r-lb-row.last { border-bottom: 0; } .r-lb-pos { font-family: var(--mono); font-size: 8.5px; color: var(--tertiary); } .r-lb-name { font-size: 9.5px; } .r-lb-par { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: -0.02em; } .r-lb-par.under { color: var(--positive); font-weight: 700; } .r-lb-par.over { color: var(--negative); } /* Commissioner action pill */ .r-action { margin-top: 10px; padding: 7px 0; background: var(--moss); border-radius: 999px; text-align: center; } .r-ask { font-family: var(--sans); font-size: 9.5px; font-weight: 600; color: var(--bg); letter-spacing: 0.02em; } /* Footer */ .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--foot-h); display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(20px, 4vw, 40px); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tertiary); opacity: 0; animation: rise 500ms 600ms ease forwards; } .foot-r { color: var(--moss); } /* Mobile (≤760px): single column, scrolls. The page used to feel cramped — everything was packed tight. This pass opens it up: more outer padding, bigger section gaps, an airier pitch list, and clear breathing room around the CTA + waitlist pair so each block reads on its own. Order in the document flows naturally: wordmark → lede → pitch → CTA → form → device. */ @media (max-width: 760px) { :root { --nav-h: 0px; --foot-h: 40px; } /* Mobile gets to scroll. */ body { overflow-y: auto; overflow-x: hidden; height: auto; } .stage { height: auto; min-height: 0; /* Top padding clears the fixed theme toggle; comfortable side gutters. */ padding: 72px 24px 36px; place-items: start center; overflow: visible; } /* Single column. Spacing is comfortable but compact enough that the hero fits without overflowing — the prior pass made everything too big. */ .hero { grid-template-columns: 1fr; align-items: start; gap: 30px; height: auto; } .copy { max-width: 100%; min-height: 0; display: block; text-align: left; } /* Wordmark MUST fit one line. 13vw with a hard 52px cap keeps STRYDA inside the gutters on a 360–430px phone. */ .wordmark { font-size: clamp(40px, 13vw, 52px); letter-spacing: -0.04em; line-height: 0.95; } .lede { margin-top: 12px; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.3; } /* Swap the prose pitch for the list. Compact rows. */ .desktop-pitch { display: none; } .mobile-pitch { display: block; margin: 20px 0 4px; } .mobile-pitch li { font-size: 15px; color: var(--cream); padding: 10px 0; gap: 10px; } /* CTA + waitlist as one connected unit. */ .cta-row { margin-top: 22px; } .cta { padding: 13px 22px 13px 18px; } .cta-lg { font-size: 17px; } /* Form sits right under the CTA — visible by default, full width. */ .notify { margin-top: 16px; max-width: 100%; align-self: stretch; width: 100%; } .notify.open { max-height: 260px; } .notify-label { font-size: 11.5px; line-height: 1.5; margin-bottom: 10px; } .notify-row { max-width: 100%; padding: 6px; } .notify-row input { font-size: 16px; padding: 11px 14px; } /* 16px avoids iOS zoom-on-focus */ .notify-btn { padding: 11px 16px; } /* Device — fits the column with room above and below. Animates in on scroll. */ .device-stage { display: grid; place-items: center; margin: 4px auto 4px; width: 100%; opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.15, 1); } .device-stage.in-view { opacity: 1; transform: none; } .device { width: min(74vw, 320px); height: auto; aspect-ratio: 9 / 19.5; transform: none; } /* Restore anything desktop short-window rules killed inside the device. */ .r-lb, .r-lb-head, .r-action { display: revert; } .nav-meta { display: none; } .foot { position: static; margin: 24px auto 0; width: 100%; font-size: 9px; letter-spacing: 0.18em; opacity: 1; animation: none; } .glow-b { display: none; } } /* Short desktop windows (laptops with chunky chrome, etc.) — tighten spacing so the hero fits one viewport without removing copy. */ @media (max-height: 720px) and (min-width: 761px) { .pitch.desktop-pitch { font-size: 13px; line-height: 1.45; max-width: 42ch; } .lede { margin-top: 8px; } .cta-row { margin-top: 14px; } .wordmark { font-size: clamp(48px, 7vw, 96px); } } @media (max-height: 600px) and (min-width: 761px) { /* Genuinely tiny — pitch drops, leaderboard inside the device drops too. */ .pitch.desktop-pitch { display: none; } .r-lb, .r-lb-head, .r-action { display: none; } .wordmark { font-size: clamp(40px, 6vw, 80px); } } /* Reduced-motion: present final state */ @media (prefers-reduced-motion: reduce) { .ltr, .copy, .device-stage, .foot, .live-dot, .r-score.writing { animation: none; } .ltr { opacity: 1; transform: none; filter: none; } .copy, .device-stage, .foot { opacity: 1; transform: none; } .device { transform: none; } }