/* * Brand tokens — the one file to edit for a rebrand (colours, fonts, logo). * Teal/sun palette: pairs with the aerial map-photo backdrop and the teal accents * already used in the app's own UI (map buttons/icons), with the yellow citrus logo * kept as the pop accent. Not the old Squarespace purple — swap freely on rebrand. */ :root { --color-primary: #0e7490; --color-primary-dark: #0b5563; /* Text/icon colour for anything sitting directly on --color-primary/-dark (buttons, the CTA banner/split sections, the testimonials arrows) — a fixed #fff doesn't work once --color-primary can vary per theme or per page's seedColour, since a light- toned primary (dark mode, or a bright seed) would leave white text unreadable. */ --color-on-primary: #ffffff; --color-text: #142433; --color-text-muted: #4d6575; --color-bg: #ffffff; --color-bg-alt: #eef6fb; --color-border: #d7e8f0; /* Header pill background (nav links, dropdown toggles, theme/menu toggles) — glass, but theme-aware, so it reads as dark glass in dark mode instead of staying a fixed light one. Paired with the normal --color-text (not an -on-glass fixed token) since it now inverts along with everything else. */ --color-glass-bg: rgba(255, 255, 255, 0.55); /* Sticky header bar specifically — less transparent than the small pill glass above (0.8 vs 0.55), since it's a full-width bar with page content scrolling behind it, not a small chip sitting on one fixed photo. */ --color-header-sticky-bg: rgba(255, 255, 255, 0.8); /* Hero text scrim — translucent (it's still compositing over the backdrop photo, unlike the fully opaque mobile-menu overlay) but theme-aware, so it reads as a dark glass card in dark mode instead of staying a fixed light one. */ --color-hero-scrim: rgba(255, 255, 255, 0.5); /* Page-wide backdrop gradient the aerial map photo (.page-backdrop__map) fades into */ --color-backdrop-top: #7cc4ec; --color-backdrop-mid: #cfe9f7; --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --logo-url: url('/assets/img/misc/mapzest_circle_logo.png'); --radius-pill: 999px; --radius-card: 16px; } /* Dark mode — toggled via the header sun/moon button (site.js sets data-theme="dark" on , persisted to localStorage). Everything in site.css is already built on these tokens, so this is the only palette swap needed for the core UI. */ :root[data-theme='dark'] { --color-primary: #22b8cc; --color-primary-dark: #3fd6ea; --color-on-primary: #04262b; --color-text: #eef2f5; --color-text-muted: #9fb0bd; --color-bg: #0f1720; --color-bg-alt: #17212c; --color-border: #2a3846; --color-glass-bg: rgba(15, 23, 32, 0.6); --color-header-sticky-bg: rgba(15, 23, 32, 0.8); --color-hero-scrim: rgba(15, 23, 32, 0.55); --color-backdrop-top: #0c2233; --color-backdrop-mid: #123044; }