/* Theme switcher + theme styles */ /* Theme Switcher UI */ /* ensure theme-switcher stays top-right and above content */ .theme-switcher { position: fixed; top: 30px; right: 30px; z-index: 1000; display: flex; gap: 8px; } /* active theme button style (if you haven't added yet) */ .theme-switcher button.active { background: #2d6ca2; color: #fff; box-shadow: 0 4px 14px rgba(45,108,162,0.18); } .theme-switcher { position: absolute; top: 30px; right: 30px; z-index: 100; display: flex; gap: 8px; } .theme-switcher button { margin: 0; padding: 8px 14px; border: none; border-radius: 8px; background: rgba(255,255,255,0.9); color: #333; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; cursor: pointer; transition: background 0.18s, transform 0.08s, box-shadow 0.18s; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .theme-switcher button:hover { transform: translateY(-1px); } .theme-switcher button:active { transform: translateY(0); } /* Active button */ .theme-switcher button.active { background: #3498db; color: #fff; box-shadow: 0 6px 18px rgba(52,152,219,0.18); } /* THEMES Apply a theme by setting */ /* Light Theme */ .theme-light { background-color: #f4f6f8; color: #222; } .theme-light .countdown-container { /* subtle panel contrast */ --card-bg: #ffffff; --card-foreground: #1f78b4; --label-color: #555; } .theme-light .card { background: var(--card-bg); } .theme-light .card span { color: var(--card-foreground); } .theme-light .card .label { color: var(--label-color); } /* Dark Theme */ .theme-dark { background-color: #0f1114; color: #e6eef6; } .theme-dark .countdown-container { --card-bg: #16181b; --card-foreground: #f39c12; --label-color: #bdbdbd; } .theme-dark .card { background: var(--card-bg); box-shadow: 0 6px 18px rgba(0,0,0,0.6); } .theme-dark .card span { color: var(--card-foreground); } .theme-dark .card .label { color: var(--label-color); } /* Blue Theme */ .theme-blue { background-color: #071936; color: #e8f7ff; } .theme-blue .countdown-container { --card-bg: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); --card-foreground: #6ad0ff; --label-color: #bfe9ff; } .theme-blue .card { background: rgba(255,255,255,0.02); } .theme-blue .card span { color: var(--card-foreground); } .theme-blue .card .label { color: var(--label-color); } /* Small helper: logo tint per theme (optional) */ .theme-dark #site-logo { filter: brightness(0.9) saturate(0.6); } .theme-blue #site-logo { filter: hue-rotate(190deg) saturate(0.9) brightness(1.05); } /* Responsive adjustments */ @media (max-width: 520px) { .theme-switcher { top: 16px; right: 12px; gap: 6px; } .theme-switcher button { padding: 7px 10px; font-size: 0.9rem; } }