/* Baldwin — ten designs over one set of markup * --------------------------------------------------------------------------- * GENERATED by build_variants.py. Do not edit: the generator checks contrast on * every pair of colours in every version and in both themes, and a hand edit * here is a design decision nobody measured. * * Everything hangs off one attribute on : * * * * With no attribute the page is the stylesheet's own design, which is the * version called Dossier. Type size and column width stay with that file in * every version; the overlays change paper, ink and structure only. */ /* Studio — What the stylesheet was before the choice. */ :root[data-bw-v="studio"] { --bg: var(--grey-7); --tint: var(--grey-6); --line: var(--grey-4); --note-bg: var(--grey-6); } @media (prefers-color-scheme: dark) { :root[data-bw-v="studio"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); } } :root[data-bw-v="studio"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); } :root[data-bw-v="studio"] .bw-prose > h2, :root[data-bw-v="studio"] .wp-block-post-content > h2, :root[data-bw-v="studio"] .entry-content > h2 { border-top: 0; padding-top: 0; } :root[data-bw-v="studio"] .bw-prose > h2::before, :root[data-bw-v="studio"] .wp-block-post-content > h2::before, :root[data-bw-v="studio"] .entry-content > h2::before { content: none; } :root[data-bw-v="studio"] table { font-size: 0.92rem; } :root[data-bw-v="studio"] th { border-bottom: 1px solid var(--line); } /* Dossier — The site as a technical document. Chosen, and now the stylesheet itself. */ /* Broadsheet — Fifty-three thousand words is a publication. */ :root[data-bw-v="broadsheet"] { --bg: #ffffff; --paper: #ffffff; --leading: 1.68; --line: var(--grey-4); } @media (prefers-color-scheme: dark) { :root[data-bw-v="broadsheet"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --leading: 1.68; } } :root[data-bw-v="broadsheet"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --leading: 1.68; } :root[data-bw-v="broadsheet"] .bw-lede { font-family: var(--font-head); font-weight: 500; } :root[data-bw-v="broadsheet"] .bw-prose > h2, :root[data-bw-v="broadsheet"] .wp-block-post-content > h2, :root[data-bw-v="broadsheet"] .entry-content > h2 { font-size: 0.94rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin: 2.6em 0 0.7em; padding-top: 0.8em; border-top: 1px solid var(--line); } :root[data-bw-v="broadsheet"] .bw-prose > p:first-of-type::first-letter, :root[data-bw-v="broadsheet"] .wp-block-post-content > p:first-of-type::first-letter, :root[data-bw-v="broadsheet"] .entry-content > p:first-of-type::first-letter { font-family: var(--font-head); font-weight: 600; font-size: 3.6em; line-height: 0.78; float: left; margin: 0.06em 0.08em 0 0; color: var(--heading); } @media (width > 900px) { :root[data-bw-v="broadsheet"] h1 { letter-spacing: -0.005em; } } /* Night — Navy is the first brand colour. Lead with it. */ :root[data-bw-v="night"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); } @media (prefers-color-scheme: dark) { :root[data-bw-v="night"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); } } :root[data-bw-v="night"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); } :root[data-bw-v="night"] .bw-logo-light { display: none; } :root[data-bw-v="night"] .bw-logo-dark { display: block; } /* Blueprint — An engineering drawing, because that is what the work is. */ :root[data-bw-v="blueprint"] { --bg: color-mix(in srgb, var(--teal) 6%, #ffffff); --paper: #ffffff; --accent: var(--teal); --accent-ink: var(--teal-ink); --accent-soft: color-mix(in srgb, var(--teal) 14%, #ffffff); --line: color-mix(in srgb, var(--teal) 34%, #ffffff); --edge: color-mix(in srgb, var(--teal) 44%, #ffffff); --tint: color-mix(in srgb, var(--teal) 9%, #ffffff); --note-bg: color-mix(in srgb, var(--teal) 9%, #ffffff); --cta: var(--teal); } @media (prefers-color-scheme: dark) { :root[data-bw-v="blueprint"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--teal); --accent-soft: color-mix(in srgb, var(--teal) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --accent: var(--teal); --cta: var(--teal); } } :root[data-bw-v="blueprint"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--teal); --accent-soft: color-mix(in srgb, var(--teal) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --accent: var(--teal); --cta: var(--teal); } :root[data-bw-v="blueprint"] body { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; } :root[data-bw-v="blueprint"] .bw-head, :root[data-bw-v="blueprint"] .bw-foot, :root[data-bw-v="blueprint"] .bw-panel, :root[data-bw-v="blueprint"] .bw-drawer { background: var(--paper); } :root[data-bw-v="blueprint"] main { background: var(--paper); padding: 26px 30px; margin: -6px 0 0; } :root[data-bw-v="blueprint"] .bw-prose > h2::before, :root[data-bw-v="blueprint"] .wp-block-post-content > h2::before, :root[data-bw-v="blueprint"] .entry-content > h2::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1px solid var(--accent); margin-right: 0.5em; vertical-align: 0.06em; } :root[data-bw-v="blueprint"] code, :root[data-bw-v="blueprint"] kbd { background: var(--accent-soft); } @media (width <= 900px) { :root[data-bw-v="blueprint"] main { padding: 16px 14px; } } /* Ledger — The spine of this site is money and ownership. */ :root[data-bw-v="ledger"] { --bg: color-mix(in srgb, var(--gold) 7%, #ffffff); --paper: #ffffff; --accent: var(--gold); --accent-ink: var(--gold-ink); --accent-soft: color-mix(in srgb, var(--gold) 18%, #ffffff); --line: color-mix(in srgb, var(--gold) 30%, #ffffff); --edge: color-mix(in srgb, var(--gold) 40%, #ffffff); --tint: color-mix(in srgb, var(--gold) 12%, #ffffff); --note-bg: color-mix(in srgb, var(--gold) 12%, #ffffff); } @media (prefers-color-scheme: dark) { :root[data-bw-v="ledger"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--gold); --accent-soft: color-mix(in srgb, var(--gold) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --accent: var(--gold); } } :root[data-bw-v="ledger"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--gold); --accent-soft: color-mix(in srgb, var(--gold) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --accent: var(--gold); } :root[data-bw-v="ledger"] body { font-variant-numeric: tabular-nums; } :root[data-bw-v="ledger"] table { border: 1px solid var(--edge); } :root[data-bw-v="ledger"] th { background: var(--tint); padding: 10px 14px; border-bottom: 1px solid var(--edge); } :root[data-bw-v="ledger"] td { padding: 11px 14px; border-bottom: 1px solid var(--line); } :root[data-bw-v="ledger"] tbody tr:nth-child(even) { background: color-mix(in srgb, var(--gold) 5%, #ffffff); } /* Rail — Fifty pages of structure, so put the structure where a hand rests. */ :root[data-bw-v="rail"] { --rail: 244px; --page-max: 1180px; } @media (prefers-color-scheme: dark) { :root[data-bw-v="rail"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --rail: 244px; --page-max: 1180px; } } :root[data-bw-v="rail"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --rail: 244px; --page-max: 1180px; } :root[data-bw-v="rail"] .bw-prose > h2, :root[data-bw-v="rail"] .wp-block-post-content > h2, :root[data-bw-v="rail"] .entry-content > h2 { position: relative; } @media (width > 900px) { :root[data-bw-v="rail"] .bw-page { grid-template-columns: minmax(0, 1fr) var(--rail); } :root[data-bw-v="rail"] .bw-page > main { order: 1; } :root[data-bw-v="rail"] .bw-toc { order: 2; } :root[data-bw-v="rail"] .bw-toc a { border-left: 0; border-right: 2px solid transparent; text-align: right; } :root[data-bw-v="rail"] .bw-toc a[aria-current="true"] { border-right-color: var(--accent); border-left-color: transparent; } :root[data-bw-v="rail"] .bw-prose > h2::before, :root[data-bw-v="rail"] .wp-block-post-content > h2::before, :root[data-bw-v="rail"] .entry-content > h2::before { content: ""; position: absolute; left: -34px; top: 0.62em; width: 22px; height: 2px; background: var(--accent); } } /* Quiet — The copy is the design. */ :root[data-bw-v="quiet"] { --bg: #ffffff; --paper: #ffffff; --leading: 1.72; --line: var(--grey-6); --edge: var(--grey-6); --tint: var(--grey-7); --note-bg: var(--grey-7); } @media (prefers-color-scheme: dark) { :root[data-bw-v="quiet"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --leading: 1.72; } } :root[data-bw-v="quiet"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --leading: 1.72; } :root[data-bw-v="quiet"] .bw-head { border-bottom: 0; } :root[data-bw-v="quiet"] .bw-foot { border-top: 0; } :root[data-bw-v="quiet"] .bw-related a { border: 0; padding: 0 0 4px; } :root[data-bw-v="quiet"] .bw-related { gap: 28px; } :root[data-bw-v="quiet"] .bw-cta { border: 0; } :root[data-bw-v="quiet"] .bw-prose > h2, :root[data-bw-v="quiet"] .wp-block-post-content > h2, :root[data-bw-v="quiet"] .entry-content > h2 { margin-top: 2.6em; } :root[data-bw-v="quiet"] p { margin-bottom: 1.25em; } /* Signal — Fifty pages of grey prose need a beat. */ :root[data-bw-v="signal"] { --note-bg: color-mix(in srgb, var(--coral) 9%, #ffffff); --note: var(--navy); --tint: color-mix(in srgb, var(--coral) 7%, #ffffff); } @media (prefers-color-scheme: dark) { :root[data-bw-v="signal"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: color-mix(in srgb, var(--coral) 18%, #001a26); --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); } } :root[data-bw-v="signal"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: color-mix(in srgb, var(--coral) 18%, #001a26); --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); } :root[data-bw-v="signal"] h1::after { content: ""; display: block; width: 96px; height: 4px; background: var(--coral); margin: 18px 0 0; } :root[data-bw-v="signal"] .bw-prose > h2, :root[data-bw-v="signal"] .wp-block-post-content > h2, :root[data-bw-v="signal"] .entry-content > h2 { font-size: 1.06rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2.5em; } :root[data-bw-v="signal"] .bw-prose > h2::before, :root[data-bw-v="signal"] .wp-block-post-content > h2::before, :root[data-bw-v="signal"] .entry-content > h2::before { content: ""; display: block; width: 34px; height: 3px; background: var(--coral); margin: 0 0 10px; } :root[data-bw-v="signal"] .bw-cta { border-left: 4px solid var(--coral); } @media (width > 900px) { :root[data-bw-v="signal"] .bw-toc a[aria-current="true"] { border-left-color: var(--coral); } } /* Compact — The reader is a buyer with fifteen tabs open. */ :root[data-bw-v="compact"] { --leading: 1.5; --gap: 8px; --head-h: 56px; } @media (prefers-color-scheme: dark) { :root[data-bw-v="compact"]:not([data-theme="light"]) { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --leading: 1.5; --gap: 8px; --head-h: 56px; } } :root[data-bw-v="compact"][data-theme="dark"] { --bg: #001a26; --paper: #00273b; --elevated: #003652; --ink: var(--grey-7); --heading: #ffffff; --muted: var(--grey-3); --line: rgb(255 255 255 / 0.12); --edge: rgb(255 255 255 / 0.16); --tint: #003652; --accent-ink: var(--green); --accent-soft: color-mix(in srgb, var(--green) 22%, #001a26); --note: var(--grey-5); --note-bg: #00273b; --block-shot: #003652; --wash-teal: color-mix(in srgb, var(--teal) 16%, #001a26); --wash-gold: color-mix(in srgb, var(--gold) 16%, #001a26); --wash-green: color-mix(in srgb, var(--green) 16%, #001a26); --wash-orange: color-mix(in srgb, var(--orange) 16%, #001a26); --wash-coral: color-mix(in srgb, var(--coral) 16%, #001a26); --cta-surface: #003652; --cta-surface-text: var(--grey-7); --leading: 1.5; --gap: 8px; --head-h: 56px; } :root[data-bw-v="compact"] p { margin-bottom: 0.85em; } :root[data-bw-v="compact"] .bw-prose > h2, :root[data-bw-v="compact"] .wp-block-post-content > h2, :root[data-bw-v="compact"] .entry-content > h2 { margin-top: 1.5em; } :root[data-bw-v="compact"] .bw-related { grid-template-columns: repeat(3, 1fr); max-width: var(--wider); } :root[data-bw-v="compact"] .bw-related a { padding: 12px 14px; } :root[data-bw-v="compact"] td { padding: 8px 14px 8px 0; } @media (width > 900px) { :root[data-bw-v="compact"] .bw-page { padding: 22px 20px 64px; gap: 32px 40px; } }