@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap'); /* Smooth cross-document transitions between pages (index ↔ academy ↔ lesson). Default crossfade; ignored in browsers without the View Transitions API. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* Manual theme overrides (set on by the toggle script below the nav). Wins over prefers-color-scheme so an explicit user choice sticks across system-appearance changes. */ html[data-theme="dark"] { color-scheme: dark; --tint-rgb: 255, 255, 255; --bg: #0e0f10; --panel: #18191a; --panel-2: #1f2122; --text: #ece9e0; --muted: #96938b; /* Top→bottom gradient gives the pill curvature even when there's no content behind to reveal via backdrop-blur. */ --nav-bg: linear-gradient(180deg, rgba(30, 32, 36, 0.42) 0%, rgba(12, 14, 16, 0.24) 100%); --nav-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 -6px 14px rgba(0, 0, 0, 0.22); /* Brighter top rim = the bead of light that runs along the top edge of a piece of liquid glass. The single token that most reads as "Apple". */ --nav-edge-top: rgba(255, 255, 255, 0.5); --nav-edge-bottom: rgba(0, 0, 0, 0.35); --nav-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 40%); /* Glass-lozenge fill that fades in behind a nav link on hover. */ --nav-lozenge: rgba(255, 255, 255, 0.1); --nav-lozenge-edge: rgba(255, 255, 255, 0.16); /* Footer surface — its own distinct "deck" tone separate from page bg. Slightly cooler/bluer than --bg so it reads as a foundation. */ --footer-bg: #0a0c12; --footer-divider: rgba(255, 255, 255, 0.06); --blue: #4d9eff; --blue-strong: #2491ff; --green: #34d058; --amber: #ffb020; --mint: #20c8b8; --purple: #b45cff; --danger: #ff6b6b; --shadow: 0 30px 90px rgba(0, 0, 0, 0.5); /* Liquid glass material — translucent surface + refractive edge highlight */ --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%); --glass-tint: rgba(255, 255, 255, 0.04); --glass-blur: saturate(180%) blur(22px); --glass-border: rgba(255, 255, 255, 0.12); --glass-edge-top: rgba(255, 255, 255, 0.18); --glass-edge-side: rgba(255, 255, 255, 0.06); --glass-edge-bottom: rgba(0, 0, 0, 0.4); --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2); --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 38%); } html[data-theme="light"] { color-scheme: light; --tint-rgb: 0, 0, 0; --bg: #f7f6f4; --panel: #ffffff; --panel-2: #f0eee9; --text: #18191a; --muted: #4f4d47; /* Vertical gradient + inner bottom shadow makes the pill feel curved/lit even when the page behind it is flat. iOS-26 glass works because the surface itself has dimension, not just because there's content behind it. */ --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100%); --nav-shadow: 0 12px 30px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06), inset 0 -8px 14px rgba(0, 0, 0, 0.025); --nav-edge-top: rgba(255, 255, 255, 1); --nav-edge-bottom: rgba(0, 0, 0, 0.05); --nav-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 42%); /* Glass-lozenge fill behind a nav link on hover (light theme). */ --nav-lozenge: rgba(0, 0, 0, 0.05); --nav-lozenge-edge: rgba(0, 0, 0, 0.06); /* Footer in light mode — cool-tinted near-white that reads as a soft deck beneath the warm cream content area. */ --footer-bg: #eef0f5; --footer-divider: rgba(0, 0, 0, 0.06); --blue: #0b5fc6; --blue-strong: #0959bf; --green: #1f7c34; --amber: #a86700; --mint: #027866; --purple: #6e35bf; --danger: #c12d2d; --shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); /* Darker stops so white button text clears WCAG AA (4.5:1) in light mode. Top #1f6fd6 → white 4.9:1; bottom blue-strong #0959bf → 6.6:1. */ --btn-grad: linear-gradient(180deg, #1f6fd6 0%, var(--blue-strong) 100%); --btn-grad-hover: linear-gradient(180deg, #195fc0 0%, #074fa8 100%); --btn-grad-active: linear-gradient(180deg, #14529e 0%, #063f86 100%); --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%); --glass-tint: rgba(255, 255, 255, 0.55); --glass-blur: saturate(180%) blur(20px); --glass-border: rgba(0, 0, 0, 0.08); --glass-edge-top: rgba(255, 255, 255, 0.85); --glass-edge-side: rgba(255, 255, 255, 0.4); --glass-edge-bottom: rgba(0, 0, 0, 0.05); --glass-shadow: 0 18px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05); --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 42%); } /* Liquid glass utility — apply via .glass or compose into specific selectors. */ .glass, [data-glass] { position: relative; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 1px 0 0 var(--glass-edge-side), inset -1px 0 0 var(--glass-edge-side), inset 0 -1px 0 var(--glass-edge-bottom); isolation: isolate; } .glass::before, [data-glass]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-sheen); pointer-events: none; z-index: 0; } .glass > *, [data-glass] > * { position: relative; z-index: 1; } /* Theme toggle button — liquid glass pill */ .theme-toggle { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-tint); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom), 0 2px 6px rgba(0, 0, 0, 0.18); color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; padding: 0; isolation: isolate; overflow: hidden; } .theme-toggle::before { content: ""; position: absolute; inset: 0; background: var(--glass-sheen); pointer-events: none; z-index: 0; border-radius: inherit; } .theme-toggle svg { position: relative; z-index: 1; width: 16px; height: 16px; display: block; } .theme-toggle:hover { background: rgba(var(--tint-rgb), 0.08); border-color: rgba(var(--tint-rgb), 0.22); transform: translateY(-1px); } /* Language picker — only injected by i18n.js when multiple locales exist. Visual weight matched to the theme-toggle so the nav stays balanced. */ .lang-picker { height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(var(--tint-rgb), 0.04); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .lang-picker:hover { background: rgba(var(--tint-rgb), 0.08); border-color: var(--line-strong); } /* Only one icon at a time — JS toggles a data-show attribute. */ .theme-toggle [data-icon="moon"] { display: none; } .theme-toggle [data-icon="sun"] { display: block; } html[data-theme="dark"] .theme-toggle [data-icon="moon"] { display: block; } html[data-theme="dark"] .theme-toggle [data-icon="sun"] { display: none; } /* If no explicit theme is set, fall back to system preference for which icon to show. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-toggle [data-icon="moon"] { display: block; } html:not([data-theme]) .theme-toggle [data-icon="sun"] { display: none; } } :root { color-scheme: light dark; /* --tint-rgb is the color used for ALL semi-transparent surface overlays (subtle backgrounds, borders, hover states). Defined as a comma-separated RGB triplet so it can be plugged into rgba(): rgba(var(--tint-rgb), 0.04). Flipped from white→black in the light-mode @media block below — that single change re-tints every overlay in the codebase. */ --tint-rgb: 255, 255, 255; --bg: #0e0f10; --panel: #18191a; --panel-2: #1f2122; --text: #ece9e0; --muted: #96938b; --line: rgba(var(--tint-rgb), 0.08); --line-strong: rgba(var(--tint-rgb), 0.14); --blue: #4d9eff; --blue-strong: #2491ff; --green: #34d058; --amber: #ffb020; --mint: #20c8b8; --purple: #b45cff; --danger: #ff6b6b; --shadow: 0 30px 90px rgba(0, 0, 0, 0.5); /* Primary-button gradient (dark default). White text clears AA here because blue-strong stays mid-blue in dark mode. Overridden darker in light mode. */ --btn-grad: linear-gradient(180deg, #5cb1ff 0%, var(--blue-strong) 100%); --btn-grad-hover: linear-gradient(180deg, #52a8ff 0%, #1d83e8 100%); --btn-grad-active: linear-gradient(180deg, #4099ee 0%, #1670d6 100%); --nav-bg: linear-gradient(180deg, rgba(30, 32, 36, 0.42) 0%, rgba(12, 14, 16, 0.24) 100%); --nav-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 -6px 14px rgba(0, 0, 0, 0.22); /* Brighter top rim = the bead of light that runs along the top edge of a piece of liquid glass. The single token that most reads as "Apple". */ --nav-edge-top: rgba(255, 255, 255, 0.5); --nav-edge-bottom: rgba(0, 0, 0, 0.35); --nav-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 40%); /* Glass-lozenge fill that fades in behind a nav link on hover. */ --nav-lozenge: rgba(255, 255, 255, 0.1); --nav-lozenge-edge: rgba(255, 255, 255, 0.16); --footer-bg: #0a0c12; --footer-divider: rgba(255, 255, 255, 0.06); /* Liquid glass tokens (dark default — re-declared in the light @media below). */ --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%); --glass-tint: rgba(255, 255, 255, 0.04); --glass-blur: saturate(180%) blur(22px); --glass-border: rgba(255, 255, 255, 0.12); --glass-edge-top: rgba(255, 255, 255, 0.18); --glass-edge-side: rgba(255, 255, 255, 0.06); --glass-edge-bottom: rgba(0, 0, 0, 0.4); --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2); --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 38%); } @media (prefers-color-scheme: light) { :root { /* Light surfaces — slightly warm off-white so it doesn't feel clinical. Card panels lift to pure white. Body text is near-black for max contrast. --tint-rgb flips to black so all overlay calls invert automatically. */ --tint-rgb: 0, 0, 0; --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.32) 100%); --nav-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 -8px 14px rgba(0, 0, 0, 0.03); --nav-edge-top: rgba(255, 255, 255, 1); --nav-edge-bottom: rgba(0, 0, 0, 0.06); --nav-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 38%); --footer-bg: #eef0f5; --footer-divider: rgba(0, 0, 0, 0.06); --bg: #f7f6f4; --panel: #ffffff; --panel-2: #f0eee9; --text: #18191a; --muted: #4f4d47; /* darker than dark-mode equivalent — needed for AA contrast on light bg */ --blue: #0b5fc6; --blue-strong: #0959bf; --green: #1f7c34; --amber: #a86700; --mint: #027866; --purple: #6e35bf; --danger: #c12d2d; --shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); --btn-grad: linear-gradient(180deg, #1f6fd6 0%, var(--blue-strong) 100%); --btn-grad-hover: linear-gradient(180deg, #195fc0 0%, #074fa8 100%); --btn-grad-active: linear-gradient(180deg, #14529e 0%, #063f86 100%); --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%); --glass-tint: rgba(255, 255, 255, 0.55); --glass-blur: saturate(180%) blur(20px); --glass-border: rgba(0, 0, 0, 0.08); --glass-edge-top: rgba(255, 255, 255, 0.85); --glass-edge-side: rgba(255, 255, 255, 0.4); --glass-edge-bottom: rgba(0, 0, 0, 0.05); --glass-shadow: 0 18px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05); --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 42%); } } * { box-sizing: border-box; } /* Keyboard focus — visible ring on every interactive element. Uses --text (near-black in light, near-white in dark) so it contrasts with BOTH the page and any colored/glass control, including the blue primary button. outline doesn't affect layout or geometry, so state never shifts the box. Only shown for keyboard focus (:focus-visible), not mouse clicks. */ :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } /* Suppress the legacy mouse-click focus ring where :focus-visible is supported. */ :focus:not(:focus-visible) { outline: none; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } code { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; padding: 1px 6px; border-radius: 5px; background: rgba(var(--tint-rgb), 0.06); color: var(--text); } h1, h2, h3 { font-family: 'Geist', sans-serif; letter-spacing: -0.035em; font-feature-settings: "ss01", "ss03"; } h1 { margin: 0; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.02; font-weight: 800; } h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; font-weight: 800; } h3 { font-weight: 700; } .site-shell { min-height: 100vh; } /* Center all top-level page bands inside a max-1280px column without constraining the bands themselves — backgrounds (nav blur, section borders, footer divider) still extend edge-to-edge of the viewport, only the inner content respects the column. Floor: existing clamp side-padding for small viewports. */ .nav, .hero, .section, .footer { padding-left: max(clamp(20px, 5vw, 72px), calc((100vw - 1080px) / 2)); padding-right: max(clamp(20px, 5vw, 72px), calc((100vw - 1080px) / 2)); } /* Nav — iOS-26 liquid glass capsule. Floats inset from the viewport edge, rounded into a full pill, with layered specular highlights and a slow ambient shimmer that suggests refraction. The background is intentionally translucent (~35–40% alpha) so the backdrop blur has actual content to act on — without that, "glass" looks like paint. */ .nav { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1180px, calc(100% - 32px)); margin: 12px auto 0; padding: 8px 10px 8px 20px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--nav-bg); /* Liquid Glass clarity: the glassiness comes from heavy blur + high saturation of the content BEHIND it, while the fill itself stays low-opacity so you actually see through it (frosted glass is milky because the fill is opaque; liquid glass is clear). The contrast bump gives the slight lens "pop" at the edges. */ backdrop-filter: saturate(210%) blur(32px) brightness(1.06) contrast(1.03); -webkit-backdrop-filter: saturate(210%) blur(32px) brightness(1.06) contrast(1.03); box-shadow: var(--nav-shadow), /* top specular: bright rim like wet glass */ inset 0 1.5px 0 var(--nav-edge-top), /* side refraction */ inset 1px 0 0 var(--glass-edge-side), inset -1px 0 0 var(--glass-edge-side), /* bottom anti-spec: catches the floor */ inset 0 -1px 0 var(--nav-edge-bottom); isolation: isolate; overflow: hidden; } /* ─── True refraction (progressive enhancement) ────────────────────────────── backdrop-filter: url(#le-liquid) genuinely DISPLACES the pixels behind the nav — real lensing, the thing plain blur can't do. Only Chromium renders SVG filters in backdrop-filter; Safari/Firefox parse url() but no-op it, which would silently drop the frost. So this is gated to Chromium: • (backdrop-filter: url("#x")) → engine accepts url() filter values • and (not (-webkit-hyphens: none)) → excludes Safari & Firefox, which both support -webkit-hyphens (Chromium does not), leaving Chromium only. Scoped to html[data-liquid] (index) where the #le-liquid exists, so no other page can reference a missing filter and lose its blur. The SVG filter is self-contained (displace → blur → saturate), so it fully replaces the frost it overrides — no double-processing. */ @supports (backdrop-filter: url("#le-liquid")) and (not (-webkit-hyphens: none)) { html[data-liquid] .nav { backdrop-filter: url("#le-liquid"); -webkit-backdrop-filter: url("#le-liquid"); } } /* Lens-distortion sheen — visible in both themes via theme-aware --nav-sheen. */ .nav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: /* diagonal specular highlight (the "glint" along the top-left curve) */ var(--nav-sheen), /* central lens lift along the top edge — always white because real glass refracts light, not the page tint. Strength scales with theme via the --nav-edge-top token (white in dark mode, near-pure-white in light). */ radial-gradient(ellipse 80% 60% at 50% 0%, var(--nav-edge-top) 0%, transparent 65%), /* concentrated top-left glint — the bright point where the "light source" hits the curve of the glass. This asymmetry is what stops it reading as a flat frosted bar and makes it read as a lensed, liquid surface. */ radial-gradient(circle 120px at 14% -10%, rgba(255, 255, 255, 0.5) 0%, transparent 70%); pointer-events: none; z-index: 0; opacity: 0.85; } /* Ambient shimmer — slow horizontal pan suggests light refracting. Always a white pan (light is white regardless of background). */ .nav::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 105deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70% ); background-size: 220% 100%; background-position: 100% 50%; pointer-events: none; z-index: 0; mix-blend-mode: overlay; animation: nav-shimmer 9s ease-in-out infinite; } @keyframes nav-shimmer { 0% { background-position: 120% 50%; } 50% { background-position: -20% 50%; } 100% { background-position: 120% 50%; } } @media (prefers-reduced-motion: reduce) { .nav::after { animation: none; } } .nav > * { position: relative; z-index: 1; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; } .brand-mark { display: block; width: 28px; height: 28px; /* The favicon SVG already contains the squircle shape — no border-radius needed. */ } .nav-links { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 14px; white-space: nowrap; } /* Nav links get a glass-lozenge highlight on hover — a translucent pill with a thin rim that fades in BEHIND the text. It's drawn by an absolutely positioned ::before so it changes no geometry (honors the house rule that state never moves anything); the link itself only shifts text color. This is the iOS-26 control-highlight feel: hovered controls look like little beads of glass. */ .nav-links a:not(.button) { position: relative; transition: color 0.18s ease; } .nav-links a:not(.button)::before { content: ""; position: absolute; inset: -7px -12px; border-radius: 999px; background: var(--nav-lozenge); box-shadow: inset 0 1px 0 var(--nav-edge-top), inset 0 0 0 1px var(--nav-lozenge-edge); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; z-index: -1; } .nav-links a:not(.button):hover { color: var(--text); } /* Active-page indicator. Per the house rule, state never changes geometry: brand color + an underline drawn in the line box (no reflow), not a border rail or weight change. Set by scripts/i18n.js via aria-current="page". */ .nav-links a.is-current-page { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--blue); } /* Skip-to-content link — off-screen until focused, then a glass pill top-left. Injected by scripts/i18n.js as the first focusable element. */ .skip-link { position: fixed; top: 10px; left: 12px; z-index: 100; transform: translateY(-150%); padding: 10px 16px; border-radius: 10px; background: var(--blue-strong); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--text); outline-offset: 2px; } .nav-links a:not(.button):hover::before { opacity: 1; } /* Nav-internal buttons — slimmer, contained "action chip" treatment. Hero CTAs need ambient glow and pronounced edges; the same treatment inside the nav capsule reads as two pills stacked, so we strip the outer glow, tighten the pill, and let it sit flush. The translateY on hover (used by free-standing buttons) also looks broken when nested, so it's neutralized to a darken-only response. */ .nav-links .button { min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; /* Remove the lift shadow — the nav capsule already supplies elevation. */ box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); /* Transition only what changes inside the nav (color, background). */ transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .nav-links .button:hover, .nav-links .button:active { /* No translateY inside the nav — a nested element bobbing looks wrong. */ transform: none; } .nav-links .button.primary { background: var(--btn-grad); border-color: rgba(255, 255, 255, 0.22); /* Slim down: tighter padding, drop the ambient blue glow halo. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.22); } .nav-links .button.primary:hover { background: var(--btn-grad-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 2px 5px rgba(0, 0, 0, 0.15); } .nav-links .button.primary:active { background: var(--btn-grad-active); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.12); } /* Buttons — liquid glass with tactile press feedback. Hover = the button presses inward halfway (depth cue, not a lift). Active = pressed deeper, lift shadow gone, inner shadow strong. Snappy on press, gentle on release — same easing pattern as iOS. */ .button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--glass-border); border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--text); background: var(--glass-tint); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom), 0 4px 12px rgba(0, 0, 0, 0.15); /* Long-release easing — feels like the button "settles" back. */ transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); cursor: pointer; isolation: isolate; overflow: hidden; will-change: transform; } .button::before { content: ""; position: absolute; inset: 0; background: var(--glass-sheen); border-radius: inherit; pointer-events: none; z-index: 0; transition: opacity 0.18s ease; } .button > * { position: relative; z-index: 1; } /* Hover — half-pressed. The button steps down 1px, shrinks a hair, the lift shadow collapses, an inner shadow appears for depth. */ .button:hover { background: rgba(var(--tint-rgb), 0.08); border-color: rgba(var(--tint-rgb), 0.22); transform: translateY(1px) scale(0.985); box-shadow: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom), inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.1); } .button:hover::before { opacity: 0.7; } /* Active — pressed all the way. Faster transition so it feels immediate. */ .button:active { transform: translateY(2px) scale(0.97); background: rgba(var(--tint-rgb), 0.06); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.16), inset 0 -1px 0 var(--glass-edge-bottom), 0 0 0 rgba(0, 0, 0, 0); transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), background 0.08s ease, box-shadow 0.08s ease; } .button:active::before { opacity: 0.4; } /* Primary — same depress mechanics, plus the blue glow attenuates with depth. */ .button.primary { color: white; background: var(--btn-grad); border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 6px 18px rgba(36, 145, 255, 0.35); } .button.primary::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 45%); } .button.primary:hover { background: var(--btn-grad-hover); border-color: rgba(255, 255, 255, 0.28); transform: translateY(1px) scale(0.985); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 2px 5px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(36, 145, 255, 0.28); } .button.primary:active { background: var(--btn-grad-active); transform: translateY(2px) scale(0.97); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 0 0 rgba(0, 0, 0, 0); } .text-link { color: var(--blue); font-size: 14px; font-weight: 500; } .text-link:hover { color: var(--blue); opacity: 0.85; } /* Hero */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: center; /* Inline padding handled by the top-of-file centering rule (.nav, .hero, .section, .footer) — we only set vertical padding here so it doesn't reset padding-left/right via the `padding` shorthand. */ padding-block: clamp(40px, 5vh, 64px); } .hero-text { max-width: 620px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .hero-copy { margin: 20px 0 0; color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; } .hero-copy code { color: var(--text); } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-meta { margin: 22px 0 0; color: var(--muted); font-size: 13px; } .hero-figure { margin: 0; } .hero-figure img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--line-strong); box-shadow: var(--shadow); } /* ============================================================ Killer-feature demo — terminal + Localhost Explorer answer ============================================================ Timeline (one full loop ≈ 9000ms): 0ms — empty terminal 500ms — line 1 ($ lsof ...) types in 1300ms — line 2 (ControlCenter 645 ... LISTEN) appears 2400ms — line 3 ($ kill -9 645) types in 3300ms — line 4 (# 0.4s later) appears 3900ms — line 5 (ControlCenter 812 ... LISTEN) appears — port came back 5000ms — LE popover slides in from the right with the answer 8200ms — popover fades, terminal lines fade out 9000ms — loop restart ============================================================ */ .hero-demo { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #0a0b0c; border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-family: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } .demo-terminal { position: absolute; inset: 0; display: flex; flex-direction: column; } .demo-terminal-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: rgba(var(--tint-rgb), 0.04); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); } .demo-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .demo-dot-red { background: #ff5f57; } .demo-dot-amber { background: #ffbd2e; } .demo-dot-green { background: #28c840; } .demo-terminal-title { margin-left: 8px; font-family: 'Geist', sans-serif; } .demo-terminal-body { flex: 1; padding: 18px 22px; font-size: 13.5px; line-height: 1.85; color: #d9d6cc; } .demo-line { opacity: 0; transform: translateY(2px); animation: demo-line-in 0.4s ease-out forwards; } .demo-prompt { color: var(--mint); margin-right: 6px; } .demo-dim { color: #8a877f; } .demo-bad { color: var(--danger); } .demo-line-1 { animation-delay: 0.5s; } .demo-line-2 { animation-delay: 1.3s; } .demo-line-3 { animation-delay: 2.4s; } .demo-line-4 { animation-delay: 3.3s; } .demo-line-5 { animation-delay: 3.9s; } .demo-line-6 { animation-delay: 4.6s; } .demo-cursor { display: inline-block; width: 8px; height: 14px; background: #d9d6cc; vertical-align: -2px; animation: demo-cursor 1s steps(2, end) infinite; } /* The LE answer popover slides in from the right at 5s, sits until 8.2s, fades. */ .demo-le { position: absolute; top: 50%; right: 16px; width: 78%; transform: translate(120%, -50%); background: #18191a; border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(238, 40, 115, 0.18); font-family: 'Geist', sans-serif; opacity: 0; animation: demo-le-in 9s ease-in-out infinite; } .demo-le-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .demo-le-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(180deg, #ee2873, #6e0e3c); color: white; font-family: 'Geist Mono', monospace; font-weight: 800; font-size: 10px; letter-spacing: -0.5px; } .demo-le-title { font-size: 13px; font-weight: 700; flex: 1; } .demo-le-pill { font-size: 10px; font-weight: 600; color: var(--amber); background: rgba(255, 176, 32, 0.14); padding: 2px 8px; border-radius: 999px; } .demo-le-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .demo-le-name { font-size: 13px; font-weight: 700; color: var(--text); } .demo-le-pid { font-size: 11px; color: var(--muted); margin-right: 6px; } .demo-le-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; } .demo-badge-open { color: var(--amber); background: rgba(255, 176, 32, 0.14); } .demo-badge-mac { color: var(--muted); background: rgba(var(--tint-rgb), 0.08); } .demo-badge-managed { color: var(--blue); background: rgba(36, 145, 255, 0.14); } .demo-le-insight { font-size: 12.5px; line-height: 1.55; color: #c8c5bd; } .demo-le-insight strong { color: var(--text); } .demo-le-insight code { font-family: 'Geist Mono', monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 4px; background: rgba(238, 40, 115, 0.12); color: #ffb2cf; } @keyframes demo-line-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } @keyframes demo-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes demo-le-in { 0%, 55% { opacity: 0; transform: translate(120%, -50%); } 60% { opacity: 1; transform: translate(0%, -50%); } 91% { opacity: 1; transform: translate(0%, -50%); } 96%, 100% { opacity: 0; transform: translate(120%, -50%); } } /* While the LE popover is centered-front, dim the terminal so the eye lands on the answer. Sync timing with the popover keyframes. */ .demo-terminal { animation: demo-terminal-dim 9s ease-in-out infinite; } @keyframes demo-terminal-dim { 0%, 55% { filter: none; } 60%, 91% { filter: brightness(0.45) blur(0.6px); } 96%, 100% { filter: none; } } /* Respect users who don't want motion — skip the loop, show the punchline state. */ @media (prefers-reduced-motion: reduce) { .demo-line, .demo-le, .demo-cursor, .demo-terminal { animation: none !important; opacity: 1 !important; } .demo-le { transform: translate(0%, -50%) !important; } .demo-terminal { filter: brightness(0.45) blur(0.6px); } } /* Reality-check section: real app screenshot below the killer-feature demo */ .app-tour-section { padding-top: clamp(40px, 6vh, 80px); padding-bottom: clamp(40px, 6vh, 80px); } .section-header.centered { text-align: center; margin-left: auto; margin-right: auto; } /* Frame around the real app screenshot. The screenshot itself is a dark product window; the FRAME should match the surrounding page so the dark block doesn't drop in like a slab on light backgrounds. The 6px padding creates a "matte border" — same trick Apple uses on hardware-shot marketing pages to integrate dark screens with light layouts. */ .app-screenshot { margin: 24px auto 0; max-width: 920px; padding: 6px; border-radius: 18px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); } .app-screenshot img { display: block; width: 100%; height: auto; border-radius: 12px; } /* ─── Interactive "try a port" demo ──────────────────────────────────────── */ .try-section .section-header.centered { margin-bottom: 28px; } .try-panel { max-width: 720px; margin: 0 auto; padding: clamp(20px, 3vw, 28px); border-radius: 18px; background: radial-gradient(circle at 12% 0%, rgba(36, 145, 255, 0.10), transparent 55%), var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); } /* Input — looks like the app's "free a port" field */ .try-input { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 16px; border-radius: 12px; background: rgba(var(--tint-rgb), 0.05); border: 1px solid var(--line-strong); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .try-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 145, 255, 0.18); } .try-input-prefix { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 20px; font-weight: 600; color: var(--muted); } .try-input input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; padding: 8px 0; outline: none; } .try-input input::placeholder { color: var(--muted); opacity: 0.6; } .try-input-hint { flex-shrink: 0; padding-right: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; } /* Quick-pick chips */ .try-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .try-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(var(--tint-rgb), 0.04); color: var(--text); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .try-chip:hover { background: rgba(36, 145, 255, 0.12); border-color: rgba(36, 145, 255, 0.4); } .try-chip:active { transform: translateY(1px); } /* Result */ .try-result { margin-top: 20px; } .try-empty { margin: 0; padding: 18px 4px 4px; color: var(--muted); font-size: 15px; line-height: 1.6; } .try-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-radius: 10px; background: rgba(36, 145, 255, 0.08); border: 1px solid rgba(36, 145, 255, 0.22); } .try-row .popover-row-name { font-size: 15px; } .try-row .popover-row-port { font-size: 13px; margin-left: auto; } .try-risk { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .try-risk-low { color: var(--green); background: rgba(52, 208, 88, 0.16); } .try-risk-med { color: var(--amber); background: rgba(255, 176, 32, 0.16); } .try-verdict { margin-top: 14px; padding: 0 2px; } .try-verdict-line { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.6; } .try-flag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; font-family: 'Geist Mono', ui-monospace, monospace; color: var(--danger); background: rgba(255, 107, 107, 0.14); white-space: nowrap; } .try-flag code { color: inherit; background: rgba(var(--tint-rgb), 0.12); } .try-flag-ok { color: var(--green); background: rgba(52, 208, 88, 0.14); } .try-cmd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #0a0b0c; border: 1px solid var(--line-strong); } .try-cmd-label { flex-shrink: 0; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .try-cmd code { color: #c4e5ff; background: transparent; padding: 0; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13.5px; word-break: break-word; } @media (max-width: 540px) { .try-input-hint { display: none; } .try-row .popover-row-port { margin-left: 0; width: 100%; } } /* Popover mockup — the hero centerpiece */ .popover { position: relative; width: 100%; border-radius: 14px; background: linear-gradient(180deg, #1e2021 0%, #16181a 100%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.04), inset -1px 0 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.4); overflow: hidden; font-size: 12.5px; line-height: 1.4; isolation: isolate; } .popover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; z-index: 2; border-radius: inherit; } .popover-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%), rgba(0, 0, 0, 0.22); border-bottom: 1px solid rgba(var(--tint-rgb), 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .popover-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .popover-dot-red { background: #ff5f57; } .popover-dot-amber { background: #febc2e; } .popover-dot-green { background: #28c840; } .popover-search { flex: 1; display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(var(--tint-rgb), 0.05); border: 1px solid rgba(var(--tint-rgb), 0.08); color: rgba(236, 233, 224, 0.55); font-size: 12px; } .popover-search-icon { color: rgba(236, 233, 224, 0.5); font-size: 13px; } .popover-count { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .popover-group { padding: 8px 0; } .popover-group + .popover-group { border-top: 1px solid rgba(var(--tint-rgb), 0.05); } .popover-group-label { padding: 6px 16px 4px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Geist Mono', ui-monospace, monospace; } /* Locked column grid — every row aligns. PIDs, ports stay in their lanes. */ .popover-row { display: grid; grid-template-columns: [name] 140px [pid] 64px [profile] 92px [port] minmax(0, 1fr) [stop] auto; align-items: center; gap: 12px; padding: 8px 16px; color: var(--text); font-size: 12.5px; border-bottom: 1px solid transparent; transition: background 0.15s ease; } .popover-row:hover { background: rgba(var(--tint-rgb), 0.025); } .popover-row.is-expanded { display: block; background: rgba(36, 145, 255, 0.05); border-top: 1px solid rgba(36, 145, 255, 0.15); border-bottom: 1px solid rgba(36, 145, 255, 0.15); } .popover-row-head { display: grid; grid-template-columns: [name] 140px [pid] 64px [profile] 92px [port] minmax(0, 1fr) [stop] auto; align-items: center; gap: 12px; padding: 0; } .popover-row-name { color: var(--text); font-weight: 600; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; } .popover-row-pid { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; font-family: 'Geist Mono', ui-monospace, monospace; } .popover-row-profile { display: inline-flex; align-items: center; width: max-content; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; } /* Profile pills — text color uses semantic tokens that flip light/dark. */ .popover-profile-blue { color: var(--blue); background: rgba(36, 145, 255, 0.14); } .popover-profile-amber { color: var(--amber); background: rgba(255, 176, 32, 0.14); } .popover-profile-mono { color: var(--text); background: rgba(var(--tint-rgb), 0.07); } .popover-profile-mint { color: var(--mint); background: rgba(32, 200, 184, 0.14); } .popover-profile-purple { color: var(--purple); background: rgba(180, 92, 255, 0.14); } .popover-profile-red { color: var(--danger); background: rgba(255, 107, 107, 0.16); } .popover-row-port { color: var(--muted); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; } .popover-row-stop { padding: 3px 10px; border-radius: 5px; background: rgba(var(--tint-rgb), 0.06); border: 1px solid rgba(var(--tint-rgb), 0.08); color: var(--muted); font-size: 11px; font-weight: 600; } .popover-row-detail { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: rgba(var(--tint-rgb), 0.08); border: 1px solid rgba(var(--tint-rgb), 0.05); display: grid; gap: 6px; } .popover-detail-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; font-size: 11.5px; } .popover-detail-row > span:first-child { color: var(--muted); } .popover-detail-row > span:last-child { color: #f0ede4; } .popover-detail-row code { font-size: inherit; color: #c4e5ff; background: rgba(36, 145, 255, 0.12); padding: 1px 6px; border-radius: 4px; } .popover-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(0, 0, 0, 0.22); border-top: 1px solid rgba(var(--tint-rgb), 0.06); color: var(--muted); font-size: 11.5px; } .popover-foot-link { color: var(--blue); font-weight: 600; } @media (max-width: 720px) { .popover-row, .popover-row-head { grid-template-columns: [name] minmax(0, 1.1fr) [pid] 48px [profile] auto [port] minmax(0, 1.4fr) [stop] auto; gap: 8px; font-size: 11.5px; } } /* Sections */ main { border-top: 1px solid var(--line); } .section { /* Inline padding handled by the top-of-file centering rule — vertical only here. */ padding-block: clamp(48px, 6vh, 80px); border-bottom: 1px solid var(--line); /* Anchor jumps (#try, #stop, …) must clear the floating nav capsule. */ scroll-margin-top: 96px; } .section:last-of-type { border-bottom: none; } .section-header { max-width: 760px; margin-bottom: 28px; } .section-lede, .lede { margin: 14px 0 0; max-width: 660px; color: var(--muted); font-size: 17px; } .kicker { margin: 0 0 14px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* Failure strip — "you've probably seen this" */ .failure-strip-section { padding-top: clamp(32px, 4vh, 56px); padding-bottom: clamp(40px, 5vh, 64px); } .kicker.centered { text-align: center; margin-bottom: 24px; } .failure-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1200px; margin-inline: auto; } .failure-card { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 0; background: transparent; border: none; } .failure-quote { display: block; padding: 12px 14px; border-radius: 8px; background: #0a0b0c; border: 1px solid rgba(var(--tint-rgb), 0.08); color: #f0ede4; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13.5px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .failure-card p { margin: 0; padding: 0 6px; color: var(--muted); font-size: 14.5px; line-height: 1.55; } @media (max-width: 900px) { .failure-strip { grid-template-columns: 1fr; } } /* Strategy tags — escalate with the step */ .strategy-tag { display: inline-block; margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .strategy[data-step="2"] .strategy-tag { color: var(--blue); } .strategy[data-step="3"] .strategy-tag { color: var(--amber); } .strategy[data-step="4"] .strategy-tag { color: var(--danger); } /* Tools section — sidebar screenshot + grid of six unforgeable tools */ .tools-section { padding-top: clamp(48px, 8vh, 96px); } .tools-layout { display: grid; grid-template-columns: minmax(300px, 1fr) 1.4fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(28px, 4vh, 48px); align-items: start; } @media (max-width: 900px) { .tools-layout { grid-template-columns: 1fr; } } .tools-screenshot { margin: 0; position: sticky; top: 24px; } .tools-screenshot img { width: 100%; height: auto; display: block; border: 1px solid rgba(var(--tint-rgb), 0.08); border-radius: 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); } .tools-screenshot figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; } /* Tools panel mockup — liquid-glass macOS window */ .tools-panel { position: relative; width: 100%; border-radius: 12px; background: linear-gradient(180deg, #1e2021 0%, #16181a 100%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.04), inset -1px 0 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.4); overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--text); isolation: isolate; } .tools-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; z-index: 2; border-radius: inherit; } .tools-panel-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%), rgba(0, 0, 0, 0.22); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .tools-panel-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .tools-panel-dot-red { background: #ff5f57; } .tools-panel-dot-amber { background: #febc2e; } .tools-panel-dot-green { background: #28c840; } .tools-panel-title { margin-left: 6px; color: rgba(236, 233, 224, 0.55); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; } .tools-panel-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 360px; } .tools-panel-list { list-style: none; margin: 0; padding: 8px; border-right: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.18); display: grid; gap: 1px; align-content: start; } .tools-panel-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: rgba(236, 233, 224, 0.62); font-size: 12.5px; font-weight: 500; } .tools-panel-item.is-active { background: var(--blue-strong); color: white; } .tools-panel-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; color: inherit; } .tools-panel-icon svg { width: 14px; height: 14px; } .tools-panel-detail { padding: 18px 20px; display: grid; align-content: start; gap: 12px; } .tools-panel-detail-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; } .tools-panel-detail-head h3 { margin: 0; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 700; color: #f0ede4; letter-spacing: -0.01em; white-space: nowrap; } .tools-panel-detail-head code { color: #c4e5ff; background: rgba(36, 145, 255, 0.14); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; } .tools-panel-detail-sub { margin: 0; color: var(--muted); font-size: 12.5px; } .tools-panel-card { margin-top: 4px; padding: 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); } .tools-panel-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); margin-bottom: 12px; } .tools-panel-tab { text-align: center; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tools-panel-tab.is-active { background: rgba(255, 255, 255, 0.07); color: #f0ede4; } /* Form row — info on top, controls below, always. The original 4-column inline grid squeezed the text into stacks at constrained widths. Splitting into two stacked sub-rows keeps both legible at every breakpoint. */ .tools-panel-row { display: flex; flex-direction: column; gap: 12px; } .tools-panel-row-info { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; } .tools-panel-row-controls { display: flex; align-items: center; gap: 8px; } .tools-panel-row-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: rgba(236, 233, 224, 0.7); } .tools-panel-row-icon svg { width: 14px; height: 14px; } .tools-panel-row-text { display: grid; gap: 2px; min-width: 0; } .tools-panel-row-text strong { color: #f0ede4; font-size: 13px; font-weight: 600; line-height: 1.25; } .tools-panel-row-text span { color: var(--muted); font-size: 11.5px; line-height: 1.35; } .tools-panel-stepper { flex: 1; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .tools-panel-stepper-icon { color: var(--muted); font-size: 9px; } .tools-panel-cta { flex-shrink: 0; padding: 6px 14px; border-radius: 6px; background: var(--blue-strong); color: white; font-size: 12px; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; font-family: inherit; } @media (max-width: 900px) { .tools-panel-body { grid-template-columns: 1fr; } .tools-panel-list { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } } /* No row-specific mobile override needed — the flex column structure already reflows cleanly at every width because info and controls are separate rows. */ .tools-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .tool-card { padding: 18px 20px; background: var(--panel); border: 1px solid rgba(var(--tint-rgb), 0.08); border-radius: 10px; } .tool-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text); } .tool-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); } .tool-card code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; background: rgba(var(--tint-rgb), 0.08); padding: 1px 5px; border-radius: 4px; } .tools-footer { margin-top: clamp(24px, 4vh, 40px); font-size: 14px; color: var(--muted); font-style: italic; max-width: 720px; } /* Academy callout on index */ .academy-callout-section { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px); } .academy-callout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; padding: clamp(28px, 4vw, 40px); border-radius: 22px; background: radial-gradient(circle at 8% 0%, rgba(36, 145, 255, 0.14), transparent 55%), radial-gradient(circle at 95% 100%, rgba(36, 145, 255, 0.10), transparent 50%), var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); position: relative; isolation: isolate; overflow: hidden; } .academy-callout::before { content: ""; position: absolute; inset: 0; background: var(--glass-sheen); pointer-events: none; z-index: 0; border-radius: inherit; } .academy-callout > * { position: relative; z-index: 1; } .academy-callout-body { display: flex; flex-direction: column; gap: 16px; } .academy-callout h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.025em; } .academy-callout .kicker { margin: 0; color: var(--blue); } .academy-callout .lede { margin: 0; max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.55; } /* 7-lesson progress strip — numbered chips that telegraph the course shape. */ .course-strip { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .course-strip li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 12px; border-radius: 10px; background: rgba(var(--tint-rgb), 0.04); border: 1px solid rgba(var(--tint-rgb), 0.06); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; min-width: 0; } .course-strip li::before { content: ""; position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--blue); background: transparent; } .course-strip-num { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 13px; color: var(--blue); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .course-strip-title { font-size: 12.5px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Right column — stats + outcomes + CTA + meta in a content-sized stack. align-self: center stops the panel from stretching to match the tall left column (which would create huge gaps with space-between). */ .academy-callout-action { align-self: center; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 16px; background: rgba(var(--tint-rgb), 0.04); border: 1px solid rgba(var(--tint-rgb), 0.08); box-shadow: inset 0 1px 0 var(--glass-edge-top); } /* "What you'll know after" — 3 concrete outcomes filling the middle. */ .academy-outcomes { list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid rgba(var(--tint-rgb), 0.06); border-bottom: 1px solid rgba(var(--tint-rgb), 0.06); display: grid; gap: 10px; } .academy-outcomes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.4; } .academy-outcomes code { font-size: 0.88em; padding: 1px 5px; } .outcome-tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(36, 145, 255, 0.16); position: relative; flex-shrink: 0; } .outcome-tick::after { content: ""; width: 4px; height: 8px; border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: translateY(-1px) rotate(45deg); } .academy-callout-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .academy-callout-stats > div { display: flex; flex-direction: column; gap: 2px; } .academy-callout-stats strong { font-family: 'Geist', sans-serif; font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; } .academy-callout-stats span { font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600; } .academy-callout-cta { width: 100%; min-height: 48px; font-size: 15px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .academy-callout-cta span { display: inline-block; transition: transform 0.2s ease; } .academy-callout-cta:hover span { transform: translateX(3px); } .academy-callout-meta { margin: 0; color: var(--muted); font-size: 12.5px; letter-spacing: 0.01em; text-align: center; } @media (max-width: 900px) { .academy-callout { grid-template-columns: 1fr; gap: 24px; } .course-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .course-strip li:nth-child(n+8) { display: none; } .academy-callout-action { align-items: stretch; } } @media (max-width: 520px) { .course-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .academy-callout-stats { grid-template-columns: repeat(3, 1fr); } } /* Problem section */ .problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .terminal-stack { list-style: none; margin: 0; padding: 18px; display: grid; gap: 12px; border-radius: 10px; background: #0a0b0c; border: 1px solid var(--line-strong); font-family: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; } .terminal-stack li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid rgba(var(--tint-rgb), 0.05); } .terminal-stack li:last-child { padding-bottom: 0; border-bottom: none; } .terminal-stack code { background: transparent; padding: 0; color: #d9d6cc; font-size: 13px; white-space: pre-wrap; word-break: break-word; } .term-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .term-good .term-label { color: var(--blue); } .term-good code { color: #f0ede4; } .terminal-stack .muted { color: #6f6c64; } .terminal-stack .hl { color: var(--blue); } /* Strategy grid — 4-step difficulty escalator */ .strategy-grid { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .strategy-grid::before { content: ""; position: absolute; top: 38px; left: 38px; right: 38px; height: 1px; background: linear-gradient( 90deg, rgba(var(--tint-rgb), 0.12) 0%, rgba(36, 145, 255, 0.4) 33%, rgba(255, 176, 32, 0.4) 66%, rgba(255, 107, 107, 0.4) 100% ); z-index: 0; pointer-events: none; } .strategy { position: relative; padding: 22px; padding-top: 60px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); z-index: 1; } .strategy-step { position: absolute; top: 22px; left: 22px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--bg); border: 1.5px solid rgba(var(--tint-rgb), 0.18); color: var(--muted); font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .strategy[data-step="1"] .strategy-step { border-color: rgba(var(--tint-rgb), 0.24); color: rgba(var(--tint-rgb), 0.7); } .strategy[data-step="2"] .strategy-step { border-color: rgba(36, 145, 255, 0.6); color: var(--blue); } .strategy[data-step="3"] .strategy-step { border-color: rgba(255, 176, 32, 0.55); color: var(--amber); } .strategy[data-step="4"] .strategy-step { border-color: rgba(255, 107, 107, 0.55); color: var(--danger); background: rgba(255, 107, 107, 0.06); } .strategy h3 { margin: 0 0 10px; font-size: 18px; } .strategy p { margin: 0; color: var(--muted); font-size: 15px; } .strategy code { font-size: 0.85em; } /* Anatomy section — annotated row with numbered callouts and 4-question payoff. All three rows (callouts / row / payoff) use the SAME 5-column fractional grid so cells line up exactly. Vertical dashed lines are pseudo-elements on the callouts and payoffs — they always sit directly above/below the row cell they describe, no matter how wide the container becomes. */ .anatomy-stage { position: relative; display: flex; flex-direction: column; gap: 36px; margin-top: 24px; padding: 36px clamp(20px, 3vw, 40px); border-radius: 14px; background: radial-gradient(circle at 50% 35%, rgba(36, 145, 255, 0.06), transparent 60%), var(--panel); border: 1px solid var(--line); } /* Callouts strip — 5 numbered descriptors in 5 evenly-distributed columns. */ .anatomy-callouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .anatomy-callout { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; } /* Dashed connector going down from the bottom of each callout to the row. */ .anatomy-callout::after { content: ""; position: absolute; left: 13px; /* center under the 28px num circle */ top: calc(100% + 4px); height: 32px; border-left: 1.5px dashed rgba(36, 145, 255, 0.35); } .callout-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--blue); color: var(--blue); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; } .callout-body { color: var(--muted); font-size: 13px; line-height: 1.45; padding-top: 2px; min-width: 0; } .callout-body strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; font-size: 13.5px; } /* The row — same 5-column fractional grid as the callouts above. Each cell sits directly under its callout. Stop button is dropped from this view — it would need its own column and only 5 columns are being annotated. */ .anatomy-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: center; padding: 16px 20px; border-radius: 10px; background: rgba(36, 145, 255, 0.08); border: 1px solid rgba(36, 145, 255, 0.22); } .anatomy-row > * { justify-self: start; } .anatomy-row .popover-row-name { font-size: 15px; } .anatomy-row .popover-row-pid { font-size: 13px; } .anatomy-row .popover-row-port { font-size: 13px; } .popover-profile-managed { color: var(--amber); background: rgba(255, 176, 32, 0.08); border: 1px dashed rgba(255, 176, 32, 0.35); padding: 0 7px; } /* Payoff — 4 questions answering the row. Spaced below with breathing room so it reads as the "so what" payoff, not a continuation of the row. */ .anatomy-payoff { margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .anatomy-payoff > div { position: relative; display: contents; } .anatomy-payoff dt { margin: 0 0 8px; color: var(--blue); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .anatomy-payoff dt.warn { color: var(--amber); } .anatomy-payoff dd { margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; } .anatomy-payoff dd code { font-size: 0.86em; } /* Tablet — drop to 3 callouts, hide the connector lines (they'd be too close together at this width to read cleanly). */ @media (max-width: 1100px) { .anatomy-callouts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; } .anatomy-callout::after { display: none; } .anatomy-row { grid-template-columns: [name] minmax(0, 1.4fr) [pid] auto [profile] auto [managed] auto [port] minmax(0, 1.5fr); gap: 12px; } .anatomy-payoff { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } /* Mobile — callouts stack 2-up, row stacks vertically. */ @media (max-width: 620px) { .anatomy-stage { padding: 24px 20px; gap: 24px; } .anatomy-callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .anatomy-row { grid-template-columns: 1fr; gap: 8px; } .anatomy-payoff { grid-template-columns: 1fr; } } /* Features list */ .features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 56px; } .features li { color: var(--muted); font-size: 16px; line-height: 1.55; } .features strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; } /* Pricing */ .pricing-section { background: linear-gradient(180deg, rgba(36, 145, 255, 0.05), transparent 60%); } .pricing-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(32px, 4vw, 48px); border-radius: 18px; background: radial-gradient(circle at 85% 20%, rgba(36, 145, 255, 0.10), transparent 55%), var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); isolation: isolate; overflow: hidden; } .pricing-card::before { content: ""; position: absolute; inset: 0; background: var(--glass-sheen); pointer-events: none; z-index: 0; border-radius: inherit; } .pricing-card > * { position: relative; z-index: 1; } /* Install flow — DMG mockup + numbered steps stacked. */ .install-flow { display: flex; flex-direction: column; gap: 22px; } /* DMG window mockup — recreates the classic "drag to Applications" view in HTML/CSS so the visual matches the dark theme and stays crisp on retina. */ .dmg-mockup { margin: 0; display: flex; flex-direction: column; gap: 10px; } .dmg-window { border-radius: 12px; background: linear-gradient(180deg, #2a2c2f 0%, #1e2022 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.35); overflow: hidden; isolation: isolate; } .dmg-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%), rgba(0, 0, 0, 0.22); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dmg-dot { width: 9px; height: 9px; border-radius: 50%; } .dmg-dot-red { background: #ff5f57; } .dmg-dot-amber { background: #febc2e; } .dmg-dot-green { background: #28c840; } .dmg-title { margin-left: 8px; color: rgba(236, 233, 224, 0.55); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.02em; } .dmg-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 28px 24px; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04), transparent 70%), linear-gradient(180deg, #1c1e20 0%, #161719 100%); } .dmg-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: 'Geist', sans-serif; font-size: 11.5px; font-weight: 500; color: rgba(236, 233, 224, 0.85); letter-spacing: -0.01em; text-align: center; line-height: 1.25; } .dmg-tile img, .dmg-tile svg { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)); } .dmg-tile-folder svg { width: 56px; height: 48px; } .dmg-arrow { color: rgba(255, 255, 255, 0.35); animation: dmg-arrow-pulse 2.4s ease-in-out infinite; } .dmg-arrow svg { width: 64px; height: 18px; display: block; } @keyframes dmg-arrow-pulse { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dmg-arrow { animation: none; } } .dmg-mockup figcaption { color: var(--muted); font-size: 12.5px; text-align: center; line-height: 1.5; } .install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: var(--muted); } .install-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; } .install-steps strong { color: var(--blue); font-family: 'Geist', sans-serif; font-weight: 700; font-size: 18px; } /* FAQ — definition list, magazine-style */ .faq-list { margin: 0; padding: 0; display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.4fr); gap: 0; border-top: 1px solid var(--line); } .faq-list dt, .faq-list dd { margin: 0; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); } .faq-list dt { color: var(--text); font-family: 'Geist', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.35; } .faq-list dd { color: var(--muted); font-size: 16px; line-height: 1.6; } @media (max-width: 720px) { .faq-list { grid-template-columns: 1fr; } .faq-list dt { padding-bottom: 8px; border-bottom: none; } .faq-list dd { padding-top: 0; } } /* Legacy footer (still used by lesson pages until they migrate). */ .footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; /* Inline padding handled by the top-of-file centering rule. */ padding-block: 28px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); } .footer-links { display: flex; gap: 18px; } .footer-links a:hover { color: var(--text); } /* Current page in the legacy footer — brand color, matches the columned one. */ .footer-links a.is-current-page { color: var(--blue); } /* New site footer — distinct "deck" surface separate from page content. The --footer-bg token is cool-tinted in both themes so the footer reads as a foundation the rest of the page rests on. The existing centering rule (top of file) handles inline padding edge-to-edge. */ .site-footer { display: block; align-items: initial; justify-content: initial; padding-block: 56px 36px; border-top: 1px solid var(--footer-divider); background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(36, 145, 255, 0.08), transparent 55%), var(--footer-bg); } /* Lead-in CTA — one more chance to convert before they leave. */ .footer-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px clamp(20px, 3vw, 32px); margin-bottom: 48px; border-radius: 18px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); } .footer-cta-kicker { margin: 0 0 4px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .footer-cta-line { margin: 0; color: var(--text); font-family: 'Geist', sans-serif; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } .footer-cta-button { min-height: 44px; white-space: nowrap; } /* Sitemap grid — brand block + 3 navigation columns. */ .footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); padding-bottom: 36px; border-bottom: 1px solid var(--line); } .footer-brand { display: flex; flex-direction: column; gap: 14px; } .site-footer .brand { font-size: 16px; color: var(--text); } .footer-brand-tagline { margin: 0; max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.55; } .footer-brand-tagline code { font-size: 0.88em; } .footer-system { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .footer-system li { padding: 4px 10px; border-radius: 999px; background: rgba(var(--tint-rgb), 0.05); border: 1px solid rgba(var(--tint-rgb), 0.08); color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; font-family: 'Geist Mono', ui-monospace, monospace; } .footer-col h3 { margin: 0 0 14px; color: var(--text); font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer-col a { color: var(--muted); font-size: 14px; transition: color 0.15s ease; } .footer-col a:hover { color: var(--text); } /* Current page in the footer sitemap — brand color, no geometry change. */ .footer-col a.is-current-page { color: var(--blue); } /* Bottom row — copyright + privacy promise. */ .footer-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--muted); font-size: 13px; } .footer-promise { color: var(--muted); letter-spacing: 0.01em; } @media (max-width: 900px) { .footer-cta { grid-template-columns: 1fr; gap: 16px; } .footer-cta-button { justify-self: start; } .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* Academy page */ .academy-page { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) 76px; } /* Academy course index */ .course-hero { max-width: 760px; margin: 0 auto; padding: 64px 0 32px; } .course-hero .eyebrow { margin: 0 0 14px; } .course-hero h1 { margin: 0 0 20px; font-size: clamp(36px, 4.6vw, 52px); line-height: 1.05; } .course-hero .hero-copy { margin: 0 0 36px; color: var(--muted); font-size: 18px; line-height: 1.55; } .course-progress { margin: 0; } .course-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--muted); font-size: 14px; } .course-progress-meta strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .course-progress-meta button { background: none; border: none; cursor: pointer; padding: 0; font: inherit; } .course-progress-bar { position: relative; height: 4px; border-radius: 999px; background: rgba(var(--tint-rgb), 0.06); overflow: hidden; } .course-progress-bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--blue), #79b7ff); transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); } .lesson-list { list-style: none; margin: 32px auto 0; padding: 0; max-width: 820px; display: grid; gap: 12px; } .lesson-card { margin: 0; } .lesson-card-link { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 24px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .lesson-card-link:hover { background: var(--panel-2); border-color: var(--line-strong); transform: translateY(-1px); } .lesson-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .lesson-num { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 28px; color: var(--muted); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .lesson-status { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; transition: background 0.2s ease, border-color 0.2s ease; position: relative; } .lesson-card.is-complete .lesson-status { background: var(--blue); border-color: var(--blue); } .lesson-card.is-complete .lesson-status::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border-right: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(45deg); } .lesson-card.is-complete .lesson-num { color: var(--blue); } .lesson-card-body h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; font-weight: 700; } .lesson-card-body p { margin: 0 0 12px; color: var(--muted); font-size: 15.5px; line-height: 1.55; } .lesson-card-body code { font-size: 0.88em; } .lesson-meta { display: inline-block; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } .course-cta { position: relative; margin: 56px auto 0; max-width: 820px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 16px; background: radial-gradient(circle at 88% 20%, rgba(36, 145, 255, 0.10), transparent 55%), var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); isolation: isolate; overflow: hidden; } .course-cta::before { content: ""; position: absolute; inset: 0; background: var(--glass-sheen); pointer-events: none; z-index: 0; border-radius: inherit; } .course-cta > * { position: relative; z-index: 1; } .course-cta h3 { margin: 0 0 6px; font-size: 22px; } .course-cta p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; } @media (max-width: 720px) { .lesson-card-link { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 18px; } .lesson-num { font-size: 22px; } .lesson-status { width: 18px; height: 18px; } .lesson-card.is-complete .lesson-status::after { left: 4px; top: 2px; width: 5px; height: 9px; } .course-cta { flex-direction: column; align-items: stretch; } } /* Lesson page (per-lesson layout with sidebar) */ .lesson-shell { max-width: 1280px; margin: 0 auto; padding: 32px clamp(20px, 4vw, 56px) 80px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .lesson-sidebar { position: sticky; top: 80px; padding: 20px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); } .sidebar-eyebrow { margin: 0 0 14px; font-size: 13px; } .sidebar-eyebrow a { color: var(--muted); font-weight: 500; } .sidebar-eyebrow a:hover { color: var(--text); } .sidebar-progress { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .sidebar-progress strong { color: var(--text); font-weight: 600; } .sidebar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sidebar-lesson { display: grid; grid-template-columns: 26px 16px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.4; transition: background 0.15s ease, color 0.15s ease; } .sidebar-lesson:hover { background: rgba(var(--tint-rgb), 0.04); color: var(--text); } .sidebar-lesson.is-current { background: rgba(36, 145, 255, 0.12); color: var(--text); } .sidebar-lesson.is-current .sidebar-num { color: var(--blue); } .sidebar-num { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; padding-top: 2px; } .sidebar-status { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); margin-top: 3px; position: relative; flex-shrink: 0; } .sidebar-lesson.is-complete .sidebar-status { background: var(--blue); border-color: var(--blue); } .sidebar-lesson.is-complete .sidebar-status::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3.5px; height: 7px; border-right: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg); transform: rotate(45deg); } .sidebar-lesson.is-complete .sidebar-num { color: var(--blue); } .sidebar-title { font-weight: 500; } .lesson-main { max-width: 760px; } .lesson-header { padding: 0 0 28px; margin-bottom: 36px; border-bottom: 1px solid var(--line); } .lesson-header .eyebrow { margin: 0 0 14px; } .lesson-header h1 { margin: 0 0 18px; font-size: clamp(34px, 4vw, 46px); line-height: 1.08; } .lesson-summary { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; } .lesson-summary code { font-size: 0.9em; } .lesson-body { font-size: 17px; line-height: 1.7; } .lesson-body h2 { margin: 44px 0 16px; font-size: 26px; line-height: 1.2; } .lesson-body h3 { margin: 32px 0 12px; font-size: 19px; line-height: 1.3; } .lesson-body p { margin: 16px 0; color: var(--text); } .lesson-body code { font-size: 0.9em; background: rgba(var(--tint-rgb), 0.08); color: #f0ede4; } .lesson-body pre { margin: 20px 0; padding: 18px 20px; border-radius: 10px; background: #0a0b0c; border: 1px solid var(--line-strong); overflow-x: auto; font-size: 14px; line-height: 1.6; } .lesson-body pre code { display: block; background: transparent; padding: 0; color: #d9d6cc; font-size: inherit; } .lesson-body ul, .lesson-body ol { margin: 16px 0; padding-left: 24px; } .lesson-body li { margin: 8px 0; color: var(--text); } .lesson-body blockquote { margin: 24px 0; padding: 16px 22px; border: 1px solid rgba(var(--tint-rgb), 0.1); border-radius: 8px; background: rgba(var(--tint-rgb), 0.03); font-size: 18px; font-style: italic; color: var(--text); } .lesson-body table { width: 100%; margin: 24px 0; border-collapse: collapse; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); font-size: 15px; } .lesson-body thead { background: rgba(var(--tint-rgb), 0.04); } .lesson-body th, .lesson-body td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); } .lesson-body th { color: var(--text); font-weight: 600; font-family: 'Geist', sans-serif; } .lesson-body td { color: var(--muted); } .lesson-body tbody tr:last-child th, .lesson-body tbody tr:last-child td { border-bottom: none; } /* Lesson "position" chip in the eyebrow */ .lesson-position { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; } /* "What you'll learn" card under the summary */ .learn-card { margin: 28px 0 0; padding: 18px 22px; border-radius: 10px; background: rgba(36, 145, 255, 0.06); border: 1px solid rgba(36, 145, 255, 0.18); } .learn-card-label { margin: 0 0 10px; color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .learn-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .learn-card li { position: relative; padding-left: 22px; color: var(--text); font-size: 15.5px; line-height: 1.5; } .learn-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } /* "Try it on your machine" — Practice block, restyled */ .try-it { margin: 44px 0 0; padding: 22px 24px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 176, 32, 0.05), rgba(255, 176, 32, 0.01)), var(--panel); border: 1px solid rgba(255, 176, 32, 0.25); } .try-it-label { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--amber); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .try-it-icon { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 176, 32, 0.18); color: var(--amber); text-align: center; font-size: 8px; line-height: 19px; padding-left: 1px; } .try-it > *:not(.try-it-label):first-of-type { margin-top: 0; } .try-it > *:last-child { margin-bottom: 0; } .try-it pre { background: #0a0b0c; border: 1px solid rgba(255, 176, 32, 0.18); } .try-it ol, .try-it ul { color: var(--text); } /* "Remember" — recap callout */ .recap { margin: 32px 0 0; padding: 20px 24px; border-radius: 10px; background: rgba(36, 145, 255, 0.05); border: 1px solid rgba(36, 145, 255, 0.18); } .recap-label { margin: 0 0 6px; color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .recap > *:not(.recap-label):first-of-type { margin-top: 0; } .recap > *:last-child { margin-bottom: 0; } .recap p { margin: 6px 0 0; color: var(--text); font-size: 17px; line-height: 1.55; } /* "Up next" preview card */ .next-preview { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label arrow" "title arrow" "summary arrow"; gap: 6px 20px; align-items: center; margin-bottom: 28px; padding: 22px 24px; border-radius: 14px; background: radial-gradient(circle at 92% 30%, rgba(36, 145, 255, 0.08), transparent 55%), var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); color: var(--text); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; isolation: isolate; overflow: hidden; } .next-preview::after { content: ""; position: absolute; inset: 0; background: var(--glass-sheen); pointer-events: none; z-index: 0; border-radius: inherit; } .next-preview > * { position: relative; z-index: 1; } a.next-preview:hover { border-color: rgba(36, 145, 255, 0.55); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); } .next-preview-label { grid-area: label; color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .next-preview-title { grid-area: title; font-family: 'Geist', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .next-preview-summary { grid-area: summary; color: var(--muted); font-size: 14.5px; line-height: 1.5; } .next-preview-arrow { grid-area: arrow; color: var(--blue); font-size: 26px; font-weight: 600; transition: transform 0.15s ease; } a.next-preview:hover .next-preview-arrow { transform: translateX(4px); } .next-preview.is-finale .next-preview-label { color: var(--blue); } .lesson-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); } .lesson-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .lesson-mark { display: inline-flex; align-items: center; gap: 10px; } .lesson-mark-icon { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; transition: background 0.15s ease, border-color 0.15s ease; } .lesson-mark.is-done { background: var(--blue); color: white; } .lesson-mark.is-done:hover { background: #1a82f0; } .lesson-mark.is-done .lesson-mark-icon { background: white; border-color: white; } .lesson-mark.is-done .lesson-mark-icon::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: rotate(45deg); } .lesson-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; } /* Footer prev/next: keep Next anchored right even when Previous is absent (lesson 1) */ .lesson-footer-actions .lesson-nav > .button:only-child { margin-left: auto; } @media (max-width: 960px) { .lesson-shell { grid-template-columns: 1fr; } .lesson-sidebar { position: static; max-height: none; } .sidebar-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } } @media (max-width: 620px) { .sidebar-list { grid-template-columns: 1fr; } .lesson-footer { flex-direction: column; align-items: stretch; } .lesson-nav { width: 100%; } .lesson-nav .button { flex: 1; } } /* Scroll-reveal — landing page (index) */ @media (prefers-reduced-motion: no-preference) { /* Hero — three beats only: headline, body, product */ .hero-text, .hero-figure { opacity: 0; transform: translateY(14px); animation: hero-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-text { animation-delay: 60ms; } .hero-figure { animation-delay: 180ms; transform: translateY(18px); } @keyframes hero-rise { to { opacity: 1; transform: translateY(0); } } /* Sections fade-rise as they enter view */ main > .section { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } main > .section.is-visible { opacity: 1; transform: translateY(0); } /* Terminal stack: three rows appear in order — the story arc */ .terminal-stack li { opacity: 0; transform: translateY(8px); transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .section.is-visible .terminal-stack li:nth-child(1) { transition-delay: 200ms; opacity: 1; transform: translateY(0); } .section.is-visible .terminal-stack li:nth-child(2) { transition-delay: 480ms; opacity: 1; transform: translateY(0); } .section.is-visible .terminal-stack li:nth-child(3) { transition-delay: 800ms; opacity: 1; transform: translateY(0); } /* Strategy cards stagger in */ .strategy { opacity: 0; transform: translateY(12px); transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .section.is-visible .strategy:nth-child(1) { transition-delay: 100ms; opacity: 1; transform: translateY(0); } .section.is-visible .strategy:nth-child(2) { transition-delay: 180ms; opacity: 1; transform: translateY(0); } .section.is-visible .strategy:nth-child(3) { transition-delay: 260ms; opacity: 1; transform: translateY(0); } .section.is-visible .strategy:nth-child(4) { transition-delay: 340ms; opacity: 1; transform: translateY(0); } /* Feature bullets stagger */ .features li { opacity: 0; transform: translateY(8px); transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1); } .section.is-visible .features li:nth-child(1) { transition-delay: 80ms; opacity: 1; transform: translateY(0); } .section.is-visible .features li:nth-child(2) { transition-delay: 140ms; opacity: 1; transform: translateY(0); } .section.is-visible .features li:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); } .section.is-visible .features li:nth-child(4) { transition-delay: 260ms; opacity: 1; transform: translateY(0); } .section.is-visible .features li:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); } .section.is-visible .features li:nth-child(6) { transition-delay: 380ms; opacity: 1; transform: translateY(0); } /* FAQ cards stagger */ .faq { opacity: 0; transform: translateY(10px); transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .section.is-visible .faq:nth-child(1) { transition-delay: 80ms; opacity: 1; transform: translateY(0); } .section.is-visible .faq:nth-child(2) { transition-delay: 160ms; opacity: 1; transform: translateY(0); } .section.is-visible .faq:nth-child(3) { transition-delay: 240ms; opacity: 1; transform: translateY(0); } .section.is-visible .faq:nth-child(4) { transition-delay: 320ms; opacity: 1; transform: translateY(0); } /* Failure strip cards stagger */ .failure-card { opacity: 0; transform: translateY(10px); transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .section.is-visible .failure-card:nth-child(1) { transition-delay: 120ms; opacity: 1; transform: translateY(0); } .section.is-visible .failure-card:nth-child(2) { transition-delay: 240ms; opacity: 1; transform: translateY(0); } .section.is-visible .failure-card:nth-child(3) { transition-delay: 360ms; opacity: 1; transform: translateY(0); } /* Anatomy: row + callouts + payoff */ .anatomy-row, .anatomy-callout, .anatomy-payoff > div { opacity: 0; transform: translateY(10px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .section.is-visible .anatomy-row { transition-delay: 100ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-callout:nth-child(1) { transition-delay: 200ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-callout:nth-child(2) { transition-delay: 260ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-callout:nth-child(3) { transition-delay: 320ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-callout:nth-child(4) { transition-delay: 380ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-callout:nth-child(5) { transition-delay: 440ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-payoff > div:nth-child(1) { transition-delay: 500ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-payoff > div:nth-child(2) { transition-delay: 560ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-payoff > div:nth-child(3) { transition-delay: 620ms; opacity: 1; transform: translateY(0); } .section.is-visible .anatomy-payoff > div:nth-child(4) { transition-delay: 680ms; opacity: 1; transform: translateY(0); } } /* Blog post — narrow reading column, generous typography */ .blog-post { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; } .blog-post-head { margin-bottom: 40px; } .blog-post-head h1 { margin: 14px 0 16px; font-size: clamp(36px, 5vw, 52px); line-height: 1.1; } .blog-meta { margin: 0; color: var(--muted); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; } .blog-body { font-size: 17px; line-height: 1.65; color: var(--text); } .blog-body p { margin: 0 0 22px; } .blog-body .lead { font-size: 21px; font-weight: 600; line-height: 1.4; margin-bottom: 28px; } .blog-body h2 { margin: 48px 0 16px; font-size: 24px; } .blog-body blockquote { margin: 28px 0; padding: 16px 22px; border: 1px solid rgba(var(--tint-rgb), 0.1); background: rgba(var(--tint-rgb), 0.04); border-radius: 8px; } .blog-body blockquote p { margin: 0; font-size: 17px; } .blog-body code { font-size: 0.92em; } .blog-body pre { margin: 22px 0 28px; padding: 16px 20px; border-radius: 10px; background: rgba(var(--tint-rgb), 0.05); border: 1px solid var(--line); overflow-x: auto; font-size: 14px; line-height: 1.5; } .blog-body pre code { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 14px; padding: 0; background: transparent; border-radius: 0; color: var(--text); /* Reset inline-code padding/bg when the code lives inside a 
 block. */
}

