/* * Bandometro — Esiti della selezione (offline page). * * This page is DARK BY DEFAULT (per the change request) and shares the visual * language of the rest of the site: an institutional-blue top bar, a header * with the Bandometro logo, a breadcrumb and the unified site footer. Theming * is driven by a `data-theme` attribute on (dark default, light opt-in) * — the same mechanism and the same `bandometro-theme` localStorage key used * across the site. No framework, no build, no web fonts. */ /* The HTML5 `hidden` attribute must win over component display rules so JS * toggles (el.hidden = true) actually hide. */ [hidden] { display: none !important; } /* ---------- Design tokens: DARK is the default (:root) ---------- */ :root { --primary: #4a9fe0; --on-primary: #04243f; --primary-container: #1d4877; --on-primary-container: #d6e6f8; --surface: #0e151d; --surface-card: #161f2b; --surface-variant: #1d2836; --on-surface: #e6ebf2; --on-surface-variant: #9aabbf; --outline: #3a4a5f; --outline-variant: #2a3a4f; --heading: #cfe0ff; --ok: #8fd99c; --ok-container: #16351d; --err: #f2b8b5; --err-container: #5c1410; --accent-1: #4a9fe0; --accent-2: #2ecc71; --accent-3: #e67e22; --accent-4: #9b59b6; /* Institutional chrome — kept dark in both themes, like the rest of the site. */ --topbar-bg: #0b1828; --header-bg: #161f2b; --header-border: #24364f; --footer-bg: #0b1828; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-pill: 999px; --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.3); --elev-2: 0 2px 6px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5); --state-hover: rgba(255,255,255,.07); --state-press: rgba(255,255,255,.11); color-scheme: dark; } /* ---------- Light theme: opt-in via the shared toggle ---------- */ html[data-theme="light"] { --primary: #0066cc; --on-primary: #ffffff; --primary-container: #d6e6f8; --on-primary-container: #08315e; --surface: #eef5fc; --surface-card: #ffffff; --surface-variant: #f5f6f7; --on-surface: #1a1c1e; --on-surface-variant: #5c6f82; --outline: #c3c8d0; --outline-variant: #dde2e9; --heading: #003670; --ok: #1d6c2e; --ok-container: #d6efdb; --err: #b3261e; --err-container: #f9dedc; --accent-1: #0066cc; --accent-2: #2ecc71; --accent-3: #e67e22; --accent-4: #9b59b6; --header-bg: #ffffff; --header-border: #d6e8f9; --elev-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px 1px rgba(0,0,0,.04); --elev-2: 0 2px 6px 2px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.10); --state-hover: rgba(0,0,0,.05); --state-press: rgba(0,0,0,.09); color-scheme: light; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; background: var(--surface); color: var(--on-surface); } /* Visible focus ring for every interactive control (WCAG 2.2). */ :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: var(--shape-sm); } /* ---------- Top bar (institutional band) ---------- */ .top-bar { background: var(--topbar-bg); color: #fff; font-size: 12px; padding: 6px 0; } .top-bar-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .top-bar .org-name { font-weight: 600; color: #d4e6f7; } .top-bar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .offline-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: var(--shape-pill); padding: 2px 10px; font-size: 11px; font-weight: 600; } .theme-toggle { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: var(--shape-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1.5; transition: background .2s; } .theme-toggle:hover { background: rgba(255,255,255,.22); } /* ---------- Header (logo) ---------- */ .site-header { background: var(--header-bg); border-bottom: 3px solid var(--header-border); box-shadow: var(--elev-1); position: sticky; top: 0; z-index: 5; } .header-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 20px; height: 72px; } .logo-wrap { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-icon { width: 48px; height: 48px; background: #003670; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-icon svg { width: 28px; height: 28px; fill: #fff; } .logo-text { line-height: 1.2; } .logo-text strong { display: block; font-size: 22px; font-weight: 700; color: var(--heading); letter-spacing: -.5px; } .logo-text span { font-size: 11px; color: var(--on-surface-variant); letter-spacing: .5px; text-transform: uppercase; } /* ---------- Breadcrumb ---------- */ .breadcrumb-bar { background: var(--surface-variant); border-bottom: 1px solid var(--outline-variant); padding: 10px 0; } .breadcrumb-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--on-surface-variant); flex-wrap: wrap; } .breadcrumb-inner a { color: var(--primary); text-decoration: none; } .breadcrumb-inner a:hover { text-decoration: underline; } .breadcrumb-sep { color: var(--on-surface-variant); opacity: .6; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: var(--shape-pill); background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease; } .btn:hover { box-shadow: var(--elev-1); } .btn:active { box-shadow: none; } .btn svg { width: 18px; height: 18px; fill: currentColor; } .btn.outlined { background: transparent; color: var(--primary); border: 1px solid var(--outline); } .btn.outlined:hover { background: var(--state-hover); box-shadow: none; } .btn.text { background: transparent; color: var(--primary); padding: 0 12px; } .btn.text:hover { background: var(--state-hover); box-shadow: none; } /* ---------- Main ---------- */ main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 20px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .page-head h1 { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--heading); } .page-sub { margin: 4px 0 0; font-size: 0.875rem; color: var(--on-surface-variant); } .data-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } h2 { margin: 28px 0 12px; font-size: 1.05rem; font-weight: 600; color: var(--heading); } .muted { color: var(--on-surface-variant); } #status { min-height: 1.25em; margin: 8px 0 0; font-size: 0.875rem; } #status.ok { color: var(--ok); } #status.err { color: var(--err); } /* ---------- KPI cards ---------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; } .kpi { background: var(--surface-card); border: 1px solid var(--outline-variant); border-radius: var(--shape-md); padding: 16px; box-shadow: var(--elev-1); } .kpi .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--heading); } .kpi .kpi-label { margin-top: 4px; font-size: 0.8125rem; color: var(--on-surface-variant); } /* ---------- Controls / filters ---------- */ .controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 20px; padding: 16px; background: var(--surface-card); border: 1px solid var(--outline-variant); border-radius: var(--shape-md); } .field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; color: var(--on-surface-variant); } .field-grow { flex: 1 1 200px; } .field select, .field input[type="search"] { height: 40px; padding: 0 12px; border: 1px solid var(--outline); border-radius: var(--shape-sm); background: var(--surface); color: var(--on-surface); font: inherit; font-size: 0.9375rem; } .controls .btn.text { align-self: center; } /* ---------- Chart ---------- */ .chart { margin: 0; } .chart-svg-wrap { width: 100%; } #chart-svg { width: 100%; height: 220px; display: block; background: var(--surface-card); border: 1px solid var(--outline-variant); border-radius: var(--shape-md); } .chart-bar { transition: opacity .12s ease; } .chart-label { font-size: 12px; fill: var(--on-surface-variant); } .chart-value { font-size: 13px; font-weight: 700; fill: var(--on-surface); } #chart-caption { margin-top: 8px; font-size: 0.8125rem; } /* ---------- Table ---------- */ .table-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .table-wrap { overflow-x: auto; border: 1px solid var(--outline-variant); border-radius: var(--shape-md); background: var(--surface-card); } #esiti-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } #esiti-table th, #esiti-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--outline-variant); white-space: nowrap; } #esiti-table td[data-num], #esiti-table th[data-num] { text-align: right; } #esiti-table thead th { position: sticky; top: 0; background: var(--surface-variant); z-index: 1; } #esiti-table thead th button { display: inline-flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; color: var(--on-surface-variant); font: inherit; font-weight: 600; font-size: 0.8125rem; cursor: pointer; padding: 0; } #esiti-table th[data-num] button { justify-content: flex-end; } #esiti-table thead th button::after { content: ""; font-size: 0.75em; opacity: .5; } #esiti-table th[aria-sort="ascending"] button::after { content: "▲"; opacity: 1; } #esiti-table th[aria-sort="descending"] button::after { content: "▼"; opacity: 1; } #esiti-table tbody tr:hover { background: var(--state-hover); } #table-empty { padding: 16px; } /* ---------- Footer (unified site footer) ---------- */ .site-footer { background: var(--footer-bg); color: #a8c9ee; padding: 40px 0 24px; margin-top: 48px; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } .footer-brand strong { font-size: 18px; color: #fff; display: block; margin-bottom: 6px; } .footer-brand p { font-size: 13px; line-height: 1.6; margin: 0 0 8px; } .footer-brand .footer-note { color: #8fb4dc; } .footer-brand .footer-note a { color: #cfe0ff; } .footer-col h4 { font-size: 13px; font-weight: 700; color: #d4e6f7; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 12px; } .footer-col a { display: block; font-size: 13px; color: #a8c9ee; text-decoration: none; margin-bottom: 6px; } .footer-col a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } /* Filters stack and go full width; 16px inputs avoid iOS focus auto-zoom. */ .field { flex: 1 1 100%; } .field select, .field input[type="search"] { width: 100%; font-size: 16px; } .controls .btn.text { align-self: stretch; min-height: 44px; } } @media (max-width: 560px) { .header-inner { height: 56px; } .logo-icon { width: 40px; height: 40px; } .logo-icon svg { width: 22px; height: 22px; } .logo-text strong { font-size: 18px; } .top-bar-inner { justify-content: center; text-align: center; } .theme-toggle { min-height: 38px; padding: 7px 14px; } .page-head { align-items: stretch; } .data-actions { width: 100%; } .data-actions .btn { flex: 1 1 auto; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } /* Table → stacked cards: no horizontal scroll on phones. Sorting stays available because the header buttons become a row of chips. */ .table-wrap { overflow-x: visible; border: 0; background: none; } #esiti-table, #esiti-table tbody, #esiti-table thead { display: block; } #esiti-table thead tr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; background: var(--surface-variant); border: 1px solid var(--outline-variant); border-radius: var(--shape-md); margin-bottom: 10px; } #esiti-table thead tr::before { content: "Ordina per:"; width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--on-surface-variant); } #esiti-table thead th { position: static; padding: 0; border: 0; background: none; } #esiti-table thead th button { width: auto; min-height: 32px; padding: 5px 12px; background: var(--surface-card); border: 1px solid var(--outline); border-radius: var(--shape-pill); font-size: 0.75rem; } #esiti-table th[aria-sort="ascending"] button, #esiti-table th[aria-sort="descending"] button { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } #esiti-table tbody tr { display: block; padding: 10px 12px; margin-bottom: 10px; background: var(--surface-card); border: 1px solid var(--outline-variant); border-radius: var(--shape-md); } #esiti-table tbody tr:hover { background: var(--surface-card); } #esiti-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border-bottom: 0; white-space: normal; text-align: right; } #esiti-table td::before { content: attr(data-label); flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--on-surface-variant); text-align: left; } /* First cell (Profilo) doubles as the card title. */ #esiti-table td:first-child { display: block; text-align: left; font-weight: 700; color: var(--heading); padding-bottom: 6px; border-bottom: 1px solid var(--outline-variant); margin-bottom: 6px; } #esiti-table td:first-child::before { display: none; } } /* Reduced motion: drop bar/button transitions (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce) { .btn, .theme-toggle, .chart-bar { transition: none; } }