/* ========================================================================== GLOBEALE LMS — site.css This is the single source of truth for shared styles across the whole app. Page-specific styles can still go in individual views, but anything that appears on more than one page should live here. ========================================================================== */ /* -------------------------------------------------------------------------- BASE FONT SIZE 14px on mobile, 16px on desktop. This is the ASP.NET default and works well. -------------------------------------------------------------------------- */ html { font-size: 14px; position: relative; min-height: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } /* -------------------------------------------------------------------------- BODY Removed the default margin-bottom: 60px from the ASP.NET template. Our footer handles its own spacing now. -------------------------------------------------------------------------- */ body { overflow-x: hidden; /* Prevents horizontal scrolling on mobile */ font-family: 'DM Sans', sans-serif; background-color: var(--page-bg); color: var(--text-color); transition: background-color 0.2s ease, color 0.2s ease; } /* -------------------------------------------------------------------------- BRAND COLOUR VARIABLES These are set dynamically in _Layout.cshtml for white-label support. The values here are fallbacks only — used on pages where branding hasn't loaded (e.g. error pages). IMPORTANT: Always use var(--brand-primary) and var(--brand-secondary) in your views, never hardcode #FF6B00 or #0B1F3A directly. That way white-label colours apply everywhere automatically. -------------------------------------------------------------------------- */ :root { --brand-primary: #3DBFA8; --brand-secondary: #123326; } /* -------------------------------------------------------------------------- LIGHT / DARK MODE VARIABLES These are SEPARATE from brand colours above. Brand colours = company white-label branding (navbar, buttons). Theme colours = light/dark mode (page backgrounds, cards, text). The two systems work side by side. Default (no data-theme attribute set) = light mode. Add data-theme="dark" to the tag to switch to dark mode — this is handled automatically by the toggle button in _Layout.cshtml. -------------------------------------------------------------------------- */ :root { --page-bg: #f5f6fa; --surface-bg: #ffffff; --surface-bg-alt: #f8f9fa; --text-color: #1a1a2e; --text-muted: #6c757d; --border-color: rgba(0, 0, 0, 0.08); --input-bg: #ffffff; } [data-theme="dark"] { --page-bg: #0a0a1f; --surface-bg: #0d2647; --surface-bg-alt: #13305c; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.55); --border-color: rgba(255, 255, 255, 0.09); --input-bg: rgba(255, 255, 255, 0.07); } /* -------------------------------------------------------------------------- THEME TOGGLE BUTTON The sun/moon switch shown in the navbar. Only one icon is visible at a time — moon shows in light mode (click to go dark), sun shows in dark mode (click to go light). -------------------------------------------------------------------------- */ .theme-toggle-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: white; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 8px 0 8px 16px; transition: background 0.2s ease; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.18); } .theme-toggle-btn .theme-icon-sun { display: none; } [data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: inline-block; } [data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: none; } /* -------------------------------------------------------------------------- NAVBAR Single definition here — removed the conflicting height/padding rules that were causing the logo to be 180px tall. NOTE: Navbar colour always follows company branding (--brand-secondary), not light/dark mode. This is intentional — white-label branding and light/dark mode are separate systems. -------------------------------------------------------------------------- */ .navbar { background-color: var(--brand-secondary) !important; padding: 8px 15px; } .navbar-brand { padding: 0; } /* Caps the logo at 45px — works for both company logos and the GloBeale logo. The old rule set height: 180px which made it huge. max-height is safer because it never forces the image to be bigger than its natural size. */ .navbar-brand img { max-height: 60px; width: auto; } .navbar a, .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.85) !important; transition: color 0.2s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--brand-primary) !important; } /* -------------------------------------------------------------------------- BUTTONS Consistent button styles across the whole app. Using var(--brand-primary) means white-label colours apply automatically. -------------------------------------------------------------------------- */ .btn-primary { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--brand-secondary) !important; } .btn-primary:hover { filter: brightness(90%); /* Slightly darkens on hover — works for any colour */ } /* Focus ring — accessibility requirement so keyboard users can see which button is focused */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-primary); } /* Touch-friendly button height on mobile */ @media (max-width: 575px) { .btn { min-height: 44px; } } /* -------------------------------------------------------------------------- CARDS Consistent card styling — rounded corners and a subtle shadow. Now follows light/dark mode automatically. -------------------------------------------------------------------------- */ .card { border-radius: 12px !important; border: none !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); background-color: var(--surface-bg); color: var(--text-color); } .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); transition: box-shadow 0.2s ease; } /* -------------------------------------------------------------------------- FORMS Consistent form input styling across all pages. -------------------------------------------------------------------------- */ .form-control { border-radius: 8px; border: 1px solid #dee2e6; padding: 10px 14px; } .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.15); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* -------------------------------------------------------------------------- BADGES Consistent pill-shaped badges used for course status labels. -------------------------------------------------------------------------- */ .badge { border-radius: 50px !important; padding: 5px 12px !important; font-weight: 500 !important; } /* -------------------------------------------------------------------------- PAGE HEADINGS Consistent spacing above page titles. -------------------------------------------------------------------------- */ .page-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--brand-secondary); } /* -------------------------------------------------------------------------- FOOTER Defined here so it's consistent across all pages. Now follows light/dark mode automatically. -------------------------------------------------------------------------- */ .site-footer { background-color: var(--surface-bg-alt); border-top: 1px solid var(--border-color); padding: 20px 0; margin-top: 40px; text-align: center; } .site-footer .footer-main { color: var(--text-muted); font-size: 0.9rem; } .site-footer .footer-powered { font-size: 0.8rem; color: #adb5bd; margin-top: 4px; } .site-footer a { color: var(--text-muted); text-decoration: none; } .site-footer a:hover { color: var(--brand-primary); } /* -------------------------------------------------------------------------- ALERTS Slightly rounded alerts to match the card style. -------------------------------------------------------------------------- */ .alert { border-radius: 10px; border: none; } /* -------------------------------------------------------------------------- PROGRESS BARS Consistent progress bar styling used on course cards. -------------------------------------------------------------------------- */ .progress { border-radius: 50px; background-color: #e9ecef; } .progress-bar { border-radius: 50px; background-color: var(--brand-primary); } /* -------------------------------------------------------------------------- WIDE LAYOUT (homepage only) On larger screens, lets the homepage's content area use more of the available width instead of staying capped at Bootstrap's default container max-width. Only applies to pages that opt in via ViewData["WideLayout"] = true (currently just the homepage). -------------------------------------------------------------------------- */ @media (min-width: 1200px) { body.wide-layout > .container { max-width: 95vw; } }