/* ========================================================================== Ninety9 — design system Light is the default; dark is applied via prefers-color-scheme and can be overridden manually with [data-theme] on . ========================================================================== */ /* ---------- Tokens ---------- Two rules about the accent, because getting this wrong is what makes gold look cheap: --accent the metallic fill. Only ever a background, a border or a decorative shape. Never text on a light surface. --accent-ink the text-safe gold. Deep bronze on light, bright on dark. Every link, label and icon that sits on the page background. The dark palette is declared twice — once for the OS preference and once for the manual [data-theme] override. Keep the two blocks in sync. -------------------------------------------------------------------------- */ :root { color-scheme: light; --brand-1: #e5b34a; --brand-2: #efc96a; --brand-3: #c9922b; /* Text gradient has to stay darker than the button fill so large type still clears 3:1 on white. Buttons and chrome use --accent. */ --grad: linear-gradient(100deg, #9c6f16, #b8862b 55%, #c17f18); --bg: #ffffff; --bg-sunken: #f7f6f4; --bg-raised: #ffffff; --bg-inset: #faf9f7; --bg-invert: #0b0b0d; --fg: #0b0b0d; --fg-muted: #5b5f66; --fg-subtle: #85898f; --fg-invert: #ffffff; --border: #e7e5e1; --border-strong: #d4d1cb; --accent: #e5b34a; --accent-ink: #8f6410; --accent-fg: #1a1206; --accent-wash: #fbf4e0; --accent-line: #efd78c; --star: #e5b34a; --ok: #0f8a5f; --warn: #b26b00; --danger: #c62828; --danger-wash: #fdeceb; /* Shadow colour ramp. Geometry is shared across themes; only the alpha and hue change, which is what keeps the two modes feeling like one system. */ --sh-1: rgba(24, 20, 12, 0.08); --sh-2: rgba(24, 20, 12, 0.15); --sh-3: rgba(24, 20, 12, 0.24); --shadow-xs: 0 1px 1px var(--sh-1); --shadow-sm: 0 2px 4px var(--sh-2), 0 4px 10px -3px var(--sh-1); --shadow-md: 0 2px 4px var(--sh-1), 0 12px 26px -6px var(--sh-2), 0 26px 48px -16px var(--sh-3); --shadow-lg: 0 4px 8px -2px var(--sh-1), 0 18px 36px -10px var(--sh-2), 0 40px 72px -22px var(--sh-3); --shadow-glow: 0 6px 16px -6px rgba(229, 179, 74, 0.42), 0 16px 38px -12px rgba(229, 179, 74, 0.28); /* Gradient-border "shine" on cards. Light mode is a clean window catch — white, not gold wash. Dark mode reads as a glass edge. */ --shine-1: rgba(229, 179, 74, 0.95); --shine-2: rgba(201, 146, 43, 0.42); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.95); --glass-bevel: linear-gradient( 155deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.38) 12%, rgba(255, 255, 255, 0.08) 28%, transparent 46%, rgba(24, 20, 12, 0.05) 78%, rgba(24, 20, 12, 0.08) 100% ); --logo-invert: 0; --grid-line: rgba(24, 20, 12, 0.045); --glass: rgba(255, 255, 255, 0.78); --shot-ring: rgba(24, 20, 12, 0.09); --glass-fill: color-mix(in srgb, #ffffff 62%, transparent); --glass-border: color-mix(in srgb, #ffffff 86%, var(--border)); --card-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.28) 16%, transparent 40%); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 1); --card-ring-hover: color-mix(in srgb, var(--fg) 48%, var(--border-strong)); --hover: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --card-shadow: var(--shadow-md), var(--edge-top), var(--card-inset), 0 18px 36px -12px transparent, 0 0 0 1px transparent; --card-shadow-hover: var(--shadow-md), var(--edge-top), var(--card-inset), 0 18px 36px -12px var(--sh-3), 0 0 0 1px var(--card-ring-hover); --field-a: rgba(24, 20, 12, 0.04); --field-b: rgba(255, 255, 255, 0.7); --field-c: rgba(24, 20, 12, 0.025); --shimmer: rgba(255, 255, 255, 0.95); --shimmer-opacity: 0.65; --bloom-mix: 22%; --bloom-hero: 0.42; --bloom-section: 10%; --bloom-cta: 18%; --glass-filter: blur(20px) saturate(1.15); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.88rem); --step-0: clamp(0.97rem, 0.94rem + 0.16vw, 1.05rem); --step-1: clamp(1.13rem, 1.06rem + 0.34vw, 1.32rem); --step-2: clamp(1.35rem, 1.22rem + 0.63vw, 1.72rem); --step-3: clamp(1.66rem, 1.42rem + 1.15vw, 2.3rem); --step-4: clamp(2.05rem, 1.6rem + 2.1vw, 3.2rem); --step-5: clamp(2.5rem, 1.72rem + 3.6vw, 4.5rem); --w-wide: 1240px; --w-page: 1120px; --w-text: 720px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px; --nav-h: 72px; --nav-h-stuck: 60px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --brand-1: #e5b34a; --brand-2: #f5d68b; --brand-3: #c9922b; --grad: linear-gradient(100deg, #e5b34a, #f5d68b 50%, #d9a93f); --bg: #0a0a0b; --bg-sunken: #101011; --bg-raised: #151517; --bg-inset: #111112; --bg-invert: #ffffff; --fg: #f4f4f5; --fg-muted: #a4a3a8; --fg-subtle: #77767c; --fg-invert: #0a0a0b; --border: #262528; --border-strong: #383639; --accent: #e5b34a; --accent-ink: #f0c566; --accent-fg: #1a1206; --accent-wash: #251c0a; --accent-line: #4a3a15; --star: #f0c566; --ok: #35c88f; --warn: #e0a144; --danger: #ff7a70; --danger-wash: #2a1412; --sh-1: rgba(0, 0, 0, 0.45); --sh-2: rgba(0, 0, 0, 0.55); --sh-3: rgba(0, 0, 0, 0.65); --shadow-xs: 0 1px 1px var(--sh-1); --shadow-sm: 0 1px 2px var(--sh-2), 0 2px 6px -2px var(--sh-1); --shadow-md: 0 2px 4px var(--sh-1), 0 8px 18px -6px var(--sh-2), 0 18px 38px -14px var(--sh-3); --shadow-lg: 0 4px 8px -2px var(--sh-2), 0 16px 34px -10px var(--sh-3), 0 40px 78px -24px var(--sh-3); --shadow-glow: 0 6px 18px -6px rgba(229, 179, 74, 0.34), 0 18px 44px -14px rgba(229, 179, 74, 0.26); --shine-1: rgba(255, 255, 255, 0.42); --shine-2: rgba(229, 179, 74, 0.38); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.055); --glass-bevel: linear-gradient( 155deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 14%, transparent 40%, rgba(229, 179, 74, 0.22) 100% ); --logo-invert: 1; --grid-line: rgba(255, 255, 255, 0.045); --glass: rgba(12, 12, 14, 0.72); --shot-ring: rgba(255, 255, 255, 0.09); --glass-fill: color-mix(in srgb, var(--bg-raised) 38%, transparent); --glass-border: color-mix(in srgb, #ffffff 18%, var(--border)); --card-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 18%, transparent 40%); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14); --card-ring-hover: color-mix(in srgb, var(--accent) 42%, var(--border-strong)); --field-a: rgba(229, 179, 74, 0.28); --field-b: rgba(255, 255, 255, 0.06); --field-c: rgba(229, 179, 74, 0.14); --shimmer: color-mix(in srgb, #ffffff 38%, var(--field-a)); --shimmer-opacity: 0.7; --bloom-mix: 26%; --bloom-hero: 0.5; --bloom-section: 14%; --bloom-cta: 22%; --glass-filter: blur(20px) saturate(1.35); } } :root[data-theme='dark'] { color-scheme: dark; --brand-1: #e5b34a; --brand-2: #f5d68b; --brand-3: #c9922b; --grad: linear-gradient(100deg, #e5b34a, #f5d68b 50%, #d9a93f); --bg: #0a0a0b; --bg-sunken: #101011; --bg-raised: #151517; --bg-inset: #111112; --bg-invert: #ffffff; --fg: #f4f4f5; --fg-muted: #a4a3a8; --fg-subtle: #77767c; --fg-invert: #0a0a0b; --border: #262528; --border-strong: #383639; --accent: #e5b34a; --accent-ink: #f0c566; --accent-fg: #1a1206; --accent-wash: #251c0a; --accent-line: #4a3a15; --star: #f0c566; --ok: #35c88f; --warn: #e0a144; --danger: #ff7a70; --danger-wash: #2a1412; --sh-1: rgba(0, 0, 0, 0.45); --sh-2: rgba(0, 0, 0, 0.55); --sh-3: rgba(0, 0, 0, 0.65); --shadow-xs: 0 1px 1px var(--sh-1); --shadow-sm: 0 1px 2px var(--sh-2), 0 2px 6px -2px var(--sh-1); --shadow-md: 0 2px 4px var(--sh-1), 0 8px 18px -6px var(--sh-2), 0 18px 38px -14px var(--sh-3); --shadow-lg: 0 4px 8px -2px var(--sh-2), 0 16px 34px -10px var(--sh-3), 0 40px 78px -24px var(--sh-3); --shadow-glow: 0 6px 18px -6px rgba(229, 179, 74, 0.34), 0 18px 44px -14px rgba(229, 179, 74, 0.26); --shine-1: rgba(255, 255, 255, 0.42); --shine-2: rgba(229, 179, 74, 0.38); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.055); --glass-bevel: linear-gradient( 155deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 14%, transparent 40%, rgba(229, 179, 74, 0.22) 100% ); --logo-invert: 1; --grid-line: rgba(255, 255, 255, 0.045); --glass: rgba(12, 12, 14, 0.72); --shot-ring: rgba(255, 255, 255, 0.09); --glass-fill: color-mix(in srgb, var(--bg-raised) 38%, transparent); --glass-border: color-mix(in srgb, #ffffff 18%, var(--border)); --card-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 18%, transparent 40%); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14); --card-ring-hover: color-mix(in srgb, var(--accent) 42%, var(--border-strong)); --field-a: rgba(229, 179, 74, 0.28); --field-b: rgba(255, 255, 255, 0.06); --field-c: rgba(229, 179, 74, 0.14); --shimmer: color-mix(in srgb, #ffffff 38%, var(--field-a)); --shimmer-opacity: 0.7; --bloom-mix: 26%; --bloom-hero: 0.5; --bloom-section: 14%; --bloom-cta: 22%; --glass-filter: blur(20px) saturate(1.35); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1; overflow-x: hidden; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5 { line-height: 1.14; letter-spacing: -0.028em; font-weight: 680; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--accent); color: var(--accent-fg); } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; } hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* ---------- Utilities ---------- */ .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: 22px; } .wrap--wide { max-width: var(--w-wide); } .wrap--text { max-width: var(--w-text); } .section { padding-block: clamp(52px, 6vw, 88px); } .section--tight { padding-block: clamp(32px, 4vw, 52px); } .section--sunken { background: var(--bg-sunken); border-block: 1px solid var(--border); } /* Viewport-locked field behind cards. The paint is clipped to the section so edges still fade, but the light itself is tied to the screen — tall blog grids no longer hide it three fold-heights down. */ .section:has(.post-grid), .section:has(.grid) { position: relative; } .section:has(.post-grid)::before, .section:has(.grid)::before, .section:has(.post-grid)::after, .section:has(.grid)::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: min(1560px, calc(100% - 44px)); pointer-events: none; z-index: 0; } .section:has(.post-grid)::before, .section:has(.grid)::before { top: 44%; bottom: 8%; background-image: radial-gradient(ellipse 34% 62% at 38% 54%, var(--field-a), transparent 72%), radial-gradient(ellipse 32% 58% at 66% 46%, var(--field-b), transparent 74%); } .section:has(.post-grid)::after, .section:has(.grid)::after { top: 50%; bottom: 6%; background-image: linear-gradient( 118deg, transparent 0%, transparent 38%, var(--shimmer) 50%, transparent 62%, transparent 100% ); background-size: 240% 100%; background-position: 130% 0; animation: glass-shimmer 9s ease-in-out infinite; opacity: var(--shimmer-opacity); -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 50%, #000 0%, transparent 76%); mask-image: radial-gradient(ellipse 60% 48% at 50% 50%, #000 0%, transparent 76%); } @keyframes glass-shimmer { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } } /* Blog listing: keep the same oval, but pin it to the viewport so it stays behind the cards while you scroll the long grid. */ .section:has([data-post-grid])::before, .section:has([data-post-grid])::after { position: fixed; bottom: auto; width: min(1560px, calc(100vw - 44px)); } .section:has([data-post-grid])::before { top: 54vh; height: 42vh; } .section:has([data-post-grid])::after { top: 58vh; height: 34vh; } .section:has(.post-grid) > .wrap, .section:has(.grid) > .wrap { position: relative; z-index: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: var(--r-sm); font-weight: 600; } .skip-link:focus { top: 12px; } .center { text-align: center; } .muted { color: var(--fg-muted); } .mono { font-family: var(--font-mono); font-size: 0.9em; } /* App Store icons arrive with their own corner radius baked in, so anything we add on top shows as a double-rounded edge. Square, always. */ .appicon, .app-stage__tile img, .mega__link img, .appsec__icon, .appcta__icon, .post-card__app img, .mobile-nav__app img, .cmp__app img, .article-meta .appicon { border-radius: 0; } /* ---------- Card edge ---------- Static glass bevel, like a pane catching a window. Light from the top-left, a warmer falloff at the bottom-right. No orbiting highlight — that reads as a gimmick on large surfaces. The hero app tiles keep their own moving rim. */ .shine, .card, .post-card, .appcta, .takeaways, .stats, .cta-band, .tablewrap, .btn { position: relative; } .shine::before, .card::before, .post-card::before, .appcta::before, .takeaways::before, .stats::before, .cta-band::before, .tablewrap::before, .btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-bevel); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; opacity: 0.9; transition: all 250ms; } .card--hover:hover::before, .post-card:hover::before, .appcta:hover::before, .btn:hover::before { opacity: 1; } .stats::before, .tablewrap::before, .takeaways::before { opacity: 0.7; } @supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .shine::before, .card::before, .post-card::before, .appcta::before, .takeaways::before, .stats::before, .cta-band::before, .tablewrap::before, .btn::before { display: none; } } /* The light-mode stops stay dark enough to clear 3:1 against white, which is why the gradient is defined per theme rather than from the brand ramp. */ .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Eyebrow / pills / badges ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--border-strong); } /* Centred eyebrows get a matching rule on the right, otherwise the single leading dash drags the whole label off-axis. */ .sec-head--center .eyebrow::after { content: ''; width: 22px; height: 1px; background: var(--border-strong); } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg-raised); font-size: var(--step--1); font-weight: 550; color: var(--fg-muted); white-space: nowrap; } .pill--accent { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-ink); } .pill--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .bfs { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); font-weight: 600; color: var(--ok); } .bfs svg { width: 15px; height: 15px; flex: none; } .stars { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--fg-muted); } .stars b { color: var(--fg); font-weight: 650; } .stars svg { width: 14px; height: 14px; color: var(--star); flex: none; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-bd: var(--fg); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border-radius: var(--r-full); isolation: isolate; overflow: hidden; background-color: var(--btn-bg); background-image: var(--card-sheen); color: var(--btn-fg); border: 1px solid var(--btn-bd); box-shadow: var(--card-inset); font-weight: 600; font-size: var(--step-0); line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; transition: all 250ms; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--card-inset); } .btn:active { transform: translateY(0); } .btn svg { width: 17px; height: 17px; flex: none; position: relative; z-index: 1; } .btn--accent { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: transparent; } .btn--accent:hover { box-shadow: var(--shadow-glow), var(--card-inset); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--border-strong); } .btn--ghost:hover { --btn-bg: var(--bg-sunken); } .btn--sm { padding: 8px 16px; font-size: var(--step--1); } .btn--lg { padding: 15px 30px; font-size: var(--step-1); } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-ink); } .link-arrow svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease-out); } .link-arrow:hover svg { transform: translateX(3px); } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 100; background: var(--glass); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); transition: background-color 0.25s var(--ease), box-shadow 0.3s var(--ease); } /* The divider is a gradient hairline rather than a flat border: it fades out at both ends so the header reads as floating instead of boxed in. */ .header__rule { position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border-strong) 50%, var(--border) 88%, transparent); opacity: 0; transition: opacity 0.3s var(--ease); } .header.is-stuck { box-shadow: 0 1px 0 var(--sh-1), 0 8px 24px -18px var(--sh-3); } .header.is-stuck .header__rule { opacity: 1; } .header__inner { height: var(--nav-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; transition: height 0.3s var(--ease); } .header.is-stuck .header__inner { height: var(--nav-h-stuck); } .header__inner > nav { justify-self: center; min-width: 0; } .logo { display: inline-flex; align-items: center; gap: 9px; flex: none; justify-self: start; } /* Height lives on the element, not the modifier classes, so any markup that drops a bare into .logo still gets a sane size. */ .logo img { height: 34px; width: auto; filter: invert(var(--logo-invert)); transition: filter 0.25s var(--ease), opacity 0.2s var(--ease); } /* Compact N9 mark is white-on-black, so it uses the opposite invert of the wordmark. More specific than `.logo img` so this filter wins instead of stacking. */ .logo img.logo__mark { display: none; filter: invert(calc(1 - var(--logo-invert))); } .nav { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin: 0; } .nav__item { position: relative; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border-radius: var(--r-full); font-size: var(--step-0); font-weight: 540; color: var(--fg-muted); transition: color 0.16s var(--ease), background-color 0.16s var(--ease); } .nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--fg); background: var(--bg-sunken); } .nav__link svg { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.2s var(--ease); } .nav__item:hover .nav__link svg { transform: rotate(180deg); } /* Current page gets a gold underscore rather than a heavier weight, so the nav does not reflow as you move between pages. */ .nav__link[aria-current='page'] { color: var(--fg); } .nav__link[aria-current='page']::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--brand-2)); } /* Anchored to the item's left edge, not centred on it: the trigger sits near the left of the viewport, so a centred panel hangs off the screen. */ .mega { position: absolute; top: calc(100% + 12px); left: -14px; transform: translateY(-6px); width: min(820px, calc(100vw - 44px)); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--edge-top); padding: 16px; display: grid; grid-template-columns: 1.8fr 1fr; gap: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s var(--ease), transform 0.24s var(--ease-out), visibility 0.18s; } .nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Bridges the gap so the panel survives the pointer travelling to it. */ .mega::before { content: ''; position: absolute; inset: -14px -14px auto; height: 26px; } .mega__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); padding: 2px 10px 8px; } .mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .mega__link { --app-accent: var(--accent); position: relative; display: flex; gap: 11px; align-items: center; padding: 10px; border-radius: var(--r-md); transition: background-color 0.15s var(--ease); } .mega__link::after { content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 0; border-radius: 2px; background: var(--app-accent); transform: translateY(-50%); transition: height 0.2s var(--ease-out); } .mega__link:hover { background: var(--bg-sunken); } .mega__link:hover::after { height: 26px; } .mega__link img { width: 36px; height: 36px; flex: none; box-shadow: var(--shadow-sm); } .mega__text { min-width: 0; display: block; } .mega__name { font-weight: 640; font-size: var(--step-0); letter-spacing: -0.015em; display: flex; align-items: center; gap: 7px; } .mega__desc { font-size: 12px; color: var(--fg-muted); line-height: 1.4; display: block; margin-top: 2px; } .mega__flag { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.5; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); border-radius: 4px; padding: 0 4px; flex: none; } .mega__rail { display: flex; flex-direction: column; gap: 14px; padding: 2px 4px 4px; border-left: 1px solid var(--border); padding-left: 18px; } .mega__rail .mega__eyebrow { padding: 2px 0 0; } .mega__stat { display: grid; gap: 2px; } .mega__stat b { font-size: var(--step-2); font-weight: 750; letter-spacing: -0.035em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mega__stat span { font-size: 12px; color: var(--fg-muted); line-height: 1.4; } .mega__all { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: var(--step--1); font-weight: 620; color: var(--fg-muted); } .mega__all svg { width: 14px; height: 14px; transition: transform 0.18s var(--ease-out); } .mega__all:hover { color: var(--accent-ink); } .mega__all:hover svg { transform: translateX(3px); } @media (max-width: 1180px) { .header__cta { display: none; } } /* Only swap to the compact mark in the band where the full nav is still shown but the wordmark starts crowding it. Below 940px the nav collapses and the wordmark has room again. */ @media (min-width: 941px) and (max-width: 1080px) { .logo__word { display: none; } .logo img.logo__mark { display: block; } } .header__actions { display: flex; align-items: center; gap: 8px; flex: none; justify-self: end; grid-column: -2 / -1; } .icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg-raised); color: var(--fg-muted); transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background-color 0.16s var(--ease); } .icon-btn:hover { color: var(--fg); border-color: var(--border-strong); } .icon-btn svg { width: 17px; height: 17px; } .theme-btn .i-sun { display: none; } .theme-btn .i-moon { display: block; } :root[data-theme='dark'] .theme-btn .i-sun { display: block; } :root[data-theme='dark'] .theme-btn .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-btn .i-sun { display: block; } :root:not([data-theme='light']) .theme-btn .i-moon { display: none; } } .burger { display: none; } /* mobile nav */ .mobile-nav { position: fixed; inset: var(--nav-h) 0 0; z-index: 99; background: var(--bg); padding: 20px 22px 40px; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), transform 0.24s var(--ease-out), visibility 0.2s; } .mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: var(--step-1); font-weight: 600; } .mobile-nav .mobile-nav__app { display: flex; align-items: center; gap: 12px; font-size: var(--step-0); font-weight: 550; padding-left: 4px; } .mobile-nav .mobile-nav__app img { width: 28px; height: 28px; } .mobile-nav__group { margin-top: 8px; } .mobile-nav__label { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); font-weight: 600; padding-top: 18px; } @media (max-width: 940px) { /* Two columns so hiding the centre nav does not drop the actions into the middle track of the desktop 1fr / auto / 1fr grid. */ .header__inner { grid-template-columns: 1fr auto; } .header__inner > nav { display: none; } .header__actions { grid-column: 2; } .burger { display: inline-grid; } /* Keep the bar a fixed height on touch so the mobile nav panel, which is offset by --nav-h, never detaches from it mid-scroll. */ .header.is-stuck .header__inner { height: var(--nav-h); } } /* ---------- Hero ---------- */ .hero { position: relative; padding-block: clamp(54px, 8vw, 100px) clamp(28px, 4vw, 52px); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%); } .hero__glow { position: absolute; z-index: -1; pointer-events: none; width: 900px; height: 520px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-1) var(--bloom-mix), transparent), transparent 66%); filter: blur(52px); opacity: var(--bloom-hero); } .hero__inner { display: grid; gap: 26px; justify-items: center; text-align: center; } h1.hero__title { font-size: var(--step-5); font-weight: 720; letter-spacing: -0.04em; max-width: 15ch; } .hero__sub { font-size: var(--step-1); color: var(--fg-muted); max-width: 60ch; } .hero__proof { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; font-size: var(--step--1); color: var(--fg-subtle); margin-top: 4px; } .hero__proof span { display: inline-flex; align-items: center; gap: 7px; } .hero__proof svg { width: 15px; height: 15px; color: var(--ok); } /* App icons under the hero — 74px, names below, no plates */ .app-stage { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 32px); width: min(100%, 720px); margin-top: 16px; padding: 16px 4px 8px; } .app-stage__beam { position: absolute; left: 8%; right: 8%; top: 53px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 18%, #fff 50%, var(--accent) 82%, transparent); opacity: 0.45; pointer-events: none; z-index: 0; } .app-stage__beam::after { content: ''; position: absolute; inset: -10px 0; background: inherit; filter: blur(10px); opacity: 0.5; } .app-stage__tile { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 74px; color: var(--fg-muted); animation: tile-float 5.4s var(--ease) var(--float-delay, 0s) infinite; } .app-stage__aura { position: absolute; top: 0; width: 74px; height: 74px; border-radius: 22px; background: radial-gradient(circle, color-mix(in srgb, var(--app-accent) 42%, transparent), transparent 70%); filter: blur(12px); opacity: 0.4; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .app-stage__tile img { width: 74px; height: 74px; position: relative; z-index: 1; transition: transform 0.28s var(--ease-out), filter 0.28s var(--ease); } .app-stage__name { font-size: 13.5px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.1; } .app-stage__tile:hover { color: var(--fg); animation-play-state: paused; } .app-stage__tile:hover .app-stage__aura { opacity: 0.8; transform: scale(1.12); } .app-stage__tile:hover img { transform: translateY(-6px) scale(1.06); } @keyframes tile-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (max-width: 520px) { .app-stage { gap: 12px; padding-top: 12px; } .app-stage__beam { top: 45px; } .app-stage__tile { min-width: 62px; } .app-stage__tile img, .app-stage__aura { width: 62px; height: 62px; } .app-stage__name { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .app-stage__tile { animation: none; } } /* ---------- Section headers ---------- */ .sec-head { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(30px, 4vw, 52px); } .sec-head--center { margin-inline: auto; justify-items: center; text-align: center; } .sec-head h2 { font-size: var(--step-4); letter-spacing: -0.035em; } .sec-head p { font-size: var(--step-1); color: var(--fg-muted); } /* ---------- Cards ---------- */ .card { position: relative; isolation: isolate; background-color: var(--glass-fill); background-image: var(--card-sheen); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--card-shadow); transform: translateZ(0); transition: all 250ms; } .card--hover:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--card-shadow-hover); } .plan { display: grid; gap: 12px; align-content: start; } .plan__name { font-size: var(--step-0); color: var(--fg-muted); font-weight: 600; } .plan__price { font-size: var(--step-3); font-weight: 720; letter-spacing: -0.04em; line-height: 1; } .plan__price .muted { font-size: var(--step--1); font-weight: 500; } .plan__note { font-size: var(--step--1); } .grid { display: grid; gap: 18px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); } /* ---------- App card (apps index) ---------- */ .appcard { --app-accent: var(--accent); display: grid; gap: 15px; align-content: start; padding-top: 22px; } /* A thin bar in the app's own colour, so the five cards are distinguishable at a glance without tinting the whole surface. */ .appcard::after { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--app-accent); opacity: 0.85; z-index: 1; } .appcard__head { display: flex; gap: 14px; align-items: center; } .appcard__head img { flex: none; box-shadow: var(--shadow-sm); } .appcard__name { font-size: var(--step-1); letter-spacing: -0.025em; } .appcard__tag { font-size: var(--step--1); color: var(--fg-muted); } .appcard__pitch { font-size: var(--step--1); color: var(--fg-muted); } .appcard__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .appcard__actions { margin-top: auto; } /* ---------- App showcase (homepage) ---------- */ .appsec { --app-accent: var(--accent); padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--border); position: relative; } .appsec::before { content: ''; position: absolute; inset: 0 0 auto; height: 340px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 100% at 18% 0%, color-mix(in srgb, var(--app-accent) var(--bloom-section), transparent), transparent 70%); } .appsec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .appsec:nth-of-type(even) .appsec__media { order: -1; } @media (max-width: 900px) { .appsec__grid { grid-template-columns: 1fr; } .appsec:nth-of-type(even) .appsec__media { order: 0; } } .appsec__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .appsec__icon { width: 56px; height: 56px; flex: none; box-shadow: var(--shadow-md); } .appsec__meta { display: flex; flex-direction: column; gap: 3px; } .appsec__name { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.03em; } .appsec__tag { font-size: var(--step--1); color: var(--fg-muted); } .appsec h3 { font-size: var(--step-3); margin-bottom: 14px; letter-spacing: -0.035em; } .appsec__pitch { color: var(--fg-muted); font-size: var(--step-1); margin-bottom: 20px; } .feat-list { display: grid; gap: 11px; margin-bottom: 24px; list-style: none; padding: 0; } .feat-list li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--step-0); } .feat-list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--app-accent); } .appsec__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } /* screenshot frame */ .shot { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--shot-ring); background: var(--bg-sunken); box-shadow: var(--shadow-lg); } .shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; } .shot--tall img { aspect-ratio: auto; } .shot-stack { position: relative; } .shot-stack::after { content: ''; position: absolute; inset: auto 6% -14px 6%; height: 30px; border-radius: var(--r-lg); z-index: -1; background: var(--bg-raised); border: 1px solid var(--border); } /* gallery */ .gallery { display: grid; gap: 14px; } .gallery__main { position: relative; } .gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .gallery__thumb { flex: none; width: 108px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: 0.55; transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease); background: var(--bg-sunken); } .gallery__thumb img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; } .gallery__thumb:hover { opacity: 0.85; } .gallery__thumb[aria-current='true'] { opacity: 1; border-color: var(--accent); } /* ---------- Feature grid ---------- */ .fcard { display: grid; gap: 11px; align-content: start; } .fcard__icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); border: 1px solid var(--accent-line); } .fcard__icon svg { width: 20px; height: 20px; } .fcard h3 { font-size: var(--step-1); letter-spacing: -0.02em; } .fcard p { color: var(--fg-muted); font-size: var(--step-0); } .fcard p a { color: var(--accent-ink); font-weight: 620; } .fcard p a:hover { text-decoration: underline; text-underline-offset: 2.5px; } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); } .stat { background: var(--bg-raised); padding: 26px 22px; display: grid; gap: 6px; align-content: start; } .stat__n { font-size: var(--step-3); font-weight: 720; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; } .stat__l { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.45; } /* The two headline numbers get a wider cell and a warm wash so the eye lands on them before the supporting figures. */ /* Twelve columns so two half-width headline cells and four quarter-width supporting cells both divide cleanly and leave no orphan cell. */ .stats--headline { grid-template-columns: repeat(12, minmax(0, 1fr)); } .stats--headline .stat { grid-column: span 3; } .stats--headline .stat--hero { grid-column: span 6; padding: 32px 28px; background: var(--bg-inset); } .stats--headline .stat--hero .stat__n { font-size: var(--step-4); } @media (max-width: 1000px) { .stats--headline .stat { grid-column: span 6; } } @media (max-width: 620px) { .stats--headline { grid-template-columns: 1fr; } .stats--headline .stat, .stats--headline .stat--hero { grid-column: span 1; } .stats--headline .stat--hero { padding: 24px 22px; } } /* ---------- Comparison table ---------- */ .tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-raised); } table.cmp { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 660px; } table.cmp th, table.cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } table.cmp thead th { font-weight: 640; color: var(--fg); background: var(--bg-sunken); white-space: nowrap; position: sticky; top: 0; } table.cmp tbody tr:last-child td { border-bottom: none; } table.cmp tbody tr:hover td { background: var(--bg-sunken); } table.cmp .cmp__app { display: flex; align-items: center; gap: 10px; font-weight: 620; color: var(--fg); } table.cmp .cmp__app img { width: 28px; height: 28px; flex: none; } /* ---------- Blog ---------- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 22px; } .post-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0; background-color: var(--glass-fill); background-image: var(--card-sheen); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 0; overflow: hidden; box-shadow: var(--card-shadow); transform: translateZ(0); transition: all 250ms; } .post-card:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--card-shadow-hover); } .post-card__media { aspect-ratio: 3 / 2; background: #0b0b0c; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .post-card__body { display: flex; flex-direction: column; gap: 13px; padding: 18px 22px 20px; flex: 1; } .post-card__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .post-card__app { display: inline-flex; align-items: center; gap: 7px; font-size: var(--step--1); font-weight: 600; color: var(--fg-muted); } .post-card__app img { width: 20px; height: 20px; } .post-card h3 { font-size: var(--step-1); letter-spacing: -0.024em; line-height: 1.28; } .post-card h3 a::after { content: ''; position: absolute; inset: 0; } .post-card p { color: var(--fg-muted); font-size: var(--step--1); line-height: 1.6; flex: 1; } .post-card__foot { display: flex; align-items: center; gap: 10px; font-size: var(--step--1); color: var(--fg-subtle); border-top: 1px solid var(--border); padding-top: 12px; } .post-card--feature, .post-card--wide { grid-column: 1 / -1; } @media (min-width: 900px) { .post-card--wide .post-card__body { padding: 28px 30px 30px; } .post-card--wide h3 { font-size: var(--step-2); max-width: 22ch; } .post-card--wide p { max-width: 62ch; } } @media (min-width: 900px) { .post-card--feature { display: grid; grid-template-columns: 1.08fr 1fr; align-items: stretch; } .post-card--feature .post-card__media { order: 2; aspect-ratio: auto; min-height: 0; height: auto; max-height: 100%; align-self: stretch; margin: 10px; border-radius: var(--r-lg); } .post-card--feature .post-card__body { padding: 32px 36px; justify-content: center; gap: 14px; } .post-card--feature h3 { font-size: var(--step-3); } .post-card--feature p { font-size: var(--step-0); } } @media (prefers-reduced-transparency: reduce) { .card, .post-card, .cta-band { background-image: none; background-color: var(--bg-raised); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--border); } .btn { background-image: none; } .section:has(.post-grid)::before, .section:has(.grid)::before, .section:has(.post-grid)::after, .section:has(.grid)::after { display: none; } } .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; } .chip { padding: 7px 15px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg-raised); font-size: var(--step--1); font-weight: 570; color: var(--fg-muted); transition: all 0.16s var(--ease); } .chip:hover { border-color: var(--border-strong); color: var(--fg); } .chip[aria-pressed='true'] { background: var(--fg); border-color: var(--fg); color: var(--bg); } .searchbox { position: relative; margin-left: auto; } .searchbox input { width: 240px; padding: 9px 14px 9px 36px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg-raised); font-size: var(--step--1); transition: border-color 0.16s var(--ease), width 0.2s var(--ease); } .searchbox input:focus { outline: none; border-color: var(--accent-ink); width: 280px; } .searchbox svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fg-subtle); } @media (max-width: 640px) { .searchbox { margin-left: 0; width: 100%; } .searchbox input, .searchbox input:focus { width: 100%; } } .empty { text-align: center; padding: 64px 20px; color: var(--fg-muted); } /* ---------- Article ---------- */ .article-hero { padding-block: clamp(36px, 5vw, 62px) 0; } .article-cover { margin-top: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md), var(--edge-top); background: #0b0b0c; } .article-cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; background: #0b0b0c; } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: var(--step--1); color: var(--fg-subtle); margin-bottom: 20px; } .breadcrumbs a:hover { color: var(--accent-ink); } .breadcrumbs svg { width: 12px; height: 12px; opacity: 0.5; } h1.article-title { font-size: var(--step-4); letter-spacing: -0.038em; margin-bottom: 18px; max-width: 22ch; } .article-lede { font-size: var(--step-1); color: var(--fg-muted); max-width: 66ch; margin-bottom: 24px; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--step--1); color: var(--fg-subtle); padding-block: 16px; border-block: 1px solid var(--border); } .article-meta span { display: inline-flex; align-items: center; gap: 7px; } .article-meta svg { width: 14px; height: 14px; opacity: 0.7; } .article-meta img { width: 22px; height: 22px; } .byline b { font-weight: 620; color: var(--fg); } .byline__mark { width: 24px; height: 24px; border-radius: 6px; filter: invert(calc(1 - var(--logo-invert))); } .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: clamp(28px, 5vw, 64px); align-items: start; padding-block: clamp(30px, 4vw, 48px) clamp(48px, 7vw, 84px); } @media (max-width: 1000px) { .article-layout { grid-template-columns: 1fr; } .toc { display: none; } } .toc { position: sticky; top: calc(var(--nav-h) + 26px); font-size: var(--step--1); max-height: calc(100vh - var(--nav-h) - 60px); overflow-y: auto; } .toc__title { font-weight: 640; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--fg-subtle); margin-bottom: 12px; } .toc ol { list-style: none; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--border); } .toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--fg-muted); line-height: 1.45; } .toc li a:hover { color: var(--fg); } .toc li a.is-active { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; } .toc li.toc--h3 a { padding-left: 26px; font-size: 0.98em; } /* prose */ .prose { font-size: 1.06rem; line-height: 1.78; max-width: 74ch; } .prose > * + * { margin-top: 1.25em; } .prose h2 { font-size: var(--step-3); letter-spacing: -0.032em; margin-top: 2.4em; margin-bottom: 0.1em; scroll-margin-top: calc(var(--nav-h) + 22px); } .prose h3 { font-size: var(--step-1); letter-spacing: -0.022em; font-weight: 660; margin-top: 1.9em; margin-bottom: 0.1em; scroll-margin-top: calc(var(--nav-h) + 22px); } .prose h4 { font-size: var(--step-0); font-weight: 680; margin-top: 1.6em; margin-bottom: 0.1em; } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.7em; } /* Buttons and not-prose blocks opt out: without the :not() these win on specificity and paint accent text onto an accent-filled pill. */ .prose a:not(.btn) { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2.5px; text-decoration-color: color-mix(in srgb, var(--accent-ink) 38%, transparent); transition: text-decoration-color 0.16s var(--ease), color 0.16s var(--ease); } .prose a:not(.btn):hover { text-decoration-color: var(--accent-ink); } .prose .not-prose a:not(.btn) { color: inherit; text-decoration: none; } .prose strong { font-weight: 660; color: var(--fg); } .prose ul, .prose ol { padding-left: 1.35em; display: grid; gap: 0.5em; } .prose li::marker { color: var(--fg-subtle); } .prose li > ul, .prose li > ol { margin-top: 0.5em; } .prose blockquote { border-left: 3px solid var(--accent); padding: 2px 0 2px 20px; margin-left: 0; font-size: 1.06em; color: var(--fg-muted); font-style: italic; } .prose blockquote p + p { margin-top: 0.7em; } .prose code { font-family: var(--font-mono); font-size: 0.87em; background: var(--bg-sunken); border: 1px solid var(--border); padding: 0.13em 0.4em; border-radius: 5px; white-space: nowrap; } .prose pre { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; overflow-x: auto; font-size: 0.86rem; line-height: 1.6; } .prose pre code { background: none; border: none; padding: 0; white-space: pre; font-size: 1em; } .prose img { border-radius: var(--r-md); border: 1px solid var(--border); width: 100%; } .prose figure { margin: 2em 0; } .prose figcaption { font-size: var(--step--1); color: var(--fg-subtle); text-align: center; margin-top: 10px; } .prose table { width: 100%; border-collapse: collapse; font-size: 0.94em; } .prose thead th { text-align: left; font-weight: 640; background: var(--bg-sunken); } .prose th, .prose td { padding: 11px 14px; border: 1px solid var(--border); vertical-align: top; } .prose .tablewrap { margin: 1.8em 0; } .prose .tablewrap table { min-width: 520px; } .prose hr { margin: 2.6em 0; } /* callouts */ .callout { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-sunken); margin: 1.9em 0; font-size: 0.98em; } .callout__title { font-weight: 660; display: flex; align-items: center; gap: 9px; } .callout__title svg { width: 17px; height: 17px; flex: none; } .callout p { margin: 0; } .callout p + p { margin-top: 0.6em; } .callout--tip { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: color-mix(in srgb, var(--ok) 7%, var(--bg)); } .callout--tip .callout__title { color: var(--ok); } .callout--warn { border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--bg)); } .callout--warn .callout__title { color: var(--warn); } .callout--key { border-color: var(--accent-line); background: var(--accent-wash); } .callout--key .callout__title { color: var(--accent-ink); } /* inline app promo inside articles */ .appcta { display: flex; align-items: center; gap: 18px; margin: 2.6em 0; padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--accent-line); background: linear-gradient(115deg, var(--accent-wash), transparent 58%), var(--bg-sunken); box-shadow: var(--shadow-md), var(--edge-top); } .appcta img.appcta__icon { width: 56px; height: 56px; flex: none; box-shadow: var(--shadow-sm); border: none; } .appcta__body { flex: 1; min-width: 0; } .appcta__name { font-weight: 680; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--fg); } .appcta__text { color: var(--fg-muted); font-size: var(--step--1); margin: 3px 0 0; } .appcta__btn { flex: none; } @media (max-width: 620px) { .appcta { flex-wrap: wrap; gap: 14px; } .appcta__body { flex-basis: calc(100% - 74px); } .appcta__btn { width: 100%; } } /* key takeaways box */ .takeaways { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: 22px 24px; background: var(--bg-sunken); margin-bottom: 2em; box-shadow: var(--shadow-md); } .takeaways h2 { font-size: var(--step-1) !important; margin: 0 0 12px !important; letter-spacing: -0.02em; } .takeaways ul { display: grid; gap: 8px; padding-left: 1.2em; margin: 0; } .takeaways li { font-size: var(--step--1); color: var(--fg-muted); } .takeaways li strong { color: var(--fg); } /* FAQ */ .faq { display: grid; gap: 10px; } .faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-raised); overflow: hidden; transition: border-color 0.18s var(--ease); } .faq details[open] { border-color: var(--border-strong); } .faq summary { padding: 16px 20px; font-weight: 620; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; font-size: var(--step-0); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--fg-subtle); border-bottom: 2px solid var(--fg-subtle); transform: rotate(45deg) translateY(-2px); transition: transform 0.22s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .faq .faq__a { padding: 0 20px 18px; color: var(--fg-muted); font-size: var(--step-0); } .faq .faq__a p + p { margin-top: 0.7em; } /* share + author */ .article-foot { display: grid; gap: 26px; margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--border); } .share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--step--1); color: var(--fg-subtle); } .author-box { display: flex; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-sunken); } .author-box img { width: 48px; height: 48px; flex: none; border-radius: 10px; /* The mark is white-on-black. Invert only in light mode so N9 stays contrasty on both themes — do not paint a CSS background on this element, invert() would flip that fill too. */ filter: invert(calc(1 - var(--logo-invert))); } .author-box__name { font-weight: 660; } .author-box__bio { font-size: var(--step--1); color: var(--fg-muted); } .prevnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .prevnext a { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-raised); transition: border-color 0.18s var(--ease), transform 0.18s var(--ease-out); } .prevnext a:hover { border-color: var(--border-strong); transform: translateY(-2px); } .prevnext small { font-size: var(--step--1); color: var(--fg-subtle); } .prevnext strong { font-weight: 620; font-size: var(--step-0); line-height: 1.35; letter-spacing: -0.015em; } .prevnext .pn--next { text-align: right; } /* reading progress */ .progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 101; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); width: 0; transition: width 0.1s linear; } /* ---------- CTA band ---------- */ .cta-band { position: relative; isolation: isolate; overflow: hidden; z-index: 2; border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px); background-color: var(--glass-fill); background-image: var(--card-sheen); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); box-shadow: var(--shadow-md), var(--edge-top), var(--card-inset); display: grid; gap: 20px; justify-items: center; text-align: center; } .cta-band::after { content: ''; position: absolute; inset: -50% -10% auto; height: 340px; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-1) var(--bloom-cta), transparent), transparent 66%); filter: blur(48px); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { font-size: var(--step-4); letter-spacing: -0.035em; max-width: 18ch; } .cta-band p { color: var(--fg-muted); font-size: var(--step-1); max-width: 54ch; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); background: var(--bg-sunken); padding-block: clamp(44px, 6vw, 72px) 28px; margin-top: auto; position: relative; z-index: 2; } .footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px 28px; } @media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } } .footer__brand { display: grid; gap: 14px; align-content: start; max-width: 34ch; } .footer__brand p { font-size: var(--step--1); color: var(--fg-muted); } .footer__col h3 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); font-weight: 640; margin-bottom: 14px; } .footer__col ul { list-style: none; padding: 0; display: grid; gap: 9px; } .footer__col a { font-size: var(--step--1); color: var(--fg-muted); transition: color 0.15s var(--ease); } .footer__col a:hover { color: var(--fg); } .footer__bar { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: space-between; font-size: var(--step--1); color: var(--fg-subtle); } .footer__bar nav { display: flex; flex-wrap: wrap; gap: 18px; } /* ---------- Contact / forms ---------- */ .field { display: grid; gap: 7px; } .field label { font-size: var(--step--1); font-weight: 600; } .field input, .field textarea, .field select { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-raised); font-size: var(--step-0); transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .field textarea { resize: vertical; min-height: 130px; font-family: inherit; } .field small { font-size: 0.78rem; color: var(--fg-subtle); } /* ---------- 404 ---------- */ .notfound { display: grid; place-items: center; text-align: center; gap: 20px; padding-block: clamp(70px, 14vw, 150px); } .notfound__code { font-size: clamp(5rem, 18vw, 11rem); font-weight: 760; letter-spacing: -0.06em; line-height: 0.85; } /* ---------- Layout root ---------- */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } /* ---------- Cookie banner ---------- */ .cookie { position: fixed; z-index: 200; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; } .cookie[hidden] { display: none !important; } .cookie__panel { pointer-events: auto; width: min(100%, 560px); display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 14px 12px 16px; border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, #fff 28%, var(--border)); background: color-mix(in srgb, var(--bg-raised) 82%, transparent); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: var(--shadow-lg), var(--edge-top); } .cookie__copy { min-width: 0; margin: 0; font-size: 13px; color: var(--fg-muted); line-height: 1.4; } .cookie__title { font-weight: 650; color: var(--fg); } .cookie__actions { display: flex; gap: 8px; flex: none; } @media (max-width: 560px) { .cookie { left: 10px; right: 10px; bottom: 10px; } .cookie__panel { flex-wrap: wrap; gap: 10px; padding: 12px; } .cookie__actions { margin-left: auto; } } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(16px); } .reveal.is-in { opacity: 1; transform: none; transition: all 250ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } @media print { .header, .footer, .toc, .progress, .appcta, .cta-band, .prevnext, .cookie { display: none !important; } .article-layout { grid-template-columns: 1fr; } body { background: #fff; color: #000; } }