@charset "utf-8"; /* ============================================================================ Product microsites ---------------------------------------------------------------------------- One stylesheet, forty-three sites. Nothing here names a project: the whole identity arrives as custom properties set on at build time, derived in src/microsite-brand.mjs. That is what lets a site be genuinely its own colour — a hue from its discipline's band, with a ramp built in OKLCH so the steps are perceptually even — without forty-three stylesheets. The layout language is editorial rather than SaaS: hairlines instead of cards, one serif reserved for statements, a mono reserved for labels and figures, and large quiet fields. Sections alternate between the dark ground and paper so a long page has a rhythm you can feel while scrolling. Structure 1 tokens and reset 2 typography 3 furniture: header, footer, buttons, links 4 splash sections 5 interior pages: page head, prose, documents 6 gallery and the animated demos 7 responsive 8 reduced motion and print Palette properties, all set inline per site: --accent --accent-deep --accent-soft --accent-wash --on-accent --counter --counter-deep --bg --raise --sink --line --line-soft --dim --text --paper --paper-deep --paper-ink --paper-dim --paper-line ========================================================================== */ /* ── 1. Tokens and reset ─────────────────────────────────────────────────── */ :root { --ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --serif: Newsreader, ui-serif, Georgia, "Times New Roman", serif; --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 7rem; --s8: 10rem; /* Page gutter and content measure. Everything lines up to these two. */ --gutter: clamp(1.25rem, 5vw, 5rem); --measure: 78rem; --radius: 3px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* The scroll target must clear the sticky header. */ scroll-padding-top: 6rem; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ui); font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } /* ── 2. Typography ───────────────────────────────────────────────────────── */ :where(h1, h2, h3, h4, p, li, dd, dt) { text-wrap: pretty; margin: 0; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; } /* The one serif on the site. Reserved for statements — the sentence a section exists to make — so that it always means "read this one slowly". */ .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.028em; line-height: 1.08; } .kicker { margin: 0; color: var(--accent); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; line-height: 1.5; text-transform: uppercase; } .eyebrow { margin: 0; color: var(--dim); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; } .lead { color: var(--dim); font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.65; } code { padding: 0.1em 0.35em; border-radius: 2px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-soft); font-family: var(--mono); font-size: 0.86em; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .skip { position: fixed; z-index: 50; top: -6rem; left: 1rem; padding: 0.85rem 1.15rem; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 700; transition: top 0.2s var(--ease); } .skip:focus { top: 1rem; } .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } /* ── 3. Furniture ────────────────────────────────────────────────────────── */ .masthead { position: sticky; z-index: 30; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .masthead__inner { display: flex; align-items: center; gap: var(--s3); min-height: 4.5rem; } /* The product's own wordmark. A site is standalone or it is not; this is the first thing that decides which. */ .wordmark { display: inline-flex; align-items: center; gap: 0.7rem; margin-right: auto; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.05em; } .wordmark__mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 2px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.04em; } .sitenav { display: flex; align-items: center; gap: var(--s3); } .sitenav a { display: grid; align-items: center; min-height: 44px; color: var(--dim); font-size: 0.9rem; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.18s var(--ease), border-color 0.18s var(--ease); } .sitenav a:hover { color: var(--text); } .sitenav a[aria-current] { color: var(--text); border-bottom-color: var(--accent); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 44px; padding: 0.8rem 1.15rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 0.9rem; font-weight: 700; transition: transform 0.16s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--accent) 40%, transparent); } .btn:active { transform: translateY(0); box-shadow: none; } .btn--ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn--ghost:hover { border-color: var(--accent); box-shadow: none; } .btn--on-paper { background: var(--paper-ink); color: var(--paper); } /* A text link that shows its underline as a rule in the accent, so it reads as a link at a glance without borrowing the button's weight. */ .tlink { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.9rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease); } .tlink:hover { color: var(--accent); text-decoration-color: currentColor; } .tlink__arrow { transition: transform 0.18s var(--ease); } .tlink:hover .tlink__arrow { transform: translateX(3px); } .colophon { padding-block: var(--s6) var(--s4); border-top: 1px solid var(--line-soft); } .colophon__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s4); } .colophon h2 { margin-bottom: var(--s2); font-size: 0.68rem; font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); } .colophon ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .colophon li a { display: inline-grid; align-items: center; min-height: 34px; font-size: 0.92rem; color: var(--text); transition: color 0.18s var(--ease); } .colophon li a:hover { color: var(--accent); } .colophon__blurb { max-width: 24rem; color: var(--dim); font-size: 0.92rem; line-height: 1.65; } /* The one place the holding company appears above the fold of the footer: a line of provenance, not a co-brand. */ .colophon__base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line-soft); color: var(--dim); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .colophon__base a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.3em; } .colophon__base a:hover { color: var(--text); text-decoration-color: var(--accent); } .colophon__base .spacer { margin-left: auto; } /* ── 4. Splash ───────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line-soft); } /* A very large, very quiet field of the accent behind the headline. It is the only gradient on the site and it exists so the top of the page is coloured rather than dark-grey-with-a-button. */ .hero::before { position: absolute; z-index: 0; inset: -40% 30% 20% -20%; background: radial-gradient( closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent ); content: ""; pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; gap: clamp(2rem, 5vw, 4.5rem); } .hero h1 { margin: var(--s3) 0 var(--s3); font-size: clamp(3rem, 8vw, 6.4rem); letter-spacing: -0.062em; line-height: 0.93; } .hero__promise { max-width: 34rem; color: var(--text); font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.32; } .hero__audience { max-width: 32rem; margin-top: var(--s3); color: var(--dim); font-size: 1rem; line-height: 1.65; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); } .hero__stage { position: relative; /* Hug the illustration rather than stretch to the copy column's height: the SVG keeps a fixed ratio, so stretching only letterboxed it inside its own border and read as broken padding. */ align-self: center; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sink); overflow: hidden; } .hero__stage figcaption { padding: 0.7rem var(--s2); border-top: 1px solid var(--line-soft); color: var(--dim); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; } /* The strip of facts directly under the hero. Three columns of hairline-ruled figures — the page's first claim that it is describing something real. */ .proof { border-bottom: 1px solid var(--line-soft); } .proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof__grid > div { padding: var(--s4) var(--s3) var(--s4) 0; border-right: 1px solid var(--line-soft); } .proof__grid > div:last-child { border-right: 0; } .proof__grid > div + div { padding-left: var(--s3); } .proof dt { color: var(--accent); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; } .proof dd { margin: 0.65rem 0 0; font-size: clamp(1rem, 1.4vw, 1.16rem); font-weight: 500; line-height: 1.45; } /* The paper section. Every microsite inverts exactly twice — once for the statement, once for the specification — so the page has a spine. */ .paper { background: var(--paper); color: var(--paper-ink); } .paper .eyebrow, .paper .lead { color: var(--paper-dim); } .paper .kicker { color: var(--accent-deep); } .paper .tlink { text-decoration-color: var(--accent-deep); } .paper .tlink:hover { color: var(--accent-deep); } .section { padding-block: clamp(4rem, 9vw, 8.5rem); } .section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); } /* Section headings run flush left, above their content. * * They used to sit in the right-hand column of a 0.42fr/1fr grid, with the * label alone on the left — which put every heading at 42% of the page width * while the list beneath it started at the gutter. On a screenshot that does * not read as an editorial two-column head; it reads as text that has been * centred by accident. Flush left, everything shares one edge. */ .section__head { display: grid; gap: var(--s2); margin-bottom: var(--s5); } .section__head h2 { max-width: 20ch; font-size: clamp(2rem, 4vw, 3.4rem); } .section__head p { max-width: 42rem; } /* Two sections on the same ground would otherwise stack their vertical padding and leave up to seventeen rems of nothing between them. A change of ground keeps both, because that gap is the edge. */ .section:not(.paper):not(.cta) + .section:not(.paper):not(.cta) { padding-top: 0; } .statement { max-width: 46rem; font-size: clamp(1.9rem, 4.2vw, 3.6rem); } /* The support paragraph under a roadmap's opening statement. Body copy on the dark ground, where .statement + p is coloured for paper. */ .standing__more { max-width: 44rem; margin-top: var(--s4); color: var(--dim); font-size: 1.05rem; line-height: 1.8; } .statement + p { max-width: 40rem; margin-top: var(--s4); color: var(--paper-dim); font-size: 1.05rem; line-height: 1.8; } /* Roadmap themes. The same hairline-ruled row as .features, but the leading column carries a horizon rather than a number: on a roadmap the ordering is the information, and a decimal counter would imply a sequence the themes do not actually promise. */ .track { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .track > li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--s2) var(--s3); align-items: start; padding-block: var(--s4); border-top: 1px solid var(--line-soft); } .track > li:last-child { border-bottom: 1px solid var(--line-soft); } .track__when { margin: 0; padding-top: 0.3rem; color: var(--accent); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.11em; line-height: 1.5; text-transform: uppercase; } .track__what h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.035em; } .track__what p { margin-top: var(--s2); color: var(--dim); font-size: 1rem; line-height: 1.65; } .track__items { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .track__items li { position: relative; padding-left: 1.1rem; color: var(--dim); font-size: 0.94rem; line-height: 1.55; } /* A bullet drawn rather than a list-marker, so it lands on the first line's optical centre at every clamp size instead of the line box's. */ .track__items li::before { content: ''; position: absolute; top: 0.62em; left: 0; width: 5px; height: 1px; background: var(--accent); } /* Below the three-column breakpoint the horizon reads as a label above the theme rather than a gutter beside it. */ @media (max-width: 60rem) { .track > li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } .track__when { padding-top: 0; } } /* Numbered capability statements. Hairline-ruled rows rather than cards — a card grid of four features is the most generic thing a product page can do, and these are the least generic sentences on the site. */ .features { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: feature; } .features li { display: grid; grid-template-columns: 4.5rem minmax(0, 0.85fr) minmax(0, 1.35fr); gap: var(--s2) var(--s3); align-items: start; padding-block: var(--s4); border-top: 1px solid var(--line-soft); counter-increment: feature; } .features li:last-child { border-bottom: 1px solid var(--line-soft); } .features li::before { content: counter(feature, decimal-leading-zero); color: var(--accent); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; padding-top: 0.35rem; } .features h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.035em; } .features p { color: var(--dim); font-size: 1rem; line-height: 1.65; } .paper .features li, .paper .features li:last-child { border-color: var(--paper-line); } .paper .features p { color: var(--paper-dim); } .paper .features li::before { color: var(--accent-deep); } /* How it works. Numbered steps across the page with a rule joining them. */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; counter-reset: stepn; } .steps li { padding-top: var(--s3); border-top: 2px solid var(--accent); counter-increment: stepn; } .steps li:nth-child(n + 2) { border-top-color: var(--line); } .steps h3 { margin-bottom: 0.6rem; font-size: 1.2rem; } .steps h3::before { display: block; margin-bottom: 0.5rem; content: "Step " counter(stepn); color: var(--accent); font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .steps p { color: var(--dim); font-size: 0.97rem; line-height: 1.65; } .paper .steps li { border-top-color: var(--paper-line); } .paper .steps li:first-child { border-top-color: var(--accent-deep); } .paper .steps h3::before { color: var(--accent-deep); } .paper .steps p { color: var(--paper-dim); } /* The specification block: what it is made of, and what state it is in. */ .spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; margin: 0; background: var(--paper-line); border: 1px solid var(--paper-line); } .spec > div { padding: var(--s3); background: var(--paper); } .spec dt { color: var(--paper-dim); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; } .spec dd { margin: 0.9rem 0 0; font-size: 1.28rem; font-weight: 600; letter-spacing: -0.035em; } .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .chips li { padding: 0.45rem 0.7rem; border: 1px solid var(--paper-line); border-radius: 2px; color: var(--paper-ink); font-family: var(--mono); font-size: 0.7rem; } .chips--dark li { border-color: var(--line); color: var(--accent-soft); } /* Language share, as one honest bar rather than a pie. */ .langbar { display: flex; overflow: hidden; height: 8px; margin-top: var(--s3); border-radius: 4px; } .langkey { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s2) 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.68rem; color: var(--paper-dim); } .langkey li { display: flex; align-items: center; gap: 0.45rem; } .langkey i { width: 9px; height: 9px; border-radius: 2px; } /* The closing call to action, in full accent. */ .cta { background: var(--accent); color: var(--on-accent); } .cta .kicker { color: color-mix(in srgb, var(--on-accent) 72%, transparent); } .cta h2 { max-width: 22ch; margin: var(--s2) 0 var(--s3); font-size: clamp(2.2rem, 5.4vw, 4.4rem); } .cta p { max-width: 34rem; color: color-mix(in srgb, var(--on-accent) 82%, transparent); font-size: 1.05rem; line-height: 1.7; } .cta__actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s4); } .cta .btn { background: var(--on-accent); color: var(--accent-soft); } .cta .btn:hover { box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--on-accent) 35%, transparent); } .cta .tlink { color: var(--on-accent); text-decoration-color: color-mix(in srgb, var(--on-accent) 45%, transparent); } .cta .tlink:hover { text-decoration-color: currentColor; } /* The install block: the commands themselves, for a product you can actually have. Ruled rows on the accent ground rather than a card, so it reads as part of the call to action rather than a widget dropped into it. The command is selectable text — nobody should have to retype what they came here for. */ .install { display: grid; max-width: 46rem; margin-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--on-accent) 22%, transparent); } .install__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2); align-items: baseline; padding-block: 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--on-accent) 22%, transparent); } .install__where { color: color-mix(in srgb, var(--on-accent) 68%, transparent); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; } /* Overrides the global `code`, which is tinted for the dark ground and is invisible against the accent. */ .install__cmd { padding: 0; overflow-x: auto; background: none; color: var(--on-accent); font-family: var(--mono); font-size: 0.88rem; line-height: 1.5; white-space: pre; } .cta .install__note { max-width: 44rem; margin-top: var(--s3); color: color-mix(in srgb, var(--on-accent) 72%, transparent); font-size: 0.92rem; } .cta .install__ask { margin-top: var(--s4); color: color-mix(in srgb, var(--on-accent) 72%, transparent); font-size: 0.92rem; } .cta .install__ask .tlink { min-height: 0; font-size: inherit; } @media (max-width: 40rem) { .install__row { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; } } /* Sibling products, so a microsite is a door into the rest and not a dead end. */ .siblings { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .siblings a { display: grid; gap: 0.5rem; align-content: start; padding: var(--s3); background: var(--bg); transition: background 0.18s var(--ease); } .siblings a:hover { background: var(--raise); } .siblings strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.03em; } .siblings span { color: var(--dim); font-size: 0.88rem; line-height: 1.5; } /* ── 5. Interior pages ───────────────────────────────────────────────────── */ .pagehead { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line-soft); } .pagehead::before { position: absolute; inset: -60% 40% 30% -30%; background: radial-gradient( closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent ); content: ""; pointer-events: none; } .pagehead > * { position: relative; z-index: 1; } .pagehead h1 { margin: var(--s2) 0 var(--s3); font-size: clamp(2.4rem, 5.6vw, 4.4rem); } .pagehead .lead { max-width: 44rem; } .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; color: var(--dim); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .crumb a:hover { color: var(--accent); } /* Long-form document body: legal pages, support, the deep dive. A single column at a real reading measure with a sticky index beside it. */ .doc { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(3rem, 7vw, 6rem); align-items: start; } .doc__index { position: sticky; top: 6rem; display: grid; gap: 0.15rem; } .doc__index h2 { margin-bottom: var(--s2); color: var(--dim); font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .doc__index a { display: grid; align-items: center; min-height: 40px; padding-left: 0.85rem; border-left: 2px solid var(--line-soft); color: var(--dim); font-size: 0.9rem; line-height: 1.4; transition: color 0.18s var(--ease), border-color 0.18s var(--ease); } .doc__index a:hover { color: var(--text); border-left-color: var(--accent); } .doc__body { max-width: 44rem; } .doc__body section + section { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line-soft); } .doc__body h2 { margin-bottom: var(--s3); font-size: clamp(1.35rem, 2.2vw, 1.8rem); } .doc__body p { margin-bottom: var(--s2); color: var(--dim); font-size: 1.02rem; line-height: 1.8; } .doc__body p:last-child { margin-bottom: 0; } .doc__body strong { color: var(--text); } .doc__note { margin-top: var(--s3); padding: var(--s3); border-left: 2px solid var(--accent); background: var(--raise); color: var(--dim); font-size: 0.95rem; line-height: 1.7; } /* The legal hub: one row per document. */ .docindex { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); } .docindex a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: baseline; padding: var(--s4) var(--s2); background: var(--bg); transition: background 0.18s var(--ease); } .docindex a:hover { background: var(--raise); } .docindex strong { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.035em; } .docindex span { color: var(--dim); font-size: 0.97rem; line-height: 1.6; } .docindex em { color: var(--accent); font-family: var(--mono); font-size: 0.68rem; font-style: normal; letter-spacing: 0.09em; text-transform: uppercase; } /* Frequently asked, as real disclosure widgets. */ .faq { display: grid; border-top: 1px solid var(--line-soft); } .faq details { border-bottom: 1px solid var(--line-soft); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 60px; padding-block: var(--s2); cursor: pointer; font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: -0.03em; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { flex: none; color: var(--accent); content: "+"; font-family: var(--mono); font-size: 1.3rem; transition: transform 0.2s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { max-width: 44rem; padding-bottom: var(--s3); color: var(--dim); font-size: 1rem; line-height: 1.75; } /* ── 6. Gallery and demos ────────────────────────────────────────────────── */ .stage { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sink); overflow: hidden; } .stage figcaption { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; padding: var(--s2) var(--s3); border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 0.88rem; line-height: 1.55; } .plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .plate { display: grid; gap: var(--s2); align-content: start; padding: var(--s3); background: var(--bg); } .plate__art { display: grid; place-items: center; height: 13rem; padding: var(--s3); background: var(--sink); border: 1px solid var(--line-soft); border-radius: 2px; overflow: hidden; } /* object-fit rather than max-height: the mark carries explicit width and height attributes, and inside a fixed-height grid cell those were winning — so the sparser marks were being cropped at the bottom edge of their plate. */ .plate__art img { width: 100%; height: 100%; object-fit: contain; } .plate h3 { font-size: 1.05rem; } .plate p { color: var(--dim); font-size: 0.9rem; line-height: 1.6; } .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; border-radius: 2px; overflow: hidden; } .swatches i { aspect-ratio: 1 / 1.35; } .typespec { display: grid; gap: 0.4rem; width: 100%; text-align: center; } .typespec b { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.05em; } .typespec em { font-family: var(--serif); font-size: 1.6rem; font-style: normal; } .typespec span { color: var(--dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; } /* ── 7. Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 68rem) { .hero__inner, .section__head, .doc { grid-template-columns: 1fr; } .doc__index { position: static; display: flex; flex-wrap: wrap; gap: 0.5rem; } .doc__index h2 { flex-basis: 100%; } .doc__index a { padding: 0 0.75rem; border-left: 0; border: 1px solid var(--line-soft); border-radius: 2px; } .features li { grid-template-columns: 3rem 1fr; } .features h3 { grid-column: 2; } .features p { grid-column: 2; } .colophon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .docindex a { grid-template-columns: 1fr; } } @media (max-width: 46rem) { .sitenav { /* On a phone the nav becomes a scrollable rail rather than a hamburger: five links is not enough to hide behind a menu, and a rail keeps every destination one tap away. */ order: 3; flex-basis: 100%; gap: var(--s3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line-soft); } .sitenav::-webkit-scrollbar { display: none; } .masthead__inner { flex-wrap: wrap; padding-top: 0.75rem; } .proof__grid { grid-template-columns: 1fr; } .proof__grid > div, .proof__grid > div + div { padding: var(--s3) 0; border-right: 0; border-top: 1px solid var(--line-soft); } .colophon__grid { grid-template-columns: 1fr; } .colophon__base .spacer { margin-left: 0; } .swatches i { aspect-ratio: 1; } } /* ── 8. Reduced motion and print ─────────────────────────────────────────── */ @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; } } @media print { .masthead, .skip, .cta, .demo { display: none; } body { background: #fff; color: #000; } }