/* LA STRUTTURA della skin — quello che le classi sul vogliono dire. * * Un tema che cambia solo i colori fa quarantasette siti dello stesso colore diverso. Questo è * il resto: dove stanno gli sport, cosa vede il giocatore appena entra, quanto stanno strette le * partite, dove finisce la schedina. * * File a parte, non `tb.css`: quello è dell'altra sessione, e due mani sullo stesso foglio è il * modo di perdere il lavoro di qualcuno. Qui ci sono SOLO gli scostamenti dal default — una * skin che non sceglie niente non paga una riga. * * Tutto passa dai token, mai da colori scritti a mano: così una struttura funziona con * qualunque tavolozza, compresa una che l'operatore inventa domani. */ /* ── L'INTESTAZIONE ────────────────────────────────────────────────────── */ /* Alta: logo grande, menu sotto. Da portale. */ .lay-header-tall .hdr-in { flex-wrap: wrap; padding-block: 14px; row-gap: 10px; } .lay-header-tall .brand { font-size: 1.5em; } .lay-header-tall .nav { order: 3; flex-basis: 100%; padding-top: 10px; border-top: 1px solid var(--line); } /* Centrata: logo al centro, azioni ai lati. Da casinò. */ .lay-header-center .hdr-in { position: relative; justify-content: space-between; } .lay-header-center .brand { position: absolute; left: 50%; transform: translateX(-50%); } .lay-header-center .nav { order: -1; } @media (max-width: 860px) { /* Su mobile il logo centrato si scontra con tutto il resto: torna al suo posto. */ .lay-header-center .brand { position: static; transform: none; } } /* ── GLI SPORT ────────────────────────────────────────────────────────── */ /* Chip in alto: una riga che scorre, invece della colonna. Guadagna tutta la larghezza. */ .lay-rail-chips .cols { grid-template-columns: 1fr auto; } .lay-rail-chips .rail-l { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .lay-rail-chips .rail-l::-webkit-scrollbar { display: none; } .lay-rail-chips .rail-l .card { display: contents; } .lay-rail-chips .rail-l li, .lay-rail-chips .rail-l a { flex: 0 0 auto; white-space: nowrap; } /* Nascosti: chi ha un solo sport non ha bisogno di un elenco di uno. */ .lay-rail-hidden .rail-l { display: none; } .lay-rail-hidden .cols { grid-template-columns: 1fr auto; } /* ── QUANTO STANNO STRETTE LE PARTITE ─────────────────────────────────── */ /* Fitta: il doppio di partite senza scorrere. Un trader di sé stesso le vuole tutte a schermo. */ .lay-density-compact .ev { padding: 8px 10px; } .lay-density-compact .ev + .ev { margin-top: 6px; } .lay-density-compact .ev-h { margin-bottom: 6px; } .lay-density-compact .ev-name { font-size: .95em; } .lay-density-compact .px, .lay-density-compact .oc { padding-block: 7px; } /* ── LE QUOTE PER RIGA ────────────────────────────────────────────────── */ .lay-odds-three .ev-odds { grid-template-columns: repeat(3, 1fr); } .lay-odds-two .ev-odds { grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { /* Tre colonne su un telefono sono tre quote illeggibili. Il numero di una quota deve * restare leggibile: è l'unica cosa per cui il giocatore è lì. */ .lay-odds-three .ev-odds { grid-template-columns: repeat(2, 1fr); } } /* ── LA SCHEDINA ──────────────────────────────────────────────────────── */ /* Solo la barra in basso: tutta la larghezza al palinsesto. La barra c'è già (è quella di * mobile) — qui la si tiene anche sul desktop. */ .lay-slip-bar .rail-r { display: none; } .lay-slip-bar .cols { grid-template-columns: auto 1fr; } .lay-slip-bar .slipbar.has { display: flex; } /* ── COSA VEDE APPENA ENTRA ───────────────────────────────────────────── */ .hero { display: none; } .lay-hero-featured .hero.hero-featured, .lay-hero-promo .hero.hero-promo, .lay-hero-carousel .hero.hero-carousel { display: block; } .hero { margin-bottom: 14px; padding: clamp(14px, 3vw, 26px); border-radius: var(--r); background: linear-gradient(135deg, var(--navy-1), var(--navy-2)); border: 1px solid var(--line); } /* La promo: una fascia con l'AZIONE addosso. L'accento è il colore del «gioca», e qui lavora. */ .hero-promo { background: linear-gradient(120deg, var(--or), var(--or-2)); color: var(--on-or); border-color: transparent; } .hero-promo h2 { margin: 0 0 4px; font-size: clamp(18px, 2.4vw, 26px); } .hero-promo p { margin: 0 0 12px; opacity: .92; } .hero-promo .btn { background: var(--on-or); color: var(--or-d); font-weight: 700; } /* La partita del giorno: una card grande, con le sue quote vere. Non un'immagine finta. */ .hero-featured .hf-name { font-size: clamp(16px, 2vw, 22px); font-weight: 700; } .hero-featured .hf-when { color: var(--mute); font-size: .9em; margin-bottom: 12px; } /* Il carosello: scorre a mano, senza JavaScript. Un carosello che gira da solo è un carosello * che porta via il bottone da sotto il dito mentre lo si preme. */ .hero-carousel .hc-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .hero-carousel .hc-track::-webkit-scrollbar { display: none; } .hero-carousel .hc-item { flex: 0 0 min(340px, 84%); scroll-snap-align: start; padding: 16px; border-radius: var(--r-s); background: var(--navy-2); border: 1px solid var(--line); } @media (prefers-reduced-motion: reduce) { .hero-carousel .hc-track { scroll-behavior: auto; } }