/*! ISO Xpert Academy — design layer v4 * * Layered ON TOP of course-page.css (and the inline CSS in index.html). Only * additive rules so older pages keep working unchanged. Adds: * - design tokens (light + dark) * - category accent colours * - sticky navbar with backdrop blur * - refined card hover, focus rings, scroll-reveal * - dark mode toggle button styling * * Dark mode triggers: * - prefers-color-scheme: dark (auto) * - [data-theme="dark"] on (manual override) * - [data-theme="light"] on forces light regardless of OS pref */ /* ============== Design tokens ============== */ :root { /* Brand */ --nav-navy: #152444; --nav-deep: #0a1628; --brand-blue: #2560ae; --brand-blue-dark: #1d4e94; --brand-blue-soft: #5b9bd5; /* Surfaces */ --bg: #f4f8fd; --surface: #ffffff; --surface-2: #eef3fb; --surface-3: #e4edf8; --border: #cdd8ec; --border-strong: #9eb3d4; /* Text */ --text: #1a1f2e; --text-muted: #4a5a78; --text-faint: #7a8ea8; --text-on-brand: #ffffff; /* Accents */ --accent-green: #27ae60; --accent-teal: #16a085; --accent-amber: #d97706; --accent-red: #dc2626; /* Shadows */ --shadow-1: 0 2px 8px rgba(20, 50, 120, .05); --shadow-2: 0 8px 24px rgba(20, 50, 120, .08); --shadow-3: 0 16px 48px rgba(20, 50, 120, .14); /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: 160ms; --dur: 240ms; --dur-slow: 420ms; /* Category accents (light) */ --cat-qms: #2560ae; --cat-ohs: #d97706; --cat-ems: #16a085; --cat-sec: #6d28d9; --cat-ai: #db2777; --cat-food: #ca8a04; --cat-bcp: #0891b2; --cat-cus: #4f46e5; --cat-ims: #475569; } /* Dark theme — auto if user prefers it AND has not forced light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a1628; --surface: #131f37; --surface-2: #1a2746; --surface-3: #233356; --border: #2a3e6c; --border-strong: #3d5489; --text: #e7eef9; --text-muted: #a9b8d4; --text-faint: #7d8db0; --shadow-1: 0 2px 10px rgba(0, 0, 0, .35); --shadow-2: 0 8px 28px rgba(0, 0, 0, .45); --shadow-3: 0 18px 50px rgba(0, 0, 0, .55); } } /* Manual dark override */ :root[data-theme="dark"] { --bg: #0a1628; --surface: #131f37; --surface-2: #1a2746; --surface-3: #233356; --border: #2a3e6c; --border-strong: #3d5489; --text: #e7eef9; --text-muted: #a9b8d4; --text-faint: #7d8db0; --shadow-1: 0 2px 10px rgba(0, 0, 0, .35); --shadow-2: 0 8px 28px rgba(0, 0, 0, .45); --shadow-3: 0 18px 50px rgba(0, 0, 0, .55); } /* ============== Global feel ============== */ html { color-scheme: light dark; } body { background: var(--bg); color: var(--text); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } /* Smooth scroll anchor offset for sticky navbar */ [id] { scroll-margin-top: 90px; } /* Better focus rings everywhere */ :focus-visible { outline: 3px solid var(--brand-blue-soft); outline-offset: 2px; border-radius: var(--r-sm); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--brand-blue-soft); outline-offset: 2px; } /* ============== Sticky navbar with blur ============== */ header > .navbar, header .navbar { position: sticky; top: 0; z-index: 1000; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(205, 216, 236, .6); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } :root[data-theme="dark"] header > .navbar, :root[data-theme="dark"] header .navbar { background: rgba(10, 22, 40, .78); border-bottom-color: rgba(42, 62, 108, .6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header > .navbar, :root:not([data-theme="light"]) header .navbar { background: rgba(10, 22, 40, .78); border-bottom-color: rgba(42, 62, 108, .6); } } header > .navbar.is-scrolled, header .navbar.is-scrolled { box-shadow: var(--shadow-2); } /* Navbar contents need new colours to be legible on the translucent surface. * The original course-page.css assumed a navy navbar background and styled * links as white-on-navy. With the v4 light navbar background, we re-tone * link, search-button, and hamburger so they remain readable. */ header .navbar-links a { color: var(--text-muted); font-weight: 500; } header .navbar-links a:hover, header .navbar-links a:focus-visible { color: var(--brand-blue); } header .navbar-links a[aria-current="page"] { color: var(--brand-blue); } header .nav-search-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); } header .nav-search-btn:hover, header .nav-search-btn:focus-visible { background: var(--surface-3); border-color: var(--border-strong); color: var(--brand-blue); } header .nav-search-btn .sb-key { background: var(--surface); color: var(--text-faint); border: 1px solid var(--border); } /* Hamburger bars also assumed white-on-navy */ header .mobile-toggle span { background: var(--text); } /* Mobile dropdown panel: when expanded on small screens, the .navbar-links.active * panel needs a solid (not blurred) surface to stay legible. */ @media (max-width: 768px) { header .navbar-links.active { background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-2); } header .navbar-links.active a { color: var(--text); } header .navbar-links.active a:hover { color: var(--brand-blue); } } /* Dark theme adjustments — links stay light on the dark blurred navbar */ :root[data-theme="dark"] header .navbar-links a, :root[data-theme="dark"] header .nav-search-btn { color: var(--text-muted); } :root[data-theme="dark"] header .navbar-links a:hover, :root[data-theme="dark"] header .nav-search-btn:hover { color: var(--brand-blue-soft); } :root[data-theme="dark"] header .mobile-toggle span { background: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header .navbar-links a, :root:not([data-theme="light"]) header .nav-search-btn { color: var(--text-muted); } :root:not([data-theme="light"]) header .navbar-links a:hover, :root:not([data-theme="light"]) header .nav-search-btn:hover { color: var(--brand-blue-soft); } :root:not([data-theme="light"]) header .mobile-toggle span { background: var(--text); } } /* Current-page indicator */ .navbar-links a[aria-current="page"] { color: var(--brand-blue); position: relative; } .navbar-links a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brand-blue); border-radius: 2px; } /* ============== Theme toggle button ============== */ .theme-toggle { position: relative; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1; transition: all var(--dur-fast) var(--ease); font-family: inherit; padding: 0; } .theme-toggle:hover { background: var(--surface-3); border-color: var(--border-strong); transform: translateY(-1px); } .theme-toggle .tt-sun, .theme-toggle .tt-moon { display: inline-block; } :root[data-theme="dark"] .theme-toggle .tt-sun, :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: none; } :root[data-theme="dark"] .theme-toggle .tt-moon, :root:not([data-theme="light"]) .theme-toggle .tt-moon { display: inline-block; } .theme-toggle .tt-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .tt-moon { display: inline-block; } } /* ============== Course cards: category accents + hover lift ============== */ .course-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 20px; text-decoration: none; color: inherit; display: block; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .course-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-blue); transform: scaleY(0); transform-origin: top; transition: transform var(--dur) var(--ease); } .course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--border-strong); } .course-card:hover::before { transform: scaleY(1); } .course-card .course-card-badge { background: var(--surface-3); color: var(--brand-blue); } .course-card h3 { color: var(--text); } .course-card p { color: var(--text-muted); } /* Cards in /Course/ rendered grid (`coursesGrid` direct children) */ #coursesGrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Category-specific left border via data attribute (when authors opt-in) */ .course-card[data-cat="qms"]::before { background: var(--cat-qms); } .course-card[data-cat="ohs"]::before { background: var(--cat-ohs); } .course-card[data-cat="ems"]::before { background: var(--cat-ems); } .course-card[data-cat="sec"]::before { background: var(--cat-sec); } .course-card[data-cat="ai"]::before { background: var(--cat-ai); } .course-card[data-cat="food"]::before { background: var(--cat-food); } .course-card[data-cat="bcp"]::before { background: var(--cat-bcp); } .course-card[data-cat="cus"]::before { background: var(--cat-cus); } .course-card[data-cat="ims"]::before { background: var(--cat-ims); } /* ============== Related cards ============== */ .rel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 16px 14px; text-decoration: none; color: inherit; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); display: block; } .rel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* ============== Buttons ============== */ .btn { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .btn-primary { box-shadow: 0 2px 0 rgba(0,0,0,.06); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37,96,174,.32); } .btn:focus-visible { outline: 3px solid var(--brand-blue-soft); outline-offset: 3px; } /* ============== Scroll-reveal (used by widgets.js IntersectionObserver) ============== */ .animate-on-scroll { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .animate-on-scroll.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } } /* ============== Course finder: subtle step transition ============== */ .finder-step { transition: opacity var(--dur) var(--ease); } .finder-step:not(.active) { opacity: 0; pointer-events: none; } .finder-step.active { opacity: 1; pointer-events: auto; } /* ============== Footer polish ============== */ .footer { background: var(--nav-deep); color: rgba(255,255,255,.85); } .footer a { transition: color var(--dur-fast) var(--ease); } .footer a:hover { color: var(--brand-blue-soft); } /* ============== Wishlist (v5) ============== */ .course-card, .rel-card, .result-card { position: relative; } .wishlist-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 0; z-index: 2; font-family: inherit; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .wishlist-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--accent-red, #dc2626); transform: scale(1.08); } .wishlist-btn.is-saved { background: #fee2e2; border-color: #fca5a5; color: #dc2626; } .wishlist-btn.is-saved:hover { background: #fecaca; } .wishlist-btn .wb-heart { display: inline-block; transition: transform var(--dur-fast) var(--ease); } .wishlist-btn.is-saved .wb-heart { animation: wb-pop .35s var(--ease); } @keyframes wb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } } /* Wishlist count badge in navbar */ .wishlist-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; background: var(--brand-blue); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; margin-left: 4px; } .wishlist-badge[hidden] { display: none; }