/* ============================================================ 110s Digital Studio — Theme System v2.0.0 Dark mode via [data-theme="dark"] on . All colours reference CSS variables from style.css. This file ONLY overrides variable values — no structural changes. ============================================================ */ /* ---------------------------------------------------------- Dark Theme Variable Overrides ---------------------------------------------------------- */ [data-theme="dark"] { --bg: #111111; --text: #f0f0f0; --text-light: #9ca3af; --accent: #f9ae00; --accent-hover: #ffbf2e; --border: #2a2a2a; } /* ---------------------------------------------------------- Theme Transition (applied globally) ---------------------------------------------------------- */ html[data-theme], html[data-theme] body, html[data-theme] .ds-navbar, html[data-theme] .ds-hero, html[data-theme] .ds-services, html[data-theme] .ds-footer, html[data-theme] .ds-service-item, html[data-theme] .ds-page-placeholder { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ---------------------------------------------------------- Dark: Navbar adjustments ---------------------------------------------------------- */ [data-theme="dark"] .ds-navbar.scrolled { background: rgba(17, 17, 17, 0.97); border-bottom-color: var(--border); } [data-theme="dark"] .ds-navbar .navbar-brand, [data-theme="dark"] .ds-navbar .nav-link { color: var(--text); } [data-theme="dark"] .ds-navbar .nav-link:hover, [data-theme="dark"] .ds-navbar .nav-link.active { color: var(--accent); } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } [data-theme="dark"] .ds-navbar .dropdown-menu { background: #1a1a1a; border-color: var(--border); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .ds-navbar .dropdown-item { color: var(--text-light); } [data-theme="dark"] .ds-navbar .dropdown-item:hover { background: rgba(249, 174, 0, 0.1); color: var(--accent); } @media (max-width: 991.98px) { [data-theme="dark"] .ds-navbar .navbar-collapse { background: #1a1a1a; border-color: var(--border); } } /* ---------------------------------------------------------- Dark: Hero subtle bg shift ---------------------------------------------------------- */ [data-theme="dark"] .ds-hero::before { background: radial-gradient(ellipse at 30% 20%, rgba(249, 174, 0, 0.04) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(249, 174, 0, 0.03) 0%, transparent 50%); } /* ---------------------------------------------------------- Dark: Service items ---------------------------------------------------------- */ [data-theme="dark"] .ds-service-item:hover { border-color: var(--border); background: rgba(249, 174, 0, 0.03); } /* ---------------------------------------------------------- Dark: Buttons ---------------------------------------------------------- */ [data-theme="dark"] .btn-outline { color: var(--text); border-color: var(--text-light); } [data-theme="dark"] .btn-outline:hover { border-color: var(--accent); color: var(--accent); } /* ---------------------------------------------------------- Dark: Footer ---------------------------------------------------------- */ [data-theme="dark"] .ds-footer .footer-brand { color: var(--text); } /* ---------------------------------------------------------- Theme Toggle Button ---------------------------------------------------------- */ .ds-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; transition: all 0.35s ease; position: relative; overflow: hidden; color: var(--text); } .ds-theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .ds-theme-toggle .ds-icon-sun, .ds-theme-toggle .ds-icon-moon { position: absolute; font-size: 0.9rem; transition: opacity 0.35s ease, transform 0.35s ease; } /* Light mode: show sun, hide moon */ [data-theme="light"] .ds-theme-toggle .ds-icon-sun { opacity: 1; transform: rotate(0deg); } [data-theme="light"] .ds-theme-toggle .ds-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* Dark mode: show moon, hide sun */ [data-theme="dark"] .ds-theme-toggle .ds-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="dark"] .ds-theme-toggle .ds-icon-moon { opacity: 1; transform: rotate(0deg); } /* ---------------------------------------------------------- Placeholder Page Styling ---------------------------------------------------------- */ .ds-page-placeholder { min-height: 80vh; display: flex; align-items: center; padding: 8rem 0 4rem; background: var(--bg); } .ds-page-placeholder h1 { margin-bottom: 1rem; } .ds-page-placeholder .section-label { margin-bottom: 1.5rem; } .ds-error-page { text-align: center; } .ds-error-page h1 { font-size: clamp(4rem, 10vw, 8rem); letter-spacing: -0.04em; opacity: 0.15; color: var(--accent); }