/** * ============================================================ * JUJUTSU KAISEN THEME - Cursed Energy / Dark / Intense * ============================================================ * Theme ID: jjk * Design: Deep purples, cursed energy blues, blood red accents, intense atmosphere * * HOW THIS THEME FILE WORKS: * -------------------------- * 1. All styles use html[data-color="jjk"] selector * 2. Dark/light variants use html[data-theme="dark"][data-color="jjk"] * 3. When user selects this theme: * - applyColor('jjk') is called (js/theme/colors.js) * - Sets data-color="jjk" on element * - These CSS selectors activate * ============================================================ */ /* Fonts - Bold modern fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); html[data-color="jjk"]{ --brand-h:260; } /* ===== CORE COLOR SYSTEM ===== */ /* Dark Theme (Primary - JJK is dark and intense) */ html[data-theme="dark"][data-color="jjk"]{ --bg: #0C0A14; /* Deep void */ --bg-primary: #0C0A14; --bg-secondary: #12101C; /* Cursed purple-black */ --bg-tertiary: #1A1626; /* Depth layers */ --card: rgba(18, 16, 28, 0.9); --text: #F0EBF8; /* Cool white */ --text-primary: #F0EBF8; --text-secondary: #B8A8D0; --muted: #7A6898; --line: rgba(106, 90, 205, 0.15); --surface-2: #12101C; --surface-3: #1A1626; --accent-primary: #6A5ACD; /* Cursed Energy Purple */ --accent-secondary: #BB3D38; /* Sukuna Red */ --accent-tertiary: #00B4D8; /* Domain Expansion Blue */ --border-subtle: rgba(106, 90, 205, 0.2); --border-strong: #6A5ACD; } /* Light Theme Variant */ html[data-theme="light"][data-color="jjk"]{ --bg: #F8F6FC; --bg-primary: #F8F6FC; --bg-secondary: #F0ECF8; --bg-tertiary: #E8E0F4; --card: rgba(255, 255, 255, 0.92); --text: #1A1626; --text-primary: #1A1626; --text-secondary: #3A2850; --muted: #6A5880; --line: rgba(106, 90, 205, 0.15); --surface-2: #F0ECF8; --surface-3: #E8E0F4; --accent-primary: #5A4ABD; --accent-secondary: #A03330; --accent-tertiary: #0096B4; --border-subtle: rgba(106, 90, 205, 0.15); --border-strong: #5A4ABD; } /* ===== TYPOGRAPHY ===== */ /* Headings: Poppins - Bold, modern */ html[data-color="jjk"] h1, html[data-color="jjk"] h2, html[data-color="jjk"] h3, html[data-color="jjk"] .onboard-title, html[data-color="jjk"] .modal-header strong, html[data-color="jjk"] .kiosk-modal-title{ font-family: 'Poppins', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1; } /* Body: Space Grotesk */ html[data-color="jjk"], html[data-color="jjk"] body{ font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; } /* Mono: JetBrains Mono */ html[data-color="jjk"] .clock, html[data-color="jjk"] #clockOut, html[data-color="jjk"] .countdown, html[data-color="jjk"] #elapsedOut, html[data-color="jjk"] #leftOut, html[data-color="jjk"] #nextInOut, html[data-color="jjk"] code, html[data-color="jjk"] .kbd{ font-family: 'JetBrains Mono', monospace !important; font-weight: 500; } /* Clock - Cursed energy glow */ html[data-theme="dark"][data-color="jjk"] #clockOut{ color: #6A5ACD; text-shadow: 0 0 10px rgba(106, 90, 205, 0.8), 0 0 20px rgba(106, 90, 205, 0.5), 0 0 40px rgba(106, 90, 205, 0.3), 0 0 60px rgba(0, 180, 216, 0.2); font-family: 'Poppins', sans-serif !important; font-weight: 700; letter-spacing: 0.04em; animation: jjk-pulse 3s ease-in-out infinite; } @keyframes jjk-pulse { 0%, 100% { text-shadow: 0 0 10px rgba(106, 90, 205, 0.8), 0 0 20px rgba(106, 90, 205, 0.5), 0 0 40px rgba(106, 90, 205, 0.3); } 50% { text-shadow: 0 0 15px rgba(106, 90, 205, 1), 0 0 30px rgba(106, 90, 205, 0.7), 0 0 60px rgba(106, 90, 205, 0.4), 0 0 80px rgba(187, 61, 56, 0.3); } } html[data-theme="light"][data-color="jjk"] #clockOut{ color: #5A4ABD; text-shadow: 0 2px 10px rgba(106, 90, 205, 0.4); font-family: 'Poppins', sans-serif !important; font-weight: 700; } /* ===== BACKGROUND & LAYOUT ===== */ html[data-color="jjk"] body{ background: linear-gradient(135deg, rgba(12, 10, 20, 0.9) 0%, rgba(18, 16, 28, 0.85) 50%, rgba(26, 22, 38, 0.9) 100% ), url('../backrounds/jjk-backround.webp'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-theme="light"][data-color="jjk"] body{ background: linear-gradient(135deg, rgba(248, 246, 252, 0.92) 0%, rgba(240, 236, 248, 0.88) 50%, rgba(248, 246, 252, 0.92) 100% ), url('../backrounds/jjk-backround.webp'); background-size: cover; background-position: center; background-attachment: fixed; } /* Container - Domain Expansion style */ html[data-color="jjk"] .container{ border: 1px solid rgba(106, 90, 205, 0.3); border-radius: 12px; background: rgba(18, 16, 28, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(106, 90, 205, 0.1), inset 0 0 80px rgba(106, 90, 205, 0.03); position: relative; overflow: hidden; } html[data-color="jjk"] .container::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #6A5ACD, #00B4D8, #6A5ACD, transparent); opacity: 0.9; } html[data-theme="light"][data-color="jjk"] .container{ background: rgba(255, 255, 255, 0.92); border-color: rgba(106, 90, 205, 0.2); box-shadow: 0 4px 30px rgba(106, 90, 205, 0.1); } /* ===== CARDS ===== */ html[data-color="jjk"] .card{ border: 1px solid rgba(106, 90, 205, 0.2); border-radius: 10px; background: rgba(26, 22, 38, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } html[data-color="jjk"] .card:hover{ border-color: rgba(106, 90, 205, 0.5); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(106, 90, 205, 0.15); } html[data-theme="light"][data-color="jjk"] .card{ background: rgba(255, 255, 255, 0.9); border-color: rgba(106, 90, 205, 0.15); box-shadow: 0 2px 10px rgba(106, 90, 205, 0.08); } html[data-theme="light"][data-color="jjk"] .card:hover{ border-color: rgba(106, 90, 205, 0.4); box-shadow: 0 6px 20px rgba(106, 90, 205, 0.12); } /* Themed cards - Cursed energy gradient */ html[data-color="jjk"] .themed-card::before{ background: linear-gradient(135deg, rgba(106, 90, 205, 0.95), rgba(90, 74, 189, 0.9)); } html[data-color="jjk"] .themed-card{ color: #F0EBF8; border: 1px solid rgba(106, 90, 205, 0.6); border-radius: 10px; box-shadow: 0 4px 20px rgba(106, 90, 205, 0.3), 0 0 40px rgba(106, 90, 205, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); } html[data-color="jjk"] .themed-card .label, html[data-color="jjk"] .themed-card .muted, html[data-color="jjk"] .themed-card #currentName, html[data-color="jjk"] .themed-card #currentRoom, html[data-color="jjk"] .themed-card #currentTimeRange, html[data-color="jjk"] .themed-card #elapsedOut, html[data-color="jjk"] .themed-card #leftOut, html[data-color="jjk"] .themed-card #nextName, html[data-color="jjk"] .themed-card #nextRoom, html[data-color="jjk"] .themed-card #nextTimeRange, html[data-color="jjk"] .themed-card #nextInOut, html[data-color="jjk"] .themed-card #untilOut{ color: rgba(255, 255, 255, 0.95) !important; } /* ===== PILLS ===== */ html[data-color="jjk"] .pill{ border: 1px solid rgba(106, 90, 205, 0.25); background: rgba(26, 22, 38, 0.8); color: #B8A8D0; font-weight: 600; border-radius: 6px; transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] .pill:hover{ border-color: #00B4D8; color: #00B4D8; box-shadow: 0 0 15px rgba(0, 180, 216, 0.25); } html[data-theme="light"][data-color="jjk"] .pill{ background: rgba(255, 255, 255, 0.85); border-color: rgba(106, 90, 205, 0.2); color: #3A2850; } /* ===== PROGRESS BAR ===== */ html[data-color="jjk"] .progress{ background: linear-gradient(90deg, #6A5ACD, #8B7AD8, #00B4D8); box-shadow: 0 0 15px rgba(106, 90, 205, 0.5); border-radius: 4px; } html[data-color="jjk"] .progress-wrap{ background: rgba(26, 22, 38, 0.6); border: 1px solid rgba(106, 90, 205, 0.2); border-radius: 6px; } /* ===== BUTTONS ===== */ html[data-color="jjk"] .btn{ background: linear-gradient(135deg, #6A5ACD, #5A4ABD); color: #FFFFFF; border: none; font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 8px; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(106, 90, 205, 0.35); } html[data-color="jjk"] .btn:hover{ background: linear-gradient(135deg, #7B6BD8, #6A5ACD); transform: translateY(-2px); box-shadow: 0 6px 25px rgba(106, 90, 205, 0.45), 0 0 20px rgba(106, 90, 205, 0.25); } html[data-color="jjk"] .btn:active{ transform: translateY(0); box-shadow: 0 2px 10px rgba(106, 90, 205, 0.3); } /* Icon buttons */ html[data-color="jjk"] .icon-btn{ border: 1px solid transparent; border-radius: 8px; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] .icon-btn:hover{ background: rgba(106, 90, 205, 0.15); border-color: rgba(106, 90, 205, 0.4); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(106, 90, 205, 0.2); } html[data-color="jjk"] .icon-btn:hover .icon{ filter: drop-shadow(0 0 6px rgba(106, 90, 205, 0.7)); } /* ===== STATUS BADGES ===== */ html[data-color="jjk"] .status--current{ background: linear-gradient(135deg, #6A5ACD, #5A4ABD); color: #FFFFFF; border: none; font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 6px; box-shadow: 0 0 15px rgba(106, 90, 205, 0.4); } html[data-color="jjk"] .status--next{ background: rgba(0, 180, 216, 0.15); color: #00B4D8; border: 1px solid rgba(0, 180, 216, 0.4); font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase; border-radius: 6px; } html[data-color="jjk"] .status--done{ background: rgba(122, 104, 152, 0.2); color: #7A6898; text-decoration: line-through; } /* ===== CHIPS ===== */ html[data-color="jjk"] .chip{ border: 1px solid rgba(106, 90, 205, 0.2); font-weight: 500; border-radius: 6px; background: rgba(26, 22, 38, 0.6); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] .chip[aria-pressed="true"]{ background: rgba(106, 90, 205, 0.2); border-color: #6A5ACD; color: #6A5ACD; box-shadow: 0 0 12px rgba(106, 90, 205, 0.2); } html[data-color="jjk"] .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="jjk"] .chip{ background: rgba(255, 255, 255, 0.85); border-color: rgba(106, 90, 205, 0.15); } /* ===== SCHEDULE TABLE ===== */ html[data-color="jjk"] .schedule th{ border-bottom: 2px solid #6A5ACD; color: #6A5ACD; font-family: 'Poppins', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: linear-gradient(180deg, rgba(106, 90, 205, 0.1), transparent); text-shadow: 0 0 15px rgba(106, 90, 205, 0.3); } html[data-color="jjk"] .schedule tr.active{ background: linear-gradient(90deg, rgba(106, 90, 205, 0.25), rgba(106, 90, 205, 0.1), transparent); border-left: 3px solid #6A5ACD; box-shadow: inset 0 0 25px rgba(106, 90, 205, 0.08); } html[data-color="jjk"] .schedule td{ border-bottom: 1px solid rgba(106, 90, 205, 0.08); } html[data-color="jjk"] .schedule tbody tr{ background: rgba(18, 16, 28, 0.4); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] .schedule tbody tr:hover{ background: rgba(106, 90, 205, 0.08); } html[data-theme="light"][data-color="jjk"] .schedule th{ color: #5A4ABD; text-shadow: none; } html[data-theme="light"][data-color="jjk"] .schedule td{ border-bottom-color: rgba(106, 90, 205, 0.1); } /* ===== DIALOGS/MODALS ===== */ html[data-color="jjk"] dialog{ border: 1px solid rgba(106, 90, 205, 0.35); border-radius: 14px; background: rgba(12, 10, 20, 0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(106, 90, 205, 0.15), 0 0 60px rgba(106, 90, 205, 0.1); } html[data-theme="light"][data-color="jjk"] dialog{ background: rgba(255, 255, 255, 0.96); border-color: rgba(106, 90, 205, 0.2); box-shadow: 0 20px 50px rgba(106, 90, 205, 0.15); } html[data-color="jjk"] dialog::backdrop{ background: rgba(12, 10, 20, 0.92); backdrop-filter: blur(6px); } html[data-color="jjk"] .modal-header{ border-bottom: 1px solid rgba(106, 90, 205, 0.3); } html[data-color="jjk"] .modal-header strong{ font-family: 'Poppins', sans-serif; color: #6A5ACD; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 15px rgba(106, 90, 205, 0.3); } /* ===== ONBOARDING ===== */ html[data-color="jjk"] .onboard-title{ font-family: 'Poppins', sans-serif !important; color: #6A5ACD !important; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 25px rgba(106, 90, 205, 0.6), 0 0 50px rgba(106, 90, 205, 0.3); } html[data-color="jjk"] .onboard-card{ border: 1px solid rgba(106, 90, 205, 0.35); background: rgba(12, 10, 20, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(106, 90, 205, 0.15); border-radius: 14px; } html[data-theme="light"][data-color="jjk"] .onboard-card{ background: rgba(255, 255, 255, 0.94); } /* ===== INPUTS ===== */ html[data-color="jjk"] input, html[data-color="jjk"] select, html[data-color="jjk"] textarea{ border: 1px solid rgba(106, 90, 205, 0.2); border-radius: 8px; background: rgba(18, 16, 28, 0.8); color: #F0EBF8; transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] input:focus, html[data-color="jjk"] select:focus, html[data-color="jjk"] textarea:focus{ border-color: #00B4D8; outline: none; box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15), 0 0 20px rgba(0, 180, 216, 0.1); } html[data-theme="light"][data-color="jjk"] input, html[data-theme="light"][data-color="jjk"] select, html[data-theme="light"][data-color="jjk"] textarea{ background: rgba(255, 255, 255, 0.9); border-color: rgba(106, 90, 205, 0.2); color: #1A1626; } html[data-theme="light"][data-color="jjk"] input:focus, html[data-theme="light"][data-color="jjk"] select:focus, html[data-theme="light"][data-color="jjk"] textarea:focus{ border-color: #0096B4; box-shadow: 0 0 0 3px rgba(0, 150, 180, 0.12); } /* ===== TABS ===== */ html[data-color="jjk"] .tabs{ border-bottom: 1px solid rgba(106, 90, 205, 0.2); } html[data-color="jjk"] .tab{ color: #B8A8D0; font-weight: 500; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] .tab:hover{ color: #00B4D8; } html[data-color="jjk"] .tab[aria-selected="true"]{ color: #6A5ACD; border-bottom: 2px solid #6A5ACD; text-shadow: 0 0 10px rgba(106, 90, 205, 0.3); } /* ===== QUICK ACTIONS ===== */ html[data-color="jjk"] .quick-action{ border: 1px solid rgba(106, 90, 205, 0.2); background: rgba(26, 22, 38, 0.6); color: #B8A8D0; font-weight: 500; border-radius: 8px; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] .quick-action:hover{ background: rgba(0, 180, 216, 0.1); border-color: #00B4D8; color: #00B4D8; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0, 180, 216, 0.15); } html[data-color="jjk"] .quick-action.danger{ border-color: rgba(187, 61, 56, 0.4); color: #BB3D38; } html[data-color="jjk"] .quick-action.danger:hover{ background: rgba(187, 61, 56, 0.12); border-color: #BB3D38; box-shadow: 0 4px 15px rgba(187, 61, 56, 0.15); } /* ===== SCROLLBAR ===== */ html[data-color="jjk"] ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #6A5ACD, #5A4ABD); border-radius: 4px; } html[data-color="jjk"] ::-webkit-scrollbar-track{ background: rgba(18, 16, 28, 0.6); } /* ===== KIOSK MODE ===== */ html[data-color="jjk"] .kiosk-modal-content{ border: 1px solid rgba(106, 90, 205, 0.4); background: rgba(12, 10, 20, 0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 14px; box-shadow: 0 0 80px rgba(106, 90, 205, 0.2); } html[data-color="jjk"] .kiosk-modal-title{ font-family: 'Poppins', sans-serif; color: #6A5ACD; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 20px rgba(106, 90, 205, 0.4); } html[data-color="jjk"] .kiosk-key{ background: rgba(26, 22, 38, 0.9); border: 1px solid rgba(106, 90, 205, 0.25); color: #F0EBF8; font-family: 'JetBrains Mono', monospace; font-weight: 500; border-radius: 10px; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] .kiosk-key:hover{ background: linear-gradient(135deg, #6A5ACD, #5A4ABD); border-color: #6A5ACD; color: #FFFFFF; transform: scale(0.98); box-shadow: 0 0 20px rgba(106, 90, 205, 0.4); } html[data-color="jjk"] .kiosk-pin-dot{ background: rgba(106, 90, 205, 0.1); border: 2px solid rgba(106, 90, 205, 0.4); border-radius: 50%; } html[data-color="jjk"] .kiosk-pin-dot.filled{ background: #6A5ACD; border-color: #6A5ACD; box-shadow: 0 0 15px rgba(106, 90, 205, 0.5); } /* ===== EDITOR ===== */ html[data-color="jjk"] .blocks-container{ border: 1px dashed rgba(106, 90, 205, 0.35); background: rgba(18, 16, 28, 0.5); border-radius: 10px; } /* ===== DAY OVER MESSAGE ===== */ html[data-color="jjk"] .dayover-message{ border: 1px solid rgba(106, 90, 205, 0.4); background: rgba(12, 10, 20, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 14px; box-shadow: 0 0 50px rgba(106, 90, 205, 0.15); } /* ===== LINKS ===== */ html[data-color="jjk"] a{ color: #00B4D8; text-decoration: none; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jjk"] a:hover{ color: #6A5ACD; text-shadow: 0 0 10px rgba(106, 90, 205, 0.4); } /* ===== HELP TEXT ===== */ html[data-color="jjk"] .help{ color: #7A6898; } /* ===== KBD ===== */ html[data-color="jjk"] .kbd{ background: rgba(26, 22, 38, 0.9); border: 1px solid rgba(106, 90, 205, 0.25); color: #00B4D8; font-family: 'JetBrains Mono', monospace; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* ===== SELECTION ===== */ html[data-color="jjk"] ::selection{ background: rgba(106, 90, 205, 0.45); color: #FFFFFF; } /* ===== MUTED TEXT COLORS ===== */ html[data-theme="dark"][data-color="jjk"] .label, html[data-theme="dark"][data-color="jjk"] .muted, html[data-theme="dark"][data-color="jjk"] #dateOut{ color: #B8A8D0; } html[data-theme="dark"][data-color="jjk"] #schoolState{ color: #00B4D8; border-color: rgba(0, 180, 216, 0.35); } html[data-theme="light"][data-color="jjk"] .label, html[data-theme="light"][data-color="jjk"] .muted, html[data-theme="light"][data-color="jjk"] #dateOut{ color: #6A5880; } /* ===== BOTTOM ACCENT LINE ===== */ html[data-color="jjk"] .container::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #00B4D8, #6A5ACD, #00B4D8, transparent); opacity: 0.7; } /* ===== CURSED ENERGY EFFECT ===== */ @keyframes jjk-energy { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } html[data-theme="dark"][data-color="jjk"]::before{ content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 80%, rgba(106, 90, 205, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(0, 180, 216, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(187, 61, 56, 0.03) 0%, transparent 60%); z-index: 9999; animation: jjk-energy 6s ease-in-out infinite; }