/* ============================================================================= * THEMES — palette only. Active theme chosen in ../theme.yml, applied as * . Structural rules reference these vars. * ===========================================================================*/ :root { --r-lg: 26px; --r-md: 14px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font: -apple-system, "Segoe UI", Inter, Roboto, system-ui, sans-serif; /* default = cyber (glassy teal) */ --page-bg: radial-gradient(1200px 700px at 70% -10%, #0f2230 0%, #05070b 55%); --ink: #eaf4f2; --ink-dim: #a7bec0; --ink-faint: #6e8386; --surface: rgba(255,255,255,.055); --card-edge: rgba(255,255,255,.12); --card-hi: rgba(255,255,255,.08); --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --shadow: 0 30px 80px -26px rgba(0,0,0,.75); --accent: #23e5b8; --accent-2: #14c7a2; --on-accent: #04120e; --ok: #2ee6a8; --alert: #ff6d78; --on-alert: #fff; --hole-fill: #05070b; --halo: #05070b; --target-bg: rgba(0,0,0,.28); --url-color: #23e5b8; --aurora-a: #23e5b8; --aurora-b: #2c7a8c; --aurora-c: #1b6f7a; --aurora-op: .5; --draw-fill: rgba(35,229,184,.14); } [data-theme="cyber"] { --page-bg: radial-gradient(1200px 700px at 70% -10%, #0f2230 0%, #05070b 55%); --ink: #eaf4f2; --ink-dim: #a7bec0; --ink-faint: #6e8386; --surface: rgba(255,255,255,.055); --card-edge: rgba(255,255,255,.12); --card-hi: rgba(255,255,255,.08); --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --shadow: 0 30px 80px -26px rgba(0,0,0,.75); --accent: #23e5b8; --accent-2: #14c7a2; --on-accent: #04120e; --ok: #2ee6a8; --alert: #ff6d78; --on-alert: #fff; --hole-fill: #05070b; --halo: #05070b; --target-bg: rgba(0,0,0,.28); --url-color: #23e5b8; --aurora-a: #23e5b8; --aurora-b: #2c7a8c; --aurora-c: #1b6f7a; --aurora-op: .5; --draw-fill: rgba(35,229,184,.14); } [data-theme="emerald"] { --page-bg: radial-gradient(720px 520px at 50% 30%, rgba(46,230,180,.12), transparent 62%), radial-gradient(1100px 900px at 50% 42%, #0e4840, transparent 72%), linear-gradient(160deg, #0a332d, #05201b); --ink: #eafaf4; --ink-dim: #a6c6bd; --ink-faint: #6f918a; --surface: rgba(6,34,29,.5); --card-edge: rgba(120,230,200,.14); --card-hi: rgba(255,255,255,.05); --line: rgba(160,240,220,.1); --line-2: rgba(160,240,220,.2); --shadow: 0 30px 70px -30px rgba(0,0,0,.6); --accent: #2fe0b6; --accent-2: #1fbf9c; --on-accent: #05271f; --ok: #2fe0b6; --alert: #f0876f; --on-alert: #2a1210; --hole-fill: #05201b; --halo: #06231d; --target-bg: rgba(0,0,0,.22); --url-color: #2fe0b6; --aurora-a: #2fe0b6; --aurora-b: #1a6f5f; --aurora-c: #124a42; --aurora-op: .4; --draw-fill: rgba(47,224,182,.12); } [data-theme="zerotrust"] { --page-bg: radial-gradient(920px 540px at 50% -10%, rgba(47,107,237,.14), transparent 62%), linear-gradient(180deg, #f2f6fc, #e6edf8); --ink: #15233c; --ink-dim: #56617a; --ink-faint: #8a96ab; --surface: rgba(255,255,255,.72); --card-edge: rgba(255,255,255,.9); --card-hi: rgba(255,255,255,.9); --line: rgba(24,52,96,.12); --line-2: rgba(24,52,96,.2); --shadow: 0 26px 56px -28px rgba(20,46,92,.4); --accent: #2f6bed; --accent-2: #1c4fd0; --on-accent: #fff; --ok: #1f9d63; --alert: #dc4b4b; --on-alert: #fff; --hole-fill: #26456e; --halo: #eef3fb; --target-bg: rgba(47,107,237,.05); --url-color: #2f6bed; --aurora-a: #7fb0ff; --aurora-b: #b7cdff; --aurora-c: #d6e4ff; --aurora-op: .5; --draw-fill: #eef3fb; } [data-theme="cozy"] { --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif; --page-bg: linear-gradient(180deg, #211a15, #17120f); --ink: #f3ece3; --ink-dim: #b9ab9c; --ink-faint: #857567; --surface: rgba(255,244,232,.05); --card-edge: rgba(255,244,232,.1); --card-hi: rgba(255,245,235,.06); --line: rgba(255,240,224,.09); --line-2: rgba(255,240,224,.15); --shadow: 0 26px 60px -30px rgba(0,0,0,.75); --accent: #46b89c; --accent-2: #379d84; --on-accent: #06130f; --ok: #6fc9a3; --alert: #ec8a6b; --on-alert: #20120c; --hole-fill: #17120f; --halo: #17120f; --target-bg: rgba(0,0,0,.18); --url-color: #c9b7a3; --aurora-a: #ecb08a; --aurora-b: #46b89c; --aurora-c: #7a5a44; --aurora-op: .32; --draw-fill: rgba(255,244,232,.1); } [data-theme="secure-dark"] { --page-bg: linear-gradient(180deg, #141a22, #0f1319); --ink: #e9edf1; --ink-dim: #a4aeb7; --ink-faint: #6c767f; --surface: rgba(255,255,255,.04); --card-edge: rgba(255,255,255,.09); --card-hi: rgba(255,255,255,.05); --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.13); --shadow: 0 30px 70px -30px rgba(0,0,0,.7); --accent: #4bb89c; --accent-2: #3aa88d; --on-accent: #04120e; --ok: #5cc79a; --alert: #e07b83; --on-alert: #1a0e0f; --hole-fill: #0f1319; --halo: #0f1319; --target-bg: rgba(0,0,0,.2); --url-color: #a4aeb7; --aurora-a: #4bb89c; --aurora-b: #35566a; --aurora-c: #24424e; --aurora-op: .3; --draw-fill: rgba(255,255,255,.06); } /* ============================================================================= * STRUCTURE * ===========================================================================*/ * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--page-bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh; overflow-x: hidden; } /* moving aurora (the glassy vibe) */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(90px); opacity: var(--aurora-op); } .blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: drift 30s var(--ease) infinite alternate; } .b1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax; background: radial-gradient(circle, var(--aurora-a), transparent 62%); } .b2 { width: 40vmax; height: 40vmax; right: -16vmax; top: 2vmax; background: radial-gradient(circle, var(--aurora-b), transparent 62%); animation-delay: -10s; } .b3 { width: 34vmax; height: 34vmax; left: 32vmax; bottom: -22vmax; background: radial-gradient(circle, var(--aurora-c), transparent 62%); animation-delay: -18s; } @keyframes drift { to { transform: translate3d(5vmax, 4vmax, 0) scale(1.12); } } /* nav */ .nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 15px clamp(16px, 4vw, 40px); } .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); } .brand-mark { border-radius: 8px; display: block; } .brand-name { font-weight: 700; font-size: 17px; } .status-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 0.14s, border-color 0.25s; } .status-link:hover { border-color: var(--line-2); transform: translateY(-1px); } .status-link svg { color: var(--accent); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); position: relative; } .live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--ok); opacity: 0.35; animation: ping 2s ease-out infinite; } @keyframes ping { to { transform: scale(2.2); opacity: 0; } } /* stage / card */ .stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2.5vh, 22px) 18px; } .card { position: relative; width: min(440px, 100%); overflow: hidden; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 36px) clamp(26px, 5vw, 36px); text-align: center; background: var(--surface); border: 1px solid var(--card-edge); box-shadow: var(--shadow), inset 0 1px 0 var(--card-hi); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); transition: transform 0.35s var(--ease); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); transition: background 0.4s; } [data-state="offline"] .card::before { background: var(--alert); } [data-state="online"] .card::before { background: var(--ok); } .card:hover { transform: translateY(-2px); } /* ---------- broken-connection illustration ---------- */ .hero { position: relative; display: none; justify-content: center; margin-bottom: 18px; transition: transform 0.25s var(--ease); } [data-state="offline"] .hero, [data-state="online"] .hero { display: flex; } .disc-lock { display: none; } [data-state="online"] .disc-wifi { display: none; } [data-state="online"] .disc-lock { display: block; } .glow { position: absolute; top: 50%; left: 50%; width: 210px; height: 210px; border-radius: 50%; transform: translate(-50%, -54%); pointer-events: none; z-index: 0; filter: blur(16px); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 36%, transparent), transparent 64%); animation: breathe 5s ease-in-out infinite; } @keyframes breathe { 50% { opacity: 0.6; transform: translate(-50%, -54%) scale(1.08); } } .disc-svg { position: relative; z-index: 1; width: clamp(150px, 42vw, 188px); height: auto; animation: floaty 6s ease-in-out infinite; } .disc-gif { width: clamp(160px, 48vw, 220px); height: auto; border-radius: 18px; } @keyframes floaty { 50% { transform: translateY(-6px); } } .wifi .w { stroke: var(--accent); stroke-width: 9; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); } .wifi .w3 { animation: sig 2.6s ease-in-out infinite; } .wifi .w2 { animation: sig 2.6s ease-in-out infinite 0.3s; } .wdot { fill: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); } @keyframes sig { 0%, 100% { opacity: 1; } 55% { opacity: 0.3; } } .wtri { fill: var(--alert); stroke: var(--halo); stroke-width: 7; stroke-linejoin: round; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--alert) 60%, transparent)); } .wex, .wexd { stroke: #fff; } .wex { stroke-width: 3.4; stroke-linecap: round; } .wexd { fill: #fff; stroke: none; } .particles > * { stroke: var(--accent); fill: var(--accent); opacity: 0.5; animation: twinkle 3s ease-in-out infinite; } .particles path { fill: none; stroke-width: 2.4; stroke-linecap: round; } .particles .pt { fill: none; } .particles > *:nth-child(2) { animation-delay: 0.5s; } .particles > *:nth-child(3) { animation-delay: 1s; } .particles > *:nth-child(4) { animation-delay: 1.5s; } .particles > *:nth-child(5) { animation-delay: 2s; } @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.72; } } /* lock (connected but no access) */ .lock-shackle { stroke: var(--accent); stroke-width: 9; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); } .lock-body { fill: var(--draw-fill); stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); } .lock-hole { fill: var(--alert); animation: sig 2.4s ease-in-out infinite; } .lock-pin { stroke: var(--alert); stroke-width: 4; stroke-linecap: round; } /* badge kept in DOM but not used in this design */ .badge, .beacon { display: none; } /* copy — minimal & clear */ .title { font-size: clamp(25px, 6.2vw, 32px); font-weight: 750; margin: 8px 0 0; letter-spacing: -0.025em; line-height: 1.14; color: var(--ink); } .sub { color: var(--ink-dim); margin: 12px auto 0; line-height: 1.55; font-size: 15px; max-width: 30ch; } .target-line { margin: 18px auto 0; font-size: 13px; color: var(--ink-faint); } .target-line .target-host { color: var(--ink-dim); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; word-break: break-all; } /* secondary links */ .links { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-faint); } .links a { color: var(--ink-dim); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink-dim) 35%, transparent); padding-bottom: 1px; } .links a:hover { color: var(--accent); border-color: var(--accent); } .links .dot { margin: 0 9px; opacity: 0.45; } /* buttons */ .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 650; font-size: 14.5px; text-decoration: none; cursor: pointer; padding: 12px 22px; border-radius: 13px; border: 1px solid transparent; color: var(--ink); transition: transform 0.14s, filter 0.2s, border-color 0.2s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(0.98); } .btn-primary { color: var(--on-accent); border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent); } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); } .btn-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--on-accent) 40%, transparent); border-top-color: var(--on-accent); animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .reassure { margin: 14px 0 0; color: var(--ok); font-size: 15px; font-weight: 600; } .reassure .check { margin-right: 6px; } [data-state="checking"] #actions { opacity: 0.4; pointer-events: none; transition: opacity 0.3s; } /* responsive / single view */ @media (max-height: 730px) { .disc-svg, .disc-gif { width: 132px; } .hero { margin-bottom: 12px; } .title { font-size: 24px; } .sub { margin-top: 8px; font-size: 14px; } .target-line { margin-top: 12px; } .actions { margin-top: 18px; } } @media (max-height: 590px) { .hero { display: none !important; } .sub { display: none; } } @media (max-width: 400px) { .status-link { padding: 7px 11px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }