/* * Project design system. Loaded last in every public/user/auth layout's * so it overrides Bootstrap and the older site stylesheets. * * Token source of truth — keep these in sync with any new components. */ :root { --bg: #0b1220; --panel: #0f1a2d; --card: #111f36; --muted: #9fb2d0; --text: #e9f1ff; --line: rgba(255, 255, 255, 0.08); --accent: #22c55e; /* green */ --accent2: #60a5fa; /* blue */ --warn: #fbbf24; --radius: 16px; --logo-gradient: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(96, 165, 250, 0.95)); --primary-gradient: linear-gradient(180deg, rgba(34, 197, 94, 0.95), rgba(34, 197, 94, 0.72)); --primary-gradient-hover: linear-gradient(180deg, rgba(34, 197, 94, 1), rgba(34, 197, 94, 0.85)); --ghost-border: rgba(96, 165, 250, 0.35); --ghost-border-hover: rgba(96, 165, 250, 0.65); /* Map onto Bootstrap's dark-mode CSS variables so anything referencing * `var(--bs-body-bg)` / `var(--bs-body-color)` / `--bs-border-color` * picks the new palette automatically. */ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-link-color: #93c5fd; --bs-link-hover-color: #bfdbfe; } html, body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { /* The full radial-gradient hero per the design tokens. */ background: radial-gradient(1000px 600px at 10% -10%, rgba(96, 165, 250, 0.25), transparent 60%), radial-gradient(900px 600px at 90% 0%, rgba(34, 197, 94, 0.22), transparent 55%), radial-gradient(900px 700px at 50% 120%, rgba(34, 197, 94, 0.12), transparent 55%), var(--bg) !important; background-attachment: fixed; color: var(--text) !important; } h1, h2, h3, h4, h5, h6 { color: var(--text); } p, li, span, label, dt, dd, td, th { color: inherit; } .text-muted, small.text-body-secondary, .text-body-secondary, .text-secondary { color: var(--muted) !important; } a { color: var(--accent2); text-decoration: none; } a:hover, a:focus { color: #bfdbfe; } hr, .dropdown-divider { border-color: var(--line); } /* ============================================================ * Cards * ============================================================ */ .card, .modal-content, .list-group-item, .toast { background-color: var(--card) !important; color: var(--text); border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); } .card-header, .card-footer { background-color: rgba(255, 255, 255, 0.02); border-color: var(--line); color: var(--text); } /* "Panel" — slightly softer than card, used for nav/grouped surfaces. */ .bg-body, .bg-body-tertiary, .bg-body-secondary, .bg-light, .bg-white { background-color: var(--panel) !important; color: var(--text) !important; } /* ============================================================ * Navbar — sticky, blurred, translucent panel * ============================================================ */ .navbar { background-color: rgba(11, 18, 32, 0.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .navbar.sticky-top, .sticky-top > .navbar, header.sticky-top { position: sticky; top: 0; z-index: 1030; } .navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text { color: var(--text); } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: var(--accent2) !important; } /* ============================================================ * Buttons * ============================================================ */ .btn { border-radius: 12px; font-weight: 600; transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:active { transform: translateY(1px); } /* Primary / success → green gradient with dark text. */ .btn-primary, .btn-success { background: var(--primary-gradient) !important; background-color: var(--accent) !important; border: 1px solid rgba(34, 197, 94, 0.65) !important; color: #031008 !important; box-shadow: 0 6px 20px rgba(34, 197, 94, 0.25); } .btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus { background: var(--primary-gradient-hover) !important; color: #031008 !important; box-shadow: 0 8px 26px rgba(34, 197, 94, 0.35); } .btn-primary:disabled, .btn-success:disabled, .btn-primary.disabled, .btn-success.disabled { background: rgba(34, 197, 94, 0.45) !important; color: rgba(3, 16, 8, 0.7) !important; } /* Outline / secondary → blue-tinted ghost button. */ .btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-light, .btn-secondary, .btn-light { background: transparent !important; color: var(--text) !important; border: 1px solid var(--ghost-border) !important; box-shadow: none; } .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline-light:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:focus, .btn-outline-secondary:focus, .btn-outline-info:focus, .btn-outline-light:focus, .btn-secondary:focus, .btn-light:focus { background: rgba(96, 165, 250, 0.1) !important; color: var(--text) !important; border-color: var(--ghost-border-hover) !important; } /* Custom escape hatch if you want to opt-in to a literal "ghost" CTA. */ .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--ghost-border); border-radius: 12px; font-weight: 600; padding: 0.45rem 1rem; } .btn-ghost:hover, .btn-ghost:focus { border-color: var(--ghost-border-hover); background: rgba(96, 165, 250, 0.1); color: var(--text); } .btn-warning { background: var(--warn) !important; border-color: var(--warn) !important; color: #1a1300 !important; } .btn-danger { background: linear-gradient(180deg, #f87171, #ef4444) !important; border-color: rgba(239, 68, 68, 0.65) !important; color: #1a0303 !important; } /* ============================================================ * Forms * ============================================================ */ .form-control, .form-select, textarea.form-control, input[type="text"]:not(.no-ds), input[type="email"]:not(.no-ds), input[type="password"]:not(.no-ds), input[type="number"]:not(.no-ds), input[type="search"]:not(.no-ds), input[type="tel"]:not(.no-ds), input[type="url"]:not(.no-ds) { background-color: rgba(11, 18, 32, 0.6); color: var(--text); border: 1px solid var(--line); border-radius: 12px; } .form-control:focus, .form-select:focus, textarea.form-control:focus, input:focus:not(.no-ds) { background-color: rgba(11, 18, 32, 0.85); color: var(--text); border-color: var(--ghost-border-hover); box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.15); } .form-control::placeholder, .form-select::placeholder, textarea.form-control::placeholder { color: rgba(159, 178, 208, 0.55); } .form-label, .form-check-label { color: var(--text); } /* Make checkboxes/radios sit on the dark background. */ .form-check-input { background-color: rgba(11, 18, 32, 0.6); border-color: var(--line); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } /* ============================================================ * Tables * ============================================================ */ .table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(96, 165, 250, 0.08); } .table thead th, .table > thead { background-color: rgba(15, 26, 45, 0.85); color: var(--text); border-color: var(--line); } .table tbody td, .table tbody th { border-color: var(--line); } .table-dark { --bs-table-bg: rgba(15, 26, 45, 0.95); --bs-table-color: var(--text); --bs-table-border-color: var(--line); } /* ============================================================ * Dropdowns / popovers / tooltips * ============================================================ */ .dropdown-menu { background-color: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); } .dropdown-item { color: var(--text); } .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { background-color: rgba(96, 165, 250, 0.12); color: var(--text); } .popover { background-color: var(--panel); border-color: var(--line); color: var(--text); } .tooltip-inner { background-color: var(--panel); color: var(--text); } /* ============================================================ * Alerts / badges / pills * ============================================================ */ .alert { border-radius: 12px; border: 1px solid var(--line); } .alert-success { background: rgba(34, 197, 94, 0.12); color: #d1fae5; border-color: rgba(34, 197, 94, 0.35); } .alert-info, .alert-primary { background: rgba(96, 165, 250, 0.12); color: #dbeafe; border-color: rgba(96, 165, 250, 0.35); } .alert-warning { background: rgba(251, 191, 36, 0.12); color: #fef3c7; border-color: rgba(251, 191, 36, 0.35); } .alert-danger { background: rgba(239, 68, 68, 0.12); color: #fee2e2; border-color: rgba(239, 68, 68, 0.35); } .badge.bg-primary, .badge.bg-info { background-color: var(--accent2) !important; color: #031424; } .badge.bg-success { background-color: var(--accent) !important; color: #031008; } .badge.bg-warning { background-color: var(--warn) !important; color: #1a1300; } .badge.bg-light, .badge.bg-secondary { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--text); } /* ============================================================ * Logo gradient helper * ============================================================ */ .logo-gradient, .text-gradient, .brand-gradient { background: var(--logo-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ * Borders / utilities * ============================================================ */ .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; } /* Public marketing hero/CTA helpers — pages that already use generic * `.hero`, `.cta`, etc. inherit the panel/card look automatically. */ .section, .hero, .cta, .feature-card, .pricing-card, .faq-card, .about-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); } /* Pagination — Bootstrap's links default to white-on-white in dark. */ .page-link { background-color: var(--panel); color: var(--text); border-color: var(--line); } .page-link:hover, .page-link:focus { background-color: rgba(96, 165, 250, 0.12); color: var(--text); border-color: var(--ghost-border-hover); } .page-item.active .page-link { background: var(--primary-gradient); color: #031008; border-color: rgba(34, 197, 94, 0.65); } /* Scrollbars (Webkit only — non-blocking). */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); } /* ============================================================ * Tailwind / smsVerificationService "marketing portal" layout overrides * * The legacy `templates/base.html` shell hard-codes light-mode colors * with `!important` (white navbar, white footer, near-black text). The * design system loads after that inline