/* ========================================================================== Sully's — Colourway System (Blue ⇄ Red) The whole site is themed via CSS custom properties on . JS toggles .theme-blue / .theme-red and persists choice in cookie + localStorage. Because we also set a matching cookie server-side (functions.php), there is no flash of wrong theme on first paint. ========================================================================== */ /* ---- Default (BLUE) ---- */ body.theme-blue { --bg-page: var(--sullys-navy); /* page background */ --bg-alt: var(--sullys-blue); /* alt section bg */ --bg-accent: var(--sullys-cream); /* cream sections */ --fg-primary: var(--sullys-sky); /* main copy */ --fg-heading: var(--sullys-sky); /* big headings */ --fg-muted: rgba(198, 227, 248, 0.65); /* muted copy */ --fg-on-accent: var(--sullys-navy); /* text on cream bg */ --accent-hot: var(--sullys-orange); /* small dots, ornaments */ --accent-soft: var(--sullys-peach); /* soft peach accents */ --hover-yellow: var(--sullys-yellow); /* nav hover + active */ --border-subtle: rgba(198, 227, 248, 0.15); --form-border: rgba(198, 227, 248, 0.35); --form-fg: var(--sullys-sky); --banner-bg: var(--sullys-peach); --banner-fg: var(--sullys-navy); --overscroll-bg: var(--sullys-navy); /* Themed slot for the events-accordion divider line (and any other element that wants the same swap). Picked up in Elementor by giving a custom Global Colour the title "Accordion Divider" — see $sullys_custom_color_map in functions.php. */ --accordion-divider: var(--sullys-peach); /* peach on blue */ /* Themed slot for headings that should be sky on blue, peach on red. Pick a custom Global Colour titled "Heading Accent" in Elementor. */ --heading-accent: var(--sullys-sky); /* sky on blue */ } /* ---- RED ---- */ body.theme-red { --bg-page: var(--sullys-maroon); --bg-alt: #4a0f0b; /* slightly darker maroon */ --bg-accent: var(--sullys-cream); --fg-primary: var(--sullys-orange); --fg-heading: var(--sullys-orange); --fg-muted: rgba(235, 87, 58, 0.75); --fg-on-accent: var(--sullys-maroon); --accent-hot: var(--sullys-peach); --accent-soft: var(--sullys-yellow); --hover-yellow: var(--sullys-yellow); --border-subtle: rgba(248, 160, 106, 0.25); --form-border: rgba(248, 160, 106, 0.45); --form-fg: var(--sullys-peach); --banner-bg: var(--sullys-sky); --banner-fg: var(--sullys-maroon); --overscroll-bg: var(--sullys-maroon); /* Sky on red theme — see comment in body.theme-blue above. */ --accordion-divider: var(--sullys-sky); /* sky on red */ /* Peach on red theme — pairs with sky on blue (see body.theme-blue). */ --heading-accent: var(--sullys-peach); /* peach on red */ } /* Smooth theme transition so the switch feels animated, not snap. */ body, body * { transition: background-color var(--dur-med) var(--ease-out-cubic), color var(--dur-med) var(--ease-out-cubic), border-color var(--dur-med) var(--ease-out-cubic), fill var(--dur-med) var(--ease-out-cubic), stroke var(--dur-med) var(--ease-out-cubic); } /* Opt out of the transition for things that shouldn't animate (images, cursors, etc.) */ img, svg:not(.sullys-themed-svg), .sullys-cursor, .sullys-cursor * { transition: none !important; }