/* ── NIXIE TUBE VISITOR COUNTER ───────────────────────────────────────────── Companion stylesheet for counter.js. Link this in your alongside main.css: ────────────────────────────────────────────────────────────────────────── */ /* ── ANIMATIONS ─────────────────────────────────────────────────────────── */ @keyframes nc-pulse { 0%, 100% { color: #FFB33F; text-shadow: 0 0 3px #FFB33F, 0 0 8px rgba(255, 140, 10, 0.5), 0 0 14px rgba(255, 100, 0, 0.25); } 50% { color: #ffc96a; text-shadow: 0 0 5px #FFB33F, 0 0 14px rgba(255, 140, 10, 0.75), 0 0 26px rgba(255, 100, 0, 0.4), 0 0 40px rgba(255, 80, 0, 0.15); } } @keyframes nc-pulse-bg { 0%, 100% { background: radial-gradient(ellipse at 50% 40%, rgba(255, 160, 30, 0.18) 0%, transparent 70%); } 50% { background: radial-gradient(ellipse at 50% 40%, rgba(255, 160, 30, 0.38) 0%, transparent 70%); } } @keyframes nc-flicker { 0% { opacity: 0; } 20% { opacity: 0.9; } 35% { opacity: 0.4; } 55% { opacity: 1; } 70% { opacity: 0.65; } 88% { opacity: 1; } 100% { opacity: 1; } } /* ── WRAPPER ─────────────────────────────────────────────────────────────── */ .nc-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; background: transparent; } .nc-inner { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; background: #080814; border: 1px solid #1e1e38; border-radius: 5px; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9); padding-right: 10px; } /* Footer variant: horizontal layout */ .nc-wrap.nc-footer .nc-inner { flex-direction: row; align-items: center; border-radius: 3px; } /* ── TUBE ROW ────────────────────────────────────────────────────────────── */ .nc-row { display: flex; align-items: center; } /* ── INDIVIDUAL TUBE ─────────────────────────────────────────────────────── */ .nc-tube { background: #0b0b1e; border: 1px solid #252540; border-radius: 3px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; } .nc-tube::before { content: ''; position: absolute; inset: 0; pointer-events: none; } .nc-tube.lit::before { animation: nc-pulse-bg 3s ease-in-out infinite; } /* ── DIGIT ───────────────────────────────────────────────────────────────── */ .nc-digit { font-family: 'VT323', monospace; font-weight: 100; position: relative; z-index: 1; color: #2a2a44; transition: color 0.35s ease, text-shadow 0.35s ease; user-select: none; line-height: 1; -webkit-font-smoothing: antialiased; opacity: 0.9; } .nc-tube.lit .nc-digit { color: #FFB33F; animation: nc-pulse 3s ease-in-out infinite; opacity: 1; } .nc-tube.flicker .nc-digit { animation: nc-flicker 0.4s ease forwards, nc-pulse 3s ease-in-out infinite 0.4s; } /* ── SEPARATOR ───────────────────────────────────────────────────────────── */ .nc-sep { font-family: 'VT323', monospace; color: #1e1e36; user-select: none; line-height: 1; flex-shrink: 0; } /* ── LABEL ───────────────────────────────────────────────────────────────── */ .nc-label { font-family: 'Share Tech Mono', monospace; letter-spacing: 3px; color: rgba(255, 179, 63, 0.55); text-transform: uppercase; white-space: nowrap; } /* ── CATHODE GRID (decorative inner border) ──────────────────────────────── */ .nc-grid { position: absolute; inset: 3px; border: 1px solid rgba(255, 160, 30, 0.06); border-radius: 2px; pointer-events: none; z-index: 0; } .nc-tube.lit .nc-grid { border-color: rgba(255, 160, 30, 0.13); } /* ── HERO SIZE ───────────────────────────────────────────────────────────── */ /* Fluid scaling: full size on wide screens, shrinks to fit on narrow ones. */ /* The counter has 4 tubes min (+ separators + padding) ≈ 280px at full size */ /* clamp(min, preferred, max) — tubes scale between 20px and 48px wide. */ .nc-hero .nc-inner { padding: clamp(6px, 2vw, 14px) clamp(8px, 2.5vw, 18px); gap: clamp(2px, 0.5vw, 5px); } .nc-hero .nc-row { gap: clamp(2px, 0.5vw, 4px); } .nc-hero .nc-tube { width: clamp(20px, 6vw, 48px); height: clamp(30px, 9vw, 68px); border-radius: 4px; } .nc-hero .nc-digit { font-size: clamp(20px, 5.5vw, 46px); } .nc-hero .nc-sep { font-size: clamp(16px, 4vw, 36px); padding: 0 clamp(1px, 0.3vw, 2px); margin-top: -0.15em; } .nc-hero .nc-label { font-size: clamp(7px, 1.2vw, 10px); margin-top: 0; letter-spacing: clamp(2px, 0.5vw, 3px); } /* ── FOOTER SIZE ─────────────────────────────────────────────────────────── */ /* Designed to fit inside a 15px tall footer. */ /* Tubes are 11px tall, label is 7px, inner padding is 1px top/bottom. */ .nc-wrap.nc-footer .nc-inner { gap: 5px; padding: 0; background: transparent; border: none; box-shadow: none; } .nc-footer .nc-row { gap: 1px; } .nc-footer .nc-tube { width: 18px; height: 26px; border-radius: 2px; background: transparent; border: none; } .nc-footer .nc-grid { inset: 2px; border-color: rgba(255, 160, 30, 0.06); } .nc-footer .nc-tube.lit .nc-grid { border-color: rgba(255, 160, 30, 0.28); } .nc-footer .nc-digit { font-size: 22px; color: rgba(255, 179, 63, 0.18); } .nc-footer .nc-tube.lit .nc-digit { color: #FFB33F; } .nc-footer .nc-sep { font-size: 14px; padding: 0 1px; margin-top: 0; color: rgba(255, 179, 63, 0.2); } .nc-footer .nc-label { font-size: 8px; letter-spacing: 2px; } #visitor-counter-footer { margin-right: 13px; } #visitor-counter-guestbook { line-height: 1; } #visitor-counter-guestbook .nc-tube { width: 22px; height: 30px; } #visitor-counter-guestbook .nc-digit { font-size: 26px; } #visitor-counter-hero { width: 100%; } #visitor-counter-hero .nc-inner { width: 100%; box-sizing: border-box; } #visitor-counter-hero .nc-row { flex-wrap: wrap; justify-content: center; } #visitor-counter-hero .nc-tube { width: clamp(20px, 12%, 48px); } #visitor-counter-hero .nc-digit { font-size: clamp(20px, 11%, 46px); }