/* ========================================================================== CORINTH GAS & WATER — COLOUR TOKENS -------------------------------------------------------------------------- THIS IS THE ONLY FILE WITH BRAND COLOURS IN IT. The palette below is PROVISIONAL — a water-blue placeholder so the site can be seen working while the customer decides between the three directions. When they pick, only the six --brand-* values in :root change. Nothing else in the site references a hex code, so the whole site re-skins from here. Light and dark values are declared as pairs. Dark mode is the "Deep Column" near-monochrome indigo, which is the intended dark theme regardless of which light direction wins. ========================================================================== */ :root { /* ---- BRAND RAMP ---------------------------------------------------------- Originally sampled straight from the TOA logo flame at hue 197 — but 197 sits right on the teal/cyan boundary (teal starts ~165, blue starts ~200+), and at the scale of a full panel or a nav dropdown that read as teal, not water blue, even though it was a faithful sample of the logo. Rotated the whole ramp to hue 213 — same saturation and lightness at every step, so nothing about the "feel" changes, but the green component drops out and it reads as unambiguously blue. Verified: every contrast ratio held or improved after the rotation (primary went 6.57:1 -> 9.18:1). */ --brand-wash: #E1ECFA; /* tinted panel grounds */ --brand-pale: #B9D0ED; /* borders, dividers, muted fills */ --brand-bright: #3B87E3; /* display / dark grounds — 3.65:1 */ --brand-mid: #2567B8; /* icons and large text — 5.66:1 */ --brand-primary: #0B468F; /* links, buttons, headings — 9.18:1 */ --brand-deep: #052C5C; /* nav, footer, heavy surfaces — 13.80:1 */ --brand-ink: #0B1F38; /* body text — 16.57:1 */ /* ---- ACCENTS ---- The logo's second colour is chrome, not gold, so the metallic accent is now a silver ramp sampled from the same file. Orange is kept only as a hover/highlight on dark surfaces, where it still reads well against the blue without competing with it. */ --accent: #F59E1F; /* bright: dark grounds only */ --accent-dark: #A85400; /* small text on white — 5.34:1 */ --metal: #A0A0A0; /* chrome, from the logo — decorative */ --metal-light: #C0C0C0; --metal-dark: #606060; /* 6.29:1 — safe for small text on white */ --signal: #B3261E; /* emergency ONLY — 6.54:1 — never decor */ /* ---- SEMANTIC SURFACES (components use these, never the ramp) ---- */ --surface: #FFFFFF; --surface-sunk: var(--brand-wash); --surface-raised: #FFFFFF; --page-bg: #F4F8FB; --text: var(--brand-ink); --text-soft: #445A6B; --text-mute: #64798A; --text-invert: #FFFFFF; --heading: var(--brand-deep); --link: var(--brand-primary); --link-hover: var(--brand-deep); --edge: rgba(11, 54, 84, 0.14); --edge-strong: rgba(11, 54, 84, 0.28); /* Shadows carry a hint of the brand hue rather than neutral grey — grey shadows over a tinted page read as dirty. */ --shadow-xs: 0 1px 2px rgba(11, 54, 84, 0.06); --shadow-s: 0 2px 6px rgba(11, 54, 84, 0.08); --shadow-m: 0 6px 18px rgba(11, 54, 84, 0.12); --shadow-l: 0 14px 36px rgba(11, 54, 84, 0.16); --shadow-xl: 0 22px 54px rgba(11, 54, 84, 0.20); /* ---- ICON SET ---------------------------------------------------------- Used as CSS masks, so every one takes its colour from currentColor and works on light and dark surfaces from a single declaration. Inlined as data URIs: no network requests, and they replace the old bitmap PNGs (download-icon.png and friends), which were fixed-colour, non-retina and couldn't adapt to dark mode. */ --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.2 1.1l-2.3 2z'/%3E%3C/svg%3E"); --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 7L2 7'/%3E%3C/svg%3E"); --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='M8 11l4 4 4-4'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M21 3l-9 9'/%3E%3Cpath d='M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E"); --icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.89h2.78l-.45 2.9h-2.33V22c4.78-.79 8.44-4.93 8.44-9.94z'/%3E%3C/svg%3E"); --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); --icon-droplet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7c2.7 4 5.2 6.3 5.2 9.8a5.2 5.2 0 0 1-10.4 0c0-3.5 2.5-5.8 5.2-9.8z'/%3E%3C/svg%3E"); --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); --icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); --icon-flame-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c2.6 3.7 5 6 5 9.5a5 5 0 0 1-10 0c0-3.5 2.4-5.8 5-9.5z'/%3E%3Ccircle cx='12' cy='20.5' r='1.4'/%3E%3C/svg%3E"); --icon-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --icon-snowflake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M4.2 7l15.6 10M4.2 17l15.6-10'/%3E%3Cpath d='m9 4 3 3 3-3M9 20l3-3 3 3M4.5 10l1 3.7-3.7 1M4.5 14l1-3.7-3.7-1M19.5 10l-1 3.7 3.7 1M19.5 14l-1-3.7 3.7-1'/%3E%3C/svg%3E"); --icon-flask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M10 2v6.5L4.8 18a2 2 0 0 0 1.7 3h11a2 2 0 0 0 1.7-3L14 8.5V2'/%3E%3Cpath d='M8 15h8'/%3E%3C/svg%3E"); --icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); /* Two-tone ombre, never rainbow. */ --ombre-brand: linear-gradient(145deg, var(--brand-primary), var(--brand-deep)); --ombre-soft: linear-gradient(170deg, #FFFFFF, var(--brand-wash)); --ombre-metal: linear-gradient(90deg, transparent, var(--metal), transparent); } /* -------------------------------------------------------------------------- DARK THEME — "Deep Column". Applies from the OS preference, and can be forced with data-theme on once a toggle is added. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --surface: #131F2E; --surface-sunk: #0D1826; --surface-raised: #1A283A; --page-bg: #0A131F; --text: #DDE6F0; --text-soft: #A8BBCC; --text-mute: #7F94A8; --heading: #FFFFFF; --link: var(--brand-bright); --link-hover: #7FD2F5; --edge: rgba(152, 176, 200, 0.18); --edge-strong: rgba(152, 176, 200, 0.34); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-s: 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-m: 0 6px 18px rgba(0, 0, 0, 0.50); --shadow-l: 0 14px 36px rgba(0, 0, 0, 0.55); --shadow-xl: 0 22px 54px rgba(0, 0, 0, 0.60); --ombre-soft: linear-gradient(170deg, #1A283A, #0D1826); } } :root[data-theme="dark"] { --surface: #131F2E; --surface-sunk: #0D1826; --surface-raised: #1A283A; --page-bg: #0A131F; --text: #DDE6F0; --text-soft: #A8BBCC; --text-mute: #7F94A8; --heading: #FFFFFF; --link: var(--brand-bright); --link-hover: #7FD2F5; --edge: rgba(152, 176, 200, 0.18); --edge-strong: rgba(152, 176, 200, 0.34); --ombre-soft: linear-gradient(170deg, #1A283A, #0D1826); } :root[data-theme="light"] { --surface: #FFFFFF; --surface-sunk: var(--brand-wash); --surface-raised: #FFFFFF; --page-bg: #F4F8FB; --text: var(--brand-ink); --text-soft: #445A6B; --text-mute: #64798A; --heading: var(--brand-deep); --link: var(--brand-primary); --link-hover: var(--brand-deep); --edge: rgba(11, 54, 84, 0.14); --edge-strong: rgba(11, 54, 84, 0.28); --ombre-soft: linear-gradient(170deg, #FFFFFF, var(--brand-wash)); }