/* ============================================================================= HEMZO — Theme System ----------------------------------------------------------------------------- Three globally-switchable colour schemes: [data-theme="gold"] The original / default dark-charcoal + gold scheme. [data-theme="light"] Gold + white/beige gradient scheme (dark surfaces become soft white/beige gradients). [data-theme="blue"] Gold + royal blue scheme (dark surfaces become royal blue and similar tones). Themes are applied on via js/theme.js (persisted in localStorage). The default `:root` values in style.css already equal the `gold` theme; the gold block below is declared for explicitness and to drive the theme switcher's "active" state. Only SEMANTIC surface tokens are overridden here — the brand gold palette, typography, spacing, and light-surface cards (white cards on light sections) remain identical across all three themes by design. ========================================================================== */ /* ----------------------------------------------------------------------------- THEME 1 — GOLD (default / current) -------------------------------------------------------------------------- */ :root, [data-theme="gold"] { --surface-dark: var(--charcoal); --surface-dark-2: var(--charcoal-2); --surface-dark-rgb: 26, 26, 26; --on-dark-heading: var(--white); --on-dark-body: rgba(255, 255, 255, 0.78); --on-dark-muted: rgba(255, 255, 255, 0.6); --on-dark-faint: rgba(255, 255, 255, 0.08); --dark-border-soft: rgba(203, 179, 135, 0.25); --dark-border-social: rgba(203, 179, 135, 0.35); --dark-overlay-bg: rgba(26, 26, 26, 0.92); --shadow-color-rgb: 26, 26, 26; --nav-scrolled-bg-rgb: 250, 248, 245; --nav-scrolled-bg: rgba(250, 248, 245, 0.88); --nav-scrolled-bg-solid: var(--off-white); /* Hero / dark-section gradient surface (used by .hero, .cta-banner, .contact-hero, .mobile-menu, .footer). Flat charcoal in the gold theme. */ --surface-dark-gradient: linear-gradient(180deg, #1A1A1A 0%, #1A1A1A 100%); /* Theme accent badge (used on the switcher page) */ --theme-accent: var(--gold); } /* ----------------------------------------------------------------------------- THEME 2 — LIGHT (gold + white/beige gradient) Dark surfaces become soft white → beige gradients. Gold accents stay. Text on those surfaces flips to charcoal / warm-gray for legibility. -------------------------------------------------------------------------- */ [data-theme="light"] { /* Dark surfaces are replaced with a soft white → beige gradient. */ --surface-dark: #FBF7F0; /* warm ivory */ --surface-dark-2: #F3ECDF; /* slightly deeper beige */ --surface-dark-rgb: 251, 247, 240; --on-dark-heading: var(--charcoal); /* dark text on light surface */ --on-dark-body: rgba(26, 26, 26, 0.72); --on-dark-muted: rgba(26, 26, 26, 0.55); --on-dark-faint: rgba(26, 26, 26, 0.10); --dark-border-soft: rgba(168, 144, 94, 0.30); /* gold-dark tinted */ --dark-border-social: rgba(168, 144, 94, 0.40); --dark-overlay-bg: rgba(251, 247, 240, 0.94); --shadow-color-rgb: 120, 110, 90; /* warmer, softer shadows */ --nav-scrolled-bg-rgb: 250, 248, 245; --nav-scrolled-bg: rgba(250, 248, 245, 0.92); --nav-scrolled-bg-solid: var(--off-white); --surface-dark-gradient: linear-gradient(135deg, #FFFFFF 0%, #FBF7F0 45%, #F3ECDF 100%); --theme-accent: var(--gold); } /* ----------------------------------------------------------------------------- THEME 3 — BLUE (gold + royal blue) Dark surfaces become royal blue (and similar) tones. Gold accents stay, which gives a regal blue-and-gold combination. -------------------------------------------------------------------------- */ [data-theme="blue"] { --surface-dark: #1B2A6B; /* deep royal blue */ --surface-dark-2: #142256; /* darker navy companion */ --surface-dark-rgb: 27, 42, 107; --on-dark-heading: #FFFFFF; --on-dark-body: rgba(255, 255, 255, 0.82); --on-dark-muted: rgba(255, 255, 255, 0.65); --on-dark-faint: rgba(255, 255, 255, 0.12); --dark-border-soft: rgba(203, 179, 135, 0.30); /* gold border still */ --dark-border-social: rgba(203, 179, 135, 0.40); --dark-overlay-bg: rgba(27, 42, 107, 0.94); --shadow-color-rgb: 20, 34, 86; /* blue-tinted shadows */ --nav-scrolled-bg-rgb: 250, 248, 245; /* nav stays light ivory */ --nav-scrolled-bg: rgba(250, 248, 245, 0.88); --nav-scrolled-bg-solid: var(--off-white); --surface-dark-gradient: linear-gradient(160deg, #1B2A6B 0%, #142256 55%, #0E1A4D 100%); --theme-accent: var(--gold); } /* ----------------------------------------------------------------------------- Apply the gradient surface to every "dark" container in each theme. In the gold theme this resolves to a flat charcoal (per the gradient var above) so there is no visual change for the default look. -------------------------------------------------------------------------- */ .hero, .hero--inner, .cta-banner, .contact-hero, .mobile-menu, .footer, .map-placeholder { background: var(--surface-dark-gradient) !important; transition: background var(--transition-slow), color var(--transition); } .section--dark { background: var(--surface-dark-gradient) !important; transition: background var(--transition-slow), color var(--transition); } /* Value cards sit on dark sections but have a white card face. In the light theme, the section becomes light, so we keep cards visually distinct with a subtle shadow + warmer border instead of pure white-on-white. */ [data-theme="light"] .value-card { background: var(--white); border-color: var(--light-gray); box-shadow: var(--shadow-sm); } [data-theme="light"] .value-card h3 { color: var(--charcoal); } [data-theme="light"] .value-card p { color: var(--warm-gray); } /* On the blue theme, value cards keep a soft off-white face but get a blue-tinted shadow for depth against the royal-blue section. */ [data-theme="blue"] .value-card { background: var(--white); border-color: rgba(27, 42, 107, 0.12); box-shadow: 0 10px 30px -12px rgba(20, 34, 86, 0.35); } [data-theme="blue"] .value-card h3 { color: var(--charcoal); } [data-theme="blue"] .value-card p { color: var(--warm-gray); } /* Map placeholder grid tint uses the gold rgb already; keep it. */ /* ============================================================================= THEME SWITCHER PAGE STYLES ========================================================================== */ .theme-page__intro { text-align: center; max-width: 60ch; margin-inline: auto; margin-bottom: var(--space-8); } .theme-page__intro p { color: var(--warm-gray); } .theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 860px) { .theme-options { grid-template-columns: 1fr; } } .theme-card { position: relative; background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-lg); overflow: hidden; text-align: left; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); display: flex; flex-direction: column; } .theme-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); } .theme-card.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), var(--shadow-md); } .theme-card__swatch { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; } .theme-card__swatch--gold { background: linear-gradient(180deg, #1A1A1A 0%, #1A1A1A 100%); } .theme-card__swatch--light { background: linear-gradient(135deg, #FFFFFF 0%, #FBF7F0 45%, #F3ECDF 100%); } .theme-card__swatch--blue { background: linear-gradient(160deg, #1B2A6B 0%, #142256 55%, #0E1A4D 100%); } .theme-card__swatch::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23CBB387' stroke-width='1' opacity='0.10'%3E%3Crect x='6' y='6' width='30' height='68'/%3E%3Crect x='44' y='6' width='30' height='68'/%3E%3C/g%3E%3C/svg%3E"); background-size: 80px 80px; pointer-events: none; } .theme-card__swatch-chip { width: 56px; height: 56px; border-radius: 50%; background: var(--gold); border: 2px solid rgba(255,255,255,0.6); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4); position: relative; z-index: 1; } .theme-card__swatch--light .theme-card__swatch-chip { border-color: rgba(168,144,94,0.4); box-shadow: 0 8px 24px -8px rgba(120,110,90,0.35); } .theme-card__swatch--blue .theme-card__swatch-chip { border-color: rgba(255,255,255,0.5); box-shadow: 0 8px 24px -8px rgba(20,34,86,0.5); } .theme-card__body { padding: var(--space-5) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .theme-card__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--charcoal); letter-spacing: 0.02em; } .theme-card__desc { font-size: var(--fs-small); color: var(--warm-gray); line-height: 1.55; } .theme-card__badge { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--gold); color: var(--charcoal); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; z-index: 2; display: none; } .theme-card.is-active .theme-card__badge { display: block; } .theme-current-indicator { text-align: center; margin-top: var(--space-7); font-size: var(--fs-small); color: var(--warm-gray); letter-spacing: 0.08em; } .theme-current-indicator strong { color: var(--gold-dark); font-weight: 600; }