/* * Thornwick Law — the site CSS layer. * * Loaded twice on purpose: the parent enqueues it on the front end and mirrors * it into the editor canvas via add_editor_style(), so both surfaces read the * same rules. See the child-starter README for the full contract. * * Everything kept here is something a g/* block cannot express through * cpStyleIntent: it targets the document, a pseudo-element, or a bare tag * inside RichText content. Anything a block CAN express belongs on the block, * where whoever opens the editor next can see it. * * Nothing here is a workaround any more. The four rules that used to be — * nav spacing, image sizing, the submit button, the consent banner — went away * when TW-9/10/11/14 landed and the blocks could express them directly. * * ── Why every rule below sits in `@layer cp-base` ────────────────────────── * * g-theme opts into `g-box-layered-css`, so the atomic stylesheet is wrapped in * `@layer cp-plugin` and the emitted order is: * * @layer cp-base, cp-plugin; → cp-base < cp-plugin < unlayered * * An UNLAYERED rule therefore beats every authored atom no matter how weak its * selector is. That is correct for a theme that genuinely needs the last word, * and wrong for everything in this file, which is baseline. Left unlayered, a * one-line `a { color: inherit }` silently beat `.cp-c-shell` on the header CTA * and painted the label the same colour as its own background — the class was * in the markup, the rule was in the stylesheet, and the button rendered blank. * * So these rules join the plugins' own baseline layer. If something here ever * genuinely has to outrank an authored atom, take it out of the layer — and say * why in a comment. */ @layer cp-base { /* * Page ground + base typography. * * These live here rather than on the shell g/container because the post * editor renders post content WITHOUT the template shell — put them on the * container and the canvas falls back to the browser's serif default while * the front end is DM Sans. add_editor_style() retargets `body` to * `.editor-styles-wrapper`, so the canvas picks them up as-is. */ body { background: #E9E9E6; color: #111311; font-family: "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* * Anchor jumps glide instead of teleporting. * * This has to be a document rule: `scroll-behavior` applies to the element * that actually scrolls, and no block maps to . The matching offset — * `scroll-margin-top`, so a target does not land under the sticky header — * IS a block property and is authored on each anchored section. * * Honoured only when the visitor has not asked for less motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* * The hero's stat card sits at a negative `left` and is allowed to bleed * past the shell edge rather than widen the page. * * `clip`, never `hidden`: overflow-x:hidden on an ancestor forces the y axis * to `auto` and silently kills position:sticky on every descendant — which * is exactly what the sticky header relies on. The design's own wrapper uses * `overflow-x: clip` for the same reason. */ .wp-site-blocks { overflow-x: clip; } /* * Links inherit their colour so one rule serves both the light shell and * the dark footer; only the hover tint is global, as in the design. */ a { color: inherit; text-decoration: none; } a:hover { color: #9C7A43; } ::selection { background: #C3A472; color: #111311; } /* * Emphasis inside a heading is the design's one inline accent — "for the * *real* world". It has to be a tag rule: the lives inside RichText * content, which carries no block attributes of its own. */ :where(h1, h2, h3) em { font-style: italic; color: #9C7A43; } /* * The "yrs" in the hero's 32yrs stat card. Same reason as the above: * a span inside RichText, with no block of its own to carry a style. */ .tw-sup { font-size: 22px; vertical-align: super; } /* * ── The FAQ toggle mark ─────────────────────────────────────────────── * * A hairline cross that turns into an × when its item opens. Two bars of * 1px, drawn as blocks; g/accordion's own toggle icon is a stroked Tabler * glyph, which is a heavier mark than the design draws. * * The rotation cannot be authored on the block: the engine's states apply * to the element carrying the class, and here the trigger (`is-open`) sits * on the accordion ITEM while the thing that turns is a descendant. * `group-hover` is the only ancestor combinator the engine has, and it is * hover-only. Not a gap — just the one shape of rule the atomic model does * not cover. */ .tw-plus { transition: transform 200ms ease; } .g-accordion-item.is-open .tw-plus { transform: rotate(45deg); } /* * The design's labels carry no required marker, so the asterisk g-form adds * after them is hidden. Nothing is lost by it: the span is already * `aria-hidden="true"`, and the control keeps its own `required` attribute — * validation, the browser's own prompt and assistive tech are untouched. * This hides a decoration, it does not make a required field optional. */ .gform-field__req { display: none; } }