/* ═══════════════════════════════════════════════════════════════ AHINSA DENIM — THEME CSS Light / Dark CSS variable definitions + global overrides. Applied via data-theme attribute on . Anti-flash script in header.php applies theme before render. ═══════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────── DARK THEME (default) ────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0a0a0c; --bg2: #111114; --bg3: #18181b; --bg4: #1e1e22; --text: #e4e4e7; --text-sub: rgba(255, 255, 255, 0.52); --text-muted: rgba(255, 255, 255, 0.30); --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --card-bg: #18181b; --card-border: rgba(255, 255, 255, 0.07); --input-bg: rgba(255, 255, 255, 0.05); --overlay: rgba(0, 0, 0, 0.7); /* Navbar */ --nav-bg: rgba(10, 10, 12, 0.18); --nav-scroll: rgba(10, 10, 12, 0.97); --nav-link: rgba(255, 255, 255, 0.82); --nav-btn-bg: rgba(255, 255, 255, 0.07); --dropdown-bg: rgba(12, 12, 15, 0.99); --dropdown-border: rgba(255, 255, 255, 0.08); /* Mobile menu */ --mob-bg: rgba(10, 10, 12, 0.99); --mob-link: rgba(255, 255, 255, 0.85); --mob-sub: rgba(255, 255, 255, 0.50); --mob-divider: rgba(255, 255, 255, 0.06); --mob-sub-border: rgba(255, 255, 255, 0.08); --ham-color: rgba(255, 255, 255, 0.85); /* Toggle */ --toggle-bg: rgba(255, 255, 255, 0.07); --toggle-icon: #fbbf24; color-scheme: dark; } /* ────────────────────────────────────────── LIGHT THEME ────────────────────────────────────────── */ [data-theme="light"] { --bg: #f5f5f7; --bg2: #ffffff; --bg3: #ebebed; --bg4: #e2e2e5; --text: #1a1a1e; --text-sub: rgba(0, 0, 0, 0.52); --text-muted: rgba(0, 0, 0, 0.32); --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); --card-bg: #ffffff; --card-border: rgba(0, 0, 0, 0.09); --input-bg: rgba(0, 0, 0, 0.04); --overlay: rgba(0, 0, 0, 0.55); /* Navbar */ --nav-bg: rgba(255, 255, 255, 0.65); --nav-scroll: rgba(255, 255, 255, 0.98); --nav-link: rgba(30, 30, 35, 0.82); --nav-btn-bg: rgba(0, 0, 0, 0.06); --dropdown-bg: rgba(255, 255, 255, 0.99); --dropdown-border: rgba(0, 0, 0, 0.09); /* Mobile menu */ --mob-bg: rgba(255, 255, 255, 0.99); --mob-link: rgba(20, 20, 25, 0.88); --mob-sub: rgba(20, 20, 25, 0.55); --mob-divider: rgba(0, 0, 0, 0.06); --mob-sub-border: rgba(0, 0, 0, 0.10); --ham-color: rgba(30, 30, 35, 0.85); /* Toggle */ --toggle-bg: rgba(0, 0, 0, 0.06); --toggle-icon: #374151; color-scheme: light; } /* ────────────────────────────────────────── GLOBAL BODY THEME ────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); transition: background 0.4s ease, color 0.4s ease; } /* ────────────────────────────────────────── LIGHT MODE — SECTION OVERRIDES (sections that have hardcoded dark bg) ────────────────────────────────────────── */ [data-theme="light"] .about-strip, [data-theme="light"] .sustain-section, [data-theme="light"] .features-section, [data-theme="light"] .quality-strip, [data-theme="light"] .slider-section, [data-theme="light"] .denim-showcase-section, [data-theme="light"] .contact-cta, [data-theme="light"] .csr-banner { background: var(--bg2); } [data-theme="light"] .hero-section { background: var(--bg3); } [data-theme="light"] .slide-card, [data-theme="light"] .denim-type-card, [data-theme="light"] .feature-card, [data-theme="light"] .card { background: var(--card-bg); border-color: var(--card-border); } [data-theme="light"] .stat-bar { background: var(--bg2); border-color: var(--border); } [data-theme="light"] .stat-bar-divider{ background: var(--border); } [data-theme="light"] .stat-bar-num { color: var(--text); } [data-theme="light"] .stat-bar-label { color: var(--text-sub); } [data-theme="light"] .section-desc, [data-theme="light"] .about-lead, [data-theme="light"] .hero-sub { color: var(--text-sub); } [data-theme="light"] .section-divider{ background: var(--border); } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text); } /* Light mode: invert white logos */ [data-theme="light"] .nav-logo img { filter: brightness(0) saturate(100%); } [data-theme="light"] .site-footer, [data-theme="light"] .footer { background: var(--bg2); border-top: 1px solid var(--border); } [data-theme="light"] .site-footer *, [data-theme="light"] .footer * { color: var(--text-sub); } [data-theme="light"] .site-footer a:hover, [data-theme="light"] .footer a:hover { color: var(--orange); } [data-theme="light"] .footer-bottom-copy, [data-theme="light"] .footer-bottom { color: var(--text-muted); } /* ────────────────────────────────────────── TRANSITION SMOOTHING (all themed elements) ────────────────────────────────────────── */ section, .card, .stat-bar, .slide-card, .denim-type-card, .feature-card, .site-footer, .footer, nav { transition: background 0.4s ease, border-color 0.4s ease, color 0.3s ease; }