/* ============================================================ theme.css — Reusable Landing Page Template ============================================================ Swaps the ENTIRE brand-accent palette by re-declaring the custom properties defined once in style.css:root. No HTML or component CSS ever needs to change to reskin a project. Activation: (or one of the ids below) Set at runtime by theme-loader.js, driven by CONFIG.THEME in config.js, BEFORE first paint (see index.html ). Adding a new theme = add one new [data-theme="..."] block. Nothing else in the codebase needs to know it exists. ============================================================ */ /* ── Premium Gold (default — Sobha Hoskote v1 palette) ─────── */ [data-theme="premium-gold"] { --accent: #C79A3B; --accent-dim: #95800a; --accent-deep: #6d4b00; --accent-light: #E5C56E; --accent-rgb: 199,154,59; --accent-gradient: linear-gradient(135deg,#C79A3B 0%, #D9B35B 50%, #B8862D 100%); --accent-gradient-hover: linear-gradient(135deg,#D9B35B 0%, #E5C56E 50%, #C79A3B 100%); --accent-soft-gradient: linear-gradient(135deg,#fff8e7 0%,#f6e3a3 18%,#ddb557 45%,#c8962c 70%,#a9761c 100%); --accent-soft-border: #b88a2d; --accent-solid: #D4A537; --accent-solid-hover: #E2B84A; --accent-solid-2-hover: #E6BC55; } /* ── Trifecta Verdant (Trifecta Veranza — "rooted in green") ─ */ [data-theme="trifecta-verdant"] { --accent: #C79A3B; --accent-dim: #95800a; --accent-deep: #6d4b00; --accent-light: #E5C56E; --accent-rgb: 199,154,59; --accent-gradient: linear-gradient(135deg,#C79A3B 0%, #D9B35B 50%, #B8862D 100%); --accent-gradient-hover: linear-gradient(135deg,#D9B35B 0%, #E5C56E 50%, #C79A3B 100%); --accent-soft-gradient: linear-gradient(135deg,#fff8e7 0%,#f6e3a3 18%,#ddb557 45%,#c8962c 70%,#a9761c 100%); --accent-soft-border: #b88a2d; --accent-solid: #D4A537; --accent-solid-hover: #E2B84A; --accent-solid-2-hover: #E6BC55; } /* ── Luxury Dark (deep charcoal + brushed brass) ─────────────── */ [data-theme="luxury-dark"] { --accent: #A8894F; --accent-dim: #7A6134; --accent-deep: #4A3B1F; --accent-light: #C9AD79; --accent-rgb: 168,137,79; --accent-gradient: linear-gradient(135deg,#8C7239 0%, #A8894F 50%, #6E5A2C 100%); --accent-gradient-hover: linear-gradient(135deg,#A8894F 0%, #C9AD79 50%, #8C7239 100%); --accent-soft-gradient: linear-gradient(135deg,#efe9dc 0%,#ddcda3 18%,#c2a86a 45%,#a8894f 70%,#7a6134 100%); --accent-soft-border: #7a6134; --accent-solid: #A8894F; --accent-solid-hover: #C9AD79; --accent-solid-2-hover: #DAC48E; } /* ── Modern Light (airy, cool-toned, blue-slate accent) ──────── */ [data-theme="modern-light"] { --accent: #2B5F8A; --accent-dim: #1E4363; --accent-deep: #14314A; --accent-light: #5C90BC; --accent-rgb: 43,95,138; --accent-gradient: linear-gradient(135deg,#2B5F8A 0%, #4C82AD 50%, #1E4363 100%); --accent-gradient-hover: linear-gradient(135deg,#4C82AD 0%, #5C90BC 50%, #2B5F8A 100%); --accent-soft-gradient: linear-gradient(135deg,#eef4f9 0%,#cfe1ee 18%,#a2c4dc 45%,#6f9ec2 70%,#4c82ad 100%); --accent-soft-border: #4c82ad; --accent-solid: #2B5F8A; --accent-solid-hover: #3E75A2; --accent-solid-2-hover: #5C90BC; } /* ── Builder Brand — placeholder theme. Intended to be cloned/renamed per-builder when a developer supplies its own brand colours. Defaults to Premium Gold values until CONFIG.THEME_OVERRIDES supplies real hexes; theme-loader.js can also inject a one-off