/* ═══ paf-sheet — guscio del bottom-sheet mobile ════════════════════════ * * Sostituisce le vecchie regole di #modulo-fisso-prenota dentro * @media(max-width:640px) in style.css (rimosse insieme a questo file). * Riscritto da zero (02/09/2026, punto 2 del piano in 4 fasi sul box * "Prenota Subito" - vedi paf-sheet.js per il resto della storia): il * modello precedente calcolava la traslazione su un'altezza diversa da * quella reale (contenuto a display:none durante il drag, misura senza * padding, breakpoint disallineato dal JS). Qui il body non e' MAI * display:none - da collassato sta semplicemente sotto il bordo dello * schermo via transform, la sua altezza resta sempre quella vera e * paf-sheet.js la legge con un ResizeObserver invece di ricostruirla a * mano. * * Contratto: 3 nodi, letti da paf-sheet.js via attributo, non selettore * di classe - [data-sheet] (contenitore), [data-sheet-peek] (riga * sempre visibile, contiene anche il drag-handle), [data-sheet-body] * (contenuto, quello che il collasso nasconde sotto il bordo). Sopra il * breakpoint (data-sheet-breakpoint, oggi 767) il componente e' inerte: * queste regole vivono tutte dentro la stessa media query. */ /* Il backdrop e' creato da getBackdrop() in paf-sheet.js indipendentemente dal breakpoint (gira sempre, appena serve al primo open()) - sopra 767px .paf-sheet-backdrop (dentro la media query sotto) non si applica affatto, il nodo resterebbe senza NESSUNO stile invece che esplicitamente nascosto. In pratica innocuo (open() e' gia' un no-op sopra il breakpoint, quindi il nodo resta senza classe is-visible), ma una regola esplicita qui lo rende un fatto dichiarato, non un comportamento di bordo su cui contare. */ .paf-sheet-backdrop { display: none; } @media (max-width: 767px) { /* ⚠️ BUG trovato in test locale (02/09/2026), stesso sintomo del vecchio modello ma causa diversa: con bottom:0 e nessun transform, un box piu' alto della viewport (peek+body insieme spesso superano 709px su iPhone) risale gia' da solo sopra il bordo superiore - position:fixed non ritaglia nulla, occupa semplicemente lo spazio della sua altezza naturale ancorato al fondo. Il collasso allora non e' "sposta il box giu' di (altezza_body)" (quello che il calcolo faceva): e' "porta il fondo del BODY a combaciare col fondo del PEEK", che e' un'altra quantita' - dipende da quanto il box intero gia' risale di suo, non solo dall'altezza del body. Prima correzione tentata (max-height:100dvh + overflow:hidden sul contenitore) sbagliata: clampa l'ALTEZZA del box che riceve il transform, ma la traslazione calcolata da JS assume ancora l'altezza vera (scrollHeight) - le due misure divergono e il bordo del peek collassato finisce a meta' schermo invece che al bordo. Fix corretto: il contenitore NON ha mai un'altezza clampata (resta auto, la sua altezza vera e' sempre peek+body); e' [data-sheet-body] con la sua max-height (sotto) a impedire che il box nel suo insieme superi mai il viewport - quella max-height include gia' il calcolo giusto (92dvh - peek), la stessa quantita' che paf-sheet.js legge per --sheet-collapsed. */ [data-sheet] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10001; border-radius: 38px 38px 0 0; box-shadow: 0 -6px 12px rgba(0, 0, 0, .12); background: #fff; /* Stessa curva degli sheet modali di sistema iOS (decelera forte in chiusura, leggermente piu' morbida in apertura). --sheet-collapsed e' scritta da paf-sheet.js (ResizeObserver, mai un numero fisso in CSS): l'offset da collassato = altezza body - altezza peek. */ transform: translateY(var(--sheet-translate, var(--sheet-collapsed, 100%))); transition: transform .35s cubic-bezier(.32, .72, 0, 1); touch-action: none; } [data-sheet].is-dragging { transition: none; } /* Il body non collassa MAI a display:none/max-height:0 - resta sempre con la sua altezza vera, overflow-y:auto per lo scroll interno da aperto. E' il contenitore [data-sheet] che si sposta sotto lo schermo con transform, non il body che sparisce. ⚠️ touch-action:pan-y esplicito (nota Fable 02/09/2026): touch-action non e' ereditata dai discendenti come proprieta' CSS, ma il browser risolve il gesto touch risalendo l'albero se l'elemento toccato non ne dichiara una propria - senza questa riga [data-sheet-body] rischiava di ereditare "none" da [data-sheet] (serve li' per il drag sul peek) e restare non scrollabile al tocco su dispositivo reale, da verificare comunque perche' il comportamento esatto varia. */ /* Specificita' (0,4,0) di proposito: deve battere ".modulo-fisso-panel.is-open .modulo-fisso-panel-content" (0,3,0) di style.css, l'accordion desktop che su questo stesso nodo imposta max-height:1200px - qui su mobile il limite e' il viewport. */ [data-sheet][data-sheet-state] .paf-sheet-body[data-sheet-body], [data-sheet-body] { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; /* Scrollbar nascosta ma scroll attivo: su desktop/trackpad la scrollbar del body appariva a fianco del contenuto, un rettangolo grigio verticale dentro un pannello che altrove non ne mostra mai una - il touch reale (mobile) non ha comunque una scrollbar persistente, questa era visibile solo con mouse/trackpad. */ scrollbar-width: none; /* vh prima, dvh dopo (nota Fable 02/09/2026): un browser senza supporto per dvh ignora la seconda riga per intero (proprieta' invalida, non solo il valore) e resta sulla prima - senza questa riga di fallback max-height risultava non dichiarata affatto li', non semplicemente "meno precisa". */ max-height: calc(92vh - var(--sheet-peek-height, 130px)); max-height: calc(92dvh - var(--sheet-peek-height, 130px)); } /* Webkit (Chrome/Safari) non rispetta scrollbar-width - serve il suo pseudo-elemento dedicato per lo stesso risultato. */ [data-sheet-body]::-webkit-scrollbar { display: none; } /* ⚠️ BUG trovato in test locale (02/09/2026, screenshot utente: pannello aperto tutto bianco sotto il titolo): #modulo-prenota-content ha ANCORA la classe .modulo-fisso-panel-content (accordion generico, vedi style.css) oltre a paf-sheet-body - quella classe parte SEMPRE con opacity:0 (stile base, per l'animazione di apertura dell'accordion), tolto solo da ".modulo-fisso-panel.is-open .modulo-fisso-panel-content" - regola che ho scopato con :not([data-sheet]) per risolvere un conflitto di max-height (vedi commento li'), ma cosi' facendo ho tolto anche l'UNICA regola che riportava opacity a 1 per questo elemento, senza fornirne una equivalente qui: il body restava per sempre invisibile, presente nel DOM (misurabile, cliccabile) ma trasparente. */ [data-sheet-body] { opacity: 1; } /* flow-root (review Fable 02/09/2026): il drag-handle (::before sul peek, vedi sotto) ha margin-top - il margin di un pseudo-elemento sporge dal box del suo genitore se il genitore non ha un contesto di formattazione proprio (padding/border/overflow diversi da visible), lo stesso "collapsing margin" che normalmente si vede fra paragrafi adiacenti. Qui contribuiva a un peek che il JS misurava piu' corto di quanto visivamente occupava. measure() ora usa peekRect.bottom (robusto a prescindere), ma flow-root chiude anche la causa alla radice, non solo il sintomo. */ /* Grid, non piu' flow-root (che serviva solo a contenere il margine dell'handle: la grid lo fa ugualmente). Riga 1 = handle (::before), riga 2 = contenuto. Le varianti [data-sheet-peek-when] stanno tutte nella riga 2, sovrapposte: cosi' quella uscente puo' dissolversi sopra quella entrante, nello stesso posto. */ [data-sheet-peek] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); transition: height .35s cubic-bezier(.32, .72, 0, 1); } [data-sheet-peek]::before { grid-row: 1; grid-column: 1; } /* Mentre paf-sheet.js anima l'altezza inline del peek (animatePeek), il contenuto della variante entrante e' gia' alto quanto arrivera' a essere: va ritagliato finche' il bordo non lo raggiunge. */ [data-sheet].is-peek-transitioning [data-sheet-peek] { overflow: hidden; } /* Varianti del peek. Quella dello stato corrente sta nel flusso e decide l'altezza; l'altra e' fuori flusso (absolute nella stessa area di griglia: per un figlio assoluto di una grid il blocco contenitore e' l'area assegnata, quindi top:0 = "sotto l'handle" senza numeri fissi), invisibile e non cliccabile. Al cambio di stato i due ruoli si scambiano: chi esce perde subito il posto nel flusso ma resta visibile finche' la dissolvenza non finisce (visibility ritardata), chi entra appare subito e sfuma in. */ [data-sheet-peek-when] { grid-row: 2; grid-column: 1; opacity: 1; transition: opacity .2s ease, visibility 0s linear 0s; } [data-sheet]:not([data-sheet-state="open"]) [data-sheet-peek-when="open"], [data-sheet][data-sheet-state="open"] [data-sheet-peek-when="collapsed"] { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } /* ⚠️ Niente safe-area qui sul wrapper intero: [data-sheet-peek] include anche il toggle/titolo sopra, dove l'inset non ha senso - la safe-area vera resta SOLO su .paf-sheet-peek-summary (il contenuto interno, l'ultimo elemento davvero a vista da collassato: vedi style.css). Metterla anche qui la sommerebbe due volte nello stesso nodo, lo stesso bug di doppia safe-area gia' visto e corretto altrove in questa pagina (vedi i commenti storici su #modulo-fisso-prenota). */ [data-sheet-peek] { cursor: grab; } [data-sheet].is-dragging [data-sheet-peek] { cursor: grabbing; } /* Drag-handle: pattern riconoscibile da solo per un bottom-sheet, stessa curva del bordo (28-38px, confrontato con lo share sheet iOS reale). */ [data-sheet-peek]::before { content: ""; display: block; width: 52px; height: 5px; border-radius: 999px; background: rgba(0, 0, 0, .16); margin: 8px auto 10px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6); } /* Backdrop: un solo nodo condiviso da tutte le sheet della pagina (ne esiste sempre al piu' una aperta), creato da paf-sheet.js al primo open() e riusato. display:block riattiva qui il nodo - fuori da questa media query e' display:none esplicito (vedi sopra), senza questa riga resterebbe none anche sotto il breakpoint, nascosto a prescindere da opacity/visibility. */ .paf-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .32); opacity: 0; visibility: hidden; transition: opacity .35s ease; } .paf-sheet-backdrop.is-visible { opacity: 1; visibility: visible; } /* Applicata da paf-sheet.js su mentre uno sheet e' aperto: impedisce lo scroll della pagina sotto, resta dentro la stessa media query perche' open() e' gia' un no-op sopra il breakpoint. */ html.paf-sheet-scroll-lock { overflow: hidden; } } /* Chi ha chiesto meno movimento al sistema: stati secchi, niente scorrimento ne' dissolvenze. paf-sheet.js se ne accorge da solo (legge la durata dal CSS: 0 → chiude l'animazione col timer). */ @media (prefers-reduced-motion: reduce) { [data-sheet], [data-sheet-peek], [data-sheet-peek-when], .paf-sheet-backdrop { transition: none; } }