/* ============================================================ Evolution Football Intelligence — Brand CSS Page-specific theming, logo mark, decorative elements Brand spec: Pink #FF3366 · Grey #5B5D5D · Dark #1A1A1A ============================================================ */ /* ── GOOGLE FONTS (Exo 2 + DM Sans) ───────────────────────── */ /* Loaded via in each HTML head — this file assumes they exist */ /* ============================================================ EVOLUTION LOGOMARK — SVG inline replacement for .navbar-logo-mark ============================================================ */ .evo-logomark { width: 40px; height: 40px; flex-shrink: 0; display: block; } /* ============================================================ NAVBAR WORDMARK typography update ============================================================ */ .navbar-logo-text { font-family: 'Exo 2', sans-serif !important; font-weight: 700 !important; font-size: 1.05rem !important; letter-spacing: 0.01em; } .navbar-logo-text .evo-sub { font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; font-size: 0.6rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.55); } /* ============================================================ PAGE THEME VARIANTS Apply a class to on each page for distinct brand feel ============================================================ */ /* ── DARK THEME (dashboard, game-results) ─────────────────── */ body.theme-dark { background: #111111; } body.theme-dark .card { background: #1E1E1E; border: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.88); } body.theme-dark .card h3, body.theme-dark .card h4, body.theme-dark .card-title { color: #fff; } body.theme-dark .card-body { color: rgba(255,255,255,.6); } body.theme-dark .form-label, body.theme-dark .form-group label { color: rgba(255,255,255,.85); } body.theme-dark .form-input, body.theme-dark .form-control, body.theme-dark select, body.theme-dark textarea { background: #2A2A2A; border-color: rgba(255,255,255,.12); color: #fff; } body.theme-dark .page-inner { background: #111111; min-height: 100vh; } /* ── PINK GRADIENT THEME (index landing, login) ───────────── */ body.theme-pink-hero .hero, .hero--brand-pink { background: linear-gradient(135deg, #1A1A1A 0%, #2d0818 40%, #FF3366 100%); } body.theme-pink-hero .hero::before, .hero--brand-pink::before { background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255,51,102,.35) 0%, transparent 60%), radial-gradient(ellipse 50% 70% at 85% 70%, rgba(255,51,102,.15) 0%, transparent 50%); } /* ── SLATE THEME (squad, kpi-dashboard, session-log) ─────── */ body.theme-slate { background: #F3F3F5; } body.theme-slate .hero, body.theme-slate .hero--sm { background: linear-gradient(135deg, #1A1A1A 0%, #2B1020 100%); } /* ── TACTICAL DARK THEME (tactics, schedule) ─────────────── */ body.theme-tactical { background: #0D0D0D; } body.theme-tactical .hero--sm { background: linear-gradient(135deg, #1A1A1A 0%, #0D0D0D 100%); border-bottom: 2px solid var(--pink); } /* ============================================================ BRAND ACCENT STRIPE — decorative top bar on inner pages ============================================================ */ .brand-stripe { height: 3px; width: 100%; background: linear-gradient(90deg, var(--pink) 0%, var(--brand-grey) 60%, transparent 100%); } /* ============================================================ HERO BRAND VARIANTS ============================================================ */ /* Dark navy hero with pink left blaze */ .hero--dark-blaze { background: #1A1A1A; } .hero--dark-blaze::before { background: radial-gradient(ellipse 55% 90% at -5% 50%, rgba(255,51,102,.40) 0%, transparent 65%), radial-gradient(ellipse 40% 60% at 100% 20%, rgba(91,93,93,.20) 0%, transparent 55%), repeating-linear-gradient( 90deg, transparent, transparent 60px, rgba(255,255,255,.014) 60px, rgba(255,255,255,.014) 61px ); } /* Pink split hero */ .hero--pink-split { background: linear-gradient(110deg, #1A1A1A 55%, #FF3366 55%); } .hero--pink-split::before { background: radial-gradient(ellipse 40% 60% at 80% 50%, rgba(255,255,255,.08) 0%, transparent 60%); } /* Grey smoke hero */ .hero--grey-smoke { background: linear-gradient(135deg, #1A1A1A 0%, #333333 100%); } .hero--grey-smoke::before { background: radial-gradient(ellipse 70% 70% at 60% 50%, rgba(91,93,93,.35) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 20% 30%, rgba(255,51,102,.20) 0%, transparent 55%); } /* Full pink flood hero */ .hero--full-pink { background: linear-gradient(135deg, #FF3366 0%, #cc1144 100%); } .hero--full-pink::before { background: radial-gradient(ellipse 60% 80% at 20% 20%, rgba(255,255,255,.12) 0%, transparent 55%), repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(255,255,255,.03) 30px, rgba(255,255,255,.03) 31px); } .hero--full-pink .hero h1, .hero--full-pink .hero-sub { color: #fff; } .hero--full-pink .hero h1 .accent { color: rgba(255,255,255,.75); } /* ============================================================ DECORATIVE BRAND RING (large background circle motif) Mirrors the circular logomark on hero sections ============================================================ */ .brand-ring-deco { position: absolute; pointer-events: none; border-radius: 50%; border: 1px solid rgba(255,51,102,.15); } .brand-ring-deco--lg { width: 600px; height: 600px; right: -180px; top: 50%; transform: translateY(-50%); } .brand-ring-deco--sm { width: 300px; height: 300px; right: 80px; top: 50%; transform: translateY(-50%); border-color: rgba(255,51,102,.10); } .brand-ring-deco--pink { border-color: rgba(255,51,102,.22); border-width: 2px; } /* ============================================================ SECTION COLOUR OVERRIDES — additional brand variants ============================================================ */ .section--brand-dark { background: #1A1A1A; color: rgba(255,255,255,.85); } .section--brand-dark h2, .section--brand-dark h3, .section--brand-dark h4 { color: #fff; } .section--brand-pink { background: var(--pink); color: #fff; } .section--brand-pink h2, .section--brand-pink h3 { color: #fff; } .section--brand-grey { background: #5B5D5D; color: rgba(255,255,255,.9); } .section--brand-grey h2, .section--brand-grey h3 { color: #fff; } /* ============================================================ STAT VALUE COLOUR FIX — use brand pink ============================================================ */ .stat-value { color: #FF3366 !important; } /* ============================================================ CARD BRAND ACCENT LINES ============================================================ */ .card--pink-top { border-top: 3px solid #FF3366; } .card--grey-top { border-top: 3px solid #5B5D5D; } .card--dark-top { border-top: 3px solid #1A1A1A; } .card--pink-left { border-left: 4px solid #FF3366; } /* ============================================================ NAVBAR ACTIVE LINK — brand pink underline ============================================================ */ .navbar-nav a.active { color: #FF3366 !important; background: rgba(255,51,102,.10) !important; } .navbar-mobile a.active { color: #FF3366 !important; } /* ============================================================ FOOTER BRAND MARK ============================================================ */ .footer-brand-line { display: block; width: 48px; height: 3px; background: linear-gradient(90deg, #FF3366, #5B5D5D); border-radius: 2px; margin: var(--space-md) 0; } /* ============================================================ BRAND BADGE (inline pill labels) ============================================================ */ .badge--brand { background: #FF3366; color: #fff; font-family: 'Exo 2', sans-serif; } .badge--brand-grey { background: #5B5D5D; color: #fff; font-family: 'Exo 2', sans-serif; } /* ============================================================ LOADING / SKELETON PULSE with brand colour ============================================================ */ @keyframes brand-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .brand-pulse { animation: brand-pulse 1.6s ease infinite; color: #FF3366; } /* ============================================================ UTILITY — pink gradient text ============================================================ */ .text-brand-gradient { background: linear-gradient(90deg, #FF3366, #FF8099); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .brand-ring-deco--lg { width: 300px; height: 300px; right: -100px; } .hero--pink-split { background: #1A1A1A; } }