/* ============================================================ DPH LUXURIOUS WHITE THEME — PROFESSIONAL / EDITORIAL Applied when is present. Design philosophy: Bloomberg / WSJ / Apple product pages. Bold black borders, white surfaces, dark chrome islands, gold accents. Strong visual hierarchy via line weight. ============================================================ */ /* ---- 1. PAGE: warm off-white ---- */ html.theme-light, html.theme-light body { background: #f5f6f9 !important; color: #0a0a0a !important; } /* ============ DARK ISLAND #1: TOP NAV ============ */ html.theme-light header { color: #ffffff !important; border-bottom: 2px solid #0a0a0a !important; } html.theme-light header .text-white, html.theme-light header .text-\[\#eef0f6\], html.theme-light header h1, html.theme-light header h2, html.theme-light header h3 { color: #ffffff !important; } html.theme-light header .text-\[\#8a93a8\] { color: #8a93a8 !important; } html.theme-light header .text-\[\#4a5568\] { color: #94a3b8 !important; } html.theme-light header .text-\[\#d4a843\] { color: #d4a843 !important; } html.theme-light header.border-\[\#182038\], html.theme-light header[class*="border-[#182038]"] { border-color: #0a0a0a !important; } /* ============ DARK ISLAND #2: HERO PICK STRIP ============ */ html.theme-light .from-\[\#111a30\], html.theme-light .from-\[\#1a1400\] { color: #ffffff !important; border-color: #0a0a0a !important; } html.theme-light .from-\[\#111a30\] .text-white, html.theme-light .from-\[\#111a30\] .text-\[\#eef0f6\], html.theme-light .from-\[\#111a30\] h1, html.theme-light .from-\[\#111a30\] h2, html.theme-light .from-\[\#111a30\] h3, html.theme-light .from-\[\#1a1400\] .text-white, html.theme-light .from-\[\#1a1400\] .text-\[\#eef0f6\], html.theme-light .from-\[\#1a1400\] h1, html.theme-light .from-\[\#1a1400\] h2, html.theme-light .from-\[\#1a1400\] h3 { color: #ffffff !important; } html.theme-light .from-\[\#111a30\] .text-\[\#8a93a8\], html.theme-light .from-\[\#1a1400\] .text-\[\#8a93a8\] { color: #94a3b8 !important; } html.theme-light .from-\[\#111a30\] .text-\[\#4a5568\], html.theme-light .from-\[\#1a1400\] .text-\[\#4a5568\] { color: #94a3b8 !important; } html.theme-light .from-\[\#111a30\] .text-\[\#d4a843\], html.theme-light .from-\[\#1a1400\] .text-\[\#d4a843\] { color: #d4a843 !important; } /* ============ DARK ISLAND #3: BOTTOM SCORES TICKER ============ */ html.theme-light .fixed.bottom-0.border-t-2 { background-color: #0a0a0a !important; border-top-color: #d4a843 !important; border-top-width: 3px !important; color: #e8eaf0 !important; } html.theme-light .fixed.bottom-0.border-t-2 .text-white, html.theme-light .fixed.bottom-0.border-t-2 .text-\[\#eef0f6\] { color: #e8eaf0 !important; } html.theme-light .fixed.bottom-0.border-t-2 .text-\[\#94a3b8\], html.theme-light .fixed.bottom-0.border-t-2 .text-\[\#8a93a8\] { color: #94a3b8 !important; } /* ============ 2. WHITE READING SURFACES ============ */ html.theme-light .bg-\[\#060810\], html.theme-light .bg-\[\#06080e\], html.theme-light .bg-\[\#050508\] { background-color: #f5f6f9 !important; } html.theme-light .bg-\[\#07090f\], html.theme-light .bg-\[\#070d1e\] { background-color: #ededf2 !important; } html.theme-light .bg-\[\#090d16\], html.theme-light .bg-\[\#0a0d15\], html.theme-light .bg-\[\#0d1120\], html.theme-light .bg-\[\#0a0e1a\] { background-color: #f0f1f5 !important; } html.theme-light .bg-\[\#0e1422\] { background-color: #ffffff !important; border: 1.5px solid #0a0a0a !important; } html.theme-light .from-\[\#111a30\] .bg-\[\#0e1422\], html.theme-light .from-\[\#1a1400\] .bg-\[\#0e1422\] { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } html.theme-light .bg-\[\#0f172a\]:not(.fixed), html.theme-light .bg-\[\#11182a\] { background-color: #ffffff !important; } html.theme-light .bg-\[\#0f0f20\], html.theme-light .bg-\[\#0d2040\] { background-color: #f5f6f9 !important; } html.theme-light .bg-\[\#1c2540\], html.theme-light .bg-\[\#1a1a35\], html.theme-light .bg-\[\#1e293b\] { background-color: #ededf2 !important; } html.theme-light .bg-\[\#2a1f00\] { background-color: #fef6d4 !important; border-color: #d4a843 !important; } html.theme-light .bg-\[\#0a2218\], html.theme-light .bg-\[\#0e2618\], html.theme-light .bg-\[\#1a3a2a\] { background-color: #d1fae5 !important; } html.theme-light .bg-black, html.theme-light .bg-\[\#000000\], html.theme-light .bg-\[\#000\] { background-color: #ffffff !important; } /* ============ 3. BORDERS: BOLD BLACK for pop ============ */ html.theme-light .border-\[\#182038\], html.theme-light .border-\[\#2c3550\], html.theme-light .border-\[\#2a3b5a\], html.theme-light .border-\[\#2a3048\], html.theme-light .border-\[\#243050\], html.theme-light .border-\[\#1f2a44\], html.theme-light .border-\[\#334155\] { border-color: #0a0a0a !important; } html.theme-light .divide-\[\#182038\] > * + *, html.theme-light .divide-\[\#182038\]\/20 > * + * { border-color: #d1d5db !important; } /* Borders inside dark islands stay light-on-dark */ html.theme-light .from-\[\#111a30\] .border-\[\#182038\], html.theme-light .from-\[\#1a1400\] .border-\[\#182038\], html.theme-light header .border-\[\#182038\], html.theme-light .fixed.bottom-0.border-t-2 .border-\[\#182038\] { border-color: rgba(255, 255, 255, 0.15) !important; } /* Make all .border-2 / .border explicit borders show black */ html.theme-light .border-b-2, html.theme-light .border-t-2:not(.fixed) { border-color: #0a0a0a !important; } /* ============ 4. TEXT: white → near-black hierarchy ============ */ html.theme-light .text-white, html.theme-light .text-\[\#eef0f6\], html.theme-light .text-\[\#e8eaf0\] { color: #0a0a0a !important; } html.theme-light .text-\[\#d6dae5\] { color: #18181b !important; } html.theme-light .text-\[\#9ba6c1\], html.theme-light .text-\[\#94a3b8\] { color: #3f3f46 !important; } html.theme-light .text-\[\#7a8aaa\], html.theme-light .text-\[\#8a93a8\] { color: #52525b !important; } html.theme-light .text-\[\#4a5568\] { color: #71717a !important; } /* Accents: lightly darken for white-bg contrast */ html.theme-light .text-\[\#d4a843\] { color: #92400e !important; } html.theme-light .text-\[\#f0c85a\], html.theme-light .text-\[\#f5c842\] { color: #92400e !important; } html.theme-light .text-\[\#4a90e2\], html.theme-light .text-\[\#38bdf8\], html.theme-light .text-\[\#1a8fd1\], html.theme-light .text-\[\#1da1f2\] { color: #1e3a8a !important; } html.theme-light .text-\[\#10b981\], html.theme-light .text-\[\#5fc36b\], html.theme-light .text-\[\#4ade80\], html.theme-light .text-\[\#2dd47a\] { color: #065f46 !important; } html.theme-light .text-\[\#a78bfa\] { color: #5b21b6 !important; } /* ============ 5. BACKGROUND ACCENTS ============ */ html.theme-light .bg-\[\#d4a843\] { background-color: #d4a843 !important; color: #0a0a0a !important; } html.theme-light .bg-\[\#d4a843\]\/10 { background-color: rgba(212, 168, 67, 0.15) !important; } html.theme-light .bg-\[\#d4a843\]\/20 { background-color: rgba(212, 168, 67, 0.22) !important; } html.theme-light .bg-\[\#4a90e2\] { background-color: #1e3a8a !important; color: #ffffff !important; } html.theme-light .bg-\[\#4a90e2\]\/10 { background-color: rgba(30, 58, 138, 0.10) !important; } /* Make all buttons sharper with black borders */ html.theme-light button.bg-\[\#d4a843\] { border: 1.5px solid #0a0a0a !important; } /* ============ 6. INLINE-STYLE OVERRIDES (Team Intel modal) ============ */ html.theme-light div[style*="background:#0e1422"], html.theme-light div[style*="background: #0e1422"] { background: #ffffff !important; border-color: #0a0a0a !important; } html.theme-light div[style*="background:#0a0d15"], html.theme-light div[style*="background: #0a0d15"] { background: #f5f6f9 !important; } html.theme-light div[style*="background:#060810"], html.theme-light div[style*="background: #060810"], html.theme-light div[style*="background:#08"], html.theme-light div[style*="background: #08"] { background: #f5f6f9 !important; } html.theme-light div[style*="rgba(6,8,16,.92)"], html.theme-light div[style*="rgba(6, 8, 16, .92)"] { background: rgba(10, 10, 10, 0.55) !important; backdrop-filter: blur(8px); } 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-bottom:1px solid #182038"], html.theme-light [style*="border-bottom: 1px solid #182038"] { border-bottom: 1.5px solid #0a0a0a !important; } html.theme-light [style*="border-top:1px solid #182038"], html.theme-light [style*="border-top: 1px solid #182038"] { border-top: 1.5px solid #0a0a0a !important; } html.theme-light [style*="color:#eef0f6"] { color: #0a0a0a !important; } html.theme-light [style*="color:#9ba6c1"] { color: #3f3f46 !important; } html.theme-light [style*="color:#7a8aaa"] { color: #52525b !important; } html.theme-light [style*="color:#d6dae5"] { color: #18181b !important; } html.theme-light [style*="color:#4a5568"] { color: #71717a !important; } html.theme-light [style*="color:#d4a843"] { color: #92400e !important; } html.theme-light div[style*="linear-gradient(135deg,#0e1422,#0a0d15)"], html.theme-light div[style*="linear-gradient(135deg, #0e1422, #0a0d15)"] { background: #ffffff !important; border: 1.5px solid #0a0a0a !important; } /* ============ 7. FORM ELEMENTS ============ */ html.theme-light 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::placeholder, html.theme-light textarea::placeholder { color: #9ca3af !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; } /* Inputs inside dark islands stay dark */ html.theme-light header input, html.theme-light .from-\[\#111a30\] input, html.theme-light .from-\[\#1a1400\] input, html.theme-light .fixed.bottom-0.border-t-2 input { background-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; } /* ============ 8. HOVER STATES ============ */ html.theme-light .hover\:bg-white\/\[0\.03\]:hover { background-color: rgba(10, 10, 10, 0.04) !important; } html.theme-light .hover\:bg-white\/\[0\.05\]:hover { background-color: rgba(10, 10, 10, 0.07) !important; } html.theme-light .hover\:text-white:hover { color: #0a0a0a !important; } html.theme-light header .hover\:text-white:hover, html.theme-light .from-\[\#111a30\] .hover\:text-white:hover, html.theme-light .from-\[\#1a1400\] .hover\:text-white:hover { color: #ffffff !important; } /* ============ 9. 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; } /* ============ 10. PROFESSIONAL POLISH ============ */ /* Sharp drop shadows for elevated panels (editorial style) */ html.theme-light .rounded-2xl.bg-\[\#0e1422\], html.theme-light .rounded-xl.bg-\[\#0e1422\] { box-shadow: 4px 4px 0 #0a0a0a !important; } html.theme-light .rounded-lg.bg-\[\#0e1422\] { box-shadow: 3px 3px 0 #0a0a0a !important; } /* Crisp font rendering */ html.theme-light { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headlines: extra bold weight for editorial feel */ html.theme-light h1, html.theme-light h2 { font-weight: 800 !important; letter-spacing: -0.01em; } /* Underlined dividers should be bold black */ html.theme-light hr { border-color: #0a0a0a !important; border-width: 1.5px; } /* ============ 11. THEME TOGGLE BUTTON ============ */ .dph-theme-toggle { position: fixed; bottom: 80px; right: 20px; 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; }