/* ============================================================ BladerCorpsX shared LIGHT theme. Activated by adding the `theme-light` class to (see theme.js). Dark mode is the default and needs no rules here. In light mode the neon-cyan accent (#00f8ff) has poor contrast on white, so it is replaced with a deep, readable teal and the glows are removed. Rules use !important to override Tailwind utility classes and each page's inline dark styles. ============================================================ */ /* ---- Toggle switches (both themes) ---- An "on" switch has to read as on at a glance across a venue. Green rather than the cyan accent, which sits too close to the panel colour to register. These are not light-theme rules, but they live here because the light rules below are what made them necessary: the track carries Tailwind's bg-gray-700 for its off state, and `body.theme-light .bg-gray-700 { ... !important }` outranks any plain checked-state utility. A checked toggle in light mode was therefore staying grey. Marking the track .toggle-on and matching on the sibling input wins in both themes. */ .peer:checked ~ .toggle-on { background-color: #16a34a !important; /* green-600 */ } .peer:focus ~ .toggle-on { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.35) !important; } body.theme-light { background-color: #eef2f7 !important; background-image: radial-gradient(at 50% 0%, #dceafc 0%, #eef2f7 100%) !important; color: #1e293b !important; } /* Accent: neon cyan -> deep teal, no glow */ body.theme-light .neon-text { color: #0e6b7a !important; text-shadow: none !important; } body.theme-light .neon-glow { filter: none !important; } /* Surfaces: panels, headers, dropdowns */ body.theme-light .stat-panel, body.theme-light .profile-header, body.theme-light .dropdown-menu { background: #ffffff !important; background-image: none !important; border-color: rgba(14, 116, 144, 0.35) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important; } body.theme-light .profile-header { border-bottom: 2px solid rgba(14, 116, 144, 0.35) !important; } /* Bottom navigation dock */ body.theme-light .nav-dock { background: #ffffff !important; border-top: 2px solid #0891b2 !important; box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.10) !important; } body.theme-light .nav-item, body.theme-light .nav-item span { color: #475569 !important; } body.theme-light .nav-active, body.theme-light .nav-active span { color: #0e6b7a !important; filter: none !important; } body.theme-light .nav-active::after { background-color: #0891b2 !important; box-shadow: none !important; } /* Inputs & secondary buttons */ body.theme-light input, body.theme-light textarea, body.theme-light select, body.theme-light .input-field { background: #f1f5f9 !important; border-color: rgba(14, 116, 144, 0.35) !important; color: #0f172a !important; } body.theme-light .btn-secondary { background: #ffffff !important; color: #0e6b7a !important; border-color: rgba(14, 116, 144, 0.4) !important; } body.theme-light .header-btn { color: #0e6b7a !important; } body.theme-light .player-item { background: #ffffff !important; border-color: rgba(14, 116, 144, 0.25) !important; } /* Option cards (User Settings theme picker) */ body.theme-light .option-card { background: #f9fafb !important; border-color: rgba(148, 163, 184, 0.5) !important; } body.theme-light .option-card.active { border-color: #0891b2 !important; box-shadow: 0 0 18px rgba(8, 145, 178, 0.30) !important; } /* Common Tailwind utility remaps so text stays readable on a light bg */ body.theme-light .text-white { color: #0f172a !important; } body.theme-light .text-gray-200 { color: #1e293b !important; } body.theme-light .text-gray-300 { color: #334155 !important; } body.theme-light .text-gray-400 { color: #475569 !important; } body.theme-light .text-gray-500 { color: #64748b !important; } body.theme-light .text-cyan-400, body.theme-light .text-cyan-300 { color: #0e6b7a !important; } body.theme-light .bg-gray-700 { background-color: #e2e8f0 !important; } body.theme-light .bg-gray-800 { background-color: #f1f5f9 !important; } body.theme-light .bg-gray-900 { background-color: #e9eef5 !important; } body.theme-light .bg-gray-900\/70, body.theme-light .bg-gray-800\/60, body.theme-light .bg-gray-800\/80 { background-color: #ffffff !important; } body.theme-light .border-cyan-400, body.theme-light .border-cyan-500\/30 { border-color: #0891b2 !important; } /* Alerts, warnings and house-rule cards. The dark theme states these as a pale tint on a near-black panel; on a white panel that pale text disappears, so flip them to a dark ink on a soft wash of the same hue. */ body.theme-light .text-red-300, body.theme-light .text-red-400 { color: #b91c1c !important; } body.theme-light .hover\:text-red-300:hover { color: #991b1b !important; } body.theme-light .bg-red-900\/20 { background-color: #fef2f2 !important; } body.theme-light .border-red-500\/40 { border-color: #ef4444 !important; } body.theme-light .text-amber-300, body.theme-light .text-amber-400 { color: #b45309 !important; } body.theme-light .bg-amber-900\/20 { background-color: #fffbeb !important; } body.theme-light .border-amber-500\/40 { border-color: #f59e0b !important; } body.theme-light .text-purple-300 { color: #7e22ce !important; } body.theme-light .bg-purple-900\/10 { background-color: #faf5ff !important; } body.theme-light .border-purple-500\/30, body.theme-light .border-purple-400 { border-color: #a855f7 !important; } body.theme-light .bg-cyan-900\/20, body.theme-light .bg-cyan-900\/10 { background-color: #ecfeff !important; } body.theme-light .border-cyan-700\/50, body.theme-light .border-cyan-700\/30, body.theme-light .border-cyan-500\/40 { border-color: #0891b2 !important; } /* ---- Community tab: custom dark surface classes ---- */ body.theme-light .bg-main-dark { background-color: #f8fafc !important; } body.theme-light .bg-sidebar-dark { background-color: #eef2f7 !important; } body.theme-light .border-sidebar-line, body.theme-light .border-sidebar-line\/50 { border-color: rgba(14, 116, 144, 0.22) !important; } body.theme-light .placeholder-gray-500::placeholder { color: #94a3b8 !important; } /* Community chat message text + timestamps */ body.theme-light .message-text { color: #1e293b !important; } body.theme-light .message-time { color: #64748b !important; } body.theme-light .message-content:hover, body.theme-light .hover\:bg-gray-800\/50:hover { background-color: #eef2f7 !important; } /* Community left channel list: Announcements / Core Channels / Regional Hubs */ body.theme-light .channel-item { color: #475569 !important; } body.theme-light .channel-item:hover { color: #0f172a !important; background-color: rgba(14, 116, 144, 0.08) !important; } body.theme-light .channel-active { background-color: rgba(14, 116, 144, 0.14) !important; color: #0e6b7a !important; } /* State / region dropdown HEADERS (the state + region names) */ body.theme-light .state-dropdown-header, body.theme-light .region-dropdown-header { color: #334155 !important; } body.theme-light .state-dropdown-header:hover, body.theme-light .region-dropdown-header:hover { color: #0f172a !important; background-color: rgba(14, 116, 144, 0.08) !important; } body.theme-light .state-dropdown-header.active, body.theme-light .region-dropdown-header.active { color: #0e6b7a !important; background-color: rgba(14, 116, 144, 0.12) !important; } /* State / region sub-channels (State Chat, State Tournament, region channels) */ body.theme-light .state-channel-item, body.theme-light .region-channel-item { color: #475569 !important; } body.theme-light .state-channel-item:hover, body.theme-light .region-channel-item:hover { color: #0f172a !important; } body.theme-light .state-channel-item.active, body.theme-light .region-channel-item.active { color: #0e6b7a !important; } /* Moderation modals (search + timeout popup) in light mode */ body.theme-light .mod-panel { background: #ffffff !important; } body.theme-light .mod-input { background: #f1f5f9 !important; color: #0f172a !important; border-color: rgba(14, 116, 144, 0.35) !important; } /* Moderation action buttons — readable solid colors in light mode */ body.theme-light .mod-panel button[data-act="warn"] { background: #fef3c7 !important; color: #92400e !important; border-color: #f59e0b !important; } body.theme-light .mod-panel button[data-act="timeout"] { background: #ffedd5 !important; color: #9a3412 !important; border-color: #f97316 !important; } body.theme-light .mod-panel button[data-act="block"] { background: #fee2e2 !important; color: #991b1b !important; border-color: #ef4444 !important; } body.theme-light .mod-panel button[data-act="unblock"] { background: #cffafe !important; color: #155e75 !important; border-color: #06b6d4 !important; } body.theme-light .mod-panel #mod-results .text-white { color: #0f172a !important; } /* ---- Profile Access: card + stat surfaces ---- */ body.theme-light .stat-card { background: #ffffff !important; border-color: rgba(14, 116, 144, 0.25) !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important; } body.theme-light .shadow-neon { box-shadow: 0 0 15px rgba(8, 145, 178, 0.15) !important; } /* ---- Home: "Tournaments Played" 1st/2nd/3rd tab buttons ---- */ body.theme-light .tournament-tab { background: #ffffff !important; border-color: rgba(14, 116, 144, 0.25) !important; color: #475569 !important; } body.theme-light .tournament-tab.active { background: rgba(8, 145, 178, 0.12) !important; border-color: #0891b2 !important; color: #0e6b7a !important; } body.theme-light .tournament-tab:not(.active):hover { background: rgba(8, 145, 178, 0.06) !important; color: #0f172a !important; } /* ---- Selectable list cards: Battle / Custom / Inventory / Leaderboards ---- */ body.theme-light .battle-card, body.theme-light .checklist-item, body.theme-light .inventory-item, body.theme-light .leaderboard-item { background: #ffffff !important; border-color: rgba(14, 116, 144, 0.22) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important; } body.theme-light .battle-card:hover, body.theme-light .inventory-item:hover, body.theme-light .leaderboard-item:hover { background: #f8fafc !important; border-color: #0891b2 !important; } body.theme-light .leaderboard-item.current-user { background: rgba(8, 145, 178, 0.10) !important; border-color: #0891b2 !important; } body.theme-light .rank-other { background: rgba(8, 145, 178, 0.12) !important; color: #0e6b7a !important; border-color: rgba(8, 145, 178, 0.3) !important; } /* ---- Filter tabs: Inventory (owned/saved/wishlist) + Leaderboards ---- */ body.theme-light .inventory-tab, body.theme-light .leaderboard-tab { color: #475569 !important; } body.theme-light .inventory-tab.active, body.theme-light .leaderboard-tab.active { background: rgba(8, 145, 178, 0.12) !important; border-color: #0891b2 !important; color: #0e6b7a !important; } /* ---- Brackets: event configurator select + bracket-type dropdown ---- */ body.theme-light .select-field { background-color: #f1f5f9 !important; border-color: rgba(14, 116, 144, 0.35) !important; color: #0f172a !important; } body.theme-light .select-field:hover, body.theme-light .select-field:focus { background-color: #e9eef5 !important; border-color: #0891b2 !important; } body.theme-light .select-field option { background: #ffffff !important; color: #0f172a !important; } body.theme-light .custom-dropdown { background: #ffffff !important; border-color: rgba(14, 116, 144, 0.3) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important; } body.theme-light .custom-dropdown-item { color: #0f172a !important; border-bottom-color: rgba(14, 116, 144, 0.12) !important; } body.theme-light .custom-dropdown-item:hover, body.theme-light .custom-dropdown-item.selected { background: rgba(8, 145, 178, 0.10) !important; color: #0e6b7a !important; } /* ---- Brackets: the match cards ---- These were the one part of the page that stayed dark in light mode: the card and each player slot are painted with hardcoded near-black, so on a light page they read as dark boxes and the player names inside them landed at about 1.3:1 against their own background — effectively invisible. */ body.theme-light .bracket-match { background: #ffffff !important; border-color: rgba(14, 116, 144, 0.3) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07) !important; } body.theme-light .match-player { background: #f1f5f9 !important; border: 1px solid rgba(14, 116, 144, 0.15) !important; color: #0f172a !important; } /* The winner needs to stay obvious without going neon. */ body.theme-light .match-player.winner { background: rgba(8, 145, 178, 0.14) !important; border-color: #0891b2 !important; color: #0f172a !important; } /* Player names are bare spans that inherit their colour, and the supporting greys are Tailwind's, which are far too pale on white. */ body.theme-light .bracket-match .match-player span { color: #0f172a !important; } body.theme-light .bracket-match .text-gray-400, body.theme-light .bracket-match .text-gray-500 { color: #475569 !important; } body.theme-light .bracket-match .text-cyan-400 { color: #0e7490 !important; } body.theme-light .bracket-match .text-cyan-400:hover { color: #0891b2 !important; } /* Deck lines under each match: the "deck registered" green and the combo text both come from the dark palette. */ body.theme-light .bracket-match .text-green-400 { color: #15803d !important; } body.theme-light .bracket-match .text-red-400 { color: #b91c1c !important; } /* "Winner will be determined from previous round" and the champion line are .text-gray-500 spans inside a .match-player, so the rules above already carry them. The round headings use .neon-text, handled further up. */ /* ---- Tournament & Quick Battle scoring: the points window ---- The box holding both scores is painted bg-gray-900/50 with a border-cyan-400/30 edge. The utility remaps further up cover bg-gray-900 and its /70 and /80 steps but not /50, and border-cyan-400 but not its /30 step — so the one panel a judge reads mid-battle stayed a dark slab with the scores glowing on it while the rest of the page went light. */ body.theme-light .bg-gray-900\/50 { background-color: #f1f5f9 !important; } body.theme-light .border-cyan-400\/30 { border-color: rgba(14, 116, 144, 0.35) !important; } /* Set pips sit inside that box. Unwon ones are a translucent slate that is invisible on white, and a won one is neon cyan with a glow. */ body.theme-light .set-pip { background: rgba(100, 116, 139, 0.40) !important; } body.theme-light .set-pip.won { background: #0891b2 !important; box-shadow: none !important; } /* The bey picker under the scores: chips are hardcoded near-black with pale slate text, which on a light page is a dark box with text that vanishes. */ body.theme-light .bey-chip { background: #f1f5f9 !important; border-color: rgba(14, 116, 144, 0.25) !important; color: #0f172a !important; } body.theme-light .bey-chip:hover { border-color: #0891b2 !important; } /* The bey on the floor has to stay obvious without the neon. */ body.theme-light .bey-chip.active { background: #0891b2 !important; border-color: #0891b2 !important; color: #ffffff !important; } body.theme-light .bey-picker-note { color: #475569 !important; } /* The reshuffle interruption, which is painted from the same dark palette. */ body.theme-light .modal-backdrop { background: rgba(15, 23, 42, 0.45) !important; } body.theme-light .modal-card { background: #ffffff !important; border-color: rgba(14, 116, 144, 0.35) !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.20) !important; }