/* ═══════════════════════════════════════════════════════════════════════════ */ /* DARK MODE — dark-mode.css */ /* Activated by: */ /* Theme logic: main.js (ThemeManager) */ /* ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. DARK TOKEN OVERRIDES ────────────────────────────────────────────────── */ [data-theme="dark"] { --primary: #ff2d6e; --primary-dark: #d91f58; --ink: #e8e6e3; --ink-soft: rgba(232, 230, 227, 0.38); --ink-mid: rgba(232, 230, 227, 0.62); --rule: rgba(232, 230, 227, 0.08); --rule-strong: rgba(232, 230, 227, 0.14); --bg: #0f0f0f; --muted: #1a1a1a; --muted-fg: rgba(232, 230, 227, 0.45); --surface-dark: #0f0f0f; color-scheme: dark; } /* ─── 3. BODY ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] body { background: var(--bg); color: var(--ink); } /* ─── 4. HEADER ──────────────────────────────────────────────────────────────── */ [data-theme="dark"] header.site-header { background: rgba(15, 15, 15, 0.92); border-bottom-color: var(--rule); } /* Logo crossfade — JS injects both .logo-black and .logo-white into .logo */ .logo-black, .logo-white { position: absolute; top: 0; left: 0; width: 100%; height: auto; transition: opacity 0.35s ease !important; } .logo { position: relative; display: inline-block; } .logo-black { opacity: 1; } .logo-white { opacity: 0; } [data-theme="dark"] .logo-black { opacity: 0; } [data-theme="dark"] .logo-white { opacity: 1; } [data-theme="dark"] nav.desktop-nav a { color: var(--ink-soft); } [data-theme="dark"] nav.desktop-nav a:hover, [data-theme="dark"] nav.desktop-nav a.active { color: var(--ink); } /* Mobile menu */ [data-theme="dark"] .mobile-menu { background: var(--bg); } [data-theme="dark"] .mobile-menu a { color: var(--ink); } [data-theme="dark"] .mobile-menu a.active { color: var(--primary); } [data-theme="dark"] .mobile-menu a:hover { color: var(--primary); } [data-theme="dark"] .mobile-menu-close, [data-theme="dark"] .menu-btn { color: var(--ink); } /* ─── 5. HEADER-ACTIONS LAYOUT + TOGGLE BUTTON ───────────────────────────────── */ .header-actions { display: flex; align-items: center; gap: 0.75rem; } /* The toggle button — always visible */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-strong); background: none; cursor: pointer; color: var(--ink-soft); flex-shrink: 0; transition: border-color 0.25s, color 0.25s, background 0.25s; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); background: rgba(255, 45, 110, 0.07); } .theme-toggle svg { width: 16px; height: 16px; display: block; pointer-events: none; } /* Icon visibility: opacity fade so the transition is smooth */ .theme-toggle .icon-moon, .theme-toggle .icon-sun { position: absolute; display: flex; transition: opacity 0.35s ease !important; } .theme-toggle { position: relative; /* needed for absolute icon children */ } .theme-toggle .icon-moon { opacity: 1; pointer-events: none; } .theme-toggle .icon-sun { opacity: 0; pointer-events: none; } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; } /* ─── 6. WHITE / LIGHT SECTIONS ──────────────────────────────────────────────── */ /* Path / About sections */ [data-theme="dark"] .path-section { background: var(--bg); } [data-theme="dark"] .path-right p, [data-theme="dark"] .path-right h3 { color: var(--ink-mid); } [data-theme="dark"] .path-right a { color: var(--ink); border-bottom-color: var(--rule-strong); } [data-theme="dark"] .path-right a:hover { color: var(--primary); border-color: var(--primary); } [data-theme="dark"] .sub-title { color: var(--ink-soft); } /* Category carousel strip */ [data-theme="dark"] .category-carousel-wrapper { background: var(--bg); } /* Category info panel */ [data-theme="dark"] .category-info-panel { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } /* Portfolio */ [data-theme="dark"] .portfolio-section { background: var(--bg); } [data-theme="dark"] .filter-nav span { color: var(--ink-soft); } [data-theme="dark"] .filter-nav span.active { color: var(--ink); border-bottom-color: var(--primary); } [data-theme="dark"] .filter-nav span:hover { color: var(--ink); } [data-theme="dark"] .filter-btn { color: var(--muted-fg); } [data-theme="dark"] .filter-btn.active { color: var(--ink); border-bottom-color: var(--ink); } [data-theme="dark"] .filter-btn:hover { color: var(--ink); } /* Quote block */ [data-theme="dark"] .quote-block { background: var(--bg); } [data-theme="dark"] .quote-block p { color: var(--ink-soft); } /* Marquee */ [data-theme="dark"] .marquee-section { background: var(--bg); border-top-color: var(--rule); border-bottom-color: var(--rule); } [data-theme="dark"] .marquee-label { color: var(--ink-soft); } [data-theme="dark"] .marquee-item { color: var(--ink); } /* Stats */ [data-theme="dark"] .stats-section { background: var(--bg); } [data-theme="dark"] .stat-desc { color: var(--ink-mid); } /* Arrow link utility */ [data-theme="dark"] .arrow-link { color: var(--ink); border-bottom-color: var(--rule-strong); } [data-theme="dark"] .arrow-link:hover { color: var(--primary); border-color: var(--primary); } /* ─── 7. WORKS PAGE ───────────────────────────────────────────────────────────── */ [data-theme="dark"] .works-sidebar { border-right-color: var(--rule); } [data-theme="dark"] .sidebar-label { color: var(--ink-soft); } [data-theme="dark"] .category-row { border-bottom-color: var(--rule); } [data-theme="dark"] .category-row::before { background: var(--ink); } [data-theme="dark"] .category-row:hover { background: rgba(232, 230, 227, 0.025); } /* Edge fade on image strips */ [data-theme="dark"] .cat-images::after { background: linear-gradient(to right, transparent, var(--bg)); } [data-theme="dark"] .category-row:hover .cat-images::after { background: linear-gradient(to right, transparent, #141414); } [data-theme="dark"] .cat-label { color: var(--ink); } [data-theme="dark"] .cat-index, [data-theme="dark"] .cat-count { color: var(--ink-soft); } [data-theme="dark"] .cat-img-item { background: rgba(255,255,255,0.05); } /* Slider overlay */ [data-theme="dark"] .slider-overlay { background: var(--bg); } [data-theme="dark"] .slider-sidebar { border-right-color: var(--rule); } [data-theme="dark"] .slider-sidebar .s-label, [data-theme="dark"] .slider-sidebar .s-title { color: var(--ink-soft); } [data-theme="dark"] .slider-sidebar .s-divider { background: var(--rule-strong); } [data-theme="dark"] .slider-info-label { color: var(--ink-soft); } [data-theme="dark"] .slider-info-title { color: var(--ink); } [data-theme="dark"] .slider-counter { color: var(--ink-soft); } [data-theme="dark"] .slider-counter strong { color: var(--ink); } [data-theme="dark"] #slider-next svg, [data-theme="dark"] #slider-prev svg { color: var(--ink); fill: var(--ink); } [data-theme="dark"] .btn-close { color: var(--ink-soft); } [data-theme="dark"] .btn-close:hover { color: var(--ink); } [data-theme="dark"] .btn-close svg { fill: var(--ink); color: var(--ink); } [data-theme="dark"] .slider-current, [data-theme="dark"] .slider-peek-prev, [data-theme="dark"] .slider-peek-next { background: rgba(232,230,227,0.05); } [data-theme="dark"] .slider-bottombar { border-top-color: var(--rule); } [data-theme="dark"] .slider-nav-btns button { border-color: var(--rule-strong); color: var(--ink-soft); } [data-theme="dark"] .slider-nav-btns button:hover { border-color: var(--ink); color: var(--ink); background: rgba(232,230,227,0.04); } [data-theme="dark"] .slider-hint-text { color: var(--ink-soft); } [data-theme="dark"] .btn-thumbs { color: var(--ink-soft); } [data-theme="dark"] .btn-thumbs:hover { color: var(--ink); } [data-theme="dark"] .thumb-btn { background: rgba(232,230,227,0.06); } [data-theme="dark"] .thumb-btn.active { border-color: var(--ink); } /* ─── 8. CASE STUDY PAGE ─────────────────────────────────────────────────────── */ [data-theme="dark"] .text-block p, [data-theme="dark"] .text-block-right p { color: var(--ink-mid); } /* ─── 9. SEO PAGE ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .partner-section { background: var(--bg); } [data-theme="dark"] .partner-mission p { color: var(--ink-mid); } [data-theme="dark"] .content-text p { color: var(--ink-mid); } [data-theme="dark"] .final-cta { background: var(--muted); } [data-theme="dark"] .final-cta h4 { color: var(--ink-soft); } [data-theme="dark"] .final-cta p { color: var(--ink-mid); } /* ─── 10. CONTACT PAGE ───────────────────────────────────────────────────────── */ [data-theme="dark"] .contact-form-field { border-color: var(--rule-strong); color: var(--ink); background: transparent; } [data-theme="dark"] .contact-form-field::placeholder { color: var(--muted-fg); } [data-theme="dark"] .contact-form-field:focus { border-color: var(--primary); } [data-theme="dark"] .form-label { color: var(--ink); } [data-theme="dark"] .contact-info-title { color: var(--ink); } [data-theme="dark"] .contact-info-val { color: var(--muted-fg); } [data-theme="dark"] .contact-info-val.primary { color: var(--primary); } /* Dark contact section (already #000) — just tweak placeholder */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea { color: var(--ink); } [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] .form-textarea::placeholder { color: rgba(232,230,227,0.28); } /* ─── 11. PLAY BUTTONS ───────────────────────────────────────────────────────── */ [data-theme="dark"] .play-btn, [data-theme="dark"] .play-button { background: rgba(232, 230, 227, 0.1); } [data-theme="dark"] .play-btn:hover, [data-theme="dark"] .play-button:hover { background: rgba(232, 230, 227, 0.18); } [data-theme="dark"] .play-btn svg, [data-theme="dark"] .play-button svg { color: var(--ink); } /* ─── 12. FOOTER ─────────────────────────────────────────────────────────────── */ /* Footer is already dark (surface-dark). These polish the tokens. */ [data-theme="dark"] .footer-col h4 { color: var(--ink); } [data-theme="dark"] .footer-bottom { border-top-color: rgba(232,230,227,0.08); } [data-theme="dark"] .footer-bottom p, [data-theme="dark"] .footer-links span { color: rgba(232,230,227,0.3); } [data-theme="dark"] .footer-links span:hover { color: var(--primary); } /* ─── 13. SHADOW SOFTENING ───────────────────────────────────────────────────── */ [data-theme="dark"] .path-left-image, [data-theme="dark"] .path-right-image { box-shadow: 0 20px 60px rgba(0,0,0,0.6); } [data-theme="dark"] .content-image { box-shadow: 0 20px 60px rgba(0,0,0,0.6); } [data-theme="dark"] .stack-img-1 img, [data-theme="dark"] .stack-img-2 img { box-shadow: 0 20px 50px rgba(0,0,0,0.6); } /* ─── 14. SCROLLBAR ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { scrollbar-color: #2e2e2e #0f0f0f; } [data-theme="dark"]::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"]::-webkit-scrollbar-track { background: #0f0f0f; } [data-theme="dark"]::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 4px; } [data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: #444; } /* ─── 15. SELECTION ──────────────────────────────────────────────────────────── */ [data-theme="dark"] ::selection { background: rgba(255, 45, 110, 0.38); color: #fff; } /* ─── 16. FOCUS RING ─────────────────────────────────────────────────────────── */ [data-theme="dark"] :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* ─── 17. PRINT ALWAYS LIGHT ─────────────────────────────────────────────────── */ @media print { [data-theme="dark"] body { background: #fff !important; color: #000 !important; } } /* ─── 18. SUPPRESS TRANSITIONS ON INITIAL PAGE LOAD ─────────────────────────── */ /* Prevents a colour-flash transition when the page first renders */ .no-transition *, .no-transition *::before, .no-transition *::after { transition: none !important; } /* Dark mode */ [data-theme="dark"] .lang-trigger { color: #fff; border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .lang-trigger:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); } [data-theme="dark"] .lang-dropdown { background: #1a1a1a; border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.45); } [data-theme="dark"] .lang-option { color: #fff; } [data-theme="dark"] .lang-option:hover { background: rgba(255,255,255,0.07); } [data-theme="dark"] .lang-option.active { background: rgba(255,255,255,0.1); }