/* * METIS BRAND — Feral Theme * The tethys.sprock.io energy: dark, terminal-inspired, glitch aesthetic, * neon accents, alive. CRT noise, scanlines, breathing glows. * * Usage: * @import url('shared/tokens.css'); * @import url('themes/feral/feral.css'); * * Or link directly: * * */ /* ═══════════════════════════════════════════════ COLOR PALETTE ═══════════════════════════════════════════════ */ :root { /* Surfaces */ --color-bg: #0c0c0c; --color-surface: #111111; --color-elevated: #1a1a1a; --color-fg: #c8c8c8; --color-dim: #555555; --color-ghost: #2a2a2a; --color-muted: #888888; /* Brand — hot pink primary */ --color-accent: #ff2d7b; --color-accent-hot: #ff0066; --color-accent-glow: rgba(255, 45, 123, 0.4); --color-accent-faint: rgba(255, 45, 123, 0.08); /* Signal colors */ --color-green: #39ff14; --color-green-dim: rgba(57, 255, 20, 0.3); --color-cyan: #00f0ff; --color-cyan-dim: rgba(0, 240, 255, 0.2); --color-amber: #ffb700; --color-red: #ff3333; /* Body font */ --font-body: var(--font-mono); /* Selection */ --color-selection-bg: var(--color-accent); --color-selection-fg: #000000; } /* ═══════════════════════════════════════════════ BASE STYLES ═══════════════════════════════════════════════ */ body { background: var(--color-bg); color: var(--color-fg); cursor: default; } ::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); } a { color: var(--color-cyan); text-decoration: none; border-bottom: 1px solid var(--color-cyan-dim); transition: all var(--duration-normal); } a:hover { color: #fff; border-bottom-color: var(--color-cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); } /* ═══════════════════════════════════════════════ CRT EFFECTS Enable with class="m-crt" on or a container. ═══════════════════════════════════════════════ */ .m-crt::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: var(--z-fx-top); } .m-crt::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.15) 1px, rgba(0, 0, 0, 0.15) 2px ); pointer-events: none; z-index: var(--z-fx); } /* ═══════════════════════════════════════════════ BLOCK COMPONENTS ═══════════════════════════════════════════════ */ /* Section label — "> LABEL ——————" */ .m-block-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-accent); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-2); } .m-block-label::before { content: '>'; color: var(--color-green); font-weight: 400; } .m-block-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-ghost) 0%, transparent 100%); } /* Content block with bottom border */ .m-block { padding: var(--space-10) 0; border-bottom: 1px solid var(--color-ghost); } /* Quote/myth block — glowing left border */ .m-quote { margin: var(--space-6) 0; padding: var(--space-4) 0 var(--space-4) var(--space-6); border-left: 2px solid var(--color-accent-hot); position: relative; font-style: italic; } .m-quote::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--color-accent-hot); box-shadow: 0 0 8px var(--color-accent-glow); } /* ═══════════════════════════════════════════════ STATUS COMPONENTS ═══════════════════════════════════════════════ */ /* Heartbeat dot — alive indicator */ .m-heartbeat { width: 8px; height: 8px; background: var(--color-green); border-radius: 50%; box-shadow: 0 0 4px var(--color-green), 0 0 12px var(--color-green-dim); animation: m-hb 1.2s ease-in-out infinite; } @keyframes m-hb { 0%, 100% { transform: scale(1); opacity: 0.7; } 20% { transform: scale(1.4); opacity: 1; } 40% { transform: scale(0.9); opacity: 0.5; } } /* Status bar */ .m-status { font-size: var(--text-xs); color: var(--color-dim); display: flex; align-items: center; gap: var(--space-3); letter-spacing: var(--tracking-wide); } .m-status .live { color: var(--color-green); } .m-status .warn { color: var(--color-amber); } .m-status .err { color: var(--color-red); } .m-status .sep { color: var(--color-ghost); } /* ═══════════════════════════════════════════════ GLITCH TEXT Wrap target in .m-glitch-wrap, add data-text="TEXT" ═══════════════════════════════════════════════ */ .m-glitch-wrap { position: relative; display: inline-block; } .m-glitch-wrap::before, .m-glitch-wrap::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .m-glitch-wrap::before { color: var(--color-cyan); animation: m-glitch-a 3s infinite linear alternate-reverse; clip-path: inset(0 0 65% 0); } .m-glitch-wrap::after { color: var(--color-green); animation: m-glitch-b 2.5s infinite linear alternate-reverse; clip-path: inset(65% 0 0 0); } @keyframes m-glitch-a { 0%, 88%, 92%, 100% { transform: translate(0); opacity: 0; } 89% { transform: translate(-4px, -2px); opacity: 0.8; } 90% { transform: translate(4px, 2px); opacity: 0.6; } 91% { transform: translate(-2px, 1px) skewX(-2deg); opacity: 0.9; } } @keyframes m-glitch-b { 0%, 84%, 88%, 100% { transform: translate(0); opacity: 0; } 85% { transform: translate(3px, 1px); opacity: 0.7; } 86% { transform: translate(-5px, -1px); opacity: 0.5; } 87% { transform: translate(2px, -2px) skewX(3deg); opacity: 0.8; } } /* ═══════════════════════════════════════════════ GLOW UTILITIES ═══════════════════════════════════════════════ */ .m-glow-pink { text-shadow: 0 0 5px var(--color-accent-hot), 0 0 30px var(--color-accent-glow), 0 0 80px rgba(255, 0, 102, 0.15); } .m-glow-cyan { text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); } .m-glow-green { text-shadow: 0 0 8px rgba(57, 255, 20, 0.5); } .m-glow-box-pink { box-shadow: 0 0 8px var(--color-accent-glow), inset 0 0 8px var(--color-accent-faint); } .m-glow-box-cyan { box-shadow: 0 0 8px var(--color-cyan-dim), inset 0 0 8px rgba(0, 240, 255, 0.05); } .m-glow-box-green { box-shadow: 0 0 8px var(--color-green-dim), inset 0 0 8px rgba(57, 255, 20, 0.05); } /* ═══════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════ */ /* Breathing glow — use on accent text */ .m-breathe { animation: m-breathe 4s ease-in-out infinite; } @keyframes m-breathe { 0%, 100% { text-shadow: 0 0 5px var(--color-accent-hot), 0 0 30px var(--color-accent-glow), 0 0 80px rgba(255,0,102,0.15); } 50% { text-shadow: 0 0 8px var(--color-accent-hot), 0 0 50px var(--color-accent-glow), 0 0 120px rgba(255,0,102,0.25); } } /* Boot fade-in */ .m-boot-fade { animation: m-boot-fade 1.5s ease-out; } @keyframes m-boot-fade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Slow pulse */ .m-pulse { animation: m-pulse 3s ease-in-out infinite; } @keyframes m-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Blink cursor */ .m-blink::after { content: '█'; animation: m-blink 1s step-end infinite; } @keyframes m-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ═══════════════════════════════════════════════ BOOT SEQUENCE COMPONENT ═══════════════════════════════════════════════ */ .m-boot { padding: var(--space-12) 0 var(--space-4); font-size: var(--text-xs); color: var(--color-dim); line-height: var(--leading-loose); font-weight: 300; animation: m-boot-fade 1.5s ease-out; } .m-boot .ok { color: var(--color-green); font-weight: 700; } .m-boot .warn { color: var(--color-amber); } .m-boot .addr { color: var(--color-cyan); } .m-boot .proc { color: var(--color-accent); } /* ═══════════════════════════════════════════════ CARD / PANEL ═══════════════════════════════════════════════ */ .m-card { background: var(--color-surface); border: 1px solid var(--color-ghost); border-radius: var(--radius-md); padding: var(--space-6); transition: border-color var(--duration-normal); } .m-card:hover { border-color: var(--color-accent-glow); } .m-card--glow { box-shadow: 0 0 12px var(--color-accent-faint); } /* ═══════════════════════════════════════════════ TAG / BADGE ═══════════════════════════════════════════════ */ .m-tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-ghost); border-radius: var(--radius-sm); color: var(--color-dim); transition: all var(--duration-normal); } .m-tag:hover { color: var(--color-accent); border-color: var(--color-accent-glow); box-shadow: 0 0 6px var(--color-accent-faint); } .m-tag--active { color: var(--color-accent); border-color: var(--color-accent); } /* ═══════════════════════════════════════════════ TABLE ═══════════════════════════════════════════════ */ .m-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .m-table th { text-align: left; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-ghost); } .m-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-ghost); color: var(--color-fg); } .m-table tr:hover td { background: var(--color-accent-faint); } /* ═══════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .m-heartbeat, .m-breathe, .m-pulse, .m-glitch-wrap::before, .m-glitch-wrap::after, .m-blink::after, .m-boot { animation: none; } .m-crt::before, .m-crt::after { display: none; } }