/** * K2 Light Theme Overrides * ------------------------ * Applied when has class `k2-light`. Converts the tenant pages' * legacy dark-navy backgrounds and white text to a clean light scheme * matching the K2 marketing site (k2sportsmanagement.com). * * Loaded by: app/Views/layouts/tenant.php, layouts/portal.php, * layouts/tenant-dashboard.php * * Strategy: * 1. Body / page surfaces → white / slate-50 * 2. Card / panel surfaces (navy-800/900) → white with slate borders * 3. Default text-white → slate-900 ink * 4. Muted dark text (slate-300/400) → slate-500/600 * 5. Form inputs → white background with slate border + dark text * 6. Preserve gold/primary accents — they read well on light too * * Use !important sparingly: only where Tailwind utilities collide with * the override (since the tenant pages have hundreds of inline classes * that would otherwise win the cascade). */ /* ── Page surfaces ── */ html.k2-light, html.k2-light body { background-color: #ffffff !important; color: #1e293b !important; } /* The body class is bg-navy-950 text-white — flip it */ html.k2-light body.bg-navy-950 { background-color: #ffffff !important; color: #1e293b !important; } /* ── Card / panel surfaces ── */ html.k2-light .bg-navy-950 { background-color: #ffffff !important; } html.k2-light .bg-navy-900 { background-color: #f8fafc !important; } html.k2-light .bg-navy-850 { background-color: #f1f5f9 !important; } html.k2-light .bg-navy-800 { background-color: #f1f5f9 !important; } html.k2-light .bg-navy-700 { background-color: #e2e8f0 !important; } /* Translucent overlays */ html.k2-light .bg-navy-950\/95, html.k2-light .bg-navy-950\/90, html.k2-light .bg-navy-950\/80, html.k2-light .bg-navy-950\/50 { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); } html.k2-light .bg-navy-900\/80, html.k2-light .bg-navy-900\/50, html.k2-light .bg-navy-900\/30 { background-color: rgba(248, 250, 252, 0.9) !important; } html.k2-light .bg-navy-800\/80, html.k2-light .bg-navy-800\/60, html.k2-light .bg-navy-800\/50, html.k2-light .bg-navy-800\/40, html.k2-light .bg-navy-800\/30 { background-color: rgba(241, 245, 249, 0.85) !important; } /* Surface tokens used by portal.php */ html.k2-light .bg-surface-950 { background-color: #ffffff !important; } html.k2-light .bg-surface-900 { background-color: #f8fafc !important; } html.k2-light .bg-surface-900\/80, html.k2-light .bg-surface-900\/50, html.k2-light .bg-surface-900\/30 { background-color: rgba(248, 250, 252, 0.95) !important; } html.k2-light .bg-surface-800 { background-color: #f1f5f9 !important; } html.k2-light .bg-surface-800\/60, html.k2-light .bg-surface-800\/50, html.k2-light .bg-surface-800\/40, html.k2-light .bg-surface-800\/30 { background-color: rgba(241, 245, 249, 0.7) !important; } html.k2-light .bg-surface-700\/60, html.k2-light .bg-surface-700\/50 { background-color: rgba(226, 232, 240, 0.7) !important; } /* ── Borders ── */ html.k2-light .border-navy-700, html.k2-light .border-navy-800, html.k2-light .border-navy-900, html.k2-light .border-navy-950 { border-color: #e2e8f0 !important; } html.k2-light .border-navy-800\/60, html.k2-light .border-navy-800\/50, html.k2-light .border-navy-700\/60, html.k2-light .border-navy-700\/50 { border-color: rgba(226, 232, 240, 0.8) !important; } html.k2-light .border-surface-700, html.k2-light .border-surface-800, html.k2-light .border-surface-900 { border-color: #e2e8f0 !important; } html.k2-light .border-surface-800\/60, html.k2-light .border-surface-700\/60 { border-color: rgba(226, 232, 240, 0.8) !important; } html.k2-light .border-white\/5, html.k2-light .border-white\/10, html.k2-light .border-white\/20 { border-color: rgba(15, 23, 42, 0.08) !important; } /* Divide utilities */ html.k2-light .divide-navy-800>*, html.k2-light .divide-navy-700>*, html.k2-light .divide-surface-800>*, html.k2-light .divide-surface-700>* { border-color: #e2e8f0 !important; } html.k2-light .divide-surface-800\/30>*, html.k2-light .divide-surface-700\/30>* { border-color: rgba(226, 232, 240, 0.6) !important; } /* ── Text colors ── */ html.k2-light .text-white { color: #0f172a !important; } html.k2-light .text-slate-100, html.k2-light .text-slate-200 { color: #1e293b !important; } html.k2-light .text-slate-300 { color: #475569 !important; } html.k2-light .text-slate-400 { color: #64748b !important; } html.k2-light .text-surface-200, html.k2-light .text-surface-300 { color: #334155 !important; } html.k2-light .text-surface-400 { color: #64748b !important; } html.k2-light .text-surface-500 { color: #94a3b8 !important; } html.k2-light .text-surface-600, html.k2-light .text-surface-700 { color: #1e293b !important; } /* Whites on hover for nav links → dark navy */ html.k2-light .hover\:text-white:hover { color: #0f172a !important; } /* ── Gradients with navy → switch to white/slate gradients ── */ html.k2-light .from-navy-950, html.k2-light .from-navy-900 { --tw-gradient-from: #ffffff !important; } html.k2-light .via-navy-900, html.k2-light .via-navy-850 { --tw-gradient-via: #f8fafc !important; } html.k2-light .to-navy-950, html.k2-light .to-navy-900, html.k2-light .to-navy-850 { --tw-gradient-to: #f1f5f9 !important; } /* ── Form inputs / textareas / selects ── */ html.k2-light input.bg-navy-800, html.k2-light input.bg-navy-900, html.k2-light input.bg-navy-950, html.k2-light textarea.bg-navy-800, html.k2-light textarea.bg-navy-900, html.k2-light select.bg-navy-800, html.k2-light select.bg-navy-900, html.k2-light input.bg-surface-900, html.k2-light input.bg-surface-800, html.k2-light textarea.bg-surface-900, html.k2-light textarea.bg-surface-800, html.k2-light select.bg-surface-900, html.k2-light select.bg-surface-800 { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; } html.k2-light input::placeholder, html.k2-light textarea::placeholder { color: #94a3b8 !important; } /* Generic catch-all for inputs that don't have explicit bg classes */ html.k2-light .tenant-page input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), html.k2-light .tenant-page textarea, html.k2-light .tenant-page select { color: #0f172a; } /* ── Focus rings stay primary/gold ── */ html.k2-light *:focus-visible { outline-color: var(--btn-color, #d4af37); } /* ── Glass/blurred surfaces → readable on white ── */ html.k2-light .glass { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px); border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } html.k2-light .glass-card { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } /* ── Scrollbar ── */ html.k2-light ::-webkit-scrollbar-track { background: #f1f5f9 !important; } html.k2-light ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } html.k2-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; } /* ── Mobile bottom nav ── */ html.k2-light .mobile-bottom-bar { background-color: rgba(255, 255, 255, 0.95) !important; border-top: 1px solid #e2e8f0 !important; box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.04); } /* ── Tables ── */ html.k2-light table { color: #1e293b; } html.k2-light thead { background-color: #f8fafc; } html.k2-light tbody tr:hover { background-color: #f8fafc; } /* ── Alert / status badges keep their colored backgrounds — only fix base text ── */ html.k2-light .text-emerald-300, html.k2-light .text-emerald-400 { color: #059669 !important; } html.k2-light .text-red-300, html.k2-light .text-red-400 { color: #dc2626 !important; } html.k2-light .text-amber-300, html.k2-light .text-amber-400 { color: #d97706 !important; } html.k2-light .text-blue-300, html.k2-light .text-blue-400 { color: #2563eb !important; } /* ── Skeleton loaders ── */ html.k2-light .bg-surface-800.animate-pulse, html.k2-light .bg-navy-800.animate-pulse { background-color: #e2e8f0 !important; } /* ── Hero section: always dark background (video + overlay) — keep white text ── */ /* The hero section renders over a dark video/image with a darkening gradient overlay. It is visually "always dark" regardless of the page theme mode, so all text must stay white/light and the glass card inside must keep its dark tinted background. */ html.k2-light .hero-section { color: #ffffff; } html.k2-light .hero-section .text-white { color: #ffffff !important; } html.k2-light .hero-section .text-slate-100, html.k2-light .hero-section .text-slate-200 { color: #f1f5f9 !important; } html.k2-light .hero-section .text-slate-300, html.k2-light .hero-section .text-slate-400 { color: rgba(255, 255, 255, 0.72) !important; } html.k2-light .hero-section .text-slate-500 { color: rgba(255, 255, 255, 0.52) !important; } html.k2-light .hero-section .text-slate-600 { color: rgba(255, 255, 255, 0.40) !important; } /* Glass card inside hero keeps dark tinted background (not the white light-mode version) */ html.k2-light .hero-section .glass-card { background-color: rgba(6, 13, 26, 0.60) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: none; } html.k2-light .hero-section .glass-card input, html.k2-light .hero-section .glass-card select, html.k2-light .hero-section .glass-card textarea { background-color: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.15) !important; } html.k2-light .hero-section .glass-card input::placeholder, html.k2-light .hero-section .glass-card textarea::placeholder { color: rgba(255, 255, 255, 0.45) !important; } /* bg-navy-* inside hero stay dark — solid classes */ html.k2-light .hero-section .bg-navy-950, html.k2-light .hero-section .bg-navy-900, html.k2-light .hero-section .bg-navy-800 { background-color: rgba(6, 13, 26, 0.55) !important; } /* bg-navy-* opacity variants (e.g. bg-navy-800/50 on session rows) — mirror the exact Tailwind class names */ html.k2-light .hero-section .bg-navy-800\/80, html.k2-light .hero-section .bg-navy-800\/60, html.k2-light .hero-section .bg-navy-800\/50, html.k2-light .hero-section .bg-navy-800\/40, html.k2-light .hero-section .bg-navy-800\/30, html.k2-light .hero-section .bg-navy-900\/80, html.k2-light .hero-section .bg-navy-900\/50, html.k2-light .hero-section .bg-navy-900\/30, html.k2-light .hero-section .bg-navy-950\/95, html.k2-light .hero-section .bg-navy-950\/90, html.k2-light .hero-section .bg-navy-950\/80, html.k2-light .hero-section .bg-navy-950\/50 { background-color: rgba(6, 13, 26, 0.45) !important; } /* Border colors inside hero stay dark — mirror exact Tailwind class names */ html.k2-light .hero-section .border-navy-700, html.k2-light .hero-section .border-navy-800, html.k2-light .hero-section .border-navy-900, html.k2-light .hero-section .border-navy-950 { border-color: rgba(255, 255, 255, 0.12) !important; } html.k2-light .hero-section .border-navy-800\/60, html.k2-light .hero-section .border-navy-800\/50, html.k2-light .hero-section .border-navy-700\/60, html.k2-light .hero-section .border-navy-700\/50 { border-color: rgba(255, 255, 255, 0.12) !important; } /* Hover states */ html.k2-light .hero-section .hover\:text-white:hover { color: #ffffff !important; } html.k2-light .hero-section .hover\:border-gold-500\/30:hover { border-color: rgba(234, 179, 8, 0.45) !important; } /* Button inside hero: primary-color-bg + dark text stays the same in both modes */ html.k2-light .hero-section .text-navy-950 { color: #060d1a !important; } /* Status badges inside booking panel */ html.k2-light .hero-section .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.20) !important; } html.k2-light .hero-section .bg-red-500\/20 { background-color: rgba(239, 68, 68, 0.20) !important; } html.k2-light .hero-section .bg-gold-500\/20 { background-color: rgba(234, 179, 8, 0.20) !important; } html.k2-light .hero-section .text-emerald-400 { color: #34d399 !important; } html.k2-light .hero-section .text-red-400 { color: #f87171 !important; } html.k2-light .hero-section .text-gold-400 { color: #fbbf24 !important; } /* Stat counter labels */ html.k2-light .hero-section .uppercase.tracking-wider { color: rgba(255, 255, 255, 0.50) !important; } /* Gradient stops — the bottom "fade-to-navy" div must not turn white */ html.k2-light .hero-section .from-navy-950, html.k2-light .hero-section .from-navy-900 { --tw-gradient-from: #060d1a !important; } html.k2-light .hero-section .to-navy-950, html.k2-light .hero-section .to-navy-900 { --tw-gradient-to: #060d1a !important; } /* ── Nav / dropdown: fix hover:bg-navy-* variants ────────────────────────────── * Tailwind emits hover variants as .hover\:bg-navy-800:hover etc. CSS-escape * syntax can be inconsistent across browser/parser combinations, so we use the * more reliable CSS attribute-substring selector [class~="..."] which targets * the literal class name string in the HTML attribute. */ html.k2-light [class~="hover:bg-navy-800"]:hover, html.k2-light [class~="hover:bg-navy-900"]:hover, html.k2-light [class~="hover:bg-navy-700"]:hover { background-color: rgba(var(--primary-r, 212), var(--primary-g, 175), var(--primary-b, 55), 0.12) !important; } /* Nav top-level link active/hover bg */ html.k2-light [class~="hover:bg-white/5"]:hover { background-color: rgba(var(--primary-r, 212), var(--primary-g, 175), var(--primary-b, 55), 0.10) !important; } /* Hover text: keep dark on light surfaces (not white) */ html.k2-light [class~="hover:text-white"]:hover { color: #1e293b !important; } /* ── Hero sections: use org brand colour as base (not always dark navy) ──────── * Inline Alpine :style sets background-color:#0a1628 — CSS !important overrides it. * The category-colour gradient overlay (background-image) still applies on top. */ html.k2-light .detail-hero, html.k2-light .cat-hero, html.k2-light .deals-hero { background-color: rgb(var(--primary-r, 10), var(--primary-g, 22), var(--primary-b, 40)) !important; } /* Hero text protection is already scoped per-page via