/*! LumiGold UI — Bootstrap 5.3 override theme (Yellow / Dark Ink) Load AFTER Bootstrap */ /* ============================== 1) Tokens (Colors, Radii, Shadows) ============================== */ :root { /* Brand (Yellow + Ink) */ --brand: #f6c000; /* gold */ --brand-2: #e0ad00; /* gold-600 */ --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(246, 192, 0, .18); /* Focus ring */ --focus: 0 0 0 .25rem rgba(246, 192, 0, .35); /* Accents */ --accent: #111827; /* button text on yellow */ } /* 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-gold { background: linear-gradient(90deg, #f9d84b, #f6c000 50%, #e0ad00); -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(246, 192, 0, .12); color: var(--ink); } .navbar .nav-link.active { background: rgba(246, 192, 0, .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(246, 192, 0, .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 (default) ===== */ .site-header, header.site-header, header.primary-header { background: linear-gradient(180deg, #fff9db 0%, #ffe899 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; } /* keep nav readable on yellow tint */ .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); } /* mobile toggle contrast (if used) */ .site-header .btn-outline-dark { border-color: var(--ink); color: var(--ink); } .site-header .btn-outline-dark:hover { background: var(--ink); color: #fff; } /* ============================== 3.5) Desktop/Mobile menu safety (prevents double menus) ============================== */ /* Hide legacy mobile blocks on desktop (e.g., #mnav or custom mobile navs) */ @media (min-width: 992px) { #mnav, .mobile-nav, .nav-mobile, .collapse-mobile { display: none !important; } } /* Ensure offcanvas marked as mobile-only never appears on ≥lg */ @media (min-width: 992px) { .offcanvas.d-lg-none { display: none !important; visibility: hidden !important; } } /* ============================== 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(246, 192, 0, .16); color: var(--ink); border: 1px solid rgba(246, 192, 0, .28); } .btn-soft:hover { background: rgba(246, 192, 0, .24); } /* Accent button (dark on yellow) */ .btn-accent { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-accent:hover { filter: brightness(.96); } /* ============================== 5) Forms (inputs, selects, checks) ============================== */ .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(246, 192, 0, .18); } /* Floating labels refinement */ .form-floating>.form-control, .form-floating>.form-select { height: calc(3.4rem + 2px); padding: 1rem .9rem; border-radius: 14px; } /* ============================== 6) Cards ============================== */ .card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--paper); } .card .card-header { background: linear-gradient(180deg, #fffefa, #fff7d6); border-bottom: 1px solid #f0f0f2; font-weight: 900; color: var(--ink); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .card-hover { transition: transform .15s ease, box-shadow .2s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* Old hooks re-styled */ .login-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-1); border: 1px solid rgba(0, 0, 0, .05); padding: 22px; } .login-card h6 { font-weight: 900; letter-spacing: .02em; margin: 0 0 .75rem; } /* Make login form come first on mobile */ @media (max-width: 991.98px) { .hero .col-login { order: -1; /* push login card above */ } .hero .hero-copy { order: 0; /* keep copy after */ } } /* Minimal tiles */ .tiles-section { padding: 36px 0; } .tile { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; padding: 16px; height: 100%; display: flex; align-items: center; justify-content: space-between; transition: transform .12s ease, box-shadow .18s ease; box-shadow: 0 8px 18px rgba(0, 0, 0, .07); } .tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, .12); } .tile h6 { margin: 0; font-weight: 900; letter-spacing: .01em; } .tile a.go { font-weight: 900; text-decoration: none; color: var(--ink); } .tile a.go:hover { color: var(--brand-2); } /* Department cards */ .dept-cards-section { padding: 36px 0; } .dept-card { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .dept-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0, 0, 0, .14); border-color: rgba(0, 0, 0, .1); } .dept-chip { align-self: flex-start; display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 900; background: rgba(246, 192, 0, .18); color: var(--ink); border: 1px solid rgba(246, 192, 0, .36); } /* ============================== 7) Hero ============================== */ .hero { background: linear-gradient(0deg, rgba(15, 23, 42, .45), rgba(15, 23, 42, .45)), url('/img/hero.jpg') center/cover no-repeat; color: #fff; } .hero-inner { padding: 48px 0 60px; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } @media (max-width:991.98px) { .hero-grid { grid-template-columns: 1fr; } } .hero-copy { background: rgba(17, 24, 39, .72); border: 1px solid rgba(255, 255, 255, .08); color: #fff; border-radius: var(--radius); padding: 22px; } /* ============================== 8) Tables ============================== */ .table { --row-border: #eef2f7; color: var(--ink); } .table thead th { font-weight: 900; border-bottom: 2px solid var(--row-border); } .table tbody td { border-top: 1px solid var(--row-border); } .table-hover tbody tr:hover { background: rgba(246, 192, 0, .08); } .table-modern { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); } /* ============================== 9) Alerts, Badges, Progress ============================== */ .alert { border: 0; border-radius: 14px; box-shadow: var(--shadow-1); } .alert-primary { background: rgba(246, 192, 0, .16); color: #7a5d00; } .badge { border-radius: 999px; padding: .45rem .7rem; font-weight: 800; } .progress { height: .6rem; border-radius: 999px; background: #e5e7eb; overflow: hidden; } .progress-bar { background: linear-gradient(90deg, #f9d84b, #f6c000); } /* ============================== 10) Modals / Dropdown / Offcanvas ============================== */ .modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); background: var(--paper); } .modal-header { border-bottom: 1px solid #eef2f7; } .modal-footer { border-top: 1px solid #eef2f7; } .dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--shadow-2); } /* ============================== 11) Pagination & Breadcrumbs ============================== */ .page-link { border: 0; border-radius: 12px; margin: 0 .25rem; color: var(--muted); font-weight: 800; } .page-link:hover { background: rgba(246, 192, 0, .12); color: var(--ink); } .page-item.active .page-link { background: var(--brand); color: var(--accent); box-shadow: var(--shadow-soft); } .breadcrumb .breadcrumb-item a { color: var(--muted); } .breadcrumb .breadcrumb-item.active { color: var(--ink); font-weight: 900; } /* ============================== 12) Tabs & Pills ============================== */ .nav-pills .nav-link { border-radius: 12px; font-weight: 800; color: var(--muted); } .nav-pills .nav-link.active { background: var(--brand); color: var(--accent); box-shadow: var(--shadow-soft); } .nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; font-weight: 800; color: var(--muted); } .nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--brand); } /* ============================== 13) Accordions ============================== */ .accordion-button { border-radius: 12px !important; font-weight: 800; } .accordion-button:not(.collapsed) { color: var(--ink); background: rgba(246, 192, 0, .14); } .accordion-item { border: 0; margin-bottom: .5rem; background: transparent; } /* ============================== 14) Utilities ============================== */ .shadow-soft { box-shadow: var(--shadow-soft) !important; } .rounded-xl { border-radius: var(--radius) !important; } .rounded-2xl { border-radius: var(--radius-lg) !important; } .bg-paper { background: var(--paper) !important; } .bg-soft-gold { background: rgba(246, 192, 0, .12) !important; } .text-muted-ink { color: var(--muted) !important; } .glass { background: rgba(255, 255, 255, .6); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .5); } .soft-card { background: radial-gradient(1000px 260px at -20% -10%, rgba(246, 192, 0, .14), transparent), radial-gradient(800px 240px at 120% 120%, rgba(17, 24, 39, .08), transparent), var(--paper); border: 1px solid #eef2f7; border-radius: var(--radius); box-shadow: var(--shadow-1); } /* Skeleton loaders */ .skeleton { position: relative; overflow: hidden; background: #e5e7eb; border-radius: 10px; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: shimmer 1.2s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* ============================== 15) Sections / Footer ============================== */ .section { padding: 48px 0; } .section-title { font-weight: 900; letter-spacing: .02em; margin-bottom: 18px; } .info-band { background: linear-gradient(180deg, #111827 0%, #0b1220 100%); color: #fff7cc; padding: 26px 0; } .info-stat { text-align: center; padding: 10px 6px; } .info-stat h4 { margin: 0; font-weight: 900; } .info-stat p { margin: 0; opacity: .9; } /* Footer (sticky) */ footer { background: transparent; color: inherit; } .site-footer { background: var(--ink); color: #fff; width: 100%; margin-top: auto; } .site-footer a { color: #fff; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* ============================== 16) Responsive tweaks ============================== */ @media (max-width: 991.98px) { .navbar .nav-link { padding: .5rem .75rem; } } @media (max-width: 575.98px) { .card { border-radius: 14px; } .btn { border-radius: 12px; } } /* ============================== 17) Safety tweaks from old CSS ============================== */ a.stretched-link { position: static !important; } .faq .accordion-button:focus { box-shadow: var(--focus); } /* ============================== 18) Force header/navbar to solid yellow (explicit) ============================== */ .site-header, header.site-header, header.primary-header, .navbar { background: #f6c000 !important; /* brand yellow */ color: #111 !important; border-bottom: 1px solid rgba(0, 0, 0, .1); } /* Link contrast on yellow header */ .site-header .nav-link, .navbar .nav-link { color: #111 !important; } .site-header .nav-link.active, .site-header .nav-link:hover, .navbar .nav-link:hover { color: #000 !important; background: rgba(255, 255, 255, .2); border-radius: 8px; } /* Toggler & brand contrast on yellow */ .navbar .navbar-brand { color: #111 !important; } .navbar .btn-outline-dark { border-color: #111 !important; color: #111 !important; } .navbar .btn-outline-dark:hover { background: #111 !important; color: #fff !important; } /* ============================== 19) Hero-specific polish ============================== */ /* Compact login card */ .hero .login-card { max-width: 460px; padding: 18px; } @media (max-width: 991.98px) { .hero .login-card { max-width: 100%; } } /* Embedded image inside hero-copy */ .hero .hero-copy .hero-image { max-height: 240px; width: 100%; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } /* ============================== 20) Mobile nav refinements (icon-only toggler retained for pages that use it) ============================== */ .navbar-toggler { border: 0; padding: .4rem .5rem; border-radius: 12px; } .navbar-toggler:focus { box-shadow: var(--focus); } .navbar-toggler .navbar-toggler-icon { width: 1.6rem; height: 1.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 16 16'%3E%3Cpath stroke='%23111' stroke-width='1.6' stroke-linecap='round' d='M2 4.25h12M2 8h12M2 11.75h12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; } /* Offcanvas polish (if present) */ .offcanvas-header { border-bottom: 1px solid rgba(0,0,0,.06); } .offcanvas-title { font-weight: 900; } .offcanvas .navbar-nav .nav-link { display: block; padding: .8rem .9rem; border-radius: 12px; font-weight: 800; color: var(--ink); } .offcanvas .navbar-nav .nav-link:hover, .offcanvas .navbar-nav .nav-link.active { background: rgba(246, 192, 0, .14); color: var(--ink); } .offcanvas .nav-section-label { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: .5rem 0 .25rem; } .offcanvas .divider { height: 1px; background: rgba(0,0,0,.06); margin: .5rem 0 .75rem; } /* ============================== 21) Mobile profile dropdown (preferred mobile UX) ============================== */ @media (max-width: 991.98px) { .mobile-profile-btn { border: 0; padding: .35rem .5rem; border-radius: 12px; } .mobile-profile-btn:focus { box-shadow: var(--focus); } .mobile-profile .dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--shadow-2); padding: .5rem; min-width: 240px; } .mobile-profile .dropdown-item { border-radius: 10px; font-weight: 700; } .mobile-profile .dropdown-item:hover { background: rgba(246, 192, 0, .14); } .mobile-only { display: inline-flex !important; } .desktop-only { display: none !important; } } @media (min-width: 992px) { .mobile-only { display: none !important; } .desktop-only { display: inline-flex !important; } }