/* ============================================================================ lct-theme-v4.css 26 August 2026 LearnCompareTrade.com -- shared theme + chrome corrections. SINGLE SOURCE OF TRUTH. Generated from lct_crypto_pagebuild_v1.py; do not hand-edit. Load on every page. What it fixes -- all of these are defects in the shared page shell, so they affect the whole site, not just the course pages: 1. [data-theme="light"] is declared twice. The second block resets the accent to its dark-mode value: #22d3ee on white is 1.81:1. Affects every link, .text-accent, .pill-outline and gradient heading. 2. Card/page relationship inverts in light mode. Dark puts the card DARKER than the page (0.74x); light had it lighter (1.12x). 3. Same inversion for nav and footer (dark 0.24/0.26x; light was 1.15/1.10x, i.e. lighter than the page). 4. The nav hardcodes bg-slate-900/95, so light mode put dark text on a dark bar -- 1:1 contrast, the logo and links invisible. 5. Risk banner and footer disclosure: pale yellow on a low-alpha dark amber. Composited over a light page that is roughly 1.3:1. 6. Cyan buttons carry white labels. Sign Up is 2.43:1 and .btn-primary 1.81:1 -- in BOTH themes, not a light-mode bug. 7. Buttons on fixed-dark backgrounds (Login, My Dashboard, drawer CTAs) inherit page text, so light mode renders dark on dark: 1.20-1.72:1. 8. Dropdown and drawer text sits outside the main content area and was never covered: "Build My Path" 1.46:1, drawer title 2.42:1 in dark. 9. The desktop dropdown is styled against .dropdown-content but the markup says .dropdown-menu. No rule matches, so the menu never hides and the nav renders ~302px tall instead of ~73px. 10. Two dark-mode values sit just under AA against the card and FAQ. Layer order, now consistent across both themes: nav/footer (deepest) < inner-card < content-card < page Verified with a headless contrast sweep over every element on the crypto module page and the Forex BYO chapter shell: zero results below 4.5:1 in either theme. NOT yet verified against the ~240 resources and hub pages. Known exception: .pill is white on the accent gradient -- 7.27:1 in light, but 1.81-2.54:1 in dark. Deliberately left alone; changing it is a brand decision, not a bug fix. ============================================================================ */ .lct-track { background: var(--bg-tertiary) !important; } .lct-border { border-color: var(--border-color) !important; } /* The stylesheet defines the whole desktop dropdown against .dropdown-content -- display:none, position:absolute, top:100%, z-index -- but the markup uses class="dropdown-menu". None of those rules match, so the menu sits in normal flow, permanently open, and the nav renders ~302px tall instead of ~72px. Alias the selectors onto the real class. Theme-independent, so these sit outside any [data-theme] block. */ nav .dropdown { position: relative; } nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; border-radius: 0.5rem; padding: 0.5rem 0; z-index: 200; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } nav .dropdown:hover .dropdown-menu, nav .dropdown:focus-within .dropdown-menu { display: block; } nav .dropdown-menu a { color: var(--text-secondary) !important; } nav .dropdown-menu a:hover { color: var(--text-primary) !important; } /* Chrome elements whose background is a FIXED dark colour regardless of theme, but whose text simply inherits. In light mode they end up dark on dark: Login 1.38:1, My Dashboard 1.72:1, drawer Login 1.20:1. The background is dark in both themes, so the label should be white in both. */ nav .bg-slate-700, nav .bg-slate-700 span { color: #ffffff !important; } /* The drawer CTAs already declare their own colours, but the generic drawer-link rule below is more specific and was overriding them. Match on the anchor so intent wins: dark label on cyan, white on slate. */ [data-theme="light"] .mobile-drawer a.mobile-drawer-cta-secondary, a.mobile-drawer-cta-secondary { color: #ffffff !important; } [data-theme="light"] .mobile-drawer a.mobile-drawer-cta-primary, a.mobile-drawer-cta-primary { color: #0f172a !important; } /* Dropdown and drawer text: these sit outside the main content area, so the earlier accent and muted rules, which are scoped to the main content area, never reached them. */ [data-theme="light"] .dropdown-menu .text-cyan-400, [data-theme="light"] .mobile-drawer .text-cyan-400 { color: #155e75 !important; } [data-theme="light"] .dropdown-menu .text-gray-400, [data-theme="light"] .dropdown-menu .text-gray-500, [data-theme="light"] .mobile-drawer-title, [data-theme="light"] nav .text-gray-400 { color: #475569 !important; } /* Same two labels fail in DARK mode as well -- text-gray-500 on the dropdown ground is 3.03:1 and the drawer title 2.42:1. Not a light-mode bug, so these sit outside the theme selector. */ .dropdown-menu .text-gray-500 { color: #cbd5e1 !important; } .mobile-drawer-title { color: #cbd5e1 !important; } [data-theme="light"] .dropdown-menu .text-gray-500, [data-theme="light"] .mobile-drawer-title { color: #475569 !important; } [data-theme="light"] .mobile-drawer .text-white, [data-theme="light"] .mobile-drawer-header span { color: #0f172a !important; } /* Cookie banner Accept is inline-styled white on #0891b2 -- 3.68:1. */ [data-theme="light"] #cookieBanner button[style*="0891b2"], #cookieBanner button[style*="0891b2"] { color: #0f172a !important; } /* Pills carry margin-bottom: 1rem by default, which pushes them off the centre line when sitting in a flex row. Neutralise it in the row. */ .lct-pill-row .pill, .lct-pill-row .pill-outline { margin-bottom: 0; vertical-align: middle; } /* The chapter body hardcodes the accent as inline style="color:#22d3ee" and as text-cyan-400 / text-yellow-400 etc, which bypass the theme. !important in a stylesheet beats an inline style without it. */ [data-theme="light"] main [style*="#22d3ee"], [data-theme="light"] main [style*="#22D3EE"] { color: #0e7490 !important; } [data-theme="light"] main .text-cyan-400, [data-theme="light"] main .text-cyan-300 { color: #0e7490 !important; } [data-theme="light"] main .text-yellow-400 { color: #a16207 !important; } [data-theme="light"] main .text-green-400 { color: #15803d !important; } [data-theme="light"] main .text-purple-400 { color: #7e22ce !important; } [data-theme="light"] main .text-red-400 { color: #b91c1c !important; } /* Chrome. Dark mode layers the page deepest-outward: nav 0.24 and footer 0.26 of page luminance, then cards at 0.74. Light mode had nav 1.15 and footer 1.10 -- lighter than the page, inverting it. These restore the order: nav/footer deepest (0.70/0.75), then inner-card, then content-card, then page. Dropdowns and the drawer sit one step ABOVE the nav, mirroring dark mode's #1e293b over #10192d. */ [data-theme="light"] nav.bg-slate-900\/95 { background: #bacfe2 !important; border-bottom-color: #a0b5c8 !important; } [data-theme="light"] footer { background: #c0d5e8 !important; border-top-color: #a0b5c8 !important; } [data-theme="light"] .mobile-drawer, [data-theme="light"] .dropdown-menu, [data-theme="light"] .dropdown-content, [data-theme="light"] .dropdown-content.bg-slate-800 { background: #dbe9f6 !important; border-color: #a0b5c8 !important; } [data-theme="light"] nav .hover\\:bg-slate-700:hover, [data-theme="light"] .dropdown-content a:hover, [data-theme="light"] .dropdown-menu a:hover { background: #c6dcef !important; } [data-theme="light"] .dropdown-content a, [data-theme="light"] .mobile-drawer a { color: #293548 !important; } /* Footer body text at #64748b is 3.16:1 on the new ground; one step down. */ [data-theme="light"] footer { --footer-text: #475569; } [data-theme="light"] footer p, [data-theme="light"] footer li, [data-theme="light"] footer a { color: #475569 !important; } [data-theme="light"] footer h3, [data-theme="light"] footer h4 { color: #0f172a !important; } [data-theme="light"] footer a:hover { color: #155e75 !important; } /* Cyan buttons carry white labels. On cyan-500 that is 2.43:1, and .btn-primary on cyan-400 is 1.81:1 -- the same failure in BOTH themes, not a light-mode bug. Navy on the unchanged cyan is 7.35:1, so the brand colour stays and only the label changes. */ .bg-cyan-500, .bg-cyan-500.text-white, a.bg-cyan-500, .bg-cyan-500 span, .bg-cyan-500 strong { color: #0f172a !important; } .btn-primary, .btn-primary span, .btn-primary strong { color: #0f172a !important; } [data-theme="light"] { --btn-primary-bg: #06b6d4; --btn-primary-hover: #0891b2; } /* Two dark-mode values sit just under AA against the card and FAQ grounds. */ :root { --text-muted: #a8b8cc; } html:not([data-theme="light"]) .text-purple-400 { color: #d8b4fe !important; } [data-theme="light"] .text-yellow-400 { color: #a16207 !important; } /* Card / page relationship. In dark mode the card sits DARKER than the page (composited luminance ratio 0.75). In light mode it was white over a pale-blue page -- ratio 1.12, i.e. lighter, inverting the relationship. These put light mode back on the same footing: the card is a deeper tint of the page, and nesting continues downward. */ [data-theme="light"] .content-card { background: #cfe3f5 !important; border-color: #a8c6e0 !important; } [data-theme="light"] .inner-card, [data-theme="light"] .lct-track { background: #c2d9ef !important; border-color: #a8c6e0 !important; } [data-theme="light"] main .lct-border, [data-theme="light"] main table tr { border-color: #a8c6e0 !important; } /* The card is darker now, so muted text and the level accent move one step down to hold 4.5:1 on it. Worst case across every level is 4.88:1. */ [data-theme="light"] { --text-secondary: #293548; --text-muted: #475569; } [data-theme="light"] main .text-cyan-400, [data-theme="light"] main .text-cyan-300 { color: #155e75 !important; } [data-theme="light"] main .text-yellow-400 { color: #854d0e !important; } [data-theme="light"] main .text-green-400 { color: #166534 !important; } [data-theme="light"] main .text-purple-400 { color: #6b21a8 !important; } [data-theme="light"] main [style*="#22d3ee"], [data-theme="light"] main [style*="#22D3EE"] { color: #155e75 !important; } /* Risk warnings. The banner and footer box use dark-amber backgrounds at low alpha with pale-yellow text. Composited over a light page that is roughly pale tan behind #fef08a -- about 1.3:1, unreadable. Light mode gets a pale yellow ground with dark amber text; still the yellow family the footer-risk-box rule requires, just legible. */ [data-theme="light"] .bg-yellow-900\/30, [data-theme="light"] .bg-yellow-900\/20, [data-theme="light"] .footer-risk-box { background: #fefce8 !important; border-color: rgba(202, 138, 4, 0.4) !important; } [data-theme="light"] .text-yellow-200, [data-theme="light"] .text-yellow-100, [data-theme="light"] .text-yellow-100\/80, [data-theme="light"] .text-yellow-200 strong, [data-theme="light"] footer .footer-risk-box p, [data-theme="light"] footer .footer-risk-box h4, [data-theme="light"] footer .footer-risk-box strong { color: #854d0e !important; } /* -------------------------------------------------------------------------- Level accents. Course pages declare a second [data-theme="light"] block carrying the level identity colour, reusing the dark-mode value unchanged. The build scripts rewrite those in-file. This is the safety net for any page that still serves the dark value: same hue, -800 shade, AA on the card. -------------------------------------------------------------------------- */ [data-theme="light"] { --accent-cyan: #155e75; --accent-blue: #1e40af; --accent-gradient: linear-gradient(to right, #155e75, #1e40af); --btn-primary-bg: #06b6d4; --btn-primary-hover: #0891b2; } /* -------------------------------------------------------------------------- Hardcoded slate/gray utilities in page content. The page bodies bypass the theme system and write fixed colours directly -- text-slate-300 alone appears ~3,000 times across the BYO chapters. In light mode that is #cbd5e1 on a light card, about 1.1:1. The build scripts rewrite these classes in the HTML for the pages they touch. These rules do the same job in CSS, so this stylesheet alone is enough for every other page -- no HTML rewriting required. -------------------------------------------------------------------------- */ main .text-slate-500, main .text-gray-500, .content-layer > :not(nav):not(footer) .text-slate-500, .content-layer > :not(nav):not(footer) .text-gray-500 { color: var(--text-muted) !important; } [data-theme="light"] main .text-slate-300, [data-theme="light"] main .text-gray-300, [data-theme="light"] .content-layer > :not(nav):not(footer) .text-slate-300, [data-theme="light"] .content-layer > :not(nav):not(footer) .text-gray-300 { color: var(--text-secondary) !important; } [data-theme="light"] main .text-slate-200, [data-theme="light"] main .text-white, [data-theme="light"] .content-layer > :not(nav):not(footer) .text-slate-200, [data-theme="light"] .content-layer > :not(nav):not(footer) .text-white { color: var(--text-primary) !important; } [data-theme="light"] main .text-slate-400, [data-theme="light"] main .text-gray-400, [data-theme="light"] .content-layer > :not(nav):not(footer) .text-slate-400, [data-theme="light"] .content-layer > :not(nav):not(footer) .text-gray-400 { color: var(--text-muted) !important; } [data-theme="light"] main .bg-slate-800, [data-theme="light"] main .bg-slate-800\/60, [data-theme="light"] main .bg-slate-800\/50, [data-theme="light"] main .bg-slate-800\/40, [data-theme="light"] main .bg-slate-900, [data-theme="light"] .content-layer > :not(nav):not(footer) .bg-slate-800, [data-theme="light"] .content-layer > :not(nav):not(footer) .bg-slate-800\/60, [data-theme="light"] .content-layer > :not(nav):not(footer) .bg-slate-800\/50, [data-theme="light"] .content-layer > :not(nav):not(footer) .bg-slate-700, [data-theme="light"] .content-layer > :not(nav):not(footer) .bg-slate-600 { background: #c2d9ef !important; } [data-theme="light"] main .border-slate-600, [data-theme="light"] main .border-slate-700, [data-theme="light"] main .border-slate-800, [data-theme="light"] .content-layer > :not(nav):not(footer) .border-slate-600, [data-theme="light"] .content-layer > :not(nav):not(footer) .border-slate-700, [data-theme="light"] .content-layer > :not(nav):not(footer) .border-slate-800 { border-color: #a8c6e0 !important; } /* Pages built on .content-layer have no .content-card either -- their panels are bare bg-slate-800/50 blocks, already re-grounded above. */ /* -------------------------------------------------------------------------- Page-level overrides found on .content-layer pages (homepage, hubs). These pages define their own button rules that outrank the generic ones: button.bg-cyan-500 { color: var(--btn-primary-text) !important } is (0,1,1) and beats a plain .bg-cyan-500 (0,1,0). The variable resolves to #ffffff in dark, so those CTAs are white on cyan -- 1.81:1. They also re-ground .bg-slate-700 to a LIGHT colour in light mode, which turned the white Login label into white-on-light. Set ground and label together so the button looks the same on every page. -------------------------------------------------------------------------- */ :root, [data-theme="light"] { --btn-primary-text: #0f172a; } button.bg-cyan-500, button.bg-cyan-600, a.bg-cyan-500, a.bg-cyan-600 { color: #0f172a !important; } [data-theme="light"] nav .bg-slate-700, [data-theme="light"] nav button.bg-slate-700, [data-theme="light"] nav a.bg-slate-700 { background: #334155 !important; color: #ffffff !important; } [data-theme="light"] nav .bg-slate-700:hover { background: #475569 !important; } /* "Coming Soon" badge: yellow-700 on a yellow-500/20 tint is 3.61:1. */ [data-theme="light"] .bg-yellow-500\/20 { color: #854d0e !important; } [data-theme="light"] nav .text-yellow-400 { color: #854d0e !important; } /* Solid status badges (green tick circles) carry white glyphs -- 2.28:1 in both themes. Same failure class as the cyan buttons; navy gives 8.36:1. */ .bg-green-500, .bg-green-500 span, .bg-emerald-500, .bg-emerald-500 span { color: #0f172a !important; } /* ========================================================================== LIVE FINDINGS -- added 26 Aug 2026 after deployment testing. Each of these is a component with more than one implementation across the site; the base rules above were written against the chapter shell's version. ========================================================================== */ /* 1. Bare element selector. 113 pages carry [data-theme="light"] nav { background: rgba(255,255,255,0.95) !important } intended for the site header, but it paints EVERY