@charset "UTF-8"; @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-wght-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-serif-latin-500-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-serif-latin-600-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-700-italic.woff2") format("woff2"); } :root { --font-sans: "IBM Plex Sans", sans-serif; --font-serif: "IBM Plex Serif", serif; --font-mono: "IBM Plex Mono", monospace; --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --font-size-sm: clamp(0.875rem, 0.85rem + 0.25vw, 1rem); --font-size-base: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --font-size-r: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --font-size-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --font-size-lg: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); --font-size-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); --font-size-2xl: clamp(2.25rem, 2rem + 1.5vw, 3rem); --font-size-3xl: clamp(3rem, 2.5rem + 2vw, 4rem); --text-display: var(--font-size-3xl); --text-h1: var(--font-size-2xl); --text-h2: var(--font-size-xl); --text-h3: var(--font-size-lg); --text-lede: var(--font-size-md); --text-body: var(--font-size-base); --text-caption: var(--font-size-sm); --text-meta: var(--font-size-xs); --line-height-tight: 1; --line-height-base: 1.5; --line-height-relaxed: 1.75; --line-height-loose: 2; --line-height-text: 1.5; --line-height-reading: 1.6; --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --spacing-3xs: clamp(0.25rem, 0.12vi + 0.22rem, 0.31rem); --spacing-2xs: clamp(0.375rem, 0.18vi + 0.34rem, 0.5rem); --spacing-xs: clamp(0.5rem, 0.23vi + 0.44rem, 0.63rem); --spacing-s: clamp(0.75rem, 0.34vi + 0.67rem, 0.94rem); --spacing-r: clamp(1rem, 0.46vi + 0.89rem, 1.25rem); --spacing-m: clamp(1.5rem, 0.68vi + 1.34rem, 1.88rem); --spacing-l: clamp(2rem, 0.91vi + 1.78rem, 2.5rem); --spacing-xl: clamp(3rem, 1.37vi + 2.67rem, 3.75rem); --spacing-2xl: clamp(4rem, 1.82vi + 3.56rem, 5rem); --spacing-3xl: clamp(6rem, 2.73vi + 5.34rem, 7.5rem); --space-hero: var(--spacing-3xl); --space-section: var(--spacing-2xl); --space-stack-xl: var(--spacing-xl); --space-stack-l: var(--spacing-l); --space-block: var(--spacing-m); --space-paragraph: var(--spacing-r); --space-base: var(--spacing-r); --space-roomy: var(--spacing-m); --space-compact: var(--spacing-s); --space-tight: var(--spacing-xs); --space-editorial-breath: clamp(1.75rem, 0.8vi + 1.56rem, 2.19rem); --space-pull-quote-inset: var(--spacing-l); --space-caption-gap: var(--spacing-s); --space-byline-stack: var(--spacing-xs); --space-drop-cap-gap: 0.1em; --space-reading-margin: var(--spacing-3xl); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --border-width-thin: 1px; --border-width-base: 2px; --border-width-thick: 4px; --border-radius-sm: 0.25rem; --border-radius-base: 0.5rem; --border-radius-md: 0.75rem; --border-radius-lg: 1rem; --border-radius-full: 9999px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-green: 0 4px 6px -1px rgb(42 122 79 / 0.2), 0 2px 4px -2px rgb(42 122 79 / 0.15); --shadow-blue: 0 4px 6px -1px rgb(74 124 157 / 0.2), 0 2px 4px -2px rgb(74 124 157 / 0.15); --z-index-base: 0; --z-index-dropdown: 100; --z-index-sticky: 200; --z-index-fixed: 300; --z-index-modal-backdrop: 400; --z-index-modal: 500; --z-index-popover: 600; --z-index-tooltip: 700; --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; --transition-slower: 500ms ease-in-out; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --measure-text: 65ch; --measure-text-wide: 80ch; --measure-text-narrow: 48ch; --measure-content: 42rem; --measure-wide: 58rem; --measure-narrow: 32rem; --layout-max: 80rem; --container-max-width: var(--layout-max); --content-max-width: var(--measure-text); --gap: var(--spacing-r); --gap-row: var(--spacing-r); --gap-column: var(--spacing-m); --gap-tight: var(--spacing-xs); --gap-roomy: var(--spacing-l); --grid-compound-6-4: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; --grid-compound-4-3: 3fr 1fr 2fr 2fr 3fr 1fr; --grid-compound-5-4: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr; --gap-compound: var(--spacing-xs); --gap-compound-roomy: var(--spacing-s); --blue-700: #14578e; --blue-500: #2688d8; --blue-300: #53a1eb; --blue-100: #deebf6; --coral-900: #5a1414; --coral-700: #b8362f; --coral-500: #ff5757; --coral-300: #ff8a8a; --coral-100: #ffe1e1; --orange-950: #2a1a00; --orange-700: #964e1c; --orange-500: #d97e3a; --yellow-500: #e5b547; --lime-500: #abc05a; --lime-300: #81be41; --logo-green: #597333; --cyan-500: #58d0e8; --cyan-300: #7dddf0; --night-sky-900: #0f2a45; --night-sky-800: #121828; --night-sky-700: #1a2238; --night-sky-500: #3d4a6e; --mist-200: #eaecf5; --mist-400: #9ca0b8; --dark-purple-900: #0f0e2e; --dark-purple-700: #1e1c4a; --dark-purple-500: #282658; --dark-purple-300: #6b68a8; --dark-purple-100: #d0cfea; --purple-900: #1c0d20; --purple-700: #4e2560; --purple-500: #7a3b88; --purple-300: #b07abd; --purple-100: #e8d5ed; --pink-700: #c4508a; --pink-600: #f068a8; --pink-500: #ef8bc1; --pink-300: #f6b8d9; --pink-100: #fce8f3; --parrot-green-950: #0f2a1a; --parrot-green-900: #253718; --parrot-green-700: #4a6e34; --parrot-green-500: #669749; --parrot-green-300: #8fb870; --parrot-green-100: #d5e8c8; --gray-900: #2d2b28; --gray-700: #4d4a45; --gray-600: #6b6660; --gray-100: #f8f7f6; --gray-50: #faf9f9; --white: #ffffff; } body:not(.wp-admin), .editor-styles-wrapper { /* SURFACES */ --surface: var(--night-sky-800); --surface-alt: var(--night-sky-700); /* TEXT */ --text: var(--mist-200); --text-subtle: var(--mist-400); /* HEADINGS — bright accent for dark mode pop */ --heading-color: var(--lime-300); /* STRUCTURE */ --border: var(--night-sky-500); /* INTERACTION */ --accent-primary: var(--lime-300); --accent-secondary: var(--coral-500); --accent-link: var(--cyan-500); --wp--preset--color--surface: var(--surface); --wp--preset--color--surface-alt: var(--surface-alt); --wp--preset--color--text: var(--text); --wp--preset--color--text-subtle: var(--text-subtle); --wp--preset--color--accent-primary: var(--accent-primary); --wp--preset--color--accent-secondary: var(--accent-secondary); --wp--preset--color--accent-link: var(--accent-link); --card-bg: var(--night-sky-500); --card-border: transparent; --card-text: var(--text); --card-accent: var(--accent-secondary); --card-padding: var(--space-roomy); --card-gap: var(--space-compact); --card-border-radius: var(--border-radius-md); --card-border-width: 2px; --card-featured-padding: var(--space-section); --card-featured-gap: var(--space-block); --card-horizontal-image-width: 40%; --card-horizontal-min-height: 280px; --button-bg: var(--blue-500); --button-text: var(--night-sky-800); --button-hover: var(--blue-300); --button-secondary-bg: var(--accent-link); --button-secondary-hover: var(--cyan-300); --link-color: var(--cyan-500); --link-hover: var(--cyan-300); --link-active: var(--cyan-500); --alert-info-bg: var(--night-sky-900); --alert-info-text: var(--cyan-500); --alert-success-bg: var(--parrot-green-950); --alert-success-text: var(--lime-300); --alert-warning-bg: var(--orange-950); --alert-warning-text: var(--yellow-500); --nav-bg: var(--parrot-green-900); --nav-text: var(--white); --nav-link-bg: var(--parrot-green-700); --nav-link-bg-hover: var(--parrot-green-500); --nav-link-active-bg: var(--blue-700); --badge-bg: var(--accent-secondary); --badge-text: var(--surface); --tag-bg: var(--coral-500); --tag-text: var(--surface); --interactive-min-touch: 44px; } html[data-theme=light] body:not(.wp-admin) { --surface: var(--white); --surface-alt: var(--gray-50); --text: var(--gray-900); --text-subtle: var(--gray-700); --heading-color: var(--parrot-green-700); --border: var(--dark-purple-300); --accent-primary: var(--parrot-green-700); --accent-secondary: var(--coral-700); --accent-link: var(--blue-700); --card-bg: var(--gray-50); --card-border: var(--dark-purple-300); --button-bg: var(--coral-700); --button-text: var(--white); --button-hover: var(--coral-900); --button-secondary-bg: var(--parrot-green-700); --button-secondary-hover: var(--parrot-green-500); --link-color: var(--blue-700); --link-hover: var(--blue-500); --link-active: var(--blue-700); --alert-info-bg: var(--blue-100); --alert-info-text: var(--blue-700); --alert-success-bg: var(--parrot-green-100); --alert-success-text: var(--parrot-green-900); --alert-warning-bg: var(--yellow-500); --alert-warning-text: var(--gray-900); --badge-text: var(--white); --tag-text: var(--white); --tag-bg: var(--coral-700); --focus-ring-color: var(--parrot-green-700); } .theme-toggle-container { padding-block: var(--spacing-m); border-top: 1px solid var(--border); text-align: center; } .theme-toggle { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: transparent; border: 2px solid var(--accent-primary); color: var(--accent-primary); padding: 0.5em 1.25em; border-radius: var(--border-radius-base); cursor: pointer; font-size: var(--font-size-sm); font-family: var(--font-sans); transition: var(--transition-fast); } .theme-toggle:hover { background-color: var(--accent-primary); color: var(--surface); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; } .theme-toggle__note { font-size: var(--font-size-xs); color: var(--text-subtle); margin-top: var(--spacing-xs); margin-bottom: 0; } @media (prefers-contrast: high) { body:not(.wp-admin) { --text-high-contrast: #000000; --text-subtle-high-contrast: #1a1a1a; --accent-high-contrast: #004d00; --accent-link-high-contrast: #003366; --border-high-contrast: #000000; --text: var(--text-high-contrast); --text-subtle: var(--text-subtle-high-contrast); --accent-primary: var(--accent-high-contrast); --accent-link: var(--accent-link-high-contrast); --border: var(--border-high-contrast); --focus-ring-width: 3px; --focus-ring-color: var(--accent-high-contrast); } } :root { --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--lime-300); --focus-ring-style: solid; } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0.01ms; --transition-base: 0.01ms; --transition-slow: 0.01ms; --transition-slower: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== TYPOGRAPHY SYSTEM — LOADED FONTS, WEIGHTS, & EDITORIAL INTENT -------------------------------------------------------------------------- Font families loaded via Google Fonts: --font-sans → "IBM Plex Sans" (variable: wght 100–700, roman + italic) --font-mono → "IBM Plex Mono" (static: 400 + 700, roman + italic) Hierarchy strategy — weight + tracking, not width: • Body / running text: 400, tracking normal • UI / nav / labels: 500, tracking wide • H5/H6: 500, tracking normal • H3/H4: 600, tracking tight • H1/H2: 700, tracking tighter • Eyebrow / data: IBM Plex Mono 400, tracking wider IBM Plex Mono used sparingly: • Eyebrows, data labels, metrics, policy numbers, citations • Avoid long passages in mono -------------------------------------------------------------------------- Global conventions: • Emphasis: italic — not semibold in body text • Sentence case preferred over ALL CAPS • Headings balance automatically (text-wrap: balance) ========================================================================== */ /* ========================================================================== Typography Utilities (custom properties + lightweight utility classes) Conventions: - Use 500 or italic for emphasis instead of bold in running text. - Use sentence case; avoid ALL CAPS. - Mono is restrained; bold mono only for short labels. -------------------------------------------------------------------------- Tokens in _tokens.scss: --font-sans: "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", monospace; ========================================================================== */ /* -------------------------------------------------------------------------- Typography tokens that extend _tokens.scss Editorial weight aliases, optical sizing, and baseline grid -------------------------------------------------------------------------- */ :root { /* Editorial weight aliases */ --font-weight-regular: 400; --font-weight-emphasis: 500; /* preferred in-text emphasis */ --font-weight-ui-strong: 600; /* headings h3/h4, sparingly */ --font-weight-mono-regular: 400; --font-weight-mono-strong: 700; /* mono labels only */ /* Baseline grid (vertical rhythm foundation) */ --baseline-grid: 0.25rem; --baseline-snap: calc(var(--baseline-grid) * 4); } /* -------------------------------------------------------------------------- Font-family utilities -------------------------------------------------------------------------- */ .u-font-sans { font-family: var(--font-sans); } .u-font-mono { font-family: var(--font-mono); } /* -------------------------------------------------------------------------- Weight utilities (use with intent) -------------------------------------------------------------------------- */ .u-font-regular { font-weight: var(--font-weight-regular); } .u-font-medium { font-weight: var(--font-weight-emphasis); } /* recommended emphasis */ .u-font-semibold { font-weight: var(--font-weight-ui-strong); } /* UI/headings only */ /* Mono-specific weights (match your pared-down load: 400 & 700) */ .u-font-mono-regular { font-weight: var(--font-weight-mono-regular); } .u-font-mono-bold { font-weight: var(--font-weight-mono-strong); } /* short labels only */ /* -------------------------------------------------------------------------- Italic utilities -------------------------------------------------------------------------- */ .u-font-roman { font-style: normal; } .u-font-italic { font-style: italic; } /* -------------------------------------------------------------------------- Mono role utilities — IBM Plex Mono for data, labels, eyebrows -------------------------------------------------------------------------- */ .u-font-mono-eyebrow { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 400; letter-spacing: var(--tracking-wider); text-transform: uppercase; } .u-font-mono-data { font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 400; letter-spacing: var(--tracking-wide); } /* -------------------------------------------------------------------------- Tracking (letter spacing) utilities -------------------------------------------------------------------------- */ /* Legacy tracking utilities */ .u-font-track-tight { letter-spacing: var(--font-tracking-tight); } .u-font-track-normal { letter-spacing: var(--font-tracking-normal); } .u-font-track-loose { letter-spacing: var(--font-tracking-loose); } /* Editorial tracking scale */ .u-tracking-tighter { letter-spacing: var(--tracking-tighter); } .u-tracking-tight { letter-spacing: var(--tracking-tight); } .u-tracking-normal { letter-spacing: var(--tracking-normal); } .u-tracking-wide { letter-spacing: var(--tracking-wide); } .u-tracking-wider { letter-spacing: var(--tracking-wider); } .u-tracking-widest { letter-spacing: var(--tracking-widest); } /* Uppercase with proper tracking */ .u-text-uppercase-tracked { text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: var(--font-weight-emphasis); } /* -------------------------------------------------------------------------- Leading utilities -------------------------------------------------------------------------- */ /* Legacy leading utilities */ .u-font-leading-body { line-height: var(--font-leading-body); } .u-font-leading-tight { line-height: var(--font-leading-tight); } /* Editorial line-height scale */ .u-line-height-tight { line-height: var(--line-height-tight); } .u-line-height-base { line-height: var(--line-height-base); } .u-line-height-reading { line-height: var(--line-height-reading); } .u-line-height-relaxed { line-height: var(--line-height-relaxed); } .u-line-height-loose { line-height: var(--line-height-loose); } /* -------------------------------------------------------------------------- Editorial emphasis utilities (preferred patterns) -------------------------------------------------------------------------- */ /* Preferred emphasis for running text (Medium, not bold) */ .u-font-emphasis { font-weight: var(--font-weight-emphasis); } /* Alternative emphasis for running text (Italic) */ .u-font-emphasis-italic { font-style: italic; } /* Scientific names / titles (italic) */ .u-font-scientific { font-family: var(--font-sans); font-style: italic; } /* Quiet mono label (good for folios/captions/metadata) */ .u-font-label-mono { font-family: var(--font-mono); font-weight: var(--font-weight-mono-regular); letter-spacing: 0.02em; } /* Strong mono label (700, short only) */ .u-font-label-mono-strong { font-family: var(--font-mono); font-weight: var(--font-weight-mono-strong); letter-spacing: 0.02em; } /* -------------------------------------------------------------------------- Small composition helpers -------------------------------------------------------------------------- */ /* Sentence case safety: doesn't force title case, but avoids ALL CAPS styling */ .u-font-no-caps { text-transform: none; } /* Optional: prevent faux bold/italic in some browsers */ .u-font-synthesis-none { font-synthesis: none; } /* Helpful defaults for long-form blocks */ .u-prose { font-family: var(--font-sans); font-weight: 400; line-height: var(--line-height-reading); } /* UI block defaults */ .u-ui { font-family: var(--font-sans); font-weight: var(--font-weight-regular); line-height: 1.35; } .post-meta { font-size: var(--font-size-sm); } /* ========================================================================== EDITORIAL DESIGN ENHANCEMENTS Added: Display type, drop caps, baseline grid, pull quotes ========================================================================== */ /* -------------------------------------------------------------------------- Display Type Utilities (Art-Directed Headlines) -------------------------------------------------------------------------- */ /* Hero display — IBM Plex Sans Bold, tight tracking */ .u-text-display-hero { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-3xl); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tighter); text-wrap: balance; max-width: 20ch; } /* Large display — IBM Plex Sans Bold */ .u-text-display-large { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-2xl); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; max-width: 25ch; } /* Display sans — IBM Plex Sans SemiBold, slightly smaller */ .u-text-display-sans { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xl); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } /* -------------------------------------------------------------------------- Lede (Lead) Paragraph Styling -------------------------------------------------------------------------- */ /* Lead paragraph */ .u-text-lede { font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-md); line-height: var(--line-height-reading); letter-spacing: var(--tracking-normal); color: var(--text); max-width: var(--measure-text); } /* Lede with emphasis */ .u-text-lede-emphasis { font-family: var(--font-sans); font-weight: 500; font-size: var(--font-size-md); line-height: var(--line-height-reading); color: var(--text); max-width: var(--measure-text); } /* -------------------------------------------------------------------------- Drop Cap (Editorial First Letter) -------------------------------------------------------------------------- */ /* Classic drop cap - 3 lines tall */ .u-text-drop-cap::first-letter, .has-drop-cap:not(:focus)::first-letter { font-family: var(--font-sans); font-size: 3.5em; font-weight: 700; line-height: 0.85; float: left; margin: 0.1em 0.1em 0 0; color: var(--accent-primary); } /* Large drop cap - 4 lines tall */ .u-text-drop-cap-large::first-letter { font-family: var(--font-sans); font-size: 4.5em; font-weight: 700; line-height: 0.85; float: left; margin: 0.1em 0.15em 0 0; color: var(--accent-primary); } /* Sans drop cap variant */ .u-text-drop-cap-sans::first-letter { font-family: var(--font-sans); font-size: 3.5em; font-weight: var(--font-weight-ui-strong); line-height: 0.85; float: left; margin: 0.1em 0.1em 0 0; color: var(--accent-primary); } /* -------------------------------------------------------------------------- Baseline Grid Support (Vertical Rhythm) -------------------------------------------------------------------------- */ /* Snap element to baseline grid */ .u-baseline-snap { line-height: var(--baseline-snap); } /* Baseline-locked paragraph */ .u-baseline-paragraph { margin-bottom: calc(var(--baseline-grid) * 6); line-height: var(--baseline-snap); } /* Baseline-locked heading */ .u-baseline-heading { margin-top: calc(var(--baseline-grid) * 8); margin-bottom: calc(var(--baseline-grid) * 4); line-height: calc(var(--baseline-grid) * 6); } /* -------------------------------------------------------------------------- Editorial Pull Quote Styling -------------------------------------------------------------------------- */ /* Pull quote typography */ .u-pull-quote { font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-lg); line-height: var(--line-height-reading); font-style: italic; color: var(--text); } /* Pull quote citation */ .u-pull-quote-cite { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); font-style: normal; letter-spacing: var(--tracking-wide); color: var(--text-subtle); } /* -------------------------------------------------------------------------- Byline & Metadata Styling -------------------------------------------------------------------------- */ /* Byline text */ .u-byline { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); letter-spacing: var(--tracking-wide); color: var(--text-subtle); } /* Author name emphasis */ .u-byline-author { font-weight: var(--font-weight-emphasis); color: var(--text); } /* Reading time / metadata */ .u-metadata { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-mono-regular); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-subtle); } /* -------------------------------------------------------------------------- Caption & Figure Typography -------------------------------------------------------------------------- */ /* Image caption */ .u-caption { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); font-style: italic; color: var(--text-subtle); max-width: var(--measure-text-narrow); } /* Caption with credit */ .u-caption-credit { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-mono-regular); font-style: normal; letter-spacing: var(--tracking-wide); color: var(--text-subtle); } /* -------------------------------------------------------------------------- Text Balancing & Wrapping (Modern CSS) -------------------------------------------------------------------------- */ /* Balance multi-line headings */ .u-text-balance { text-wrap: balance; } /* Prevent orphans in paragraphs */ .u-text-pretty { text-wrap: pretty; } /* -------------------------------------------------------------------------- Accessibility: Reduce motion support -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } *, *::before, *::after { box-sizing: border-box; } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; } ul[role=list], ol[role=list] { list-style: none; } :target { scroll-margin-block: 5ex; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-weight: 400; line-height: var(--line-height-text); color: var(--text); background-color: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a:not([class]) { text-decoration-skip-ink: auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--heading-color); line-height: var(--line-height-tight); text-wrap: balance; } h1 { font-weight: 700; letter-spacing: var(--tracking-tighter); } h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: var(--tracking-tight); } h3, h4 { font-weight: 600; letter-spacing: var(--tracking-tight); } h3 { font-size: var(--text-h3); } h4 { font-size: var(--text-lede); } h5, h6 { font-weight: 500; letter-spacing: var(--tracking-normal); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1, h2, h3, h4, button, input, label { line-height: 1.1; } p { margin-block-end: var(--spacing-s); } p:last-of-type { margin-block-end: 0; } strong { font-weight: var(--font-weight-bold); } em, i, cite { font-style: italic; } code, pre { font-family: var(--font-mono); margin-bottom: var(--spacing-xs); } pre { overflow: auto; padding: var(--spacing-xs); } sub, sup { height: 0; line-height: 1; position: relative; vertical-align: baseline; } sup { bottom: 0.8em; } sub { top: 0.3em; } blockquote { margin: var(--spacing-r) 0 var(--spacing-m); border-left: 4px solid var(--accent-primary); padding-left: var(--spacing-m); } dl { margin: 0 0 1.5em; } dt { font-weight: 700; } dd { margin-left: 1.5em; } ul { list-style-type: disc; padding: 0 0 var(--space-paragraph) 1em; line-height: var(--line-height-base); } ol { list-style-type: decimal; padding: 0 0 var(--space-paragraph); line-height: var(--line-height-base); } ul li ul, ul li ol { padding: var(--spacing-3xs) 0 var(--spacing-3xs) var(--spacing-m); } ol li ul, ol li ol { padding: var(--spacing-3xs) 0 var(--spacing-3xs) var(--spacing-l); } img, picture { max-width: 100%; display: block; } embed, iframe, object, video { max-width: 100%; } input, button, textarea, select { font-family: inherit; font-size: inherit; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search], select, textarea { width: 100%; max-width: 100%; padding: var(--spacing-xs) var(--spacing-s); font-size: var(--text-body); line-height: var(--line-height-base); color: var(--text); background-color: var(--surface); border: var(--border-width-thin) solid var(--border); border-radius: var(--border-radius-base); transition: var(--transition-fast); } input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=search]:focus, select:focus, textarea:focus { border-color: var(--accent-primary); color: var(--text); outline: 2px solid var(--accent-primary); outline-offset: 2px; } textarea { min-height: 100px; } textarea:not([rows]) { min-height: 10em; } button, input[type=submit], input[type=button] { cursor: pointer; } :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } :where(a, button, summary, input, select, textarea, [tabindex]):focus:not(:focus-visible) { outline: none; } :where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: 0.55; } :where([aria-disabled=true]) { cursor: not-allowed; opacity: 0.55; } .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--spacing-r)); } .stack > * { margin-block: 0; } .stack[data-gap=tight] { --stack-gap: var(--spacing-xs); } .stack[data-gap=compact] { --stack-gap: var(--spacing-s); } .stack[data-gap=base] { --stack-gap: var(--spacing-r); } .stack[data-gap=loose] { --stack-gap: var(--spacing-m); } .stack[data-gap=section] { --stack-gap: var(--spacing-xl); } .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--spacing-s)); align-items: center; } .cluster[data-gap=tight] { --cluster-gap: var(--spacing-xs); } .cluster[data-gap=loose] { --cluster-gap: var(--spacing-m); } .cluster[data-align=start] { align-items: flex-start; } .cluster[data-align=end] { align-items: flex-end; } .auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min, 280px), 1fr)); gap: var(--auto-grid-gap, var(--gap-column, var(--spacing-m))); } .auto-grid[data-min="200"] { --auto-grid-min: 200px; } .auto-grid[data-min="240"] { --auto-grid-min: 240px; } .auto-grid[data-min="320"] { --auto-grid-min: 320px; } .auto-grid[data-min="400"] { --auto-grid-min: 400px; } .auto-grid[data-gap=tight] { --auto-grid-gap: var(--spacing-s); } .auto-grid[data-gap=loose] { --auto-grid-gap: var(--spacing-xl); } .switcher { display: flex; flex-wrap: wrap; gap: var(--switcher-gap, var(--gap-column, var(--spacing-m))); } .switcher > * { flex-grow: 1; flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999); } .switcher[data-threshold="30rem"] { --switcher-threshold: 30rem; } .switcher[data-threshold="48rem"] { --switcher-threshold: 48rem; } .switcher[data-threshold="60rem"] { --switcher-threshold: 60rem; } .flow > * + * { margin-block-start: var(--flow-gap, var(--space-paragraph, var(--spacing-r))); } .flow[data-gap=tight] > * + * { margin-block-start: var(--spacing-xs); } .flow[data-gap=compact] > * + * { margin-block-start: var(--spacing-s); } .flow[data-gap=loose] > * + * { margin-block-start: var(--spacing-l); } .region { padding-block: var(--region-padding, var(--space-section, var(--spacing-2xl))); padding-inline: var(--region-padding-inline, var(--spacing-m)); } .region[data-size=flush] { --region-padding: 0; } .region[data-size=tight] { --region-padding: var(--space-block); } .region[data-size=narrow] { --region-padding: var(--spacing-xl); } .region[data-size=wide] { --region-padding: var(--space-hero); } .region[data-bleed=true] { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: max(var(--spacing-m), 50vw - var(--layout-max, 80rem) / 2); } .repel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--repel-gap, var(--spacing-s)); } .repel[data-align=start] { align-items: flex-start; } .cover { display: flex; flex-direction: column; min-height: var(--cover-min-height, 50svh); padding: var(--spacing-l); } .cover > .cover-centered { margin-block: auto; } .cover[data-height=full] { --cover-min-height: 100svh; } .cover[data-height=half] { --cover-min-height: 50svh; } .cover[data-height=hero] { --cover-min-height: 80svh; } .prose { max-width: var(--prose-measure, var(--measure-text, 65ch)); } .prose > * + * { margin-block-start: var(--prose-gap, var(--space-paragraph)); } .prose > h2, .prose > h3, .prose > h4 { margin-block-start: var(--prose-heading-gap, var(--space-stack-l)); } .prose[data-width=wide] { --prose-measure: var(--measure-text-wide, 80ch); } .prose[data-width=narrow] { --prose-measure: var(--measure-text-narrow, 48ch); } .center { box-sizing: content-box; margin-inline: auto; max-width: var(--center-max, var(--layout-max, 80rem)); padding-inline: var(--center-padding, var(--spacing-m)); } .center[data-width=text] { --center-max: var(--measure-text, 65ch); } .center[data-width=wide] { --center-max: var(--measure-wide, 80ch); } .center[data-width=content] { --center-max: var(--layout-content, 72rem); } .center[data-width=full] { --center-max: none; } .with-sidebar { display: flex; flex-wrap: wrap; gap: var(--sidebar-gap, var(--gap-column, var(--spacing-m))); } .with-sidebar > .sidebar-panel { flex-basis: var(--sidebar-width, 280px); flex-grow: 1; } .with-sidebar > .sidebar-content { flex-basis: 0; flex-grow: 999; min-inline-size: var(--sidebar-content-min, 55%); } /** * Layout Styles * Grid system and responsive layout matching Divi configuration */ /* Container */ .container { width: 80%; max-width: 1200px; margin: 0 auto; } /* ========================================================================== CONTAINER QUERY SYSTEM Modern responsive components that adapt to their container ========================================================================== */ /* Container query wrapper - enables container-based responsive design */ .container-query { container-type: inline-size; container-name: wrapper; } /* Named containers for specific components */ .container-article { container-type: inline-size; container-name: article; } .container-sidebar { container-type: inline-size; container-name: sidebar; } .container-card { container-type: inline-size; container-name: card; } /* ========================================================================== MAGAZINE-STYLE GRID SYSTEMS Editorial layouts for long-form content ========================================================================== */ /* -------------------------------------------------------------------------- Asymmetric 5-Column Editorial Grid Perfect for feature articles, photo essays, mixed content -------------------------------------------------------------------------- */ .layout-editorial { display: grid; grid-template-columns: minmax(1rem, 1fr) minmax(0, 200px) minmax(0, 60px) minmax(300px, 650px) minmax(0, 200px) minmax(1rem, 1fr); /* Right margin */ gap: var(--gap-column); max-width: var(--layout-max); margin: 0 auto; } /* Content zones within editorial grid */ .layout-editorial__main { grid-column: 4/5; } .layout-editorial__aside { grid-column: 5/6; } .layout-editorial__sidebar { grid-column: 2/3; } .layout-editorial__full { grid-column: 2/6; } .layout-editorial__wide { grid-column: 3/6; } .layout-editorial__feature { grid-column: 1/-1; } /* -------------------------------------------------------------------------- Photo Essay Grid - Image-First Narrative For visual storytelling, photo series -------------------------------------------------------------------------- */ .layout-photo-essay { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-row) var(--gap-column); max-width: var(--layout-max); margin: 0 auto; } /* Photo essay grid placement utilities */ .photo-essay__full { grid-column: 1/-1; } .photo-essay__wide { grid-column: 2/-2; } .photo-essay__main { grid-column: 3/11; } .photo-essay__half-left { grid-column: 1/7; } .photo-essay__half-right { grid-column: 7/-1; } .photo-essay__third { grid-column: span 4; } .photo-essay__two-thirds { grid-column: span 8; } /* Aspect ratio control for photo essay */ .photo-essay__image-square { aspect-ratio: 1/1; object-fit: cover; } .photo-essay__image-landscape { aspect-ratio: 3/2; object-fit: cover; } .photo-essay__image-portrait { aspect-ratio: 2/3; object-fit: cover; } /* Mobile breakpoint for photo essay */ @media (max-width: 48rem) { .layout-photo-essay { grid-template-columns: 1fr; } .photo-essay__half-left, .photo-essay__half-right, .photo-essay__third, .photo-essay__two-thirds, .photo-essay__main, .photo-essay__wide { grid-column: 1/-1; } } /* ========================================================================== CONTAINER QUERY RESPONSIVE PATTERNS Components adapt based on container width, not viewport ========================================================================== */ /* Card component adapts to container */ @container wrapper (min-width: 400px) { .block-blog__post, .block-gallery__item { display: grid; grid-template-columns: 200px 1fr; gap: var(--gap-column); } } @container wrapper (min-width: 700px) { .block-blog__grid { grid-template-columns: repeat(2, 1fr); } } @container wrapper (min-width: 1000px) { .block-blog__grid { grid-template-columns: repeat(3, 1fr); } } /* Testimonial/Pull Quote adapts to container */ @container article (min-width: 600px) { .block-testimonial, .block-pull-quote { margin-left: calc(var(--space-pull-quote-inset) * -1); margin-right: calc(var(--space-pull-quote-inset) * -1); padding-left: var(--space-pull-quote-inset); padding-right: var(--space-pull-quote-inset); } } /* Gallery grid density adapts to container */ @container card (max-width: 500px) { .block-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @container card (min-width: 501px) { .block-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @container card (min-width: 800px) { .block-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } /* ========================================================================== COMPOUND GRID SYSTEMS Asymmetric, musically-proportioned grids for magazine-style layouts. Each grid overlays two simple grids to create rhythmic column structures. The narrow fr channels serve as breathing room (white space) on reading pages, or as zones for vertical rules / margin notes on landing pages. ========================================================================== */ /* -------------------------------------------------------------------------- Compound 6-4 Grid (8 columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr) Best for: Homepage magazine covers, news front pages, featured content The mirrored structure creates a natural center axis with wide panels on the edges and narrow channels between. -------------------------------------------------------------------------- */ .layout-compound-6-4 { display: grid; grid-template-columns: var(--grid-compound-6-4); gap: var(--gap-compound); max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--spacing-s); } /* Content zones */ .layout-compound-6-4__full { grid-column: 1/-1; } .layout-compound-6-4__main-left { grid-column: 1/5; } .layout-compound-6-4__main-right { grid-column: 5/-1; } .layout-compound-6-4__wide { grid-column: 2/7; } .layout-compound-6-4__feature { grid-column: 3/7; } .layout-compound-6-4__center { grid-column: 2/-2; } .layout-compound-6-4__gutter-l { grid-column: 2/3; } .layout-compound-6-4__gutter-r { grid-column: 7/8; } .layout-compound-6-4__narrow-l { grid-column: 1/3; } .layout-compound-6-4__narrow-r { grid-column: 7/-1; } /* Responsive collapse */ @media (max-width: 60rem) { .layout-compound-6-4 { grid-template-columns: 1fr 1fr; gap: var(--gap-column); } .layout-compound-6-4__full, .layout-compound-6-4__wide, .layout-compound-6-4__feature, .layout-compound-6-4__center { grid-column: 1/-1; } .layout-compound-6-4__gutter-l, .layout-compound-6-4__gutter-r { display: none; } } @media (max-width: 48rem) { .layout-compound-6-4 { grid-template-columns: 1fr; } .layout-compound-6-4__main-left, .layout-compound-6-4__main-right, .layout-compound-6-4__narrow-l, .layout-compound-6-4__narrow-r { grid-column: 1/-1; } } /* -------------------------------------------------------------------------- Compound 4-3 Grid (6 columns: 3fr 1fr 2fr 2fr 3fr 1fr) Best for: About/mission pages with margin notes, editorial content, narrative sections with pull quotes in the narrow channels. Asymmetric — wider left panel, narrow right channel. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Page / Meeting article container Flow wrapper used by page.php, single-meeting.php, page-meetings.php, etc. The .page-article wrapper itself spans the viewport so its descendants that opt into full-bleed (.alignfull, is-style-band-*, .page-sections) can reach the viewport edges. The 80rem reading column is applied via: - .page-article__breadcrumb (the breadcrumb row, direct child) - .page-article > article > * (every section inside an article body, except entry-content/page-sections/alignfull which handle themselves) - .page-article > section (page-meetings sibling sections) .entry-content handles its own constraint via _wordpress.scss so bands inside the block-editor flow keep their full-bleed escape. -------------------------------------------------------------------------- */ .page-article { padding-block-end: var(--space-section); } .page-article__breadcrumb, .page-article > article > *:not(.entry-content):not(.page-sections):not(.alignfull):not([class*=is-style-band-]):not([class*=page-section--panel-]), .page-article > section:not(.alignfull):not([class*=is-style-band-]) { max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--spacing-r); } @media (max-width: 60rem) { .page-article__breadcrumb, .page-article > article > *:not(.entry-content):not(.page-sections):not(.alignfull):not([class*=is-style-band-]):not([class*=page-section--panel-]), .page-article > section:not(.alignfull):not([class*=is-style-band-]) { padding-inline: var(--spacing-m); } } .page-article__breadcrumb { padding-block: var(--spacing-s) var(--spacing-m); } .layout-compound-4-3 { display: grid; grid-template-columns: var(--grid-compound-4-3); gap: var(--gap-compound); max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--spacing-s); } /* Content zones */ .layout-compound-4-3__full { grid-column: 1/-1; } .layout-compound-4-3__main { grid-column: 1/5; } .layout-compound-4-3__aside { grid-column: 5/-1; } .layout-compound-4-3__wide { grid-column: 1/6; } .layout-compound-4-3__content { grid-column: 3/5; } .layout-compound-4-3__gutter-l { grid-column: 2/3; } .layout-compound-4-3__gutter-r { grid-column: 6/7; } .layout-compound-4-3__primary { grid-column: 1/3; } .layout-compound-4-3__secondary { grid-column: 3/6; } /* Responsive collapse */ @media (max-width: 60rem) { .layout-compound-4-3 { grid-template-columns: 2fr 1fr; gap: var(--gap-column); } .layout-compound-4-3__full, .layout-compound-4-3__wide { grid-column: 1/-1; } .layout-compound-4-3__gutter-l, .layout-compound-4-3__gutter-r { display: none; } } @media (max-width: 48rem) { .layout-compound-4-3 { grid-template-columns: 1fr; } .layout-compound-4-3__main, .layout-compound-4-3__aside, .layout-compound-4-3__content, .layout-compound-4-3__primary, .layout-compound-4-3__secondary { grid-column: 1/-1; } } /* -------------------------------------------------------------------------- Compound 5-4 Grid (8 columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr) Best for: Jurisdiction profiles, detail pages, asymmetric layouts. Wide outer columns with narrow inner channels create natural zones for a profile sidebar alongside main content. -------------------------------------------------------------------------- */ .layout-compound-5-4 { display: grid; grid-template-columns: var(--grid-compound-5-4); gap: var(--gap-compound); max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--spacing-s); } /* Content zones */ .layout-compound-5-4__full { grid-column: 1/-1; } .layout-compound-5-4__main-left { grid-column: 1/5; } .layout-compound-5-4__main-right { grid-column: 5/-1; } .layout-compound-5-4__wide { grid-column: 2/7; } .layout-compound-5-4__content { grid-column: 3/7; } .layout-compound-5-4__feature { grid-column: 1/7; } .layout-compound-5-4__sidebar { grid-column: 7/-1; } .layout-compound-5-4__gutter-l { grid-column: 2/3; } .layout-compound-5-4__gutter-r { grid-column: 7/8; } .layout-compound-5-4__hero-left { grid-column: 1/4; } .layout-compound-5-4__hero-right { grid-column: 5/-1; } .layout-compound-5-4__center { grid-column: 3/6; } /* Responsive collapse */ @media (max-width: 60rem) { .layout-compound-5-4 { grid-template-columns: 1fr 1fr; gap: var(--gap-column); } .layout-compound-5-4__full, .layout-compound-5-4__wide, .layout-compound-5-4__content, .layout-compound-5-4__feature { grid-column: 1/-1; } .layout-compound-5-4__gutter-l, .layout-compound-5-4__gutter-r { display: none; } } @media (max-width: 48rem) { .layout-compound-5-4 { grid-template-columns: 1fr; } .layout-compound-5-4__main-left, .layout-compound-5-4__main-right, .layout-compound-5-4__sidebar, .layout-compound-5-4__hero-left, .layout-compound-5-4__hero-right, .layout-compound-5-4__center { grid-column: 1/-1; } } /* ========================================================================== FULL-BLEED UTILITY Break out of the content container to span the full viewport width. Use for color bands, hero sections, and section dividers. ========================================================================== */ .u-full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); } /* Full-bleed with inner content constraint */ .u-full-bleed-padded { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: max(var(--spacing-s), 50vw - var(--layout-max) / 2); } /* ========================================================================== GRID UTILITIES Quick layout helpers ========================================================================== */ /* Gap utilities */ .gap-tight { gap: var(--gap-tight); } .gap-base { gap: var(--gap); } .gap-roomy { gap: var(--gap-roomy); } /* Column gap utilities */ .gap-column-tight { column-gap: var(--gap-tight); } .gap-column-base { column-gap: var(--gap-column); } .gap-column-roomy { column-gap: var(--gap-roomy); } /* Row gap utilities */ .gap-row-tight { row-gap: var(--gap-tight); } .gap-row-base { row-gap: var(--gap-row); } .gap-row-roomy { row-gap: var(--gap-roomy); } /* ========================================================================== MEASURE CONSTRAINTS Reading-optimized line lengths ========================================================================== */ .measure-text { max-width: var(--measure-text); } .measure-text-wide { max-width: var(--measure-text-wide); } .measure-text-narrow { max-width: var(--measure-text-narrow); } .measure-content { max-width: var(--measure-content); } .measure-wide { max-width: var(--measure-wide); } .measure-narrow { max-width: var(--measure-narrow); } [class*=is-style-band-] { --band-pad-block: clamp(3rem, 8vw, 6rem); --band-pad-inline: clamp(1.25rem, 4vw, 3rem); background: var(--surface); color: var(--text); padding-block: var(--band-pad-block); padding-inline: max(var(--band-pad-inline), (100% - var(--layout-max)) / 2); --accent-primary: var(--accent); --accent-secondary: var(--accent-strong); --accent-link: var(--accent); --surface-alt: var(--surface-deep); --heading-color: var(--text); --link-color: var(--accent); --text-subtle: var(--text-muted); --card-text: var(--text); --card-accent: var(--accent-strong); } .is-style-band-tonal { background: var(--surface-alt); color: var(--text); } .is-style-band-cream { --surface: var(--gray-50); --surface-deep: var(--gray-100); --text: var(--gray-900); --text-muted: var(--gray-600); --accent: var(--parrot-green-700); --accent-strong: var(--parrot-green-900); --rule: var(--gray-900); } .is-style-band-parrot-lime { --surface: var(--parrot-green-100); --surface-deep: #c2dcb0; --text: #1f2e10; --text-muted: #4a5f30; --accent: var(--parrot-green-900); --accent-strong: var(--parrot-green-950); --rule: var(--parrot-green-900); } .is-style-band-coral-pink { --surface: var(--pink-100); --surface-deep: var(--coral-100); --text: var(--dark-purple-900); --text-muted: #6b3a55; --accent: var(--coral-900); --accent-strong: var(--purple-900); --rule: var(--coral-900); } .is-style-band-lavender { --surface: var(--dark-purple-100); --surface-deep: #b9b7d8; --text: var(--dark-purple-900); --text-muted: var(--dark-purple-500); --accent: var(--dark-purple-700); --accent-strong: var(--dark-purple-900); --rule: var(--dark-purple-700); } .is-style-band-blue { --surface: var(--blue-100); --surface-deep: #c8dff0; --text: #0a2540; --text-muted: #2f4a66; --accent: var(--blue-700); --accent-strong: #0a3766; --rule: var(--blue-700); } .is-style-band-purple-deep { --surface: var(--dark-purple-900); --surface-deep: var(--dark-purple-700); --text: var(--mist-200); --text-muted: #9c9bc4; --accent: var(--pink-500); --accent-strong: var(--pink-600); --rule: var(--pink-500); } .is-style-band-night-sky { --surface: var(--night-sky-800); --surface-deep: var(--night-sky-900); --text: var(--mist-200); --text-muted: var(--mist-400); --accent: var(--lime-300); --accent-strong: var(--lime-500); --rule: var(--lime-300); } .is-style-band-parrot-deep { --surface: var(--parrot-green-900); --surface-deep: var(--parrot-green-950); --text: var(--parrot-green-100); --text-muted: #a8c596; --accent: var(--lime-300); --accent-strong: var(--lime-500); --rule: var(--lime-300); } .button, .wp-block-button__link { display: inline-block; padding: 0.5em 1.5em; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-body); line-height: 1.2; letter-spacing: var(--tracking-wide); text-align: center; text-decoration: none; border-radius: 0; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); background-color: var(--button-bg); color: var(--button-text); border: 2px solid var(--surface); box-shadow: 0 0 0 3px var(--button-bg); } .button:hover, .wp-block-button__link:hover { background-color: var(--surface); color: var(--button-bg); text-decoration: none; } .button:focus-visible, .wp-block-button__link:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: 5px; } .button:active, .wp-block-button__link:active { transform: translateY(1px); } .button:disabled, .button[aria-disabled=true], .wp-block-button__link:disabled, .wp-block-button__link[aria-disabled=true] { cursor: not-allowed; opacity: 0.55; pointer-events: none; } .button--secondary, .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: var(--accent-primary); border: 2px solid var(--surface); box-shadow: 0 0 0 3px var(--accent-primary); } .button--secondary:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--accent-primary); color: var(--surface); } .button--secondary:focus-visible, .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: 5px; } .button--ghost { background-color: transparent; color: var(--accent-link); border: 2px solid transparent; box-shadow: none; padding: 0.5em 1em; } .button--ghost:hover { background-color: transparent; color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.25em; } .button--ghost:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: 3px; } .button--sm { font-size: var(--font-size-sm); padding: 0.4em 1.1em; } .button--lg { font-size: var(--font-size-md); padding: 0.65em 1.8em; } /* ========================================================================== WordPress Navigation Styles Bulletproof foundation for primary navigation with dropdown support ========================================================================== */ /* Base Navigation Container ========================================================================== */ nav { font-family: var(--font-sans); font-weight: 500; letter-spacing: var(--tracking-wide); font-size: var(--font-size-sm); } .main-navigation { position: relative; clear: both; display: block; width: 100%; z-index: 9999; /* Add this line */ } .main-navigation ul { list-style: none; margin: 0; padding: 0; } .main-navigation a { display: block; text-decoration: none; padding: 1rem 1.25rem; color: inherit; } .main-navigation a:hover, .main-navigation a:focus { color: inherit; background-color: rgba(0, 0, 0, 0.05); } /* Mobile Menu Toggle ========================================================================== */ .mobile-menu-toggle { display: none; /* Hidden on desktop by default */ background: none; border: 1px solid currentColor; padding: 0.5rem 1rem; cursor: pointer; font-size: 1rem; color: inherit; } .mobile-menu-toggle:hover, .mobile-menu-toggle:focus { background-color: rgba(0, 0, 0, 0.05); outline: 2px solid currentColor; outline-offset: 2px; } .mobile-menu-toggle .dashicons { width: 20px; height: 20px; font-size: 20px; vertical-align: middle; } /* Desktop Navigation (Default) ========================================================================== */ #primary-menu { display: flex; flex-wrap: wrap; } #primary-menu > .menu-item { position: relative; } #primary-menu > .menu-item > a { position: relative; } /* Dropdown Menus ========================================================================== */ .main-navigation .sub-menu { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 200px; background-color: var(--surface); box-shadow: var(--shadow-md); /* Hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); } /* Show dropdown on hover or focus-within */ .main-navigation .menu-item:hover > .sub-menu, .main-navigation .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .main-navigation .sub-menu .menu-item { position: relative; } .main-navigation .sub-menu a { padding: 0.75rem 1.25rem; white-space: nowrap; } /* Nested Dropdowns (Third Level) ========================================================================== */ .main-navigation .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 0; } /* Dropdown Indicators ========================================================================== */ .main-navigation .menu-item-has-children > a::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 0.5em; vertical-align: middle; border-top: 4px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent; } .main-navigation .sub-menu .menu-item-has-children > a::after { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; border-right: 0; } /* Current Page Indicators ========================================================================== */ .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a { font-weight: var(--font-weight-semibold); } /* Mobile Navigation (Responsive) ========================================================================== */ @media (max-width: 48rem) { .mobile-menu-toggle { display: block; z-index: 9999; /* Add this - keeps toggle clickable */ } #primary-menu { display: none; flex-direction: column; width: 100%; } /* Show menu when toggled */ #primary-menu.toggled { display: flex; z-index: 9999; /* Add this - keeps toggle clickable */ } #primary-menu > .menu-item { border-top: 1px solid rgba(0, 0, 0, 0.1); } /* Reset dropdown positioning for mobile */ .main-navigation .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background-color: rgba(0, 0, 0, 0.02); min-width: 0; /* Hidden by default on mobile */ display: none; } /* Show submenu when parent has toggled class */ .main-navigation .menu-item.toggled > .sub-menu { display: block; } .main-navigation .sub-menu a { padding-left: 2rem; } .main-navigation .sub-menu .sub-menu a { padding-left: 3rem; } /* Mobile dropdown indicators */ .main-navigation .menu-item-has-children > a::after { float: right; border-top: 4px solid currentColor; border-right: 4px solid transparent; border-bottom: 0; border-left: 4px solid transparent; } .main-navigation .menu-item.toggled > a::after { border-top: 0; border-right: 4px solid transparent; border-bottom: 4px solid currentColor; border-left: 4px solid transparent; } .main-navigation .sub-menu .menu-item-has-children > a::after { border-top: 4px solid currentColor; border-right: 4px solid transparent; border-bottom: 0; border-left: 4px solid transparent; } } /* Accessibility Enhancements ========================================================================== */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--surface-alt); border-radius: var(--border-radius-sm); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: var(--accent-link); display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Focus visible polyfill */ .main-navigation a:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* Prevent focus outline when clicking */ .main-navigation a:focus:not(:focus-visible) { outline: none; } .site-footer { background-color: var(--night-sky-700); padding-block: var(--spacing-l); margin-block-start: var(--spacing-2xl); } .footer-navigation .menu { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-r); padding: 0; } .footer-navigation .menu-item { margin: 0; } .footer-navigation a { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: var(--tracking-wide); color: var(--accent-link); text-decoration: none; display: inline-block; padding: 0.25em 0.75em; border: 2px solid currentColor; border-radius: var(--border-radius-full); transition: var(--transition-fast); } .footer-navigation a:hover, .footer-navigation a:focus-visible { background-color: var(--accent-link); color: var(--surface); } .footer-widget { margin: var(--spacing-l) auto; width: fit-content; } footer.site-footer .container { text-align: center; } /* ========================================================================== FOOTER NAVIGATION Two-column link grid for site-wide footer links, plus a utility nav bar in the footer baseline (Privacy Policy, Accessibility, Contact). DOM dependencies (from footer.php): .footer-nav-area — container wrapper .footer-nav —