/* ============================================================ River Dachs — Light / Dark toggle : variable contract ------------------------------------------------------------ ONE set of pages that switch themes. theme-toggle.js flips / "dark" (light is always the default; dark only via the floating toggle, and the manual choice is remembered). LIGHT = the Ocean-Blue light palette (navy / ocean blue / cool grey-white). The light role tokens reference the raw tokens from main.css's :root — nothing to drift. DARK = the Ocean-Blue night palette (two-level navy, blue accents — from the /design "River Dachs Upgrade 2.0" ocean-blue-reskin export). No pure black. Colors are exposed as role-based --c-* tokens so main.css references intent (bg / text / accent) and both themes fill them in. ============================================================ */ /* ---- LIGHT (default) — maps to the current live palette ---- */ :root, :root[data-theme="light"]{ --c-bg: var(--cream); /* page background */ --c-surface: var(--white); /* cards / panels */ --c-surface-alt: #F2F7FB; /* soft raised sections */ --c-footer: var(--teal-dark); /* footer band */ --c-on-footer: var(--cream); /* text on footer */ --c-text: var(--ink); /* body / headings */ --c-heading: var(--ink); --c-muted: var(--ink-muted); /* secondary text */ --c-faint: #8E9AA4; --c-accent: var(--terra); /* CTA / eyebrow */ --c-accent-2: var(--teal); /* links / active */ --c-on-accent: var(--white); /* text on an accent button */ --c-border: var(--border); /* dividers */ --c-border-soft: #E8EDF1; /* form/table role tokens (ocean-blue additions) */ --c-field-border: #A9B4BD; /* form input outlines */ --c-highlight-bg: #EAF3FA; /* highlight/callout fill */ --c-zebra: #f9f7f3; /* alternating table rows */ /* teal-dark used as a heading/price color or CTA fill in page inline-styles: stays teal-dark in light, becomes caramel in dark. */ --c-heading-accent: var(--teal-dark); --c-cta: var(--teal-dark); --c-on-cta: #FFFFFF; /* "On dark chrome" — footer / cta-banner / hero / dog-cards sit on a dark band in BOTH themes, so their text must stay light in both. (Previously these used --c-surface, which is white in light but navy in dark.) */ --c-on-dark: #FFFFFF; /* headings/brand on dark chrome */ --c-on-dark-muted: rgba(255,255,255,0.7); /* body/links on dark chrome */ --c-on-dark-accent: var(--terra-light); /* eyebrows/roles on dark chrome */ } /* ---- DARK (Ocean-Blue night) — two-level navy, blue accents ---- */ :root[data-theme="dark"]{ --c-bg: #0E1C2B; /* page background */ --c-surface: #142838; /* cards / panels */ --c-surface-alt: #12242F; /* soft raised sections */ --c-footer: #0B1826; /* footer / dark bands: deeper than page bg */ --c-on-footer: #DCE7F0; --c-text: #E8EEF3; --c-heading: #EFF4F8; --c-muted: #9FB0BD; --c-faint: #7F93A0; --c-accent: #5FAEE3; /* links & accents brighten for contrast */ --c-accent-2: #5FAEE3; --c-on-accent: #0E1C2B; /* navy text on a blue button */ --c-border: #24394C; --c-border-soft: #1E3448; --c-heading-accent: #A9CDEC; /* navy heading text flips to light blue */ --c-cta: #5FAEE3; /* blue CTA fill in dark */ --c-on-cta: #0E1C2B; /* navy text on the blue CTA */ --c-on-dark: #FFFFFF; /* white text on dark chrome */ --c-on-dark-muted: rgba(255,255,255,0.75); --c-on-dark-accent: var(--terra-light); /* light-blue eyebrows */ --c-field-border: #4A6378; --c-highlight-bg: #14304A; --c-zebra: #182F42; /* Raw brand tints reused as soft backgrounds across pages. Redefining --teal-pale here re-skins every "pale blue background" use for dark in one place, while light keeps the original value. --terra-light is left as-is (bright #7FC4E8): it's used almost entirely as eyebrow/accent TEXT that must stay legible on dark. */ --teal-pale: #16314B; /* tint fills go deep navy */ } /* smooth the switch */ html{ transition:background-color .25s ease, color .25s ease; } /* ---- toggle button ---- */ .theme-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:600 11px/1 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--c-muted); background:transparent; border:1px solid var(--c-border-soft); border-radius:999px; padding:9px 14px; transition:.2s ease; } .theme-toggle:hover{ border-color:var(--c-accent); color:var(--c-accent); } .theme-toggle .dot{ width:10px; height:10px; border-radius:50%; background:var(--c-accent); } /* Floating pill (bottom-right), injected by theme-toggle.js — the approved mockup placement. Solid navy so it reads over any page content. */ .theme-toggle--floating{ position:fixed; bottom:22px; right:22px; z-index:9999; background:var(--teal-dark); color:#fff; border:1px solid rgba(255,255,255,0.25); padding:12px 18px; font-size:12px; box-shadow:0 4px 16px rgba(0,0,0,0.3); } .theme-toggle--floating:hover{ color:#fff; border-color:var(--terra-light); } .theme-toggle--floating .dot{ background:var(--terra-light); } :root[data-theme="dark"] .theme-toggle--floating{ background:#1E425F; } @media print{ .theme-toggle--floating{ display:none; } } /* ============================================================ Dark-mode fixups for a handful of light-tuned raw-hex spots that don't come from the role tokens. Light mode is untouched (these only apply under [data-theme="dark"]). ============================================================ */ :root[data-theme="dark"]{ /* cream hairline fallbacks (profile detail rows) */ --cream-border: var(--c-border); } /* pale-green "success / clearance / genetics" callouts → deep green on navy */ :root[data-theme="dark"] .form__success, :root[data-theme="dark"] .profile-card__genetics{ background:#14352A; border-color:#2E6B43; color:#BFE6CE; } :root[data-theme="dark"] .clearance-tag{ background:#14352A; color:#BFE6CE; } /* highlighted contract term → deep blue fill on navy */ :root[data-theme="dark"] .contract-term--highlight{ background:var(--c-highlight-bg); border-color:var(--teal-mid); } /* status pills keep their semantic hue but on darker fills */ :root[data-theme="dark"] .puppy-card__status--available, :root[data-theme="dark"] .puppy-status--available, :root[data-theme="dark"] .litter-count--available{ background:#14352A; color:#8FD3AC; border-color:#2E6B43; } :root[data-theme="dark"] .puppy-card__status--reserved, :root[data-theme="dark"] .puppy-status--reserved, :root[data-theme="dark"] .litter-count--reserved { background:#3A2C14; color:#E7B267; border-color:#6b4c1c; } :root[data-theme="dark"] .puppy-status--sold, :root[data-theme="dark"] .litter-count--sold{ background:#20242A; color:#A9AEB5; border-color:#3a3f47; } /* ---- Dark-mode contrast fixes for text that was tuned for light chrome ---- */ /* Nav brand: when the nav gets a solid bg (scrolled / interior static), the bg is navy in dark, so the brown brand name must lighten. */ :root[data-theme="dark"] .nav--scrolled .nav__brand-name, :root[data-theme="dark"] .nav--static .nav__brand-name{ color:var(--c-heading); } :root[data-theme="dark"] .nav--scrolled .nav__brand-sub, :root[data-theme="dark"] .nav--static .nav__brand-sub { color:var(--c-muted); } /* Logos in dark: the nav + contract-header logos keep their white-surround look — a rounded cream chip behind the dog-and-waves art, matching the footer's chip treatment (which is a light-mode rule in main.css and is deliberately NOT overridden in dark). Approved mockup treatment. */ :root[data-theme="dark"] .nav__logo, :root[data-theme="dark"] .contract-header__logo img{ background:#FAF8F3; padding:5px 7px; border-radius:10px; box-sizing:content-box; box-shadow:0 3px 10px rgba(0,0,0,0.35); opacity:1; } /* highlight-box title used --c-footer (near-black in dark) → lighten. */ :root[data-theme="dark"] .highlight-box__title{ color:var(--c-heading); } /* mission line (about page): warm brown family, brighter in dark — approved exception to the ocean-blue palette. */ :root[data-theme="dark"] .mission-line{ color:#D9BCA3; } /* Buttons tuned for light chrome. .btn--teal was navy bg + white text; in dark the bg went near-black and the text navy → make it a blue button with navy text. .btn--outline sits on dark bands; keep its text/border light. */ :root[data-theme="dark"] .btn--teal{ background:var(--c-accent); color:var(--c-on-accent); border-color:var(--c-accent); } :root[data-theme="dark"] .btn--teal:hover{ background:#7FC4E8; border-color:#7FC4E8; } :root[data-theme="dark"] .btn--outline{ color:var(--c-on-dark); border-color:rgba(232,238,243,0.55); } :root[data-theme="dark"] .btn--outline:hover{ background:rgba(232,238,243,0.10); } /* Text sitting ON a blue accent background reads best as dark navy, not white. Covers the eyebrow chips and role labels on accent bands. */ :root[data-theme="dark"] .planned-card__window, :root[data-theme="dark"] .planned-parent__role, :root[data-theme="dark"] .planned-x, :root[data-theme="dark"] .skip-link{ color:var(--c-on-accent) !important; } /* Mid pricing tier sits on RAISED NAVY (#1E425F) in dark, not on the accent — its text must be light (the page's own eyebrow/desc rules already are). */ :root[data-theme="dark"] .tier-card--mid .tier-price{ color:#FFFFFF; } /* Pricing table header: th text used --c-surface (navy in dark) on the raised navy header row → keep it white in dark. */ :root[data-theme="dark"] .price-table th{ color:var(--c-on-dark); } /* Non-mid pricing tiers sit on a navy card → their eyebrow/desc must lighten. */ :root[data-theme="dark"] .tier-eyebrow{ color:var(--c-accent); } :root[data-theme="dark"] .tier-desc{ color:var(--c-muted); } /* Parent-card name (brown) + gallery caption (used --c-surface as light text) on navy → lighten. section eyebrows on dark bands brighten to soft caramel. */ :root[data-theme="dark"] .parent-card__name{ color:var(--c-heading); } :root[data-theme="dark"] .parent-card__badge{ color:var(--c-on-dark); } /* profile page section headings used --brown → lighten to heading. */ :root[data-theme="dark"] .dog-profile__section-title{ color:var(--c-heading); } :root[data-theme="dark"] .gallery-item__caption{ color:var(--c-on-dark); } /* Hero title sits over a photo (dark in both themes) → keep it light. */ :root[data-theme="dark"] .hero__title{ color:var(--c-on-dark); } /* Several accent/heading TEXT elements used --c-footer as a "dark teal ink" color; in dark that's near-black on navy. Lift them all to the heading accent (caramel). These are the contract titles/labels, card prices, spot counts, waiting-list titles/stats, and highlight-box title. */ :root[data-theme="dark"] .pwl-form-section-title, :root[data-theme="dark"] .pwl-sidebar-card__stat, :root[data-theme="dark"] .puppy-card__price, :root[data-theme="dark"] .litter-card__spots, :root[data-theme="dark"] .contract-section__title, :root[data-theme="dark"] .contract-block-label{ color:var(--c-heading-accent); } :root[data-theme="dark"] .accordion-body__inner a:hover{ color:var(--c-accent-2); } /* section eyebrow on the near-black cta band → brighten (the band isn't .section--dark, so target the cta-banner + footer eyebrows directly). */ :root[data-theme="dark"] .cta-banner__content .section__eyebrow, :root[data-theme="dark"] .cta-banner .section__eyebrow{ color:var(--c-on-dark-accent); } /* Pricing table: the raw light even-row fill + light table bg need dark equivalents so the (now light) cell text stays readable. Raised elements (thead, mid tier card, pillar icons) use the brighter navy #1E425F. */ :root[data-theme="dark"] .price-table tbody tr:nth-child(even){ background:var(--c-zebra); } :root[data-theme="dark"] .price-table tbody tr:nth-child(even) .td-starts{ background:rgba(95,174,227,0.14); } :root[data-theme="dark"] .td-starts{ background:rgba(95,174,227,0.10); } :root[data-theme="dark"] .price-table thead tr{ background:#1E425F; } :root[data-theme="dark"] .tier-card--mid{ background:#1E425F; border-color:#35597B; } :root[data-theme="dark"] .pillar__icon{ background:#1E425F; } :root[data-theme="dark"] .pay-badge{ border-color:#35597B; } :root[data-theme="dark"] .color-name, :root[data-theme="dark"] .td-base, :root[data-theme="dark"] .td-premium, :root[data-theme="dark"] .td-add, :root[data-theme="dark"] .td-starts{ color:var(--c-text); } :root[data-theme="dark"] .color-sub{ color:var(--c-muted); } /* Ocean-blue reskin: section + nav chrome depth, per the approved mockup. */ :root[data-theme="dark"] .section--white{ background:#12242F; } :root[data-theme="dark"] img{ opacity:0.92; } :root[data-theme="dark"] .nav__cta{ color:#E8EEF3; border-color:#5FAEE3; } :root[data-theme="dark"] .nav__cta:hover{ background:#1E425F; border-color:#7FC4E8; color:#FFFFFF; } :root[data-theme="dark"] .nav--static .nav__cta, :root[data-theme="dark"] .nav--scrolled .nav__cta{ color:#A9CDEC; border-color:#5FAEE3; } :root[data-theme="dark"] .nav--static .nav__cta:hover, :root[data-theme="dark"] .nav--scrolled .nav__cta:hover{ background:#1E425F; color:#FFFFFF; } /* Nav dropdown: --c-surface (#142838) sits too close to the dark nav bg and reads as an indistinct near-black panel. Lift it to the raised navy #1E425F with a lighter border + stronger shadow so it clearly floats off the nav; hover uses a subtle blue tint instead of --c-bg (near-black). */ :root[data-theme="dark"] .nav__dropdown{ background:#1E425F; border-color:#35597B; box-shadow:0 12px 30px rgba(0,0,0,0.45); } :root[data-theme="dark"] .nav__dropdown::before{ background:#1E425F; border-color:#35597B; } :root[data-theme="dark"] .nav__dropdown a{ color:#DCE7F0; } :root[data-theme="dark"] .nav__dropdown a:hover{ color:#FFFFFF; background:rgba(95,174,227,0.16); } :root[data-theme="dark"] .nav__dropdown-divider{ background:#35597B; }