/* ============================================================================ Color Themes — Bravo Landing Page ============================================================================ Default is Midnight (the current dark theme from style.css :root). Applied via data-theme attribute on . ============================================================================ */ /* ─── Daylight (Light Theme) ───────────────────────────────────────────────── Clean light backgrounds + teal accent. Best for: bright environments. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daylight"] { --bg-deep: #F0F0F0; --bg-body: #F7F7F7; --bg-card: #ffffff; --bg-card-hover: #F0F4F2; --bg-surface: #EDEDED; --border-subtle: rgba(38, 185, 154, 0.15); --border-glow: rgba(38, 185, 154, 0.3); --emerald: #26B99A; --emerald-light: #1ABB9C; --emerald-dark: #169F85; --emerald-glow: rgba(38, 185, 154, 0.1); --text-primary: #2A3F54; --text-secondary:#5A738E; --text-muted: #93A5B8; --text-bright: #1A2A3A; } [data-theme="daylight"] body { background: #F0F0F0; color: #2A3F54; } /* Nav */ [data-theme="daylight"] .bravo-nav.scrolled { background: rgba(247, 247, 247, 0.92); border-bottom-color: #E6E9ED; } [data-theme="daylight"] .nav-logo-img { filter: brightness(0) saturate(100%) invert(18%) sepia(15%) saturate(900%) hue-rotate(170deg); } [data-theme="daylight"] .nav-links a { color: #5A738E; } [data-theme="daylight"] .nav-links a:hover { color: #26B99A; } [data-theme="daylight"] .nav-cta { background: #26B99A !important; color: #fff !important; } [data-theme="daylight"] .nav-cta:hover { background: #169F85 !important; } /* Mobile menu */ [data-theme="daylight"] .mobile-menu { background: rgba(247, 247, 247, 0.96); border-top-color: #E6E9ED; } [data-theme="daylight"] .mobile-menu a { color: #5A738E; border-bottom-color: #E6E9ED; } [data-theme="daylight"] .mobile-toggle span { background: #2A3F54; } /* Hero */ [data-theme="daylight"] .hero::before { background: radial-gradient(circle, rgba(38, 185, 154, 0.08) 0%, transparent 70%); } [data-theme="daylight"] .hero::after { background-image: linear-gradient(rgba(38, 185, 154, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 185, 154, 0.05) 1px, transparent 1px); } [data-theme="daylight"] .hero-badge { color: #26B99A; border-color: rgba(38, 185, 154, 0.3); background: rgba(38, 185, 154, 0.08); } [data-theme="daylight"] .hero h1 .accent { color: #26B99A; } /* Buttons */ [data-theme="daylight"] .btn-primary-bravo { background: #26B99A; color: #fff; } [data-theme="daylight"] .btn-primary-bravo:hover { background: #169F85; color: #fff; box-shadow: 0 8px 30px rgba(38, 185, 154, 0.2); } [data-theme="daylight"] .btn-outline-bravo { color: #5A738E; border-color: #D9DEE4; } [data-theme="daylight"] .btn-outline-bravo:hover { color: #26B99A; border-color: #26B99A; background: rgba(38, 185, 154, 0.06); } /* Sections */ [data-theme="daylight"] .section-label { color: #26B99A; } [data-theme="daylight"] .divider { background: linear-gradient(90deg, transparent, #E6E9ED, transparent); } /* Product cards */ [data-theme="daylight"] .product-card { background: #ffffff; border-color: #E6E9ED; } [data-theme="daylight"] .product-card:hover { border-color: rgba(38, 185, 154, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 40px rgba(38, 185, 154, 0.06); } [data-theme="daylight"] .product-card::before { background: linear-gradient(90deg, #26B99A, #1ABB9C); } [data-theme="daylight"] .product-icon { background: rgba(38, 185, 154, 0.08); border-color: rgba(38, 185, 154, 0.2); } [data-theme="daylight"] .product-icon { color: #26B99A; } [data-theme="daylight"] .product-features li::before { background: #26B99A; } [data-theme="daylight"] .badge-live { background: rgba(38, 185, 154, 0.1); color: #169F85; border-color: rgba(38, 185, 154, 0.25); } [data-theme="daylight"] .badge-soon { background: rgba(0, 0, 0, 0.04); color: #93A5B8; border-color: #E6E9ED; } /* Process steps */ [data-theme="daylight"] .step-number { color: #26B99A; } [data-theme="daylight"] .connector-line { background: linear-gradient(90deg, #E6E9ED, #26B99A, #E6E9ED); } /* Industry chips */ [data-theme="daylight"] .industry-chip { background: #ffffff; border-color: #E6E9ED; color: #2A3F54; } [data-theme="daylight"] .industry-chip:hover { border-color: rgba(38, 185, 154, 0.3); background: #F0FAF6; } [data-theme="daylight"] .chip-icon { background: rgba(38, 185, 154, 0.08); } [data-theme="daylight"] .chip-icon { color: #26B99A; } /* Certification */ [data-theme="daylight"] .cert-certified .cert-badge { background: rgba(38, 185, 154, 0.08); border-color: #26B99A; color: #26B99A; } /* About */ [data-theme="daylight"] .about-quote { border-left-color: #26B99A; } /* Contact form */ [data-theme="daylight"] #contact::before { background: radial-gradient(circle, rgba(38, 185, 154, 0.06) 0%, transparent 70%); } [data-theme="daylight"] .contact-form { background: #ffffff; border-color: #E6E9ED; } [data-theme="daylight"] .form-control-bravo { background: #F7F7F7; border-color: #D9DEE4; color: #2A3F54; } [data-theme="daylight"] .form-control-bravo::placeholder { color: #93A5B8; } [data-theme="daylight"] .form-control-bravo:focus { background: #ffffff; border-color: #26B99A; box-shadow: 0 0 0 3px rgba(38, 185, 154, 0.12); color: #2A3F54; } [data-theme="daylight"] .form-control-bravo option { background: #ffffff; color: #2A3F54; } /* Footer */ [data-theme="daylight"] .bravo-footer { background: #F0F0F0; border-top-color: #E6E9ED; } [data-theme="daylight"] .footer-logo-img { filter: brightness(0) saturate(100%) invert(18%) sepia(15%) saturate(900%) hue-rotate(170deg); } [data-theme="daylight"] .footer-links a { color: #73879C; } [data-theme="daylight"] .footer-links a:hover { color: #26B99A; } [data-theme="daylight"] .footer-tagline, [data-theme="daylight"] .footer-copy { color: #93A5B8; } [data-theme="daylight"] .form-feedback.success { background: rgba(38, 185, 154, 0.08); border-color: rgba(38, 185, 154, 0.2); color: #169F85; } /* Selection */ [data-theme="daylight"] ::selection { background: #26B99A; color: #fff; } /* ─── Night Forest (Bravo Style) ───────────────────────────────────────────── Deep dark greens + emerald accent. Best for: dark rooms. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="night-forest"] { --bg-deep: #060A08; --bg-body: #0A0F0C; --bg-card: #111A15; --bg-card-hover: #162019; --bg-surface: #1A2620; --border-subtle: rgba(16, 185, 129, 0.12); --border-glow: rgba(16, 185, 129, 0.25); --emerald: #10B981; --emerald-light: #34D399; --emerald-dark: #059669; --emerald-glow: rgba(16, 185, 129, 0.15); --text-primary: #E4F0E8; --text-secondary:#8FA89A; --text-muted: #5C7A6A; --text-bright: #FFFFFF; } /* Night Forest is identical to the base :root defaults — no extra overrides needed */ /* ─── Midnight (Electric Blue / OLED) ──────────────────────────────────────── Near-black with electric blue accent. Best for: OLED & pitch dark. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="midnight"] { --bg-deep: #06060A; --bg-body: #0A0C14; --bg-card: #111118; --bg-card-hover: #161620; --bg-surface: #1A1A26; --border-subtle: rgba(37, 99, 235, 0.12); --border-glow: rgba(37, 99, 235, 0.25); --emerald: #2563EB; --emerald-light: #60A5FA; --emerald-dark: #1D4ED8; --emerald-glow: rgba(37, 99, 235, 0.15); --text-primary: #E0E4F0; --text-secondary:#7A82A0; --text-muted: #4A5070; --text-bright: #FFFFFF; } [data-theme="midnight"] body { background: #06060A; } [data-theme="midnight"] .hero::before { background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%); } [data-theme="midnight"] .hero::after { background-image: linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px); } [data-theme="midnight"] .product-icon, [data-theme="midnight"] .chip-icon { color: #60A5FA; } [data-theme="midnight"] .product-features li::before { background: #2563EB; } [data-theme="midnight"] .badge-live { background: rgba(37, 99, 235, 0.15); color: #60A5FA; border-color: rgba(37, 99, 235, 0.25); } [data-theme="midnight"] .cert-certified .cert-badge { background: rgba(37, 99, 235, 0.1); border-color: #2563EB; color: #2563EB; } [data-theme="midnight"] #contact::before { background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%); } [data-theme="midnight"] ::selection { background: #2563EB; color: #fff; } /* ─── Warm Dusk (Amber / Low Blue Light) ───────────────────────────────────── Warm dark tones + amber/gold accent. Best for: evening, eye comfort. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="warm-dusk"] { --bg-deep: #0A0908; --bg-body: #0F0D0B; --bg-card: #1C1816; --bg-card-hover: #221E1A; --bg-surface: #252018; --border-subtle: rgba(232, 155, 58, 0.12); --border-glow: rgba(232, 155, 58, 0.25); --emerald: #E89B3A; --emerald-light: #F0B860; --emerald-dark: #D08530; --emerald-glow: rgba(232, 155, 58, 0.15); --text-primary: #E8DFD4; --text-secondary:#8A7E6E; --text-muted: #5A5040; --text-bright: #FFFFFF; } [data-theme="warm-dusk"] body { background: #0A0908; } [data-theme="warm-dusk"] .hero::before { background: radial-gradient(circle, rgba(232, 155, 58, 0.08) 0%, transparent 70%); } [data-theme="warm-dusk"] .hero::after { background-image: linear-gradient(rgba(232, 155, 58, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 155, 58, 0.03) 1px, transparent 1px); } [data-theme="warm-dusk"] .product-icon, [data-theme="warm-dusk"] .chip-icon { color: #F0B860; } [data-theme="warm-dusk"] .product-features li::before { background: #E89B3A; } [data-theme="warm-dusk"] .badge-live { background: rgba(232, 155, 58, 0.15); color: #F0B860; border-color: rgba(232, 155, 58, 0.25); } [data-theme="warm-dusk"] .cert-certified .cert-badge { background: rgba(232, 155, 58, 0.1); border-color: #E89B3A; color: #E89B3A; } [data-theme="warm-dusk"] #contact::before { background: radial-gradient(circle, rgba(232, 155, 58, 0.06) 0%, transparent 70%); } [data-theme="warm-dusk"] ::selection { background: #E89B3A; color: #0A0908; } /* ============================================================================ Theme Selector Card Styles (shared across all Bravo projects) ============================================================================ */ .theme-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 12px; } .theme-card { position: relative; border: 2px solid var(--border-subtle); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; background: var(--bg-card); } .theme-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .theme-card.active { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-glow); } .theme-card .theme-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--emerald); display: none; align-items: center; justify-content: center; } .theme-card.active .theme-check { display: flex; } .theme-card .theme-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; color: var(--text-primary); } .theme-card .theme-desc { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.4; } .theme-preview { height: 48px; border-radius: 8px; display: flex; overflow: hidden; border: 1px solid rgba(128, 128, 128, 0.15); margin-bottom: 10px; } .theme-preview-sidebar { width: 28%; display: flex; flex-direction: column; justify-content: center; padding: 4px 6px; gap: 3px; } .theme-preview-sidebar span { display: block; height: 3px; border-radius: 2px; opacity: 0.5; } .theme-preview-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6px 8px; gap: 4px; } .theme-preview-content span { display: block; height: 3px; border-radius: 2px; opacity: 0.4; } .theme-preview-content span:first-child { width: 60%; height: 4px; opacity: 0.7; } .theme-best-for { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; } .theme-best-for svg { opacity: 0.6; } /* ─── Theme toggle button (nav) ──────────────────────────────────────────── */ .theme-toggle-btn { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 6px; padding: 5px 8px; cursor: pointer; transition: border-color 0.2s, color 0.2s; line-height: 1; display: flex; align-items: center; } .theme-toggle-btn:hover { border-color: var(--emerald); color: var(--emerald); } /* Daylight overrides for theme toggle */ [data-theme="daylight"] .theme-toggle-btn { border-color: #D9DEE4; color: #5A738E; } [data-theme="daylight"] .theme-toggle-btn:hover { border-color: #26B99A; color: #26B99A; }