/* ShovelHead.net — full stylesheet Palettes are swapped via [data-theme] on . Default = RUST. */ :root, [data-theme="rust"] { --bg: #0c0a07; --bg-2: #14110c; --bg-3: #1d1812; --panel: #18140e; --line: #2b2317; --line-2: #3a3020; --ink: #f0e6d2; --ink-2: #c9bda3; --ink-3: #8a7f6a; --ink-4: #5b5443; --accent: #d94a2b; /* blood-orange */ --accent-2: #c97b3c; /* rust */ --accent-ink:#0c0a07; --good: #8fbf6a; --bad: #d94a2b; --grain: 0.06; --noise-tint:#3a2a18; } [data-theme="military"] { --bg: #0e110a; --bg-2: #151910; --bg-3: #1d2317; --panel: #181c12; --line: #2a3020; --line-2: #3a432d; --ink: #e6dcb8; --ink-2: #c9be93; --ink-3: #8a8264; --ink-4: #5b5742; --accent: #c9a978; /* FDE tan */ --accent-2: #6b7339; /* OD green */ --accent-ink:#0e110a; --good: #b0c97a; --bad: #d68a4a; --grain: 0.05; --noise-tint:#2a3020; } [data-theme="cold"] { --bg: #07090d; --bg-2: #0e1218; --bg-3: #161c25; --panel: #10151c; --line: #1f2832; --line-2: #2d3947; --ink: #e2ecf3; --ink-2: #b9c8d4; --ink-3: #7a8896; --ink-4: #4a5563; --accent: #7eb4d4; /* frost blue */ --accent-2: #a8c8d8; --accent-ink:#07090d; --good: #8fc8d4; --bad: #d4837e; --grain: 0.05; --noise-tint:#1a2632; } [data-theme="terminal"] { --bg: #050807; --bg-2: #07100b; --bg-3: #0a1810; --panel: #060e08; --line: #103018; --line-2: #1a4a26; --ink: #b8f5cf; --ink-2: #6cd49a; --ink-3: #3a8a5a; --ink-4: #245038; --accent: #00ff88; --accent-2: #00aa55; --accent-ink:#050807; --good: #00ff88; --bad: #ff7755; --grain: 0.08; --noise-tint:#0c2014; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Space Grotesk", "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; } body { background: radial-gradient(1200px 800px at 80% -10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%), radial-gradient(900px 700px at -10% 30%, color-mix(in oklab, var(--accent-2) 6%, transparent), transparent 60%), var(--bg); } /* film grain overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: var(--grain); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } [data-theme="terminal"] body::before { mix-blend-mode: screen; opacity: 0.12; } /* type */ .display, h1, h2, h3 { font-family: "Anton", "Oswald", "Archivo Black", sans-serif; font-weight: 400; letter-spacing: 0.005em; } .mono, code, kbd, .tag, .ip { font-family: "JetBrains Mono", ui-monospace, monospace; } .eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } /* layout */ .shell { max-width: 1320px; margin: 0 auto; padding: 0 32px; } section { padding: 96px 0; border-bottom: 1px solid var(--line); position: relative; } section:last-child { border-bottom: none; } /* generic */ a { color: var(--ink); text-decoration: none; } a:hover { color: var(--accent); } hr { border: none; border-top: 1px solid var(--line); } /* utility */ .row { display: flex; } .col { display: flex; flex-direction: column; } .between { justify-content: space-between; } .center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .muted { color: var(--ink-3); } .dim { color: var(--ink-4); } /* ─────────── NAV ─────────── */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px) saturate(1.2); background: color-mix(in oklab, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 32px; height: 60px; } .brand { display: flex; align-items: center; gap: 10px; font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.06em; } .brand .dot { color: var(--accent); } .nav-links { display: flex; gap: 28px; flex: 1; } .nav-links a { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } .nav-links a:hover { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 16px; } /* status pip */ .pip { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } .pip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 var(--good); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 70%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 2px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--line-2); background: transparent; color: var(--ink); transition: background .15s, border-color .15s, color .15s, transform .05s; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; } .btn-primary:hover { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); } .btn-ghost { background: transparent; } /* ─────────── HERO ─────────── */ .hero { position: relative; padding: 100px 0 120px; overflow: hidden; border-bottom: 1px solid var(--line); } .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, color-mix(in oklab, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--ink) 4%, transparent) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%); } .hero-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 70% 20%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%), linear-gradient(to bottom, transparent 60%, var(--bg) 100%); } .hero-inner { position: relative; display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 24px; } .hero-eyebrow .bar { width: 32px; height: 1px; background: var(--ink-4); } .hero h1 { font-size: clamp(64px, 9vw, 148px); line-height: 0.86; margin: 0 0 24px; letter-spacing: -0.01em; color: var(--ink); } .hero h1 .accent { color: var(--accent); } .hero h1 .outline { -webkit-text-stroke: 1.5px var(--ink-3); color: transparent; } .hero-sub { font-size: 18px; color: var(--ink-2); max-width: 480px; margin: 0 0 32px; text-wrap: pretty; } .hero-meta { display: flex; gap: 24px; flex-wrap: wrap; margin: 32px 0 36px; } .hero-meta .item { border-left: 2px solid var(--accent); padding-left: 12px; } .hero-meta .k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; } .hero-meta .v { font-family: "Anton", sans-serif; font-size: 22px; color: var(--ink); letter-spacing: 0.04em; } .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* connect card on the right */ .connect-card { background: var(--panel); border: 1px solid var(--line); padding: 20px; border-radius: 2px; position: relative; } .connect-card::before, .connect-card::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent); } .connect-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .connect-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .connect-card .head { display: flex; justify-content: space-between; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .connect-card .server-name { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink); line-height: 1.4; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--line-2); } .ip-row { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line-2); margin-bottom: 16px; } .ip-row .ip { flex: 1; padding: 12px 14px; font-size: 14px; color: var(--ink); background: var(--bg-2); } .ip-row .copy-btn { padding: 0 18px; border: none; border-left: 1px solid var(--line-2); background: var(--accent); color: var(--accent-ink); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: background .15s; } .ip-row .copy-btn:hover { background: var(--ink); } .ip-row .copy-btn.copied { background: var(--good); } .live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; } .live-cell { background: var(--bg-2); border: 1px solid var(--line); padding: 10px 12px; } .live-cell .k { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; } .live-cell .v { font-family: "Anton", sans-serif; font-size: 22px; line-height: 1; color: var(--ink); letter-spacing: 0.04em; } .live-cell .v.accent { color: var(--accent); } /* big shovel watermark behind hero */ .hero-shovel { position: absolute; right: -40px; top: 50%; transform: translateY(-50%) rotate(18deg); width: 520px; height: 520px; opacity: 0.08; pointer-events: none; } /* ─────────── SECTION HEADER ─────────── */ .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .section-head h2 { font-size: clamp(40px, 5vw, 72px); margin: 0; line-height: 0.9; letter-spacing: -0.005em; } .section-head .right { text-align: right; max-width: 380px; } .section-num { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 12px; } /* ─────────── STATUS / FACTS ─────────── */ .status-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } .players-panel { background: var(--panel); border: 1px solid var(--line); padding: 24px; } .players-meter { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; } .players-meter .big { font-family: "Anton", sans-serif; font-size: 84px; line-height: 0.9; color: var(--accent); letter-spacing: -0.01em; } .players-meter .of { font-family: "Anton", sans-serif; font-size: 36px; color: var(--ink-3); letter-spacing: 0.04em; } .players-meter .label { margin-left: auto; } .players-bar { height: 8px; background: var(--bg-2); border: 1px solid var(--line); position: relative; overflow: hidden; margin-bottom: 18px; } .players-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(to right, var(--accent), var(--accent-2)); transition: width .6s; } .players-bar .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); } .queue-row { display: flex; justify-content: space-between; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-2); letter-spacing: 0.06em; padding-top: 14px; border-top: 1px dashed var(--line-2); } .queue-row .lit { color: var(--accent); } .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } .fact { padding: 18px 20px; background: var(--panel); } .fact .k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .fact .v { font-family: "Anton", sans-serif; font-size: 28px; line-height: 1; margin-top: 6px; letter-spacing: 0.02em; } .fact.full { grid-column: span 2; } /* graph */ .activity { background: var(--panel); border: 1px solid var(--line); padding: 24px; margin-top: 24px; } .activity .axis { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 8px; } .activity svg { width: 100%; height: 140px; } /* ─────────── RULES ─────────── */ .rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); } .rule { padding: 28px 24px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 56px 1fr; gap: 20px; position: relative; transition: background .2s; } .rule:nth-child(odd) { border-right: 1px solid var(--line); } .rule:hover { background: var(--bg-2); } .rule .n { font-family: "Anton", sans-serif; font-size: 36px; color: var(--accent); line-height: 1; letter-spacing: 0.04em; } .rule .t { font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.03em; margin-bottom: 6px; color: var(--ink); } .rule .d { font-size: 14px; color: var(--ink-2); } /* ─────────── MODS ─────────── */ .mods-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; align-items: center; justify-content: space-between; } .mods-filters { display: flex; gap: 8px; flex-wrap: wrap; } .chip { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; transition: all .15s; } .chip:hover { border-color: var(--accent); color: var(--ink); } .chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; } .mods-total { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; } .mods-table { border: 1px solid var(--line); background: var(--panel); } .mods-row { display: grid; grid-template-columns: 56px 1.4fr 1fr 90px; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; } .mods-row:last-child { border-bottom: none; } .mods-row.head { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); } .mods-row .idx { color: var(--ink-3); font-family: "JetBrains Mono", monospace; font-size: 11px; } .mods-row .name { font-weight: 600; color: var(--ink); } .mods-row .desc { color: var(--ink-2); font-size: 13px; } .mods-row .size { font-family: "JetBrains Mono", monospace; color: var(--ink-2); text-align: right; font-size: 12px; } .mods-row .req { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--line-2); color: var(--ink-3); text-align: center; width: max-content; justify-self: end; } .mods-row .req.required { color: var(--accent); border-color: var(--accent); } .mods-install { margin-top: 20px; padding: 20px; border: 1px dashed var(--line-2); background: color-mix(in oklab, var(--accent) 4%, var(--panel)); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .mods-install .copy { color: var(--ink-2); font-size: 14px; } .mods-install strong { color: var(--ink); } /* ─────────── MAP ─────────── */ .map-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 24px; } .map-stage { position: relative; aspect-ratio: 1/1; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; } .map-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map-marker { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--bg); font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; transition: transform .15s, box-shadow .15s; } .map-marker:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 5; } .map-marker.trader { border: 2px solid var(--accent); color: var(--accent); } .map-marker.mil { border: 2px solid var(--ink); color: var(--ink); background: var(--bg-3); } .map-marker.teleport { border: 2px solid var(--good); color: var(--good); width: 14px; height: 14px; font-size: 0; } .map-marker.event { border: 2px dashed var(--accent-2); color: var(--accent-2); animation: spin 20s linear infinite; } .map-marker.bm { border: 2px solid var(--accent); color: var(--accent); background: #1a0d0a; font-weight: 700; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .map-marker.event:hover { animation: none; } .map-tooltip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: var(--bg); border: 1px solid var(--accent); padding: 10px 12px; min-width: 200px; pointer-events: none; font-size: 12px; z-index: 10; } .map-tooltip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: var(--bg); border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); } .map-tooltip .ttt { font-family: "Anton", sans-serif; font-size: 14px; letter-spacing: 0.05em; margin-bottom: 4px; } .map-tooltip .ttd { color: var(--ink-2); } .map-legend { background: var(--panel); border: 1px solid var(--line); padding: 20px; } .map-legend .lh { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .legend-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .legend-row:last-of-type { border-bottom: none; } .legend-row .dot-l { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .legend-row.off { opacity: 0.35; } .legend-row .l { display: flex; align-items: center; gap: 10px; font-size: 13px; } .legend-row .c { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); } .legend-row[data-t="trader"] .dot-l { background: var(--accent); } .legend-row[data-t="mil"] .dot-l { background: var(--ink); border: 1px solid var(--line-2); } .legend-row[data-t="teleport"] .dot-l { background: var(--good); } .legend-row[data-t="event"] .dot-l { background: transparent; border: 2px dashed var(--accent-2); } .legend-row[data-t="bm"] .dot-l { background: var(--accent); border: 1px solid var(--line-2); } .map-coords { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; } .map-coords .v { color: var(--ink); } /* ─────────── LEADERBOARD ─────────── */ .lb-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .lb-sort { display: flex; gap: 0; border: 1px solid var(--line-2); } .lb-sort .chip { border: none; border-right: 1px solid var(--line-2); } .lb-sort .chip:last-child { border-right: none; } .lb-table { border: 1px solid var(--line); background: var(--panel); } .lb-row { display: grid; grid-template-columns: 60px 1.6fr 90px 90px 90px 100px 110px; padding: 14px 20px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background .15s; } .lb-row:hover:not(.head) { background: var(--bg-2); } .lb-row.head { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); } .lb-rank { font-family: "Anton", sans-serif; font-size: 28px; line-height: 1; color: var(--ink-3); letter-spacing: 0.04em; } .lb-row:nth-child(2) .lb-rank, .lb-row:nth-child(3) .lb-rank, .lb-row:nth-child(4) .lb-rank { color: var(--accent); } .lb-name { font-weight: 600; color: var(--ink); } .lb-num { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink-2); text-align: right; } .lb-num.hl { color: var(--accent); } /* ─────────── TRADERS ─────────── */ .trader-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .trader-card { background: var(--panel); border: 1px solid var(--line); padding: 24px; display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start; } .trader-pin { width: 64px; height: 64px; border: 2px solid var(--accent); display: grid; place-items: center; font-family: "Anton", sans-serif; font-size: 22px; color: var(--accent); letter-spacing: 0.04em; position: relative; } .trader-pin::after { content: ""; position: absolute; inset: -8px; border: 1px dashed var(--line-2); } .trader-card .tname { font-family: "Anton", sans-serif; font-size: 26px; letter-spacing: 0.04em; margin-bottom: 4px; } .trader-card .tloc { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 12px; } .trader-card .tdesc { color: var(--ink-2); font-size: 14px; } .trader-card .ttags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .trader-card .ttag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); } /* ─────────── STAFF ─────────── */ .staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .staff-card { background: var(--panel); padding: 24px; } .staff-card .avatar { width: 100%; aspect-ratio: 1/1; background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg-3) 8px 16px); display: flex; align-items: center; justify-content: center; font-family: "Anton", sans-serif; font-size: 96px; color: var(--ink-3); margin-bottom: 16px; letter-spacing: -0.02em; } .staff-card .avatar.avatar-photo { background-size: cover; background-position: center 60%; filter: grayscale(0.15) contrast(1.05); } .staff-card .role { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .staff-card .sname { font-family: "Anton", sans-serif; font-size: 26px; letter-spacing: 0.04em; margin-bottom: 4px; } .staff-card .stag { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); margin-bottom: 12px; } .staff-card .sbio { font-size: 13px; color: var(--ink-2); } .staff-card .ssince { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-4); margin-top: 14px; letter-spacing: 0.1em; } /* ─────────── DISCORD CTA ─────────── */ .cta { position: relative; padding: 96px 0; background: radial-gradient(800px 400px at 30% 50%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%), var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; } .cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; } .cta h2 { font-size: clamp(48px, 6vw, 92px); line-height: 0.9; margin: 0 0 20px; letter-spacing: -0.005em; } .cta h2 .accent { color: var(--accent); } .cta-sub { font-size: 16px; color: var(--ink-2); max-width: 420px; margin-bottom: 28px; text-wrap: pretty; } .cta-box { background: var(--panel); border: 1px solid var(--accent); padding: 28px; display: flex; flex-direction: column; gap: 16px; } .cta-box .invite { font-family: "JetBrains Mono", monospace; font-size: 18px; color: var(--ink); padding: 14px 16px; border: 1px dashed var(--line-2); background: var(--bg-2); letter-spacing: 0.04em; text-align: center; } .cta-box .members { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; text-align: center; } /* ─────────── FOOTER ─────────── */ footer { padding: 48px 0 64px; } .foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .foot-row .legal { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-4); letter-spacing: 0.08em; } /* small */ .scrolling-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; overflow: hidden; background: var(--bg-2); } .marquee-track { display: flex; gap: 48px; white-space: nowrap; animation: scroll 50s linear infinite; font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.08em; color: var(--ink-3); } .marquee-track span { display: inline-flex; align-items: center; gap: 48px; } .marquee-track span::after { content: "✦"; color: var(--accent); } @keyframes scroll { to { transform: translateX(-50%); } } /* map image background */ .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.88); } /* rig marker */ .map-marker.rig { border: 2px solid var(--accent-2); color: var(--accent-2); background: var(--bg-3); } /* hidden trader block */ .hidden-trader { background: var(--panel); border: 1px solid var(--accent); padding: 32px; position: relative; margin-bottom: 32px; } .hidden-trader::before, .hidden-trader::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); } .hidden-trader::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .hidden-trader::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .ht-stamp { position: absolute; top: -10px; right: 24px; background: var(--accent); color: var(--accent-ink); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; font-weight: 700; padding: 4px 10px; } .ht-grid { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; } .ht-icon svg { width: 100%; height: auto; animation: spin 30s linear infinite; } .ht-title { font-family: "Anton", sans-serif; font-size: 48px; letter-spacing: 0.04em; line-height: 1; color: var(--ink); margin-bottom: 16px; } .ht-line { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-3); padding: 6px 0; border-bottom: 1px dashed var(--line-2); text-transform: uppercase; } .ht-line:last-of-type { border-bottom: none; } .ht-redact { background: var(--ink-3); color: var(--ink-3); user-select: none; padding: 0 6px; letter-spacing: 0.2em; } .ht-copy { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 16px 0 0; text-wrap: pretty; } /* Oil rig cards */ .rig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .rig-card { display: grid; grid-template-columns: 90px 1fr; background: var(--panel); border: 1px solid var(--line); padding: 24px; gap: 20px; position: relative; overflow: hidden; } .rig-card::before { content: ""; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; border: 1px solid var(--accent-2); transform: rotate(45deg); opacity: 0.2; } .rig-num { font-family: "Anton", sans-serif; font-size: 56px; color: var(--accent-2); letter-spacing: -0.02em; line-height: 1; border-right: 1px solid var(--line-2); padding-right: 20px; } .rig-name { font-family: "Anton", sans-serif; font-size: 26px; letter-spacing: 0.04em; margin-bottom: 4px; } .rig-loc { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 12px; text-transform: uppercase; } .rig-desc { color: var(--ink-2); font-size: 14px; margin-bottom: 12px; } .rig-tags { display: flex; gap: 6px; flex-wrap: wrap; } .rig-tags .ttag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); } @media (max-width: 820px) { .ht-grid { grid-template-columns: 1fr; gap: 20px; } .ht-title { font-size: 36px; } .rig-grid { grid-template-columns: 1fr; } .rig-card { padding: 20px; } .rig-num { font-size: 40px; padding-right: 14px; } } /* ─────────── ADMIN MAP EDITOR ─────────── */ .adm-mapedit-toolbar { display: flex; gap: 8px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-bottom: none; align-items: center; flex-wrap: wrap; } .adm-mapedit-toolbar .chip { font-size: 10px; padding: 6px 10px; } .adm-mapedit-toolbar .spacer { flex: 1; } .adm-mapedit-toolbar .readout { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; padding: 4px 8px; border: 1px solid var(--line-2); background: var(--bg-2); } .adm-mapedit-toolbar .readout strong { color: var(--accent); } .adm-map-imgdrop { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 6; } .adm-map-imgdrop button { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; padding: 6px 12px; background: color-mix(in oklab, var(--bg) 85%, transparent); border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; backdrop-filter: blur(4px); } .adm-map-imgdrop button:hover { color: var(--accent); border-color: var(--accent); } /* drop overlay when drag-hover */ .adm-map-stage.drop-target::after { content: "DROP CHERNARUS MAP IMAGE"; position: absolute; inset: 16px; border: 3px dashed var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); display: grid; place-items: center; font-family: "Anton", sans-serif; font-size: 32px; letter-spacing: 0.04em; color: var(--accent); pointer-events: none; z-index: 10; } /* pin edit modes */ .adm-map-stage.mode-add { cursor: crosshair; } .adm-map-stage.mode-move { cursor: grab; } .adm-map-stage.mode-del .adm-pin { cursor: not-allowed; } .adm-map-stage.mode-del .adm-pin:hover .adm-pin-dot { background: var(--bad); } /* pin types in admin map (extended) */ .adm-pin.type-trader_hidden .adm-pin-dot { background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--accent); } .adm-pin.type-rig .adm-pin-dot { background: var(--accent-2); } .adm-pin.type-mil .adm-pin-dot { background: var(--ink); } .adm-pin.type-teleport .adm-pin-dot { background: var(--good); width: 8px; height: 8px; } .adm-pin.type-event .adm-pin-dot { background: var(--accent-2); border-radius: 2px; } /* expiry badge */ .adm-pin-expiry { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.1em; background: var(--accent); color: var(--accent-ink); padding: 1px 5px; white-space: nowrap; font-weight: 700; } /* pin form modal */ .adm-pin-form { position: absolute; z-index: 20; min-width: 280px; background: var(--panel); border: 1px solid var(--accent); padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .adm-pin-form h4 { font-family: "Anton", sans-serif; font-size: 18px; letter-spacing: 0.04em; margin: 0 0 12px; } .adm-pin-form .row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; margin-bottom: 10px; align-items: center; } .adm-pin-form .row > label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; } .adm-pin-form .actions { display: flex; gap: 6px; margin-top: 14px; justify-content: flex-end; } /* ─────────── ADMIN OVERLAY ─────────── */ .admin-overlay { position: fixed; inset: 0; z-index: 10000; background: var(--bg); overflow-y: auto; font-family: "Space Grotesk", system-ui, sans-serif; } .admin-shell { max-width: 1480px; margin: 0 auto; padding: 0; } .admin-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 16px 32px; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2); } .admin-brand { display: flex; align-items: center; gap: 12px; } .admin-title { font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.06em; } .admin-pill { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; padding: 3px 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; } .admin-tabs { display: flex; gap: 4px; flex: 1; margin-left: 24px; flex-wrap: wrap; } .admin-tab { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; background: transparent; border: 1px solid transparent; color: var(--ink-3); cursor: pointer; transition: all .15s; } .admin-tab:hover { color: var(--ink); } .admin-tab.on { color: var(--ink); border-color: var(--line-2); background: var(--bg-2); } .admin-close { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; padding: 8px 14px; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; font-weight: 700; } .admin-close:hover { color: var(--bad); border-color: var(--bad); } .admin-body { padding: 32px; } .admin-mono { font-family: "JetBrains Mono", monospace; font-size: 12px; } /* stats */ .admin-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px; } .admin-stat { padding: 20px; background: var(--panel); } .admin-stat .k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); margin-bottom: 8px; } .admin-stat .v { font-family: "Anton", sans-serif; font-size: 32px; line-height: 1; letter-spacing: 0.02em; } /* two columns */ .admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .admin-panel { background: var(--panel); border: 1px solid var(--line); } .admin-panel > header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); } .admin-panel h3 { font-family: "Anton", sans-serif; font-size: 18px; letter-spacing: 0.04em; margin: 0; } .admin-link { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); cursor: pointer; text-transform: uppercase; } .admin-link:hover { color: var(--accent); } .admin-list { display: flex; flex-direction: column; } .admin-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 13px; } .admin-list-row:last-child { border-bottom: none; } .admin-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .admin-dot.succeeded { background: var(--good); } .admin-dot.refunded { background: var(--accent-2); } .admin-dot.failed { background: var(--bad); } .admin-dot.pending { background: var(--accent); } /* toolbar */ .admin-toolbar { display: flex; align-items: center; gap: 16px; padding: 16px 0; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .admin-search { flex: 1; background: var(--bg-2); border: 1px solid var(--line-2); padding: 10px 14px; color: var(--ink); font-family: "JetBrains Mono", monospace; font-size: 13px; } .admin-search:focus { outline: none; border-color: var(--accent); } .admin-search::placeholder { color: var(--ink-4); } .admin-toolbar-actions { display: flex; gap: 8px; } .admin-filters { display: flex; gap: 6px; } /* tables */ .admin-table { border: 1px solid var(--line); background: var(--panel); } .admin-row { display: grid; grid-template-columns: 1.2fr 1.4fr 70px 70px 100px 60px 200px; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; } .admin-row:last-child { border-bottom: none; } .admin-row.head { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); } .admin-row.subs { grid-template-columns: 90px 90px 1fr 1.4fr 100px 90px 60px 240px; } .admin-row:not(.head):hover { background: var(--bg-2); } .admin-cell-name { display: flex; align-items: center; gap: 10px; } .admin-flag { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.14em; padding: 2px 6px; border: 1px solid var(--line-2); color: var(--ink-3); } .admin-cell-name strong { color: var(--ink); } .admin-actions { display: flex; gap: 6px; justify-content: flex-end; } .admin-btn { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; padding: 6px 10px; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; font-weight: 600; transition: all .15s; } .admin-btn:hover { color: var(--ink); border-color: var(--accent); } .admin-btn.danger { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 30%, var(--line-2)); } .admin-btn.danger:hover { background: var(--bad); color: var(--accent-ink); border-color: var(--bad); } /* status pills */ .admin-status { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; padding: 3px 8px; border: 1px solid currentColor; font-weight: 700; } .admin-status.succeeded { color: var(--good); } .admin-status.refunded { color: var(--accent-2); } .admin-status.failed { color: var(--bad); } .admin-status.pending { color: var(--accent); } /* callout */ .admin-callout { margin-top: 16px; padding: 16px 20px; background: color-mix(in oklab, var(--bad) 8%, var(--panel)); border: 1px dashed var(--bad); font-size: 13px; color: var(--ink-2); } .admin-callout strong { color: var(--ink); } /* stream */ .admin-stream { background: var(--panel); border: 1px solid var(--line); padding: 0; } .admin-stream-row { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13px; } .admin-stream-row:last-child { border-bottom: none; } .admin-stream-row:hover { background: var(--bg-2); } /* appeal cards */ .admin-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .admin-card { background: var(--panel); border: 1px solid var(--line); padding: 20px; border-left: 3px solid var(--ink-4); } .admin-card.status-approved { border-left-color: var(--good); } .admin-card.status-denied { border-left-color: var(--bad); } .admin-card.status-pending { border-left-color: var(--accent); } .admin-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .admin-card-name { font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.03em; } /* audit */ .admin-audit { background: var(--panel); border: 1px solid var(--line); } .admin-audit-row { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); } .admin-audit-row:last-child { border-bottom: none; } .admin-audit-row:hover { background: var(--bg-2); } /* responsive */ @media (max-width: 1100px) { .admin-stats { grid-template-columns: repeat(3, 1fr); } .admin-cols { grid-template-columns: 1fr; } .admin-cards { grid-template-columns: 1fr; } .admin-row { grid-template-columns: 1fr 1fr 70px 80px 100px; gap: 12px; } .admin-row > :nth-child(6), .admin-row > :nth-child(7) { display: none; } .admin-row.subs { grid-template-columns: 80px 1fr 100px 80px; } .admin-row.subs > :nth-child(2), .admin-row.subs > :nth-child(4), .admin-row.subs > :nth-child(6), .admin-row.subs > :nth-child(8) { display: none; } } @media (max-width: 720px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } .admin-header { flex-wrap: wrap; padding: 12px 16px; gap: 12px; } .admin-tabs { margin-left: 0; order: 3; flex-basis: 100%; } .admin-body { padding: 18px; } .admin-toolbar { flex-direction: column; align-items: stretch; } .admin-stat .v { font-size: 24px; } } /* ─────────── ADMIN OVERLAY ─────────── */ /* bulk action bar */ .admin-bulk-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; margin-bottom: 12px; background: color-mix(in oklab, var(--accent) 8%, var(--panel)); border: 1px solid var(--accent); } .admin-bulk-info { font-size: 13px; color: var(--ink-2); } .admin-bulk-info strong { color: var(--accent); font-family: "Anton", sans-serif; font-size: 18px; letter-spacing: 0.04em; } /* checkbox column on tables */ .admin-row.with-check { grid-template-columns: 40px 1.2fr 1.4fr 70px 70px 100px 60px 200px; } .admin-row.head.with-check { grid-template-columns: 40px 1.2fr 1.4fr 70px 70px 100px 60px 200px; } .admin-check-cell input { accent-color: var(--accent); cursor: pointer; } .admin-row.with-check.sel { background: color-mix(in oklab, var(--accent) 5%, var(--panel)); } /* ── Live admin map ── */ .adm-map-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; } .adm-map-stage { position: relative; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; cursor: crosshair; aspect-ratio: 1 / 1; width: 100%; max-height: calc(100vh - 200px); max-width: calc(100vh - 200px); justify-self: start; } .adm-map-side { align-self: stretch; max-height: calc(100vh - 200px); overflow-y: auto; } .adm-map-stage .map-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .adm-trader-ref { position: absolute; transform: translate(-50%, -50%); width: 16px; height: 16px; border: 1px dashed var(--accent); background: transparent; color: var(--accent); display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-size: 9px; opacity: 0.4; pointer-events: none; } .adm-pin { position: absolute; transform: translate(-50%, -50%); cursor: pointer; display: grid; place-items: center; z-index: 2; } .adm-pin-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--ink)); box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--c, var(--ink)); transition: transform .2s; position: relative; z-index: 2; } .adm-pin-ring { position: absolute; inset: -8px; border: 1px solid var(--c, var(--ink)); border-radius: 50%; opacity: 0.4; animation: pin-pulse 2.5s infinite; } @keyframes pin-pulse { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(2.0); opacity: 0; } } .adm-pin-label { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--ink); background: color-mix(in oklab, var(--bg) 85%, transparent); padding: 2px 6px; border: 1px solid var(--line-2); white-space: nowrap; pointer-events: none; } .adm-pin.on .adm-pin-dot { transform: scale(1.4); } .adm-pin.on .adm-pin-ring { opacity: 0.8; animation-duration: 1s; } .adm-pin:hover { z-index: 5; } .adm-pin:hover .adm-pin-dot { transform: scale(1.3); } .adm-map-stamp { position: absolute; bottom: 12px; left: 14px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-4); } .adm-map-count { position: absolute; top: 12px; right: 14px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--good); padding: 4px 10px; border: 1px solid var(--good); background: color-mix(in oklab, var(--good) 8%, transparent); } /* side panel */ .adm-map-side { background: var(--panel); border: 1px solid var(--line); padding: 18px; overflow-y: auto; } .adm-map-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .adm-check { display: flex; align-items: center; gap: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-2); cursor: pointer; } .adm-check input { accent-color: var(--accent); } .adm-map-empty p { margin-bottom: 24px; } .adm-legend { padding-top: 16px; border-top: 1px dashed var(--line-2); } .adm-legend-h { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); margin-bottom: 10px; } .adm-legend-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--ink-2); } .adm-legend-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); } .adm-detail-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .adm-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 14px; } .adm-detail-grid > div { padding: 10px 12px; background: var(--panel); } .adm-detail-grid .dk { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.16em; color: var(--ink-3); margin-bottom: 4px; } .adm-detail-grid .dv { font-size: 14px; color: var(--ink); } .adm-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; } /* ── Settings ── */ .adm-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .adm-settings .admin-panel:nth-child(3) { grid-column: span 2; } .adm-form { padding: 16px; } .adm-row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; padding: 8px 0; align-items: center; } .adm-row-lbl { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; } .adm-input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); padding: 8px 12px; color: var(--ink); font-family: "JetBrains Mono", monospace; font-size: 13px; } .adm-input:focus { outline: none; border-color: var(--accent); } textarea.adm-input { font-family: inherit; font-size: 13px; resize: vertical; } .adm-input-n { width: 60px; font-family: "Anton", sans-serif; font-size: 22px; color: var(--accent); text-align: center; padding: 4px; } .adm-rules-edit { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .adm-rule-edit { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--bg-2); border: 1px solid var(--line); } .adm-tiers-edit { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .adm-tier-edit { padding: 16px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .adm-tier-edit .adm-row { grid-template-columns: 1fr; gap: 4px; } .adm-tier-edit-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 2px solid; } /* ── Notifications ── */ .adm-notif-targets { background: var(--panel); border: 1px solid var(--line); padding: 16px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .adm-notif-targets .adm-row { grid-template-columns: 1fr; } .adm-notif { background: var(--panel); border: 1px solid var(--line); margin-bottom: 16px; } .adm-notif-head { display: grid; grid-template-columns: 100px 1fr 100px 200px; gap: 16px; padding: 12px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; } .adm-notif-row { display: grid; grid-template-columns: 100px 1fr 100px 200px; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: center; } .adm-notif-row:last-child { border-bottom: none; } .adm-notif-row:hover { background: var(--bg-2); } .adm-notif-sep { padding: 16px 18px 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--accent); border-bottom: 1px dashed var(--line-2); } /* toggle switch */ .adm-switch { width: 38px; height: 22px; border-radius: 11px; background: var(--line-2); border: none; cursor: pointer; position: relative; transition: background .15s; padding: 0; } .adm-switch.on { background: var(--accent); } .adm-switch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); transition: transform .15s; } .adm-switch.on .adm-switch-knob { transform: translateX(16px); } @media (max-width: 1100px) { .adm-map-wrap { grid-template-columns: 1fr; height: auto; } .adm-map-stage { aspect-ratio: 1/1; } .adm-settings { grid-template-columns: 1fr; } .adm-settings .admin-panel:nth-child(3) { grid-column: auto; } .adm-tiers-edit { grid-template-columns: 1fr; } .adm-notif-head, .adm-notif-row { grid-template-columns: 80px 1fr 60px 100px; gap: 10px; padding: 12px; } .admin-row.with-check { grid-template-columns: 36px 1fr 1fr 60px 80px 100px; } .admin-row.head.with-check { grid-template-columns: 36px 1fr 1fr 60px 80px 100px; } } @media (max-width: 720px) { .adm-notif-head, .adm-notif-row { grid-template-columns: 1fr 60px 60px; gap: 8px; } .adm-notif-head > :first-child, .adm-notif-row > :first-child { display: none; } .adm-detail-grid { grid-template-columns: 1fr; } .admin-bulk-bar { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ─────────── ACCOUNT / AUTH / PRIORITY ─────────── */ /* nav account button */ .btn-staff { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; font-weight: 700; cursor: pointer; transition: all .15s; } .btn-staff:hover { background: var(--accent); color: var(--accent-ink); } .account-btn { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: transparent; border: 1px solid var(--line-2); cursor: pointer; color: var(--ink); transition: border-color .15s, background .15s; } .account-btn:hover { border-color: var(--accent); } .account-btn-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .ab-name { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--ink); } .ab-sub { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-4); text-transform: uppercase; } /* fake oauth + paypal overlays */ .fake-oauth { position: fixed; inset: 0; z-index: 9000; background: color-mix(in oklab, var(--bg) 80%, black); display: grid; place-items: center; opacity: 0; transition: opacity .15s; padding: 24px; } .fake-oauth.on { opacity: 1; } .fake-oauth-card { background: var(--panel); border: 1px solid var(--line-2); max-width: 420px; width: 100%; padding: 28px; position: relative; } .fake-oauth-card.paypal { border-color: #0070BA; } .fake-oauth-brand { font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.08em; color: #5865F2; margin-bottom: 18px; } .fake-oauth-brand.paypal { font-family: "Anton", sans-serif; font-size: 26px; letter-spacing: 0; display: inline-flex; align-items: baseline; margin-bottom: 18px; font-style: italic; } .fake-oauth-brand.paypal span:nth-child(1) { color: #003087; } .fake-oauth-brand.paypal span:nth-child(2) { color: #0070BA; } .fake-oauth-title { font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.04em; margin-bottom: 16px; line-height: 1.2; } .fake-oauth-perms { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); } .fake-oauth-perms li { padding-left: 18px; position: relative; } .fake-oauth-perms li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .fake-oauth-pp-row { display: grid; grid-template-columns: 100px 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: "JetBrains Mono", monospace; font-size: 13px; } .fake-oauth-pp-row .lbl { color: var(--ink-3); letter-spacing: 0.1em; font-size: 10px; } .fake-oauth-pp-row .val { color: var(--ink); } .btn.btn-paypal { background: #0070BA; color: #fff; border-color: #003087; font-family: "Anton", sans-serif; letter-spacing: 0.05em; } .btn.btn-paypal:hover { background: #003087; } .fake-oauth-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; } .fake-oauth-note { margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-4); text-align: center; } .fake-oauth-spin { width: 32px; height: 32px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; margin: 8px auto 16px; animation: spin 0.8s linear infinite; } /* account modal */ .acct-overlay { position: fixed; inset: 0; z-index: 8000; background: color-mix(in oklab, var(--bg) 80%, black); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(4px); } .acct-modal { width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); padding: 32px; position: relative; } .acct-modal::before, .acct-modal::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); } .acct-modal::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .acct-modal::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .acct-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } .acct-title { font-family: "Anton", sans-serif; font-size: 32px; letter-spacing: 0.04em; } .acct-x { background: transparent; border: 1px solid var(--line-2); width: 32px; height: 32px; color: var(--ink-2); cursor: pointer; font-size: 14px; } .acct-x:hover { border-color: var(--accent); color: var(--accent); } .acct-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .acct-section:last-of-type { border-bottom: none; } .acct-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .acct-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); } .acct-status { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; padding: 3px 8px; border: 1px solid currentColor; } .acct-status.ok { color: var(--good); } .acct-status.dim { color: var(--ink-4); } .acct-row { display: flex; align-items: center; gap: 14px; } .acct-name { font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.03em; } .acct-id { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; } .acct-mini { margin-left: auto; background: transparent; border: 1px solid var(--line-2); padding: 6px 10px; cursor: pointer; color: var(--ink-3); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .acct-mini:hover { color: var(--bad); border-color: var(--bad); } .acct-link-cta { display: flex; gap: 16px; align-items: center; padding: 14px; background: var(--bg-2); border: 1px dashed var(--line-2); } .acct-link-cta p { color: var(--ink-2); } .btn-discord { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; background: #5865F2; color: #fff; border: none; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .btn-discord:hover { background: #4752c4; } .btn-discord svg { color: #fff; } .btn-steam { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #1b2838; color: #66c0f4; border: 1px solid #2a475e; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0; } .btn-steam:hover { background: #2a475e; } .steam-glyph { font-size: 16px; } .acct-empty { padding: 8px 0 16px; } .acct-empty-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 8px; } .acct-empty-title { font-family: "Anton", sans-serif; font-size: 36px; letter-spacing: 0.02em; margin-bottom: 12px; line-height: 1; } .acct-tier-active { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--panel)); } .acct-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .acct-tier-pick { padding: 16px 12px; text-align: center; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; transition: all .15s; } .acct-tier-pick:hover { border-color: var(--accent); transform: translateY(-2px); } .acct-foot { padding-top: 16px; border-top: 1px dashed var(--line-2); margin-top: 12px; text-align: center; } /* ─────────── PRIORITY TIERS SECTION ─────────── */ .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .tier-card { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; } .tier-card.popular { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, var(--panel)), var(--panel)); } .tier-popular { position: absolute; top: -1px; right: 16px; background: var(--accent); color: var(--accent-ink); font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; padding: 5px 10px; } .tier-name { font-family: "Anton", sans-serif; font-size: 36px; letter-spacing: 0.04em; line-height: 1; } .tier-price { display: flex; align-items: baseline; gap: 6px; } .tier-amount { font-family: "Anton", sans-serif; font-size: 64px; color: var(--ink); line-height: 1; letter-spacing: -0.01em; } .tier-period { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink-3); letter-spacing: 0.08em; } .tier-skip { padding: 14px; background: var(--bg-2); border: 1px dashed var(--line-2); } .tier-skip-k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); margin-bottom: 4px; } .tier-skip-v { font-family: "Anton", sans-serif; font-size: 28px; letter-spacing: 0.04em; line-height: 1; } .tier-perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .tier-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.4; } .tier-btn { padding: 14px; border: 1px solid var(--line-2); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; cursor: pointer; background: transparent; color: var(--ink); transition: all .15s; } .tier-btn:hover { transform: translateY(-1px); } .priority-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); } .faq-item { padding: 24px; border-bottom: 1px solid var(--line); } .faq-item:nth-child(odd) { border-right: 1px solid var(--line); } .faq-q { font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 0.03em; margin-bottom: 8px; color: var(--ink); } .faq-a { font-size: 14px; color: var(--ink-2); } .queue-widget { margin-top: 48px; padding: 24px; background: var(--panel); border: 1px solid var(--accent); position: relative; } .queue-widget::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .qw-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; } .qw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .qw-k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 6px; } .qw-v { font-family: "Anton", sans-serif; font-size: 40px; line-height: 1; letter-spacing: 0.02em; color: var(--ink); } .qw-cta { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line-2); display: flex; justify-content: space-between; align-items: center; } /* responsive overrides for new sections */ @media (max-width: 820px) { .tier-grid { grid-template-columns: 1fr; } .priority-faq { grid-template-columns: 1fr; } .faq-item:nth-child(odd) { border-right: none; } .qw-grid { grid-template-columns: 1fr; gap: 16px; } .qw-cta { flex-direction: column; align-items: flex-start; gap: 12px; } .acct-tier-grid { grid-template-columns: 1fr; } .acct-link-cta { flex-direction: column; align-items: flex-start; } .acct-modal { padding: 22px; } } @media (max-width: 560px) { .acct-row { flex-wrap: wrap; } .acct-mini { margin-left: 0; } .tier-card { padding: 24px 20px; } .tier-amount { font-size: 52px; } .qw-v { font-size: 32px; } .account-btn .account-btn-text { display: none; } } /* ─────────── RESPONSIVE ─────────── */ /* tablet / small laptop */ @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr; } .status-grid, .map-wrap, .cta-inner, .trader-grid, .rules { grid-template-columns: 1fr; } .rule:nth-child(odd) { border-right: none; } .staff-grid { grid-template-columns: repeat(2, 1fr); } .lb-row { grid-template-columns: 50px 1.4fr 70px 70px 70px 80px; } .lb-row > :nth-child(7) { display: none; } .hero-shovel { width: 360px; height: 360px; right: -80px; opacity: 0.05; } section { padding: 72px 0; } } /* tablet portrait */ @media (max-width: 820px) { .shell { padding: 0 22px; } .nav-inner { gap: 16px; height: 56px; } .nav-links { display: none; } .nav .pip { display: none; } .brand { font-size: 18px; } .nav-right .btn-primary { padding: 8px 12px; font-size: 11px; } section { padding: 64px 0; } .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; } .section-head .right { text-align: left; max-width: 100%; } .hero { padding: 72px 0 88px; } .hero h1 { font-size: clamp(56px, 14vw, 96px); } .hero-sub { font-size: 16px; } .hero-meta { gap: 18px; } .hero-meta .v { font-size: 18px; } /* mods table → cards */ .mods-row { grid-template-columns: 36px 1fr; grid-template-areas: "idx name" ". desc" ". req"; row-gap: 6px; } .mods-row .idx { grid-area: idx; } .mods-row .name { grid-area: name; } .mods-row .desc { grid-area: desc; } .mods-row .req { grid-area: req; justify-self: start; } .mods-row.head { grid-template-areas: "idx name"; grid-template-columns: 36px 1fr; } .mods-row.head > :nth-child(3), .mods-row.head > :nth-child(4) { display: none; } .mods-install { grid-template-columns: 1fr; gap: 16px; } /* leaderboard → trim more columns */ .lb-row { grid-template-columns: 44px 1fr 60px 60px 70px; gap: 10px; padding: 12px 14px; } .lb-row > :nth-child(5), .lb-row > :nth-child(7) { display: none; } .lb-rank { font-size: 22px; } .lb-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; } /* trader cards */ .trader-card { grid-template-columns: 1fr; gap: 14px; } .trader-pin { width: 56px; height: 56px; font-size: 18px; } /* map: stack legend below */ .map-wrap { grid-template-columns: 1fr; } .map-marker { width: 18px; height: 18px; font-size: 9px; } .map-marker.teleport { width: 12px; height: 12px; } /* CTA */ .cta { padding: 72px 0; } .cta-inner { gap: 32px; } .cta h2 { font-size: clamp(40px, 9vw, 64px); } /* connect card */ .connect-card { padding: 16px; } .live-cell .v { font-size: 18px; } /* footer */ .foot-row { flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; } } /* phones */ @media (max-width: 560px) { .shell { padding: 0 16px; } section { padding: 52px 0; } .hero { padding: 56px 0 72px; } .hero h1 { font-size: clamp(44px, 13vw, 72px); letter-spacing: -0.02em; } .hero-eyebrow .bar { width: 18px; } .hero-eyebrow { font-size: 10px; } .hero-meta { gap: 14px; } .hero-meta .v { font-size: 16px; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { justify-content: center; } .hero-shovel { display: none; } .section-head h2 { font-size: clamp(34px, 9vw, 52px); } /* status: stack big numbers smaller */ .players-meter { flex-wrap: wrap; } .players-meter .big { font-size: 60px; } .players-meter .of { font-size: 28px; } .players-meter .label { margin-left: 0; flex-basis: 100%; margin-top: 6px; } .queue-row { flex-direction: column; align-items: flex-start; gap: 6px; } .facts { grid-template-columns: 1fr; } .fact.full { grid-column: span 1; } .activity svg { height: 110px; } /* rules */ .rule { padding: 22px 16px; grid-template-columns: 44px 1fr; gap: 14px; } .rule .n { font-size: 28px; } .rule .t { font-size: 18px; } /* mods chips wrap nicer */ .mods-toolbar { gap: 12px; align-items: flex-start; flex-direction: column; } .chip { font-size: 10px; padding: 6px 9px; } /* leaderboard ultra-compact */ .lb-row { grid-template-columns: 36px 1fr 50px 60px; gap: 8px; padding: 10px 12px; font-size: 13px; } .lb-row > :nth-child(4), .lb-row > :nth-child(5), .lb-row > :nth-child(7) { display: none; } .lb-rank { font-size: 18px; } .lb-num { font-size: 12px; } /* staff single column */ .staff-grid { grid-template-columns: 1fr; } .staff-card .avatar { aspect-ratio: 16/9; font-size: 64px; } /* CTA */ .cta-inner { gap: 24px; } .cta h2 { font-size: clamp(34px, 10vw, 52px); } .cta-box .invite { font-size: 14px; padding: 10px 12px; } /* connect card meta cells */ .live-cell { padding: 8px 10px; } .live-cell .v { font-size: 16px; } .live-cell .k { font-size: 8px; } /* tighten marquee */ .marquee-track { font-size: 18px; } /* footer */ .foot-row .row { flex-wrap: wrap; } } /* very narrow */ @media (max-width: 380px) { .hero h1 { font-size: 40px; } .nav-right .btn-primary { display: none; } .ip-row .ip { font-size: 12px; padding: 10px 12px; } .ip-row .copy-btn { padding: 0 12px; font-size: 10px; } }