/* * TOPBAR V5 PROD — Phase 2 * * Componente topbar globale opt-in via . * Namespace: .ratiofy-topbar (outer) + .rtb-* (inner components). * * Default: .ratiofy-topbar { display: none } — zero impatto su pagine senza class. * Opt-in: body.has-topbar-v5 .ratiofy-topbar { display: flex; fixed top:0 } * * Linked from: dashboard.html, analysis.html, report.html, compare-v2.html * Sess 106 — 2026-05-11 */ /* ============================================================ * 0) Default hidden — MUST precede opt-in block (cascade order) * ============================================================ */ .ratiofy-topbar { display: none; } /* ============================================================ * 1) Token — scoped to opt-in body * ============================================================ */ body.has-topbar-v5 { --rtb-h: 56px; } /* ============================================================ * 2) Topbar container — fixed full-width, above sidebar (z>100) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar { display: grid; grid-template-columns: var(--sidebar-width, 220px) 1fr auto; align-items: center; position: fixed; top: 0; left: 0; right: 0; height: var(--rtb-h); z-index: 200; /* > .sidebar z-index:100 > .page-header z-index:50 */ background: var(--paper); border-bottom: 1px solid var(--hair-strong, rgba(26,26,36,0.12)); box-shadow: 0 2px 12px rgba(0,0,0,0.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* ============================================================ * 3) Layout shift — sidebar + main-content + page-header * ============================================================ */ /* Sidebar: fixed top:0 → push down by rtb-h */ body.has-topbar-v5 .sidebar { top: var(--rtb-h); height: calc(100vh - var(--rtb-h)); } /* Sidebar placeholder: also needs vertical correction (flex layout) */ body.has-topbar-v5 #sidebar-placeholder { padding-top: var(--rtb-h); } /* Main content: push top padding to clear topbar */ body.has-topbar-v5 .main-content { padding-top: var(--rtb-h); } /* Page header: sticky top:0 → sticky below topbar */ body.has-topbar-v5 .page-header { top: var(--rtb-h); } /* ============================================================ * 4) Brand area (.rtb-brand) — left column, aligns with sidebar * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-6, 24px); height: 100%; text-decoration: none; color: inherit; } body.has-topbar-v5 .ratiofy-topbar .rtb-brand-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--ai, oklch(62% 0.18 290)); border-radius: 8px; flex-shrink: 0; } body.has-topbar-v5 .ratiofy-topbar .rtb-brand-word { font-family: 'Onest', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--ink-900, #1a1a24); letter-spacing: -0.02em; white-space: nowrap; } body.has-topbar-v5 .ratiofy-topbar .rtb-brand-word .slash { color: var(--ai, oklch(62% 0.18 290)); font-weight: 800; } body.has-topbar-v5 .ratiofy-topbar .rtb-brand-word .ai { font-size: 0.65em; font-weight: 600; color: var(--ai, oklch(62% 0.18 290)); letter-spacing: 0.04em; vertical-align: super; margin-left: 1px; } /* ============================================================ * 5) Middle area (.rtb-middle) — LIVE indicator * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-middle { display: flex; align-items: center; justify-content: center; height: 100%; } body.has-topbar-v5 .ratiofy-topbar .rtb-live { display: flex; align-items: center; gap: 6px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-500, #7d7d8a); text-transform: uppercase; } body.has-topbar-v5 .ratiofy-topbar .rtb-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ottimo, oklch(66% 0.14 195)); animation: rtb-pulse 2.4s ease-in-out infinite; flex-shrink: 0; } @keyframes rtb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } /* ============================================================ * 6) Right area (.rtb-right) — all controls * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-right { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 var(--space-4, 16px); } /* Divider */ body.has-topbar-v5 .ratiofy-topbar .rtb-divider { display: inline-block; width: 1px; height: 20px; background: var(--hair-strong, rgba(26,26,36,0.12)); margin: 0 6px; flex-shrink: 0; } /* ============================================================ * 7) Status indicator (.rtb-status) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-status { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 500; color: var(--ink-500, #7d7d8a); white-space: nowrap; } body.has-topbar-v5 .ratiofy-topbar .rtb-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-500, #7d7d8a); flex-shrink: 0; } body.has-topbar-v5 .ratiofy-topbar .rtb-status[data-status="online"] .rtb-status-dot { background: var(--ottimo, oklch(66% 0.14 195)); } body.has-topbar-v5 .ratiofy-topbar .rtb-status[data-status="online"] .rtb-status-label { color: var(--ottimo, oklch(66% 0.14 195)); } /* ============================================================ * 8) Credit group (.rtb-credit-group) * C1 fix: shows only credits_remaining (NO total — endpoint * returns only credits_remaining, not credits_total) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-credit-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; } body.has-topbar-v5 .ratiofy-topbar .rtb-credit-label { font-size: 0.72rem; color: var(--ink-500, #7d7d8a); font-weight: 500; } body.has-topbar-v5 .ratiofy-topbar .rtb-credit-pill { display: inline-flex; align-items: baseline; gap: 2px; background: var(--ai-soft, oklch(92% 0.05 290)); border-radius: 20px; padding: 2px 9px; font-size: 0.8rem; font-weight: 700; color: var(--ai, oklch(62% 0.18 290)); line-height: 1; } @supports not (background: color-mix(in oklch, white, black)) { body.has-topbar-v5 .ratiofy-topbar .rtb-credit-pill { background: rgba(120, 80, 220, 0.1); } } body.has-topbar-v5 .ratiofy-topbar .rtb-credit-avail { /* span for credits_remaining value */ } body.has-topbar-v5 .ratiofy-topbar .rtb-credit-avail-label { font-size: 0.62rem; font-weight: 500; color: var(--ai, oklch(62% 0.18 290)); margin-left: 2px; letter-spacing: 0.01em; } body.has-topbar-v5 .ratiofy-topbar .rtb-credit-buy { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--ai-soft, oklch(92% 0.05 290)); color: var(--ai, oklch(62% 0.18 290)); border-radius: 50%; font-size: 0.7rem; font-weight: 800; text-decoration: none; line-height: 1; transition: background 0.15s, transform 0.1s; } body.has-topbar-v5 .ratiofy-topbar .rtb-credit-buy:hover { background: var(--ai, oklch(62% 0.18 290)); color: #fff; transform: scale(1.1); } /* ============================================================ * 9) User type badge (.rtb-user-type) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-user-type { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; white-space: nowrap; } body.has-topbar-v5 .ratiofy-topbar .rtb-user-type[data-tier="free"] { background: var(--hair, rgba(26,26,36,0.07)); color: var(--ink-700, #3e3e4b); } body.has-topbar-v5 .ratiofy-topbar .rtb-user-type[data-tier="pro"] { background: var(--ai-soft, oklch(92% 0.05 290)); color: var(--ai, oklch(62% 0.18 290)); } body.has-topbar-v5 .ratiofy-topbar .rtb-user-type[data-tier="enterprise"] { background: var(--monitor-bg, oklch(96% 0.05 85)); color: var(--monitor, oklch(78% 0.14 80)); } /* ============================================================ * 10) Icon button base (.rtb-icon-btn) — shared for lang/theme/logout * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-icon-btn, body.has-topbar-v5 .ratiofy-topbar .rtb-lang button, body.has-topbar-v5 .ratiofy-topbar .rtb-theme button, body.has-topbar-v5 .ratiofy-topbar .rtb-logout { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 28px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--ink-500, #7d7d8a); transition: background 0.12s, color 0.12s; padding: 0 6px; } /* ============================================================ * Phase 3.5 — Avatar pill (initials clickable → settings/profile) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--ai-soft), var(--ai)); color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; border: 1.5px solid var(--paper, #faf9f6); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; font-family: inherit; } body.has-topbar-v5 .ratiofy-topbar .rtb-avatar:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border-color: var(--ai); } body.has-topbar-v5 .ratiofy-topbar .rtb-avatar:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; } [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-avatar { border-color: var(--ink-100, #232330); } body.has-topbar-v5 .ratiofy-topbar .rtb-icon-btn:hover, body.has-topbar-v5 .ratiofy-topbar .rtb-lang button:hover, body.has-topbar-v5 .ratiofy-topbar .rtb-theme button:hover, body.has-topbar-v5 .ratiofy-topbar .rtb-logout:hover { background: var(--hair, rgba(26,26,36,0.07)); color: var(--ink-900, #1a1a24); } /* ============================================================ * 11) Lang toggle group (.rtb-lang) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-lang { display: flex; align-items: center; gap: 2px; background: var(--hair, rgba(26,26,36,0.07)); border-radius: 7px; padding: 2px; } body.has-topbar-v5 .ratiofy-topbar .rtb-lang button.active { background: var(--surface, #ffffff); color: var(--ink-900, #1a1a24); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* ============================================================ * 12) Theme toggle group (.rtb-theme) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-theme { display: flex; align-items: center; gap: 2px; background: var(--hair, rgba(26,26,36,0.07)); border-radius: 7px; padding: 2px; } body.has-topbar-v5 .ratiofy-topbar .rtb-theme button.active { background: var(--surface, #ffffff); color: var(--ink-900, #1a1a24); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* ============================================================ * 13) Logout button (.rtb-logout) * ============================================================ */ body.has-topbar-v5 .ratiofy-topbar .rtb-logout { color: var(--grave, oklch(62% 0.18 15)); width: 32px; min-width: 32px; padding: 0; } body.has-topbar-v5 .ratiofy-topbar .rtb-logout:hover { background: var(--grave-bg, oklch(96% 0.03 15)); color: var(--grave, oklch(62% 0.18 15)); } /* ============================================================ * 14) Dark theme overrides * ============================================================ */ [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar { background: var(--paper); border-bottom-color: var(--hair-strong, rgba(255,255,255,0.14)); box-shadow: 0 2px 12px rgba(0,0,0,0.22); } [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-brand-word { color: var(--ink-900, #f2f2f5); } [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-lang { background: var(--hair, rgba(255,255,255,0.07)); } [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-lang button.active, [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-theme button.active { background: var(--surface, #1b1b26); box-shadow: 0 1px 3px rgba(0,0,0,0.25); } [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-theme { background: var(--hair, rgba(255,255,255,0.07)); } [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-icon-btn:hover, [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-lang button:hover, [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-theme button:hover, [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-logout:hover { background: var(--hair, rgba(255,255,255,0.07)); color: var(--ink-900, #f2f2f5); } [data-theme="dark"] body.has-topbar-v5 .ratiofy-topbar .rtb-divider { background: var(--hair-strong, rgba(255,255,255,0.14)); } /* ============================================================ * 15) Mobile responsive (<768px) * Topbar stays full-width 56px; hide middle LIVE; compress right * ============================================================ */ @media (max-width: 768px) { body.has-topbar-v5 .ratiofy-topbar { grid-template-columns: auto 1fr auto; } body.has-topbar-v5 .ratiofy-topbar .rtb-middle { display: none; /* LIVE indicator hidden on mobile for space */ } body.has-topbar-v5 .ratiofy-topbar .rtb-brand { padding: 0 var(--space-3, 12px); } body.has-topbar-v5 .ratiofy-topbar .rtb-brand-word { display: none; /* Show only logo mark on mobile */ } body.has-topbar-v5 .ratiofy-topbar .rtb-right { padding: 0 var(--space-3, 12px); gap: 2px; } body.has-topbar-v5 .ratiofy-topbar .rtb-status-label, body.has-topbar-v5 .ratiofy-topbar .rtb-credit-label, body.has-topbar-v5 .ratiofy-topbar .rtb-credit-avail-label, body.has-topbar-v5 .ratiofy-topbar .rtb-divider { display: none; } /* Compact tier badge */ body.has-topbar-v5 .ratiofy-topbar .rtb-user-type { padding: 2px 5px; font-size: 9px; } /* Reduce avatar + logout size */ body.has-topbar-v5 .ratiofy-topbar .rtb-avatar { width: 26px; height: 26px; font-size: 10px; } body.has-topbar-v5 .ratiofy-topbar .rtb-logout { height: 26px; min-width: 26px; padding: 0 4px; } /* Compact credit pill: only number */ body.has-topbar-v5 .ratiofy-topbar .rtb-credit-pill { padding: 2px 8px; font-size: 11px; } body.has-topbar-v5 .ratiofy-topbar .rtb-credit-buy { width: 22px; height: 22px; font-size: 12px; } /* Sidebar stays off-canvas on mobile — topbar shift still applies */ body.has-topbar-v5 .sidebar { top: var(--rtb-h); height: calc(100vh - var(--rtb-h)); } } /* ============================================================ * Very small screens (<480px): hide non-essential controls * ============================================================ */ @media (max-width: 480px) { body.has-topbar-v5 .ratiofy-topbar .rtb-lang, body.has-topbar-v5 .ratiofy-topbar .rtb-status, body.has-topbar-v5 .ratiofy-topbar .rtb-user-type { display: none; } body.has-topbar-v5 .ratiofy-topbar .rtb-right { gap: 4px; } }