/* ============================================================ PATCH-FIXES.CSS – Varsha Makeup Artistry PURPOSE: Theme switching only. Three themes selectable via data-theme on : "white" → default (no attribute needed, same as :root) "light" → warm parchment tones "dark" → dark royale Also defines the nav-backdrop element and a few micro-fixes that only make sense as last-load overrides. ============================================================ */ /* ── THEME: WHITE (default — overrides nothing, already in :root) ── */ /* Swatches reference the three themes below */ /* ── THEME PANEL SWATCH COLORS ───────────────────────────── These --sw values are referenced by the inline style on .swatch in the HTML. They just need the right values for display. */ [data-theme="white"] { /* Same as :root — warm copper on white */ --accent: #b87333; --accent-rgb: 184, 115, 51; --accent-light: #d4a574; --accent-dark: #8a5520; --bg-primary: #ffffff; --bg-secondary: #ffffff !important; --bg-card: #ffffff; --bg-tertiary: #ffffff; --text-primary: #1c1109; --text-secondary: #5a3e2b; --text-muted: #9a7860; --border: rgba(184, 115, 51, 0.18); --border-solid: #e8d5c0; --shadow: rgba(184, 115, 51, 0.14); --shadow-dark: rgba(28, 17, 9, 0.10); --gradient: linear-gradient(135deg, #b87333 0%, #d4956a 50%, #8a5520 100%); --gradient-soft: linear-gradient(160deg, #ffffff 0%, #faeede 100%); --hero-overlay: linear-gradient(160deg, rgba(28, 17, 9, 0.72) 0%, rgba(138, 85, 32, 0.42) 100%); } /* ── THEME: LIGHT (warm parchment) ───────────────────────── Slightly warmer, slightly more saturated than white. */ [data-theme="light"] { --accent: #b87333; --accent-rgb: 184, 115, 51; --accent-light: #d4a574; --accent-dark: #8a5520; --bg-primary: #fdf6ef; --bg-secondary: #f5e8d8; --bg-card: #fffaf6; --bg-tertiary: #eedcca; --text-primary: #1c1109; --text-secondary: #5a3e2b; --text-muted: #9a7860; --border: rgba(184, 115, 51, 0.22); --border-solid: #e0c8a8; --shadow: rgba(184, 115, 51, 0.18); --shadow-dark: rgba(28, 17, 9, 0.12); --gradient: linear-gradient(135deg, #b87333 0%, #d4956a 50%, #8a5520 100%); --gradient-soft: linear-gradient(160deg, #fff4ea 0%, #f8e5cc 100%); --hero-overlay: linear-gradient(160deg, rgba(28, 17, 9, 0.72) 0%, rgba(138, 85, 32, 0.42) 100%); } /* ── THEME: DARK (Dark Royale) ────────────────────────────── Near-black backgrounds, gold accent. */ [data-theme="dark"] { --accent: #e0b87e; --accent-rgb: 224, 184, 126; --accent-light: #f5d8a8; --accent-dark: #b08840; --bg-primary: #18120c; --bg-secondary: #221810; --bg-card: #2c2018; --bg-tertiary: #362a1e; --text-primary: #f5ead8; --text-secondary: #d4b888; --text-muted: #9a8060; --border: rgba(224, 184, 126, 0.18); --border-solid: #3a2e20; --shadow: rgba(224, 184, 126, 0.20); --shadow-dark: rgba(0, 0, 0, 0.40); --gradient: linear-gradient(135deg, #e0b87e 0%, #f5d8a8 50%, #b08840 100%); --gradient-soft: linear-gradient(160deg, #201810 0%, #2c2018 100%); --hero-overlay: linear-gradient(160deg, rgba(8, 5, 2, 0.85) 0%, rgba(30, 20, 10, 0.60) 100%); } /* Dark theme specific overrides that can't be handled by variables alone */ [data-theme="dark"] .navbar { background: rgba(24, 18, 12, 0.92); } [data-theme="dark"] .navbar.scrolled { background: rgba(24, 18, 12, 0.98); } [data-theme="dark"] .nav-menu { background: rgba(24, 18, 12, 0.98); } [data-theme="dark"] .portfolio-section, [data-theme="dark"] .portfolio-search-bar input, [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { color: var(--text-primary); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: var(--bg-secondary); border-color: var(--border); } [data-theme="dark"] .portfolio-search-bar { background: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .newsletter-form { background: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .newsletter-form input { color: var(--text-primary); } /* Dark theme — logo gradient stays gold */ [data-theme="dark"] .logo h1 { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── NAV BACKDROP OVERLAY (mobile) ───────────────────────── Injected by JS or present in DOM. Dims content behind nav drawer. */ .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(2px); z-index: calc(var(--z-nav) - 10); opacity: 0; pointer-events: none; transition: opacity 0.32s; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 900px) { .nav-backdrop { display: block; } } /* ── BODY SCROLL LOCK ─────────────────────────────────────── Applied when mobile nav is open */ body.menu-open { overflow: hidden; } /* ── BRAND STRIP HOVER PAUSE ──────────────────────────────── (Also in premium-style but safe to repeat for specificity) */ .brand-strip:hover .brand-track, .festive-banner:hover .banner-track { animation-play-state: paused; } /* ── THEME PANEL SWATCH — active indicator via box-shadow ── */ .swatch.active::after { content: '✓'; margin-left: auto; color: var(--accent); font-size: 0.85rem; font-weight: 700; }