/** * TradeChefPro — Light / Dark Theme * Driven by . * Early inline script in sets the attribute before paint (no FOUC). * * Structure: * 1. CSS custom properties (light defaults, dark overrides) * 2. Global shell — body, headings, links * 3. Navbar (pure CSS; no JS class toggling needed) * 4. Footer * 5. Bootstrap component overrides (forms, cards, alerts, tables, badges) * 6. Page: Homepage (.tcp-home) — hero + sections * 7. Page: Vanna dashboard * 8. Page: Account (auth) pages * 9. Page: Journal * 10. Theme toggle button */ /* ════════════════════════════════════════════════ 1. CSS CUSTOM PROPERTIES ════════════════════════════════════════════════ */ :root { /* Light defaults */ --t-bg: #ffffff; --t-bg-alt: #f8f9fa; --t-bg-surface: #ffffff; --t-bg-subtle: #f0f2f5; --t-text: #686b75; --t-text-strong: #1a1d23; --t-text-muted: #8b949e; --t-text-faint: #adb5bd; --t-border: rgba(0, 0, 0, 0.08); --t-border-med: rgba(0, 0, 0, 0.12); --t-accent: #068bea; --t-accent-h: #0570c4; --t-brand: #fd8917; --t-brand-h: #e67a0f; --t-link: #068bea; --t-link-h: #0570c4; --t-nav-bg: #ffffff; --t-nav-text: #686b75; --t-nav-hover: #fd8917; --t-footer-bg: #f8f9fa; --t-input-bg: #ffffff; --t-input-border: #ced4da; } html[data-theme="dark"] { /* Dark overrides */ --t-bg: #0d1117; --t-bg-alt: #111318; --t-bg-surface: #161b22; --t-bg-subtle: #0d1117; --t-text: #8b949e; --t-text-strong: #e6edf3; --t-text-muted: #6e7681; --t-text-faint: #4a5568; --t-border: rgba(230, 237, 243, 0.08); --t-border-med: rgba(230, 237, 243, 0.18); --t-accent: #378add; --t-accent-h: #2f7bc4; --t-brand: #fd8917; --t-brand-h: #e67a0f; --t-link: #7eb8f7; --t-link-h: #a8d4ff; --t-nav-bg: #0d1117; --t-nav-text: #8b949e; --t-nav-hover: #e6edf3; --t-footer-bg: #0d1117; --t-input-bg: #161b22; --t-input-border: rgba(230, 237, 243, 0.18); } /* ════════════════════════════════════════════════ 2. GLOBAL SHELL ════════════════════════════════════════════════ */ html[data-theme="dark"] body { background: var(--t-bg) !important; color: var(--t-text); } html[data-theme="dark"] main { background: var(--t-bg); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--t-text-strong); } html[data-theme="dark"] p { color: var(--t-text); } html[data-theme="dark"] a { color: var(--t-link); } html[data-theme="dark"] a:hover { color: var(--t-link-h); } html[data-theme="dark"] hr { border-color: var(--t-border); } html[data-theme="dark"] .text-muted { color: var(--t-text-muted) !important; } html[data-theme="dark"] .text-dark { color: var(--t-text-strong) !important; } html[data-theme="dark"] .text-secondary { color: var(--t-text-muted) !important; } html[data-theme="dark"] .small { color: inherit; } html[data-theme="dark"] .lead { color: var(--t-text); } html[data-theme="dark"] strong, html[data-theme="dark"] b { color: var(--t-text-strong); } /* ════════════════════════════════════════════════ 3. NAVBAR ════════════════════════════════════════════════ */ html[data-theme="dark"] .tcp-navbar { background: var(--t-nav-bg) !important; box-shadow: none !important; border-bottom: 1px solid var(--t-border); } html[data-theme="dark"] .tcp-navbar .navbar-brand { color: #58a6e8 !important; } html[data-theme="dark"] .tcp-navbar .navbar-brand span { color: #fd8917 !important; } html[data-theme="dark"] .tcp-navbar .nav-link { color: var(--t-nav-text) !important; } html[data-theme="dark"] .tcp-navbar .nav-link:hover { color: var(--t-nav-hover) !important; } html[data-theme="dark"] .tcp-navbar .btn-primary { background: transparent !important; border: 1px solid var(--t-border-med) !important; color: var(--t-text-strong) !important; } html[data-theme="dark"] .tcp-navbar .btn-primary:hover { background: rgba(230, 237, 243, 0.08) !important; border-color: rgba(230, 237, 243, 0.4) !important; color: #fff !important; } html[data-theme="dark"] .tcp-navbar .btn-outline-primary { color: var(--t-text-strong) !important; border-color: var(--t-border-med) !important; background: transparent !important; } html[data-theme="dark"] .tcp-navbar .btn-outline-primary:hover { border-color: rgba(230, 237, 243, 0.45) !important; background: rgba(230, 237, 243, 0.06) !important; color: #fff !important; } /* Hamburger toggler icon — replaces Bootstrap's navbar-dark class */ html[data-theme="dark"] .tcp-navbar .navbar-toggler { border-color: rgba(230, 237, 243, 0.25); } html[data-theme="dark"] .tcp-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230%2C237%2C243%2C0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } html[data-theme="dark"] .tcp-navbar .dropdown-menu { background: var(--t-bg-surface); border-color: var(--t-border); } html[data-theme="dark"] .tcp-navbar .dropdown-item { color: var(--t-text); } html[data-theme="dark"] .tcp-navbar .dropdown-item:hover { background: rgba(230, 237, 243, 0.06); color: var(--t-text-strong); } /* ════════════════════════════════════════════════ 4. FOOTER ════════════════════════════════════════════════ */ html[data-theme="dark"] .tcp-site-footer { background: var(--t-footer-bg) !important; border-top: 1px solid var(--t-border); margin-top: 0 !important; } html[data-theme="dark"] .tcp-site-footer, html[data-theme="dark"] .tcp-site-footer p { color: var(--t-text-faint) !important; } html[data-theme="dark"] .tcp-site-footer a { color: var(--t-text-muted) !important; } html[data-theme="dark"] .tcp-site-footer a:hover { color: var(--t-text-strong) !important; text-decoration: none !important; } html[data-theme="dark"] .tcp-site-footer strong { color: var(--t-text-muted) !important; } /* ════════════════════════════════════════════════ 5. BOOTSTRAP COMPONENT OVERRIDES ════════════════════════════════════════════════ */ /* Forms */ html[data-theme="dark"] .form-control { background: var(--t-input-bg) !important; border-color: var(--t-input-border) !important; color: var(--t-text-strong) !important; } html[data-theme="dark"] .form-control:focus { background: #1a2030 !important; border-color: var(--t-accent) !important; color: var(--t-text-strong) !important; box-shadow: 0 0 0 0.2rem rgba(55, 138, 221, 0.25) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--t-text-muted); } html[data-theme="dark"] label, html[data-theme="dark"] .form-label { color: var(--t-text-strong); } /* Cards */ html[data-theme="dark"] .card { background: var(--t-bg-surface); border-color: var(--t-border); color: var(--t-text); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background: var(--t-bg-alt); border-color: var(--t-border); } html[data-theme="dark"] .card-title { color: var(--t-text-strong); } /* Alerts */ html[data-theme="dark"] .alert { border-color: var(--t-border); } html[data-theme="dark"] .alert-info { background: rgba(55, 138, 221, 0.12); border-color: rgba(55, 138, 221, 0.3); color: #7eb8f7; } html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-error { background: rgba(244, 112, 103, 0.12); border-color: rgba(244, 112, 103, 0.3); color: #f47067; } html[data-theme="dark"] .alert-warning { background: rgba(241, 168, 78, 0.12); border-color: rgba(241, 168, 78, 0.3); color: #f1a84e; } html[data-theme="dark"] .alert-success { background: rgba(30, 215, 96, 0.12); border-color: rgba(30, 215, 96, 0.3); color: #1ed760; } /* Tables */ html[data-theme="dark"] .table { color: var(--t-text); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--t-border); } html[data-theme="dark"] .table thead th { color: var(--t-text-strong); background: var(--t-bg-alt); border-color: var(--t-border); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(230, 237, 243, 0.02); } html[data-theme="dark"] .table-hover tbody tr:hover { background: rgba(230, 237, 243, 0.04); color: var(--t-text); } /* Badges */ html[data-theme="dark"] .badge-dark { background: #e6edf3; color: #0d1117; } html[data-theme="dark"] .badge-secondary { background: rgba(230, 237, 243, 0.12); color: var(--t-text-muted); } /* Breadcrumbs / nav pills */ html[data-theme="dark"] .nav-pills .nav-link { color: var(--t-text); } html[data-theme="dark"] .nav-pills .nav-link.active { background: var(--t-accent); color: #fff; } /* Buttons — global dark defaults */ html[data-theme="dark"] .btn-light { background: var(--t-bg-surface); border-color: var(--t-border-med); color: var(--t-text-strong); } html[data-theme="dark"] .btn-outline-secondary { border-color: var(--t-border-med); color: var(--t-text-strong); } html[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(230, 237, 243, 0.08); border-color: var(--t-border-med); color: var(--t-text-strong); } html[data-theme="dark"] .btn-dark { background: var(--t-bg-surface); border-color: var(--t-border-med); color: var(--t-text-strong); } html[data-theme="dark"] .btn-dark:hover { background: rgba(230, 237, 243, 0.1); border-color: var(--t-border-med); color: #fff; } /* Pagination */ html[data-theme="dark"] .page-link { background: var(--t-bg-surface); border-color: var(--t-border); color: var(--t-link); } html[data-theme="dark"] .page-item.active .page-link { background: var(--t-accent); border-color: var(--t-accent); } html[data-theme="dark"] .page-item.disabled .page-link { background: var(--t-bg-alt); border-color: var(--t-border); color: var(--t-text-faint); } /* ════════════════════════════════════════════════ 6. PAGE: HOMEPAGE (.tcp-home) ════════════════════════════════════════════════ */ /* Section backgrounds */ html[data-theme="dark"] .tcp-home #about-us, html[data-theme="dark"] .tcp-home #services, html[data-theme="dark"] .tcp-home #prices { background: var(--t-bg); } html[data-theme="dark"] .tcp-home #social-proof, html[data-theme="dark"] .tcp-home #about { background: var(--t-bg-alt); } html[data-theme="dark"] .tcp-home #contact { background: var(--t-bg-alt) !important; background-image: none !important; color: var(--t-text); padding: 4.5rem 0 !important; } html[data-theme="dark"] .tcp-home #contact h2 { color: var(--t-text-strong) !important; } html[data-theme="dark"] .tcp-home #contact p { color: var(--t-text) !important; } html[data-theme="dark"] .tcp-home #contact .tcp-contact-note { color: var(--t-text-faint) !important; } html[data-theme="dark"] .tcp-home #contact .tcp-contact-note a { color: var(--t-link) !important; } /* Section padding (already in style.css, but dark needs match) */ html[data-theme="dark"] .tcp-home #about-us, html[data-theme="dark"] .tcp-home #about, html[data-theme="dark"] .tcp-home #services, html[data-theme="dark"] .tcp-home #prices, html[data-theme="dark"] .tcp-home #social-proof { padding-top: 4.5rem; padding-bottom: 4.5rem; } @media (min-width: 992px) { html[data-theme="dark"] .tcp-home #about-us, html[data-theme="dark"] .tcp-home #about, html[data-theme="dark"] .tcp-home #services, html[data-theme="dark"] .tcp-home #prices, html[data-theme="dark"] .tcp-home #social-proof { padding-top: 5.5rem; padding-bottom: 5.5rem; } } /* About section */ html[data-theme="dark"] .tcp-home-about-us { background: var(--t-bg) !important; border: none !important; } html[data-theme="dark"] .tcp-home-about-us-h { color: var(--t-text-strong) !important; } html[data-theme="dark"] .tcp-home-about-us-body { color: var(--t-text-muted) !important; } /* Vanna strip */ html[data-theme="dark"] .tcp-home-vanna-slim { background: rgba(55, 138, 221, 0.06) !important; border-top: 1px solid rgba(55, 138, 221, 0.15) !important; border-bottom: 1px solid rgba(55, 138, 221, 0.15) !important; } html[data-theme="dark"] .tcp-home-vanna-slim-text { color: var(--t-text) !important; } html[data-theme="dark"] .tcp-home-vanna-slim-text strong { color: var(--t-text-strong); } html[data-theme="dark"] .tcp-home-vanna-slim-text a { color: var(--t-link); } /* Section typography */ html[data-theme="dark"] .tcp-home-section-title, html[data-theme="dark"] .tcp-home .section-title { color: var(--t-text-strong) !important; } html[data-theme="dark"] .tcp-home-section-lead { color: var(--t-text) !important; } html[data-theme="dark"] .tcp-home-tight-copy { color: var(--t-text) !important; } html[data-theme="dark"] #about h4 { color: var(--t-text-strong) !important; } /* Social proof — stats */ html[data-theme="dark"] .tcp-home-social { background: var(--t-bg-alt) !important; border: none !important; } html[data-theme="dark"] .tcp-home-stat-val { color: var(--t-accent); display: block; } html[data-theme="dark"] .tcp-home-stat-label { color: var(--t-text-muted); } /* Testimonial cards */ html[data-theme="dark"] .tcp-home-testimonial-card { background: var(--t-bg-surface); border: 1px solid var(--t-border); } html[data-theme="dark"] .tcp-home-testimonial-card p { color: var(--t-text); } html[data-theme="dark"] .tcp-home-testimonial-author { color: var(--t-text-muted); } html[data-theme="dark"] .tcp-home-testimonial-avatar { background: rgba(55, 138, 221, 0.2); color: var(--t-link); } /* Services — live feed mock (light + dark) */ .tcp-home-live-feed { background: var(--t-bg-subtle); border: 1px solid var(--t-border-med); border-radius: 10px; padding: 1.25rem; } .tcp-home-live-feed__label { color: var(--t-text-muted); } .tcp-home-live-feed__row { background: var(--t-bg-surface); border-radius: 6px; padding: 0.625rem 0.75rem; border-left: 3px solid; } .tcp-home-live-feed__row--exit { border-left-color: #16a34a; } .tcp-home-live-feed__row--entry { border-left-color: var(--t-accent); } .tcp-home-live-feed__time { color: var(--t-text-muted); } .tcp-home-live-feed__body { color: var(--t-text); } .tcp-home-live-feed__note { color: var(--t-text-muted); } .tcp-home-live-feed-wrap a.tcp-home-live-feed-link:hover .tcp-home-live-feed { border-color: rgba(6, 139, 234, 0.35); } .tcp-home-live-feed-cta { color: var(--t-link); } /* live feed is styled dark in both modes via style.css */ /* Checklist */ html[data-theme="dark"] .tcp-home-checklist li { color: var(--t-text) !important; } html[data-theme="dark"] .tcp-home-checklist .vi-check { color: var(--t-accent) !important; } /* Pricing */ html[data-theme="dark"] #prices { background: var(--t-bg) !important; background-image: none !important; color: var(--t-text); } html[data-theme="dark"] #prices .price-table { background: var(--t-bg-surface) !important; border: 1px solid var(--t-border) !important; border-radius: 12px; box-shadow: none !important; color: var(--t-text); } html[data-theme="dark"] #prices .price-table:hover { transform: none !important; box-shadow: none !important; } html[data-theme="dark"] #prices .price-table .header .title { color: var(--t-text-muted) !important; } html[data-theme="dark"] #prices .price-table .header .price { font-weight: 400 !important; color: var(--t-text-strong) !important; } html[data-theme="dark"] #prices .price-table .header .tcp-home-price-pro { color: #1ed760 !important; } html[data-theme="dark"] #prices .price-table .header h4 { color: var(--t-text-muted) !important; font-weight: 400 !important; } html[data-theme="dark"] #prices .price-table .tcp-home-price-note { color: var(--t-text-faint) !important; } html[data-theme="dark"] #prices .price-table ul { border-top: 1px solid var(--t-border); } html[data-theme="dark"] #prices .price-table ul li { color: var(--t-text) !important; } html[data-theme="dark"] #prices .price-table ul li::before { color: var(--t-accent); } html[data-theme="dark"] #prices .price-table .btn-primary { background: var(--t-accent) !important; border: none !important; color: #fff !important; } html[data-theme="dark"] #prices .price-table .btn-primary:hover { background: var(--t-accent-h) !important; } html[data-theme="dark"] #prices .price-table .btn-transparent { background: transparent !important; border: 1px solid var(--t-border-med) !important; color: var(--t-text-strong) !important; } html[data-theme="dark"] #prices .price-table .btn-transparent:hover { border-color: rgba(230, 237, 243, 0.4) !important; color: #fff !important; } html[data-theme="dark"] .tcp-home-price-featured { border-color: rgba(55, 138, 221, 0.4) !important; box-shadow: none !important; } html[data-theme="dark"] .tcp-home-price-badge { background: var(--t-accent) !important; color: #fff !important; } /* Pro services CTA */ html[data-theme="dark"] #services .btn-primary { background: var(--t-accent) !important; border-color: var(--t-accent) !important; border-radius: 8px; } html[data-theme="dark"] #services .btn-primary:hover { background: var(--t-accent-h) !important; border-color: var(--t-accent-h) !important; } /* Hero section contact buttons */ html[data-theme="dark"] .tcp-hero-pro__btn-primary { background: var(--t-accent); color: #fff !important; } html[data-theme="dark"] .tcp-hero-pro__btn-primary:hover { background: var(--t-accent-h); color: #fff !important; } html[data-theme="dark"] .tcp-hero-pro__btn-secondary { color: var(--t-text-strong) !important; border-color: var(--t-border-med); } html[data-theme="dark"] .tcp-hero-pro__btn-secondary:hover { border-color: rgba(230, 237, 243, 0.5); color: #fff !important; } /* ════════════════════════════════════════════════ 6b. GLOBAL: code / pre / popover ════════════════════════════════════════════════ */ html[data-theme="dark"] code { background: rgba(230, 237, 243, 0.08); color: #7eb8f7; padding: 0.1em 0.35em; border-radius: 4px; } html[data-theme="dark"] pre { background: var(--t-bg-surface) !important; border-color: var(--t-border) !important; color: var(--t-text); } html[data-theme="dark"] .popover { background: var(--t-bg-surface); border-color: var(--t-border); color: var(--t-text); } html[data-theme="dark"] .popover-header { background: var(--t-bg-alt); border-color: var(--t-border); color: var(--t-text-strong); } html[data-theme="dark"] .popover-body { color: var(--t-text); } html[data-theme="dark"] .popover .arrow::after { border-top-color: var(--t-bg-surface); } /* ════════════════════════════════════════════════ 7. PAGE: VANNA DASHBOARD ════════════════════════════════════════════════ */ /* Light mode: outline ticker pills use brand orange (same family as Go / btn-primary) */ .vanna-hero .btn-outline-primary { color: #fd8917 !important; border-color: #fd8917 !important; background: transparent !important; } .vanna-hero .btn-outline-primary:hover { background: rgba(253, 137, 23, 0.12) !important; color: #c65f0a !important; border-color: #e67a0f !important; } html[data-theme="dark"] .vanna-card { background: var(--t-bg-surface) !important; border-color: var(--t-border) !important; color: var(--t-text); } html[data-theme="dark"] .vanna-card h6 { color: var(--t-text-strong) !important; } html[data-theme="dark"] .metric-value { color: var(--t-accent) !important; } html[data-theme="dark"] .metric-insight { color: var(--t-text); border-top-color: var(--t-border) !important; } html[data-theme="dark"] .metric-insight-hint { color: var(--t-text-muted); } html[data-theme="dark"] .signals-cta-box { background: var(--t-bg-surface) !important; border-color: var(--t-border) !important; } html[data-theme="dark"] .signals-cta-text { color: var(--t-text); } html[data-theme="dark"] .signals-advice-box { background: rgba(55, 138, 221, 0.06) !important; border-left-color: var(--t-accent) !important; color: var(--t-text); } html[data-theme="dark"] .chart-login-overlay { background: rgba(13, 17, 23, 0.9) !important; } html[data-theme="dark"] .chart-login-overlay h5, html[data-theme="dark"] .chart-login-overlay p { color: var(--t-text-strong) !important; } /* Vanna hero (gradient kept; just lighten the text inputs) */ html[data-theme="dark"] .vanna-hero .form-control { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #fff !important; } html[data-theme="dark"] .vanna-hero .form-control::placeholder { color: rgba(255, 255, 255, 0.6); } /* Interesting / quick pick pills — match hero Go button (brand orange), not default blue outline */ html[data-theme="dark"] .vanna-hero .btn-outline-primary { color: #fd8917 !important; border-color: #fd8917 !important; background: transparent !important; } html[data-theme="dark"] .vanna-hero .btn-outline-primary:hover { background: rgba(253, 137, 23, 0.14) !important; border-color: #fd8917 !important; color: #fff !important; } html[data-theme="dark"] .vanna-card h5 { color: var(--t-text-strong) !important; } html[data-theme="dark"] .vanna-card small.text-muted { color: var(--t-text-muted) !important; } html[data-theme="dark"] .signal-badge.signal-very_strong, html[data-theme="dark"] .signal-badge.signal-strong { background: rgba(30, 215, 96, 0.2); color: #1ed760; } html[data-theme="dark"] .signal-badge.signal-moderate { background: rgba(253, 137, 23, 0.2); color: #f1a84e; } html[data-theme="dark"] .signal-badge.signal-weak { background: rgba(139, 148, 158, 0.15); color: var(--t-text-muted); } html[data-theme="dark"] .term-info { color: var(--t-text-muted); } /* ════════════════════════════════════════════════ 7b. PAGE: LIVE ALERTS ════════════════════════════════════════════════ */ html[data-theme="dark"] .live-trades-hero__title { color: var(--t-text-strong) !important; } html[data-theme="dark"] .live-trades-hero__lead { color: var(--t-text) !important; } /* Guest CTA card */ html[data-theme="dark"] .live-trades-guest { background: var(--t-bg-surface) !important; border-color: var(--t-border) !important; box-shadow: none !important; } html[data-theme="dark"] .live-trades-guest__title { color: var(--t-text-strong) !important; } html[data-theme="dark"] .live-trades-guest__text { color: var(--t-text) !important; } /* Loading */ html[data-theme="dark"] .live-trades-loading { color: var(--t-text); } /* Error state */ html[data-theme="dark"] .live-trades-error { background: rgba(244, 112, 103, 0.08) !important; border-color: rgba(244, 112, 103, 0.25) !important; color: #f47067 !important; } /* Empty state */ html[data-theme="dark"] .live-trades-empty { background: var(--t-bg-alt) !important; border-color: var(--t-border) !important; } html[data-theme="dark"] .live-trades-empty__icon { color: var(--t-text-faint) !important; } html[data-theme="dark"] .live-trades-empty__title { color: var(--t-text-strong) !important; } html[data-theme="dark"] .live-trades-empty__text { color: var(--t-text) !important; } /* Alert cards — base */ html[data-theme="dark"] .live-alert-card { background: var(--t-bg-surface) !important; border-color: var(--t-border) !important; box-shadow: none; } html[data-theme="dark"] .live-alert-card:hover { box-shadow: 0 4px 16px rgba(55, 138, 221, 0.1) !important; border-color: rgba(55, 138, 221, 0.25) !important; } /* Color-coded pair slots — boost opacity, end on surface not #fff */ html[data-theme="dark"] .live-alert-card--slot-0 { background: linear-gradient(90deg, rgba(37,99,235,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--slot-1 { background: linear-gradient(90deg, rgba(124,58,237,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--slot-2 { background: linear-gradient(90deg, rgba(219,39,119,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--slot-3 { background: linear-gradient(90deg, rgba(234,88,12,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--slot-4 { background: linear-gradient(90deg, rgba(5,150,105,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--slot-5 { background: linear-gradient(90deg, rgba(8,145,178,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--slot-6 { background: linear-gradient(90deg, rgba(202,138,4,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--slot-7 { background: linear-gradient(90deg, rgba(79,70,229,0.18) 0%, var(--t-bg-surface) 14px) !important; } html[data-theme="dark"] .live-alert-card--orphan-exit { background: var(--t-bg-alt) !important; border-color: rgba(139, 148, 158, 0.3) !important; } /* Badges */ html[data-theme="dark"] .live-alert-badge--entry { background: rgba(30, 215, 96, 0.15) !important; color: #1ed760 !important; } html[data-theme="dark"] .live-alert-badge--exit { background: rgba(244, 112, 103, 0.15) !important; color: #f47067 !important; } html[data-theme="dark"] .live-alert-badge--adjust { background: rgba(55, 138, 221, 0.15) !important; color: var(--t-link) !important; } html[data-theme="dark"] .live-alert-badge--other { background: rgba(139, 148, 158, 0.12) !important; color: var(--t-text-muted) !important; } /* Card text */ html[data-theme="dark"] .live-alert-ticker { color: var(--t-text-strong) !important; } html[data-theme="dark"] .live-alert-card__time, html[data-theme="dark"] .live-alert-card__route { color: var(--t-text-muted) !important; } html[data-theme="dark"] .live-alert-card__summary { color: var(--t-text) !important; } html[data-theme="dark"] .live-alert-discord-meta { color: var(--t-link) !important; } html[data-theme="dark"] .live-alert-discord, html[data-theme="dark"] .live-alert-discord strong { color: var(--t-text-strong) !important; } html[data-theme="dark"] .live-alert-parse-error { color: #f1a84e !important; background: rgba(241, 168, 78, 0.12) !important; } /* Details / raw pre */ html[data-theme="dark"] .live-alert-details { border-top-color: var(--t-border) !important; } html[data-theme="dark"] .live-alert-details__summary { color: var(--t-link) !important; } html[data-theme="dark"] .live-alert-pre { background: var(--t-bg) !important; border-color: var(--t-border) !important; color: var(--t-text); } /* Footer strip */ html[data-theme="dark"] .live-trades-footer { border-top-color: var(--t-border) !important; color: var(--t-text-faint) !important; } /* ════════════════════════════════════════════════ 7c. PAGE: TRADE IDEAS (Tailwind compiled bundle) Targets #trades-root; overrides the most common light Tailwind classes. Full parity needs a source rebuild with dark: variants. ════════════════════════════════════════════════ */ html[data-theme="dark"] #trades-root { background: var(--t-bg); color: var(--t-text-strong); } html[data-theme="dark"] #trades-root .bg-white { background-color: var(--t-bg-surface) !important; } html[data-theme="dark"] #trades-root .bg-white\/95 { background-color: rgba(22,27,34,0.95) !important; } html[data-theme="dark"] #trades-root .bg-white\/80 { background-color: rgba(22,27,34,0.8) !important; } html[data-theme="dark"] #trades-root .bg-white\/60 { background-color: rgba(22,27,34,0.6) !important; } html[data-theme="dark"] #trades-root .bg-gray-50\/80 { background-color: rgba(17,19,24,0.8) !important; } html[data-theme="dark"] #trades-root .bg-gray-50\/90 { background-color: rgba(17,19,24,0.9) !important; } html[data-theme="dark"] #trades-root .bg-slate-50\/90 { background-color: rgba(17,19,24,0.9) !important; } html[data-theme="dark"] #trades-root .bg-gray-100 { background-color: var(--t-bg-alt) !important; } html[data-theme="dark"] #trades-root .bg-gray-200 { background-color: var(--t-bg-subtle) !important; } html[data-theme="dark"] #trades-root .bg-gray-200\/80 { background-color: rgba(17,19,24,0.8) !important; } html[data-theme="dark"] #trades-root .bg-tcp-surface { background-color: var(--t-bg-surface) !important; } html[data-theme="dark"] #trades-root .bg-tcp-ink { background-color: var(--t-bg-surface) !important; } html[data-theme="dark"] #trades-root .text-tcp-ink { color: var(--t-text-strong) !important; } html[data-theme="dark"] #trades-root .text-slate-800 { color: var(--t-text-strong) !important; } html[data-theme="dark"] #trades-root .text-slate-700 { color: var(--t-text) !important; } html[data-theme="dark"] #trades-root .text-slate-600 { color: var(--t-text-muted) !important; } html[data-theme="dark"] #trades-root .text-slate-500 { color: var(--t-text-muted) !important; } html[data-theme="dark"] #trades-root .text-tcp-muted { color: var(--t-text-muted) !important; } html[data-theme="dark"] #trades-root .border-gray-100 { border-color: var(--t-border) !important; } html[data-theme="dark"] #trades-root .border-gray-200 { border-color: var(--t-border) !important; } html[data-theme="dark"] #trades-root .border-gray-200\/80 { border-color: var(--t-border) !important; } html[data-theme="dark"] #trades-root .border-gray-200\/90 { border-color: var(--t-border) !important; } html[data-theme="dark"] #trades-root .border-gray-300 { border-color: var(--t-border-med) !important; } html[data-theme="dark"] #trades-root .border-slate-200\/80 { border-color: var(--t-border) !important; } html[data-theme="dark"] #trades-root .ring-slate-200\/80 { --tw-ring-color: rgba(230,237,243,0.12) !important; } html[data-theme="dark"] #trades-root .hover\:bg-gray-50:hover { background-color: rgba(22,27,34,0.6) !important; } html[data-theme="dark"] #trades-root .hover\:bg-gray-100:hover { background-color: var(--t-bg-alt) !important; } html[data-theme="dark"] #trades-root .hover\:bg-gray-200:hover { background-color: var(--t-bg-subtle) !important; } html[data-theme="dark"] #trades-root .hover\:bg-sky-50:hover { background-color: rgba(55,138,221,0.1) !important; } /* Semantic color pills — keep their hue but lighten on dark bg */ html[data-theme="dark"] #trades-root .bg-emerald-50\/85, html[data-theme="dark"] #trades-root .bg-emerald-50\/95 { background-color: rgba(5,150,105,0.12) !important; } /* TrustScorecard wrapper uses bg-emerald-50/50 — render as neutral dark card in dark mode */ html[data-theme="dark"] #trades-root .bg-emerald-50\/50 { background-color: var(--t-bg-surface) !important; } html[data-theme="dark"] #trades-root .bg-emerald-100 { background-color: rgba(5,150,105,0.15) !important; } html[data-theme="dark"] #trades-root .bg-amber-50, html[data-theme="dark"] #trades-root .bg-amber-50\/80, html[data-theme="dark"] #trades-root .bg-amber-50\/95 { background-color: rgba(202,138,4,0.10) !important; } html[data-theme="dark"] #trades-root .bg-amber-100 { background-color: rgba(202,138,4,0.15) !important; } html[data-theme="dark"] #trades-root .bg-red-50, html[data-theme="dark"] #trades-root .bg-rose-50\/95 { background-color: rgba(220,53,69,0.10) !important; } html[data-theme="dark"] #trades-root .bg-sky-50\/70, html[data-theme="dark"] #trades-root .bg-sky-50\/80 { background-color: rgba(6,139,234,0.10) !important; } html[data-theme="dark"] #trades-root .bg-sky-100 { background-color: rgba(6,139,234,0.15) !important; } html[data-theme="dark"] #trades-root .text-emerald-900, html[data-theme="dark"] #trades-root .text-emerald-900\/80, html[data-theme="dark"] #trades-root .text-emerald-950 { color: #1ed760 !important; } html[data-theme="dark"] #trades-root .text-emerald-800 { color: #4ade80 !important; } /* TrustScorecard heading: bright green on a neutral card looks off — use strong text instead */ html[data-theme="dark"] #trades-root .bg-emerald-50\/50 .text-emerald-950 { color: var(--t-text-strong) !important; } html[data-theme="dark"] #trades-root .text-amber-900, html[data-theme="dark"] #trades-root .text-amber-950, html[data-theme="dark"] #trades-root .text-amber-950\/90 { color: #f1a84e !important; } html[data-theme="dark"] #trades-root .text-amber-800 { color: #fbbf24 !important; } html[data-theme="dark"] #trades-root .text-red-800, html[data-theme="dark"] #trades-root .text-red-900, html[data-theme="dark"] #trades-root .text-rose-950 { color: #f47067 !important; } html[data-theme="dark"] #trades-root .text-sky-900, html[data-theme="dark"] #trades-root .text-sky-950 { color: var(--t-link) !important; } /* border-emerald-200/80 is the TrustScorecard container border — neutral in dark mode */ html[data-theme="dark"] #trades-root .border-emerald-200\/80 { border-color: var(--t-border) !important; } /* 600 variants are semantic signal borders — keep the green accent */ html[data-theme="dark"] #trades-root .border-emerald-600\/45, html[data-theme="dark"] #trades-root .border-emerald-600\/50 { border-color: rgba(5,150,105,0.35) !important; } html[data-theme="dark"] #trades-root .border-amber-200, html[data-theme="dark"] #trades-root .border-amber-200\/90, html[data-theme="dark"] #trades-root .border-amber-300, html[data-theme="dark"] #trades-root .border-amber-600\/50 { border-color: rgba(202,138,4,0.35) !important; } html[data-theme="dark"] #trades-root .border-red-200, html[data-theme="dark"] #trades-root .border-rose-600\/50 { border-color: rgba(220,53,69,0.35) !important; } html[data-theme="dark"] #trades-root .border-sky-200\/80 { border-color: rgba(6,139,234,0.35) !important; } html[data-theme="dark"] #trades-root .bg-black\/40 { background-color: rgba(0,0,0,0.65) !important; } html[data-theme="dark"] #trades-root .bg-black\/50 { background-color: rgba(0,0,0,0.75) !important; } /* ════════════════════════════════════════════════ 8. PAGE: ACCOUNT (AUTH) PAGES ════════════════════════════════════════════════ */ html[data-theme="dark"] .tcp-auth-wrap { color: var(--t-text); } html[data-theme="dark"] .tcp-auth-wrap h1, html[data-theme="dark"] .tcp-auth-wrap h2, html[data-theme="dark"] .tcp-auth-wrap h3 { color: var(--t-text-strong) !important; } html[data-theme="dark"] .tcp-auth-wrap p, html[data-theme="dark"] .tcp-auth-wrap .text-muted { color: var(--t-text-muted) !important; } html[data-theme="dark"] .tcp-auth-wrap a { color: var(--t-link); } html[data-theme="dark"] .tcp-auth-wrap .btn-dark { background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: #fff !important; } html[data-theme="dark"] .tcp-auth-wrap .btn-dark:hover { background: var(--t-accent-h) !important; border-color: var(--t-accent-h) !important; } html[data-theme="dark"] .tcp-auth-wrap .login-or { border-color: var(--t-border) !important; color: var(--t-text-muted); } html[data-theme="dark"] .tcp-auth-wrap .secondaryAction { color: var(--t-link) !important; } /* Crispy forms / django-allauth field errors */ html[data-theme="dark"] .tcp-auth-wrap .invalid-feedback, html[data-theme="dark"] .tcp-auth-wrap .errorlist li { color: #f47067; } html[data-theme="dark"] .tcp-auth-wrap .is-invalid .form-control { border-color: rgba(244, 112, 103, 0.5) !important; } /* ════════════════════════════════════════════════ 9. PAGE: JOURNAL / PLAIN CONTENT PAGES ════════════════════════════════════════════════ */ html[data-theme="dark"] .container > article h2 { color: var(--t-text-strong); } html[data-theme="dark"] .container > article p { color: var(--t-text); } /* ════════════════════════════════════════════════ 10. THEME TOGGLE BUTTON ════════════════════════════════════════════════ */ .tcp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); background: transparent; color: #686b75; cursor: pointer; line-height: 1; flex-shrink: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; } .tcp-theme-toggle:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); } .tcp-theme-toggle .material-icons { font-size: 1.2rem; vertical-align: middle; line-height: 1; } html[data-theme="dark"] .tcp-theme-toggle { border-color: rgba(230, 237, 243, 0.2); color: var(--t-text-muted); } html[data-theme="dark"] .tcp-theme-toggle:hover { background: rgba(230, 237, 243, 0.07); border-color: rgba(230, 237, 243, 0.35); color: var(--t-text-strong); } /* Icon visibility — controlled by data-theme on , no JS needed */ .tcp-theme-toggle__icon-dark, .tcp-theme-toggle__icon-light { display: flex; align-items: center; justify-content: center; } html[data-theme="dark"] .tcp-theme-toggle__icon-light { display: none !important; } html[data-theme="light"] .tcp-theme-toggle__icon-dark { display: none !important; } /* Fallback: if no attribute set yet, hide the dark icon */ html:not([data-theme]) .tcp-theme-toggle__icon-dark { display: none !important; }