/* Theme Name: diginom Theme URI: https://diginom.io Author: DigiNom Description: Bespoke theme for DigiNom — business, technology and digital transformation consultancy. Light by default with an explicit dark mode toggle. Built from the approved 2026 mockup. Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: diginom WPVibe: yes */ /* =========================================================================== 0. FONTS — deliberately NOT here The @font-face rules live in diginom_inline_font_face() in functions.php and print inline in . They were in this file, which still left them one hop behind: the browser had to fetch and parse this stylesheet before it could discover the font URLs. Inline, the fetch starts as the HTML parses. If a font ever stops loading, that function is where to look — not here. =========================================================================== */ /* =========================================================================== 1. DESIGN TOKENS — LIGHT (default) The 17 tokens below are the entire difference between light and dark. Dark overrides live in section 2. Never hard-code a colour outside here. =========================================================================== */ :root { --bg: #FFFFFF; --bg-alt: #F4F7FB; --surface: #FFFFFF; --surface-border: #E2E8F0; --text: #1A2433; --text-muted: #5B6B82; --navy: #1F3864; --accent: #2E75B6; --accent-soft: #EAF1FA; --divider: #E2E8F0; --nav-bg: rgba(255,255,255,0.85); --shadow: 0 10px 30px rgba(31,56,100,0.08); --shadow-hover: 0 16px 40px rgba(31,56,100,0.14); --btn-shadow: 0 8px 20px rgba(46,117,182,0.25); --btn-shadow-hover: 0 12px 26px rgba(46,117,182,0.35); --col-fill: #E4ECF7; --foundation-glow: drop-shadow(0 6px 16px rgba(46,117,182,0.35)); --font-display: 'Space Grotesk', 'Arial Black', 'Helvetica Neue', sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; /* Logo depth ramp. The mark's gradients read these, so one inline SVG renders correctly in both themes instead of shipping two files. */ --logo-hi: #5C9BDC; --logo-mid: #2E75B6; --logo-lo: #1B3159; /* ------------------------------------------------------------------------- LAYOUT TOKENS These live here, with the colour tokens, because they are used from section 3 onwards — not just by the long-form components where they were first written. Vertical rhythm. Three steps, not nine: tight — items inside one group (.lens) block — a standalone feature sitting in the prose section — a page-level break; matches the h2 top margin (51.84px), already the strongest rhythm signal on the page. Radius answers one question: is this a container? Two steps, both perceptible. There is deliberately no third step — an earlier 18px tier sat between these and read as drift rather than intent, because nobody can see 2px. block — a normal container: cards, in-prose blocks, images panel — an oversized or full-bleed panel, where a larger radius is proportionate rather than arbitrary Small chrome (code blocks, dropdowns, icon tiles, inputs) keeps its own smaller radii; those are a different scale, not the container scale. ------------------------------------------------------------------------- */ --flow-tight: 22px; --flow-block: 36px; --flow-section: 52px; --rule: 4px; --radius-block: 16px; --radius-panel: 20px; /* Space above and below a full-width section. Adjacent sections each contribute this, so the gap a reader actually sees is DOUBLE the value — which is why it was previously 168px: two sections at 84px apiece. Set this against the gap you want to see, then halve it. */ --section-pad: clamp(30px, 3.2vw, 40px); /* Space between a page hero and the copy beneath it. Smaller than --section-pad because the hero is already a deliberate visual stop; the copy should feel attached to it, not adrift below it. */ --hero-gap: clamp(28px, 3.6vw, 44px); } /* =========================================================================== 2. DESIGN TOKENS — DARK Applied only when the visitor explicitly opts in (html[data-theme="dark"]). Light stays the default for first-time visitors, per the approved design. To follow the visitor's OS preference instead, see the note in header.php. =========================================================================== */ :root[data-theme="dark"] { --bg: #0B1220; --bg-alt: #101B2E; --surface: #121D33; --surface-border: #23324E; --text: #E7ECF5; --text-muted: #93A3BE; --navy: #FFFFFF; --accent: #5B9BE0; --accent-soft: rgba(91,155,224,0.14); --divider: #23324E; --nav-bg: rgba(11,18,32,0.82); --shadow: 0 10px 30px rgba(0,0,0,0.45); --shadow-hover: 0 18px 44px rgba(0,0,0,0.55); --btn-shadow: 0 8px 22px rgba(91,155,224,0.35); --btn-shadow-hover: 0 14px 30px rgba(91,155,224,0.45); --col-fill: #1B2A45; --foundation-glow: drop-shadow(0 0 22px rgba(91,155,224,0.55)); /* Lifted and brighter on dark — the light-theme ramp goes muddy against #0B1220, and the cast shadow does almost no work there. */ --logo-hi: #BBD9F7; --logo-mid: #6FA9E4; --logo-lo: #2E5C96; } /* Dark-only structural tweaks (the hero glow needs more presence on dark). */ :root[data-theme="dark"] .hero::before { height: 620px; background: radial-gradient(55% 55% at 50% 8%, rgba(91,155,224,0.22), transparent 72%); } :root[data-theme="dark"] .diff-card, :root[data-theme="dark"] .pillar-card, :root[data-theme="dark"] .foundation { background: var(--surface); } /* The node-flash keyframe flashes to white, which is invisible on a dark surface — flash to the pale surface tone instead. */ :root[data-theme="dark"] .net-node-primary { animation-name: nodeFlashDark; } @keyframes nodeFlashDark { 0%, 100% { fill: var(--accent); } 50% { fill: #E7ECF5; } } /* Colour-scheme hint so form controls, scrollbars and the caret follow suit. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* =========================================================================== 3. BASE =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); color: var(--navy); margin: 0 0 .5em; line-height: 1.15; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 700; } h3 { font-size: 1.12rem; font-weight: 600; } p { margin: 0 0 1em; color: var(--text); } a { color: inherit; } ul { margin: 0; padding: 0; list-style: none; } .accent-text { color: var(--accent); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .6em 1em; z-index: 200; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .section-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9em; font-weight: 600; } .section-lead { max-width: 640px; color: var(--text-muted); font-size: 1.05rem; } .footnote { font-size: .82rem; color: var(--text-muted); font-style: italic; margin-top: .6em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.6em; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; /* Most buttons here are , which has no default border — but a real