/* ========================================================= AURIC ARTISAN — GOLDEN DARK MODE Luxury dark interface with gold highlights. Activated by body.dark-mode ========================================================= */ /* ── FLASH PREVENTION (applied to before body loads) ── */ html.dark-mode-pending { background: #0d0d0d; color-scheme: dark; } /* ── SMOOTH THEME TRANSITION ──────────────────────────── */ body.dark-mode, body.dark-mode *, body.dark-mode *::before, body.dark-mode *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease; } /* ── BASE ─────────────────────────────────────────────── */ body.dark-mode { background: #0d0d0d; color: #f0f0f0; } /* ── CANVAS BG GRADIENT ───────────────────────────────── */ body.dark-mode .bg-radial-top { background: radial-gradient(circle at top, #1a1508 0, #12100a 32%, #0f0d0a 52%, #0d0d0d 100%); } /* ── LINKS ────────────────────────────────────────────── */ body.dark-mode a { color: #f0f0f0; } body.dark-mode a:hover { color: #d3af37; } /* ── HORIZONTAL RULES ─────────────────────────────────── */ body.dark-mode hr { background: rgba(211, 175, 55, .18); } /* ── INPUTS & SELECTS ─────────────────────────────────── */ body.dark-mode input[type="text"], body.dark-mode input[type="number"], body.dark-mode input[type="email"], body.dark-mode select { background: #1a1a1a; color: #f0f0f0; border: 1px solid rgba(211, 175, 55, .2); box-shadow: inset 0 0 0 1px rgba(211, 175, 55, .06); } body.dark-mode select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23d3af37' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); } body.dark-mode input:focus, body.dark-mode select:focus { outline: 2px solid rgba(211, 175, 55, .45); outline-offset: 2px; } /* ── HEADER ───────────────────────────────────────────── */ body.dark-mode header { -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(211, 175, 55, .12); } body.dark-mode .bd-b { border-bottom-color: rgba(211, 175, 55, .12); } /* ── NAV BUTTONS ──────────────────────────────────────── */ body.dark-mode .btn { color: #f0f0f0; } body.dark-mode .btn:hover, body.dark-mode .parent-hover:hover>.btn, body.dark-mode [aria-expanded="true"]>.btn { background: rgba(211, 175, 55, .1); border-color: rgba(211, 175, 55, .2); } body.dark-mode .btn:focus-visible { outline-color: #d3af37; } /* ── HEADER MENUS ─────────────────────────────────────── */ body.dark-mode .header-menu { background: #161616; border-color: rgba(211, 175, 55, .15); box-shadow: 0 4px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(211, 175, 55, .08); } body.dark-mode .bg-fff9ec, body.dark-mode .bg-hover-f8fafc:hover { background: #1a1a1a; } body.dark-mode .bd-1-fff9ec { border-color: rgba(211, 175, 55, .12); } /* ── MENU ITEMS ───────────────────────────────────────── */ body.dark-mode .menu-item { color: #f0f0f0; } body.dark-mode .menu-item:hover { background: rgba(211, 175, 55, .08); border-color: rgba(211, 175, 55, .15); } body.dark-mode .menu-scroll { scrollbar-color: rgba(211, 175, 55, .35) transparent; } body.dark-mode .menu-scroll::-webkit-scrollbar-thumb { background: rgba(211, 175, 55, .35); } /* ── SCROLL HINT ──────────────────────────────────────── */ body.dark-mode .scroll-hint { background: linear-gradient(to top, #161616 60%, rgba(22, 22, 22, 0)); color: rgba(211, 175, 55, .45); } /* ── TYPOGRAPHY ───────────────────────────────────────── */ body.dark-mode .text { color: #f0f0f0; } body.dark-mode .text-muted, body.dark-mode .muted, body.dark-mode .desc { color: #aaa; } body.dark-mode .title, body.dark-mode .title-xl, body.dark-mode .bold, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode strong { color: #f5f5f5; } /* ── HERO ─────────────────────────────────────────────── */ body.dark-mode .hero-tag { color: #f0f0f0; } /* ── CARDS ────────────────────────────────────────────── */ body.dark-mode .card { background: #141414; border-color: rgba(211, 175, 55, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .25); } body.dark-mode .card:hover { border-color: rgba(211, 175, 55, .25); box-shadow: 0 4px 16px rgba(211, 175, 55, .12), 0 8px 32px rgba(0, 0, 0, .35); } body.dark-mode .card-body { background: #141414; border-color: rgba(211, 175, 55, .08); } body.dark-mode .media { background: #1a1a1a; } /* ── CARD BUTTONS ─────────────────────────────────────── */ body.dark-mode .card__btn { background: #d3af37; color: #0d0d0d; border-color: rgba(211, 175, 55, .3); box-shadow: 0 2px 0 0 rgba(0, 0, 0, .2); } body.dark-mode .card__btn:hover { box-shadow: 0 6px 20px rgba(211, 175, 55, .35); } /* ── EXPLORE BUTTON ───────────────────────────────────── */ body.dark-mode .btn-explore { background: #d3af37; color: #0d0d0d; border-color: #d3af37; } body.dark-mode .btn-explore:hover { box-shadow: 0 6px 20px rgba(211, 175, 55, .4); } /* ── SKELETON ─────────────────────────────────────────── */ body.dark-mode .skeleton { background: linear-gradient(90deg, #1a1a1a, #222, #1a1a1a); } /* ── WAVE / BUBBLES (reduced-motion fallback only) ────── */ @media (prefers-reduced-motion: reduce) { body.dark-mode .bubble { background: #1a1a1a; box-shadow: 0 12px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(211, 175, 55, .08) inset; } body.dark-mode .bubble:hover, body.dark-mode .bubble:focus-visible { background: #222; border-color: rgba(211, 175, 55, .2); box-shadow: 0 16px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(211, 175, 55, .15) inset; } body.dark-mode .bubble:focus-visible { box-shadow: 0 0 0 2px rgba(211, 175, 55, .4), 0 16px 32px rgba(0, 0, 0, .4); } /* Bubble SVG text — make visible on dark */ body.dark-mode .bubble__icon text { fill: #d3af37; } body.dark-mode .bubble__icon { color: #d3af37; } } /* ── TOOL STRIP ───────────────────────────────────────── */ body.dark-mode .a-strip { background: #111; border-color: rgba(211, 175, 55, .08); } body.dark-mode .a-strip-link { color: #ccc; } body.dark-mode .a-strip-link:hover { color: #d3af37; } body.dark-mode .a-strip-sep { color: #d3af37; } body.dark-mode .a-strip::after { background: linear-gradient(120deg, transparent 0%, rgba(211, 175, 55, .04) 50%, transparent 100%); } /* ── FOOTER ───────────────────────────────────────────── */ body.dark-mode .a-footer { border-top-color: rgba(211, 175, 55, .12); color: #ccc; } body.dark-mode .a-title::after { background: rgba(211, 175, 55, .25); } body.dark-mode .a-link { color: #ccc; } body.dark-mode .a-link:hover, body.dark-mode .a-link-soft:hover { color: #d3af37; opacity: 1; } body.dark-mode .a-input { background: #1a1a1a; color: #f0f0f0; border-color: rgba(211, 175, 55, .2); } body.dark-mode .a-btn { background: #d3af37; color: #0d0d0d; } body.dark-mode .a-btn:hover { box-shadow: 0 6px 16px rgba(211, 175, 55, .35); } /* Invert dark social icons for visibility */ body.dark-mode .a-footer img[src*="social-media"] { filter: invert(1) brightness(2); } body.dark-mode .card__btn img[src*="social-media"] { filter: invert(1) brightness(2); } /* ── LOADER ───────────────────────────────────────────── */ body.dark-mode .loader { background: #0d0d0d; } body.dark-mode .loader__bg { background: radial-gradient(circle at 30% 30%, rgba(211, 175, 55, .08), transparent 60%), radial-gradient(circle at 70% 70%, rgba(211, 175, 55, .04), transparent 60%); } body.dark-mode .loader__title { color: #f5f5f5; } body.dark-mode .loader__subtitle { color: #aaa; } body.dark-mode .loader__progress { background: rgba(255, 255, 255, .08); } body.dark-mode .loader__particles span { background: rgba(211, 175, 55, .25); } /* ── EYE REST PANEL ───────────────────────────────────── */ body.dark-mode #eye-rest-panel { background: #161616; color: #f0f0f0; border-color: rgba(211, 175, 55, .15); } /* ── MANIFESTO / CONTENT SECTIONS ─────────────────────── */ body.dark-mode p, body.dark-mode li { color: #ddd; } body.dark-mode .ul-style li { color: #ccc; } /* ── LOGO SVG INVERSION (visible on dark) ─────────────── */ body.dark-mode .hero-logo { filter: brightness(0) invert(1); } body.dark-mode header img[alt="Auric Artisan"] { filter: brightness(0) invert(1); } body.dark-mode .a-footer img[alt="Auric Artisan"] { filter: brightness(0) invert(1); } /* ── SELECTION ────────────────────────────────────────── */ body.dark-mode ::selection { background: rgba(211, 175, 55, .3); color: #fff; } body.dark-mode ::-moz-selection { background: rgba(211, 175, 55, .3); color: #fff; } /* ── SCROLLBAR (global) ───────────────────────────────── */ body.dark-mode { scrollbar-color: rgba(211, 175, 55, .3) #0d0d0d; } /* ── CUSTOM SCROLL SYSTEM ─────────────────────────────── */ body.dark-mode .bg-0008 { background: rgba(211, 175, 55, .08); } body.dark-mode .bg-055, body.dark-mode .scroll-thumb { background: rgba(211, 175, 55, .35); } body.dark-mode .hover-bg-075:hover, body.dark-mode .scroll-thumb:hover { background: rgba(211, 175, 55, .55); } /* ── FOCUS RINGS ──────────────────────────────────────── */ body.dark-mode :focus-visible { outline-color: #d3af37; } /* ── THEME TOGGLE BUTTON ──────────────────────────────── */ #theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .2s ease, border-color .2s ease; } #theme-toggle:hover { background: rgba(0, 0, 0, .06); } body.dark-mode #theme-toggle:hover { background: rgba(211, 175, 55, .15); } #theme-toggle svg { pointer-events: none; } /* ── ALERT (warning) — make warning panels readable on dark backgrounds ── */ [data-theme="dark"] .alert-warning, body.dark-mode .alert-warning { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.18); color: var(--color-warning); } [data-theme="dark"] .alert-warning .alert-title, body.dark-mode .alert-warning .alert-title { color: var(--color-warning); } /* Light mode: show moon, hide sun */ #icon-sun { display: none; } #icon-moon { display: inline-block; } /* Dark mode: show sun, hide moon */ body.dark-mode #icon-sun { display: inline-block; } body.dark-mode #icon-moon { display: none; }