.blog-cta {
  margin: 48px 0 0;
  padding: 28px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
}

.blog-cta h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.blog-cta p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
}

/* Centered hero icon used at the top + bottom of the icon-design blog post.
   Replaces the inline `style="margin: 32px 0; text-align: center;"` patches. */
.icon-hero {
  margin: 32px 0;
  text-align: center;
}
.icon-hero-img {
  border-radius: 56px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.icon-hero-sm .icon-hero-img {
  border-radius: 36px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Icon evolution gallery — receipts in the icon blog post */
.icon-evolution {
  margin: 28px 0 40px;
}

.icon-evolution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

.icon-evolution-grid img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 12px;
  border-radius: 40px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.icon-evolution-grid figcaption {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
}

.icon-evolution-grid figcaption strong {
  color: var(--text);
}

/* Tablet & down: 2×2 grid — tiles stay roomy and the 4th never orphans. */
@media (max-width: 880px) {
  .icon-evolution-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Phones: keep the 2×2, just tighten so both tiles fit a narrow screen. */
@media (max-width: 520px) {
  .icon-evolution-grid {
    gap: 16px 14px;
  }
  .icon-evolution-grid img {
    max-width: 132px;
    border-radius: 28px;
  }
  .icon-evolution-grid figcaption {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* "More from this blog" — cross-link block under each post */
.blog-more {
  margin: 56px 0 0;
}

.blog-more-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-more-card {
  display: block;
  padding: 22px 24px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid rgba(var(--tint-rgb), 0.08);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}

.blog-more-card:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.blog-more-kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.blog-more-title {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.blog-more-meta {
  display: block;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* Blog index — browsable list of posts. Reuses .blog-more-card styling. */
.blog-index {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.blog-index-head {
  margin-bottom: 40px;
}
.blog-index-head h1 {
  font-size: clamp(34px, 5vw, 48px);
  margin: 8px 0 12px;
}
.blog-index-head .lede {
  color: var(--muted);
  font-size: 17px;
  max-width: 60ch;
}
.blog-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-index-list > li {
  margin: 0;
}

/* Legal pages */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.legal-page h1 {
  font-size: clamp(36px, 5vw, 52px);
}

.legal-page h2 {
  margin-top: 40px;
  font-size: 22px;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
}

.legal-page a {
  color: var(--blue);
}

.legal-page h3 {
  margin: 28px 0 8px;
  font-size: 16px;
  color: var(--text);
}

.changelog-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin: 12px 0 20px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid rgba(var(--tint-rgb), 0.08);
  border-radius: 12px;
}

.changelog-icon-trio {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.changelog-icon-trio img {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.changelog-icon-arrow {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.changelog-icon-row p {
  margin: 0;
  flex: 1 1 280px;
  font-size: 15px;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-figure {
    order: -1;
    max-width: 580px;
  }

  .problem-grid,
  .pricing-card {
    grid-template-columns: 1fr;
  }

  .strategy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strategy-grid::before {
    display: none;
  }

  .features {
    grid-template-columns: 1fr;
  }
}

/* Tablet — capsule shrinks but still floats. */
@media (max-width: 900px) {
  .nav {
    top: 10px;
    margin-top: 10px;
    padding: 6px 8px 6px 16px;
    gap: 12px;
    width: min(720px, calc(100% - 24px));
  }
  /* Hide secondary nav links earlier than the language picker / Download. */
  .nav-links a:not(.button) {
    display: none;
  }
}

/* Phone — tighten further, lock brand to one line, shrink the Download pill
   so the whole capsule reads as a comfortable thumb-zone control. */
@media (max-width: 620px) {
  .nav {
    top: 8px;
    margin-top: 8px;
    padding: 5px 6px 5px 12px;
    gap: 8px;
    width: calc(100% - 20px);
    border-radius: 999px;
  }

  /* Brand: smaller mark, tighter gap, text never wraps. */
  .brand {
    gap: 8px;
    font-size: 14px;
    min-width: 0;
  }
  .brand-mark {
    width: 24px;
    height: 24px;
  }
  .brand span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-links {
    gap: 6px;
  }
  .nav-links a:not(.button) {
    display: none;
  }
  /* Language picker eats too much space on phones — hide it; users can
     change locale from the footer or via system settings. */
  .nav-links .lang-picker {
    display: none;
  }
  /* Download pill: compact size, no extra growth. */
  .nav-links .button.primary {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
  /* Theme toggle: shrink slightly so it fits the capsule height. */
  .theme-toggle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
  }
  .theme-toggle svg { width: 14px; height: 14px; }
}

/* Tiny phones — drop the brand wordmark entirely; the favicon stands alone
   the way real macOS menubar items do. */
@media (max-width: 400px) {
  .brand span {
    display: none;
  }

  .strategy-grid {
    grid-template-columns: 1fr;
  }

  .terminal-stack li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-bottom: 14px;
  }

  .terminal-stack code {
    font-size: 12px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Accessibility fallbacks ─────────────────────────────────────────────
   Users who reduce transparency (macOS/iOS "Reduce Transparency", the
   prefers-reduced-transparency query) or run a forced-colors mode (Windows
   High Contrast) should not get blurred glass — it muddies text and the
   translucent edges can vanish. Drop the blur and give every glass surface a
   solid fill so the structure stays legible. */
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .nav,
  .button,
  .theme-toggle,
  .academy-callout,
  .pricing-card,
  .course-cta,
  .footer-cta,
  .next-preview,
  .app-screenshot,
  .popover,
  .tools-panel,
  .dmg-window {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Solidify the surfaces that were translucent gradients. */
  .nav,
  .academy-callout,
  .pricing-card,
  .course-cta,
  .footer-cta,
  .next-preview {
    background: var(--panel);
  }

  /* Glass-tint secondary buttons get a solid fill; primary keeps its
     opaque gradient (white text already clears AA on it). */
  .button:not(.primary) {
    background: var(--panel-2);
  }
}

/* In forced-colors mode, let the system paint borders/text and keep the
   decorative sheen overlays from interfering. */
@media (forced-colors: active) {
  .nav::before,
  .nav::after,
  .button::before,
  .academy-callout::before,
  .pricing-card::before,
  .course-cta::before,
  .footer-cta::before,
  .next-preview::after,
  .popover::after,
  .tools-panel::after {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   CLI section (#cli) + hero CLI hook
   The terminal block stays dark in both themes (like .hero-demo), so risk
   colors are literals, not theme vars. */

.hero-cli {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.hero-cli a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.hero-cli a:hover {
  color: var(--ink);
}

.cli-terminal {
  margin: 0 auto 28px;
  max-width: 860px;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0b0c;
  border: 1px solid var(--line-strong);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.cli-terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: #8a877f;
}

.cli-terminal-title { margin-left: 8px; font-family: 'Geist', sans-serif; }

.cli-terminal-body {
  margin: 0;
  padding: 18px 22px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.85;
  color: #d9d6cc;
  font-variant-numeric: tabular-nums;
}

.cli-prompt { color: #20c8b8; }
.cli-th     { color: #8a877f; }
.cli-med    { color: #ffb020; }
.cli-high   { color: #ff6b6b; }
.cli-dim    { opacity: 0.55; }

.cli-columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  max-width: 860px;
  margin: 0 auto 26px;
}

.cli-col h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cli-code {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: rgba(var(--tint-rgb), 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}

.cli-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}

.cli-support {
  max-width: 640px;
  margin: 0 auto 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
}

.cli-actions {
  justify-content: center;
}

@media (max-width: 720px) {
  .cli-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Global `code` chip styling (padding/bg/theme color) must not leak into the
   CLI code blocks — in light theme var(--text) would be dark-on-dark inside
   the terminal. */
.cli-terminal-body code,
.cli-code code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}