/* ========================================= DESIGN TOKENS ========================================= */ :root { --color-bg-light: #f9f9f9; --color-bg-dark: #1a1d23; --color-accent: #b3271d; --color-text-dark: #1a1d23; --color-text-light: #f9f9f9; --font-headline: 'Oswald', sans-serif; --font-body: 'Open Sans', sans-serif; --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: 1rem; --shadow-soft: 0 4px 12px rgba(0,0,0,.05); --shadow-medium: 0 6px 20px rgba(0,0,0,.1); /* Dark theme extras */ --color-surface-dark: #222733; --color-border-dark: rgba(255,255,255,.12); --shadow-soft-dark: 0 4px 16px rgba(0,0,0,.45); --shadow-medium-dark: 0 10px 30px rgba(0,0,0,.55); } /* ========================================= THEME SWITCH (enable with: ) ========================================= */ :root[data-theme="dark"] { --color-bg-light: #101318; /* page background in dark mode */ --color-text-dark: #f0f3f7; /* default text in dark mode */ --shadow-soft: var(--shadow-soft-dark); --shadow-medium: var(--shadow-medium-dark); } /* ========================================= GLOBAL RESETS ========================================= */ body { background-color: var(--color-bg-light); color: var(--color-text-dark); font-family: var(--font-body); line-height: 1.65; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); text-transform: uppercase; font-weight: 700; letter-spacing: .5px; color: var(--color-text-dark); } p, li { font-family: var(--font-body); font-size: 1.1rem; } .lead { font-size: 1.25rem; font-weight: 400; } /* Improve links in dark mode */ :root[data-theme="dark"] a { color: var(--color-text-dark); } :root[data-theme="dark"] a:hover { color: var(--color-accent); } /* ========================================= BUTTONS ========================================= */ .btn-primary { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; text-transform: uppercase; font-weight: 700; padding: .75rem 1.5rem; border-radius: var(--radius-sm); } .btn-primary:hover { background-color: #8f1f17 !important; border-color: #8f1f17 !important; } .btn-light { background-color: var(--color-text-light) !important; color: var(--color-bg-dark) !important; text-transform: uppercase; font-weight: 700; } /* In dark mode, "light" buttons should still look good */ :root[data-theme="dark"] .btn-light { background-color: #e9eef5 !important; color: #0f1217 !important; } .btn-outline-primary { border-color: var(--color-accent) !important; color: var(--color-accent) !important; text-transform: uppercase; font-weight: 700; } .btn-outline-primary:hover { background-color: var(--color-accent) !important; color: var(--color-text-light) !important; } /* ========================================= NAVBAR ========================================= */ .navbar-dark { background-color: var(--color-bg-dark) !important; } .navbar-dark .navbar-brand { font-family: var(--font-headline); text-transform: uppercase; font-weight: 700; color: var(--color-text-light) !important; } .navbar-dark .nav-link { color: var(--color-text-light) !important; font-weight: 600; } .navbar-dark .nav-link:hover { color: var(--color-accent) !important; } /* If you use navbar-light, make it dark in dark theme */ :root[data-theme="dark"] .navbar.navbar-light, :root[data-theme="dark"] .navbar.navbar-expand-lg.navbar-light { background-color: var(--color-bg-dark) !important; } :root[data-theme="dark"] .navbar.navbar-light .navbar-brand, :root[data-theme="dark"] .navbar.navbar-light .nav-link { color: var(--color-text-light) !important; } :root[data-theme="dark"] .navbar.navbar-light .nav-link:hover { color: var(--color-accent) !important; } :root[data-theme="dark"] .navbar.navbar-light .navbar-toggler { border-color: rgba(255,255,255,.25); } :root[data-theme="dark"] .navbar.navbar-light .navbar-toggler-icon { filter: invert(1); } /* Dropdowns in dark mode */ :root[data-theme="dark"] .dropdown-menu { background-color: var(--color-surface-dark); border-color: var(--color-border-dark); } :root[data-theme="dark"] .dropdown-item { color: var(--color-text-dark); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255,255,255,.06); color: var(--color-text-dark); } /* ========================================= CARDS ========================================= */ .card { border: none !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-soft); padding: 2rem; background-color: var(--color-bg-light); } .card-title { font-family: var(--font-headline); text-transform: uppercase; font-weight: 700; } :root[data-theme="dark"] .card { background-color: var(--color-surface-dark); color: var(--color-text-dark); border: 1px solid var(--color-border-dark) !important; } /* ========================================= FORMS ========================================= */ .form-label { font-family: var(--font-headline); text-transform: uppercase; font-weight: 700; } .form-control { border-radius: var(--radius-sm); padding: .75rem 1rem; border: 1px solid #ddd; } .form-control:focus { border-color: var(--color-accent); box-shadow: 0 0 0 .25rem rgba(179,39,29,.25); } :root[data-theme="dark"] .form-control { background-color: #151a22; border-color: var(--color-border-dark); color: var(--color-text-dark); } :root[data-theme="dark"] .form-control::placeholder { color: rgba(240,243,247,.6); } /* ========================================= ACCORDION ========================================= */ .accordion-button { font-family: var(--font-headline); text-transform: uppercase; font-weight: 700; background-color: var(--color-bg-light); color: var(--color-text-dark); } .accordion-button:not(.collapsed) { color: var(--color-accent); background-color: #fff4f3; } :root[data-theme="dark"] .accordion-item { background-color: var(--color-surface-dark); border-color: var(--color-border-dark); } :root[data-theme="dark"] .accordion-button { background-color: var(--color-surface-dark); color: var(--color-text-dark); } :root[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(179,39,29,.15); } /* ========================================= BADGES ========================================= */ .badge-accent { background-color: var(--color-accent); color: var(--color-text-light); padding: .5rem .75rem; border-radius: var(--radius-sm); font-weight: 700; text-transform: uppercase; } /* ========================================= TESTIMONIALS ========================================= */ .testimonial { background-color: var(--color-bg-light); padding: 2rem; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .testimonial p { font-style: italic; } .testimonial .name { font-weight: 700; text-transform: uppercase; margin-top: 1rem; } :root[data-theme="dark"] .testimonial { background-color: var(--color-surface-dark); border: 1px solid var(--color-border-dark); } /* ========================================= SECTIONS ========================================= */ .section-dark { background-color: var(--color-bg-dark); color: var(--color-text-light); } .section-light { background-color: var(--color-bg-light); color: var(--color-text-dark); } .cta-block { background-color: var(--color-accent); color: var(--color-text-light); padding: 4rem 2rem; text-align: center; } .cta-block h2 { color: var(--color-text-light); } /* ========================================= HERO ========================================= */ .hero-dark { background-color: var(--color-bg-dark); color: var(--color-text-light); padding: 5rem 0; text-align: center; } /* ========================================= FOOTER ========================================= */ footer { background-color: var(--color-bg-dark); color: var(--color-text-light); text-align: center; padding: 2rem 0; } /* ========================================= UTILITIES ========================================= */ .bg-accent { background-color: var(--color-accent) !important; } .text-accent { color: var(--color-accent) !important; } .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-md { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .shadow-soft { box-shadow: var(--shadow-soft) !important; } .shadow-medium { box-shadow: var(--shadow-medium) !important; }