/** * Stile della nuova home. Caricato solo dove serve (vedi functions.php). * * L'impaginazione la fa Elementor con i contenitori: qui ci sono i colori, i * caratteri, il ritmo verticale e le animazioni. Cosi' la squadra modifica i * testi dall'editor senza poter rompere la grafica. */ /* I @font-face stanno in caratteri.css: servono anche al footer, che e' su tutte le pagine. Vedi functions.php. */ .k-home{ --ink:#131C2E; --bg:#F3F5F6; --surface:#fff; --muted:#4A5568; --accent:#D03923; --accent-dark:#b12f1c; --line:rgba(19,28,46,.12); --line-strong:rgba(19,28,46,.22); --display:"Space Grotesk",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif; background:var(--bg); } /* Il contenuto della pagina, non l'header e il footer del tema. */ .k-home .elementor{color:var(--ink);font-family:var(--body)} /* Ohio applica margin:-20px orizzontale al contenitore Elementor (compensa il padding delle colonne). Col template a tutta larghezza quel margine fa sporgere la pagina di 20px e comparire lo scorrimento orizzontale. */ .k-home .elementor{margin-left:0!important;margin-right:0!important;overflow-x:clip} /* Tipografia SOLO dentro il contenuto Elementor. Scritta come '.k-home p' colorava anche le voci del menu di Ohio, che sono dei
  • : il menu diventava grigio (2,79:1) sopra l'header trasparente. */ .k-home .elementor h1,.k-home .elementor h2, .k-home .elementor h3,.k-home .elementor h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink)} .k-home .elementor p,.k-home .elementor li{font-family:var(--body);line-height:1.65;color:var(--muted)} /* la firma di marca: i colori del logo */ .k-spectro .elementor-divider-separator, .k-spectro-bar{height:4px!important;border:0!important;border-radius:99px; background:linear-gradient(90deg,#F5A623 0 16.6%,#0F766E 16.6% 33.2%,#D03923 33.2% 49.8%,#C23A8E 49.8% 66.4%,#3763A6 66.4% 83%,#6D28D9 83% 100%)} /* --- hero --- */ .k-eyebrow{font-family:var(--body)!important;font-size:13px!important;font-weight:700!important; letter-spacing:.14em!important;text-transform:uppercase;color:var(--muted)!important} .k-h1 h1{font-size:clamp(2.6rem,6.6vw,5.3rem)!important;max-width:16ch} .k-sub p{font-size:clamp(1.05rem,1.7vw,1.3rem)!important;max-width:56ch} .k-note p{font-size:15px!important;display:flex;align-items:center;gap:.55rem} .k-note p::before{content:"✓";width:19px;height:19px;flex:0 0 19px;border-radius:50%; background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700} /* pulsanti (HTML nostro: cosi' lo stile e' identico ovunque) */ .k-cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.4rem} .k-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--body);font-weight:600;font-size:16px; padding:.85rem 1.5rem;border-radius:99px;text-decoration:none;border:1.5px solid transparent;transition:.22s} .k-btn span{transition:transform .28s} .k-btn:hover span{transform:translateX(4px)} .k-btn-a{background:var(--accent);color:#fff} .k-btn-a:hover{background:var(--accent-dark);transform:translateY(-2px);color:#fff} .k-btn-g{border-color:var(--line-strong);color:var(--ink)} .k-btn-g:hover{border-color:var(--ink);transform:translateY(-2px)} /* ══════════════════════════════════════════════════════════════════════════ ⚠️⚠️ OHIO RICOLORA OGNI AL PASSAGGIO DEL MOUSE, e vince quasi sempre. La regola del tema e': a:not(.-unlink):hover { color: var(--clb-link-hover-color) } che vale (0,2,1) — l'elemento `a`, la classe dentro al `:not()` e il `:hover`. Una nostra `.k-btn-a:hover` vale (0,2,0) e PERDE: per questo su tre pagine i bottoni diventavano arancioni appena ci passavi sopra, anche dove il colore al passaggio era gia' scritto. Segnalato dall'utente due volte, sulle taglie del cloud e sull'analisi del sito. ⚠️ La rete qui sotto sta a (0,2,1): batte il tema e PERDE contro qualunque regola nostra piu' precisa (le pastiglie delle taglie, i bottoni delle aperture d'area), che e' esattamente il livello giusto. Alzarla di piu' spegnerebbe quelle. ⚠️ Si mette anche su `:focus-visible`: chi arriva col tasto di tabulazione riceve lo stesso trattamento del mouse, e il tema fa lo stesso errore li'. ══════════════════════════════════════════════════════════════════════════ */ a.k-btn-a:hover, a.k-btn-a:focus-visible{color:#fff} a.k-btn-g:hover, a.k-btn-g:focus-visible{color:var(--ink)} .k-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-weight:600;font-size:15px; color:var(--accent-dark);text-decoration:none} .k-go span{transition:transform .28s} .k-card:hover .k-go span{transform:translateX(5px)} /* sedi */ /* ⚠️ I TRE FILETTI NON SONO PIU' TUTTI ROSSI. Tre blocchi identici con lo stesso segno erano un elenco; tre colori diversi — presi dalle aree — li rendono tre cose. Scelta dell'utente il 7/8 (variante «come ora, con un segno»). Il modulo a destra non e' stato toccato. */ .k-sede{border-left:3px solid var(--accent);padding-left:1.1rem;margin-bottom:1.1rem} /* la firma delle sei aree, sotto agli indirizzi */ .k-firma{display:flex;gap:5px;margin:1.9rem 0 0} .k-firma i{width:26px;height:5px;border-radius:99px;display:block} /* i due collegamenti social */ .k-social{display:flex;gap:.6rem;margin:1.6rem 0 0} /* ⚠️⚠️ TERZA VOLTA CHE ESCE QUESTO DIFETTO, e si segnala sempre uguale: «il cerchio sembra vuoto». Fondo e colore dell'icona sfumavano INSIEME: a meta' strada il fondo e' ancora chiaro e l'icona e' gia' quasi bianca, quindi per un terzo di secondo non si vede niente. Stessa cosa dei «Vai all'area» del mega-menu (sotto 3,0 per 131ms su 260) e dei bottoni della pagina servizio. Rimedio uguale agli altri: velo in `::before` che si apre con `transform` (sta sulla scheda grafica) e il colore dell'icona che cambia con 60ms di RITARDO, quando il velo e' gia' partito. ⚠️ `isolation:isolate`, o lo `z-index:-1` del velo finisce dietro alla sezione. */ .k-social a{display:flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:50%;border:1px solid rgba(19,28,46,.2);color:var(--ink); position:relative;isolation:isolate;overflow:hidden; transition:color .3s .06s,border-color .3s,transform .35s cubic-bezier(.22,.8,.24,1)} .k-social a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%; background:var(--ink);transform:scale(0); transition:transform .38s cubic-bezier(.3,0,.2,1)} .k-social a:hover::before,.k-social a:focus-visible::before{transform:scale(1)} .k-social a:hover,.k-social a:focus-visible{color:#fff;border-color:var(--ink); transform:translateY(-3px)} @media (prefers-reduced-motion:reduce){ .k-social a::before{transition:none} .k-social a{transition:color .01s,border-color .01s} .k-social a:hover{transform:none} } .k-social svg{display:block} .k-sede b{font-family:var(--display);font-size:1.05rem;display:block;margin-bottom:.15rem;color:var(--ink)} .k-sede span{color:var(--muted);font-size:15px} .k-sede a{color:var(--accent-dark);font-weight:600;text-decoration:none} /* lavori */ .k-work-img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;margin-bottom:1rem} .k-work-img img{width:100%;height:100%;object-fit:cover;display:block} /* numeri */ .k-stat .elementor-heading-title{font-family:var(--display);font-size:clamp(2.1rem,3.6vw,2.9rem);line-height:1} .k-stat p{font-size:14.5px!important;margin:0} /* --- diciture di sezione --- */ .k-kicker{font-family:var(--body)!important;font-size:13px!important;font-weight:700!important; letter-spacing:.14em!important;text-transform:uppercase;color:var(--accent-dark)!important} .k-h2 h1,.k-h2 h2{font-size:clamp(2rem,4.2vw,3.2rem)!important} /* --- schede servizio --- Sono colonne Elementor: lo sfondo e il bordo vanno sull'involucro interno, altrimenti il margine fra colonne finisce dentro la scheda. */ .k-card > .elementor-widget-wrap{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:1.9rem!important;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden;height:100%} .k-card{background:none} .k-card > .elementor-widget-wrap::after{content:"";position:absolute;inset:auto 0 0 0;height:3px; background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s} .k-card:hover > .elementor-widget-wrap{transform:translateY(-5px);border-color:var(--line-strong); box-shadow:0 24px 60px rgba(19,28,46,.18)} .k-card:hover > .elementor-widget-wrap::after{transform:scaleX(1)} .k-card .k-num .elementor-heading-title{font-family:var(--display);font-size:13px;color:var(--accent-dark);letter-spacing:.08em} .k-card h2,.k-card h3{font-size:1.5rem!important} .k-card p{font-size:15.5px!important} /* --- sezione scura: il processo --- */ .k-dark{background:var(--ink)} .k-dark h2,.k-dark h3,.k-dark .elementor-heading-title{color:#fff!important} .k-dark p{color:rgba(255,255,255,.72)!important} /* sul navy l'accento scenderebbe a 3,48:1: serve la variante chiara */ .k-dark .k-kicker,.k-dark .k-num .elementor-heading-title{color:#FF8A6B!important} .k-step > .elementor-widget-wrap{border-top:1px solid rgba(255,255,255,.20);padding-top:1.7rem!important} /* --- lavori --- */ .k-work img{transition:transform .55s cubic-bezier(.22,1,.36,1)} .k-work:hover img{transform:scale(1.06)} .k-todo > .elementor-widget-wrap{border:1.5px dashed var(--line-strong);border-radius:16px; background:var(--surface);padding:2.2rem 1.5rem!important;height:100%;display:flex;align-items:center} .k-todo p{text-align:center} /* --- contatti --- */ .k-cta{background:var(--surface);border:1px solid var(--line);border-radius:24px; padding:clamp(2.2rem,5vw,3.5rem)!important;align-items:center} /* ========================================================================== MOVIMENTO Dove il browser sa guidare le animazioni con lo scorrimento le lasciamo a lui: girano sul compositore e non pesano sul JavaScript della pagina. ========================================================================== */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .k-rv{animation:kEnter linear both;animation-timeline:view();animation-range:entry 8% cover 26%} @keyframes kEnter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} .k-work-img img{animation:kPan linear both;animation-timeline:view();animation-range:cover 0% cover 100%} @keyframes kPan{from{transform:scale(1.12) translateY(-2.5%)}to{transform:scale(1.12) translateY(2.5%)}} .k-spectro .elementor-divider-separator,.k-spectro-bar{ animation:kDraw linear both;animation-timeline:view();animation-range:entry 10% cover 22%;transform-origin:0 50%} @keyframes kDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}} } } /* Ripiego per i browser senza animation-timeline: la classe la mette il JS. */ @supports not (animation-timeline: view()){ .k-rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .k-rv.k-in{opacity:1;transform:none} } /* sipario d'ingresso */ /* ⚠️ Tempi accorciati il 4/8 su richiesta: «dobbiamo velocizzare dopo animazione logo». Il gesto e' lo stesso, dura un terzo di meno. Il conto da rispettare: la tenda non deve MAI alzarsi prima che il colore abbia finito di attraversare il marchio, o sembra che si sia rotto qualcosa. */ #k-curtain{position:fixed;inset:0;z-index:99999;background:#131C2E;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:1.5rem;transition:transform .62s cubic-bezier(.76,0,.24,1);will-change:transform} #k-curtain.k-up{transform:translateY(-101%)} /* ⚠️ LA VARIANTE DEL SALTO: colore pieno, e se ne va SFUMANDO, non alzandosi. E in fretta — 0,3s contro 0,62: fra una pagina e l'altra il velo non e' uno spettacolo, e' il tempo che si passa ad aspettare. */ #k-curtain.-salto{background:var(--sc,#131C2E);gap:0; transition:opacity .3s cubic-bezier(0,0,.25,1)} #k-curtain.-salto.k-up{transform:none;opacity:0} /* ⚠️ L'USCITA: lo stesso colore copre lo schermo prima di cambiare pagina, e siccome le due meta' hanno la stessa tinta il passaggio si legge come un gesto solo invece che come due. ══ IL COLORE ESPLODE DAL PUNTO IN CUI SI E' CLICCATO (26/8/2026) ══════════ ⚠️ Non e' piu' una dissolvenza. Il velo e' sempre opaco e viene RITAGLIATO a cerchio: il cerchio nasce con raggio zero sotto il dito e cresce fino a coprire l'angolo piu' lontano dello schermo. Il colore non «compare», ARRIVA — ed e' per questo che il passaggio si sente come una conseguenza del clic e non come un caricamento. E' l'effetto di 14islands. ⚠️ Le tre misure gliele scrive il gestore del clic: `--x` e `--y` sono il punto premuto, `--r` la distanza dall'angolo piu' lontano. Un valore fisso grande al posto di `--r` non va bene: `circle(150vmax)` su uno schermo largo passerebbe quasi tutta la durata a coprire gli ultimi pixel, e il cerchio sembrerebbe fermarsi. ⚠️⚠️ Il punto va scritto CON LA TRANSIZIONE SPENTA e poi riacceso (lo fa lo script): `clip-path` interpola anche il CENTRO, quindi passando da `circle(0 at 50% 50%)` a `circle(R at X Y)` il cerchio partirebbe dal mezzo dello schermo e scivolerebbe verso il dito mentre cresce. ⚠️ `clip-path` si anima sul compositore e non fa ridisegnare la pagina sotto; il velo resta opaco e non c'e' nessuna fusione da calcolare. */ #k-salto{position:fixed;inset:0;z-index:99998;pointer-events:none; background:var(--sc,#131C2E); clip-path:circle(0px at var(--x,50%) var(--y,50%)); transition:clip-path .38s cubic-bezier(.2,.8,.2,1)} #k-salto.-va{clip-path:circle(var(--r,150vmax) at var(--x,50%) var(--y,50%))} @media (prefers-reduced-motion:reduce){ #k-salto{display:none} } @keyframes kMark{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ⚠️ VIA LA BARRA DI AVANZAMENTO (28/8/2026): con il marchio che si compone, la barra raccontava la stessa attesa una seconda volta, e piu' male — perche' fingeva di sapere a che punto e' il caricamento, che non sa. Adesso l'attesa la dice la luce che respira. */ body.k-loading{overflow:hidden} /* avanzamento in cima */ #k-prog{position:fixed;inset:0 auto auto 0;height:3px;width:100%;z-index:9999;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,#F5A623,#0F766E,#D03923,#C23A8E,#3763A6,#6D28D9)} @supports (animation-timeline: scroll()){ #k-prog{animation:kGrow linear both;animation-timeline:scroll(root)} @keyframes kGrow{to{transform:scaleX(1)}} } @media (prefers-reduced-motion:reduce){ /* ⚠️ 5/11/2026: le piste dei loghi sono escluse. Con 0,01ms il nastro clienti (che qui gira sempre, vedi «CI HANNO SCELTO») faceva un giro intero ogni centesimo di millisecondo: «velocissimo». */ .k-home *:not(.k-loghi__pista){animation-duration:.01ms!important;transition-duration:.01ms!important} .k-rv{opacity:1!important;transform:none!important} #k-curtain{display:none!important} } /* -------------------------------------------------------------------------- Spazio fra le colonne. Non uso il "gap" di Elementor: e' incostante fra versioni. Metto il respiro come padding della colonna, mentre il riquadro visibile sta sull'involucro interno: cosi' lo spazio resta FUORI dalla scheda, dov'e' giusto che stia. -------------------------------------------------------------------------- */ .k-card, .k-todo, .k-work, .k-step { padding-left: .7rem !important; padding-right: .7rem !important; } .k-card, .k-todo, .k-work { margin-bottom: 1.4rem; } .k-step { margin-bottom: 1.6rem; } /* le due righe di schede non devono incollarsi */ .k-home .elementor-inner-section { margin-bottom: 0; } /* riquadro contatti: il respiro interno lo do io, non le colonne */ .k-cta { padding: clamp(2.2rem, 5vw, 3.5rem) !important; } .k-cta > .elementor-container > .elementor-column { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================================== ROTATORE DELLE AREE (hero) Scorre da solo fra le sei aree, ognuna col proprio colore preso dallo spettro del logo. Niente Slider Revolution: erano 438 KB per un hero solo. ========================================================================== */ .k-rot{position:relative;border-radius:20px;overflow:hidden;min-height:430px; background:var(--c,#D03923);transition:background .8s cubic-bezier(.22,1,.36,1); display:flex;flex-direction:column;justify-content:flex-end;padding:2.2rem} .k-rot__slides{position:relative;flex:1} .k-rot__s{position:absolute;inset:auto 0 0 0;opacity:0;transform:translateY(14px); transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1); pointer-events:none} .k-rot__s.is-on{opacity:1;transform:none;pointer-events:auto} /* La specificita' deve battere '.k-home .elementor p' (0-2-1), altrimenti il testo del rotatore eredita il grigio del corpo e sparisce sul colore. */ .k-home .elementor .k-rot__n{font-family:var(--display);font-size:13px;font-weight:700; letter-spacing:.12em;color:var(--fg,#fff);opacity:.72;display:block;margin-bottom:.5rem} .k-home .elementor .k-rot__t{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700;line-height:1.1;color:var(--fg,#fff);margin:0 0 .6rem} .k-home .elementor .k-rot__d{font-size:15.5px;line-height:1.55;color:var(--fg,#fff);opacity:.9; margin:0 0 1.1rem;max-width:38ch} .k-home .elementor .k-rot__go{display:inline-flex;align-items:center;gap:.45rem;font-weight:600; font-size:15px;color:var(--fg,#fff);text-decoration:none; border-bottom:1.5px solid color-mix(in srgb, var(--fg,#fff) 45%, transparent);padding-bottom:2px} .k-home .elementor .k-rot__go:hover{border-bottom-color:var(--fg,#fff)} /* i sei tasti: uno per area, con la barra che si riempie su quello attivo */ .k-rot__nav{display:flex;gap:6px;margin-top:1.6rem} .k-rot__b{flex:1;height:4px;border:0;padding:0;border-radius:99px;cursor:pointer; background:color-mix(in srgb, var(--fg,#fff) 28%, transparent);position:relative;overflow:hidden} .k-rot__b span{position:absolute;inset:0;background:var(--fg,#fff);transform:scaleX(0);transform-origin:0 50%} .k-rot__b[aria-selected="true"] span{animation:kRot var(--dur,5s) linear forwards} .k-rot__b:focus-visible{outline:2px solid var(--fg,#fff);outline-offset:3px} @keyframes kRot{to{transform:scaleX(1)}} .k-rot.is-paused .k-rot__b[aria-selected="true"] span{animation-play-state:paused} @media (max-width:1024px){ .k-rot{min-height:360px;margin-top:2.5rem} } @media (prefers-reduced-motion:reduce){ .k-rot{transition:none} .k-rot__s{transition:none} .k-rot__b[aria-selected="true"] span{animation:none;transform:scaleX(1)} } /* ========================================================================== FASCIA NUMERI Sotto il rotatore. Numeri grandi, etichette piccole, filetti sottili: nessun riquadro, il respiro fa da contenitore. ========================================================================== */ .k-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0; border-top:1px solid var(--line);margin-top:1rem} .k-nums__i{padding:2rem 1.6rem 1.6rem;border-right:1px solid var(--line);position:relative} .k-nums__i:last-child{border-right:0} .k-nums__i::before{content:"";position:absolute;inset:-1px auto auto 0;width:34px;height:3px; background:var(--c,#D03923);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s} .k-nums__i.is-on::before{transform:scaleX(1)} .k-nums__v{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,4.4vw,3.4rem); line-height:1;letter-spacing:-.03em;color:var(--ink);display:block; font-variant-numeric:tabular-nums} .k-nums__l{font-size:14px;color:var(--muted);margin-top:.55rem;display:block;line-height:1.4} .k-nums__i:nth-child(1)::before{--c:#F5A623} .k-nums__i:nth-child(2)::before{--c:#0F766E} .k-nums__i:nth-child(3)::before{--c:#C23A8E} .k-nums__i:nth-child(4)::before{--c:#3763A6} /* casella da compilare: si vede che manca un dato, senza inventarlo */ .k-nums__v.da-fare{color:var(--line-strong);font-size:clamp(1.5rem,2.6vw,2rem)} @media (max-width:720px){ .k-nums__i{border-right:0;border-bottom:1px solid var(--line);padding:1.5rem 0} .k-nums__i:last-child{border-bottom:0} } /* -------------------------------------------------------------------------- Slider Revolution rimesso come hero (31/7). La sezione non deve avere margini ne' contenitore: lo slider gestisce da solo la propria altezza a schermo intero. -------------------------------------------------------------------------- */ .k-slider > .elementor-container{max-width:100%!important;width:100%!important} .k-slider .elementor-widget-wrap{padding:0!important} .k-slider .elementor-widget-shortcode{margin:0} .k-home .k-slider p{margin:0} /* -------------------------------------------------------------------------- Un colore per area sulle schede servizio: gli stessi sei del logo. Il filetto in alto e il numero prendono il colore; il testo resta scuro, cosi' non si ripropone il problema di leggibilita' del rotatore. -------------------------------------------------------------------------- */ .k-card > .elementor-widget-wrap{border-top:3px solid var(--ca,var(--line))} .k-card > .elementor-widget-wrap::after{background:var(--ca,var(--accent))} .k-card .k-num .elementor-heading-title{color:var(--ca,var(--accent-dark))!important} .k-card:hover > .elementor-widget-wrap{border-top-color:var(--ca,var(--accent))} /* ⚠️ Colori PIENI, non le varianti scurite: qui il colore sta su un filetto e su un numero in filigrana, cioe' su dei SEGNI, non su delle parole. `--cd` e' la variante scurita, e serve solo dove il colore deve stare per forza su un testo piccolo: qui e' il caso del solo «Scopri». */ .k-a1{--ca:#F5A623;--cd:#976615} /* Design & Branding */ .k-a2{--ca:#0F766E;--cd:#CB3F00} /* Web */ .k-a3{--ca:#D03923;--cd:#CB3722} /* Soluzioni per aziende */ .k-a4{--ca:#C23A8E;--cd:#BE388B} /* Software */ .k-a5{--ca:#3763A6;--cd:#3763A6} /* Gadget e stampe */ .k-a6{--ca:#6D28D9;--cd:#6D28D9} /* Foto e video */ /* -------------------------------------------------------------------------- PERCHE' UN UNICO PARTNER Niente riquadri: sopra ci sono gia' le schede, ripeterli appiattirebbe la pagina. Qui solo un filetto colorato e aria. I quattro colori sono quattro dei sei del logo, gia' scuriti per il contrasto. -------------------------------------------------------------------------- */ .k-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.2rem;margin-top:2.6rem} /* Schede che si colorano dall'alto (soluzione 1, scelta il 4/8): stesso gesto dei bottoni, delle tessere dei servizi e delle sei aree in chiusura. Un sito che fa sempre la stessa cosa si impara una volta sola. ⚠️ `--i` e' l'inchiostro che si legge su QUEL colore, stampato voce per voce nel contenuto della home: navy sul giallo, bianco su rosso, magenta e blu. ⚠️ `isolation:isolate`, o lo z-index:-1 del velo lo manda dietro alla sezione. */ .k-why__i{border-top:5px solid var(--cw,var(--accent));padding:1.4rem 1rem 1.4rem; position:relative;isolation:isolate; transition:transform .3s cubic-bezier(.22,.8,.24,1), border-top-width .24s} .k-why__i::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--cw); transform:scaleY(0);transform-origin:50% 0; transition:transform .44s cubic-bezier(.3,0,.2,1)} .k-why__i:hover::after{transform:scaleY(1)} .k-why__i:hover{transform:translateY(-3px);border-top-width:9px} /* ⚠️ Il colore del testo in hover sta IN FONDO al foglio, non qui: piu' avanti c'e' `.k-home .elementor .k-caldo .k-why__i h3{color:var(--ink)}`, che ha la stessa specificita' e vince perche' viene dopo. Misurato: sul riquadro magenta il titolo restava navy, 3,48:1. */ .k-home .elementor .k-why__i h3, .k-home .elementor .k-why__i p{transition:color .3s .06s} .k-home .elementor .k-why__i h3{font-family:var(--display);font-size:1.15rem;font-weight:700; line-height:1.25;margin:0 0 .6rem;color:var(--ink)} .k-home .elementor .k-why__i p{font-size:15.5px;line-height:1.6;margin:0;color:var(--muted)} @media (max-width:640px){ .k-why{gap:1.8rem} } /* -------------------------------------------------------------------------- Respiro verticale su schermi piccoli. Le sezioni hanno 7rem sopra e sotto: sul desktop e' giusto, su un telefono due sezioni adiacenti fanno 14rem (oltre 220px) di vuoto fra un blocco e l'altro, e sembra che la pagina sia finita. -------------------------------------------------------------------------- */ @media (max-width: 780px){ .k-home .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap{ padding-top: 0; padding-bottom: 0; } .k-home .elementor-top-section{ padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; } /* lo slider e il nastro clienti hanno gia' i loro margini */ .k-home .k-slider{ padding: 0 !important; } } /* ========================================================================== RITMO DELLE SEZIONI Il difetto era questo: sette sezioni di fila sullo stesso grigio, stesso allineamento, stesso passo. Nessuno stacco, e la pagina sembrava una sola colonna lunga. Ora tre superfici che si alternano — grigio, bianco, navy — e la sezione che porta la proposta commerciale e' quella scura. ========================================================================== */ /* --- la sezione scura: "perche' un unico partner" + i numeri --- */ .k-dark{background:var(--ink)!important;position:relative;overflow:hidden} /* alone caldo in alto a destra: da' profondita' senza sporcare la leggibilita' */ .k-dark::before{content:"";position:absolute;width:760px;height:760px;right:-240px;top:-320px; border-radius:50%;pointer-events:none; background:radial-gradient(circle at 40% 40%,rgba(254,80,0,.16),rgba(208,57,35,.05) 45%,transparent 72%)} .k-dark > .elementor-container{position:relative;z-index:1} .k-dark .k-h2 h2{color:#fff!important;max-width:20ch} .k-dark .k-kicker{color:#FF8A6B!important} .k-home .elementor .k-dark p{color:rgba(255,255,255,.74)} .k-home .elementor .k-dark .k-why__i h3{color:#fff} .k-home .elementor .k-dark .k-why__i p{color:rgba(255,255,255,.66)} .k-dark .k-why__i{border-top-color:var(--cw)} /* i numeri dentro la sezione scura, separati da un filetto */ .k-dark .k-nums{border-top:1px solid rgba(255,255,255,.16);margin-top:4rem} .k-dark .k-nums__i{border-right-color:rgba(255,255,255,.16)} .k-home .elementor .k-dark .k-nums__v{color:#fff} .k-home .elementor .k-dark .k-nums__l{color:rgba(255,255,255,.6)} .k-dark .k-nums__v.da-fare{color:rgba(255,255,255,.28)} /* --- "come lavoriamo" torna chiara: due sezioni scure di fila si annullano --- */ .k-proc .k-step > .elementor-widget-wrap{border-top:1px solid var(--line);padding-top:1.7rem!important} .k-proc .k-num .elementor-heading-title{color:var(--accent-dark)!important} /* --- i titoli di sezione respirano di piu' --- */ .k-h2 h1,.k-h2 h2{margin-bottom:1rem!important;max-width:22ch} .k-kicker{display:inline-block;margin-bottom:.2rem} @media (max-width:780px){ .k-dark::before{width:420px;height:420px;right:-160px;top:-180px} .k-dark .k-nums{margin-top:2.4rem} } /* --- chiusura: i contatti sul navy, come la sezione della proposta. Il riquadro bianco non serve piu': sarebbe una toppa chiara su fondo scuro. --- */ .k-fine .k-cta{background:transparent!important;border:0!important;padding:0!important} .k-fine::before{right:auto;left:-260px;top:auto;bottom:-320px} .k-home .elementor .k-fine .k-sede b{color:#fff} .k-home .elementor .k-fine .k-sede span{color:rgba(255,255,255,.68)} .k-fine .k-sede{border-left-color:#FF8A6B} .k-home .elementor .k-fine .k-sede a{color:#FF8A6B} .k-fine .k-btn-a{background:#fff;color:var(--ink)} .k-fine .k-btn-a:hover{background:rgba(255,255,255,.88);color:var(--ink)} /* ========================================================================== CI HANNO SCELTO Due file che scorrono in direzioni opposte: una fila sola con 17 loghi sarebbe lunghissima e il movimento quasi impercettibile. I bordi sfumano, cosi' i loghi entrano ed escono invece di comparire di colpo. ========================================================================== */ /* ⚠️ Il fondo era una sfumatura da navy a BORDEAUX (#5A2016): a destra la banda diventava rossa, e quel colore non sta in nessuna palette del sito. Qui e' il navy scuro del footer e dello slider, pieno. ⚠️ Rimesso il 7/8 alle 16:45: un salvataggio delle 16:41 aveva riportato indietro questo blocco insieme alla sezione «Ultimi lavori». */ .k-loghi-banda{position:relative;overflow:hidden;background:#0F1622} /* ⚠️ Tolto il filetto a sei colori sopra e sotto: incorniciava la banda come un adesivo, e i sei colori sono gia' il segno dello slider — qui facevano il verso a se stessi. */ /* Titolo della fascia clienti: STESSA misura degli altri titoli di sezione. Era un paragrafo da 34px con dicitura assente, e fra sezioni che hanno tutte dicitura + H2 da 51px sembrava un'altra cosa. Qui e' centrato perche' lo e' tutta la fascia, ed e' bianco perche' il fondo e' scuro. */ .k-loghi-banda .k-kicker, .k-home .elementor .k-loghi-banda .k-h2 h2{text-align:center} .k-home .elementor .k-loghi-banda .k-kicker{color:#FF8A6B!important;display:block} .k-home .elementor .k-loghi-banda .k-h2 h2{ color:#fff!important;max-width:22ch;margin:.2rem auto 2.6rem!important} /* la vecchia dicitura, se resta in giro su qualche pagina */ .k-home .elementor .k-loghi__cap{text-align:center;font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.1rem)!important;font-weight:700!important; letter-spacing:-.01em;text-transform:none;line-height:1.2; color:#fff!important;margin:0 0 2.8rem!important} /* ⚠️ Con quattro file 1,6rem di distacco fanno un muro alto 700px: qui 1,15rem, e la fascia resta una striscia. */ .k-loghi{display:grid;gap:1.15rem} .k-loghi__fila{overflow:hidden; /* sfumatura ai bordi: senza, i loghi appaiono e spariscono di scatto */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} /* La pista NON deve essere alta quanto il logo: l'ingrandimento in hover (scale 1.12) sborderebbe e overflow:hidden della fila lo taglierebbe. min-height al posto di height, piu' aria sopra e sotto. */ /* ⚠️⚠️ LA DURATA VA RICALCOLATA OGNI VOLTA CHE SI AGGIUNGONO LOGHI: la pista e' lunga quanto i marchi che contiene, quindi a durata ferma piu' loghi = piu' veloce. Il 7/8 da 15 a 53 loghi: a 62s la prima fila sarebbe passata da 23 a oltre 60 px/s. Conto: pista = 2*(somma larghezze) + (2N-1)*gap; durata = (pista/2) / velocita', con 23 / 18,5 / 21 / 19,8 px/s sulle QUATTRO file — quattro velocita' diverse apposta, se no le file si sincronizzano e sembra un blocco unico che scivola. ⚠️ 30/10/2026: +Brasa Steak House nella prima fila e +La Vannina nella terza (59 loghi): 121→127s e 132→141s, sul telefono 84→88s e 93→99s. Poi +i9factory nella seconda e +Redess nella quarta (61 loghi): 136→145s e 131→138s, sul telefono 96→102s e 93→98s. Poi +Falegnameria Ruberto nella quarta (62 loghi): 138→147s, sul telefono 98→105s. ⚠️ Le file sono quattro perche' 53 loghi su tre darebbero piste da 7.200px e giri da oltre due minuti e mezzo. La quarta va anche all'indietro. */ .k-loghi__pista{display:flex;align-items:center;gap:4.5rem;width:max-content; min-height:46px;padding-block:12px; animation:kScorri 127s linear infinite} .k-loghi__fila.-indietro .k-loghi__pista{animation-duration:145s;animation-direction:reverse} .k-loghi__fila.-terza .k-loghi__pista{animation-duration:141s} .k-loghi__fila.-quarta .k-loghi__pista{animation-duration:147s} /* ⚠️ 5/11/2026, utente: «in home page non funzionano animazioni loghi». Su iPhone un tocco accende :hover e lo lascia acceso: le quattro file si fermavano e restavano ferme. La pausa e l'ingrandimento valgono solo con un mouse vero. */ @media (hover:hover) and (pointer:fine){ .k-loghi:hover .k-loghi__pista{animation-play-state:paused} } @keyframes kScorri{to{transform:translateX(-50%)}} /* Il colore lo uniformiamo noi: i loghi arrivano bianchi, neri e a colori. Renderli tutti dello stesso tono e' cio' che fa sembrare pulita una fascia. */ /* La specificita' deve battere le regole immagine di Ohio/Elementor: scritta come '.k-loghi img' il logo restava alla sua altezza naturale (120px), e l'SVG senza dimensioni intrinseche si dilatava a riempire la fila. brightness(0) invert(1) = qualunque logo diventa bianco pieno, chiaro o scuro che fosse in partenza. E' cio' che rende omogenea la fila. */ /* I file sono gia' normalizzati per AREA ottica: qui basta un tetto, cosi' ognuno tiene la sua proporzione e pesano tutti uguale all'occhio. */ /* NIENTE height/width con !important: batterebbero lo stile inline che porta l'altezza propria di ogni logo, e li riallineerebbe tutti uguali. */ .k-home .elementor .k-loghi img{width:auto!important;max-width:none!important; /* niente max-height: la fissava di nuovo uguale per tutti e annullava la normalizzazione per area. L'altezza la porta ogni img inline. */ object-fit:contain;flex:0 0 auto; filter:brightness(0) invert(1) opacity(.62); transition:filter .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)} @media (hover:hover) and (pointer:fine){ .k-home .elementor .k-loghi img:hover{filter:brightness(0) invert(1) opacity(1);transform:scale(1.12)} } @media (max-width:780px){ .k-home .elementor .k-loghi img{transform:scale(.78);transform-origin:center} .k-loghi__pista{min-height:34px;padding-block:9px;gap:2.6rem} .k-loghi__pista{gap:3rem;animation-duration:88s} .k-loghi__fila.-indietro .k-loghi__pista{animation-duration:102s} .k-loghi__fila.-terza .k-loghi__pista{animation-duration:99s} .k-loghi__fila.-quarta .k-loghi__pista{animation-duration:105s} } /* ⚠️⚠️ 5/11/2026, utente: «loghi in home non si muovono ma si vedono duplicati». Ogni pista contiene i suoi loghi DUE VOLTE, scritti nell'HTML di Elementor: e' la seconda copia che fa girare il nastro senza stacchi (translateX -50%). Qui c'era un blocco «prefers-reduced-motion» che fermava le file e le mandava a capo: su ogni computer/telefono con «Riduci movimento» o «Effetti animazione» spenti (Windows 11 li spegne spesso da solo) la fascia restava ferma e mostrava ogni logo due volte. Tolto: lo scorrimento e' lento e lineare, e su richiesta dell'utente deve girare sempre. NON rimettere un animation:none sulle piste senza nascondere anche la seconda meta' dei loghi. */ /* ========================================================================== "PERCHE' UN UNICO PARTNER" — superficie calda Era navy, ma con la fascia clienti diventata anch'essa scura le due si fondevano in un unico blocco. Qui un tono caldo chiaro: distinto sia dal grigio freddo delle aree sopra, sia dalla banda scura sotto. ========================================================================== */ .k-caldo{background:#F2EBE3!important;position:relative;overflow:hidden} .k-caldo::before{content:"";position:absolute;width:720px;height:720px;right:-260px;top:-300px; border-radius:50%;pointer-events:none; background:radial-gradient(circle at 40% 40%,rgba(208,57,35,.09),rgba(254,80,0,.04) 45%,transparent 72%)} .k-caldo > .elementor-container{position:relative;z-index:1} /* i contenuti tornano scuri su chiaro */ .k-home .elementor .k-caldo .k-h2 h2{color:var(--ink)!important;max-width:20ch} .k-home .elementor .k-caldo .k-kicker{color:var(--accent-dark)!important} .k-home .elementor .k-caldo p{color:var(--muted)} .k-home .elementor .k-caldo .k-why__i h3{color:var(--ink)} .k-home .elementor .k-caldo .k-why__i p{color:var(--muted)} /* la fascia numeri dentro la sezione calda */ .k-caldo .k-nums{border-top:1px solid rgba(19,28,46,.14);margin-top:4rem} .k-caldo .k-nums__i{border-right-color:rgba(19,28,46,.14)} .k-home .elementor .k-caldo .k-nums__v{color:var(--ink)} .k-home .elementor .k-caldo .k-nums__l{color:var(--muted)} .k-home .elementor .k-caldo .k-nums__v.da-fare{color:rgba(19,28,46,.26)} @media (max-width:780px){ .k-caldo::before{width:400px;height:400px;right:-150px;top:-170px} .k-caldo .k-nums{margin-top:2.4rem} } /* -------------------------------------------------------------------------- "PERCHE'": titolo a sinistra, argomenti a destra in 2x2 -------------------------------------------------------------------------- */ .k-why-testa > .elementor-widget-wrap{padding-right:2.5rem!important} .k-why-testa .k-h2 h2{max-width:14ch} .k-why .k-why__i,.k-why__i{margin-bottom:0} .k-why{grid-template-columns:repeat(2,1fr)!important;gap:2rem 2.4rem!important;margin-top:0!important} .k-caldo-coda{padding-top:0!important} .k-caldo-coda::before{display:none} @media (max-width:980px){ .k-why-testa > .elementor-widget-wrap{padding-right:0!important} .k-why{grid-template-columns:1fr!important} } /* -------------------------------------------------------------------------- LAVORI: la fila di progetti che scorre in orizzontale mentre si scende DUE STATI, NON UNO. Lo stato di base e' una fila che si scorre col dito o con la rotellina: e' quello che si vede su telefono, con le animazioni disattivate e se il JavaScript non parte. Solo quando il JavaScript conferma che si puo' fare aggiunge la classe .is-pin e la sezione diventa la scena bloccata in cui i progetti entrano da destra. Se qualcosa va storto si resta sulla fila semplice, che funziona lo stesso: mai una sezione vuota. -------------------------------------------------------------------------- */ /* La sezione Elementor non mette margini interni: la scena bloccata deve riempire lo schermo. I margini laterali li calcola --g, cosi' le schede restano allineate al resto della pagina. */ .k-lavori > .elementor-container{max-width:none!important} .k-lavori .elementor-widget-wrap{padding:0!important} .k-hs{--g:max(1.5rem,calc((100% - var(--k-gabbia)) / 2));position:relative} /* Senza scena bloccata il respiro sopra e sotto lo mette il blocco stesso: la sezione ha margini a zero e resterebbe attaccata alle vicine. */ .k-hs:not(.is-pin){padding-block:clamp(3.2rem,7vw,7rem)} .k-hs__testa{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem; padding-inline:var(--g);margin-bottom:clamp(1.5rem,4vh,2.4rem)} .k-home .elementor .k-hs__h{font-size:clamp(2rem,4.2vw,3.2rem);margin:.15rem 0 .5rem} .k-home .elementor .k-hs__s{font-size:16px;max-width:44ch;margin:0} .k-hs__stato{flex:0 0 auto;display:flex;align-items:center;gap:1rem;padding-bottom:.5rem} .k-hs__cont{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink); letter-spacing:.05em;font-variant-numeric:tabular-nums} .k-hs__cont i{font-style:normal;opacity:.35;margin:0 .35rem} .k-hs__barra{width:min(220px,18vw);height:3px;border-radius:99px;background:var(--line);overflow:hidden} .k-hs__barra i{display:block;height:100%;border-radius:99px;background:var(--accent); transform:scaleX(0);transform-origin:left} /* la fila: di base si scorre di lato, il pollice fa quello che ci si aspetta */ .k-hs__vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none} .k-hs__vp::-webkit-scrollbar{display:none} .k-hs__track{display:flex;align-items:stretch;gap:1.4rem;padding-inline:var(--g); width:max-content} /* --- la scheda --- */ .k-pj{flex:0 0 clamp(266px,26vw,392px);display:flex;scroll-snap-align:center} .k-pj__a{display:flex;flex-direction:column;width:100%;background:var(--surface); border-radius:18px;overflow:hidden;text-decoration:none; box-shadow:0 1px 2px rgba(19,28,46,.06),0 14px 34px -20px rgba(19,28,46,.42); transition:transform .42s cubic-bezier(.22,.8,.24,1),box-shadow .42s} /* Ohio dipinge un gradiente ARANCIONE di sfondo su ogni al passaggio del mouse: e' il suo effetto di sottolineatura, ma su un collegamento grande come una scheda riempie di arancione tutto il riquadro. Va spento qui, non a livello di tema: altrove quell'effetto serve. */ .k-home .elementor .k-pj__a, .k-home .elementor .k-pj__a:hover, .k-home .elementor .k-pj__a:focus{background-image:none!important;color:var(--ink)} .k-home .elementor .k-pj--tutti, .k-home .elementor .k-pj--tutti:hover, .k-home .elementor .k-pj--tutti:focus{ background-image:linear-gradient(150deg,#131C2E,#2A1F33 55%,#5A2016)!important} /* il segnale del passaggio del mouse resta, ma scelto da noi: la scheda si alza, la foto respira e il titolo va sul rosso di marca */ .k-home .elementor .k-pj__a:hover .k-pj__t{color:var(--accent-dark)} .k-home .elementor .k-pj__t{transition:color .28s} .k-pj__a:hover{transform:translateY(-6px); box-shadow:0 2px 4px rgba(19,28,46,.07),0 26px 52px -24px rgba(19,28,46,.5)} .k-pj__ph{position:relative;overflow:hidden;background:#e7eaee;aspect-ratio:16/10} .k-home .elementor .k-pj__ph img{width:100%;height:100%;object-fit:cover; object-position:top center;display:block; transition:transform .7s cubic-bezier(.22,.8,.24,1)} .k-pj__a:hover .k-pj__ph img{transform:scale(1.055)} /* la scritta compare sulla foto solo al passaggio del mouse: sul telefono non servirebbe a niente e coprirebbe meta' schermata */ .k-pj__ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.1rem; opacity:0;transition:opacity .34s; background:linear-gradient(180deg,rgba(19,28,46,0) 42%,rgba(19,28,46,.86))} .k-pj__a:hover .k-pj__ov{opacity:1} .k-pj__go{font-family:var(--body);font-weight:600;font-size:14.5px;color:#fff; display:inline-flex;align-items:center;gap:.45rem} .k-pj__go i{font-style:normal;transition:transform .3s} .k-pj__a:hover .k-pj__go i{transform:translateX(4px)} .k-pj__b{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.28rem} .k-pj__k{display:flex;align-items:center;gap:.55rem;font-family:var(--body);font-size:13px; font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .k-pj__k b{color:var(--accent-dark)} .k-pj__k span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%; background:currentColor;vertical-align:middle;margin-right:.55rem;opacity:.5} /* Prefisso .k-home .elementor obbligatorio: le regole generali su h3 e p valgono 0-2-1 e vincerebbero, il titolo tornerebbe grigio. */ .k-home .elementor .k-pj__t{font-size:clamp(1.15rem,1.6vw,1.4rem);margin:0;line-height:1.15} .k-home .elementor .k-pj__d{font-size:14.5px;margin:0;color:var(--muted)} /* --- ultimo pannello: il portfolio completo --- */ .k-pj--tutti{flex:0 0 clamp(266px,23vw,340px);display:flex;flex-direction:column; justify-content:center;gap:.6rem;padding:2.2rem 1.9rem;border-radius:18px; text-decoration:none;scroll-snap-align:center; background:linear-gradient(150deg,#131C2E,#2A1F33 55%,#5A2016); box-shadow:0 20px 44px -24px rgba(19,28,46,.62); transition:transform .42s cubic-bezier(.22,.8,.24,1)} .k-pj--tutti:hover{transform:translateY(-6px)} .k-pj--tutti__i{width:50px;height:50px;border-radius:50%;display:grid;place-items:center; color:#fff;background:rgba(255,255,255,.13);margin-bottom:.3rem;transition:.34s} .k-pj--tutti:hover .k-pj--tutti__i{background:var(--accent);transform:translateX(5px)} .k-home .elementor .k-pj--tutti__t{font-family:var(--display);font-weight:700;color:#fff; font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.1;letter-spacing:-.02em} .k-home .elementor .k-pj--tutti__d{font-family:var(--body);font-size:14.5px;line-height:1.55; color:rgba(255,255,255,.72)} .k-pj--tutti__b{align-self:flex-start;margin-top:.7rem;pointer-events:none} /* -------------------------------------------------------------------------- .is-pin — la scena bloccata (la mette il JavaScript, vedi home.js) -------------------------------------------------------------------------- */ .k-hs.is-pin .k-hs__pin{position:sticky;top:0;height:100vh;height:100svh; display:flex;flex-direction:column;overflow:hidden; padding:clamp(84px,11vh,124px) 0 clamp(1.8rem,5vh,3.4rem)} .k-hs.is-pin .k-hs__testa{flex:0 0 auto} .k-hs.is-pin .k-hs__vp{flex:1;min-height:0;display:flex;align-items:center; overflow:hidden;scroll-snap-type:none} .k-hs.is-pin .k-hs__track{height:auto;align-items:stretch;will-change:transform} /* Le schede sono piu' larghe nella scena bloccata: la foto tiene il suo formato 16:10, quindi la larghezza decide anche quanto si vede del sito. */ .k-hs.is-pin .k-pj{flex:0 0 clamp(300px,32vw,460px)} /* Le schede arrivano una alla volta. Lo stato nascosto vive SOLO qui dentro: senza .is-pin restano visibili, che e' il comportamento di ripiego giusto. */ .k-hs.is-pin .k-pj{opacity:0;transform:translateY(34px) scale(.975); transition:opacity .62s cubic-bezier(.22,.8,.24,1),transform .62s cubic-bezier(.22,.8,.24,1)} .k-hs.is-pin .k-pj.is-on{opacity:1;transform:none} /* Tutte le schede alte uguale (le descrizioni non hanno la stessa lunghezza), ma la FOTO non si allunga: resta 16:10 come le schermate, altrimenti 'copri' la ritaglia e del sito del cliente se ne vede meta'. */ .k-hs.is-pin .k-pj__a{height:100%} .k-hs.is-pin .k-pj__ph{flex:0 0 auto} .k-hs.is-pin .k-pj__b{flex:1} /* Le stesse schede nella pagina portfolio, tutte insieme. */ .k-pj-griglia{display:grid;gap:1.6rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,296px),1fr))} .k-pj-griglia .k-pj{scroll-snap-align:none} @media (max-width:899px){ .k-hs__testa{display:block;padding-inline:1.25rem} .k-hs__stato{display:none} .k-hs__track{gap:1rem;padding-inline:1.25rem} .k-pj,.k-pj--tutti{flex-basis:min(78vw,330px)} .k-pj--tutti{padding:1.8rem 1.5rem} } /* -------------------------------------------------------------------------- CONTATTI: info a sinistra, form a destra, sul fondo scuro -------------------------------------------------------------------------- */ .k-cont-info > .elementor-widget-wrap{padding-right:2.5rem!important} .k-cont-info .k-h2 h2{max-width:15ch} .k-cont-form .wpcf7{margin-top:.4rem} /* SPAZI FRA I CAMPI. Le colonne del form sono i vecchi .vc_col-* di Visual Composer: flottano a sinistra e nessuno le distanzia, cosi' le righe si toccano e l'etichetta di una riga finisce appiccicata al campo di quella sopra. Le lascio flottanti e non le porto a griglia perche' il secondo menu (quello che cambia in base al servizio scelto) e' avvolto in sei contenitori condizionali: in griglia diventerebbero celle e lascerebbero buchi. Il riempimento laterale sulle colonne va compensato sul contenitore, altrimenti la fila diventa piu' stretta della colonna che la contiene. */ .k-cont-form .wpcf7 form > div{display:flow-root;margin-inline:-.55rem} .k-cont-form .wpcf7 [class*="vc_col-"]{ padding-inline:.55rem!important;margin-bottom:1.6rem!important} .k-cont-form .wpcf7 label{margin-bottom:.5rem!important} /* consenso e bottone: staccati dal resto, sono due passaggi diversi */ .k-cont-form .wpcf7 [class*="vc_col-"]:has(input[type=checkbox]){margin-top:.4rem} .k-cont-form .wpcf7 [class*="vc_col-"]:has(input[type=submit]){margin-top:.6rem} .k-cont-form .wpcf7 .wpcf7-list-item label{display:flex;gap:.7rem;align-items:flex-start; margin-bottom:0!important;font-weight:400} .k-cont-form .wpcf7 input[type=checkbox]{margin-top:.28rem;flex:0 0 auto; width:17px;height:17px;accent-color:#FF8A6B} /* I due menu a tendina sembravano campi di testo gia' compilati: senza la freccia non si capisce che si aprono. */ .k-cont-form .wpcf7 select{ appearance:none;-webkit-appearance:none;padding-right:2.6rem!important;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .95rem center;background-size:17px} .k-cont-form .wpcf7 label{display:block;font-size:14px;font-weight:600; color:rgba(255,255,255,.8);margin-bottom:.4rem} .k-cont-form .wpcf7 input[type=text],.k-cont-form .wpcf7 input[type=email], .k-cont-form .wpcf7 input[type=tel],.k-cont-form .wpcf7 select, .k-cont-form .wpcf7 textarea{ width:100%;padding:.85rem 1rem;border-radius:10px;font-size:16px; background-color:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18); color:#fff;font-family:var(--body);transition:border-color .2s,background .2s} .k-cont-form .wpcf7 input::placeholder,.k-cont-form .wpcf7 textarea::placeholder{ color:rgba(255,255,255,.42)} .k-cont-form .wpcf7 input:focus,.k-cont-form .wpcf7 select:focus, .k-cont-form .wpcf7 textarea:focus{ outline:none;border-color:#FF8A6B;background-color:rgba(255,255,255,.11)} .k-cont-form .wpcf7 select option{background:var(--ink);color:#fff} .k-cont-form .wpcf7 textarea{min-height:120px;resize:vertical} .k-cont-form .wpcf7 .wpcf7-list-item{margin:0} .k-home .elementor .k-cont-form .wpcf7 p{color:rgba(255,255,255,.72);font-size:14px} .k-cont-form .wpcf7 a{color:#FF8A6B} .k-cont-form .wpcf7 input[type=submit]{ background:#fff;color:var(--ink);border:0;border-radius:99px; padding:.9rem 2rem;font-weight:600;font-size:16px;cursor:pointer;width:auto; transition:transform .2s,background .2s} .k-cont-form .wpcf7 input[type=submit]:hover{transform:translateY(-2px);background:rgba(255,255,255,.9)} @media (max-width:980px){ .k-cont-info > .elementor-widget-wrap{padding-right:0!important} } /* -------------------------------------------------------------------------- FORM CONTATTI: bottone e link sul fondo scuro Il tasto usciva grigio (stile del tema) e i link in rosso di marca danno 3,48:1 sul navy: non si leggono. -------------------------------------------------------------------------- */ .k-home .k-cont-form .wpcf7 input[type=submit], .k-home .k-cont-form .wpcf7 button[type=submit]{ background:#fff!important;color:var(--ink)!important;border:0!important; border-radius:99px!important;padding:.95rem 2.2rem!important; font-family:var(--body)!important;font-weight:600!important;font-size:16px!important; opacity:1!important;text-transform:none!important;letter-spacing:0!important; box-shadow:none!important;cursor:pointer;transition:transform .2s,background .2s} .k-home .k-cont-form .wpcf7 input[type=submit]:hover{ background:rgba(255,255,255,.88)!important;transform:translateY(-2px)} /* i link dentro il form e nelle sedi: variante chiara, leggibile sul navy */ .k-home .elementor .k-cont-form a, .k-home .elementor .k-cont-info .k-sede a{ color:#FF8A6B!important; } .k-home .elementor .k-cont-form a:hover, .k-home .elementor .k-cont-info .k-sede a:hover{ color:#FFB59E!important; } .k-home .elementor .k-fine .k-sede{ border-left-color:#FF8A6B; } /* -------------------------------------------------------------------------- CONTATTI SU FONDO CHIARO Erano su navy, ma il footer e' scuro: due superfici scure attaccate si annullano e il piede sembrava la continuazione della sezione. Sul caldo la pagina chiude con chiaro -> scuro, che e' anche il verso giusto: finisce il contenuto, comincia il piede. -------------------------------------------------------------------------- */ .k-cont-chiaro::before{right:auto;left:-260px;top:auto;bottom:-320px} .k-home .elementor .k-cont-chiaro .k-sede b{color:var(--ink)} .k-home .elementor .k-cont-chiaro .k-sede span{color:var(--muted)} .k-cont-chiaro .k-sede{border-left-color:var(--accent)} /* ⚠️⚠️ I TRE FILETTI, TRE COLORI. Le regole vanno QUI e non accanto a `.k-sede` in cima al foglio: `.k-cont-chiaro .k-sede` ha la stessa specificita' di `.k-sede:nth-of-type(n)` ma sta piu' avanti, quindi vinceva lei e i tre restavano tutti rossi. Serve l'antenato, non solo il nth-of-type. Tre blocchi identici con lo stesso segno erano un elenco; tre colori li rendono tre cose. Scelta dell'utente il 7/8. */ .k-cont-chiaro .k-sede:nth-of-type(1){border-left-color:#F5A623} .k-cont-chiaro .k-sede:nth-of-type(2){border-left-color:#0F766E} .k-cont-chiaro .k-sede:nth-of-type(3){border-left-color:#D03923} .k-home .elementor .k-cont-chiaro .k-sede a{color:var(--accent-dark)} .k-cont-chiaro .k-cont-form .wpcf7 label{color:var(--ink)} .k-cont-chiaro .k-cont-form .wpcf7 input[type=text], .k-cont-chiaro .k-cont-form .wpcf7 input[type=email], .k-cont-chiaro .k-cont-form .wpcf7 input[type=tel], .k-cont-chiaro .k-cont-form .wpcf7 select, .k-cont-chiaro .k-cont-form .wpcf7 textarea{ background-color:#fff;border-color:rgba(19,28,46,.16);color:var(--ink)} .k-cont-chiaro .k-cont-form .wpcf7 input::placeholder, .k-cont-chiaro .k-cont-form .wpcf7 textarea::placeholder{color:rgba(19,28,46,.40)} .k-cont-chiaro .k-cont-form .wpcf7 input:focus, .k-cont-chiaro .k-cont-form .wpcf7 select:focus, .k-cont-chiaro .k-cont-form .wpcf7 textarea:focus{ border-color:var(--accent);background-color:#fff; box-shadow:0 0 0 3px rgba(208,57,35,.12)} .k-cont-chiaro .k-cont-form .wpcf7 select option{background:#fff;color:var(--ink)} /* la freccia delle tendine va ridisegnata scura: quella chiara sparirebbe */ .k-cont-chiaro .k-cont-form .wpcf7 select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131C2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} .k-home .elementor .k-cont-chiaro .k-cont-form .wpcf7 p{color:var(--muted)} .k-cont-chiaro .k-cont-form .wpcf7 a{color:var(--accent-dark)} .k-cont-chiaro .k-cont-form .wpcf7 input[type=checkbox]{accent-color:var(--accent)} /* il tasto Invia: bianco su chiaro sparirebbe, va il rosso di marca */ .k-home .k-cont-chiaro .k-cont-form .wpcf7 input[type=submit]{ background:var(--accent)!important;color:#fff!important} .k-home .k-cont-chiaro .k-cont-form .wpcf7 input[type=submit]:hover{ background:var(--accent-dark)!important} /* -------------------------------------------------------------------------- PAGINE SOLUZIONE (cloud, software su misura, assistente AI) -------------------------------------------------------------------------- */ .k-home .elementor .k-sol__intro{font-size:clamp(1.05rem,1.7vw,1.28rem);max-width:56ch; color:var(--ink)!important} .k-sol__base{border-left:3px solid var(--accent);padding:.15rem 0 .15rem 1.1rem; margin-top:1.6rem;max-width:58ch} .k-home .elementor .k-sol__base{font-size:15.5px;color:var(--muted)} .k-home .elementor .k-sol__base b{color:var(--ink)} .k-sol{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .k-sol__p{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:1.7rem;transition:transform .3s,box-shadow .3s,border-color .3s} .k-sol__p:hover{transform:translateY(-4px);border-color:var(--line-strong); box-shadow:0 22px 54px -30px rgba(19,28,46,.5)} .k-home .elementor .k-sol__p h2{font-size:1.18rem!important;margin:0 0 .5rem;line-height:1.2} .k-home .elementor .k-sol__p p{font-size:15px;margin:0} .k-sol__chi{list-style:none;margin:1.2rem 0 0;padding:0; display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .k-home .elementor .k-sol__chi li{position:relative;padding-left:1.6rem;font-size:15.5px; color:var(--muted)} .k-sol__chi li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px; border-radius:50%;background:var(--accent)} .k-sol-testa .k-h2 h1{max-width:20ch} /* -------------------------------------------------------------------------- MENU A TENDINA DEL FORM (vedi home.js) Il