/** * Next Stage Analytics — „Manșeta live" ([pageview]). * * Bandă „glass" cu muchie superioară în gradient animat, punct live pulsând, * cifre tabulare și badge „Powered by PageView.ro". Tot CSS-ul e namespaced * sub .nsa-mv-root (+ reset local de margin/padding/box-sizing), ca stilurile * temei să nu poată sângera în manșetă și invers. * * Responsive prin container queries (root-ul e container inline-size): * ≥660px — un singur rând, separatoare verticale, badge la dreapta * (wrap-ul rămâne PERMIS ca plasă de siguranță: cu 3 metrici * RO/EN + badge conținutul minim atinge ~627–645px, iar * overflow:hidden ar tăia altfel badge-ul — mai bine se rupe * rândul decât să se taie); * 400–659 — rândul se rupe (wrap), separatoarele dispar; * <400px — stivă CENTRATĂ (metrici una sub alta, badge centrat jos), * gândită să arate intenționat și la 240px, și la 200px; * <220px — etichete puțin mai mici, padding strâns (nimic nu se rupe * la mijloc de metrică — white-space: nowrap). * Fallback cu media queries (@supports not) pentru browsere fără container * queries. Light/dark automat (prefers-color-scheme), cu override explicit * prin [data-theme="light|dark"] pe orice strămoș. Animațiile rulează doar * sub prefers-reduced-motion: no-preference. */ /* ---------- Reset local: temele nu au voie să deformeze manșeta. ---------- */ .nsa-mv-root, .nsa-mv-root *, .nsa-mv-root *::before, .nsa-mv-root *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- Temă (light implicit) ---------- */ .nsa-mv-root { --nsa-mv-surface: rgba(255, 255, 255, .72); --nsa-mv-text: #131a26; --nsa-mv-muted: #5a6373; --nsa-mv-border: rgba(19, 26, 38, .14); --nsa-mv-brand: #4d7cff; --nsa-mv-live: #2fd18b; --nsa-mv-live-halo: rgba(47, 209, 139, .4); width: 100%; container-type: inline-size; font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--nsa-mv-text); line-height: 1.25; } @media (prefers-color-scheme: dark) { .nsa-mv-root { --nsa-mv-surface: rgba(16, 21, 32, .72); --nsa-mv-text: #e9eef7; --nsa-mv-muted: #9aa5b8; --nsa-mv-border: rgba(233, 238, 247, .16); --nsa-mv-brand: #6e93ff; --nsa-mv-live-halo: rgba(47, 209, 139, .35); } } /* Override explicit de temă ([data-theme] pe sau alt strămoș) — selectorii au specificitate mai mare decât .nsa-mv-root din media query, deci bat prefers-color-scheme în ambele direcții. */ [data-theme="dark"] .nsa-mv-root { --nsa-mv-surface: rgba(16, 21, 32, .72); --nsa-mv-text: #e9eef7; --nsa-mv-muted: #9aa5b8; --nsa-mv-border: rgba(233, 238, 247, .16); --nsa-mv-brand: #6e93ff; --nsa-mv-live-halo: rgba(47, 209, 139, .35); } [data-theme="light"] .nsa-mv-root { --nsa-mv-surface: rgba(255, 255, 255, .72); --nsa-mv-text: #131a26; --nsa-mv-muted: #5a6373; --nsa-mv-border: rgba(19, 26, 38, .14); --nsa-mv-brand: #4d7cff; --nsa-mv-live-halo: rgba(47, 209, 139, .4); } /* ---------- Banda ---------- */ .nsa-mv-strip { position: relative; display: flex; /* Wrap permis la ORICE lățime: conținutul are un min-content rigid (white-space:nowrap peste tot) și overflow:hidden — fără wrap, la ~600–645px badge-ul s-ar tăia pur și simplu. Pe un rând care încape, wrap-ul nu schimbă nimic. */ flex-wrap: wrap; align-items: center; gap: 12px; row-gap: 8px; /* după `gap` (shorthand), altfel ar fi suprascris */ min-height: 52px; padding: 8px 16px; font-size: 13px; background: var(--nsa-mv-surface); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid var(--nsa-mv-border); border-radius: 10px; overflow: hidden; } /* Muchia superioară: gradient brand→live (static; varianta animată mai jos, doar sub prefers-reduced-motion: no-preference). */ .nsa-mv-edge { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--nsa-mv-brand), var(--nsa-mv-live)); pointer-events: none; } /* ---------- Metrici ---------- */ /* Un segment nu se rupe niciodată la mijloc (dot + număr + etichetă). */ .nsa-mv-metric { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .nsa-mv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nsa-mv-live); } .nsa-mv-num { font-size: 15px; /* fallback pt. browsere fără unități container-query */ font-size: clamp(15px, 14.4px + .18cqw, 16px); font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; min-width: 2.6ch; } /* Placeholder („—") până sosesc cifrele prin AJAX. */ .nsa-mv-num--empty { opacity: .55; font-weight: 500; } .nsa-mv-lbl { font-size: 13px; color: var(--nsa-mv-muted); } .nsa-mv-divider { flex: none; width: 1px; height: 20px; background: var(--nsa-mv-border); } /* Segmente cu metrică null (ex. „live" înainte de deploy-ul backend-ului) și separatoarele lor — ascunse de JS. */ .nsa-mv-metric--hidden, .nsa-mv-divider--hidden { display: none; } /* Toate metricile indisponibile → JS ascunde întreaga manșetă (o bandă goală doar cu badge ar arăta stricat); revine dacă „live" își revine. */ .nsa-mv-root--hidden { display: none; } /* ---------- Badge ---------- */ .nsa-mv-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--nsa-mv-muted); text-decoration: none; white-space: nowrap; border-bottom: 0; /* unele teme subliniază toate ancorele din conținut */ box-shadow: none; } .nsa-mv-badge:hover { color: var(--nsa-mv-text); } .nsa-mv-badge:focus-visible { outline: 2px solid var(--nsa-mv-brand); outline-offset: 2px; border-radius: 4px; } .nsa-mv-badge-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #6e93ff, #3457d8); color: #fff; } .nsa-mv-badge-mark svg { display: block; width: 11px; height: 11px; } .nsa-mv-badge-text strong { font-weight: 650; } /* ---------- Animații (doar fără reduced-motion) ---------- */ @media (prefers-reduced-motion: no-preference) { /* Muchia devine un gradient de 200% lățime care „mătură" spre stânga. */ .nsa-mv-edge { right: auto; width: 200%; background: linear-gradient(90deg, var(--nsa-mv-brand), var(--nsa-mv-live), var(--nsa-mv-brand), var(--nsa-mv-live), var(--nsa-mv-brand)); animation: nsa-mv-sweep 6s linear infinite; } /* Punctul live pulsează printr-un inel de box-shadow 0→7px. */ .nsa-mv-dot { animation: nsa-mv-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite; } /* „Tick" discret la actualizarea cifrei live (adăugat/scos de JS). */ .nsa-mv-num--tick { animation: nsa-mv-tick 150ms ease-out; } } @keyframes nsa-mv-sweep { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes nsa-mv-pulse { 0% { box-shadow: 0 0 0 0 var(--nsa-mv-live-halo); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } } @keyframes nsa-mv-tick { 0% { transform: translateY(0); } 45% { transform: translateY(-2px); } 100% { transform: translateY(0); } } /* ---------- Responsive (container queries) ---------- */ /* 400–659px: rândul se rupe des la lățimile astea (3 metrici + badge au ~627–645px min-content) — separatoarele dispar, ca să nu rămână orfane la capăt de linie. Wrap-ul în sine e permis global (vezi .nsa-mv-strip). */ @container (max-width: 659px) { .nsa-mv-divider { display: none; } } /* <400px: stivă centrată — metrici una sub alta, badge centrat jos. Dimensionată să arate intenționat și la 240px, și la 200px. */ @container (max-width: 399px) { .nsa-mv-strip { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 14px 12px; } .nsa-mv-badge { margin-left: 0; /* anulează împingerea la dreapta din layout-ul rând */ margin-top: 2px; } } /* <220px: etichete puțin mai mici + padding strâns, ca „au citit articolul azi" / "read this article today" să încapă fără să se rupă la mijloc. */ @container (max-width: 219px) { .nsa-mv-strip { padding: 12px 8px; } .nsa-mv-metric { gap: 6px; } .nsa-mv-num { font-size: 14px; } .nsa-mv-lbl { font-size: 11.5px; } } /* ---------- Fallback fără container queries (aceleași praguri, pe viewport) ---------- */ @supports not (container-type: inline-size) { @media (max-width: 659px) { .nsa-mv-divider { display: none; } } @media (max-width: 399px) { .nsa-mv-strip { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 14px 12px; } .nsa-mv-badge { margin-left: 0; margin-top: 2px; } } @media (max-width: 219px) { .nsa-mv-strip { padding: 12px 8px; } .nsa-mv-metric { gap: 6px; } .nsa-mv-num { font-size: 14px; } .nsa-mv-lbl { font-size: 11.5px; } } }