/* ============================================================ Signal City Design System — sc-base.css Host: signalcity.tv/sc-base.css Include: Add body class="sc" to activate base body styles ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;600;900&display=swap'); /* ── DESIGN TOKENS ─────────────────────────────────────────── */ :root { /* Brand colors */ --sc-cyan: #00f0ff; --sc-pink: #ff1493; --sc-green: #00ff88; --sc-purple: #8a2be2; --sc-orange: #ff6b00; --sc-gold: #f7931a; /* Surfaces */ --sc-bg: #06060f; --sc-panel: rgba(6,8,20,.28); --sc-panel2: rgba(0,0,0,.16); /* Borders */ --sc-border: rgba(0,240,255,.18); --sc-border2: rgba(0,240,255,.08); /* Glow */ --sc-glow: rgba(0,240,255,.12); --sc-glow-pk: rgba(255,20,147,.10); /* Glass */ --sc-blur: 26px; --sc-sat: 185%; /* Typography --sc-ff : Space Mono — buttons, controls, interactive elements --sc-fm : Share Tech Mono — labels, data, metadata, body copy --sc-fh : Barlow Condensed — large hero / display text only */ --sc-ff: 'Space Mono', monospace; --sc-fm: 'Share Tech Mono', monospace; --sc-fh: 'Barlow Condensed', sans-serif; } /* ── BASE BODY (add class="sc" to ) ──────────────────── */ body.sc { font-family: var(--sc-fm); background: var(--sc-bg); color: var(--sc-cyan); background-image: radial-gradient(ellipse at 15% 25%, rgba(0,240,255,.22) 0%, transparent 55%), radial-gradient(ellipse at 85% 75%, rgba(255,20,147,.18) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(90,0,255,.10) 0%, transparent 60%); background-attachment: fixed; } /* Drifting grid */ body.sc::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(0,240,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,.02) 1px, transparent 1px); background-size: 60px 60px; animation: sc-grid-drift 30s linear infinite; } @keyframes sc-grid-drift { 0% { transform: perspective(600px) rotateX(55deg) translateY(0); } 100% { transform: perspective(600px) rotateX(55deg) translateY(60px); } } /* Scanlines */ body.sc::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,240,255,.008) 3px, rgba(0,240,255,.008) 4px ); } /* ── GLASS PANEL (.sc-glass) ───────────────────────────────── */ .sc-glass { background: var(--sc-panel); backdrop-filter: blur(var(--sc-blur)) saturate(var(--sc-sat)); -webkit-backdrop-filter: blur(var(--sc-blur)) saturate(var(--sc-sat)); border: 1px solid var(--sc-border); border-radius: 16px; box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.35), 0 4px 12px rgba(0,240,255,.06), inset 0 1px 0 rgba(0,240,255,.30), inset 0 -1px 0 rgba(0,0,0,.65), inset 1px 0 0 rgba(0,240,255,.05), inset -1px 0 0 rgba(0,0,0,.3); position: relative; overflow: hidden; } .sc-glass::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.025) 45%, rgba(0,240,255,.07) 50%, rgba(255,255,255,.025) 55%, transparent ); animation: sc-shine 10s infinite 2s; pointer-events: none; } @keyframes sc-shine { 0% { left: -100%; } 100% { left: 100%; } } /* ── NFO SECTION LABELS (.sc-label) ───────────────────────── */ .sc-label { font-family: var(--sc-fm); font-size: 9px; color: var(--sc-purple); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; opacity: .8; display: block; } /* ── NFO SECTION TITLES (.sc-title) ───────────────────────── */ /* Auto-decorates with -=[ ]=- */ .sc-title { font-family: var(--sc-fm); font-size: 10px; color: var(--sc-cyan); letter-spacing: 2px; margin-bottom: 10px; font-weight: 700; } .sc-title::before { content: '-=[ '; opacity: .5; font-weight: 400; } .sc-title::after { content: ' ]=-'; opacity: .5; font-weight: 400; } /* ── NFO RULE DIVIDER (.sc-rule) ──────────────────────────── */ .sc-rule { font-size: 7px; color: rgba(0,240,255,.1); font-family: 'Courier New', monospace; letter-spacing: .5px; margin: 4px 0 2px; text-align: center; user-select: none; overflow: hidden; } /* ── BUTTONS (.sc-btn) ─────────────────────────────────────── */ .sc-btn { font-family: var(--sc-ff); font-size: 10px; letter-spacing: 1px; padding: 6px 14px; background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.3); border-radius: 6px; color: var(--sc-cyan); cursor: pointer; transition: all .2s; white-space: nowrap; } .sc-btn:hover { background: linear-gradient(145deg, rgba(0,240,255,.25), rgba(255,20,147,.2)); box-shadow: 0 0 12px rgba(0,240,255,.2); } .sc-btn-danger { border-color: rgba(255,100,0,.4); color: rgba(255,100,0,.7); } /* ── INPUTS (.sc-input) ────────────────────────────────────── */ .sc-input { font-family: var(--sc-fm); font-size: 10px; background: var(--sc-panel2); border: 1px solid var(--sc-border2); border-radius: 6px; color: var(--sc-cyan); padding: 6px 10px; outline: none; width: 100%; box-sizing: border-box; } .sc-input:focus { border-color: var(--sc-cyan); box-shadow: 0 0 8px var(--sc-glow); } /* ── SCROLLBAR ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,240,255,.18); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,.4); } /* ── UTILITY ───────────────────────────────────────────────── */ .sc-mono { font-family: var(--sc-fm); } .sc-space { font-family: var(--sc-ff); } .sc-hero { font-family: var(--sc-fh); } .sc-muted { opacity: .45; } .sc-cyan { color: var(--sc-cyan); } .sc-pink { color: var(--sc-pink); } .sc-green { color: var(--sc-green); } .sc-purple{ color: var(--sc-purple); } .sc-gold { color: var(--sc-gold); }