/* ============================================================ 01 — CORE TOKENS & BASE LAYOUT ============================================================ Purpose: Design tokens (variables) + body, layout, backgrounds, dark mode, typography, accessibility. Everything else depends on this file — load first. Depends: Nothing (loads first, Priority 1) Enqueue: functions.php → byr-tokens (no deps) Migration note: Replaces WPCode snippets: · BYR — Foundations (Priority 5, ~6KB) · Relevant global rules from BYR — Global Fixes (Priority 12) Cleaned: removed all Elementor selectors — they are dead code once Elementor is removed. TABLE OF CONTENTS: PART A — DESIGN TOKENS 1. Z-Index Scale 2. Colors — Dark Mode Baseline (default) 3. Colors — Light Mode Targets (referenced by .mode-light) 4. Type Scale 5. Line Heights 6. Layout / Spacing 7. Radius 8. Animation Timing 9. Chrome Border Palette 10. Focus Ring — Single Source of Truth 11. Background Gradient Tokens (used by 02-background-canvas) 12. Canvas Layer Tokens 13. Glass System PART B — LIGHT MODE TOKEN OVERRIDES 14. .mode-light remaps PART C — BASE LAYOUT & RESETS 15. Base Reset 16. Body & HTML 17. Universal Container Rules 18. Astra Wrapper Transparency 19. Reduced Motion — Global Safety Net PART D — ACCESSIBILITY 20. Skip Link 21. Focus Ring System (3-layer progressive enhancement) 22. Gallery / Image Focus (inset approach) 23. Screen Reader Only Utility PART E — UTILITY CLASSES 24. Type Utilities (.byr-text-*, .byr-eyebrow, etc.) 25. Layout Utilities (.byr-section, .byr-content, etc.) 26. Heading Classes (.byr-h-hero, .byr-h-section, .byr-h-sub) ============================================================ */ /* ************************************************************ PART A — DESIGN TOKENS ************************************************************ */ :root { /* ========================================================== 1. Z-INDEX SCALE Never use raw numbers — always var(--z-*) ========================================================== */ --z-background: -10; --z-base: 0; --z-content: 1; --z-pseudo: 2; --z-above-pseudo: 3; --z-raised: 5; --z-component-ui: 10; --z-controls: 20; --z-debug: 50; --z-header: 100; --z-dropdown: 200; --z-lightbox: 400; --z-toggle: 500; /* ========================================================== 2. COLORS — DARK MODE BASELINE BYR is dark-mode-first. These are the defaults. No class needed for dark mode — it is the baseline state. ========================================================== */ --color-text-primary: #F5F5F8; --color-text-secondary: #C7C7D8; --color-text-muted: #8A8A9A; --color-heading: #FFFFFF; --color-bg-primary: #020617; --color-bg-elevated: rgba(15, 23, 42, 0.90); --color-border-subtle: rgba(148, 163, 184, 0.35); --color-accent-primary: #22D3EE; /* cyan */ --color-accent-secondary: #10B981; /* emerald */ --color-accent-gold: #FBB924; /* amber / gold */ /* ========================================================== 3. COLORS — LIGHT MODE TARGETS Referenced by .mode-light overrides in Part B. Keep these here so they are always defined before use. ========================================================== */ --color-text-primary-light: #0B1530; --color-text-secondary-light: #3B425C; --color-text-muted-light: #6B7280; --color-heading-light: #111827; --color-bg-primary-light: #F8F8FC; --color-bg-elevated-light: #FFFFFF; --color-border-subtle-light: rgba(0, 0, 0, 0.12); /* ========================================================== 3b. CONDITION ACCENT COLORS Shared by resources, groups, and any condition-specific pages. ========================================================== */ --color-condition-red: #ef4444; --color-condition-violet: #a78bfa; --color-condition-amber: #FBB924; /* ========================================================== 4. TYPE SCALE Responsive via clamp(). Min = small phone, max = desktop. ========================================================== */ --text-xs: clamp(0.7rem, 1.2vw, 0.75rem); --text-sm: clamp(0.8rem, 1.5vw, 0.875rem); --text-md: clamp(0.9rem, 1.8vw, 1rem); --text-lg: clamp(1rem, 2vw, 1.125rem); --text-xl: clamp(1.15rem, 2.5vw, 1.375rem); --text-2xl: clamp(1.35rem, 3vw, 1.75rem); --text-3xl: clamp(1.75rem, 4vw, 2.25rem); --text-4xl: clamp(2.25rem, 5vw, 3rem); /* Semantic sizes for small UI elements */ --text-badge: 0.68rem; --text-caption: 0.72rem; --text-btn-sm: 0.82rem; /* ========================================================== 5. LINE HEIGHTS ========================================================== */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ========================================================== 5b. FONT WEIGHT SCALE ========================================================== */ --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; --weight-extrabold: 800; /* ========================================================== 5c. FONT STACKS ========================================================== */ --font-serif: 'Instrument Serif', Georgia, serif; --font-caption: 'Cormorant Garamond', Georgia, serif; /* ========================================================== 6. LAYOUT / SPACING Spacing scale based on a 4px/0.25rem base unit. Use --space-* for padding, margin, and gap values. ========================================================== */ --max-content-width: 1200px; --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ /* ========================================================== 7. RADIUS ========================================================== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 999px; /* ========================================================== 8. ANIMATION TIMING ========================================================== */ --anim-fast: 0.18s ease; --anim-medium: 0.30s ease; --anim-slow: 0.50s ease; /* ========================================================== 9. CHROME BORDER PALETTE Shared by images, buttons, and header. ========================================================== */ --byr-chrome-a: rgba(255, 255, 255, 0.95); --byr-chrome-b: rgba(255, 255, 255, 0.25); --byr-chrome-c: rgba(34, 211, 238, 0.65); --byr-chrome-d: rgba(16, 185, 129, 0.55); /* ========================================================== 10. FOCUS RING — SINGLE SOURCE OF TRUTH Change these two properties to restyle focus site-wide. All focus rules in this file reference these tokens. ========================================================== */ --focus-ring-color: rgba(255, 215, 0, 0.85); --focus-glow-color: rgba(255, 215, 0, 0.35); --focus-ring-width: 2px; --focus-ring-offset: 3px; --focus-glow-spread: 14px 4px; /* ========================================================== 11. BACKGROUND GRADIENT TOKENS Used by 02-background-canvas.css. Defined here so they are available to all files. ========================================================== */ /* Dark: deep space corners */ --bg-deep-1: #010013; --bg-deep-2: #120002; --bg-deep-3: #000b00; --bg-deep-4: #0d0e00; /* Light: ultra-soft atmospheric pastels */ --bg-light-1: #F4F2FF; /* lighter lavender air */ --bg-light-2: #FFF4F6; /* soft rose mist */ --bg-light-3: #F2FFF7; /* pale mint glow */ --bg-light-4: #FFF9F2; /* warm cream haze */ /* Gradient stop positions */ --bg-stop-1: 0%; --bg-stop-2: 35%; --bg-stop-3: 65%; --bg-stop-4: 100%; /* Animation timing for background */ --bg-rotation-duration: 120s; --bg-pulse-duration: 38s; --bg-glow-duration: 67s; /* ========================================================== 12. CANVAS LAYER TOKENS ========================================================== */ --starfield-opacity: 1; /* ========================================================== 13. GLASS SYSTEM Glassmorphism tokens for dark-mode panels, cards, and overlays. Light-mode glass overrides in Part B. 76 backdrop-filter declarations exist site-wide — these tokens standardize the most common patterns. ========================================================== */ /* Dark glass backgrounds (most common: cards, panels) */ --glass-bg: rgba(10, 14, 30, 0.55); --glass-bg-hover: rgba(10, 14, 30, 0.65); --glass-bg-elevated: rgba(10, 14, 30, 0.80); /* Glass borders */ --glass-border: rgba(148, 163, 184, 0.15); --glass-border-hover: rgba(148, 163, 184, 0.28); --glass-border-accent: rgba(34, 211, 238, 0.25); /* Standard blur levels */ --glass-blur-sm: 6px; --glass-blur-md: 10px; --glass-blur-lg: 16px; /* Glass shadows */ --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); --glass-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.35); --glass-glow-cyan: 0 0 40px rgba(34, 211, 238, 0.06); /* ========================================================== 14. GLASS CARD COMPOUND TOKENS Standard frosted-glass card pattern used site-wide. Override in .mode-light (Part B) for light mode. ========================================================== */ --glass-card-bg: linear-gradient(145deg, rgba(15,23,42,0.75), rgba(30,41,59,0.55)); --glass-card-frost: blur(16px) saturate(140%); --glass-card-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04); --glass-card-lift: translateY(-4px); /* ========================================================== 15. GLOW TOKENS — per accent color Hover box-shadow for cards, panels, interactive elements. ========================================================== */ --glow-cyan: 0 0 24px rgba(34,211,238,0.10), 0 0 50px rgba(34,211,238,0.05); --glow-emerald: 0 0 24px rgba(16,185,129,0.10), 0 0 50px rgba(16,185,129,0.05); --glow-violet: 0 0 24px rgba(167,139,250,0.10), 0 0 50px rgba(167,139,250,0.05); --glow-red: 0 0 24px rgba(239,68,68,0.10), 0 0 50px rgba(239,68,68,0.05); --glow-amber: 0 0 24px rgba(251,191,36,0.10), 0 0 50px rgba(251,191,36,0.05); /* ========================================================== 16. HOVER BORDER TOKENS — per accent color ========================================================== */ --border-hover-cyan: rgba(34,211,238,0.40); --border-hover-emerald: rgba(16,185,129,0.40); --border-hover-violet: rgba(167,139,250,0.35); --border-hover-red: rgba(239,68,68,0.35); --border-hover-amber: rgba(251,191,36,0.35); /* ========================================================== 17. CARD GRID TOKEN ========================================================== */ --card-grid-min: 280px; /* ========================================================== 18. TRANSITION PRESETS ========================================================== */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --dur-card: 0.3s; --dur-glow: 0.4s; } /* ========================================================== BREAKPOINT REFERENCE ============================================================ CSS custom properties cannot be used in @media queries. This comment block documents the standard breakpoints. All @media queries should use these values. --bp-sm: 480px phones (landscape) --bp-md: 768px tablets --bp-lg: 1024px desktops --bp-xl: 1280px wide desktops (if needed) Usage: @media (max-width: 768px) { ... } tablet and below @media (max-width: 480px) { ... } phone only @media (min-width: 1024px) { ... } desktop and above Legacy breakpoints consolidated in Phase 1 cleanup: 560, 600, 640, 782, 800, 860, 900, 960, 1000, 1023px → These should be migrated to the standard set above over time. The 782px breakpoint is WordPress admin-bar specific — keep only where that's the intent. ============================================================ */ /* ************************************************************ PART B — LIGHT MODE TOKEN OVERRIDES ************************************************************ */ /* ========================================================== 14. .mode-light REMAPS Applied by JS when the user switches to light mode. Remaps the color tokens so all components inherit automatically without needing mode-specific selectors. ========================================================== */ .mode-light { --color-bg-primary: var(--color-bg-primary-light); --color-bg-elevated: var(--color-bg-elevated-light); --color-border-subtle: var(--color-border-subtle-light); --color-text-primary: var(--color-text-primary-light); --color-text-secondary: var(--color-text-secondary-light); --color-text-muted: var(--color-text-muted-light); --color-heading: var(--color-heading-light); /* Chrome shifts for light mode */ --byr-chrome-a: rgba(0, 0, 0, 0.75); --byr-chrome-b: rgba(0, 0, 0, 0.15); --byr-chrome-c: rgba(34, 211, 238, 0.50); --byr-chrome-d: rgba(16, 185, 129, 0.45); /* Glass shifts for light mode */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-hover: rgba(255, 255, 255, 0.70); --glass-bg-elevated: rgba(255, 255, 255, 0.85); --glass-border: rgba(0, 0, 0, 0.08); --glass-border-hover: rgba(0, 0, 0, 0.15); --glass-border-accent: rgba(8, 145, 178, 0.20); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --glass-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12); --glass-glow-cyan: 0 0 40px rgba(8, 145, 178, 0.06); /* Glass card — light mode */ --glass-card-bg: linear-gradient(145deg, rgba(255,255,255,0.80), rgba(248,250,252,0.60)); --glass-card-shadow: 0 2px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5); } /* ************************************************************ PART C — BASE LAYOUT & RESETS ************************************************************ */ /* ========================================================== 15. BASE RESET ========================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ========================================================== 16. BODY & HTML ========================================================== */ html { max-width: 100%; scroll-behavior: smooth; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { max-width: 100%; overflow-x: hidden; min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; line-height: var(--leading-normal); color: var(--color-text-primary); /* Background is transparent so 02-background-canvas shows through */ background-color: var(--bg-deep-1); background: transparent; } img, picture, video, canvas { max-width: 100%; display: block; } /* ========================================================== 17. UNIVERSAL CONTAINER RULES Prevent overflow on mobile/tablet ========================================================== */ @media (max-width: 1024px) { *[style*="100vw"], .full-width, .full-bleed { max-width: 100%; width: 100%; } } /* ========================================================== 18. ASTRA WRAPPER TRANSPARENCY Lets the body::before gradient show through on all pages. ⚠ !important required — Astra sets these with high specificity. ========================================================== */ /* Astra layout wrappers */ .site, .site-content, #content, #page, #primary, main, article, .post, .entry-content, .wp-site-blocks, .wp-block-post-content, .post-content, .page-content, .content-area { background: transparent !important; background-color: transparent !important; } /* Astra theme-specific containers */ .ast-separate-container, .ast-separate-container .ast-article-single, .ast-plain-container { background: transparent !important; background-color: transparent !important; } /* Astra default header — hidden; replaced by custom .byr-header */ .ast-primary-header-bar, .ast-above-header-bar, .ast-below-header-bar, .ast-above-header-wrap, .ast-below-header-wrap, .main-header-bar-wrap, #ast-desktop-header, .ast-mobile-header-wrap, header.site-header, .site-header { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Header spacer — not needed, custom header floats over content */ .byr-header-spacer { display: none !important; height: 0 !important; } /* Astra/Gutenberg page wrappers — zero top spacing Custom header is position:fixed and transparent. Content must start at the top of the viewport everywhere. (Relocated from 10-spotlight.css during decommission, 2026-04) */ #page, .hfeed, .site, .site-content, #content, #primary, #main, .ast-container, .ast-article-single, .ast-article-post, .ast-separate-container .ast-article-single, .ast-separate-container .ast-article-post, .ast-plain-container, .entry-content { padding-top: 0 !important; margin-top: 0 !important; } /* Astra default footer — transparent; replaced by .byr-site-footer */ .site-footer, .ast-footer-overlay, .ast-small-footer, .ast-small-footer .ast-footer-overlay, footer.site-footer, .ast-footer-copyright, .site-below-footer-wrap, .ast-builder-footer-grid-columns, .site-primary-footer-wrap, .site-above-footer-wrap, .site-below-footer-wrap .ast-builder-grid-row { background: transparent !important; background-color: transparent !important; } /* Astra skip link — hidden; replaced by custom .byr-skip-link */ .ast-a11y-skip-link, a.screen-reader-text.skip-link[href="#content"]:not(.byr-header .byr-skip-link) { display: none !important; } /* ========================================================== 19. REDUCED MOTION — GLOBAL SAFETY NET ⚠ Must come AFTER animation declarations above. Individual files add their own reduced-motion blocks, but this is the catch-all fallback. ========================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* JS class version (set by accessibility toolbar) */ .motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Gradient stops: responsive adjustments */ @media (min-height: 800px) { :root { --bg-stop-2: 40%; --bg-stop-3: 70%; } } @media (min-height: 1000px) { :root { --bg-stop-2: 45%; --bg-stop-3: 75%; } } /* ************************************************************ PART D — ACCESSIBILITY ************************************************************ */ /* ========================================================== 20. SKIP LINK Custom skip link that replaces Astra's (hidden in §17). Positioned off-screen until focused. ========================================================== */ .byr-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 10000; padding: var(--space-2xs) var(--space-xs); background: #000; color: #fff; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-md); transform: translateY(-150%); transition: transform 150ms ease-out; text-decoration: none; } .byr-skip-link:focus-visible { transform: translateY(0); outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 var(--focus-glow-spread) var(--focus-glow-color); } /* ========================================================== 21. FOCUS RING SYSTEM — 3-LAYER PROGRESSIVE ENHANCEMENT LAYER 1 — *:focus Gold glow on ALL focus events. Safe baseline for every browser. WCAG 2.1 AA requires visible focus — this guarantees it even in browsers that don't know :focus-visible. LAYER 2 — *:focus:not(:focus-visible) Hides the gold glow on mouse clicks in modern browsers. Old browsers ignore this rule entirely (safe fallback). LAYER 3 — *:focus-visible Explicit keyboard focus for modern browsers. Redundant with Layer 1 but locks in specificity against plugins. NET RESULT: Modern + keyboard → gold glow (Layer 1 + 3) Modern + mouse → nothing (Layer 2 hides it) Old browser → gold glow (Layer 1 only, always safe) ⚠ !important is required to override Astra defaults. This is the ONLY place focus is defined globally. ========================================================== */ /* LAYER 1 — Safe baseline */ *:focus { outline: var(--focus-ring-width) solid var(--focus-ring-color) !important; outline-offset: var(--focus-ring-offset) !important; box-shadow: 0 0 var(--focus-glow-spread) var(--focus-glow-color) !important; } /* LAYER 2 — Hide on mouse click (modern browsers only) */ *:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* LAYER 3 — Explicit keyboard focus */ *:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color) !important; outline-offset: var(--focus-ring-offset) !important; box-shadow: 0 0 var(--focus-glow-spread) var(--focus-glow-color) !important; } /* ========================================================== 22. GALLERY / IMAGE FOCUS — INSET APPROACH Problem: WordPress galleries nest images inside overflow:hidden containers. Outlines and external box-shadows get clipped. Solution: Inset box-shadow only. Inset shadows are drawn inside the border box and cannot be clipped by overflow. Same 3-layer progressive enhancement as §20. ========================================================== */ /* LAYER 1 — Safe baseline */ .gallery-item a:focus, figure.gallery-item a:focus, .wp-block-gallery a:focus, .gallery-icon a:focus { outline: none !important; box-shadow: inset 0 0 0 3px rgba(255, 215, 0, 0.90), inset 0 0 14px rgba(255, 215, 0, 0.35) !important; filter: brightness(1.15) !important; position: relative; z-index: 1; } /* LAYER 2 — Hide on mouse click */ .gallery-item a:focus:not(:focus-visible), figure.gallery-item a:focus:not(:focus-visible), .wp-block-gallery a:focus:not(:focus-visible), .gallery-icon a:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; filter: none !important; } /* LAYER 3 — Explicit keyboard focus */ .gallery-item a:focus-visible, figure.gallery-item a:focus-visible, .wp-block-gallery a:focus-visible, .gallery-icon a:focus-visible { outline: none !important; box-shadow: inset 0 0 0 3px rgba(255, 215, 0, 0.90), inset 0 0 14px rgba(255, 215, 0, 0.35) !important; filter: brightness(1.15) !important; position: relative; z-index: 1; } /* ========================================================== 23. SCREEN READER ONLY UTILITY ========================================================== */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ************************************************************ PART E — UTILITY CLASSES ************************************************************ */ /* ========================================================== 24. TYPE UTILITIES ========================================================== */ .byr-text-body { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-primary); max-width: 65ch; } .byr-text-lede { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } .byr-text-small { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted); } .byr-text-muted { color: var(--color-text-muted); } .byr-text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: var(--text-sm); } .byr-eyebrow { font-size: var(--text-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); } .byr-kicker { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-primary); } /* ========================================================== 25. LAYOUT UTILITIES ========================================================== */ .byr-section { padding-block: clamp(3rem, 6vw, 5rem); } .byr-section-narrow { padding-block: clamp(2.5rem, 5vw, 4rem); } .byr-content { width: 100%; max-width: var(--max-content-width); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } /* ========================================================== 26. HEADING CLASSES ========================================================== */ .byr-h-hero { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: var(--leading-tight); color: var(--color-heading); } .byr-h-section { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: var(--leading-snug); color: var(--color-heading); } .byr-h-sub { font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-text-secondary); }