/* ============================================================ DPH SITE-WIDE LIGHT THEME — PROFESSIONAL / EDITORIAL Applied when is present. Targets the CSS custom properties used across all pages (index, articles, prospects, players, rankings, etc.) Design philosophy: Bloomberg / WSJ / Apple editorial. Bold black rules, white surfaces, dark chrome islands (top nav stays dark), gold accent preserved on chrome. ============================================================ */ /* ============ 1. VAR OVERRIDES ============ */ /* These flip the entire site since every page uses these vars */ html.theme-light:root { /* Gold accents stay vivid; gold-as-text gets darkened where used */ --gold: #b8862e; --gold-bright: #d4a843; --gl: #b8862e; --gold-dim: rgba(184, 134, 46, 0.12); /* The "navy" family flips to a white-to-light-gray ramp */ --navy: #ffffff; --n1: #fafbfc; --n2: #ffffff; --n3: #ededf0; --n4: #e5e7eb; /* "dark/darker/border" used on stats.html / leagues.html */ --dark: #ffffff; --darker: #fafbfc; --border: #0a0a0a; /* Stroke (used on index.html) becomes bold black */ --stroke: #0a0a0a; /* Muted text → editorial grays */ --mu: #71717a; --m2: #52525b; --muted: #71717a; --muted2: #52525b; /* Foreground text → near-black */ --wh: #0a0a0a; --wh2: #18181b; --text: #0a0a0a; /* Status colors deepened for white-bg contrast */ --blue: #1e3a8a; --green: #065f46; --red: #b91c1c; --purple: #5b21b6; } /* ============ 2. BODY / PAGE BG ============ */ html.theme-light:root, html.theme-light:root body { background: #f5f6f9 !important; color: #0a0a0a !important; } /* ============ 3. DARK ISLAND: TOP NAV ============ */ /* Every page has a fixed/sticky nav; keep it dark for "spotlight on white" */ html.theme-light nav { background: #0a0a0a !important; border-bottom: 2px solid #0a0a0a !important; } html.theme-light nav, html.theme-light nav a, html.theme-light nav .nav-logo, html.theme-light nav .back, html.theme-light nav .nav-title, html.theme-light nav .nl, html.theme-light nav .nav-link { color: #ffffff !important; } /* Nav hover effects */ html.theme-light nav a:hover, html.theme-light nav .nl:hover, html.theme-light nav .back:hover { color: #d4a843 !important; } /* The "Sim" CTA gold button in nav stays gold-on-black */ html.theme-light nav .nl.cta, html.theme-light nav a.cta { background: #d4a843 !important; color: #0a0a0a !important; font-weight: 700; } html.theme-light nav .nl.cta:hover, html.theme-light nav a.cta:hover { background: #f0c85a !important; } /* Nav-logo gold accent stays gold */ html.theme-light nav .nav-logo span { color: #d4a843 !important; } /* Mobile drawer when open: still dark */ html.theme-light .mob { background: rgba(10, 10, 10, 0.98) !important; } html.theme-light .mob a { color: #ffffff !important; } html.theme-light .mob a:hover { color: #d4a843 !important; } /* Hamburger toggle */ html.theme-light .nav-tog { color: #ffffff !important; } /* ============ 4. IFRAME WRAPPER PAGES ============ */ /* franchise-mode.html, rankings.html, simulator.html — small wrappers that set body bg directly. Force body to white. */ html.theme-light body[style*="background:#07090f"], html.theme-light body[style*="background: #07090f"] { background: #f5f6f9 !important; } /* Iframes inside these pages: keep their own bg (they self-style) */ html.theme-light iframe { background: transparent !important; } /* ============ 5. PROSPECT/PLAYER PAGE PANELS ============ */ /* These use raw hex values inline a lot — override the common ones */ html.theme-light [style*="background:var(--n2)"], html.theme-light [style*="background: var(--n2)"] { background: #ffffff !important; } html.theme-light [style*="background:var(--n3)"], html.theme-light [style*="background: var(--n3)"] { background: #f5f6f9 !important; } html.theme-light [style*="background:var(--navy)"] { background: #ffffff !important; } /* Hero photo placeholders */ html.theme-light .hero-photo-placeholder { background: linear-gradient(135deg, #f5f6f9, #ededf0) !important; border-color: #0a0a0a !important; color: #52525b !important; } /* Hero photo border */ html.theme-light .hero-photo { border: 1.5px solid #0a0a0a !important; } /* ============ 6. BOLD BLACK BORDERS ============ */ html.theme-light .hero-photo, html.theme-light .stat-card, html.theme-light .card, html.theme-light .panel, html.theme-light .section, html.theme-light .tag { border-color: #0a0a0a !important; } /* Generic borders set with hex values inline */ html.theme-light [style*="border:1px solid var(--n3)"], html.theme-light [style*="border: 1px solid var(--n3)"], html.theme-light [style*="border:1px solid #182038"], html.theme-light [style*="border: 1px solid #182038"] { border: 1.5px solid #0a0a0a !important; } html.theme-light [style*="border:1px solid rgba(212,168,67"] { border-color: #d4a843 !important; } /* Borders on nav (inside dark island) stay subtle-on-dark */ html.theme-light nav { border-bottom: 2px solid #0a0a0a !important; } /* ============ 7. INLINE BG/TEXT FIXES FOR COMMON DARK COLORS ============ */ /* For pages that hardcode hex instead of using vars */ html.theme-light [style*="background:#07090f"]:not(nav):not(body), html.theme-light [style*="background: #07090f"]:not(nav):not(body), html.theme-light [style*="background:#0e1422"], html.theme-light [style*="background: #0e1422"] { background: #ffffff !important; } html.theme-light [style*="background:#090d16"], html.theme-light [style*="background: #090d16"], html.theme-light [style*="background:#0a0d15"] { background: #f5f6f9 !important; } html.theme-light [style*="background:#182038"], html.theme-light [style*="background: #182038"] { background: #ededf0 !important; } html.theme-light [style*="color:#e8eaf0"]:not(nav *), html.theme-light [style*="color: #e8eaf0"]:not(nav *), html.theme-light [style*="color:#eef0f6"]:not(nav *) { color: #0a0a0a !important; } html.theme-light [style*="color:#8a93a8"]:not(nav *) { color: #52525b !important; } html.theme-light [style*="color:#4a5568"]:not(nav *) { color: #71717a !important; } html.theme-light [style*="color:#d4a843"]:not(nav *), html.theme-light [style*="color: #d4a843"]:not(nav *) { color: #92400e !important; } /* ============ 8. ARTICLE / CONTENT TYPOGRAPHY ============ */ html.theme-light h1, html.theme-light h2, html.theme-light h3, html.theme-light h4 { color: #0a0a0a !important; } html.theme-light h1, html.theme-light h2 { font-weight: 800 !important; letter-spacing: -0.01em; } html.theme-light p, html.theme-light li { color: #18181b !important; } html.theme-light a:not(nav a):not(.nl):not(.back):not(.cta) { color: #1e3a8a !important; } html.theme-light a:not(nav a):not(.nl):not(.back):not(.cta):hover { color: #92400e !important; } /* ============ 9. RANK PILLS / TAGS / BADGES ============ */ html.theme-light .rank-pill { background: #d4a843 !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a; font-weight: 800; } html.theme-light .tag { background: #ffffff !important; border: 1.5px solid #0a0a0a !important; color: #92400e !important; } html.theme-light .eyebrow { color: #92400e !important; } /* "POS"/"TEAM" pills */ html.theme-light .subtitle .pos { color: #0a0a0a !important; } html.theme-light .subtitle .team { color: #92400e !important; } /* ============ 10. BREADCRUMBS ============ */ html.theme-light .crumbs { color: #71717a !important; } html.theme-light .crumbs a { color: #52525b !important; } html.theme-light .crumbs a:hover { color: #92400e !important; } html.theme-light .crumbs span { color: #92400e !important; } /* ============ 11. FORM ELEMENTS ============ */ html.theme-light input:not(nav input), html.theme-light textarea, html.theme-light select { background-color: #ffffff !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a !important; } html.theme-light input:focus, html.theme-light textarea:focus, html.theme-light select:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.35) !important; } html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: #9ca3af !important; } /* ============ 12. BUTTONS ============ */ html.theme-light button:not(nav button):not(.dph-theme-toggle):not(.nav-tog):not(.mob-x) { border: 1.5px solid #0a0a0a !important; } html.theme-light .btn-primary, html.theme-light .btn-gold, html.theme-light button.gold, html.theme-light .cta-primary { background: #d4a843 !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a !important; font-weight: 700; } html.theme-light .btn-primary:hover, html.theme-light .btn-gold:hover { background: #f0c85a !important; } /* ============ 13. SCROLLBARS ============ */ html.theme-light *::-webkit-scrollbar-track { background: #ededf2; } html.theme-light *::-webkit-scrollbar-thumb { background: #0a0a0a; border-radius: 6px; } html.theme-light *::-webkit-scrollbar-thumb:hover { background: #d4a843; } /* ============ 14. PROFESSIONAL POLISH ============ */ html.theme-light { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Editorial-style hard shadows on major card panels */ html.theme-light .stat-card, html.theme-light .card, html.theme-light .panel, html.theme-light .feature-card { box-shadow: 3px 3px 0 #0a0a0a; } /* Hard divider lines */ html.theme-light hr { border-color: #0a0a0a !important; border-width: 1.5px; } /* ============ 15. THEME TOGGLE BUTTON ============ */ .dph-theme-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 99999; width: 44px; height: 44px; border-radius: 50%; background: #0e1422; border: 1.5px solid #d4a843; color: #d4a843; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.35); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; font-family: 'Oswald', sans-serif; line-height: 1; } .dph-theme-toggle:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(0,0,0,0.4); } html.theme-light .dph-theme-toggle { background: #ffffff; border: 2px solid #0a0a0a; color: #0a0a0a; box-shadow: 3px 3px 0 #0a0a0a; } html.theme-light .dph-theme-toggle:hover { background: #d4a843; box-shadow: 4px 4px 0 #0a0a0a; } /* ============ 16. SPECIFIC FIXES FOR INDEX.HTML & SIMILAR ============ */ /* The homepage .hero-bg uses a hardcoded layered gradient (not vars). Replace it with a clean light gradient. */ html.theme-light .hero-bg { background: radial-gradient(ellipse 120% 70% at 100% 50%, rgba(201,168,76,.06) 0%, transparent 55%), radial-gradient(ellipse 60% 80% at 0% 100%, rgba(74,108,200,.04) 0%, transparent 50%), linear-gradient(180deg, #ffffff 0%, #f5f6f9 60%, #ffffff 100%) !important; } /* Hero subtle grid pattern overlay (if any) — soften for light mode */ html.theme-light .hero-noise, html.theme-light .hero-grid { opacity: 0.3 !important; } /* Big editorial display headlines (the giant "ONE PLATFORM. EVERY PERSPECTIVE.") */ /* These use display: outline / hollow text effects. Force the gold halftone variant. */ html.theme-light .hero h1, html.theme-light .hero-title, html.theme-light .display-text { color: #0a0a0a !important; } /* Hero accent — the gold word in the middle of a headline */ html.theme-light .hero h1 .gold, html.theme-light .hero h1 em, html.theme-light .accent-gold, html.theme-light .gold-text { color: #b8862e !important; } /* Eyebrow / kicker labels above headlines */ html.theme-light .eyebrow, html.theme-light .kicker, html.theme-light .label-eyebrow { color: #b8862e !important; } /* Buttons that use background:var(--gold) — ensure black text + black border for pop */ html.theme-light .btn-prim, html.theme-light .nl.cta, html.theme-light a.cta, html.theme-light .start-btn { background: #d4a843 !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a !important; font-weight: 700; } html.theme-light .btn-prim:hover, html.theme-light .nl.cta:hover { background: #f0c85a !important; color: #0a0a0a !important; } /* Outline buttons */ html.theme-light .btn-out, html.theme-light .btn-outline, html.theme-light .btn-ghost { background: #ffffff !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a !important; } html.theme-light .btn-out:hover, html.theme-light .btn-outline:hover { background: #f5f6f9 !important; } /* Cards on the homepage right-column (Mock Draft Simulator, Scouting Tool, etc.) */ html.theme-light .feat, html.theme-light .feature, html.theme-light .feat-card, html.theme-light .platform-card, html.theme-light [class*="card"]:not(nav [class*="card"]) { background: #ffffff !important; border: 1.5px solid #0a0a0a !important; box-shadow: 3px 3px 0 #0a0a0a; color: #0a0a0a !important; } /* Card titles */ html.theme-light .feat h3, html.theme-light .feat-title, html.theme-light .platform-card h3 { color: #0a0a0a !important; } /* Card subtitles / metadata */ html.theme-light .feat p, html.theme-light .feat-meta, html.theme-light .platform-card p { color: #52525b !important; } /* LIVE badge */ html.theme-light .live-badge, html.theme-light .badge-live, html.theme-light [class*="live"]:not(nav *) { color: #b91c1c !important; } /* Stats / kpi numbers — keep them strong */ html.theme-light .stat-num, html.theme-light .kpi-num, html.theme-light .big-num { color: #0a0a0a !important; font-weight: 800; } /* Stats labels */ html.theme-light .stat-label, html.theme-light .kpi-label { color: #71717a !important; } /* Countdown clock numbers */ html.theme-light .cdown-num { color: #0a0a0a !important; } html.theme-light .cdown-lbl { color: #71717a !important; } html.theme-light .cdown-sub { color: #18181b !important; } html.theme-light .cdown-sub strong { color: #0a0a0a !important; } html.theme-light .cdown-title { color: #0a0a0a !important; } html.theme-light .cdown-date { color: #52525b !important; } /* Ticker (the auto-scrolling text strip) */ html.theme-light .ticker, html.theme-light .ticker-wrap { background: #0a0a0a !important; border-top: 1.5px solid #d4a843; border-bottom: 1.5px solid #d4a843; } html.theme-light .ticker-item { color: #ffffff !important; } /* Footer */ html.theme-light footer, html.theme-light .footer { background: #0a0a0a !important; color: #ffffff !important; border-top: 2px solid #0a0a0a !important; } html.theme-light footer a, html.theme-light .footer a { color: #d4a843 !important; } html.theme-light footer a:hover { color: #f0c85a !important; } html.theme-light footer h4, html.theme-light footer h5, html.theme-light .footer-title { color: #ffffff !important; } html.theme-light footer p, html.theme-light .footer p { color: #c8cedf !important; } /* ============ 17. FEATURE CAROUSEL (LIGHT MODE) ============ */ html.theme-light .dph-carousel { background: #ffffff !important; border-bottom: 1.5px solid #0a0a0a !important; } html.theme-light .dph-carousel::before { background: radial-gradient(circle, rgba(212,168,67,.10) 0%, transparent 60%) !important; } html.theme-light .dph-carousel-eyebrow { color: #92400e !important; } html.theme-light .dph-slide-title { color: #0a0a0a !important; } html.theme-light .dph-slide-desc { color: #52525b !important; } html.theme-light .dph-slide-tag { background: rgba(212,168,67,.18) !important; color: #92400e !important; border: 1.5px solid #d4a843 !important; } html.theme-light .dph-slide-glow { background: radial-gradient(ellipse at center, rgba(212,168,67,.16) 0%, rgba(212,168,67,.04) 45%, transparent 70%) !important; } html.theme-light .dph-slide-shot { border: 1.5px solid #0a0a0a !important; background: #ffffff !important; box-shadow: 4px 4px 0 #0a0a0a, 0 0 0 1px rgba(212,168,67,.12) !important; } html.theme-light .dph-slide:hover .dph-slide-shot { box-shadow: 6px 6px 0 #0a0a0a, 0 0 0 1px rgba(212,168,67,.18) !important; } html.theme-light .dph-slide-cta { background: #d4a843 !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a !important; } html.theme-light .dph-slide:hover .dph-slide-cta { background: #f0c85a !important; box-shadow: 0 10px 30px rgba(212,168,67,.45) !important; } html.theme-light .dph-carousel-arrow { background: #ffffff !important; border: 1.5px solid #0a0a0a !important; color: #0a0a0a !important; box-shadow: 2px 2px 0 #0a0a0a; } html.theme-light .dph-carousel-arrow:hover { background: #d4a843 !important; border-color: #0a0a0a !important; color: #0a0a0a !important; box-shadow: 3px 3px 0 #0a0a0a; } html.theme-light .dph-carousel-dot { background: #d1d5db !important; } html.theme-light .dph-carousel-dot:hover { background: #71717a !important; } html.theme-light .dph-carousel-dot.is-active { background: #0a0a0a !important; }