/* Boilerplate Brand - base layer. Reads the vendored tokens in brand-variables.css. Defines no token values. */ /* --- Legacy preset remap ------------------------------------------------- The parent theme ships seven Google families and sets Inter as the global font, and the existing Home page's blocks reference those preset variables by slug. Repointing the variables is what stops Inter reappearing on any block we did not rewrite - setting font-family on our own elements is not enough, because the block's own preset rule would still win on that block. These are remaps, not new tokens: every one resolves to the brand families declared in tokens/type.json. */ :root { --wp--preset--font-family--inter: var(--type-family-sans); --wp--preset--font-family--lato: var(--type-family-sans); --wp--preset--font-family--montserrat: var(--type-family-sans); --wp--preset--font-family--open-sans: var(--type-family-sans); --wp--preset--font-family--poppins: var(--type-family-sans); --wp--preset--font-family--roboto: var(--type-family-sans); /* Playfair was the only serif; the brand ships no serif, so it resolves to the sans rather than falling through to a platform serif. */ --wp--preset--font-family--playfair-display: var(--type-family-sans); } /* --- Element defaults ---------------------------------------------------- Wrapped in :where() so specificity stays 0,0,0 and any component rule wins. A bare selector here would silently beat single-class component rules. */ :where(body) { background: var(--color-surface); color: var(--color-on-surface); font-family: var(--type-family-sans); font-size: var(--type-scale-body-size); line-height: var(--type-scale-body-line-height); -webkit-font-smoothing: antialiased; } /* Anchor scrolling. The parent theme's style.css used to set this on html; functions.php now dequeues that sheet, because its bare element rules outrank every :where() default here. This was the one rule the site actually leaned on, so it moves in. The Motion block below already turns it back off under prefers-reduced-motion. */ :where(html) { scroll-behavior: smooth; } :where(h1, h2, h3, h4, h5, h6) { font-family: var(--type-family-sans); font-weight: var(--type-weight-bold); color: var(--color-on-surface); text-wrap: balance; } :where(a) { color: var(--color-accent); } :where(code, kbd, samp, pre) { font-family: var(--type-family-mono); font-variant-numeric: var(--type-numeric-tabular); } /* Any column of figures must set tabular lining figures - tokens/type.json calls proportional figures in a column a legibility bug, not a preference. */ :where(table) { font-variant-numeric: var(--type-numeric-tabular); } /* --- Focus --------------------------------------------------------------- Color alone never carries meaning (brand/voice.md), so focus is a visible outline with offset rather than a color change. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* --- Motion -------------------------------------------------------------- The brand ships explicit reduced-motion durations; honor them. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: var(--motion-reduced-instant) !important; animation-iteration-count: 1 !important; transition-duration: var(--motion-reduced-instant) !important; scroll-behavior: auto !important; } } /* --- Selection ------------------------------------------------------------ */ ::selection { background: var(--color-accent); color: var(--color-on-accent); } /* ========================================================================== Dark-mode reconciliation -------------------------------------------------------------------------- theme.json's palette is a set of FIXED hex values; brand-variables.css flips its roles under prefers-color-scheme. Mixing the two produced light text on a light ground for every page that reads one system for text and the other for background - which is exactly what the legal pages did. Re-point the WordPress preset variables at the flipping roles, the same way the font presets are re-pointed above. theme.json's own output then follows the brand's light/dark roles instead of fighting them, and no rule that references a preset has to change. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wp--preset--color--background: var(--color-surface); --wp--preset--color--secondary: var(--color-on-surface); --wp--preset--color--surface-raised: var(--color-surface-raised); --wp--preset--color--on-surface-muted: var(--color-on-surface-muted); --wp--preset--color--border: var(--color-border); --wp--preset--color--primary: var(--color-accent); --wp--preset--color--danger: var(--color-danger); } } :root[data-theme="dark"] { --wp--preset--color--background: var(--color-surface); --wp--preset--color--secondary: var(--color-on-surface); --wp--preset--color--surface-raised: var(--color-surface-raised); --wp--preset--color--on-surface-muted: var(--color-on-surface-muted); --wp--preset--color--border: var(--color-border); --wp--preset--color--primary: var(--color-accent); --wp--preset--color--danger: var(--color-danger); } /* ========================================================================== Shared chrome -------------------------------------------------------------------------- Lives here rather than in landing.css because every template needs it - including the legal pages, which do not load landing.css. ========================================================================== */ /* Visually hidden, still read aloud. */ .u-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Skip link: the first focusable thing on every page (parts/site-header.php). The .u-sr recipe until it has focus, then an ink-on-paper tab at the top left, over the header. It is an , so the focus outline above applies to it as-is - accent ring, offset, against ink in light and paper in dark. :focus rather than :focus-visible: a skip link only ever takes keyboard focus, and it has to show the instant it does. */ .skip{ position:absolute;top:var(--space-3);left:var(--space-3);z-index:100; width:1px;height:1px;padding:0;margin:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; background:var(--color-on-surface);color:var(--color-surface); font-weight:var(--type-weight-semibold);text-decoration:none; } .skip:focus{ width:auto;height:auto;padding:var(--space-2) var(--space-4); overflow:visible;clip:auto; } .wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--space-5)} @media (min-width:900px){ .wrap{padding-inline:var(--space-7)} } .bar{border-bottom:1px solid var(--color-border)} .bar__in{display:flex;align-items:center;gap:var(--space-5);min-height:64px} /* The lockup is a link. It was a
and a , which looked identical and did nothing - the single most reached-for way back to a home page. */ .bar__home{ display:flex;align-items:center;gap:var(--space-3); text-decoration:none;color:var(--color-on-surface); } .bar__home:hover .bar__name{color:var(--color-accent)} .bar__mark{ width:22px;height:28px;flex:none; background:var(--logo-mark-ink) center/contain no-repeat; } .bar__name{ font-size:var(--type-scale-caption-size); font-family:var(--type-family-mono); font-weight:var(--type-weight-semibold); letter-spacing:.16em;text-transform:uppercase; } .bar__nav{margin-left:auto;display:flex;gap:var(--space-5)} .bar__nav a{ color:var(--color-on-surface);text-decoration:none; font-size:14px;font-weight:var(--type-weight-medium); padding-block:var(--space-2);border-bottom:2px solid transparent; } .bar__nav a:hover, .bar__nav a[aria-current]{border-bottom-color:var(--color-accent)} /* ---- Mobile menu: a
disclosure, no JavaScript ---- */ .bar__menu{display:none;margin-left:auto;position:relative} .bar__menu summary{ list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:center; width:44px;height:44px; /* a real 44px touch target */ margin-right:calc(var(--space-2) * -1); } .bar__menu summary::-webkit-details-marker{display:none} .bar__menu summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} /* Three bars, drawn rather than fetched. */ .bar__burger, .bar__burger::before, .bar__burger::after{ display:block;width:20px;height:2px;background:var(--color-on-surface); } .bar__burger{position:relative} .bar__burger::before,.bar__burger::after{content:"";position:absolute;left:0} .bar__burger::before{top:-6px} .bar__burger::after{top:6px} .bar__menu[open] .bar__burger{background:transparent} .bar__menu[open] .bar__burger::before{top:0;transform:rotate(45deg)} .bar__menu[open] .bar__burger::after{top:0;transform:rotate(-45deg)} .bar__drawer{ position:absolute;right:0;top:calc(100% + var(--space-3));z-index:50; min-width:12rem;display:flex;flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); box-shadow:0 8px 24px rgb(32 30 29 / .14); /* tinted to the ground, not black */ } .bar__drawer a{ padding:var(--space-3) var(--space-5); color:var(--color-on-surface);text-decoration:none; font-size:16px;font-weight:var(--type-weight-medium); } .bar__drawer a + a{border-top:1px solid var(--color-border)} .bar__drawer a:hover{background:var(--color-surface-raised);color:var(--color-accent)} @media (max-width:719px){ .bar__nav{display:none} .bar__menu{display:block} } /* ---- Footer ---- */ .foot{border-top:1px solid var(--color-border);padding-block:var(--space-6)} .foot__in{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center} .foot__c{font-size:14px;color:var(--color-on-surface-muted)} .foot__links{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--space-5)} .foot__links a{font-size:14px;color:var(--color-on-surface-muted);text-decoration:none} .foot__links a:hover{color:var(--color-accent);text-decoration:underline} /* ---- Legal pages ---- */ .legal-page{padding-block:var(--space-7) var(--space-8)} /* ---- Shared base ---- landing.css carries these too, but it only loads on the home and showcase pages; the legal pages need them as well. */ *,*::before,*::after{box-sizing:border-box} body{margin:0} /* ---- Legal hero in dark mode ---- The hero band is pinned dark so it cannot inflip to light-on-light. In dark mode that pin makes it identical to the page ground and the band disappears, so lift it to the raised surface instead - a band in both themes, and the pinned light text still clears AA against it. Higher specificity than the page's own inline rule, so load order is irrelevant. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .bp-legal__hero, :root:not([data-theme="light"]) .bp-idx__hero{ background:var(--color-surface-raised); } } :root[data-theme="dark"] .bp-legal__hero, :root[data-theme="dark"] .bp-idx__hero{ background:var(--color-surface-raised); } /* ========================================================================== 404 and search -------------------------------------------------------------------------- Both pages borrow .intro, .u-label, .sec and .btn from landing.css, which functions.php loads for them as well as for the home and showcase pages - one button, one source. Only what these two pages add is here. Every color is a flipping --color-* role, never a theme.json preset, so both read in dark mode (see "Dark-mode reconciliation" above). ========================================================================== */ /* The three links out of a dead end, and the sentence above them. */ .util__note{margin:0 0 var(--space-6)} .util__links{display:flex;flex-wrap:wrap;gap:var(--space-3)} /* ---- The search form ---- */ .search{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);max-width:40rem} .search__input{ flex:1 1 14rem;min-width:0; padding:var(--space-3) var(--space-4); /* 16px is the floor below which iOS zooms the page to read the field. */ font-family:inherit;font-size:16px;line-height:inherit; color:var(--color-on-surface);background:var(--color-surface); border:1px solid var(--color-border); /* type="search" ships a rounded platform skin; the mark is right angles. */ border-radius:var(--radius-none);-webkit-appearance:none;appearance:none; } .search__input::placeholder{color:var(--color-on-surface-muted);opacity:1} /* Focus is the shared ring in the Focus block above - accent outline, offset. Nothing here overrides it. A