diff --git a/css/main.css b/css/main.css index 0bbd703..7e46d05 100644 --- a/css/main.css +++ b/css/main.css @@ -2430,4 +2430,54 @@ body:has(.music-wrap) { .mnp-fill { transition: none; } #music.is-live .mnp-state::before { animation: none; } .ly-line { transition: color 0.15s ease; } +} + +/* ============================================================ + 15. VISITOR COUNTER (#visitor-counter) + Fixed to top-right, below .beta-bar (theme + cat buttons). + ============================================================ */ +#visitor-counter { + position: fixed; + top: 4rem; /* clears the ~48px beta-bar + gap */ + right: 1rem; + z-index: 6; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; +} + +#visitor-counter .vc-label { + font-size: 0.65rem; + letter-spacing: 0.06em; + text-transform: lowercase; + color: var(--subtext-0); + font-family: 'Comic Code', ui-monospace, monospace; +} + +/* Boot reveal: fade in with the rest of the chrome */ +#visitor-counter { + transition: opacity 0.6s ease, transform 0.6s ease; +} + +body.term-booting #visitor-counter { + opacity: 0; + transform: translateY(8px); +} + +body.term-chrome-in #visitor-counter { + opacity: 1; + transform: none; +} + +/* Mobile: static in topbar flow */ +@media (max-width: 640px) { + #visitor-counter { + position: static; + margin: 0 auto; + } + + .topbar #visitor-counter { + order: 2; + } } \ No newline at end of file diff --git a/index.html b/index.html index b151381..8df58fb 100644 --- a/index.html +++ b/index.html @@ -96,6 +96,8 @@ +
+ @@ -103,6 +105,11 @@ +