/* ============================================ Referendum Theme - Australian Democracy ============================================ Inspired by the Australian flag: deep navy blue, Southern Cross white, and touches of red. A neutral, patriotic theme for democratic participation. */ :root { /* Australian Navy Palette */ --theme-50: #e8eef6; --theme-100: #c5d4e8; --theme-200: #9fb7d9; --theme-300: #7899c9; --theme-400: #5a82bd; --theme-500: #3d6bb0; /* Primary - lighter navy */ --theme-600: #2d5a9e; --theme-700: #1e4a8c; --theme-800: #0f3a7a; --theme-900: #002a68; --theme-950: #001a40; /* Australian Flag Colors */ --flag-navy: #00205B; --flag-red: #C8102E; --flag-white: #FFFFFF; --union-blue: #012169; --southern-cross: #e2e8f0; /* Complementary Australian Colors (shared with Outback) */ --eucalyptus: #5a7d6a; --eucalyptus-light: #7a9d8a; --gumtree: #4a6b5a; --wattle: #d4a017; --coral: #e4002b; /* Background - Deep navy */ --bg-primary: #0a1628; --bg-surface: #0f1f3a; --bg-elevated: #152847; /* RGB for rgba() usage */ --theme-500-rgb: 61, 107, 176; /* Login Page Theme Variables */ --theme-gradient-start: #0a1628; --theme-accent: #3d6bb0; --theme-accent-dark: #2d5a9e; --theme-accent-light: #5a82bd; --theme-accent-50: rgba(61, 107, 176, 0.5); --theme-glow: rgba(61, 107, 176, 0.3); /* Semantic Colors */ --color-success: #5a7d6a; /* Eucalyptus */ --color-error: #C8102E; /* Flag red */ --color-warning: #d4a017; /* Wattle gold */ --color-info: #3d6bb0; /* Navy blue */ /* Leaderboard medals */ --rubi-gold: #d4a017; /* Wattle */ --rubi-silver: #9ca3af; --rubi-bronze: #C8102E; /* Flag red */ /* StartupLoader theme variables - Australian flag */ --startup-bg: linear-gradient(135deg, #0a1628 0%, #050d18 100%); --startup-art-url: url('/_content/RUBI.Core.Styles/images/ausflag.svg'); --startup-art-size: 250px auto; --startup-art-position: bottom right; --startup-art-opacity: 0.12; } /* Responsive StartupLoader art size */ @media (min-width: 768px) { :root { --startup-art-size: 400px auto; --startup-art-position: center right; --startup-art-opacity: 0.1; } } @media (min-width: 1024px) { :root { --startup-art-size: 500px auto; } } /* ============================================ Base Overrides - FLAG IS IN BODY BACKGROUND ============================================ To change flag size in DevTools: Select , edit background-size (first value) Mobile: 280px, Tablet: 400px, Desktop: 550px ============================================ */ body { background-color: var(--bg-primary) !important; background-image: url('/_content/RUBI.Core.Styles/images/ausflag.svg'), radial-gradient(ellipse at 20% 80%, rgba(61, 107, 176, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(200, 16, 46, 0.04) 0%, transparent 50%) !important; background-size: 2697px auto, 100% 100%, 100% 100% !important; background-position: bottom 20px right -460px, center, center !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-attachment: fixed, fixed, fixed !important; } /* ============================================ Dark Surface Override ============================================ */ .bg-dark-base { background-color: transparent !important; } .bg-dark-surface { background-color: var(--bg-surface) !important; } /* ============================================ Card Styles ============================================ */ .card { background: linear-gradient(145deg, rgba(15, 31, 58, 0.85) 0%, rgba(10, 22, 40, 0.75) 100%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 0.75rem !important; border: 1px solid rgba(61, 107, 176, 0.25) !important; overflow: hidden; } .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(61, 107, 176, 0.15) !important; } .card-hover:hover { border-color: rgba(61, 107, 176, 0.4) !important; box-shadow: 0 10px 15px -3px rgba(61, 107, 176, 0.15) !important; } /* Topic cards */ .topic-card { background: linear-gradient(145deg, rgba(15, 31, 58, 0.85) 0%, rgba(10, 22, 40, 0.75) 100%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 0.75rem !important; border: 1px solid rgba(61, 107, 176, 0.25) !important; cursor: pointer; transition: all 0.2s ease; } .topic-card:hover { border-color: rgba(61, 107, 176, 0.5); box-shadow: 0 10px 15px -3px rgba(61, 107, 176, 0.2); transform: translateY(-2px); } /* Topic title - white on dark */ .topic-title { color: white; } /* ============================================ Button Variants ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; transition: all 0.2s ease; } .btn-primary { background: linear-gradient(135deg, var(--theme-500), var(--theme-600)); color: white; } .btn-primary:hover { background: linear-gradient(135deg, var(--theme-400), var(--theme-500)); box-shadow: 0 4px 12px rgba(61, 107, 176, 0.3); } .btn-secondary { background-color: var(--bg-elevated); color: var(--southern-cross); border: 1px solid rgba(61, 107, 176, 0.3); } .btn-secondary:hover { background-color: rgba(61, 107, 176, 0.15); border-color: rgba(61, 107, 176, 0.5); } .btn-ghost { background-color: transparent; color: var(--theme-300); } .btn-ghost:hover { background-color: rgba(61, 107, 176, 0.1); color: white; } .btn-success { background: linear-gradient(135deg, var(--eucalyptus), var(--gumtree)); color: white; } .btn-success:hover { background: linear-gradient(135deg, var(--eucalyptus-light), var(--eucalyptus)); } .btn-danger { background: linear-gradient(135deg, var(--flag-red), #a00d24); color: white; } .btn-danger:hover { background: linear-gradient(135deg, #e4002b, var(--flag-red)); } .btn-outline { background-color: transparent; border: 1px solid var(--theme-500); color: var(--theme-400); } .btn-outline:hover { background-color: rgba(61, 107, 176, 0.1); } /* ============================================ Category Badges ============================================ */ .category-badge { background-color: rgba(61, 107, 176, 0.15); color: var(--theme-300); border-color: rgba(61, 107, 176, 0.2); } .category-badge:hover { background-color: rgba(61, 107, 176, 0.25); } .category-badge-subscribed { background-color: rgba(61, 107, 176, 0.25); color: var(--theme-200); border-color: rgba(61, 107, 176, 0.4); } /* ============================================ Vote Progress Bars ============================================ */ .vote-bar { height: 0.5rem; border-radius: 9999px; background-color: rgba(61, 107, 176, 0.1); overflow: hidden; } .vote-bar-yes { height: 100%; background: linear-gradient(90deg, var(--eucalyptus), var(--eucalyptus-light)); transition: all 0.5s ease; } .vote-bar-no { height: 100%; background: linear-gradient(90deg, var(--flag-red), #e4002b); transition: all 0.5s ease; } /* ============================================ Stat Cards ============================================ */ .stat-card { background: linear-gradient(145deg, rgba(15, 31, 58, 0.85) 0%, rgba(10, 22, 40, 0.75) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 0.75rem; padding: 1rem; border: 1px solid rgba(61, 107, 176, 0.2); } .stat-value { font-size: 1.5rem; font-weight: 700; color: white; } .stat-label { font-size: 0.875rem; color: var(--theme-300); } /* ============================================ Leaderboard ============================================ */ .leaderboard-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid rgba(61, 107, 176, 0.1); transition: background-color 0.2s ease; } .leaderboard-row:hover { background-color: rgba(61, 107, 176, 0.05); } .leaderboard-rank { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; } .rank-gold { background-color: rgba(212, 160, 23, 0.2); color: var(--wattle); border: 1px solid rgba(212, 160, 23, 0.5); } .rank-silver { background-color: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.5); } .rank-bronze { background-color: rgba(200, 16, 46, 0.2); color: var(--flag-red); border: 1px solid rgba(200, 16, 46, 0.5); } /* ============================================ Network/Referral Components ============================================ */ .network-node { background: linear-gradient(135deg, var(--theme-500), var(--theme-600)); border: 2px solid var(--theme-400); } .network-node-root { background: linear-gradient(135deg, var(--theme-500), var(--flag-red)); border: 3px solid var(--theme-300); } .network-connector { background: linear-gradient(to bottom, var(--theme-400), var(--theme-600)); } /* ============================================ Share Button ============================================ */ .share-button { position: fixed; bottom: 6rem; right: 1.5rem; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: linear-gradient(135deg, var(--theme-500), var(--flag-red)); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 10px 15px -3px rgba(61, 107, 176, 0.3); z-index: 40; transition: transform 0.2s ease; } .share-button:hover { transform: scale(1.1); } @media (min-width: 768px) { .share-button { bottom: 1.5rem; } } /* ============================================ Form Inputs ============================================ */ input[type="text"], input[type="email"], input[type="password"], textarea, select { background-color: var(--bg-elevated) !important; border: 1px solid rgba(61, 107, 176, 0.25) !important; color: white !important; border-radius: 0.5rem; padding: 0.75rem 1rem; } input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--theme-500) !important; box-shadow: 0 0 0 3px rgba(61, 107, 176, 0.2) !important; } input::placeholder, textarea::placeholder { color: rgba(226, 232, 240, 0.5) !important; } /* ============================================ Bottom Navigation ============================================ */ .fixed.bottom-0 { background-color: var(--bg-surface) !important; border-top: 1px solid rgba(61, 107, 176, 0.2) !important; } .tab-link { color: var(--theme-400); } .tab-link:hover, .tab-link.active { color: var(--theme-300); } /* ============================================ Scrollbar ============================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: rgba(61, 107, 176, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(61, 107, 176, 0.5); } /* ============================================ Animations ============================================ */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 107, 176, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(61, 107, 176, 0); } } .pulse-glow { animation: pulse-glow 2s infinite; } /* ============================================ Tailwind Utility Overrides ============================================ */ /* Background colors */ .bg-indigo-500, .bg-indigo-600 { background-color: var(--theme-500) !important; } .bg-indigo-400 { background-color: var(--theme-400) !important; } .bg-indigo-700 { background-color: var(--theme-600) !important; } .bg-indigo-900 { background-color: var(--theme-800) !important; } .bg-indigo-950 { background-color: var(--theme-950) !important; } .bg-indigo-500\/10, .bg-indigo-600\/10 { background-color: rgba(61, 107, 176, 0.1) !important; } .bg-indigo-500\/20, .bg-indigo-600\/20 { background-color: rgba(61, 107, 176, 0.2) !important; } .bg-indigo-500\/30, .bg-indigo-600\/30 { background-color: rgba(61, 107, 176, 0.3) !important; } .bg-indigo-900\/50 { background-color: rgba(15, 58, 122, 0.5) !important; } .bg-purple-500, .bg-purple-600 { background-color: var(--flag-red) !important; } .bg-purple-400 { background-color: #e4002b !important; } .bg-purple-500\/20 { background-color: rgba(200, 16, 46, 0.2) !important; } .bg-purple-900\/50 { background-color: rgba(160, 13, 36, 0.5) !important; } /* Text colors */ .text-indigo-200 { color: var(--theme-100) !important; } .text-indigo-300 { color: var(--theme-200) !important; } .text-indigo-400 { color: var(--theme-300) !important; } .text-indigo-500 { color: var(--theme-400) !important; } .text-purple-400 { color: var(--flag-red) !important; } .text-purple-300 { color: #e4002b !important; } /* Border colors */ .border-indigo-400 { border-color: var(--theme-400) !important; } .border-indigo-500, .border-indigo-600 { border-color: var(--theme-500) !important; } .border-indigo-500\/20 { border-color: rgba(61, 107, 176, 0.2) !important; } .border-indigo-500\/30 { border-color: rgba(61, 107, 176, 0.3) !important; } .border-indigo-500\/50 { border-color: rgba(61, 107, 176, 0.5) !important; } .border-purple-500 { border-color: var(--flag-red) !important; } .border-purple-500\/50 { border-color: rgba(200, 16, 46, 0.5) !important; } /* Gradient overrides */ .from-indigo-400 { --tw-gradient-from: var(--theme-300) !important; } .from-indigo-500 { --tw-gradient-from: var(--theme-400) !important; } .from-indigo-600 { --tw-gradient-from: var(--theme-500) !important; } .from-indigo-900 { --tw-gradient-from: var(--theme-800) !important; } .from-indigo-950 { --tw-gradient-from: var(--theme-950) !important; } .to-indigo-400 { --tw-gradient-to: var(--theme-300) !important; } .to-indigo-500 { --tw-gradient-to: var(--theme-400) !important; } .to-indigo-600 { --tw-gradient-to: var(--theme-500) !important; } .to-indigo-700 { --tw-gradient-to: var(--theme-600) !important; } .via-indigo-900 { --tw-gradient-via: var(--theme-800) !important; } .to-purple-400 { --tw-gradient-to: var(--flag-red) !important; } .to-purple-500 { --tw-gradient-to: var(--flag-red) !important; } .to-purple-600 { --tw-gradient-to: #a00d24 !important; } /* Gradient opacity variants */ .from-indigo-900\/50 { --tw-gradient-from: rgba(15, 58, 122, 0.5) !important; } .from-indigo-600\/20 { --tw-gradient-from: rgba(45, 90, 158, 0.2) !important; } .to-purple-900\/50 { --tw-gradient-to: rgba(160, 13, 36, 0.5) !important; } /* Hover gradient overrides */ .hover\:from-indigo-500:hover { --tw-gradient-from: var(--theme-400) !important; } .hover\:from-indigo-600:hover { --tw-gradient-from: var(--theme-500) !important; } .hover\:to-indigo-700:hover { --tw-gradient-to: var(--theme-600) !important; } .hover\:to-purple-500:hover { --tw-gradient-to: var(--flag-red) !important; } .hover\:to-purple-600:hover { --tw-gradient-to: #a00d24 !important; } /* Ring/focus colors */ .ring-indigo-500 { --tw-ring-color: var(--theme-500) !important; } .focus\:ring-indigo-500:focus { --tw-ring-color: var(--theme-500) !important; } .focus\:border-indigo-500:focus { border-color: var(--theme-500) !important; } .focus\:ring-indigo-500\/20:focus { --tw-ring-color: rgba(61, 107, 176, 0.2) !important; } /* Hover states */ .hover\:bg-indigo-500:hover { background-color: var(--theme-400) !important; } .hover\:bg-indigo-600:hover { background-color: var(--theme-500) !important; } .hover\:bg-indigo-700:hover { background-color: var(--theme-600) !important; } .hover\:text-indigo-300:hover { color: var(--theme-200) !important; } .hover\:text-indigo-400:hover { color: var(--theme-300) !important; } .hover\:border-indigo-500:hover { border-color: var(--theme-500) !important; } .hover\:bg-indigo-500\/10:hover { background-color: rgba(61, 107, 176, 0.1) !important; } /* Purple hover states */ .hover\:text-purple-300:hover { color: #e4002b !important; } .hover\:bg-purple-500:hover { background-color: var(--flag-red) !important; } /* Shadow colors */ .shadow-indigo-500\/10 { --tw-shadow-color: rgba(61, 107, 176, 0.1) !important; } .shadow-indigo-500\/20 { --tw-shadow-color: rgba(61, 107, 176, 0.2) !important; } .shadow-indigo-500\/25 { --tw-shadow-color: rgba(61, 107, 176, 0.25) !important; } .shadow-indigo-500\/30 { --tw-shadow-color: rgba(61, 107, 176, 0.3) !important; } .shadow-glow-indigo { box-shadow: 0 4px 12px rgba(61, 107, 176, 0.3) !important; } /* Peer-checked states */ .peer-checked\:bg-indigo-600:is(:checked ~ *) { background-color: var(--theme-500) !important; } .peer:checked ~ .peer-checked\:bg-indigo-600 { background-color: var(--theme-500) !important; } /* ============================================ Slate -> Navy Color Overrides ============================================ */ .bg-dark-base, .bg-\[\#0f172a\], .bg-slate-900 { background-color: transparent !important; } .bg-slate-800, .bg-slate-800\/50 { background-color: var(--bg-surface) !important; } .bg-slate-700, .bg-slate-700\/50 { background-color: var(--bg-elevated) !important; } /* Toggle track - needs to be visible against cards */ .w-11.h-6.bg-slate-700 { background-color: #334766 !important; } .bg-slate-600 { background-color: #1e3a5f !important; } /* Slate text colors -> cool tones */ .text-slate-300 { color: var(--southern-cross) !important; } .text-slate-400 { color: #94a3b8 !important; } .text-slate-500 { color: #64748b !important; } .text-slate-600 { color: #475569 !important; } /* Slate borders */ .border-white\/10, .border-slate-700, .border-slate-600, .border-slate-700\/50 { border-color: rgba(61, 107, 176, 0.2) !important; } .border-slate-500 { border-color: rgba(61, 107, 176, 0.3) !important; } /* Hover slate states */ .hover\:bg-slate-700:hover, .hover\:bg-slate-800:hover, .hover\:bg-slate-800\/50:hover { background-color: var(--bg-elevated) !important; } .hover\:bg-slate-600:hover { background-color: #1e3a5f !important; } .hover\:text-slate-300:hover { color: var(--southern-cross) !important; } /* Gray text overrides */ .text-gray-300 { color: var(--southern-cross) !important; } .text-gray-400 { color: #94a3b8 !important; } .text-gray-500 { color: #64748b !important; } .placeholder-gray-500::placeholder, .placeholder-slate-500::placeholder { color: #475569 !important; } /* Green accents -> Eucalyptus */ .text-green-400, .text-green-500 { color: var(--eucalyptus-light) !important; } .bg-green-500, .bg-green-600 { background-color: var(--eucalyptus) !important; } .bg-green-500\/20 { background-color: rgba(90, 125, 106, 0.2) !important; } .border-green-500, .border-l-green-500 { border-color: var(--eucalyptus) !important; } /* Red accents -> Flag red */ .text-red-400, .text-red-500 { color: var(--flag-red) !important; } .bg-red-500, .bg-red-600 { background-color: var(--flag-red) !important; } .bg-red-500\/20 { background-color: rgba(200, 16, 46, 0.2) !important; } /* Yellow/Amber -> Wattle gold */ .text-yellow-400, .text-amber-400, .text-amber-500 { color: var(--wattle) !important; } .bg-yellow-500\/20, .bg-amber-500\/20, .bg-amber-600\/20 { background-color: rgba(212, 160, 23, 0.2) !important; } .border-yellow-500\/50, .border-amber-500\/50 { border-color: rgba(212, 160, 23, 0.5) !important; } /* Card hover shadows */ .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(61, 107, 176, 0.1), 0 4px 6px -2px rgba(61, 107, 176, 0.05) !important; } .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(61, 107, 176, 0.1), 0 10px 10px -5px rgba(61, 107, 176, 0.04) !important; } /* Loading spinner */ .animate-spin { border-color: var(--theme-500) !important; border-top-color: transparent !important; } /* ============================================ Australian Flag Decorative Elements ============================================ */ /* Flag background - subtle fixed overlay */ .aus-dotart-bg { position: relative; } .aus-dotart-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/_content/RUBI.Core.Styles/images/ausflag.svg'); background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.05; pointer-events: none; z-index: 0; } .aus-dotart-bg > * { position: relative; z-index: 1; } /* Flag hero section - uses body::after for flag, no duplicate here */ .aus-dotart-hero { position: relative; overflow: hidden; } /* NOTE: Flag background is handled by body::after (line ~100) This ensures a single, consistent flag across all pages. Edit body::after to change flag size/position. */ /* Card accent */ .aus-dotart-card { position: relative; overflow: hidden; } .aus-dotart-card::after { content: ''; position: absolute; bottom: -20%; right: -15%; width: 60%; height: 90%; background-image: url('/_content/RUBI.Core.Styles/images/ausflag.svg'); background-size: cover; background-position: center; opacity: 0.12; pointer-events: none; border-radius: 50%; filter: blur(1px); z-index: 0; } /* Star pattern divider */ .aus-divider { height: 4px; background-image: radial-gradient(circle, var(--theme-400) 1.5px, transparent 1.5px); background-size: 12px 4px; background-position: center; } /* Header gradient */ .aus-header-gradient { background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(61, 107, 176, 0.1) 100%); } /* Semantic accents */ .aus-success { color: var(--eucalyptus-light); } .aus-error { color: var(--flag-red); } .aus-highlight { color: var(--wattle); } /* ============================================ Theme-Aware Classes ============================================ */ /* Brand text gradient - navy to blue */ .brand-text { background: linear-gradient(135deg, var(--theme-300) 0%, var(--theme-500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Logo glow - blue */ .logo-glow { filter: drop-shadow(0 0 12px rgba(61, 107, 176, 0.4)); } /* ============================================ LOGIN PAGE ============================================ */ .min-h-screen.aus-dotart-hero.flex.items-center.justify-center { align-items: flex-start !important; padding-top: 1rem !important; } @media (max-height: 700px) { .min-h-screen.aus-dotart-hero.flex.items-center.justify-center { padding-top: 0.5rem !important; } } @media (min-height: 900px) { .min-h-screen.aus-dotart-hero.flex.items-center.justify-center { padding-top: 2rem !important; } } /* ============================================ LOADING SCREEN ============================================ */ #loading-screen { background: linear-gradient(135deg, #0a1628 0%, #050d18 100%); position: relative; overflow: hidden; } #loading-screen::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image: url('/_content/RUBI.Core.Styles/images/ausflag.svg'); background-size: 250px auto; background-position: bottom right; background-repeat: no-repeat; opacity: 0.12; pointer-events: none; mask-image: linear-gradient(to left, rgba(0,0,0,0.5), transparent 70%); -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.5), transparent 70%); z-index: 0; } @media (min-width: 768px) { #loading-screen::before { background-size: 400px auto; background-position: center right; opacity: 0.1; } } @media (min-width: 1024px) { #loading-screen::before { background-size: 500px auto; } } #loading-screen > * { position: relative; z-index: 1; } .loading-card { --loading-color: #3d6bb0; --loading-glow: rgba(61, 107, 176, 0.2); --loading-color-secondary: rgba(90, 130, 189, 0.6); background: linear-gradient(135deg, rgba(10, 22, 40, 0.8) 0%, rgba(15, 31, 58, 0.9) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(61, 107, 176, 0.25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(61, 107, 176, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .loading-spinner-double { border-top-color: var(--theme-500) !important; } .loading-spinner-double::after { border-top-color: rgba(200, 16, 46, 0.6) !important; } .loading-text h2 { color: white; } .loading-text p { color: var(--theme-300); } /* ============================================ MORE PAGE CARDS ============================================ */ .more-link-card { background: linear-gradient(145deg, rgba(15, 31, 58, 0.85) 0%, rgba(10, 22, 40, 0.75) 100%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(61, 107, 176, 0.25) !important; } .more-link-card:hover { background: linear-gradient(145deg, rgba(21, 40, 71, 0.9) 0%, rgba(15, 31, 58, 0.85) 100%) !important; border-color: rgba(61, 107, 176, 0.4) !important; } .more-link-card h3 { color: white !important; } .more-link-card p { color: #94a3b8 !important; } .theme-selector-card { background: linear-gradient(145deg, rgba(15, 31, 58, 0.88) 0%, rgba(21, 40, 71, 0.8) 100%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(61, 107, 176, 0.3) !important; } .theme-dropdown { background: rgba(21, 40, 71, 0.9) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(61, 107, 176, 0.3) !important; color: white !important; } .theme-dropdown:focus { border-color: var(--theme-500) !important; box-shadow: 0 0 0 3px rgba(61, 107, 176, 0.2) !important; } .theme-dropdown option { background: var(--bg-surface) !important; color: white !important; } /* ============================================ CHEVRON ICONS ============================================ */ .bi-chevron-right { color: var(--theme-400) !important; } /* ============================================ SECTION HEADERS ============================================ */ .text-sm.font-medium.text-slate-500.uppercase { color: var(--theme-400) !important; } /* ============================================ ICON BACKGROUNDS ============================================ */ .bg-theme-500\/20, .bg-indigo-500\/20 { background-color: rgba(61, 107, 176, 0.2) !important; } .text-theme-400, .text-indigo-400 { color: var(--theme-400) !important; } /* ============================================ VOTING BUTTONS ============================================ */ /* YES Button */ button.from-green-600.to-emerald-600, button[class*="from-green-600"][class*="to-emerald-600"] { background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%) !important; border: none !important; border-radius: 0.75rem !important; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important; } button.from-green-600.to-emerald-600:hover, button[class*="from-green-600"][class*="to-emerald-600"]:hover { background: linear-gradient(145deg, #4ade80 0%, #22c55e 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important; } /* NO Button */ button.from-red-600.to-rose-600, button[class*="from-red-600"][class*="to-rose-600"] { background: linear-gradient(145deg, var(--flag-red) 0%, #a00d24 100%) !important; border: none !important; border-radius: 0.75rem !important; box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3) !important; } button.from-red-600.to-rose-600:hover, button[class*="from-red-600"][class*="to-rose-600"]:hover { background: linear-gradient(145deg, #e4002b 0%, var(--flag-red) 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(200, 16, 46, 0.4) !important; } /* ============================================ PROGRESS & STATS ============================================ */ .bg-gradient-to-r.from-indigo-500.to-purple-500 { background: linear-gradient(90deg, var(--theme-500) 0%, var(--flag-red) 100%) !important; } /* ============================================ ALERTS ============================================ */ .login-alert-error { background: rgba(200, 16, 46, 0.1) !important; border: 1px solid rgba(200, 16, 46, 0.3) !important; color: #fca5a5 !important; }