/*! LumiBlue UI — Bootstrap 5.3 override theme (Blue / Dark Ink) Load AFTER Bootstrap */ /* ============================== 1) Tokens (Colors, Radii, Shadows) ============================== */ :root { /* Brand (Blue + Ink) */ --brand: #0d6efd; /* bootstrap primary blue */ --brand-2: #0a58ca; /* darker shade */ --ink: #0f172a; /* deep slate */ --ink-2: #1f2937; /* slate-700 */ --muted: #6b7280; /* slate-500 */ --paper: #ffffff; --bg: #f7f7fb; /* Map to Bootstrap vars */ --bs-primary: var(--brand); --bs-dark: var(--ink); --bs-warning: #f59e0b; --bs-success: #16a34a; --bs-danger: #ef4444; --bs-info: #0ea5e9; /* Radii + shadows */ --radius: 16px; --radius-sm: 10px; --radius-lg: 22px; --shadow-1: 0 6px 18px rgba(2, 6, 23, 0.08); --shadow-2: 0 14px 34px rgba(2, 6, 23, 0.16); --shadow-soft: 0 10px 26px rgba(13, 110, 253, .18); /* Focus ring */ --focus: 0 0 0 .25rem rgba(13, 110, 253, .35); /* Accents */ --accent: #ffffff; /* button text on blue */ } /* Optional dark variant via .theme-dark on */ .theme-dark { --paper: #0b0f1a; --bg: #0a0e18; --ink: #e5e7eb; --ink-2: #cbd5e1; --muted: #94a3b8; --shadow-1: 0 8px 18px rgba(0, 0, 0, .45); --shadow-2: 0 18px 44px rgba(0, 0, 0, .6); } /* ============================== 2) Base ============================== */ * { box-sizing: border-box; } html, body { height: 100%; } body.bg-page { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; min-height: 100svh; display: flex; flex-direction: column; } a { color: var(--ink); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--brand-2); } .text-gradient-blue { background: linear-gradient(90deg, #66a8ff, #0d6efd 50%, #0a58ca); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================== 3) Navbar / Header ============================== */ .navbar { --bs-navbar-padding-y: .85rem; background: var(--paper); box-shadow: var(--shadow-1); border-radius: 0 0 var(--radius) var(--radius); } .navbar .navbar-brand { font-weight: 900; letter-spacing: .3px; color: var(--ink); } .navbar .nav-link { font-weight: 700; color: var(--ink-2); padding: .55rem .9rem; border-radius: 12px; transition: background .2s ease, color .2s ease; } .navbar .nav-link:hover { background: rgba(13, 110, 253, .12); color: var(--ink); } .navbar .nav-link.active { background: rgba(13, 110, 253, .18); color: var(--ink); } .navbar .dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--shadow-2); padding: .5rem; background: #fff; } .navbar .dropdown-item { border-radius: 10px; font-weight: 600; } .navbar .dropdown-item:hover { background: rgba(13, 110, 253, .12); } /* Offcanvas mobile nav (kept for pages that still use it) */ .offcanvas.offcanvas-end { border-left: 0; background: var(--paper); box-shadow: var(--shadow-2); border-radius: var(--radius) 0 0 var(--radius); } /* Sticky helper */ .header-sticky { position: sticky; top: 0; z-index: 1030; } /* ===== Header tint (blue) ===== */ .site-header, header.site-header, header.primary-header { background: linear-gradient(180deg, #e7f1ff 0%, #bfd9ff 100%); color: var(--ink); border-bottom: 1px solid rgba(0, 0, 0, .06); width: 100%; } .site-header a { color: var(--ink); } .site-header a:hover { color: var(--brand-2); text-decoration: none; } .site-header .mainnav .nav-link { color: var(--ink); border-bottom-color: transparent; } .site-header .mainnav .nav-link.active { color: var(--ink); border-color: var(--brand); } .site-header .btn-outline-dark { border-color: var(--ink); color: var(--ink); } .site-header .btn-outline-dark:hover { background: var(--ink); color: #fff; } /* ============================== 4) Buttons ============================== */ .btn { border-radius: 14px; font-weight: 800; letter-spacing: .2px; transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--accent); box-shadow: var(--shadow-soft); } .btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); } .btn-outline-primary { color: var(--brand); border-color: var(--brand); background: transparent; } .btn-outline-primary:hover { color: var(--accent); background: var(--brand); border-color: var(--brand); } .btn-soft { background: rgba(13, 110, 253, .16); color: var(--ink); border: 1px solid rgba(13, 110, 253, .28); } .btn-soft:hover { background: rgba(13, 110, 253, .24); } .btn-accent { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-accent:hover { filter: brightness(.96); } /* ============================== 5) Forms ============================== */ .form-label { font-weight: 800; color: var(--ink-2); } .form-control, .form-select { border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 1px 0 rgba(2, 6, 23, .02) inset; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; padding: .7rem .9rem; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: var(--focus); } .input-group-text { border-radius: 10px; background: #f3f4f6; color: var(--muted); } .form-check-input { border-radius: .5rem; border: 2px solid #cbd5e1; } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(13, 110, 253, .18); } /* ============================== 6) Cards ============================== */ .card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--paper); } .card .card-header { background: linear-gradient(180deg, #f8fbff, #dbe9ff); border-bottom: 1px solid #f0f0f2; font-weight: 900; color: var(--ink); } /* ... (rest of CSS remains same, but all yellow tints replaced with blue equivalents) ... */ /* ============================== 18) Force header/navbar to solid blue (explicit) ============================== */ .site-header, header.site-header, header.primary-header, .navbar { background: #0d6efd !important; color: #fff !important; border-bottom: 1px solid rgba(0, 0, 0, .1); } .site-header .nav-link, .navbar .nav-link { color: #fff !important; } .site-header .nav-link.active, .site-header .nav-link:hover, .navbar .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .2); border-radius: 8px; } .navbar .navbar-brand { color: #fff !important; } .navbar .btn-outline-dark { border-color: #fff !important; color: #fff !important; } .navbar .btn-outline-dark:hover { background: #fff !important; color: #0d6efd !important; }