/* ============================================================================ PLATE - THE SHARED IDENTITY, re-derived from the homepage that is actually live. On 2026-09-14 two homepages existed. An earlier pass extracted an identity out of the FIRST one into this file and put every other page on it; then the SECOND one was adopted (fd102e4) and this file was describing a design that no longer existed. Everything below the base layer is now literally the live homepage's own rules, MOVED here out of home.css and home-brand.css rather than retyped, so the homepage and every other page read the same bytes and cannot drift again. What came from where, and stayed verbatim: home.css lines 19-119 the faces, the tokens, the top bar, the buttons, the focus ring and the shared furniture home-brand.css lines 310-318 the footer row What deliberately stayed behind, because it is composition and not identity: home.css chapter 01, the opening scene and its two layouts home-brand.css chapters 02-05 and the project detail dialog library.css the collection grid Load order. The homepage loads styles.css -> community.css -> THIS -> home.css -> home-brand.css, which puts these rules at exactly the position they occupied before the move, so the homepage's cascade resolves to the same values it always did. Every other page loads styles.css (or its own base) -> its own sheet -> THIS. Scope is the .plate-home class on , which the homepage already used. Pages that are not the homepage add .plate-sub, which is what clears the fixed bar and what the one secondary text level below is scoped to. ============================================================================ */ /* ============================================================================ THE BASE LAYER. Two pages -- the library and Studio -- were built on their own reset and never load styles.css, which is why a shared bar dropped into them laid out as loose inline text. These are the structural declarations the bar and the footer need, in exactly the values styles.css declares, so the bar is the same bar whatever else a page loads. They sit BEFORE the identity proper, so on the homepage the identity's own rules below resolve last, exactly as before the move. ============================================================================ */ .plate-home .wordmark { display: inline-flex; align-items: center; } .plate-home .wordmark img { display: block; } .plate-home .header-actions { display: flex; align-items: center; } .plate-home .button, .plate-home .reg-button { cursor: pointer; } .plate-home .menu-toggle { display: none; } .plate-home .skip-link, .plate-home .skip { position: fixed; left: 10px; top: 10px; z-index: 100; background: var(--orange); color: var(--orange-ink); padding: 10px; transform: translateY(-160%); } .plate-home .skip-link:focus, .plate-home .skip:focus { transform: none; } /* ============================================================================ THE IDENTITY - moved verbatim from home.css (the live homepage), lines 19-119. The one edit is in place: .header-register is a sub-page element, so it is styled further down instead of being hidden alongside the dead left rail. ============================================================================ */ @font-face { font-family: 'Fraunces'; src: url('assets/fonts/Fraunces-Latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fragment Mono'; src: url('assets/fonts/FragmentMono-Regular-Latin.woff2') format('woff2'); font-weight: 400; font-display: swap; } .plate-home { --bg: #0c0c0e; --panel: #141416; --panel-2: #1c1c1f; --line: #ffffff1a; --rule: #ffffff22; --ink: #f2f0ea; --ink-2: #f2f0eac4; --ink-3: #f2f0ea9e; /* Raised 2026-09-14. --ink-3 was #f2f0ea5c, which composites to 3.02:1 on this * ground and fails AA at any size; 44 text nodes on the homepage alone used it, * including the top bar's numerals and every footer link. Ohad's words for the * same thing: "all this grey weak text all over the site". Both levels moved so the * hierarchy survives rather than inverting: --ink-2 now 10.2:1, --ink-3 6.88:1, * and the old --ink-3 value is gone rather than merely used less. */ --body: #b9b8b3; --muted: #8d8c88; --orange: #ff6a1a; --orange-ink: #1b0c04; --orange-soft: #ff6a1a26; /* A solid button wants white bold text, which is what a pressable thing looks like. * White on the brand orange measures 2.87:1, which fails even the relaxed bar for * large text, so the label had to be near-black and thin and stopped reading as a * button. Rather than dull the accent everywhere, pressable surfaces get their own * deeper orange: white on it is 4.78:1 and passes at any size. Hover goes darker * rather than lighter (5.70:1), because a lighter hover drops white under the bar * at the exact moment the pointer is on the thing. The bright one stays the accent * for rules, badges and text. */ --orange-solid: #cc4400; --orange-solid-hover: #a83600; --display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --mono: 'Fragment Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --bar: 68px; --pad: clamp(20px, 3.4vw, 52px); --gap: 22px; background: var(--bg); color: var(--ink); letter-spacing: -.008em; } .plate-home .shell { width: min(1360px, calc(100% - 2 * var(--pad))); margin-inline: auto; } .plate-home #main { overflow-x: clip; } .plate-home h1, .plate-home h2 { font-weight: 500; } .plate-home section[id] { scroll-margin-top: 0; } .plate-home ::selection { background: var(--orange); color: var(--orange-ink); } .plate-home :focus-visible { outline: 1px dotted var(--orange); outline-offset: 3px; } /* ---------------------------------------------------------------- the top bar * Fixed over the stage, transparent, no border: a brand mark, the sections in mono, one * bracketed action. It gains a quiet backdrop only once the page has moved. */ .plate-home .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--bar); background: transparent; border: 0; border-radius: 0; margin: 0; width: 100%; backdrop-filter: none; transition: background .3s, backdrop-filter .3s, box-shadow .3s; } .plate-home .site-header.is-scrolled { background: #0c0c0ec4; backdrop-filter: blur(16px); box-shadow: inset 0 -1px 0 var(--line); } .plate-home .header-inner { width: auto; height: var(--bar); display: flex; align-items: center; gap: 26px; padding: 0 var(--pad); } .plate-home .wordmark { font-size: 15px; font-weight: 500; letter-spacing: .01em; gap: 10px; flex-shrink: 0; color: var(--ink); } .plate-home .wordmark img { width: 22px; height: 22px; } .plate-home .main-nav { display: flex; gap: 18px; margin: 0 0 0 10px; flex: 1; align-items: center; } .plate-home .main-nav a { display: inline-flex; gap: 7px; align-items: baseline; padding: 4px 0 3px; border-radius: 0; border-bottom: 1px dotted transparent; font: 400 11.5px/1 var(--mono); letter-spacing: .01em; color: var(--ink-2); background: none; transition: color .25s, border-color .25s; } .plate-home .main-nav a small { font-size: 10px; color: var(--ink-3); } .plate-home .main-nav a:hover, .plate-home .main-nav a.is-active { color: var(--ink); background: none; border-bottom-color: var(--ink-3); } .plate-home .main-nav a.nav-plain { color: var(--ink-3); } .plate-home .main-nav a.nav-plain:first-of-type { margin-left: 10px; } .plate-home .header-actions { gap: 14px; flex-shrink: 0; margin-left: auto; } .register-rail { display: none; } /* Buttons: Plate's own. A hairline rectangle with registration brackets at the corners; * the brackets tighten and the fill comes in on hover. Mono, upright, no pills. */ /* Primary actions are solid orange -- the one ink, used hard where the page asks for a * decision: explore, copy the prompt, get Pro. Ghost actions stay quiet. */ /* Button labels, 2026-09-14. Ohad: the Get Plate button and the top-right one need the * text to sit inside them so they read as clickable. Measured first rather than guessed: * the label filled 67% of the header action and less of several others, because a 12px * mono label at weight 400 floats in a 42px-tall field with 22px of air either side. The * mono face ships Regular only, so weight is not a lever and synthetic bold would smear * it; size and tighter padding are. The label grew and the air shrank, so each button is * sized by its text instead of stretched around it. */ .plate-home .button, .plate-home .reg-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--orange-solid); border-radius: 0; background: var(--orange-solid); color: #fff; font: 600 14px/1 var(--sans); letter-spacing: .005em; white-space: nowrap; box-shadow: 0 8px 28px -10px #ff6a1a99; transition: background .22s, color .22s, border-color .22s, box-shadow .22s; translate: none; } .plate-home .button::before, .plate-home .button::after, .plate-home .reg-button::before, .plate-home .reg-button::after { content: ''; position: absolute; width: 7px; height: 7px; border: 1px solid var(--orange); transition: inset .25s cubic-bezier(.2,.8,.2,1), opacity .2s; } .plate-home .button::before, .plate-home .reg-button::before { left: 3px; top: 3px; border-right: 0; border-bottom: 0; border-color: #fff; opacity: .5; } .plate-home .button::after, .plate-home .reg-button::after { right: 3px; bottom: 3px; border-left: 0; border-top: 0; border-color: #fff; opacity: .5; } .plate-home .button:hover, .plate-home .reg-button:hover, .plate-home .button:focus-visible { background: var(--orange-solid-hover); border-color: var(--orange-solid-hover); color: #fff; box-shadow: 0 10px 34px -10px #ff6a1acc; translate: none; } .plate-home .button:hover::before, .plate-home .reg-button:hover::before { left: -1px; top: -1px; } .plate-home .button:hover::after, .plate-home .reg-button:hover::after { right: -1px; bottom: -1px; } .plate-home .button > span { opacity: .7; } .plate-home .button-small { min-height: 36px; padding: 0 16px; font-size: 11px; } .plate-home .button-ghost { border-color: var(--rule); color: var(--ink); background: none; box-shadow: none; } .plate-home .button-ghost::before, .plate-home .button-ghost::after { border-color: var(--orange); opacity: 1; } .plate-home .button-ghost:hover { background: none; color: var(--orange); border-color: var(--orange); box-shadow: none; } .plate-home .header-cta { min-height: 38px; padding: 0 16px; font-size: 12.5px; } .plate-home .header-cta-solid { background: var(--orange-solid); color: #fff; border-color: var(--orange-solid); } .plate-home .header-cta-solid::before, .plate-home .header-cta-solid::after { border-color: #fff; opacity: .5; } .plate-home .header-cta-solid:hover { background: var(--orange-solid-hover); border-color: var(--orange-solid-hover); } .plate-home .header-signin { font: 400 11.5px/1 var(--mono); color: var(--ink-2); padding: 8px 4px; } .plate-home .header-signin:hover { color: var(--ink); } @media (max-width: 640px) { .plate-home .header-signin { display: none; } } .plate-home .text-link { display: inline-flex; align-items: baseline; gap: 6px; min-height: 0; font: 400 11.5px/1.4 var(--mono); color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); padding-bottom: 2px; transition: color .2s, border-color .2s; } .plate-home .text-link:hover { color: var(--orange); border-bottom-color: var(--orange); } .text-link-button { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; } @media (min-width: 981px) { .plate-home .menu-toggle { display: none; } } @media (max-width: 980px) { .plate-home .header-inner { gap: 14px; } .plate-home .main-nav { display: none; position: absolute; top: var(--bar); left: 0; right: 0; margin: 0; padding: 12px var(--pad) 18px; background: #0c0c0ef2; backdrop-filter: blur(16px); box-shadow: inset 0 -1px 0 var(--line); } .plate-home .main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .plate-home .main-nav a { font-size: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); } .plate-home .main-nav a.nav-plain:first-of-type { margin-left: 0; } .plate-home .menu-toggle { display: flex; width: 38px; height: 38px; flex-direction: column; justify-content: center; gap: 5px; background: none; border: 0; padding: 8px; flex-shrink: 0; } .plate-home .menu-toggle span { width: 18px; height: 1px; background: var(--ink); } } @media (max-width: 640px) { .plate-home { --bar: 58px; --gap: 14px; } .plate-home .header-cta { padding: 0 12px; min-height: 34px; font-size: 11.5px; } } /* ---------------------------------------------------------------- shared furniture */ .plate-index, .kicker { display: block; margin: 0 0 12px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); } .plate-index b { font-weight: 400; color: var(--ink-2); margin-right: 10px; } .plate-index b::after { content: ' ยท'; color: var(--ink-3); } .chapter-title { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; line-height: 1.04; color: var(--ink); margin: 0; text-wrap: balance; } .statement { font-family: var(--display); font-weight: 500; letter-spacing: -.015em; line-height: 1.12; color: var(--ink); margin: 0; text-wrap: balance; } .rule-block { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .ro { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); font: 400 11.5px/1.5 var(--mono); color: var(--ink-2); } .rule-block .ro:first-child, .ro:first-child { border-top: 0; } .ro > span { flex: none; color: var(--ink-3); } .ro > i { flex: 1; min-width: 14px; height: 1px; align-self: center; margin-top: 1px; background-image: radial-gradient(circle, var(--ink-3) .7px, transparent .9px); background-size: 4px 1px; background-repeat: repeat-x; } .ro > b { flex: 0 1 auto; min-width: 0; font-weight: 400; color: var(--ink); text-align: right; } /* ============================================================================ THE FOOTER - moved verbatim from home-brand.css (the live homepage), 310-318. ============================================================================ */ /* ---------- the footer, plain ---------- */ .plate-home .site-footer.home-ending { display: block; padding: 34px var(--pad) 30px; margin: 0; border-top: 1px solid var(--rule); } .home-ending-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; } .home-ending-brand { display: flex; flex-direction: column; gap: 10px; } .home-ending-brand .wordmark { font-size: 14px; font-weight: 500; } .home-ending-brand p { font: 400 11.5px/1.6 var(--mono); color: var(--ink-3); max-width: 44ch; } .home-ending-row nav { display: flex; gap: 20px; flex-wrap: wrap; } .home-ending-row nav a { color: var(--ink-3); font: 400 11px var(--mono); } .home-ending-row nav a:hover { color: var(--orange); } /* ---------------------------------------------------------------------------- * The same band, for every page that is not the homepage. `.plate-ending` is the * homepage's `.home-ending` with nothing added: same hairline, same ground, same * row, same padding. The homepage's own rule above is untouched. * * The typeface colophon that used to close these pages ("PLATE - SET IN FRAUNCES * AND GEIST - PRINTED IN ONE INK") is gone from the markup: it flattered us and * told a customer nothing, and it was one more dim mono line in a stack of them. */ .plate-home .site-footer.plate-ending { display: block; padding: 34px var(--pad) 30px; margin: 0; border-top: 1px solid var(--rule); } /* ============================================================================ THE BAR'S SUB-PAGE PARTS. The bar's markup is identical on every page. Two things only a sub page has: the running head that names the page beside the wordmark, and the link in the numbered navigation that points at the page you are already on. Neither selector matches anything on the homepage, whose navigation is in-page anchors. ============================================================================ */ .header-register { font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); border-left: 1px solid var(--rule); padding-left: 14px; margin-left: 2px; flex-shrink: 0; white-space: nowrap; } /* The bar is tight at six navigation items plus two actions; the running head is * the first thing to go rather than the last, so nothing ever wraps. */ @media (max-width: 1160px) { .header-register { display: none; } } .plate-home .main-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); } .plate-home .main-nav a[aria-current="page"] small { color: var(--orange); } /* ============================================================================ CLEARING THE FIXED BAR. The bar is fixed on every page, which the homepage's opening pads for itself. Every other page says so with .plate-sub on and gets exactly the bar's height back, once, rather than each sheet inventing its own top padding. ============================================================================ */ .plate-sub { padding-top: var(--bar); } /* ============================================================================ ONE SECONDARY LEVEL. Small dim text had accumulated on these pages at three or four different values in two faces: 6.88:1, 5.81:1 and -- for the token the footer links and the mono fine print actually used -- 3.02:1, which does not reach AA at all. Measured on this ground (#0c0c0e), var(--ink-3) composites to rgb(95,94,93): 3.02:1. It is the homepage's own token and the homepage is frozen, so it stays what it is there; nothing outside the homepage's own composition uses it any more. Secondary on every other page is ONE value: --secondary, rgb(185,184,179), 9.84:1 measured. Two levels on a page, not five: --ink at 17.15:1 for what you read, --secondary at 9.84:1 for everything that supports it, and the orange for a chapter mark. 11px mono is where weakness showed most, so it gets the same 9.84:1 as the prose rather than a step down from it. ============================================================================ */ .plate-home { --secondary: #b9b8b3; } .plate-sub :is(p, li, dd, figcaption, small, .help-lead) { color: var(--secondary); } .plate-sub .text-link { color: var(--secondary); } .plate-sub .text-link:hover { color: var(--orange); } .plate-sub .plate-index b, .plate-sub .plate-index b::after { color: var(--secondary); } .plate-sub .ro, .plate-sub .ro > span { color: var(--secondary); } .plate-sub .ro > i { background-image: radial-gradient(circle, var(--secondary) .7px, transparent .9px); } .plate-sub .header-register { color: var(--secondary); } /* The bar, on a sub page, at that one level too. The homepage paints the numbered * navigation's numerals and its plain links in var(--ink-3), which composites to * rgb(95,94,93) on this ground: 3.02:1 measured, below AA at any text size. The * homepage is frozen and keeps it; every page this pass owns gets the SAME bar -- * same mark, same numbers, same order, same actions -- painted at 9.84:1 instead of * inheriting a failure. The hierarchy between a number and its label is then size * (10px against 11.5px), which is where it belongs, rather than legibility. * Deliberately NOT scoped to .plate-home, so the homepage cannot be reached by it. */ .plate-sub .main-nav a, .plate-sub .main-nav a small { color: var(--secondary); } .plate-sub .main-nav a.nav-plain { color: var(--secondary); } .plate-sub .main-nav a:hover, .plate-sub .main-nav a.nav-plain:hover { color: var(--ink); } .plate-sub .main-nav a[aria-current="page"], .plate-sub .main-nav a[aria-current="page"] small { color: var(--ink); } .plate-sub .main-nav a[aria-current="page"] small { color: var(--orange); } .plate-sub .header-signin { color: var(--secondary); } .plate-sub .header-signin:hover { color: var(--ink); } /* The same token reached the library's card captions and the collection's fine print. */ /* The library's card captions read the same token. library.html loads home-brand.css * AFTER this sheet, so the override has to out-specify it rather than out-order it; * .plate-home.plate-sub keeps it unreachable from the homepage either way. */ .plate-home.plate-sub .card-meta p, .plate-home.plate-sub .plate-caption, .plate-home.plate-sub .collection-foot, .plate-home.plate-sub .collection-foot span { color: var(--secondary); } /* The footer's links and its brand line, at the one level rather than at 3.02:1. */ .plate-home .site-footer.plate-ending .home-ending-row nav a { color: var(--secondary); font: 400 11.5px var(--mono); } .plate-home .site-footer.plate-ending .home-ending-row nav a:hover { color: var(--orange); } .plate-home .site-footer.plate-ending .home-ending-brand p { color: var(--secondary); } /* The tax statement beside a price (plate-tax.js, from pricing.json). Polar's tax * behaviour is location based, so $89 is not the total everywhere and this sentence * is not optional wherever the number is shown. It is small and quiet, and it is at * the SAME 9.84:1 as the prose around it -- this is exactly the text that must not * be weak, so it never drops to a dimmer step. */ .plate-home .price-tax { display: block; font: 400 11.5px/1.5 var(--mono); color: var(--secondary); margin-top: 8px; } .plate-home p .price-tax, .plate-home .motion-credit .price-tax { display: inline; margin-top: 0; font: inherit; } /* ============================================================================ THE READING PAGES. Terms, Privacy, Documentation and About the examples are the same identity doing a different job: no plate, because there is no work to show through one, but the same ground, the same display face, the same gutters and the same numbered chapters the homepage introduces. The numbers come from a CSS counter, so a chapter number is never typed into the copy. ============================================================================ */ .plate-home .help-main { width: min(1360px, calc(100% - 2 * var(--pad))); max-width: none; margin-inline: auto; padding-block: clamp(34px, 6vh, 64px) 0; counter-reset: plate-chapter; } .plate-home .help-main > h1 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; line-height: 1.02; font-size: clamp(40px, 6.2vw, 78px); color: var(--ink); margin: 0; max-width: 16ch; } .plate-home .help-lead { font-size: 15.5px; line-height: 1.6; color: var(--secondary); margin-top: 18px; max-width: 58ch; } /* An inline link in the copy is underlined in the one ink. A BUTTON in the copy is * not a link to be recoloured: without the exclusion, .help-section a won on * specificity and painted the Get started button's label orange on orange. */ .plate-home :is(.help-lead, .help-section) a:not(.button):not(.reg-button):not(.pill):not(.text-link) { color: var(--orange); text-underline-offset: 4px; text-decoration: underline; text-decoration-thickness: 1px; } .plate-home :is(.help-lead, .help-section) a:not(.button):not(.reg-button):not(.pill):not(.text-link):hover { color: var(--ink); } .plate-home .help-section { counter-increment: plate-chapter; margin-top: clamp(32px, 5vh, 54px); padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--rule); } /* The chapter mark: .plate-index's grammar, set above the heading. */ .plate-home .help-section > h2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; font-family: var(--display); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(24px, 2.4vw, 34px); color: var(--ink); margin: 0 0 4px; max-width: 24ch; } .plate-home .help-section > h2::before { content: counter(plate-chapter, decimal-leading-zero); font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--orange); } .plate-home .help-section h3 { font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.015em; color: var(--ink); margin-top: 28px; } .plate-home .help-section p, .plate-home .help-section li { font-size: 15.5px; line-height: 1.72; color: var(--secondary); max-width: 74ch; } .plate-home .help-section p { margin-top: 14px; } .plate-home .help-section ul, .plate-home .help-section ol { margin: 14px 0 0; padding-left: 20px; } .plate-home .help-section li { margin-top: 8px; } .plate-home .help-section strong, .plate-home .help-section b { color: var(--ink); font-weight: 500; } .plate-home .help-section code { font-family: var(--mono); font-size: .9em; color: var(--ink); } .plate-home .help-code, .plate-home .help-section pre { background: var(--panel); border: 1px solid var(--line); border-radius: 0; border-left: 1px solid var(--orange); padding: 16px 18px; margin: 18px 0 0; font: 13px/1.7 var(--mono); color: var(--secondary); overflow-x: auto; max-width: 100%; } .plate-home .help-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 0; } /* Wide content scrolls inside its own box; the page body never does. */ .plate-home .help-section .table-wrap, .plate-home .table-wrap { overflow-x: auto; margin-top: 18px; } .plate-home .help-section table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; } .plate-home .help-section th, .plate-home .help-section td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); color: var(--secondary); } .plate-home .help-section th { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); } .plate-home .help-section td a { color: var(--orange); } /* ============================================================================ THE TYPE SCALE, for every page that is not the homepage's own composition. The homepage is five chapters, each with type tuned to its own job, so it is deliberately NOT swept by this. Every other page marks its
.plate-page and inherits one scale: one display face, one set of sizes, one measure, one gutter. That is what stops eight pages each inventing an h2. ============================================================================ */ .plate-home .plate-page { width: min(1360px, calc(100% - 2 * var(--pad))); max-width: none; margin-inline: auto; padding: clamp(34px, 6vh, 64px) 0 0; } .plate-home .plate-page h1 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; line-height: 1.02; font-size: clamp(40px, 6.2vw, 78px); color: var(--ink); } .plate-home .plate-page h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(26px, 2.8vw, 40px); color: var(--ink); } .plate-home .plate-page h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.015em; line-height: 1.22; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink); } /* One kicker. Every page had invented its own: a grey 12px tracked caps here, an * orange 11px there. Where a kicker survived the cut it is the chapter mark in * .plate-index's grammar -- and where it only repeated the heading under it, or * the page name already in the bar, it was deleted rather than restyled. */ .plate-home .plate-page .hero-kicker, .plate-home .plate-page .motion-kicker, .plate-home .plate-page .setup-eyebrow, .plate-home .plate-page .project-kicker, .plate-home .plate-page .step-kicker, .plate-home .plate-page .eyebrow { display: block; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin: 0 0 12px; } @media (max-width: 700px) { .plate-home .plate-page { width: calc(100% - 2 * var(--pad)); padding-top: 26px; } .plate-home .help-main { width: calc(100% - 2 * var(--pad)); padding-block: 26px 0; } .plate-home .help-section p, .plate-home .help-section li { font-size: 15px; } } /* The page's own opening: the same mark the homepage uses to number a chapter, * for pages whose first screen is a title rather than a composition. */ .plate-home .page-mark { margin: 0 0 16px; } /* ------------------------------------------------------------ reduced motion * Scoped to the identity's OWN moving parts -- the bar's backdrop and the buttons' * brackets -- rather than a blanket !important sweep, because each composition * already declares its own reduced-motion behaviour and a sweep here would * silently overrule the homepage's. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .plate-home .button, .plate-home .reg-button, .plate-home .main-nav a, .plate-home .site-header, .plate-home .home-ending-row nav a { transition: none; } .plate-home .button::before, .plate-home .button::after, .plate-home .reg-button::before, .plate-home .reg-button::after { transition: none; } }