/* Matterhorn Ski School Cervinia: derivato da ../audit/mockup/stile.css, palette del sito di oggi. Il mockup e' disegnato a 390 px; qui lo stesso disegno si allarga fino al desktop. */ :root{ --blu:#559EBF; /* blu dell'intestazione di oggi: solo decorativo, col bianco fa 2,99:1 */ --blu-testo:#0A7AC4; /* azzurro vivo della testata, col testo bianco come nelle prove del logo nuovo (deciso da Marco l'8 ottobre, variante A; prima #3B7E9C): col bianco 4,57:1 */ --blu-fondo-attivo:rgba(0,0,0,.18); /* pillola lingua, hamburger e voce corrente: su --blu-testo il bianco fa 6,27:1 */ --blu-scuro:#186F96; /* blu dei titoli di oggi: 5,60:1 sul bianco */ --blu-chiaro:#679CBC; --blu-velo:#EAF2F7; --ghiaccio:#A8E0F7; /* accento azzurro ghiaccio (7 ottobre, al posto dell'arancio): 11,48:1 su --inchiostro, 3,19:1 su --blu-testo, 3,91:1 su --blu-scuro; solo sui fondi scuri, sul bianco fa 1,43:1 */ --inchiostro:#12212B; --grigio:#56697A; /* testo dei paragrafi: 5,68:1 sul bianco; scurito dal #5C7080 il 7 ottobre, perche' sopra le curve all'8% resti oltre 4,5:1 */ --linea:#E1E9EF; --linea-controllo:#8494A1; /* bordo delle scelte e delle schede: 3,12:1 sul bianco (WCAG 1.4.11), --linea fa 1,23:1 */ --linea-controllo-carta:#7C8C99; /* lo stesso bordo sulle fasce carta (8 ottobre): 3,24:1 su --superficie, dove il primo fa 2,92:1 */ --superficie:#F4F8FA; --carta-alto:#F8FBFC; /* fasce chiare, dall'alto (--carta-alto) al basso (--superficie): il grigio fa 5,46:1 e 5,32:1 */ --bianco:#fff; /* sistema visivo (6 ottobre, piano Fable): stati, ombre, raggi, tempi */ --blu-hover:#145C7D; /* pulsante pieno col mouse sopra o premuto: col bianco 7,35:1 */ --ombra-1:0 1px 2px rgba(18,33,43,.06),0 4px 16px rgba(18,33,43,.06); /* schede ferme */ --ombra-2:0 2px 6px rgba(18,33,43,.08),0 14px 34px rgba(18,33,43,.12); /* schede col mouse sopra, Prenota delle private, barra */ --raggio-12:12px; /* pulsanti, chip, riquadri piccoli */ --raggio-16:16px; /* schede, listini, sedi */ --raggio-20:20px; /* Prenota delle private, barra Prenota */ --pillola:999px; --veloce:150ms; /* risposta al gesto (sezione movimento) */ --morbido:cubic-bezier(.16,1,.3,1); --sezione:48px; /* spazio sopra e sotto le sezioni: 48 sul telefono, 96 sul desktop */ --tocco:48px; /* bersaglio minimo per dita e pollici */ --larghezza:1120px; /* colonna dei contenuti sul desktop */ --bordo:max(20px, calc((100% - var(--larghezza)) / 2)); /* margine laterale fluido */ --sbordo:48px; /* di quanto la foto d'apertura scavalca la fascia carta sotto, dai 960 px (pagine interne, 8 ottobre) */ --tondo:40px; /* il tondo con l'icona a tratto delle note di servizio e delle voci */ --firma:#3F86A8; /* il tratto degli elementi firma delle pagine: 4,05:1 sul bianco, 3,78:1 su --superficie */ } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%; /* l'intestazione fissa non copre l'elemento col fuoco, anche tornando indietro con Maiusc+Tab. Di solito e' alta 64 px; con il testo spaziato il menu in riga va su due righe, e menu_controller scrive l'altezza vera in --alto-testata */ scroll-padding-top:calc(var(--alto-testata, 64px) + 16px)} body{ min-width:320px;background:var(--bianco);color:var(--inchiostro); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:16px;line-height:1.55;letter-spacing:-0.005em; display:flex;flex-direction:column;min-height:100vh; } main{flex:1} img{max-width:100%;display:block} /* le foto di uploads stanno in un con le varianti (responsive_image): il picture non fa da scatola, griglie, flex e regole delle foto vedono l'img */ picture{display:contents} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} ul{list-style:none} address{font-style:normal} /* fuoco: blu scuro sui fondi chiari (5,60:1), bianco sull'intestazione (4,57:1), ghiaccio sul piede scuro (11,48:1) */ :focus-visible{outline:3px solid var(--blu-scuro);outline-offset:2px} .top :focus-visible{outline-color:var(--bianco)} .top .lingua-scelta :focus-visible{outline-color:var(--blu-scuro)} .piede :focus-visible{outline-color:var(--ghiaccio)} /* sulla hero il fondo e' scuro: bianco come l'intestazione, 5,60:1 sul Prenota e oltre 7:1 sul velo */ .hero :focus-visible{outline-color:var(--bianco)} /* testo che c'e' solo con JavaScript, e quello che lo sostituisce senza: noscript.css li scambia */ .senza-js{display:none} /* testo che non va mai a capo: numeri di telefono, email, nomi di luogo col trattino */ .intero{white-space:nowrap} /* testo per i lettori di schermo, invisibile a video */ .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .salta{position:absolute;left:12px;top:-100px;z-index:30;min-height:var(--tocco);display:flex;align-items:center; padding:0 16px;border-radius:12px;background:var(--bianco);color:var(--blu-scuro);font-weight:700} .salta:focus{top:8px} .salta:focus-visible{outline-color:var(--inchiostro)} /* sopra l'intestazione: 3,59:1 su --blu-testo */ /* ---------- consenso alle statistiche: in cima alla pagina, nel flusso, sopra l'intestazione ---------- */ .consenso{padding:14px var(--bordo);background:var(--blu-velo);border-bottom:1px solid var(--linea-controllo)} .consenso[hidden]{display:none} /* riaperto da "Gestisci i cookie" prende il fuoco: il contorno sta dentro, il bordo della finestra lo taglierebbe */ .consenso:focus-visible{outline:3px solid var(--blu-scuro);outline-offset:-3px} .consenso-dentro{max-width:760px} .consenso-titolo{font-size:15px;font-weight:800;line-height:1.35;color:var(--inchiostro)} .consenso-testo{margin-top:4px;font-size:14px;color:var(--inchiostro)} .consenso-testo a{color:var(--blu-scuro);font-weight:700;text-decoration:underline;text-underline-offset:3px} /* Accetta e Rifiuta uguali, affiancati se ci stanno. Il bordo trasparente si vede nei colori forzati, dove lo sfondo sparisce */ .consenso-scelte{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .consenso-scelte .btn{width:auto;flex:1 1 9em;border:2px solid transparent;padding-top:8px;padding-bottom:8px;line-height:1.25} /* ---------- intestazione ---------- */ .top{position:sticky;top:0;z-index:20;background:var(--blu-testo);display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;padding:8px max(12px, calc((100% - var(--larghezza)) / 2));gap:8px} .logo{display:flex;align-items:center;min-height:var(--tocco);flex-shrink:0} /* il logo attuale alto due terzi della barra, come nel sito di oggi: per fascia di larghezza il massimo che tiene la riga in francese (qui e nelle media query sotto). La barra resta di 64 px: il link e' alto 48. Se le pillole crescono (testo spaziato in francese a 360 px) il logo cede qualche pixel invece di mandare la testata a capo: il disegno si stringe dentro il suo posto, allineato a sinistra */ .logo img{height:36px;width:auto;aspect-ratio:724/157;max-width:none} /* base 0 e crescita fino alla sua misura: cosi' la testata non va a capo per il logo, che prende lo spazio che resta */ .top>.logo{flex:1 1 0;min-width:0;max-width:max-content} .top>.logo img{max-width:100%;object-fit:contain;object-position:left center} /* il logo nuovo (Impostazioni o ?propostalogo), col simbolo della scuola alto quanto le due righe e il sottotitolo sempre sotto il nome, in tre misure (_header.html.twig). Il suo posto (logo-posto) prende lo spazio che lingua, menu e Prenota lasciano, e una container query mostra la misura piu' grande che ci sta: col nome grande da 186 px (alta 36 dai 210, sottotitolo con la maiuscola di 8,1 px), col nome piccolo da 167, se no il solo simbolo, 42 px. Il sottotitolo ha la maiuscola di almeno 7 px. Il link resta largo quanto il logo, non quanto il posto */ .logo-posto{flex:1 1 0;min-width:0;container-type:inline-size;display:flex} .logo-posto~.top-dx{flex-shrink:0} .logo img.logo-nuovo{display:none;height:32px;aspect-ratio:185.95/32} .logo img.logo-nuovo.stretto{aspect-ratio:166.14/32} .logo img.logo-nuovo.simbolo{aspect-ratio:42.23/32} @container (min-width:186px){ .logo img.logo-nuovo.lungo{display:block} } @container (min-width:210px){ .logo img.logo-nuovo.lungo{height:36px} } @container (min-width:167px) and (max-width:185.98px){ .logo img.logo-nuovo.stretto{display:block} } @container (max-width:166.98px){ .logo img.logo-nuovo.simbolo{display:block} } .top-dx{display:flex;align-items:center;gap:8px} /* Prenota in pillola bianca, verso le lezioni private: su tutte le pagine tranne quella e i collettivi (_header.html.twig). Blu scuro sul bianco 5,60:1; la pillola sul blu dell'intestazione 4,57:1 */ .top-prenota,.top-posto{min-height:var(--tocco);display:flex;align-items:center;padding:0 18px;border-radius:var(--pillola); border:1px solid transparent;background:var(--bianco);color:var(--blu-scuro);font-size:15px;font-weight:800;white-space:nowrap} /* nella home parte nascosta e compare scorrendo (comparsa_controller). Sotto i 1280 px da nascosta non c'e': lingua e menu stanno a destra e non si spostano quando compare, e la testata della prima videata resta quella di prima (in francese a 360 px col testo spaziato, col posto tenuto, andava su due righe e Prenota della hero usciva dallo schermo). Dai 1280 tiene il suo posto, se no il menu in riga scivolerebbe di lato. Lo tiene anche nelle private e nei collettivi, dove Prenota non c'e' (top-posto, la stessa parola invisibile): senza, le voci del menu ci stavano piu' a destra che nelle altre pagine (8 ottobre, Marco) */ .top-prenota[hidden],.top-posto{display:none} @media (min-width:1280px){ .top-prenota[hidden],.top-posto{display:flex;visibility:hidden} } .top-prenota:active{background:var(--blu-velo)} @media (hover:hover){ .top-prenota:hover{background:var(--blu-velo)} } /* sotto i 420 px pillole e spazi piu' stretti perche' Prenota, lingua e menu stiano in riga col logo (in francese da 360 px); sotto i 360 px Prenota non ci sta: resta "Lezioni private" nel menu */ @media (max-width:419.98px){ .top{gap:6px} .top-dx{gap:6px} .top-prenota{padding:0 14px} .lingua{min-width:56px;padding:0 10px} } @media (max-width:359.98px){ .top-prenota{display:none} } /* sotto i 480 px, con tutti e due i loghi, bordi, spazi e pillole ancora piu' stretti (i bersagli restano di 48 px): il posto va al logo. Col logo nuovo, con Prenota da 360 px il solo simbolo ci sta anche in francese col testo spaziato, e senza Prenota, da 320 a 359, il nome grande */ @media (max-width:479.98px){ .top{padding-left:8px;padding-right:8px;gap:4px} .top-dx{gap:4px} .top-dx .top-prenota{padding:0 10px} .top-dx .lingua{min-width:48px;padding:0 8px} } /* il logo attuale per fasce, sempre col margine per il francese col testo spaziato: 32 senza Prenota, 30 da 360, 34 da 390 */ @media (max-width:359.98px){ .logo img{height:32px} } @media (min-width:360px) and (max-width:389.98px){ .logo img{height:30px} } @media (min-width:390px) and (max-width:479.98px){ .logo img{height:34px} } .scelta-lingua{position:relative} .lingua{min-height:var(--tocco);min-width:64px;display:flex;align-items:center;justify-content:center;gap:5px; padding:0 14px;border-radius:24px;background:var(--blu-fondo-attivo);color:#fff; font-size:14px;font-weight:600;letter-spacing:.02em} /* col mouse sopra o premuta il fondo scurisce, come il Prenota accanto cambia fondo: il bianco sale da 6,27:1 a 7,53:1 */ .lingua:active{background:rgba(0,0,0,.28)} @media (hover:hover){ .lingua:hover{background:rgba(0,0,0,.28)} } /* la freccia e' il chevron a tratto, con la penna delle altre icone (13 ottobre, prima il carattere ▼): giu' chiusa, su aperta. Il segno girato occupa solo il centro del suo quadrato da 14 px, largo 8: i margini negativi tolgono i 3 px vuoti per lato, cosi' il gap e' lo spazio vero fra sigla e freccia e il contenuto sta al centro della pillola (14 ottobre) */ .lingua .freccia{width:14px;height:14px;margin:0 -3px;opacity:.9;transform:rotate(90deg)} /* I, E e F hanno dentro la lettera, a sinistra, piu' spazio della freccia a destra: 1 px in meno e sigla e freccia stanno al centro della pillola anche a occhio. Lo spazio fra le due e' lo stesso a tutte le larghezze */ .lingua .sigla{margin-left:-1px} .lingua[aria-expanded="true"] .freccia{transform:rotate(-90deg)} .lingua-scelta{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;padding:6px;border-radius:var(--raggio-16); background:var(--bianco);box-shadow:0 10px 30px rgba(18,33,43,.18)} .lingua-scelta a{min-height:var(--tocco);display:flex;align-items:center;padding:0 14px;border-radius:10px; font-size:15px;font-weight:600;color:var(--inchiostro)} .lingua-scelta a:hover{background:var(--superficie)} .lingua-scelta a[aria-current]{color:var(--blu-scuro);font-weight:800;background:var(--blu-velo)} /* dove il browser sa sfocare quello che sta dietro, il menu e' di vetro: bianco a ,92 sopra la pagina sfocata (a ,86, se Safari non sfoca davvero, il testo sotto traspariva troppo). Il testo resta sopra 4,5:1 anche sul fondo piu' scuro (vedi STATO.md); voce corrente e passaggio del mouse hanno lo sfondo pieno. Senza supporto resta bianco pieno, e anche con meno trasparenza chiesta o con i colori forzati */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lingua-scelta{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)} } @media (prefers-reduced-transparency:reduce),(forced-colors:active){ .lingua-scelta{background:var(--bianco);-webkit-backdrop-filter:none;backdrop-filter:none} } /* tondo, raggio a meta' altezza come la pillola della lingua e il Prenota accanto (gate ux del 14 ottobre) */ .menu{min-height:var(--tocco);min-width:var(--tocco);display:flex;flex-direction:column;justify-content:center; align-items:center;gap:5px;border-radius:var(--pillola);background:var(--blu-fondo-attivo)} .menu i{display:block;width:19px;height:2px;background:#fff;border-radius:2px} /* menu aperto: le tre righe diventano una X (le righe distano 7 px, centro su centro) */ .menu[aria-expanded="true"] i:nth-of-type(1){transform:translateY(7px) rotate(45deg)} .menu[aria-expanded="true"] i:nth-of-type(2){transform:scaleX(0)} .menu[aria-expanded="true"] i:nth-of-type(3){transform:translateY(-7px) rotate(-45deg)} /* il menu aperto prende tutto lo schermo sotto la barra (64 px, o l'altezza vera in --alto-testata), con i contatti in fondo. Piu' alto della finestra (telefono in orizzontale, zoom forte) scorre dentro. Il margine interno lascia spazio al contorno del fuoco, che overflow altrimenti taglierebbe */ .nav{flex-basis:100%;max-height:calc(100vh - var(--alto-testata, 64px));max-height:calc(100dvh - var(--alto-testata, 64px)); overflow-y:auto;overscroll-behavior:contain} .nav:not([hidden]){display:flex;flex-direction:column;height:calc(100vh - var(--alto-testata, 64px));height:calc(100dvh - var(--alto-testata, 64px))} /* col menu aperto la pagina sotto non scorre (menu_controller); la barra di scorrimento tolta torna come margine interno */ html.menu-aperto,html.menu-aperto body{overflow:hidden} html.menu-aperto body{padding-right:var(--barra-scorrimento, 0px)} .nav ul{display:flex;flex-direction:column;padding:6px 6px 8px} .nav a{min-height:var(--tocco);display:flex;align-items:center;padding:0 12px;border-radius:12px; color:#fff;font-size:16px;font-weight:700} .nav ul a{min-height:52px;font-size:20px;letter-spacing:-0.01em} .nav a:active{background:rgba(0,0,0,.1)} @media (hover:hover){ .nav a:hover{background:rgba(0,0,0,.1)} } .nav a[aria-current]{background:var(--blu-fondo-attivo)} /* i contatti in fondo al menu del telefono: righe con l'icona, sopra una linea chiara */ .nav-contatti{margin-top:auto;padding:12px 6px 16px;border-top:1px solid rgba(255,255,255,.28)} .nav-contatti .contatti{display:flex;flex-direction:column} .nav-contatti .contatti a{gap:12px;font-size:15px;font-weight:600} .nav-contatti .email,.nav-contatti .email>span{display:inline-block;max-width:100%;overflow-wrap:anywhere} /* ---------- blocchi ---------- */ section{padding:var(--sezione) var(--bordo)} /* ritmo: le sezioni si alternano fra bianco e --superficie; dove cambia il fondo non c'e' la linea .hr */ section.fondo{background:var(--superficie)} /* ---------- sfondi delle sezioni: carta d'alta quota ---------- Disegno di Fable approvato da Marco il 7 ottobre. Tutto CSS e SVG dentro il foglio, nessuna richiesta in piu': sulle fasce chiare le curve di livello vere intorno a Breuil e Plan Maison (un riquadro di 960 x 720 che si ripete), in cima alle fasce bianche una luce radente, sulla chiamata le creste col Cervino del logo e la grana, sul piede la grana e un filo di luce ghiaccio. Le curve, nel blu dei titoli, sono al 21% in alto a destra, dove di solito non c'e' testo, e sfumano all'8% sul resto: il testo grigio resta sopra 4,5:1 su ogni pixel, anche dove le curve, scorrendo, passano sotto una lettera (misura in STATO.md). Scorrono di 72 px lungo la pagina, nella sezione movimento. Nei colori forzati niente decorazioni */ section.fondo{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background-color:var(--superficie); background-image:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 60%), linear-gradient(180deg,var(--carta-alto),var(--superficie))} /* overflow:clip e non hidden: un contenitore che scorre farebbe da linea del tempo a view() per quello che ha dentro */ section.fondo::before,.home-coppia.coppia-fondo::before{content:"";position:absolute;z-index:-1;inset:-48px 0;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 720'%3E%3Cpath fill='none' stroke='%23186F96' stroke-width='1' stroke-linejoin='round' d='M386 720l4-5l10-4l10-2l10 1l10 10M855 720l5-12l6-4l24-2l13 2l13 16M390 373l-5-5l2-16l3-3l10-4l10-2l10 2l8 7l-9 16l-19 8l-10-3zM860 376l-6-8l1-16l5-8l10-6l20-2l10 1l15 15l-8 16l-27 15l-10 1l-10-8zM430 0l-11 16l-19 8l-10-3l-5-5l1-16M916 0l-9 16l-27 15l-10 1l-10-8l-6-8l1-16M355 720l5-24l10-21l10-12l10-1l20 17l20 6l10 6l29 29M830 720l3-16l5-16l9-16l13-17l10-2l20 22l20 8l10 6l29 31M380 402l-10-5l-10-10l-5-19l1-16l4-21l10-19l10-10l10 1l20 12l20 5l10 6l28 26l9 16l-3 16l-4 5l-10 5l-20-5h-10l-30 14l-10 1l-10-2zM850 404l-10-7l-8-13l-2-16l1-16l3-16l6-17l10-16l10-9h10l10 10l10 7l20 7l10 6l28 28l9 16l-3 16l-4 5l-10 6l-20-4h-10l-30 15l-10 2l-10-1l-10-3zM469 0l8 16l-3 16l-4 5l-10 5l-20-5h-10l-30 14l-10 2l-17-5l-13-13l-5-19v-16M949 0l8 16l-3 16l-4 5l-10 6l-20-4h-10l-30 16l-10 2l-10-1l-10-4l-10-7l-8-13l-2-16v-16M340 720l6-32l6-16l18-32l10-13l10-8l10 4l6 17l9 16l5 4l20 10l10 9l36 41M817 720l5-32l8-21l20-32l10-13l10-8l10 2l9 24l9 16l22 13l10 8l30 37M370 421l-20-12l-7-9l-4-16l1-32l6-32l7-16l17-28l10-12l10-5l10 8l10 22l10 8l20 9l10 8l36 38l6 16l-3 16l-9 16l-10 9l-10 3l-20-4h-10l-30 15l-10 2l-10-1l-10-3zM960 400l-10 9l-10 4l-20-3l-10 1l-30 15l-10 3h-10l-31-13l-9-10l-3-6l-2-16l4-48l10-32l21-33l10-12l10-5l10 7l13 27l7 6l20 10l40 42M0 346l6 6l6 16l-3 16l-9 16M960 48l-10 10l-10 3l-20-2h-10l-30 16l-10 4l-10-1l-10-3l-23-11l-7-9l-3-7l-2-16l2-32M486 0l6 16l-3 16l-9 16l-10 10l-10 3l-20-4h-10l-30 15l-10 2h-10l-22-10l-8-6l-7-10l-4-16l1-32M329 720l9-48l12-26l30-46l10-12l10-5l10 3l4 6l6 32l7 16l33 29l13 19l29 32M806 720l10-48l14-32l30-45l10-10l10-6l10 3l7 10l5 32l7 16l31 28l20 28M350 433l-10-3l-10-8l-3-6l-2-16l1-16l8-64l6-21l10-20l10-16l20-28l10-10l10-3l3 2l7 10l5 22l6 16l9 10l20 13l52 57l4 16l-5 16l-11 21l-10 14l-10 8l-10 2l-20-2h-10l-30 16l-10 3l-10-1l-30-12zM960 419l-10 8l-10 3l-20-2l-10 1l-30 17l-10 4l-10-1l-20-7l-30-8l-8-18l-1-16l7-64l7-32l16-32l29-42l10-10l10-3l9 7l8 32l6 16l7 8l20 14l30 36M0 330l22 22l4 16l-5 16l-8 16l-13 19M960 68l-10 8l-10 3l-20-2l-10 2l-30 18l-10 3l-10-1l-20-7l-30-8l-3-4l-6-16l1-32l4-32M22 0l4 16l-5 16l-11 22l-10 14M502 0l4 16l-5 16l-11 22l-10 14l-10 8l-10 2l-20-2l-10 1l-30 16l-10 3l-10-1l-39-15l-11-9l-3-7l-2-16l4-48M319 720l9-48l12-32l40-67l10-11l10-5l10 1l10 4l10 11l5 19l6 32l12 16l17 19l18 29l33 32M795 720l10-48l12-32l43-72l10-10l10-5l10 2l10 5l10 10l3 6l9 48l28 35l10 17M380 465l-20-8l-10-2l-20 1l-10-5l-8-19v-32l12-80l9-32l7-17l40-67l10-11l10-4l10 3l10 9l4 7l10 48l12 16l24 26l17 22l33 32l4 16l-34 62l-10 12l-10 5l-10 1l-20-3l-10 2l-10 4l-20 14l-10 3l-10-3zM960 442l-10 6l-10 1l-20-2l-10 1l-10 5l-20 17l-10 2l-30-10l-10-1l-20 3l-10-2l-10-14l-3-32l2-32l9-48l7-32l5-16l10-22l30-51l10-16l10-11l10-4l10 4l10 9l6 11l9 48l12 16l13 13l20 27M0 312l10 11l31 29l4 16l-35 62l-10 12M960 93l-10 7l-10 1l-20-3l-10 1l-10 6l-20 19l-10 1l-30-12h-10l-20 4l-10-3l-10-14l-3-20l2-48l6-32M41 0l4 16l-15 25l-20 39l-10 13M521 0l3 16l-34 64l-10 13l-10 6l-10 1l-20-4l-10 1l-10 5l-20 17l-10 1l-30-12l-30-1l-10-4l-4-7l-5-16v-16l2-32l6-32M308 720l10-48l10-32l38-80l19-32l3-16l-5-16l-13-11l-10-4l-10 1l-20 8l-10-2l-10-7l-8-17l-2-8l-1-24l2-48l15-80l11-32l33-72l14-24l5-16l-3-16l-6-5l-10-3l-30 11l-10-3l-10-8l-4-8l-6-16l-2-32l3-48l7-32M784 720l11-48l10-32l35-77l12-19l7-16l3-16l-7-16l-5-4l-10-3l-10 2l-20 11l-10-2l-10-7l-10-18l-2-11l-2-32l2-48l15-80l10-32l34-80l10-16l5-16l-2-8l-10-7l-20 14l-10 2l-10-5l-10-7l-10-19l-3-18l-2-32l3-48l6-32M0 648l13 24l7 9l20 18l17 21M960 472l-10 3l-30-7l-10 3l-11 9l-7 16l-2 16l7 16l13 8l11 8l9 26l7 38l5 16l18 24M0 289l10 15l10 11l20 16l10 11l7 10l5 16l-5 16l-14 16l-9 16l-14 36l-10 12l-10 8M960 129l-10 7l-10 1l-13-9l-7-3l-10 2l-8 17l7 16l11 8l3 8l5 48l3 16l6 16l23 33M57 0l5 16l-5 16l-17 21l-5 11l-10 32l-5 10l-10 13l-10 10M536 0l5 16l-5 16l-16 20l-6 12l-10 32l-4 9l-10 14l-20 17h-10l-9-8l-11-6l-10 2l-5 4l-7 16l5 16l18 16l6 48l3 16l6 16l34 48l40 39l6 9l5 16l-1 5l-4 11l-16 20l-6 12l-12 32l-12 16l-10 8l-10 3l-30-9l-10 2l-13 12l-9 16l-3 16l7 16l28 18l10 26l7 36l5 16l18 24l13 24l14 16l17 16l12 16M294 720l6-24l6-40l19-48l4-16l1-16l-2-16l-7-16l-11-12l-10-16l-9-36l-2-16v-80l8-48l5-48l18-45l2-19l-2-16l-21-32l-4-16l-5-28l-2-36v-48l1-16l5-32M770 720l11-64l19-45l4-19l-1-16l-5-16l-18-26l-2-6l-8-34l-4-30l-1-80l7-48l4-48l4-16l10-16l5-16v-16l-6-16l-10-16l-9-26l-4-54l-1-64v-16l5-32M960 516l-6 12l-5 16l-1 16l4 32l3 16l5 9M0 260l20 32l30 31l10 14l9 15l4 16l1 16l-4 11l-15 21l-5 12l-9 36l-11 16l-16 16l-14 20M960 169l-13 23l-2 16l2 16l3 16l10 20M69 0l4 16l1 16l-4 12l-14 20l-6 16l-6 32l-9 16l-17 16l-18 25M548 0l4 16v16l-2 9l-15 23l-5 14l-7 34l-9 16l-16 16l-23 32l-8 16l-2 16l1 16l4 16l7 16l23 36l30 32l10 14l8 14l4 16v16l-2 8l-16 24l-4 10l-10 38l-10 15l-16 17l-12 16l-8 16l-5 16l-1 16l4 32l3 16l5 9l34 55l16 19l18 29M277 720l6-64l7-26l8-22l1-16l-4-16l-5-13l-4-19l-12-160l6-96l10-48v-16l-10-48l-1-48l-5-96l3-32M753 720l7-64l14-48l1-16l-12-48l-13-160l7-96l11-48l-1-16l-7-30l-2-18l-1-48l-7-96l3-32M80 0l5 16l3 32l-1 16l-7 35l-13 29l-15 16l-22 16l-11 16l-8 16l-5 16v16l5 16l9 16l30 35l10 20l20 41l7 32l-1 32l-6 29l-7 19l-8 16l-5 6l-9 10l-21 14l-10 14l-9 20l-4 16v16l3 16l10 18l25 30l5 9l14 39l16 32M559 0l7 32v16l-1 16l-6 32l-13 32l-15 16l-21 16l-11 16l-9 16l-4 16v16l5 16l9 16l30 37l29 59l4 16l3 16l-2 32l-12 48l-12 21l-10 11l-20 14l-10 14l-9 20l-4 16v16l3 16l10 18l24 30l6 10l14 38l15 32M256 720l26-112v-16l-8-48l-2-48l-3-32l-5-32l-4-16l-6-16l-3-16l2-16l25-128l-1-16l-7-48l-2-64l-5-32l-3-14l-7-18l-2-16l5-32M733 720l24-96l3-16v-16l-8-48l-2-48l-3-32l-7-34l-12-30l-2-16l28-128l2-16v-16l-8-48l-2-64l-6-33l-12-31l-2-16l7-32M94 0l6 32l4 32l-1 16l-3 16l-10 25l-10 20l-10 13l-30 27l-8 11l-4 16l2 18l8 14l27 32l9 16l23 80l7 48l-1 16l-10 32l-13 28l-10 14l-30 27l-8 11l-5 16v16l8 16l28 32l10 16l5 16l5 32l11 32M572 0l7 32l3 32v16l-4 16l-18 43l-10 14l-30 27l-8 12l-5 16l1 16l2 3l7 13l27 32l9 16l23 80l6 48l-1 16l-9 32l-12 26l-10 15l-30 27l-9 12l-4 16v16l7 16l28 32l9 16l6 16l4 32l11 32M233 720l17-35l10-27l10-34l2-16v-16l-7-48l-2-48l-3-20l-10-25l-24-35l-6-16l-1-16l31-73l10-31l8-40v-16l-7-48l-2-48l-9-28l-20-29l-10-23l-1-16l5-16l9-16M711 720l19-39l10-27l9-30l2-16v-16l-8-48l-2-48l-3-16l-8-22l-20-30l-7-12l-5-16l-1-16l3-11l20-42l10-25l10-30l7-36v-16l-7-48l-4-48l-6-21l-20-30l-7-13l-5-16l-1-16l5-16l9-16M109 0l7 64l-1 16l-4 16l-21 54l-10 16l-21 26l-6 16l2 16l9 16l25 32l8 16l13 71l6 57l-2 16l-4 18l-20 51l-10 16l-23 27l-7 16l1 16l9 16l26 32l9 16l5 16l3 32l6 32M587 0l7 64l-1 16l-3 16l-20 52l-10 17l-22 27l-6 16l2 16l9 16l24 32l8 16l15 88l4 40l-1 16l-4 16l-19 51l-10 17l-24 28l-6 16v16l9 16l25 32l9 16l5 16l3 32l6 32M209 720l41-67l10-27l3-18v-16l-7-48l-3-32l-3-22l-10-18l-34-40l-8-16l-3-16l1-16l6-16l8-19l30-53l10-21l9-35v-16l-9-69l-6-27l-4-7l-33-41l-8-16l-4-16l1-16l13-32M688 720l42-70l9-26l3-16v-16l-8-48l-5-48l-9-19l-24-29l-12-16l-7-16l-3-16l1-16l6-16l9-21l30-54l10-21l8-32l-2-32l-10-64l-5-16l-36-48l-7-16l-4-16l1-16l13-32M124 0l3 64l-2 16l-3 16l-16 48l-27 64l2 16l19 32l8 16l5 16l11 64l3 64l-2 16l-4 16l-16 48l-7 16l-18 32l-6 16v16l8 16l18 23l10 20l14 85M601 0l4 64l-1 16l-4 16l-20 61l-17 35l-6 16l2 16l8 16l13 19l6 13l5 16l10 64l4 64l-1 16l-4 16l-20 57l-10 22l-11 17l-7 16v16l9 16l19 25l10 23l11 80M186 720l31-48l24-32l9-19l3-13l1-16l-14-80l-6-16l-44-48l-17-32l-11-32l4-16l14-8l10-13l20-36l30-49l8-22l1-16l-1-16l-8-35l-10-29l-10-16l-20-23l-17-25l-21-48l4-16l14-8l6-8M666 720l30-48l24-32l10-22l2-10l1-16l-13-70l-9-26l-42-48l-15-32l-10-32l7-16l9-7l10-14l20-37l30-50l7-20l1-16l-1-16l-7-28l-10-30l-10-17l-20-25l-18-28l-8-16l-10-32l7-16l9-7l6-9M147 0l3 16l-12 64l-17 64l-14 64l1 16l12 41l10 49l17 38l3 16l-12 64l-16 48l-7 32l-15 48v16l20 48l10 55l17 41M621 0l3 16l-4 18l-4 46l-16 60l-16 68l1 16l15 48l10 48l6 16l8 32l-4 16l-4 48l-39 128l1 16l21 48l11 64l11 32M166 688l4 1l10-2l10-9l30-37l13-17l7-15l3-17l-1-16l-4-16l-8-28l-9-20l-11-14l-20-20l-20-23l-10-6l-10 6l-11 25l-3 32l-11 48l-1 16l16 90l10 16l16 6zM634 688l6 3l10 2l10-4l10-10l42-55l8-16l2-16l-1-16l-4-16l-7-23l-10-23l-10-13l-20-21l-20-25l-10-7l-10 4l-10 18l-3 10l-4 32l-10 48l-1 16l17 96l11 14l4 2zM167 320l13-2l20-23l27-39l7-16l3-16v-16l-5-16l-12-27l-10-13l-20-17l-14-23l-6-8l-10-4l-10 12l-3 16l-1 32l-15 48l-2 32l7 48l4 12l10 15l10 4l7 1zM633 320l7 3l10 1l10-4l10-11l36-53l8-16l3-16l-1-16l-5-16l-11-24l-10-13l-20-16l-15-27l-5-7l-10-7l-10 9l-2 5l-3 16l-3 32l-12 39l-3 25v16l7 48l6 19l10 12l3 1zM155 656l5 4l10 1l10-3l20-17l14-17l11-16l5-16v-16l-4-16l-6-16l-10-14l-10-6l-10 4l-17 16l-13 15l-8 17l-3 16l-2 32l3 23l5 9zM630 656l10 8l10 1l10-5l20-18l15-18l10-16l5-16v-16l-4-16l-6-13l-10-15l-10-6l-10 3l-30 25l-10 17l-4 21l-1 32l1 16l4 16zM155 288l5 4h10l10-4l20-19l19-29l5-16l-1-16l-6-16l-7-9l-10-3l-10 6l-30 30l-5 8l-7 16l-2 16l1 16l3 9l5 7zM629 288l11 8h10l10-5l18-19l12-17l9-15l4-16v-16l-3-8l-10-15l-10-4l-10 5l-30 27l-8 11l-6 16l-2 16l1 16l4 16zM173 624l7 2l10-5l10-7l10-12l4-10l2-16l-7-16l-9-3l-10 9l-6 10l-12 32l1 16zM646 624l4 7h10l10-6l17-17l8-16l1-16l-6-15l-10-5l-10 9l-16 27l-7 16l-1 16zM654 256h7l13-16l-4-11l-13 11l-3 16z'/%3E%3C/svg%3E") right top/960px auto repeat;opacity:.21; -webkit-mask-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38));mask-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38))} /* domande e sedi affiancate dai 960 px: fondo e curve passano al contenitore (qui sotto, home); prima ognuna ha i suoi */ @media (max-width:959.98px){ .home-coppia.coppia-fondo::before{content:none} } /* dai 960 px il testo sta nella colonna di sinistra e in alto a destra resta spazio: li' le curve arrivano al 21%. Prima il testo occupa tutta la riga e le curve restano all'8% dappertutto (21% per la maschera a ,38) */ @media (min-width:960px){ section.fondo::before,.home-coppia.coppia-fondo::before{ -webkit-mask-image:radial-gradient(45% 320px at 100% 48px,#000 35%,transparent),linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38)); mask-image:radial-gradient(45% 320px at 100% 48px,#000 35%,transparent),linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38))} } /* le fasce bianche: 160 px di cielo freddo in cima, che si spengono nel bianco. Separano dalla fascia sopra senza linea; il grigio sul punto piu' scuro, #F1F7FA, fa 5,25:1. Solo le fasce larghe quanto la pagina, non le colonne */ main>section:not(.fondo):not(.hero):not(.chiamata){background-image:linear-gradient(180deg,#F1F7FA,rgba(255,255,255,0) 160px)} /* e le aperture delle pagine interne che stanno in un contenitore (collettivi, private, Chi siamo): il cielo lo prende il contenitore, cosi' la testata sfuma nella pagina anche li', e le sezioni dentro non lo ripetono */ .group-alto,.pagina-alto,.private-alto{background-image:linear-gradient(180deg,#F1F7FA,rgba(255,255,255,0) 160px)} .group-alto>section,.pagina-alto>section,.private-alto>section{background-image:none} @media (max-width:959.98px){ .home-coppia>section:not(.fondo){background-image:linear-gradient(180deg,#F1F7FA,rgba(255,255,255,0) 160px)} } /* la voce piccola sopra i titoli e' una pillola: blu scuro su --blu-velo, 4,94:1. Uguale su tutte le pagine: dove il titolo e' il nome della pagina dice la famiglia (_intro.html.twig). Il 13 ottobre era diventata piatta, col tratto di penna davanti: Marco preferisce la pillola, la riga resta quella di prima (13 ottobre, ritocchi) */ .eyebrow{display:inline-flex;align-items:center;min-height:26px;padding:3px 12px;border-radius:var(--pillola);background:var(--blu-velo); font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--blu-scuro)} .eyebrow+h1,.eyebrow+.maschera{margin-top:12px} /* i titoli in quattro livelli, uguali in tutte le pagine (13 ottobre). 1, titolo di pagina: da 36 a 64 px, 800. La hero della home e' l'unica eccezione, da 40 a 72: e' la copertina. 2, titolo di sezione: da 26 a 40 px, 800. 3, titolo nel testo (il testo del pannello, il lato, i pubblici dei collettivi): da 22 a 26 px, 700, con 32 px sopra e 8 sotto nel testo, cosi' la colonna si legge come un testo coi suoi paragrafi e non come un elenco di titoli. 4, titolo di scheda (schede, experiences, sedi, note, piede, domande, pannello del modulo): 18 px, 700. Una parola che da sola non ci sta va a capo dove finisce la riga ("confidentialité" a 320 px con la spaziatura del testo, WCAG 1.4.12) invece di uscire dalla maschera; niente sillabazione, che spezzerebbe anche titoli che oggi stanno su due righe intere ("preno-tazione" a 390). Titoli bilanciati: niente parola sola sull'ultima riga, dove il browser lo sa fare ("Carnet de 10 heures, basse / saison") */ h1{font-size:clamp(36px, 4vw + 20px, 64px);line-height:1.05;font-weight:800;letter-spacing:-0.03em;overflow-wrap:break-word;text-wrap:balance} h2{font-size:clamp(26px, 2vw + 16px, 40px);line-height:1.12;font-weight:800;letter-spacing:-0.02em;color:var(--inchiostro);overflow-wrap:break-word;text-wrap:balance} .testo-ricco h2,.pagina-due>.lato h2,h3.pubblico{font-size:clamp(22px, 1vw + 16px, 26px);line-height:1.2;font-weight:700;letter-spacing:-0.015em} h3{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;text-wrap:balance} p{color:var(--grigio)} /* il sottotitolo sotto il titolo della pagina e sotto quelli delle sezioni */ .sotto{margin-top:12px;font-size:18px;line-height:1.5;max-width:65ch} .hr{height:1px;background:var(--linea);margin:0 var(--bordo)} /* ---------- icone ---------- Un set solo, a tratto, col colore del testo (assets/icons, disegni di Lucide). Sempre accanto a un testo, quindi nascoste ai lettori di schermo (aria-hidden lo mette ux_icon) */ .icona{width:20px;height:20px;flex:0 0 auto} /* ---------- pulsanti ---------- Tre livelli: pieno (.btn, uno solo per videata, verso la prenotazione), bordato (.btn.chiaro, .pillola) e link con icona (.link-icona). Gli stati qui sono fermi; le transizioni, lo spostamento col mouse sopra e la pressione stanno nella sezione movimento. Il passaggio del mouse solo dove c'e' il mouse: al tocco nessuno stato resta appeso */ .btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tocco); padding:0 20px;border-radius:var(--raggio-12);background:var(--blu-scuro);color:#fff; font-size:16px;font-weight:700;letter-spacing:-0.01em;width:100%; border:1px solid transparent} /* nei colori forzati lo sfondo sparisce: resta il contorno */ .btn:active{background:var(--blu-hover)} .btn.chiaro{background:var(--bianco);color:var(--blu-scuro);border:1.5px solid var(--blu-scuro)} .btn.chiaro:active{background:var(--blu-velo)} @media (hover:hover){ .btn:hover{background:var(--blu-hover);box-shadow:var(--ombra-1)} .btn.chiaro:hover{background:var(--blu-velo)} } /* la freccia in fondo al pulsante, a destra */ .btn .freccia-vai{margin-left:auto} /* WhatsApp, email, mappa, i rimandi: pillola bordata con l'icona davanti, larga quanto il testo */ .pillola,.aiuto a,.aiuto .gestisci-cookie{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tocco); padding:8px 20px;border-radius:var(--pillola);border:1.5px solid var(--blu-scuro);background:var(--bianco); color:var(--blu-scuro);font-size:15px;font-weight:700;line-height:1.25;text-align:center} .pillola:active,.aiuto a:active,.aiuto .gestisci-cookie:active{background:var(--blu-velo)} @media (hover:hover){ .pillola:hover,.aiuto a:hover,.aiuto .gestisci-cookie:hover{background:var(--blu-velo)} } /* link con icona: il terzo livello, testo blu con la freccia, alto un dito */ .aiuto a.link-icona,.link-icona{display:inline-flex;align-items:center;gap:8px;min-height:var(--tocco);padding:0;border:0;border-radius:0; background:none;color:var(--blu-scuro);font-size:16px;font-weight:700;text-align:left; text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px} .aiuto a.link-icona:active{background:none} @media (hover:hover){ .aiuto a.link-icona:hover,.link-icona:hover{background:none;text-decoration-color:currentColor} } /* WhatsApp piccolo, accanto a ogni Scrivici (10 ottobre): il modulo e' l'azione, WhatsApp resta, testo grigio sottolineato col fumetto, alto un dito. Fermo, anche col mouse sopra: cambia solo il colore */ .link-wa{display:inline-flex;align-items:center;gap:6px;min-height:var(--tocco);color:var(--grigio);font-size:14px;font-weight:600; text-decoration:underline;text-underline-offset:3px} .link-wa .icona{width:18px;height:18px} @media (hover:hover){ .link-wa:hover{color:var(--blu-scuro)} } /* sotto i Prenota delle private che aprono il modulo, una riga coi link uno accanto all'altro; nelle schede dei pacchetti sotto il pulsante, al centro. La domanda col fumetto e il gruppo dei link vanno a capo interi: se non stanno insieme, la domanda su una riga e i link sotto. I link vanno a capo a coppie (il template): con quattro discipline due e due, mai uno da solo in fondo, e un nome di due parole non si spezza (gate ux del 12 ottobre; text-wrap:balance in WebKit lascia tre e uno) */ .wa-sotto{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:14px;margin-top:4px;font-size:14px;line-height:1.4;color:var(--grigio)} .wa-domanda{display:inline-flex;align-items:center;gap:6px} .wa-domanda .icona{flex:none;width:16px;height:16px} .wa-link,.wa-coppia{display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px} .wa-sotto .link-wa{min-height:48px;white-space:nowrap} .scheda .link-wa{align-self:center} /* dentro una riga di testo il link resta nella riga, e va a capo intero, col fumetto. Il tocco e' alto 44 px senza cambiare la riga: un ::after al centro del link sborda sopra e sotto (gate ux del 12 ottobre) */ .altre-discipline .link-wa,.poi .link-wa{display:inline-block;min-height:0;color:var(--grigio);font-weight:600} .altre-discipline a,.poi .link-wa{position:relative} .altre-discipline a::after,.poi .link-wa::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px} .altre-discipline .link-wa,.poi .link-wa+.link-wa{margin-left:6px} .altre-discipline .link-wa .icona,.poi .link-wa .icona{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:5px} .link-wa[hidden],.poi .link-wa[hidden]{display:none} /* ---------- hero ---------- Prenota nella prima videata, senza prezzo (7 ottobre). Sotto i 700 px su due piani: la foto intera in alto, nella proporzione dei suoi attributi, col titolo sul bordo basso e il velo; sotto, sul fondo scuro, sottotitolo, Prenota e fatti. Il contenitore del testo non fa da scatola (display:contents: e' un div senza ruolo), cosi' il titolo sta nella cella della foto e il resto nelle righe sotto. Col testo ingrandito o spaziato la cella si allunga invece di far uscire il titolo dalla foto. Dai 700 px tutto sopra la foto, piu' sotto */ .hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:0;background:var(--inchiostro);color:#fff} /* gli ultimi 2 px della foto non si disegnano: sotto c'e' il fondo scuro e sopra il velo del titolo, gia' pieno. A DPR 2 e 2,625 Chromium arrotondava la foto e il velo in modo diverso e restava una riga chiara di 1 px sul bordo */ .hero img{grid-row:1;grid-column:1;align-self:start;width:100%;height:auto;object-fit:cover;clip-path:inset(0 0 2px)} /* la foto della home: visi e montagne stanno nel terzo alto, il ritaglio largo del desktop parte dal bordo alto (13 ottobre: col 10% da 1280 a 2000 px se ne andava il casco del maestro a destra, ora il ritaglio e' tutto in basso, sulla neve). Sotto i 700 px la foto e' intera e non ritaglia niente */ .hero img{object-position:center top} .hero .velo{display:none} .hero .testo{display:contents} /* il velo sta dietro al titolo e segue la sua altezza vera: parte trasparente 56 px sopra la prima riga (lo spazio in alto del titolo) e sotto la prima riga e' gia' a .74, che anche sulla neve bianca tiene il bianco sopra 4,5:1. Col testo spaziato o ingrandito il titolo va su piu' righe e il velo cresce con lui; sopra resta la foto a colori pieni. Sul riquadro del contenuto: il margine della maschera (sezione movimento) resta fuori. Posizionato: la foto che si assesta (sezione movimento) fa un livello suo e non deve passargli sopra */ .hero .testo>.maschera:first-child{grid-row:1;grid-column:1;align-self:end;position:relative; background:linear-gradient(180deg,rgba(6,32,45,0) 0,rgba(6,32,45,.4) 28px,rgba(6,32,45,.74) 56px,rgba(6,32,45,.86) calc(100% - 24px),var(--inchiostro) 100%) content-box} /* un'ombra morbida in piu' sul testo; il contrasto lo fa il velo da solo. Il pulsante non la prende */ .hero .testo{text-shadow:0 1px 14px rgba(6,32,45,.7)} .hero h1{padding:56px var(--bordo) 12px;color:#fff;font-size:clamp(40px, 3.2vw + 24px, 72px)} /* il nome del luogo non va a capo sul trattino finche' ci sta in una riga; piu' largo della riga (320 px con la spaziatura del testo) va a capo li', invece di uscire dallo schermo. Come l'email del piede */ .hero h1 .intero{display:inline-block;max-width:100%;white-space:normal} .hero h1,.hero .sotto{max-width:calc(40rem + 2 * var(--bordo))} .hero .sotto{margin-top:0;padding:4px var(--bordo) 0;color:rgba(255,255,255,.88);font-size:17px} /* Prenota sotto il sottotitolo, 20 px sopra */ .hero-azione{position:relative;padding:20px var(--bordo) 0} .hero .hero-prenota{padding-top:8px;padding-bottom:8px;line-height:1.25;text-align:center;text-shadow:none} .fatti{display:flex;flex-wrap:wrap;gap:6px 14px;padding:16px var(--bordo) 10px; font-size:13px;color:rgba(255,255,255,.88);font-weight:600} .fatti li{display:flex;align-items:center;gap:6px} .fatti .punto{width:5px;height:5px;border-radius:50%;background:var(--ghiaccio)} /* coordinate e quota (_quota.html.twig, nella hero della home e nel piede): piccole, spaziate, in azzurro ghiaccio, 11,48:1 sul fondo scuro. Sul telefono sotto i fatti. I due pezzi sono interi (.intero): la riga va a capo solo prima del punto, che resta attaccato alla quota */ .quota{font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.1em;color:var(--ghiaccio);font-variant-numeric:tabular-nums} .hero .quota{padding:0 var(--bordo) 20px} /* una scatola, cosi' all'arrivo puo' salire (sezione movimento); il fondo scuro della riga dai 700 px resta fermo */ .hero .quota>span{display:inline-block} /* dai 700 px la foto riempie la hero, alta quanto lo schermo meno l'intestazione (fra 520 e 880 px; 100vh dove 100svh manca), e testo, Prenota e fatti stanno in fondo, sopra la foto. I fatti su una fascia scura quasi piena. Anche sotto i 700 px quando lo schermo e' piu' largo che alto (telefono in orizzontale, finestra stretta e bassa): su due piani la foto da sola riempiva lo schermo e Prenota restava sotto, anche a 600x500 e 699x583; sopra la foto sta nella prima videata (blocco dello schermo basso, qui sotto). Il telefono in verticale non e' mai piu' largo che alto, e le sue regole nella sezione movimento (orientation:portrait) escludono lo stesso caso */ @media (min-width:700px),(orientation:landscape){ /* testo e Prenota su tutta la riga, sotto i fatti e a destra coordinate e quota, sulla stessa fascia. Nelle due celle il margine laterale si conta sulla larghezza della hero (cqi), non su quella della cella */ .hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:end;container-type:inline-size; min-height:clamp(520px, calc(100vh - var(--alto-testata, 64px)), 880px); min-height:clamp(520px, calc(100svh - var(--alto-testata, 64px)), 880px)} .hero img,.hero .velo{position:absolute;inset:0;width:100%;height:100%} /* fuori dalla cella della griglia, se no la foto coprirebbe solo quella */ .hero img{clip-path:none;grid-row:auto;grid-column:auto} /* sulla foto intera solo un velo leggero verso la fascia dei fatti: visi, giacche e neve restano a colori pieni */ .hero .velo{display:block;background:linear-gradient(180deg,rgba(6,32,45,0) 55%,rgba(6,32,45,.35) 100%)} /* il velo del testo: scuro dietro al blocco di titolo e Prenota, e si apre verso l'alto (nei 112 px sopra il titolo) e verso destra (dopo la colonna del testo, 50rem dal margine). E' il prodotto delle due sfumature: il fondo orizzontale, la maschera verticale. Dietro al testo e' almeno .76 */ .hero .testo{grid-column:1 / -1;position:relative;isolation:isolate;display:flex;flex-direction:column;padding:112px 0 32px} .hero .testo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(90deg,rgba(6,32,45,.82) 0,rgba(6,32,45,.76) calc(var(--bordo) + 50rem),rgba(6,32,45,0) calc(var(--bordo) + 50rem + 30%)); -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 56px,#000 112px); mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 56px,#000 112px)} .hero .testo>.maschera:first-child{align-self:auto;background:none} .hero h1{padding-top:0;padding-bottom:0} .hero .sotto{padding-top:12px;font-size:18px} /* Prenota largo quanto il testo */ .hero-azione{display:flex;padding-top:28px} .hero .hero-prenota{width:auto;min-height:56px;padding-left:28px;padding-right:28px;font-size:17px} .fatti{position:relative;padding-top:14px;padding-bottom:14px;padding-right:16px;background:rgba(6,32,45,.92);font-size:14px; padding-left:max(20px, calc((100cqi - var(--larghezza)) / 2))} .hero .quota{position:relative;display:flex;align-items:center;padding:14px 0;background:rgba(6,32,45,.92); padding-right:max(20px, calc((100cqi - var(--larghezza)) / 2))} } /* schermo basso, sotto i 584 px, dai 700 px o piu' largo che alto (telefono in orizzontale, finestra bassa): la hero non supera lo schermo meno l'intestazione, cosi' Prenota resta nella prima videata. Meno spazio sopra il titolo, titolo piu' piccolo */ @media (min-width:700px) and (max-height:583.98px),(orientation:landscape) and (max-height:583.98px){ .hero{min-height:calc(100vh - var(--alto-testata, 64px));min-height:calc(100svh - var(--alto-testata, 64px))} .hero .testo{padding-top:56px;padding-bottom:16px} .hero .testo::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px)} .hero h1{font-size:clamp(32px, 2.4vw + 16px, 44px)} .hero .sotto{padding-top:8px;font-size:16px} .hero-azione{padding-top:16px} .fatti,.hero .quota{padding-top:10px;padding-bottom:10px} } /* schermo bassissimo (568x320 in orizzontale): con 56 px sopra il titolo Prenota usciva di 15 px. Il velo si apre in 32 */ @media (orientation:landscape) and (max-height:339.98px){ .hero .testo{padding-top:32px} .hero .testo::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 32px);mask-image:linear-gradient(180deg,transparent 0,#000 32px)} .hero-azione{padding-top:12px} } /* ---------- schede prodotto ---------- */ .schede{display:grid;gap:16px;margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))} /* raggio 16 e ombra leggera; il bordo resta per i colori forzati, dove l'ombra sparisce */ .scheda{border:1px solid var(--linea);border-radius:var(--raggio-16);overflow:hidden;margin-top:14px;background:#fff;box-shadow:var(--ombra-1)} .schede .scheda{margin-top:0;display:flex;flex-direction:column} .schede .scheda .corpo{flex:1;display:flex;flex-direction:column} .schede .scheda .btn,.scheda-home .azione{margin-top:auto} /* la foto intera nella sua proporzione, mai una striscia: 3:2, ritagliata dove stanno le persone (le foto sono 3:4) */ .scheda img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 60%} .scheda .corpo{padding:20px} .scheda .meta{font-size:14px;color:var(--grigio);margin-top:6px} .riga-prezzo{display:flex;align-items:baseline;justify-content:space-between;margin:16px 0 14px} .riga-prezzo .da{font-size:13px;color:var(--grigio)} /* le cifre dei prezzi tutte larghe uguali, cosi' si confrontano in colonna */ .num,.num-t,.cifra,.barra-prezzo,.barrato{font-variant-numeric:tabular-nums} .riga-prezzo .num{font-size:28px;font-weight:800;letter-spacing:-0.03em;color:var(--blu-scuro)} .riga-prezzo .unita{font-size:13px;color:var(--grigio);font-weight:600} /* ---------- tabella prezzi ---------- */ /* le stagioni come controllo segmentato: un binario bordato (--linea-controllo, 3,12:1 sul bianco) e la scheda aperta piena, blu scuro col testo bianco */ .tabs{display:flex;gap:4px;margin:20px 0 4px;padding:3px;border:1px solid var(--linea-controllo);border-radius:var(--raggio-16);background:#fff} .tab{flex:1;min-height:var(--tocco);display:flex;align-items:center;justify-content:center;border-radius:var(--raggio-12); border:1px solid transparent;font-size:14px;font-weight:700;color:var(--inchiostro);background:none} .tab.on,.tab[aria-pressed="true"]{background:var(--blu-scuro);color:#fff;box-shadow:var(--ombra-1)} @media (hover:hover){ .tab:not([aria-pressed="true"]):hover{background:var(--blu-velo)} } /* il fondo della scheda aperta e' uno solo, sotto le schede, e scivola sotto quella scelta (la transizione e' nella sezione movimento). Solo CSS con :has(): scelta_corso_controller cambia aria-pressed e basta. Largo una scheda su due, tre o quattro (padding 3 px, gap 4), spostato di una scheda e di un gap per ogni scheda prima. Le schede sono larghe uguali (min-width 0), se no il fondo non starebbe sotto quella giusta. Senza :has() resta il fondo di ogni scheda aperta; nei colori forzati non c'e' (qui sotto), e la scheda aperta prende Highlight */ @supports selector(:has(*)){ .tabs{position:relative} .tab{position:relative;z-index:1;min-width:0} .tabs::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(100% - 6px);border-radius:var(--raggio-12); background:var(--blu-scuro);box-shadow:var(--ombra-1);pointer-events:none} .tabs:has(> .tab:nth-child(2):last-child)::before{width:calc((100% - 10px) / 2)} .tabs:has(> .tab:nth-child(3):last-child)::before{width:calc((100% - 14px) / 3)} .tabs:has(> .tab:nth-child(4):last-child)::before{width:calc((100% - 18px) / 4)} .tabs:has(> .tab:nth-child(2)[aria-pressed="true"])::before{translate:calc(100% + 4px) 0} .tabs:has(> .tab:nth-child(3)[aria-pressed="true"])::before{translate:calc(200% + 8px) 0} .tabs:has(> .tab:nth-child(4)[aria-pressed="true"])::before{translate:calc(300% + 12px) 0} .tab[aria-pressed="true"]{background:none;box-shadow:none} } .listino{border:1px solid var(--linea);border-radius:var(--raggio-16);overflow:hidden;margin-top:14px;background:#fff} .listino .capo{display:flex;justify-content:space-between;align-items:center;padding:12px 16px; background:var(--superficie);font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--grigio)} .voce{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--linea)} .voce .desc{flex:1} .voce .desc b{font-size:16px;font-weight:700;display:block} .voce .desc span{font-size:13px;color:var(--grigio)} /* nei livelli la disciplina in grassetto davanti alla frase, nella sua riga (_levels.html.twig) */ .voce .desc span>b{display:inline;font-size:inherit;color:var(--inchiostro)} .voce .cifra{font-size:20px;font-weight:800;color:var(--blu-scuro);letter-spacing:-0.02em} .voce .vai{min-width:var(--tocco);min-height:var(--tocco);border-radius:12px;background:var(--blu-velo); color:var(--blu-scuro);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px} /* ---------- lezioni private ---------- */ .date-stagione{font-size:13px;margin-top:8px} /* i Prenota vicini alla presentazione, cosi' stanno nella prima videata. Nella scheda il prezzo "da" e, uno sotto l'altro, un Prenota per disciplina: raggio 20 e l'ombra piu' alta del sito. Sotto, la nota del giorno pieno */ .private-intro{padding-bottom:10px} .private-prenota{padding-top:6px} .private-alto>.private-pieno>.nota-servizio{margin-top:0} /* arrivando su #prenota la scheda sta 10 px sotto l'intestazione, e l'ultima riga della presentazione ci finisce tutta sotto invece di restare tagliata a meta' (16 px fra le due, piu' dei 12 tolti qui allo scroll-padding) */ @media (max-width:959.98px){ .private-prenota{scroll-margin-top:-12px} } .prenota-scheda{border:1px solid var(--linea);border-radius:var(--raggio-20);padding:20px 18px;background:#fff;box-shadow:var(--ombra-2)} .da-quanto{font-size:17px;line-height:1.35;font-weight:700;color:var(--inchiostro)} .prenota-pulsanti{display:grid;gap:10px;margin-top:14px} .prenota-pulsanti .prenota{margin-top:0;min-height:56px;font-size:17px;text-align:center} .prenota-pulsanti .prenota>span{text-wrap:balance} /* le discipline senza scheda in una riga di testo, col link a WhatsApp in un blocco solo, che va a capo intero; si spezza dentro solo se e' piu' largo della riga (a 320 px in francese col testo spaziato arrivava a 2 px dal bordo) */ .altre-discipline{font-size:14px;line-height:1.5;margin-top:14px;text-align:center;color:var(--grigio)} .altre-discipline a{display:inline-block;max-width:100%;padding:2px 0;color:var(--blu-scuro);font-weight:700; text-decoration:underline;text-underline-offset:3px} .altre-discipline .icona{width:16px;height:16px;vertical-align:-3px;margin-right:5px} .private-pieno{padding-top:0} /* un hidden su un elemento con display proprio non basterebbe */ .btn[hidden],.barra-prenota[hidden]{display:none} /* barra fissa in basso col prezzo "da" e Prenota, a ogni larghezza, quando i Prenota in cima sono usciti dallo schermo: piu' in basso o gia' passati sopra, sotto l'intestazione (barra_controller; sugli schermi bassi niente barra, piu' giu'). Il suo Prenota riporta a loro */ .barra-prenota{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;gap:12px; padding:10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background:var(--bianco);border:1px solid var(--linea-controllo);border-bottom:0;border-radius:var(--raggio-20) var(--raggio-20) 0 0; box-shadow:0 -8px 30px rgba(18,33,43,.14)} .barra-testo{flex:1;min-width:0} .barra-prezzo{font-size:16px;font-weight:700;line-height:1.3;color:var(--inchiostro)} .barra-btn{width:auto;flex:0 0 auto;padding:0 18px} /* con la barra: spazio in fondo alla pagina perche' il piede non resti sotto, e sopra la barra per il fuoco. L'altezza vera della barra la scrive barra_controller in --alto-barra (col testo spaziato va su piu' righe); prima, quella di una riga */ html.con-barra{scroll-padding-bottom:calc(var(--alto-barra, calc(var(--tocco) + 21px + env(safe-area-inset-bottom))) + 11px)} html.con-barra body{padding-bottom:var(--alto-barra, calc(var(--tocco) + 21px + env(safe-area-inset-bottom)))} .prenota{margin-top:14px} .nota-prenota{font-size:13px;margin-top:10px;text-align:center} .listino>.voce:first-child{border-top:0} .voce .desc>span{display:block} /* schede delle stagioni; il titolo dentro ogni pannello si vede solo senza JavaScript (noscript.css) */ .tab{padding:4px 6px;text-align:center;line-height:1.2;-webkit-tap-highlight-color:transparent} /* il pannello scorre da solo se la tabella non ci sta (testo ingrandito, spaziatura del testo): la pagina no. position perche' gli span .vh, assoluti, restino dentro */ .pannello{overflow-x:auto;position:relative} /* listino completo: formula e quattro colonne di prezzi, che a 390 px stanno in 350 */ .tabella{width:100%;border-collapse:separate;border-spacing:0} .tabella th,.tabella td{padding:12px 6px;border-top:1px solid var(--linea);text-align:left;vertical-align:middle} .tabella th:first-child{padding-left:14px} .tabella th:last-child,.tabella td:last-child{padding-right:14px} .tabella thead th{border-top:0;background:var(--superficie);font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--grigio);vertical-align:bottom} .tabella thead tr+tr th{padding-top:0} .tabella tbody th b{display:block;font-size:15px;line-height:1.3} .tabella tbody th>span{display:block;font-size:13px;font-weight:400;color:var(--grigio)} .tabella .cifra{text-align:right;white-space:nowrap} .tabella td.cifra{font-size:15px;font-weight:800;color:var(--blu-scuro)} .tabella tr.pomeriggio th,.tabella tr.pomeriggio td{border-top-style:dashed} .barrato{font-size:15px;font-weight:600;color:var(--grigio)} /* ---------- lezioni private: il listino in una tabella sola (8 ottobre) ---------- Una riga per formula, una colonna per stagione; in ogni cella le cifre per 1, 2, 3 e 4 persone, e si vede quella delle persone scelte coi chip (data-persone, persone_controller; il server parte da una). Le cifre non si animano: si mostrano e si nascondono, fuori dalla sezione movimento. I chip sono radio in un fieldset: il radio, senza aspetto, copre il suo chip e prende il clic e il contorno del fuoco; scelto, il chip e' pieno blu scuro come la stagione aperta delle schede. Senza JavaScript (noscript.css) niente chip e in ogni cella le quattro cifre col loro numero */ .listino-persone{margin-top:20px;max-width:760px} /* la parola accanto ai chip e' una riga a parte (il legend e' per i lettori di schermo): un legend in float stava accanto ai chip in Chromium e sopra in WebKit. I quattro chip stanno insieme, e se non c'e' posto vanno a capo tutti */ .chip-persone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0;margin:0;padding:0;border:0} .chip-etichetta{display:flex;align-items:center;min-height:var(--tocco);font-size:14px;font-weight:700;color:var(--inchiostro)} .chip-scelte{display:flex;gap:8px} .chip-persone label{position:relative;display:inline-flex} .chip-persone input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:var(--pillola);background:none; -webkit-appearance:none;appearance:none;cursor:pointer} .chip{min-width:var(--tocco);min-height:var(--tocco);display:inline-flex;align-items:center;justify-content:center;padding:0 16px; border-radius:var(--pillola);border:1px solid var(--linea-controllo);background:var(--bianco);color:var(--blu-scuro);font-size:15px;font-weight:700; font-variant-numeric:tabular-nums} .chip-persone input:checked+.chip{background:var(--blu-scuro);border-color:var(--blu-scuro);color:#fff} /* il fuoco da tastiera anche dopo le frecce in WebKit, dove il radio scelto con le frecce ha :focus ma non :focus-visible (persone_controller: data-tastiera finche' non si tocca o si clicca); lo stesso contorno di :focus-visible */ .listino-persone[data-tastiera] .chip-persone input:focus{outline:3px solid var(--blu-scuro);outline-offset:2px} .chip-persone input:not(:checked):active+.chip{background:var(--blu-velo)} @media (hover:hover){ .chip-persone input:not(:checked):hover+.chip{background:var(--blu-velo)} } .listino-persone .pannello{margin-top:14px} /* il titolo delle due mezze giornate (14 ottobre): piccolo e grigio come le intestazioni, sopra Mattino e Pomeriggio, che gli stanno attaccate senza la linea */ .tabella-prezzi tr.gruppo-formule th{padding-top:14px;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.3; text-transform:uppercase;color:var(--grigio)} .tabella-prezzi tr.gruppo-formule+tr th,.tabella-prezzi tr.gruppo-formule+tr td{border-top:0;padding-top:6px} .tabella-prezzi tbody th b{font-size:16px} /* il nome in alto come le cifre, sulla stessa linea di base a 1 px: senza l'orario sotto (14 ottobre) "1 ora" stava a meta' riga, piu' in basso di "75 €" */ .tabella-prezzi td.cifra,.tabella-prezzi tbody th{vertical-align:top} .tabella-prezzi .prezzo b{display:block;font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.3;color:var(--blu-scuro)} .tabella-prezzi .prezzo small{display:block;margin-top:2px;font-size:11.5px;font-weight:600;line-height:1.3;color:var(--grigio)} .tabella-prezzi .prezzo .senza-js{font-size:12px;font-weight:600;color:var(--grigio)} /* la cifra e la didascalia delle persone scelte; le altre non ci sono, nemmeno per i lettori di schermo */ .listino-persone [data-p]{display:none} .listino-persone[data-persone="1"] [data-p="1"],.listino-persone[data-persone="2"] [data-p="2"], .listino-persone[data-persone="3"] [data-p="3"],.listino-persone[data-persone="4"] [data-p="4"]{display:revert} /* le date delle stagioni una volta sola, sotto il listino: chiuse, si aprono col + che gira in una x come le domande */ .date-stagioni{margin-top:12px;max-width:760px;font-size:14px;color:var(--grigio)} .date-stagioni summary{display:inline-flex;align-items:center;gap:8px;min-height:var(--tocco);cursor:pointer;font-size:15px;font-weight:700; color:var(--blu-scuro);list-style:none} .date-stagioni summary::-webkit-details-marker{display:none} .date-stagioni summary .icona{width:18px;height:18px} .date-stagioni[open] summary .icona{transform:rotate(45deg)} .date-stagioni p{max-width:65ch;color:var(--grigio)} .date-stagioni p+p{margin-top:4px} /* sul telefono tre stagioni e la formula stanno in 350 px senza scorrere: i nomi delle stagioni vanno a capo, senza il maiuscoletto, e "pomeriggio" va sopra la sua cifra se non ci sta accanto */ .tabella-prezzi thead th.cifra{white-space:normal} .tabella-prezzi .prezzo small{white-space:normal} @media (max-width:699.98px){ .tabella-prezzi thead th,.tabella-prezzi tr.gruppo-formule th{font-size:12px;letter-spacing:0;text-transform:none} } @media (max-width:399.98px){ .tabella-prezzi .prezzo b{font-size:15px} .tabella-prezzi .prezzo small{font-size:10.5px} } /* le voci di un elenco con l'icona nel tondo (prima di prenotare, come funzionano i corsi): il tondo sta sul bianco dell'elenco anche quando l'elenco e' su una fascia carta */ .voce.con-icona{align-items:flex-start;gap:14px} /* nella voce Assicurazione delle private, la scheda della Snowcare: stacca dal testo, senza vuoto sotto. Il tocco resta 48 px con un ::after al centro del link, come per .altre-discipline. Con inline-flex restava una riga vuota sotto (gate ux del 26 ottobre) */ .voce .desc>.link-icona{display:flex;width:fit-content;position:relative;min-height:0;margin-top:8px} .voce .desc>.link-icona::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tocco);margin-top:calc(var(--tocco) / -2)} .listino .tondo,section.fondo .listino .tondo{background:var(--blu-velo)} /* i livelli: quattro tacche accanto al nome, alte da 7 a 16 px, piene fino al livello (_levels.html.twig) */ .voce .desc b.con-tacche{display:flex;align-items:center;gap:10px} .tacche{display:inline-flex;align-items:flex-end;gap:3px;height:16px} .tacche i{display:block;width:5px;border-radius:2px;background:var(--linea)} .tacche i:nth-child(1){height:7px} .tacche i:nth-child(2){height:10px} .tacche i:nth-child(3){height:13px} .tacche i:nth-child(4){height:16px} .tacche[data-livello="1"] i:nth-child(-n+1),.tacche[data-livello="2"] i:nth-child(-n+2), .tacche[data-livello="3"] i:nth-child(-n+3),.tacche[data-livello="4"] i:nth-child(-n+4){background:var(--blu-scuro)} /* ---------- corsi collettivi ---------- */ /* foto in cima come nel mockup, a tutta larghezza; sul desktop accanto al titolo. Intera in 3:2, mai una striscia: la foto e' 3:4 e i bambini stanno sotto la meta' */ .group-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 62%} /* la foto dei collettivi e quella di Chi siamo si assestano arrivando (sezione movimento): il contenitore le ritaglia */ .group-foto,.pagina-foto{overflow:hidden;overflow:clip} .group-intro{padding-bottom:10px} .pubblico{display:flex;align-items:center;gap:10px} .pubblico .tondo{--tondo:36px} .pubblico .tondo .icona{width:18px;height:18px} /* salti alle sezioni Adulti, Bambini, Baby: tre chip in riga, larghi un dito */ .salti ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .salti li{flex:1 1 auto} .salti a{min-height:var(--tocco);display:flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:var(--pillola); border:1px solid var(--linea-controllo);background:#fff;color:var(--blu-scuro);font-size:14px;font-weight:700;text-align:center;line-height:1.2} .salti a:active{background:var(--blu-velo)} @media (hover:hover){ .salti a:hover{border-color:var(--blu-scuro);background:var(--blu-velo)} } /* le scelte che stanno su una fascia carta (i corsi dei collettivi, il listino delle private): il bordo piu' scuro, che sulla carta resta sopra 3:1 */ section.fondo .salti a,section.fondo .tabs,section.fondo .chip{border-color:var(--linea-controllo-carta)} @media (hover:hover){ section.fondo .salti a:hover{border-color:var(--blu-scuro)} } /* ---------- corsi collettivi: una tabella per pubblico, una scelta, un'azione (8 ottobre, B3 della revisione UX) ---------- Una riga per corso: il radio, nome e dati, la cifra della stagione in evidenza con l'unita' sotto (14 ottobre: anche dal tablet una cifra sola, come sul telefono, e niente intestazioni). La stagione la sceglie il commutatore, fermo sotto la testata finche' ci sono i corsi; la cifra dell'altra resta per i lettori di schermo, e scelto un corso il suo prezzo sta nel blocco dell'azione. La riga scelta prende il fondo --blu-velo e la spunta nel tondo; l'etichetta del nome copre tutta la riga, che si sceglie toccandola dovunque. Sotto le tabelle il blocco dell'unica azione (scelta_corso_controller), che con un corso scelto e il suo posto fuori dallo schermo diventa la barra fissa in basso (fissa). Le cifre non si animano e non si spostano */ .corsi-scelta{margin-top:8px} .corsi-pubblico{margin-top:28px} /* dal tablet il commutatore e' largo al massimo 480 px; la fascia sotto va da un bordo all'altro della finestra (il ::before, tagliato da section.fondo) */ .stagione-fissa{position:sticky;top:var(--alto-testata, 64px);z-index:5;margin-top:16px;padding:8px 0 10px} .stagione-fissa::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:rgba(244,248,250,.96);border-bottom:1px solid var(--linea)} .stagione-fissa .tabs{max-width:480px;margin:0} /* un corso o una tabella raggiunti col Tab o con un salto non finiscono sotto il commutatore */ .corsi-pubblico,.riga-corso input,.riga-corso .senza-js{scroll-margin-top:84px} .tabella-corsi{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px;background:#fff;border:1px solid var(--linea); border-radius:var(--raggio-16);overflow:hidden;box-shadow:var(--ombra-1)} .tabella-corsi td{padding:12px 10px;border-top:1px solid var(--linea);text-align:left;vertical-align:middle} .tabella-corsi tr:first-child>td{border-top:0} .tabella-corsi td:first-child{padding-left:14px} .tabella-corsi td.cifra{padding-right:16px} .tabella-corsi .scelta{width:24px;padding-right:4px} .tabella-corsi .cifra{text-align:right;white-space:nowrap;width:9em} .tabella-corsi td.cifra .num{display:block;font-size:17px;font-weight:800;letter-spacing:-0.02em;color:var(--blu-scuro)} .tabella-corsi td.cifra small{display:block;font-size:12px;font-weight:600;line-height:1.3;color:var(--grigio)} .tabella-corsi td.cifra small.altra{display:none} /* la cifra della stagione non in evidenza non si vede: come .vh, letta dai lettori di schermo (senza JavaScript noscript.css le mostra tutte e due). .riga-corso, relative, la tiene dentro la riga */ .corsi-scelta[data-stagione="bassa"] td.media-alta,.corsi-scelta[data-stagione="media-alta"] td.bassa{position:absolute;width:1px;height:1px; padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .riga-corso{position:relative;cursor:pointer} .riga-corso label{cursor:pointer} /* l'etichetta copre la riga: un tocco sulle cifre sceglie il corso. Il link per riga (senza JavaScript) resta sopra */ .riga-corso label::after{content:"";position:absolute;inset:0} .riga-corso .senza-js{display:none;position:relative;z-index:1;margin-top:4px;min-height:40px;font-size:15px} /* il radio: un tondo di 22 px, bordo --linea-controllo (3,12:1), scelto pieno blu scuro con la spunta bianca */ .riga-corso input{-webkit-appearance:none;appearance:none;display:block;position:relative;width:22px;height:22px;margin:0; border:1.5px solid var(--linea-controllo);border-radius:50%;background:#fff;cursor:pointer} .riga-corso input:checked{border-color:var(--blu-scuro);background:var(--blu-scuro)} .riga-corso input:checked::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg} .riga-corso:has(input:checked){background:var(--blu-velo)} .riga-corso .nome{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--inchiostro)} .riga-corso sup{margin-left:3px;font-size:11px;font-weight:700;line-height:0;color:var(--blu-scuro)} .dati-corso{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--grigio)} .dati-corso .eta{font-weight:600;color:var(--inchiostro)} /* le note dei corsi una volta per tabella, numerate come l'esponente */ .note-tabella{display:grid;gap:2px;max-width:65ch;margin-top:8px;padding:0;list-style:none;font-size:13px;line-height:1.45;color:var(--grigio)} .note-tabella li{display:flex;gap:6px} .note-tabella b{font-weight:700;color:var(--blu-scuro)} .corsi-scelta>.nota-servizio{margin-top:28px} /* l'unica azione: il corso scelto (o l'invito a sceglierlo) e il pulsante pieno; sotto, come si risponde */ .azione-posto{min-height:var(--alto-azione, 0px);margin-top:28px;max-width:760px} .azione-corsi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:center;padding:16px 20px; border:1px solid var(--linea);border-radius:var(--raggio-20);background:var(--bianco);box-shadow:var(--ombra-2)} .scelto{min-width:0;font-size:14px;line-height:1.4;color:var(--grigio)} .scelto-corso{display:block;font-size:17px;line-height:1.3;color:var(--inchiostro)} /* prima del nome il prezzo della stagione in evidenza; sotto, piccolo, quello dell'altra stagione (14 ottobre: le righe non lo dicono piu'), che nella barra non c'e' */ .scelto-prezzo:empty,.scelto-eta:empty,.scelto-prezzi:empty{display:none} .scelto-prezzi{display:block;margin-top:2px;font-size:13px;font-weight:600} .scelto-prezzi [data-parte="separa"],.azione-corsi.fissa .scelto-prezzi{display:none} .corsi-scelta[data-stagione="bassa"] [data-parte="bassa"],.corsi-scelta[data-stagione="media-alta"] [data-parte="media-alta"]{display:none} .azione-corsi .btn{width:auto;padding:10px 22px;line-height:1.25;text-align:center} .chiedi-corto{display:none} /* l'icona del pulsante segue il link del corso: la matita per il modulo (il fumetto per WhatsApp, col modulo spento), la freccia per la scheda BeebeeSki */ .azione-corsi .icona[hidden]{display:none} .azione-corsi .poi{grid-column:1 / -1;margin-top:-2px;font-size:13px;line-height:1.45;color:var(--grigio)} .azione-corsi .poi[hidden]{display:none} /* la barra: lo stesso blocco fisso in basso, a tutta larghezza, senza la riga su WhatsApp. Compare senza animazione */ .azione-corsi.fissa{position:fixed;left:0;right:0;bottom:0;z-index:15;margin:0;border:1px solid var(--linea-controllo);border-bottom:0; border-radius:var(--raggio-20) var(--raggio-20) 0 0;box-shadow:0 -8px 30px rgba(18,33,43,.14); padding:10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))} .azione-corsi.fissa .poi{display:none} @media (min-width:960px){ .azione-corsi.fissa{padding-left:var(--bordo);padding-right:var(--bordo)} } /* gli schermi bassi non hanno la barra, come le private (scelta_corso_controller non la mette) */ @media (max-height:499.98px){ .azione-corsi.fissa{position:static} } /* ---------- corsi collettivi sul telefono (sotto i 700 px, B3-bis): righe compatte, una stagione in evidenza ---------- La tabella diventa una lista: ogni riga e' una griglia radio | testo | prezzo, alta almeno 64 px. Il commutatore e' largo quanto la colonna, la fascia sotto da un bordo all'altro. I ruoli scritti nel template tengono la tabella anche con le righe in griglia */ @media (max-width:699.98px){ .stagione-fissa{margin:16px -20px 0;padding:8px 20px 10px;background:rgba(244,248,250,.96);border-bottom:1px solid var(--linea)} .stagione-fissa::before{content:none} .stagione-fissa .tabs{max-width:none} .tabella-corsi,.tabella-corsi tbody{display:block} .tabella-corsi tr.riga-corso{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:center; min-height:64px;padding:10px 12px;border-top:1px solid var(--linea)} .tabella-corsi tr.riga-corso:first-child{border-top:0} .tabella-corsi td,.tabella-corsi td:first-child,.tabella-corsi td:last-child{display:block;width:auto;padding:0;border:0} /* la colonna delle cifre larga uguale con tutte e due le stagioni, 8 em (6,5 sotto i 360 px, max-width): con Media e alta prendeva solo la larghezza del suo testo, e cambiando stagione i nomi andavano a capo in un altro punto */ .tabella-corsi td.cifra{width:8em;padding:0} .tabella-corsi td.scelta{grid-column:1;grid-row:1 / span 2} .tabella-corsi td.corso-testo{grid-column:2;grid-row:1 / span 2;min-width:0} /* la colonna delle cifre non toglie posto al nome: unita' e stagione piccola vanno a capo, la cifra no */ .tabella-corsi td.cifra{grid-column:3;max-width:8em;white-space:normal} .tabella-corsi td.cifra .num{white-space:nowrap} .riga-corso .nome{font-size:14.5px;line-height:1.25;overflow-wrap:anywhere} .dati-corso{margin-top:3px;font-size:12px;line-height:1.35} /* la stagione in evidenza: cifra grande e unita', al centro della riga */ .corsi-scelta[data-stagione="bassa"] td.bassa,.corsi-scelta[data-stagione="media-alta"] td.media-alta{grid-row:1 / span 2;align-self:center} .corsi-scelta[data-stagione="bassa"] td.bassa .num,.corsi-scelta[data-stagione="media-alta"] td.media-alta .num{font-size:18px;line-height:1.1} .corsi-scelta[data-stagione="bassa"] td.bassa small.unita,.corsi-scelta[data-stagione="media-alta"] td.media-alta small.unita{font-size:11px;margin-top:1px} /* il blocco dell'azione: una colonna, il pulsante largo, senza l'eta' */ .azione-corsi{grid-template-columns:minmax(0,1fr)} .azione-corsi .btn{width:100%} .scelto-eta{display:none} /* nella barra una riga sola, "210 € · Kids half day sci", troncata sul nome se non ci sta (intero nella riga scelta); "Corso scelto" resta per i lettori di schermo, e il pulsante si accorcia in "Chiedi" */ .azione-corsi.fissa{grid-template-columns:minmax(0,1fr) auto;column-gap:12px} .azione-corsi.fissa .scelto-etichetta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .azione-corsi.fissa .scelto-corso{overflow:hidden;font-size:15px;white-space:nowrap;text-overflow:ellipsis} .azione-corsi.fissa .btn{width:auto;padding:10px 16px} .azione-corsi.fissa .chiedi-lungo{display:none} .azione-corsi.fissa .chiedi-corto{display:inline} } @media (max-width:359.98px){ .tabella-corsi tr.riga-corso{padding:10px;column-gap:8px} .tabella-corsi td.cifra{max-width:6.5em} .corsi-scelta[data-stagione="bassa"] td.bassa .num,.corsi-scelta[data-stagione="media-alta"] td.media-alta .num{font-size:16px} } /* ---------- experiences ---------- */ /* l'apertura finisce con la nota su misura, i pulsanti a 24 px dalla fascia carta dell'elenco (40 dai 960). La carta del Safari, l'elemento firma, sul telefono sta fra il sottotitolo e la nota; dai 960 a destra del titolo, larga 480 */ .exp-intro{padding-bottom:24px} .exp-intro>.firma-safari{margin-top:24px} @media (min-width:960px){ .exp-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:56px;align-items:start} .exp-intro>*{grid-column:1} .exp-intro>.firma-safari{grid-column:2;grid-row:1 / span 2;margin-top:0} } /* le foto delle experiences in 16:10, intere, nel punto scelto dal pannello */ .experience img{aspect-ratio:16/10;object-position:center} .experience img.foto-top{object-position:center top} .experience img.foto-bottom{object-position:center bottom} .experience h2{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-0.01em} .experience .descrizione{font-size:15px;margin-top:8px;color:var(--inchiostro)} .experience .meta{margin-top:8px} /* senza foto, al posto della foto un riquadro decorativo delle stesse misure, a ogni larghezza: fondo chiaro e una sagoma di montagne. Le schede restano nella serie, e quelle affiancate sono alte uguali coi pulsanti alla stessa quota */ .foto-vuota{display:block;aspect-ratio:16/10;background:var(--blu-velo)} .foto-vuota svg{display:block;width:100%;height:100%} .foto-vuota .monti-dietro{fill:var(--blu-chiaro);opacity:.45} .foto-vuota .monti-davanti{fill:var(--blu)} .foto-vuota .neve{fill:var(--bianco)} /* in fondo alla scheda l'email in pillola bordata e WhatsApp accanto come link con l'icona, sotto se non ci stanno */ .azioni{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px} /* un pulsante che va su due righe (francese a 320 px, testo spaziato) resta alto almeno 48 px, col testo staccato dal bordo */ .azioni .btn{padding-top:8px;padding-bottom:8px;line-height:1.25;text-align:center} /* ---------- home ---------- */ .dopo-eyebrow{margin-top:12px} /* il prezzo va sotto l'etichetta se non ci stanno in riga (francese, testo spaziato) */ /* l'etichetta sopra e il prezzo sotto, in tutte le schede: il prezzo sta sempre nello stesso posto */ .scheda-home .riga-prezzo{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px} .da-prezzo{font-size:13px;font-weight:600;letter-spacing:0;color:var(--grigio)} .scheda-home .btn{padding-top:8px;padding-bottom:8px;line-height:1.25} /* l'icona a tratto della disciplina accanto al titolo, col suo colore */ .scheda-home h3{display:flex;align-items:center;gap:10px} .icona-disciplina{width:22px;height:22px} /* la foto porta dove porta il pulsante (home.html.twig) */ .scheda-home .foto{display:block;cursor:pointer} /* le schede portano a una pagina: col mouse sopra l'ombra sale (la transizione e lo zoom della foto nella sezione movimento). La scheda non si sposta, perche' dentro c'e' il prezzo */ @media (hover:hover){ .scheda-home:hover,.scheda-home:focus-within{box-shadow:var(--ombra-2)} } /* sul telefono le schede vanno a riga: la foto intera in 3:4 a sinistra, larga 112 px, titolo, dati e prezzo a destra, il pulsante sotto per tutta la larghezza. Nella prima videata c'e' il Prenota della hero (W2): la regola della prima scheda col pulsante nella prima videata e' in pensione. La griglia sta sull'articolo e il corpo non fa da scatola (display:contents: e' un div senza ruolo) */ @media (max-width:699.98px){ .home-schede{padding-top:22px} .schede .scheda-home.con-foto{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto 1fr auto; column-gap:14px;padding:12px} .scheda-home.con-foto .corpo{display:contents} .scheda-home.con-foto .foto{grid-column:1;grid-row:1 / span 3;align-self:start;border-radius:var(--raggio-12);overflow:hidden} .scheda-home.con-foto .foto img{aspect-ratio:3/4} .scheda-home.con-foto .corpo>*{grid-column:2} .scheda-home.con-foto .meta{font-size:13px;margin-top:4px} .scheda-home.con-foto .riga-prezzo{align-self:end;margin:10px 0 0} .scheda-home.con-foto .riga-prezzo .num{font-size:24px} .schede .scheda-home.con-foto .azione{grid-column:1 / -1;margin-top:12px} .scheda-home .riga-prezzo{margin:10px 0} } /* fra 700 e 960 px due colonne: la terza scheda, le experiences, va a tutta larghezza, con la foto sotto la prima colonna e il testo sotto la seconda, invece di restare sola a meta' riga. La foto riempie l'altezza della scheda. Dai 960 tre colonne, anche dove 300 px a scheda non ci starebbero (fino a 972) */ @media (min-width:700px) and (max-width:959.98px){ .home-schede .schede{grid-template-columns:repeat(2,minmax(0,1fr))} .home-schede .scheda-home:nth-child(3){grid-column:1 / -1} .home-schede .scheda-home.con-foto:nth-child(3){display:grid;grid-template-columns:calc(50% - 8px) minmax(0,1fr)} .home-schede .scheda-home.con-foto:nth-child(3) .foto img{height:100%} } @media (min-width:960px){ .home-schede .schede{grid-template-columns:repeat(3,minmax(0,1fr))} } /* sotto i 360 px la colonna del testo e' larga 128 px: la nota del prezzo va sotto la cifra, in righe strette, invece di lasciare "al" accanto al prezzo e il resto su due righe larghe */ @media (max-width:359.98px){ .scheda-home.con-foto .riga-prezzo .num~.unita{display:block;line-height:1.35;margin-top:2px} } /* ---------- home: le sezioni dopo le schede (W2) ---------- Il fondo si alterna nel template (home.html.twig). Le strisce scorrono di lato con lo scroll-snap: col dito, col trackpad, con le frecce dalla striscia col fuoco (tabindex nel template, striscia_controller lo toglie se non scorre) o coi pulsanti Indietro e Avanti, sotto la striscia a destra: dai 700 px sempre, anche al tocco, e sotto i 700 col mouse; al tocco sotto i 700 si scorre col dito e la scheda tagliata dice che c'e' dell'altro. La barra di scorrimento non si vede mai (7 ottobre), la striscia resta scorrevole e, dove serve, focalizzabile. Il margine interno sopra e sotto lascia spazio all'ombra delle schede, che overflow taglierebbe, e quello negativo lo riprende; di lato la striscia finisce col bordo della colonna, e il contorno del fuoco dei link che ha dentro sta all'interno */ .striscia-blocco{margin-top:24px} /* position: i testi .vh (assoluti) delle schede fuori vista restano dentro la striscia, se no allargano la pagina */ .striscia{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; padding:6px 0 18px;margin:-6px 0 -12px;scrollbar-width:none} .striscia::-webkit-scrollbar{display:none} .striscia a:focus-visible{outline-offset:-3px} /* sfuma solo il lato dove il bordo taglia davvero una scheda, al massimo 24 px e mai sopra una scheda intera (striscia_controller: data-lati, --sfuma-inizio e --sfuma-fine): un ritratto tagliato non mostra lettere a meta', la scheda ferma sul bordo resta nitida. Senza JavaScript niente sfumatura. Col fuoco sulla striscia o dentro neanche, che taglierebbe il contorno. Senza mask-image resta tutto com'era */ .striscia[data-lati="inizio"],.striscia[data-lati="fine"],.striscia[data-lati="entrambi"]{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--sfuma-inizio,0px),#000 calc(100% - var(--sfuma-fine,0px)),transparent); mask-image:linear-gradient(90deg,transparent,#000 var(--sfuma-inizio,0px),#000 calc(100% - var(--sfuma-fine,0px)),transparent)} .striscia:focus-visible,.striscia:has(:focus-visible){-webkit-mask-image:none;mask-image:none} .striscia-elenco{display:flex;gap:16px} .striscia-elenco>li{flex:0 0 auto;scroll-snap-align:start} .striscia-pulsanti{display:flex;justify-content:flex-end;gap:12px;margin-top:12px} .striscia-pulsanti[hidden]{display:none} /* il rimando alla pagina intera e i tondi sulla stessa riga: il link a sinistra, i tondi a destra */ .striscia-riga{display:flex;align-items:center;gap:12px;margin-top:12px} .striscia-riga>.aiuto,.striscia-riga>.striscia-pulsanti{margin-top:0} /* il link resta sulla riga dei tondi anche a 320 px: se non ci sta va a capo nel suo spazio, e i tondi non si stringono */ .striscia-riga>.aiuto{flex:1 1 auto;min-width:0} /* in riga e non in flex, cosi' andando a capo la freccia segue l'ultima parola invece di restare sul bordo destro; alto un dito come gli altri link con icona */ .striscia-riga .aiuto a.link-icona{display:inline-block;padding:12px 0;line-height:24px} .striscia-riga .aiuto a.link-icona .icona{display:inline-block;vertical-align:-4px;margin-left:8px} .striscia-riga>.striscia-pulsanti{margin-left:auto;flex:0 0 auto} /* come le gallerie di Apple: tondi da 48 px con la sola freccia, --inchiostro su un grigio tenue (oltre 14:1), un po' piu' scuro col mouse sopra; premuti si stringono (sezione movimento). Il bordo trasparente si vede nei colori forzati */ .striscia-btn{width:var(--tocco);height:var(--tocco);display:inline-flex;align-items:center;justify-content:center;border-radius:50%; border:1px solid transparent;background:rgba(18,33,43,.06);color:var(--inchiostro)} .striscia-btn .icona{width:22px;height:22px} .striscia-btn .indietro{transform:scaleX(-1)} @media (hover:hover){ .striscia-btn:hover{background:rgba(18,33,43,.11)} } /* agli estremi il pulsante e' spento: piu' chiaro, nessuno stato col mouse sopra */ .striscia-btn:disabled{opacity:.35;cursor:default} @media (hover:hover){ .striscia-btn:disabled:hover{background:rgba(18,33,43,.06)} } /* recensioni: schede bianche con le virgolette in cima, decorative (il lettore di schermo non le legge), in un carattere con le grazie: in quello del sito, in nero, sembravano due barre. Nome e iniziale in nero, il resto della riga in grigio. Sul telefono e sul tablet in striscia, dai 960 px in griglia. La griglia non lascia una scheda sola sull'ultima riga (12 ottobre): tre e cinque o sei in tre colonne, quattro 2+2 e in riga dai 1120 px, quando le schede restano larghe almeno 250 px; due stanno gia' in riga. Con :has() sull'ultima, come le schede dei corsi */ .striscia-recensioni .striscia-elenco>li{flex-basis:min(85%, 340px)} .recensione{height:100%;display:flex;flex-direction:column;padding:20px;border:1px solid var(--linea);border-radius:var(--raggio-16); background:#fff;box-shadow:var(--ombra-1)} .recensione blockquote::before{content:"\201C";content:"\201C" / "";display:block;height:40px;font-family:Georgia,"Times New Roman",serif; font-size:72px;line-height:1;font-weight:400;color:var(--blu-scuro)} .recensione blockquote p{font-size:16px;line-height:1.55;color:var(--inchiostro)} .recensione figcaption{margin-top:auto;padding-top:14px;font-size:14px;line-height:1.4;color:var(--grigio)} .recensione .autore{font-weight:700;color:var(--inchiostro)} @media (min-width:960px){ .striscia-recensioni{-webkit-mask-image:none;mask-image:none} .striscia-recensioni .striscia-elenco{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} @supports selector(:has(*)){ .striscia-recensioni .striscia-elenco:has(>li:nth-child(3):last-child), .striscia-recensioni .striscia-elenco:has(>li:nth-child(5):last-child), .striscia-recensioni .striscia-elenco:has(>li:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} .striscia-recensioni .striscia-elenco:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} } } @media (min-width:1120px){ @supports selector(:has(*)){ .striscia-recensioni .striscia-elenco:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))} } } /* la riga di Google sotto le recensioni: media e numero, accanto il link */ .google{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-top:16px} .google p{font-size:15px;font-weight:600;color:var(--inchiostro)} /* team: i numeri grandi in tre colonne, a ogni larghezza; le cifre larghe uguali, e quella che conta (contatore_controller) tiene la larghezza del numero finale. Sotto, la striscia dei ritratti 3:4. Sopra ogni cifra la sua icona a tratto (13 ottobre, al posto del filetto): la S dello sciatore attorno a due paletti, la tavola in fondo alla sua scia, le due sedi unite dal tratteggio (_numero_tratto.html.twig). Tutte e tre nella stessa scatola, 64 x 40, larga e alta quanto il disegno: stessa base, stessa altezza, il disegno attaccato a sinistra come la cifra. Tratto di 1,75 come le icone, colore degli elementi firma, che si disegnano come lei; nella sezione movimento il tracciato. L'etichetta col colore del testo, come su main. Nel lato di Chi siamo l'icona accanto alla cifra */ .numeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;margin-top:24px;max-width:760px} .numeri li{display:flex;flex-direction:column} .numero-tratto{display:block;flex:none;width:64px;height:40px;margin-bottom:10px;color:var(--firma)} .numero-tratto svg{display:block;width:100%;height:100%} .numero{font-size:clamp(40px, 2vw + 32px, 56px);line-height:1;font-weight:800;letter-spacing:-0.03em;color:var(--blu-scuro);font-variant-numeric:tabular-nums lining-nums} .numero>[aria-hidden]{display:inline-block} .numeri .etichetta{margin-top:6px;font-size:14px;line-height:1.35;font-weight:600;color:var(--inchiostro)} .livelli{margin-top:16px;max-width:65ch;font-size:15px} .striscia-team .striscia-elenco>li{flex-basis:140px} .ritratto img,.ritratto-vuoto{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--raggio-12);background:var(--linea)} .ritratto .nome{margin-top:8px;font-size:15px;font-weight:700;line-height:1.3;color:var(--inchiostro);overflow-wrap:anywhere} .ritratto .ruolo{font-size:13px;line-height:1.35} @media (min-width:700px){ .striscia-team .striscia-elenco>li{flex-basis:168px} } /* famiglie: la foto dei bambini col maestro in cima sul telefono, a destra dai 960 px; il bordato e il link del Baby Club in riga se ci stanno */ .famiglie-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 62%;border-radius:var(--raggio-16)} .famiglie-foto{margin-bottom:24px} .famiglie-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:20px} .famiglie-azioni .btn{width:auto;padding-top:8px;padding-bottom:8px;line-height:1.25;text-align:center} @media (min-width:960px){ .famiglie.con-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:56px;align-items:center} .famiglie-foto{grid-column:2;grid-row:1;margin-bottom:0} .famiglie-foto img{aspect-ratio:4/3;border-radius:var(--raggio-20)} .famiglie-testo{grid-column:1;grid-row:1} } /* experiences in striscia: riquadri-link con la foto 4:3 nel punto del pannello e il nome sotto */ .striscia-galleria .striscia-elenco>li{flex-basis:min(72%, 264px)} .riquadro-exp{display:block;border-radius:var(--raggio-12)} .riquadro-exp img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:var(--raggio-12)} .riquadro-exp img.foto-top{object-position:center top} .riquadro-exp img.foto-bottom{object-position:center bottom} .riquadro-exp .nome{display:block;margin-top:10px;font-size:16px;font-weight:700;line-height:1.3;color:var(--inchiostro); text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px} @media (hover:hover){ .riquadro-exp:hover .nome{color:var(--blu-scuro);text-decoration-color:currentColor} } /* la sbirciata: col dito i pulsanti non ci sono, e a certe larghezze l'ultima scheda intera finiva sul bordo e la successiva restava fuori, senza niente che dicesse che la striscia scorre. Qui la scheda parte dalla sua larghezza (--scheda, qui sotto per ogni striscia); --colonne e' quante ne stanno intere lasciando almeno 32 px alla successiva (tan(atan2(a, b)) e' a/b come numero, le lunghezze non si dividono fra loro), e se la successiva resterebbe quasi intera, o intera senza niente dopo, le schede si allargano quanto basta perche' ne restino fuori almeno 44 px: con 24, quanto la sfumatura, sembrava una scheda intera sfumata, non una tagliata. Cosi' all'inizio si vedono sempre almeno 32 px della scheda dopo, e la scheda tagliata e' tagliata davvero. Senza round() o le unita' del contenitore restano le larghezze fisse */ @supports (width:calc(round(down, tan(atan2(1cqi, 1px)), 1) * 1px)){ .striscia-blocco{container-type:inline-size} .striscia-blocco .striscia-elenco>li{ --colonne:max(1, round(down, tan(atan2(100cqi - 32px, var(--scheda) + 16px)), 1)); flex-basis:max(var(--scheda), (100cqi - var(--colonne) * 16px + 44px) / (var(--colonne) + 1))} .striscia-recensioni .striscia-elenco>li{--scheda:min(85cqi, 340px, 100cqi - 48px)} .striscia-team .striscia-elenco>li{--scheda:140px} .striscia-galleria .striscia-elenco>li{--scheda:min(72cqi, 264px)} @media (min-width:700px){ .striscia-team .striscia-elenco>li{--scheda:168px} } } /* l'ultima chiamata, prima del piede, su --blu-hover: titolo e testo bianchi (7,35:1). Prenota pieno in bianco col testo --blu-hover, i collettivi bordati in bianco; col mouse sopra o premuti il bianco si vela */ /* lo sfondo: luce in alto a sinistra, in basso tre piani di creste in trasparenza (il Cervino col profilo del logo in blu notte, due creste in bianco) e sopra la grana. Il testo e' bianco pieno: a ,88 sui pixel piu' chiari di creste e grana scendeva a 3,9:1, pieno resta sopra 4,5:1 (STATO.md) */ .chiamata{background:var(--blu-hover);color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .10 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"), radial-gradient(80% 90% at 0 0,rgba(255,255,255,.09),rgba(255,255,255,0) 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23fff' fill-opacity='.045' d='M0 320L0 150L80 140L170 118L260 126L380 100L470 112L560 96L640 110L730 104L820 118L900 106L990 96L1080 104L1170 90L1250 100L1330 88L1440 98L1440 320z'/%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M0 320L0 206L60 214L130 176L190 190L260 150L320 170L400 142L450 166L540 130L610 160L690 150L760 176L840 186L930 196L1010 170L1080 186L1150 166L1230 190L1300 180L1380 198L1440 190L1440 320z'/%3E%3Cpath fill='%2306202D' fill-opacity='.16' d='M0 320L0 296L80 284L190 262L270 270L360 240L440 252L540.8 320L656.7 296.6L778.3 216.9L796.2 228.6L840 170L916.8 273.1L938.4 273.1L1139.2 320L1250 300L1330 292L1440 300L1440 320z'/%3E%3C/svg%3E"); background-size:160px 160px,auto,max(1440px,100%) auto;background-position:0 0,0 0,center bottom;background-repeat:repeat,no-repeat,no-repeat} .chiamata h2{color:#fff} .chiamata .sotto{color:#fff} .chiamata :focus-visible{outline-color:var(--bianco)} .chiamata-azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;max-width:760px} .chiamata-azioni .btn{margin-top:0;padding-top:8px;padding-bottom:8px;line-height:1.25;text-align:center} /* i due pulsanti col testo e la freccia al centro, uguali */ .chiamata-azioni .freccia-vai{margin-left:0} .btn.prenota.inverso{background:var(--bianco);color:var(--blu-hover)} .btn.prenota.inverso:active{background:var(--blu-velo)} .btn.chiaro.inverso{background:transparent;color:#fff;border-color:#fff} .btn.chiaro.inverso:active{background:rgba(255,255,255,.14)} @media (hover:hover){ .btn.prenota.inverso:hover{background:var(--blu-velo)} .btn.chiaro.inverso:hover{background:rgba(255,255,255,.14)} } @media (min-width:700px){ .chiamata-azioni .btn{width:auto;padding-left:24px;padding-right:24px} } /* domande e sedi affiancate dai 960 px, sul fondo della prima (home.html.twig): le colonne sono il contenuto delle due sezioni, i margini e il fondo li prende il contenitore */ @media (min-width:960px){ .home-coppia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;align-items:start;padding:0 var(--bordo)} .home-coppia.coppia-fondo{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background-color:var(--superficie); background-image:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 60%), linear-gradient(180deg,var(--carta-alto),var(--superficie))} .home-coppia:not(.coppia-fondo){background-image:linear-gradient(180deg,#F1F7FA,rgba(255,255,255,0) 160px)} .home-coppia>section{padding-left:0;padding-right:0;background:none} .home-coppia>section.fondo::before{content:none} } /* ---------- pagine di contenuto ---------- */ .pagina-intro{padding-bottom:10px} .pagina-corpo{padding-top:20px} .pagina-corpo .aiuto{max-width:760px} /* foto in cima a tutta larghezza, come nei collettivi; sul desktop accanto al titolo (piu' sotto). Intera in 3:2: il Cervino sta nel terzo alto */ .pagina-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 30%} /* chi siamo: ritratti 3:4 con nome e ruolo; presidente e direttore tecnico piu' grandi, in una riga loro. Sul telefono loro due in due colonne a tutta larghezza, gli altri in tre, col nome un po' piu' piccolo: a 390 px 168 px contro 110, a 320 px 133 contro 87. Le foto restano 3:4 */ .team{display:grid;gap:16px 14px;margin-top:14px;grid-template-columns:repeat(2,minmax(0,1fr))} .team-guida{max-width:520px} @media (max-width:599.98px){ .team:not(.team-guida){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px} .team:not(.team-guida) .nome{font-size:14px} } @media (max-width:359.98px){ .team:not(.team-guida) .nome{font-size:13px} .team:not(.team-guida) .ruolo{font-size:12px} } @media (min-width:600px){ .team:not(.team-guida){grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} } .team+.team{margin-top:28px} .persona img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--superficie)} /* chi non ha la foto (_team.html.twig): un riquadro 3:4 come i ritratti, con le iniziali nel blu dei titoli (4,94:1 sul velo), grandi un terzo della larghezza. Il bordo trasparente si vede nei colori forzati, dove il fondo sparisce */ .persona-vuota{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;border-radius:12px;border:1px solid transparent; background:var(--blu-velo);color:var(--blu-scuro);container-type:inline-size} .persona-vuota span{font-size:32px;font-size:34cqi;font-weight:800;letter-spacing:.04em;line-height:1} .persona .nome{margin-top:8px;font-size:15px;font-weight:700;line-height:1.3;color:var(--inchiostro);overflow-wrap:anywhere} .team-guida .nome{font-size:18px} .persona .ruolo{font-size:13px} /* testo ricco del pannello (body delle pagine, gia' passato dal sanitizer): righe non troppo lunghe, testo scuro */ .testo-ricco{max-width:70ch} .testo-ricco>*+*{margin-top:10px} .testo-ricco h2{margin-top:32px} .testo-ricco h3{font-size:19px;margin-top:24px} .testo-ricco h2+*,.testo-ricco h3+*{margin-top:8px} .testo-ricco>:first-child{margin-top:0} .testo-ricco p,.testo-ricco li{color:var(--inchiostro)} .testo-ricco ul,.testo-ricco ol{padding-left:1.4em} .testo-ricco ul{list-style:disc} .testo-ricco li+li{margin-top:6px} .testo-ricco a{color:var(--blu-scuro);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere} /* il negozio del Noleggio (16 ottobre, gate ux): indirizzo, telefoni, orari e sito, un paragrafo per gruppo dopo l'h2. I telefoni, uno per riga, alti 37 px e non 18; fra un gruppo e l'altro 24 px, piu' dello spazio fra le righe di un gruppo, cosi' i tre telefoni si leggono insieme. Il paragrafo con un telefono e il testo che lo contiene: oggi c'e' solo li', e un telefono scritto altrove dal pannello prende lo stesso spazio */ .testo-ricco p:has(> a[href^="tel:"])>a{display:inline-block;padding-block:6px} .testo-ricco:has(p > a[href^="tel:"]) h2~p+p{margin-top:24px} section>.testo-ricco,.sedi+.testo-ricco{margin-top:18px} section.testo-ricco{max-width:none} section.testo-ricco>*{max-width:70ch} /* contatti (8 ottobre): telefono, WhatsApp ed email come tre schede-link, una colonna sul telefono e tre dal 768. Il tondo con l'icona, l'etichetta piccola e il valore grande; il telefono pieno, l'azione principale, gli altri bianchi. Col mouse sopra e premute cambia solo il fondo. L'etichetta bianca a ,9 sul blu scuro fa 4,8:1 */ .canali{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))} .canale{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border:1px solid var(--linea);border-radius:var(--raggio-16); background:var(--bianco);box-shadow:var(--ombra-1);color:var(--inchiostro)} .canale .tondo{--tondo:44px} .canale .tondo .icona{width:22px;height:22px} .canale-testo{min-width:0} .canale .etichetta{display:block;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)} .canale .valore{display:block;margin-top:2px;font-size:16px;font-weight:700;line-height:1.3;color:var(--blu-scuro)} .canale .email,.canale .email>span{display:inline-block;max-width:100%;overflow-wrap:anywhere} .canale.pieno{background:var(--blu-scuro);border-color:var(--blu-scuro)} .canale.pieno .tondo{background:rgba(255,255,255,.16);color:#fff} .canale.pieno .etichetta{color:rgba(255,255,255,.9)} .canale.pieno .valore{color:#fff} .canale:active{background:var(--blu-velo)} .canale.pieno:active{background:var(--blu-hover);border-color:var(--blu-hover)} @media (hover:hover){ .canale:hover{background:var(--blu-velo)} .canale.pieno:hover{background:var(--blu-hover);border-color:var(--blu-hover)} } .canale.pieno:focus-visible{outline-offset:3px} .sedi{display:grid;gap:16px;margin-top:20px;max-width:760px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))} .sede{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px;border:1px solid var(--linea);border-radius:var(--raggio-16); background:#fff;box-shadow:var(--ombra-1)} .sede .indirizzo{font-size:16px;font-weight:600;color:var(--inchiostro)} .sede .pillola{margin-top:auto} /* in Contatti la prima riga dell'indirizzo e' il nome della sede, il resto sotto in grigio */ .sede .indirizzo:has(.nome-sede){font-size:15px;font-weight:500;color:var(--grigio)} .sede .nome-sede{display:block;margin-bottom:2px;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;color:var(--inchiostro)} /* la quota sotto l'indirizzo, piu' vicina a lui che alla mappa (8 ottobre) */ .sede .quota-sede{margin-top:-8px;font-size:15px;font-weight:600;color:var(--inchiostro)} /* le sedi con la carta della funivia: sul telefono prima la carta, poi le schede; dai 960 la carta a sinistra */ .sedi-mappa{display:grid;gap:16px;margin-top:24px} .sedi-mappa .sedi{margin-top:0;max-width:none} @media (min-width:960px){ .sedi-mappa{grid-template-columns:minmax(0,480px) minmax(0,1fr);column-gap:32px;align-items:start} .sedi-mappa .sedi{grid-template-columns:minmax(0,1fr)} } /* sulla carta i nomi dei due posti in HTML, 13 px a ogni larghezza, accanto alle quote disegnate (in percentuale del disegno, 480 x 390), e la didascalia in basso */ .mappa-nome{position:absolute;font-size:13px;font-weight:700;line-height:1.2;color:var(--inchiostro);white-space:nowrap} .mappa-nome.centro{left:23.3%;top:72.6%} .mappa-nome.plan-maison{left:65%;bottom:84%} .mappa-didascalia{position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:600;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--grigio)} .orari{margin-top:10px;max-width:70ch;white-space:pre-line;color:var(--inchiostro)} /* il modulo dei contatti (9 ottobre): una colonna larga al massimo 640, etichette sopra i campi, l'errore fra etichetta e campo, col bordo del campo piu' spesso. Il rosso fa 6,54:1 sul bianco e 5,77:1 sul velo; il bordo dei campi 3,12:1 (--linea-controllo). La trappola sta fuori dallo schermo. Sotto il modulo, sempre, WhatsApp e telefono per le cose urgenti */ .modulo{display:grid;gap:18px;max-width:640px;margin-top:20px} .campo{display:grid;gap:6px} .campo label{font-size:15px;font-weight:700;line-height:1.35;color:var(--inchiostro)} .campo input,.campo textarea{width:100%;min-height:var(--tocco);padding:10px 14px;border:1px solid var(--linea-controllo);border-radius:var(--raggio-12); background:var(--bianco);font:inherit;color:var(--inchiostro)} .campo textarea{min-height:160px;resize:vertical} .con-errore input,.con-errore textarea{border:2px solid #B3261E} .errore-campo,.errore-modulo{font-size:15px;font-weight:600;line-height:1.4;color:#B3261E} .errore-modulo{padding:12px 16px;border:2px solid #B3261E;border-radius:var(--raggio-12);background:var(--bianco)} /* dopo un invio con errori (gate w6): il riepilogo in cima al modulo, coi link ai campi; l'errore del modulo intero sopra il pulsante. La pagina arriva li' con l'ancora #modulo, sotto l'intestazione per lo scroll-padding di html. Un campo che prende il fuoco in fondo allo schermo resta staccato dal bordo */ .riepilogo-errori{padding:14px 16px;border:2px solid #B3261E;border-radius:var(--raggio-12);background:var(--bianco);color:#B3261E} .riepilogo-titolo{font-size:15px;font-weight:700;line-height:1.4;color:var(--inchiostro)} .riepilogo-errori ul{display:grid;gap:4px;margin-top:6px;padding-left:20px} .riepilogo-errori a{font-size:15px;font-weight:600;line-height:1.4;color:#B3261E;text-decoration:underline;text-underline-offset:3px} .modulo-invio{display:grid;gap:12px} .modulo .campo,.modulo .campo-privacy,.modulo .btn{scroll-margin-bottom:16px} .campo-privacy{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px 12px;align-items:start} .campo-privacy input{width:24px;height:24px;margin:0;accent-color:var(--blu-scuro)} .campo-privacy label{font-size:15px;line-height:1.5;color:var(--inchiostro)} .campo-privacy a{color:var(--blu-scuro);font-weight:600;text-decoration:underline;text-underline-offset:3px} .campo-privacy .errore-campo{grid-column:2} .modulo .btn{width:auto;justify-self:start;padding:10px 28px} .trappola{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .modulo-inviato{display:flex;align-items:center;gap:12px;max-width:640px;margin-top:20px;padding:16px 20px;border:1px solid var(--linea); border-radius:var(--raggio-16);background:var(--blu-velo);font-weight:700;color:var(--inchiostro)} .modulo-inviato .icona{flex:none;width:24px;height:24px;color:var(--blu-scuro)} .modulo-contatti>.nota-servizio{margin-top:28px} /* il giorno (10 ottobre): il selettore nativo, alto come gli altri campi; l'aiuto sotto il campo */ .campo input[type="date"]{min-height:var(--tocco);font:inherit;-webkit-appearance:none;appearance:none} .campo-aiuto{font-size:14px;line-height:1.4;color:var(--grigio)} /* la conferma prende il fuoco dal JavaScript, per i lettori di schermo: un contorno sottile, non l'anello dei pulsanti */ .modulo-inviato:focus-visible{outline-width:1px;outline-offset:3px} .modulo-inviato:focus:not(:focus-visible){outline:0} /* ---------- il pannello del modulo (10 ottobre) ---------- Un dialog nativo, nel top layer: sopra la testata e le barre, col fuoco chiuso dentro e Escape. Sul telefono un foglio dal basso, largo quanto lo schermo, angoli alti arrotondati, alto al massimo quanto la parte visibile: con la tastiera aperta pannello_controller scrive --alto-visibile e --sotto-visibile, e il foglio resta sopra la tastiera. Dai 960 px una finestra di 560 px al centro, con la pagina che si vede dietro il velo. Scorre solo il corpo, mai la pagina sotto (foglio-aperto su html, come menu-aperto); Invia e WhatsApp stanno nel piede, fermo in fondo al corpo. Il velo e' un colore con trasparenza. L'arrivo sta nella sezione movimento, la chiusura e' istantanea */ html.foglio-aperto,html.foglio-aperto body{overflow:hidden} /* uno Scrivici toccato prima che il pannello sia pronto aspetta (menu_controller, al massimo 2,5 s): un velo sopra il link, come premuto, e il puntatore che aspetta. Fermo. Il velo e' del colore del testo (blu sul bianco 4,87:1, bianco sul piede 12,2:1); dove il testo e' bianco sul blu (pulsanti pieni, menu del telefono) e' nero, perche' schiarendo il fondo il bianco scenderebbe sotto 4,5:1 (pulsante 6,56:1, menu 5,44:1) */ a[data-apri-modulo][aria-busy="true"]{position:relative;cursor:progress} a[data-apri-modulo][aria-busy="true"]::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:.1;pointer-events:none} .btn:not(.chiaro)[aria-busy="true"]::before,.top a[aria-busy="true"]::before{background:#000} html.foglio-aperto body{padding-right:var(--barra-scorrimento, 0px)} dialog.foglio{position:fixed;inset:auto 0 var(--sotto-visibile, 0px) 0;width:100%;max-width:100%; max-height:min(92dvh, var(--alto-visibile, 92dvh));margin:0;padding:0;border:0;border-radius:var(--raggio-20) var(--raggio-20) 0 0; background:var(--bianco);color:var(--inchiostro);box-shadow:0 -8px 30px rgba(18,33,43,.18);overflow:hidden;overscroll-behavior:contain} dialog.foglio[open]{display:flex;flex-direction:column} dialog.foglio::backdrop{background:rgba(18,33,43,.5)} .foglio-dentro{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} /* la testa: la maniglia (decorativa), il titolo, la X da un dito e sotto la richiesta del link */ .foglio-testa{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--tocco);align-items:center;gap:4px 8px; padding:18px 8px 10px 20px;border-bottom:1px solid var(--linea)} .foglio-testa::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--linea-controllo)} .foglio-titolo{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-0.01em} .foglio-titolo:focus{outline:0} .foglio-chiudi{display:flex;align-items:center;justify-content:center;width:var(--tocco);height:var(--tocco);border-radius:50%;color:var(--inchiostro)} .foglio-chiudi .icona{width:22px;height:22px} @media (hover:hover){ .foglio-chiudi:hover{background:var(--blu-velo)} } .richiesta-chip{grid-column:1 / -1;justify-self:start;max-width:100%;padding:4px 12px;border-radius:var(--pillola);background:var(--blu-velo); color:var(--blu-scuro);font-size:14px;font-weight:700;line-height:1.35} .richiesta-chip[hidden]{display:none} .foglio-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px} .foglio-corpo .modulo{max-width:none;margin-top:16px;gap:16px} .foglio-corpo .campo textarea{min-height:120px} .foglio-corpo .modulo-inviato{margin:20px 0 24px} /* il piede, fermo in fondo al corpo che scorre: Invia a tutta larghezza e WhatsApp sotto, sopra la barra del telefono */ .foglio-piede{position:sticky;bottom:0;z-index:1;display:grid;gap:2px;margin:0 -20px;padding:12px 20px calc(4px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea);background:var(--bianco)} .modulo .foglio-piede .btn{width:100%;justify-self:stretch} .foglio-wa{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:6px;font-size:14px;color:var(--grigio)} @media (min-width:960px){ dialog.foglio{inset:0;width:min(560px, calc(100% - 48px));max-height:min(88dvh, 820px);margin:auto;border-radius:var(--raggio-20); box-shadow:var(--ombra-2)} .foglio-testa{padding-top:14px} .foglio-testa::before{content:none} .foglio-corpo,.foglio-piede{padding-left:28px;padding-right:28px} .foglio-piede{margin:0 -28px;padding-bottom:12px} .foglio-testa{padding-left:28px} } /* privacy e cookie: i dati del titolare, il segnaposto di quello che manca */ .dati-legali{margin-top:12px;max-width:70ch} /* l'etichetta piccola sopra il valore, come nelle schede dei contatti (.canale .etichetta): grigio, 5,32:1 su --superficie */ .dati-legali dt{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)} .dati-legali dd{margin-top:2px;color:var(--inchiostro)} .dati-legali div+div{margin-top:12px} .dati-legali a{color:var(--blu-scuro);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere} .da-completare{padding:1px 6px;border-radius:4px;background:#FFE9A8;color:var(--inchiostro);font-weight:700;outline:2px dashed #8A5410} /* domande frequenti:
nativi, senza riquadro, una riga per domanda fra due linee. Il + (un'icona a tratto, nei colori forzati prende il colore del testo) aperto ruota in una x; la rotazione scorre nella sezione movimento */ .domande{max-width:760px;margin-top:20px;border-top:1px solid var(--linea)} .domanda{border-bottom:1px solid var(--linea)} .domanda summary{display:flex;align-items:center;gap:16px;min-height:var(--tocco);padding:16px 0;cursor:pointer; font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;color:var(--inchiostro);list-style:none} .domanda summary::-webkit-details-marker{display:none} .domanda summary .icona{margin-left:auto;width:22px;height:22px;color:var(--blu-scuro)} .domanda[open] summary .icona{transform:rotate(45deg)} @media (hover:hover){ .domanda summary:hover{color:var(--blu-scuro)} } .domanda p{max-width:65ch;padding:0 38px 20px 0;font-size:15.5px;white-space:pre-line} /* nelle risposte i link alle condizioni e al noleggio */ .domanda p a{color:var(--blu-scuro);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* ---------- assistenza ---------- Sotto le sezioni: WhatsApp, email e i rimandi come pillole bordate (stile in "pulsanti"), "tutte le domande" e simili come link con l'icona. Vanno a capo invece di stringersi */ .aiuto{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:20px} .aiuto-elenco{max-width:760px} .aiuto-elenco a{flex:1 1 12em} /* il pulsante che riapre la scelta sui cookie: c'e' solo con JavaScript (lo mostra il controller consent) */ .gestisci-cookie[hidden]{display:none} /* ---------- note di servizio (8 ottobre, pagine interne) ---------- Un componente solo per dire "scrivici" (il giorno o il corso pieno, il Baby Club, le experiences su misura, le domande senza risposta), al posto dei riquadri arancioni e celesti: a sinistra il tondo con l'icona a tratto, a destra titolo, testo e la riga delle azioni (link con l'icona, pillole, solo nelle experiences il pulsante pieno). Niente cornice e niente fondo: la separano la tipografia e il tondo. In riga (in-riga) quando e' una frase sola: titolo e testo all'altezza del tondo, le azioni sotto. Il tondo e' --blu-velo sul bianco e bianco sulle fasce carta e nel lato; il bordo trasparente si vede nei colori forzati, dove il fondo sparisce. Nel lato bianco solo dove il lato ha la carta: dai 960, e sotto solo l'aside (Chi siamo, Noleggio); sotto i 960 una section.lato (Domande, Cookie policy) sta sul bianco della pagina, e un tondo bianco non si vedrebbe */ .tondo{flex:0 0 var(--tondo);width:var(--tondo);height:var(--tondo);border-radius:50%;border:1px solid transparent; background:var(--blu-velo);color:var(--blu-scuro);display:inline-flex;align-items:center;justify-content:center} .tondo .icona{width:20px;height:20px} section.fondo .tondo{background:var(--bianco)} @media (max-width:959.98px){ .pagina-due>aside.lato .tondo{background:var(--bianco)} } @media (min-width:960px){ .pagina-due>.lato .tondo{background:var(--bianco)} } .nota-servizio{display:grid;grid-template-columns:var(--tondo) minmax(0,1fr);column-gap:14px;align-items:start;max-width:760px;margin-top:24px} .nota-servizio>.tondo{grid-row:1 / span 3} .nota-servizio>:not(.tondo){grid-column:2} .nota-titolo{margin-top:8px;font-size:18px;line-height:1.3;letter-spacing:-0.01em;font-weight:700;color:var(--inchiostro)} .nota-testo{margin-top:4px;max-width:60ch;font-size:15px;line-height:1.5;color:var(--grigio)} .tondo+.nota-testo{margin-top:8px} .nota-titolo+.nota-testo{margin-top:2px} .azioni-nota{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:10px} /* il pulsante pieno ha la forma di tutti i pieni, raggio 12: la pillola resta solo per i bordati (13 ottobre) */ .azioni-nota .btn{width:auto;padding:8px 20px;font-size:15px;line-height:1.25;text-align:center} /* in riga: il tondo sta col titolo, il centro sulla prima riga del titolo (8 px sotto, come nella nota piena), e il testo scende sotto senza tirarselo dietro; centrato sul blocco, con un titolo su due righe e un testo lungo, il tondo finiva a meta' del testo (gate ux dell'8 ottobre) */ .nota-servizio.in-riga>.tondo{grid-row:1 / span 2} .nota-servizio.in-riga>.azioni-nota{margin-top:6px} /* nel lato stretto le azioni vanno sotto il tondo, per tutta la riga; sotto i 360 px dovunque: accanto al tondo restano 226 px, e una pillola come "Lire la politique de cookies" (232) andava su due righe */ .lato .nota-servizio>.azioni-nota{grid-column:1 / -1} @media (max-width:359.98px){ .nota-servizio>.azioni-nota{grid-column:1 / -1} } .lato .nota-servizio:first-child{margin-top:0} /* ---------- sponsor (16 ottobre, _sponsor.html.twig) ---------- Una fascia carta fra il contenuto e il piede, col filo --linea in alto: la sezione sopra puo' essere carta anche lei. Il logo sta intero su una scheda crema, #FAF0E6, il fondo del logo stesso (misurato sui bordi del file): sulla carta fredda del sito si legge come l'etichetta dello sponsor, e il crema del logo non fa da riquadro sporco. Padding 8 e raggio 16: l'angolo del logo resta dentro la curva della scheda, niente si ritaglia. Sul telefono tutto in colonna e al centro, il logo largo 120; dal 768 il logo a 140 a sinistra, occhiello, nome e luogo accanto. Bassa, padding 32 e 40: e' una fascia di servizio, non una sezione (gate ux del 16 ottobre: col logo a 160 prendeva 368 px su 667). Ferma: niente movimento */ .sponsor{padding:32px var(--bordo);background:var(--superficie);border-top:1px solid var(--linea)} .sponsor-dentro{display:grid;justify-items:center;gap:16px;text-align:center} .sponsor-logo{padding:8px;border-radius:var(--raggio-16);background:#FAF0E6;border:1px solid #EADFCC;box-shadow:var(--ombra-1)} .sponsor-logo img{width:120px;height:auto} .sponsor-nome{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-0.01em;color:var(--inchiostro);text-wrap:balance} .sponsor-nome a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} .sponsor-luogo{margin-top:4px;font-size:15px;color:var(--grigio)} @media (min-width:768px){ .sponsor{padding:40px var(--bordo)} .sponsor-dentro{grid-template-columns:auto auto;grid-template-areas:"logo occhiello" "logo testo";justify-content:center;justify-items:start; column-gap:32px;row-gap:12px;text-align:left} .sponsor .eyebrow{grid-area:occhiello;align-self:end} .sponsor-logo{grid-area:logo} .sponsor-testo{grid-area:testo;align-self:start} .sponsor-logo img{width:140px} } /* ---------- piede ---------- Tre colonne dal 768: la scuola con la sede, i contatti in righe con l'icona, lingue e informazioni legali. Sul telefono una sotto l'altra. Le icone ghiaccio sul fondo scuro (11,48:1) */ .piede{background:var(--inchiostro);color:#fff;padding:48px var(--bordo) 40px; /* la grana della chiamata e un filo di luce ghiaccio sul bordo alto, il confine con la chiamata. Le creste no: c'e' il Cervino che si disegna */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .10 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(168,224,247,.07),rgba(168,224,247,0) 140px); background-size:160px 160px,auto;background-repeat:repeat,no-repeat} /* il Cervino che si disegna (_footer.html.twig), dal 3 novembre il simbolo del logo della scuola: la M col profilo del monte ritagliato sotto, bianca, un tratto solo e poi pieno. Il path e' lungo 1 (pathLength) e il tratto e' un trattino lungo quanto lui col vuoto lungo il doppio (1 2): fermo e' pieno; il tracciato (stroke-dashoffset) e il riempimento che arriva dopo stanno nella sezione movimento. Il riempimento e' il colore dell'SVG (currentColor), che li' parte trasparente: fermo e' bianco. Un simbolo, non una cresta larga: 112 px sul telefono, 144 dal 768, allineato a sinistra come le colonne sotto. Niente vector-effect:non-scaling-stroke: con lui Chromium e WebKit misurano il trattino senza la scala del disegno. Lo spessore e' quindi nelle unita' del disegno (largo 520): 7 a 112 px e 5,4 a 144 px fanno 1,5 px */ .cresta-piede{width:112px;margin-bottom:32px} .cresta-piede svg{display:block;width:100%;height:auto;color:var(--bianco)} .cresta-piede path{fill:currentColor;stroke:var(--bianco);stroke-width:7px;stroke-linejoin:round;stroke-dasharray:1 2} @media (min-width:768px){ .cresta-piede{width:144px} .cresta-piede path{stroke-width:5.4px} } /* ---------- elementi firma delle pagine (8 ottobre) ---------- Un elemento a tratto per pagina interna, con la stessa penna del logo e del Cervino del piede: inline nel template (source(), senza ), in un contenitore <div class="firma firma-NOME" aria-hidden="true">. Tratto 1,5 alla larghezza nominale, cappucci tondi, colore --firma. Il tratto che si traccia sta nei path con pathLength 1 e il trattino lungo quanto loro, col vuoto lungo il doppio (stroke-dasharray 1 2): fermo, senza JavaScript e con meno movimento e' intero (il tracciato e' nella sezione movimento). Il vuoto doppio serve a nasconderlo senza punti: con 1 1 e lo spostamento di 1 il trattino nascosto finiva proprio all'inizio di ogni sottotracciato e il successivo cominciava alla fine, due trattini lunghi zero che coi cappucci tondi erano punti, prima del disegno, in Chromium e in WebKit. Spostato di 1,05 ogni sottotracciato (mai piu' lungo di 1) cade fra 1,05 e 2,05, dentro il vuoto, con un margine dai due capi. Le curve di livello delle carte sono sfondo e non si tracciano. Nei colori forzati il tratto prende il colore del testo e le curve spariscono. --firma e' il blu dei titoli schiarito di un quarto, sopra il 3:1 delle grafiche sui fondi dove stanno gli elementi */ .firma{display:block;color:var(--firma);pointer-events:none} .firma svg{display:block;width:100%;height:auto} /* ogni elemento alla sua misura (quella del disegno, piu' stretto se la colonna e' piu' stretta) e al suo posto: nell'apertura delle private e dei collettivi sotto il sottotitolo, in testa al lato in Chi siamo, Noleggio, Domande e Condizioni, fra i link della 404. La larghezza del disegno sta in --larga */ .firma-carving{--larga:560px;width:min(100%,560px);margin-top:20px} /* sul telefono basso il carving spingerebbe il secondo Prenota delle private sotto la prima videata (320x568, 375x553 col Safari aperto: misura in STATO.md): li' il funnel viene prima, e il carving non c'e' */ @media (max-width:959.98px) and (max-height:619.98px){ .firma-carving{display:none} } .firma-paline{--larga:560px;width:min(100%,560px);margin-top:20px} .firma-safari{--larga:480px} .firma-funivia{--larga:480px} .firma-skyline{--larga:300px;width:min(100%,300px);margin-bottom:12px} .firma-sci{--larga:560px;width:min(100%,560px);margin-bottom:16px} /* il Noleggio ha lo sci due volte e se ne vede uno: sul telefono sotto il sottotitolo, dai 960 in testa al lato */ .pagina-intro>.firma-sci{margin:20px 0 0} @media (max-width:959.98px){ .lato>.firma-sci{display:none} } @media (min-width:960px){ .pagina-intro>.firma-sci{display:none} } .firma-bussola{--larga:160px;width:min(100%,120px);margin-bottom:12px} .firma-timbro{--larga:160px;width:min(100%,136px);margin-bottom:12px} .firma-nebbia{--larga:560px;width:min(100%,560px);margin:28px 0 24px} /* il tratto e' di 1,5 alla larghezza del disegno; piu' stretto il disegno, il tratto si assottiglierebbe (a 390 px il carving e' largo 350 e scendeva a 0,94 px): qui resta di 1,5 px a ogni larghezza, nelle unita' del disegno (tan(atan2()) e' il rapporto fra due lunghezze, come nelle strisce della home). Le curve di livello no, sono sfondo. Nemmeno i tratti della maschera che scopre i nomi del Safari (nome), larghi 14 come le righe che coprono (safari.svg); le lettere che scoprono (scritta) si'. */ @supports (width:calc(tan(atan2(1cqi, 1px)) * 1px)){ .firma{container-type:inline-size} .firma .penna:not(.nome),.firma .scritta{stroke-width:calc(1.5 * tan(atan2(var(--larga), 100cqi)))} } /* la carta: un pannello bianco con bordo, raggio e ombra, come una scheda; l'SVG e' largo 480 */ .firma-carta{position:relative;width:min(100%,480px);background:var(--bianco);border:1px solid var(--linea);border-radius:var(--raggio-20);overflow:hidden; box-shadow:var(--ombra-1)} .piede-dentro{display:grid;gap:24px} .piede h2{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-0.01em;color:#fff} .piede .quota{margin-top:6px;color:var(--ghiaccio)} .piede p,.piede address{color:rgba(255,255,255,.62);font-size:14px;margin-top:6px} /* le pagine che il menu del desktop non ha: righe alte un dito sotto la sede, come i contatti */ .pagine-piede{display:flex;flex-direction:column;margin-top:10px} .pagine-piede a{min-height:var(--tocco);display:flex;align-items:center;font-size:15px;font-weight:600;color:#fff; text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px} .pagine-piede a[aria-current]{text-decoration-color:currentColor} /* Il meteo e Instagram sotto le pagine, con l'icona ghiaccio come i contatti. Il meteo su una riga sua, largo quanto il testo: Instagram, se c'e', va sotto */ .meteo-piede,.instagram-piede{min-height:var(--tocco);display:inline-flex;align-items:center;gap:12px;margin-top:6px;font-size:15px;font-weight:600;color:#fff; text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px} .meteo-piede{display:flex;width:fit-content} .meteo-piede .icona,.instagram-piede .icona{color:var(--ghiaccio)} @media (hover:hover){ .pagine-piede a:hover,.meteo-piede:hover,.instagram-piede:hover{text-decoration-color:currentColor} } .piede .contatti{display:flex;flex-direction:column} .piede .contatti a,.nav-contatti .contatti a{min-height:var(--tocco);display:flex;align-items:center;gap:12px;padding:4px 0;font-weight:600;font-size:15px; color:#fff;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px} .piede .contatti .icona{color:var(--ghiaccio)} @media (hover:hover){ .piede .contatti a:hover,.nav-contatti .contatti a:hover{text-decoration-color:currentColor;background:none} } .nav-contatti .contatti a{padding:4px 12px} /* la colonna dei contatti un po' piu' larga: a 768 px l'email del piede, 193 px, andava a capo dopo la @ in 184 */ @media (min-width:768px){ .piede-dentro{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:40px} /* nella pagina Contatti la colonna dei contatti non c'e' (_footer.html.twig): due colonne uguali */ .piede-dentro.senza-contatti{grid-template-columns:repeat(2,minmax(0,1fr))} .piede .lingue-piede{margin-top:0} } /* email del piede: un blocco intero se ci sta; se no la riga si spezza dopo la @ (il <wbr>) e, solo se una parte e' ancora piu' larga del pulsante, dove capita. Senza, un'email lunga a 320 px esce dal pulsante e fa scorrere la pagina */ .piede .email,.piede .email>span{display:inline-block;max-width:100%;overflow-wrap:anywhere} .lingue-piede{display:flex;gap:8px} .lingue-piede a{min-height:var(--tocco);min-width:var(--tocco);padding:0 14px;display:flex;align-items:center;justify-content:center;border:1px solid transparent; border-radius:24px;background:rgba(255,255,255,.1);font-size:13px;font-weight:700;letter-spacing:.04em} .lingue-piede a[aria-current]{background:rgba(255,255,255,.26)} .legali{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:14px} .dati-fiscali{margin:6px 0 0;font-size:13.5px;color:rgba(255,255,255,.78)} .legali a{min-height:var(--tocco);display:inline-flex;align-items:center;font-size:13.5px;color:rgba(255,255,255,.78); text-decoration:underline;text-underline-offset:3px} .legali .gestisci-cookie:not([hidden]){min-height:var(--tocco);display:inline-flex;align-items:center;font-size:13.5px;color:rgba(255,255,255,.78); text-decoration:underline;text-underline-offset:3px} /* i link nel testo, al passaggio del mouse: la sottolineatura s'ingrossa, subito */ .testo-ricco a:hover,.domanda p a:hover,.dati-legali a:hover,.consenso-testo a:hover,.legali a:hover, .legali .gestisci-cookie:hover{text-decoration-thickness:2px} /* ---------- dal tablet in su ---------- */ @media (min-width:700px){ :root{--sezione:72px} .tabella tbody th,.tabella thead th:first-child{width:40%} .logo img{height:40px} } @media (min-width:1280px){ .logo img{height:44px} } /* ---------- desktop: sezioni con piu' aria ---------- */ @media (min-width:960px){ :root{--sezione:96px} /* l'apertura delle pagine resta vicina all'intestazione */ .pagina-intro,.group-intro,.exp-intro,.private-intro{padding-top:56px} .exp-intro{padding-bottom:40px} .home-schede{padding-top:64px} } /* ---------- lezioni private sul desktop: la presentazione a sinistra, i Prenota a destra ---------- Sotto la presentazione il giorno pieno, nella sua colonna; i Prenota prendono le due righe. Sotto l'apertura le fasce a tutta larghezza (8 ottobre). L'ordine del fuoco resta presentazione, Prenota, giorno pieno, listino. In fondo 56 px d'aria: la scheda dei Prenota non poggia sulla fascia del listino */ @media (min-width:960px){ .private-alto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px;align-items:start;padding:0 var(--bordo) 56px} .private-alto>*{grid-column:1 / -1} .private-alto>section{padding:56px 0} .private-alto>.private-intro{grid-column:1;padding-bottom:10px} .private-alto>.private-prenota{grid-column:2;grid-row:1 / span 2;padding:56px 0 0} .private-alto>.private-pieno{grid-column:1;padding:14px 0 0} .prenota-scheda{padding:24px} /* la barra, se c'e', allinea prezzo e pulsante alla colonna dei contenuti */ .barra-prenota{padding-left:var(--bordo);padding-right:var(--bordo)} .listino,section>.aiuto{max-width:760px} } /* ---------- corsi collettivi sul desktop: titolo a sinistra, foto a destra ---------- */ @media (min-width:960px){ .group-alto.con-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:56px;align-items:center; padding:56px var(--bordo) 0} .group-alto.con-foto>section{padding:0} .group-alto.con-foto .group-intro{grid-column:1;grid-row:1} .group-alto.con-foto .group-foto{grid-column:2;grid-row:1} /* raggio e ombra sul contenitore, che ritaglia la foto mentre si assesta (sezione movimento). Il raggio non va anche sulla foto: gli angoli ripassati due volte cambiavano 142 pixel */ .group-foto{border-radius:var(--raggio-20);box-shadow:var(--ombra-1)} .group-foto img{aspect-ratio:4/3} section.fondo>.salti{max-width:760px} } /* ---------- pagine di contenuto con la foto sul desktop: titolo a sinistra, foto a destra, come i collettivi ---------- */ @media (min-width:960px){ .pagina-alto.con-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:56px;align-items:center; padding:56px var(--bordo) 0} .pagina-alto.con-foto>section{padding:0} .pagina-alto.con-foto .pagina-intro{grid-column:1;grid-row:1} .pagina-alto.con-foto .pagina-foto{grid-column:2;grid-row:1} .pagina-foto{border-radius:var(--raggio-20);box-shadow:var(--ombra-1)} .pagina-foto img{aspect-ratio:4/3} } /* ---------- foto e riquadri mai sul bordo (8 ottobre, pagine interne) ---------- Una foto o un riquadro arrotondato non tocca mai un bordo di fascia o il piede: o resta nella sua fascia con almeno 24 px d'aria sul telefono e 40 dai 960, o scavalca il bordo di --sbordo, con raggio e ombra, e solo se sotto c'e' una fascia carta che lo accoglie. Dai 960 la foto d'apertura dei collettivi scende sulla fascia dei corsi (sbordo, dal template quando ci sono corsi), di --sbordo esatti anche quando il titolo e' piu' alto della foto: la foto sta in fondo alla riga, che si misura sul suo margine negativo, e il titolo si centra sulla parte di foto sopra la fascia. Il margine e' fermo, non e' movimento; il contenitore ritaglia ancora la foto che si assesta. Dove sotto non c'e' una fascia (Chi siamo) la foto tiene 40 px d'aria. Sotto i 960 la foto e' a tutta larghezza sotto la testata, la hero della pagina, e fa eccezione */ @media (min-width:960px){ .con-foto.sbordo .group-foto,.con-foto.sbordo .pagina-foto{position:relative;z-index:1;align-self:end;margin-bottom:calc(-1 * var(--sbordo))} .con-foto.sbordo .group-intro,.con-foto.sbordo .pagina-intro{padding-bottom:24px} .pagina-alto.con-foto:not(.sbordo){padding-bottom:40px} } /* ---------- pagine di testo in due colonne dai 960 px ---------- Il testo a sinistra e, a destra in 340 px, il blocco che lo accompagna (.lato): la scuola in breve in Chi siamo, il rimando alle lezioni nel Noleggio, le sedi in Contatti, come scriverci nelle Domande, i documenti della Snowcare nelle Condizioni, il titolare nella Privacy, le statistiche nella Cookie policy. Il lato sta nella prima riga e ne prende 20, cosi' il testo gli scorre accanto dovunque stia nel codice: l'ordine del codice resta quello della lettura e del Tab, uguale sotto i 960. Il lato comincia dove comincia il testo, 20 px sotto l'apertura come ogni .pagina-corpo, che e' sempre la prima sezione a sinistra. Su uno schermo alto almeno 640 px il lato resta fermo sotto l'intestazione mentre il testo scorre. Sotto i 960 tutto in colonna; il lato di Chi siamo e del Noleggio (un aside) dopo il testo, nel suo riquadro. Il bordo trasparente si vede solo nei colori forzati, dove il fondo sparisce. Il lato ha la carta delle fasce (luce in alto a destra, dal chiaro al grigio) senza le curve, che gli passerebbero sotto le righe. Dai 960 il suo margine in basso conta nell'altezza della griglia: un lato piu' lungo del testo non poggia mai sul piede (regola dei bordi, qui sotto) */ @media (max-width:959.98px){ .pagina-due>aside.lato{margin:0 var(--bordo) var(--sezione);padding:20px;background:var(--superficie);border-radius:var(--raggio-16); border:1px solid transparent; background-image:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--carta-alto),var(--superficie))} } .in-breve{display:grid;gap:16px;margin-top:16px} .in-breve li{display:flex;flex-direction:column} .in-breve li.con-tratto{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center} .in-breve li.con-tratto>.numero-tratto{grid-row:1 / span 2;margin:0} .in-breve li.con-tratto>:not(.numero-tratto){grid-column:2} .in-breve .etichetta{margin-top:4px;font-size:14px;line-height:1.35;font-weight:600;color:var(--inchiostro)} .in-breve .fatto{padding-top:16px;border-top:1px solid var(--linea);font-size:15px;line-height:1.4;font-weight:600;color:var(--inchiostro)} .in-breve .fatto+.fatto{padding-top:0;border-top:0} @media (min-width:960px){ .pagina-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:64px;align-items:start;padding:0 var(--bordo)} .pagina-due>section{padding-left:0;padding-right:0} .pagina-due>.lato{grid-column:2;grid-row:1 / span 20;align-self:start;background:var(--superficie);border-radius:var(--raggio-16);padding:24px; margin:20px 0 var(--sezione);border:1px solid transparent; background-image:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--carta-alto),var(--superficie))} /* un lato su una fascia chiara (section.fondo) e' un riquadro stretto pieno di testo: niente curve di livello, che al 21% in alto a destra gli passerebbero sotto le righe */ .pagina-due>.lato::before{content:none} .pagina-due>:not(.lato){grid-column:1} .pagina-due>.hr{display:none} .pagina-due>.lato>h2+p{margin-top:8px} .pagina-due>.lato .sotto{font-size:16px} } @media (min-width:960px) and (min-height:640px){ .pagina-due>.lato{position:sticky;top:calc(var(--alto-testata, 64px) + 24px)} } /* i link del lato vanno a capo in righe pari: a 390 la parentesi col peso dei PDF non si spezza, a 1280 il set informativo in francese non lascia il peso da solo in fondo (gate ux del 26 ottobre). Dove il browser non lo sa fare, resta com'era */ .pagina-due .lato .aiuto a{text-wrap:balance} /* barra di prenotazione solo sugli schermi alti almeno 500 px: piu' bassi, intestazione e barra ne prenderebbero da un terzo a meta' (telefono in orizzontale). Stessa soglia nel JavaScript di barra_controller */ @media (max-height:499.98px){ .barra-prenota{display:none} } /* ---------- telefoni stretti: il listino a quattro colonne sta intero da 320 px in su ---------- In italiano "pomeriggio" deve stare intero nella prima colonna; misurato da 320 a 400 px a passi di 5. Sotto i quattro numeri delle persone la parola cala a 10,5 px, e sotto i 350 px resta solo per i lettori di schermo: in francese "personnes" toccava il bordo del chip (misurato: a 360 px resta un margine di 5,6 px, a 320 px 0,6) */ @media (max-width:399.98px){ .tabella th,.tabella td{padding:10px 3px} .tabella th:first-child{padding-left:10px} .tabella th:last-child,.tabella td:last-child{padding-right:10px} .tabella td.cifra{font-size:14px} .tabella tbody th b{font-size:14px} .tabella tbody th>span{font-size:12px} } @media (max-width:349.98px){ .tabella td.cifra,.tabella tbody th b{font-size:13px} .tabella th,.tabella td{padding-left:2px;padding-right:2px} .tabella th:first-child{padding-left:8px} .tabella th:last-child,.tabella td:last-child{padding-right:8px} } /* nel listino delle private le cifre di due stagioni vicine erano a 4 px ("130 € 170 €" a 320 px in francese): lo spazio fra le colonne sta tutto a sinistra delle cifre, che sono allineate a destra, e i bordi della tabella cedono un punto. Misurato da 320 a 400 px a passi di 5, tre lingue, 1 e 4 persone, Chromium e WebKit: almeno 8 px, e niente scorre */ @media (max-width:399.98px){ .tabella-prezzi th:first-child{padding-right:0} .tabella-prezzi .cifra{padding-left:9px;padding-right:0} .tabella-prezzi .cifra:last-child{padding-right:10px} } @media (max-width:349.98px){ .tabella-prezzi th:first-child{padding-left:7px} .tabella-prezzi .cifra{padding-left:8px} .tabella-prezzi .cifra:last-child{padding-right:7px} } /* ---------- colori forzati (Contrasto elevato di Windows): la scheda aperta resta riconoscibile ---------- */ @media (forced-colors:active){ .tab[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText} /* il chip delle persone scelto, come la stagione aperta; le tacche dei livelli sono fondi: bordate, piene col testo */ .chip-persone input:checked+.chip{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText} .tacche i{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText} .tacche[data-livello="1"] i:nth-child(-n+1),.tacche[data-livello="2"] i:nth-child(-n+2), .tacche[data-livello="3"] i:nth-child(-n+3),.tacche[data-livello="4"] i:nth-child(-n+4){background:CanvasText} /* il fondo che scivola sotto le stagioni sparirebbe comunque: la scheda aperta ha gia' Highlight */ .tabs::before{display:none} /* le tre righe dell'hamburger sono sfondi, che i colori forzati tolgono: prendono il colore del testo dei pulsanti */ .menu i{forced-color-adjust:none;background:ButtonText} /* le icone col colore loro (il + delle domande, il ghiaccio del piede) prendono quello del testo intorno */ .domanda summary .icona,.piede .contatti .icona,.meteo-piede .icona,.instagram-piede .icona{color:inherit} /* il tratto dell'SVG i colori forzati non lo toccano: quello del testo del sistema. GrayText no: nei temi a contrasto elevato di Windows e' rosso scuro sul bianco e verde sul nero */ .cresta-piede path{stroke:CanvasText;fill:CanvasText} /* gli elementi firma e le icone dei numeri col colore del testo, senza le curve di livello */ .firma,.numero-tratto{color:CanvasText} .firma .curve{display:none} /* niente sfondi decorativi: curve, luce, creste e grana */ section.fondo::before,.home-coppia.coppia-fondo::before{content:none} section.fondo,.home-coppia.coppia-fondo,.home-coppia:not(.coppia-fondo),main>section:not(.fondo):not(.hero):not(.chiamata), .home-coppia>section:not(.fondo),.chiamata,.piede,.group-alto,.pagina-alto,.private-alto,.pagina-due>.lato{background-image:none} /* il logo e' bianco: sul fondo scuro del sistema resta com'e', su quello chiaro diventa nero */ .logo img{forced-color-adjust:none} /* il pannello del modulo: il bordo, che lo separa dalla pagina quando il velo non c'e' */ dialog.foglio{border:2px solid CanvasText} } @media (forced-colors:active) and (prefers-color-scheme:light){ .logo img{filter:brightness(0)} } /* ---------- desktop: menu sempre aperto in riga, niente pulsante ---------- Con Prenota in testata la colonna dell'intestazione e' piu' larga di quella dei contenuti, 1200 px invece di 1120: in francese, la lingua piu' lunga, logo, menu, Prenota e lingua stanno in riga da 1280 px. Quattro voci (7 ottobre): Noleggio, Domande frequenti e Contatti (solo-telefono) restano nel menu del telefono e stanno nel piede. Le voci si sottolineano: la corrente sempre, le altre col mouse sopra, con una linea che cresce da sinistra (::after, la crescita e' nella sezione movimento; ferma, e' piena o non c'e'); i contatti del menu del telefono qui non ci sono (sono nel piede) */ @media (min-width:1280px){ .top{flex-wrap:nowrap;padding-left:max(20px, calc((100% - 1200px) / 2));padding-right:max(20px, calc((100% - 1200px) / 2))} .menu{display:none} .nav,.nav[hidden],.nav:not([hidden]){display:block;flex-basis:auto;order:1;margin-left:auto;height:auto;max-height:none;overflow:visible} .nav-contatti,.nav .solo-telefono{display:none} .nav ul{flex-direction:row;padding:0} .logo{margin-right:16px} /* qui il menu in riga si stringe prima del logo: il logo attuale torna alla sua misura fissa */ .top>.logo{flex:0 0 auto;max-width:none} /* il posto del logo nuovo e' largo quanto il logo alto 36 piu' il margine: il menu in riga prende il resto */ .logo-posto{flex:0 0 226px} .nav a,.nav ul a{position:relative;min-height:var(--tocco);font-size:14px;letter-spacing:0;padding:0 6px;white-space:nowrap;min-width:var(--tocco);justify-content:center; text-decoration:none} .nav a::after{content:"";position:absolute;left:6px;right:6px;bottom:10px;height:2px;border-radius:1px;background:currentColor; scale:0 1;transform-origin:left;pointer-events:none} .nav a[aria-current]{background:none} .nav a[aria-current]::after{scale:1 1} .nav a:active{background:none} } @media (min-width:1280px) and (hover:hover){ .nav a:hover{background:none} .nav a:hover::after{scale:1 1} .nav a:not([aria-current]):hover::after{background:rgba(255,255,255,.75)} /* 3,26:1 su --blu-testo, la corrente piena 4,57:1 */ } /* nei colori forzati la linea, che e' un fondo, sparirebbe: la voce corrente torna sottolineata come testo */ @media (min-width:1280px) and (forced-colors:active){ .nav a::after{display:none} .nav a[aria-current]{text-decoration:underline 2px currentColor;text-underline-offset:8px} } @media (min-width:1280px){ /* se le voci non ci stanno (testo ingrandito, spaziatura del testo) vanno su due righe invece di spingere fuori la lingua */ .nav{flex:0 1 auto;min-width:0} .nav ul{flex-wrap:wrap;justify-content:flex-end} .top-dx{flex-shrink:0} .top-dx{order:2} } /* ---------- movimento: inizio ---------- Solo per chi non ha chiesto meno movimento: con prefers-reduced-motion il sito e' fermo; senza JavaScript il movimento gira lo stesso, perche' non ne ha bisogno, tranne le rivelazioni (la classe attesa la mette rivela_controller, nella home, nei collettivi, in Chi siamo e in Contatti), e tutto resta visibile; un browser che non conosce gli effetti legati allo scorrimento (Firefox) tiene fermi solo quelli. Si muovono foto, titoli e linee; mai prezzi, moduli, Prenota delle private, pulsanti Prenota, barra Prenota, schede dei collettivi, testo lungo. Delle schede della home solo la foto, che si avvicina col mouse sopra o col fuoco dentro; prezzi e pulsanti fermi. Gli stati dei pulsanti (col mouse sopra, premuti) sono risposta al gesto e non animazione: valgono anche per Prenota. Le animazioni muovono solo opacity, translate, scale e transform; le transizioni anche i colori di fondo, bordo e testo e l'ombra (deciso da Marco il 6 ottobre). Niente oltre 5 s, niente ripetizioni, e nelle transizioni le sole variabili --veloce e --morbido di :root. Animazioni e transizioni stanno solo qui, fra questo commento e quello di fine: lo controlla MotionStylesTest. Lo shorthand animation azzera animation-timeline, che va scritta dopo */ @media screen and (prefers-reduced-motion:no-preference){ /* arrivo della hero, a ogni visita, "si sale in quota" (13 ottobre): un asse solo, tutto sale. La foto, opaca dal primo fotogramma, si assesta lenta da 1,06 in 2,2 s su una curva quasi lineare, col centro sulle teste: i visi restano fermi e la neve scende. Poi, a 90 ms l'uno dall'altro, titolo (150 ms) e sottotitolo (330 ms) salgono da sotto il bordo di una maschera in 800 ms, come blocchi interi e sempre opachi; i tre fatti (480, 570, 660 ms) e coordinate e quota (750 ms) salgono di 16 px. La maschera taglia solo durante l'arrivo: padding e margine negativo si annullano, e lasciano 16 px intorno al testo per l'ombra e gli accenti. Il blocco parte 24 px sotto il suo bordo basso, oltre quei 16 px: nel primo fotogramma non si vede nessun pezzo di lettera. Prenota sta fuori dalle maschere e resta fermo (MotionStylesTest). Sotto i 700 px la foto e' nel flusso e si assesta dal bordo basso, che resta fermo: ingrandita non scende sul testo di sotto. Il tempo zero e' la foto, non il foglio di stile: tutto aspetta fermo al primo fotogramma finche' la hero ha in-arrivo, che lo script in linea dopo la hero (home.html.twig) mette subito e toglie quando la foto c'e' (gia' in cache, al suo load o al suo errore) o dopo 2,5 s se non arriva. Senza quello script l'arrivo parte subito, come prima: il titolo non dipende dai moduli JavaScript (review del 13 ottobre) */ .hero{overflow:hidden;overflow:clip} .hero img{transform-origin:50% 30%;animation:hero-foto 2.2s cubic-bezier(.2,.7,.2,1) both} .hero .maschera{overflow:hidden;overflow:clip;padding:16px;margin:-16px} .hero .maschera > h1,.hero .maschera > p{animation:maschera .8s cubic-bezier(.16,1,.3,1) .15s both} .hero .maschera > p{animation-delay:.33s} .fatti li{animation:sale-16 .6s cubic-bezier(.16,1,.3,1) .48s both} .fatti li:nth-child(2){animation-delay:.57s} .fatti li:nth-child(3){animation-delay:.66s} .hero .quota>span{animation:sale-16 .6s cubic-bezier(.16,1,.3,1) .75s both} .hero.in-arrivo img,.hero.in-arrivo .maschera > h1,.hero.in-arrivo .maschera > p, .hero.in-arrivo .fatti li,.hero.in-arrivo .quota>span{animation-play-state:paused} /* il telefono in verticale: il sottotitolo arriva ritagliato al suo bordo basso, senza i 16 px della maschera sotto, cosi' salendo non passa sopra l'etichetta del prezzo, 12 px piu' giu'. Sul fondo scuro l'ombra del testo non si vede */ @media (max-width:699.98px) and (orientation:portrait){ .hero img{transform-origin:50% 100%} .hero .maschera{padding-bottom:0;margin-bottom:0} } /* le pagine interne arrivano come la hero (_intro, collettivi, experiences, private): titolo e sottotitolo salgono da sotto il bordo della loro maschera, interi e opachi; la foto dei collettivi e di Chi siamo si assesta da 1,04 a 1 dentro il suo contenitore, senza opacita'. Voce piccola, prezzi e Prenota stanno fuori dalle maschere e restano fermi. Nel flusso a blocchi i margini negativi di due maschere vicine si fondono in uno: -32 px tiene il sottotitolo dove sta da fermo, e dopo la voce piccola -4 px (i suoi 12 meno i 16 della maschera). Nelle experiences titolo e sottotitolo stanno in un div (exp-testo), accanto alla carta del Safari: la stessa regola. Le animazioni tengono il primo fotogramma prima di partire e non l'ultimo dopo (backwards): finite, la pagina e' identica a pixel a com'era, mentre con both Chromium lasciava la foto su un livello a parte, ricampionata */ .maschera{overflow:hidden;overflow:clip;padding:16px;margin:-16px} .maschera > h1,.maschera > .sotto{animation:maschera .7s cubic-bezier(.16,1,.3,1) backwards} .maschera > .sotto{animation-delay:.08s} .eyebrow+.maschera{margin-top:-4px} section>.maschera+.maschera,.exp-testo>.maschera+.maschera{margin-top:-32px} .group-foto img,.pagina-foto img{animation:foto-arriva .9s cubic-bezier(.16,1,.3,1) backwards} @keyframes foto-arriva{from{scale:1.04}to{scale:1}} @keyframes hero-foto{from{scale:1.06}to{scale:1}} @keyframes maschera{from{translate:0 calc(100% + 24px)}to{translate:0 0}} @keyframes sale-16{from{translate:0 16px}to{translate:0 0}} /* rivelazioni (rivela_controller): quello che all'avvio sta sotto lo schermo aspetta 24 px piu' in basso (attesa) e, quando entra, sale al suo posto. Solo translate, mai l'opacita': in attesa si vede e si legge. Mai su prezzi, Prenota o contenitori che li hanno dentro (HomeTest e RevealTest). Senza questa sezione la classe non fa niente */ [data-rivela]{transition:translate .7s var(--morbido)} .attesa{translate:0 24px} /* il simbolo del piede (disegno_controller): finche' non entra nello schermo il suo trattino e' spostato di tutta la lunghezza del path e non si vede (da-disegnare); entrando torna a 0 in 1,4 s e il contorno si traccia dal piede sinistro della M, come una penna. Lo spostamento nascosto e l'andamento sono quelli degli elementi firma, qui sotto: niente punti in nessun fotogramma. stroke-dashoffset solo qui e solo su questo path (MotionStylesTest). Senza questa sezione il simbolo e' disegnato */ .cresta-piede:not(.da-disegnare) path{transition:stroke-dashoffset 1.4s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%)} .cresta-piede.da-disegnare path{stroke-dashoffset:1.05} /* e il riempimento: finche' il contorno non e' disegnato il colore dell'SVG, che il path usa per riempirsi, e' trasparente; finito il disegno passa al bianco in mezzo secondo. Una volta sola. Senza questa sezione e senza JavaScript e' gia' pieno */ .cresta-piede:not(.da-disegnare) svg{transition:color .5s ease-out 1.4s} .cresta-piede.da-disegnare svg{color:transparent} /* gli elementi firma delle pagine (disegno_controller), come il Cervino del piede: finche' non entrano nello schermo il trattino e' spostato di 1,05, e ogni sottotracciato sta nel vuoto (da-disegnare); tolta la classe il tratto si traccia come una penna, una volta sola. Le durate seguono la lunghezza del tratto, fra 1,6 e 3,2 s. Quelli dell'apertura (carving, paline, safari, sci) partono al carico con mezzo secondo di ritardo, dopo l'arrivo del titolo (@starting-style, qui sotto). stroke-dashoffset solo su questi selettori, a coppie (MotionStylesTest, DRAWN). Coi colori forzati sono fermi e interi, come nella proposta: niente di questo vale li'. L'andamento e' quello di prima, cubic-bezier(.45,0,.25,1), scritto in punti con linear() per un motivo: parte con un salto. Un andamento che comincia da 0 passa per dei fotogrammi col trattino lungo quasi zero, e coi cappucci tondi quei fotogrammi sono punti (misurato a 50 ms dall'inizio: 0,2 per mille del tratto). Col salto il primo fotogramma dopo l'attesa ha gia' l'1 per cento della lunghezza del path, da 5 a 22 unita' del disegno: un tratto corto, mai un punto. Dove linear() non c'e' la transizione non vale e il disegno compare intero. MotionStylesTest controlla lo spostamento, il vuoto e il salto */ @media (forced-colors:none){ .firma-carving:not(.da-disegnare) path{transition:stroke-dashoffset 1.6s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%) .5s} .firma-carving.da-disegnare path{stroke-dashoffset:1.05} .firma-paline:not(.da-disegnare) path{transition:stroke-dashoffset 2.2s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%) .5s} .firma-paline.da-disegnare path{stroke-dashoffset:1.05} .firma-safari:not(.da-disegnare) path{transition:stroke-dashoffset 3.2s linear(0, 0 .1%, .058 .1%, .103 10%, .217 20%, .365 30%, .52 40%, .663 50%, .785 60%, .88 70%, .948 80%, .987 90%, 1 100%) .5s} .firma-safari.da-disegnare path{stroke-dashoffset:1.05} .firma-skyline:not(.da-disegnare) path{transition:stroke-dashoffset 2s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%) .3s} .firma-skyline.da-disegnare path{stroke-dashoffset:1.05} .firma-sci:not(.da-disegnare) path{transition:stroke-dashoffset 2.4s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%) .5s} .firma-sci.da-disegnare path{stroke-dashoffset:1.05} .firma-funivia:not(.da-disegnare) path{transition:stroke-dashoffset 2s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%)} .firma-funivia.da-disegnare path{stroke-dashoffset:1.05} .firma-bussola:not(.da-disegnare) path{transition:stroke-dashoffset 2.4s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%)} .firma-bussola.da-disegnare path{stroke-dashoffset:1.05} .firma-timbro:not(.da-disegnare) path{transition:stroke-dashoffset 2.8s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%)} .firma-timbro.da-disegnare path{stroke-dashoffset:1.05} .firma-nebbia:not(.da-disegnare) path{transition:stroke-dashoffset 1.8s linear(0, 0 .1%, .058 .1%, .077 10%, .15 20%, .318 30%, .558 40%, .745 50%, .861 60%, .932 70%, .973 80%, .994 90%, 1 100%) .4s} .firma-nebbia.da-disegnare path{stroke-dashoffset:1.05} /* le icone dei numeri della scuola, piu' piccole e piu' veloci: 1,2 s, col salto d'inizio piu' alto (un quinto del path), perche' su un disegno di 64 px l'1 per cento sarebbe un punto. Il tratteggio fra le due sedi non si sposta: lo scopre il tratto largo della sua maschera, che si traccia come gli altri (sedi.svg) */ .numero-tratto:not(.da-disegnare) path{transition:stroke-dashoffset 1.2s linear(0, 0 .1%, .2 .1%, .36 10%, .5 20%, .62 30%, .72 40%, .8 50%, .87 60%, .92 70%, .96 80%, .99 90%, 1 100%)} .numero-tratto.da-disegnare path{stroke-dashoffset:1.05} /* e tutte nascoste mentre il browser legge l'elenco, finche' lo script dopo non decide (numeri-in-attesa su html, la mette lo script prima dell'elenco e la tolgono lo script dopo o, al piu' tardi, un timeout di 2 s). Cambia solo il trattino, niente spostamenti */ .numeri-in-attesa .numero-tratto path{stroke-dashoffset:1.05} /* il giro del Safari e' un tratto solo (safari.svg): la penna va da Cervinia a Zermatt in 3,2 s, quasi a passo costante, cubic-bezier(.25,0,.5,1) col salto. Ogni nome si scrive da sinistra a destra in 0,8 s quando la penna arriva alla sua stazione (calcolato sul giro: al 20, 38, 54 e 84 per cento del tempo, Zermatt sulla punta della freccia): lo scopre il tratto della maschera (nome), largo quanto la riga, a passo costante dopo il salto. Prima ogni nome era un path di lettere che partivano tutte insieme e per mezzo secondo si leggevano spezzate (gate ux dell'8 ottobre). Dall'inizio all'ultimo nome 4 s */ .firma-safari:not(.da-disegnare) .nome{transition-duration:.8s;transition-timing-function:linear(0, 0 .1%, .105 .1%, 1 100%)} .firma-safari:not(.da-disegnare) .nome-2{transition-delay:1.13s} .firma-safari:not(.da-disegnare) .nome-3{transition-delay:1.72s} .firma-safari:not(.da-disegnare) .nome-4{transition-delay:2.23s} .firma-safari:not(.da-disegnare) .nome-5{transition-delay:3.17s} /* gli elementi dell'apertura: dal primo fotogramma il trattino e' spostato (lo stile di partenza) e la transizione lo riporta a 0, senza aspettare il JavaScript, che con la rete lenta arriva quando il disegno si vede gia' intero da un pezzo: farlo sparire per ridisegnarlo sarebbe un lampo (misura in STATO.md). Dove @starting-style non c'e' il disegno e' fermo e intero, e cosi' senza JavaScript (scripting): come nella proposta, li' ogni elemento e' gia' intero. Se all'apertura stanno sotto lo schermo (lo sci del Noleggio sul telefono) li ferma e li fa ripartire entrando disegno_controller, come gli altri */ @media (scripting:enabled){ @starting-style{ .firma-carving:not(.da-disegnare) path,.firma-paline:not(.da-disegnare) path,.firma-safari:not(.da-disegnare) path, .firma-sci:not(.da-disegnare) path{stroke-dashoffset:1.05} } } } /* domande frequenti: la risposta scende di poco e si accende solo all'apertura, la chiusura e' istantanea; l'altezza non si anima. Il + gira in una x */ .domanda[open] p{animation:risposta .2s ease-out} .domanda summary{transition:color var(--veloce)} .domanda summary .icona{transition:transform .2s var(--morbido)} /* e il + delle date delle stagioni sotto il listino delle private. I chip delle persone cambiano solo i colori; le cifre del listino no, cambiano e basta */ .date-stagioni summary .icona{transition:transform .2s var(--morbido)} .chip-persone .chip{transition:background-color var(--veloce),border-color var(--veloce),color var(--veloce)} @keyframes risposta{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}} /* il pannello del modulo (10 ottobre): all'apertura il foglio sale dal basso in 250 ms e il velo si accende in 200; dai 960 px la finestra arriva da 8 px piu' giu', accendendosi. Il modulo sale col foglio, una volta, e poi sta fermo come gli altri moduli. La chiusura e' istantanea, come le domande; niente display ne' visibility */ dialog.foglio[open]{animation:foglio-sale .25s var(--morbido)} dialog.foglio[open]::backdrop{animation:foglio-velo .2s ease-out} @media (min-width:960px){ dialog.foglio[open]{animation:foglio-arriva .25s var(--morbido)} } @keyframes foglio-sale{from{translate:0 100%}to{translate:0 0}} @keyframes foglio-velo{from{opacity:0}to{opacity:1}} @keyframes foglio-arriva{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}} /* risposta al gesto: i colori degli stati scorrono in 150 ms. Col mouse sopra il pulsante pieno sale di 1 px e la freccia scorre di 4 px; premuto si stringe appena. Prezzi, Prenota delle private e barra restano fermi: la barra non ha transizioni, solo il suo pulsante. I Prenota (delle private, della barra, dell'intestazione) e il Chiedi dei collettivi cambiano solo colore e si stringono alla pressione: non salgono e la loro freccia non scorre (MotionStylesTest) */ .btn,.pillola,.aiuto a,.aiuto .gestisci-cookie,.top-prenota,.lingua,.salti a,.canale{ transition:background-color var(--veloce),border-color var(--veloce),color var(--veloce),box-shadow var(--veloce), translate var(--veloce) var(--morbido),scale var(--veloce) var(--morbido)} .btn .icona,.link-icona .icona{transition:translate var(--veloce) var(--morbido)} .btn:active,.pillola:active,.aiuto a:active,.top-prenota:active{scale:.98} /* Indietro e Avanti delle strisce: il fondo scorre, premuti si stringono di piu', come i tondi di Apple */ .striscia-btn{transition:background-color var(--veloce),scale var(--veloce) var(--morbido)} .striscia-btn:not(:disabled):active{scale:.94} @media (hover:hover){ .btn:not(.prenota):not(.barra-btn):not(.chiedi):hover{translate:0 -1px} .btn:not(.prenota):not(.barra-btn):not(.chiedi):hover .freccia-vai,.btn:not(.prenota):not(.barra-btn):not(.chiedi):hover .icona-vai, .link-icona:hover .icona{translate:4px 0} } /* la riga del corso scelto prende il fondo in 150 ms: le cifre restano dove sono. Il Chiedi dei collettivi, nel blocco che diventa la barra, si comporta come i Prenota (qui sopra) */ .riga-corso{transition:background-color var(--veloce)} /* il fondo della stagione in evidenza (il commutatore dei collettivi sul telefono) scivola sotto quella scelta; le cifre cambiano e basta. Il testo delle schede cambia colore coi suoi stessi tempi e curva: in 150 ms c'era una scheda sotto 4,5:1 (chiara sul bianco o grigia sul blu) per 5 fotogrammi a 60 Hz, cosi' per 3 a 5, e senza transizione del colore per 3 a 6 col bianco sul bianco (misura in STATO) */ .tabs::before{transition:translate .2s var(--morbido)} .tab{transition:background-color var(--veloce),border-color var(--veloce),color .2s var(--morbido),box-shadow var(--veloce)} /* la linea sotto le voci del menu dai 1280 px cresce da sinistra col mouse sopra; cambia colore fra velata e piena */ .nav a::after{transition:scale .25s var(--morbido),background-color var(--veloce)} /* le schede della home portano a una pagina: col mouse sopra l'ombra sale. La scheda resta ferma */ .scheda-home{transition:box-shadow .25s var(--morbido)} /* l'hamburger diventa una x */ .menu i{transition:transform .2s var(--morbido)} /* foto delle schede della home: col mouse sopra o col fuoco dentro la scheda si avvicina, ritagliata dalla scheda (overflow:hidden). Sembra cliccabile e lo e': porta dove porta il pulsante. Le experiences no, perche' le loro schede non portano a una pagina. Solo dove c'e' il mouse: al tocco niente zoom che resta appeso. Prezzo e pulsanti fermi */ @media (hover:hover){ .scheda-home img{transition:transform .5s cubic-bezier(.16,1,.3,1)} .scheda-home:hover img,.scheda-home:focus-within img{transform:scale(1.04)} } /* la freccia della lingua gira aprendo e chiudendo il menu */ .lingua .freccia{transition:transform .2s} /* legati allo scorrimento: Firefox non li conosce e li tiene fermi, l'arrivo della hero qui sopra gira lo stesso. Le linee del tempo misurano la finestra meno lo scroll-padding: in alto l'intestazione piu' 16 px, in basso 0, o la barra Prenota quando c'e'. Per le rivelazioni, che contano l'entrata dal basso, va bene cosi' (con la barra partono sopra la barra, dove si vedono); la parallasse, che conta l'uscita in alto, lo azzera */ @supports (animation-timeline:view()){ /* la linea fra le sezioni si disegna da sinistra; eyebrow e titolo della sezione dopo salgono. La prima sezione di ogni pagina non ha la linea prima e resta ferma; il testo del pannello (.testo-ricco) pure. I titoli salgono soltanto, di 32 px e senza opacita': uno tagliato dal bordo basso al caricamento (private a 1920x1080) non e' mai sbiadito. Il range finisce a cover 10%: con cover 15% e 20% le lettere del titolo toccavano ancora la riga sotto appena entrata dal fondo (listino delle private e team a 390 px; misura a pixel in STATO.md) */ .hr{transform-origin:left;animation:linea linear both;animation-timeline:view();animation-range:entry 0% cover 35%} .hr + section:not(.testo-ricco) > .eyebrow,.hr + section:not(.testo-ricco) > h2{ animation:compare ease-out both;animation-timeline:view();animation-range:entry 0% cover 10%} @keyframes linea{from{scale:0 1}to{scale:1 1}} @keyframes compare{from{translate:0 32px}to{translate:0 0}} /* experiences: sulla foto un velo chiaro che si ritira verso il basso mentre la foto si assesta. La linea del tempo e' della scheda: la scheda taglia gli angoli con overflow:hidden, che per view() la farebbe il contenitore che scorre. Le schede senza foto restano ferme, e anche quella con la prima foto (l'unica senza loading=lazy, lo controlla ExperiencesTest): sta nella prima videata e a 390 px e' l'LCP, il movimento non la tocca. A 1280 e 1920, con la rete lenta, l'LCP e' la foto della seconda scheda, che da ferma ha gia' il velo ritirato del tutto. Nei colori forzati niente velo */ @media (forced-colors:none){ .experience{position:relative} .experience:has(> picture > img[loading="lazy"]){view-timeline-name:--scheda} .experience:has(> picture > img[loading="lazy"])::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;aspect-ratio:16/10; background:var(--blu-velo);pointer-events:none;transform-origin:bottom; animation:tenda linear both;animation-timeline:--scheda;animation-range:entry 0% entry 220px} .experience > picture > img[loading="lazy"]{animation:foto-tenda linear both;animation-timeline:--scheda;animation-range:entry 0% entry 220px} @keyframes tenda{from{scale:1 1}to{scale:1 0}} @keyframes foto-tenda{from{scale:1.16}to{scale:1}} } /* un'ombra sotto l'intestazione appare nei primi 40 px di scorrimento. z-index -1 nel contesto dell'intestazione: sotto il menu delle lingue, che scende oltre la barra; sopra la pagina come tutta l'intestazione. Non prende i clic */ .top::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:100%;height:12px;pointer-events:none; background:linear-gradient(rgba(18,33,43,.16),rgba(18,33,43,0));opacity:0; animation:ombra linear both;animation-timeline:scroll(root);animation-range:0 40px} @keyframes ombra{from{opacity:0}to{opacity:1}} /* le curve di livello delle fasce chiare scorrono piano con la pagina, 72 px dall'entrata all'uscita: una decorazione, sotto il testo, che non sposta niente */ section.fondo::before,.home-coppia.coppia-fondo::before{animation:curve linear both;animation-timeline:view()} @keyframes curve{from{translate:0 36px}to{translate:0 -36px}} /* chi siamo: i ritratti salgono quando arrivano; nome e ruolo fermi */ .team .persona img{animation:ritratto ease-out both;animation-timeline:view();animation-range:entry 0% entry 60%} @keyframes ritratto{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}} /* parallasse della foto della hero, solo sul desktop con il mouse: scorrendo la foto scende piu' piano della pagina. Velo e titolo fermi. Il contrasto del titolo resta sopra 4,5:1 nel punto peggiore (vedi STATO.md). Inset 0: con lo scroll-padding la finestra misurata partiva 16 px sotto il bordo alto della hero, che da ferma era gia' in uscita, e la foto scesa di 2,6 px lasciava una striscia scura sotto l'intestazione */ @media (min-width:960px) and (hover:hover) and (pointer:fine){ .hero{view-timeline-name:--hero;view-timeline-inset:0} .hero img{animation:hero-foto 2.2s cubic-bezier(.2,.7,.2,1) both,parallasse linear both; animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%} @keyframes parallasse{from{translate:0 0}to{translate:0 16%}} } } /* fra una pagina e l'altra del sito la pagina intera si dissolve in 250 ms (View Transitions, solo CSS: un browser che non le conosce cambia pagina come prima). La testata ha un nome suo e non si anima: resta ferma mentre sotto cambia la pagina. Col menu del telefono o quello delle lingue aperto la transizione si salta (menu_controller, pageswap); dove pageswap non c'e' il nome si toglie, e la testata aperta si dissolve con la pagina invece di restare sopra la nuova. Nessun altro elemento ha un nome (MotionStylesTest) */ @view-transition{navigation:auto} .top{view-transition-name:testata} html.menu-aperto .top,.top:has(.lingua[aria-expanded="true"]){view-transition-name:none} ::view-transition-group(testata),::view-transition-old(testata),::view-transition-new(testata){animation:none} ::view-transition-old(root),::view-transition-new(root){animation-duration:250ms;animation-timing-function:ease-out} } /* ---------- movimento: fine ---------- */