/* KILLSCRIPT — Specialist Selection Portal */ :root { --bg-0: #04070b; --bg-1: #07101a; --bg-2: #0c1824; --line: rgba(120, 200, 255, 0.12); --line-strong: rgba(120, 200, 255, 0.28); --fg: #cfe6ff; --fg-dim: #6f8aa6; --fg-mute: #3d556e; --accent: #6cc6ff; --accent-2: #9ee7ff; --accent-glow: oklch(0.78 0.16 230); --warn: #ffb247; --danger: #ff5b6e; --ok: #5be38d; --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display: "Space Grotesk", "Inter", system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg); font-family: var(--mono); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Reserve scrollbar gutter on the root so it ALWAYS occupies width, even when the page doesn't overflow OR when a modal locks scroll via `overflow: hidden` on . Without this the layout (and the fixed header) shifts horizontally by ~15px every time a modal opens/closes — visible as a jitter on the logo and nav. Only applied >=800px: below that the modal goes full-bleed and the reserved gutter would show as an empty stripe on the right edge of the modal. Mobile browsers also typically use overlay scrollbars that don't take layout width, so there's nothing to compensate. */ @media (min-width: 800px) { html { scrollbar-gutter: stable; } } body { background: radial-gradient(1200px 600px at 80% -10%, rgba(60,140,210,0.18), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(40,90,160,0.12), transparent 70%), var(--bg-0); min-height: 100vh; padding-top: 64px; } /* Subtle scanline overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, rgba(108, 198, 255, 0.025) 0px, rgba(108, 198, 255, 0.025) 1px, transparent 1px, transparent 3px ); z-index: 9990; mix-blend-mode: screen; } /* Vignette */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%); z-index: 9991; } ::selection { background: var(--accent); color: #000; } a { color: var(--accent); text-decoration: none; } button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* ---------- Layout primitives ---------- */ .shell { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 40px; } .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .spacer { flex: 1; } /* ---------- Top nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9992; background: rgba(4, 7, 11, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; height: 64px; padding: 0 40px; gap: 32px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.18em; color: var(--fg); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .nav-logo:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; } .nav-logo-img { /* Default (desktop, with portal-tag + nav-links visible): pinned 200. */ width: 200px; max-width: 100%; height: auto; display: block; filter: drop-shadow(0 0 10px rgba(108,198,255,0.18)); } /* The compact "K" mark variant is roughly square — size by height so it sits cleanly inside the 64px-tall nav instead of stretching wide. */ .nav-logo-img--mark { width: auto; /* Matches the APPLY CTA's outer box height (~28px = 11px label + 16px vertical padding + ~1px line-height fudge). */ height: 24px; max-width: none; } .nav-portal-tag { /* Stay at 11px regardless of viewport. Let the text overflow its box visually if it can't fit \u2014 it can encroach on the APPLY area but will never overlap the logo (which sits on the left). */ font-size: 11px; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: visible; } /* Below the desktop breakpoint, portal-tag + nav-links are hidden. Let the logo flex-grow into that freed space, capped at the same nominal 200px it has on desktop. The spacer is removed and the CTA pulled to the right edge via margin-left: auto, so any slack after the logo caps sits as auto-margin in front of the CTA. */ @media (max-width: 1000px) { .nav .spacer { display: none; } .nav-logo { flex: 1 1 0; min-width: 0; max-width: 200px; } /* When the compact mark is used, don't flex-grow — let the logo sit at its intrinsic width so the portal-tag has room to fit. */ .nav-logo:has(.nav-logo-img--mark) { flex: 0 0 auto; max-width: none; } .nav-logo-img { width: 100%; max-width: 200px; } .nav-logo-img--mark { width: auto; height: 22px; max-width: none; } /* Tighten the nav gap so the tag + mark + cta fit on one row. */ .nav-inner { gap: 14px; padding: 0 20px; } .nav-cta { margin-left: auto; } } .nav-logo { flex-shrink: 1; min-width: 0; } .nav-logo .glyph { width: 22px; height: 22px; border: 1.5px solid var(--accent); position: relative; transform: rotate(45deg); } .nav-logo .glyph::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--accent); opacity: 0.5; } .nav-links { display: flex; gap: 28px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); } .nav-links a { position: relative; color: var(--fg-dim); padding: 6px 2px; transition: color 0.18s; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: right 0.22s ease; } .nav-links a:hover { color: var(--accent); } .nav-links a:hover::after { right: 0; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; color: #04070b; background: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background 0.15s ease, box-shadow 0.15s ease; } .nav-cta:hover { background: var(--accent-2); box-shadow: 0 0 24px rgba(108,198,255,0.55); } /* Secondary (ghost) variant — applied while the hero's own Apply CTA is still in the viewport, so the two don't compete. Same diagonal-cut polygon shape as the primary nav-cta but rendered as an accent-color outline on transparent, like the hero's Join Discord button. Falls back to the primary filled style as soon as the user scrolls past the hero (handled by the IntersectionObserver in