/* ===================================================================== PES Support — shared design system --------------------------------------------------------------------- This file is the single source of truth for design tokens (colors, spacing, radius, shadows) and every reusable component class (buttons, cards, tables, forms, badges, chips, modal, toast, sidebar/topbar layout). Page-specific rules belong in static/css//style.css and should only ever build on top of the classes defined here — never redefine a token. Theme switching uses the project's existing convention: the `data-bs-theme="light|dark"` attribute on , persisted under the `pes-theme` localStorage key (see base.html / dashboard_base.html). ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap'); :root{ /* Palette matches the pesu-events-dashboard.html reference exactly — this also happens to be this app's own original palette (only --radius, --vip/--vip-100 and the fonts below are actually new from the reference). */ --primary:#00377B; --primary-600:#002A5E; --primary-100:#EEEEFD; --primary-text:var(--primary); --success:#17C671; --success-100:#E8FBF1; --warning:#FF9533; --warning-100:#FEF6E6; --danger:#F1416C; --danger-100:#FDEEF2; --info:#17A2E0; --info-100:#E8F8FE; --vip:#B8860B; --vip-100:#FBF3E0; --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E8EAF3; --text:#1B1E2B; --muted:#7C8098; --muted-2:#A1A5B7; --sidebar-bg:#FFFFFF; --shadow: 0 2px 10px rgba(24,28,50,0.06), 0 1px 2px rgba(24,28,50,0.05); --shadow-lg: 0 12px 32px rgba(24,28,50,0.10); --radius: 16px; --sidebar-width: 264px; --sidebar-width-collapsed: 84px; --topbar-height: 70px; } html[data-bs-theme="dark"]{ --bg:#14161F; --surface:#1B1E2B; --surface-2:#20222F; --border:#2A2D3D; --text:#EDEEF5; --muted:#8A8DA3; --muted-2:#63667A; --primary-100:#25264A; --success-100:#123326; --warning-100:#332A14; --danger-100:#3A1C28; --info-100:#122C38; --vip:#E0B84B; --vip-100:#332C15; --shadow: 0 2px 8px rgba(0,0,0,0.25); --shadow-lg: 0 16px 40px rgba(0,0,0,0.45); /* --primary itself stays the same navy in dark mode (buttons rely on that), but that navy is unreadable as body-copy text on a dark surface — this token is for text-color usages only. */ --primary-text:#5EA3FF; } /* ---------------------------- reset / base ---------------------------- */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; } body:has(.public-header){ background:#ffffff; } h1,h2,h3,h4,.brand{ font-family:'Sora',sans-serif; } h1,h2,h3,h4{ margin:0; color:var(--text); } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; color:inherit; } img{ max-width:100%; } ::selection{ background:var(--primary); color:#fff; } /* Thin, theme-matching scrollbar everywhere (page scroll, table-wrap, dropdown menus) instead of the browser/OS's default chunky scrollbar. */ *{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; } ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background-color:var(--border); border-radius:20px; } ::-webkit-scrollbar-thumb:hover{ background-color:var(--muted); } /* ------------------------------- layout -------------------------------- */ .app{ display:flex; min-height:100vh; } .sidebar{ width:var(--sidebar-width); flex-shrink:0; background:var(--bg); border-right:none; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:40; transition:transform .25s ease, width .2s ease, background .25s ease; } .sidebar.collapsed{ width:var(--sidebar-width-collapsed); } .sidebar.dark{ background:var(--primary); } .main{ margin-left:var(--sidebar-width); flex:1; display:flex; flex-direction:column; min-width:0; transition:margin-left .2s ease; } .sidebar.collapsed ~ .main{ margin-left:var(--sidebar-width-collapsed); } .topbar{ height:var(--topbar-height); background:var(--bg); display:flex; align-items:center; gap:16px; padding:0 26px; position:sticky; top:0; z-index:30; } .content{ padding:45px 30px 60px; max-width:1360px; width:100%; margin:0 auto; } .content-shell{ /* No isolation:isolate — that would trap descendant modals' z-index inside this element's own stacking context, so they could never paint above the sidebar/topbar (which sit outside it with their own z-index). */ position:relative; margin:0 22px 22px; border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow-lg); overflow:hidden; flex:1; display:flex; flex-direction:column; /* Distinct from .card's solid --surface white/dark, so cards actually stand out instead of blending into the shell behind them. */ background:linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); } .content-shell::before{ content:""; position:absolute; top:-120px; right:-100px; width:320px; height:320px; z-index:0; background:radial-gradient(circle, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 70%); pointer-events:none; } .content-shell .content{ flex:1; position:relative; z-index:1; } .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35; display:none; } .overlay.show{ display:block; } /* ------------------------------ sidebar -------------------------------- */ .sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 22px 14px; } .sidebar-brand img.logo-mark{ width:36px; height:36px; border-radius:10px; object-fit:contain; flex-shrink:0; } .sidebar-brand img.logo-full{ height:34px; width:auto; display:block; } .sidebar.collapsed .sidebar-brand{ padding:18px 0 14px; justify-content:center; } .sidebar.collapsed .sidebar-brand img.logo-full{ display:none; } .sidebar:not(.collapsed) .sidebar-brand img.logo-mark{ display:none; } html[data-bs-theme="dark"] .sidebar-brand img.logo-full-light{ display:none; } html:not([data-bs-theme="dark"]) .sidebar-brand img.logo-full-dark{ display:none; } html[data-bs-theme="dark"] .sidebar-brand img.logo-mark-light{ display:none; } html:not([data-bs-theme="dark"]) .sidebar-brand img.logo-mark-dark{ display:none; } .sidebar-scroll{ flex:1; overflow-y:auto; padding:6px 14px 20px; } .nav-heading{ font-size:11px; font-weight:700; letter-spacing:.09em; color:var(--muted-2); text-transform:uppercase; padding:16px 12px 8px; } .sidebar.collapsed .nav-heading{ display:none; } .nav-item{ display:flex; align-items:center; gap:12px; width:100%; padding:9px 12px; margin:2px 0; border-radius:8px; border:none; background:transparent; color:var(--muted); font-size:14px; font-weight:500; text-align:left; cursor:pointer; position:relative; transition:background .15s ease,color .15s ease; } .nav-item svg{ width:18px; height:18px; flex-shrink:0; } .nav-item:hover{ background:var(--surface-2); color:var(--text); } .nav-item.active{ background:var(--primary-100); color:var(--primary-text); font-weight:700; } .sidebar.dark .nav-item{ color:rgba(255,255,255,.82); } .sidebar.dark .nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; } .sidebar.dark .nav-item.active{ background:rgba(255,255,255,.14); color:#fff; } .sidebar.collapsed .nav-item{ justify-content:center; } .sidebar.collapsed .nav-item span.label, .sidebar.collapsed .nav-item .nav-badge, .sidebar.collapsed .nav-group-btn svg.chev{ display:none; } .sidebar.collapsed .nav-children{ display:none !important; } .nav-badge{ margin-left:auto; background:var(--danger); color:#fff; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:20px; } .nav-children{ margin-left:14px; padding-left:14px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:2px; margin-bottom:6px; } .sidebar.dark .nav-children{ border-left-color:rgba(255,255,255,.14); } .nav-children .nav-item{ padding:7px 10px; font-size:12.8px; } .nav-group-btn svg.chev{ width:14px; height:14px; margin-left:auto; flex-shrink:0; } .nav-new-btn{ display:flex; align-items:center; gap:8px; width:100%; margin-top:2px; padding:7px 10px; border-radius:8px; border:1px dashed var(--primary-text); background:transparent; color:var(--primary-text); font-size:12.2px; font-weight:700; cursor:pointer; } .nav-new-btn svg{ width:12px; height:12px; flex-shrink:0; } .sidebar.dark .nav-new-btn{ border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.9); } .nav-new-btn.active{ background:var(--primary); border-style:solid; border-color:var(--primary); color:#fff; } .sidebar.dark .nav-new-btn.active{ background:rgba(255,255,255,.16); border-color:transparent; color:#fff; } /* "More below" cue — same bouncing-chevron idea as the homepage hero's own scroll-down indicator (.hero-ed-scroll), just shorter travel to suit a narrow sidebar. JS (initSidebar in scripts.js) toggles .show only while .sidebar-scroll actually has content scrolled out of view below, and clicking it scrolls the nav list down (see the same click handler). */ .sidebar-scroll-hint{ display:flex; justify-content:center; padding:2px 0; color:var(--muted); flex-shrink:0; width:100%; border:none; background:transparent; font:inherit; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease, color .15s ease; } .sidebar-scroll-hint:hover{ color:var(--text); } .sidebar-scroll-hint svg{ width:15px; height:15px; } .sidebar-scroll-hint.show{ opacity:1; pointer-events:auto; animation:sidebarScrollBounce 1.8s ease-in-out infinite; } .sidebar.collapsed .sidebar-scroll-hint{ display:none; } @keyframes sidebarScrollBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } } @media (prefers-reduced-motion:reduce){ .sidebar-scroll-hint.show{ animation:none; } } .sidebar-footer{ padding:14px; } .sidebar.collapsed .sidebar-footer{ display:none; } .upgrade-card{ background:linear-gradient(135deg,var(--primary),#001F4A); border-radius:14px; padding:16px; color:#fff; } .upgrade-card h4{ margin:0 0 4px; font-size:14px; color:#fff; } .upgrade-card p{ margin:0 0 12px; font-size:12px; opacity:.85; line-height:1.4; } .upgrade-card button{ background:#fff; color:var(--primary-600); border:none; border-radius:999px; padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer; width:100%; } .sidebar-footer-note{ padding:10px 12px 0; font-size:11px; color:var(--muted); } .sidebar.dark .sidebar-footer-note{ color:rgba(255,255,255,.5); } .sidebar.collapsed .sidebar-footer-note{ display:none; } /* ------------------------------- topbar -------------------------------- */ .search-box{ flex:1; max-width:420px; display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:9px 16px; color:var(--muted); position:relative; } .search-box input[type=text]{ border:none; background:transparent; outline:none; flex:1; padding:0; font-size:13.5px; color:var(--text); border-radius:0; } .search-box input[type=text]:focus{ border:none; background:transparent; } .search-box svg{ width:16px; height:16px; flex-shrink:0; display:block; } /* .icon-btn (defined later, under topbar-right) also sets display:flex — needs matching .icon-btn.search-mobile-btn specificity here to actually win, a plain .search-mobile-btn{display:none} would otherwise lose that tie-break regardless of viewport width. */ .icon-btn.search-mobile-btn{ display:none; } @media(max-width:820px){ .icon-btn.search-mobile-btn{ display:flex; } } .search-modal{ max-width:520px; } .search-modal .search-box{ max-width:none; } /* Dashboard topbar's own round-logo mark — only relevant on mobile, where the sidebar (which normally carries the brand) is off-canvas and hidden. */ .topbar-brand{ display:none; align-items:center; } .topbar-brand img.logo-mark{ width:32px; height:32px; border-radius:8px; object-fit:contain; } html[data-bs-theme="dark"] .topbar-brand img.logo-mark-light{ display:none; } html:not([data-bs-theme="dark"]) .topbar-brand img.logo-mark-dark{ display:none; } @media(max-width:820px){ .topbar-brand{ display:flex; } } .topbar-right{ display:flex; align-items:center; gap:8px; margin-left:auto; } @media(max-width:820px){ /* Sidebar-toggle hamburger moves from the far left to the far right on mobile, past the whole topbar-right cluster — search now lives inside .topbar-right itself (see header.html), right before the theme toggle, so the final left-to-right order is: logo → [search, theme, quick, notif, avatar] → hamburger. */ .topbar-right{ order:2; } /* A little extra clearance from the true screen edge — .icon-btn's solid border reads as "flush against the edge" more than a rounded/padded pill would at the exact same container inset, so it gets a bit more room than .topbar's own gap alone gives it. */ #sidebarToggleBtn{ order:3; margin-right:4px; } } .icon-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); position:relative; transition:background .15s ease,color .15s ease; flex-shrink:0; } .icon-btn:hover{ background:var(--surface-2); color:var(--text); } .icon-btn svg{ width:18px; height:18px; } .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:1.5px solid var(--surface); } .user-chip{ display:flex; align-items:center; gap:4px; padding:3px; border-radius:999px; border:1px solid var(--border); cursor:pointer; background:var(--surface); color:var(--text); } .avatar{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#001F4A); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; flex-shrink:0; } .user-chip svg{ flex-shrink:0; margin-right:4px; } /* Single stacked icon (sun OR moon, never both) in one .icon-btn-shaped square — both [data-theme-set] buttons stay in the DOM absolutely positioned on top of each other, and only the *inactive* one (the theme you'd switch TO) is shown/clickable, so the toggle reads as one same- sized control next to search/quick-actions/notifications instead of a wider two-icon segmented pill. Same sizing as .icon-btn (40px desktop, 32px at <=640px — see the responsive section at the end of this file) so every button in the topbar cluster is visually one consistent size. */ .theme-toggle{ position:relative; width:40px; height:40px; border-radius:50%; flex-shrink:0; background:var(--surface); border:1px solid var(--border); } .theme-toggle:hover{ background:var(--surface-2); } .theme-toggle button{ position:absolute; inset:0; width:100%; height:100%; border:none; background:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); opacity:0; visibility:hidden; transition:opacity .15s ease, color .15s ease; } .theme-toggle button svg{ width:18px; height:18px; } .theme-toggle button:not(.active){ opacity:1; visibility:visible; } .theme-toggle:hover button:not(.active){ color:var(--text); } /* ---------------------------- public site header ------------------------ */ /* Rendered by main/base.html's {% block header %} — shared by every public page (home, public webforms, login, error pages), not just the home page. */ /* Secondary utility bar above the main navbar, cloned from news.pes.edu's cross-site strip — same real PES destinations regardless of which PES sub-site you're on. */ .public-utility-bar{ background:var(--primary-600); color:#fff; } .public-utility-inner{ width:100%; max-width:1280px; margin:0 auto; padding:6px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; } .utility-back{ display:inline-flex; align-items:center; gap:4px; color:rgba(255,255,255,.85); font-weight:700; white-space:nowrap; } .utility-back:hover{ color:#fff; } .utility-back svg{ width:13px; height:13px; } .utility-links{ display:flex; align-items:center; gap:20px; } .utility-link{ display:inline-flex; align-items:center; color:rgba(255,255,255,.85); font-weight:500; white-space:nowrap; } .utility-link:hover{ color:#fff; } .utility-divider{ width:1px; height:14px; background:rgba(255,255,255,.25); } .utility-admissions-btn{ display:inline-flex; align-items:center; gap:5px; padding:5px 14px; border-radius:999px; background:var(--warning); color:#fff; font-weight:700; white-space:nowrap; transition:filter .15s ease; font-size:11.5px; } .utility-admissions-btn:hover{ filter:brightness(1.06); } .utility-admissions-btn svg{ width:13px; height:13px; } /* Orange text + underline (not a solid navy pill) for whichever nav item is "current" — matches the PES Support reference's own active nav treatment. Two things drive .active here, both already wired up before this change and untouched: select_public_nav in each page's own view context (see public/base.html's {% if select_public_nav == '...' %}) for a plain link like Calendar/Guests, and initMegaMenus's setActiveTrigger (scripts.js) toggling the SAME class on whichever Campus/Department/Tags trigger's mega-panel is currently open — so a mega-menu counts as "selected" here for free, without extra JS. */ .public-nav-link.active, .public-nav-link.active:hover{ background:transparent; color:var(--primary-text); } .public-nav-link.active::after{ content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px; background:var(--primary-text); border-radius:2px; } /* Full-width mega dropdown (per-campus quick links), cloned from news.pes.edu's "Browse by X" panels. Reparented to and positioned with JS (see initMegaMenus in scripts.js) — same reasoning as the modal reparenting in initModals(): no ancestor's position/transform can then trap it away from spanning the full viewport width. */ .mega-panel{ position:fixed; left:0; right:0; z-index:300; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); display:none; max-height:80vh; overflow-y:auto; } .mega-panel.show{ display:block; animation:megaPanelIn .22s cubic-bezier(.22,.85,.32,1); } @keyframes megaPanelIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .mega-panel.show{ animation:none; } } /* Background spans the full width (like the header above it); the actual content lines up with the header/page content's own max-width instead of stretching edge-to-edge. */ .mega-panel-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:270px 1fr; min-height:230px; } /* Left: the campus's own photo (or its brand color as a flat fallback) with its name overlaid — right: the quick-links grid. */ .mega-panel-visual{ position:relative; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; /* This panel has no single campus to photograph (it's the "choose a campus" overview, not one campus's own page) — the same navy gradient used by the other brand-level decorative panels (hero bands, auth screens) stands in as its background instead of a photo. */ background:linear-gradient(150deg, #061428 0%, var(--primary-600) 55%, var(--primary) 100%); background-size:cover; background-position:center; color:#fff; overflow:hidden; } .mega-panel-visual::before{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.68) 100%); } .mega-panel-visual-icon{ position:relative; z-index:1; width:40px; height:40px; border-radius:11px; margin-bottom:auto; background:rgba(255,255,255,.2); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; } .mega-panel-visual-icon svg{ width:18px; height:18px; } .mega-panel-visual-title{ position:relative; z-index:1; font-size:20px; font-weight:800; margin:0 0 4px; color:#fff; } .mega-panel-visual-sub{ position:relative; z-index:1; font-size:12px; color:rgba(255,255,255,.82); } .mega-panel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; padding-right:32px; } .mega-item{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:14px; border:1px solid var(--border); background:var(--surface); transition:border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease; } .mega-item:hover{ border-color:var(--accent, var(--primary)); background:var(--surface-2); transform:translateY(-2px); box-shadow:var(--shadow); } .mega-item.active{ border-color:var(--accent, var(--primary)); background:var(--accent-100, var(--primary-100)); } .mega-item-icon{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--accent-100, var(--primary-100)); color:var(--accent, var(--primary-text)); } .mega-item-icon svg{ width:18px; height:18px; } .mega-item-body{ min-width:0; display:flex; flex-direction:column; gap:2px; } .mega-item-title{ font-size:13.5px; font-weight:700; color:var(--text); } .mega-item-sub{ font-size:11.5px; color:var(--muted); } @media(max-width:760px){ .mega-panel-inner{ grid-template-columns:1fr; } .mega-panel-visual{ padding:20px 24px; min-height:110px; } .mega-panel-grid{ padding-right:0; } } /* Full-screen search overlay toggled by #publicSearchToggleBtn (see initPublicSearchToggle in scripts.js) — cloned from news.pes.edu's dark glassmorphic command-palette search: this panel is deliberately always dark-navy-glass regardless of the site's own light/dark toggle, same as the hero section. Adapted with a "quick filters" row of campuses instead of their tag/press-note filters (no tag taxonomy in this app). */ /* Pixel-matched to the "PES Support" search-overlay reference (search.html) — flex-column root + padding-top:8vh (not the old fixed margin-top on the panel) so the panel is always vertically anchored the same fraction of the viewport down, same mechanism as that reference's own .srch-overlay. Kept the opacity/visibility toggle (not display:none/block) for the same reason the reference does — it's what lets .search-overlay-panel's own transform/opacity transition (below) actually animate in on open. */ .search-overlay{ position:fixed; inset:0; z-index:500; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:8vh; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease; } .search-overlay.show{ opacity:1; visibility:visible; } .search-overlay.show .search-overlay-panel{ transform:translateY(0) scale(1); opacity:1; } .search-overlay-backdrop{ position:absolute; inset:0; background:rgba(0,8,24,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } body.search-overlay-open{ overflow:hidden; } body.mm-open{ overflow:hidden; } /* No card/box around this — just the field and the filter chips floating directly over the dimmed, blurred backdrop. */ .search-overlay-panel{ position:relative; z-index:1; width:100%; max-width:660px; padding:0 20px 40px; transform:translateY(-18px) scale(.97); opacity:0; transition:transform .32s cubic-bezier(.34,1.56,.64,1), opacity .22s ease; } @media (prefers-reduced-motion:reduce){ .search-overlay-panel{ transition:none; } } .search-overlay-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } .search-overlay-brand{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.35); } .search-overlay-brand svg{ width:14px; height:14px; color:#ef7e1a; } .search-overlay-close{ display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); border-radius:9px; padding:6px 14px; cursor:pointer; color:rgba(255,255,255,.7); } .search-overlay-close:hover{ color:#fff; background:rgba(255,255,255,.18); } .search-overlay-close svg{ width:14px; height:14px; } .kbd{ font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.75); } .search-overlay-close kbd{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:inherit; } .search-overlay-form{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; overflow:hidden; padding:6px 6px 6px 22px; margin-bottom:22px; box-shadow:0 24px 64px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.2); } .search-overlay-form svg{ width:18px; height:18px; color:var(--muted); flex-shrink:0; } /* input[type=search] renders its own native rounded box + border in some browsers unless fully reset — left as-is it visually splits into two boxes (a small bordered one nested inside the pill), pushing the search icon out into the gap to its left. */ .search-overlay-form input{ flex:1; min-width:0; border:none; outline:none; background:transparent; -webkit-appearance:none; appearance:none; box-shadow:none; font-size:18px; font-family:inherit; color:#1a1a2e; padding:10px 14px; } .search-overlay-form input::-webkit-search-decoration, .search-overlay-form input::-webkit-search-cancel-button, .search-overlay-form input::-webkit-search-results-button, .search-overlay-form input::-webkit-search-results-decoration{ -webkit-appearance:none; } .search-overlay-submit{ width:50px; height:50px; border-radius:50%; border:none; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s ease, transform .15s ease; } .search-overlay-submit:hover{ background:#ef7e1a; transform:scale(1.06); } .search-overlay-submit svg{ width:18px; height:18px; } .search-overlay-section-label{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:12px; } .search-overlay-section-label svg{ width:13px; height:13px; color:#ef7e1a; } .search-overlay-filters{ display:flex; flex-wrap:wrap; gap:8px; } .search-overlay-filter{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); font-size:12.5px; font-weight:700; color:rgba(255,255,255,.85); transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; } .search-overlay-filter svg{ width:13px; height:13px; flex-shrink:0; } .search-overlay-filter:hover{ border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff; transform:translateY(-2px); } /* Tag chips (Popular tags) read one notch quieter than the quick-filter chips above them — smaller/dimmer at rest, same hover brighten — matching the reference's own two-tier hierarchy between its .srch-chip and .srch-chip-tag. */ .search-overlay-filter.is-tag{ font-size:11.5px; color:rgba(255,255,255,.5); } /* Quick-filter accent chips (Live now / Browse all events / Upcoming events) — same red/orange/navy recipe as the reference's own .srch-chip-red/-orange/-navy, ahead of the plain per-campus chips. */ .search-overlay-filter.accent-red{ background:rgba(220,38,38,.2); border-color:rgba(220,38,38,.3); color:#fca5a5; } .search-overlay-filter.accent-red:hover{ background:rgba(220,38,38,.4); border-color:rgba(220,38,38,.4); color:#fff; } .search-overlay-filter.accent-orange{ background:rgba(239,126,26,.2); border-color:rgba(239,126,26,.3); color:#fdba74; } .search-overlay-filter.accent-orange:hover{ background:rgba(239,126,26,.4); border-color:rgba(239,126,26,.4); color:#fff; } .search-overlay-filter.accent-navy{ background:rgba(97,185,240,.15); border-color:rgba(97,185,240,.28); color:#93c5fd; } .search-overlay-filter.accent-navy:hover{ background:rgba(97,185,240,.3); border-color:rgba(97,185,240,.3); color:#fff; } .search-overlay-hint{ text-align:center; font-size:11.5px; color:rgba(255,255,255,.35); margin-top:20px; } .search-overlay-hint .kbd{ margin:0 2px; } @media(max-width:640px){ .search-overlay{ padding-top:5vh; } .search-overlay-panel{ padding:0 12px 24px; } .search-overlay-form input{ font-size:15px; padding:8px 10px; } .search-overlay-submit{ width:44px; height:44px; } .search-overlay-hint{ display:none; } } .public-header{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); width:100%; } /* Both the utility bar and header sit UNDER .mega-backdrop's z-index:290 (public.css) at their normal z-index, so once a mega-panel is open they were being visually dimmed/blurred by it AND swallowing clicks meant for the header — including the other nav triggers, making it impossible to switch from e.g. Campus to Department without closing the menu first. Raised above the backdrop here so the header stays crisp and fully clickable while a mega-panel is open, same as it looks on initial load. Desktop-only (matches .mega-backdrop's own @media(max-width:980px){ display:none } in public.css) — below 980px there's no backdrop to sit above, and raising these here would instead incorrectly float them over #mobileMenu's full-screen drawer (z-index:200). */ @media (min-width:981px){ .public-utility-bar{ position:relative; z-index:291; } .public-header{ z-index:291; } } .public-header-inner{ width:100%; max-width:1280px; margin:0 auto; padding:10px 40px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; } .public-nav-toggle{ display:none; } .public-brand{ display:flex; align-items:center; gap:10px; } .public-brand img.logo-full{ height:48px; width:auto; display:block; } html[data-bs-theme="dark"] .public-brand img.logo-full-light{ display:none; } html:not([data-bs-theme="dark"]) .public-brand img.logo-full-dark{ display:none; } /* Round mark shown instead of the wordmark below 980px (see responsive section at the end of this file) — hidden on desktop by default. */ .public-brand img.logo-mark{ width:38px; height:38px; border-radius:10px; object-fit:contain; display:none; } html[data-bs-theme="dark"] .public-brand img.logo-mark-light{ display:none; } html:not([data-bs-theme="dark"]) .public-brand img.logo-mark-dark{ display:none; } html[data-bs-theme="dark"] .mm-brand img.logo-full-light{ display:none; } html:not([data-bs-theme="dark"]) .mm-brand img.logo-full-dark{ display:none; } .public-nav{ display:flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap; } .public-nav-brand{ display:none; } .drawer-close-btn{ display:none; width:32px; height:32px; border-radius:8px; flex-shrink:0; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); align-items:center; justify-content:center; cursor:pointer; } .drawer-close-btn:hover{ background:var(--surface); color:var(--text); } .drawer-close-btn svg{ width:15px; height:15px; } .public-nav-link{ position:relative; display:flex; align-items:center; gap:5px; padding:8px 16px; border-radius:9px; border:none; background:transparent; font-size:13.3px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; font-family:inherit; } .public-nav-link:hover{ background:var(--surface-2); color:var(--primary-text); } .public-nav-link svg.chev{ width:12px; height:12px; opacity:.6; transition:transform .2s ease; } .public-nav-link.is-open svg.chev{ transform:rotate(180deg); } .public-header-right{ display:flex; align-items:center; gap:10px; justify-self:end; } /* Below 980px the horizontal nav becomes a left-hand off-canvas drawer, toggled by #publicNavToggleBtn (see initPublicNav in scripts.js) — mirrors the dashboard sidebar's own off-canvas pattern so the two navbars behave the same way on mobile instead of the public one just disappearing. */ @media (max-width:980px){ /* Hamburger reads as "the" menu control, so it belongs at the true right edge of the header — last in visual order, past search and the theme toggle — rather than first in .public-header-right's DOM order. */ .public-nav-toggle{ display:flex; order:3; } .public-brand img.logo-full{ display:none; } .public-brand img.logo-mark{ display:block; } .public-nav{ position:fixed; top:0; left:0; bottom:0; z-index:250; width:280px; max-width:82vw; background:var(--surface); flex-direction:column; align-items:stretch; gap:2px; padding:20px 14px 20px; overflow-y:auto; box-shadow:var(--shadow-lg); transform:translateX(-100%); transition:transform .25s ease; } .public-nav.open{ transform:translateX(0); } .public-nav-brand{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px 18px; margin-bottom:10px; border-bottom:1px solid var(--border); } .public-nav-brand img.logo-full{ height:30px; width:auto; display:block; } html[data-bs-theme="dark"] .public-nav-brand img.logo-full-light{ display:none; } html:not([data-bs-theme="dark"]) .public-nav-brand img.logo-full-dark{ display:none; } .public-nav-brand .drawer-close-btn{ display:flex; } .public-nav-link{ width:100%; justify-content:space-between; } .public-nav .menu-wrap{ width:100%; } /* Campus mega-panel becomes a plain inline accordion nested inside the drawer instead of the desktop's fixed, full-viewport dropdown — see initMegaMenus()'s isMobileDrawer() branch in scripts.js, which skips reparenting the panel to and skips position:fixed placement below this same breakpoint, so it stays part of the drawer's own flow. */ .public-nav .mega-panel{ position:static; display:none; max-height:none; overflow:visible; background:transparent; border-bottom:none; box-shadow:none; z-index:auto; } .public-nav .mega-panel.show{ display:block; animation:none; } .public-nav .mega-panel-inner{ display:block; max-width:none; min-height:0; } .public-nav .mega-panel-visual{ display:none; } .public-nav .mega-panel-grid{ display:flex; flex-direction:column; gap:6px; padding-right:0; } .public-nav .mega-item{ padding:11px 12px; border-radius:12px; border:none; background:var(--primary-100); transition:background .15s ease; } .public-nav .mega-item:hover{ background:color-mix(in srgb, var(--primary) 16%, var(--primary-100)); transform:none; box-shadow:none; } .public-nav .mega-item-icon{ width:30px; height:30px; border-radius:8px; background:transparent; color:var(--primary-text); } .public-nav .mega-item-icon svg{ width:16px; height:16px; } .public-nav .mega-item-sub{ display:none; } } @media (prefers-reduced-motion:reduce){ .public-nav{ transition:none; } } /* --------------------------- dropdown menus ---------------------------- */ .menu-wrap{ position:relative; } .menu-panel{ position:absolute; top:calc(100% + 8px); right:0; width:280px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 20px 45px rgba(0,20,45,.16); z-index:41; display:none; overflow:hidden; } .menu-panel.left{ right:auto; left:0; } .menu-panel.show{ display:block; } .menu-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); } .menu-panel-head h4{ margin:0; font-size:14.5px; font-weight:800; color:var(--primary-text); } .menu-panel-head-actions{ display:flex; align-items:center; gap:10px; } #notificationsMenu{ width:340px; } .menu-item{ width:100%; display:flex; align-items:center; gap:10px; border:none; background:transparent; border-radius:9px; padding:9px 10px; cursor:pointer; color:var(--text); font-size:13px; font-weight:600; text-align:left; } .menu-item:hover{ background:var(--surface-2); } .menu-item.danger{ color:var(--danger); } .menu-item svg{ width:15px; height:15px; flex-shrink:0; } .menu-body{ padding:8px; } .menu-divider{ height:1px; background:var(--border); margin:6px 4px; } /* Profile summary shown at the top of the account dropdown (#profileMenu) — the topbar chip itself hides the name/email on mobile to save space, so this repeats avatar + name + username inside the dropdown on every size. */ .menu-profile-head{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--border); } .menu-profile-head .avatar{ width:42px; height:42px; border-radius:50%; font-size:15px; } .menu-profile-head-text{ min-width:0; } .menu-profile-head-text .name{ font-size:14px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .menu-profile-head-text .username{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .notif-row{ display:flex; align-items:flex-start; gap:14px; padding:16px 20px; cursor:pointer; border-top:1px solid var(--border); position:relative; transition:background .15s ease; animation:notifRowIn .3s ease both; } @keyframes notifRowIn{ from{ opacity:0; transform:translateX(6px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .notif-row{ animation:none; } } .notif-row:first-child{ border-top:none; } .notif-row:hover{ background:var(--surface-2); } .notif-row.unread{ background:color-mix(in srgb, var(--warning) 8%, var(--surface)); } .notif-row.unread:hover{ background:color-mix(in srgb, var(--warning) 14%, var(--surface)); } .notif-row.unread::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--warning), color-mix(in srgb, var(--warning) 60%, var(--danger))); } .notif-icon{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--muted); transition:background .15s ease, color .15s ease; } .notif-icon svg{ width:16px; height:16px; } .notif-row.unread .notif-icon{ background:var(--warning-100); color:var(--warning); } .notif-body{ flex:1; min-width:0; } .notif-msg{ font-size:12.8px; font-weight:600; color:var(--text); line-height:1.4; } .notif-row.unread .notif-msg{ font-weight:800; } .notif-desc{ font-size:12px; color:var(--muted); line-height:1.55; margin-top:4px; } .notif-time{ font-size:11px; color:var(--muted-2); margin-top:5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .notif-unread-pill{ flex-shrink:0; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; background:var(--warning); color:#fff; padding:2px 7px; border-radius:20px; line-height:1.5; } .notif-read-tick{ flex-shrink:0; display:inline-flex; color:var(--success); opacity:.65; } .notif-read-tick svg{ width:12px; height:12px; } .notif-group-head{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:12px; } .notif-group-count{ background:var(--surface-2); border:1px solid var(--border); color:var(--muted); font-size:10.5px; font-weight:800; padding:1px 8px; border-radius:20px; letter-spacing:0; text-transform:none; } /* Full notifications page only — wraps the click-to-read button plus a separate row-actions column (Edit/Delete), which can't nest inside the button itself since a