/* Theme Name: FHR Child Description: Cosmic-dark child theme for FreeHoroscopeReading.net, carrying the approved design system on top of Kadence. Template: kadence Version: 0.1.0 Author: FreeHoroscopeReading.net Text Domain: fhr-child */ /* ========================================================================== Design tokens (Phase 6A Task 1 — Claude Design visual refresh) Source: horoscope-reading-website-redesign/project/Free Horoscope Reading.dc.html. Every oklch-bearing token is declared TWICE: 1) here in :root, as a plain hex/rgba fallback — this is what browsers without oklch() support (older Safari/Firefox) resolve to, so a colour never resolves to nothing. 2) inside the `@supports (color: oklch(0 0 0))` block right below, reassigning the SAME custom properties to the exact oklch() values from the design bundle. Browsers that don't understand oklch() never apply that block at all (the @supports test itself fails), so they keep the fallback permanently; browsers that do support it get the exact design colour. Token NAMES are unchanged from the previous palette (plus a few additions the new design needs, e.g. --mono) because the plugin's tool.css reads these via var(--gold, ...) etc. — renaming would silently break the reading tool's styling. ========================================================================== */ :root{ --night:#0e0e1a; /* page base -- oklch(0.17 0.025 285) */ --night-2:#17172a; /* secondary panel dark -- oklch(0.22 0.03 285) */ --indigo:#392a51; /* deep indigo glow -- oklch(0.32 0.07 300) */ --violet:#c0abe9; /* violet accent -- oklch(0.78 0.09 300) */ --gold:#e9c67d; /* gold accent -- oklch(0.84 0.1 85) */ --gold-soft:#e9ca89; /* gold alt -- oklch(0.85 0.09 85) */ --gold-2:#eda97c; /* CTA gradient 2nd stop -- oklch(0.79 0.1 55) */ --cta-text:#1e1006; /* text on gold CTAs -- oklch(0.19 0.03 60) */ --star:#f6f2e7; /* headings -- oklch(0.96 0.015 90) */ --lav:#ebe8df; /* body text -- oklch(0.93 0.012 90) */ --muted:rgba(213,209,198,.7); /* muted text -- oklch(0.86 0.015 90 / 0.7) */ --faint:rgba(211,209,202,.5); /* faint text -- oklch(0.86 0.01 90 / 0.5) */ --line:rgba(223,192,127,.18); /* hairline border -- oklch(0.82 0.09 85 / 0.18) */ --card:rgba(244,238,224,.03); /* card fill -- oklch(0.95 0.02 90 / 0.03) */ --bg-glow-1:rgba(57,42,81,.55); /* page bg radial 1 -- oklch(0.32 0.07 300 / 0.55) */ --bg-glow-2:rgba(19,41,70,.5); /* page bg radial 2 -- oklch(0.28 0.06 255 / 0.5) */ --sans:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular','Courier New',monospace; } @supports (color: oklch(0 0 0)){ :root{ --night:oklch(0.17 0.025 285); --night-2:oklch(0.22 0.03 285); --indigo:oklch(0.32 0.07 300); --violet:oklch(0.78 0.09 300); --gold:oklch(0.84 0.1 85); --gold-soft:oklch(0.85 0.09 85); --gold-2:oklch(0.79 0.1 55); --cta-text:oklch(0.19 0.03 60); --star:oklch(0.96 0.015 90); --lav:oklch(0.93 0.012 90); --muted:oklch(0.86 0.015 90 / 0.7); --faint:oklch(0.86 0.01 90 / 0.5); --line:oklch(0.82 0.09 85 / 0.18); --card:oklch(0.95 0.02 90 / 0.03); --bg-glow-1:oklch(0.32 0.07 300 / 0.55); --bg-glow-2:oklch(0.28 0.06 255 / 0.5); } } /* ========================================================================== Site-wide base styling (ported from design/pages/homepage.html body/header) ========================================================================== */ *{box-sizing:border-box} html{background:var(--night)} /* Kadence prints a customizer-generated