/* ═══════════════════════════════════════════════════════════════════════
CYBER.CSS — Shared Cyberpunk / Glitch design system (vanilla, no build)
The single source of truth for tokens, textures, and effects.
Include this BEFORE a page's own stylesheet:
Hebrew note: Orbitron / Share Tech Mono / JetBrains Mono are Latin-only.
The font stacks put a cyber Latin face first and 'Heebo' behind it, so the
browser renders Latin glyphs (numbers, labels, >/$ prompts) in the cyber
font and Hebrew glyphs in Heebo via per-glyph fallback.
═══════════════════════════════════════════════════════════════════════ */
@import url('/shared/fonts.css'); /* self-hosted — no third-party font CDN */
:root {
/* ── Palette (dark mode is mandatory) ── */
--cyber-bg: #0a0a0f;
--cyber-fg: #e0e0e0;
--cyber-card: #12121a;
--cyber-muted: #1c1c2e;
--cyber-muted-fg: #6b7280;
--cyber-accent: #00ff88; /* primary neon — electric green */
--cyber-accent-2: #ff00ff; /* secondary neon — hot magenta */
--cyber-accent-3: #00d4ff; /* tertiary neon — cyan */
--cyber-border: #2a2a3a;
--cyber-ring: #00ff88;
--cyber-danger: #ff3366;
/* ── Neon glows ── */
--neon-sm: 0 0 3px #00ff88, 0 0 6px rgba(0,255,136,.19);
--neon: 0 0 5px #00ff88, 0 0 10px rgba(0,255,136,.25);
--neon-lg: 0 0 10px #00ff88, 0 0 20px rgba(0,255,136,.38), 0 0 40px rgba(0,255,136,.19);
--neon-magenta: 0 0 5px #ff00ff, 0 0 20px rgba(255,0,255,.38);
--neon-cyan: 0 0 5px #00d4ff, 0 0 20px rgba(0,212,255,.38);
/* ── Type ── */
--font-head: "Orbitron", "Heebo", sans-serif;
--font-mono: "Share Tech Mono", "JetBrains Mono", "Heebo", monospace;
--font-body: "JetBrains Mono", "Share Tech Mono", "Heebo", monospace;
/* ── Motion ── */
--cyber-ease: cubic-bezier(.4, 0, .2, 1);
--cyber-dur: .15s;
--cyber-dur-fast: .1s;
--cyber-snap: steps(2, end); /* digital, mechanical snap for micro-interactions */
/* ── Alpha tiers (literal rgba — OBS CEF ~Chromium 103 has no color-mix) ── */
--cyber-accent-dim: rgba(0,255,136,.08); /* subtle fill */
--cyber-accent-soft: rgba(0,255,136,.16); /* hover fill */
--cyber-accent-line: rgba(0,255,136,.40); /* tinted border */
--cyber-accent-glow: rgba(0,255,136,.25); /* shadow component */
--cyber-accent2-dim: rgba(255,0,255,.12);
--cyber-accent2-line: rgba(255,0,255,.45);
--cyber-accent3-dim: rgba(0,212,255,.10);
--cyber-accent3-line: rgba(0,212,255,.45);
--cyber-danger-dim: rgba(255,51,102,.12);
--cyber-danger-line: rgba(255,51,102,.45);
/* ── Semantic states — decoupled from --cyber-accent so the dashboard's
runtime accent picker never recolors success/warn meaning ── */
--cyber-ok: #00ff88;
--cyber-ok-dim: rgba(0,255,136,.12);
--cyber-ok-line: rgba(0,255,136,.45);
--cyber-warn: #febc2e;
--cyber-warn-dim: rgba(254,188,46,.12);
--cyber-warn-line: rgba(254,188,46,.45);
--cyber-text-dim: #9aa0b8; /* between fg and muted-fg */
--cyber-dim: #667; /* faintest legible text */
/* ── Surfaces ── */
--cyber-input: #0e0e16; /* input / terminal well */
--cyber-surface-2: #242438; /* raised hover surface */
/* ── Radii — small controls ONLY (chips, dots, scrollbars); cards use chamfers ── */
--cyber-radius: 4px;
--cyber-radius-sm: 3px;
--cyber-radius-xs: 2px;
--cyber-radius-pill: 999px;
/* ── Shared gradients ── */
--cyber-grad-danger: linear-gradient(90deg, var(--cyber-danger), var(--cyber-accent-2));
}
/* ═══ Chamfered corners (the signature "cut" shape) ═══════════════════════
Cut size is the --cut custom property — override per element for odd sizes:
*/
.cyber-chamfer, .cyber-chamfer-sm {
clip-path: polygon(
0 var(--cut), var(--cut) 0,
calc(100% - var(--cut)) 0, 100% var(--cut),
100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
var(--cut) 100%, 0 calc(100% - var(--cut))
);
}
.cyber-chamfer { --cut: 12px; }
.cyber-chamfer-sm { --cut: 6px; }
/* ═══ Full-page texture overlay (scanlines + CRT vignette + scan beam) ═════
Drop as the LAST child
of . pointer-events:none keeps it purely decorative. ═══════════════ */
.cyber-overlay { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.cyber-overlay::before {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(
0deg, transparent, transparent 2px,
rgba(0,0,0,.30) 2px, rgba(0,0,0,.30) 4px
);
mix-blend-mode: multiply; opacity: .55;
}
.cyber-overlay::after {
content: ''; position: absolute; left: 0; right: 0; height: 35vh;
background: linear-gradient(180deg, transparent, rgba(0,255,136,.05) 50%, transparent);
animation: cyber-scan 7s linear infinite;
}
/* ═══ Circuit / grid backdrop — apply to a section or body ═════════════════ */
.cyber-grid {
background-image:
linear-gradient(rgba(0,255,136,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,136,.035) 1px, transparent 1px);
background-size: 48px 48px;
}
.cyber-mesh {
background-image:
radial-gradient(60% 80% at 100% 0%, rgba(255,0,255,.10), transparent 60%),
radial-gradient(70% 90% at 0% 100%, rgba(0,212,255,.10), transparent 55%),
radial-gradient(50% 60% at 50% 120%, rgba(0,255,136,.08), transparent 60%);
}
/* Shared visibility helper — pages toggle .hidden via JS; keep it global so every
page behaves the same (some also define it locally, which is harmless). */
.hidden { display: none !important; }
/* ═══ Brand mark ══════════════════════════════════════════════════════════
The EDX wordmark, delivered as ONE token that every brand surface reads.
Why a background-image and not : the mark has to flip white ⇄ gradient across three
grounds (cyberpunk dark, neo light clay, neo dark clay), which would mean two tags and
a display toggle on all 27 surfaces. A token means each theme redefines one line — and it is
the only mechanism that reaches feed.html and shop.html, which are frozen (another session's
uncommitted work) and cannot take markup edits. Every page loads this file, so one rule here
covers the whole site.
The brand TEXT stays in the markup and is only hidden visually, so the link keeps its
accessible name for screen readers without needing alt text anywhere.
?v= is the cache handle: /brand is served with a long max-age (see server.js), while this
stylesheet is no-store — so bumping the number here propagates a new logo immediately.
Swapping in an SVG export later means changing these four url() lines and nothing else. */
:root { --brand-mark: url('/brand/mark-white.png?v=1'); }
.ax-logo, .pg-brand, .lb-brand, .lg-brand, .auth-logo,
.nav-logo, .foot-brand, .topbar-brand, .admin-logo {
display: inline-block;
aspect-ratio: 580 / 157; /* the mark's real ink box — see public/brand/ */
background: var(--brand-mark) center / contain no-repeat;
/* Hide the wordmark text without hiding it from assistive tech. */
text-indent: -9999px; white-space: nowrap; overflow: hidden;
text-decoration: none; flex: 0 0 auto;
/* Backgrounds are dropped when printing unless this is asked for, and Brief is a print page. */
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Per-surface sizing only — height drives width via the aspect ratio. */
.ax-logo { height: 22px; }
.nav-logo { height: 26px; }
.foot-brand { height: 22px; }
.auth-logo { height: 26px; margin-bottom: 16px; }
.pg-brand { height: 18px; }
.lb-brand { height: 16px; margin-bottom: 14px; }
.lg-brand { height: 20px; }
.topbar-brand { height: 24px; }
.admin-logo { height: 22px; }
/* ═══ Shared compact page footer (brand + legal links) ════════════════════ */
.pg-footer {
display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
margin-top: 48px; padding: 20px 16px;
border-top: 1px solid var(--cyber-border, rgba(255,255,255,.08));
font-size: .8rem; color: var(--cyber-muted-fg, #889);
}
/* .pg-brand is the brand mark now — sized in the brand block above, not styled as text here. */
.pg-footer a { color: var(--cyber-muted-fg, #889); text-decoration: none; }
.pg-footer a:hover { color: var(--cyber-accent, #0f8); }
.pg-footer .pg-lang {
background: transparent; color: var(--cyber-muted-fg, #889);
border: 1px solid var(--cyber-border, rgba(255,255,255,.15));
padding: 3px 8px; border-radius: 6px; font: inherit; font-size: .75rem; cursor: pointer;
}
.pg-footer .pg-lang:hover { border-color: var(--cyber-accent, #0f8); color: var(--cyber-accent, #0f8); }
.pg-footer .pg-lang option { background: #0c0c14; color: #e8e8f0; }
/* ═══ "Website by EDX" footer credit ══════════════════════════════════════
Composed from live text + the mark rather than shipped as one baked image: the supplied
lockup is English-only (this site runs in 10 languages) and exists only in black, so it
would vanish on the dark and dark-clay footers. This way it translates and re-themes free.
Deliberately not a link — the web-development domain is unconfirmed, and a dead link would
sit on every page. */
.pg-credit { display: inline-flex; align-items: center; gap: 7px; opacity: .78; font-size: .75rem; }
.pg-credit-mark {
display: inline-block; height: 13px; aspect-ratio: 580 / 157;
background: var(--brand-mark) center / contain no-repeat;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* .pg-credit already dims the whole line; dimming the role again would MULTIPLY (.78 × .72 = .56)
and drop it under AA on most grounds. Scope this to the role's own text colour instead. */
.pg-credit-role { opacity: 1; }
/* ═══ Print ═══════════════════════════════════════════════════════════════
The brand block asks for print-color-adjust:exact so the mark survives onto paper — but
browsers still drop the page's dark BACKGROUND (background graphics are off by default, and
brief.css forces `body { background:#fff }` outright). A white mark on a white sheet is an
invisible logo, so print always uses the black one — which is why a black variant ships.
This overrides the resolved background-image, NOT the token: neo.css redefines --brand-mark
from selectors as specific as (0,4,2), which a token override here could never outrank. No
stylesheet sets background-image on these classes, so (0,1,0) placed after the base rule is
enough to win. */
@media print {
.ax-logo, .pg-brand, .lb-brand, .lg-brand, .auth-logo,
.nav-logo, .foot-brand, .topbar-brand, .admin-logo, .pg-credit-mark {
background-image: url('/brand/mark-black.png?v=1');
}
}
/* ═══ Neon glow helpers ═══════════════════════════════════════════════════ */
.cyber-glow { box-shadow: var(--neon); }
.cyber-glow-lg { box-shadow: var(--neon-lg); }
.cyber-glow-magenta{ box-shadow: var(--neon-magenta); }
.cyber-glow-cyan { box-shadow: var(--neon-cyan); }
.cyber-text-glow { text-shadow: 0 0 8px rgba(0,255,136,.55), 0 0 20px rgba(0,255,136,.30); }
/* ═══ Headings ════════════════════════════════════════════════════════════ */
.cyber-h {
font-family: var(--font-head);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 900;
}
/* ═══ Glitch headline — set data-text="SAME TEXT" on the element ═══════════ */
.cyber-glitch { position: relative; color: var(--cyber-accent); }
.cyber-glitch::before, .cyber-glitch::after {
content: attr(data-text);
position: absolute; inset: 0;
clip-path: inset(0); pointer-events: none;
}
.cyber-glitch::before { left: 2px; text-shadow: -2px 0 var(--cyber-accent-2); animation: cyber-glitch-a 2.6s steps(2) infinite; }
.cyber-glitch::after { left: -2px; text-shadow: -2px 0 var(--cyber-accent-3); animation: cyber-glitch-b 3.2s steps(2) infinite; }
/* ═══ Blinking terminal cursor ════════════════════════════════════════════ */
.cyber-cursor::after { content: '▮'; margin-inline-start: 2px; color: var(--cyber-accent); animation: cyber-blink 1s step-end infinite; }
.cyber-blink { animation: cyber-blink 1s step-end infinite; }
/* ═══ Terminal panel (decorative title bar + traffic lights) ═══════════════ */
.cyber-terminal { position: relative; background: var(--cyber-bg); border: 1px solid var(--cyber-border); padding-top: 38px; }
.cyber-terminal::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 28px;
background: var(--cyber-muted); border-bottom: 1px solid var(--cyber-border);
}
.cyber-terminal::after {
content: ''; position: absolute; top: 11px; inset-inline-start: 12px;
width: 7px; height: 7px; border-radius: 50%;
background: #ff5f57;
box-shadow: 14px 0 0 #febc2e, 28px 0 0 #28c840; /* yellow + green dots */
}
/* The anchor is logical but box-shadow offsets are physical — mirror them in RTL
so the yellow/green dots extend inward instead of off the edge. */
[dir="rtl"] .cyber-terminal::after {
box-shadow: -14px 0 0 #febc2e, -28px 0 0 #28c840;
}
/* ═══ HUD corner ticks ═════════════════════════════════════════════════════
.cyber-corners — 2 ticks (top-start + bottom-end) via pseudo-elements.
Don't combine with classes that own ::before/::after
(e.g. .cyber-terminal) — use .cyber-corners-4 there.
.cyber-corners-4 — 4 corner ticks painted as background layers; stacks with
anything. Decorative and symmetric, so RTL-safe as-is. */
.cyber-corners { position: relative; }
.cyber-corners::before, .cyber-corners::after {
content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.cyber-corners::before { top: 6px; inset-inline-start: 6px; border-top: 2px solid var(--cyber-accent); border-inline-start: 2px solid var(--cyber-accent); }
.cyber-corners::after { bottom: 6px; inset-inline-end: 6px; border-bottom: 2px solid var(--cyber-accent); border-inline-end: 2px solid var(--cyber-accent); }
.cyber-corners-4 {
background-image:
linear-gradient(var(--cyber-accent), var(--cyber-accent)),
linear-gradient(var(--cyber-accent), var(--cyber-accent)),
linear-gradient(var(--cyber-accent), var(--cyber-accent)),
linear-gradient(var(--cyber-accent), var(--cyber-accent)),
linear-gradient(var(--cyber-accent), var(--cyber-accent)),
linear-gradient(var(--cyber-accent), var(--cyber-accent)),
linear-gradient(var(--cyber-accent), var(--cyber-accent)),
linear-gradient(var(--cyber-accent), var(--cyber-accent));
background-repeat: no-repeat;
background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px,
14px 2px, 2px 14px, 14px 2px, 2px 14px;
/* 6px inset keeps the ticks clear of chamfer cuts when combined */
background-position:
6px 6px, 6px 6px, calc(100% - 6px) 6px, calc(100% - 6px) 6px,
6px calc(100% - 6px), 6px calc(100% - 6px),
calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
}
/* ═══ Holographic card — glassmorphic HUD panel ════════════════════════════
SITE-ONLY: backdrop-filter is too costly for OBS browser sources; never
apply this class inside public/overlays/*. */
.cyber-holo {
position: relative;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.12);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
backdrop-filter: blur(10px) saturate(1.15);
}
.cyber-holo::before { /* iridescent top edge */
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--cyber-accent-2), var(--cyber-accent-3), var(--cyber-accent));
opacity: .65; pointer-events: none;
}
/* ═══ Skewed section band ══════════════════════════════════════════════════
skewY is a vertical shear — direction-agnostic, safe under dir="rtl"
(never use skewX: it mirrors). Counter-skew the content: