/* ============================================================ 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. Current theme ids: premium-gold | trifecta-verdant | heritage-terracotta | luxury-dark | modern-light | builder-brand ============================================================ */ /* ── 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: #3F6B3F; --accent-dim: #2C4C2C; --accent-deep: #1E3320; --accent-light: #6FA36A; --accent-rgb: 63,107,63; --accent-gradient: linear-gradient(135deg,#3F6B3F 0%, #5C8A55 50%, #2C4C2C 100%); --accent-gradient-hover: linear-gradient(135deg,#5C8A55 0%, #6FA36A 50%, #3F6B3F 100%); --accent-soft-gradient: linear-gradient(135deg,#f4f7ee 0%,#dde8cd 18%,#b8cf9c 45%,#8fb26d 70%,#5c8a55 100%); --accent-soft-border: #6b8f52; --accent-solid: #4E7A46; --accent-solid-hover: #5F8E56; --accent-solid-2-hover: #6FA36A; } /* ── Pushkalam Heritage (warm terracotta + brass — "heritage" wood tones) ── */ [data-theme="heritage-terracotta"] { --accent: #B5652B; --accent-dim: #7E4620; --accent-deep: #4A2A13; --accent-light: #D98F52; --accent-rgb: 181,101,43; --accent-gradient: linear-gradient(135deg,#B5652B 0%, #C97F3E 50%, #8F4F22 100%); --accent-gradient-hover: linear-gradient(135deg,#C97F3E 0%, #D98F52 50%, #B5652B 100%); --accent-soft-gradient: linear-gradient(135deg,#faf1e6 0%,#f0dabc 18%,#e0b57e 45%,#cc8f4c 70%,#a86a2e 100%); --accent-soft-border: #a86a2e; --accent-solid: #BD6F31; --accent-solid-hover: #CE8447; --accent-solid-2-hover: #DE9A5F; } /* ── 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