/* ============================================================
ETA14 — Cyberpunk HUD design system
============================================================ */
/* Fonts are loaded via in each page's , not @import.
@import here forced four sequential round trips before a single glyph
could paint: html -> styles.css -> googleapis css -> gstatic font file.
The version starts the font CSS in parallel with this file and
preconnects to both hosts, which is why the text no longer flashes
unstyled. Keep the two in sync if the families ever change. */
:root{
/* base */
--black:#07080b;
--void:#050507;
--purple:#1a0e2e;
--panel:#0c0d14;
--panel-2:#10111c;
--line:rgba(255,255,255,.10);
/* neon accents */
--green:#7dff67;
--cyan:#00b3d0;
--red:#ff3b3b;
--blue:#0057ff;
--amber:#ff9d00;
--gold:#ff9d00;
--purple:#9c6de7;
/* text */
--ink:#e8edf2;
--ink-dim:#8b93a3;
--ink-faint:#5b6271;
/* the lead structural neon */
--accent:var(--cyan);
--mono:'JetBrains Mono',ui-monospace,monospace;
--sans:'Space Grotesk',system-ui,sans-serif;
--display:'Orbitron',var(--sans);
--maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--sans);
background:var(--black);
color:var(--ink);
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
position:relative;
}
/* ---------- global ambient layers ---------- */
.bg-grid,.bg-glow,.scanlines,.vignette{
position:fixed;inset:0;pointer-events:none;z-index:0;
}
.bg-grid{
background-image:
linear-gradient(rgba(0,179,208,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,179,208,.06) 1px,transparent 1px);
background-size:48px 48px;
background-position:center;
mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 80%);
animation:gridDrift 28s linear infinite;
}
@keyframes gridDrift{
from{background-position:0 0,0 0}
to{background-position:48px 96px,48px 96px}
}
.bg-glow{
background:
radial-gradient(60% 50% at 18% 8%,rgba(0,87,255,.18),transparent 60%),
radial-gradient(55% 45% at 85% 12%,rgba(125,255,103,.10),transparent 60%),
radial-gradient(70% 60% at 50% 110%,rgba(26,14,46,.85),transparent 70%);
}
.scanlines{
background:repeating-linear-gradient(
to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 2px,
rgba(0,0,0,.20) 3px,
rgba(0,0,0,0) 4px);
opacity:.5;
z-index:60;
animation:flicker 6s infinite steps(60);
}
@keyframes flicker{
0%,100%{opacity:.5}
50%{opacity:.42}
53%{opacity:.55}
}
.vignette{
box-shadow:inset 0 0 220px 40px rgba(0,0,0,.9);
z-index:55;
}
@media (prefers-reduced-motion:reduce){
.bg-grid,.scanlines{animation:none}
}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
section{position:relative;z-index:1}
/* ---------- HUD type tag ---------- */
.tag{
font-family:var(--mono);
font-size:11px;letter-spacing:.32em;text-transform:uppercase;
color:var(--accent);
display:inline-flex;align-items:center;gap:9px;
}
.tag::before{
content:"";width:22px;height:1px;background:currentColor;
box-shadow:0 0 8px currentColor;
}
.tag.solo::before{display:none}
/* ---------- HUD frame (clipped bezel + brackets) ---------- */
.hud{
position:relative;
background:linear-gradient(180deg,var(--panel-2),var(--panel));
border:1px solid var(--line);
clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.hud::before,.hud::after{
content:"";position:absolute;width:14px;height:14px;pointer-events:none;
border-color:var(--accent);
}
.hud::before{top:6px;left:6px;border-top:2px solid;border-left:0}
.hud::after{bottom:6px;right:6px;border-bottom:2px solid;border-right:0}
/* corner-bracket helper applied to any element */
.brackets{position:relative}
.brackets > .bk{position:absolute;width:16px;height:16px;border:2px solid var(--accent);pointer-events:none;opacity:.9}
.bk.tl{top:0;left:0;border-right:0;border-bottom:0}
.bk.tr{top:0;right:0;border-left:0;border-bottom:0}
.bk.bl{bottom:0;left:0;border-right:0;border-top:0}
.bk.br{bottom:0;right:0;border-left:0;border-top:0}
/* ---------- buttons ---------- */
.btn{
font-family:var(--mono);
font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
display:inline-flex;align-items:center;gap:10px;
padding:15px 26px;
color:var(--black);background:var(--red);
border:1px solid var(--red);
text-decoration:none;cursor:pointer;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
transition:filter .2s,box-shadow .2s,transform .15s;
box-shadow:0 0 0 rgba(0,0,0,0);
}
.btn:hover{box-shadow:0 0 26px -2px var(--red);transform:translateY(-1px)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{
background:transparent;color:var(--red);
box-shadow:inset 0 0 0 1px var(--red);
}
.btn.ghost:hover{background:color-mix(in srgb,var(--red) 12%,transparent);box-shadow:0 0 20px -4px var(--red),inset 0 0 0 1px var(--red)}
/* ---------- glitch headline ---------- */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
content:attr(data-text);position:absolute;inset:0;
clip-path:inset(0);
}
.glitch::before{color:var(--cyan);transform:translate(0);mix-blend-mode:screen;opacity:0}
.glitch::after{color:var(--red);transform:translate(0);mix-blend-mode:screen;opacity:0}
.glitch.go::before{animation:gA .5s steps(2) 1}
.glitch.go::after{animation:gB .5s steps(2) 1}
.glitch:hover::before{animation:gA .4s steps(2) infinite}
.glitch:hover::after{animation:gB .4s steps(2) infinite}
@keyframes gA{
0%{opacity:.9;transform:translate(-3px,-2px);clip-path:inset(10% 0 60% 0)}
50%{opacity:.7;transform:translate(3px,1px);clip-path:inset(70% 0 10% 0)}
100%{opacity:0;transform:translate(0)}
}
@keyframes gB{
0%{opacity:.9;transform:translate(3px,2px);clip-path:inset(60% 0 10% 0)}
50%{opacity:.7;transform:translate(-3px,-1px);clip-path:inset(10% 0 70% 0)}
100%{opacity:0;transform:translate(0)}
}
@media (prefers-reduced-motion:reduce){
.glitch::before,.glitch::after{display:none}
}
/* ---------- nav ---------- */
header.nav{
position:fixed;top:0;left:0;right:0;z-index:80;
backdrop-filter:blur(10px);
background:linear-gradient(180deg,rgba(7,8,11,.92),rgba(7,8,11,.55));
border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .logo{width:38px;height:38px;color:var(--cyan);filter:drop-shadow(0 0 7px rgba(0,179,208,.7))}
.brand .logo svg{width:100%;height:100%;display:block}
.brand .bname{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.brand .bname b{color:var(--cyan)}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:color .2s,text-shadow .2s}
.nav-links a:hover,.nav-links a.active{color:var(--cyan);text-shadow:0 0 10px rgba(0,179,208,.6)}
/* ---------- footer ---------- */
footer.ft{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(26,14,46,.4));margin-top:40px;position:relative;z-index:1}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:48px 28px 36px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.ft-in .logo{width:30px;height:30px;color:var(--cyan)}
.ft-copy{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-faint);line-height:1.7}
.ft-links{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.ft-links a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none}
.ft-links a:hover{color:var(--cyan)}
/* ---------- section heading scaffolding ---------- */
.eyebrow{margin-bottom:22px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.04;text-wrap:balance}
.lead{color:var(--ink-dim);font-size:clamp(16px,1.4vw,19px);max-width:62ch;text-wrap:pretty}
/* divider rule with mono coordinates */
.rule{display:flex;align-items:center;gap:18px;color:var(--ink-faint);font-family:var(--mono);font-size:11px;letter-spacing:.2em}
.rule::before,.rule::after{content:"";height:1px;background:var(--line);flex:1}
/* image treatment → cyberpunk duotone */
.cyimg{position:relative;overflow:hidden}
.cyimg img{display:block;width:100%;height:100%;object-fit:cover;
filter:grayscale(1) contrast(1.15) brightness(.78);
}
.cyimg::after{
content:"";position:absolute;inset:0;mix-blend-mode:color;
background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 30%,#0057ff));
opacity:.55;
}
.cyimg .scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.22) 4px);pointer-events:none;opacity:.5}
/* utility accent setters */
.a-green{--accent:var(--green)}
.a-cyan{--accent:var(--cyan)}
.a-red{--accent:var(--red)}
.a-blue{--accent:var(--blue)}
.a-amber{--accent:var(--amber)}
.a-gold{--accent:var(--gold)}
.a-purple{--accent:var(--purple)}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}