/** * ============================================================ * LEGEND OF ZELDA THEME - Ancient / Mythic / Natural * ============================================================ * Theme ID: zelda * Design: Deep forest, Triforce gold accents, serif elegance, weighted motion * * HOW THIS THEME FILE WORKS: * -------------------------- * 1. All styles use html[data-color="zelda"] selector * 2. Dark/light variants use html[data-theme="dark"][data-color="zelda"] * 3. When user selects this theme: * - applyColor('zelda') is called (js/theme/colors.js) * - Sets data-color="zelda" on element * - These CSS selectors activate * * TO CREATE A SIMILAR THEME: * -------------------------- * 1. Copy this file as /themes/yourtheme.css * 2. Replace all "zelda" with "yourtheme" in selectors * 3. Update color variables and styling * 4. Add 'yourtheme' to valid array in js/theme/colors.js * 5. Link CSS in index.html: * 6. Add button in index.html preferences with data-color="yourtheme" * * VIDEO BACKGROUND: * ----------------- * This theme has a video background. See .zelda-video-bg class. * The video element is in index.html and hidden by default. * html[data-color="zelda"] .zelda-video-bg { display: block !important; } * * DESIGN PRINCIPLES (for reference): * ---------------------------------- * - Never pure white backgrounds * - Gold accents are rare - overuse kills the theme * - Motion implies weight and age (no bouncy effects) * - Sections feel "contained" like stone tablets * - Typography: Serif/rune-like headings, humanist body * ============================================================ */ /* Fonts - Cinzel for headings, Libre Baskerville for body */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); html[data-color="zelda"]{ --brand-h:42; } /* ===== CORE COLOR SYSTEM ===== */ /* Dark Theme (Primary - Zelda is inherently dark/mythic) */ html[data-theme="dark"][data-color="zelda"]{ --bg: #0E1A14; /* Deep forest green */ --bg-primary: #0E1A14; --bg-secondary: #16261E; /* Panel / card */ --bg-tertiary: #1F3529; /* Nested panels */ --card: rgba(22, 38, 30, 0.9); --text: #E6F0E9; /* text-primary */ --text-primary: #E6F0E9; --text-secondary: #B7C8BD; --muted: #7F9488; /* text-muted */ --line: rgba(201,164,74,0.25); /* border-subtle */ --surface-2: #16261E; --surface-3: #1F3529; --accent-primary: #C9A44A; /* Triforce gold */ --accent-secondary: #3FA36A; /* Sacred green */ --accent-danger: #B3472D; /* Malice red */ --border-subtle: rgba(201,164,74,0.25); --border-strong: #C9A44A; } /* Light Theme Variant */ html[data-theme="light"][data-color="zelda"]{ --bg: #E8EDE9; --bg-primary: #E8EDE9; --bg-secondary: #D8E0DA; --bg-tertiary: #C8D4CC; --card: rgba(216, 224, 218, 0.95); --text: #0E1A14; --text-primary: #0E1A14; --text-secondary: #2A3E32; --muted: #5A6E62; --line: rgba(161,124,40,0.3); --surface-2: #D8E0DA; --surface-3: #C8D4CC; --accent-primary: #A17C28; /* Darker gold for light mode */ --accent-secondary: #2D7A4E; /* Darker green */ --accent-danger: #8C3420; --border-subtle: rgba(161,124,40,0.3); --border-strong: #A17C28; } /* ===== VIDEO BACKGROUND ===== */ html[data-color="zelda"] .zelda-video-bg{ display: block !important; } .zelda-video-bg{ display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; pointer-events: none; opacity: 0.5; filter: saturate(0.9) brightness(0.9); } html[data-theme="light"][data-color="zelda"] .zelda-video-bg{ opacity: 0.3; filter: saturate(0.8) brightness(1.1); } /* ===== TYPOGRAPHY ===== */ /* Headings: Serif/rune-like (Cinzel) - letter-spacing +1-3% */ html[data-color="zelda"] h1, html[data-color="zelda"] h2, html[data-color="zelda"] h3, html[data-color="zelda"] .onboard-title, html[data-color="zelda"] .modal-header strong, html[data-color="zelda"] .kiosk-modal-title, html[data-color="zelda"] .label{ font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.02em; } /* Body: Humanist serif (Libre Baskerville) - line-height ≥ 1.6 */ html[data-color="zelda"], html[data-color="zelda"] body{ font-family: 'Libre Baskerville', Georgia, serif; line-height: 1.65; } /* Mono: JetBrains Mono */ html[data-color="zelda"] .clock, html[data-color="zelda"] #clockOut, html[data-color="zelda"] .countdown, html[data-color="zelda"] #elapsedOut, html[data-color="zelda"] #leftOut, html[data-color="zelda"] #nextInOut, html[data-color="zelda"] code, html[data-color="zelda"] .kbd{ font-family: 'JetBrains Mono', monospace !important; font-weight: 500; } /* Clock - Triforce gold with subtle glow */ html[data-theme="dark"][data-color="zelda"] #clockOut{ color: #C9A44A; font-family: 'Cinzel', serif !important; font-weight: 700; letter-spacing: 0.03em; text-shadow: 0 0 20px rgba(201, 164, 74, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5); } html[data-theme="light"][data-color="zelda"] #clockOut{ color: #A17C28; font-family: 'Cinzel', serif !important; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } /* ===== BACKGROUND & LAYOUT ===== */ /* Never pure white backgrounds */ html[data-color="zelda"] body{ background: radial-gradient(ellipse at center, #16261E 0%, #0E1A14 70%, #0A120E 100%); background-attachment: fixed; } html[data-theme="light"][data-color="zelda"] body{ background: radial-gradient(ellipse at center, #E8EDE9 0%, #D8E0DA 70%, #C8D4CC 100%); } /* Container - Stone tablet frame feel */ html[data-color="zelda"] .container{ border: 1px solid rgba(201,164,74,0.3); border-radius: 4px; background: rgba(22, 38, 30, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 164, 74, 0.1), inset 0 1px 0 rgba(201, 164, 74, 0.1); position: relative; } /* Ornamental top border */ html[data-color="zelda"] .container::before{ content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, #C9A44A, transparent); opacity: 0.6; } html[data-theme="light"][data-color="zelda"] .container{ background: rgba(232, 237, 233, 0.9); border-color: rgba(161, 124, 40, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } /* ===== CARDS ===== */ /* Border radius: 4px, soft long shadows - frames over flat cards */ html[data-color="zelda"] .card{ border: 1px solid rgba(201,164,74,0.2); border-radius: 4px; background: rgba(31, 53, 41, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: all 280ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(201, 164, 74, 0.08); } html[data-color="zelda"] .card:hover{ border-color: rgba(201, 164, 74, 0.4); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(201, 164, 74, 0.15), inset 0 1px 0 rgba(201, 164, 74, 0.12); } html[data-theme="light"][data-color="zelda"] .card{ background: rgba(255, 255, 255, 0.85); border-color: rgba(161, 124, 40, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } html[data-theme="light"][data-color="zelda"] .card:hover{ border-color: rgba(161, 124, 40, 0.4); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); } /* Themed cards - Gold gradient with glow */ html[data-color="zelda"] .themed-card::before{ background: linear-gradient(135deg, rgba(201, 164, 74, 0.9), rgba(181, 144, 54, 0.85)); } html[data-color="zelda"] .themed-card{ color: #0E1A14; border: 1px solid #C9A44A; border-radius: 4px; box-shadow: 0 4px 24px rgba(201, 164, 74, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); } html[data-color="zelda"] .themed-card .label, html[data-color="zelda"] .themed-card .muted, html[data-color="zelda"] .themed-card #currentName, html[data-color="zelda"] .themed-card #currentRoom, html[data-color="zelda"] .themed-card #currentTimeRange, html[data-color="zelda"] .themed-card #elapsedOut, html[data-color="zelda"] .themed-card #leftOut, html[data-color="zelda"] .themed-card #nextName, html[data-color="zelda"] .themed-card #nextRoom, html[data-color="zelda"] .themed-card #nextTimeRange, html[data-color="zelda"] .themed-card #nextInOut, html[data-color="zelda"] .themed-card #untilOut{ color: rgba(14, 26, 20, 0.9) !important; } /* ===== PILLS ===== */ html[data-color="zelda"] .pill{ border: 1px solid rgba(201,164,74,0.3); background: rgba(31, 53, 41, 0.7); color: #B7C8BD; font-family: 'Cinzel', serif; font-weight: 500; font-size: 0.85em; letter-spacing: 0.02em; border-radius: 2px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .pill:hover{ border-color: #C9A44A; color: #C9A44A; box-shadow: 0 0 15px rgba(201, 164, 74, 0.15); } html[data-theme="light"][data-color="zelda"] .pill{ background: rgba(200, 212, 204, 0.8); border-color: rgba(161, 124, 40, 0.25); color: #2A3E32; } /* ===== PROGRESS BAR ===== */ html[data-color="zelda"] .progress{ background: linear-gradient(90deg, #C9A44A, #D4B45A); box-shadow: 0 0 12px rgba(201, 164, 74, 0.3); border-radius: 2px; } html[data-color="zelda"] .progress-wrap{ background: rgba(31, 53, 41, 0.5); border: 1px solid rgba(201,164,74,0.2); border-radius: 3px; } /* ===== BUTTONS ===== */ /* Gold border, dark fill, gold text on hover */ html[data-color="zelda"] .btn{ background: rgba(31, 53, 41, 0.9); color: #C9A44A; border: 1px solid #C9A44A; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.03em; border-radius: 2px; transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } html[data-color="zelda"] .btn:hover{ background: #C9A44A; color: #0E1A14; box-shadow: 0 4px 16px rgba(201, 164, 74, 0.25), 0 0 20px rgba(201, 164, 74, 0.15); } html[data-color="zelda"] .btn:active{ transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } html[data-theme="light"][data-color="zelda"] .btn{ background: rgba(255, 255, 255, 0.9); color: #A17C28; border-color: #A17C28; } html[data-theme="light"][data-color="zelda"] .btn:hover{ background: #A17C28; color: #FFFFFF; } /* Icon buttons - Slow fade + slight glow */ html[data-color="zelda"] .icon-btn{ border: 1px solid transparent; border-radius: 4px; transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .icon-btn:hover{ background: rgba(201, 164, 74, 0.1); border-color: rgba(201, 164, 74, 0.3); box-shadow: 0 0 15px rgba(201, 164, 74, 0.1); } html[data-color="zelda"] .icon-btn:hover .icon{ filter: drop-shadow(0 0 4px rgba(201, 164, 74, 0.4)); } /* ===== STATUS BADGES ===== */ html[data-color="zelda"] .status--current{ background: #C9A44A; color: #0E1A14; border: none; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.02em; border-radius: 2px; box-shadow: 0 0 12px rgba(201, 164, 74, 0.25); } html[data-color="zelda"] .status--next{ background: rgba(63, 163, 106, 0.15); color: #3FA36A; border: 1px solid rgba(63, 163, 106, 0.4); font-family: 'Cinzel', serif; font-weight: 600; border-radius: 2px; } html[data-color="zelda"] .status--done{ background: rgba(127, 148, 136, 0.15); color: #7F9488; text-decoration: line-through; } /* ===== CHIPS ===== */ html[data-color="zelda"] .chip{ border: 1px solid rgba(201,164,74,0.25); font-family: 'Libre Baskerville', serif; font-weight: 400; border-radius: 2px; background: rgba(31, 53, 41, 0.5); transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .chip[aria-pressed="true"]{ background: rgba(201, 164, 74, 0.15); border-color: #C9A44A; color: #C9A44A; box-shadow: 0 0 12px rgba(201, 164, 74, 0.1); } html[data-color="zelda"] .chip:hover{ border-color: #3FA36A; color: #3FA36A; box-shadow: 0 0 10px rgba(63, 163, 106, 0.1); } html[data-theme="light"][data-color="zelda"] .chip{ background: rgba(255, 255, 255, 0.8); border-color: rgba(161, 124, 40, 0.2); } /* ===== SCHEDULE TABLE ===== */ /* Alternating forest shades, gold header underline */ html[data-color="zelda"] .schedule th{ border-bottom: 2px solid #C9A44A; color: #C9A44A; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.03em; background: transparent; } html[data-color="zelda"] .schedule tr.active{ background: linear-gradient(90deg, rgba(201, 164, 74, 0.15), rgba(201, 164, 74, 0.05), transparent); border-left: 2px solid #C9A44A; } html[data-color="zelda"] .schedule td{ border-bottom: 1px solid rgba(201,164,74,0.1); } /* Alternating forest shades */ html[data-color="zelda"] .schedule tbody tr:nth-child(odd){ background: rgba(22, 38, 30, 0.4); } html[data-color="zelda"] .schedule tbody tr:nth-child(even){ background: rgba(31, 53, 41, 0.3); } html[data-color="zelda"] .schedule tbody tr{ transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .schedule tbody tr:hover{ background: rgba(201, 164, 74, 0.08); } html[data-theme="light"][data-color="zelda"] .schedule th{ color: #A17C28; border-bottom-color: #A17C28; } html[data-theme="light"][data-color="zelda"] .schedule tbody tr:nth-child(odd){ background: rgba(200, 212, 204, 0.4); } html[data-theme="light"][data-color="zelda"] .schedule tbody tr:nth-child(even){ background: rgba(216, 224, 218, 0.5); } /* ===== DIALOGS/MODALS ===== */ html[data-color="zelda"] dialog{ border: 1px solid rgba(201, 164, 74, 0.3); border-radius: 4px; background: rgba(14, 26, 20, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 164, 74, 0.15), inset 0 1px 0 rgba(201, 164, 74, 0.1); } html[data-theme="light"][data-color="zelda"] dialog{ background: rgba(248, 250, 248, 0.95); border-color: rgba(161, 124, 40, 0.25); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); } html[data-color="zelda"] dialog::backdrop{ background: rgba(10, 18, 14, 0.9); } html[data-color="zelda"] .modal-header{ border-bottom: 1px solid rgba(201, 164, 74, 0.25); } html[data-color="zelda"] .modal-header strong{ font-family: 'Cinzel', serif; color: #C9A44A; letter-spacing: 0.03em; } /* ===== ONBOARDING ===== */ html[data-color="zelda"] .onboard-title{ font-family: 'Cinzel', serif !important; color: #C9A44A !important; letter-spacing: 0.04em; text-shadow: 0 0 30px rgba(201, 164, 74, 0.2); } html[data-color="zelda"] .onboard-card{ border: 1px solid rgba(201, 164, 74, 0.3); background: rgba(14, 26, 20, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(201, 164, 74, 0.1); border-radius: 4px; } html[data-theme="light"][data-color="zelda"] .onboard-card{ background: rgba(248, 250, 248, 0.92); } /* ===== INPUTS ===== */ /* Dark stone background, thin gold outline on focus */ html[data-color="zelda"] input, html[data-color="zelda"] select, html[data-color="zelda"] textarea{ border: 1px solid rgba(201,164,74,0.2); border-radius: 2px; background: rgba(22, 38, 30, 0.8); color: #E6F0E9; font-family: 'Libre Baskerville', serif; transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] input:focus, html[data-color="zelda"] select:focus, html[data-color="zelda"] textarea:focus{ border-color: #C9A44A; outline: none; box-shadow: 0 0 0 2px rgba(201, 164, 74, 0.15), 0 0 15px rgba(201, 164, 74, 0.1); } html[data-theme="light"][data-color="zelda"] input, html[data-theme="light"][data-color="zelda"] select, html[data-theme="light"][data-color="zelda"] textarea{ background: rgba(255, 255, 255, 0.9); border-color: rgba(161, 124, 40, 0.2); color: #0E1A14; } html[data-theme="light"][data-color="zelda"] input:focus, html[data-theme="light"][data-color="zelda"] select:focus, html[data-theme="light"][data-color="zelda"] textarea:focus{ border-color: #A17C28; box-shadow: 0 0 0 2px rgba(161, 124, 40, 0.1); } /* ===== TABS ===== */ html[data-color="zelda"] .tabs{ border-bottom: 1px solid rgba(201,164,74,0.2); } html[data-color="zelda"] .tab{ color: #B7C8BD; font-family: 'Cinzel', serif; font-weight: 500; transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .tab:hover{ color: #3FA36A; } html[data-color="zelda"] .tab[aria-selected="true"]{ color: #C9A44A; border-bottom: 2px solid #C9A44A; } /* ===== QUICK ACTIONS ===== */ html[data-color="zelda"] .quick-action{ border: 1px solid rgba(201,164,74,0.2); background: rgba(31, 53, 41, 0.5); color: #B7C8BD; font-family: 'Libre Baskerville', serif; border-radius: 2px; transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .quick-action:hover{ background: rgba(201, 164, 74, 0.1); border-color: #C9A44A; color: #C9A44A; box-shadow: 0 0 12px rgba(201, 164, 74, 0.1); } html[data-color="zelda"] .quick-action.danger{ border-color: rgba(179, 71, 45, 0.4); color: #B3472D; } html[data-color="zelda"] .quick-action.danger:hover{ background: rgba(179, 71, 45, 0.1); border-color: #B3472D; box-shadow: 0 0 10px rgba(179, 71, 45, 0.1); } /* ===== SCROLLBAR ===== */ html[data-color="zelda"] ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #C9A44A, #A17C28); border-radius: 2px; } html[data-color="zelda"] ::-webkit-scrollbar-track{ background: rgba(22, 38, 30, 0.5); } /* ===== KIOSK MODE ===== */ html[data-color="zelda"] .kiosk-modal-content{ border: 1px solid rgba(201, 164, 74, 0.35); background: rgba(14, 26, 20, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 4px; box-shadow: 0 0 50px rgba(201, 164, 74, 0.1); } html[data-color="zelda"] .kiosk-modal-title{ font-family: 'Cinzel', serif; color: #C9A44A; letter-spacing: 0.04em; } html[data-color="zelda"] .kiosk-key{ background: rgba(31, 53, 41, 0.9); border: 1px solid rgba(201,164,74,0.25); color: #E6F0E9; font-family: 'JetBrains Mono', monospace; font-weight: 500; border-radius: 4px; transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .kiosk-key:hover{ background: #C9A44A; border-color: #C9A44A; color: #0E1A14; box-shadow: 0 0 15px rgba(201, 164, 74, 0.25); } html[data-color="zelda"] .kiosk-pin-dot{ background: rgba(201,164,74,0.1); border: 2px solid rgba(201, 164, 74, 0.4); border-radius: 50%; } html[data-color="zelda"] .kiosk-pin-dot.filled{ background: #C9A44A; border-color: #C9A44A; box-shadow: 0 0 10px rgba(201, 164, 74, 0.4); } /* ===== EDITOR ===== */ html[data-color="zelda"] .blocks-container{ border: 1px dashed rgba(201, 164, 74, 0.25); background: rgba(22, 38, 30, 0.4); border-radius: 4px; } /* ===== DAY OVER MESSAGE ===== */ html[data-color="zelda"] .dayover-message{ border: 1px solid rgba(201, 164, 74, 0.3); background: rgba(14, 26, 20, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; box-shadow: 0 0 30px rgba(201, 164, 74, 0.1); } /* ===== LINKS ===== */ /* Gold text, underline only on hover */ html[data-color="zelda"] a{ color: #C9A44A; text-decoration: none; transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] a:hover{ color: #D9B45A; text-decoration: underline; text-shadow: 0 0 8px rgba(201, 164, 74, 0.3); } /* ===== HELP TEXT ===== */ html[data-color="zelda"] .help{ color: #7F9488; font-style: italic; } /* ===== KBD ===== */ html[data-color="zelda"] .kbd{ background: rgba(31, 53, 41, 0.9); border: 1px solid rgba(201,164,74,0.25); color: #C9A44A; font-family: 'JetBrains Mono', monospace; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* ===== SELECTION ===== */ html[data-color="zelda"] ::selection{ background: rgba(201, 164, 74, 0.35); color: #E6F0E9; } /* ===== MUTED TEXT COLORS ===== */ html[data-theme="dark"][data-color="zelda"] .label{ color: #C9A44A; font-size: 0.85em; } html[data-theme="dark"][data-color="zelda"] .muted, html[data-theme="dark"][data-color="zelda"] #dateOut{ color: #B7C8BD; } html[data-theme="dark"][data-color="zelda"] #schoolState{ color: #3FA36A; border-color: rgba(63, 163, 106, 0.3); } html[data-theme="light"][data-color="zelda"] .label{ color: #A17C28; } html[data-theme="light"][data-color="zelda"] .muted, html[data-theme="light"][data-color="zelda"] #dateOut{ color: #5A6E62; } /* ===== SUBTLE ANIMATIONS ===== */ /* Motion implies weight and age - no bouncy effects */ @keyframes zelda-glow { 0%, 100% { box-shadow: 0 4px 24px rgba(201, 164, 74, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 4px 24px rgba(201, 164, 74, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2); } } html[data-color="zelda"] .themed-card{ animation: zelda-glow 4s ease-in-out infinite; } /* Icon handling - monochrome, stroke-based, inherit accent */ html[data-color="zelda"] .icon-btn .icon{ filter: sepia(0.3) brightness(0.9); transition: filter 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-color="zelda"] .icon-btn:hover .icon{ filter: sepia(0.5) brightness(1.1) drop-shadow(0 0 4px rgba(201, 164, 74, 0.3)); }