/* ===================================================================== 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=Merriweather:wght@400;700;900&family=Noto+Sans:wght@400;500;600;700;800&display=swap'); :root{ --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; --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: 8px; --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:'Noto Sans',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; } h1,h2,h3,h4,.brand{ font-family:'Merriweather',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; } .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; } .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:8px; 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:10px; padding:9px 14px; 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; } .icon-btn{ width:40px; height:40px; border-radius:8px; 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:12px; border:1px solid var(--border); cursor:pointer; background:var(--surface); color:var(--text); } .avatar{ width:32px; height:32px; border-radius:9px; 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; } .theme-toggle{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border-radius:10px; padding:4px; border:1px solid var(--border); } .theme-toggle button{ border:none; background:none; width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); } .theme-toggle button svg{ width:16px; height:16px; } .theme-toggle button.active{ background:var(--surface); color:var(--primary-text); box-shadow:var(--shadow); } /* Compact variant used by the public header (see compact_theme_toggle in _topbar_actions.html) — same two buttons/mechanism, just sized down to fit the slimmer public navbar instead of the dashboard topbar's size. */ .theme-toggle.compact{ gap:2px; padding:3px; } .theme-toggle.compact button{ width:26px; height:26px; border-radius:6px; } .theme-toggle.compact button svg{ width:14px; height:14px; } /* ---------------------------- 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%; padding:6px 24px; 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:600; white-space:nowrap; } .utility-back:hover{ color:#fff; } .utility-back svg{ width:13px; height:13px; } .utility-links{ display:flex; align-items:center; gap:16px; } .utility-link{ display:inline-flex; align-items:center; gap:5px; color:rgba(255,255,255,.85); font-weight:600; white-space:nowrap; } .utility-link:hover{ color:#fff; } .utility-link svg{ width:13px; height:13px; } .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; } .public-nav-link.active, .public-nav-link.active:hover{ background:var(--primary); color:#fff; } /* 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-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:1180px; 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; 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-links{ padding:26px 0 30px 32px; } .mega-panel-links-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .mega-panel-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); } .mega-panel-close{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; flex-shrink:0; transition:background .15s ease, color .15s ease, transform .15s ease; } .mega-panel-close:hover{ background:var(--surface-2); color:var(--text); transform:rotate(90deg); } .mega-panel-close svg{ width:15px; height:15px; } .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-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-links{ padding:22px 24px 26px; } .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). */ .search-overlay{ position:fixed; inset:0; z-index:500; display:none; } .search-overlay.show{ display:block; } .search-overlay-backdrop{ position:absolute; inset:0; background:rgba(4,12,28,.65); backdrop-filter:blur(8px); } body.search-overlay-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; max-width:640px; margin:80px auto 0; padding:0 28px; animation:searchOverlayIn .22s cubic-bezier(.22,.85,.32,1); } @keyframes searchOverlayIn{ from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .search-overlay-panel{ animation: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:12.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#ffb648; } .search-overlay-brand svg{ width:16px; height:16px; } .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:8px; padding:6px 10px; cursor:pointer; color:rgba(255,255,255,.7); } .search-overlay-close:hover{ color:#fff; background:rgba(255,255,255,.14); } .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-form{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; overflow:hidden; padding:6px 6px 6px 16px; margin-bottom:22px; box-shadow:0 8px 20px rgba(0,0,0,.25); } .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:15px; font-family:inherit; color:#1b1e2b; padding:8px 0; } .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:38px; height:38px; border-radius:10px; border:none; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .15s ease; } .search-overlay-submit:hover{ background:var(--primary-600); } .search-overlay-submit svg{ width:16px; height:16px; } .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,.55); margin-bottom:12px; } .search-overlay-section-label svg{ width:13px; height:13px; color:#ffb648; } .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; } .search-overlay-filter:hover{ border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14); } .search-overlay-filter .dotc{ width:7px; height:7px; border-radius:50%; flex-shrink:0; } .search-overlay-hint{ text-align:center; font-size:11.5px; color:rgba(255,255,255,.55); margin-top:20px; } .search-overlay-hint .kbd{ margin:0 2px; } @media(max-width:640px){ .search-overlay-panel{ margin:16px 12px 0; padding:0 8px; } } .public-header{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); width:100%; } .public-header-inner{ width:100%; padding:10px 24px; 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:34px; 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; } .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{ 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); } .public-nav-link svg.chev{ width:12px; height:12px; opacity:.6; } .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){ .public-nav-toggle{ display:flex; } .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%; } } @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:11px; 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