/** * ============================================================ * STRANGER THINGS THEME - 1980s Horror / Sci-Fi / Upside Down * ============================================================ * Theme ID: strangerthings * Design: Deep reds, neon glow, dark mysterious atmosphere, retro 80s * * HOW THIS THEME FILE WORKS: * -------------------------- * 1. All styles use html[data-color="strangerthings"] selector * 2. Dark/light variants use html[data-theme="dark"][data-color="strangerthings"] * 3. When user selects this theme: * - applyColor('strangerthings') is called (js/theme/colors.js) * - Sets data-color="strangerthings" on element * - These CSS selectors activate * * TO CREATE A SIMILAR THEME: * -------------------------- * 1. Copy this file as /themes/yourtheme.css * 2. Replace all "strangerthings" 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" * ============================================================ */ /* Fonts - Benguiat-style for headings (using Playfair Display as fallback), Synth-wave for accents */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Roboto:wght@400;500;600&display=swap'); html[data-color="strangerthings"]{ --brand-h:0; } /* ===== CORE COLOR SYSTEM ===== */ /* Dark Theme (Primary - Stranger Things is inherently dark) */ html[data-theme="dark"][data-color="strangerthings"]{ --bg: #0A0608; /* Deep void black */ --bg-primary: #0A0608; --bg-secondary: #12090C; /* Upside Down shadow */ --bg-tertiary: #1A0D10; /* Depth layers */ --card: rgba(18, 9, 12, 0.9); --text: #F5E6E8; /* Warm white */ --text-primary: #F5E6E8; --text-secondary: #C4A5AB; --muted: #8B6B72; --line: rgba(200, 30, 50, 0.15); --surface-2: #12090C; --surface-3: #1A0D10; --accent-primary: #C81E32; /* Stranger Things Red */ --accent-secondary: #E83F5B; /* Neon Pink */ --accent-tertiary: #00B4D8; /* 80s Electric Blue */ --border-subtle: rgba(200, 30, 50, 0.2); --border-strong: #C81E32; } /* Light Theme Variant */ html[data-theme="light"][data-color="strangerthings"]{ --bg: #F8F0F2; --bg-primary: #F8F0F2; --bg-secondary: #F0E4E6; --bg-tertiary: #E8D8DC; --card: rgba(255, 255, 255, 0.9); --text: #1A0D10; --text-primary: #1A0D10; --text-secondary: #4A2A30; --muted: #7A5A62; --line: rgba(200, 30, 50, 0.2); --surface-2: #F0E4E6; --surface-3: #E8D8DC; --accent-primary: #C81E32; --accent-secondary: #D63650; --accent-tertiary: #0096B4; --border-subtle: rgba(200, 30, 50, 0.15); --border-strong: #C81E32; } /* ===== TYPOGRAPHY ===== */ /* Headings: Playfair Display (Benguiat-style serif) - Heavy, dramatic */ html[data-color="strangerthings"] h1, html[data-color="strangerthings"] h2, html[data-color="strangerthings"] h3, html[data-color="strangerthings"] .onboard-title, html[data-color="strangerthings"] .modal-header strong, html[data-color="strangerthings"] .kiosk-modal-title{ font-family: 'Playfair Display', Georgia, serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.1; } /* Body: Roboto (clean 80s tech) */ html[data-color="strangerthings"], html[data-color="strangerthings"] body{ font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; } /* Mono: Space Mono (retro computer) */ html[data-color="strangerthings"] .clock, html[data-color="strangerthings"] #clockOut, html[data-color="strangerthings"] .countdown, html[data-color="strangerthings"] #elapsedOut, html[data-color="strangerthings"] #leftOut, html[data-color="strangerthings"] #nextInOut, html[data-color="strangerthings"] code, html[data-color="strangerthings"] .kbd{ font-family: 'Space Mono', monospace !important; font-weight: 500; } /* Clock - Neon red glow (Christmas lights effect) */ html[data-theme="dark"][data-color="strangerthings"] #clockOut{ color: #C81E32; text-shadow: 0 0 10px rgba(200, 30, 50, 0.8), 0 0 20px rgba(200, 30, 50, 0.6), 0 0 40px rgba(200, 30, 50, 0.4), 0 0 60px rgba(200, 30, 50, 0.2); font-family: 'Playfair Display', serif !important; font-weight: 700; letter-spacing: 0.04em; animation: st-flicker 4s ease-in-out infinite; } html[data-theme="light"][data-color="strangerthings"] #clockOut{ color: #A01828; text-shadow: 0 2px 8px rgba(200, 30, 50, 0.3); font-family: 'Playfair Display', serif !important; font-weight: 700; } /* Christmas lights flicker animation */ @keyframes st-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.7; } 94% { opacity: 1; } 96% { opacity: 0.8; } 97% { opacity: 1; } } /* ===== BACKGROUND & LAYOUT ===== */ html[data-color="strangerthings"] body{ background: linear-gradient(180deg, rgba(10, 6, 8, 0.85) 0%, rgba(18, 9, 12, 0.8) 30%, rgba(26, 13, 16, 0.85) 70%, rgba(10, 6, 8, 0.9) 100% ), url('../backrounds/stranger-things-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-theme="light"][data-color="strangerthings"] body{ background: linear-gradient(180deg, rgba(248, 240, 242, 0.9) 0%, rgba(240, 228, 230, 0.85) 50%, rgba(248, 240, 242, 0.9) 100% ), url('../backrounds/stranger-things-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } /* Container - Dark portal effect */ html[data-color="strangerthings"] .container{ border: 1px solid rgba(200, 30, 50, 0.2); border-radius: 8px; background: rgba(18, 9, 12, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(200, 30, 50, 0.1), inset 0 0 60px rgba(200, 30, 50, 0.03); position: relative; } html[data-color="strangerthings"] .container::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #C81E32, #E83F5B, #C81E32, transparent); opacity: 0.8; animation: st-scanline 3s linear infinite; } @keyframes st-scanline { 0% { opacity: 0.4; } 50% { opacity: 0.9; } 100% { opacity: 0.4; } } html[data-theme="light"][data-color="strangerthings"] .container{ background: rgba(255, 255, 255, 0.9); border-color: rgba(200, 30, 50, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); } /* ===== CARDS ===== */ html[data-color="strangerthings"] .card{ border: 1px solid rgba(200, 30, 50, 0.15); border-radius: 6px; background: rgba(26, 13, 16, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 200ms ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } html[data-color="strangerthings"] .card:hover{ border-color: rgba(200, 30, 50, 0.5); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 30, 50, 0.15); } html[data-theme="light"][data-color="strangerthings"] .card{ background: rgba(255, 255, 255, 0.85); border-color: rgba(200, 30, 50, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } html[data-theme="light"][data-color="strangerthings"] .card:hover{ border-color: rgba(200, 30, 50, 0.4); box-shadow: 0 4px 16px rgba(200, 30, 50, 0.12); } /* Themed cards - Neon red glow */ html[data-color="strangerthings"] .themed-card::before{ background: linear-gradient(135deg, rgba(200, 30, 50, 0.95), rgba(232, 63, 91, 0.9)); } html[data-color="strangerthings"] .themed-card{ color: #F5E6E8; border: 1px solid #C81E32; border-radius: 6px; box-shadow: 0 4px 16px rgba(200, 30, 50, 0.3), 0 0 30px rgba(200, 30, 50, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: st-card-pulse 4s ease-in-out infinite; } @keyframes st-card-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(200, 30, 50, 0.3), 0 0 30px rgba(200, 30, 50, 0.15); } 50% { box-shadow: 0 4px 20px rgba(200, 30, 50, 0.4), 0 0 40px rgba(200, 30, 50, 0.2); } } html[data-color="strangerthings"] .themed-card .label, html[data-color="strangerthings"] .themed-card .muted, html[data-color="strangerthings"] .themed-card #currentName, html[data-color="strangerthings"] .themed-card #currentRoom, html[data-color="strangerthings"] .themed-card #currentTimeRange, html[data-color="strangerthings"] .themed-card #elapsedOut, html[data-color="strangerthings"] .themed-card #leftOut, html[data-color="strangerthings"] .themed-card #nextName, html[data-color="strangerthings"] .themed-card #nextRoom, html[data-color="strangerthings"] .themed-card #nextTimeRange, html[data-color="strangerthings"] .themed-card #nextInOut, html[data-color="strangerthings"] .themed-card #untilOut{ color: rgba(255, 255, 255, 0.95) !important; } /* ===== PILLS ===== */ html[data-color="strangerthings"] .pill{ border: 1px solid rgba(200, 30, 50, 0.25); background: rgba(26, 13, 16, 0.8); color: #C4A5AB; font-weight: 600; border-radius: 4px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all 200ms ease; } html[data-color="strangerthings"] .pill:hover{ border-color: #00B4D8; color: #00B4D8; box-shadow: 0 0 15px rgba(0, 180, 216, 0.3); } html[data-theme="light"][data-color="strangerthings"] .pill{ background: rgba(255, 255, 255, 0.8); border-color: rgba(200, 30, 50, 0.2); color: #4A2A30; } /* ===== PROGRESS BAR ===== */ html[data-color="strangerthings"] .progress{ background: linear-gradient(90deg, #C81E32, #E83F5B); box-shadow: 0 0 15px rgba(200, 30, 50, 0.5); border-radius: 2px; } html[data-color="strangerthings"] .progress-wrap{ background: rgba(26, 13, 16, 0.6); border: 1px solid rgba(200, 30, 50, 0.2); border-radius: 3px; } /* ===== BUTTONS ===== */ html[data-color="strangerthings"] .btn{ background: #C81E32; color: #F5E6E8; border: none; font-family: 'Playfair Display', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 4px; transition: all 180ms ease; box-shadow: 0 2px 8px rgba(200, 30, 50, 0.3); } html[data-color="strangerthings"] .btn:hover{ background: #E83F5B; transform: scale(0.98); box-shadow: 0 4px 16px rgba(200, 30, 50, 0.4), 0 0 25px rgba(200, 30, 50, 0.3); } html[data-color="strangerthings"] .btn:active{ transform: scale(0.96); } /* Icon buttons */ html[data-color="strangerthings"] .icon-btn{ border: 1px solid transparent; border-radius: 4px; transition: all 180ms ease; } html[data-color="strangerthings"] .icon-btn:hover{ background: rgba(200, 30, 50, 0.15); border-color: rgba(200, 30, 50, 0.4); transform: translateY(-2px); box-shadow: 0 0 15px rgba(200, 30, 50, 0.2); } html[data-color="strangerthings"] .icon-btn:hover .icon{ filter: drop-shadow(0 0 4px rgba(200, 30, 50, 0.6)); } /* ===== STATUS BADGES ===== */ html[data-color="strangerthings"] .status--current{ background: #C81E32; color: #F5E6E8; border: none; font-family: 'Playfair Display', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; box-shadow: 0 0 15px rgba(200, 30, 50, 0.4); } html[data-color="strangerthings"] .status--next{ background: rgba(0, 180, 216, 0.15); color: #00B4D8; border: 1px solid rgba(0, 180, 216, 0.4); font-family: 'Playfair Display', serif; font-weight: 600; text-transform: uppercase; border-radius: 4px; } html[data-color="strangerthings"] .status--done{ background: rgba(139, 107, 114, 0.2); color: #8B6B72; text-decoration: line-through; } /* ===== CHIPS ===== */ html[data-color="strangerthings"] .chip{ border: 1px solid rgba(200, 30, 50, 0.2); font-weight: 500; border-radius: 4px; background: rgba(26, 13, 16, 0.6); transition: all 180ms ease; } html[data-color="strangerthings"] .chip[aria-pressed="true"]{ background: rgba(200, 30, 50, 0.2); border-color: #C81E32; color: #C81E32; box-shadow: 0 0 12px rgba(200, 30, 50, 0.2); } html[data-color="strangerthings"] .chip:hover{ border-color: #00B4D8; color: #00B4D8; transform: translateY(-1px); box-shadow: 0 0 10px rgba(0, 180, 216, 0.2); } html[data-theme="light"][data-color="strangerthings"] .chip{ background: rgba(255, 255, 255, 0.8); border-color: rgba(200, 30, 50, 0.15); } /* ===== SCHEDULE TABLE ===== */ html[data-color="strangerthings"] .schedule th{ border-bottom: 2px solid #C81E32; color: #C81E32; font-family: 'Playfair Display', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: linear-gradient(180deg, rgba(200, 30, 50, 0.1), transparent); text-shadow: 0 0 10px rgba(200, 30, 50, 0.3); } html[data-color="strangerthings"] .schedule tr.active{ background: linear-gradient(90deg, rgba(200, 30, 50, 0.25), rgba(200, 30, 50, 0.1), transparent); border-left: 3px solid #C81E32; box-shadow: inset 0 0 20px rgba(200, 30, 50, 0.1); } html[data-color="strangerthings"] .schedule td{ border-bottom: 1px solid rgba(200, 30, 50, 0.1); } html[data-color="strangerthings"] .schedule tbody tr{ background: rgba(18, 9, 12, 0.4); transition: all 180ms ease; } html[data-color="strangerthings"] .schedule tbody tr:hover{ background: rgba(200, 30, 50, 0.08); box-shadow: inset 0 0 10px rgba(200, 30, 50, 0.05); } html[data-theme="light"][data-color="strangerthings"] .schedule th{ color: #A01828; text-shadow: none; } html[data-theme="light"][data-color="strangerthings"] .schedule td{ border-bottom-color: rgba(200, 30, 50, 0.1); } /* ===== DIALOGS/MODALS ===== */ html[data-color="strangerthings"] dialog{ border: 1px solid rgba(200, 30, 50, 0.3); border-radius: 8px; background: rgba(14, 8, 10, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(200, 30, 50, 0.2), 0 0 50px rgba(200, 30, 50, 0.1); } html[data-theme="light"][data-color="strangerthings"] dialog{ background: rgba(255, 255, 255, 0.95); border-color: rgba(200, 30, 50, 0.2); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); } html[data-color="strangerthings"] dialog::backdrop{ background: rgba(10, 6, 8, 0.92); backdrop-filter: blur(4px); } html[data-color="strangerthings"] .modal-header{ border-bottom: 1px solid rgba(200, 30, 50, 0.3); } html[data-color="strangerthings"] .modal-header strong{ font-family: 'Playfair Display', serif; color: #C81E32; text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 0 10px rgba(200, 30, 50, 0.3); } /* ===== ONBOARDING ===== */ html[data-color="strangerthings"] .onboard-title{ font-family: 'Playfair Display', serif !important; color: #C81E32 !important; text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 0 20px rgba(200, 30, 50, 0.5), 0 0 40px rgba(200, 30, 50, 0.3); } html[data-color="strangerthings"] .onboard-card{ border: 1px solid rgba(200, 30, 50, 0.3); background: rgba(14, 8, 10, 0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6), 0 0 50px rgba(200, 30, 50, 0.15); border-radius: 8px; } html[data-theme="light"][data-color="strangerthings"] .onboard-card{ background: rgba(255, 255, 255, 0.92); } /* ===== INPUTS ===== */ html[data-color="strangerthings"] input, html[data-color="strangerthings"] select, html[data-color="strangerthings"] textarea{ border: 1px solid rgba(200, 30, 50, 0.2); border-radius: 4px; background: rgba(18, 9, 12, 0.8); color: #F5E6E8; transition: all 200ms ease; } html[data-color="strangerthings"] input:focus, html[data-color="strangerthings"] select:focus, html[data-color="strangerthings"] textarea:focus{ border-color: #00B4D8; outline: none; box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.2), 0 0 15px rgba(0, 180, 216, 0.15); } html[data-theme="light"][data-color="strangerthings"] input, html[data-theme="light"][data-color="strangerthings"] select, html[data-theme="light"][data-color="strangerthings"] textarea{ background: rgba(255, 255, 255, 0.9); border-color: rgba(200, 30, 50, 0.2); color: #1A0D10; } html[data-theme="light"][data-color="strangerthings"] input:focus, html[data-theme="light"][data-color="strangerthings"] select:focus, html[data-theme="light"][data-color="strangerthings"] textarea:focus{ border-color: #0096B4; box-shadow: 0 0 0 3px rgba(0, 150, 180, 0.15); } /* ===== TABS ===== */ html[data-color="strangerthings"] .tabs{ border-bottom: 1px solid rgba(200, 30, 50, 0.2); } html[data-color="strangerthings"] .tab{ color: #C4A5AB; font-weight: 500; transition: all 180ms ease; } html[data-color="strangerthings"] .tab:hover{ color: #00B4D8; } html[data-color="strangerthings"] .tab[aria-selected="true"]{ color: #C81E32; border-bottom: 2px solid #C81E32; text-shadow: 0 0 10px rgba(200, 30, 50, 0.3); } /* ===== QUICK ACTIONS ===== */ html[data-color="strangerthings"] .quick-action{ border: 1px solid rgba(200, 30, 50, 0.2); background: rgba(26, 13, 16, 0.6); color: #C4A5AB; font-weight: 500; border-radius: 4px; transition: all 180ms ease; } html[data-color="strangerthings"] .quick-action:hover{ background: rgba(0, 180, 216, 0.1); border-color: #00B4D8; color: #00B4D8; transform: translateY(-1px); box-shadow: 0 0 12px rgba(0, 180, 216, 0.2); } html[data-color="strangerthings"] .quick-action.danger{ border-color: rgba(232, 63, 91, 0.4); color: #E83F5B; } html[data-color="strangerthings"] .quick-action.danger:hover{ background: rgba(232, 63, 91, 0.15); border-color: #E83F5B; box-shadow: 0 0 12px rgba(232, 63, 91, 0.2); } /* ===== SCROLLBAR ===== */ html[data-color="strangerthings"] ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #C81E32, #9A1828); border-radius: 2px; } html[data-color="strangerthings"] ::-webkit-scrollbar-track{ background: rgba(18, 9, 12, 0.6); } /* ===== KIOSK MODE ===== */ html[data-color="strangerthings"] .kiosk-modal-content{ border: 1px solid rgba(200, 30, 50, 0.4); background: rgba(14, 8, 10, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 8px; box-shadow: 0 0 70px rgba(200, 30, 50, 0.2); } html[data-color="strangerthings"] .kiosk-modal-title{ font-family: 'Playfair Display', serif; color: #C81E32; text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 0 20px rgba(200, 30, 50, 0.4); } html[data-color="strangerthings"] .kiosk-key{ background: rgba(26, 13, 16, 0.9); border: 1px solid rgba(200, 30, 50, 0.2); color: #F5E6E8; font-family: 'Space Mono', monospace; font-weight: 500; border-radius: 6px; transition: all 180ms ease; } html[data-color="strangerthings"] .kiosk-key:hover{ background: #C81E32; border-color: #C81E32; color: #F5E6E8; transform: scale(0.98); box-shadow: 0 0 20px rgba(200, 30, 50, 0.4); } html[data-color="strangerthings"] .kiosk-pin-dot{ background: rgba(200, 30, 50, 0.1); border: 2px solid rgba(200, 30, 50, 0.4); border-radius: 50%; } html[data-color="strangerthings"] .kiosk-pin-dot.filled{ background: #C81E32; border-color: #C81E32; box-shadow: 0 0 12px rgba(200, 30, 50, 0.5); } /* ===== EDITOR ===== */ html[data-color="strangerthings"] .blocks-container{ border: 1px dashed rgba(200, 30, 50, 0.3); background: rgba(18, 9, 12, 0.5); border-radius: 6px; } /* ===== DAY OVER MESSAGE ===== */ html[data-color="strangerthings"] .dayover-message{ border: 1px solid rgba(200, 30, 50, 0.4); background: rgba(14, 8, 10, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 8px; box-shadow: 0 0 40px rgba(200, 30, 50, 0.15); } /* ===== LINKS ===== */ html[data-color="strangerthings"] a{ color: #00B4D8; text-decoration: none; transition: all 180ms ease; } html[data-color="strangerthings"] a:hover{ color: #C81E32; text-shadow: 0 0 10px rgba(200, 30, 50, 0.4); } /* ===== HELP TEXT ===== */ html[data-color="strangerthings"] .help{ color: #8B6B72; } /* ===== KBD ===== */ html[data-color="strangerthings"] .kbd{ background: rgba(26, 13, 16, 0.9); border: 1px solid rgba(200, 30, 50, 0.2); color: #00B4D8; font-family: 'Space Mono', monospace; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } /* ===== SELECTION ===== */ html[data-color="strangerthings"] ::selection{ background: rgba(200, 30, 50, 0.4); color: #F5E6E8; } /* ===== MUTED TEXT COLORS ===== */ html[data-theme="dark"][data-color="strangerthings"] .label, html[data-theme="dark"][data-color="strangerthings"] .muted, html[data-theme="dark"][data-color="strangerthings"] #dateOut{ color: #C4A5AB; } html[data-theme="dark"][data-color="strangerthings"] #schoolState{ color: #00B4D8; border-color: rgba(0, 180, 216, 0.3); } html[data-theme="light"][data-color="strangerthings"] .label, html[data-theme="light"][data-color="strangerthings"] .muted, html[data-theme="light"][data-color="strangerthings"] #dateOut{ color: #7A5A62; } /* ===== BOTTOM ACCENT LINE ===== */ html[data-color="strangerthings"] .container::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #C81E32, #E83F5B, #C81E32, transparent); opacity: 0.5; } /* ===== UPSIDE DOWN EFFECT - Subtle vignette ===== */ html[data-theme="dark"][data-color="strangerthings"]::before{ content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(10, 6, 8, 0.4) 100%); z-index: 9999; }