/* ============================================================================ vpn-panel — "HUD" theme: graphite + neon red, angular frames. Dark by default; light theme via . The toggle lives next to the username; the choice is saved to localStorage. ============================================================================ */ @font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Share Tech Mono"; src: url("../fonts/sharetechmono.woff2") format("woff2"); font-weight: 400; font-display: swap; } :root { color-scheme: dark; --bg: #08090b; --bg-2: #0d0f12; --surface: #121418; --surface-2: #171a1f; --surface-3: #1e222a; --line: #2a2f38; --line-2: #3a414d; --ink: #e8eaee; --ink-2: #a4abb6; --ink-3: #6b7280; --red: #ff2b2b; --red-soft: #ff5a4d; --red-deep: #8c1a2e; --red-050: rgba(255, 43, 43, .08); --red-100: rgba(255, 43, 43, .16); --red-glow: rgba(255, 43, 43, .45); /* second team's accent — Team A stays red, Team B (and its dashboard/badge bits) use this instead. Kept as its own small token set so nothing about the existing red-based components has to change. */ --blue: #2b8fff; --blue-soft: #5aa9ff; --blue-100: rgba(43, 143, 255, .16); --blue-glow: rgba(43, 143, 255, .45); --brand: var(--red); --brand-ink: #0a0a0a; --brand-100: var(--red-100); --brand-050: var(--red-050); --ok: #2fe08a; --ok-bg: rgba(47, 224, 138, .12); --warn: #ffb020; --warn-bg: rgba(255, 176, 32, .12); --danger: #ff4d4d; --danger-bg: rgba(255, 77, 77, .12); --radius: 4px; --radius-sm: 3px; --shadow-1: 0 2px 10px rgba(0,0,0,.5); --shadow-2: 0 8px 30px rgba(0,0,0,.6); --glow: 0 0 14px var(--red-glow); --scan-alpha: .014; --panel-accent: rgba(255,43,43,.05); --card-inset: rgba(255,255,255,.03); --body-bg: radial-gradient(1200px 600px at 70% -10%, rgba(255,43,43,.06), transparent 60%), linear-gradient(180deg, #0d0f12, #08090b); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Share Tech Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --display: "Orbitron", var(--font); /* angular corner cut used across panels/buttons */ --cut: 10px; } :root[data-theme="light"] { color-scheme: light; --bg: #eceef1; --bg-2: #f5f6f8; --surface: #ffffff; --surface-2: #f1f3f5; --surface-3: #e7eaee; --line: #dfe3e8; --line-2: #c6ccd4; --ink: #16191d; --ink-2: #444b54; --ink-3: #767e89; --red: #d21f2c; --red-soft: #b81c28; --red-deep: #8c1a2e; --red-050: rgba(210, 31, 44, .05); --red-100: rgba(210, 31, 44, .11); --red-glow: rgba(210, 31, 44, .22); --blue: #1c64d6; --blue-soft: #144ead; --blue-100: rgba(28, 100, 214, .11); --blue-glow: rgba(28, 100, 214, .22); --ok: #12824a; --ok-bg: rgba(18, 130, 74, .10); --warn: #9a5b00; --warn-bg: rgba(154, 91, 0, .10); --danger: #c62222; --danger-bg: rgba(198, 34, 34, .08); --shadow-1: 0 1px 3px rgba(20,25,35,.10), 0 1px 2px rgba(20,25,35,.06); --shadow-2: 0 8px 24px rgba(20,25,35,.14); --glow: 0 0 0 1px var(--red-100); --scan-alpha: 0; --panel-accent: rgba(210,31,44,.035); --card-inset: rgba(255,255,255,.6); --body-bg: radial-gradient(1100px 520px at 72% -12%, rgba(210,31,44,.05), transparent 60%), linear-gradient(180deg, #f3f4f6, #e9ebee); } * { box-sizing: border-box; } [hidden] { display: none !important; } /* beats .field{display:block} etc. */ html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--body-bg); background-attachment: fixed; color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100dvh; } /* faint scanlines (dark only — --scan-alpha is 0 in light) */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,var(--scan-alpha)) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; } body > * { position: relative; z-index: 2; } a { color: var(--red-soft); text-decoration: none; } a:hover { color: var(--red); text-decoration: underline; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; letter-spacing: .3px; } h1 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; } h2 { font-size: 1.2rem; font-weight: 650; } h3 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-2); } code, pre, .mono { font-family: var(--mono); font-size: .86em; } .inline { display: inline; } .muted { color: var(--ink-3); } .small { font-size: .85rem; } .nowrap { white-space: nowrap; } /* ---------- app bar ---------- */ .appbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 0 var(--red-100), var(--shadow-1); backdrop-filter: blur(8px); } .appbar__inner { display: flex; align-items: center; gap: 22px; max-width: 1200px; margin: 0 auto; padding: 11px 22px; } .appbar__spacer { flex: 1; } .brand { display: flex; align-items: center; gap: 11px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand__logo { height: 28px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(255,43,43,.35)); } .brand__name { font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: 2px; text-transform: uppercase; } .nav { display: flex; gap: 2px; } .nav__link { color: var(--ink-2); padding: 7px 13px; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border: 1px solid transparent; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .nav__link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .nav__link.is-active { color: var(--red); background: var(--red-050); border-color: rgba(255,43,43,.35); text-shadow: 0 0 10px var(--red-glow); } .usermenu { display: flex; align-items: center; gap: 8px; font-size: .85rem; } /* light / dark toggle (sits next to the username) */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); cursor: pointer; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; } .theme-toggle:hover { color: var(--red); border-color: var(--red); box-shadow: var(--glow); } .theme-toggle:active { transform: translateY(1px); } .theme-toggle svg { display: block; } .theme-toggle .i-sun, .theme-toggle .i-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; } :root[data-theme="light"] .theme-toggle .i-moon { display: block; } /* ---------- layout ---------- */ .page { max-width: 1200px; margin: 0 auto; padding: 30px 22px 70px; } .page--auth { display: grid; place-items: center; min-height: 100dvh; padding: 20px; } .footer { max-width: 1200px; margin: 0 auto; padding: 22px; color: var(--ink-3); font-size: .78rem; text-align: center; font-family: var(--mono); letter-spacing: .5px; } .row { display: flex; gap: 16px; flex-wrap: wrap; } .row--between { justify-content: space-between; align-items: center; } .stack > * + * { margin-top: 16px; } .grid { display: grid; gap: 16px; } .grid--stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* ---------- panels ("card" kept for template compatibility) ---------- */ .card { position: relative; background: linear-gradient(180deg, var(--panel-accent), transparent 22%), var(--surface); border: 1px solid var(--line-2); padding: 20px; box-shadow: inset 0 1px 0 var(--card-inset), var(--shadow-1); clip-path: polygon( var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); } /* corner ticks */ .card::before, .card::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; border-color: var(--red); border-style: solid; opacity: .7; } .card::before { top: 5px; right: 5px; border-width: 1.5px 1.5px 0 0; } .card::after { bottom: 5px; left: 5px; border-width: 0 0 1.5px 1.5px; } .card__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card__title h3 { margin: 0; } .card--auth { width: 100%; max-width: 400px; padding: 30px; } .stat__value { font-family: var(--display); font-size: 2.1rem; font-weight: 700; letter-spacing: 1px; color: var(--ink); text-shadow: 0 0 16px rgba(255,255,255,.12); } .stat__label { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; } /* ---------- buttons ---------- */ .btn { --_bg: var(--red); --_fg: #ffffff; --_bg-h: var(--red-soft); --_fg-h: #ffffff; --_bd: transparent; display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 9px 20px; border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg); font: inherit; font-weight: 700; font-size: .82rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; } .btn:hover { background: var(--_bg-h); color: var(--_fg-h); box-shadow: var(--glow); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .btn:disabled:hover { background: var(--_bg); color: var(--_fg); } .btn--tonal { --_bg: var(--red-100); --_fg: var(--red); --_bg-h: var(--red); --_fg-h: #ffffff; --_bd: color-mix(in srgb, var(--red) 35%, transparent); } .btn--outline { --_bg: transparent; --_fg: var(--ink); --_bd: var(--line-2); --_bg-h: var(--red); --_fg-h: #ffffff; } .btn--outline:hover { border-color: var(--red); } .btn--text { --_bg: transparent; --_fg: var(--ink-2); --_bg-h: var(--surface-2); --_fg-h: var(--ink); padding: 7px 12px; clip-path: none; letter-spacing: .5px; } .btn--text:hover { box-shadow: none; } .btn--danger { --_bg: var(--danger); --_fg: #ffffff; --_bg-h: color-mix(in srgb, var(--danger) 80%, #000); --_fg-h: #ffffff; } .btn--danger-outline { --_bg: transparent; --_fg: var(--danger); --_bd: color-mix(in srgb, var(--danger) 45%, transparent); --_bg-h: var(--danger); --_fg-h: #ffffff; } .btn--danger-outline:hover { border-color: var(--danger); } .btn--sm { padding: 6px 12px; font-size: .72rem; } .btn--lg { padding: 13px 26px; font-size: .88rem; } .btn--block { display: flex; width: 100%; } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ---------- forms ---------- */ .field { display: block; margin-bottom: 16px; } .field > label { display: block; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; color: var(--ink-2); } .input, select, textarea { width: 100%; padding: 10px 12px; font: inherit; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); } .input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 12px var(--red-glow); } textarea { min-height: 120px; resize: vertical; font-family: var(--mono); font-size: .84rem; } .field__error { color: var(--danger); font-size: .82rem; margin-top: 4px; } .field__hint { color: var(--ink-3); font-size: .82rem; margin-top: 4px; } .checkbox { display: flex; align-items: center; gap: 8px; font-size: .9rem; } .checkbox input { width: auto; accent-color: var(--red); } /* ---------- table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line-2); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); } table.data { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--surface); } table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); } table.data th { background: var(--surface-2); font-size: .68rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--red-soft); border-bottom: 1px solid var(--line-2); } table.data tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: var(--red-050); } table.data td.actions { text-align: right; white-space: nowrap; } /* ---------- chips / status ---------- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line-2); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } .chip--ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(47,224,138,.4); } .chip--off { background: var(--surface-3); color: var(--ink-3); } .chip--warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(255,176,32,.4); } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .dot--pulse { animation: pulse 1.8s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- team accent (multi-node "hub") ---------- */ /* Each team's own color, scoped to a subtree via one of these — nothing about the existing red-based components changes; --team is a local variable a handful of small utility classes below read from. */ .accent-red { --team: var(--red); --team-100: var(--red-100); --team-glow: var(--red-glow); } .accent-blue { --team: var(--blue); --team-100: var(--blue-100); --team-glow: var(--blue-glow); } .team-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--team-100); color: var(--team); white-space: nowrap; border: 1px solid color-mix(in srgb, var(--team) 35%, transparent); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } .team-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--team); box-shadow: 0 0 8px var(--team); flex: none; } .team-card { border-left: 3px solid var(--team); } .team-card h3 { color: var(--team); } /* ---------- team carousel (one team at a time, animated switch) ---------- */ .tcar { --team: var(--red); margin-bottom: 4px; } .tcar[data-accent="blue"] { --team: var(--blue); --team-100: var(--blue-100); --team-glow: var(--blue-glow); } .tcar[data-accent="red"] { --team: var(--red); --team-100: var(--red-100); --team-glow: var(--red-glow); } .tcar__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .tcar__now { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--team); } .tcar__nav { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; background: var(--team-100); color: var(--team); border: 1px solid color-mix(in srgb, var(--team) 35%, transparent); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: background .12s ease, color .12s ease, box-shadow .12s ease; } .tcar__nav:hover { background: var(--team); color: #fff; box-shadow: 0 0 14px var(--team-glow); } .tcar__nav[hidden] { display: none; } .tcar--solo .tcar__bar { display: none; } .tcar__viewport { position: relative; overflow: hidden; transition: height .46s cubic-bezier(.16,1,.3,1); } .tcar__slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateX(64px) scale(.94); transition: opacity .34s ease, transform .46s cubic-bezier(.16,1,.3,1); pointer-events: none; } .tcar__slide.tcar-behind { transform: translateX(-64px) scale(.94); } .tcar__slide.is-active, .tcar__slide:only-child { position: relative; opacity: 1; transform: none; pointer-events: auto; } /* no motion until JS has placed the slides + on reduced-motion */ .tcar:not(.tcar--ready) .tcar__slide, .tcar:not(.tcar--ready) .tcar__viewport { transition: none; } @media (prefers-reduced-motion: reduce) { .tcar__slide, .tcar__viewport { transition: opacity .01s !important; transform: none !important; } } /* ---------- settings: shared block + two-column team split ---------- */ .settings-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 860px) { .settings-split { grid-template-columns: 1fr; } } /* ---------- pagination ---------- */ .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .pager__at { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); } .pager__btn { padding: 7px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } .pager__btn:hover { color: var(--ink); border-color: var(--red); text-decoration: none; } .pager__btn.is-disabled { opacity: .35; pointer-events: none; } /* ---------- flashes ---------- */ .flashes { margin-bottom: 22px; display: grid; gap: 8px; } .flash { padding: 11px 16px; font-size: .88rem; border: 1px solid var(--line-2); border-left-width: 3px; background: var(--surface-2); } .flash--success { border-left-color: var(--ok); color: var(--ok); background: var(--ok-bg); } .flash--danger, .flash--error { border-left-color: var(--danger); color: var(--danger); background: var(--danger-bg); } .flash--warning { border-left-color: var(--warn); color: var(--warn); background: var(--warn-bg); } .flash--info { border-left-color: var(--red); color: var(--red-soft); background: var(--red-050); } /* ---------- code block ---------- */ .codeblock { position: relative; background: var(--bg-2); border: 1px solid var(--line-2); padding: 14px; overflow-x: auto; white-space: pre; font-family: var(--mono); font-size: .82rem; color: var(--ink-2); } .codeblock__copy { position: absolute; top: 8px; right: 8px; } /* ---------- misc ---------- */ .divider { height: 1px; background: var(--line-2); margin: 20px 0; border: 0; } .qr { display: block; width: 200px; height: 200px; border: 1px solid var(--line-2); background: #fff; padding: 6px; } .qr--lg { width: 230px; height: 230px; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; font-size: .9rem; } .kv dt { color: var(--ink-3); text-transform: uppercase; font-size: .72rem; letter-spacing: 1px; align-self: center; } .kv dd { margin: 0; word-break: break-all; color: var(--ink); } .linkrow { display: flex; gap: 8px; align-items: center; } .linkrow .input { flex: 1; min-width: 0; } details.help { border: 1px solid var(--line-2); padding: 10px 14px; background: var(--surface); } details.help summary { cursor: pointer; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-2); } details.help[open] summary { margin-bottom: 8px; color: var(--red-soft); } /* ============================================================================ DASHBOARD — the HUD showpiece ============================================================================ */ .hud-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line-2); padding-bottom: 12px; } .hud-head h1 { margin: 0; } .hud-head .tag { font-family: var(--mono); font-size: .74rem; letter-spacing: 1px; color: var(--red-soft); border: 1px solid rgba(255,43,43,.35); padding: 2px 8px; } .hud-head .spacer { flex: 1; } .hud-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } @media (max-width: 980px) { .col-3 { grid-column: span 6; } } @media (max-width: 900px) { .hud-grid > [class^="col-"] { grid-column: 1 / -1; } } .metric { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 12px; min-height: 148px; } .metric__v { font-family: var(--display); font-size: 2.3rem; font-weight: 700; line-height: 1; } .metric__v--red { color: var(--red); text-shadow: 0 0 18px var(--red-glow); } .metric__v--ok { color: var(--ok); text-shadow: 0 0 18px rgba(47,224,138,.5); } .metric__l { font-size: .68rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-3); margin-top: 8px; } /* circular gauge (SVG) */ .gauge { display: block; margin: 0 auto; } .gauge__track { fill: none; stroke: var(--line-2); stroke-width: 6; } .gauge__fill { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--red-glow)); transition: stroke-dashoffset .6s ease; } .gauge__fill--ok { stroke: var(--ok); filter: drop-shadow(0 0 6px rgba(47,224,138,.6)); } .gauge-wrap { position: relative; } .gauge-wrap__text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .gauge-wrap__text b { font-family: var(--display); font-size: 1.5rem; display: block; } .gauge-wrap__text span { font-size: .64rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-3); } /* connection / geo panel */ .geo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .geo-row { grid-template-columns: 1fr; } } .geo-cell { border: 1px solid var(--line-2); padding: 14px; background: var(--bg-2); } .geo-cell h4 { margin: 0 0 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-3); } .geo-cell .ip { font-family: var(--mono); font-size: 1.15rem; color: var(--ink); } .geo-cell .place { font-size: .9rem; color: var(--ink-2); margin-top: 3px; } .geo-cell .isp { font-size: .78rem; color: var(--ink-3); margin-top: 2px; } .geo-verdict { margin-top: 12px; padding: 10px 12px; font-family: var(--mono); font-size: .84rem; border: 1px solid var(--line-2); border-left: 3px solid var(--ink-3); } .geo-verdict--ok { border-left-color: var(--ok); color: var(--ok); background: var(--ok-bg); } .geo-verdict--bad { border-left-color: var(--warn); color: var(--warn); background: var(--warn-bg); } /* speed test — speedometer + stats */ .speedtest { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; margin: 8px 0 12px; } @media (max-width: 720px) { .speedtest { grid-template-columns: 1fr; justify-items: center; } } .speedtest__gauge { position: relative; width: 300px; height: 300px; } .spdo { width: 100%; height: 100%; display: block; overflow: visible; } .spdo__ring { fill: none; stroke: var(--line); stroke-width: 1; opacity: .5; } .spdo__track { fill: none; stroke: var(--line-2); stroke-width: 10; } /* The fill + needle are eased frame-by-frame in JS. No CSS transition to fight it, and — while the test runs — no `filter: drop-shadow`: re-rasterising a blur every frame is what made the needle stutter under load. `.spdo` gets the glow back via `.is-settled` once the needle has come to rest on the final reading. */ .spdo__fill { fill: none; stroke: var(--red); stroke-width: 10; stroke-linecap: round; will-change: stroke-dashoffset; } .spdo__tick { stroke: var(--ink-3); stroke-width: 1.5; } .spdo__tick--maj { stroke: var(--ink-2); stroke-width: 2.5; } .spdo__needle { fill: var(--red); will-change: transform; } .spdo__hub { fill: var(--surface-3); stroke: var(--red); stroke-width: 2; } .spdo.is-settled .spdo__fill, .spdo.is-settled .spdo__needle { filter: drop-shadow(0 0 7px var(--red-glow)); } .spdo__read { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; pointer-events: none; } .spdo__read b { font-family: var(--display); font-size: 2.4rem; font-weight: 700; display: block; color: var(--ink); text-shadow: 0 0 20px rgba(255,255,255,.18); line-height: 1; } .spdo__read span { font-size: .7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-3); } .spdo__read em { display: block; margin-top: 8px; font-style: normal; font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--red-soft); } .speedtest__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 420px; } .st-stat { border: 1px solid var(--line-2); background: var(--bg-2); padding: 14px 16px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .st-stat span { font-size: .66rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-3); } .st-stat b { font-family: var(--display); font-size: 1.7rem; font-weight: 700; display: block; color: var(--ink); line-height: 1.2; } .st-stat i { font-style: normal; font-size: .66rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-3); } /* ---------- employee "Get Connected" page ---------- */ .setup { max-width: 560px; } .setup__head { text-align: center; margin-bottom: 8px; } .setup__head { display: grid; justify-items: center; } .setup__logo { height: 96px; width: auto; max-width: 100%; padding: 14px 22px; border-radius: 6px; background: radial-gradient(120% 120% at 50% 20%, rgba(255,255,255,.9), rgba(230,232,236,.82)); box-shadow: 0 0 26px rgba(255,43,43,.28), inset 0 0 0 1px rgba(255,43,43,.25); } .setup__title { text-align: center; } .setup__hi { text-align: center; color: var(--ink-3); margin: 0 0 22px; } .setup__foot { margin-top: 28px; text-align: center; color: var(--ink-3); font-size: .82rem; font-family: var(--mono); } .setup__done { text-align: center; margin-top: 18px; } .step { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line-2); padding: 20px; margin-bottom: 14px; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); } .step__n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .95rem; background: var(--red-100); color: var(--red); border: 1px solid rgba(255,43,43,.4); } .step__body { flex: 1; min-width: 0; } .step__body h2 { font-size: 1rem; margin: 2px 0 12px; text-transform: uppercase; letter-spacing: 1px; } .step--done { border-color: rgba(47,224,138,.45); } .step--done .step__n { background: var(--ok-bg); color: var(--ok); border-color: rgba(47,224,138,.5); font-size: 0; } .step--done .step__n::after { content: "\2713"; font-size: 1rem; } .platlist { margin: 8px 0 0; padding-left: 18px; font-size: .88rem; line-height: 1.9; } .statusbox { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; font-size: .9rem; font-weight: 500; font-family: var(--mono); background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line-2); border-left: 3px solid var(--ink-3); } .statusbox .dot { width: 10px; height: 10px; } .statusbox--wait { border-left-color: var(--ink-3); } .statusbox--wait .dot { background: var(--ink-3); } .statusbox--ok { border-left-color: var(--ok); color: var(--ok); background: var(--ok-bg); } .statusbox--ok .dot { background: var(--ok); animation: pulse 1.8s infinite; } .statusbox--warn { border-left-color: var(--warn); color: var(--warn); background: var(--warn-bg); } .statusbox--warn .dot { background: var(--warn); } @media (max-width: 720px) { .appbar__inner { flex-wrap: wrap; gap: 10px; } .nav { order: 3; width: 100%; overflow-x: auto; } .page { padding: 20px 14px 48px; } }