/* ═══════════════════════════════════════════════════════════════ IVAE Studios — Dark Mode (global override) ─────────────────────────────────────────────────────────────── Applied automatically (default ON) by /js/dark-mode.js, which sets before paint to avoid FOUC. Toggle in the header switches between dark and light, persisted in localStorage as 'ivae-theme' = 'dark' | 'light'. Strategy: • Invert section backgrounds: cream/sand → ink/ink2 • Invert text colors: ink → cream • Keep gold as accent (works on both backgrounds) • Keep all heroes/imagery unchanged (they already work on dark) ═══════════════════════════════════════════════════════════════ */ /* Default off — only applies when html.dark is set */ html.dark { color-scheme: dark; } html.dark body { background: #0c1219; color: #faf8f5; } /* ── Section backgrounds (most have inline styles) ─────────────── */ html.dark section, html.dark .section, html.dark main { background: #0c1219; color: #faf8f5; } /* Cream/sand backgrounds → dark navy */ /* Note: #f9f8f7 is v1 cream (legacy) — matched alongside #faf8f5 (v2) during the design-system migration. Cleanup scheduled for Wave 7. */ html.dark [style*="background:#faf8f5"], html.dark [style*="background: #faf8f5"], html.dark [style*="background:#f9f8f7"], html.dark [style*="background: #f9f8f7"], html.dark [style*="background:var(--cream)"], html.dark [style*="background: var(--cream)"], html.dark [style*="background:var(--cream-1)"], html.dark [style*="background: var(--cream-1)"], html.dark [style*="background:var(--paper)"], html.dark [style*="background: var(--paper)"], html.dark [style*="background:#eee8dc"], html.dark [style*="background:#ede8df"], html.dark [style*="background:var(--sand)"], html.dark [style*="background: var(--sand)"], html.dark [style*="background:var(--sand-1)"], html.dark [style*="background: var(--sand-1)"] { background: #0c1219 !important; } /* ── Common content sections ─────────────────────────────────── */ html.dark .why, html.dark .services, html.dark .destinations, html.dark .process, html.dark .testimonials, html.dark .reviews, html.dark .faq, html.dark .blog-section, html.dark .blog-list, html.dark .post-content, html.dark .post-article, html.dark .post, html.dark .blog-grid, html.dark .grid, html.dark .info-section, html.dark .content, html.dark .stats, html.dark .about, html.dark .bio, html.dark .contact, html.dark .outfit-guide, html.dark .legal { background: #0c1219; color: #faf8f5; } html.dark .why-text, html.dark .post-body, html.dark .post-content p, html.dark .post-article p, html.dark p, html.dark li, html.dark dd, html.dark dt, html.dark blockquote, html.dark figcaption { color: #faf8f5; } html.dark .test-quote, html.dark .testimonial-text, html.dark .quote { color: #faf8f5; } /* Headings keep their own colors but force cream when they were ink */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: #faf8f5; } /* Eyebrows/labels in gold or muted */ html.dark .eyebrow, html.dark .section-label, html.dark .post-cat, html.dark .post-meta, html.dark .post-date { color: #c9a54e; } html.dark .muted, html.dark .text-muted, html.dark small { color: rgba(250, 248, 245, 0.65); } /* ── Cards / tiles ──────────────────────────────────────────── */ html.dark .card, html.dark .post-card, html.dark .service-card, html.dark .dest-card, html.dark .testimonial, html.dark .review, html.dark .stat, html.dark .feature, html.dark .info-card { background: #1a2230; color: #faf8f5; border-color: rgba(196, 165, 78, 0.18); } html.dark .card h2, html.dark .card h3, html.dark .post-card h2, html.dark .post-card h3, html.dark .service-card h3, html.dark .testimonial p { color: #faf8f5; } /* ── Footer ─────────────────────────────────────────────────── */ html.dark footer, html.dark .footer, html.dark .site-footer { background: #0a0f17; color: #faf8f5; border-color: rgba(196, 165, 78, 0.15); } html.dark footer a, html.dark .footer a { color: rgba(250, 248, 245, 0.78); } html.dark footer a:hover, html.dark .footer a:hover { color: #c9a54e; } /* ── Links / inline text ───────────────────────────────────── */ html.dark a { color: #c9a54e; } html.dark a:hover { color: #faf8f5; } /* Gold-bg buttons need DARK text (gold-on-gold is invisible) */ html.dark a.btn-gold, html.dark .btn-gold, html.dark a.btn--gold, html.dark .btn--gold, html.dark a.btn.btn-gold, html.dark a.ivm-act-cta__btn, html.dark .ivm-act-cta__btn, html.dark a.ivm-act-cta__btn span, html.dark .ivm-act-cta__btn span, html.dark a.btn-magnetic.gold, html.dark .btn-magnetic.gold, html.dark a.lf-btn-gold, html.dark a.lc-btn-gold, html.dark a.le-btn-gold, html.dark a.lw-btn-gold, html.dark a.btn-primary, html.dark .btn-primary, html.dark a.m-nav-cta, html.dark .m-nav-cta { color: var(--ink-1, #1a2230) !important; } html.dark a.btn-gold:hover, html.dark .btn-gold:hover, html.dark a.btn--gold:hover, html.dark .btn--gold:hover, html.dark a.btn.btn-gold:hover, html.dark a.ivm-act-cta__btn:hover, html.dark .ivm-act-cta__btn:hover, html.dark a.btn-magnetic.gold:hover, html.dark a.btn-primary:hover, html.dark a.m-nav-cta:hover, html.dark .m-nav-cta:hover { color: var(--ink-1, #1a2230) !important; } html.dark strong, html.dark b { color: #faf8f5; } /* ── Header (already dark — small refinements) ────────────── */ html.dark .site-header, html.dark header { background: rgba(10, 15, 23, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(196, 165, 78, 0.18); } html.dark .header-nav a { color: rgba(250, 248, 245, 0.85); } html.dark .header-nav a:hover, html.dark .header-nav a.active { color: #c9a54e; } /* ── Forms ─────────────────────────────────────────────────── */ html.dark input, html.dark select, html.dark textarea { background: rgba(250, 248, 245, 0.06); color: #faf8f5; border-color: rgba(196, 165, 78, 0.25); } html.dark input::placeholder, html.dark textarea::placeholder { color: rgba(250, 248, 245, 0.4); } /* ── Mass overrides: section backgrounds ─────────────────── */ /* Found by auditing all HTMLs for background:var(--cream) | var(--sand) */ html.dark .about, html.dark .bc, html.dark .breadcrumb, html.dark .credentials-section, html.dark .diff, html.dark .diff-card, html.dark .director, html.dark .dodont-section, html.dark .grid-section, html.dark .hiw, html.dark .hiw-num, html.dark .il-link, html.dark .il-section, html.dark .inc-card, html.dark .included, html.dark .int-link, html.dark .int-links, html.dark .locations, html.dark .palette-section, html.dark .post-card-img, html.dark .process, html.dark .proposal, html.dark .pv, html.dark .quiz-section, html.dark .resort-chip, html.dark .resorts, html.dark .sc--cream, html.dark .sc--sand, html.dark .sc-cream, html.dark .sc-sand, html.dark .services, html.dark .sess-card, html.dark .sessions, html.dark .stats-strip, html.dark .step, html.dark .story, html.dark .svc, html.dark .svc-text, html.dark .tc, html.dark .test, html.dark .testimonials, html.dark .type-card-body, html.dark .types, html.dark .venues, html.dark .why { background: #0c1219 !important; color: #faf8f5 !important; } /* Sand-toned alternates → slightly lighter dark for visual rhythm */ html.dark .diff, html.dark .included, html.dark .pv, html.dark .sc--sand, html.dark .sc-sand, html.dark .sess-card, html.dark .tc { background: #131c2a !important; } /* Cards in dark mode: subtle elevation */ html.dark .diff-card, html.dark .inc-card, html.dark .type-card-body, html.dark .sess-card, html.dark .resort-chip, html.dark .step, html.dark .il-link, html.dark .int-link { background: #1a2230 !important; border-color: rgba(196, 165, 78, 0.18) !important; color: #faf8f5 !important; } /* Text classes that hardcoded dark colors → cream in dark mode */ html.dark .about-text, html.dark .credentials-inner, html.dark .director-text, html.dark .il-a, html.dark .il-t, html.dark .il-title, html.dark .palette-name, html.dark .proposal-text, html.dark .pv-text, html.dark .quiz-color-name, html.dark .quiz-option-label, html.dark .quiz-question, html.dark .result-card, html.dark .results-palette-name, html.dark .section-title, html.dark .story-quote, html.dark .story-text, html.dark .tc-author, html.dark .tip-highlight, html.dark .why-text { color: #faf8f5 !important; } /* Eyebrow / category labels → keep gold in dark */ html.dark .pg-label, html.dark .section-eyebrow, html.dark .eyebrow, html.dark .section-label { color: #c9a54e !important; } /* Quiz / interactive components */ html.dark .quiz-btn { background: #1a2230 !important; color: #faf8f5 !important; border-color: rgba(196, 165, 78, 0.3) !important; } html.dark .quiz-btn:hover, html.dark .quiz-btn.is-active { background: rgba(196, 165, 78, 0.15) !important; border-color: #c9a54e !important; } /* Body.loaded inversion guards ──────────────────────────── */ /* The site-wide pattern uses body.loaded to switch from a dark pre-load state to a light loaded state. In dark mode we want to keep the dark state. Override the loaded variants. */ html.dark body.loaded { background: #0c1219 !important; color: #faf8f5 !important; } html.dark body.loaded .lang-switch a { color: rgba(250, 248, 245, 0.55); } html.dark body.loaded .lang-switch a:hover { color: #faf8f5; } html.dark body.loaded .lang-switch a.is-active { color: #c9a54e; } html.dark body.loaded .lang-switch .lang-sep { color: rgba(250, 248, 245, 0.25); } /* ── Theme toggle button ──────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 12px; background: transparent; border: 1px solid rgba(196, 165, 78, 0.3); border-radius: 50%; color: rgba(250, 248, 245, 0.85); font-size: 14px; line-height: 1; cursor: pointer; transition: all 0.3s ease; -webkit-tap-highlight-color: transparent; } @media (max-width: 768px) { .theme-toggle { width: 44px; height: 44px; margin-right: 8px; } } .theme-toggle:hover { border-color: #c9a54e; color: #c9a54e; background: rgba(196, 165, 78, 0.08); } .theme-toggle:focus-visible { outline: 2px solid #c9a54e; outline-offset: 2px; } body.loaded .theme-toggle { border-color: rgba(26, 34, 48, 0.25); color: rgba(26, 34, 48, 0.7); } body.loaded .theme-toggle:hover { border-color: #c9a54e; color: #c9a54e; } html.dark .theme-toggle, html.dark body.loaded .theme-toggle { border-color: rgba(196, 165, 78, 0.3); color: rgba(250, 248, 245, 0.85); } html.dark .theme-toggle:hover, html.dark body.loaded .theme-toggle:hover { border-color: #c9a54e; color: #c9a54e; } /* ── Bigger lang switcher in desktop ──────────────────────── */ @media (min-width: 901px) { .lang-switch { font-size: 11.5px; letter-spacing: 0.24em; gap: 8px; margin-right: 16px; } .lang-switch a { padding: 8px 6px; } } /* ═══════════════════════════════════════════════════════════════════════ Venue landing pages — authored on a LIGHT (cream/sand) palette, so their body copy + sub-headings use dark-navy ink (var(--ink)/var(--muted-l)). The global dark theme darkens the page background, which left that text dark-on-dark (invisible). Force venue body text light for AA contrast. ═══════════════════════════════════════════════════════════════════════ */ html.dark .venue-hero .lede, html.dark [class*="venue-"] p, html.dark [class*="venue-"] li, html.dark [class*="venue-"] figcaption, html.dark .venue-related a, html.dark section .wrap p, html.dark section .wrap li { color: rgba(249, 248, 247, 0.80) !important; } html.dark [class*="venue-"] h2, html.dark [class*="venue-"] h3, html.dark section .wrap h2, html.dark section .wrap h3, html.dark .venue-hero h1 { color: #f4f1ec !important; } html.dark [class*="venue-"] strong, html.dark section .wrap strong { color: #ffffff !important; } /* ─────────────────────────────────────────────────────────────────────── Catch-all: light-authored content pages (legal, guides, brand, venues) define dark-ink body text for their original cream bg. Under the global dark theme this rendered dark-on-dark. Force ALL body copy + sub-headings inside
light. Buttons/links (/