/* ============================================================================ SentinelGoat — editorial-dark design system Direction calibrated from jribh.com: near-black canvas, ONE warm coral accent, a serif+condensed+geometric type system doing the heavy lifting, and restrained, intentional motion (custom cursor, magnetic CTAs, mask reveals). No glitch / scanlines / neon-grid gimmicks. PERF: motion is transform/opacity only; paused on tab-hide + reduced-motion. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Antonio:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&family=Inter:wght@500;700&family=JetBrains+Mono:wght@500&display=swap'); :root { /* Canvas — near-pure black, single warm accent */ --bg: #060608; --bg-2: #0a0a0d; --surface: #101013; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.18); --text: #f5f5f6; --dim: rgba(245, 245, 246, 0.55); --faint: rgba(245, 245, 246, 0.42); --accent: #fa5242; /* coral-red (jribh) */ --accent-soft: #fb8e84; --accent-tint: rgba(250, 82, 66, 0.12); --mint: #5fd2a3; /* used sparingly for "cleared" state only */ /* Type */ --serif: 'Fraunces', Georgia, serif; /* hero statements */ --cond: 'Antonio', 'Oswald', sans-serif; /* condensed UPPERCASE labels */ --sans: 'Outfit', system-ui, sans-serif; /* UI / body */ --mono: 'Roboto Mono', ui-monospace, monospace; /* terminal / flags */ --brand-sans: 'Inter', system-ui, sans-serif; /* KageX wordmark — matches FreakLab */ --brand-mono: 'JetBrains Mono', ui-monospace, monospace; /* product subtitle — matches FreakLab */ --maxw: 1140px; --rail: 72px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* legacy aliases still referenced by un-migrated inline styles in level.html */ --accent-color: var(--accent); --text-color: var(--text); /* neural-stage (nexus.js) colors as rgb triples — theme-aware */ --nexus-ink: 245, 245, 246; --nexus-accent: 250, 82, 66; } /* ---------------------------------------------------------------------------- RED theme — literal inversion: red canvas, black ink, light accent. Toggled via (persisted in localStorage). -------------------------------------------------------------------------- */ :root[data-theme="red"] { --bg: #a81d1d; /* red canvas */ --bg-2: #981a1a; --surface: #8d1717; /* darker red panels */ --line: rgba(0, 0, 0, 0.22); --line-strong: rgba(0, 0, 0, 0.40); --text: #170707; /* near-black ink */ --dim: rgba(23, 7, 7, 0.66); --faint: rgba(23, 7, 7, 0.46); --accent: #fff3ee; /* the "pop" — warm white reads on red */ --accent-soft: #ffd8cf; --accent-tint: rgba(255, 255, 255, 0.16); /* --mint kept: green still signals "cleared" against red */ --nexus-ink: 23, 7, 7; /* black constellation on red */ --nexus-accent: 255, 243, 238;/* white cursor pulses */ } :root[data-theme="red"] .cyber-bg { background: radial-gradient(1100px 620px at 50% -8%, rgba(0,0,0,0.18), transparent 60%), radial-gradient(900px 700px at 100% 120%, rgba(0,0,0,0.12), transparent 55%), var(--bg); } :root[data-theme="red"] #header { background: rgba(168,29,29,0.82); } /* smooth cross-fade only while toggling (added/removed by JS) */ html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), fill .45s var(--ease) !important; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: auto; /* full-bleed native scroll (no inner card scroll) */ } ::selection { background: var(--accent); color: #0a0205; } /* Subtle static grain + vignette — richness without a busy grid */ .cyber-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 620px at 50% -8%, rgba(250,82,66,0.05), transparent 60%), radial-gradient(900px 700px at 100% 120%, rgba(255,255,255,0.025), transparent 55%), var(--bg); } .cyber-bg::after { content: ""; position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------------------------- Side rails — thin, editorial vertical labels -------------------------------------------------------------------------- */ .logo-sidebar, .fsociety-sidebar { position: fixed; top: 0; height: 100%; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .logo-sidebar { left: 0; width: var(--rail); border-right: 1px solid var(--line); } .fsociety-sidebar { right: 0; width: var(--rail); border-left: 1px solid var(--line); } .sentinel-logo { font-family: var(--mono); font-size: 7px; line-height: 7px; color: var(--accent); white-space: pre; text-align: center; opacity: 0.95; } .logo-text { font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 3px; text-align: center; color: var(--text); } .fsociety-text { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--cond); font-weight: 500; letter-spacing: 0.4em; font-size: 0.8rem; color: var(--dim); text-transform: uppercase; user-select: none; } /* ---------------------------------------------------------------------------- Container + header + content -------------------------------------------------------------------------- */ /* Full-bleed: no boxed card. Content sits between the rails, left-anchored. */ #container { position: relative; z-index: 10; min-height: 100vh; margin: 0 calc(var(--rail) + 56px); display: flex; flex-direction: column; } #header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; background: rgba(6,6,8,0.82); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } #content { flex: 1 1 auto; padding: 44px 0 72px; position: relative; } /* header right cluster (nav + theme toggle) */ .header-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; flex: 0 0 auto; padding: 0; transition: border-color .25s var(--ease), color .25s var(--ease), transform .45s var(--ease); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(-28deg); } .theme-toggle svg { width: 15px; height: 15px; display: block; } /* Brand lockup — KageX mark + product wordmark. Typography mirrors the FreakLab portal exactly (Inter 1.1rem/700/-0.02em name, JetBrains Mono 0.72rem/500/0.18em subtitle, 1.75rem mark) for cross-product consistency. */ .brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: 0 0 auto; min-width: 0; } .brand-mark { width: 1.75rem; height: 1.75rem; display: block; flex: 0 0 auto; transition: transform .45s var(--ease); } .brand:hover .brand-mark { transform: rotate(-7deg) scale(1.07); } .brand-copy { display: flex; flex-direction: column; gap: 0.1rem; } .brand-name { font-family: var(--brand-sans); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); } .brand-sub { font-family: var(--brand-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); transition: color .25s; } .brand:hover .brand-sub { color: var(--accent); } .terminal-nav { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; } .nav-prompt { color: var(--dim); } .nav-user { color: var(--text); font-weight: 600; font-family: var(--sans); letter-spacing: .3px; } .nav-separator { color: var(--faint); } .nav-link { color: var(--dim); text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-family: var(--sans); font-weight: 600; position: relative; transition: color .25s; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .nav-link:hover { color: var(--text); } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } .nav-link.logout:hover { color: var(--accent); } /* ---------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ .display { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--text); } .display-lg { font-size: clamp(2rem, 4vw, 3rem); } .section-label { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; color: var(--accent); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: .95; } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } .lead { font-family: var(--sans); font-weight: 500; font-size: clamp(1rem, 1vw + 0.7rem, 1.2rem); line-height: 1.5; color: var(--dim); max-width: 56ch; } h1, h2, h3 { margin: 0 0 .4em; } .mono { font-family: var(--mono); } .muted { color: var(--dim); } .accent { color: var(--accent); } /* ---------------------------------------------------------------------------- Panels — hairline, no glow, no cut corners -------------------------------------------------------------------------- */ .panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 28px 30px; } .panel--accent { border-color: rgba(250,82,66,0.28); } .corner-tag { position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--faint); } /* ---------------------------------------------------------------------------- Buttons — minimal, magnetic. Primary = coral fill on hover. -------------------------------------------------------------------------- */ .btn, .button, button.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 14px 26px; color: var(--text); background: transparent; border: 1px solid var(--line-strong); border-radius: 4px; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); will-change: transform; } .btn:hover, .button:hover { background: var(--text); color: var(--bg); border-color: var(--text); } .btn--primary { border-color: var(--accent); color: var(--accent); } .btn--primary:hover { background: var(--accent); color: #0a0205; border-color: var(--accent); } .btn--ghost { border-color: var(--line); color: var(--dim); } .btn--ghost:hover { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--line-strong); } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* link with underline-reveal */ .link { color: var(--text); text-decoration: none; position: relative; } .link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .link:hover::after { transform: scaleX(1); transform-origin: left; } .link.accent { color: var(--accent); } /* ---------------------------------------------------------------------------- Inputs — clean underline field -------------------------------------------------------------------------- */ input[type=text], input[type=password], input[type=email], textarea, select { font-family: var(--sans); font-size: 16px; color: var(--text); width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 12px 2px; outline: none; transition: border-color .3s var(--ease); } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, textarea:focus, select:focus { border-bottom-color: var(--accent); } .field { display: flex; align-items: center; gap: 12px; } .field .sigil { font-family: var(--mono); color: var(--dim); font-size: 14px; } /* ---------------------------------------------------------------------------- Stats / progress / pills -------------------------------------------------------------------------- */ .stat .k { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .stat .v { font-family: var(--serif); font-weight: 600; font-size: 2.1rem; line-height: 1; letter-spacing: -0.03em; color: var(--text); display: block; margin-top: 4px; } .stat .v.accent { color: var(--accent); } .bar { position: relative; height: 2px; background: var(--line); overflow: hidden; } .bar > i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent); transition: transform 1s var(--ease); } .pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); } .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .pill.cleared { color: var(--mint); } .pill.active { color: var(--accent); } .pill.active .dot { animation: blip 1.6s ease-in-out infinite; } .pill.locked { color: var(--faint); } @keyframes blip { 50% { opacity: .3; } } /* ---------------------------------------------------------------------------- Custom cursor (premium pointer) — desktop fine-pointer only -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { body { cursor: none; } a, button, input, textarea, select, [onclick], label { cursor: none; } input, textarea { cursor: text; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: difference; } .cursor-dot { width: 6px; height: 6px; background: #fff; } .cursor-ring { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.5); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s, border-color .25s, background .25s; } .cursor-ring.is-hover { width: 56px; height: 56px; border-color: #fff; background: rgba(255,255,255,0.06); } .cursor-ring.is-down { width: 22px; height: 22px; } } /* ---------------------------------------------------------------------------- Motion — reveals + entrance, restrained -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(22px); } [data-reveal].in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-line { display: inline-block; overflow: hidden; vertical-align: bottom; } .reveal-line > span { display: inline-block; transform: translateY(110%); } .reveal-line.in > span { transform: none; transition: transform .9s var(--ease); } .row { display: flex; align-items: center; gap: 18px; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } /* ---------------------------------------------------------------------------- Auth layout — form left, generative neural-constellation stage right -------------------------------------------------------------------------- */ .access-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; min-height: calc(100vh - 170px); } .access { width: 100%; max-width: 560px; } .nexus-stage { position: relative; align-self: stretch; height: min(74vh, 600px); min-height: 360px; } .nexus-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .nexus-stage::before, .nexus-stage::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; opacity: .6; } .nexus-stage::before { top: 0; right: 0; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); } .nexus-stage::after { bottom: 0; left: 0; border-bottom: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); } .nexus-cap { position: absolute; z-index: 2; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); pointer-events: none; } .nexus-cap.br { bottom: 6px; right: 10px; } @media (max-width: 940px) { .access-wrap { grid-template-columns: 1fr; gap: 0; min-height: calc(100vh - 150px); } .nexus-stage { display: none; } } /* fps meter flourish */ .fps { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 1px; } .fps b { color: var(--dim); font-weight: 500; } /* scrollbars */ #content::-webkit-scrollbar { width: 9px; } #content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } #content::-webkit-scrollbar-track { background: transparent; } html.anim-paused *, html.anim-paused *::before, html.anim-paused *::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal-line > span, [data-reveal] { transform: none !important; opacity: 1 !important; } } @media (max-width: 820px) { .logo-sidebar, .fsociety-sidebar { display: none; } #container { margin: 0 16px; min-height: auto; } #content { padding: 40px 0 64px; } body { cursor: auto; } #header { gap: 12px; } .terminal-nav .fps, .terminal-nav .nav-prompt { display: none; } } @media (max-width: 520px) { .terminal-nav .nav-user, .terminal-nav .nav-separator { display: none; } }