/* =========================================================================== Global — reset, base typography, layout primitives, shared utilities. Anything that is a *component* lives in components.css. =========================================================================== */ /* ------------------------------------------------------------------ reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* an anchored section must clear the fixed header */ scroll-padding-top: calc(var(--header-h) + 24px); } body { min-height: 100dvh; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* nothing on this site may scroll the page sideways */ overflow-x: clip; /* colour changes are animated on only, so a theme switch is one smooth transition rather than several hundred competing ones */ transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } /* Locked while the mobile drawer or a modal is open. */ body.is-locked { overflow: hidden; } img, picture, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } hr { border: 0; border-top: 1px solid var(--border-color); } ::selection { background: var(--brand-teal); color: var(--brand-ink); } /* --------------------------------------------------------------- headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-primary); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { text-wrap: pretty; } strong, b { font-weight: var(--fw-semibold); color: var(--text-primary); } /* ----------------------------------------------------------------- focus */ /* Keyboard-only. A single ring definition so focus looks the same everywhere. */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-xs); } .skip-link { position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: var(--z-modal); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-pill); background: var(--color-primary-fill); color: var(--text-on-brand); font-weight: var(--fw-semibold); font-size: var(--fs-sm); transform: translateY(-200%); transition: transform var(--dur) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* ------------------------------------------------------------ layout ---- */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); } /* --band-bg is the opaque colour a section actually paints. Anything that has to punch a hole through a line — the numbered markers on the steps rail — needs a solid backdrop, and --bg-brand-subtle is translucent on the dark theme (11% alpha), so tinting alone let the rail show straight through. */ .section { position: relative; padding-block: var(--section-py); --band-bg: var(--bg-page); } .section--lg { padding-block: var(--section-py-lg); } .section--tight { padding-block: clamp(1.75rem, 3vw, 2.75rem); } /* A full-bleed strip, not a band of content — it needs far less air around it than a section of copy, and the marquee inside carries its own padding. The air is its own rather than borrowed from either neighbour. Sharing it was what left the strip sitting low in the gap: the section above ends in page-coloured padding, which reads as space around the strip, while the one below starts its band colour at its own edge — so the same negative margin top and bottom gave ~80px of visible gap above the chips and ~9px below. Cancelling the upper neighbour's padding and paying for both sides here centres it. */ .section--band { padding-block: clamp(1.75rem, 3vw, 2.75rem); margin-top: calc(var(--section-py) * -1); margin-bottom: 0; } /* Alternating band colours give the long home page a rhythm without needing a border between every section. */ .section--alt { background: var(--bg-page-alt); --band-bg: var(--bg-page-alt); } .section--light { --bg-page: #ffffff; --bg-page-alt: #f4f8f7; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-sunken: #eef6f4; --bg-brand-subtle: #e6f7f3; --text-primary: #06201c; --text-secondary: #3f5c57; --text-muted: #607a76; --color-primary: var(--brand-teal-deep); --color-primary-fill: var(--brand-teal); --color-accent-text: var(--brand-gold-deep); --border-color: #dce9e6; --border-strong: #bfd2ce; --border-brand: rgba(10, 178, 151, 0.34); --shadow-sm: 0 1px 2px rgba(6, 32, 28, 0.06), 0 2px 8px rgba(6, 32, 28, 0.05); --shadow-md: 0 10px 32px -18px rgba(6, 32, 28, 0.2); background: #ffffff; --band-bg: #ffffff; color: var(--text-primary); } .section--soft { --bg-page: #f4f8f7; --bg-page-alt: #eaf2f0; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-sunken: #e6efed; --bg-brand-subtle: #e2f4ef; --text-primary: #06201c; --text-secondary: #3f5c57; --text-muted: #567370; --color-primary: var(--brand-teal-deep); --color-primary-fill: var(--brand-teal); --color-accent-text: var(--brand-gold-deep); --border-color: #d5e3e0; --border-strong: #b6ccc7; --border-brand: rgba(10, 178, 151, 0.32); --shadow-sm: 0 1px 2px rgba(6, 32, 28, 0.06), 0 2px 6px rgba(6, 32, 28, 0.04); --shadow-md: 0 4px 10px rgba(6, 32, 28, 0.06), 0 14px 32px -12px rgba(6, 32, 28, 0.14); --shadow-lg: 0 8px 20px rgba(6, 32, 28, 0.07), 0 32px 64px -24px rgba(6, 32, 28, 0.2); --dot-color: rgba(10, 178, 151, 0.22); --dot-color-faint: rgba(6, 32, 28, 0.07); background: #f4f8f7; --band-bg: #f4f8f7; color: var(--text-primary); } /* Two bands of the same colour in a row read as one block, so the seam between them doesn't need a full pad from both sides — one section's worth is the whole gap. */ .section--alt + .section--alt { padding-top: 0; } .section--sunken { background: var(--bg-sunken); --band-bg: var(--bg-sunken); } /* A dark band that stays dark in BOTH themes — used for the app showcase and the closing CTA so the page has an anchor. Everything inside it reads light, so the semantic tokens are re-pointed for the subtree. */ .section--ink { --bg-surface: rgba(255, 255, 255, 0.045); --bg-elevated: rgba(255, 255, 255, 0.075); --text-primary: #eaf5f2; --text-secondary: #a9c3be; --text-muted: #7b958f; --border-color: rgba(150, 220, 208, 0.16); --border-strong: rgba(150, 220, 208, 0.3); --color-primary: var(--brand-teal-bright); --color-accent-text: var(--brand-gold); --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(150, 220, 208, 0.18); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.85); --lineart-filter: invert(74%) sepia(46%) saturate(480%) hue-rotate(122deg) brightness(95%) contrast(90%); --lineart-opacity: 0.28; background: var(--brand-ink); --band-bg: var(--brand-ink); color: #eaf5f2; isolation: isolate; } /* ------------------------------------------------------- section headings */ .section-head { max-width: 760px; margin-bottom: clamp(1.75rem, 3vw, 3rem); } .section-head--center { margin-inline: auto; text-align: center; } /* For a title long enough that the 760px measure breaks it into two short lines. From the desktop layout up the head runs to the container width so the title sets on one line; the lead below keeps its own measure, so only the heading gets the extra room. */ @media (min-width: 1025px) { .section-head--wide { max-width: none; } .section-head--wide .section-lead { max-width: min(62ch, 760px); } } .section-title { font-size: var(--fs-h2); margin-top: var(--sp-4); } /* A section title used one level down — inside a tab panel or a split. */ .section-title--sm { font-size: var(--fs-h3); } /* The standard button row. Used by the hero, tab panels and page heroes, so the gap and wrap behaviour are defined once. */ .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); } /* Small print under a figure, a stat or an illustrative mock. */ .note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); } /* Standalone uppercase label above a logo strip or a bare list. */ .label-line { margin-bottom: var(--sp-8); font-size: clamp(0.9375rem, 1.1vw, 1.125rem); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); text-align: center; } .section-lead { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--text-secondary); max-width: 62ch; line-height: var(--lh-body); } .section-head--center .section-lead { margin-inline: auto; } /* Eyebrow — small caps label above a heading. The leading dot echoes the logo's dot vocabulary. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-primary); } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); flex: none; } .section-head--center .eyebrow { justify-content: center; } /* ----------------------------------------------------------- type helpers */ .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; /* a clipped gradient loses the descender antialiasing otherwise */ padding-bottom: 0.08em; } .text-accent { color: var(--color-accent-text); } .text-primary-brand { color: var(--color-primary); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .lead { font-size: var(--fs-lead); color: var(--text-secondary); line-height: var(--lh-body); } .prose { max-width: var(--container-text); } .prose p + p { margin-top: var(--sp-5); } .prose h2 { margin-top: var(--sp-12); margin-bottom: var(--sp-4); font-size: var(--fs-h3); } .prose h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); font-size: var(--fs-h4); } .prose ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); } .prose li { position: relative; padding-left: var(--sp-6); color: var(--text-secondary); } .prose li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary-fill); } .prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ------------------------------------------------------------- utilities */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .stack { display: grid; gap: var(--sp-4); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .center { text-align: center; } .no-select { user-select: none; -webkit-user-select: none; } /* ------------------------------------------------- decorative backgrounds */ /* Dot matrix. The logo is a lattice of dots, so the page texture is the same lattice at low contrast — masked to fade out rather than stop hard. */ .dot-field { position: absolute; inset: 0; z-index: var(--z-behind); pointer-events: none; background-image: radial-gradient(var(--dot-color-faint) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 25%, transparent 75%); } /* Soft ambient colour wash. Two blurred blobs, no filter — a large radial-gradient is far cheaper to composite than blur(). */ .ambient { position: absolute; inset: 0; z-index: var(--z-behind); pointer-events: none; overflow: hidden; } .ambient::before, .ambient::after { content: ''; position: absolute; border-radius: 50%; } .ambient::before { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; top: -22%; left: -12%; background: radial-gradient(circle, var(--glow-a) 0%, transparent 68%); } .ambient::after { width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; right: -14%; bottom: -26%; background: radial-gradient(circle, var(--glow-b) 0%, transparent 68%); } /* Hairline rule that fades at both ends — used between major bands. */ .rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-color) 18%, var(--border-color) 82%, transparent); } /* Line-art illustrations (skyline, arcs, container) are black-on-transparent exports; this tints them to the current theme. */ .lineart { filter: var(--lineart-filter); opacity: var(--lineart-opacity); transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out); }