/* Accessibility font previews - Default/System UI use the existing stack, these three are opt-in typefaces and were never actually being loaded anywhere, so their preview text (and the live font when selected) was silently falling back to the default font. If your CSP blocks external style-src/font-src, swap these @import lines for self-hosted @font-face rules instead. */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600&family=Atkinson+Hyperlegible:wght@400;700&display=swap'); @import url('https://fonts.cdnfonts.com/css/opendyslexic'); /* ========================================================================= NorthStar Group - Staff Panel theme (v2) Design language: night-highway. A dark, asphalt-toned interface. Sidebar/directory categories keep their own color via --nsg-cat-accent (falls back to --nsg-accent where unset). --nsg-accent itself always reflects the user's chosen theme (set once on load via render_theme_style_vars() in helpers.php) and drives the signature accent elements: the route line, buttons, the dropdown role label, and the "Group" wordmark. It no longer gets globally overridden by whichever sidebar section is active. ========================================================================= */ :root { --nsg-bg: #1e253d; --nsg-panel: #0a0e18; --nsg-panel-alt: #0d1220; --nsg-border: rgba(255, 255, 255, 0.07); --nsg-text: #eef1f7; --nsg-text-muted: #8891a6; --nsg-danger: #f0555f; --nsg-radius: 11px; --nsg-radius-lg: 18px; --nsg-gap: 12px; --nsg-shadow-float: 0 18px 45px rgba(0, 0, 0, 0.5); /* Set inline per-page-load from the user's active theme (see render_theme_style_vars() in helpers.php) - this is just the pre-theme fallback shown before that inline override applies. */ --nsg-accent: #00a0de; --nsg-accent-soft: color-mix(in srgb, var(--nsg-accent) 14%, transparent); --nsg-accent-soft-2: color-mix(in srgb, var(--nsg-accent) 8%, transparent); --nsg-accent-strong: color-mix(in srgb, var(--nsg-accent) 82%, white); --nsg-accent-dim: color-mix(in srgb, var(--nsg-accent) 55%, black); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Pride animated theme ---------- Covers two theme rows that share one rainbow treatment: - pride-month-2026 (seasonal theme, selectable by anyone) - northern-lights-user-1 (a custom per-user theme; formerly an aurora effect, now re-skinned to match the same Pride rainbow so both slugs render identically) Registering --nsg-accent via @property makes it an interpolatable , so the keyframes below can animate it smoothly - and every existing color-mix()-derived variable (--nsg-accent-soft/-soft-2/-strong/ -dim, plus anything else built on --nsg-accent across the panel) keeps recalculating from it automatically, no duplicate variables and no JS animation loop involved. This re-skins the *whole* shell, not just the accent-tinted bits: it swaps the dark night-highway base palette for a light pastel one and adds a slow-drifting rainbow wash behind the content plus a rainbow-dashed route line. Toggled via the data-theme attribute on (set server-side in staff-header.php on load, and by pages/core.settings.php when switching themes live). */ @property --nsg-accent { syntax: ""; inherits: true; initial-value: #ffadad; } @keyframes prideAccentCycle { 0% { --nsg-accent: #ffadad; } /* pastel red */ 14% { --nsg-accent: #ffd6a5; } /* pastel orange */ 28% { --nsg-accent: #fdffb6; } /* pastel yellow */ 42% { --nsg-accent: #caffbf; } /* pastel green */ 57% { --nsg-accent: #9bf6ff; } /* pastel blue */ 71% { --nsg-accent: #a0c4ff; } /* pastel indigo */ 85% { --nsg-accent: #bdb2ff; } /* pastel violet */ 100% { --nsg-accent: #ffadad; } /* back to pastel red */ } @keyframes prideWash { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } html[data-theme="pride-month-2026"], html[data-theme="northern-lights-user-1"] { animation: prideAccentCycle 16s linear infinite; /* Light pastel base palette, replacing the night-highway dark base for the duration of the theme. */ --nsg-bg: #fff7fb; --nsg-panel: #ffffff; --nsg-panel-alt: #fdf3fa; --nsg-border: rgba(120, 60, 140, 0.12); --nsg-text: #3a2e4d; --nsg-text-muted: #7a6b8f; --nsg-shadow-float: 0 18px 45px rgba(150, 100, 180, 0.18); } /* Slow-drifting rainbow wash behind the whole page. The gradient itself stays full-strength so it reads as a rainbow at the very edges of the viewport; a near-opaque tint on ::before (rather than lowering the gradient's own opacity) keeps body copy readable everywhere else. */ html[data-theme="pride-month-2026"] body, html[data-theme="northern-lights-user-1"] body { background-image: linear-gradient( 90deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff, #ffadad ); background-size: 400% 100%; background-attachment: fixed; animation: prideWash 30s ease-in-out infinite; } html[data-theme="pride-month-2026"] body::before, html[data-theme="northern-lights-user-1"] body::before { content: ""; position: fixed; inset: 0; background-color: rgba(255, 247, 251, 0.86); pointer-events: none; z-index: -1; } /* Signature element gets the full rainbow treatment instead of a solid accent-colored dash. */ html[data-theme="pride-month-2026"] .nsg-route-line, html[data-theme="northern-lights-user-1"] .nsg-route-line { background-image: repeating-linear-gradient( 90deg, #ffadad 0px, #ffadad 8px, #ffd6a5 8px, #ffd6a5 16px, #fdffb6 16px, #fdffb6 24px, #caffbf 24px, #caffbf 32px, #9bf6ff 32px, #9bf6ff 40px, #a0c4ff 40px, #a0c4ff 48px, #bdb2ff 48px, #bdb2ff 56px, transparent 56px, transparent 68px ); background-size: 200% 100%; } html[data-theme="pride-month-2026"] ::selection, html[data-theme="northern-lights-user-1"] ::selection { background-color: #ffc6ff; color: #3a2e4d; } html[data-theme="pride-month-2026"] ::-webkit-scrollbar-thumb, html[data-theme="northern-lights-user-1"] ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--nsg-accent) 45%, var(--nsg-panel-alt)); border-color: var(--nsg-panel); } @media (prefers-reduced-motion: reduce) { html[data-theme="pride-month-2026"], html[data-theme="northern-lights-user-1"] { animation: none; --nsg-accent: #bdb2ff; } html[data-theme="pride-month-2026"] body, html[data-theme="northern-lights-user-1"] body { animation: none; background-position: 0% 50%; } } html, body { height: 100%; background-color: var(--nsg-bg); color: var(--nsg-text); } body { font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-image: radial-gradient(1200px 500px at 15% -10%, color-mix(in srgb, var(--nsg-accent) 10%, transparent), transparent 60%), radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--nsg-accent) 6%, transparent), transparent 55%); background-attachment: fixed; transition: background-image 0.6s ease; } h1, h2, h3, h4, h5, h6, .nsg-display { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -0.01em; } /* Headings render across the user's role gradient (falls back to a flat "gradient" of one colour, or the section accent, if they hold 1 or 0 roles - see --nsg-role-gradient in staff-header.php). */ /* Scoped to .nsg-app (the authenticated panel shell) - login.php and any other page outside the panel never set --nsg-role-gradient, so applying this globally left their headings with no gradient to clip to and an invisible (transparent-on-transparent) fallback. */ .nsg-app h1, .nsg-app h2, .nsg-app h3, .nsg-app h4, .nsg-app h5, .nsg-app h6, .nsg-app .nsg-display { display: inline-block; max-width: 100%; background-image: var(--nsg-role-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .nsg-app h1 i, .nsg-app h2 i, .nsg-app h3 i, .nsg-app h4 i, .nsg-app h5 i, .nsg-app h6 i, .nsg-app .nsg-display i { color: inherit; -webkit-text-fill-color: inherit; } .nsg-mono { font-family: "JetBrains Mono", ui-monospace, monospace; } a { color: inherit; text-decoration: none; } ::selection { background-color: var(--nsg-accent); color: #05070d; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--nsg-accent) 35%, var(--nsg-panel-alt)); border-radius: 999px; border: 2px solid var(--nsg-panel); transition: background-color 0.4s ease; } /* ---------- Layout ---------- */ .nsg-app { display: flex; align-items: flex-start; min-height: 100vh; padding: var(--nsg-gap); gap: var(--nsg-gap); } .nsg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: var(--nsg-gap); } .nsg-content { padding: 4px 4px 30px; flex: 1; } .nsg-content-entering { animation: nsgFadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-content-leaving { animation: nsgFadeOutDown 0.12s ease both; } @keyframes nsgFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes nsgFadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(6px); } } /* ---------- SPA loading state ---------- */ body.nsg-loading .nsg-content { opacity: 0.55; filter: saturate(0.7); transition: opacity 0.15s ease, filter 0.15s ease; pointer-events: none; } /* ---------- Route line (signature element) ---------- */ .nsg-route-line { height: 2px; width: 100%; background-image: repeating-linear-gradient( 90deg, var(--nsg-accent) 0px, var(--nsg-accent) 14px, transparent 14px, transparent 26px ); background-size: 200% 100%; opacity: 0.7; margin: 14px 0 12px; animation: nsgDashScroll 5s linear infinite; transition: background-image 0.5s ease; } .nsg-route-line-active { animation-duration: 0.6s; opacity: 1; } @keyframes nsgDashScroll { from { background-position: 0 0; } to { background-position: -80px 0; } } /* ---------- Topbar ---------- */ .nsg-topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; position: sticky; top: var(--nsg-gap); z-index: 30; background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius-lg); box-shadow: var(--nsg-shadow-float); padding: 0 12px 0 0; min-height: 58px; overflow: visible; } /* Left: page heading - flush, no separate card */ .nsg-page-heading { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 0; flex-shrink: 0; padding: 10px 20px 10px 22px; border-right: 1px solid var(--nsg-border); } .nsg-page-heading-cat { font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nsg-accent); transition: color 0.4s ease; } .nsg-page-heading-title { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } /* ---------- Notification centre (floating, top-center, permanent) ---------- */ .nsg-notif-center { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 500; } .nsg-notif-pill { display: flex; align-items: center; gap: 10px; background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: 999px; padding: 10px 18px; font-size: 0.85rem; font-weight: 600; text-decoration: none; box-shadow: var(--nsg-shadow-float); animation: nsgDropdownIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-notif-pill-clear { color: var(--nsg-text-muted); } .nsg-notif-pill-clear i.fa-circle-check { color: #4ADE80; } .nsg-notif-pill-alert { color: var(--nsg-notif-accent, var(--nsg-accent)); border-color: var(--nsg-notif-accent, var(--nsg-accent)); transition: filter 0.15s ease; } .nsg-notif-pill-alert i { color: var(--nsg-notif-accent, var(--nsg-accent)); } .nsg-notif-pill-alert .nsg-search-kbd { background: var(--nsg-notif-accent, var(--nsg-accent)); color: #fff; border-color: var(--nsg-notif-accent, var(--nsg-accent)); } .nsg-notif-pill-alert:hover { filter: brightness(1.1); } @media (max-width: 900px) { .nsg-notif-center { top: 8px; width: calc(100% - 32px); } .nsg-notif-pill { width: 100%; justify-content: center; } } /* ---------- Command palette (Ctrl+K) ---------- */ .nsg-command-overlay { position: fixed; inset: 0; background-color: rgba(5, 7, 13, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; display: flex; justify-content: center; padding-top: 12vh; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .nsg-command-overlay.active { opacity: 1; visibility: visible; } .nsg-command-modal { width: 100%; max-width: 620px; height: fit-content; margin: 0 16px; background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: translateY(-28px); opacity: 0; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease; } .nsg-command-overlay.active .nsg-command-modal { transform: translateY(0); opacity: 1; } .nsg-command-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--nsg-border); } .nsg-command-input-wrap i.fa-magnifying-glass { color: var(--nsg-accent); } .nsg-command-input { flex: 1; background: none; border: none; outline: none; color: var(--nsg-text); font-size: 1rem; } .nsg-command-input::placeholder { color: var(--nsg-text-muted); } .nsg-command-esc { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem; color: var(--nsg-text-muted); background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--nsg-border); border-radius: 6px; padding: 2px 7px; flex-shrink: 0; } .nsg-command-body { padding: 8px; max-height: 48vh; overflow-y: auto; } .nsg-command-empty { padding: 34px 20px; text-align: center; color: var(--nsg-text-muted); font-size: 0.85rem; } .nsg-command-empty i { display: block; font-size: 1.3rem; margin-bottom: 10px; color: var(--nsg-text-muted); opacity: 0.6; } .nsg-command-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--nsg-text); transition: background-color 0.15s ease; } .nsg-command-result.active, .nsg-command-result:hover { background-color: var(--nsg-accent-soft); } .nsg-command-result-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background-color: var(--nsg-panel-alt); color: var(--nsg-accent); } .nsg-command-result.active .nsg-command-result-icon, .nsg-command-result:hover .nsg-command-result-icon { color: var(--nsg-accent-strong); } .nsg-command-result-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .nsg-command-result-label { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nsg-command-result-category { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.66rem; color: var(--nsg-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .nsg-command-result-arrow { flex-shrink: 0; font-size: 0.75rem; color: var(--nsg-text-muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; } .nsg-command-result.active .nsg-command-result-arrow, .nsg-command-result:hover .nsg-command-result-arrow { opacity: 1; transform: translateX(0); } .nsg-command-hint-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top: 1px solid var(--nsg-border); font-size: 0.68rem; color: var(--nsg-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .nsg-search-kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; color: var(--nsg-text-muted); background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--nsg-border); border-radius: 6px; padding: 2px 7px; } /* ---------- Topbar search trigger (middle, full-width of centre column) ---------- */ .nsg-topbar-search-wrap { display: flex; align-items: center; padding: 0 12px; } .nsg-topbar-search-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: 10px; padding: 8px 14px; color: var(--nsg-text-muted); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; white-space: nowrap; width: 100%; text-align: left; } .nsg-topbar-search-btn:hover, .nsg-topbar-search-btn:focus-visible { background-color: rgba(255, 255, 255, 0.04); color: var(--nsg-text); outline: none; } .nsg-topbar-search-btn i.fa-magnifying-glass { color: var(--nsg-accent); font-size: 0.8rem; flex-shrink: 0; } .nsg-topbar-search-label { flex: 1; text-align: left; } .nsg-topbar-search-btn .nsg-search-kbd { font-size: 0.64rem; padding: 1px 6px; flex-shrink: 0; margin-left: auto; } /* Right cluster: border-left separator, no extra background */ .nsg-topbar > .d-flex:last-child { justify-content: flex-end; border-left: 1px solid var(--nsg-border); padding-left: 12px; } @media (max-width: 900px) { .nsg-topbar-search-wrap { display: none; } .nsg-topbar { grid-template-columns: 1fr auto; } .nsg-topbar > .d-flex:last-child { border-left: none; padding-left: 0; } } /* ---------- Command palette result type badges ---------- */ .nsg-command-result-type { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; border: 1px solid transparent; } .nsg-command-result-type-page { background: rgba(0,160,222,0.12); color: #00a0de; border-color: rgba(0,160,222,0.25); } .nsg-command-result-type-user { background: rgba(74,222,128,0.12); color: #4ade80; border-color: rgba(74,222,128,0.25); } .nsg-command-result-type-ticket { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.25); } .nsg-command-result-type-event { background: rgba(167,139,250,0.12); color: #a78bfa; border-color: rgba(167,139,250,0.25); } /* ---------- Profile pill ---------- */ .nsg-profile-btn { display: flex; align-items: center; gap: 8px; background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-radius: 999px; padding: 4px 12px 4px 5px; color: var(--nsg-text); transition: border-color 0.2s ease, transform 0.15s ease; } .nsg-profile-btn:hover, .nsg-profile-btn:focus { color: var(--nsg-text); border-color: var(--nsg-accent); transform: translateY(-1px); } .nsg-profile-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--nsg-accent); transition: border-color 0.4s ease; } .nsg-profile-meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .nsg-profile-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; color: var(--nsg-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .nsg-profile-name { font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .nsg-profile-name i { transition: color 0.4s ease; } /* One role: flat colour on the icon and username, no gradient. */ .nsg-profile-name-solid, .nsg-profile-name-solid i { color: var(--nsg-role-color, var(--nsg-text)); } /* Multiple roles: one continuous gradient sweeping across the icon and the username, built from every distinct role colour the user holds. */ .nsg-profile-name-gradient { background-image: var(--nsg-role-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .nsg-profile-name-gradient i { color: inherit; -webkit-text-fill-color: inherit; } /* ---------- Profile dropdown ---------- */ .nsg-profile-dropdown { background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: 16px; padding: 16px; min-width: 250px; margin-top: 10px !important; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); transform-origin: top right; animation: nsgDropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes nsgDropdownIn { from { opacity: 0; transform: scale(0.94) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } } .nsg-profile-dropdown-header { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--nsg-border); } .nsg-profile-dropdown-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .nsg-profile-dropdown-name { font-weight: 700; color: #ffffff; font-size: 0.95rem; } .nsg-profile-dropdown-role { font-size: 0.78rem; color: var(--nsg-accent); transition: color 0.4s ease; } .nsg-profile-dropdown-item { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: 0.85rem; font-family: inherit; color: var(--nsg-text); background: none; border: none; text-align: left; cursor: pointer; transition: background-color 0.15s ease; } .nsg-profile-dropdown-item:hover { background-color: rgba(255, 255, 255, 0.05); } .nsg-profile-dropdown-item.text-danger { color: var(--nsg-danger) !important; } .nsg-profile-dropdown-item.text-danger:hover { background-color: rgba(240, 85, 95, 0.12); } .nsg-profile-dropdown-divider { height: 1px; background-color: var(--nsg-border); margin: 8px 2px; } /* ---------- Sidebar ---------- */ .nsg-sidebar { width: 238px; flex-shrink: 0; background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius-lg); display: flex; flex-direction: column; padding: 16px 10px; height: calc(100vh - (var(--nsg-gap) * 2)); position: sticky; top: var(--nsg-gap); overflow-y: auto; overflow-x: hidden; box-shadow: var(--nsg-shadow-float); } .nsg-sidebar-logo { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 0; } .nsg-mobile-nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--nsg-border); background-color: var(--nsg-panel-alt); color: var(--nsg-text); font-size: 1rem; cursor: pointer; flex-shrink: 0; transition: border-color 0.2s ease, color 0.2s ease; } .nsg-mobile-nav-toggle:hover { border-color: var(--nsg-accent); color: var(--nsg-accent); } .nsg-brand { display: flex; align-items: center; gap: 10px; transition: transform 0.2s ease; } .nsg-brand:hover { transform: translateX(2px); } .nsg-logo-img { height: 26px; width: 26px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 12px color-mix(in srgb, var(--nsg-accent) 55%, transparent)); transition: filter 0.5s ease; animation: nsgLogoIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } html[data-theme="cloud"] .nsg-logo-img, html[data-theme="parchment"] .nsg-logo-img, html[data-theme="mint-fresh"] .nsg-logo-img, html[data-theme="lavender-mist"] .nsg-logo-img, html[data-theme="peach-fuzz"] .nsg-logo-img, html[data-theme="nordic"] .nsg-logo-img, html[data-theme="newspaper"] .nsg-logo-img { filter: brightness(0) drop-shadow(0 0 12px color-mix(in srgb, var(--nsg-accent) 55%, transparent)); } @keyframes nsgLogoIn { from { opacity: 0; transform: scale(0.7) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0); } } .nsg-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .nsg-brand-name { font-weight: 700; font-size: 0.86rem; font-family: "Space Grotesk", "Inter", sans-serif; } .nsg-brand-name span { color: var(--nsg-accent); transition: color 0.4s ease; } .nsg-brand-sub { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.58rem; letter-spacing: 0.16em; color: var(--nsg-text-muted); text-transform: uppercase; } .nsg-nav-category { margin-bottom: 3px; } .nsg-nav-category-btn { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: none; border: none; border-left: 3px solid transparent; color: var(--nsg-text-muted); font-size: 0.8rem; font-weight: 600; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.3s ease; } .nsg-nav-category-btn:hover { color: var(--nsg-text); background-color: rgba(255, 255, 255, 0.035); transform: translateX(2px); } .nsg-nav-category-btn.active { color: var(--nsg-text); background-color: color-mix(in srgb, var(--nsg-cat-accent, var(--nsg-accent)) 14%, transparent); border-left-color: var(--nsg-cat-accent, var(--nsg-accent)); } .nsg-nav-category-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.92rem; line-height: 1; overflow: visible; color: var(--nsg-cat-accent, var(--nsg-accent)); transition: color 0.4s ease; } .nsg-nav-category-chevron { margin-left: auto; font-size: 0.7rem; color: var(--nsg-text-muted); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .nsg-nav-category-btn[aria-expanded="true"] .nsg-nav-category-chevron { transform: rotate(180deg); } .nsg-nav-pages { padding: 2px 0 6px 0; overflow: hidden; } .nsg-nav-page { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; width: auto; box-sizing: border-box; padding: 7px 10px; border-radius: 7px; font-size: 0.77rem; color: var(--nsg-text-muted); margin: 1px 0 1px 20px; border-left: 3px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.3s ease; } .nsg-nav-page span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .nsg-nav-page:hover { color: var(--nsg-text); background-color: rgba(255, 255, 255, 0.035); transform: translateX(3px); } .nsg-nav-page.active { color: var(--nsg-text); background-color: color-mix(in srgb, var(--nsg-cat-accent, var(--nsg-accent)) 14%, transparent); border-left-color: var(--nsg-cat-accent, var(--nsg-accent)); font-weight: 600; } .nsg-nav-page-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; line-height: 1; overflow: visible; color: var(--nsg-cat-accent, var(--nsg-accent)); transition: color 0.4s ease; } .nsg-sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nsg-border); } .nsg-logout-link { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--nsg-danger); font-size: 0.8rem; font-weight: 600; transition: background-color 0.15s ease; } .nsg-logout-link:hover { background-color: rgba(240, 85, 95, 0.1); color: var(--nsg-danger); } /* ---------- Floating island responsiveness ---------- */ @media (max-width: 900px) { :root { --nsg-gap: 10px; } .nsg-app { flex-direction: column; } .nsg-sidebar { width: 100%; height: auto; max-height: none; position: sticky; top: var(--nsg-gap); z-index: 200; flex-direction: column; align-items: stretch; } .nsg-mobile-nav-toggle { display: flex; } .nsg-route-line { display: none; } .nsg-nav, .nsg-sidebar-footer { display: none; } .nsg-sidebar.nsg-mobile-open .nsg-nav, .nsg-sidebar.nsg-mobile-open .nsg-sidebar-footer { display: block; animation: nsgFadeInUp 0.25s ease both; } .nsg-sidebar.nsg-mobile-open .nsg-nav { margin-top: 10px; max-height: 55vh; overflow-y: auto; } .nsg-topbar { flex-wrap: wrap; } } /* ---------- Ripple (used on nav items, buttons, menu items) ---------- */ .nsg-ripple { position: absolute; border-radius: 50%; transform: scale(0); background-color: currentColor; opacity: 0.22; pointer-events: none; animation: nsgRipple 0.55s ease-out forwards; } @keyframes nsgRipple { to { transform: scale(3.2); opacity: 0; } } /* ---------- Buttons ---------- */ .nsg-btn-accent { display: inline-flex; align-items: center; gap: 8px; background-color: var(--nsg-accent); border: none; color: #05070d; font-weight: 600; font-size: 0.85rem; padding: 9px 18px; border-radius: var(--nsg-radius); cursor: pointer; text-decoration: none; transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease; } .nsg-btn-accent:hover { background-color: var(--nsg-accent-strong); transform: translateY(-1px); box-shadow: 0 8px 22px var(--nsg-accent-soft); color: #05070d; } .nsg-btn-accent:active { transform: translateY(0); } /* ---------- Stat cards (home page) ---------- */ .nsg-hero { animation: nsgFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-card { background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius); padding: 20px; height: 100%; transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; animation: nsgFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--nsg-stagger, 0) * 60ms); } .nsg-card:hover { border-color: var(--nsg-accent); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); } .nsg-card-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background-color: var(--nsg-accent-soft); color: var(--nsg-accent); margin-bottom: 14px; transition: background-color 0.4s ease, color 0.4s ease; } .nsg-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nsg-text-muted); margin-bottom: 4px; } .nsg-card-value { font-size: 1.1rem; font-weight: 600; } /* ---------- State pages (403 / 404) ---------- */ .nsg-state-page { animation: nsgFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-state-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-color: var(--nsg-accent-soft); color: var(--nsg-accent); font-size: 1.6rem; animation: nsgPulseIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-state-icon-danger { background-color: rgba(240, 85, 95, 0.14); color: var(--nsg-danger); } @keyframes nsgPulseIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } /* ---------- Login page ---------- */ .nsg-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 40px 20px 60px; } .nsg-login-bg-glow { position: fixed; inset: 0; background-image: radial-gradient(900px 480px at 20% 10%, color-mix(in srgb, var(--nsg-accent) 16%, transparent), transparent 60%), radial-gradient(700px 420px at 85% 90%, color-mix(in srgb, var(--nsg-accent) 10%, transparent), transparent 60%); animation: nsgGlowPulse 8s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes nsgGlowPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } .nsg-login-split { position: relative; z-index: 1; width: 100%; max-width: 960px; min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); animation: nsgFadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-login-panel-form { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; } .nsg-login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 30px; text-align: left; } .nsg-login-logo { width: 42px; height: 42px; object-fit: contain; margin-bottom: 6px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--nsg-accent) 55%, transparent)); animation: nsgLogoIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-login-brand-name { font-weight: 700; font-size: 1.15rem; font-family: "Space Grotesk", "Inter", sans-serif; } .nsg-login-brand-name span { color: var(--nsg-accent); } .nsg-login-brand-sub { font-size: 0.65rem; letter-spacing: 0.16em; color: var(--nsg-text-muted); text-transform: uppercase; } .nsg-login-heading { font-size: 1.05rem; font-weight: 600; margin-bottom: 22px; } .nsg-btn-discord { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background-color: #5865f2; border: none; color: #ffffff; font-weight: 600; font-size: 0.92rem; border-radius: 10px; padding: 11px 16px; transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; } .nsg-btn-discord:hover { background-color: #4752c4; color: #ffffff; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(88, 101, 242, 0.35); } .nsg-btn-discord:active { transform: translateY(0); } /* ---------- Passport OAuth button ---------- */ .nsg-btn-passport { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background-color: #ffffff; border: 1.5px solid #e2e6ee; color: #1a2035; font-weight: 600; font-size: 0.92rem; border-radius: 10px; padding: 10px 16px; /* 1px less top/bottom to account for the border */ transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; } .nsg-btn-passport .nsg-passport-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .nsg-btn-passport:hover { background-color: #f4f6fb; border-color: #c5cad8; color: #1a2035; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); } .nsg-btn-passport:active { transform: translateY(0); } .nsg-login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--nsg-text-muted); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: "JetBrains Mono", ui-monospace, monospace; } .nsg-login-divider::before, .nsg-login-divider::after { content: ""; flex: 1; height: 1px; background-color: var(--nsg-border); } .nsg-login-panel-form .form-control { background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); color: var(--nsg-text); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nsg-login-panel-form .form-control:focus { border-color: var(--nsg-accent); box-shadow: 0 0 0 3px var(--nsg-accent-soft); } .nsg-login-panel-form label { font-size: 0.82rem; color: var(--nsg-text-muted); margin-bottom: 6px; } .nsg-alert-in { animation: nsgFadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-login-panel-info { position: relative; overflow: hidden; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; color: #ffffff; background-image: linear-gradient(160deg, color-mix(in srgb, var(--nsg-accent) 55%, #05070d) 0%, color-mix(in srgb, var(--nsg-accent) 20%, #05070d) 60%, #05070d 100%); } .nsg-login-panel-info::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(500px 320px at 100% 0%, rgba(255, 255, 255, 0.12), transparent 60%); pointer-events: none; } .nsg-login-panel-info .nsg-route-line { background-image: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.85) 0px, rgba(255, 255, 255, 0.85) 14px, transparent 14px, transparent 26px ); opacity: 0.6; width: 60px; margin: 0 0 18px; } .nsg-login-panel-info-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 10px; } .nsg-login-panel-info h2 { font-size: 1.65rem; font-weight: 700; margin-bottom: 14px; line-height: 1.2; position: relative; } .nsg-login-panel-info p { font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin-bottom: 14px; position: relative; max-width: 340px; } .nsg-login-panel-info-note { margin-top: 24px; padding: 14px 16px; border-radius: 12px; background-color: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); position: relative; } .nsg-login-panel-info-note i { color: #ffffff; margin-right: 6px; } @media (max-width: 760px) { .nsg-login-split { grid-template-columns: 1fr; max-width: 420px; } .nsg-login-panel-info { order: -1; padding: 36px 32px; } .nsg-login-panel-form { padding: 36px 32px; } } /* ---------- Bottom status bar (login page) ---------- */ .nsg-status-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); background-image: linear-gradient( 90deg, color-mix(in srgb, var(--nsg-accent) 45%, #2a1f3d) 0%, color-mix(in srgb, var(--nsg-accent) 15%, #253a24) 35%, color-mix(in srgb, var(--nsg-accent) 35%, #241a3a) 70%, color-mix(in srgb, var(--nsg-accent) 45%, #2a1f3d) 100% ); background-size: 300% 100%; animation: nsgStatusDrift 14s ease-in-out infinite; } @keyframes nsgStatusDrift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---------- Error page ---------- */ .nsg-error-icon { font-size: 2.4rem; color: var(--nsg-danger); animation: nsgPulseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ---------- Staff directory ---------- */ .nsg-directory { display: flex; flex-direction: column; gap: 28px; } .nsg-directory-section { background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius-lg); overflow: hidden; } .nsg-directory-section-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background-image: linear-gradient(90deg, color-mix(in srgb, var(--nsg-cat-accent) 20%, transparent), transparent 70%); border-bottom: 1px solid var(--nsg-border); border-left: 3px solid var(--nsg-cat-accent); } .nsg-directory-section-icon { color: var(--nsg-cat-accent); font-size: 0.95rem; } .nsg-directory-section-label { font-weight: 600; font-size: 0.95rem; } .nsg-directory-section-count { margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; color: var(--nsg-text-muted); background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--nsg-border); border-radius: 999px; padding: 2px 10px; } .nsg-directory-table-wrap { overflow-x: auto; } .nsg-directory-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; } .nsg-directory-table thead th { text-align: left; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nsg-text-muted); padding: 10px 18px; border-bottom: 1px solid var(--nsg-border); } .nsg-directory-table tbody td { padding: 10px 18px; border-bottom: 1px solid var(--nsg-border); vertical-align: middle; } .nsg-directory-table tbody tr:last-child td { border-bottom: none; } .nsg-directory-table tbody tr { transition: background-color 0.15s ease; } .nsg-directory-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.025); } .nsg-directory-row-clickable { cursor: pointer; } .nsg-directory-id { color: var(--nsg-text-muted); } .nsg-directory-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--nsg-cat-accent); display: block; } .nsg-directory-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .nsg-directory-roles { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; } .nsg-directory-discord-line { display: flex; align-items: center; gap: 7px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; color: var(--nsg-text-muted); } .nsg-directory-discord-line:first-child { margin-bottom: 3px; } .nsg-directory-discord-line i { width: 12px; text-align: center; flex-shrink: 0; } .nsg-directory-username { display: inline-flex; align-items: center; gap: 7px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; color: var(--nsg-cat-accent); } /* ---------- Staff profile (core.profile) ---------- */ .nsg-pp-grid { display: grid; grid-template-columns: minmax(340px, 520px) 1fr; gap: var(--nsg-gap); align-items: start; } @media (max-width: 900px) { .nsg-pp-grid { grid-template-columns: 1fr; } } .nsg-pp-bar { width: 100%; display: block; background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius); padding: 12px 20px; font-weight: 600; text-align: center; margin-bottom: 5px; color: var(--nsg-text); font-family: inherit; font-size: 1rem; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; } .nsg-pp-bar:hover { border-color: var(--nsg-accent); background-color: var(--nsg-panel); transform: translateY(-1px); } .nsg-pp-bar:active { transform: translateY(0); } .nsg-pp-bar.active { border-color: var(--nsg-accent); background-color: var(--nsg-panel); } .nsg-pp-bar-flex { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; cursor: pointer; } .nsg-pp-bar.nsg-pp-bar-flex:hover { border-color: var(--nsg-accent); background-color: var(--nsg-panel); } .nsg-pp-bar-label { grid-column: 2; white-space: nowrap; } .nsg-btn-add-rep { display: inline-flex; align-items: center; gap: 6px; background-color: #1e7a45; border: none; color: #fff; font-weight: 600; font-size: 0.78rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 16px rgba(30, 122, 69, 0.35); transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .nsg-btn-add-rep:hover { background-color: #259652; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 150, 82, 0.4); } .nsg-btn-add-rep:active { transform: translateY(0); } /* ---------- Profile hero (identity card) ---------- */ .nsg-pp-hero { position: relative; overflow: hidden; padding-top: 24px; } .nsg-pp-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 90px; background: radial-gradient(420px 140px at 20% -30%, color-mix(in srgb, var(--nsg-role-hero-color, var(--nsg-accent)) 35%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--nsg-role-hero-color, var(--nsg-accent)) 16%, transparent), transparent); pointer-events: none; } .nsg-pp-identity { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .nsg-pp-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--nsg-role-hero-color, var(--nsg-accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nsg-role-hero-color, var(--nsg-accent)) 16%, transparent); flex-shrink: 0; transition: border-color 0.4s ease, box-shadow 0.4s ease; } /* Sits alongside .nsg-profile-name(-solid|-gradient) - reuses that colour/gradient logic, this just bumps the size up for the profile page. */ .nsg-pp-name-lg { font-size: 1.3rem; letter-spacing: -0.01em; } .nsg-pp-role-label { color: var(--nsg-text-muted); font-size: 0.9rem; margin-top: 1px; } .nsg-pp-rep-inline { font-weight: 600; font-size: 0.85rem; } .nsg-pp-rep-inline.positive { color: #4ADE80; } .nsg-pp-rep-inline.negative { color: var(--nsg-danger); } .nsg-pp-hero-stats { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; } .nsg-pp-hero-stat { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--nsg-border); color: var(--nsg-text-muted); } .nsg-pp-hero-stat i { color: var(--nsg-role-hero-color, var(--nsg-accent)); font-size: 0.78rem; } .nsg-pp-hero-stat strong { color: var(--nsg-text); font-weight: 700; } .nsg-pp-hero-stat.positive i { color: #4ADE80; } .nsg-pp-hero-stat.negative i { color: var(--nsg-danger); } .nsg-pp-pronouns { display: flex; gap: 6px; margin: 0 0 18px; flex-wrap: wrap; } .nsg-pp-pronoun-chip { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 3px 10px; font-size: 0.75rem; color: var(--nsg-text-muted); } .nsg-pp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--nsg-border); padding-top: 18px; margin-top: 4px; } .nsg-pp-fact-tile { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.025); border: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease; } .nsg-pp-fact-tile:hover { background-color: rgba(255, 255, 255, 0.045); border-color: var(--nsg-border); } .nsg-pp-fact-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: var(--nsg-accent-soft); color: var(--nsg-accent); font-size: 0.78rem; } .nsg-pp-fact-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nsg-text-muted); margin-bottom: 2px; } .nsg-pp-fact-value { font-weight: 600; font-size: 0.9rem; line-height: 1.3; word-break: break-word; } .nsg-pp-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nsg-text-muted); margin: 18px 0 8px; border-top: 1px solid var(--nsg-border); padding-top: 16px; } .nsg-pp-badge-row { display: flex; flex-wrap: wrap; gap: 8px; } .nsg-pp-role-badge, .nsg-pp-misc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; background-color: color-mix(in srgb, var(--nsg-badge-color, #888) 18%, transparent); color: var(--nsg-badge-color, var(--nsg-text)); border: 1px solid color-mix(in srgb, var(--nsg-badge-color, #888) 35%, transparent); transition: transform 0.15s ease; } .nsg-pp-role-badge:hover, .nsg-pp-misc-badge:hover { transform: translateY(-1px); } .nsg-pp-rep-bar-wrap { position: relative; height: 10px; background-color: rgba(255, 255, 255, 0.08); border-radius: 999px; margin: 30px 0 26px; } .nsg-pp-rep-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 999px; background-image: linear-gradient(90deg, #2e7d46, #4ADE80); } .nsg-pp-rep-bar-fill.negative { background-image: linear-gradient(90deg, #8a2b2b, var(--nsg-danger)); } .nsg-pp-rep-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background-color: var(--nsg-panel); border: 3px solid #4ADE80; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; } .nsg-pp-rep-marker.negative { border-color: var(--nsg-danger); } .nsg-pp-rep-entry { position: relative; border: 1px solid var(--nsg-border); border-left: 3px solid rgba(74, 222, 128, 0.6); border-radius: var(--nsg-radius); padding: 16px 20px; margin-bottom: 14px; background-color: rgba(74, 222, 128, 0.045); transition: border-color 0.2s ease, background-color 0.2s ease; } .nsg-pp-rep-entry.negative { border-left-color: color-mix(in srgb, var(--nsg-danger) 70%, transparent); background-color: rgba(240, 85, 95, 0.045); } .nsg-pp-rep-entry.note { border-left-color: var(--nsg-border); background-color: rgba(255, 255, 255, 0.025); } .nsg-pp-rep-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .nsg-pp-rep-entry-title { display: flex; align-items: center; gap: 8px; font-weight: 700; } .nsg-pp-rep-entry-title.positive i { color: #4ADE80; } .nsg-pp-rep-entry-title.negative i { color: var(--nsg-danger); } .nsg-pp-rep-entry-title.note i { color: var(--nsg-text-muted); } .nsg-pp-rep-change { font-weight: 700; font-size: 0.8rem; padding: 3px 10px; border-radius: 6px; } .nsg-pp-rep-change.positive { color: #4ADE80; background-color: rgba(74, 222, 128, 0.12); } .nsg-pp-rep-change.negative { color: var(--nsg-danger); background-color: rgba(240, 85, 95, 0.12); } .nsg-pp-rep-entry-meta { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nsg-text-muted); margin-bottom: 4px; } .nsg-pp-rep-entry-issuer { font-weight: 600; margin-bottom: 10px; } .nsg-pp-rep-entry-reason { font-weight: 600; line-height: 1.5; margin-bottom: 10px; } .nsg-pp-rep-entry-time { font-size: 0.75rem; color: var(--nsg-text-muted); } @media (max-width: 520px) { .nsg-pp-facts { grid-template-columns: 1fr; } .nsg-pp-identity { gap: 12px; } .nsg-pp-avatar { width: 60px; height: 60px; } .nsg-pp-name-lg { font-size: 1.1rem; } } /* ---------- Add Reputation modal ---------- */ .nsg-rep-modal-overlay { position: fixed; inset: 0; background-color: rgba(5, 7, 13, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .nsg-rep-modal-overlay.active { opacity: 1; visibility: visible; } .nsg-rep-modal { width: 100%; max-width: 420px; background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); padding: 22px 24px; transform: translateY(-24px); opacity: 0; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease; } .nsg-rep-modal-overlay.active .nsg-rep-modal { transform: translateY(0); opacity: 1; } .nsg-rep-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .nsg-rep-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--nsg-text); margin: 0; } .nsg-rep-modal-close { background: none; border: none; color: var(--nsg-text-muted); font-size: 1rem; line-height: 1; padding: 4px; cursor: pointer; transition: color 0.15s ease; } .nsg-rep-modal-close:hover { color: var(--nsg-text); } .nsg-rep-modal-hint { font-size: 0.8rem; color: var(--nsg-text-muted); background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius); padding: 10px 12px; margin-bottom: 18px; line-height: 1.5; } .nsg-rep-modal-hint a { color: var(--nsg-accent); font-weight: 600; text-decoration: none; } .nsg-rep-modal-hint a:hover { text-decoration: underline; } .nsg-rep-field { margin-bottom: 16px; } .nsg-rep-field-row { display: flex; gap: 12px; } .nsg-rep-field-row .nsg-rep-field { flex: 1; } .nsg-rep-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--nsg-text); margin-bottom: 6px; } .nsg-rep-amount-label { font-weight: 500; color: var(--nsg-text-muted); } .nsg-rep-input { width: 100%; background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); color: var(--nsg-text); border-radius: var(--nsg-radius); padding: 10px 12px; font-size: 0.88rem; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nsg-rep-input:focus { outline: none; border-color: var(--nsg-accent); box-shadow: 0 0 0 3px var(--nsg-accent-soft); } .nsg-rep-input::placeholder { color: var(--nsg-text-muted); } .nsg-rep-textarea { resize: vertical; min-height: 80px; } .nsg-rep-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); outline: none; margin-top: 6px; } .nsg-rep-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--nsg-accent); border: 3px solid var(--nsg-panel); box-shadow: 0 0 0 1px var(--nsg-border); cursor: pointer; transition: transform 0.15s ease; } .nsg-rep-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .nsg-rep-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--nsg-accent); border: 3px solid var(--nsg-panel); cursor: pointer; } .nsg-rep-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--nsg-panel-alt); } .nsg-rep-modal-error { font-size: 0.8rem; color: var(--nsg-danger); background-color: rgba(240, 85, 95, 0.1); border: 1px solid rgba(240, 85, 95, 0.3); border-radius: var(--nsg-radius); padding: 8px 12px; margin-bottom: 14px; } .nsg-btn-rep-submit { width: 100%; background-color: #5865F2; border: none; color: #fff; font-weight: 700; font-size: 0.9rem; padding: 11px 0; border-radius: var(--nsg-radius); cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .nsg-btn-rep-submit:hover { background-color: #4752c4; transform: translateY(-1px); } .nsg-btn-rep-submit:active { transform: translateY(0); } .nsg-btn-rep-submit:disabled { opacity: 0.6; cursor: default; transform: none; } /* ---------- Rich text editor (used in Add/Edit Page modals) ---------- */ .nsg-rte-toolbar { display: flex; align-items: center; gap: 4px; background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-bottom: none; border-radius: var(--nsg-radius) var(--nsg-radius) 0 0; padding: 6px; } .nsg-rte-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--nsg-text-muted); font-size: 0.8rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .nsg-rte-btn:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--nsg-text); } .nsg-rte-btn.active { background-color: var(--nsg-accent-soft); border-color: var(--nsg-accent); color: var(--nsg-accent); } .nsg-rte-editor { width: 100%; min-height: 160px; max-height: 320px; overflow-y: auto; background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-radius: 0 0 var(--nsg-radius) var(--nsg-radius); padding: 10px 12px; color: var(--nsg-text); font-size: 0.88rem; font-family: inherit; line-height: 1.6; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nsg-rte-editor:focus { outline: none; border-color: var(--nsg-accent); box-shadow: 0 0 0 3px var(--nsg-accent-soft); } .nsg-rte-editor:empty:before { content: attr(data-placeholder); color: var(--nsg-text-muted); pointer-events: none; } .nsg-rte-editor p { margin: 0 0 0.8rem; } .nsg-rte-editor p:last-child { margin-bottom: 0; } .nsg-rte-editor ul, .nsg-rte-editor ol { margin: 0 0 0.8rem 1.3rem; } .nsg-rte-editor a { color: var(--nsg-accent); } /* ---------- Manage User page (manager.user-manage) ---------- */ .nsg-um-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nsg-gap); align-items: start; } @media (max-width: 900px) { .nsg-um-grid { grid-template-columns: 1fr; } } .nsg-um-full-span { grid-column: 1 / -1; } .nsg-um-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--nsg-border); } .nsg-um-social-list { display: flex; flex-direction: column; gap: 8px; } .nsg-um-social-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center; } @media (max-width: 640px) { .nsg-um-social-row { grid-template-columns: 1fr; } } .nsg-um-social-remove { background: none; border: 1px solid var(--nsg-border); color: var(--nsg-text-muted); border-radius: 8px; width: 38px; height: 38px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .nsg-um-social-remove:hover { color: var(--nsg-danger); border-color: var(--nsg-danger); } .nsg-um-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .nsg-um-header-actions { display: flex; gap: 10px; flex-shrink: 0; } .nsg-um-rep-line { display: flex; align-items: center; gap: 6px; color: var(--nsg-text-muted); font-size: 0.85rem; margin-top: 2px; } .nsg-um-rep-edit-btn { background: none; border: none; color: var(--nsg-text-muted); font-size: 0.75rem; cursor: pointer; padding: 2px 4px; transition: color 0.15s ease; } .nsg-um-rep-edit-btn:hover { color: var(--nsg-accent); } .nsg-um-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .nsg-um-field-row { grid-template-columns: 1fr; } } .nsg-um-toggle-row { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nsg-border); } .nsg-um-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .nsg-um-panel-title { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 8px; } .nsg-um-rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .nsg-um-rank-grid { grid-template-columns: 1fr; } } .nsg-um-rank-card { background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius); padding: 14px 16px; transition: border-color 0.2s ease; } .nsg-um-rank-card:hover { border-color: var(--nsg-accent); } .nsg-um-rank-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .nsg-um-rank-name { font-weight: 700; font-size: 0.92rem; } .nsg-um-rank-status { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nsg-text-muted); margin-top: 4px; } .nsg-um-rank-kebab { background: none; border: none; color: var(--nsg-text-muted); cursor: pointer; padding: 2px 6px; transition: color 0.15s ease; } .nsg-um-rank-kebab:hover { color: var(--nsg-text); } .nsg-um-rank-menu { background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: 12px; padding: 6px; min-width: 170px; box-shadow: var(--nsg-shadow-float); } /* ---------- Buttons: Save / Delete / Add Rank ---------- */ .nsg-btn-save { display: inline-flex; align-items: center; gap: 8px; background-color: #1e7a45; border: none; color: #fff; font-weight: 600; font-size: 0.85rem; padding: 9px 18px; border-radius: var(--nsg-radius); cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .nsg-btn-save:hover { background-color: #259652; transform: translateY(-1px); } .nsg-btn-save:active { transform: translateY(0); } .nsg-btn-save:disabled { opacity: 0.6; cursor: default; transform: none; } .nsg-btn-outline { display: inline-flex; align-items: center; gap: 8px; background-color: transparent; border: 1px solid var(--nsg-border); color: var(--nsg-text); font-weight: 600; font-size: 0.85rem; padding: 9px 18px; border-radius: var(--nsg-radius); cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .nsg-btn-outline:hover { background-color: var(--nsg-accent-soft-2); border-color: var(--nsg-accent); color: var(--nsg-accent); transform: translateY(-1px); } .nsg-btn-outline:active { transform: translateY(0); } .nsg-btn-outline:disabled { opacity: 0.5; cursor: default; transform: none; } .nsg-btn-outline-danger { display: inline-flex; align-items: center; gap: 8px; background-color: transparent; border: 1px solid rgba(240, 85, 95, 0.45); color: var(--nsg-danger); font-weight: 600; font-size: 0.85rem; padding: 9px 18px; border-radius: var(--nsg-radius); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .nsg-btn-outline-danger:hover { background-color: rgba(240, 85, 95, 0.12); border-color: var(--nsg-danger); transform: translateY(-1px); } .nsg-btn-outline-danger:active { transform: translateY(0); } .nsg-btn-outline-danger:disabled { opacity: 0.6; cursor: default; transform: none; } .nsg-btn-add-rank { display: inline-flex; align-items: center; gap: 6px; background-color: var(--nsg-accent); border: none; color: #05070d; font-weight: 600; font-size: 0.8rem; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .nsg-btn-add-rank:hover { background-color: var(--nsg-accent-strong); transform: translateY(-1px); } .nsg-btn-add-rank:active { transform: translateY(0); } /* ---------- Toggle switch ---------- */ .nsg-toggle-group { display: flex; flex-direction: column; gap: 8px; } .nsg-toggle-group-label { font-size: 0.8rem; font-weight: 600; color: var(--nsg-text); } .nsg-toggle { position: relative; display: inline-block; width: 44px; height: 24px; } .nsg-toggle input { opacity: 0; width: 0; height: 0; } .nsg-toggle-track { position: absolute; inset: 0; cursor: pointer; background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease; } .nsg-toggle-track::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 50%; transform: translateY(-50%); background-color: #fff; border-radius: 50%; transition: transform 0.2s ease; } .nsg-toggle input:checked + .nsg-toggle-track { background-color: var(--nsg-accent); border-color: var(--nsg-accent); } .nsg-toggle input:checked + .nsg-toggle-track::before { transform: translate(20px, -50%); } .nsg-toggle input:focus-visible + .nsg-toggle-track { box-shadow: 0 0 0 3px var(--nsg-accent-soft); } .nsg-btn-danger-submit { width: 100%; background-color: var(--nsg-danger); border: none; color: #fff; font-weight: 700; font-size: 0.9rem; padding: 11px 0; border-radius: var(--nsg-radius); cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .nsg-btn-danger-submit:hover { background-color: #d9414a; transform: translateY(-1px); } .nsg-btn-danger-submit:active { transform: translateY(0); } .nsg-btn-danger-submit:disabled { opacity: 0.6; cursor: default; transform: none; } /* ---------- Settings page ---------- */ .nsg-settings { max-width: 860px; display: flex; flex-direction: column; gap: 28px; animation: nsgFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .nsg-settings-section { background-color: var(--nsg-panel); border: 1px solid var(--nsg-border); border-radius: var(--nsg-radius-lg); padding: 22px 24px; } .nsg-settings-section-head { margin-bottom: 18px; } .nsg-settings-section-title { display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk", "Inter", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--nsg-text); margin: 0 0 4px; } .nsg-settings-section-title i { color: var(--nsg-accent); font-size: 0.95rem; } .nsg-settings-section-desc { font-size: 0.82rem; color: var(--nsg-text-muted); margin: 0; } /* Theme swatches */ .nsg-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .nsg-theme-swatch { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; background: none; border: 1.5px solid var(--nsg-border); border-radius: var(--nsg-radius); padding: 12px; cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; } .nsg-theme-swatch:hover { border-color: color-mix(in srgb, var(--nsg-accent) 50%, var(--nsg-border)); transform: translateY(-2px); } .nsg-theme-swatch.active { border-color: var(--nsg-accent); box-shadow: 0 0 0 3px var(--nsg-accent-soft); } .nsg-theme-swatch-preview { height: 56px; border-radius: 8px; overflow: hidden; display: flex; border: 1px solid rgba(255, 255, 255, 0.06); } .nsg-theme-swatch-preview span { flex: 1; } .nsg-theme-swatch-name { font-size: 0.82rem; font-weight: 600; color: var(--nsg-text); display: flex; align-items: center; gap: 6px; } .nsg-theme-swatch-check { display: none; color: var(--nsg-accent); font-size: 0.85rem; } .nsg-theme-swatch.active .nsg-theme-swatch-check { display: inline-flex; } /* Accessibility - font family cards */ .nsg-font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .nsg-font-option { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background-color: var(--nsg-panel-alt); border: 1.5px solid var(--nsg-border); border-radius: var(--nsg-radius); padding: 13px 16px; cursor: pointer; transition: border-color 0.2s ease; } .nsg-font-option:hover { border-color: color-mix(in srgb, var(--nsg-accent) 50%, var(--nsg-border)); } .nsg-font-option.active { border-color: var(--nsg-accent); box-shadow: 0 0 0 3px var(--nsg-accent-soft); } .nsg-font-option-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .nsg-font-option-name { font-size: 0.88rem; font-weight: 700; color: var(--nsg-text); } .nsg-font-option-desc { font-size: 0.76rem; color: var(--nsg-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nsg-font-option-radio { align-self: start; margin-top: 1px; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--nsg-border); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease; } .nsg-font-option.active .nsg-font-option-radio { border-color: var(--nsg-accent); } .nsg-font-option-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background-color: var(--nsg-accent); transform: scale(0); transition: transform 0.15s ease; } .nsg-font-option.active .nsg-font-option-radio::after { transform: scale(1); } /* Accessibility - font size segmented control */ .nsg-size-group { display: inline-flex; background-color: var(--nsg-panel-alt); border: 1px solid var(--nsg-border); border-radius: 999px; padding: 4px; gap: 4px; } .nsg-size-option { background: none; border: none; color: var(--nsg-text-muted); font-size: 0.8rem; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .nsg-size-option:hover { color: var(--nsg-text); } .nsg-size-option.active { background-color: var(--nsg-accent); color: #05070d; } /* Save status pill */ .nsg-settings-save-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--nsg-accent); opacity: 0; transform: translateY(2px); transition: opacity 0.25s ease, transform 0.25s ease; } .nsg-settings-save-status.visible { opacity: 1; transform: translateY(0); } .nsg-settings-save-status.is-error { color: var(--nsg-danger); } @media (max-width: 560px) { .nsg-font-grid { grid-template-columns: 1fr; } } .nsg-img-icon { width: 1em; height: 1em; object-fit: contain; vertical-align: -0.125em; /* matches FontAwesome baseline */ } /* ── OWS category gradient accent ─────────────────────────────────────────── The DB colour column can't hold a gradient, so we override the solid-colour --nsg-cat-accent usages here for any element inside [data-nsg-cat="OWS"]. The sidebar renderer sets data-nsg-cat from the category slug. */ /* Target by slug attribute added in render_sidebar_nav */ .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-category-icon i, .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-page-icon i { color: transparent; background: linear-gradient(135deg, #3493ff, #cb13ff); -webkit-background-clip: text; background-clip: text; } /* Active/hover background tint */ .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-category-btn.active, .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-page.active { background-color: color-mix(in srgb, #3493ff 8%, transparent); } /* Gradient left border via pseudo-element (border-color can't be a gradient) */ .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-category-btn.active, .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-page.active { border-left-color: transparent; position: relative; } .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-category-btn.active::before, .nsg-nav-category[data-nsg-slug="OWS"] .nsg-nav-page.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: linear-gradient(180deg, #3493ff, #cb13ff); }