/* ============================================================ 01 — CORE TOKENS & BASE LAYOUT ============================================================ Purpose: Design tokens (variables) + body, layout, backgrounds, dark mode, typography, accessibility Depends: Nothing (loads first, Priority 1) Updated: 2026-03-18 Merged: 01-Tokens + 02-Base into single snippet TABLE OF CONTENTS: PART A — DESIGN TOKENS 1. Z-Index Scale 2. Colors (Light Mode) 3. Header / Navigation 4. Forms 5. Layout / Radius / Shadows / Animation 6. Glass Effects 7. Dark Mode Token Overrides 8. Reduced Motion Safety Net PART B — BASE LAYOUT & ACCESSIBILITY 9. Body Defaults 10. Global Safety & Resets 11. Container & Width Rules 12. Dark Mode Background & Colors 13. Elementor Transparency Fixes 14. Accessibility (Skip Links, Focus Rings) 15. Gallery / Image Focus (Inset Approach) 16. Hero Content Positioning 17. Final Background Ownership (MUST BE LAST) ============================================================ */ /* ************************************************************ PART A — DESIGN TOKENS ************************************************************ */ :root { /* ============================================================ Z-INDEX SCALE ============================================================ */ --z-base: 1; --z-above: 10; --z-header: 1000; --z-modal: 1100; /* ============================================================ COLORS — LIGHT MODE ============================================================ */ --clr-bg-main: #e3f2fd; --clr-text-body: #111827; --clr-text-heading: #000000; --clr-text-light: #ffffff; --clr-accent: #0066CC; --clr-accent-hover: #0051a3; /* ============================================================ HEADER ============================================================ */ --clr-header-border: rgba(255,255,255,0.55); --header-height: 72px; --header-logo-height: 68px; /* ============================================================ NAVIGATION ============================================================ */ --clr-nav-btn-text: #ffffff; /* ============================================================ FORMS ============================================================ */ --clr-form-input-bg: #ffffffee; --clr-form-input-text: #000000; /* ============================================================ LAYOUT ============================================================ */ --max-content-width: 1400px; /* ============================================================ RADIUS ============================================================ */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ============================================================ SHADOWS ============================================================ */ --shadow-header: 0 4px 20px rgba(0,0,0,0.5); /* ============================================================ ANIMATION ============================================================ */ --anim-fast: 0.18s ease; --anim-medium: 0.3s ease; --anim-slow: 0.5s ease; /* ============================================================ GLASS / CONTAINER EFFECTS ============================================================ */ --gprs-glass-bg-light: rgba(255,255,255,0.88); --gprs-glass-bg-dark: rgba(255,255,255,0.08); --gprs-glass-border-light: rgba(0,102,204,0.35); --gprs-glass-border-dark: rgba(255,255,255,0.22); } /* ============================================================ DARK MODE OVERRIDES ============================================================ */ html.gprs-dark { --clr-bg-main: #0a1a0c; --clr-text-body: #ffffff; --clr-text-heading: #ffffff; --clr-form-input-bg: rgba(255,255,255,0.12); --clr-form-input-text: #ffffff; } /* ============================================================ REDUCED MOTION — GLOBAL SAFETY NET ============================================================ */ @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; } } /* ************************************************************ PART B — BASE LAYOUT & ACCESSIBILITY ************************************************************ */ /* BODY */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.6; min-height: 100vh; color: var(--clr-text-body); padding-top: 0; transition: background var(--anim-slow); } /* ============================================================ 2. GLOBAL SAFETY & RESETS ============================================================ */ /* GLOBAL MOBILE / TABLET OVERFLOW LOCK */ html { max-width: 100%; } body { max-width: 100%; overflow-x: hidden; } @media (max-width: 1024px) { *[style*="100vw"], .full-width, .full-bleed { max-width: 100%; width: 100%; } } /* ============================================================ UNIVERSAL CONTAINER RULE ============================================================ */ .elementor-widget-container, .gprs-card, .gprs-step, .gprs-box { max-width: 100%; box-sizing: border-box; } /* ============================================================ ROOT LAYOUT WIDTH CORRECTION (ASTRA + ELEMENTOR) ============================================================ */ .site, .site-content, #content, .elementor, .elementor-section, .elementor-container { max-width: 100%; box-sizing: border-box; } /* ============================================================ KILL 100vw OVERFLOW (CRITICAL) ============================================================ */ @media (max-width: 1024px) { body, .site, #page, #content, .elementor, .elementor-section, .elementor-container { width: 100%; max-width: 100%; } } /* ============================================================ FIXED HEADER WIDTH LOCK ============================================================ */ .site-header, .gprs-header, .ast-header-sticky, header { max-width: 100%; width: 100%; left: 0; right: 0; } /* ============================================================ DARK MODE BACKGROUND ============================================================ */ html.gprs-dark body { background: linear-gradient(135deg, #0a1a0c 0%, #021042 50%, #190436 100%); } /* LAYOUT */ main { position: relative; z-index: 1; min-height: 100vh; padding-top: 0; } html.gprs-dark h1:not(.gprs-footer *), html.gprs-dark h2:not(.gprs-footer *), html.gprs-dark h3:not(.gprs-footer *), html.gprs-dark h4:not(.gprs-footer *), html.gprs-dark h5:not(.gprs-footer *), html.gprs-dark h6:not(.gprs-footer *), html.gprs-dark p:not(.gprs-footer *), html.gprs-dark li:not(.gprs-footer *), html.gprs-dark span:not(.gprs-footer *), html.gprs-dark div:not(.gprs-footer *) { color: #ffffff; } html.gprs-dark :not(.gprs-footer) { color: #ffffff; } /* IMAGES */ html.gprs-dark img:not(.footer-logo img):not(.logo img) { filter: brightness(85%) contrast(92%); } /* ============================================================ BODY GRADIENT VISIBILITY FIX Purpose: - Allow background gradients to show through - Neutralize Astra / Elementor full-page wrappers - Preserve section/card backgrounds ⚠️ !important REQUIRED Astra + Elementor set opaque backgrounds with high specificity ============================================================ */ /* Elementor outer wrappers ONLY (not inner sections) */ .elementor-section-wrap { background: transparent !important; } /* Defensive: top-level Elementor sections without explicit backgrounds */ .elementor-section:not([data-settings*="background"]) { background: transparent !important; } /* ============================================================ ELEMENTOR TOP-LEVEL SECTION TRANSPARENCY Purpose: - Allow body gradient to show through - ONLY affects top-level layout sections - Inner sections / cards remain untouched ⚠️ !important REQUIRED ============================================================ */ .elementor-section.elementor-top-section { background-color: transparent !important; } .elementor-container, .elementor-container-fluid { background-color: inherit; } /* ============================================================ ELEMENTOR SECTION CONSISTENCY ENFORCEMENT Prevents Astra from injecting conflicting backgrounds ============================================================ */ /* Force consistent section rendering */ .elementor-section, .elementor-column, .elementor-widget-wrap { background-color: inherit !important; } /* Lock down Elementor text colors in dark mode */ html.gprs-dark .elementor-section, html.gprs-dark .elementor-column, html.gprs-dark .elementor-widget-wrap, html.gprs-dark .elementor-text-editor { color: #ffffff !important; } /* ============================================================ 03 - ACCESSIBILITY Purpose: Skip links, focus states, screen reader utilities ⚠️ FOCUS RING — SINGLE SOURCE OF TRUTH Soft gold glow is the GPRS global focus indicator. All other snippets should NOT redefine outline or box-shadow for :focus-visible — they inherit from here. They can add background tint if needed. ============================================================ */ /* HIDE ASTRA'S DUPLICATE SKIP LINK Astra theme generates its own skip-to-content link. We have a custom one already, so hide Astra's to prevent it from appearing twice when tabbing. */ .ast-a11y-skip-link, a.screen-reader-text.skip-link[href="#content"]:not(.gprs-header .skip-link) { display: none !important; } /* CUSTOM SKIP LINK */ .skip-link { position: absolute; left: -9999px; top: 0.5rem; z-index: 10000; background: #111827; color: #ffffff; padding: 0.6rem 1rem; border-radius: var(--radius-pill); font-weight: 600; } .skip-link:focus { left: 0.75rem; outline: 2px solid rgba(255, 215, 0, 0.80); outline-offset: 3px; box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.35); } /* GLOBAL FOCUS RESET — kill browser/Astra/Elementor defaults */ *:focus { outline: none !important; } /* ============================================================ GLOBAL FOCUS-VISIBLE — SOFT GOLD GLOW Uses a thinner semi-transparent outline combined with a diffuse box-shadow halo for a soft, warm glow that is clearly visible without feeling harsh. Components can override with higher specificity but MUST NOT stack a second ring on top. ============================================================ */ *:focus-visible { outline: 2px solid rgba(255, 215, 0, 0.80) !important; outline-offset: 3px !important; box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.35) !important; } /* ============================================================ GALLERY / IMAGE / TILE FOCUS — FULLY INSET APPROACH Problem: WordPress and Elementor galleries nest images inside multiple layers of overflow:hidden containers. Outlines and external box-shadows get clipped no matter what, even with outline-offset:-4px or :focus-within overflow:visible hacks — there are too many ancestors. Solution: Use ONLY inset box-shadow. Inset shadows are drawn entirely inside the element's border box and can NEVER be clipped by parent overflow. We also add a subtle brightness bump so the focused image literally glows brighter than its neighbors. Markup from DevTools (your Housing page): .elementor-image-gallery .gallery.gallery-columns-3.gallery-size-full figure.gallery-item .gallery-icon a[href] ← this is the focusable element img ============================================================ */ /* Kill the global outline on gallery/image links — outline gets clipped, so we replace it entirely */ .gallery-item a:focus-visible, figure.gallery-item a:focus-visible, .elementor-image-gallery a:focus-visible, .e-gallery-item a:focus-visible, .e-gallery-item:focus-visible, .elementor-image-carousel .swiper-slide a:focus-visible, .elementor-widget-image a:focus-visible, .elementor-widget-image-box a:focus-visible, .elementor-widget-call-to-action a:focus-visible, .elementor-grid-item a:focus-visible, .elementor-post a:focus-visible, .elementor-loop-item a:focus-visible, .wp-block-gallery a:focus-visible, a[data-elementor-open-lightbox]:focus-visible, .gallery-icon a:focus-visible { /* No outline — it gets clipped */ outline: none !important; /* INSET gold border + glow — fully inside the element, impossible to clip. 3px solid ring + soft inner glow. */ box-shadow: inset 0 0 0 3px rgba(255, 215, 0, 0.90), inset 0 0 14px rgba(255, 215, 0, 0.35) !important; /* Brighten the focused image so it pops */ filter: brightness(1.15) !important; /* Ensure it paints above siblings */ z-index: 1; position: relative; } /* Also target the img directly in case the is display:contents or the img is the direct focus recipient */ .gallery-item img:focus-visible, figure.gallery-item img:focus-visible, .elementor-image-gallery img:focus-visible, .e-gallery-item img: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; } /* SCREEN READER ONLY */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; } /* ============================================================ HERO CONTENT POSITIONING ============================================================ */ .gprs-hero-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; max-width: 960px; margin-inline: auto; } /* ============================================================ HERO VERTICAL INTENT ============================================================ */ /* Emotion-first (centered) */ .hero--volunteer .hero-content, .hero--story .hero-content { justify-content: center; } /* Action / orientation-first (top-biased) */ .hero--donate .hero-content, .hero--default .hero-content { justify-content: flex-start; } /* ============================================================ FINAL BACKGROUND OWNERSHIP — LIGHT MODE Must come LAST ============================================================ */ html:not(.gprs-dark) body { background: linear-gradient( 135deg, #e3f2fd 0%, #F8FBDD 50%, #D1DCF3 100% ) !important; }