/* Modern glassy theme for College ERP - Uses CSS variables for palette - Glassmorphism via semi-transparent card background + backdrop-filter - Improved buttons, navbar, sidebar and general spacing */ :root{ /* Primary palette (feel free to tweak) */ --bg-0: #0f1724; /* page background base */ --bg-1: linear-gradient(135deg,#0f1724 0%, #112240 100%); --surface: rgba(255,255,255,0.06); --surface-strong: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.08); --card-bg: rgba(255,255,255,0.035); /* slightly darker card background for contrast */ --primary: #6C5CE7; /* indigo */ --primary-600: #5a4be0; --accent: #00C2A8; /* teal mint */ --muted: rgba(255,255,255,0.72); /* increase muted contrast */ --text: rgba(255,255,255,0.96); --text-heading: var(--text); --text-muted: var(--muted); --outline-border: rgba(255, 255, 255, 0.8); --soft: rgba(255, 255, 255, 0.08); /* navbar height used for sticky layout adjustments */ --navbar-height: 64px; } /* Debug / preview utility to temporarily boost contrast for visual checks Add `class="contrast-boost"` to the element to see increased contrast. Use this to compare before/after quickly in the browser. */ html.contrast-boost{ --muted: rgba(255,255,255,0.9); --text: rgba(255,255,255,1); --text-heading: rgba(255,255,255,1); --glass-border: rgba(255,255,255,0.12); } /* Light-theme variant for the contrast boost so text stays readable */ html.contrast-boost[data-theme="light"]{ --muted: rgba(6,10,20,0.78); --text: rgba(6,10,20,0.98); --text-heading: rgba(6,10,20,1); --outline-border: rgba(16,24,40,0.1); } /* High-contrast utilities and light-theme counterpart - Add a `data-theme="light"` palette, and utility classes `.contrast-high`. - Pages can set `document.documentElement.setAttribute('data-theme','light')` to switch. */ /* High contrast media preference */ @media (prefers-contrast: more) { :root{ --card-bg: rgba(255,255,255,0.06); --text: rgba(255,255,255,1); --muted: rgba(255,255,255,0.86); } } /* Utility class to force high contrast */ .contrast-high{ --card-bg: rgba(255,255,255,0.09) !important; --text: rgba(255,255,255,1) !important; --muted: rgba(255,255,255,0.9) !important; } /* Light theme using data attribute on or */ [data-theme="light"]{ --bg-1: linear-gradient(135deg,#f7fbff 0%, #eef6ff 100%); --card-bg: rgba(255,255,255,0.9); --glass-border: rgba(16,24,40,0.06); --primary: #2b6cb0; /* blue */ --primary-600: #1e5a9b; --accent: #0ea5a4; /* teal */ --muted: #51607a; /* slightly softer muted for readability */ --text: rgba(6,10,20,0.96); --soft: rgba(2,6,23,0.02); /* Light theme semantic colors */ --text-heading: rgba(6,10,20,0.96); --text-muted: rgba(255, 255, 255, 0.8); --link: var(--accent); --link-hover: rgba(14,165,164,0.98); --outline-border: rgba(255, 255, 255, 0.8); /* Inputs */ --input-bg: rgba(255,255,255,0.96); --input-border: rgba(16,24,40,0.06); } /* Make the sidebar divider slightly darker in the light theme for contrast */ [data-theme="light"] .sidebar-divider{background:rgba(0,0,0,0.06)} html,body{height:100%;} body{ margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; color:var(--text); background: var(--bg-1); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; padding-bottom:48px; } /* Utility: visually hidden but focusable */ .visually-hidden-focusable{position:fixed;left:0;top:0;background:#000;clip:rect(1px,1px,1px,1px);padding:8px 12px;margin:8px;border-radius:4px;color:#fff;z-index:2000} /* Cards with glass effect */ .card{ background: linear-gradient(180deg, var(--card-bg), rgba(255,255,255,0.01)); border: 1px solid var(--glass-border); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); box-shadow: 0 8px 24px rgba(2,6,23,0.6); border-radius:14px; margin-bottom:1rem; } .card-body{color:var(--text)} /* Navbar overrides */ .navbar.bg-primary{background: linear-gradient(90deg, rgba(108,92,231,0.95), rgba(0,194,168,0.9));} .navbar .navbar-brand{font-weight:700;color:#fff} .navbar .nav-link{color:rgba(255,255,255,0.9)} .navbar .nav-link.active{font-weight:600} /* Sidebar glass */ .flex-column.bg-light{background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-right:1px solid rgba(255,255,255,0.03)} /* Theme-aware sidebar overrides: prefer CSS variables so dark/light themes render correctly */ .flex-column[aria-label="Sidebar"].bg-light, .sidebar{ background: linear-gradient(180deg, var(--surface), rgba(255,255,255,0.01)); border-right:1px solid var(--glass-border); } /* .sidebar explicit rules so we don't rely on overriding Bootstrap's .bg-light */ .sidebar{ padding-top:1rem; } /* Light theme: keep sidebar light but use defined variables for borders */ [data-theme="light"] .flex-column[aria-label="Sidebar"].bg-light, [data-theme="light"] .sidebar{ background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.95)); border-right:1px solid var(--outline-border); } /* Sidebar link color + transitions (theme-aware) */ .sidebar .nav-link{ color:var(--muted); transition: color .15s ease, background .15s ease, transform .08s ease; } .sidebar .nav-link:hover, .sidebar .nav-link:focus{ color:var(--text); background:transparent; } .sidebar .nav-link.active{ color:#fff; } .sidebar .nav .nav-item .nav-link.small{padding-left:.25rem} .nav-pills .nav-link{color:var(--muted);border-radius:8px} .nav-pills .nav-link:hover{color:var(--text);background:transparent} .nav-pills .nav-link.active{background:linear-gradient(90deg,var(--primary-600),var(--accent));color:#fff} /* Submenu small links (improve contrast on dark theme) */ .nav-pills .nav .nav-item .nav-link.small{color:var(--muted);font-size:0.9rem} .nav-pills .nav .nav-item .nav-link.small.active{color:#fff} /* Sidebar divider used between logical groups */ .sidebar-divider{border:0;height:1px;background:rgba(255,255,255,0.04);margin:.5rem 0;width:100%} .sidebar-divider.light{background:rgba(0,0,0,0.06)} /* Menu separators: draw subtle borders between menu and submenu items */ .nav-pills .nav-item + .nav-item{border-top:1px solid rgba(255,255,255,0.03);margin-top:0} .nav-pills .nav .nav-item + .nav-item{border-top:1px solid rgba(255,255,255,0.02);margin-top:.25rem;padding-top:.45rem} .nav-pills .nav-link{padding-top:.55rem;padding-bottom:.55rem} .nav-pills .nav-item > .nav-link{display:flex;align-items:center} /* Smooth transition when theme switches */ .nav-pills .nav-item + .nav-item, .nav-pills .nav .nav-item + .nav-item{transition:background .18s ease, border-color .18s ease} /* Light theme overrides */ [data-theme="light"] .nav-pills .nav-item + .nav-item{border-top:1px solid rgba(0,0,0,0.06)} [data-theme="light"] .nav-pills .nav .nav-item + .nav-item{border-top:1px solid rgba(0,0,0,0.04)} /* Sticky navbar and sidebar helpers */ .navbar.sticky, .navbar.sticky-top{position:sticky;top:0;z-index:1040;background:linear-gradient(90deg, rgba(108,92,231,0.95), rgba(0,194,168,0.9));} /* Ensure main content has some breathing room on small screens when sidebar is sticky */ .flex-grow-1 > .p-3{min-height:calc(100vh - var(--navbar-height));} /* Buttons */ .btn-primary{ background: linear-gradient(90deg,var(--primary), var(--primary-600)); border: none; box-shadow: 0 6px 18px rgba(92,79,224,0.28); padding: .6rem .9rem; border-radius:10px; } .btn-primary:hover{transform:translateY(-1px)} /* Form inputs - subtle glass with improved focus/border highlight */ .form-control, .form-select, textarea, input[type="file"]{ background: var(--input-bg); border: 1px solid var(--input-border); color:var(--text); border-radius:8px; transition: border-color .15s ease, box-shadow .18s ease, transform .06s ease; } .form-control:hover, .form-select:hover, textarea:hover, input[type="file"]:hover{ border-color: rgba(255,255,255,0.14); } .form-control:focus, .form-select:focus, textarea:focus, input[type="file"]:focus{ box-shadow: 0 8px 30px rgba(16,24,40,0.45), 0 0 0 6px rgba(108,92,231,0.06); border-color: var(--primary); transform: translateY(-2px); outline: none; } .form-control:focus-visible, .form-select:focus-visible, textarea:focus-visible{ outline: 3px solid rgba(108,92,231,0.08); outline-offset: 3px; } /* Tables / DataTables adjustments */ .dataTable tbody tr{background:transparent} /* Utility spacing overrides */ .container.my-5{max-width:1100px} /* Small screens: make sidebar collapse to top bar */ @media (max-width: 991px){ .flex-column[aria-label="Sidebar"]{display:none} .flex-grow-1{margin-left:0!important} } /* Footer spacing */ footer{color:var(--muted)} /* Small helpers */ .text-muted-soft{color:var(--muted)} /* Improve link visibility */ a{color:var(--accent)} /* Accessibility focus outlines */ a:focus,button:focus,input:focus{outline:3px solid rgba(0,194,168,0.16);outline-offset:2px} /* End of theme */ /* Hero carousel overlay and caption styling */ .carousel-item{position:relative} .carousel-item img{display:block} .carousel-item::before{ content: ""; position: absolute; inset: 0; /* subtle dark gradient to improve contrast */ background: linear-gradient(180deg, rgba(4,6,11,0.28) 0%, rgba(4,6,11,0.48) 100%); z-index:1; pointer-events:none; } .carousel-inner.rounded-3 .carousel-item{border-radius:0} .carousel-caption{z-index:2; right:unset; left:3%; text-align:left} .hero-caption{ display:inline-block; /* background: rgba(2,6,23,0.05); */ color:var(--text-heading); border-radius:12px; /* backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); */ border: 1px solid var(--glass-border); } .hero-caption h1, .hero-caption h2{color:var(--text);margin-bottom:0.25rem} .hero-caption p{color:var(--text-muted);margin-bottom:0} /* Responsive adjustments */ @media (max-width: 767px){ .carousel-caption{left:0;right:0;padding:0 1rem} .hero-caption{width:100%;background: linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0.55));} } /* Feature cards and stat cards improvements */ .feature-card{transition:transform .28s ease, box-shadow .28s ease} .feature-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(2,6,23,0.45)} .feature-icon svg{color:var(--accent);opacity:0.98} .feature-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:rgba(255,255,255,0.02);flex:0 0 48px} .stat-card{transition:transform .28s ease, box-shadow .28s ease} .stat-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(2,6,23,0.45)} .stat-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.03);color:var(--accent)} /* Subtle entrance animation */ .animate-fade-up{opacity:0;transform:translateY(10px);animation:fadeUp .6s ease forwards} .animate-fade-up:nth-child(1){animation-delay:.06s} .animate-fade-up:nth-child(2){animation-delay:.12s} .animate-fade-up:nth-child(3){animation-delay:.18s} .animate-fade-up:nth-child(4){animation-delay:.24s} @keyframes fadeUp{ to{opacity:1;transform:translateY(0)} } /* Small accessible focus states for cards */ .feature-card:focus-within,.feature-card:focus{outline:3px solid rgba(108,92,231,0.12);outline-offset:6px} .stat-card:focus-within,.stat-card:focus{outline:3px solid rgba(0,194,168,0.12);outline-offset:6px} /* About Us section */ .about-us .card{border-radius:14px} .about-us .about-img{width:100%;height:100%;object-fit:cover;display:block} .about-us .lead{color:var(--muted)} .about-us .card.p-4{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));} @media (max-width: 991px){ .about-img{border-radius:12px} } /* Quick Links card styles */ .quick-link-card{display:block;color:var(--text);text-decoration:none;transition:transform .22s ease, box-shadow .22s ease, background .22s ease;padding:.9rem} .quick-link-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(2,6,23,0.42);background:linear-gradient(90deg, rgba(108,92,231,0.06), rgba(0,194,168,0.03))} .quick-link-card:focus{outline:3px solid rgba(108,92,231,0.12);outline-offset:6px} .quick-link-card .feature-icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:inline-flex;align-items:center;justify-content:center} .quick-link-arrow{font-size:28px;color:var(--muted);opacity:.9;transition:transform .18s ease} .quick-link-card:hover .quick-link-arrow{transform:translateX(6px);color:var(--accent)} .quick-link-card h5{color:var(--text);font-weight:600} .quick-link-card p{color:var(--muted)} /* Responsive icon-only buttons: add `btn-responsive` to buttons you want to collapse text on small screens */ .btn .btn-text{display:inline} @media (max-width: 576px){ .btn-responsive .btn-text{display:none} .btn-responsive{padding-left:.6rem;padding-right:.6rem} .btn-responsive .fa-solid{font-size:1.05rem} } /* Small action icon buttons used in tables */ .action-icon{padding:.35rem .5rem;font-size:.85rem;border-radius:8px} .action-icon .fa{margin-right:.25rem} /* Tweak icon sizes for stat cards and consistent colors */ .stat-icon i, .feature-icon i, .display-6 i{color:var(--primary);font-size:1.25rem} /* Team grid small styles */ .team-grid .team-card{transition:transform .22s ease, box-shadow .22s ease; border-radius:12px} .team-grid .team-card img{object-fit:cover;width:100px;height:100px} .team-grid .team-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(2,6,23,0.32)} .team-card h6{margin-top:.25rem} /* Theme-aware tweaks for About page */ .about-us .card{padding:1.25rem;border-radius:14px;background:linear-gradient(180deg,var(--card-bg), rgba(255,255,255,0.01));} .about-us .hero-caption{padding:1rem;border-radius:12px;border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));} .about-us .about-img{border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 10px 30px rgba(2,6,23,0.45)} .feature-card, .stat-card{background:var(--surface);border:1px solid var(--glass-border)} .stat-card .display-6{font-weight:700} .about-us .lead{color:var(--muted);font-size:1.02rem} /* Buttons that need to adapt to theme */ .btn-outline-light{background:transparent;border:1px solid var(--outline-border);color:var(--text);padding:.5rem .85rem;border-radius:10px} .btn-outline-light:hover{background:rgba(255,255,255,0.03)} /* Team card specifics */ .team-card{background:var(--surface);border:1px solid var(--glass-border);padding:1.1rem} .team-card img{border:3px solid rgba(255,255,255,0.04)} /* Slightly larger gaps on wider screens for the about sections */ @media(min-width:768px){ .about-us .row.g-3{gap:1.6rem} } /* Light theme overrides so contrast is preserved */ [data-theme="light"] .about-us .hero-caption{background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.95));border:1px solid var(--glass-border)} [data-theme="light"] .btn-outline-light{border:1px solid var(--outline-border);color:var(--text)} [data-theme="light"] .about-img{box-shadow:0 8px 20px rgba(2,6,23,0.06)} /* Scrollable lists used on the home page (notices / events) */ .scrollable-list{ max-height:300px; overflow:auto; padding-right:6px; } .scrollable-list .list-group-item{ background:transparent; border:0; padding:.65rem 0; color:var(--text); } .scrollable-list .list-group-item + .list-group-item{ border-top:1px solid var(--glass-border); } .scrollable-list .list-group-item h6{ margin-bottom:.25rem; font-size:.95rem; color:var(--text); } .scrollable-list .list-group-item p{ margin-bottom:0; font-size:.85rem; color:var(--muted); } .scrollable-list .list-group-item:hover{ background:var(--surface-strong); } /* Custom scrollbar for better theme integration */ .scrollable-list::-webkit-scrollbar{width:10px;height:10px} .scrollable-list::-webkit-scrollbar-track{background:transparent} .scrollable-list::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.18); border-radius:8px; } /* Light theme scrollbar thumb (so it remains visible) */ [data-theme="light"] .scrollable-list::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); } /* Sticky header used on list pages (e.g., Courses index) */ .sticky-header{ position: -webkit-sticky; /* Safari */ position: sticky; top: calc(var(--navbar-height)); /* sits below navbar */ z-index: 1030; background: linear-gradient(180deg, var(--card-bg), rgba(255,255,255,0.01)); padding: 0.6rem 0.75rem; border-radius: 8px; margin-bottom: 0.75rem; box-shadow: 0 6px 18px rgba(2,6,23,0.12); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); } .dash-topbar{ margin-top: var(--navbar-height); height: calc(100vh - var(--navbar-height)); overflow-y: auto; border-bottom: 1px solid var(--glass-border); } .right-panel{ height: calc(100vh - var(--navbar-height)); overflow-y: auto; } /* Fixed sidebar with scrollable items (large screens) */ @media (min-width: 992px){ .sidebar{ position: fixed; top: var(--navbar-height); left: 0; height: calc(100vh - var(--navbar-height)); width: 260px; /* allow the sidebar itself to scroll when its content exceeds viewport height */ overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1020; background: linear-gradient(180deg, var(--surface), rgba(255,255,255,0.01)); border-right: 1px solid var(--glass-border); } /* Shift main content so it doesn't sit beneath the fixed sidebar */ .flex-grow-1{margin-left:260px} /* Ensure page content has top spacing when sidebar is fixed */ .flex-grow-1 > .p-3{padding-top:1rem} } /* Sidebar collapsed state (desktop) */ @media (min-width: 992px){ .sidebar.collapsed{ width: 72px; } .sidebar.collapsed .nav .nav-link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar.collapsed .nav .nav-link span{display:none} .sidebar.collapsed .nav .nav-link i{margin-right:0} .sidebar.collapsed .nav .nav-item .nav-link.small{padding-left:.75rem} .sidebar.collapsed + .flex-grow-1{margin-left:72px} /* Toggle button adjustments when collapsed */ .sidebar .btn-toggle{position:absolute;right:-14px;top:calc(var(--navbar-height) + 8px);z-index:1050;border-radius:999px;background:var(--primary);color:#fff;border:none;padding:.35rem .45rem;box-shadow:0 6px 18px rgba(2,6,23,0.12)} .sidebar.collapsed .btn-toggle{transform:rotate(180deg)} } /* Thin custom scrollbar for the sidebar (desktop) */ @media (min-width: 992px){ .sidebar{scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent} .sidebar::-webkit-scrollbar{width:8px} .sidebar::-webkit-scrollbar-track{background:transparent} .sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.06); border-radius: 8px; border: 2px solid transparent; /* creates padding so thumb doesn't touch edge */ background-clip: padding-box; } .sidebar::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,0.22)} /* Light theme adjustments */ [data-theme="light"] .sidebar{scrollbar-color: rgba(0,0,0,0.12) transparent} [data-theme="light"] .sidebar::-webkit-scrollbar-thumb{background: rgba(0,0,0,0.12)} [data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,0.22)} /* Firefox: slightly stronger thumb on hover */ .sidebar:hover{scrollbar-color: rgba(255,255,255,0.22) transparent} [data-theme="light"] .sidebar:hover{scrollbar-color: rgba(0,0,0,0.22) transparent} } @media (prefers-reduced-motion: reduce){ .sticky-header{transition:none} } /* Topbar styles moved to assets/css/topbar.css */ /* Styles for student create tabs (moved from inline view) - Provides step-number badges and small icon alignment for the Add Student tabbed form */ #studentTab .nav-link { display: inline-flex; align-items: center; } #studentTab .nav-link i { font-size: 1em; vertical-align: -0.125em; margin-right: 6px; } /* Step number badge shown before the icon */ #studentTab .nav-link .step-number { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #adb5bd; /* muted by default */ color: #fff; font-weight: 600; margin-right: 8px; font-size: 0.85rem; line-height: 1; } /* Active tab step number uses primary color */ #studentTab .nav-link.active .step-number { background: var(--bs-primary, #0d6efd); color: #fff; } /* Per-tab active colors (distinct colors for each step) */ /* Basic: primary (blue) - already covered by generic rule above */ #basic-tab.active .step-number { background: var(--primary, var(--bs-primary, #6C5CE7)); } /* Parents: use site accent color (teal/mint) */ #parents-tab.active .step-number { background: var(--accent, var(--bs-info, #00C2A8)); } /* Academic: slightly darker primary from theme */ #academic-tab.active .step-number { background: var(--primary-600, var(--bs-warning, #5a4be0)); } /* Photo: use a complementary purple (falls back to earlier purple) */ #photo-tab.active .step-number { background: var(--primary, #6f42c1); } /* Review: use success/green color specifically */ #review-tab.active .step-number { background: var(--bs-success, #198754); }