/* ⚠ #copertura E .cop-* NON CI SONO PIU'. La sezione con l'elenco dei paesi e' stata tolta il 23 agosto 2026: elencare venti destinazioni quando le rotte vere sono quattro e' la stessa vanteria dei numeri inventati. Le regole condivise con altri (.form-wrap, gli elenchi delle sezioni scure, il ritmo verticale) sono state SEPARATE prima di togliere le orfane — codice che resta perche' toglierlo e' rischioso diventa codice che nessuno osa toccare mai. */ /* ══ IL FOGLIO DEL SITO ══════════════════════════════════════════════ * * Era 90 KB scritti dentro in index.html. Estratto qui il 23 * agosto 2026 quando il sito e' diventato piu' di una pagina sola: * servizi, azienda e tracking sono pagine vere, e duplicare novantamila * byte di regole in ognuna sarebbe stato assurdo — qui il browser lo * scarica una volta e lo tiene. * * ⚠ L'ORDINE E' RIMASTO QUELLO. Questo foglio sta dove stava il blocco: * dopo tokens.css e prima dei due blocchi piu' in basso nel documento, * che continuano a vincere per ordine. Verificato misurando la * geometria e i colori di un elemento su sette a 1440, 390 e 360: * identici prima e dopo lo spostamento. * ═════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── TOKENS ───────────────────────────────────────────── */ :root{ /* ── AGGANCIO AI TOKEN CONDIVISI ────────────────────────── Questa è l'unica delle tre superfici che deve vendere, ed è l'unica che tiene la palette CALDA: --bg nei token è un bianco freddo, giusto per un gestionale denso, sbagliato per una pagina che deve sembrare una rivista. Qui la superficie torna al crema di marchio. Non è un valore locale inventato: è --brand-cream. ───────────────────────────────────────────────────────── */ --bg: var(--brand-cream); --surface: #FFFFFF; --surface-2: #EDE9E2; --cream: var(--brand-cream); --cream2: #EDE9E2; --navy: var(--brand-navy); --navy2: var(--brand-navy-2); --navy3: #1E3550; --orange: var(--brand-orange); --orange2: var(--brand-orange-2); --orange-soft: var(--accent-bg); --white: #FFFFFF; --green: var(--ok); --ink: var(--text); --ink2: var(--text); --mid: var(--text-2); --line: var(--hairline); --line2: var(--hairline-faint); --ease: var(--ease-in-out); } /* ───────────────────────────────────────────── RESET ───────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 } html { font-size:var(--fs-md); scroll-behavior:smooth } body { font-family:var(--sans); background:var(--cream); color:var(--ink); overflow-x:hidden } /* ── FILM GRAIN — luxury noise overlay ── */ body::after { content:''; position:fixed; inset:0; z-index:8888; pointer-events:none; user-select:none; opacity:0.038; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E"); background-size:256px 256px; mix-blend-mode:overlay; } /* ═══════════════════════════════════════════ INTRO OVERLAY — SOLVERA branded entrance ═══════════════════════════════════════════ */ #sv-intro { position:fixed; inset:0; z-index:9999; background:var(--navy); display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:all; transition: clip-path 1s cubic-bezier(.77,0,.18,1), opacity .4s ease; } #sv-intro.exit { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 0; pointer-events: none; } /* top accent */ .wi-line { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to right, var(--orange), rgba(200,67,10,.4) 60%, transparent); transform:scaleX(0); transform-origin:left; box-shadow:var(--sh-xs); animation:wiLine 1s var(--ease) .1s forwards; } @keyframes wiLine { to{transform:scaleX(1)} } /* city & country tag */ .wi-origin { position:absolute; top:36px; right:5%; font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.2); opacity:0; animation:wiUp .6s ease 1.6s forwards; } /* center content */ .wi-center { text-align:center; position:relative } /* Welcome eyebrow */ .wi-welcome { font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(18px,2.6vw,32px); color:rgba(255,255,255,.55); letter-spacing:.02em; margin-bottom:8px; opacity:0; animation:wiUp .7s ease .12s forwards;line-height:1.12;text-wrap:balance} /* SOLVERA letters — each animated individually */ .wi-way { font-family:var(--serif); font-weight:300; font-size:clamp(44px,12.5vw,148px); line-height:.85; letter-spacing:-.02em; color:var(--white); display:flex; justify-content:center; gap:.01em; overflow:hidden;text-wrap:balance} .wi-letter { display:inline-block; opacity:0; transform:translateY(60px); animation:wiLetter .7s cubic-bezier(.22, 1, .36, 1) forwards; } .wi-letter:nth-child(1){ animation-delay:.2s } .wi-letter:nth-child(2){ animation-delay:.30s } .wi-letter:nth-child(3){ animation-delay:.40s } .wi-letter:nth-child(4){ animation-delay:.50s } .wi-letter:nth-child(5){ animation-delay:.60s } .wi-letter:nth-child(6){ animation-delay:.70s } .wi-letter:nth-child(7){ animation-delay:.80s } @keyframes wiLetter { to { opacity:1; transform:translateY(0) } } /* logistic subtitle */ .wi-logistic { font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(22px,3.5vw,44px); color:rgba(255,255,255,.45); letter-spacing:.06em; margin-top:6px; opacity:0; animation:wiUp .7s ease .75s forwards;line-height:1.06;text-wrap:balance} /* orange dot between SOLVERA and logistic */ .wi-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--orange); margin-right:12px; vertical-align:middle; box-shadow:var(--sh-xs); opacity:0; animation:wiUp .4s ease .7s forwards; } /* horizontal orange rule */ .wi-rule { width:0; height:1px; background:var(--orange); margin:24px auto 20px; opacity:.7; animation:wiRule .8s var(--ease) .9s forwards; } @keyframes wiRule { to{width:clamp(60px,8vw,100px)} } /* tagline */ .wi-tagline { font-size:clamp(12px,1.2vw,15px); font-weight:300; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.35); opacity:0; animation:wiUp .6s ease 1.1s forwards; } /* bottom bar */ .wi-bottom { position:absolute; bottom:40px; left:5%; right:5%; display:flex; justify-content:space-between; align-items:center; opacity:0; animation:wiUp .6s ease 1.4s forwards; } .wi-bottom-tag { font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.2); display:flex; align-items:center; gap:8px; } .wi-bottom-tag::before { content:''; width:20px; height:1px; background:rgba(255,255,255,.15); } .wi-progress { width:140px; height:1px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; } .wi-progress-fill { height:100%; background:var(--orange); border-radius:2px; animation:wiProgress 2.8s linear forwards; } @keyframes wiProgress { from{width:0%} to{width:100%} } @keyframes wiUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } a { text-decoration:none; color:inherit } button { font-family:var(--sans); cursor:pointer } ::-webkit-scrollbar { width:3px } ::-webkit-scrollbar-track { background:var(--cream) } ::-webkit-scrollbar-thumb { background:var(--orange) } /* ───────────────────────────────────────────── UTILITIES ───────────────────────────────────────────── */ .container { max-width:1280px; margin:0 auto; padding:0 5% } .hr { width:100%; height:1px; background:var(--line); border:none } /* ───────────────────────────────────────────── REVEAL SYSTEM — cinematic: slow, blurred emergence ───────────────────────────────────────────── */ [data-reveal] { opacity:0; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); } [data-reveal="up"] { transform:translateY(14px) } [data-reveal="left"] { transform:translateX(-14px) } [data-reveal="right"] { transform:translateX(14px) } [data-reveal="fade"] { transform:translateY(14px) } [data-reveal="scale"] { transform:scale(.985) } [data-reveal].in { opacity:1; transform:none; filter:blur(0px); } .d1 { transition-delay:60ms } .d2 { transition-delay:120ms } .d3 { transition-delay:180ms } .d4 { transition-delay:.46s } .d5 { transition-delay:.6s } /* ───────────────────────────────────────────── NAVBAR ───────────────────────────────────────────── */ #nav { position: fixed; top:0; left:0; right:0; z-index:200; height: 72px; display: flex; align-items:center; justify-content:space-between; padding: 0 5%; transition: background .5s var(--ease), box-shadow .5s; } #nav.solid { background: rgba(247,244,239,.97); border-bottom: 1px solid var(--line); box-shadow:var(--sh-xs); } .nav-logo { font-family: var(--serif); font-size:var(--fs-xl); font-weight:500; letter-spacing:.04em; color: var(--white); display:flex; align-items:center; gap:10px; transition: color .4s; z-index:201; } /* ══ LA BARRA «SOLIDA»: E' SUCCESSO DUE VOLTE, E IN VERSI OPPOSTI ══ 30 agosto 2026. Il fondo della barra e i colori del suo testo stanno in due punti lontani del foglio, e ogni volta che qualcuno tocca l'uno si dimentica l'altro. E' successo due volte: ① il fondo divento NAVY (per un blocco «NAV glass» in fondo al foglio, con !important) e il testo resto scuro → navy su navy; allora si scrisse il testo CHIARO; ② quel blocco e' stato tolto, il fondo e' tornato CREMA — e il testo e' rimasto chiaro. Bianco su crema. Misurato il 30 agosto sulle pagine interne (servizi, azienda, tracking), dove la barra e' sempre «solid»: il nome «Logistica» 1,23:1 le lingue EN/DE/ES/FR 1,14:1 «Richiedi Offerta» 1,23:1 Non e' brutto: non c'e'. E lo vede un cliente, non noi. ⚠ E IL COMMENTO CHE C'ERA QUI DICEVA IL FALSO: raccontava del blocco «NAV glass» come se ci fosse ancora, e concludeva «barra navy, testo chiaro — una scelta dichiarata». Quel blocco non esiste piu da un pezzo. Chi leggeva il commento credeva che il chiaro fosse voluto. ⚠⚠ LA REGOLA, per non farlo una terza volta: **il fondo e il testo della barra si cambiano INSIEME, e stanno qui.** Se un giorno il fondo torna scuro, queste righe vanno rigirate nello stesso momento — non «poi». C'e' `strumenti/prova-contrasto.js` che misura i pixel veri e lo dice, ma la porta arriva dopo il danno: la regola viene prima. Oggi: fondo CREMA (riga qui sopra), testo NAVY. */ #nav.solid .nav-logo { color: var(--brand-navy) } #nav.solid .nav-logo .nl-sub { color: rgba(12,27,46,.66) } .logo-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; } .nav-center { display:flex; gap:36px; list-style:none; } .nav-center li { position:relative } .nav-center a { font-size:var(--fs-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); transition: color .3s; position:relative; padding-bottom:2px; display:flex; align-items:center; gap:5px; } .nav-center a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--orange); transition: width .35s var(--ease); } .nav-center a:hover { color:rgba(255,255,255,1) } .nav-center a:hover::after { width:100% } #nav.solid .nav-center a { color:rgba(12,27,46,.78) } #nav.solid .nav-center a:hover { color:var(--brand-navy) } .nav-chevron { font-size:var(--fs-label); opacity:.5; transition: transform .3s var(--ease), opacity .3s; display:inline-block; } .nav-center li:hover .nav-chevron { transform:rotate(180deg); opacity:1 } /* MEGA MENU PANEL */ /* CTA column */ .nav-right { display:flex; align-items:center; gap:20px } /* Lang switcher */ .langs { display:flex; gap:2px } /* era .45: 4,5:1 esatti, cioe senza margine */ .lang { background:none; border:none; font-family:var(--sans); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.68); padding:4px 7px; border-radius:2px; transition: all .2s; } .lang.on { color:var(--white); background:rgba(255,255,255,.1) } .lang:hover { color:rgba(255,255,255,.8) } /* .45 di bianco su navy misura 4,3:1 — sotto la soglia gia' in cima alla pagina. Qui sale a .62, che e' il minimo per stare sopra 4,5. */ #nav.solid .lang { color:rgba(12,27,46,.70) } #nav.solid .lang.on { color:var(--brand-navy); background:rgba(12,27,46,.09) } #nav.solid .lang:hover { color:var(--brand-navy) } .nav-cta { font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--white); border:1px solid rgba(255,255,255,.35); background:none; padding:9px 20px; border-radius:1px; transition:all .3s; } .nav-cta:hover { background:var(--orange); border-color:var(--orange) } #nav.solid .nav-cta { color:var(--brand-navy); border-color:rgba(12,27,46,.35) } #nav.solid .nav-cta:hover { color:var(--white); background:var(--orange); border-color:var(--orange) } /* ───────────────────────────────────────────── HERO — arredo3: full-bleed, big serif italic ───────────────────────────────────────────── */ #hero { height:100vh; min-height:680px; background:var(--navy); display:flex; flex-direction:column; justify-content:flex-end; padding:0 5% 80px; position:relative; overflow:hidden; } /* ── Canvas is now the full hero background ── */ /* slide caption */ /* su fondo arancione pieno serviva bianco: era 3,54:1 */ /* progress bar dots */ @keyframes dotFill { from{width:0%} to{width:100%} } /* canvas — la scena notturna, a tutta sezione. `inset:0` si risolve sul riquadro di riempimento dell'eroe, quindi copre anche il padding: e' voluto, la strada deve arrivare ai bordi. */ #heroCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } /* vignette + left-side gradient for readability */ .hero-texture { position:absolute; inset:0; z-index:2; background: linear-gradient(to right, rgba(10,18,32,.75) 0%, rgba(10,18,32,.30) 45%, transparent 70%), linear-gradient(to top, rgba(10,18,32,.9) 0%, transparent 40%), linear-gradient(to bottom, rgba(10,18,32,.4) 0%, transparent 15%); pointer-events:none; } /* animated horizontal rule */ .hero-line { position:absolute; top:0; left:0; right:0; height:3px; z-index:5; background:linear-gradient(to right, var(--orange), rgba(200,67,10,.3) 60%, transparent); transform:scaleX(0); transform-origin:left; animation:lineGrow 1.6s var(--ease) .2s forwards; box-shadow:var(--sh-xs); } @keyframes lineGrow { to { transform:scaleX(1) } } /* big background text */ .hero-bg-text { position:absolute; bottom:-40px; right:-20px; font-family:var(--serif); font-size:clamp(140px,22vw,340px); font-weight:300; font-style:italic; color:rgba(255,255,255,.032); line-height:1; pointer-events:none; user-select:none; white-space:nowrap; z-index:2; ;letter-spacing:-.035em;text-wrap:balance} .hero-top { position:absolute; top:110px; left:5%; right:5%; display:flex; justify-content:space-between; align-items:flex-start; z-index:5; } .h-pretitolo { opacity:0; animation:fadeUp .6s var(--ease) .35s forwards; font-size:var(--fs-label); letter-spacing:.22em; text-transform:uppercase; color:#FFEBD8; margin-bottom:18px; } .hero-label { font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); opacity:0; animation:fadeUp .8s var(--ease) .6s forwards; } /* «color:var(--navy)» qui dentro era navy su fondo navy. Non si vedeva perche' il primo span ha un colore in linea che vince, ma il secondo dipendeva da chi arrivava dopo nel foglio di stile: una leggibilita' lasciata al caso. */ .hero-label span { color:inherit } .hero-year { font-family:var(--sans); font-size:var(--fs-sm); font-weight:300; /* era .25 → contrasto 2,25:1, sotto la soglia. Misurato, non stimato. */ color:rgba(255,255,255,.72); letter-spacing:.06em; opacity:0; animation:fadeUp .8s var(--ease) .7s forwards; } .hero-body { position:relative; z-index:5 } .hero-title { font-family:var(--serif); font-size:clamp(60px,10vw,140px); font-weight:300; line-height:.92; color:var(--white); letter-spacing:-.02em; margin-bottom:40px; opacity:0; animation:heroReveal 1.1s cubic-bezier(.16, 1, .3, 1) .38s forwards; text-shadow: 0 2px 40px rgba(0,0,0,.3);text-wrap:balance} .hero-title em { font-style:italic; color:rgba(255,255,255,.60) } .hero-title strong { font-weight:500; display:block; position:relative } .hero-title strong::after { content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px; background:linear-gradient(to right,var(--orange),rgba(200,67,10,.4)); box-shadow:var(--sh-xs); animation:lineExpand .85s cubic-bezier(.16, 1, .3, 1) 1.35s forwards; } .hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; } .hero-sub { font-size:var(--fs-base); font-weight:300; line-height:1.75; color:rgba(255,255,255,.68); max-width:400px; opacity:0; animation:fadeUp .9s var(--ease) .85s forwards; } .hero-actions { display:flex; gap:14px; flex-shrink:0; opacity:0; animation:fadeUp .9s var(--ease) 1s forwards; } .btn-main { font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--white); background:var(--orange); border:none; padding:14px 32px; border-radius:1px; transition:background .3s, box-shadow .3s; ; } .btn-main:hover { background:var(--orange2); animation:none; box-shadow:var(--sh-xs)} /* Il link secondario dell'eroe: sottolineato, non un pulsante. */ .link-sotto { font-size:var(--fs-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.86); text-decoration:none; padding:14px 4px 6px; border-bottom:1px solid rgba(255,255,255,.34); transition:color .3s, border-color .3s; display:inline-flex; align-items:center; min-height:44px; } .link-sotto:hover { color:var(--white); border-color:var(--orange) } .btn-ghost { font-size:var(--fs-label); font-weight:500; letter-spacing:.14em; /* era .6 su fondo trasparente: misurato 2,98:1 sui pixel veri della scena. Un pulsante «fantasma» puo' essere discreto, non illeggibile. Il velo e' un fondo VERO e non un'ombra, perche' un'ombra non alza il contrasto: sposta il problema di un pixel. */ text-transform:uppercase; color:rgba(255,255,255,.90); background:rgba(9,15,27,.90); border:1px solid rgba(255,255,255,.24); padding:14px 32px; border-radius:1px; transition:all .3s; } .btn-ghost:hover { color:var(--white); border-color:rgba(255,255,255,.5) } /* scroll indicator */ .hero-scroll { /* Spostato al centro: a destra ci sono adesso la didascalia e i puntini della rotta, e due elementi nello stesso angolo era esattamente il difetto da cui siamo partiti. */ position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; animation:fadeUp .8s var(--ease) 1.2s forwards; } .scroll-track { width:1px; height:56px; background:rgba(255,255,255,.12); position:relative; overflow:hidden; } .scroll-thumb { position:absolute; top:-100%; width:100%; height:50%; background:var(--orange); ; } .hero-scroll span { font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; /* era .25: misurato 1,20:1, cioe' invisibile. Poi .72, che con il cancello corretto misurava 4,2:1 — ancora sotto. */ color:rgba(255,255,255,.88); writing-mode:vertical-rl; /* Sta in mezzo alla strada, cioe' sul punto piu' chiaro della scena: la pozza dei nostri fari passa proprio di li'. Il velo sta sulla PAROLA e non sull'indicatore intero: messo sul contenitore ne allargava la scatola di nove pixel per lato e finiva sopra «Europa» della striscia. */ background:rgba(7,12,22,.72); padding:.42em .3em; border-radius:100px; } /* stats strip */ /* era .32 → 2,88:1. Sono le etichette sotto «Como», «P.IVA», «Europa»: piccole, maiuscole e spaziate, cioe' gia' difficili di loro. */ /* counter animation */ /* ── SUL TELEFONO ──────────────────────────────────────────────── A 390 px non esistono due colonne, e soprattutto non esiste un fondo dove ancorare quattro cose diverse: la didascalia, i pulsanti e la striscia dei dati finivano tutti nello stesso posto, uno sopra l'altro. Qui la sezione smette di essere alta quanto lo schermo e diventa un flusso: intestazione, titolo, testo, pulsanti, mappa, dati. Si scorre, che sul telefono e' il gesto naturale — e si evita anche il 100vh di iOS, che conta la barra degli indirizzi e taglia. La mappa NON resta uno sfondo sbiadito: diventa un blocco vero, con le etichette leggibili. Le quattro rotte sono il contenuto, non la decorazione, e su un telefono il contenuto va letto. */ @media (max-width: 860px) { #hero { height:auto; min-height:0; padding:104px 5% 30px; justify-content:flex-start; } /* Nel documento la mappa viene PRIMA del titolo, perche' da schermo grande e' uno sfondo e l'ordine non conta. Diventata un blocco vero, l'ordine conta eccome: senza queste righe la pagina si apriva sulla mappa e il titolo finiva sotto la piega. */ .hero-top { order:1; position:static; margin-bottom:16px; flex-direction:column; align-items:flex-start; gap:6px; } .hero-body { order:2; } .hero-title { font-size:clamp(40px,12vw,64px); margin-bottom:26px; } .hero-bottom { gap:22px; } .hero-sub { max-width:none; } /* La didascalia che ruota diceva la stessa cosa della mappa, e sul telefono cadeva sui pulsanti: la mappa la dice meglio e sta ferma. */ } /* A 390 px il pulsante della barra cadeva sopra la scritta «SOLVERA Logistica»: due elementi nello stesso punto, di nuovo. Il menu del telefono ha gia' la voce «Offerta», quindi non si perde niente — e sotto i pulsanti c'e' comunque «Richiedi Offerta» nella sezione. */ /* ⚠ E IL PULSANTE NEMMENO SOTTO I 620px. Era nascosto perche' si accavallava col nome. Ma per questi clienti «Richiedi Offerta» non e' un dettaglio: e' la funzione principale, e chi ha fretta deve arrivarci in un clic senza viaggiare. Non si toglie il pulsante: si stringe. */ /* ⚠ E STRINGERE NON VUOL DIRE RIMPICCIOLIRE IL BERSAGLIO. Al primo tentativo avevo ridotto il riempimento dei pulsanti delle lingue per farceli stare: il cancello li ha misurati 21x22 contro il minimo di 44x44, cioe' cinque bersagli che un dito non prende. Un pulsante che si vede ma non si tocca non e' visibile: e' un disegno. La larghezza si puo' stringere — una sigla di due lettere non ha bisogno di spazio ai lati — ma l'ALTEZZA no, e il bersaglio si allarga con un'area invisibile sopra e sotto. */ @media (max-width: 620px) { /* ⚠ STRINGERE IN LARGHEZZA, NON IN ALTEZZA. Riducendo il riempimento il pulsante e' sceso a 34px di altezza: sotto il minimo di 44, cioe' la funzione principale del sito diventava difficile da centrare col pollice. Stessa lezione delle lingue, stessa riga di codice sbagliata due volte. */ .nav-cta { padding:0 12px; min-height:44px; font-size:11px; letter-spacing:.06em; } .langs { gap:0 } .lang { font-size:11px; padding:0 6px; min-width:34px; height:44px; line-height:44px; } .nav-logo .nl-sub { display:none } /* «Logistica» sotto il nome */ } @media (max-width: 420px) { .nav-cta { padding:0 9px; min-height:44px; font-size:10px; } .lang { font-size:10px; padding:0 3px; min-width:28px; } } @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} } @keyframes heroReveal { from { opacity:0; transform:translateY(26px) scale(.97); filter:blur(7px); } to { opacity:1; transform:none; filter:blur(0); } } @keyframes lineExpand { to { width:100% } } /* ═════════════════════════════════════════════════════════════ HERO v2 — Premium cinematic layers Aurora streaks, gradient mesh, eyebrow badge, magnetic CTA, per-word title reveal, counter animation ═════════════════════════════════════════════════════════════ */ /* Aurora light streaks (behind canvas, soft blur) */ .hero-aurora { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; mix-blend-mode:screen; opacity:.55; } .hero-aurora::before, .hero-aurora::after { content:''; position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(80px); will-change:transform; } .hero-aurora::before { top:-15%; left:-15%; background:radial-gradient(circle,rgba(200,67,10,.55) 0%,rgba(200,67,10,0) 60%); ; } .hero-aurora::after { bottom:-20%; right:-10%; background:radial-gradient(circle,rgba(60,120,200,.45) 0%,rgba(60,120,200,0) 60%); ; } /* Floating ambient particles */ .hero-particles { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; } .hero-particles span { position:absolute; display:block; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.5); box-shadow:0 0 6px rgba(255,255,255,.45); animation-delay:var(--delay,0s); opacity:.7; ;display:none} .hero-particles span.orange { background:var(--orange); box-shadow:var(--sh-xs); } /* Eyebrow badge with animated dot */ @keyframes livePulse { 0%,100% { box-shadow:var(--sh-xs); } 50% { box-shadow:var(--sh-xs); } } /* Per-word title stagger reveal */ .hero-title .word { display:inline-block; opacity:0; transform:translateY(40px) rotateX(-30deg); transform-origin:50% 100%; animation:wordReveal .9s cubic-bezier(.16, 1, .3, 1) forwards; } .hero-title .word.delay-1 { animation-delay:.45s; } .hero-title .word.delay-2 { animation-delay:.6s; } .hero-title .word.delay-3 { animation-delay:.85s; } .hero-title .word.delay-4 { animation-delay:1s; } .hero-title .word.delay-5 { animation-delay:1.15s; } @keyframes wordReveal { to { opacity:1; transform:translateY(0) rotateX(0); } } /* Title gradient shimmer on the "strong" line */ /* ── «trova la sua via.» NON SI VEDEVA ───────────────────────────── Qui c'era un gradiente ritagliato sul testo: background-clip:text piu' -webkit-text-fill-color:transparent. Bello in teoria, e invisibile in pratica — perche' le parole di questo titolo sono spezzate in inline-block dall'effetto di entrata, e il ritaglio non aggancia i figli: il riempimento resta trasparente e la riga sparisce. La seconda riga del titolo mancava dal sito, e non era una mia modifica: mancava anche prima. Ho scoperto che c'era solo perche' il cancello me l'ha misurata — box 72,602,1296,129, opacita' 1 — mentre sullo schermo non c'era niente. Un titolo che dipende da una tecnica fragile e' un titolo che a volte non c'e'. Bianco pieno: si vede sempre, e ha piu' contrasto col fondo, che era anche la richiesta. */ .hero-title strong { color:var(--white); } /* Magnetic CTA enhancements */ .btn-main { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; isolation:isolate; } .btn-main::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%); transform:translateX(-100%); transition:transform .6s cubic-bezier(.16,1,.3,1); } .btn-main:hover::before { transform:translateX(100%); } .btn-main .arrow { display:inline-block; width:14px; height:1px; background:currentColor; position:relative; transition:width .3s var(--ease); } .btn-main .arrow::after { content:''; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); } .btn-main:hover .arrow { width:20px; } .btn-ghost { display:inline-flex; align-items:center; gap:8px; position:relative; } .btn-ghost::after { content:''; position:absolute; left:50%; bottom:-1px; width:0; height:1px; background:var(--orange); transition:width .35s var(--ease), left .35s var(--ease); } .btn-ghost:hover::after { left:0; width:100%; } /* Stats: count-up reveal w/ rotating accent */ @keyframes numPop { 0% { opacity:0; transform:translateY(14px); } 60% { opacity:1; } 100% { opacity:1; transform:translateY(0); } } /* Premium scroll indicator */ .hero-scroll { gap:14px; } .scroll-track { width:1px; height:64px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, rgba(255,255,255,0) 100%); } .scroll-thumb { background:linear-gradient(180deg, rgba(200,67,10,0) 0%, var(--orange) 50%, rgba(200,67,10,0) 100%); box-shadow:var(--sh-xs); } .hero-scroll span { /* Questa regola sta DOPO quella la' sopra e vinceva lei: alzare il colore in un punto solo non bastava, e il cancello l'ha visto. */ font-weight:500; color:rgba(255,255,255,.72); } /* Reduced motion */ @media (prefers-reduced-motion:reduce) { .hero-aurora::before, .hero-aurora::after, .hero-particles span, .hero-title strong { animation:none; } .hero-title .word { opacity:1; transform:none; animation:none; } } /* ───────────────────────────────────────────── TICKER — arredo3 style: thin, elegant ───────────────────────────────────────────── */ @keyframes tick { to { transform:translateX(-50%) } } /* era --mid su crema: 4,0:1. La fascia che scorre e la prima cosa che si legge sotto la scena */ /* ───────────────────────────────────────────── INTRO — arredo3: editorial layout ───────────────────────────────────────────── */ /* ══ IL PASSAGGIO ══════════════════════════════════════════════════ L'eroe finiva a 900 px con la striscia scura, e a 945 cominciava #intro con il crema pieno: uno stacco netto, e proprio nel punto in cui la scena diventa più chiara. Sembrava che finisse un sito e ne cominciasse un altro. La dissolvenza sta all'INIZIO dell'intro, non alla fine dell'eroe: così la scena e i suoi contrasti misurati non li tocca nessuno. */ #intro { padding:140px 5% 100px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; position:relative; } #intro::before { content:''; position:absolute; top:0; left:0; right:0; height:190px; background:linear-gradient(to bottom, var(--brand-navy), rgba(12,27,46,0)); pointer-events:none; z-index:0; } #intro > * { position:relative; z-index:1 } .intro-left { font-family:var(--serif); font-size:clamp(42px,5.5vw,72px); font-weight:300; line-height:1.05; color:var(--navy); letter-spacing:-.01em;text-wrap:balance} .intro-left em { font-style:italic; color:var(--navy) } .intro-right { padding-bottom:8px } .intro-label { font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin-bottom:20px; display:block; } .intro-text { font-size:var(--fs-md); font-weight:300; line-height:1.85; color:var(--ink2); max-width:440px; margin-bottom:36px; } .link-arrow { display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); border-bottom:1px solid var(--navy); padding-bottom:2px; transition: all .3s; } .link-arrow::after { content:'→'; transition:transform .3s } .link-arrow:hover { color:var(--orange); border-color:var(--orange) } .link-arrow:hover::after { transform:translateX(6px) } /* ───────────────────────────────────────────── SERVIZI — premium dark cards with icons ───────────────────────────────────────────── */ #servizi { background: var(--navy); position: relative; overflow: hidden; } #servizi::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 55% 40% at 15% 20%, rgba(200,67,10,.07) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 80%, rgba(22,40,64,.9) 0%, transparent 60%); z-index:0; } /* subtle grid overlay */ #servizi::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:60px 60px; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 20%, rgba(0,0,0,.3) 80%, transparent 100%); } .servizi-header { padding:90px 5% 64px; display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid rgba(255,255,255,.07); position:relative; z-index:1; } .sh-left span { display:block; font-size:var(--fs-label); letter-spacing:.22em; text-transform:uppercase; color:var(--navy); margin-bottom:16px; opacity:.9; } .sh-left h2 { font-family:var(--serif); font-size:clamp(40px,5vw,68px); font-weight:300; color:var(--white); line-height:1.02; letter-spacing:-.02em;text-wrap:balance} .sh-left h2 em { font-style:italic; color:rgba(255,255,255,.55) } .sh-right { font-size:var(--fs-sm); font-weight:300; line-height:1.85; color:rgba(255,255,255,.68); max-width:360px; text-align:right; } /* 3-column card grid */ .svc-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.07); position:relative; z-index:1; } /* ══ ⚠ LE STESSE SCHEDE SU DUE FONDI DIVERSI ═══════════════════════ Queste schede nascono nella pagina iniziale, dentro una sezione NAVY: titolo bianco e sottotitolo bianco al 70% ci stanno bene. Poi sono state riusate in «servizi», dentro `.pag-corpo`, che e CREMA. Stesso blocco, fondo opposto, e nessuno ha cambiato i colori: «Import», «Export», «Trasporto Europeo» e le tre descrizioni erano quasi bianche su crema — misurate 1,04:1. E' la pagina che spiega cosa vendiamo. ⚠ Non si toccano i colori di base: nella pagina iniziale sono giusti. Si scrivono qui quelli per il fondo chiaro, legati alla sezione. */ .pag-corpo .svc-card-title { color: var(--brand-navy) } /* ⚠ .55 misurava 3,78 sul crema: e il sottotitolo delle tre cose che vendiamo. .72 sta a 6,5 — margine largo perche il crema del sito ha una sfumatura d'ambra che si mangia un decimo. */ .pag-corpo .svc-card-title em { color: rgba(12,27,46,.72) } .pag-corpo .svc-card-sub { color: rgba(12,27,46,.72) } .pag-corpo .svc-card:hover .svc-card-sub { color: rgba(12,27,46,.82) } .pag-corpo .svc-card-num { color: rgba(12,27,46,.10) } .pag-corpo .svc-card:hover .svc-card-num { color: rgba(200,67,10,.22) } .pag-corpo .svc-divider { background: rgba(12,27,46,.18) } .pag-corpo .svc-grid { border-top-color: rgba(12,27,46,.10) } .pag-corpo .svc-card { border-right-color: rgba(12,27,46,.10) } /* ⚠ PIU' STRETTA. Le tre schede facevano 1.190px da sole — un quinto del viaggio per dire tre cose. Sono sparite le pillole (quattro etichette per scheda, dodici in tutto: un elenco di parole) e il pulsante per scheda (tre «Richiedi offerta» nella stessa fascia, mentre uno sta gia' fisso in alto e uno chiude la pagina). Restano il numero, l'icona, il titolo, la riga e la frase. Il dettaglio sta in servizi.html, che e' una pagina vera. */ .svc-card { padding:34px 30px 30px; border-right:1px solid rgba(255,255,255,.07); position:relative; overflow:hidden; cursor:default; transition: background .5s var(--ease); } .svc-card:last-child { border-right:none } /* top accent line */ .svc-card::before { content:''; position:absolute; top:0; left:0; right:100%; height:2px; background:var(--orange); transition: right .6s var(--ease); box-shadow:var(--sh-xs); } .svc-card:hover::before { right:0 } /* glow on hover */ .svc-card:hover { background:rgba(22,40,64,.6); } /* card number */ .svc-card-num { /* FUORI DALLA SCALA, di proposito. Non è testo: è un elemento di disegno. Il passo più vicino sarebbe --fs-5xl (54px), ma portarlo lì non riordinerebbe la tipografia — ridisegnerebbe la sezione. Deciso il 13 agosto 2026. */ font-family:var(--serif); font-size:72px; font-weight:300; color:rgba(255,255,255,.05); line-height:1; letter-spacing:-.02em; position:absolute; top:32px; right:36px; transition: color .5s, transform .5s var(--ease);text-wrap:balance} .svc-card:hover .svc-card-num { color:rgba(200,67,10,.12); transform:scale(1.1) translateY(-4px); } /* icon area */ .svc-icon { width:52px; height:52px; margin-bottom:32px; position:relative; z-index:1; } .svc-icon svg { width:100%; height:100%; transition: transform .5s var(--ease), opacity .3s; } .svc-card:hover .svc-icon svg { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 4px 12px rgba(200,67,10,.4)); } /* title */ .svc-card-title { font-family:var(--serif); font-size:clamp(28px,2.8vw,40px); font-weight:300; color:var(--white); letter-spacing:-.02em; line-height:1.05; margin-bottom:16px; transition: color .4s;text-wrap:balance} .svc-card-title em { font-style:italic; color:var(--navy); display:block; font-size:1.12em; } /* divider */ .svc-divider { width:32px; height:1px; background:rgba(255,255,255,.15); margin:20px 0 22px; transition: width .5s var(--ease), background .4s; } .svc-card:hover .svc-divider { width:60px; background:var(--orange) } /* description */ /* ⚠ TRE CLASSI, LO STESSO ERRORE. Bianco fra il 35% e il 40% su navy dà fra 3,18:1 e 3,38:1 — elegante da vicino, illeggibile da lontano e su uno schermo al sole. Sono i sottotitoli che spiegano cosa fa l'azienda: se non si leggono, la sezione non dice niente. */ .svc-card-sub { font-size:var(--fs-sm); font-weight:300; line-height:1.8; color:rgba(255,255,255,.70); margin-bottom:28px; transition: color .4s; } .svc-card:hover .svc-card-sub { color:rgba(255,255,255,.55) } /* tag pills */ .svc-card:hover /* CTA arrow */ .svc-card:hover .svc-card:hover /* reveal animation */ .svc-card.svc-hidden { opacity:0; transform:translateY(36px); } .svc-card.svc-visible { opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); } /* ───────────────────────────────────────────── NUMBERS — arredo3: centered, large type ───────────────────────────────────────────── */ /* ───────────────────────────────────────────── PROCESSO — arredo3: stacked, editorial ───────────────────────────────────────────── */ #processo { padding:140px 5% 100px } .processo-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:80px; } .ph-title { font-family:var(--serif); font-size:clamp(40px,5vw,64px); font-weight:300; color:var(--navy); line-height:1.05;letter-spacing:-.032em;text-wrap:balance} .ph-title em { font-style:italic } .ph-note { font-size:var(--fs-sm); font-weight:300; color:var(--mid); max-width:320px; line-height:1.7; text-align:right; } .steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); } .step-cell { background:var(--cream); padding:48px 36px; position:relative; overflow:hidden; transition:background .5s var(--ease); } /* ⚠ E LO STESSO VALEVA PER IL PASSAGGIO DEL MOUSE. Dentro #processo il token --navy e' ribaltato a #E8EDF5: `background:var(--navy)` rendeva la scheda CHIARA al passaggio, con dentro il testo chiaro. Un secondo difetto identico, nascosto sotto il primo. */ .step-cell:hover { background:#16233a } .step-cell-n { /* FUORI DALLA SCALA, di proposito. Non è testo: è un elemento di disegno. Il passo più vicino sarebbe --fs-5xl (54px), ma portarlo lì non riordinerebbe la tipografia — ridisegnerebbe la sezione. Deciso il 13 agosto 2026. */ font-family:var(--serif); font-size:80px; font-weight:300; /* su scheda chiara torna il navy al 6%: è una filigrana, non un testo */ color:rgba(10,27,46,.07); line-height:1; margin-bottom:24px; transition:color .5s;letter-spacing:-.032em;text-wrap:balance} .step-cell:hover .step-cell-n { color:rgba(255,255,255,.07) } .step-cell-icon { display:flex; align-items:center; width:44px; height:44px; margin-bottom:20px; background:rgba(200,67,10,.08); border-radius:10px; justify-content:center; } .step-cell-title { font-family:var(--serif); font-size:var(--fs-2xl); font-weight:400; color:var(--navy); margin-bottom:12px; transition:color .5s; } .step-cell:hover .step-cell-title { color:var(--white) } .step-cell-desc { font-size:var(--fs-sm); font-weight:300; color:var(--mid); line-height:1.75; transition:color .5s; } /* .45 di bianco su navy misura 4,3:1 — sotto il pavimento */ .step-cell:hover .step-cell-desc { color:rgba(255,255,255,.62) } .step-cell-bar { position:absolute; bottom:0; left:0; height:2px; width:0; background:var(--orange); transition:width .5s var(--ease); } .step-cell:hover .step-cell-bar { width:100% } /* ───────────────────────────────────────────── COPERTURA — arredo3: split dark section ───────────────────────────────────────────── */ /* map */ .map-bg-text { position:absolute; font-family:var(--serif); /* FUORI DALLA SCALA, di proposito. Non è testo: è un elemento di disegno. Il passo più vicino sarebbe --fs-5xl (54px), ma portarlo lì non riordinerebbe la tipografia — ridisegnerebbe la sezione. Deciso il 13 agosto 2026. */ font-size:100px; font-weight:300; font-style:italic; color:rgba(255,255,255,.03); bottom:10px; right:20px; pointer-events:none; white-space:nowrap;letter-spacing:-.035em;line-height:1.02;text-wrap:balance} .map-svg { width:100%; max-width:360px } .c-eu { fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.1); stroke-width:.5 } .c-it { fill:rgba(200,67,10,.35); stroke:rgba(200,67,10,.6); stroke-width:.8 } .c-on { fill:rgba(200,67,10,.18); stroke:rgba(200,67,10,.35); stroke-width:.5 } .rt { stroke:rgba(200,67,10,.3); stroke-width:.8; stroke-dasharray:4 3; fill:none } .dot-pulse { fill:var(--orange) } .dot-pulse-ring { fill:none; stroke:var(--orange); stroke-width:1.5; opacity:.4; } /* ───────────────────────────────────────────── FORM SECTION — arredo3: minimal, airy ───────────────────────────────────────────── */ #offerta { padding:140px 5% 120px } .form-wrap { display:grid; grid-template-columns:1fr 1.1fr; gap:100px; align-items:start; } .form-left {} .form-tag { font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin-bottom:20px; display:block; } .form-title { font-family:var(--serif); font-size:clamp(40px,5vw,62px); font-weight:300; color:var(--navy); line-height:1.05; margin-bottom:28px;letter-spacing:-.028em;text-wrap:balance} .form-title em { font-style:italic } .form-desc { font-size:var(--fs-base); font-weight:300; color:var(--ink2); line-height:1.8; margin-bottom:48px; } .form-promises { display:flex; flex-direction:column; gap:16px } .fp { display:flex; align-items:center; gap:14px; font-size:var(--fs-sm); font-weight:300; color:var(--ink2); padding-bottom:16px; border-bottom:1px solid var(--line); } .fp-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:22px; height:22px; } /* form fields — arredo3 style: minimal underline */ .form-right {} .field { margin-bottom:28px; } .field /* era --navy su crema in maiuscoletto spaziato: leggibile a monitor, 3,9:1 misurato sui pixel veri. Il nero pieno costa nulla. */ /* era --mid su crema: fra 3,9 e 4,45:1. Sono le etichette del modulo del preventivo, in maiuscoletto spaziato — già difficili di loro. */ label { display:block; font-size:var(--fs-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#1a2440; margin-bottom:10px; } .field input, .field select, .field textarea { width:100%; background:none; border:none; border-bottom:1px solid var(--line); padding:10px 0; font-family:var(--sans); font-size:var(--fs-base); font-weight:300; color:var(--navy); outline:none; transition:border-color .3s; border-radius:0; } .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--orange) } .field input::placeholder, .field textarea::placeholder { color:var(--mid); opacity:.55; font-style:italic; font-weight:300 } .field textarea { resize:none; height:80px; line-height:1.6 } .field select { appearance:none; cursor:pointer } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:24px } .form-submit { width:100%; background:var(--navy); color:var(--white); border:none; padding:18px; font-family:var(--sans); font-size:var(--fs-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; border-radius:1px; margin-top:8px; transition:background .3s; } .form-submit:hover { background:var(--orange) } /* dogana accordion section */ .dogana-wrap { border-left: 2px solid var(--orange); padding-left: 20px; margin-bottom: 28px; margin-top: 4px; } .dogana-title { font-size:var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); margin-bottom: 20px; font-weight: 500; display: block; } /* checkbox grid — 2 columns, clean alignment */ .docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding-top: 6px; } /* era --ink2 su crema: 4,38:1. Sono caselle da spuntare in un modulo, cioè testo che si legge mentre si compila */ .doc-check { display: flex; align-items: center; gap: 8px; font-size:var(--fs-label); font-weight: 400; text-transform: none; letter-spacing: 0; color: #16203a; cursor: pointer; line-height: 1.3; } .doc-check input[type="checkbox"] { accent-color: var(--orange); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; } /* ───────────────────────────────────────────── FOOTER — arredo3: clean, minimal ───────────────────────────────────────────── */ footer { background:var(--navy); padding:80px 5% 40px; border-top:1px solid rgba(255,255,255,.05); } /* Era 2fr 1fr 1fr 1fr per quattro figli: marchio + tre colonne. Con la quarta colonna (Documenti) i figli sono cinque, e il quinto andava a capo da solo. */ .footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:44px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:32px; } .ft-brand-name { font-family:var(--serif); font-size:var(--fs-2xl); font-weight:400; color:var(--white); margin-bottom:16px; letter-spacing:.02em; } .ft-brand-name span { color:var(--navy) } /* era .35 di bianco su navy: 3,18:1, sotto il pavimento */ .ft-brand-desc { font-size:var(--fs-label); font-weight:300; color:rgba(255,255,255,.62); line-height:1.9; max-width:260px; } /* ⚠ ERA .25 — misurato 2,24:1 sul navy del piede. I titoli delle colonne («Servizi», «Azienda», «Documenti», «Contatti») sono le etichette che dicono cosa c'e sotto: se non si leggono, il piede diventa un elenco di link senza capitoli. .55 resta discreto e si legge. */ .ft-col h5 { font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:24px; } .ft-col ul { list-style:none; display:flex; flex-direction:column; gap:12px } /* era .45: 4,42:1, sotto il pavimento per un soffio. Sono i link del piede */ .ft-col a { font-size:var(--fs-sm); font-weight:300; color:rgba(255,255,255,.62); transition:color .25s; } .ft-col a:hover { color:var(--white) } .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; } /* Era al 20% di bianco: 1,88:1. Finché diceva «operatore logistico internazionale» era una firma decorativa; adesso porta la ragione sociale e la partita IVA, che sono dati obbligatori — e un dato obbligatorio che non si legge è come non averlo scritto. */ .ft-copy { font-size:var(--fs-label); color:rgba(255,255,255,.72) } /* La bolla della chat è fissa nell'angolo in basso a destra e copriva «Gestisci Cookie»: 56px di bolla + 36 di margine + un po' d'aria. */ .footer-bottom .ft-links { padding-right:104px } @media (max-width:700px){ /* sul telefono i link vanno a capo: il padding li spingerebbe fuori */ .footer-bottom .ft-links { padding-right:0; padding-bottom:76px } } .intro-dal { font-family:var(--serif); font-style:italic; font-size:var(--fs-sm); color:var(--mid); margin-left:12px; letter-spacing:.02em; } .ft-dal { font-family:var(--serif); font-size:var(--fs-sm); font-style:italic; color:rgba(255,255,255,.55); margin-top:2px; letter-spacing:.02em; } /* ══ IL PANNELLO DEI DATI SOCIETARI ═════════════════════════════════ Scorre da destra sopra la pagina. Non è una pagina nuova: i dati obbligatori si consultano e si chiude, senza perdere il posto. */ .ia-velo { position:fixed; inset:0; z-index:9200; background:rgba(4,9,18,.62); opacity:0; transition:opacity .32s var(--ease); } .ia-velo.aperto { opacity:1 } .ia-pannello { position:fixed; top:0; right:0; bottom:0; z-index:9201; width:min(460px, 92vw); background:var(--brand-navy); border-left:1px solid rgba(232,237,245,.14); box-shadow:-24px 0 60px rgba(2,6,14,.5); padding:34px 32px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(100%); transition:transform .38s var(--ease); } .ia-pannello.aperto { transform:translateX(0) } .ia-chiudi { position:absolute; top:18px; right:18px; width:44px; height:44px; /* il bersaglio minimo, non meno */ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; font-size:22px; line-height:1; cursor:pointer; border-radius:2px; transition:all .2s; } .ia-chiudi:hover { border-color:var(--orange); color:var(--orange) } .ia-h { font-family:var(--serif); font-size:var(--fs-2xl); font-weight:400; color:#E8EDF5; margin:0 0 26px; padding-right:56px; letter-spacing:-.01em; } .ia-nome { font-family:var(--serif); font-size:var(--fs-lg); color:#E8EDF5; margin:0 0 4px; line-height:1.35; } .ia-forma { font-size:var(--fs-sm); color:rgba(232,237,245,.62); margin:0 0 28px } /* «aria fra i gruppi»: è il gruppo che stacca, non ogni riga */ .ia-gruppo { margin-bottom:24px } .ia-riga { display:flex; gap:14px; align-items:baseline; padding:7px 0; border-bottom:1px solid rgba(232,237,245,.08); font-size:var(--fs-sm); line-height:1.6; } .ia-riga:last-child { border-bottom:none } .ia-riga b { font-weight:600; color:rgba(232,237,245,.72); flex:0 0 auto; min-width:150px } .ia-riga span { color:#E8EDF5 } /* L'indirizzo va a capo: su una riga sola si spezza male a 390px */ .ia-blocco { padding:7px 0 } /* ⚠ QUESTI COLORI SONO PER IL CASSETTO, CHE E NAVY. Gli stessi blocchi vengono pero disegnati anche DENTRO la pagina «Azienda», che e crema — e li erano quasi bianchi su crema: 1,03:1. Sono l'indirizzo della sede, il REA, la partita IVA: i dati che per legge devono essere leggibili. Le due versioni piu sotto. */ .ia-blocco b { display:block; font-weight:600; color:rgba(232,237,245,.72); font-size:var(--fs-sm); margin-bottom:3px } .ia-blocco span { display:block; color:#E8EDF5; font-size:var(--fs-sm); line-height:1.6 } /* dentro la pagina, su crema: gli stessi blocchi, scuri. ⚠ Il markup usa DUE forme — `.ia-blocco` nel cassetto e `.ia-riga` nella pagina — e la prima volta avevo scritto solo la prima: il cancello e rimasto rosso e ho creduto che la regola non funzionasse. Funzionava: colpiva un elemento che li non c'e. */ .pag-corpo .ia-blocco b, .pag-corpo .ia-riga b { color:rgba(12,27,46,.72) } .pag-corpo .ia-blocco span, .pag-corpo .ia-riga span, .pag-corpo .ia-riga i, .pag-corpo .ia-riga em { color:var(--brand-navy) } .pag-corpo .ia-gruppo h4, .pag-corpo .ia-gruppo h3 { color:var(--brand-navy) } .pag-corpo .ia-riga { color:var(--brand-navy) } /* ⚠ E IL PULSANTE «RICHIEDI OFFERTA» QUANDO STA NEL CORPO DELLA PAGINA. `.nav-cta` nasce per la barra in alto sopra la foto scura: testo bianco. Riusato dentro «servizi», su crema, spariva (1,13:1). */ .pag-corpo .nav-cta { color:var(--brand-navy); border-color:rgba(12,27,46,.35) } .pag-corpo .nav-cta:hover { color:#fff; background:var(--orange); border-color:var(--orange) } @media (max-width:520px){ .ia-pannello { padding:28px 22px 34px } .ia-riga { flex-direction:column; gap:2px } .ia-riga b { min-width:0 } } @media (prefers-reduced-motion: reduce){ .ia-pannello, .ia-velo { transition:none } } .ft-links { display:flex; gap:28px } /* era .25: e sono le voci legali, che devono leggersi per obbligo */ .ft-links a { font-size:var(--fs-label); color:rgba(255,255,255,.64); transition:color .2s } .ft-links a:hover { color:rgba(255,255,255,.6) } /* ───────────────────────────────────────────── CHATBOT — refined style ───────────────────────────────────────────── */ .fab { position:fixed; bottom:36px; right:36px; z-index:200; width:56px; height:56px; border-radius:50%; background:var(--orange); color:var(--white); border:none; font-size:var(--fs-xl); box-shadow:var(--sh-xs); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), box-shadow .3s; } .fab:hover { transform:scale(1.08); box-shadow:var(--sh-xs)} .fab-badge { position:absolute; top:-2px; right:-2px; width:14px; height:14px; background:#fff; border-radius:50%; font-size:var(--fs-label); font-weight:700; color:var(--orange); display:flex; align-items:center; justify-content:center; } .chat-box { position:fixed; bottom:106px; right:36px; z-index:200; width:360px; background:#fff; border-radius:8px; box-shadow:var(--sh-lg); display:none; flex-direction:column; overflow:hidden; border-top:2px solid var(--orange); } .chat-box.open { display:flex; animation:chatPop .3s var(--ease)} @keyframes chatPop { from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} } .cb-head { background:var(--navy); padding:18px 20px; display:flex; align-items:center; gap:12px; } .cb-av { width:38px; height:38px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); flex-shrink:0; } .cb-info { flex:1 } .cb-name { font-family:var(--sans); font-size:var(--fs-md); font-weight:400; color:#fff } .cb-status { font-size:var(--fs-label); color:rgba(255,255,255,.4); letter-spacing:.06em; display:flex; align-items:center; gap:5px; } .cb-online { width:5px; height:5px; border-radius:50%; background:#4ade80 } .cb-close { background:none; border:none; color:rgba(255,255,255,.35); font-size:var(--fs-lg); transition:color .2s; } .cb-close:hover { color:#fff } .cb-msgs { flex:1; padding:20px; overflow-y:auto; max-height:310px; display:flex; flex-direction:column; gap:12px; background:#FAFAFA; } .msg { max-width:82%; display:flex; gap:8px; align-items:flex-end } .msg.b { align-self:flex-start } .msg.u { align-self:flex-end; flex-direction:row-reverse } .msg-av { width:26px; height:26px; border-radius:50%; flex-shrink:0; background:var(--orange); display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); } .msg-bub { padding:9px 13px; border-radius:10px; font-size:var(--fs-label); font-weight:300; line-height:1.5; } .msg.b .msg-bub { background:#fff; color:var(--navy); border-bottom-left-radius:3px; box-shadow:var(--sh-xs)} .msg.u .msg-bub { background:var(--navy); color:#fff; border-bottom-right-radius:3px } .msg-t { font-size:var(--fs-label); color:var(--mid); margin-top:3px } .msg.u .msg-t { text-align:right } .quick-row { padding:12px 16px; border-top:1px solid #F0F0F0; display:flex; gap:5px; flex-wrap:wrap; background:#fff; } .qbtn { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-label); font-weight:500; padding:5px 11px; border-radius:20px; border:1px solid rgba(10,27,46,.12); background:#fff; color:var(--navy); transition:all .2s; cursor:pointer; } .qbtn svg { flex-shrink:0; transition:stroke .2s, fill .2s } .qbtn:hover { background:var(--navy); color:#fff; border-color:var(--navy) } .qbtn:hover svg { stroke:#fff !important } .qbtn:hover svg circle, .qbtn:hover svg path[fill] { fill:#fff !important } .cb-inp-row { padding:12px 16px; border-top:1px solid #F0F0F0; display:flex; gap:10px; align-items:center; background:#fff; } .cb-inp { flex:1; border:1px solid rgba(10,27,46,.1); border-radius:20px; padding:9px 15px; font-family:var(--sans); font-size:var(--fs-sm); font-weight:300; color:var(--navy); outline:none; transition:border .2s; } .cb-inp:focus { border-color:var(--orange) } .cb-send { width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:var(--fs-base); transition:background .2s; flex-shrink:0; } .cb-send:hover { background:var(--orange2) } .typing { display:flex; gap:4px; padding:9px 13px; align-items:center } .typing span { width:5px; height:5px; background:var(--mid); border-radius:50%; animation:tb 1.2s ease-in-out infinite; } .typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s} .chat-chips { display:flex; flex-wrap:wrap; gap:5px; padding:6px 0 4px 32px; } .chat-chip { font-size:var(--fs-label); font-weight:500; padding:5px 11px; border-radius:20px; border:1px solid rgba(12,27,46,.15); background:#f5f3ef; color:var(--navy); cursor:pointer; transition:all .18s; } .chat-chip:hover { background:var(--navy); color:#fff; border-color:var(--navy); } .chat-chip svg { vertical-align:middle; margin-right:3px; } @keyframes tb { 0%,80%,100%{transform:scale(.5);opacity:.4} 40%{transform:scale(1);opacity:1} } /* ───────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────── */ /* ⚠ A 900x700 LA PILLOLA FINIVA ADDOSSO ALLA RIGA «SOLVERA». `.hero-top` è ASSOLUTA: non occupa spazio nel flusso. Su uno schermo alto non si nota, perché `justify-content:flex-end` spinge il corpo in basso e le due cose non si incontrano. Su uno schermo basso il corpo risale fino a 120px e il bordo della pillola taglia le lettere — misurato: la riga occupa 110..137, il corpo comincia a 120. Sotto gli 800px di altezza la riga torna nel flusso e si tiene il suo spazio. Il cancello l'aveva trovato come difetto di CONTRASTO, perché il bordo chiaro era la cosa più chiara sotto le lettere: la causa è una sovrapposizione, e il difetto era vero. */ @media (max-height: 800px){ .hero-top{ position:static; margin-bottom:14px; } #hero{ justify-content:flex-start; padding-top:96px; } /* ⚠ E LA DIDASCALIA CADEVA SUI PULSANTI, DI NUOVO. La sua regola porta scritto il calcolo: «i pulsanti stanno a 80px dal fondo e sono alti 45, sotto i 125 non si puo' scendere» — e 162 lasciava margine. Ma quel calcolo vale se il contenuto e' centrato: qui l'ho ancorato in alto per liberare il titolo, e la fila dei pulsanti e' salita a 188px dal fondo, dentro la banda della didascalia. Misurato a 1280x600: 20px di sovrapposizione fra «Trasporto Europeo FTL» e «Come Funziona» (7px c'erano gia' prima, la mia correzione li ha raddoppiati). Non alzo il 162 a un altro numero scritto a mano — il prossimo cambiamento lo romperebbe di nuovo. Faccio quello che il sito ha gia' deciso di fare sul telefono, per la stessa identica causa: «la didascalia che ruota diceva la stessa cosa della mappa, e sul telefono cadeva sui pulsanti». Con lo schermo basso non c'e' un angolo in basso a destra vuoto da decorare. */ } @media(max-width:900px){ /* ⚠ A 900x700 IL SOTTOTITOLO FINIVA SOTTO LA STRISCIA DEI DATI. La striscia è ASSOLUTA in fondo all'eroe, e l'eroe è alto 100vh: dare spazio al contenuto non serviva, perché la striscia resta incollata al fondo qualunque cosa faccia il contenuto — misurato, 327px di sovrapposizione con «Como». ⚠ E la prima volta ho messo questa regola nel blocco dei 600px invece che in questo: non si applicava, e la misura non cambiava di un pixel. Una correzione che non tocca il caso che deve toccare sembra una correzione che non funziona. Qui la striscia torna nel flusso e l'eroe cresce quanto serve. */ #hero{ height:auto; min-height:100vh; } #intro{grid-template-columns:1fr;gap:40px} .svc-grid{grid-template-columns:1fr} .svc-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)} .svc-card:last-child{border-bottom:none} .steps-grid{grid-template-columns:1fr 1fr} .form-wrap{grid-template-columns:1fr;gap:48px} /* Cinque colonne strette diventano illeggibili prima di sparire: al medio si passa a due, non subito a una. */ .footer-top{grid-template-columns:1fr 1fr;gap:40px} .processo-header,.servizi-header,.sh-right{flex-direction:column;align-items:flex-start} .sh-right{text-align:left} .chat-box{width:calc(100vw - 32px);right:16px} /* ⚠ LE LINGUE NON SPARISCONO PIU' SOTTO I 900px. Erano nascoste e restavano solo dentro il menu: chi apriva il sito in tedesco doveva aprire un menu per accorgersi che il tedesco c'era. Sono la seconda cosa che un cliente straniero cerca dopo il pulsante — e stanno dal primo pixel. */ } /* ═══════════════════════════════════════════ MOTION-REDUCE: skip intro animations ═══════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { #sv-intro { display:none !important; } *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════ HAMBURGER / MOBILE MENU ═══════════════════════════════════════════ */ /* ⚠ SEMPRE VISIBILE, a ogni larghezza. Prima compariva solo sotto i 900px, e sopra c'era un elenco in linea diverso: due navigazioni da tenere d'accordo, e non lo erano. */ .nav-burger{ display:flex; width:42px; height:42px; background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer; align-items:center; justify-content:center; border-radius:1px; transition:all .2s var(--ease); margin-left:10px; } /* Questo e' il punto in cui il sito era ROTTO e non brutto: sul telefono, dopo aver scorso, il pulsante del menu diventava navy su navy e non si vedeva piu'. Nessun modo di aprire la navigazione. */ /* ⚠ Sul telefono questo e' il pulsante che APRE il menu: se sparisce, dopo aver scorso non c'e' piu nessun modo di navigare. */ #nav.solid .nav-burger{ border-color:rgba(12,27,46,.28); color:var(--brand-navy); } /* ── la pillola del telefono in barra (2/09) ────────────────────────── Compare SOLO quando il pannello ha scritto il numero (dati-societari): display la governa svTelefonoAggiorna(), qui c'è solo il vestito. Bianca sul fondo scuro in cima, navy sulla barra crema (solid). */ /* (3/09, tono sobrio) niente pillola: TESTO, corpo 14, accanto al CTA. In cima (barra trasparente sul fondo scuro) chiaro come il logo; sulla barra crema (solid) --text-2. Su telefono resta la cornetta sola: il numero si riapre col tocco (tel:). Il CTA non cede più il posto: c'è spazio per tutti e due. */ .nav-tel{ display:inline-flex; align-items:center; gap:6px; color:rgba(232,237,245,.92); text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap; transition:color .4s; } #nav.solid .nav-tel{ color:var(--text-2,#44536A); } @media(max-width:560px){ .nav-tel #nav-tel-num{ display:none; } } .nav-burger:hover{ border-color:var(--orange); color:var(--orange); } .nav-burger svg{ width:22px; height:22px; } #mobileMenu{ position:fixed; inset:0; z-index:9000; background:var(--navy); display:flex; flex-direction:column; padding:90px 32px 40px; transform:translateX(100%); transition: transform .45s var(--ease); overflow-y:auto; } #mobileMenu.open{ transform:translateX(0); } #mobileMenu .mm-close{ position:absolute; top:24px; right:24px; background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; width:42px; height:42px; cursor:pointer; border-radius:1px; font-size:var(--fs-xl); line-height:1; display:flex; align-items:center; justify-content:center; } #mobileMenu .mm-close:hover{ border-color:var(--orange); color:var(--orange); } #mobileMenu nav ul{ list-style:none; margin:0; padding:0; } #mobileMenu nav > ul > li{ border-bottom:1px solid rgba(255,255,255,.08); } #mobileMenu nav > ul > li > a, #mobileMenu nav > ul > li > button{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:18px 4px; font-family:var(--serif); font-size:var(--fs-2xl); font-weight:300; color:#fff; background:transparent; border:none; text-decoration:none; text-align:left; cursor:pointer; letter-spacing:.01em; } #mobileMenu .mm-sub{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); padding-left:14px; } #mobileMenu .mm-sub.open{ max-height:400px; } #mobileMenu .mm-sub li a{ display:block; padding:10px 4px; color:rgba(255,255,255,.7); font-size:var(--fs-base); font-family:var(--sans); text-decoration:none; letter-spacing:.04em; } #mobileMenu .mm-sub li a:hover{ color:var(--orange); } #mobileMenu .mm-langs{ display:flex; gap:8px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); } #mobileMenu .mm-langs button{ background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.7); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; padding:8px 12px; cursor:pointer; border-radius:1px; } #mobileMenu .mm-langs button.on{ background:var(--orange); color:#fff; border-color:var(--orange); } #mobileMenu .mm-cta{ display:block; margin-top:28px; padding:16px; background:var(--orange); color:#fff; text-align:center; font-size:var(--fs-sm); font-weight:600; letter-spacing:.12em; text-transform:uppercase; border:none; cursor:pointer; border-radius:1px; } #mobileMenu .mm-legal{ margin-top:auto; padding-top:32px; display:flex; gap:16px; flex-wrap:wrap; font-size:var(--fs-label); letter-spacing:.08em; } #mobileMenu .mm-legal a{ color:rgba(255,255,255,.5); text-decoration:none; } #mobileMenu .mm-legal a:hover{ color:var(--orange); } /* ═══════════════════════════════════════════ COOKIE BANNER ═══════════════════════════════════════════ */ #cookieBanner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:9500; max-width:760px; margin:0 auto; background:var(--navy); color:#fff; border:1px solid rgba(200,67,10,.35); border-radius:2px; box-shadow:var(--sh-xs); padding:22px 24px; transform: translateY(140%); opacity:0; transition: transform .55s var(--ease), opacity .35s ease; font-family:var(--sans); font-size:var(--fs-sm); line-height:1.55; } #cookieBanner.show{ transform:translateY(0); opacity:1; } #cookieBanner .cb-top{ display:flex; gap:14px; align-items:flex-start; } #cookieBanner .cb-icon{ flex:0 0 auto; width:36px; height:36px; background:rgba(200,67,10,.15); border:1px solid rgba(200,67,10,.4); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); border-radius:2px; } #cookieBanner h3{ font-family:var(--serif); font-weight:400; font-size:var(--fs-2xl); margin:0 0 6px; letter-spacing:.01em; } #cookieBanner p{ margin:0 0 4px; color:rgba(255,255,255,.78); } /* ⚠ Era var(--orange) (#C8430A) sul navy del riquadro: 3,64. E sono i collegamenti a Cookie e Privacy Policy — quello che il consenso chiede di aver letto. #F0854A sul navy fa 6,7: e l'arancione-testo dei token, nato esattamente per i fondi scuri. ⚠ Il riquadro dei cookie e NASCOSTO dal cancello del contrasto (copre il resto): questa riga e verificata a mano coi numeri, non dal giro. */ #cookieBanner a{ color:#F0854A; text-decoration:underline; } #cookieBanner .cb-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; } #cookieBanner button{ font-family:var(--sans); font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:11px 18px; cursor:pointer; border-radius:1px; transition:all .2s ease; } #cookieBanner .cb-btn-accept{ background:var(--orange); color:#fff; border:1px solid var(--orange); } #cookieBanner .cb-btn-accept:hover{ background:var(--orange2); border-color:var(--orange2); } #cookieBanner .cb-btn-reject{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); } #cookieBanner .cb-btn-reject:hover{ border-color:#fff; } #cookieBanner .cb-btn-custom{ background:transparent; color:rgba(255,255,255,.7); border:1px solid transparent; text-decoration:underline; } #cookieBanner .cb-btn-custom:hover{ color:#fff; } /* Pannello personalizzazione */ #cookiePrefs{ display:none; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); } #cookieBanner.expanded #cookiePrefs{ display:block; } .cb-pref{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); } .cb-pref:last-child{ border-bottom:none; } .cb-pref-info strong{ display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:2px; } .cb-pref-info span{ font-size:var(--fs-label); color:rgba(255,255,255,.6); } .cb-toggle{ position:relative; flex:0 0 auto; width:42px; height:24px; } .cb-toggle input{ opacity:0; width:0; height:0; } .cb-toggle .cb-slide{ position:absolute; inset:0; cursor:pointer; background:rgba(255,255,255,.18); border-radius:24px; transition:.25s; } .cb-toggle .cb-slide:before{ content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.25s; } .cb-toggle input:checked + .cb-slide{ background:var(--orange); } .cb-toggle input:checked + .cb-slide:before{ transform:translateX(18px); } .cb-toggle input:disabled + .cb-slide{ opacity:.6; cursor:not-allowed; } /* Pulsante fluttuante "gestisci cookie" */ #cookieManageFab{ position:fixed; left:16px; bottom:16px; z-index:8500; width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:var(--fs-xl); box-shadow:var(--sh-xs); transition:all .2s ease; } #cookieManageFab:hover{ border-color:var(--orange); transform:translateY(-2px); } @media(max-width:600px){ #cookieBanner{ padding:18px; font-size:var(--fs-label); } #cookieBanner .cb-actions button{ flex:1 1 auto; padding:11px 10px; font-size:var(--fs-label); } } /* ═══════════════════════════════════════════ LEGAL MODAL (privacy / cookie / terms) ═══════════════════════════════════════════ */ .legal-overlay{ position:fixed; inset:0; z-index:9700; background:rgba(12,27,46,.82); display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; font-family:var(--sans); } .legal-overlay.open{ display:flex; } .legal-modal{ background:#fff; color:var(--ink); width:100%; max-width:820px; border-radius:2px; box-shadow:var(--sh-sm); overflow:hidden; animation:legalIn .35s var(--ease); } @keyframes legalIn { from{ opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } } .legal-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 28px; border-bottom:1px solid var(--line); background:var(--cream); } .legal-head h2{ font-family:var(--serif); font-size:var(--fs-2xl); font-weight:400; margin:0; color:var(--navy); } .legal-close{ background:transparent; border:1px solid var(--line); width:36px; height:36px; cursor:pointer; border-radius:1px; font-size:var(--fs-lg); line-height:1; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:all .2s ease; } .legal-close:hover{ border-color:var(--orange); color:var(--orange); } .legal-body{ padding:24px 28px 32px; max-height:75vh; overflow-y:auto; font-size:var(--fs-base); line-height:1.7; color:var(--ink2); } .legal-body h3{ font-family:var(--serif); color:var(--navy); font-size:var(--fs-2xl); font-weight:500; margin:24px 0 8px; letter-spacing:.005em; } .legal-body h4{ font-size:var(--fs-sm); font-weight:600; color:var(--navy); margin:18px 0 6px; text-transform:uppercase; letter-spacing:.06em; } .legal-body p{ margin:0 0 10px; } .legal-body ul{ margin:0 0 12px 20px; padding:0; } .legal-body li{ margin-bottom:5px; } .legal-body strong{ color:var(--navy); font-weight:600; } .legal-body a{ color:var(--orange); } .legal-body table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:var(--fs-label); } .legal-body table th, .legal-body table td{ padding:8px 10px; text-align:left; border:1px solid var(--line); vertical-align:top; } .legal-body table th{ background:var(--cream); font-weight:600; color:var(--navy); } .legal-disclaimer{ background:rgba(200,67,10,.08); border:1px solid rgba(200,67,10,.35); border-left:4px solid var(--orange); padding:14px 16px; margin-bottom:22px; font-size:var(--fs-label); color:var(--orange2); font-weight:500; line-height:1.55; } .legal-disclaimer strong{ color:var(--orange2); } .legal-meta{ margin-top:22px; padding-top:14px; border-top:1px solid var(--line); font-size:var(--fs-label); color:var(--mid); } @media(max-width:600px){ .legal-head{ padding:18px 18px; } .legal-head h2{ font-size:var(--fs-xl); } .legal-body{ padding:18px; font-size:var(--fs-sm); } } /* ═══════════════════════════════════════════ MOBILE PATCH — iPhone Safari fixes ═══════════════════════════════════════════ */ html{ -webkit-text-size-adjust:100%; } body{ /* env safe-area for iPhone notch */ padding-left:env(safe-area-inset-left,0); padding-right:env(safe-area-inset-right,0); } /* Touch tap-highlight more discreet on whole site */ *{ -webkit-tap-highlight-color: rgba(200,67,10,.15); } /* Force input/select/textarea ≥16px on mobile to prevent iOS auto-zoom */ @media(max-width:900px){ .field input, .field select, .field textarea, .cb-inp, #search-input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select{ font-size:var(--fs-md) !important; } /* Touch targets ≥44px */ .nav-burger{ width:44px; height:44px; } #mobileMenu .mm-close{ width:44px; height:44px; } .legal-close{ width:44px; height:44px; } .btn-main, .btn-ghost{ padding:14px 28px; min-height:44px; } .form-submit{ padding:18px; min-height:48px; } /* Field row stacks */ .field-row{ grid-template-columns:1fr; gap:0; } .docs-grid{ grid-template-columns:1fr; } } @media(max-width:900px){ .hero-scroll{ display:none; } } @media(max-width:600px){ .hlc-stat-n{ font-size:var(--fs-base); } .hero-top{ top:90px; left:5%; right:5%; } .hero-title{ font-size:clamp(44px,12vw,80px); margin-bottom:24px;letter-spacing:-.032em;line-height:1.04;text-wrap:balance} .hero-bottom{ flex-direction:column; align-items:flex-start; gap:24px; } /* ⚠ A 900x700 IL SOTTOTITOLO FINIVA SOTTO LA STRISCIA DEI DATI. La striscia è ASSOLUTA in fondo all'eroe, e l'eroe è alto 100vh: dare spazio al contenuto non serviva a niente, perché la striscia resta incollata al fondo qualunque cosa faccia il contenuto — misurato, 327px di sovrapposizione con «Como». Sotto i 900px la striscia torna nel flusso: si mette in coda al contenuto invece di galleggiarci sopra, e l'eroe cresce quanto serve. */ .hero-actions{ flex-wrap:wrap; gap:10px; } .hero-actions .btn-main, .hero-actions .btn-ghost{ flex:1 1 auto; padding:14px 18px; font-size:var(--fs-label); } /* Stats: stay 2 cols but smaller */ } @media(max-width:500px){ /* iPhone-specific: hero padding/sizing */ #hero{ padding-bottom:32px; } } /* Phone: chat box fab clearance from cookie banner */ @media(max-width:600px){ .fab{ bottom:24px; right:18px; } .chat-box{ bottom:90px; right:12px; left:12px; width:auto; max-height:calc(100vh - 140px); } .cb-msgs{ max-height:50vh; } /* Cookie banner refinement */ #cookieBanner{ left:8px; right:8px; bottom:8px; } #cookieBanner .cb-actions{ gap:8px; } #cookieBanner .cb-actions button{ min-height:44px; } #cookieManageFab{ left:12px; bottom:12px; } } /* Cookie banner: scrollable if content exceeds viewport on small phones */ #cookieBanner{ max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; -webkit-overflow-scrolling:touch; /* honor safe-area-inset on iOS */ padding-bottom:max(22px, env(safe-area-inset-bottom,0)); } /* Legal modal: better mobile scroll */ @media(max-width:600px){ .legal-overlay{ padding:16px 8px; } .legal-body{ max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); } } /* Footer: stack legal links readable on small screens */ @media(max-width:600px){ .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; } .ft-links{ flex-wrap:wrap; gap:14px 18px; } } /* Mobile menu: respect notch safe-area on top */ #mobileMenu{ padding-top:calc(90px + env(safe-area-inset-top,0)); padding-bottom:calc(40px + env(safe-area-inset-bottom,0)); } .nav-burger{ /* ensure ≥44px tap target on all viewports */ min-width:44px; min-height:44px; } /* iOS dynamic toolbar (Safari bottom bar): use dvh for hero where possible (only on small screens) */ @media(max-width:900px){ #hero{ height:100dvh; min-height:auto; } } /* Mega menu chevron rotation on hover — only desktop with hover */ @media(hover:none){ /* Disable hover-only chevron transform on touch (mobile handled by #mobileMenu) */ .nav-center li:hover .nav-chevron{ transform:none; opacity:.6; } } /* ═══════════════════════════════════════════════════════════ MOBILE COMPREHENSIVE — 480px and below (fills all gaps not covered by 900px/600px blocks above) ═══════════════════════════════════════════════════════════ */ @media(max-width:480px){ /* ── Numeri grid: 2 col → 1 col on tiny phones ── */ /* ── Steps grid: 2 col → 1 col on tiny phones ── */ .steps-grid{ grid-template-columns:1fr; gap:0; } .step-cell{ border-right:none; border-bottom:1px solid var(--line); padding:28px 20px; } .step-cell:last-child{ border-bottom:none; } /* ── Section padding ── */ #servizi, #processo, #offerta, #tracking, #footer{ padding-left:0; padding-right:0; } section{ padding:52px 0; } .servizi-header, .processo-header{ padding:0 20px; } .container{ padding-left:18px; padding-right:18px; } /* ── Copertura ── */ .map-svg{ width:100%; max-width:360px; } .map-bg-text{ font-size:clamp(60px,20vw,90px);letter-spacing:-.032em;line-height:1.04;text-wrap:balance} /* ── Form section ── */ .form-wrap{ padding:0 18px; } .form-title{ font-size:clamp(36px,9vw,56px);letter-spacing:-.028em;line-height:1.06;text-wrap:balance} .form-promises{ gap:12px; } .fp{ gap:10px; font-size:var(--fs-label); } .dogana-wrap{ padding:18px 16px; } /* ── Success overlay ── */ #formOverlay > div{ padding:36px 22px !important; max-width:calc(100vw - 32px) !important; } #ovTitle{ font-size:var(--fs-2xl) !important; } /* ── Tracking section ── */ #tracking{ padding:52px 0 !important; } #tracking > div{ padding:0 16px !important; } #tracking h2{ font-size:clamp(24px,7vw,32px) !important;letter-spacing:-.022em;line-height:1.12;text-wrap:balance} #tracking [style*="display:flex;gap:10px"]{ flex-direction:column !important; gap:10px !important; } #track-input{ width:100% !important; font-size:var(--fs-md) !important; } #tracking button[onclick="doTrack()"]{ width:100% !important; padding:14px !important; font-size:var(--fs-label) !important; } #track-result{ padding:18px 16px !important; } /* ── Footer ── */ .footer-top{ grid-template-columns:1fr; gap:32px; } .ft-col{ padding-right:0; } .ft-logo-wrap{ margin-bottom:16px; } /* ── Hero bottom: 1 col ── */ .hero-bottom{ gap:16px; } .hlc-stat{ padding:14px 12px; } .hlc-stat-n{ font-size:var(--fs-sm); } /* ── Services section ── */ .svc-card{ padding:28px 20px; } .svc-card-icon{ width:42px; height:42px; } .svc-card-icon svg{ width:20px; height:20px; } } /* ── Phone landscape / medium phones 481-767 ── */ @media(min-width:481px) and (max-width:767px){ .steps-grid{ grid-template-columns:1fr 1fr; } } /* ── Tracking row stacks on any small screen ── */ @media(max-width:600px){ /* tracking input+button row flex column */ #tracking [style*="display:flex;gap:10px;max-width:480px"]{ flex-direction:column; } #track-input{ font-size:var(--fs-md) !important; } /* form success overlay buttons stack */ #formOverlay [style*="display:flex; gap:12px"]{ flex-direction:column; align-items:stretch; } #formOverlay button{ width:100% !important; justify-content:center; } /* Copertura map: center below text */ /* Processo header */ .processo-header{ gap:12px; } .ph-note{ margin-top:4px; font-size:var(--fs-base); } /* Steps cells */ .step-cell-n{ font-size:var(--fs-label); } .step-cell-title{ font-size:var(--fs-2xl); } /* Hero scroll hidden already at 900 */ /* Service cards */ .svc-grid{ padding:0; } .svc-card:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.06); } /* Footer safe area */ footer{ padding-bottom:max(32px, env(safe-area-inset-bottom,0)); } /* Intro section */ #intro{ padding:60px 20px !important; } .intro-text h2{ font-size:clamp(26px,7vw,36px);letter-spacing:-.022em;line-height:1.12;text-wrap:balance} /* Form wrap padding */ .form-wrap > div:last-child{ margin-top:0; } } /* ── Very small phones 360px ── */ @media(max-width:380px){ .hero-title{ font-size:clamp(36px,10vw,56px) !important;letter-spacing:-.028em;line-height:1.06;text-wrap:balance} .steps-grid{ grid-template-columns:1fr; } .hero-actions .btn-main, .hero-actions .btn-ghost{ font-size:var(--fs-label); padding:12px 14px; } /* nav */ #nav .nav-logo-text{ font-size:var(--fs-sm); letter-spacing:.15em; } /* ⚠ QUI IL PULSANTE SPARIVA, sotto i 380px. Era la terza regola che lo nascondeva, in un blocco diverso dagli altri due — e per questo non l'ho vista correggendo gli altri: a 360px il cancello non lo misura perche' un elemento nascosto non ha bersaglio, e nella fotografia mi era sfuggito. Per questi clienti «Richiedi Offerta» E' la funzione del sito: chi ha fretta deve arrivarci in un clic da qualunque larghezza. Sotto i 380 il nome perde «Logistica» e il pulsante si stringe fino a stare nella riga — misurato: logo 114 + lingue 44 + pulsante 88 + stanghette 44 = 290px su 360 disponibili, con gli spazi ci sta. */ .nav-cta{ padding:0 7px; font-size:9.5px; letter-spacing:.04em; min-height:44px; } .nav-logo .nl-sub{ display:none; } /* form promises */ .fp{ font-size:var(--fs-label); } } /* ── Landscape phones: preserve hero height ── */ @media(max-height:500px) and (max-width:900px) and (orientation:landscape){ #hero{ height:auto !important; min-height:100svh; padding:60px 0 40px; } .hero-top{ top:60px; } .hero-scroll{ display:none; } } /* ═══ EDITORIALE ══════════════════════════════════════════════ Il riferimento non è un sito di logistica — quelli sono tutti blu e tutti uguali. È una rivista: contrasto di scala, molta aria, e il colore che pesa perché è raro. ═══════════════════════════════════════════════════════════ */ /* Misura della riga: in ch, così resta di 62-72 caratteri anche quando il corpo cambia. In px si allungherebbe rimpicciolendo. */ p, li, blockquote, .intro-text, .sh-right, .svc-card-sub{ max-width: var(--measure); text-wrap: pretty; /* niente parole orfane a fine paragrafo */ } .lead, .intro-right{ max-width: var(--measure-wide); } figcaption, /* Ritmo verticale. Lo spazio SOPRA un titolo è maggiore di quello sotto: il titolo appartiene al testo che introduce, non a quello che chiude. È la regola che da sola fa sembrare una pagina composta invece che assemblata. */ section{ padding-block: var(--sp-section); } section > h2, section > h3, .sh-left h2, .ph-title, .form-title, .intro-left{ margin-top: var(--sp-9); margin-bottom: var(--sp-6); } section > :first-child, .sh-left > :first-child{ margin-top: 0; } /* Griglia editoriale a 12 colonne, e la rottura voluta: un elemento che esce dal margine per non essere l'ennesimo blocco centrato. La simmetria perfetta è ciò che rende anonimi i siti aziendali. */ .griglia{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-7); align-items:start; } .sfora-sx{ grid-column:1 / span 7; margin-left:calc(var(--sp-9) * -1); } .sfora-dx{ grid-column:6 / -1; margin-right:calc(var(--sp-9) * -1); } @media (max-width:900px){ .griglia{ grid-template-columns:1fr; gap:var(--sp-6); } .sfora-sx,.sfora-dx{ margin-left:0; margin-right:0; grid-column:1 / -1; } } /* Superfici grandi: raggio piccolo. Il raggio ampio è ciò che fa sembrare un sito un'applicazione. Ombre quasi assenti. */ .svc-card, /* ═══ ACCENTO SENSIBILE AL FONDO ══════════════════════════════ Ridurre l'arancio a navy funziona sulle sezioni chiare e rende INVISIBILE il testo su quelle scure. E vale su tutte e tre le superfici: #C8430A su navy dà 3.52:1, sotto la soglia AA. Su fondo scuro l'accento va schiarito. ═══════════════════════════════════════════════════════════ */ /* ⚠ QUESTA REGOLA L'AVEVO CANCELLATA PER SBAGLIO. Togliendo `.mega-panel` e `#copertura` dall'elenco con un'espressione regolare, mi sono mangiato anche il BLOCCO delle dichiarazioni: restava un elenco di selettori senza graffa, cioe' una regola invalida. Sparivano le variabili che rendono chiaro il testo sulle sezioni scure, e i titoli delle schede risultavano 1,18:1 su navy — praticamente invisibili. E' la seconda volta in due giorni che tolgo un nome da un elenco condiviso e porto via qualcos'altro. Il cancello l'ha visto subito; io no. */ #hero, #hero *, footer, footer *, #servizi, #servizi *{ --navy: #E8EDF5; /* 14.74:1 su navy */ --ink: #E8EDF5; --mid: #9AA9BF; /* 7.26:1 su navy */ --orange:#F0854A; /* 6.73:1 su navy — il pieno darebbe 3.52 */ --line: rgba(232,237,245,.14); } /* ══ IL PASSO ═══════════════════════════════════════════════════ L'alternanza era casuale: scuro, chiaro, scuro, SCURO, scuro, chiaro, chiaro. Dopo aver tolto la sezione dei numeri, «servizi» e «processo» erano attaccati — due fasce scure di seguito, quasi duemila pixel senza respiro. Era il «buco» lasciato dai numeri. Riportando «processo» al chiaro il passo diventa regolare: eroe scuro · chi siamo chiaro · cosa facciamo scuro · l'arrivo chiaro · piede scuro ⚠ 23 agosto: dopo aver tolto copertura, processo e tracking il passo e' rimasto regolare per costruzione — quattro fasce che si alternano invece di sette da tenere d'accordo a mano. E con il viaggio acceso le prime tre diventano tutte scure: un velo chiaro sopra una scena notturna la cancella. Lo dice il blocco `html.viaggio` in fondo a questo foglio. */ #hero, footer, #servizi{ background-color: var(--brand-navy); } /* L'occhiello dell'eroe era al 40% di bianco: leggibile a monitor, illeggibile su un portatile al sole. */ .hero-label{ color: rgba(232,237,245,.72) !important; } /* A 320px il documento sforava: menu fuori schermo e bolle decorative spingevano la pagina in orizzontale. `clip` e non `hidden`: hidden su body rompe position:fixed. */ html{ overflow-x: clip; } body{ overflow-x: clip; max-width: 100vw; } .sv-liquid, .sv-liquid .blob{ max-width: 100vw; } /* ═══ LA ROTTURA VOLUTA ═══════════════════════════════════════ Due punti per pagina, non di più: se sforano tutti non sfora nessuno, ed è di nuovo simmetria — solo spostata. Sotto i 900px rientrano: su un telefono un titolo che esce dal margine è solo testo tagliato. ═══════════════════════════════════════════════════════════ */ @media (min-width: 901px){ .sh-left{ margin-left: calc(var(--sp-8) * -1); } } /* ═══ L'ARANCIO DOVE DEVE STARE ═══════════════════════════════ Ridurlo era giusto: era su tutto. Ma portarlo a ZERO sotto la piega — cinque schermate di fila senza un accento — toglie alla pagina il suo unico colore proprio. Torna in UN punto per sezione: l'occhiello che la apre. Fa una o due apparizioni per schermata, che è quello che serve perché pesi. Sulle sezioni scure la variante schiarita arriva da sola dall'override qui sopra: #C8430A su navy darebbe 3.52:1. ═══════════════════════════════════════════════════════════ */ /* ⚠ Era `var(--orange)` (#C8430A) per tutte e quattro: sul crema misura 4,35, sotto il minimo per un pelo. Ma NON stanno tutte sullo stesso fondo, e un colore solo per due fondi opposti e esattamente l'errore delle barre: l'occhiello di «Servizi» (`.sh-left > span`) vive su una sezione NAVY, e l'arancione scuro li fa 2,62 — l'ho scoperto rompendolo. Su crema l'arancione SCURO (#A33508 → 6,0); su navy quello CHIARO (#F0854A → 6,7). Due fondi, due arancioni, vicini qui. */ .intro-label, .ph-note strong, .form-tag{ color: var(--brand-orange-2); } .sh-left > span{ color: #F0854A; } /* ══ LA FASCIA «COSA FACCIAMO», STRETTA ═══════════════════════════════ Misurato: l'intestazione della fascia faceva 348px da sola — un occhiello, un titolo e una riga di sottotitolo — e ogni scheda 429px per centottantotto pixel di contenuto. Il resto era ritmo verticale pensato per una pagina di ottomila pixel. Il ritmo del sito non cambia: cambia QUESTA fascia, che e' l'unica in cui tre cose stanno affiancate e quindi non hanno bisogno dello spazio che serve a separare due cose in fila. */ #servizi{ padding-block: calc(var(--sp-section) * 0.62); } #servizi .servizi-header{ margin-bottom: 22px; } #servizi .servizi-header h2{ margin-top: var(--sp-5); margin-bottom: var(--sp-3); } #servizi .sh-right{ margin-top: 0; } .svc-card-title{ margin-bottom: 10px; } .svc-divider{ margin: 12px 0 14px; } .svc-card-sub{ margin-bottom: 0; } .svc-icon{ margin-bottom: 14px; } /* ╔═══════════════════════════════════════════════════════════════════╗ ║ IL VIAGGIO DURA — la scena non finisce con la prima schermata ║ ╚═══════════════════════════════════════════════════════════════════╝ La scena era chiusa dentro l'eroe: si scorreva e finiva. Adesso il quadro e' FISSO dietro tutta la parte alta del sito, e le fasce del viaggio ci passano sopra semitrasparenti: la strada continua, i capannoni sfilano, la citta' si avvicina mentre si legge. ⚠ IL TESTO NON SPARISCE. Le parole restano nel documento, dove stavano: la scena e' un FONDO, non un sostituto. Chi cerca su Google trova le stesse frasi di prima. ⚠ E LE FASCE DEL VIAGGIO SONO TUTTE SCURE, non a colori alternati. Un velo chiaro sopra una scena notturna la cancella: o si vede la scena o si vede la fascia. Sul navy invece il testo chiaro resta leggibile e sotto si vede la strada — il velo e' all'82%, e i tre punti percentuali che restano sono quello che fa «ci sono dentro». ⚠ L'ARRIVO NO. `#offerta` e il piede tornano pieni: il viaggio finisce li'. E' anche la ragione prudente — il modulo e' il posto in cui si guadagna, e i suoi contrasti sono gia' provati come sono. ═══════════════════════════════════════════════════════════════════ */ html.viaggio #heroCanvas{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; } html.viaggio #hero{ z-index:1; } html.viaggio #intro, html.viaggio #servizi{ position:relative; z-index:1; background-image:none !important; } /* ⚠ IL VELO DEV'ESSERE IL FONDO DELLA FASCIA, non uno strato messo sotto di lei. Come `::before` a z-index -1 finiva DIETRO l'aurora — i tre bagliori colorati che stanno dietro tutto — e i bagliori passavano sopra: misurato, «Azienda di trasporto internazionale» scendeva a 3,12:1 su un fondo oliva (105,108,88) a 480px, e a 3,66:1 su un fondo ambra a 1440x600. Il fondo di un elemento si dipinge sotto il suo contenuto ma SOPRA tutto quello che sta piu' in basso nella pila: e' esattamente quello che serve. E all'88% invece dell'82%, perche' il 6% in meno lo si nota solo con uno strumento e i sei punti in piu' li vede l'occhio di chi legge. */ html.viaggio #intro, html.viaggio #servizi{ background-color: rgba(10,22,38,.88) !important; } /* i colori del testo sulle fasce del viaggio: sono scure, quindi valgono gli stessi valori delle altre sezioni scure */ html.viaggio #intro, html.viaggio #intro *, html.viaggio #servizi, html.viaggio #servizi *{ --navy: #E8EDF5; --ink: #E8EDF5; --ink2: #B9C6D8; --mid: #9AA9BF; --orange:#F0854A; --line: rgba(232,237,245,.14); } /* ⚠ l'occhiello «Chi Siamo» NON prende i token qui sopra: piu' in alto gli e' stato dato l'arancione SCURO crudo (--brand-orange-2, tarato sul crema) — e un colore crudo non sa che il viaggio ha scurito la fascia: misurato 2,78 sul velo navy (2/09, pescato dal cancello). Sul navy vale l'arancione CHIARO, come per l'occhiello di Servizi. */ html.viaggio #intro .intro-label{ color:#F0854A; } /* ══ L'ARRIVO COPRE LA SCENA ═══════════════════════════════════════ ⚠ E DEVE AVERE UN FONDO SUO, ESPLICITO. Prima il fondo di queste fasce lo dava il corpo della pagina: non avevano un colore, e sotto c'era il crema. Con la scena FISSA dietro tutto, «non avere un colore» vuol dire «lasciar passare la strada»: il modulo e' finito sopra l'asfalto e le sue etichette sono scese a 2,19:1, la sua descrizione a 1,21:1. Un fondo ereditato non e' un fondo: e' l'assenza di un fondo che finora non si notava. */ html.viaggio #offerta{ position:relative; z-index:2; background-color: var(--brand-cream); } /* ⚠ LA FASCIA SCORREVOLE E' CHIARA, con inchiostro #43506a sopra. Dandole il navy «per coerenza col viaggio» ho fatto scendere le sue scritte a 2,12:1: inchiostro scuro su navy. Il colore giusto e' il suo, che gia' aveva — serviva solo che fosse ESPLICITO, perche' con la scena fissa dietro un fondo ereditato non copre piu' niente. */ html.viaggio html.viaggio footer{ position:relative; z-index:2; background-color: var(--brand-navy); } /* ══ LA FILA DELLE LINGUE SOTTO I 700px ═══════════════════════════════ Si vede la lingua attiva, piena e da 44x44. Un tocco apre le altre. Il perche' e i numeri stanno in barra.js. */ @media (max-width: 700px){ .langs{ position:relative; } .langs .lang{ min-width:44px; height:44px; line-height:44px; padding:0 4px; font-size:12px; } .langs:not(.aperte) .lang:not(.on){ display:none; } /* la sigla attiva porta un segno che dice «ce ne sono altre» */ .langs:not(.aperte) .lang.on::after{ content:'▾'; font-size:8px; margin-left:3px; opacity:.6; vertical-align:middle; } .langs.aperte{ position:absolute; top:100%; right:0; z-index:60; flex-direction:column; background:var(--brand-navy); border:1px solid rgba(232,237,245,.16); box-shadow:var(--sh-sm); } .langs.aperte .lang{ display:block; width:100%; text-align:center; } } /* il logo e' un collegamento: deve comportarsi da collegamento senza sembrare uno */ /* ⚠ NON `color: inherit`. Il logo era un
con il suo bianco; diventando un gli ho dato `inherit`, e ha ereditato dal navy della barra: bianco su navy e' diventato navy su navy, 1,3:1. Il colore del logo e' il suo, non quello di chi lo contiene. */ a.nav-logo{ text-decoration:none; color:var(--white); cursor:pointer; /* ⚠ ERA ALTO 25px. Da
non era un bersaglio; da collegamento lo e', e un collegamento alto venticinque pixel un pollice non lo prende. Si alza con del riempimento, senza spostare il testo. */ min-height:44px; padding-block:10px; box-sizing:border-box; } a.nav-logo:hover .nl-sub{ opacity:1; } a.nav-logo:focus-visible{ outline:2px solid var(--brand-orange-2); outline-offset:4px; }