/* public/style.css */ :root { /* Default Theme: World of warcraft (brown hues) */ --wow-brown-900: #1f140c; --wow-brown-800: #2a1c12; --wow-brown-700: #3b2a1a; /* primary card/table background */ --wow-brown-600: #4a3522; --wow-gold: #d4af37; --wow-gold-soft: rgba(212, 175, 55, 0.35); --alliance-blue: #0b5ea7; --horde-red: #a31621; --scrollbar-track: rgba(31, 20, 12, 0.85); --scrollbar-thumb: rgba(212, 175, 55, 0.6); --scrollbar-thumb-hover: rgba(212, 175, 55, 0.85); --scrollbar-thumb-border: rgba(0, 0, 0, 0.6); } /* THEME OVERRIDES: apply by setting */ html[data-theme="orgrimmar"] { --wow-brown-900: #1f140c; --wow-brown-800: #2a1c12; --wow-brown-700: #3b2a1a; --wow-brown-600: #4a3522; --wow-gold: #d4af37; --wow-gold-soft: rgba(212, 175, 55, 0.35); --scrollbar-track: rgba(31, 20, 12, 0.85); --scrollbar-thumb: rgba(212, 175, 55, 0.6); --scrollbar-thumb-hover: rgba(212, 175, 55, 0.85); --scrollbar-thumb-border: rgba(0, 0, 0, 0.6); } /* Stormwind – blue hues */ html[data-theme="stormwind"] { --wow-brown-900: #0b1324; /* deep navy */ --wow-brown-800: #0f1a33; /* midnight blue */ --wow-brown-700: #142346; /* primary card/table background */ --wow-brown-600: #1c2f5e; /* hover */ --wow-gold: #7cc6ff; /* frosty accent */ --wow-gold-soft: rgba(124, 198, 255, 0.35); --scrollbar-track: rgba(20, 35, 70, 0.85); --scrollbar-thumb: rgba(124, 198, 255, 0.6); --scrollbar-thumb-hover: rgba(124, 198, 255, 0.85); --scrollbar-thumb-border: rgba(4, 12, 30, 0.75); } /* Theme-aware scrollbars (WebKit + Firefox) */ * { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; } *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; border: 2px solid var(--scrollbar-thumb-border); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25); } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: transparent; } /* Sets the default font for the body */ body { font-family: 'Inter', sans-serif; /* Themed background using current palette variables */ background: radial-gradient(1200px 600px at 50% -10%, var(--wow-brown-700), var(--wow-brown-900)) fixed, linear-gradient(180deg, var(--wow-brown-800) 0%, var(--wow-brown-900) 100%) fixed; background-color: var(--wow-brown-900); position: relative; /* allow ::before background layer */ /* Set pointer-events to none globally to prevent external blocking layers */ pointer-events: none; /* Default text color for allowed dark themes */ color: #ffffff; } /* Ensure HTML element also doesn't block events globally */ html { pointer-events: none; font-size: 100%; } /* WoW-like headings */ h1, h2, h3 { font-family: 'Cinzel', serif; letter-spacing: 0.5px; } /* Title with gold gradient and subtle glow */ .wow-title { color: #F2C572; /* Fallback solid gold when background-clip is unsupported */ background: linear-gradient(180deg, #F5E6B2 0%, #F2C572 35%, #D4AF37 60%, #9C7C1C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Will be ignored by browsers that don't support it */ text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 6px rgba(247, 181, 0, 0.35); } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .wow-title { background: none; -webkit-text-fill-color: initial; } } /* Defines a fade-in animation for elements with this class */ .fade-in { animation: fadeIn 0.5s ease-in-out; } /* Keyframes for the fadeIn animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Gold glow for buttons */ .button-glow { box-shadow: 0 0 15px rgba(212, 175, 55, 0.45); } /* Enhances the glow on hover */ .button-glow:hover { box-shadow: 0 0 25px rgba(212, 175, 55, 0.75); } /* Ornate WoW-like call-to-action button */ .btn-wow { background: linear-gradient(180deg, #F7D87B 0%, #E6B84E 45%, #C9992B 100%); border: 1px solid #8a6a21; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .btn-wow:hover { background: linear-gradient(180deg, #FFE08A 0%, #F0C25A 45%, #D0A336 100%); } /* Panel styling to mimic WoW card frames (brown theme) */ .wow-panel { background: linear-gradient(180deg, var(--wow-brown-700) 0%, var(--wow-brown-800) 100%); border: 1px solid var(--wow-gold); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.5); } /* Base styles for the modal overlay (hidden by default) */ .modal-overlay { background-color: rgba(0, 0, 0, 0.85); /* Slightly more opaque black */ display: none; /* Hidden by default */ opacity: 0; /* Fully transparent by default */ transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */ z-index: 100; /* Ensure modal is on top when active */ } /* Styles for when the modal is active (visible) */ .modal-overlay.modal-active { display: flex; opacity: 1; pointer-events: auto; /* Allow mouse events when active */ } /* Explicitly re-enable pointer events for main interactive content areas */ main, header, footer { pointer-events: auto; position: relative; /* Needed for z-index to work */ z-index: 10; /* Ensure it's above other default elements, but below the modal when active */ } /* Form controls: make accents gold */ input[type="radio"], input[type="checkbox"] { accent-color: var(--wow-gold); } /*********************** * Warcraft Brown Theme for Grid and List Views ***********************/ /* Grid cards (generated inside #character-list in grid view) */ #character-list .grid > div { background: linear-gradient(180deg, var(--wow-brown-700) 0%, var(--wow-brown-800) 100%); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 6px 18px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.5); position: relative; } /* Subtle top accent (default gradient), overridden per faction below */ #character-list .grid > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--alliance-blue), var(--horde-red)); opacity: 0.6; /* subtle */ border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } /* Per-toon faction override for grid cards */ #character-list .grid > div.faction-alliance::before { background: var(--alliance-blue); opacity: 0.95; } #character-list .grid > div.faction-horde::before { background: var(--horde-red); opacity: 0.95; } /* Card hover: gentle gold glow + slightly stronger blue/red accent */ #character-list .grid > div:hover { box-shadow: 0 0 0 1px var(--wow-gold-soft), 0 10px 24px rgba(0,0,0,0.65); } #character-list .grid > div:hover::before { opacity: 0.9; } /* Avatars inside cards and list: prefer gold border overriding Tailwind purple */ #character-list img.rounded-full { border: 2px solid var(--wow-gold) !important; } /* Card text colors for readability on brown */ #character-list .grid > div h3 { color: #fff; } #character-list .grid > div p { color: rgba(255,255,255,0.8); } #character-list .grid > div p.text-gray-400 { color: rgba(255,255,255,0.65); } /* List (table) view styling */ #character-list table { background: linear-gradient(180deg, var(--wow-brown-800) 0%, var(--wow-brown-900) 100%); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 6px 18px rgba(0,0,0,0.45); border-radius: 0.5rem; overflow: hidden; } #character-list thead tr { background: linear-gradient(180deg, var(--wow-brown-700) 0%, var(--wow-brown-800) 100%); position: relative; } #character-list thead tr::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--alliance-blue), var(--horde-red)); opacity: 0.5; } #character-list thead th { color: rgba(255,255,255,0.9) !important; } #character-list tbody tr { background-color: var(--wow-brown-900); } #character-list tbody tr:nth-child(odd) { background-color: var(--wow-brown-800); } #character-list tbody tr:hover { background-color: var(--wow-brown-600) !important; box-shadow: inset 0 0 0 1px var(--wow-gold-soft); } /* Per-toon faction hint for list rows: subtle left inset bar */ #character-list tbody tr.faction-alliance { box-shadow: inset 3px 0 0 0 var(--alliance-blue); } #character-list tbody tr.faction-horde { box-shadow: inset 3px 0 0 0 var(--horde-red); } /* Subtle faction halo around avatars while keeping gold border */ #character-list .faction-alliance img.rounded-full { box-shadow: 0 0 0 2px rgba(11, 94, 167, 0.65); } #character-list .faction-horde img.rounded-full { box-shadow: 0 0 0 2px rgba(163, 22, 33, 0.65); } /* Realm headers in grouped view */ #character-list h3 { color: #e0d6c2 !important; text-shadow: 0 1px 0 rgba(0,0,0,0.6); } /* Modal / detail panel slight theme alignment */ #character-detail-modal > div { background: linear-gradient(180deg, var(--wow-brown-700) 0%, var(--wow-brown-800) 100%) !important; border-color: var(--wow-gold) !important; } /* Account filter brown theme */ #account-filter label.inline-flex { background: linear-gradient(180deg, var(--wow-brown-700) 0%, var(--wow-brown-800) 100%) !important; border-color: rgba(0,0,0,0.6) !important; } #account-filter span.text-gray-200 { color: #f2e9d6 !important; } #account-filter span.text-gray-400 { color: #cdbfa6 !important; } /* No specific style for #game-version-selection needed anymore */