/** * Darkhorse — design system. * * Rules of the house: * * 1. LOW SPECIFICITY. Every component selector is a single class (0,1,0) or a * class + element. Final Blocks' per-element styling engine emits doubled * uid selectors (0,2,0), so anything a user changes in the editor wins over * this file without !important. Never break that contract. * * 2. SAME BREAKPOINTS AS THE ENGINE. Tablet ≤ 1024px, mobile ≤ 767px — the * exact media queries Final Blocks generates, so theme responsiveness and * user overrides always agree on where "tablet" and "mobile" begin. * * 3. SEMANTIC TOKENS. Components read --dh-* vars, which map to theme.json * presets on :root. Style variations recolor the entire system by swapping * the palette; `.dh-invert` flips a subtree to on-dark colors locally. * * 4. MOTION IS OPT-IN AND RESPECTFUL. Scroll reveals only engage when the * runtime adds `.dh-js` to ; everything animates from a visible * default and honors prefers-reduced-motion. * * Index: * 1. Tokens 6. Header & navigation 11. Blog & query * 2. Base 7. Footer 12. Comments * 3. Layout 8. Heroes & decor 13. Forms & search * 4. Typography 9. Effects & motion 14. Utilities * 5. Buttons 10. Components (cards, * badges, accordion, * pricing, marquee…) */ /* ====================================================================== * * 1. Tokens * ====================================================================== */ :root { /* Fallbacks mirror theme.json — if preset emission ever changes scope or a variation omits a slug, components stay visible instead of resolving to `initial` (the invisible-primary-button bug class). */ --dh-bg: var(--wp--preset--color--base, #ffffff); --dh-text: var(--wp--preset--color--contrast, #0e0f13); --dh-muted: var(--wp--preset--color--muted, #5a5f6a); --dh-primary: var(--wp--preset--color--primary, #4353ff); --dh-accent: var(--wp--preset--color--accent, #9c4dff); --dh-surface: var(--wp--preset--color--surface, #f5f6f8); --dh-line: var(--wp--preset--color--outline, #e5e7ec); --dh-gradient: var(--wp--preset--gradient--brand, linear-gradient(135deg, #4353ff 0%, #9c4dff 100%)); --dh-radius-s: var(--wp--custom--radius--s); --dh-radius-m: var(--wp--custom--radius--m); --dh-radius-l: var(--wp--custom--radius--l); --dh-radius-xl: var(--wp--custom--radius--xl); --dh-ease: var(--wp--custom--ease); --dh-speed: var(--wp--custom--speed); --dh-shadow-sm: var(--wp--preset--shadow--sm); --dh-shadow-md: var(--wp--preset--shadow--md); --dh-shadow-lg: var(--wp--preset--shadow--lg); --dh-shadow-glow: var(--wp--preset--shadow--glow); --dh-header-h: var(--wp--custom--header-height); --dh-gutter: var(--wp--custom--gutter); /* On-primary text — the book's contract: BASE on filled/gradient controls (dark-on-neon for dark styles, light-on-color for light ones). Hardcoded #fff was unreadable on Arcade's gradient. */ --dh-on-primary: var(--wp--preset--color--base, #fff); /* Placeholder / empty-select: 35% of the field's own text color. currentcolor resolves on the element that uses the token. */ --dh-placeholder: color-mix(in srgb, currentcolor 35%, transparent); /* Alias of core's admin-bar offset — 0 when the bar is absent. */ --dh-admin-bar: var(--wp-admin--admin-bar--height, 0px); } /* Flip a subtree to on-dark colors (ink heroes, dark footers, media overlays). Components below only ever read the vars, so this one class restyles all of them at once. */ .dh-invert { --dh-bg: transparent; --dh-text: #fff; --dh-muted: rgba(255, 255, 255, 0.72); --dh-surface: rgba(255, 255, 255, 0.06); --dh-line: rgba(255, 255, 255, 0.16); color: var(--dh-text); } /* ====================================================================== * * 2. Base * ====================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--dh-header-h) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { max-width: 100%; height: auto; } :where(a) { text-underline-offset: 0.2em; } :focus-visible { outline: 2px solid var(--dh-primary); outline-offset: 2px; border-radius: 2px; } ::selection { background: color-mix(in srgb, var(--dh-primary) 22%, transparent); } /* Theme-owned fields only — Final Blocks paints its own placeholder from --fb-color-placeholder. Opacity 1 stops Firefox compounding its UA 0.54 fade on top of an already-faded mix. */ :where(input, textarea):not(.wp-block-final-block)::placeholder { color: var(--dh-placeholder); opacity: 1; } :where(input, textarea):not(.wp-block-final-block)::-moz-placeholder { color: var(--dh-placeholder); opacity: 1; } /* Accessible skip link (printed by the theme before the page). */ .dh-skip-link { position: absolute; top: -100%; left: 16px; z-index: 100000; padding: 10px 18px; background: var(--dh-text); color: var(--dh-bg); border-radius: var(--dh-radius-s); font-weight: 600; text-decoration: none; } .dh-skip-link:focus { top: 16px; } /* ====================================================================== * * 3. Layout * ====================================================================== */ /* Full-height canvas: every page is at least the viewport tall — the site frame is a flex column and

absorbs the slack, so short pages pin the footer to the bottom (and, with no footer, content grows to the bottom edge; with no header, from the top). Blank-canvas templates (landing) opt out via their template body class — they own the whole viewport themselves. */ body:not(.page-template-page-landing) .wp-site-blocks { display: flex; flex-direction: column; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); } body:not(.page-template-page-landing) .wp-site-blocks > main { flex: 1 0 auto; } /* Sections own their whitespace — the frame never forces it. WP bakes theme.json's blockGap into LITERAL margins between every layout child (it never reads --wp--style--block-gap back), so the site frame (header / mounts / main / footer), the bands inside

, and top-level sections in post-content all got 1.5rem wedges nobody asked for — two empty mount divs alone cost 3rem under the header. Frame pieces and main's bands stack flush (their padding IS their spacing). Post-content is a BLOCKLIST, not an allowlist: every direct child stacks flush (Final Blocks sections, core groups, covers, any third-party section — FB even interleaves sibling