/* ============================================================ SITE-WIDE BRAND COLOUR OVERRIDE England Over 40s brand palette: Blue, White, Gold Loaded AFTER broadcast-theme.css on ALL pages. Colour logic: - Blue (#0080DB) for all CTA buttons and primary interactive elements - Gold (#CFA75C) for World Cup elements, accents, and decorative highlights - White for headings and text To revert: remove this from each page's ============================================================ */ /* ---- Brand Colour Tokens ---- */ :root { --brand-blue: #0080DB; --brand-blue-hover: #006BB8; --brand-blue-deep: #005A9E; --brand-gold: #CFA75C; --brand-gold-hover: #B8923E; --brand-gold-light: rgba(207, 167, 92, 0.15); --brand-gold-glow: rgba(207, 167, 92, 0.08); --brand-white: #FFFFFF; /* Override the broadcast-theme orange variables globally */ --bpm-orange: var(--brand-blue); --bpm-orange-hover: var(--brand-blue-hover); --color-imc-orange: var(--brand-blue); --color-sky-blue: var(--brand-blue); } /* ============================================================ 1. GLOBAL — links ============================================================ */ a { color: var(--brand-blue) !important; } a:hover { color: var(--brand-white) !important; } /* ============================================================ 2. HEADER — blue logo accent, gold nav underlines, blue Apply ============================================================ */ .logo-accent { color: var(--brand-blue) !important; } .nav ul li a::after { background: var(--brand-gold) !important; } .nav ul li a:hover::after, .nav ul li a.active::after { background: var(--brand-gold) !important; } .nav ul li a.nav-cta { background-color: var(--brand-blue) !important; color: #ffffff !important; } .nav ul li a.nav-cta:hover { background-color: var(--brand-blue-hover) !important; } /* ============================================================ 3. FOOTER — gold hover accents ============================================================ */ .footer .social-links a:hover { color: var(--brand-gold) !important; } .footer .footer-nav a:hover { color: var(--brand-gold) !important; } /* ============================================================ 4. BUTTONS — blue primary, blue orange-class ============================================================ */ .btn-primary { background-color: var(--brand-blue) !important; color: var(--brand-white) !important; } .btn-primary:hover { background-color: var(--brand-blue-hover) !important; box-shadow: 0 4px 16px rgba(0, 128, 219, 0.3) !important; } .btn-orange { background-color: var(--brand-blue) !important; color: var(--brand-white) !important; } .btn-orange:hover { background-color: var(--brand-blue-hover) !important; box-shadow: 0 4px 16px rgba(0, 128, 219, 0.3) !important; } /* ============================================================ 5. HERO SECTIONS — blue/gold radial glow ============================================================ */ .hero-section::before, .world-cup-hero::before, .about-hero::before, .fixtures-hero::before, .news-hero::before { background: radial-gradient(ellipse at 20% 80%, rgba(0, 128, 219, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(207, 167, 92, 0.06) 0%, transparent 50%) !important; } /* ============================================================ 6. FIXTURES CONTENT — blue/gold radial glow ============================================================ */ .fixtures-content-section { background: radial-gradient(ellipse at 10% 90%, rgba(0, 128, 219, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 90% 10%, rgba(15, 34, 82, 0.3) 0%, transparent 50%), var(--bpm-navy-mid) !important; } /* ============================================================ 7. MATCH CARDS — gold accents for vs, team logos ============================================================ */ .match-vs { color: var(--brand-gold) !important; } .team-logo { color: var(--brand-gold) !important; } /* Result cards — blue left border, gold outcome */ .result-card { border-left-color: var(--brand-blue) !important; } .result-outcome { color: var(--brand-gold) !important; } /* Filter bar — blue active state */ .filter-btn.active { background: var(--brand-blue) !important; border-color: var(--brand-blue) !important; } /* ============================================================ 8. ABOUT PAGE — blue/gold accents ============================================================ */ .mission-statement { border-left-color: var(--brand-blue) !important; } .values-list li h3 { color: var(--brand-gold) !important; } .contact-details { background: linear-gradient(135deg, rgba(0, 128, 219, 0.1) 0%, rgba(5, 16, 43, 0.4) 100%) !important; border: 1px solid rgba(0, 128, 219, 0.2) !important; } .contact-details a { color: var(--brand-blue) !important; } .contact-details a:hover { color: var(--brand-white) !important; } /* ============================================================ 9. WORLD CUP PAGE — gold accents (premium treatment) ============================================================ */ .player-card img { border-color: var(--brand-gold) !important; } .player-card .role { color: var(--brand-gold) !important; } /* Group tables — gold header */ .group-table th { background-color: var(--brand-gold) !important; color: #05102B !important; } /* ============================================================ 10. PLAYER PORTAL — blue top borders, gold check marks ============================================================ */ .portal-card { border-top: 5px solid var(--brand-blue) !important; } .portal-card-details li::before { color: var(--brand-gold) !important; } .portal-card .btn-primary { background-color: var(--brand-blue) !important; } .portal-card .btn-primary:hover { background-color: var(--brand-blue-hover) !important; } /* Officials CTA panel — blue left border, gold icon */ .officials-cta-panel { border-left: 5px solid var(--brand-blue) !important; } .officials-cta-content h3 i { color: var(--brand-gold) !important; } /* ============================================================ 11. OFFICIALS APPLICATION — blue/gold form accents ============================================================ */ .standards-panel { border-left: 5px solid var(--brand-blue) !important; } .standards-panel h2 i { color: var(--brand-gold) !important; } /* Form focus states — blue */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--brand-blue) !important; box-shadow: 0 0 0 3px rgba(0, 128, 219, 0.15) !important; } .radio-label:hover { border-color: var(--brand-blue) !important; background-color: rgba(0, 128, 219, 0.06) !important; } .radio-label input[type="radio"] { accent-color: var(--brand-blue) !important; } .volunteer-notice { border-left-color: var(--brand-blue) !important; } .volunteer-notice i { color: var(--brand-gold) !important; } /* ============================================================ 12. NEWS PAGE — blue/gold accents ============================================================ */ .featured-story .btn { background-color: var(--brand-blue) !important; } .featured-story .btn:hover { background-color: var(--brand-blue-hover) !important; } .news-card .category-badge { background-color: var(--brand-blue) !important; } /* Story body — blue/gold accents */ .story-body blockquote { background: rgba(0, 128, 219, 0.06) !important; border-left-color: var(--brand-blue) !important; } .story-body blockquote cite { color: var(--brand-gold) !important; } .story-body .squad-table thead th { background: var(--brand-blue) !important; }