/* ============================================================================ * odc-pages.css — Layer tipografico/finitura condiviso (refresh 2026-07) * ============================================================================ * Incluso DOPO tm-theme.css dalle pagine interne (onboarding, dettagli, * registrazioni, dashboard, ...). Le pagine aderiscono aggiungendo la classe * `odc-page` al . Regole volutamente poche e a basso rischio: * tipografia display per i titoli di pagina e numeri "da tabellone". * ========================================================================= */ :root { --font-display: "Barlow Condensed", Inter, system-ui, sans-serif; } /* Titolo principale di pagina */ .odc-page h1 { font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; } /* Punteggi grandi (dettaglio partita, rigori) */ .odc-page .score, .odc-page .score-team1, .odc-page .score-team2, .odc-page .penalty-score, .odc-page .penalty-shootout-score { font-family: var(--font-display); font-weight: 900; font-style: italic; letter-spacing: 0.01em; } /* Numeri statistici grandi (dashboard, carriera): le pagine marcano gli elementi con la classe esistente più comune; regole aggiuntive mirate possono essere appese qui sotto per-pagina. */ .odc-page .stat-value, .odc-page .stats-value, .odc-page .kpi-value { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em; } /* ── Storico tornei (dettagli-squadra / dettagli-giocatore) ─────────────── */ .odc-hist-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .odc-hist-row:last-child { border-bottom: none; } .odc-hist-row .hc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--hc, #94a3b8); box-shadow: 0 0 10px color-mix(in oklab, var(--hc, #94a3b8) 55%, transparent); } .odc-hist-row .hc-main { flex: 1; min-width: 0; } .odc-hist-row .hc-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 16px; letter-spacing: 0.02em; line-height: 1.1; } .odc-hist-row .hc-sub { margin-top: 2px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .odc-hist-row .hc-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 999px; color: color-mix(in oklab, var(--hc, #94a3b8) 45%, #fff); background: color-mix(in oklab, var(--hc, #94a3b8) 14%, transparent); border: 1px solid color-mix(in oklab, var(--hc, #94a3b8) 35%, transparent); } /* ============================================================================ * Componenti scheda (dettagli squadra + dettagli giocatore) * ========================================================================= */ /* ══ Barra torneo ═══════════════════════════════════════════════════════ Stessa identità della home (logo nudo + titolo Barlow condensed + sezione in occhiello): prima qui c'era solo il nome della squadra e non si capiva in che torneo si stesse guardando la rosa. L'edizione è una pill di *sola lettura*: il cambio edizione non è più esposto nella PWA (vedi tm-edition-menu.js), quindi niente chevron. */ .odc-appbar{ display:flex; align-items:center; gap:12px; } .odc-appbar-logo{ width:52px; height:52px; flex-shrink:0; } .odc-appbar-logo img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); } .odc-appbar-titles{ flex:1; min-width:0; } .odc-appbar-title{ margin:0; font-family:"Barlow Condensed", Inter, system-ui, sans-serif; font-style:italic; font-weight:900; text-transform:uppercase; font-size:26px; line-height:.95; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .odc-appbar-sub{ margin-top:4px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color: color-mix(in oklab, var(--primary) 55%, #fff); } .odc-edition-pill{ display:inline-flex; align-items:center; gap:8px; flex-shrink:0; padding:9px 14px; border-radius:999px; background: color-mix(in oklab, var(--primary) 9%, transparent); border:1px solid color-mix(in oklab, var(--primary) 40%, transparent); color: color-mix(in oklab, var(--primary) 20%, #fff); font-weight:900; font-size:13px; white-space:nowrap; } /* ══ Identità squadra ═══════════════════════════════════════════════════ Niente card: era un riquadro con fondo/bordo che, sotto l'appbar, leggeva come un secondo header squadrato staccato di netto dal resto (bocciato dall'owner il 24/07). Il blocco vive nudo sul gradiente del torneo. */ .odc-team-head{ padding: 6px 2px 0; margin-bottom: 18px; } .odc-team-head-top{ display:flex; align-items:center; gap:16px; } .odc-team-head-id{ min-width:0; flex:1; } /* Righe identità: icona nel colore torneo + valore. Erano tre pill impilate che su mobile occupavano mezza schermata. */ .odc-meta-list{ margin-top:10px; display:flex; flex-direction:column; gap:7px; } .odc-meta-row{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; color: rgba(255,255,255,.88); min-width:0; } .odc-meta-row > i{ width:16px; text-align:center; flex-shrink:0; color: color-mix(in oklab, var(--primary) 78%, #fff); font-size:13px; } .odc-meta-row > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .odc-cap{ flex-shrink:0; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.08em; color: color-mix(in oklab, var(--primary) 25%, #fff); border:1px solid color-mix(in oklab, var(--primary) 55%, transparent); background: color-mix(in oklab, var(--primary) 12%, transparent); } /* Azioni: prima erano tre bottoni tondi senza etichetta in alto a destra, si capiva solo per tentativi. */ .odc-actions{ margin-top:16px; display:grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap:10px; } .odc-action{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 10px; border-radius:999px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); color:#fff; font-weight:850; font-size:13px; cursor:pointer; transition:.18s ease; } .odc-action > i{ color: color-mix(in oklab, var(--primary) 72%, #fff); font-size:13px; } .odc-action:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); } .odc-action:active{ transform: scale(.97); } /* ══ Tab a sottolineatura ═══════════════════════════════════════════════ Le pill Rosa/Stats non davano il senso di "due viste della stessa scheda": la sottolineatura sì, e costa meno spazio verticale. */ .odc-tabs{ display:flex; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:4px; margin-bottom:16px; } .odc-tab{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 6px 11px; background:transparent; border:0; border-bottom:2px solid transparent; color: rgba(255,255,255,.62); font-weight:900; font-size:13px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:.18s ease; } .odc-tab > i{ font-size:13px; } .odc-tab:hover{ color:#fff; } .odc-tab.active{ color: color-mix(in oklab, var(--primary) 22%, #fff); border-bottom-color: var(--primary); } /* ══ Strip statistiche squadra ══════════════════════════════════════════ */ .odc-panel-label{ font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.55); margin-bottom:14px; } .odc-scope-note{ font-size:11px; font-weight:800; color: rgba(255,255,255,.48); text-align:right; min-width:0; } .odc-stat-strip{ display:flex; align-items:stretch; } .odc-stat{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 4px; border-left:1px solid rgba(255,255,255,.08); text-align:center; } .odc-stat:first-child{ border-left:0; } .odc-stat-ico{ font-size:14px; color: rgba(255,255,255,.55); } .odc-stat-num{ font-weight:900; font-size:22px; line-height:1; letter-spacing:-.5px; } /* Le etichette vanno a capo invece di troncarsi: a 375px "GOL SUBITI" diventava "GOL SU…" e non si capiva quale dato fosse. */ .odc-stat-lbl{ font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color: rgba(255,255,255,.50); max-width:100%; } /* Donut: SVG e non conic-gradient, così il centro resta trasparente sopra lo sfondo del torneo invece di doverlo ridipingere. */ .odc-donut{ position:relative; width:56px; height:56px; } .odc-donut svg{ width:100%; height:100%; transform: rotate(-90deg); } .odc-donut .track{ stroke: rgba(255,255,255,.10); } .odc-donut .val{ stroke: var(--primary); stroke-linecap: round; transition: stroke-dasharray .5s ease; } .odc-donut-txt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; letter-spacing:-.3px; } /* ══ Riga statistiche giocatore ═════════════════════════════════════════ */ .odc-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .odc-sec-link{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; color: color-mix(in oklab, var(--primary) 30%, #fff); font-weight:900; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; } .odc-plist{ display:flex; flex-direction:column; gap:10px; } .odc-prow{ width:100%; display:grid; grid-template-columns: 24px 36px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px; border-radius:18px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#fff; text-align:left; cursor:pointer; transition:.15s ease; } .odc-prow.plain{ grid-template-columns: 36px minmax(0,1fr) auto; } .odc-prow:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); transform: translateX(3px); } .odc-prow.top{ background: color-mix(in oklab, var(--primary) 9%, transparent); border-color: color-mix(in oklab, var(--primary) 32%, transparent); } .odc-prank{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); } .odc-prow.top .odc-prank{ background: color-mix(in oklab, var(--primary) 82%, #000); color:#fff; } .odc-pphoto{ width:36px; height:36px; border-radius:50%; object-fit:cover; background: rgba(255,255,255,.08); } .odc-pinfo{ min-width:0; } /* Su iPhone al nome restano ~120px fra foto e blocco statistiche: su una riga sola quasi ogni nome e cognome finiva in "Vincenzo Gio…". Due righe, poi ellissi — il nome del giocatore è il dato principale della riga. */ .odc-pname{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-weight:900; font-size:14px; letter-spacing:-.2px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; } .odc-pmeta{ display:block; margin-top:2px; font-size:11.5px; font-weight:800; color: rgba(255,255,255,.55); } .odc-pmeta b{ color: color-mix(in oklab, var(--primary) 26%, #fff); font-weight:900; } .odc-pstats{ display:flex; align-items:center; gap:7px; } .odc-pstat{ text-align:center; min-width:22px; } .odc-pstat-num{ display:block; font-weight:900; font-size:15px; line-height:1; } .odc-pstat-lbl{ display:block; margin-top:3px; font-size:7.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: rgba(255,255,255,.45); } .odc-pcard{ display:flex; flex-direction:column; align-items:center; gap:4px; } .odc-pcard i{ font-size:11px; } .odc-pcard .y{ color:#facc15; } .odc-pcard .r{ color:#ef4444; } .odc-pcard span{ font-size:10px; font-weight:900; color: rgba(255,255,255,.75); } /* Il mockup ha un voto qui: non esiste un voto in archivio, quindi il badge porta le presenze — stesso peso visivo, dato vero. */ .odc-pbadge{ min-width:34px; padding:5px 4px; border-radius:12px; text-align:center; background: rgba(255,255,255,.07); } .odc-pbadge-num{ display:block; font-weight:900; font-size:13px; line-height:1; color: rgba(255,255,255,.85); } .odc-pbadge-lbl{ display:block; margin-top:3px; font-size:7.5px; font-weight:800; letter-spacing:.06em; color: rgba(255,255,255,.50); } .odc-prow.top .odc-pbadge{ background: color-mix(in oklab, var(--primary) 62%, #000); } .odc-prow.top .odc-pbadge-num{ color:#fff; } .odc-prow.top .odc-pbadge-lbl{ color: rgba(255,255,255,.72); } /* Su iPhone "MORMON LEAGUE" a 26px non ci sta accanto alla pill edizione e finiva troncato con i puntini: scala titolo, logo e pill insieme. */ @media (max-width: 420px){ .odc-appbar-logo{ width:46px; height:46px; } .odc-appbar-title{ font-size:22px; } .odc-appbar-sub{ font-size:10px; letter-spacing:.14em; } .odc-edition-pill{ padding:8px 11px; font-size:12px; gap:6px; } } @media (max-width: 380px){ .odc-pstats{ gap:7px; } .odc-pbadge{ min-width:34px; } .odc-pbadge-num{ font-size:13px; } .odc-stat-num{ font-size:19px; } } /* ── Testata giocatore ────────────────────────────────────────────────────── Stile figurina: foto a tutta altezza a sinistra, numero in filigrana dietro, nome su due righe col cognome nel colore del torneo. */ .odc-phero { position: relative; display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 8px; padding: 0 16px 14px 0; overflow: hidden; } /* Bagliore dal colore del torneo: sostituisce lo sfondo "da stadio" del mockup senza aggiungere immagini da scaricare. */ .odc-phero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(115% 80% at 6% 45%, color-mix(in oklab, var(--primary) 24%, transparent), transparent 62%), radial-gradient(80% 60% at 100% 0%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 70%); } .odc-phero-num { position: absolute; left: 32%; top: 0; z-index: 0; font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 148px; line-height: 0.78; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.075); pointer-events: none; user-select: none; } .odc-phero-photo { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; } .odc-phero-photo > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* La foto in archivio è un rettangolo con lo sfondo dentro (erba, muro...): una maschera ovale ne sfuma i bordi sul fondo del torneo e la fa leggere come uno scontorno, senza toccare i file su Storage. */ .odc-phero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; -webkit-mask-image: radial-gradient(ellipse 54% 64% at 50% 40%, #000 44%, rgba(0, 0, 0, 0.35) 78%, transparent 100%); mask-image: radial-gradient(ellipse 54% 64% at 50% 40%, #000 44%, rgba(0, 0, 0, 0.35) 78%, transparent 100%); filter: contrast(1.06) saturate(1.06); } .odc-phero-photo .initials { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 54px; color: rgba(255, 255, 255, 0.22); } .odc-phero-id { position: relative; z-index: 1; min-width: 0; } .odc-phero-team { grid-column: 1 / -1; margin: 14px 0 0 16px; position: relative; z-index: 1; } .odc-phero-name { margin: 0; display: block; } .odc-phero-first, .odc-phero-last { display: block; font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.01em; overflow-wrap: anywhere; } .odc-phero-first { font-size: 30px; color: #fff; } .odc-phero-last { font-size: 40px; background: linear-gradient( 175deg, color-mix(in oklab, var(--primary) 25%, #fff) 0%, var(--primary) 55%, color-mix(in oklab, var(--primary) 72%, #000) 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } .odc-phero-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .odc-phero-numwrap { display: inline-flex; align-items: baseline; gap: 8px; } .odc-phero-numsm { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 34px; line-height: 1; color: color-mix(in oklab, var(--primary) 80%, #fff); } .odc-phero-slash { font-size: 20px; font-weight: 900; color: rgba(255, 255, 255, 0.22); } .odc-role-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; } .odc-role-chip i { color: color-mix(in oklab, var(--primary) 72%, #fff); font-size: 12px; } .odc-phero-ed { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .odc-phero-ed i { color: color-mix(in oklab, var(--primary) 65%, #fff); } /* ── Barra azioni ─────────────────────────────────────────────────────────── */ .odc-actbar { display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 4px; margin-bottom: 14px; } .odc-actbtn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 4px; background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-weight: 850; font-size: 13px; cursor: pointer; transition: 0.18s ease; } .odc-actbtn:first-child { border-left: 0; } .odc-actbtn i { color: color-mix(in oklab, var(--primary) 72%, #fff); font-size: 13px; } .odc-actbtn:active { transform: scale(0.97); } /* ── Righe etichetta → valore ──────────────────────────────────────────────── */ .odc-rows { display: flex; flex-direction: column; } .odc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .odc-row:first-child { border-top: 0; } .odc-row-lbl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; font-weight: 800; color: rgba(255, 255, 255, 0.68); } .odc-row-lbl i { width: 16px; text-align: center; flex-shrink: 0; font-size: 13px; color: color-mix(in oklab, var(--primary) 70%, #fff); } .odc-row-val { font-size: 14px; font-weight: 900; color: #fff; text-align: right; } @media (max-width: 420px) { .odc-phero { grid-template-columns: 44% 1fr; } .odc-phero-first { font-size: 26px; } .odc-phero-last { font-size: 34px; } .odc-phero-num { font-size: 128px; } .odc-phero-numsm { font-size: 30px; } .odc-actbtn { font-size: 12px; gap: 6px; } .odc-tab { font-size: 11.5px; gap: 6px; padding: 12px 4px 10px; } } /* ══ Filtri stats (dettagli-squadra + dettagli-giocatore) ═══════════════ Pill compatte, non un secondo segmented control. Ogni pill torneo prende il colore del suo torneo (--sc); "Totale" e le edizioni restano neutre. */ .statsScope{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding: 2px 2px 12px; } .statsScope::-webkit-scrollbar{ display:none; } .statsScope[hidden]{ display:none; } .scopePill{ flex: 0 0 auto; display:inline-flex; align-items:center; gap:7px; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.72); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); white-space: nowrap; cursor: pointer; transition: .18s ease; } .scopePill .scDot{ width:7px; height:7px; border-radius:50%; background: var(--sc, rgba(255,255,255,.5)); flex-shrink:0; } .scopePill:hover{ color:#fff; } .scopePill.active{ color: color-mix(in oklab, var(--sc, #fff) 30%, #fff); background: color-mix(in oklab, var(--sc, #94a3b8) 16%, transparent); border-color: color-mix(in oklab, var(--sc, #94a3b8) 45%, transparent); }