/* ============================================================ AZATA — LIGHT THEME OVERRIDE (scoped to .theme-light) Loaded on EVERY page, AFTER every section stylesheet. Inert until .theme-light is present on , which the inline boot script in wp_head decides. Light is the site default as of 2026-09-20. Strategy: remap the design tokens from the dark ramp to a warm paper ramp, keep brand orange bright for graphics, and switch orange *reading text* to a deeper burnt orange for contrast. Nothing in the section markup or the section CSS is touched. ============================================================ */ /* ── 1. Token remap ──────────────────────────────────────────── */ .theme-light { /* Surfaces — the dark ramp flips to warm paper (page → deepest) */ --az-dark-1: #FBF8F2; /* page background, scrollbar track */ --az-dark-2: #F4EEE2; /* alternate section surfaces */ --az-dark-3: #EDE4D6; /* cards, quote-form background */ --az-dark-4: #E3D7C4; /* raised / hover, scrollbar thumb */ --az-dark-5: #D6C7B0; /* deep dividers */ /* Ink — text on paper */ --text-primary: #211A12; /* headings & body */ --text-secondary: #5C4E3E; /* body copy */ --text-muted: #786751; /* meta, captions, prices */ /* Accent — bright orange stays for FILLS; burnt ink for TEXT */ --accent-ink: #B65A10; /* NEW — small orange text */ --az-orange-dim: rgba(244,131,46,0.10); --az-orange-glow: rgba(244,131,46,0.14); /* Borders — white-on-dark → dark-on-light hairlines */ --border-subtle: rgba(30,22,14,0.08); --border-medium: rgba(30,22,14,0.14); --border-orange: rgba(244,131,46,0.32); /* Shadows — soften + warm-tint (heavy black reads wrong on light) */ --shadow-sm: 0 2px 8px rgba(75,55,30,0.08); --shadow-md: 0 8px 32px rgba(75,55,30,0.10); --shadow-lg: 0 20px 60px rgba(75,55,30,0.14); --shadow-orange: 0 8px 32px rgba(244,131,46,0.16); --shadow-orange-lg: 0 20px 60px rgba(244,131,46,0.12); /* NOTE: --az-black, --text-dark, --text-on-orange are KEPT dark — they are ink / outlines / text-on-orange, not surfaces. --az-orange stays bright #F4832E so buttons, wireframe, stars, diamonds and bars keep the brand pop automatically. */ background: var(--az-dark-1); color: var(--text-primary); } /* Film grain: dark noise reads as texture on light, not dirt */ .theme-light body::before { opacity: 0.04; } /* Text selection on cream */ .theme-light ::selection { background: rgba(244,131,46,0.18); color: #8a3d05; } /* ── 2. Orange reading-text → burnt ink ──────────────────────── */ /* (icons, stars and diamond glyphs are intentionally NOT listed — they keep the bright brand orange.) */ .theme-light .nav__logo-accent, .theme-light .nav__overlay-link:hover, .theme-light .hero__eyebrow, .theme-light .btn--ghost:hover, .theme-light .overline, .theme-light .products__card-tag, .theme-light .products__card-link, .theme-light .craft__cta-link, .theme-light .craft__cta-link:hover, .theme-light .custom__card-link, .theme-light .custom__card-link:hover, .theme-light .categories__tile-count, .theme-light .quote__success-text strong, .theme-light .about__pullquote, .theme-light .about__link, .theme-light .about__link:hover, .theme-light .newsletter__success, .theme-light .footer__logo-accent, .theme-light .footer__social-link:hover, .theme-light .footer__links a:hover, .theme-light .footer__email, .theme-light .footer__email:hover, .theme-light .footer__platform:hover { color: var(--accent-ink); } /* Large italic display accents — richer dark orange reads better big */ .theme-light .hero__headline .accent, .theme-light .section-title em, .theme-light .newsletter__title em { color: var(--az-orange-dark); } /* ── 3. Per-selector fixups (hardcoded dark values) ──────────── */ /* Nav glass — dark frost → light frost */ .theme-light .nav.scrolled { background: rgba(251,248,242,0.85); } .theme-light .nav__overlay { background: rgba(251,248,242,0.97); } /* Custom-section cards — dark translucent → light translucent */ .theme-light .custom__card { background: rgba(255,255,255,0.60); } .theme-light .custom__testimonial{ background: rgba(255,255,255,0.55); } .theme-light .custom__card:hover { box-shadow: 0 12px 40px rgba(75,55,30,0.12), 0 0 0 1px rgba(244,131,46,0.10); } /* Trust chips & review bars — white-on-dark hairlines → dark-on-light */ .theme-light .quote__trust-chip { background: rgba(30,22,14,0.03); } .theme-light .reviews__breakdown-bar { background: rgba(30,22,14,0.08); } /* Product "build plate" reflection — heavy dark band → faint warm reflection */ .theme-light .products__card-plate { background: linear-gradient(to top, rgba(75,55,30,0.10) 0%, transparent 100%); } /* Category tile gradients are LEFT dark on purpose — they sit over photography to keep the tile text legible. */ /* ── 4. Feedback fixes (2026-09-12) ──────────────────────────── */ /* Category tiles sit OVER dark photography, so their text must stay light (not the dark ink the rest of the light page uses) to stay readable. */ .theme-light .categories__tile-name { color: #F7F0E6; } .theme-light .categories__tile-count { color: var(--az-orange); } /* bright on dark */ .theme-light .categories__tile-custom-sub { color: rgba(247,240,230,0.72); } /* Nav — solid cream background so nothing bleeds through while scrolling, and a bit larger overall. */ .theme-light .nav { background: rgba(250,246,239,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1.5rem 0; } .theme-light .nav.scrolled { background: rgba(250,246,239,0.97); padding: 1.05rem 0; } .theme-light .nav__link { font-size: 1rem; } .theme-light .nav__cta { font-size: 0.95rem; } .theme-light .nav__logo { font-size: 1.6rem; } /* ── 5. Surfaces that do NOT follow the page theme ───────────── */ /* Anything sitting on a fixed dark surface, or on a light card, needs its text set from THAT surface, not from the page. Two cases here. */ /* (a) Hero badges float over the dark product photo and carry their own hardcoded dark glass. Give them light glass so they match the light page, and dark ink so they stay readable either way. */ .theme-light .hero__badge { background: rgba(251,248,242,0.92); border-color: rgba(244,131,46,0.42); box-shadow: 0 6px 22px rgba(30,22,14,0.16); } .theme-light .hero__badge-text strong { color: var(--text-primary); } .theme-light .hero__badge-text span { color: var(--text-muted); } /* (b) The "Custom Order" category tile is a CREAM card, not a photo, so it must keep dark ink — unlike the photo tiles, which stay light. */ .theme-light .categories__tile:not(.categories__tile--custom) .categories__tile-name { color: #F7F0E6; } .theme-light .categories__tile--custom .categories__tile-name { color: var(--text-primary); } .theme-light .categories__tile--custom .categories__tile-custom-sub { color: var(--text-muted); }