/* ============================================ SAKIRA BRAIDING - DARK THEME Dark is the site default. The theme works by remapping the surface / text ramp declared in main.css, so every rule and inline style that uses those tokens follows automatically. Applied via the data-theme attribute on . ============================================ */ :root[data-theme="dark"] { /* Surface & text ramp */ --color-bg: #0B0B0C; --color-soft-gray: #131316; /* Recessed surface */ --color-white: #1C1C20; /* Elevated surface: cards, navbar, inputs, modals */ --color-medium-gray: #2E2E34; /* Borders & dividers */ --color-charcoal: #B6B6BE; /* Body text */ --color-dark: #F2F2F4; /* Headings */ --color-text-muted: #78787F; --color-navbar-bg: rgba(13, 13, 15, 0.88); --color-glass: rgba(255, 255, 255, 0.06); --color-glass-border: rgba(255, 255, 255, 0.10); --color-footer-bg: #08080A; --gradient-soft: linear-gradient(135deg, #1A1418 0%, #0B0B0C 100%); /* On the light pink / gold gradients, dark text reads far better */ --color-on-primary: #1A1A1A; --color-on-gold: #1A1A1A; /* Badge tints, rebuilt as translucent washes over the dark surface */ --badge-success-bg: rgba(76, 175, 80, 0.16); --badge-warning-bg: rgba(255, 152, 0, 0.16); --badge-error-bg: rgba(244, 67, 54, 0.16); --badge-gold-text: #E8D89F; /* Shadows need more opacity to register against a dark background */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.75); --shadow-pink: 0 10px 30px -8px rgba(255, 182, 193, 0.25); } /* Dark surfaces read as flat without a hairline edge to separate them */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .testimonial-card, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .service-card, :root[data-theme="dark"] .appointment-card, :root[data-theme="dark"] .contact-info-card, :root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .value-card, :root[data-theme="dark"] .hours-table { border: 1px solid var(--color-medium-gray); } :root[data-theme="dark"] .appointment-card { border-left-width: 4px; } :root[data-theme="dark"] .navbar, :root[data-theme="dark"] .dashboard-header { border-bottom: 1px solid var(--color-medium-gray); } /* The pastel blockquote / highlight fills in the page content are pure pink at full strength — too loud on a dark page. */ :root[data-theme="dark"] [style*="background: var(--color-primary-light)"], :root[data-theme="dark"] [style*="background:var(--color-primary-light)"] { background: rgba(255, 182, 193, 0.12) !important; } :root[data-theme="dark"] .btn-secondary:hover:not(:disabled) { background: rgba(255, 182, 193, 0.14); color: var(--color-primary); } :root[data-theme="dark"] .badge-primary { background: rgba(255, 182, 193, 0.16); color: var(--color-primary); } /* Photography shot for a white page is harsh against black */ :root[data-theme="dark"] .card-image, :root[data-theme="dark"] .service-image img, :root[data-theme="dark"] .gallery-item img { filter: brightness(0.92) contrast(1.02); } /* ============================================ THEME TOGGLE ============================================ */ /* A single floating control, bottom-right on every page. Injected by js/theme.js. */ .theme-toggle { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: var(--z-fixed, 1030); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; color: var(--color-charcoal); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: var(--radius-full); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 10px 30px -12px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } /* A soft pink halo on hover — the same accent the CTAs use */ .theme-toggle:hover { color: var(--color-primary); border-color: rgba(255, 182, 193, 0.6); transform: translateY(-2px); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 16px 34px -12px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 182, 193, 0.16); } .theme-toggle:active { transform: translateY(0) scale(0.96); } .theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } :root[data-theme="dark"] .theme-toggle { color: var(--color-on-dark, #f5f5f5); background: rgba(28, 28, 30, 0.62); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.8); } :root[data-theme="dark"] .theme-toggle:hover { color: var(--color-primary); border-color: rgba(255, 182, 193, 0.45); } /* Icons are stacked and cross-faded so the button never reflows */ .theme-toggle-icon { grid-area: 1 / 1; width: 21px; height: 21px; transition: opacity var(--transition-fast), transform var(--transition-base, 0.3s ease); } /* The icon shows the theme you'd switch to */ .theme-toggle .theme-toggle-dark { opacity: 0; transform: rotate(-90deg) scale(0.6); } :root[data-theme="dark"] .theme-toggle .theme-toggle-dark { opacity: 1; transform: none; } :root[data-theme="dark"] .theme-toggle .theme-toggle-light { opacity: 0; transform: rotate(90deg) scale(0.6); } @media (max-width: 768px) { .theme-toggle { width: 46px; height: 46px; } .theme-toggle-icon { width: 19px; height: 19px; } } /* Respect users who ask the OS not to animate */ @media (prefers-reduced-motion: reduce) { body, .theme-toggle, .theme-toggle-icon { transition: none; } }