/** * ============================================================ * JOJO'S BIZARRE ADVENTURE THEME - Bold / Dramatic / Menacing * ============================================================ * Theme ID: jojo * Design: Vibrant pinks, golds, dramatic contrast, manga-style bold aesthetics * * HOW THIS THEME FILE WORKS: * -------------------------- * 1. All styles use html[data-color="jojo"] selector * 2. Dark/light variants use html[data-theme="dark"][data-color="jojo"] * 3. When user selects this theme: * - applyColor('jojo') is called (js/theme/colors.js) * - Sets data-color="jojo" on element * - These CSS selectors activate * ============================================================ */ /* Fonts - Bold dramatic fonts for headings */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@400;500;700&family=Fira+Code:wght@400;500&display=swap'); html[data-color="jojo"]{ --brand-h:330; } /* ===== CORE COLOR SYSTEM ===== */ /* Dark Theme (Primary - JoJo is bold and dramatic) */ html[data-theme="dark"][data-color="jojo"]{ --bg: #0D0A12; /* Deep purple-black */ --bg-primary: #0D0A12; --bg-secondary: #15101E; /* Panel purple */ --bg-tertiary: #1E1628; /* Depth layers */ --card: rgba(21, 16, 30, 0.9); --text: #F8F0F8; /* Warm white with pink tint */ --text-primary: #F8F0F8; --text-secondary: #C8B0D0; --muted: #8A7098; --line: rgba(235, 0, 139, 0.15); --surface-2: #15101E; --surface-3: #1E1628; --accent-primary: #EB008B; /* JoJo Pink/Magenta */ --accent-secondary: #FFD700; /* Gold */ --accent-tertiary: #00C8FF; /* Cyan accent */ --border-subtle: rgba(235, 0, 139, 0.2); --border-strong: #EB008B; } /* Light Theme Variant */ html[data-theme="light"][data-color="jojo"]{ --bg: #FFF5FA; --bg-primary: #FFF5FA; --bg-secondary: #FFE8F2; --bg-tertiary: #FFD6E8; --card: rgba(255, 255, 255, 0.9); --text: #1A0D14; --text-primary: #1A0D14; --text-secondary: #4A2838; --muted: #7A5068; --line: rgba(235, 0, 139, 0.15); --surface-2: #FFE8F2; --surface-3: #FFD6E8; --accent-primary: #D6007E; --accent-secondary: #C9A800; --accent-tertiary: #0096CC; --border-subtle: rgba(235, 0, 139, 0.15); --border-strong: #D6007E; } /* ===== TYPOGRAPHY ===== */ /* Headings: Bebas Neue - Bold, dramatic, uppercase */ html[data-color="jojo"] h1, html[data-color="jojo"] h2, html[data-color="jojo"] h3, html[data-color="jojo"] .onboard-title, html[data-color="jojo"] .modal-header strong, html[data-color="jojo"] .kiosk-modal-title{ font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.0; } /* Body: Roboto Condensed */ html[data-color="jojo"], html[data-color="jojo"] body{ font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, sans-serif; } /* Mono: Fira Code */ html[data-color="jojo"] .clock, html[data-color="jojo"] #clockOut, html[data-color="jojo"] .countdown, html[data-color="jojo"] #elapsedOut, html[data-color="jojo"] #leftOut, html[data-color="jojo"] #nextInOut, html[data-color="jojo"] code, html[data-color="jojo"] .kbd{ font-family: 'Fira Code', monospace !important; font-weight: 500; } /* Clock - Bold pink with gold glow */ html[data-theme="dark"][data-color="jojo"] #clockOut{ color: #EB008B; text-shadow: 0 0 10px rgba(235, 0, 139, 0.8), 0 0 20px rgba(235, 0, 139, 0.5), 0 0 40px rgba(235, 0, 139, 0.3), 2px 2px 0 #FFD700; font-family: 'Bebas Neue', sans-serif !important; font-weight: 400; letter-spacing: 0.08em; } html[data-theme="light"][data-color="jojo"] #clockOut{ color: #D6007E; text-shadow: 2px 2px 0 #C9A800, 0 2px 10px rgba(235, 0, 139, 0.3); font-family: 'Bebas Neue', sans-serif !important; font-weight: 400; } /* ===== BACKGROUND & LAYOUT ===== */ html[data-color="jojo"] body{ background: linear-gradient(135deg, rgba(13, 10, 18, 0.88) 0%, rgba(21, 16, 30, 0.85) 50%, rgba(30, 22, 40, 0.88) 100% ), url('../backrounds/jojo-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-theme="light"][data-color="jojo"] body{ background: linear-gradient(135deg, rgba(255, 245, 250, 0.92) 0%, rgba(255, 232, 242, 0.88) 50%, rgba(255, 245, 250, 0.92) 100% ), url('../backrounds/jojo-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } /* Container - Manga panel style with bold borders */ html[data-color="jojo"] .container{ border: 3px solid rgba(235, 0, 139, 0.4); border-radius: 4px; background: rgba(21, 16, 30, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6), 8px 8px 0 rgba(255, 215, 0, 0.3), inset 0 0 60px rgba(235, 0, 139, 0.05); position: relative; } html[data-color="jojo"] .container::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #EB008B, #FFD700, #00C8FF, #FFD700, #EB008B); opacity: 1; } html[data-theme="light"][data-color="jojo"] .container{ background: rgba(255, 255, 255, 0.92); border-color: rgba(235, 0, 139, 0.3); box-shadow: 6px 6px 0 rgba(235, 0, 139, 0.2); } /* ===== CARDS ===== */ html[data-color="jojo"] .card{ border: 2px solid rgba(235, 0, 139, 0.25); border-radius: 2px; background: rgba(30, 22, 40, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.2); } html[data-color="jojo"] .card:hover{ border-color: #EB008B; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(255, 215, 0, 0.4), 0 0 20px rgba(235, 0, 139, 0.2); } html[data-theme="light"][data-color="jojo"] .card{ background: rgba(255, 255, 255, 0.9); border-color: rgba(235, 0, 139, 0.2); box-shadow: 3px 3px 0 rgba(235, 0, 139, 0.15); } html[data-theme="light"][data-color="jojo"] .card:hover{ border-color: #D6007E; box-shadow: 5px 5px 0 rgba(235, 0, 139, 0.25); } /* Themed cards - Bold pink with gold accent */ html[data-color="jojo"] .themed-card::before{ background: linear-gradient(135deg, rgba(235, 0, 139, 0.95), rgba(255, 0, 128, 0.9)); } html[data-color="jojo"] .themed-card{ color: #F8F0F8; border: 3px solid #FFD700; border-radius: 2px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5), 0 0 30px rgba(235, 0, 139, 0.3); } html[data-color="jojo"] .themed-card .label, html[data-color="jojo"] .themed-card .muted, html[data-color="jojo"] .themed-card #currentName, html[data-color="jojo"] .themed-card #currentRoom, html[data-color="jojo"] .themed-card #currentTimeRange, html[data-color="jojo"] .themed-card #elapsedOut, html[data-color="jojo"] .themed-card #leftOut, html[data-color="jojo"] .themed-card #nextName, html[data-color="jojo"] .themed-card #nextRoom, html[data-color="jojo"] .themed-card #nextTimeRange, html[data-color="jojo"] .themed-card #nextInOut, html[data-color="jojo"] .themed-card #untilOut{ color: rgba(255, 255, 255, 0.95) !important; } /* ===== PILLS ===== */ html[data-color="jojo"] .pill{ border: 2px solid rgba(235, 0, 139, 0.3); background: rgba(30, 22, 40, 0.8); color: #C8B0D0; font-weight: 700; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] .pill:hover{ border-color: #FFD700; color: #FFD700; box-shadow: 3px 3px 0 rgba(255, 215, 0, 0.3); transform: translate(-1px, -1px); } html[data-theme="light"][data-color="jojo"] .pill{ background: rgba(255, 255, 255, 0.8); border-color: rgba(235, 0, 139, 0.2); color: #4A2838; } /* ===== PROGRESS BAR ===== */ html[data-color="jojo"] .progress{ background: linear-gradient(90deg, #EB008B, #FF1493, #FFD700); box-shadow: 0 0 15px rgba(235, 0, 139, 0.5); border-radius: 0; } html[data-color="jojo"] .progress-wrap{ background: rgba(30, 22, 40, 0.6); border: 2px solid rgba(235, 0, 139, 0.3); border-radius: 0; } /* ===== BUTTONS ===== */ html[data-color="jojo"] .btn{ background: #EB008B; color: #FFFFFF; border: 3px solid #FFD700; font-family: 'Bebas Neue', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); } html[data-color="jojo"] .btn:hover{ background: #FF1493; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6), 0 0 20px rgba(235, 0, 139, 0.4); } html[data-color="jojo"] .btn:active{ transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); } /* Icon buttons */ html[data-color="jojo"] .icon-btn{ border: 2px solid transparent; border-radius: 2px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] .icon-btn:hover{ background: rgba(235, 0, 139, 0.2); border-color: #EB008B; transform: translate(-2px, -2px); box-shadow: 3px 3px 0 rgba(255, 215, 0, 0.3); } html[data-color="jojo"] .icon-btn:hover .icon{ filter: drop-shadow(0 0 4px rgba(235, 0, 139, 0.8)); } /* ===== STATUS BADGES ===== */ html[data-color="jojo"] .status--current{ background: #EB008B; color: #FFFFFF; border: 2px solid #FFD700; font-family: 'Bebas Neue', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); } html[data-color="jojo"] .status--next{ background: rgba(255, 215, 0, 0.15); color: #FFD700; border: 2px solid rgba(255, 215, 0, 0.5); font-family: 'Bebas Neue', sans-serif; font-weight: 400; text-transform: uppercase; border-radius: 2px; } html[data-color="jojo"] .status--done{ background: rgba(138, 112, 152, 0.2); color: #8A7098; text-decoration: line-through; } /* ===== CHIPS ===== */ html[data-color="jojo"] .chip{ border: 2px solid rgba(235, 0, 139, 0.25); font-weight: 700; border-radius: 2px; background: rgba(30, 22, 40, 0.6); text-transform: uppercase; letter-spacing: 0.03em; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] .chip[aria-pressed="true"]{ background: rgba(235, 0, 139, 0.25); border-color: #EB008B; color: #EB008B; box-shadow: 3px 3px 0 rgba(235, 0, 139, 0.2); } html[data-color="jojo"] .chip:hover{ border-color: #FFD700; color: #FFD700; transform: translate(-1px, -1px); box-shadow: 2px 2px 0 rgba(255, 215, 0, 0.3); } html[data-theme="light"][data-color="jojo"] .chip{ background: rgba(255, 255, 255, 0.8); border-color: rgba(235, 0, 139, 0.2); } /* ===== SCHEDULE TABLE ===== */ html[data-color="jojo"] .schedule th{ border-bottom: 3px solid #EB008B; color: #EB008B; font-family: 'Bebas Neue', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; background: linear-gradient(180deg, rgba(235, 0, 139, 0.15), transparent); text-shadow: 2px 2px 0 rgba(255, 215, 0, 0.3); } html[data-color="jojo"] .schedule tr.active{ background: linear-gradient(90deg, rgba(235, 0, 139, 0.3), rgba(235, 0, 139, 0.15), transparent); border-left: 4px solid #FFD700; box-shadow: inset 0 0 20px rgba(235, 0, 139, 0.1); } html[data-color="jojo"] .schedule td{ border-bottom: 1px solid rgba(235, 0, 139, 0.1); } html[data-color="jojo"] .schedule tbody tr{ background: rgba(21, 16, 30, 0.4); transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] .schedule tbody tr:hover{ background: rgba(235, 0, 139, 0.1); transform: translateX(2px); } html[data-theme="light"][data-color="jojo"] .schedule th{ color: #D6007E; text-shadow: 1px 1px 0 rgba(201, 168, 0, 0.3); } html[data-theme="light"][data-color="jojo"] .schedule td{ border-bottom-color: rgba(235, 0, 139, 0.1); } /* ===== DIALOGS/MODALS ===== */ html[data-color="jojo"] dialog{ border: 3px solid #EB008B; border-radius: 4px; background: rgba(13, 10, 18, 0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 8px 8px 0 rgba(255, 215, 0, 0.4), 0 0 50px rgba(235, 0, 139, 0.2); } html[data-theme="light"][data-color="jojo"] dialog{ background: rgba(255, 255, 255, 0.96); border-color: #D6007E; box-shadow: 6px 6px 0 rgba(235, 0, 139, 0.2); } html[data-color="jojo"] dialog::backdrop{ background: rgba(13, 10, 18, 0.9); backdrop-filter: blur(4px); } html[data-color="jojo"] .modal-header{ border-bottom: 2px solid rgba(235, 0, 139, 0.4); } html[data-color="jojo"] .modal-header strong{ font-family: 'Bebas Neue', sans-serif; color: #EB008B; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 2px 2px 0 rgba(255, 215, 0, 0.3); } /* ===== ONBOARDING ===== */ html[data-color="jojo"] .onboard-title{ font-family: 'Bebas Neue', sans-serif !important; color: #EB008B !important; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 3px 3px 0 #FFD700, 0 0 30px rgba(235, 0, 139, 0.5); } html[data-color="jojo"] .onboard-card{ border: 3px solid #EB008B; background: rgba(13, 10, 18, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 8px 8px 0 rgba(255, 215, 0, 0.3), 0 0 60px rgba(235, 0, 139, 0.2); border-radius: 4px; } html[data-theme="light"][data-color="jojo"] .onboard-card{ background: rgba(255, 255, 255, 0.94); } /* ===== INPUTS ===== */ html[data-color="jojo"] input, html[data-color="jojo"] select, html[data-color="jojo"] textarea{ border: 2px solid rgba(235, 0, 139, 0.25); border-radius: 2px; background: rgba(21, 16, 30, 0.8); color: #F8F0F8; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] input:focus, html[data-color="jojo"] select:focus, html[data-color="jojo"] textarea:focus{ border-color: #FFD700; outline: none; box-shadow: 3px 3px 0 rgba(255, 215, 0, 0.3), 0 0 15px rgba(255, 215, 0, 0.15); } html[data-theme="light"][data-color="jojo"] input, html[data-theme="light"][data-color="jojo"] select, html[data-theme="light"][data-color="jojo"] textarea{ background: rgba(255, 255, 255, 0.9); border-color: rgba(235, 0, 139, 0.2); color: #1A0D14; } html[data-theme="light"][data-color="jojo"] input:focus, html[data-theme="light"][data-color="jojo"] select:focus, html[data-theme="light"][data-color="jojo"] textarea:focus{ border-color: #C9A800; box-shadow: 2px 2px 0 rgba(201, 168, 0, 0.2); } /* ===== TABS ===== */ html[data-color="jojo"] .tabs{ border-bottom: 2px solid rgba(235, 0, 139, 0.2); } html[data-color="jojo"] .tab{ color: #C8B0D0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] .tab:hover{ color: #FFD700; } html[data-color="jojo"] .tab[aria-selected="true"]{ color: #EB008B; border-bottom: 3px solid #EB008B; text-shadow: 1px 1px 0 rgba(255, 215, 0, 0.3); } /* ===== QUICK ACTIONS ===== */ html[data-color="jojo"] .quick-action{ border: 2px solid rgba(235, 0, 139, 0.25); background: rgba(30, 22, 40, 0.6); color: #C8B0D0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 2px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] .quick-action:hover{ background: rgba(255, 215, 0, 0.1); border-color: #FFD700; color: #FFD700; transform: translate(-1px, -1px); box-shadow: 2px 2px 0 rgba(255, 215, 0, 0.2); } html[data-color="jojo"] .quick-action.danger{ border-color: rgba(255, 0, 80, 0.4); color: #FF0050; } html[data-color="jojo"] .quick-action.danger:hover{ background: rgba(255, 0, 80, 0.15); border-color: #FF0050; box-shadow: 2px 2px 0 rgba(255, 0, 80, 0.2); } /* ===== SCROLLBAR ===== */ html[data-color="jojo"] ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #EB008B, #C4006F); border-radius: 0; } html[data-color="jojo"] ::-webkit-scrollbar-track{ background: rgba(21, 16, 30, 0.6); } /* ===== KIOSK MODE ===== */ html[data-color="jojo"] .kiosk-modal-content{ border: 3px solid #EB008B; background: rgba(13, 10, 18, 0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 4px; box-shadow: 8px 8px 0 rgba(255, 215, 0, 0.3); } html[data-color="jojo"] .kiosk-modal-title{ font-family: 'Bebas Neue', sans-serif; color: #EB008B; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 3px 3px 0 rgba(255, 215, 0, 0.4); } html[data-color="jojo"] .kiosk-key{ background: rgba(30, 22, 40, 0.9); border: 2px solid rgba(235, 0, 139, 0.3); color: #F8F0F8; font-family: 'Bebas Neue', sans-serif; font-weight: 400; border-radius: 4px; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] .kiosk-key:hover{ background: #EB008B; border-color: #FFD700; color: #FFFFFF; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.4); } html[data-color="jojo"] .kiosk-pin-dot{ background: rgba(235, 0, 139, 0.1); border: 2px solid rgba(235, 0, 139, 0.5); border-radius: 50%; } html[data-color="jojo"] .kiosk-pin-dot.filled{ background: #EB008B; border-color: #FFD700; box-shadow: 0 0 12px rgba(235, 0, 139, 0.6); } /* ===== EDITOR ===== */ html[data-color="jojo"] .blocks-container{ border: 2px dashed rgba(235, 0, 139, 0.4); background: rgba(21, 16, 30, 0.5); border-radius: 2px; } /* ===== DAY OVER MESSAGE ===== */ html[data-color="jojo"] .dayover-message{ border: 3px solid #EB008B; background: rgba(13, 10, 18, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 4px; box-shadow: 6px 6px 0 rgba(255, 215, 0, 0.3); } /* ===== LINKS ===== */ html[data-color="jojo"] a{ color: #00C8FF; text-decoration: none; font-weight: 500; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-color="jojo"] a:hover{ color: #FFD700; text-shadow: 1px 1px 0 rgba(235, 0, 139, 0.4); } /* ===== HELP TEXT ===== */ html[data-color="jojo"] .help{ color: #8A7098; } /* ===== KBD ===== */ html[data-color="jojo"] .kbd{ background: rgba(30, 22, 40, 0.9); border: 2px solid rgba(235, 0, 139, 0.3); color: #FFD700; font-family: 'Fira Code', monospace; border-radius: 2px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); } /* ===== SELECTION ===== */ html[data-color="jojo"] ::selection{ background: rgba(235, 0, 139, 0.5); color: #FFFFFF; } /* ===== MUTED TEXT COLORS ===== */ html[data-theme="dark"][data-color="jojo"] .label, html[data-theme="dark"][data-color="jojo"] .muted, html[data-theme="dark"][data-color="jojo"] #dateOut{ color: #C8B0D0; } html[data-theme="dark"][data-color="jojo"] #schoolState{ color: #FFD700; border-color: rgba(255, 215, 0, 0.4); } html[data-theme="light"][data-color="jojo"] .label, html[data-theme="light"][data-color="jojo"] .muted, html[data-theme="light"][data-color="jojo"] #dateOut{ color: #7A5068; } /* ===== BOTTOM ACCENT LINE ===== */ html[data-color="jojo"] .container::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #FFD700, #EB008B, #00C8FF, #EB008B, #FFD700); opacity: 1; } /* ===== MENACING EFFECT ===== */ @keyframes jojo-menacing { 0%, 100% { opacity: 0.6; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } html[data-color="jojo"] .themed-card{ animation: jojo-menacing 2s ease-in-out infinite; } /* Star pattern overlay for dark theme */ html[data-theme="dark"][data-color="jojo"]::before{ content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.3) 0%, transparent 100%), radial-gradient(2px 2px at 40% 70%, rgba(235, 0, 139, 0.2) 0%, transparent 100%), radial-gradient(2px 2px at 50% 20%, rgba(0, 200, 255, 0.2) 0%, transparent 100%), radial-gradient(2px 2px at 80% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 100%), radial-gradient(2px 2px at 10% 80%, rgba(235, 0, 139, 0.3) 0%, transparent 100%), radial-gradient(2px 2px at 70% 90%, rgba(0, 200, 255, 0.2) 0%, transparent 100%); z-index: 9999; animation: jojo-stars 8s ease-in-out infinite; } @keyframes jojo-stars { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }