/* ═══════════════════════════════════════════════════════════════ THEMES.CSS — Public website colour themes data-theme on sets colour scheme data-mode="light" switches to light mode ═══════════════════════════════════════════════════════════════ */ /* ══════════ DARK MODE (default) ══════════ */ /* ── Semantic component variables (auto-adapt to dark/light) ── */ :root { --card-bg: rgba(26,10,0,.5); --card-border:rgba(212,160,23,.18); --input-bg: rgba(26,10,0,.55); --nav-bg: rgba(13,8,4,.96); --text: var(--tl); --muted: var(--tm); } [data-mode="light"] { --card-bg: rgba(255,255,255,.88); --card-border:rgba(180,120,40,.22); --input-bg: rgba(255,255,255,.92); --nav-bg: rgba(255,248,238,.97); --text: var(--tl); --muted: var(--tm); } :root, [data-theme="saffron"] { --s:#FF6B1A;--ds:#E8420A;--g:#D4A017;--bri:#F5C842;--dk:#0D0804;--dm:#1A0A00;--wm:#120906;--tl:#FFF8EE;--tm:#C8A882; } [data-theme="marigold"] { --s:#F5A623;--ds:#D4851A;--g:#E8C84A;--bri:#FFE066;--dk:#0E0901;--dm:#1C1200;--wm:#150E00;--tl:#FFFBEE;--tm:#D4B870; } [data-theme="lotus"] { --s:#E8537A;--ds:#C73D62;--g:#D4A017;--bri:#F5C842;--dk:#0E0508;--dm:#1C0A12;--wm:#16080E;--tl:#FFF0F5;--tm:#C8A0B0; } [data-theme="ganges"] { --s:#3A9BD5;--ds:#2176AE;--g:#5EC4C4;--bri:#7FDBDB;--dk:#020C14;--dm:#041828;--wm:#03101E;--tl:#EEF8FF;--tm:#88B8D0; } [data-theme="forest"] { --s:#5C8A3C;--ds:#3E6428;--g:#A8B84B;--bri:#C8D870;--dk:#040C02;--dm:#081805;--wm:#060E03;--tl:#F0F8EE;--tm:#90B080; } [data-theme="midnight"] { --s:#9B59B6;--ds:#7D3C98;--g:#BDC3C7;--bri:#ECF0F1;--dk:#05020A;--dm:#0D0518;--wm:#090312;--tl:#F5F0FF;--tm:#A090C0; } /* ══════════ LIGHT MODE ══════════ */ [data-mode="light"] { --dk:#FFF8EE;--dm:#FFF0DC;--wm:#FFF4E6;--tl:#1A0A00;--tm:#7A5A40; --go:rgba(255,107,26,.2);--ggo:rgba(212,160,23,.15); } [data-mode="light"][data-theme="saffron"] { --s:#D45A0A;--ds:#B84000;--g:#B8880A;--bri:#D4A820; } [data-mode="light"][data-theme="marigold"] { --s:#C47800;--ds:#A05E00;--g:#B89000;--bri:#D4AE00; } [data-mode="light"][data-theme="lotus"] { --s:#C0304A;--ds:#A01830;--g:#B87800;--bri:#D4A000;--dk:#FFF0F4;--dm:#FFE4EC;--wm:#FFEEF4;--tl:#1A0008;--tm:#6A304A; } [data-mode="light"][data-theme="ganges"] { --s:#1870A8;--ds:#0A5888;--g:#289898;--bri:#48B8B8;--dk:#EEF8FF;--dm:#DCF0FF;--wm:#E6F4FF;--tl:#020C18;--tm:#204860; } [data-mode="light"][data-theme="forest"] { --s:#3A6020;--ds:#284810;--g:#6A8020;--bri:#88A030;--dk:#F0F8EE;--dm:#E4F0E0;--wm:#EAF4E6;--tl:#040C02;--tm:#385028; } [data-mode="light"][data-theme="midnight"] { --s:#7030A0;--ds:#581880;--g:#606870;--bri:#909898;--dk:#F5F0FF;--dm:#EDE6FF;--wm:#F1ECFF;--tl:#050208;--tm:#504068; } [data-mode="light"] body { background:var(--dk);color:var(--tl); } [data-mode="light"] ::-webkit-scrollbar-track { background:var(--dm); } /* ══════════ THEME SWITCHER WIDGET ══════════ */ .theme-switcher { position:fixed;right:0;top:50%;transform:translateY(-50%); z-index:998;display:flex;flex-direction:column;gap:3px; padding:8px 5px 6px;background:rgba(13,8,4,.82); border-radius:12px 0 0 12px;border:1px solid rgba(212,160,23,.2);border-right:none; } [data-mode="light"] .theme-switcher { background:rgba(255,240,220,.92);border-color:rgba(180,120,40,.3); } .theme-switcher__dot { width:20px;height:20px;border-radius:50%;cursor:pointer; border:2px solid transparent;transition:all .25s;position:relative; } .theme-switcher__dot:hover,.theme-switcher__dot.active { border-color:#fff;transform:scale(1.25); } [data-mode="light"] .theme-switcher__dot.active { border-color:#333; } .theme-switcher__dot[data-t="saffron"] { background:#FF6B1A; } .theme-switcher__dot[data-t="marigold"] { background:#F5A623; } .theme-switcher__dot[data-t="lotus"] { background:#E8537A; } .theme-switcher__dot[data-t="ganges"] { background:#3A9BD5; } .theme-switcher__dot[data-t="forest"] { background:#5C8A3C; } .theme-switcher__dot[data-t="midnight"] { background:#9B59B6; } .theme-switcher__dot::after { content:attr(data-label);position:absolute;right:28px;top:50%;transform:translateY(-50%); background:rgba(0,0,0,.88);color:#fff;font-family:'Cinzel',serif; font-size:.6rem;letter-spacing:.08em;padding:.2rem .5rem;border-radius:4px; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s; } .theme-switcher__dot:hover::after { opacity:1; } .theme-mode-btn { width:20px;height:20px;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2); display:flex;align-items:center;justify-content:center; font-size:.7rem;transition:all .25s;margin-top:3px; } .theme-mode-btn:hover { background:rgba(255,255,255,.22);transform:scale(1.2); } [data-mode="light"] .theme-mode-btn { background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.15); } @media(max-width:640px) { /* On mobile: show as bottom horizontal bar instead of right-side dots */ .theme-switcher { display: flex !important; flex-direction: row; position: fixed; bottom: 5rem; right: auto; left: 50%; top: auto; transform: translateX(-50%); border-radius: 30px; border: 1px solid rgba(212,160,23,.25); border-right: 1px solid rgba(212,160,23,.25); padding: 6px 10px; gap: 6px; background: rgba(13,8,4,.9); backdrop-filter: blur(10px); z-index: 997; } [data-mode="light"] .theme-switcher { background: rgba(255,245,225,.95); } .theme-switcher__dot { width: 22px; height: 22px; } .theme-switcher__dot::after { display: none; } .theme-mode-btn { width: 22px; height: 22px; margin-top: 0; } }