/* ========================================================================== site.css — the shell (header, hero, footer) and the home page. ========================================================================== */ /* ========================================================================== Header ========================================================================== */ .header { position: sticky; top: 0; z-index: 60; padding-block: 12px; /* `clip` and not `hidden`: hidden creates a scroll container, which silently breaks position:sticky on this element. */ overflow: clip; } .header-inner { display: flex; align-items: center; gap: 22px; height: 58px; padding: 0 10px 0 18px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--plate-2) 78%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--lift-1); transition: background .25s var(--ease), box-shadow .25s var(--ease); min-width: 0; } .header.scrolled .header-inner { background: color-mix(in srgb, var(--plate-2) 93%, transparent); box-shadow: var(--lift-2); } .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; } .brand-mark { width: 26px; height: 26px; flex: none; } .brand-name { font-family: var(--display); font-size: 1.22rem; font-weight: 500; letter-spacing: .01em; /* The wordmark is set WITHOUT kerning, and the outlined logo in brand/ is generated the same way. With kerning on, the browser applies GPOS pairs the outline does not, and the two renderings of the same five letters differ by 4px in 347 — small, and a logo that does not match its own site is a logo with a bug in it. For a five-letter all-caps wordmark this is a normal typographic choice as well as a reproducible one. */ font-kerning: none; font-variant-ligatures: none; } .nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; min-width: 0; } .nav a { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); padding: 8px 11px; border-radius: 9px; transition: color .18s var(--ease), background .18s var(--ease); } .nav a:hover { color: var(--ink); background: var(--ground); } /* Derived at runtime from , never hardcoded — that is what lets validate.mjs compare the header block byte for byte across nine documents. */ .nav a[aria-current='page'] { color: var(--accent); background: var(--accent-wash); } .header-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; } .icon-link { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); color: var(--ink-3); transition: color .18s var(--ease), background .18s var(--ease); } .icon-link:hover { color: var(--ink); background: var(--ground); } .icon-link svg { width: 17px; height: 17px; fill: currentColor; } .burger { display: none; width: 38px; height: 38px; border-radius: 10px; margin-left: auto; place-items: center; } .burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; } .burger span + span { margin-top: 5px; } .sheet { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--ground); padding: 18px var(--gutter) 32px; overflow-y: auto; } .sheet-top { display: flex; align-items: center; justify-content: space-between; height: 58px; } .sheet-close { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; } .sheet-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; } .sheet nav { display: flex; flex-direction: column; margin-top: 18px; } .sheet nav a { font-family: var(--display); font-size: 1.55rem; padding: 13px 0; border-bottom: 1px solid var(--rule-2); } .sheet nav a[aria-current='page'] { color: var(--accent); } .sheet-foot { margin-top: auto; padding-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .sheet-social { display: flex; gap: 4px; } @media (max-width: 1000px) { .js .nav { display: none; } /* NOT .js-scoped. Without JavaScript the nav stays (below) and has to fit; leaving the 159px CTA in the row squeezed it. The burger is the only rule that needs the scope, because it is the only one whose absence would leave a control that does nothing. */ .header-cta { display: none; } .js .burger { display: grid; } /* Without JS the real nav stays and simply scrolls — a burger whose only opener is a click handler is a visible control that does nothing, and with the nav also display:none it leaves no route to any inner page at all. Both rules are scoped to `.js` for that reason. */ .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } } @media (max-width: 560px) { .header-inner { gap: 12px; padding-left: 14px; } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding-block: clamp(30px, 5vw, 56px) clamp(48px, 7vw, 92px); } .hero-field { position: absolute; /* Runs UP behind the sticky header — the pill is translucent and a hard edge under it reads as a seam. 82px is the header's 58px pill plus its 12px block padding, doubled. */ inset: -82px 0 0 0; z-index: 0; overflow: clip; border-radius: 0; /* Without JS this is what the hero is: a still gradient in the same palette, so the section is never an empty box. The canvas draws over it once the lookup resolves. */ background: radial-gradient(120% 90% at 18% 12%, var(--rose-wash) 0%, transparent 55%), radial-gradient(110% 80% at 82% 8%, var(--indigo-wash) 0%, transparent 52%), radial-gradient(120% 95% at 55% 96%, var(--teal-wash) 0%, transparent 58%), var(--ground); } .hero-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* The wash that makes text over the shell legible. Measured, not guessed: the darkest tablet the sweep produces clears 9.0:1 against --ink before this is applied at all. */ .hero-field::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ground) 30%, transparent) 0%, color-mix(in srgb, var(--ground) 12%, transparent) 42%, color-mix(in srgb, var(--ground) 72%, transparent) 100%); } .hero-inner { position: relative; z-index: 1; text-align: center; padding-block: clamp(40px, 6vw, 76px); } .hero-glass { max-width: 830px; margin-inline: auto; padding: clamp(30px, 4vw, 48px) clamp(22px, 4vw, 52px) clamp(26px, 3vw, 38px); border-radius: var(--r-lg); background: color-mix(in srgb, var(--plate-2) 58%, transparent); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); box-shadow: var(--lift-2); } .hero-title { font-family: var(--display); font-size: var(--t-hero); font-weight: 300; letter-spacing: -0.03em; line-height: .96; margin-block: 20px 4px; } .hero-tag { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--ink-2); margin-bottom: 18px; } .hero-sub { font-size: var(--t-lead); color: var(--ink-2); max-width: 58ch; margin-inline: auto; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } .hero-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } /* The readout. It exists because the canvas is a claim: it says the colour is computed from a thickness, and this prints the thickness. It also carries the pause control — prefers-reduced-motion is a system setting, not a control on this page (WCAG 2.2.2). */ .readout { position: relative; z-index: 1; margin: 22px auto 0; max-width: 1000px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); } .readout b { color: var(--ink); font-weight: 500; } .readout .sep { width: 1px; height: 12px; background: var(--rule); } .readout button { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-2); padding: 4px 10px; border-radius: var(--r-pill); background: var(--plate-2); box-shadow: var(--lift-1); } .readout button:hover { color: var(--accent); } /* ========================================================================== Section heads ========================================================================== */ .sec-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 48px); } .sec-head.center { margin-inline: auto; text-align: center; } .sec-head.center .lead { margin-inline: auto; } .sec-head h2 { font-family: var(--display); font-size: var(--t-h2); font-weight: 300; letter-spacing: -0.022em; margin-block: 14px 16px; } .sec-head h2 em { color: var(--accent); font-style: italic; } /* ========================================================================== Home page components ========================================================================== */ /* --- the strip under the hero ---------------------------------------- */ .strip { border-block: 1px solid var(--rule-2); background: var(--plate); } .strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-block: 18px; font-size: var(--t-small); color: var(--ink-2); } .strip-inner b { color: var(--ink); font-weight: 600; } .strip-inner > span { display: inline-flex; align-items: center; gap: .45em; } /* --- before / after --------------------------------------------------- */ .ba { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 780px) { .ba { grid-template-columns: minmax(0, 1fr); } } .ba .tablet h3 { font-family: var(--display); font-size: var(--t-h3); margin-block: 10px 18px; } .ba-tag { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .ba-list { display: grid; gap: 11px; } /* This one may stay a grid: its markup is exactly , two element children and no bare text, so there are no anonymous items to split. The renderer wraps the text in that span for this reason. */ .ba-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; align-items: start; font-size: var(--t-small); color: var(--ink-2); } .ba-list svg { width: 15px; height: 15px; margin-top: 4px; flex: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ba-list .no { stroke: var(--rose); } .ba-list .yes { stroke: var(--teal); } /* --- rails ------------------------------------------------------------ */ .rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .rail-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--edge-wash, var(--accent-wash)); color: var(--edge, var(--accent)); } .rail-ic svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .rail h3 { font-family: var(--display); font-size: var(--t-h3); margin-block: 4px 10px; } .rail p { font-size: var(--t-small); color: var(--ink-2); } .rail ul { margin-top: 16px; display: grid; gap: 8px; border-top: 1px solid var(--rule-2); padding-top: 14px; } .rail li { font-size: var(--t-small); color: var(--ink-2); position: relative; padding-left: 22px; min-width: 0; } .rail li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--edge, var(--accent)); } .edges > .rail:nth-child(5n + 1) { --edge-wash: var(--rose-wash); } .edges > .rail:nth-child(5n + 2) { --edge-wash: var(--violet-wash); } .edges > .rail:nth-child(5n + 3) { --edge-wash: var(--indigo-wash); } .edges > .rail:nth-child(5n + 4) { --edge-wash: var(--blue-wash); } .edges > .rail:nth-child(5n + 5) { --edge-wash: var(--teal-wash); } /* --- the lifecycle ---------------------------------------------------- */ .flow { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .flow { grid-template-columns: minmax(0, 1fr); } } .flow-step { position: relative; } .flow-n { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; color: var(--edge, var(--accent)); } .flow-step b { display: block; font-family: var(--display); font-size: 1.22rem; font-weight: 500; margin-block: 8px 8px; } .flow-step p { font-size: var(--t-small); color: var(--ink-2); } /* --- figures ---------------------------------------------------------- */ .figure { margin-block: 26px; } .figure svg { width: 100%; height: auto; } .figure figcaption { margin-top: 12px; font-size: var(--t-micro); color: var(--faint); font-family: var(--mono); line-height: 1.55; } /* --- stats ------------------------------------------------------------ */ .stat b { display: block; font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 300; letter-spacing: -0.02em; color: var(--edge, var(--accent)); } .stat span { display: block; font-size: var(--t-small); color: var(--ink-2); margin-top: 6px; } /* --- FAQ -------------------------------------------------------------- */ .faq { display: grid; gap: 10px; max-width: 840px; } .faq details { background: var(--plate-2); border-radius: var(--r-sm); box-shadow: var(--lift-1); overflow: clip; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; cursor: pointer; font-weight: 600; font-size: 0.97rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .22s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .faq details > div { padding: 0 20px 19px; } .faq p { font-size: var(--t-small); color: var(--ink-2); } .faq p + p { margin-top: 10px; } /* --- CTA -------------------------------------------------------------- */ .cta { text-align: center; padding: clamp(40px, 6vw, 68px) var(--gutter); border-radius: var(--r-lg); background: var(--plate-2); box-shadow: var(--lift-2); position: relative; overflow: clip; } .cta::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--rose), var(--violet), var(--indigo), var(--blue), var(--teal)); opacity: .8; } .cta h2 { font-family: var(--display); font-size: var(--t-h2); font-weight: 300; letter-spacing: -.022em; } .cta p { margin-block: 14px 26px; color: var(--ink-2); max-width: 52ch; margin-inline: auto; } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--deep); color: var(--ink-2-on-deep); padding-block: clamp(48px, 6vw, 72px) 28px; margin-top: clamp(56px, 7vw, 96px); } .footer a { color: var(--ink-2-on-deep); } .footer a:hover { color: var(--ink-on-deep); } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 34px 24px; } @media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } } .foot-brand .brand-name { color: var(--ink-on-deep); } .foot-brand p { font-size: var(--t-small); margin-top: 14px; max-width: 42ch; color: var(--ink-2-on-deep); } /* h2, not h4. A footer

under an

skips two levels, and a sibling shipped exactly that past a validator whose own regex only matched h1-h4 — the check could not fail. / .foot-col .foot-h { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--faint-on-deep); margin-bottom: 12px; } .foot-col a { display: block; font-size: var(--t-small); padding-block: 5px; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule-deep); font-size: var(--t-micro); color: var(--faint-on-deep); } .foot-social { display: flex; gap: 6px; margin-top: 18px; } .foot-social .icon-link { color: var(--ink-2-on-deep); } .foot-social .icon-link:hover { color: var(--ink-on-deep); background: color-mix(in srgb, var(--plate-2) 7%, transparent); } / The palette strip. Five swatches in thickness order, and the two ends are deliberately similar — see /umbo. */ .foot-spectrum { display: flex; gap: 3px; margin-top: 20px; } .foot-spectrum span { height: 3px; flex: 1; border-radius: 2px; }