/* ═══════════════════════════════════════════════════════════════════════ 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('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&family=JetBrains+Mono:wght@400;700&family=Heebo:wght@400;500;700;800;900&display=swap'); :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); } /* ═══ Chamfered corners (the signature "cut" shape) ═══════════════════════ */ .cyber-chamfer { clip-path: polygon( 0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px) ); } .cyber-chamfer-sm { clip-path: polygon( 0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 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%); } /* ═══ 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 */ } /* ═══ Keyframes ═══════════════════════════════════════════════════════════ */ @keyframes cyber-blink { 50% { opacity: 0; } } @keyframes cyber-scan { 0% { transform: translateY(-40vh); } 100% { transform: translateY(115vh); } } @keyframes cyber-glitch-a{ 0%,100%{clip-path:inset(0 0 85% 0);} 25%{clip-path:inset(60% 0 10% 0);} 50%{clip-path:inset(20% 0 55% 0);} 75%{clip-path:inset(85% 0 2% 0);} } @keyframes cyber-glitch-b{ 0%,100%{clip-path:inset(75% 0 5% 0);} 25%{clip-path:inset(10% 0 70% 0);} 50%{clip-path:inset(45% 0 30% 0);} 75%{clip-path:inset(5% 0 80% 0);} } @keyframes cyber-flicker { 0%,100%{opacity:1;} 92%{opacity:1;} 93%{opacity:.6;} 94%{opacity:1;} 97%{opacity:.8;} 98%{opacity:1;} } @keyframes cyber-rgb { 0%,100%{text-shadow:-2px 0 #ff00ff,2px 0 #00d4ff;} 50%{text-shadow:2px 0 #ff00ff,-2px 0 #00d4ff;} } /* ═══ Accessibility — respect reduced motion (keep static identity) ════════ */ @media (prefers-reduced-motion: reduce) { .cyber-overlay::after, .cyber-glitch::before, .cyber-glitch::after, .cyber-cursor::after, .cyber-blink { animation: none; } .cyber-glitch::before { left: 1px; } /* keep static chromatic aberration */ .cyber-glitch::after { left: -1px; } }