/** * ============================================================ * ZENLESS ZONE ZERO THEME - Urban / Neon / Aggressive * ============================================================ * Theme ID: zzz * Design: High contrast, asphalt black, neon accents, punchy motion * * HOW THIS THEME FILE WORKS: * -------------------------- * 1. All styles use html[data-color="zzz"] selector * 2. Dark/light variants use html[data-theme="dark"][data-color="zzz"] * 3. When user selects this theme: * - applyColor('zzz') is called (js/theme/colors.js) * - Sets data-color="zzz" on element * - These CSS selectors activate * * TO CREATE A SIMILAR THEME: * -------------------------- * 1. Copy this file as /themes/yourtheme.css * 2. Replace all "zzz" 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 .zzz-video-bg class. * The video element is in index.html and hidden by default. * html[data-color="zzz"] .zzz-video-bg { display: block !important; } * ============================================================ */ /* Fonts - Oswald for headings, Inter for body */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); html[data-color="zzz"]{ --brand-h:18; } /* ===== CORE COLOR SYSTEM ===== */ /* Dark Theme (Primary - ZZZ is inherently dark) */ html[data-theme="dark"][data-color="zzz"]{ --bg: #0A0A0D; /* Asphalt black */ --bg-primary: #0A0A0D; --bg-secondary: #14141A; /* Panels */ --bg-tertiary: #1E1E26; /* Depth layers */ --card: rgba(20, 20, 26, 0.85); --text: #F5F5F7; /* text-primary */ --text-primary: #F5F5F7; --text-secondary: #B3B3C2; --muted: #7A7A8F; /* text-muted */ --line: rgba(255,255,255,0.08); /* border-subtle */ --surface-2: #14141A; --surface-3: #1E1E26; --accent-primary: #FF4D00; /* ZZZ Orange */ --accent-secondary: #00E5FF; /* Electric Cyan */ --accent-tertiary: #A855F7; /* Distortion Purple */ --border-subtle: rgba(255,255,255,0.08); --border-strong: #FF4D00; } /* Light Theme Variant */ html[data-theme="light"][data-color="zzz"]{ --bg: #E8E8EC; --bg-primary: #E8E8EC; --bg-secondary: #D8D8E0; --bg-tertiary: #C8C8D0; --card: rgba(220, 220, 228, 0.9); --text: #0A0A0D; --text-primary: #0A0A0D; --text-secondary: #3A3A4A; --muted: #5A5A6F; --line: rgba(0,0,0,0.1); --surface-2: #D8D8E0; --surface-3: #C8C8D0; --accent-primary: #FF4D00; --accent-secondary: #00B8CC; --accent-tertiary: #9333EA; --border-subtle: rgba(0,0,0,0.1); --border-strong: #FF4D00; } /* ===== VIDEO BACKGROUND (disabled - using static image) ===== */ /* Video is hidden, using zzz-backround.jpg instead */ .zzz-video-bg{ display: none !important; } /* ===== TYPOGRAPHY ===== */ /* Headings: Condensed sans (Oswald) - Heavy, uppercase allowed */ html[data-color="zzz"] h1, html[data-color="zzz"] h2, html[data-color="zzz"] h3, html[data-color="zzz"] .onboard-title, html[data-color="zzz"] .modal-header strong, html[data-color="zzz"] .kiosk-modal-title{ font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; } /* Body: Neutral grotesk (Inter) */ html[data-color="zzz"], html[data-color="zzz"] body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* Mono: JetBrains Mono */ html[data-color="zzz"] .clock, html[data-color="zzz"] #clockOut, html[data-color="zzz"] .countdown, html[data-color="zzz"] #elapsedOut, html[data-color="zzz"] #leftOut, html[data-color="zzz"] #nextInOut, html[data-color="zzz"] code, html[data-color="zzz"] .kbd{ font-family: 'JetBrains Mono', monospace !important; font-weight: 500; } /* Clock - Neon orange glow */ html[data-theme="dark"][data-color="zzz"] #clockOut{ color: #FF4D00; text-shadow: 0 0 10px rgba(255, 77, 0, 0.6), 0 0 20px rgba(255, 77, 0, 0.4), 0 0 40px rgba(255, 77, 0, 0.2); font-family: 'Oswald', sans-serif !important; font-weight: 700; letter-spacing: 0.02em; } html[data-theme="light"][data-color="zzz"] #clockOut{ color: #CC3D00; text-shadow: 0 2px 8px rgba(255, 77, 0, 0.3); font-family: 'Oswald', sans-serif !important; font-weight: 700; } /* ===== BACKGROUND & LAYOUT ===== */ html[data-color="zzz"] body{ background: linear-gradient(135deg, rgba(10, 10, 13, 0.75) 0%, rgba(20, 20, 26, 0.7) 50%, rgba(10, 10, 13, 0.75) 100%), url('../backrounds/zzz-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-theme="light"][data-color="zzz"] body{ background: linear-gradient(135deg, rgba(232, 232, 236, 0.8) 0%, rgba(216, 216, 224, 0.75) 50%, rgba(232, 232, 236, 0.8) 100%), url('../backrounds/zzz-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } /* Container - Clipped corner effect with asymmetric shadow */ html[data-color="zzz"] .container{ border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; background: rgba(20, 20, 26, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 77, 0, 0.1); position: relative; } html[data-color="zzz"] .container::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #FF4D00, #00E5FF, transparent); opacity: 0.8; } html[data-theme="light"][data-color="zzz"] .container{ background: rgba(232, 232, 236, 0.85); border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); } /* ===== CARDS ===== */ /* Border radius: 10-16px, sharp short shadows */ html[data-color="zzz"] .card{ border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(30, 30, 38, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html[data-color="zzz"] .card:hover{ border-color: rgba(255, 77, 0, 0.4); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 77, 0, 0.2); } html[data-theme="light"][data-color="zzz"] .card{ background: rgba(255, 255, 255, 0.8); border-color: rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } html[data-theme="light"][data-color="zzz"] .card:hover{ border-color: rgba(255, 77, 0, 0.5); box-shadow: 0 4px 16px rgba(255, 77, 0, 0.15); } /* Themed cards - Orange gradient with glow */ html[data-color="zzz"] .themed-card::before{ background: linear-gradient(135deg, rgba(255, 77, 0, 0.95), rgba(255, 100, 30, 0.9)); } html[data-color="zzz"] .themed-card{ color: #F5F5F7; border: 1px solid #FF4D00; border-radius: 12px; box-shadow: 0 4px 16px rgba(255, 77, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); } html[data-color="zzz"] .themed-card .label, html[data-color="zzz"] .themed-card .muted, html[data-color="zzz"] .themed-card #currentName, html[data-color="zzz"] .themed-card #currentRoom, html[data-color="zzz"] .themed-card #currentTimeRange, html[data-color="zzz"] .themed-card #elapsedOut, html[data-color="zzz"] .themed-card #leftOut, html[data-color="zzz"] .themed-card #nextName, html[data-color="zzz"] .themed-card #nextRoom, html[data-color="zzz"] .themed-card #nextTimeRange, html[data-color="zzz"] .themed-card #nextInOut, html[data-color="zzz"] .themed-card #untilOut{ color: rgba(255, 255, 255, 0.95) !important; } /* ===== PILLS ===== */ html[data-color="zzz"] .pill{ border: 1px solid rgba(255,255,255,0.15); background: rgba(30, 30, 38, 0.8); color: #B3B3C2; font-weight: 600; border-radius: 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] .pill:hover{ border-color: #00E5FF; color: #00E5FF; box-shadow: 0 0 12px rgba(0, 229, 255, 0.3); } html[data-theme="light"][data-color="zzz"] .pill{ background: rgba(0, 0, 0, 0.05); border-color: rgba(0,0,0,0.15); color: #3A3A4A; } /* ===== PROGRESS BAR ===== */ html[data-color="zzz"] .progress{ background: linear-gradient(90deg, #FF4D00, #FF6B2B); box-shadow: 0 0 10px rgba(255, 77, 0, 0.5); border-radius: 4px; } html[data-color="zzz"] .progress-wrap{ background: rgba(30, 30, 38, 0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; } /* ===== BUTTONS ===== */ /* Primary: Solid accent, dark/white text */ html[data-color="zzz"] .btn{ background: #FF4D00; color: #0A0A0D; border: none; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 8px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(255, 77, 0, 0.3); } html[data-color="zzz"] .btn:hover{ background: #FF6B2B; transform: scale(0.98); box-shadow: 0 4px 16px rgba(255, 77, 0, 0.4), 0 0 20px rgba(255, 77, 0, 0.3); } html[data-color="zzz"] .btn:active{ transform: scale(0.96); } /* Icon buttons - Snap highlight + color shift */ html[data-color="zzz"] .icon-btn{ border: 1px solid transparent; border-radius: 8px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] .icon-btn:hover{ background: rgba(255, 77, 0, 0.15); border-color: rgba(255, 77, 0, 0.4); transform: translateY(-2px); box-shadow: 0 0 12px rgba(255, 77, 0, 0.2); } html[data-color="zzz"] .icon-btn:hover .icon{ filter: drop-shadow(0 0 4px rgba(255, 77, 0, 0.6)); } /* ===== STATUS BADGES ===== */ html[data-color="zzz"] .status--current{ background: #FF4D00; color: #0A0A0D; border: none; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; box-shadow: 0 0 12px rgba(255, 77, 0, 0.4); } html[data-color="zzz"] .status--next{ background: rgba(0, 229, 255, 0.15); color: #00E5FF; border: 1px solid rgba(0, 229, 255, 0.4); font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; border-radius: 6px; } html[data-color="zzz"] .status--done{ background: rgba(122, 122, 143, 0.2); color: #7A7A8F; text-decoration: line-through; } /* ===== CHIPS ===== */ html[data-color="zzz"] .chip{ border: 1px solid rgba(255,255,255,0.12); font-weight: 500; border-radius: 8px; background: rgba(30, 30, 38, 0.6); transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] .chip[aria-pressed="true"]{ background: rgba(255, 77, 0, 0.2); border-color: #FF4D00; color: #FF4D00; box-shadow: 0 0 10px rgba(255, 77, 0, 0.2); } html[data-color="zzz"] .chip:hover{ border-color: #00E5FF; color: #00E5FF; transform: translateY(-1px); box-shadow: 0 0 8px rgba(0, 229, 255, 0.2); } html[data-theme="light"][data-color="zzz"] .chip{ background: rgba(255, 255, 255, 0.8); border-color: rgba(0,0,0,0.15); } /* ===== SCHEDULE TABLE ===== */ /* Hard dividers, glowing header row */ html[data-color="zzz"] .schedule th{ border-bottom: 2px solid #FF4D00; color: #FF4D00; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: linear-gradient(180deg, rgba(255, 77, 0, 0.1), transparent); text-shadow: 0 0 10px rgba(255, 77, 0, 0.3); } html[data-color="zzz"] .schedule tr.active{ background: linear-gradient(90deg, rgba(255, 77, 0, 0.25), rgba(255, 77, 0, 0.1), transparent); border-left: 3px solid #FF4D00; box-shadow: inset 0 0 20px rgba(255, 77, 0, 0.1); } html[data-color="zzz"] .schedule td{ border-bottom: 1px solid rgba(255,255,255,0.06); } html[data-color="zzz"] .schedule tbody tr{ background: rgba(20, 20, 26, 0.4); transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] .schedule tbody tr:hover{ background: rgba(255, 77, 0, 0.08); box-shadow: inset 0 0 10px rgba(255, 77, 0, 0.05); } html[data-theme="light"][data-color="zzz"] .schedule th{ color: #CC3D00; text-shadow: none; } html[data-theme="light"][data-color="zzz"] .schedule td{ border-bottom-color: rgba(0,0,0,0.08); } /* ===== DIALOGS/MODALS ===== */ html[data-color="zzz"] dialog{ border: 1px solid rgba(255, 77, 0, 0.3); border-radius: 16px; background: rgba(14, 14, 18, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 77, 0, 0.2), 0 0 40px rgba(255, 77, 0, 0.1); } html[data-theme="light"][data-color="zzz"] dialog{ background: rgba(248, 248, 252, 0.95); border-color: rgba(255, 77, 0, 0.2); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); } html[data-color="zzz"] dialog::backdrop{ background: rgba(10, 10, 13, 0.9); backdrop-filter: blur(4px); } html[data-color="zzz"] .modal-header{ border-bottom: 1px solid rgba(255, 77, 0, 0.3); } html[data-color="zzz"] .modal-header strong{ font-family: 'Oswald', sans-serif; color: #FF4D00; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 10px rgba(255, 77, 0, 0.3); } /* ===== ONBOARDING ===== */ html[data-color="zzz"] .onboard-title{ font-family: 'Oswald', sans-serif !important; color: #FF4D00 !important; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 20px rgba(255, 77, 0, 0.4); } html[data-color="zzz"] .onboard-card{ border: 1px solid rgba(255, 77, 0, 0.3); background: rgba(14, 14, 18, 0.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 77, 0, 0.15); border-radius: 16px; } html[data-theme="light"][data-color="zzz"] .onboard-card{ background: rgba(248, 248, 252, 0.9); } /* ===== INPUTS ===== */ /* Dark fill, neon focus ring */ html[data-color="zzz"] input, html[data-color="zzz"] select, html[data-color="zzz"] textarea{ border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(20, 20, 26, 0.8); color: #F5F5F7; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] input:focus, html[data-color="zzz"] select:focus, html[data-color="zzz"] textarea:focus{ border-color: #00E5FF; outline: none; box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.2), 0 0 15px rgba(0, 229, 255, 0.15); } html[data-theme="light"][data-color="zzz"] input, html[data-theme="light"][data-color="zzz"] select, html[data-theme="light"][data-color="zzz"] textarea{ background: rgba(255, 255, 255, 0.9); border-color: rgba(0,0,0,0.15); color: #0A0A0D; } html[data-theme="light"][data-color="zzz"] input:focus, html[data-theme="light"][data-color="zzz"] select:focus, html[data-theme="light"][data-color="zzz"] textarea:focus{ border-color: #00B8CC; box-shadow: 0 0 0 3px rgba(0, 184, 204, 0.15); } /* ===== TABS ===== */ html[data-color="zzz"] .tabs{ border-bottom: 1px solid rgba(255,255,255,0.1); } html[data-color="zzz"] .tab{ color: #B3B3C2; font-weight: 500; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] .tab:hover{ color: #00E5FF; } html[data-color="zzz"] .tab[aria-selected="true"]{ color: #FF4D00; border-bottom: 2px solid #FF4D00; text-shadow: 0 0 8px rgba(255, 77, 0, 0.3); } /* ===== QUICK ACTIONS ===== */ html[data-color="zzz"] .quick-action{ border: 1px solid rgba(255,255,255,0.12); background: rgba(30, 30, 38, 0.6); color: #B3B3C2; font-weight: 500; border-radius: 8px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] .quick-action:hover{ background: rgba(0, 229, 255, 0.1); border-color: #00E5FF; color: #00E5FF; transform: translateY(-1px); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); } html[data-color="zzz"] .quick-action.danger{ border-color: rgba(168, 85, 247, 0.4); color: #A855F7; } html[data-color="zzz"] .quick-action.danger:hover{ background: rgba(168, 85, 247, 0.15); border-color: #A855F7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); } /* ===== SCROLLBAR ===== */ html[data-color="zzz"] ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #FF4D00, #CC3D00); border-radius: 4px; } html[data-color="zzz"] ::-webkit-scrollbar-track{ background: rgba(20, 20, 26, 0.6); } /* ===== KIOSK MODE ===== */ html[data-color="zzz"] .kiosk-modal-content{ border: 1px solid rgba(255, 77, 0, 0.4); background: rgba(14, 14, 18, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 16px; box-shadow: 0 0 60px rgba(255, 77, 0, 0.2); } html[data-color="zzz"] .kiosk-modal-title{ font-family: 'Oswald', sans-serif; color: #FF4D00; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 15px rgba(255, 77, 0, 0.4); } html[data-color="zzz"] .kiosk-key{ background: rgba(30, 30, 38, 0.9); border: 1px solid rgba(255,255,255,0.12); color: #F5F5F7; font-family: 'JetBrains Mono', monospace; font-weight: 500; border-radius: 10px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] .kiosk-key:hover{ background: #FF4D00; border-color: #FF4D00; color: #0A0A0D; transform: scale(0.98); box-shadow: 0 0 15px rgba(255, 77, 0, 0.4); } html[data-color="zzz"] .kiosk-pin-dot{ background: rgba(255,255,255,0.1); border: 2px solid rgba(255, 77, 0, 0.4); border-radius: 50%; } html[data-color="zzz"] .kiosk-pin-dot.filled{ background: #FF4D00; border-color: #FF4D00; box-shadow: 0 0 10px rgba(255, 77, 0, 0.5); } /* ===== EDITOR ===== */ html[data-color="zzz"] .blocks-container{ border: 1px dashed rgba(255, 77, 0, 0.3); background: rgba(20, 20, 26, 0.5); border-radius: 12px; } /* ===== DAY OVER MESSAGE ===== */ html[data-color="zzz"] .dayover-message{ border: 1px solid rgba(255, 77, 0, 0.4); background: rgba(14, 14, 18, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 16px; box-shadow: 0 0 30px rgba(255, 77, 0, 0.15); } /* ===== LINKS ===== */ /* Cyan or orange, no underline */ html[data-color="zzz"] a{ color: #00E5FF; text-decoration: none; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="zzz"] a:hover{ color: #FF4D00; text-shadow: 0 0 8px rgba(255, 77, 0, 0.4); } /* ===== HELP TEXT ===== */ html[data-color="zzz"] .help{ color: #7A7A8F; } /* ===== KBD ===== */ html[data-color="zzz"] .kbd{ background: rgba(30, 30, 38, 0.9); border: 1px solid rgba(255,255,255,0.15); color: #00E5FF; font-family: 'JetBrains Mono', monospace; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } /* ===== SELECTION ===== */ html[data-color="zzz"] ::selection{ background: rgba(255, 77, 0, 0.4); color: #F5F5F7; } /* ===== MUTED TEXT COLORS ===== */ html[data-theme="dark"][data-color="zzz"] .label, html[data-theme="dark"][data-color="zzz"] .muted, html[data-theme="dark"][data-color="zzz"] #dateOut{ color: #B3B3C2; } html[data-theme="dark"][data-color="zzz"] #schoolState{ color: #00E5FF; border-color: rgba(0, 229, 255, 0.3); } html[data-theme="light"][data-color="zzz"] .label, html[data-theme="light"][data-color="zzz"] .muted, html[data-theme="light"][data-color="zzz"] #dateOut{ color: #5A5A6F; } /* ===== DIAGONAL ACCENT LINE ===== */ html[data-color="zzz"] .container::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #A855F7, #00E5FF, transparent); opacity: 0.5; } /* ===== MICRO-ANIMATIONS ===== */ @keyframes zzz-glow-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } html[data-color="zzz"] .themed-card{ animation: zzz-glow-pulse 3s ease-in-out infinite; } /* Neon edge glow on icon hover */ html[data-color="zzz"] .icon-btn:hover .icon{ filter: brightness(1.1) drop-shadow(0 0 3px #FF4D00) drop-shadow(0 0 6px rgba(255, 77, 0, 0.4)); transition: filter 120ms cubic-bezier(0.4, 0, 0.2, 1); }