/* ============================================================ * Botify Network Admin — Premium Network Pack Overlay * ------------------------------------------------------------ * Source: admin_botify_network_dashboard_design_pack(2).zip * sha256 manifest verified at copy time * (assets/network-pack/manifest.sha256.json — 80/80 PASS) * * Loading model * 1. tokens.css ships the dashboard's authoritative tokens * and theme system (data-theme="oled" etc). NOT touched — * it is a design-system sync target (CI gate * `governance:design-system-sync` mirrors it byte-identical * into services/zoom-multi-tool/public/css/tokens.css). * 2. This overlay defines pack tokens under the --np-* prefix * so it cannot collide with existing var names * (--bg-glass, --radius-sm, etc). * 3. Pack visual layers (page gradient, panel surface, * active-nav gradient, constellation) activate when the * carries class="theme-premium-network-pack". * * Out of scope * - Full migration of dashboard.css (~8k lines) to pack * tokens. Deferred — see #451 follow-up. * - Replacement of existing sidebar module list with the * generic 10-module pack JSON. Existing production sidebar * is operationally meaningful (Meeting Monitor / PЯIMΞ / * VIP Room / High Texas / Backup Runtime are real surfaces * gated by role + scope) — would regress prod UX. * ============================================================ */ :root { /* ---- Pack base surfaces ---- */ --np-bg-root: #030712; --np-bg-deep: #020617; --np-bg-panel: #07111F; --np-bg-panel-2: #0B1628; --np-bg-elevated: #101B2F; --np-bg-glass: rgba(8, 18, 34, 0.72); --np-bg-glass-strong: rgba(9, 21, 39, 0.88); /* ---- Pack borders ---- */ --np-border-soft: rgba(148, 190, 255, 0.14); --np-border-bright: rgba(96, 165, 250, 0.38); --np-border-violet: rgba(168, 85, 247, 0.36); /* ---- Pack text ---- */ --np-text-main: #F8FBFF; --np-text-muted: #9FB3C8; --np-text-dim: #64748B; /* ---- Pack accents ---- */ --np-accent-blue: #38BDF8; --np-accent-cyan: #22D3EE; --np-accent-violet: #8B5CF6; --np-accent-purple: #C026D3; --np-accent-magenta: #F472B6; --np-accent-green: #22C55E; --np-accent-emerald: #10B981; --np-accent-yellow: #F59E0B; --np-accent-gold: #F8C35D; --np-accent-red: #EF4444; /* ---- Pack chrome ---- */ --np-chrome: #D9EAFE; --np-chrome-dark: #6B7F9F; /* ---- Pack shadows / glows ---- */ --np-shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.38); --np-shadow-glow-blue: 0 0 32px rgba(56, 189, 248, 0.22); --np-shadow-glow-violet: 0 0 34px rgba(139, 92, 246, 0.22); --np-shadow-glow-green: 0 0 32px rgba(34, 197, 94, 0.18); /* ---- Pack radii (NAMESPACED — existing --radius-sm is 0.375rem; pack value is 12px and would otherwise collide). ---- */ --np-radius-sm: 12px; --np-radius-md: 16px; --np-radius-lg: 22px; --np-radius-xl: 28px; --np-radius-pill: 999px; /* ---- Pack canonical gradients ---- */ --np-gradient-page: radial-gradient(circle at 18% 0%, rgba(56,189,248,.16), transparent 35%), radial-gradient(circle at 86% 12%, rgba(139,92,246,.16), transparent 32%), linear-gradient(135deg, #020617 0%, #07111f 50%, #030712 100%); --np-gradient-panel: linear-gradient(145deg, rgba(14, 30, 54, .88), rgba(5, 13, 27, .82)); --np-gradient-active-nav: linear-gradient(90deg, rgba(37,99,235,.55), rgba(14,165,233,.18)); } /* ============================================================ * Opt-in: body.theme-premium-network-pack activates the pack * visual layer ON TOP of existing structure. No core selectors * are renamed; only surface gradients and accent borders are * overlaid. Disable by removing the body class — instant * rollback path. * ============================================================ */ body.theme-premium-network-pack { /* The page gradient layers over the existing OLED bg so a black base is still rendered if the gradient stops fail to parse (defensive). */ background-color: var(--np-bg-root); background-image: var(--np-gradient-page); background-attachment: fixed; } /* Section card (already styled by dashboard.css). Pack overlay replaces the gradient surface and adds the violet/blue glow sheen via ::before without touching .section-card's other rules (padding, radius from existing system, layout). */ body.theme-premium-network-pack .section-card { background: var(--np-gradient-panel); border: 1px solid var(--np-border-soft); box-shadow: var(--np-shadow-panel), inset 0 1px 0 rgba(255,255,255,.06); } /* Pack ::before sheen — explicitly resets the existing 1px-stripe ::before from dashboard.css (.section-card::before line 6948). Without `top/right/bottom/left: 0` + `height: auto` here, the inherited `height: 1px` would render the sheen as a thin top stripe instead of a full-card glaze. Specificity (0,3,2) on the overlay beats the existing (0,1,1) baseline for every property except those we leave to inheritance. */ body.theme-premium-network-pack .section-card::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.06), transparent 22%, transparent 80%, rgba(56,189,248,.07)); opacity: 0.55; border-radius: inherit; } /* .section-card already has position:relative + overflow:hidden in dashboard.css (lines 760, 6934, 6935). This declaration is a defensive no-op preserved for environments where the overlay loads in isolation. */ body.theme-premium-network-pack .section-card { position: relative; } /* Active nav — pack gradient on the existing .nav-item.active. #603 finding: dashboard.css line 7771 uses .nav-item.active { background: ... !important; } on a cyan `--tint-info-08` tint. CSS `!important` trumps overlay specificity, so the pack blue→cyan gradient was being painted under the cyan tint at runtime. The fix adds `!important` here so the overlay wins under `body.theme-premium-network-pack`. Removing the body class still falls back to baseline (the dashboard.css rule continues to apply unchanged). Rollback contract intact. */ body.theme-premium-network-pack .sidebar-nav a.nav-item.active, body.theme-premium-network-pack .nav-item.active { background: var(--np-gradient-active-nav) !important; color: var(--np-text-main) !important; box-shadow: inset 0 0 0 1px var(--np-border-bright); } /* Sidebar surface — pack vertical gradient + bright inner edge */ body.theme-premium-network-pack .sidebar { background: linear-gradient(180deg, rgba(2, 9, 20, .92), rgba(5, 13, 27, .86)); border-right: 1px solid var(--np-border-soft); box-shadow: inset -1px 0 0 rgba(96,165,250,.12); } /* ============================================================ * #602 token migration polish — visual-only follow-ups to #600 * ------------------------------------------------------------ * - login.html `.btn-login` Authenticate button: legacy * `#00ff88` swapped to pack blue→cyan gradient. * - login.html `.login-container` border-top accent swapped * to `--np-accent-blue`. * - login.html `input:focus` border + ring uses * `--np-accent-blue` instead of legacy green. * - Premium focus ring on every interactive element under the * theme class (minimum viable; full a11y sweep is #603). * - Mobile chip / nav-item touch-target padding bumped to * ≥44px on ≤430px viewports. * - Muted text contrast nudged on `body.theme-premium-network-pack` * so `--np-text-muted` reads cleanly on `--np-bg-panel`. * * All rules gated by `body.theme-premium-network-pack`. Removing * the body class reverts to baseline OLED behaviour. No * dashboard.css change — keeps the rollback contract identical * to PR #600's foundation guarantee. * ============================================================ */ /* Login button + container accent — kills the legacy `#00ff88` / `--primary` styling that #601 flagged under finding #1. */ body.theme-premium-network-pack .btn-login, body.theme-premium-network-pack button.btn-login { background: var(--np-gradient-active-nav); color: var(--np-text-main); border: 1px solid var(--np-border-bright); box-shadow: var(--np-shadow-glow-blue), inset 0 1px 0 rgba(255,255,255,.06); } body.theme-premium-network-pack .btn-login:hover, body.theme-premium-network-pack button.btn-login:hover { background: linear-gradient(90deg, rgba(56,189,248,.78), rgba(14,165,233,.30)); border-color: var(--np-accent-blue); transform: translateY(-1px); } body.theme-premium-network-pack .btn-login:disabled, body.theme-premium-network-pack button.btn-login:disabled { opacity: 0.45; transform: none; cursor: not-allowed; } body.theme-premium-network-pack .login-container { border-top-color: var(--np-accent-blue); } body.theme-premium-network-pack input:focus, body.theme-premium-network-pack textarea:focus, body.theme-premium-network-pack select:focus { outline: none; border-color: var(--np-accent-blue); box-shadow: 0 0 0 3px rgba(56,189,248,.25); } /* Premium focus ring (minimum viable). Full pass under #603. */ body.theme-premium-network-pack a:focus-visible, body.theme-premium-network-pack button:focus-visible, body.theme-premium-network-pack .nav-item:focus-visible, body.theme-premium-network-pack [tabindex]:focus-visible { outline: 2px solid var(--np-accent-blue); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(56,189,248,.22); } /* Mobile chip / nav touch-target — bump padding to ≥44px tap area at ≤430px viewports (#601 finding #3 partial). */ @media (max-width: 430px) { body.theme-premium-network-pack .nav-item, body.theme-premium-network-pack .sidebar-nav a.nav-item { padding-top: 12px; padding-bottom: 12px; min-height: 44px; } body.theme-premium-network-pack .btn-login, body.theme-premium-network-pack button.btn-login { min-height: 48px; } body.theme-premium-network-pack .bot-tab-btn, body.theme-premium-network-pack .status-pill, body.theme-premium-network-pack .status-chip, body.theme-premium-network-pack .chip { min-height: 36px; padding-top: 8px; padding-bottom: 8px; } } /* Muted text contrast nudge — `--np-text-muted` (#9FB3C8) on `--np-bg-panel` (#07111F) computes to ~7.4:1, well above WCAG AA. Tertiary `--np-text-dim` (#64748B) is ~3.7:1, only borderline. Nudge `--np-text-dim` brighter when used inside the theme so all tertiary copy stays readable. */ body.theme-premium-network-pack { --np-text-dim: #88A0B8; } /* ============================================================ * Community & Partnerships constellation * ------------------------------------------------------------ * Vanilla-JS port of snippets/CommunityConstellation.jsx. * Data source: /assets/network-pack/community-partners.json * Hard rule: PЯIMΞ / Я / Ξ / Λ characters in partner labels * must render byte-exact from JSON. Test enforced. * ============================================================ */ .np-constellation { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 28px 24px 32px; } .np-constellation__header { display: flex; flex-direction: column; gap: 6px; } .np-constellation__eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--np-text-muted); } .np-constellation__title { font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: var(--np-text-main); margin: 0; } .np-constellation__tagline { font-size: 0.92rem; color: var(--np-text-muted); margin: 0; max-width: 56ch; } .np-constellation__stage { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 340px; margin-top: 4px; isolation: isolate; } .np-constellation__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(96, 165, 250, 0.22); pointer-events: none; margin: auto; } .np-constellation__orbit--inner { width: 52%; height: 52%; inset: 0; } .np-constellation__orbit--outer { width: 92%; height: 92%; inset: 0; border-color: rgba(139, 92, 246, 0.18); } .np-constellation__center, .np-constellation__node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; } .np-constellation__center-disc { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.20), transparent 40%), linear-gradient(145deg, rgba(217, 234, 254, 0.18), rgba(107, 127, 159, 0.06)); border: 1px solid var(--np-border-bright); box-shadow: var(--np-shadow-glow-blue), inset 0 1px 0 rgba(255,255,255,0.12); display: grid; place-items: center; padding: 14px; } .np-constellation__center-disc img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); } .np-constellation__center-label { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--np-chrome); text-transform: uppercase; } .np-constellation__node { width: 58px; height: 58px; border-radius: 50%; padding: 10px; background: var(--np-bg-glass-strong); border: 1px solid var(--np-border-soft); box-shadow: 0 6px 20px rgba(0,0,0,0.45); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .np-constellation__node img { width: 100%; height: 100%; object-fit: contain; } .np-constellation__node-label { position: absolute; top: 100%; margin-top: 6px; font-size: 0.7rem; letter-spacing: 0.02em; color: var(--np-text-muted); white-space: nowrap; } .np-constellation__node:hover { transform: translate(-50%, -50%) scale(1.06); border-color: var(--np-border-bright); box-shadow: var(--np-shadow-glow-blue); } /* Tone-tinted node borders */ .np-constellation__node[data-tone="gold"] { border-color: rgba(248, 195, 93, 0.45); } .np-constellation__node[data-tone="violet"] { border-color: rgba(139, 92, 246, 0.45); } .np-constellation__node[data-tone="cyan"] { border-color: rgba(34, 211, 238, 0.45); } .np-constellation__node[data-tone="blue"] { border-color: rgba(56, 189, 248, 0.45); } .np-constellation__node[data-tone="purple"] { border-color: rgba(192, 38, 211, 0.45); } .np-constellation__node[data-tone="green"] { border-color: rgba(34, 197, 94, 0.45); } .np-constellation__node[data-tone="cyanViolet"]{ border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 0 24px rgba(34, 211, 238, 0.18), 0 6px 20px rgba(0,0,0,0.45); } .np-constellation__node[data-tone="multi"] { border-image: linear-gradient(120deg, #38BDF8, #8B5CF6, #F472B6) 1; } /* Reduced-motion: kill orbit hover scale + any future animations */ @media (prefers-reduced-motion: reduce) { .np-constellation__node, .np-constellation__node:hover { transition: none; transform: translate(-50%, -50%); } } /* Mobile: collapse stage to a flex grid so all nodes remain visible */ @media (max-width: 720px) { .np-constellation__stage { aspect-ratio: auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 22px 12px; padding: 12px 0 28px; } .np-constellation__orbit { display: none; } .np-constellation__center, .np-constellation__node { position: static; transform: none; margin: 0 auto; } .np-constellation__node-label { position: static; margin-top: 4px; } .np-constellation__center-disc { width: 84px; height: 84px; } }