/* Autotrasporti Bizzotto — foglio comune. Le pagine hanno ancora il loro stile dentro ; qui stanno le regole nuove, condivise, e vincono perché questo foglio è caricato dopo. */ /* ──────────────────────────────────────────────────────────────────────── Apertura fotografica: la foto occupa tutto, il testo ci sta sopra. Il velo in gradiente serve a leggere: senza, il bianco sparisce nel cielo. ──────────────────────────────────────────────────────────────────────── */ .hero-foto{position:relative;display:flex;align-items:flex-end;overflow:hidden; min-height:min(78vh,700px);background:#121820} .hero-foto>picture{position:absolute;inset:0} .hero-foto>picture img{width:100%;height:100%;object-fit:cover;display:block} .hero-foto::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(8,12,17,.66) 0%,rgba(8,12,17,.20) 34%,rgba(8,12,17,.88) 100%)} .hero-foto .wrap{position:relative;z-index:2; padding:clamp(66px,10vw,132px) 0 clamp(34px,5vw,58px)} .hero-foto .lab{color:#D3DBE2} .hero-foto h1{margin:20px 0 0;max-width:17ch;color:#fff; font:800 clamp(33px,5.4vw,68px)/1.05 "Schibsted Grotesk",system-ui,sans-serif;letter-spacing:-.03em} .hero-foto h1 b{color:#F4B223;font-weight:800} .hero-foto .hero-lead{margin:22px 0 0;max-width:54ch;color:#E4E9ED;font-size:17.5px;line-height:1.62} .hero-foto .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} .hero-foto .btn--line{color:#fff;border-color:rgba(255,255,255,.55);background:none} .hero-foto .btn--line:hover{background:#fff;color:#121820;border-color:#fff} /* La testata resta bianca e appiccicata in alto: sopra la foto sarebbe più cinematografica, ma perderebbe il logo (è a due colori) e il tasto Menu. */ /* ──────────────────────────────────────────────────────────────────────── Nastro dei dati: le quattro righe che prima stavano in un riquadro a lato del titolo. Sotto la foto diventano una riga sola, da leggere in un colpo d'occhio. ──────────────────────────────────────────────────────────────────────── */ .nastro{background:#121820;padding:0} .nastro dl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 auto; background:rgba(255,255,255,.15)} .nastro dl>div{background:#121820;padding:20px 24px} .nastro dt{font:400 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.2em; text-transform:uppercase;color:#8F9CA8} .nastro dd{margin:10px 0 0;font:500 15px/1.35 "IBM Plex Mono",monospace;color:#fff} @media(max-width:780px){.nastro dl{grid-template-columns:1fr 1fr}} /* ──────────────────────────────────────────────────────────────────────── Fascia con la frase: prende il posto di una fotografia decorativa. ──────────────────────────────────────────────────────────────────────── */ .dichiara{background:#121820;color:#fff;padding:clamp(52px,7.5vw,104px) 0} /* la stessa fascia, con la fotografia sotto: il velo parte scuro da sinistra, dove sta la frase, e lascia respirare il mezzo sulla destra */ .dichiara--foto{position:relative;overflow:hidden;padding:clamp(84px,11vw,168px) 0} .dichiara--foto>picture{position:absolute;inset:0} .dichiara--foto>picture img{width:100%;height:100%;object-fit:cover;display:block} .dichiara--foto::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(95deg,rgba(8,12,17,.95) 0%,rgba(8,12,17,.90) 44%,rgba(8,12,17,.44) 74%,rgba(8,12,17,.28) 100%)} .dichiara--foto .wrap{position:relative;z-index:2} .dichiara--foto .sotto{max-width:44ch} @media(max-width:820px){ .dichiara--foto::after{background:linear-gradient(180deg,rgba(8,12,17,.72) 0%,rgba(8,12,17,.86) 60%,rgba(8,12,17,.92) 100%)} } .dichiara p{margin:0;max-width:22ch; font:800 clamp(27px,3.7vw,48px)/1.1 "Schibsted Grotesk",system-ui,sans-serif;letter-spacing:-.022em} .dichiara p b{color:#F4B223;font-weight:800} .dichiara .sotto{margin-top:24px;max-width:58ch;font-weight:400;font-size:17px;line-height:1.62; letter-spacing:0;color:#BFC8D0} /* ──────────────────────────────────────────────────────────────────────── Il modulo. È l'unico modo per raggiungerci, quindi deve essere la parte più curata del sito: prima il viaggio (le tre cose che servono davvero), poi chi siete. Gli errori si dicono sotto il campo, in italiano. ──────────────────────────────────────────────────────────────────────── */ .mod{margin-top:26px} .mod fieldset{border:0;margin:0 0 30px;padding:26px 0 0;border-top:1px solid #E3E7EA} .mod fieldset:first-of-type{padding-top:0;border-top:0} .mod legend{padding:0;font:400 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.2em; text-transform:uppercase;color:#5A646E} .mod .passo{margin:0 0 20px;font:400 15px/1.55 "Schibsted Grotesk",system-ui,sans-serif;color:#5A646E} .mod .griglia{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px} .mod .campo{display:flex;flex-direction:column;gap:7px;min-width:0} .mod .campo.largo{grid-column:1 / -1} .mod label{font:500 13.5px/1.25 "Schibsted Grotesk",system-ui,sans-serif;color:#121820} .mod label .opz{color:#7A848E;font-weight:400} .mod input,.mod select,.mod textarea{width:100%;min-height:52px;padding:13px 14px; font:400 16px/1.4 "Schibsted Grotesk",system-ui,sans-serif;color:#121820; background:#fff;border:1px solid #C7CFD6;border-radius:2px;-webkit-appearance:none;appearance:none} .mod select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A646E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px} .mod textarea{min-height:112px;resize:vertical} .mod input::placeholder,.mod textarea::placeholder{color:#98A2AC} .mod input:focus,.mod select:focus,.mod textarea:focus{border-color:#121820; outline:3px solid #F4B223;outline-offset:1px} .mod .err{display:none;font:500 13px/1.4 "Schibsted Grotesk",system-ui,sans-serif;color:#A5241C} .mod .campo[data-errore] .err{display:block} .mod .campo[data-errore] input,.mod .campo[data-errore] select,.mod .campo[data-errore] textarea{ border-color:#A5241C;background:#FDF7F6} .mod .invia{display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:0 34px;border:0;border-radius:2px;cursor:pointer; background:#121820;color:#fff;font:600 16px/1 "Schibsted Grotesk",system-ui,sans-serif} .mod .invia:hover{background:#000} .mod .invia[disabled]{opacity:.62;cursor:default} .mod .coda{margin:16px 0 0;font:400 14px/1.6 "Schibsted Grotesk",system-ui,sans-serif;color:#5A646E} .mod .coda a{color:#121820} .mod .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media(max-width:640px){.mod .griglia{grid-template-columns:1fr}} /* ──────────────────────────────────────────────────────────────────────── Dove si tocca con un dito il bersaglio deve essere alto 44 px. Cresce l'area, non il testo. Restano fuori i link dentro le frasi: lì il bersaglio è la riga, e allargarli spezzerebbe il testo. ──────────────────────────────────────────────────────────────────────── */ @media (max-width:820px),(pointer:coarse){ header .brand{padding:9px 0} .mnav-btn{min-height:44px} .more{display:inline-flex;align-items:center;min-height:44px} footer ul a{display:inline-flex;align-items:center;min-height:44px} } /* esito dell'invio: sostituisce il modulo, così non si invia due volte */ .esito{border-left:3px solid #F4B223;background:#FBFCFC;padding:26px 28px;margin-top:26px} .esito[data-tipo="errore"]{border-left-color:#A5241C} .esito[data-tipo="attesa"]{border-left-color:#5A646E} .esito h3{margin:0 0 10px;font:700 20px/1.25 "Schibsted Grotesk",system-ui,sans-serif;color:#121820} .esito p{margin:0;font:400 16px/1.62 "Schibsted Grotesk",system-ui,sans-serif;color:#454F59} .esito p+p{margin-top:12px}