/* ========================================================================================== site.css — one stylesheet, no build step, no framework. Structure: 1. Tokens and themes 2. Reset and base 3. Utilities 4. Buttons, badges, marks 5. Header and navigation 6. Hero and numbers strip 7. The problem, and its diagram 8. Steps 9. Comparison table 10. Build / buy / subscribe 11. Compatibility checker 12. Kit 13. Ecosystem 14. Pricing 15. Open source 16. FAQ, final CTA, footer 17. Print 18. Reduced motion The palette is dark-first: the default token block is the dark theme, a light block is applied under `prefers-color-scheme: light`, and `[data-theme]` on overrides both. Every colour that is not neutral derives from --accent, which is set at runtime from shared/brand.js via js/main.js. The literal below is only the pre-script fallback. ========================================================================================== */ /* ── 1. Tokens ──────────────────────────────────────────────────────────────────────── */ :root { /* --accent-brand is set at runtime from shared/brand.js by js/main.js. The literal here is only the value used before the module runs, and the light theme derives a darker shade from it rather than hardcoding a second colour — so a brand change is still one edit. */ --accent: var(--accent-brand, #3B82F6); --surface-0: #0B0F19; --surface-1: #111726; --surface-2: #172032; --surface-3: #1E2941; --border: #26314A; --text: #E8ECF5; --text-dim: #9BA7BF; --text-faint: #6E7B95; --accent-ink: #06090F; --accent-soft: color-mix(in oklab, var(--accent) 16%, var(--surface-0)); --accent-line: color-mix(in oklab, var(--accent) 42%, var(--surface-0)); --accent-text: color-mix(in oklab, var(--accent) 82%, white); --good: #34D399; --warn: #FBBF24; --bad: #F87171; --good-soft: color-mix(in oklab, var(--good) 14%, var(--surface-0)); --warn-soft: color-mix(in oklab, var(--warn) 14%, var(--surface-0)); --bad-soft: color-mix(in oklab, var(--bad) 14%, var(--surface-0)); --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6); --radius: 14px; --radius-sm: 9px; --wrap: 74rem; --wrap-narrow: 46rem; --gutter: clamp(1.1rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 8vw, 7rem); --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color-scheme: dark; } /* The light palette appears twice: once for visitors whose OS asks for it and who have not overridden the theme here, and once for the explicit `data-theme="light"` override. CSS has no way to share a declaration block between a media query and an attribute selector without a preprocessor, and a preprocessor is a build step. Both are scoped to `screen`. Screen themes are not a printing concern, and without the scope their attribute selectors out-specify the plain `:root` palette in the print block below — which is how a "print in black on white" rule silently loses to a screen theme. */ @media screen and (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --surface-0: #FFFFFF; --surface-1: #F6F8FC; --surface-2: #EDF1F8; --surface-3: #E3E9F4; --border: #D7DEEC; --text: #0D1220; --text-dim: #4C586F; --text-faint: #6D7891; --accent: color-mix(in oklab, var(--accent-brand, #3B82F6) 76%, black); --accent-ink: #FFFFFF; --accent-soft: color-mix(in oklab, var(--accent) 9%, white); --accent-line: color-mix(in oklab, var(--accent) 34%, white); --accent-text: color-mix(in oklab, var(--accent) 88%, black); --good: #0F9D6B; --warn: #B45309; --bad: #DC2626; --good-soft: color-mix(in oklab, var(--good) 10%, white); --warn-soft: color-mix(in oklab, var(--warn) 10%, white); --bad-soft: color-mix(in oklab, var(--bad) 10%, white); --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 10px 28px -14px rgb(16 24 40 / 0.28); color-scheme: light; } } @media screen { :root[data-theme="light"] { --surface-0: #FFFFFF; --surface-1: #F6F8FC; --surface-2: #EDF1F8; --surface-3: #E3E9F4; --border: #D7DEEC; --text: #0D1220; --text-dim: #4C586F; --text-faint: #6D7891; --accent: color-mix(in oklab, var(--accent-brand, #3B82F6) 76%, black); --accent-ink: #FFFFFF; --accent-soft: color-mix(in oklab, var(--accent) 9%, white); --accent-line: color-mix(in oklab, var(--accent) 34%, white); --accent-text: color-mix(in oklab, var(--accent) 88%, black); --good: #0F9D6B; --warn: #B45309; --bad: #DC2626; --good-soft: color-mix(in oklab, var(--good) 10%, white); --warn-soft: color-mix(in oklab, var(--warn) 10%, white); --bad-soft: color-mix(in oklab, var(--bad) 10%, white); --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 10px 28px -14px rgb(16 24 40 / 0.28); color-scheme: light; } } /* ── 2. Reset and base ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--surface-0); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5 { margin: 0; line-height: 1.18; font-weight: 640; letter-spacing: -0.017em; } p, ul, ol, dl, figure, pre { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { max-width: 100%; } a { color: var(--accent-text); text-decoration-color: color-mix(in oklab, currentColor 42%, transparent); text-underline-offset: 0.18em; } a:hover { text-decoration-color: currentColor; } code { font-family: var(--mono); font-size: 0.895em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0.08em 0.34em; word-break: break-word; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: color-mix(in oklab, var(--accent) 34%, transparent); } /* ── 3. Utilities ───────────────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--section-y); border-top: 1px solid var(--border); } .section__title { font-size: clamp(1.7rem, 4.4vw, 2.5rem); max-width: 22ch; margin-bottom: 0.7rem; } .section__lead { color: var(--text-dim); font-size: clamp(1rem, 1.9vw, 1.13rem); max-width: 62ch; } .eyebrow { font-size: 0.78rem; font-weight: 660; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.7rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 100; transform: translateY(-200%); background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 620; text-decoration: none; } .skip-link:focus-visible { transform: translateY(0); } .noscript { max-width: var(--wrap-narrow); margin: 4rem auto; padding: 1.2rem var(--gutter); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); } /* Below-the-fold sections are skipped by layout and paint until they are near the viewport. `auto` in contain-intrinsic-size means the browser remembers the real size once measured, so the scrollbar does not jump around on the way back up. */ .defer { content-visibility: auto; contain-intrinsic-size: auto 1000px; } .punchline { margin-top: 2.4rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 560; line-height: 1.42; max-width: 44ch; border-left: 3px solid var(--accent); padding-left: 1.1rem; } .punchline--sm { font-size: clamp(1rem, 1.8vw, 1.1rem); font-weight: 460; color: var(--text-dim); max-width: 68ch; } .footnote { margin-top: 1.2rem; color: var(--text-faint); font-size: 0.9rem; max-width: 72ch; } .aside { margin-top: 2.5rem; padding: 1.3rem 1.5rem; background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); max-width: 68ch; color: var(--text-dim); } .aside__title { font-size: 1.02rem; margin-bottom: 0.4rem; color: var(--text); } .aside--warn { border-left-color: var(--warn); background: var(--warn-soft); } /* ── 4. Buttons, badges, marks ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.72rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn:active { transform: translateY(1px); } .btn--lg { padding: 0.95rem 1.5rem; font-size: 1.03rem; } .btn--sm { padding: 0.5rem 0.85rem; font-size: 0.87rem; } .btn__icon { width: 1.05em; height: 1.05em; flex: none; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: color-mix(in oklab, var(--accent) 84%, white); } .btn--secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn--secondary:hover { background: var(--surface-3); border-color: var(--accent-line); } .btn--ghost { background: transparent; color: var(--text-dim); border-color: var(--border); } .btn--ghost:hover { color: var(--text); border-color: var(--accent-line); } .badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.075em; text-transform: uppercase; padding: 0.24rem 0.55rem; border-radius: 999px; border: 1px solid; margin-bottom: 0.85rem; } .badge--now { color: var(--good); border-color: color-mix(in oklab, var(--good) 45%, transparent); background: var(--good-soft); } .badge--launch { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); } .badge--dev { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); background: var(--warn-soft); } .badge--api { color: var(--text-dim); border-color: var(--border); background: var(--surface-2); } .mark-wrap { display: inline-flex; flex: none; } .mark { width: 1.05rem; height: 1.05rem; flex: none; } .mark--yes { color: var(--good); } .mark--no { color: var(--bad); } .mark--partial { color: var(--warn); } /* ── 5. Header and navigation ───────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--surface-0) 86%, transparent); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4rem; } .wordmark { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text); text-decoration: none; font-weight: 680; letter-spacing: -0.02em; font-size: 1.06rem; flex: none; } .wordmark__mark { width: 1.35rem; height: 1.35rem; color: var(--accent); } .site-nav { margin-inline: auto; } .site-nav__list { display: flex; gap: 0.35rem; } .site-nav__list a { display: block; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); color: var(--text-dim); text-decoration: none; font-size: 0.925rem; font-weight: 520; } .site-nav__list a:hover { color: var(--text); background: var(--surface-2); } .site-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .theme-toggle { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-1); color: var(--text-dim); cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--accent-line); } .theme-toggle__icon { width: 1.05rem; height: 1.05rem; grid-area: 1 / 1; } .theme-toggle[data-theme-state="dark"] .theme-toggle__icon--sun, .theme-toggle[data-theme-state="light"] .theme-toggle__icon--moon { display: none; } .nav-toggle { display: none; width: 2.3rem; height: 2.3rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-1); color: var(--text); cursor: pointer; padding: 0; } .nav-toggle__bars { display: grid; gap: 4px; justify-items: center; } .nav-toggle__bars span { display: block; width: 1rem; height: 2px; background: currentColor; border-radius: 2px; } .site-nav__panel { display: none; } @media (max-width: 59.99rem) { .site-nav { display: none; } .nav-toggle { display: inline-grid; place-items: center; } .site-header__cta { display: none; } .site-nav__panel { display: block; border-top: 1px solid var(--border); background: var(--surface-1); padding: 0.6rem var(--gutter) 1rem; } .site-nav__panel[hidden] { display: none; } .site-nav__panel ul { display: grid; gap: 0.15rem; } .site-nav__panel a { display: block; padding: 0.7rem 0.6rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 560; } .site-nav__panel a:hover { background: var(--surface-2); } /* The header CTA is hidden at this width to keep the bar uncluttered, so it is reinstated inside the panel — otherwise the primary action is unreachable from the mobile menu. */ .site-nav__panel .btn--primary { display: flex; margin-top: 0.7rem; width: 100%; } } /* ── 6. Hero and numbers ────────────────────────────────────────────────────────────── */ .hero { position: relative; padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -40% 20% auto -10%; height: 42rem; background: radial-gradient(50% 50% at 40% 50%, var(--accent-soft), transparent 72%); pointer-events: none; z-index: -1; } .hero__title { font-size: clamp(2.1rem, 6.2vw, 4rem); /* Wide enough that the headline reaches across a desktop viewport rather than stacking into a narrow four-line column with half the hero empty beside it. */ max-width: 21ch; letter-spacing: -0.032em; margin-bottom: 1.1rem; } .hero__sub { font-size: clamp(1.03rem, 2.2vw, 1.24rem); color: var(--text-dim); max-width: 58ch; margin-bottom: 1.9rem; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero__ctanote { margin-top: 0.7rem; font-size: 0.85rem; color: var(--text-faint); } .trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.35rem; margin-top: 2.4rem; font-size: 0.885rem; color: var(--text-dim); } .trust__item { display: inline-flex; align-items: center; gap: 0.5rem; } .trust__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } .stats { border-top: 1px solid var(--border); background: var(--surface-1); padding-block: clamp(2rem, 5vw, 3rem); } /* auto-fit would leave a lone fourth stat stranded on its own row at tablet widths, so the column count is pinned rather than derived. */ .stats__list { display: grid; gap: 1.4rem; grid-template-columns: repeat(4, 1fr); } @media (max-width: 62rem) { .stats__list { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.4rem; } } @media (max-width: 26rem) { .stats__list { grid-template-columns: 1fr; } } .stat__value { font-size: clamp(1.85rem, 4.4vw, 2.5rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.1; color: var(--accent-text); font-variant-numeric: tabular-nums; } .stat__label { font-weight: 620; margin-top: 0.15rem; } .stat__detail { color: var(--text-faint); font-size: 0.85rem; line-height: 1.5; margin-top: 0.3rem; } .stats__note { margin-top: 1.6rem; color: var(--text-faint); font-size: 0.83rem; max-width: 74ch; } /* ── 7. The problem, and its diagram ────────────────────────────────────────────────── */ .problem__points { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2.4rem; } .point, .step { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; } .point__n, .step__n { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); font-size: 0.85rem; font-weight: 700; margin-bottom: 0.9rem; } .point__title, .step__title { font-size: 1.08rem; margin-bottom: 0.45rem; } .point__body, .step__body { color: var(--text-dim); font-size: 0.955rem; } .diagram { margin-top: 2.8rem; } .diagram__svg { display: block; width: 100%; height: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; } .diagram__caption { margin-top: 0.9rem; color: var(--text-faint); font-size: 0.88rem; max-width: 74ch; } .diagram__boundary { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 7 6; } .diagram__boundary-label { fill: var(--text-faint); font-size: 13px; font-family: var(--font); } .diagram__node > rect, .diagram__node > path { fill: var(--surface-2); stroke: var(--accent-line); stroke-width: 1.6; } .diagram__screen { fill: var(--surface-0) !important; stroke: none !important; } .diagram__label { fill: var(--text); font-size: 14px; font-weight: 600; font-family: var(--font); } .diagram__led { fill: var(--good); stroke: none; } .diagram__wave { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; fill: none; } .diagram__zzz { stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .diagram__edge { fill: none; stroke: var(--accent-line); stroke-width: 2; } .diagram__edge--blocked { stroke: var(--bad); stroke-dasharray: 6 7; opacity: 0.65; } .diagram__edge-label { fill: var(--text-dim); font-size: 12.5px; font-family: var(--font); } .diagram__edge-label--lan { fill: var(--accent-text); } .diagram__edge-label--blocked { fill: var(--bad); } .diagram__cross circle { fill: var(--surface-1); stroke: var(--bad); stroke-width: 2; } .diagram__cross path { stroke: var(--bad); stroke-width: 2.4; stroke-linecap: round; } .diagram__packet { fill: var(--accent); } .diagram__packet--lan { fill: var(--good); } /* ── 8. Steps ───────────────────────────────────────────────────────────────────────── */ .steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2.4rem; counter-reset: step; } /* ── 9. Comparison table ────────────────────────────────────────────────────────────── */ .table-hint { display: none; color: var(--text-faint); font-size: 0.85rem; margin-top: 1.6rem; } .table-scroll { margin-top: 1.6rem; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); } .compare { width: 100%; border-collapse: collapse; min-width: 56rem; font-size: 0.9rem; } .compare th, .compare td { text-align: left; vertical-align: top; padding: 0.85rem 0.95rem; border-bottom: 1px solid var(--border); } .compare thead th { border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; } .compare__col-label { display: block; font-weight: 680; } .compare__col-sub { display: block; font-weight: 420; color: var(--text-faint); font-size: 0.8rem; margin-top: 0.15rem; } .compare__col.is-us, .compare td.is-us { background: var(--accent-soft); } .compare__col.is-us .compare__col-label { color: var(--accent-text); } .compare__row-label { position: sticky; left: 0; background: var(--surface-1); min-width: 15rem; max-width: 19rem; border-right: 1px solid var(--border); } .compare__row-title { display: block; font-weight: 620; } .compare__row-detail { display: block; color: var(--text-faint); font-weight: 400; font-size: 0.815rem; margin-top: 0.25rem; line-height: 1.45; } .compare td { min-width: 9.5rem; } .compare td .mark-wrap { display: block; margin-bottom: 0.3rem; } .compare__cell-text { color: var(--text-dim); font-size: 0.855rem; line-height: 1.45; } .compare tr.is-loss th, .compare tr.is-loss td { background: var(--warn-soft); } .compare tr.is-loss .compare__row-label { box-shadow: inset 3px 0 0 var(--warn); } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } @media (max-width: 60rem) { .table-hint { display: block; } } /* ── 10. Build / buy / subscribe ────────────────────────────────────────────────────── */ .paths { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.4rem; } .path-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .path-card__kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.6rem; } .path-card__title { font-size: 1.22rem; margin-bottom: 0.6rem; } .path-card__body { color: var(--text-dim); font-size: 0.95rem; flex: 1; } .path-card__cta { margin-top: 1.2rem; font-weight: 600; font-size: 0.93rem; } /* ── 11. Compatibility checker ──────────────────────────────────────────────────────── */ .section--checker { background: var(--surface-1); } .checker-shell { margin-top: 2rem; } .cc { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.2rem, 3.5vw, 2rem); max-width: 54rem; box-shadow: var(--shadow); } .cc__head { margin-bottom: 1.4rem; } .cc__progress { font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 620; margin-bottom: 0.5rem; } .cc__bar { width: 100%; height: 4px; appearance: none; border: 0; background: var(--surface-3); border-radius: 999px; overflow: hidden; display: block; } .cc__bar::-webkit-progress-bar { background: var(--surface-3); } .cc__bar::-webkit-progress-value { background: var(--accent); transition: width 0.25s ease; } .cc__bar::-moz-progress-bar { background: var(--accent); } /* The card and the result panel are focus landing points, not controls. They are announced because focus moves into a labelled group; drawing a focus ring around a whole panel would read to sighted users as an editable field. Every actual control keeps its indicator. */ .cc__card:focus, .cc__result:focus { outline: none; } .cc__q { font-size: clamp(1.15rem, 2.8vw, 1.5rem); margin-bottom: 0.5rem; } .cc__help { color: var(--text-dim); font-size: 0.93rem; margin-bottom: 1.3rem; max-width: 58ch; } .cc__options { display: grid; gap: 0.6rem; } .cc__option { display: block; width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1.05rem; font: inherit; color: var(--text); cursor: pointer; transition: border-color 0.14s ease, background-color 0.14s ease; } .cc__option:hover { border-color: var(--accent); background: var(--accent-soft); } .cc__option.is-chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .cc__option-label { display: block; font-weight: 580; } .cc__option-note { display: block; color: var(--text-faint); font-size: 0.855rem; margin-top: 0.22rem; line-height: 1.45; } .cc__controls { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem; } .cc__controls button[hidden] { display: none; } .cc__footnote { margin-top: 1.1rem; color: var(--text-faint); font-size: 0.82rem; } .cc__result { --tone: var(--good); } .cc__result[data-tone="warn"] { --tone: var(--warn); } .cc__result[data-tone="blocked"] { --tone: var(--bad); } .cc__badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); border: 1px solid color-mix(in oklab, var(--tone) 45%, transparent); background: color-mix(in oklab, var(--tone) 12%, var(--surface-0)); padding: 0.3rem 0.65rem; border-radius: 999px; margin-bottom: 0.9rem; } .cc__verdict-title { font-size: clamp(1.25rem, 3vw, 1.7rem); margin-bottom: 0.55rem; } .cc__verdict-body { color: var(--text-dim); max-width: 62ch; } .cc__summary { margin-top: 1.8rem; padding: 1.1rem 1.25rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); } .cc__summary-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.7rem; } .cc__answers { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.2rem; font-size: 0.9rem; } .cc__answers dt { color: var(--text-faint); } .cc__answers dd { margin: 0; font-weight: 560; } .cc__checklist { margin-top: 2rem; } .cc__checklist-title { font-size: 1.15rem; margin-bottom: 0.35rem; } .cc__checklist-lead { color: var(--text-dim); font-size: 0.93rem; margin-bottom: 1.3rem; max-width: 60ch; } .cc__tasks { display: grid; gap: 1rem; } .cc__task { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; break-inside: avoid; } .cc__task-head { display: flex; align-items: flex-start; gap: 0.7rem; } .cc__tick { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font-size: 0.78rem; font-weight: 700; } .cc__task-title { font-size: 1.02rem; padding-top: 0.12rem; } .cc__task-why { color: var(--text-faint); font-size: 0.875rem; margin: 0.6rem 0 0 2.3rem; max-width: 62ch; } .cc__steps { margin: 0.85rem 0 0 2.3rem; padding-left: 1.1rem; list-style: decimal; display: grid; gap: 0.45rem; } .cc__steps li { color: var(--text-dim); font-size: 0.92rem; padding-left: 0.2rem; } .cc__steps li::marker { color: var(--text-faint); font-variant-numeric: tabular-nums; } .cc__printonly { display: none; } @media (max-width: 34rem) { .cc__task-why, .cc__steps { margin-left: 0; } } /* Two columns squeeze the answer values into three-word-per-line ribbons on a phone. */ @media (max-width: 30rem) { .cc__answers { grid-template-columns: 1fr; gap: 0; } .cc__answers dt { margin-top: 0.55rem; } .cc__answers dt:first-child { margin-top: 0; } } /* ── 12. Kit ────────────────────────────────────────────────────────────────────────── */ .kit { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 2.4rem; align-items: start; } @media (max-width: 52rem) { .kit { grid-template-columns: 1fr; } } .kit-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); } .kit-card__name { font-size: 1.3rem; } .kit-card__price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.45rem; } .kit-card__amount { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; color: var(--accent-text); } .kit-card__pricenote { color: var(--text-faint); font-size: 0.85rem; } .kit-card__includes { display: grid; gap: 0.55rem; margin-top: 1.4rem; } .kit-card__includes li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.94rem; } .kit-card__includes .mark { margin-top: 0.22rem; } .kit-card__notincluded { margin-top: 1.1rem; color: var(--text-faint); font-size: 0.87rem; } .kit-card__action { margin-top: 1.5rem; } .kit-card__soon { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; background: var(--surface-2); } .kit-card__soon-title { font-weight: 660; margin-bottom: 0.3rem; } .kit-card__soon-body { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.1rem; } .kit-card__build { display: inline-block; margin-top: 1.1rem; font-size: 0.9rem; } .kit-specs { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.6rem; } .kit-specs__title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.9rem; } .kit-specs__list { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.1rem; font-size: 0.89rem; } .kit-specs__list dt { color: var(--text-faint); } .kit-specs__list dd { margin: 0; } /* ── 13. Ecosystem ──────────────────────────────────────────────────────────────────── */ .eco { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.4rem; } .eco-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; } .eco-card__title { font-size: 1.1rem; margin-bottom: 0.5rem; } .eco-card__body { color: var(--text-dim); font-size: 0.94rem; } .eco-card__detail { color: var(--text-faint); font-size: 0.85rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); } /* ── 14. Pricing ────────────────────────────────────────────────────────────────────── */ .tiers { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); margin-top: 2.6rem; align-items: start; } .tier { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; } .tier.is-featured { border-color: var(--accent); box-shadow: var(--shadow); } .tier__ribbon { position: absolute; top: -0.75rem; right: 1.2rem; background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: 999px; } .tier__name { font-size: 1.15rem; } .tier__price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.5rem; } .tier__amount { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; } .tier__period { color: var(--text-faint); font-size: 0.85rem; } .tier__tagline { color: var(--text-dim); font-size: 0.92rem; margin-top: 0.5rem; } .tier__launch { margin-top: 0.9rem; padding: 0.6rem 0.8rem; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--accent-text); } .tier__features { display: grid; gap: 0.5rem; margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--border); } .tier__features li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; } .tier__features .mark { margin-top: 0.2rem; } .tier__features li.is-off { color: var(--text-faint); text-decoration: line-through; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); } .tier__cta { margin-top: 1.4rem; font-size: 0.85rem; color: var(--text-faint); font-weight: 560; } /* ── 15. Open source ────────────────────────────────────────────────────────────────── */ .section--oss { background: var(--surface-1); } .oss__licence { margin-top: 1.4rem; font-size: 1.02rem; max-width: 62ch; } .oss__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; } .stars { margin-left: 0.15rem; padding-left: 0.6rem; border-left: 1px solid var(--border); color: var(--text-faint); font-weight: 520; font-size: 0.87rem; } .oss__cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2.2rem; } .oss-card { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; } .oss-card__title { font-family: var(--mono); font-size: 0.95rem; color: var(--accent-text); margin-bottom: 0.45rem; } .oss-card__body { color: var(--text-dim); font-size: 0.89rem; } .oss-card__licence { display: inline-block; margin-top: 0.8rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.5rem; } .selfhost { margin-top: 2.6rem; max-width: 46rem; } .selfhost__title { font-size: 1.2rem; margin-bottom: 0.5rem; } .selfhost p { color: var(--text-dim); font-size: 0.95rem; } .code-block { position: relative; margin-top: 1.1rem; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-sm); } .code-block pre { margin: 0; padding: 1.05rem 1.2rem; overflow-x: auto; } .code-block code { background: none; border: 0; padding: 0; font-size: 0.875rem; line-height: 1.75; color: var(--text); white-space: pre; } .code-block__copy { position: absolute; top: 0.55rem; right: 0.55rem; background: var(--surface-2); } /* ── 16. FAQ, final CTA, footer ─────────────────────────────────────────────────────── */ /* The section sits in a full-width wrap so its heading lines up with every other section; the measure is constrained here instead. */ .faq { margin-top: 2.2rem; border-top: 1px solid var(--border); max-width: var(--wrap-narrow); } .faq__item { border-bottom: 1px solid var(--border); } .faq__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.05rem 0.2rem; cursor: pointer; list-style: none; } .faq__summary::-webkit-details-marker { display: none; } .faq__q { font-size: 1.02rem; font-weight: 600; } .faq__chevron { width: 1.1rem; height: 1.1rem; flex: none; color: var(--text-faint); margin-top: 0.25rem; transition: transform 0.18s ease; } .faq__item[open] .faq__chevron { transform: rotate(180deg); } .faq__item[open] .faq__q { color: var(--accent-text); } .faq__a { padding: 0 0.2rem 1.3rem; color: var(--text-dim); max-width: 68ch; } .final-cta { padding-block: var(--section-y); border-top: 1px solid var(--border); background: var(--surface-1); text-align: center; } .final-cta__title { font-size: clamp(1.6rem, 4.2vw, 2.3rem); margin-bottom: 0.8rem; } .final-cta p { color: var(--text-dim); max-width: 54ch; margin-inline: auto; } .final-cta .hero__ctas { justify-content: center; margin-top: 1.8rem; } .site-footer { border-top: 1px solid var(--border); padding-block: 3rem 2.2rem; font-size: 0.9rem; } .site-footer__top { display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); } @media (max-width: 52rem) { .site-footer__top { grid-template-columns: 1fr; gap: 2rem; } } .wordmark--footer { font-size: 1rem; } .site-footer__tagline { color: var(--text-faint); margin-top: 0.7rem; max-width: 34ch; } .site-footer__nav { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } .site-footer__grouptitle { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.7rem; font-weight: 680; } .site-footer__group ul { display: grid; gap: 0.4rem; } .site-footer__group a { color: var(--text-dim); text-decoration: none; } .site-footer__group a:hover { color: var(--text); text-decoration: underline; } .site-footer__caveat { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.82rem; line-height: 1.6; max-width: 82ch; } .site-footer__legal { margin-top: 0.9rem; color: var(--text-faint); font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; } /* ── 17. Print ──────────────────────────────────────────────────────────────────────── */ /* Printing is a real path here: the compatibility checklist is meant to be carried to the machine being fixed, which is by definition not the machine showing this page. Everything except the result panel is removed. */ @media print { :root { --surface-0: #fff; --surface-1: #fff; --surface-2: #fff; --surface-3: #fff; --border: #bbb; --text: #000; --text-dim: #222; --text-faint: #444; --accent: #1a4fb4; --accent-text: #1a4fb4; --accent-soft: #fff; --accent-line: #999; } body { background: #fff; color: #000; font-size: 11pt; } .site-header, .site-footer, .hero, .stats, .section, .final-cta, .noscript, .skip-link { display: none !important; } .section--checker { display: block !important; padding: 0; border: 0; background: #fff; } .section--checker .eyebrow, .section--checker .section__title, .section--checker .section__lead { display: none; } .cc { border: 0; box-shadow: none; padding: 0; max-width: none; } .cc__controls, .cc__footnote, .cc__head { display: none !important; } .cc__printonly { display: block; font-size: 9pt; color: #555; margin-bottom: 0.6rem; } .cc__badge { border-color: #666; color: #000; } .cc__task, .cc__summary { border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; } .cc__task-title { font-size: 11pt; } a { color: #000; text-decoration: underline; } } /* ── 18. Reduced motion ─────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* SVG SMIL is not covered by the rule above; the clock is also paused from js/main.js, and hiding the packets means a paused animation never shows a dot frozen mid-flight. */ .diagram__packet { display: none; } .faq__chevron { transition: none; } }