/* ============================================================================= Maelstrom Network — design system Two surfaces, one system. The site is a brochure: white paper, pale blue bands, deep navy ink, and a green that only ever means "go" — buy, confirm, live. It is meant to be read in daylight by someone deciding whether to trust us. The panel is an instrument: the same type and spacing, inverted onto deep water. It is read at night by someone whose server is under attack. Adding class="app" to swaps the tokens; nothing else changes. Radii are generous (16px) because the brochure should feel approachable, and the panel inherits them so the two never look like different products. ========================================================================== */ :root { /* ---- brochure, LIGHT (opt-in) ---- BaZi-aligned palette: Water/Metal base, blue primary, gold for the money action, no Wood-green as brand. See the design notes for the reasoning. Kept as the optional light theme; the dark palette below is the default. */ --paper: #ffffff; --mist: #f2f6ff; /* section band */ --haze: #e8f0fd; /* fills, tracks */ --edge: #dae6fb; /* hairlines */ --edge-2: #c2d4f2; --ink: #0a1730; /* headings, primary text (deep navy) */ --ink-2: #47597a; /* body */ --ink-3: #8496b3; /* captions, labels */ --go: #2e6df2; /* PRIMARY accent — blue (Water/Metal): links, focus */ --go-2: #1e4fd0; /* primary hover */ --go-soft: #e7efff; /* primary tint */ --gold: #d8a93d; /* CTA / money action (Earth→Metal). Dark text on it. */ --gold-2: #eabf55; /* CTA hover */ --gold-soft: #faf1dc; --gold-ink: #2a2006; /* text that sits on gold */ --sky: #38bdf8; /* secondary / second series — cyan */ --violet: #38bdf8; /* was purple; repointed to cyan (drop Fire/crypto purple) */ --warn: #e8a13c; --bad: #e5484d; /* semantic error only — never brand */ --grad: linear-gradient(120deg, var(--go), var(--sky) 78%); --r: 16px; --r-sm: 10px; --wrap: 1180px; --display: 'Manrope', system-ui, sans-serif; --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --shadow: 0 1px 2px rgba(8,37,84,.05), 0 8px 24px rgba(8,37,84,.06); --shadow-lg: 0 2px 6px rgba(8,37,84,.06), 0 24px 60px rgba(8,37,84,.10); /* names the markup was written against */ --bg: var(--paper); --bg-2: var(--mist); --panel: var(--paper); --panel-2: var(--mist); --line: var(--edge); --line-2: var(--edge-2); --foam: var(--ink); --drift: var(--ink-2); --silt: var(--ink-3); --signal: var(--go); --cyan: var(--go); --blue: var(--sky); --tide: var(--sky); --breach: var(--bad); --surge: var(--warn); /* Success is its own colour — a cool teal, decoupled from the blue accent so "healthy / live / up" never reads as a brand click. */ --good: #16b39a; --abyss: var(--paper); --deep: var(--mist); --shelf: var(--paper); --shelf-2: var(--mist); --rule: var(--edge); --rule-2: var(--edge-2); } /* ---- instrument: the same system, read in the dark ---- */ body.dark { /* ---- instrument, DARK (default) ---- The premium enterprise face: near-black navy (Water), steel/white text (Metal), electric blue primary, gold for the money action. */ --paper: #0a0e1a; /* base — near-black navy */ --mist: #111726; /* raised panels / section band */ --haze: #161d30; /* fills, tracks, elevated cards*/ --edge: rgba(120,150,210,.14); --edge-2: rgba(120,150,210,.26); --ink: #e9eef8; /* cool near-white text */ --ink-2: #93a0b8; /* body / steel */ --ink-3: #6b7a93; /* captions */ --go: #3b82f6; /* primary blue, brighter for dark ground */ --go-2: #2e6df2; --go-soft: rgba(59,130,246,.14); --gold: #e9b84a; /* CTA gold on navy */ --gold-2: #f2c766; --gold-soft: rgba(233,184,74,.14); --gold-ink: #0a0e1a; --sky: #38bdf8; /* secondary cyan */ --violet: #38bdf8; /* no purple */ --warn: #e8a13c; --bad: #e5484d; --shadow: none; --shadow-lg: none; --panel: var(--mist); --panel-2: var(--haze); --bg: var(--paper); --bg-2: var(--mist); --shelf: var(--mist); --shelf-2: var(--haze); --abyss: var(--paper); --deep: var(--haze); } * { box-sizing: border-box; } /* The canvas behind must carry the theme too, or a dark page shows a white frame in over-scroll, on short pages, and as a flash before paint. The theme class lives on (pre-dark, set before first paint), and the body.dark tokens do not cascade UP to it — so this is keyed on that class directly with the literal palette values rather than the tokens. */ html { scroll-behavior: smooth; background: #ffffff; } html.pre-dark { background: #0a0e1a; } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--display); color: var(--ink); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 .45em; } h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } h3 { font-size: 1.15rem; font-weight: 700; } p { margin: 0 0 1rem; } strong, b { color: var(--ink); } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); } .muted { color: var(--ink-3); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--go); } .eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 700; color: var(--go); margin-bottom: var(--s3); } :where(a, button, select, input, textarea, summary):focus-visible { outline: 2px solid var(--go); outline-offset: 2px; border-radius: var(--r-sm); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--display); font-weight: 700; font-size: .96rem; padding: .78em 1.5em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .1s; } .btn:active { transform: translateY(1px); } /* Primary = the money action, in gold. Gold carries dark text (white on gold fails contrast) and a gold glow. Secondary actions stay blue. */ .btn-primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); box-shadow: 0 6px 18px rgba(233,184,74,.26); } .btn-primary:hover { background: var(--gold-2); border-color: var(--gold-2); box-shadow: 0 10px 26px rgba(233,184,74,.38); } .btn-ghost { background: transparent; border-color: var(--edge-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--go); color: var(--go); } .btn-lg { padding: .95em 1.9em; font-size: 1.03rem; } .btn-block { width: 100%; } .btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } /* header */ .hdr { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid var(--edge); } .hdr-in { display: flex; align-items: center; gap: var(--s5); height: 68px; } .logo { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; } .logo svg { width: 30px; height: 30px; } .nav { display: flex; gap: var(--s1); margin-left: auto; align-items: center; } .nav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-family: var(--display); font-weight: 600; font-size: .93rem; } .nav a:hover { color: var(--go); } .nav .btn { margin-left: var(--s3); } .burger { display: none; margin-left: auto; background: none; border: 1px solid var(--edge-2); border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; } .burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; border-radius: 2px; } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } /* hero */ .hero { position: relative; padding: clamp(48px, 7vw, 92px) 0 clamp(36px, 5vw, 64px); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s7); align-items: center; } .hero h1 span { display: block; } .hero .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 42ch; } .hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s6) 0 var(--s4); } .hero-note { color: var(--ink-3); font-size: .88rem; margin: var(--s4) 0 0; } .trust { display: flex; gap: var(--s5); flex-wrap: wrap; color: var(--ink-3); font-size: .88rem; } .trust b { color: var(--ink); } .pill-note { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 16px 6px 6px; border: 1px solid var(--edge); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: .85rem; margin-bottom: var(--s5); box-shadow: var(--shadow); } .pill-note:hover { border-color: var(--go); color: var(--ink); } .pill-note span { background: var(--go-soft); color: var(--go-2); font-family: var(--display); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; } .pill-note svg { width: 14px; height: 14px; stroke: currentColor; } .vortex { position: relative; aspect-ratio: 1; max-width: 400px; margin-inline: auto; } .vortex svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 50px rgba(59,146,235,.22)); } /* stat strip */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s7); } .stat { background: var(--mist); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s5); } .stat .n { font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: -.025em; color: var(--ink); } .stat .l { color: var(--ink-3); font-size: .82rem; margin-top: var(--s1); } /* sections */ .section { padding: clamp(52px, 7vw, 88px) 0; } .section-head { max-width: 640px; margin: 0 auto var(--s7); text-align: center; } .section-head p { color: var(--ink-2); font-size: 1.02rem; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); } .feature { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s5); transition: box-shadow .2s, transform .2s, border-color .2s; } .feature:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--edge-2); } .feature .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--go-soft); margin-bottom: var(--s4); } .feature .ic svg { width: 21px; height: 21px; stroke: var(--go-2); } .feature p { color: var(--ink-2); margin: 0; font-size: .95rem; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); } .step { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s5); } .step .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--go-soft); color: var(--go-2); font-family: var(--display); font-weight: 800; font-size: .95rem; margin-bottom: var(--s4); } .step p { color: var(--ink-2); margin: 0; font-size: .95rem; } /* pricing */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--s4); align-items: start; max-width: 800px; margin-inline: auto; } .plan { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s6) var(--s5); position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow); } .plan.feat { border: 2px solid var(--go); box-shadow: var(--shadow-lg); } .plan .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--go); color: #fff; font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } .plan h3 { font-size: 1.3rem; margin-bottom: 2px; } .plan .ptag { color: var(--ink-3); font-size: .9rem; min-height: 3.4em; } .plan .price { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -.03em; color: var(--ink); margin: var(--s3) 0 2px; } .plan .price small { font-size: .92rem; color: var(--ink-3); font-weight: 500; letter-spacing: 0; } .plan ul { list-style: none; padding: 0; margin: var(--s5) 0 var(--s6); display: grid; gap: var(--s3); } .plan li { display: flex; gap: var(--s3); align-items: flex-start; font-size: .93rem; color: var(--ink-2); } .plan li svg { flex: none; width: 17px; height: 17px; stroke: var(--go); margin-top: 3px; } .plan .btn { margin-top: auto; } /* cards, forms, data */ .card { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s5); box-shadow: var(--shadow); } body.dark .card { box-shadow: none; background: var(--mist); } .field { margin-bottom: var(--s4); } .field label { display: block; font-family: var(--display); font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; background: var(--paper); border: 1.5px solid var(--edge-2); border-radius: var(--r-sm); color: var(--ink); font: inherit; font-size: .96rem; } body.dark .field input, body.dark .field select, body.dark .field textarea { background: var(--haze); } .field input::placeholder { color: var(--ink-3); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--go); box-shadow: 0 0 0 4px var(--go-soft); } .alert { padding: 12px 16px; border-radius: var(--r-sm); font-size: .92rem; margin-bottom: var(--s4); border: 1px solid transparent; } .alert-bad { background: #fdeaea; color: #a12d2d; border-color: #f6cccc; } .alert-good { background: var(--go-soft); color: var(--go-2); border-color: #bfeeda; } body.dark .alert-bad { background: rgba(255,107,131,.1); color: #ffb3c0; border-color: rgba(255,107,131,.3); } body.dark .alert-good { background: rgba(33,217,138,.1); color: #8ff0c4; border-color: rgba(33,217,138,.3); } .tbl { width: 100%; border-collapse: collapse; font-size: .93rem; } .tbl th { text-align: left; color: var(--ink-3); font-family: var(--display); font-weight: 600; font-size: .78rem; padding: var(--s3); border-bottom: 1px solid var(--edge); } .tbl td { padding: var(--s3); border-bottom: 1px solid var(--edge); vertical-align: top; color: var(--ink-2); } .tbl tr:hover td { background: var(--mist); } .pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: .75rem; } .pill.pending { background: #fdf1e0; color: #a3701c; } .pill.active { background: var(--go-soft); color: var(--go-2); } .pill.cancelled, .pill.refunded { background: #fdeaea; color: #a12d2d; } body.dark .pill.pending { background: rgba(255,182,72,.14); color: #ffcf8f; } body.dark .pill.active { background: rgba(33,217,138,.14); color: #8ff0c4; } body.dark .pill.cancelled, body.dark .pill.refunded { background: rgba(255,107,131,.14); color: #ffb3c0; } .locked-opt { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); background: var(--mist); border: 1px solid var(--edge); border-radius: var(--r-sm); } .locked-opt .tick { display: grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 50%; background: var(--go); color: #fff; font-size: .74rem; margin-top: 2px; } /* faq */ .faq { max-width: 760px; margin-inline: auto; } .faq details { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: 2px var(--s5); margin-bottom: var(--s3); } .faq details[open] { border-color: var(--edge-2); box-shadow: var(--shadow); } .faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; color: var(--ink); padding: var(--s4) 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--go); font-size: 1.3rem; font-weight: 400; } .faq details[open] summary::after { content: '\2212'; } .faq p { color: var(--ink-2); margin: 0 0 var(--s4); font-size: .95rem; } /* The one high-contrast slab. Light page: a navy block. Dark page: the accent, because another dark block on a dark page says nothing. Foreground is stated with the background every time — a background that follows a token while the text is hardcoded is how you end up with white on white. */ .band { background: #0a1730; border-radius: 24px; padding: clamp(36px,5vw,64px); text-align: center; color: #fff; } .band h2 { color: #fff; } .band p { color: rgba(255,255,255,.78); } .band .btn-ghost { border-color: rgba(255,255,255,.42); color: #fff; } .band .btn-ghost:hover { background: #fff; border-color: #fff; color: #082554; } /* Dark band: a deep panel with a faint blue glow, not a slab of accent colour. Heading and body read in ink; the ghost CTA stays light. */ body.dark .band { background: linear-gradient(135deg, #141d33, #0d1424); border: 1px solid var(--edge-2); color: var(--ink); } body.dark .band h2 { color: #fff; } body.dark .band p { color: var(--ink-2); } body.dark .band .btn-ghost { border-color: rgba(233,240,251,.4); color: var(--ink); } body.dark .band .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #0a0e1a; } /* footer */ .foot { border-top: 1px solid var(--edge); background: var(--mist); padding: var(--s7) 0 var(--s8); color: var(--ink-3); font-size: .9rem; margin-top: var(--s7); } .foot-in { display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; } .foot a { color: var(--ink-2); } .foot a:hover { color: var(--go); } .foot-links { display: flex; gap: var(--s5); flex-wrap: wrap; } /* auth */ /* Scoped to the sign-in
: a bare `.auth` also matched (the signed-in state flag), centering the whole document so the body floated with space on every side. main.auth targets only the login layout. */ main.auth { min-height: calc(100dvh - 68px); display: grid; place-items: center; padding: var(--s7) var(--s5); background: var(--mist); } main.auth .card { width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); } main.auth h1 { font-size: 1.7rem; } /* ============================ product surfaces ========================== */ .shell { display: grid; grid-template-columns: 216px 1fr; gap: var(--s6); padding: var(--s6) 0 var(--s8); min-height: calc(100dvh - 68px); align-items: start; } .side { position: sticky; top: 88px; display: grid; gap: 2px; } .side a { padding: 9px 14px; border-radius: var(--r-sm); color: var(--ink-2); font-family: var(--display); font-weight: 600; font-size: .92rem; } .side a:hover { background: var(--haze); color: var(--ink); } .side a.on { background: var(--go-soft); color: var(--go); } .page-title { font-size: 1.8rem; margin-bottom: var(--s1); } .mon-admin { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; padding: 10px 16px; margin-bottom: var(--s4); background: rgba(123,92,240,.1); border: 1px solid rgba(123,92,240,.28); border-radius: var(--r-sm); color: var(--ink-2); font-size: .88rem; } .mon-admin b { color: var(--violet); } .mon-admin a { margin-left: auto; color: var(--go); font-weight: 600; } .mon-k { color: var(--ink-3); font-family: var(--display); font-size: .74rem; font-weight: 600; margin-bottom: var(--s2); } /* the endpoint plate — what the product hands the customer */ .plate { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: .92rem; padding: 8px 14px; border-radius: var(--r-sm); background: var(--go-soft); border: 1px solid #bfeeda; color: var(--go-2); } body.dark .plate { background: var(--haze); border-color: var(--edge-2); color: var(--go); } .plate::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--go); box-shadow: 0 0 0 3px var(--go-soft); } /* panel */ .pnl { max-width: 1400px; display: grid; grid-template-columns: 224px 1fr; gap: var(--s6); padding: var(--s6) var(--s5) var(--s8); align-items: start; } .pnl-side { position: sticky; top: 88px; display: grid; gap: 2px; } .pnl-navlabel { color: var(--ink-3); font-family: var(--display); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 var(--s3) var(--s3); } .pnl-side a { display: flex; align-items: center; gap: var(--s3); padding: 9px 14px; border-radius: var(--r-sm); color: var(--ink-2); font-family: var(--display); font-weight: 600; font-size: .92rem; } .pnl-side a svg { width: 17px; height: 17px; flex: none; opacity: .8; } .pnl-side a:hover { background: var(--haze); color: var(--ink); } .pnl-side a.on { background: var(--go-soft); color: var(--go); } .pnl-side a.on svg { opacity: 1; } .pnl-side-foot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--edge); } .pnl-main { min-width: 0; } .pnl-org { display: flex; align-items: center; gap: var(--s3); position: relative; padding: 11px 13px; margin-bottom: var(--s4); background: var(--mist); border: 1px solid var(--edge); border-radius: var(--r-sm); } .pnl-org .ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--go-soft); } .pnl-org .ic svg { width: 16px; height: 16px; stroke: var(--go-2); } .pnl-org .t { min-width: 0; display: grid; } .pnl-org .t b { font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pnl-org .t em { font-style: normal; color: var(--ink-3); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pnl-org select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .pnl-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); margin-bottom: var(--s5); border-bottom: 1px solid var(--edge); } .pnl-topbar .crumb { color: var(--ink-2); font-family: var(--display); font-weight: 600; font-size: .92rem; } .pnl-topbar .who { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); font-size: .88rem; } .pnl-topbar .who i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--go); color: #fff; font-style: normal; font-family: var(--display); font-weight: 700; font-size: .78rem; } .pnl-staff { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; padding: 10px 16px; margin-bottom: var(--s4); background: rgba(123,92,240,.1); border: 1px solid rgba(123,92,240,.28); border-radius: var(--r-sm); color: var(--ink-2); font-size: .88rem; } .pnl-staff b { color: var(--violet); } .pnl-staff a { margin-left: auto; color: var(--go); font-weight: 600; } .pnl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); } .pnl-h1 { font-size: 1.8rem; margin: 0 0 var(--s1); } .pnl-sub { color: var(--ink-2); font-size: .93rem; margin: 0; } .pnl-sub code { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: .88rem; background: var(--go-soft); border: 1px solid #bfeeda; padding: 6px 12px; border-radius: var(--r-sm); color: var(--go-2); } body.dark .pnl-sub code { background: var(--haze); border-color: var(--edge-2); color: var(--go); } .pnl-sub code::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 3px var(--go-soft); } .pnl-badge { display: inline-flex; align-items: center; gap: var(--s2); padding: 5px 13px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: .72rem; } .pnl-badge.up { background: var(--go-soft); color: var(--go-2); } .pnl-badge.off { background: #fdeaea; color: #a12d2d; } body.dark .pnl-badge.up { background: rgba(33,217,138,.14); color: #8ff0c4; } body.dark .pnl-badge.off { background: rgba(255,107,131,.14); color: #ffb3c0; } .pnl-badge.up::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--go); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22,179,154,.45); } 70% { box-shadow: 0 0 0 8px rgba(22,179,154,0); } 100% { box-shadow: 0 0 0 0 rgba(22,179,154,0); } } @media (prefers-reduced-motion: reduce) { .pnl-badge.up::before { animation: none; } } .pnl-switch { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); } .pnl-switch a { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink-2); font-family: var(--mono); font-size: .78rem; } body.dark .pnl-switch a { background: var(--mist); } .pnl-switch a:hover { border-color: var(--edge-2); color: var(--ink); } .pnl-switch a.on { border-color: var(--go); color: var(--go); background: var(--go-soft); } .pnl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); } .pnl-pills { display: inline-flex; padding: 4px; background: var(--mist); border: 1px solid var(--edge); border-radius: 999px; gap: 2px; } .pnl-pills a { padding: 6px 14px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: .82rem; color: var(--ink-2); } .pnl-pills a:hover { color: var(--ink); } .pnl-pills a.on { background: var(--go); color: #fff; } .pnl-tools { display: flex; gap: var(--s2); } .pnl-btn { display: inline-flex; align-items: center; gap: var(--s2); padding: 8px 14px; border: 1px solid var(--edge); background: var(--paper); border-radius: 999px; color: var(--ink-2); font-family: var(--display); font-size: .86rem; font-weight: 600; } body.dark .pnl-btn { background: var(--mist); } .pnl-btn:hover { border-color: var(--go); color: var(--go); } .pnl-btn svg { width: 15px; height: 15px; } .pnl-quota { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s4); margin-bottom: var(--s4); box-shadow: var(--shadow); } body.dark .pnl-quota { background: var(--mist); box-shadow: none; } .pnl-quota.warn { border-color: var(--warn); } .pnl-quota .q-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; font-family: var(--display); font-weight: 700; font-size: .78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; } .pnl-quota .q-num { text-transform: none; letter-spacing: 0; color: var(--ink-2); font-family: var(--mono); font-weight: 400; } .pnl-quota .q-num b { color: var(--ink); } .pnl-quota .q-track { height: 7px; background: var(--haze); border-radius: 99px; overflow: hidden; margin: var(--s3) 0 var(--s2); } .pnl-quota .q-track > span { display: block; height: 100%; background: var(--go); } .pnl-quota.warn .q-track > span { background: linear-gradient(90deg, var(--warn), var(--bad)); } .pnl-quota .q-note { margin: 0; color: var(--ink-3); font-size: .82rem; } .pnl-quota .q-note a { color: var(--go); font-weight: 600; } .pnl-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); } .pnl-kpi { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: var(--s4); min-width: 0; box-shadow: var(--shadow); } body.dark .pnl-kpi { background: var(--mist); box-shadow: none; } .pnl-kpi .k { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-family: var(--display); font-weight: 600; font-size: .7rem; margin-bottom: var(--s2); } .pnl-kpi .k svg { width: 13px; height: 13px; flex: none; } .pnl-kpi .v { font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); overflow-wrap: anywhere; } .pnl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .pnl-card { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); padding: var(--s5) var(--s5) var(--s4); min-width: 0; box-shadow: var(--shadow); } body.dark .pnl-card { background: var(--mist); box-shadow: none; } .pnl-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); } .pnl-card-h h3 { font-size: 1rem; font-weight: 700; margin: 0 0 3px; } .pnl-card-h p { color: var(--ink-3); font-size: .82rem; margin: 0; } .pnl-empty { color: var(--ink-3); text-align: center; padding: var(--s8) 0; margin: 0; font-size: .9rem; } .pnl-svg { width: 100%; height: auto; display: block; overflow: visible; } .pnl-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .pnl-area { stroke: none; } .pnl-gridline { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; } .pnl-ytick, .pnl-xtick { fill: var(--ink-3); font-family: var(--mono); font-size: 14px; } .pnl-ranks { display: grid; gap: var(--s3); padding: var(--s1) 0 var(--s2); } .pnl-rank { display: flex; align-items: center; gap: var(--s3); font-size: .88rem; } .pnl-rank .k { min-width: 48px; font-family: var(--mono); font-size: .8rem; color: var(--ink-2); } .pnl-rank .t { flex: 1; height: 7px; background: var(--haze); border-radius: 99px; overflow: hidden; } .pnl-rank .t > span { display: block; height: 100%; border-radius: 99px; } .pnl-rank .v { min-width: 46px; text-align: right; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); } .pnl-tbl { width: 100%; border-collapse: collapse; font-size: .89rem; } .pnl-tbl td { padding: var(--s3) 0; border-bottom: 1px solid var(--edge); } .pnl-tbl tr:last-child td { border-bottom: 0; } .pnl-tbl td:first-child { color: var(--ink-3); } .pnl-tbl td:last-child { text-align: right; color: var(--ink); font-family: var(--mono); font-size: .84rem; } .pnl-tbl tr:hover td { background: none; } .pnl-foot { color: var(--ink-3); font-size: .84rem; margin: var(--s5) 0 0; } .pnl-threat { margin-bottom: var(--s4); } .pnl-threat.hit { border-color: var(--bad); } .pnl-inc td { vertical-align: top; padding: var(--s3) 0; } .pnl-inc td:first-child { color: var(--ink); } .pnl-inc td:last-child { white-space: nowrap; font-family: var(--mono); font-size: .8rem; color: var(--ink-2); } .pnl-inc .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--s2); } .pnl-inc .dot.blocked { background: var(--bad); } .pnl-inc .dot.surge { background: var(--go); } .pnl-inc .dot.origin { background: var(--warn); } .pnl-inc .when { color: var(--ink-3); font-family: var(--mono); font-size: .78rem; margin-left: var(--s2); } .pnl-inc .why { display: block; color: var(--ink-3); font-size: .82rem; margin: 3px 0 0 16px; white-space: normal; } .pnl-inc .mult { display: block; color: var(--ink-3); font-size: .74rem; } .pnl-inc-note { color: var(--ink-3); font-size: .8rem; margin: var(--s3) 0 0; } /* homepage: panel shot + network map */ .shot { border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; background: #060b14; box-shadow: var(--shadow-lg); } body.dark .shot { background: var(--mist); border-color: var(--edge-2); } body.dark .shot-bar { background: var(--haze); border-bottom-color: var(--edge); } body.dark .shot-kpis > div { background: var(--haze); border-color: var(--edge); } body.dark .shot-chart { background: var(--haze); border-color: var(--edge); } body.dark .shot-bar code, body.dark .shot-kpis .k, body.dark .shot-cap { color: var(--ink-3); } .shot-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid rgba(120,165,225,.14); background: #0a1120; } .shot-bar > span { width: 9px; height: 9px; border-radius: 50%; background: rgba(120,165,225,.28); } .shot-bar code { margin-left: var(--s3); font-family: var(--mono); font-size: .76rem; color: #6b7f9c; } .shot-body { padding: var(--s4); } .shot-kpis { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--s2); margin-bottom: var(--s4); } .shot-kpis > div { background: #0a1120; border: 1px solid rgba(120,165,225,.14); border-radius: var(--r-sm); padding: 11px 13px; min-width: 0; } .shot-kpis .k { display: block; color: #6b7f9c; font-family: var(--display); font-weight: 600; font-size: .62rem; margin-bottom: 5px; } .shot-kpis .v { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.025em; } .shot-chart { width: 100%; height: auto; display: block; border: 1px solid rgba(120,165,225,.14); border-radius: var(--r-sm); background: #0a1120; } .shot-cap { color: #6b7f9c; font-size: .78rem; margin: var(--s3) 0 0; text-align: center; } .net { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s5); align-items: center; } .net-map { border: 1px solid var(--edge); border-radius: var(--r); background: var(--mist); padding: var(--s3); } .net-map svg { width: 100%; height: auto; display: block; } .net-map .grat line { stroke: var(--edge-2); stroke-width: 1; } .net-map .pop { fill: var(--go); fill-opacity: .22; stroke: var(--go); stroke-width: 1.2; } .net-map .pop.big { fill-opacity: .42; } .net-map .pop-l { fill: var(--ink-2); font-family: var(--mono); font-size: 11px; } .net-h { color: var(--ink-3); font-family: var(--display); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--s3); } .net-row { display: flex; align-items: center; gap: var(--s3); padding: 6px 0; font-size: .88rem; } .net-row .c { font-family: var(--mono); font-size: .78rem; color: var(--go-2); min-width: 36px; } .net-row .n { color: var(--ink-2); min-width: 94px; } .net-row .t { flex: 1; height: 6px; background: var(--haze); border-radius: 99px; overflow: hidden; } .net-row .t > span { display: block; height: 100%; background: var(--go); border-radius: 99px; } .net-row .p { min-width: 44px; text-align: right; font-family: var(--mono); font-size: .76rem; color: var(--ink-3); } .net-more { color: var(--ink-3); font-size: .82rem; margin: var(--s3) 0 0; } /* responsive */ @media (max-width: 1200px) { .pnl-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 1000px) { .pnl { grid-template-columns: 1fr; } .pnl-side { position: static; grid-auto-flow: column; overflow-x: auto; gap: var(--s1); } .pnl-navlabel, .pnl-side-foot { display: none; } .pnl-side a { white-space: nowrap; } .pnl-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .vortex { max-width: 260px; } .features, .steps, .net { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .shell { grid-template-columns: 1fr; } .side { position: static; grid-auto-flow: column; overflow-x: auto; } .side a { white-space: nowrap; } .shot-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } .nav { display: none; } .nav.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--edge); padding: var(--s3); } .nav.open .btn { margin: var(--s2) 0 0; } .burger { display: block; } } @media (max-width: 640px) { .pnl-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* theme control: shows the state you would move to, not the one you are in */ /* Theme switch. An oblong track with a knob that carries the icon for the mode you are in — the state is the position of the knob, which is the one thing a toggle is supposed to make obvious at a glance. */ .theme-switch { position: relative; flex: none; width: 54px; height: 28px; padding: 0; margin-left: var(--s3); border: 1px solid var(--edge-2); border-radius: 999px; background: var(--haze); cursor: pointer; transition: background .2s ease, border-color .2s ease; } .theme-switch:hover { border-color: var(--go); } .theme-switch .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--warn); box-shadow: 0 1px 3px rgba(8,37,84,.22); transition: transform .22s cubic-bezier(.4,.9,.3,1.2), color .2s ease, background .2s ease; } .theme-switch svg { width: 13px; height: 13px; } .theme-switch .ic-moon { display: none; } body.dark .theme-switch { background: rgba(59,130,246,.16); border-color: var(--go); } body.dark .theme-switch .knob { transform: translateX(26px); background: var(--go); color: #0a0e1a; box-shadow: none; } body.dark .theme-switch .ic-sun { display: none; } body.dark .theme-switch .ic-moon { display: block; } @media (prefers-reduced-motion: reduce) { .theme-switch .knob { transition: none; } } /* the hero mark turns as one body as well as in layers — a whirlpool reads as motion only when the whole thing moves */ /* the wordmark is two words now; it must not wrap under the mark */ .logo span { white-space: nowrap; } @media (max-width: 420px) { .logo { font-size: 1.05rem; } .logo svg { width: 26px; height: 26px; } } /* the mock trace follows the live accent, not the palette it was drawn in */ .shot-line { stroke: var(--go); } .shot-fill { fill: var(--go); } /* attribution: present, not shouting */ .powered { display: inline-flex; align-items: center; gap: 7px; margin: var(--s3) 0 0; color: var(--ink-3); font-size: .84rem; } .powered svg { width: 15px; height: 15px; } .powered strong { color: var(--ink-2); font-weight: 600; } /* The switch sits in the header bar rather than the nav, so the collapsed mobile menu cannot hide it — it stays at the top right on every width. */ .hdr-in > .theme-switch { margin-left: var(--s3); } @media (max-width: 900px) { .hdr-in > .theme-switch { order: 3; margin-left: var(--s2); } .burger { margin-left: auto; order: 2; } } /* ---------------------------------------------------------------- renewing Two questions, asked as choices rather than a form: what to renew, and for how long. Both are radio groups styled as cards, because the price attached to each option is the thing being compared and it needs room to be read. */ .pick{display:block;border:1px solid var(--edge);border-radius:var(--r-sm); padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s} .pick:hover{border-color:var(--edge-2)} .pick input{position:absolute;opacity:0;pointer-events:none} .pick span{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .pick strong{font-weight:600;font-size:.95rem} .pick em{font-style:normal;font-size:.88rem;white-space:nowrap} .pick:has(input:checked){border-color:var(--go);background:var(--go-soft)} .pick:has(input:focus-visible){outline:2px solid var(--go);outline-offset:2px} .terms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px} .term{position:relative;cursor:pointer} .term input{position:absolute;opacity:0;pointer-events:none} .term span{display:flex;flex-direction:column;align-items:center;gap:1px; border:1px solid var(--edge);border-radius:var(--r-sm);padding:12px 4px; transition:border-color .15s,background .15s} .term b{font-family:var(--display);font-size:1.25rem;font-weight:700;line-height:1} .term em{font-style:normal;font-size:.72rem;color:var(--ink-3)} .term:hover span{border-color:var(--edge-2)} .term:has(input:checked) span{border-color:var(--go);background:var(--go-soft)} .term:has(input:checked) b{color:var(--go-2)} .term:has(input:focus-visible) span{outline:2px solid var(--go);outline-offset:2px} .total{display:flex;justify-content:space-between;align-items:baseline; border-top:1px solid var(--edge);padding-top:14px;margin-bottom:6px} .total strong{font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--ink)} /* Expiry, said in colour as well as words, so a lapsed service is visible in a table the customer is only glancing at. */ .due-soon{color:var(--warn)} .due-now{color:var(--bad);font-weight:600} @media (max-width:520px){ .terms{grid-template-columns:repeat(2,1fr)} } /* --------------------------------------------------- auth-aware nav The header ships both the signed-in and signed-out links; which one shows is decided by an `auth`/`guest` class on , set before first paint from the session (dynamic pages) or the display-only mael_auth cookie (cached public pages). display:contents keeps the surviving links as direct flex children of .nav, so the spacing is exactly as if the wrapper were not there. */ .when-auth, .when-guest { display: contents; } html.guest .when-auth { display: none; } html.auth .when-guest { display: none; } /* ------------------------------------------------------ games we protect Keyword-rich by design, but it has to read as confidence, not a tag cloud. Category cards on the section band, each with a wrapped list of real game names as quiet chips. */ .games { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .game-cat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 24px; } .game-cat h3 { font-size: 1.05rem; margin-bottom: 4px; color: var(--ink); } .game-cat > p { font-size: .88rem; margin-bottom: 14px; } .game-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .game-tags li { font-size: .84rem; color: var(--ink-2); background: var(--haze); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; white-space: nowrap; } .game-tags li:hover { border-color: var(--go); color: var(--go); } .games-note { text-align: center; margin-top: 22px; color: var(--ink-3); font-size: .92rem; } .game-tags li { padding: 0; background: none; border: 0; } .game-tags li a { display: inline-block; color: var(--ink-2); background: var(--haze); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; transition: color .15s, border-color .15s; } .game-tags li a:hover { color: var(--go); border-color: var(--go); }