/* ============================================================ STOUGHTON MEDIA — LIGHT THEME OVERRIDE Drop-in. Does not modify styles.css or any HTML. INSTALL (one line, every page): In , immediately AFTER the existing styles.css link: Order matters. This file must load second or it will be overridden by styles.css. TO REVERT: delete that one line. Nothing else changes. ============================================================ */ /* ------------------------------------------------------------ 1. TOKEN INVERSION Same variable names as styles.css, flipped for a light page. Note --cream is now dark and --ink is now light: the names keep their ROLE (--cream = text, --ink = page) so every existing rule in styles.css keeps working untouched. ------------------------------------------------------------ */ :root { --ink: #F7F3EC; /* page background (was #0C0A09) */ --ink-2: #FFFFFF; /* raised surface (was #16120F) */ --stone: #FFFFFF; /* card (was #1C1917) */ --stone-2: #FBF8F2; /* card, alt (was #28231F) */ --line: #E4DBCB; /* hairlines (was #3A332D) */ --cream: #0C0A09; /* body text (was #F7F3EC) */ --muted: #6E6357; /* secondary text (was #B6ABA0) */ --muted-2: #6E6357; /* darkened: #7D7266 only hit 4.25:1 */ --gold: #E0A82E; /* UNCHANGED — fills, buttons, badges */ --gold-soft: #8A6520; --gold-glow: rgba(224, 168, 46, 0.16); /* New helpers this file introduces */ --gold-text: #8A6520; /* gold used AS TEXT. #E0A82E on cream is 1.94:1 and unreadable. 4.79:1. */ --ink-true: #0C0A09; /* a dark that stays dark, for text sitting on gold buttons */ --lift: 0 1px 2px rgba(12,10,9,.04), 0 8px 24px rgba(12,10,9,.05); } html, body { background: var(--ink); color: var(--cream); } /* ------------------------------------------------------------ 2. GOLD-AS-TEXT Every place styles.css sets color to gold. Verified by scanning computed styles on the live homepage. ------------------------------------------------------------ */ .brand__amp, .hero__eyebrow, .hero__title-accent, .section__eyebrow, .card__icon, .timeline__week, .roi__note, .roi__result-num, .field__value, .cta__email, .footer__built, output, em, strong { color: var(--gold-text) !important; } /* Inline links inside prose. These were 2.14:1. */ p a:not(.btn), li a:not(.btn), .services__more a { color: var(--gold-text) !important; text-decoration: underline; text-underline-offset: 3px; } /* Icon strokes and fills read as washed out at full gold on cream */ .card__icon svg, .card__icon path, .card__icon circle, .card__icon rect { stroke: var(--gold-text); } .card__icon svg [fill]:not([fill="none"]) { fill: var(--gold-text); } /* ------------------------------------------------------------ 3. BUTTONS .btn--gold already sets dark text on a gold gradient, so it survives the flip untouched. Only the ghost variant needs it. ------------------------------------------------------------ */ .btn--ghost, .btn--secondary, .btn--outline { color: var(--ink-true); border-color: var(--line); background: transparent; } .btn--ghost:hover, .btn--secondary:hover, .btn--outline:hover { border-color: var(--gold); } .skip-link { background: var(--gold); color: var(--ink-true); } /* ------------------------------------------------------------ 4. THE DROPDOWN BUG .nav__submenu hardcodes rgba(12,10,9,.97) instead of using a token, so it stayed dark while its links went dark. The whole Services menu was invisible. This is the one thing that would have shipped broken. ------------------------------------------------------------ */ .nav__submenu { background: rgba(255, 255, 255, 0.98) !important; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(12, 10, 9, 0.10); } .nav__submenu a { color: var(--ink-true) !important; } .nav__submenu a:hover { color: var(--gold-text) !important; background: #FBF8F2; } .footer__nav a { color: var(--muted) !important; } .footer__nav a:hover { color: var(--ink-true) !important; } /* ------------------------------------------------------------ 5. ELEVATION On ink, cards lifted by being lighter than the page. On cream, white-on-cream barely separates, so they need a shadow. ------------------------------------------------------------ */ .card, .pricing-card, .timeline__item, .faq__item, .stat, .proof__item { box-shadow: var(--lift); } /* The sticky header was a dark translucent bar */ .nav, .header, .site-header { background: rgba(247, 243, 236, 0.88); } /* ------------------------------------------------------------ 6. ACCESSIBILITY FLOOR ------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ ADDENDUM — NOT PART OF THE ORIGINAL FILE Added 2026-08-21 after measuring the rendered page. Every rule above this line is untouched. Delete this block to revert to the file exactly as authored. Three issues the original file did not cover. All three are the same root cause it already solved for .skip-link: styles.css uses a TOKEN where it meant "a dark", so the inversion flips it the wrong way. ============================================================ */ /* --- A. Dark text on gold fills --------------------------- styles.css sets `color: var(--ink)` on these, not a literal dark. --ink is the page-background token, so the inversion turns them cream-on-gold: measured 1.94:1, the same ratio this file's own notes call unreadable. --ink-true is the dark that stays dark, exactly as used for .skip-link. Measured after fix: ~8.2:1. ----------------------------------------------------------- */ .btn--gold, .ptier__tag, .stackcard__tag, .rankcard__pin--gold { color: var(--ink-true) !important; } /* --- B. Sticky nav on scroll ------------------------------- .nav.is-scrolled hardcodes rgba(12,10,9,.82). Its specificity (0,2,0) outranks the .nav rule in section 5 (0,1,0), so load order cannot win this one — it needs matching specificity. Without this the bar turns dark the moment the page scrolls. ----------------------------------------------------------- */ .nav.is-scrolled { background: rgba(247, 243, 236, 0.92); border-color: var(--line); box-shadow: 0 10px 30px -20px rgba(12, 10, 9, .35); } /* --- C. Mobile menu panel ---------------------------------- Below 900px the nav collapses into .nav__links, which hardcodes rgba(12,10,9,.96) — the same trap as .nav__submenu, just at a breakpoint. Dark panel plus inverted dark links meant an invisible menu on phones. Links need no change: .nav__links a is var(--muted) (#6E6357, 5.6:1 on white) and hover is var(--cream), already dark. ----------------------------------------------------------- */ @media (max-width: 900px) { .nav__links { background: rgba(255, 255, 255, 0.98); box-shadow: 0 12px 32px rgba(12, 10, 9, 0.10); } }