/* ========================================================================== Pizza EAT — la pagina delle video guide. Terzo foglio, caricato solo da /guide/: la home e il blog non pagano niente per una pagina che non mostrano. Le classi della SCHEDA di un filmato non stanno qui: sono `.video-griglia`, `.video__tela`, `.video__tondo`, `.video__durata` e compagnia, e stanno in `sito.css` perche' le usa anche l'estratto in home. Qui c'e' solo quello che esiste unicamente su questa pagina: il percorso numerato, il campo di ricerca e gli annullamenti che la ricerca richiede. Nessun token nuovo, nessun colore scritto a mano: tutto viene da sito.css. L'ordine dei layer e' gia' dichiarato la': qui si aggiunge dentro quelli che ci sono, non se ne inventano di nuovi. ========================================================================== */ @layer componenti { /* --- Il campo di ricerca ------------------------------------------------- Senza JavaScript il campo NON compare: `sito.css` non c'entra, la classe `js` la mette lo script in linea del (PE_SCRIPT_JS) prima del primo disegno. Quindi o il campo c'e' dall'inizio o non c'e' mai — non compare per poi sparire. Un campo di ricerca che non cerca e' peggio di nessun campo: senza JS restano tutte le schede visibili, e vanno bene cosi'. ------------------------------------------------------------------------ */ .video-cerca { display: none; } .js .video-cerca { display: block; max-width: var(--stretto); } .video-cerca__et { display: block; font-size: .8125rem; font-weight: 700; color: var(--testo-2); margin-bottom: var(--s2); } .video-cerca__riga { position: relative; display: flex; gap: var(--s3); } .video-cerca__campo { flex: 1 1 auto; min-width: 0; padding: .75rem var(--s4); font: inherit; font-size: 1rem; color: var(--testo); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--pillola); } .video-cerca__campo::placeholder { color: var(--testo-3); } .video-cerca__campo:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-color: transparent; } /* La crocetta che certi browser mettono da soli dentro type=search: ne abbiamo gia' uno, e due bottoni che fanno la stessa cosa confondono. */ .video-cerca__campo::-webkit-search-cancel-button { display: none; } .video-cerca__x { flex: 0 0 auto; padding: .75rem var(--s4); font: inherit; font-size: .875rem; font-weight: 600; color: var(--testo-2); background: transparent; border: 1px solid var(--linea); border-radius: var(--pillola); cursor: pointer; } .video-cerca__x:hover { color: var(--testo); border-color: var(--testo-3); } .video-cerca__aiuto { margin-top: var(--s3); } .video-cerca__esito { min-height: 1.5em; margin-top: var(--s3); } /* Vuota non deve lasciare uno scalino: la riga esiste sempre perche' e' `aria-live`, e un elemento che compare sposterebbe la pagina. */ .video-cerca__esito:empty { min-height: 1.5em; } /* --- Il percorso «Steps» ------------------------------------------------- E' un
    , non un
    con dei numeri disegnati: cosi' un lettore di schermo annuncia «1 di 6» da solo, e il numero resta testo vero anche in stampa. La SCHEDA dentro e' la stessa identica delle griglie — qui si aggiunge solo il pallino e la linea che li unisce. ------------------------------------------------------------------------ */ .video-percorso { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .video-passo { position: relative; } .video__passo { position: absolute; z-index: 2; top: calc(var(--s3) * -1); left: calc(var(--s3) * -1); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .9375rem; font-weight: 700; background: var(--arancio); color: var(--arancio-su); box-shadow: 0 4px 14px rgba(0,0,0,.22); } /* La linea che unisce un passo al successivo. Solo da tablet in su: in colonna singola i passi sono gia' uno sotto l'altro e una linea orizzontale punterebbe nel vuoto. */ @media (min-width: 48rem) { .video-passo::after { content: ''; position: absolute; z-index: 1; top: calc(var(--s3) * -1 + 1.125rem); left: calc(100% + var(--s3)); width: calc(var(--s5) - var(--s3) * 2); border-top: 2px dashed color-mix(in srgb, var(--arancio) 55%, transparent); } /* L'ultimo di ogni riga non ha un dopo a cui puntare. Non sapendo quanti ne stanno per riga, la linea si spegne sull'ultimo in assoluto e per gli altri si accetta che a fine riga esca di poco: la griglia ha `gap`, non tocca il bordo. */ .video-passo:last-child::after { content: none; } } } @layer sezioni { /* Testata, aiuto, percorso e filoni restano sempre disegnati. `sito.css` mette `content-visibility: auto` su tutte le sezioni sotto la piega, con `contain-intrinsic-size: auto 0 auto 800px` — cioe' il browser RICORDA l'altezza vera. Sulla home e' un guadagno; qui no, e non e' una questione di gusto: filtrando, una sezione con tre schede nascoste su quattro terrebbe l'altezza di prima e diventerebbe una scatola vuota alta 800 px, con la pagina che sobbalza a ogni tasto premuto. Qui le griglie SONO la pagina, non un di piu' sotto la piega. */ .guide-testata, .guide-aiuto, .guide-passi, .guide-filone { content-visibility: visible; } .guide-testata { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); } .guide-testata .h1 { margin-top: var(--s3); } } @layer utility { /* `[hidden]` e' `display:none` solo per regola dell'user agent, e QUALUNQUE `display:` dichiarato su `.sez` o su `.video` lo scavalca senza dire niente. La ricerca nasconde con `hidden` proprio perche' toglie l'elemento anche dall'albero di accessibilita' e dal giro del tasto Tab: se poi il `display` lo rimette in pagina, si perde tutto e il difetto si vede solo a certe larghezze. */ [hidden] { display: none !important; } @media print { /* Su carta la ricerca non serve, e il percorso si stampa disteso. */ .video-cerca { display: none !important; } .guide-testata, .guide-aiuto, .guide-passi, .guide-filone { content-visibility: visible; } } }