/* * Black and gold premium theme override, scoped entirely to body.theme-noir * so it never affects any page that shares style.css but does not load this * file or carry the class. Used by index.html and dashboard.html. * * To revert either page to the original blue and white theme, remove this * file's tag and the "theme-noir" class from that page's . * No changes were made to style.css itself. */ body.theme-noir { --blue: #d4af37; --blue-dark: #b8901f; --blue-light: #211b0e; --ink: #f2ede0; --ink-soft: #b7ae9c; --ink-faint: #7d7566; --border: #2a2620; --white: #141210; --surface: #100e0c; background: #0a0908; } /* ---------- Header ---------- */ body.theme-noir .site-header { background: rgba(10, 9, 8, 0.86); } /* ---------- Buttons ---------- */ body.theme-noir .btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(212, 175, 55, 0.22); } body.theme-noir .btn-primary:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(212, 175, 55, 0.32); } body.theme-noir .btn-on-dark { background: var(--blue); color: #0a0908; } body.theme-noir .btn-on-dark:hover { background: var(--blue-dark); } /* ---------- Hero ---------- */ body.theme-noir .hero-glow { background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.12), transparent 70%); } body.theme-noir .video-frame { background: linear-gradient(150deg, #050403 0%, #1a1610 55%, #050403 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 40px 80px rgba(212, 175, 55, 0.16); } /* ---------- Video testimonials ---------- */ body.theme-noir .video-testimonial-frame { background: linear-gradient(150deg, #050403 0%, #1a1610 60%, #050403 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(212, 175, 55, 0.12); } /* ---------- Pricing (premium focal point) ---------- */ body.theme-noir .price { color: var(--blue); } body.theme-noir .pricing-card { border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(212, 175, 55, 0.08); } /* ---------- Final CTA ---------- Kept as a near black section instead of a full gold fill, gold stays reserved for the button and the highlight color, not the background. */ body.theme-noir .final-cta { background: #050403; color: var(--ink); } body.theme-noir .final-cta h2 { color: var(--ink); } body.theme-noir .final-cta .lead { color: rgba(242, 237, 224, 0.78); } /* ---------- Login modal ---------- */ body.theme-noir .modal-overlay { background: rgba(0, 0, 0, 0.78); } body.theme-noir .field-input:focus { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); } body.theme-noir .form-error { color: #f87171; background: rgba(220, 38, 38, 0.14); } body.theme-noir .form-success { color: #4ade80; background: rgba(34, 197, 94, 0.14); } /* ---------- Chat-style FAQ widget ---------- */ body.theme-noir .chat-toggle { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(212, 175, 55, 0.3); } /* ---------- Batman Protocol companion app ---------- Deliberate purple product-showcase moment, isolated to this section only, so it reads as a distinct but connected featured app rather than a clash. The gradient fades from the page's own black at the top and bottom edges into a purple-tinted center, so entry and exit stay smooth, not jarring. */ body.theme-noir .batman-section { position: relative; background: linear-gradient(180deg, #0a0908 0%, #150c26 18%, #170d2b 50%, #150c26 82%, #0a0908 100%); border-top: 1px solid rgba(124, 58, 237, 0.25); border-bottom: 1px solid rgba(124, 58, 237, 0.25); } body.theme-noir .batman-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 56px; } body.theme-noir .batman-content { text-align: left; } body.theme-noir .batman-eyebrow { display: inline-block; color: #c4b5fd; background: rgba(124, 58, 237, 0.14); border: 1px solid rgba(124, 58, 237, 0.35); } body.theme-noir .batman-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.3; } body.theme-noir .batman-title .batman-highlight { color: #a78bfa; } body.theme-noir .batman-lead { max-width: 480px; color: var(--ink-soft); } body.theme-noir .batman-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(124, 58, 237, 0.25); } body.theme-noir .batman-stat { display: flex; flex-direction: column; gap: 4px; } body.theme-noir .batman-stat-number { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: #a78bfa; } body.theme-noir .batman-stat-label { font-size: 0.8rem; color: var(--ink-faint); } body.theme-noir .batman-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } body.theme-noir .batman-btn { background: #7c3aed; color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(124, 58, 237, 0.4); } body.theme-noir .batman-btn:hover { background: #6d28d9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(124, 58, 237, 0.5); } body.theme-noir .batman-btn-outline { background: transparent; color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.5); } body.theme-noir .batman-btn-outline:hover { background: rgba(124, 58, 237, 0.12); border-color: #7c3aed; color: #ffffff; } body.theme-noir .batman-trust { margin-top: 16px; font-size: 0.85rem; color: var(--ink-faint); } /* ---------- Batman Protocol mock UI card ---------- */ body.theme-noir .batman-mock-card { position: relative; padding: 28px; background: linear-gradient(160deg, #150e24 0%, #0f0a1c 100%); border: 1px solid rgba(124, 58, 237, 0.35); border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(124, 58, 237, 0.12); } body.theme-noir .batman-mock-chrome { display: flex; gap: 6px; margin-bottom: 24px; } body.theme-noir .batman-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(124, 58, 237, 0.35); } body.theme-noir .batman-mock-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0 24px; text-align: center; } body.theme-noir .batman-mock-score-number { font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #a78bfa; } body.theme-noir .batman-mock-score-label { font-size: 0.8rem; color: var(--ink-faint); } body.theme-noir .batman-mock-xp { margin-top: 4px; } body.theme-noir .batman-mock-xp-row { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; } body.theme-noir .batman-mock-xp-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(124, 58, 237, 0.16); overflow: hidden; } body.theme-noir .batman-mock-xp-fill { width: 82%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a78bfa); } body.theme-noir .batman-mock-row { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(124, 58, 237, 0.2); font-size: 0.85rem; font-weight: 600; color: var(--ink); } body.theme-noir .batman-mock-days { display: flex; gap: 8px; margin-top: 20px; } body.theme-noir .batman-day { flex: 1; height: 22px; border-radius: 6px; background: transparent; border: 1px solid rgba(124, 58, 237, 0.3); } body.theme-noir .batman-day.is-done { background: #7c3aed; border-color: #7c3aed; } @media (max-width: 900px) { body.theme-noir .batman-grid { grid-template-columns: 1fr; gap: 40px; } body.theme-noir .batman-content { text-align: center; } body.theme-noir .batman-lead { margin-left: auto; margin-right: auto; } body.theme-noir .batman-stats { justify-content: center; } body.theme-noir .batman-stat { align-items: center; } body.theme-noir .batman-actions { justify-content: center; } body.theme-noir .batman-mock-card { max-width: 420px; margin: 0 auto; } } /* ---------- Dashboard (members area) ---------- .dashboard-header has a hardcoded translucent white background in style.css (meant for the light theme), so it needs an explicit dark override here, the same way .site-header does on the sales page. */ body.theme-noir .dashboard-header { background: rgba(10, 9, 8, 0.9); } body.theme-noir .dashboard-loading { background: #0a0908; } body.theme-noir .course-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.3); } body.theme-noir .course-card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.25); } body.theme-noir .sidebar-logout-btn:hover { color: #f87171; } body.theme-noir .dash-nav-item.active { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12); } /* ---------- Community feed ---------- Reuses the site's gold accent for buttons, borders and avatars via the variables above. This block only covers the couple of cases where style.css hardcodes a light-theme-only color that would otherwise be unreadable against a near black card (dark red on near black). */ body.theme-noir .community-composer, body.theme-noir .community-post { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.35); } body.theme-noir .community-post-btn { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(212, 175, 55, 0.22); } body.theme-noir .community-avatar { box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12); } body.theme-noir .community-post-delete:hover, body.theme-noir .whatsnew-post-delete:hover, body.theme-noir .category-manage-item-delete:hover { background: rgba(248, 113, 113, 0.14); color: #f87171; } body.theme-noir .whatsnew-post { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.35); } body.theme-noir .whatsnew-composer { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.35); }