/* * base.css — tokens, reset, element defaults, utilities. * * Also the editor stylesheet (add_editor_style), hence `.container` here and no * site chrome: the editor renders blocks, and block templates use .container. * * Rule 9: no literal colours, font sizes or spacing below :root. Structural * constants are exempt and written literally. Verify: * sed '1,/^}/d' base.css | grep -nE -e '#[0-9a-fA-F]{3,8}' -e '(rgb|hsl)a?\(' \ * -e '(font-size|margin|padding|gap)[^:]*:[^;]*[0-9.]+(px|rem|em|ch)' * * Ported from design/cookmushroom-design.html. The design's `.article__body` * rules become plain element selectors here, because our templates render the * six allowed core blocks with core's own classes, not the mockup's. */ /* --- 1. Tokens theme.json has no schema for. Only literals in the file. --- */ :root { /* Motion */ --cm-duration-fast: 120ms; --cm-duration-reduced: 1ms; --cm-easing: cubic-bezier(0.2, 0, 0, 1); /* Lines and focus */ --cm-border-width: 1px; --cm-focus-width: 3px; --cm-focus-offset: 2px; --cm-rule-width: 3px; /* Line heights */ --cm-leading-tight: 1.12; --cm-leading-snug: 1.35; --cm-leading-base: 1.65; /* Weights */ --cm-weight-normal: 400; --cm-weight-medium: 500; --cm-weight-semibold: 600; --cm-weight-bold: 700; /* Tracking — wide = tables/meta; eyebrow = design 0.08em labels */ --cm-tracking-tight: -0.01em; --cm-tracking-wide: 0.04em; --cm-tracking-eyebrow: 0.08em; /* Radii — theme.json border.radius is false, so these live here */ --cm-radius-s: 0.375rem; --cm-radius-m: 0.75rem; --cm-radius-l: 1.25rem; /* Shadows */ --cm-shadow-s: 0 1px 2px rgba(36, 31, 26, 0.06); --cm-shadow-m: 0 10px 30px -14px rgba(36, 31, 26, 0.22); /* Widths */ --cm-measure-article: 40rem; --cm-grid-min: 14rem; --cm-table-min: 34rem; --cm-viewport-min: 100svh; /* Tint strengths, so colour-mix percentages are not scattered literals */ --cm-tint-rule: 18%; --cm-tint-border: 22%; --cm-tint-head: 12%; --cm-tint-underline: 45%; --cm-tint-hover: 82%; --cm-tint-quote: 90%; --cm-tint-body: 88%; --cm-tint-glass: 88%; --cm-tint-mark-ring: 70%; /* Stacking */ --cm-z-header: 50; --cm-z-skip-link: 200; } /* --- 2. Reset --- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: none; scroll-behavior: smooth; } body { min-height: var(--cm-viewport-min); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* * German sizing constraint: Substratbeutelherstellungsverfahren is 34 chars * with no break opportunity and overflows at 320px without help. hyphens works * because is set in header.php. */ p, li, dd, dt, figcaption, td, th, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { hyphens: auto; text-wrap: balance; } p { text-wrap: pretty; } :target { scroll-margin-block-start: var(--wp--preset--spacing--l); } /* * The design has no reduced-motion block. Ours is kept and the design extended * into it, per SPEC §6 — a requirement, not a preference. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: var(--cm-duration-reduced) !important; animation-iteration-count: 1 !important; transition-duration: var(--cm-duration-reduced) !important; scroll-behavior: auto !important; } } /* --- 3. Element defaults --- */ body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--m); font-weight: var(--cm-weight-normal); line-height: var(--cm-leading-base); } h1, h2, h3, h4, h5, h6 { font-family: var(--wp--preset--font-family--heading); font-weight: var(--cm-weight-medium); letter-spacing: var(--cm-tracking-tight); line-height: var(--cm-leading-tight); } h1 { font-size: var(--wp--preset--font-size--xxxl); } h2 { font-size: var(--wp--preset--font-size--xl); } h3 { font-size: var(--wp--preset--font-size--l); } h4 { font-size: var(--wp--preset--font-size--m); line-height: var(--cm-leading-snug); } h5, h6 { font-size: var(--wp--preset--font-size--s); line-height: var(--cm-leading-snug); } a { color: var(--wp--preset--color--primary); text-decoration-color: color-mix(in oklab, var(--wp--preset--color--primary) var(--cm-tint-underline), transparent); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; transition: color var(--cm-duration-fast) var(--cm-easing); } a:hover { color: color-mix(in oklab, var(--wp--preset--color--primary) var(--cm-tint-hover), var(--wp--preset--color--contrast)); text-decoration-color: currentColor; } /* One focus style, :focus-visible so pointer users never see it. */ :focus-visible { outline: var(--cm-focus-width) solid var(--wp--preset--color--accent); outline-offset: var(--cm-focus-offset); border-radius: var(--cm-radius-s); } strong, b { font-weight: var(--cm-weight-semibold); } em, i { font-style: italic; } /* * --- Prose flow --- * * `* { margin: 0 }` zeroes everything, so long-form content needs its vertical * rhythm putting back. This was missed in the Step 3 port: the design carries it * on `.article__body p { margin-top }` and friends, and mapping those rules onto * element selectors brought the type scale across but left the spacing behind. * Every article rendered flush until an article fixture finally existed to show * it. * * flex + gap, not `> * + *` — that idiom is a positional selector (rule 2), and * gap cannot collapse, so the rhythm does not change when a block is reordered. * Headings then add their own extra space above, which flex margins do not * collapse away. * * Scoped to the content wrapper so it never touches block-composed pages, whose * spacing is each block's own padding (rule 3). */ .entry-content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--m); } .entry-content h2 { margin-block-start: var(--wp--preset--spacing--l); } .entry-content h3 { margin-block-start: var(--wp--preset--spacing--m); } /* * Lists as a flex column with gap, which is also what removes the need for a * positional `li + li` rule (CSS rule 2). */ ul, ol { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); padding-inline-start: var(--wp--preset--spacing--l); } li::marker { color: var(--wp--preset--color--primary); } ol > li::marker { font-weight: var(--cm-weight-bold); } blockquote { border-inline-start: var(--cm-rule-width) solid var(--wp--preset--color--primary); color: color-mix(in oklab, var(--wp--preset--color--contrast) var(--cm-tint-quote), var(--wp--preset--color--base)); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xl); font-style: italic; line-height: var(--cm-leading-snug); padding-block: var(--wp--preset--spacing--m); padding-inline-start: var(--wp--preset--spacing--l); } blockquote cite { color: var(--wp--preset--color--secondary); display: block; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--s); font-style: normal; font-weight: var(--cm-weight-semibold); margin-block-start: var(--wp--preset--spacing--s); } hr { border: 0; border-block-start: var(--cm-border-width) solid color-mix(in oklab, var(--wp--preset--color--secondary) var(--cm-tint-rule), transparent); } code, pre, kbd, samp { font-family: monospace; font-size: var(--wp--preset--font-size--s); } figcaption, .wp-element-caption { color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--s); font-style: italic; margin-block-start: var(--wp--preset--spacing--xs); } /* * Tables. Core wraps them in
, which is where * the scroll and frame belong — the design's .article__table-wrap. */ .wp-block-table { border: var(--cm-border-width) solid color-mix(in oklab, var(--wp--preset--color--secondary) var(--cm-tint-border), transparent); border-radius: var(--cm-radius-m); overflow-x: auto; } table { background-color: var(--wp--preset--color--surface); border-collapse: collapse; font-size: var(--wp--preset--font-size--s); min-inline-size: var(--cm-table-min); width: 100%; } caption { color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--xs); padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m); text-align: start; } th, td { border-block-end: var(--cm-border-width) solid color-mix(in oklab, var(--wp--preset--color--secondary) var(--cm-tint-rule), transparent); padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m); text-align: start; vertical-align: top; } thead th { background-color: color-mix(in oklab, var(--wp--preset--color--accent) var(--cm-tint-head), var(--wp--preset--color--surface)); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--xs); letter-spacing: var(--cm-tracking-wide); text-transform: uppercase; } tbody th { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); font-weight: var(--cm-weight-semibold); } input, textarea, select { background-color: var(--wp--preset--color--base); border: var(--cm-border-width) solid color-mix(in oklab, var(--wp--preset--color--secondary) var(--cm-tint-border), transparent); border-radius: var(--cm-radius-s); color: var(--wp--preset--color--contrast); max-width: 100%; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s); } button, .btn { background-color: var(--wp--preset--color--primary); border: var(--cm-border-width) solid var(--wp--preset--color--primary); border-radius: var(--cm-radius-s); color: var(--wp--preset--color--base); cursor: pointer; display: inline-block; font-weight: var(--cm-weight-semibold); padding-block: var(--wp--preset--spacing--xs); padding-inline: var(--wp--preset--spacing--m); text-decoration: none; transition: background-color var(--cm-duration-fast) var(--cm-easing), border-color var(--cm-duration-fast) var(--cm-easing); } button:hover, .btn:hover { background-color: color-mix(in oklab, var(--wp--preset--color--primary) var(--cm-tint-hover), var(--wp--preset--color--contrast)); border-color: transparent; color: var(--wp--preset--color--base); } /* Ghost variant — the design's second hero button. */ .btn--ghost { background-color: transparent; border-color: color-mix(in oklab, var(--wp--preset--color--secondary) var(--cm-tint-border), transparent); color: var(--wp--preset--color--contrast); } .btn--ghost:hover { background-color: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } /* --- 4. Utilities. Deliberately few; not a utility framework. --- */ .container { margin-inline: auto; max-width: var(--wp--style--global--content-size); padding-inline: var(--wp--preset--spacing--m); width: 100%; } /* Article measure — long-form prose is narrower than the grid container. */ .measure { margin-inline: auto; max-width: var(--cm-measure-article); width: 100%; } .stack { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--m); } .visually-hidden:not(:focus):not(:active) { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .skip-link { background-color: var(--wp--preset--color--base); border-radius: var(--cm-radius-s); color: var(--wp--preset--color--primary); inset-block-start: 0; inset-inline-start: 0; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s); position: absolute; transform: translateY(-100%); z-index: var(--cm-z-skip-link); } .skip-link:focus { transform: translateY(0); }