nelle altre sezioni. */ a.feature-card:hover .card-title-custom, a.feature-card:hover .card-text-custom { color: var(--white); } /* L'icona SVG inline (.block-icon, arancio) diventa bianca sull'hover bordeaux, coerente con titolo e testo (card-valori → link all'approccio). */ a.feature-card:hover .block-icon { fill: var(--white) !important; } /* Stessa coerenza per le card-link "Soluzioni": .card-icon è un SVG colorato in arancio dal filtro; sull'hover bordeaux va reso bianco (brightness(0)→nero, invert(1)→bianco) come il titolo. */ a.feature-card:hover .card-icon { filter: brightness(0) invert(1); } /* Approccio (chi-siamo): card più piccole e più distanziate tra loro. Le colonne sono col-lg-5 con gutter g-5 (più spazio orizzontale e verticale); qui si riducono padding e dimensione del testo. */ .approccio-cards .feature-card { padding: 1.5rem; /* Bordo trasparente su tutti i lati: nessun accento arancio in alto (come le altre feature-card metalliche). Serve solo a far comparire un bordo arancione completo quando la card è il target di un link "valori" (.is-target, vedi sotto), senza spostare il layout. */ border: 0.2rem solid transparent; transition: transform 0.2s, box-shadow 0.2s, border-color 0.45s ease; } .approccio-cards .card-title-custom { font-size: var(--fs-lg); } .approccio-cards .feature-card p, .approccio-cards .feature-card ul { font-size: var(--fs-md); line-height: 1.6; margin-bottom: 0.6rem; color: #d4d4d4; } /* Liste del corpo: niente bullet di default (invisibili sul metallo); il testo resta centrato come il resto della card (.text-center sul container) e le parole in grassetto risaltano in bianco. */ .approccio-cards .feature-card ul { list-style: none; padding-left: 0; } .approccio-cards .feature-card strong { color: var(--white); } /* Card raggiunta dal link valori (classe .is-target gestita da chi-siamo.js): l'accento border-top diventa un bordo completo arancione. La classe viene rimossa al primo scroll dopo l'arrivo, e la transition la fa "spegnere". */ .approccio-cards .feature-card.is-target { border-color: var(--main); } .card-title-custom { font-size: var(--fs-xl); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 0.75rem; text-align: center; } .card-text-custom { color: var(--ink); font-size: var(--fs-base); line-height: 1.7; margin: 0; } /* Testo chiaro SOLO dentro le card metalliche (feature-card, ba-card): così gli stessi .card-title-custom/.card-text-custom usati su fondo bianco (es. la timeline di chi-siamo) restano scuri. */ .feature-card .card-title-custom, .ba-card .card-title-custom, .timeline-content .card-title-custom { color: var(--white); } .feature-card .card-text-custom, .ba-card .card-text-custom, .timeline-content .card-text-custom { color: #d4d4d4; } /* Icona SOPRA il titolo (riga in colonna), coerente con le card della home. */ .fc-title-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 0.75rem; } .fc-title-row .card-title-custom { margin-bottom: 0; } /* SVG colorata in --main (#ff6205): brightness(0) → nero, sepia+saturate → giallo (~58°), hue-rotate(325deg) → arancio (~23°) */ /* Icona SVG monocroma della card. Colorata con la mask + background-color: il colore è ESATTAMENTE var(--main) e segue la variabile (niente più filter-approssimazione). L'URL della SVG arriva per-elemento dalla custom property --card-icon (inline: style="--card-icon:url('…')"). */ .card-icon { width: 3.5rem; height: 3.5rem; flex-shrink: 0; display: inline-block; background-color: var(--main); -webkit-mask: var(--card-icon) center / contain no-repeat; mask: var(--card-icon) center / contain no-repeat; } /* Blocco 2 colonne */ .twocol-text h1, .twocol-text h2 { color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.31rem); font-weight: 700; line-height: 1.1; margin-bottom: 1.25rem; } .twocol-text h1 em, .twocol-text h2 em { font-style: normal; color: var(--accent-text); } /* Contesti scuri (incluso il blocco intro metallico): arancio pieno, che come testo grande su fondo scuro passa già (≥3:1). */ .section-dark .twocol-text em, .section-gradient-orange .twocol-text em, .intro-card .twocol-text em { color: var(--main); } .twocol-text p { color: var(--ink); line-height: 1.75; margin-bottom: 1rem; } .section-dark .twocol-text h1, .section-dark .twocol-text h2, .section-dark .twocol-text p { color: var(--white); } .twocol-img { width: 100%; height: 100%; min-height: 22.5rem; object-fit: cover; display: block; /* Coerenza con le feature card: angoli arrotondati + ombra di elevazione standard per il fondo chiaro. */ border-radius: 0.5rem; box-shadow: var(--shadow-lift); } .img-frame { position: relative; } /* ─── Blocco intro: card metallica immersiva ─── Stessa superficie metallica + rilievo neumorfico delle feature card, ma come blocco unico full-width. La card scura "galleggia" sulla sezione bianca, così l'alternanza dark/white/dark con le sezioni adiacenti resta intatta e il blocco guadagna massimo contrasto. */ .intro-card { position: relative; overflow: hidden; padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 3.5rem); border-radius: 0.5rem; background: var(--surface-metal); box-shadow: var(--shadow-metal); } /* Watermark brand: icona bianca a bassissima opacità, ancorata in basso a destra e sbordante, come filigrana incisa sul metallo. */ .intro-card-deco { position: absolute; right: -2.5rem; bottom: -2.5rem; width: clamp(12rem, 22vw, 18rem); opacity: 0.06; pointer-events: none; user-select: none; } .intro-card-content { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; text-align: center; } /* Override colori su fondo scuro (il blocco riusa .twocol-text). */ .intro-card .twocol-text h2, .intro-card-content h2 { color: var(--white); } .intro-card-content p { color: #d4d4d4; } .intro-card-content strong { color: var(--white); } /* ─── Feature Slider (home) ─── */ /* Desktop: frecce ai lati, dot sotto */ .feature-slider-wrapper { display: grid; grid-template-areas: "prev slider next" ". dots ."; grid-template-columns: auto 1fr auto; } /* Mobile: slider in cima, frecce+dot su una riga */ @media (max-width: 991.98px) { .feature-slider-wrapper { grid-template-areas: "slider slider slider" "prev dots next"; grid-template-columns: auto 1fr auto; } } .feature-slider-prev { grid-area: prev; align-self: center; } .feature-slider-next { grid-area: next; align-self: center; } .feature-slider { grid-area: slider; overflow: hidden; padding: 2rem 0 3rem; } .feature-slider-btn { background: none; border: none; cursor: pointer; /* Frecce = componente UI (serve 3:1 sullo sfondo): variante scurita sulle sezioni chiare; sulla sezione arancione l'override qui sotto le porta a bianco. */ color: var(--accent-text); padding: 0 0.5rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; z-index: 2; } .feature-slider-btn:hover { opacity: 0.65; } /* Sezione arancione scura: frecce bianche (l'arancio vi si confonderebbe). */ .section-gradient-orange .feature-slider-btn { color: var(--white); } .feature-slider-btn:focus-visible { outline: 2px solid var(--main); border-radius: 4px; } .feature-slider-btn svg { width: 1.75rem; height: 1.75rem; } .feature-slider-dots { grid-area: dots; display: flex; justify-content: center; align-items: center; gap: 0.55rem; padding: 0.25rem 0 1.25rem; } @media (max-width: 991.98px) { .feature-slider-dots { padding: 0.75rem 0; } } .feature-slider-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ccc; border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; } .feature-slider-dot.is-active { background: var(--main); transform: scale(1.4); } .feature-slider-track { display: flex; will-change: transform; } .feature-slider-item { flex: 0 0 auto; padding: 0 0.75rem; box-sizing: border-box; transition: transform 0.4s ease, opacity 0.4s ease; } .feature-slider-item.is-center { transform: scale(1.07); z-index: 1; } .feature-slider-item:not(.is-center) { transform: scale(0.92); opacity: 0.6; } @media (max-width: 991.98px) { .feature-slider-item.is-center, .feature-slider-item:not(.is-center) { transform: none; opacity: 1; } } /* Reduced-motion: lo slider resta navigabile (vedi home.js) ma senza la transizione di scala/opacità delle card, che è movimento. */ @media (prefers-reduced-motion: reduce) { .feature-slider-item { transition: none; } } /* Slider "Soluzioni": stile e dimensioni delle card-immagine sono agganciati alla classe .feature-slider-cover (sullo slider stesso), NON allo sfondo della sezione. Così la sezione può avere qualunque background (es. .section-gradient-orange) senza alterare card, altezza o titolo. */ .feature-slider-cover { /* Rapporto altezza/larghezza delle card di questo slider. Lo legge il JS (main.js) con getComputedStyle(slider) per dare alle card un'altezza proporzionata alla larghezza, dato che non hanno contenuto da cui derivarla. 0.667 = 3:2 (come le immagini); 0.75 = 4:3, 1 = quadrata. */ --fs-ratio: 0.667; } /* ─── Card "cover": sfondo IMMAGINE, non colore ─── Ogni card riceve la propria immagine via la variabile --card-img impostata inline nell'HTML (così ogni slide ha un'immagine diversa). Sopra l'immagine un velo scuro mantiene leggibile il titolo; sotto, --dark fa da fallback se l'immagine non carica. La larghezza la gestisce il JS (3 card in vista); l'altezza la imposta il JS da --fs-ratio (vedi sopra). */ .feature-slider-cover .feature-card { justify-content: center; /* titolo centrato verticalmente nella card */ background: linear-gradient(rgba(5, 4, 2, 0.25), rgba(5, 4, 2, 0.25)), var(--card-img, none) center / cover no-repeat, var(--dark); background-blend-mode: normal; } /* Titolo delle card "cover": bianco e più grande, sopra l'immagine. */ .feature-slider-cover .feature-card .card-title-custom { color: var(--white); font-size: var(--fs-2xl); } /* ─── Sfondo decorativo icona ─── */ /* overflow: clip (non hidden): ritaglia comunque l'icona decorativa ma, a differenza di hidden, non crea un contenitore di scroll — altrimenti il position: sticky di .cs-pin (scroll hijacking casi studio) non si aggancerebbe mai al viewport. */ .icon-bg-wrapper { position: relative; overflow: hidden; /* fallback per browser senza clip */ overflow: clip; } .icon-bg-deco { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto; /* Icona_white.svg tinta in grigio medio (~#999): un tono equidistante da --dark e da --white, così la filigrana resta visibile su entrambe le sezioni scure E su quella bianca centrale (blend normale). */ filter: brightness(0.6); opacity: 0.1; pointer-events: none; user-select: none; z-index: 0; } /* ─── Sezione contatti ─── */ /* Alternanza scura del blocco decorativo: la sezione contatti (unica .section-dark dentro .icon-bg-wrapper) passa a --dark. I bottoni .contact-item restano bianchi (regola .section-dark .contact-item più sotto); va invece schiarito il testo editoriale a fianco. */ .icon-bg-wrapper .section-dark { background: var(--dark); } .icon-bg-wrapper .section-dark .twocol-text h2 { color: var(--white); } .icon-bg-wrapper .section-dark .twocol-text p { color: #d4d4d4; } .contact-block { display: flex; flex-direction: column; gap: 1rem; padding: 0; } /* "Modal" contatto con la stessa estetica metallizzata delle card: gradiente diagonale + ombra neumorfica + angoli 0.5rem. */ .contact-item { display: flex; flex-direction: row; gap: 1.5rem; min-height: 7rem; width: 100%; padding: 1.5rem 2.5rem; border: none; border-radius: 0.5rem; text-align: left; cursor: pointer; background: var(--surface-metal); /*box-shadow: var(--shadow-metal);*/ transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease; } /* Variante "consulenza": stessa shell di .contact-item (rilievo, ombre, transizioni ereditati), cambia SOLO il colore → gradiente metallico a base --main (riflesso arancio in alto-sx) che scende verso --dark in basso-dx. */ .contact-item-consulenza { background: var(--main); } /* Hover come feature card / card progetti: il pulsante si solleva e l'ombra neumorfica si intensifica. */ .contact-item:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-metal-hover); } .contact-icon { flex-shrink: 0; width: 3.5rem; height: 3.5rem; color: var(--main); transition: color 0.25s ease; } .contact-item-consulenza .contact-icon { color: var(--white); } /* Variante compatta (CTA in fondo alle pagine progetti): icona e testo ridotti. Home e contatti usano le dimensioni piene dei contact-item. */ .contact-item--compact .contact-icon { width: 2.5rem; height: 2.5rem; } .contact-item--compact .contact-label { font-size: var(--fs-md); } .contact-icon svg { width: 100%; height: 100%; } .contact-content { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; } .contact-label { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); transition: color 0.25s ease; } @media (max-width: 991.98px) { .contact-item { padding-left: 1.25rem; } } /* < 768px: i "modal" contatto si compattano — icona e testo scendono alle dimensioni della variante --compact e il padding torna simmetrico, così le etichette lunghe ("Richieste amministrative") non dominano la card. */ @media (max-width: 767.98px) { .contact-item { gap: 1rem; min-height: 5.5rem; padding: 1.25rem 1.5rem; } .contact-icon { width: 2.5rem; height: 2.5rem; } .contact-label { font-size: var(--fs-md); } } /* ─── FAQ — accordion Bootstrap: card metalliche (uniforme in tutto il sito) ─── Ogni item è una card metallica (gradiente diagonale + rilievo neumorfico + angoli 0.5rem), come le card della home. Header trasparente, titolo bianco, accento arancio sull'item aperto, chevron schiarito per restare visibile sul metallo, corpo testo schiarito. Tutte le FAQ del sito condividono la classe .faq-accordion, quindi lo stile si propaga ovunque. */ .faq-accordion .accordion-item { border: none; border-radius: 0.5rem; margin-bottom: 1rem; overflow: hidden; background: var(--surface-metal); box-shadow: var(--shadow-metal); } .section-gradient-orange .faq-accordion .accordion-item { border: 1px solid var(--white); } /* Tema scuro: ogni sezione è scura, quindi il bordo chiaro di separazione (in chiaro riservato alla sola sezione arancione scura) serve ovunque, per uniformità tra le FAQ del sito. */ html[data-theme="dark"] .faq-accordion .accordion-item { border: 1px solid var(--white); } .faq-accordion .accordion-button { border-radius: 0.5rem; font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.04em; background: transparent; color: var(--white); } .faq-accordion .accordion-button:not(.collapsed) { background: transparent; color: var(--main); box-shadow: none; } .faq-accordion .accordion-button:focus { border-color: var(--main); box-shadow: 0 0 0 0.15rem rgba(255, 98, 5, 0.25); } /* Chevron Bootstrap reso bianco (di serie è scuro, invisibile sul metallo). */ .faq-accordion .accordion-button::after { filter: brightness(0) invert(1); } .faq-accordion .accordion-body { font-size: var(--fs-base); line-height: 1.75; color: #d4d4d4; } .faq-accordion .accordion-body strong { color: var(--white); } /* ─── Modal contatti ─── */ .modal-kw { /* Angoli arrotondati come card e pulsanti (0.5rem). inner-border-radius arrotonda anche header e corpo interni, coerenti col bordo esterno. */ --bs-modal-border-radius: 0.5rem; --bs-modal-inner-border-radius: 0.5rem; } .modal-kw .modal-content { border: none; /* Stessa estetica metallizzata delle card: gradiente diagonale + rim neumorfico, più un'ombra di stacco per il popup. */ background: var(--surface-metal); box-shadow: inset 0 2px 6px rgba(145, 145, 145, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1rem 3rem rgba(0, 0, 0, 0.5); } .modal-header-kw { background: transparent; padding: 1.25rem 1.5rem 0; border-bottom: none; } .modal-title-kw { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: 0.04em; color: var(--main); } .modal-body-kw { padding: 2rem 1.5rem; background: transparent; } .modal-body-label { font-size: var(--fs-base); font-weight: 600; letter-spacing: 0.14em; /* Testo non-grande su metallo scuro: arancio schiarito (≥4.5:1). */ color: var(--main-bright); margin-bottom: 0.5rem; } .modal-email-link { font-size: var(--fs-xl); font-weight: 600; color: var(--white); text-decoration: none; display: block; transition: color 0.2s; } .modal-email-link:hover { /* Arancio schiarito: ≥4.5:1 sul metallo a qualsiasi dimensione. */ color: var(--main-bright); } /* < 768px: tipografia del popup ridotta di un gradino della scala (il titolo a 27px andava quasi sempre a capo). Il titolo resta 700 e ≥18.66px, quindi "testo grande" WCAG: l'arancio --main sul metallo (3.43:1) è ancora ok. */ @media (max-width: 767.98px) { .modal-title-kw { font-size: var(--fs-xl); } .modal-body-kw { padding: 1.5rem 1.25rem; } .modal-email-link { font-size: var(--fs-lg); } } /* ─── 7. FOOTER ─── */ footer { background: var(--dark); border-top: 0.2rem solid var(--main); color: rgba(255, 255, 255, 0.65); padding: 3.5rem 0 1.5rem; } .footer-brand { font-size: var(--fs-xl); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; } .footer-brand img { max-width: 15rem; } .footer-brand span { color: var(--main); } .footer-heading { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; } .footer-links { margin: 0; line-height: 2; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: var(--fs-sm); transition: color 0.2s; } .footer-links a:hover { color: var(--main-bright); } /* Link "Assistenza": differenziato dagli altri con l'arancio schiarito (--main-bright, 5.1:1 su --dark: l'arancio pieno si fermava a 3.43:1). */ .footer-links a.footer-link-accent { color: var(--main-bright); } .footer-bottom { border-top: 0.0625rem solid rgba(255, 255, 255, 0.08); margin-top: 2.5rem; padding-top: 1.25rem; font-size: var(--fs-xs); } .footer-icon { fill: var(--main) !important; width: 1.5rem; height: 1.5rem; margin-right: 0.5em; } .footer-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: var(--fs-xs); } .footer-bottom a:hover { color: var(--main-bright); } .footer-social { display: flex; align-items: center; gap: 0.6rem; color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: var(--fs-sm); transition: color 0.2s; } .footer-social:hover { color: var(--main-bright); } .footer-social-icon { fill: currentColor; width: 1.75rem; height: 1.75rem; flex-shrink: 0; } /* < 768px: footer compatto. Le colonne viaggiano a coppie (col-6 nel markup) e qui si stringe il ritmo verticale: logo ridotto, interlinea e margini dei link dimezzati, padding contenuto. Le icone social (in riga orizzontale, senza label) crescono un po' come bersaglio touch. */ @media (max-width: 767.98px) { footer { padding: 2.25rem 0 1.25rem; } .footer-brand img { max-width: 9rem; } .footer-heading { margin-bottom: 0.6rem; } .footer-links { line-height: 1.6; } .footer-links li { margin-bottom: 0.25rem; } .footer-social-icon { width: 2rem; height: 2rem; } .footer-bottom { margin-top: 1.5rem; justify-content: center; text-align: center; } } /* ─── 8. FORM CONTATTI ─── */ /* (see section 9 for Chi Siamo page components) */ /* Card metallica del form (pagina contatti): stessa superficie e rilievo delle altre card del sito. Il form sta su .section-gradient-orange (scuro), quindi label e note passano ai toni chiari. */ .form-card { background: var(--surface-metal); box-shadow: var(--shadow-metal); border-radius: 0.5rem; padding: 2rem 1.75rem; } .form-label-kw { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; color: var(--white); margin-bottom: 0.4rem; } .form-input-kw { padding: 0.75rem 1rem; border: 1px solid var(--field-border); /* Angoli coerenti con card e bottoni del sito. */ border-radius: 0.5rem; color: var(--ink); /* Esplicito (prima era il bianco di default): segue il tema e prevale sul background che Bootstrap assegna a .form-control via data-bs-theme. */ background-color: var(--field-bg); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .form-input-kw:focus { /* Token: sul campo scuro del tema dark il bordeaux pieno non si vedrebbe. */ border-color: var(--cta-text); box-shadow: 0 0 0 3px rgba(140, 34, 73, 0.15); } .form-input-kw.input-errore { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); } .altcha-label { color: var(--white); } .req { /* L'asterisco vive nelle label della card metallica scura: arancio schiarito (≥4.5:1 sul metallo; il bordeaux vi sparirebbe). */ color: var(--main-bright); font-weight: 700; } .req-note { font-size: var(--fs-xs); color: #d4d4d4; margin-bottom: 1.5rem; } .alert-kw { padding: 1rem 1.25rem; margin-bottom: 1.75rem; font-size: var(--fs-md); font-weight: 500; border-left: 4px solid; } .alert-kw--success { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); } .alert-kw--error { background: var(--ko-bg); border-color: var(--ko-border); color: var(--ko-ink); } /* ─── 9. CHI SIAMO ─── */ /* ── Team: feature-card in coverflow 3D ── */ /* La card team è una feature-card con contenuto centrato. */ .feature-team-card { align-items: center; text-align: center; } /* Immagine team: avatar circolare. */ .feature-team { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--dark); display: block; margin: 0 auto 1.25rem; } .feature-team-name { font-size: var(--fs-xl); font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 0.25rem; } .feature-team-role { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; /* Testo piccolo su metallo scuro: arancio schiarito (≥4.5:1). */ color: var(--main-bright); margin-bottom: 0; } /* Coverflow 3D: le card sono assolute e impilate al centro dello stage; il transform di ciascuna (posizione/rotazione/scala in 3D) è calcolato in chi-siamo.js in base alla distanza circolare dall'indice attivo. */ .team-coverflow { position: relative; max-width: 60rem; margin: 0 auto; } .team-cf-frame { position: relative; } .team-cf-stage { position: relative; height: 22rem; /* aggiornata da JS in base alla card */ perspective: 1200px; /* clip orizzontale (niente scroll di pagina dalle card laterali); verticale visibile, così le ombre non vengono tagliate. */ overflow-x: clip; overflow-y: visible; } .team-cf-card { position: absolute; top: 50%; left: 50%; width: 16rem; transform: translate(-50%, -50%); /* sovrascritto da JS */ transform-origin: center center; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease; will-change: transform, opacity; cursor: pointer; } .team-cf-card.is-active { cursor: default; } /* Ombra permanente sulla card centrale per darle risalto. */ .team-cf-card.is-active .feature-card { box-shadow: var(--shadow-lift); } /* Niente hover-lift nel coverflow: il transform è gestito dal JS. */ .team-cf-card .feature-card:hover { transform: none; } /* Frecce sovrapposte ai lati dello stage. */ .team-cf-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 200; width: 2.75rem; height: 2.75rem; padding: 0; border: none; background: none; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.2s; } .team-cf-btn:hover { opacity: 0.85; } .team-cf-btn:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; } .team-cf-btn svg { width: 1.4rem; height: 1.4rem; } .team-cf-prev { left: 0; } .team-cf-next { right: 0; } .team-cf-dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: 1.5rem; } .team-cf-dot { width: 0.6rem; height: 0.6rem; padding: 0; border: none; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.3s, transform 0.3s; } .team-cf-dot.is-active { background: var(--main); transform: scale(1.4); } @media (max-width: 767.98px) { .team-cf-card { width: 13rem; } .team-cf-stage { height: 20rem; } } @media (prefers-reduced-motion: reduce) { .team-cf-card { transition: none; } } /* ── Numero/counter grande (es. "anni di attività" nell'hero counter di index) ── */ .stat-number { font-size: clamp(2.67rem, 6vw, 4rem); font-weight: 700; /* Su sezione chiara: variante scurita (testo grande, ≥3:1). */ color: var(--accent-text); line-height: 1; margin-bottom: 0.4rem; } /* ── Milestone year label — storia section ── */ .milestone-year { font-size: var(--fs-xl); font-weight: 700; color: var(--main); margin-bottom: 0.35rem; display: block; } /* ── Timeline verticale a zig-zag — storia section ── Le tappe si alternano sui due lati di una spina centrale. Aggiungere/togliere .timeline-item è sufficiente: il lato (sinistra/destra) e i marker si calcolano da soli via :nth-child. */ .timeline { position: relative; max-width: 60rem; margin: 0 auto; } /* spina centrale — binario tenue di sfondo */ .timeline::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 50%; transform: translateX(-50%); width: 0.2rem; background: var(--track); } /* riempimento progressivo della spina (cresce con lo scroll) altezza piena come fallback no-JS; con .tl-anim la guida il JS */ .timeline::after { content: ""; position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%); width: 0.2rem; height: 100%; max-height: calc(100% - 1rem); background: linear-gradient(180deg, var(--main), var(--cta)); } .timeline.tl-anim::after { height: var(--tl-progress, 0%); transition: height 0.15s linear; } .timeline-item { position: relative; width: 50%; padding: 0 2.75rem 2.5rem; } /* dispari a sinistra, pari a destra */ .timeline-item:nth-child(odd) { left: 0; text-align: right; } .timeline-item:nth-child(even) { left: 50%; text-align: left; } .timeline-content { position: relative; background: var(--surface-metal); border: none; border-radius: 0.5rem; padding: 1.75rem 1.5rem; box-shadow: var(--shadow-metal); transition: transform 0.2s, box-shadow 0.2s; } /* hover-lift: vedi selettore condiviso .feature-card/.timeline-content */ /* reveal/hide reversibile della card (solo con .tl-anim). Uso translate/scale (proprietà indipendenti) così l'entrata non confligge con il transform usato dall'hover. */ .timeline.tl-anim .timeline-content { opacity: 0; scale: 0.98; transition: opacity 0.6s ease, translate 0.6s ease, scale 0.6s ease, transform 0.2s, box-shadow 0.2s; } /* entrata dal lato corrispondente: sinistra le dispari, destra le pari */ .timeline.tl-anim .timeline-item:nth-child(odd) .timeline-content { translate: -5rem 0; } .timeline.tl-anim .timeline-item:nth-child(even) .timeline-content { translate: 5rem 0; } .timeline.tl-anim .timeline-item.is-visible .timeline-content { opacity: 1; translate: 0; scale: 1; } /* anno + titolo sulla stessa riga */ .timeline-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; } .timeline-head .milestone-year, .timeline-head .card-title-custom { margin: 0; } /* card di destra: la spina è a destra, quindi inverto l'ordine così l'anno resta sempre accanto alla barra della timeline */ .timeline-item:nth-child(odd) .timeline-head { flex-direction: row-reverse; justify-content: flex-start; } /* freccetta che punta verso la spina */ .timeline-content::after { content: ""; position: absolute; top: 1.4rem; border: 0.6rem solid transparent; } .timeline-item:nth-child(odd) .timeline-content::after { right: -1.2rem; border-left-color: #222019; } .timeline-item:nth-child(even) .timeline-content::after { left: -1.2rem; border-right-color: #222019; } /* pallino sulla spina */ .timeline-marker { position: absolute; top: 0.4rem; width: 1.1rem; height: 1.1rem; background: var(--main); border: 0.2rem solid var(--dark); border-radius: 50%; box-shadow: 0 0 0 0.2rem var(--main); z-index: 1; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* stato iniziale + pop quando la card entra in viewport */ .timeline.tl-anim .timeline-marker { transform: scale(0); } .timeline.tl-anim .timeline-item.is-visible .timeline-marker { transform: scale(1); } .timeline-item:nth-child(odd) .timeline-marker { right: -0.55rem; } .timeline-item:nth-child(even) .timeline-marker { left: -0.55rem; } /* mobile: colonna unica con spina a sinistra */ @media (max-width: 768px) { .timeline::before, .timeline::after { left: 0.55rem; } .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 2rem 2.5rem; } .timeline-item:nth-child(odd) .timeline-marker, .timeline-item:nth-child(even) .timeline-marker { left: 0; right: auto; } .timeline-item:nth-child(odd) .timeline-content::after, .timeline-item:nth-child(even) .timeline-content::after { left: -1.2rem; right: auto; border-left-color: transparent; border-right-color: #222019; } .timeline-item:nth-child(odd) .timeline-head { flex-direction: row; justify-content: flex-start; } /* colonna unica: tutte entrano dallo stesso lato (destra) */ .timeline.tl-anim .timeline-item:nth-child(odd) .timeline-content, .timeline.tl-anim .timeline-item:nth-child(even) .timeline-content { translate: 2.5rem 0; } .timeline.tl-anim .timeline-item.is-visible .timeline-content { translate: 0; } } /* ─── Casi studio — layout sfalsato ─── */ /* .section-casi-studio è SOLO l'hook funzionale dello scroll hijacking (lo seleziona home.js e ci aggancia .cs-hijack-ready): nessuno sfondo né colore titolo qui, così la sezione può ricevere qualunque classe di sfondo (es. .section-dark, .section-gradient-grey) senza alterare gli effetti di scroll. Lo sfondo e il colore del titolo seguono la classe di sfondo. */ .section-casi-studio { padding: 5rem 0; } .cs-list { display: flex; flex-direction: column; gap: 2.5rem; } .cs-row { display: block; width: 55%; padding: 2.5rem 2rem; /* Stessa "shell" delle feature card (aree di expertise): gradiente metallico diagonale, ombra neumorfica, angoli arrotondati, niente accento arancio. */ border: none; background: var(--surface-metal); box-shadow: var(--shadow-metal); border-radius: 0.5rem; text-decoration: none; transition: box-shadow 0.2s ease; } .cs-row:nth-child(even) { margin-left: 45%; } .cs-row:hover { /* Hover come le feature card: rilievo accentuato. Niente translateY qui, perché in modalità scroll-hijacking il transform è gestito dal JS. */ box-shadow: var(--shadow-metal-hover); } /* Come le feature card: icona SOPRA il titolo, in colonna e centrata. */ .cs-heading-row { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-bottom: 0.75rem; } /* Icona ingrandita come le feature card; arancio (--main) sempre, anche su hover. */ .cs-icon { width: 3.5rem; height: 3.5rem; fill: var(--main); flex-shrink: 0; } .cs-heading { font-size: var(--fs-2xl); font-weight: 700; color: var(--white); margin: 0 0 0.35rem; } .cs-text { font-size: var(--fs-base); color: var(--white); line-height: 1.65; margin: 0; transition: color 0.2s ease; } .cs-row:hover .cs-text { color: var(--white); } .cs-text-link { color: var(--main); /* Bold: a 20px il testo diventa "grande" per WCAG e l'arancio sul metallo (≥3.05:1 anche nel punto più chiaro) rientra nel minimo richiesto. */ font-weight: 700; font-size: var(--fs-lg); margin-top: 0.5rem; } .cs-row:hover .cs-text-link { font-size: var(--fs-2xl); color: var(--main); } @media (max-width: 768px) { .cs-row { width: 100%; margin-left: 0 !important; } } @media (max-width: 576px) { .cs-row { padding: 1.75rem 1.25rem; } /* Ridotta rispetto ai 3.5rem desktop, ma non minuscola: a 1.4rem l'icona spariva accanto al titolo della card (--fs-2xl). */ .cs-icon { width: 2.25rem; height: 2.25rem; } } /* ─── 10. CASE STUDY — Progetto Medicale ─── */ /* Hero */ /* Hero "editoriale" dei casi studio: grammatica compatta ma con le stesse proporzioni (60vh) e la stessa tipografia degli hero immersivi del sito. */ .case-hero { background: var(--dark); padding: 5rem 0 3.5rem; border-bottom: 0.2rem solid var(--main); position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; } .case-hero .container { position: relative; } .case-hero .section-intro { color: rgba(255, 255, 255, 0.65); } .case-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; /* Testo piccolo su fondo scuro: arancio schiarito (≥4.5:1). */ color: var(--main-bright); display: block; margin-bottom: 0.75rem; } .case-title { /* Stessa scala fluida e stesso effetto 3D di .hero-title (sezione 4): il titolo dei casi studio parla la lingua degli altri hero. */ font-size: clamp(2.67rem, 10vw, 4.44rem); font-weight: 700; color: var(--white); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 1.25rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32), 0 2px 0 rgba(0, 0, 0, 0.30), 0 3px 0 rgba(0, 0, 0, 0.28), 0 4px 0 rgba(0, 0, 0, 0.26), 0 5px 0 rgba(0, 0, 0, 0.24), 0 7px 10px rgba(0, 0, 0, 0.55); } .case-title span { color: var(--main); } .case-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; padding: 0.35rem 0.9rem; border: 0.0625rem solid rgba(255, 255, 255, 0.3); border-radius: 2rem; color: var(--white); margin: 0 0.4rem 0.5rem 0; } .case-tag--sector { border-color: var(--main); /* Testo piccolo su fondo scuro: arancio schiarito (≥4.5:1); il bordo resta --main (per i bordi basta 3:1). */ color: var(--main-bright); } .hero-img-wrap { background-size: cover; background-position: center top; min-height: 360px; height: 100%; border-radius: 0.5rem; } /* Sidebar */ .case-sidebar { position: sticky; top: 5.5rem; } .case-nav { list-style: none; padding: 0; margin: 0; border-left: 0.1875rem solid var(--ink); } .case-nav a { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; /* Grigio testo (4.89:1 su chiaro): var(--gray) si fermava a 2.78:1. */ color: var(--gray-text); padding: 0.6rem 1rem; border-left: 0.1875rem solid transparent; margin-left: -0.1875rem; text-decoration: none; transition: color 0.2s, border-color 0.2s; } .case-nav a:hover, .case-nav a:focus { /* Su fondo chiaro: variante scurita dell'arancio. */ color: var(--accent-text); border-left-color: var(--accent-text); } .sidebar-meta { margin-top: 2.5rem; } .sidebar-meta dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; /* Grigio testo leggibile su fondo chiaro (4.89:1). */ color: var(--gray-text); margin-top: 1rem; } .sidebar-meta dd { font-size: var(--fs-sm); color: var(--ink); margin: 0; font-weight: 500; } /* Content sections */ /* Bullet con SVG finger-right (come .icon-list / .approach-step-body), non più il disc classico: coerente col resto del sito. */ .case-section ul { list-style: none; padding-left: 0; font-size: var(--fs-md); line-height: 1.9; color: var(--ink); } .case-section ul li { position: relative; padding-left: 1.75rem; } .case-section ul li::before { content: ''; display: inline-block; position: absolute; left: 0; top: 0.85em; transform: translateY(-50%); width: 1rem; height: 1rem; background-color: var(--main); mask-image: url('../img/karma/svg/finger-right.svg'); mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: url('../img/karma/svg/finger-right.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .case-section { padding: 2rem 0; } .case-section-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; /* Testo grande su fondo chiaro: variante scurita (≥3:1). */ color: var(--accent-text); display: inline-block; margin-bottom: 1.5rem; } /* Approach numbered list */ .approach-list { list-style: none; padding: 0; margin: 1.5rem 0 0; } .approach-list>li { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.75rem; } .approach-step-num { flex-shrink: 0; width: 2.25rem; height: 2.25rem; /* Sfondo scurito + 20px bold ("testo grande"): il numero bianco raggiunge il 3:1 richiesto (su --main puro era 2.75:1). */ background: var(--main-deep); color: var(--white); border-radius: 0.5rem; font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; justify-content: center; } .approach-step-body h3 { font-size: var(--fs-2xl); font-weight: 700; color: var(--ink); margin-bottom: 0.35rem; } .approach-step-body p { font-size: var(--fs-base); color: var(--ink); line-height: 1.75; margin: 0 0 0.5rem; } .approach-step-body ul { list-style: none; padding-left: 0; } .approach-step-body ul li { padding-left: 1.75rem; position: relative; } .approach-step-body ul li::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; background-color: var(--main); mask-image: url('../img/karma/svg/finger-right.svg'); mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: url('../img/karma/svg/finger-right.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } /* Lista con marker SVG riutilizzabile (stesso effetto finger-right di .approach-step-body). Inline-block + text-align left così la lista resta allineata a sinistra anche dentro un blocco centrato. */ .icon-list { list-style: none; padding-left: 0; display: inline-block; text-align: left; } .icon-list li { padding-left: 1.75rem; position: relative; } .icon-list li::before { content: ''; display: inline-block; position: absolute; left: 0; top: 0.7em; transform: translateY(-50%); width: 1rem; height: 1rem; background-color: var(--main); mask-image: url('../img/karma/svg/finger-right.svg'); mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: url('../img/karma/svg/finger-right.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } /* KPI cards */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; margin-top: 2rem; } .kpi-card { border: none; border-radius: 0.5rem; padding: 1.5rem 1rem; text-align: center; background: var(--surface-metal); box-shadow: var(--shadow-metal); transition: box-shadow 0.25s ease, transform 0.25s ease; } .kpi-card:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-metal-hover); } .kpi-value { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 700; color: var(--main); line-height: 1; display: block; } .kpi-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; color: #d4d4d4; display: block; margin-top: 0.5rem; line-height: 1.5; } /* Quote highlight — card arrotondata con barra accento arancione e tinta tenue: stessa grammatica del resto del sito (angoli 0.5rem, accento --main, ombra morbida) al posto del vecchio bordo netto a tutta altezza. */ .case-quote { position: relative; border-radius: 0.5rem; /* colore sul contenitore: lo ereditano p, li, strong e blockquote, così il testo resta bianco anche nelle pagine che non usano

. */ color: var(--white); /* Stessa superficie metallica scura + rilievo neumorfico delle altre card (feature-card / timeline-content), per piena coerenza col resto del sito. */ background: var(--surface-metal); padding: 1.5rem 1.75rem 1.5rem 2.25rem; margin-top: 2rem; box-shadow: var(--shadow-metal); } /* barra accento arrotondata in --main (arancio) sul fondo scuro */ .case-quote::before { content: ""; position: absolute; left: 0.85rem; top: 1.25rem; bottom: 1.25rem; width: 0.28rem; border-radius: 1rem; background: var(--main); } .case-quote blockquote { font-size: var(--fs-md); font-style: italic; color: var(--white); line-height: 1.75; margin: 0 0 0.75rem; } /* virgoletta decorativa in linea col testo, coerente con l'accento arancio */ .case-quote blockquote::before { content: "\201C"; display: inline-block; font-size: 2rem; line-height: 0; vertical-align: -0.35em; margin-right: 0.2rem; color: var(--main); } .case-quote cite { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--white); font-style: normal; } /* Related projects */ .related-projects { background: var(--dark); padding: 4.5rem 0; } .related-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; /* colore governato da .section-gradient-orange h2 (bianco): niente override locale, che sarebbe comunque sovrascritto. */ margin-bottom: 2.5rem; } .related-title span { color: var(--main); } .project-card { position: relative; overflow: hidden; background: var(--surface-metal); border: none; border-radius: 0.5rem; box-shadow: var(--shadow-metal); padding: 1.75rem 1.5rem; height: 100%; text-decoration: none; /* Colonna flex: con il min-height del titolo e il margin-top:auto del link, settore/titolo/testo/link risultano allineati tra le card affiancate anche con testi di lunghezza diversa. */ display: flex; flex-direction: column; color: inherit; transition: box-shadow 0.25s ease, transform 0.25s ease; } .project-card:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-metal-hover); color: inherit; } .project-card__sector { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; /* Testo piccolo su metallo scuro: arancio schiarito (≥4.5:1). */ color: var(--main-bright); display: block; margin-bottom: 0.6rem; } .project-card__title { font-size: var(--fs-xl); font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 0.75rem; /* Spazio riservato per due righe: i paragrafi delle card affiancate partono alla stessa altezza anche se un titolo sta su una riga sola. */ line-height: 1.3; min-height: 2.6em; } .project-card__text { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.6); line-height: 1.75; margin-bottom: 1.25rem; } .project-card__link { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; /* Testo piccolo su metallo scuro: arancio schiarito (≥4.5:1). */ color: var(--main-bright); /* Ancorato al fondo della card (colonna flex): i link delle card affiancate restano sulla stessa riga. */ margin-top: auto; } /* Responsive */ @media (max-width: 991px) { .case-sidebar { position: static; margin-bottom: 2rem; } .case-nav { border-left: none; display: flex; flex-wrap: wrap; gap: 0.4rem; } .case-nav a { border: 0.0625rem solid var(--ink); border-left: 0.0625rem solid var(--ink); padding: 0.4rem 0.85rem; margin-left: 0; } .case-nav a:hover { border-color: var(--accent-text); background: color-mix(in srgb, var(--main) 5%, transparent); } .hero-img-wrap { min-height: 220px; border-left: none; border-top: 0.25rem solid var(--main); } } /* ─── 11. FEATURE LIST ─── */ /* Lista editoriale (feature-list) su sezione bianca: stessa shell metallica delle altre card (gradiente + rilievo neumorfico, ereditati da .cs-row). Niente icona/link → il testo occupa l'intera card; le card non sono link, quindi l'hover non cambia nulla. */ .feature-list h3 { padding-bottom: 1em; } /* Le card non sono link: annulla l'intensificazione dell'ombra ereditata da .cs-row:hover, riportando il rilievo allo stato di riposo. */ .feature-list .cs-row:hover { box-shadow: var(--shadow-metal); } /* Reveal allo scroll delle liste .cs-row (Blocco 3 di prodotti/servizi .feature-list): le card entrano convergendo verso il centro scrollando verso il basso ed escono di nuovo verso il proprio lato scrollando verso l'alto (effetto direzionale gestito in JS via toggle di .is-visible). La disposizione a zig-zag è data da .cs-row width:55% + :nth-child(even) margin-left:45%: - card a sinistra (dispari) → entrano da destra (--reveal-x +); - card a destra (pari) → entrano da sinistra (--reveal-x −). Lo scostamento + lo scale rendono l'entrata ben percepibile. Progressive enhancement: lo stato nascosto vale solo quando il JS ha aggiunto .reveal-ready, così senza JS le card restano visibili. Rispetta prefers-reduced-motion (nessuna animazione se richiesto). NB: i casi studio della home (.section-casi-studio) non usano più questo reveal ma lo scroll hijacking qui sotto. */ @media (prefers-reduced-motion: no-preference) { .feature-list.reveal-ready .cs-row { --reveal-x: 120px; opacity: 0; transform: translateX(var(--reveal-x)) scale(0.94); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease; will-change: opacity, transform; } .feature-list.reveal-ready .cs-row:nth-child(even) { --reveal-x: -120px; } .feature-list.reveal-ready .cs-row.is-visible { opacity: 1; transform: translateX(0) scale(1); } } /* ─── Casi studio home — scroll hijacking ─── Attivo solo quando home.js aggiunge .cs-hijack-ready (desktop ≥992px, senza prefers-reduced-motion): la sezione diventa alta un viewport per card (--cs-steps impostata dal JS), .cs-pin resta agganciato allo schermo (sticky) e lo scroll fa avanzare le card una alla volta. Le card sono impilate nella stessa cella di griglia e il JS assegna is-active / is-past / is-future in base al progresso dello scroll: - future → in attesa fuori dal proprio lato (zig-zag come il reveal); - active → in posizione, unica cliccabile; - past → escono verso l'alto. Senza JS / su mobile nessuna di queste regole si applica e la sezione resta la lista statica di sempre. */ .section-casi-studio.cs-hijack-ready { height: calc(var(--cs-steps, 4) * 100vh); padding: 0; } .cs-hijack-ready .cs-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--navbar-h, 96px); overflow: hidden; } /* card impilate: la lista è alta quanto la card più alta */ .cs-hijack-ready .cs-list { display: grid; } .cs-hijack-ready .cs-row { grid-area: 1 / 1; --cs-x: 120px; opacity: 0; transform: translateX(var(--cs-x)) scale(0.94); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease; will-change: opacity, transform; pointer-events: none; } .cs-hijack-ready .cs-row:nth-child(even) { --cs-x: -120px; } .cs-hijack-ready .cs-row.is-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } .cs-hijack-ready .cs-row.is-past { transform: translateY(-5rem) scale(0.94); } /* Indicatori di avanzamento (creati dal JS solo in modalità hijack) */ .cs-progress { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.6rem; z-index: 2; } .cs-progress span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--track-strong); transition: background 0.3s ease, transform 0.3s ease; } .cs-progress span.is-active { background: var(--main); transform: scale(1.35); } /* ── Blocco "Prima / Dopo" ── Mobile-first: card impilate, leggibili, senza sovrapposizioni. Da lg (≥992px): affiancate, sfalsate in verticale e parzialmente sovrapposte; la card puntata (hover/focus) passa in primo piano. Su mobile, quando il JS abilita .ba-scroll-ready: le due card condividono lo stesso slot e si scambiano in blur-dissolve legato allo scroll (la "Prima" sfuma sfocandosi, la "Dopo" entra a fuoco). "Prima" = accenti grigi (problema), "Dopo" = arancione + ✓ (soluzione). */ .ba-stage { display: flex; flex-direction: column; gap: 1.5rem; } .ba-card { position: relative; background: var(--surface-metal); border: none; /* Accento superiore conservato per la semantica prima/dopo: arancio = "Dopo" (soluzione), grigio = "Prima" (problema). */ border-top: 0.2rem solid var(--main); border-radius: 0.5rem; padding: 2rem 1.75rem; box-shadow: var(--shadow-metal); } .ba-card--before { border-top-color: var(--gray); } .ba-card--before .section-label { /* Grigio schiarito: 4.6:1 anche sulla zona chiara del metallo (#4a4843); var(--gray) si fermava a 3.01:1. */ color: #b8b8b8; } .ba-card--after .section-label { color: var(--main-bright); } .ba-card--after .section-label::after { content: ' \2713'; /* ✓ — rafforza il "dopo" come soluzione */ font-weight: 700; } /* ── Mobile: la "Prima" scorre in flusso normale e si dissolve uscendo in alto; la "Dopo" entra dal basso in blur-dissolve (mettendosi a fuoco). Il cambio fra le due si legge come crossfade al confine, ma ciascuna card resta interamente leggibile (niente pin). Solo con JS: --pa = stato "Prima" (1 a fuoco → 0 dissolta), --pb = stato "Dopo". */ @media (max-width: 991.98px) { .beforeafter.ba-scroll-ready .ba-card { will-change: opacity, filter; } .beforeafter.ba-scroll-ready .ba-card--before { opacity: var(--pa, 1); filter: blur(calc((1 - var(--pa, 1)) * 6px)); } .beforeafter.ba-scroll-ready .ba-card--after { opacity: var(--pb, 1); filter: blur(calc((1 - var(--pb, 1)) * 6px)); } } @media (min-width: 992px) { .ba-stage { flex-direction: row; justify-content: center; align-items: flex-start; gap: 0; } .ba-card { flex: 0 1 30rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } /* più in basso, sotto, con spazio a destra per la sovrapposizione */ .ba-card--before { margin-top: 3rem; padding-right: 4rem; z-index: 1; } /* più in alto, sopra, sovrapposta sul "Prima", ombra più profonda */ .ba-card--after { margin-left: -3rem; padding-left: 4rem; z-index: 2; box-shadow: var(--shadow-lift); } /* la card puntata passa in primo piano */ .ba-card:hover, .ba-card:focus-within { z-index: 3; transform: translateY(-0.5rem); box-shadow: var(--shadow-lift-lg); } } @media (prefers-reduced-motion: reduce) { .ba-card { transition: none; } .ba-card:hover, .ba-card:focus-within { transform: none; } } /* ─── 12. SOTTOTITOLO ANIMATO (typed.js) ─── */ /* Sottotitolo animato (home + chi-siamo): testo arancione (--main) pieno. Contorno NERO (--dark) sotto, per leggibilità sopra il video dell'hero. */ #typed-text { -webkit-text-stroke: 0.03em var(--dark); paint-order: stroke fill; } /* ─── 13. UFFICIO VIRTUALE (login stanze BBB) ─── */ /* Pagina ufficio-virtuale.php: una stanza principale sempre visibile e le stanze secondarie in un carosello Bootstrap, una per slide. Tutte le classi usano il prefisso uv- per evitare collisioni. */ /* ── Card stanza (base condivisa primaria/secondarie) ── Stessa superficie metallica delle card del resto del sito. */ .uv-room { background: var(--surface-metal); box-shadow: var(--shadow-metal); border-radius: 0.5rem; padding: 2rem 1.75rem; } /* Accento superiore in verde "ufficio" sulla stanza principale. La card riempie la colonna (lg-8) e centra il contenuto in verticale, così resta allineata allo slider nella colonna lg-4. */ .uv-room-primary { border-top: 0.25rem solid var(--office); text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; } /* Nella card larga il form non si stira su tutta la colonna */ .uv-room-primary .uv-room-form { width: 80%; margin: 0 auto; } .uv-title { /* Bianco sulla card metallica (il rosso --office vi sparirebbe); l'identità "ufficio" resta nell'accento superiore e nei bottoni. */ color: var(--white); font-size: 2.5rem; font-weight: 700; margin-bottom: 0.25rem; } .uv-subtitle { font-size: var(--fs-md); color: #d4d4d4; margin-bottom: 1.5rem; } /* ── Form di accesso ── */ .uv-input { display: block; width: 100%; padding: 0.75rem 1rem; margin-bottom: 0.9rem; font-size: var(--fs-md); color: var(--ink); background: var(--field-bg); border: 1px solid var(--gray); /* Angoli coerenti con card e bottoni del sito. */ border-radius: 0.5rem; outline: none; transition: border-color 0.2s; } .uv-input:focus { border-color: var(--office); } /* Base bottoni della pagina (riprende lo stile dei bottoni globali) */ .uv-btn, .uv-room-toggle { display: block; width: 100%; /* Stesse dimensioni dei bottoni globali (peso 700, 20px). */ font-weight: 700; font-size: var(--fs-lg); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } /* CTA primaria: verde ufficio */ .uv-btn-office { background: var(--office); color: var(--white); margin-top: 0.35rem; } .uv-btn-office:hover { background: var(--white); color: var(--office); box-shadow: inset 0 0 0 0.125rem var(--office); } /* CTA stanze secondarie */ .uv-btn-cta { background: var(--cta); color: var(--white); } .uv-btn-cta:hover { background: var(--white); color: var(--cta); box-shadow: inset 0 0 0 0.125rem var(--cta); } /* Toggle "Accedi"/"Chiudi": outline verde, si riempie su hover */ .uv-room-toggle { background: var(--white); color: var(--office); box-shadow: inset 0 0 0 0.125rem var(--office); } .uv-room-toggle:hover, .uv-room.is-open .uv-room-toggle { background: var(--office); color: var(--white); } /* ── Blocco stanze secondarie ── */ /* Riempie la colonna di destra e centra label + slider in verticale, così il contenuto delle due colonne risulta allineato al centro. Su mobile lo spazio dalla card principale lo dà il gutter g-4. */ .uv-rooms { margin-top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; } .uv-rooms-label { /* Come testo piccolo sta sul fondo pagina: token che in dark si schiarisce (il rosso ufficio pieno vi sparirebbe). */ color: var(--office-text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-align: center; margin-bottom: 1rem; } .uv-room-name { font-size: var(--fs-xl); font-weight: 700; color: var(--white); text-align: center; } .uv-room-desc { font-size: var(--fs-md); color: #d4d4d4; margin: 1.25rem 0; text-align: center; } /* Stato selezionato: accento bordeaux senza spostare il layout */ .uv-room.uv-selected { /* Arancio: sul metallo scuro il bordeaux --cta non si distinguerebbe. */ box-shadow: var(--shadow-metal), inset 0 0.25rem 0 var(--main); } /* Reveal del form: transizione su max-height pilotata da .is-open (aggiunta/rimossa via JS sul toggle "Accedi"/"Chiudi") */ .uv-room-form-wrap { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .uv-room.is-open .uv-room-form-wrap { max-height: 22rem; } .uv-room-form-wrap .uv-room-form { padding-top: 1.25rem; } /* ── Carosello ── */ /* Gutter laterali: le frecce vivono ai lati, fuori dalla card. NB: nessun override di display sui .carousel-item — Bootstrap nasconde quelli inattivi con display:none e deve poterlo fare. */ .uv-rooms-slider { width: 100%; padding: 0 2.5rem; } /* Altezza uniforme: --uv-room-h è impostata dal JS sull'altezza della card più alta (misurata da chiusa); le più basse si adeguano e centrano il contenuto nello spazio in più */ .uv-rooms-slider .uv-room { min-height: var(--uv-room-h, auto); display: flex; flex-direction: column; justify-content: center; } /* Stato temporaneo di misurazione (vedi ufficio-virtuale.js): rende misurabile una slide inattiva senza mostrarla né spostare il layout */ .uv-rooms-slider .carousel-item.uv-misura { display: block; visibility: hidden; position: absolute; } .uv-rooms-slider .carousel-control-prev, .uv-rooms-slider .carousel-control-next { width: 2.5rem; opacity: 0.65; } .uv-rooms-slider .carousel-control-prev:hover, .uv-rooms-slider .carousel-control-next:hover { opacity: 1; } /* Le icone di serie sono bianche: invertite per leggibilità sullo sfondo chiaro della pagina */ .uv-rooms-slider .carousel-control-prev-icon, .uv-rooms-slider .carousel-control-next-icon { filter: invert(1) grayscale(100%); } /* Tema scuro: il fondo pagina è scuro, le frecce restano bianche (annulla sia l'invert qui sopra sia quello di Bootstrap data-bs-theme). */ html[data-theme="dark"] .uv-rooms-slider .carousel-control-prev-icon, html[data-theme="dark"] .uv-rooms-slider .carousel-control-next-icon { filter: grayscale(100%); } /* Indicatori sotto al carosello (non sovrapposti alla card) */ .uv-rooms-slider .carousel-indicators { position: static; margin: 1.25rem 0 0; } .uv-rooms-slider .carousel-indicators [data-bs-target] { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 0; background-color: var(--gray); } .uv-rooms-slider .carousel-indicators .active { /* Token: in dark il rosso ufficio pieno non staccherebbe dal fondo (UI 3:1). */ background-color: var(--office-text); } /* ─── 14. PAGINA 404 — landing rassicurante (non-errore) ─── */ /* * La 404 mantiene il comportamento tecnico corretto (status HTTP 404 e * robots "noindex" impostati lato PHP in 404.php), ma a livello visivo NON * si presenta come una pagina di errore: una sola colonna centrata su * .section-gradient-grey con titolo, testo rassicurante e due CTA * (home + contatti). * Namespace `err-` per evitare conflitti con gli altri blocchi del sito. */ .err-wrapper { max-width: 40rem; margin: 0 auto; text-align: center; } /* Bussola decorativa sopra il titolo (aria-hidden nel markup). Quadrante in tono tenue (--gray via currentColor), ago bicolore col Nord in arancio brand (--main) come punto focale e il Sud in bordeaux (--cta). Nessun colore hardcoded: la struttura usa currentColor, le forme colorate prendono la tinta dalle classi qui sotto. */ .err-svg { margin-bottom: 1.75rem; } .err-compass { display: block; width: clamp(4.5rem, 12vw, 6.5rem); height: auto; margin: 0 auto; color: var(--gray); } .err-compass-ring--inner, .err-compass-ticks--minor { opacity: 0.55; } .err-compass-needle--n { fill: var(--main); } .err-compass-needle--s { fill: var(--cta); } .err-compass-hub { fill: var(--dark); } .err-compass-hub-dot { fill: var(--dark); } .err-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.25rem; } .err-text { font-size: var(--fs-lg); line-height: 1.7; color: var(--ink); max-width: 32rem; margin: 0 auto 2.25rem; } .err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } /* Base condivisa dei due CTA. Testo bold ≥18.66px = "testo grande" WCAG: con lo sfondo --main-deep (3.46:1 col bianco) il requisito AA per il testo grande è rispettato (--main puro si fermava a 2.75:1). */ .err-btn { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; display: inline-block; /* Stesso padding dei bottoni globali. */ padding: 0.75rem 2rem; border: 0.125rem solid transparent; border-radius: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Primaria: arancione brand pieno, testo bianco. All'hover vira al bordeaux (--cta), coerente con il gradiente arancio→bordeaux usato nel sito. */ .err-btn-primary { background: var(--main-deep); border-color: var(--main-deep); color: var(--white); } .err-btn-primary:hover { background: var(--cta); border-color: var(--cta); color: var(--white); } /* Secondaria: trasparente con bordo e testo bordeaux (token --cta-text, schiarito in dark); si riempie di --cta (testo bianco) all'hover. */ .err-btn-secondary { background: transparent; border-color: var(--cta-text); color: var(--cta-text); } .err-btn-secondary:hover { background: var(--cta); border-color: var(--cta); color: var(--white); } /* Indicatore di focus da tastiera: anello bordeaux esterno al bottone, leggibile sul gradiente grigio in entrambi i temi. */ .err-btn:focus-visible { outline: 0.125rem solid var(--cta-text); outline-offset: 0.2rem; } /* Riga di "destinazioni utili": link alle sezioni reali del sito (oltre ai due CTA), per offrire più porte d'ingresso e ridurre l'uscita immediata. È una
secondaria: testo piccolo e discreto, così non ruba la scena al titolo rassicurante. Wrap automatico → su mobile va a capo da sé. */ .err-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.5rem 1.5rem; margin-top: 2.5rem; } /* Etichetta introduttiva: occupa l'intera larghezza così i link vanno a capo sotto. Stile coerente con .section-label del sito. */ .err-links-label { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; color: var(--cta-text); margin-bottom: 0.25rem; } .err-link { font-size: var(--fs-base); font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 0.0625rem solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .err-link:hover { color: var(--cta-text); border-bottom-color: var(--cta-text); } .err-link:focus-visible { outline: 0.125rem solid var(--cta-text); outline-offset: 0.2rem; } /* < 768px: i due CTA si impilano a tutta larghezza; da 768px in su restano affiancati (regola base con flex-wrap). */ @media (max-width: 767.98px) { .err-actions { flex-direction: column; align-items: stretch; } .err-btn { width: 100%; } } /* ── BLOCCO 1 — Tema chiaro: card in metallo chiaro ── Specificità: html:not([data-theme="dark"]) = (0,1,1), batte :root (0,1,0). */ html:not([data-theme="dark"]) { /* Stesso gradiente diagonale del metallo scuro, luminanza invertita: riflesso in alto-sx → ombra calda in basso-dx. */ --surface-metal: linear-gradient(135deg, #ffffff 0%, #f4f2ef 45%, #eae7e1 100%); /* Rilievo neumorfico chiaro: luce dall'alto-sx, ombra grigio-caldo in basso-dx (su fondo chiaro le ombre nere del tema scuro sporcherebbero). --shadow-metal: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(63, 65, 65, 0.06), 8px 8px 18px rgba(63, 65, 65, 0.12), -6px -6px 16px rgba(255, 255, 255, 0.9); --shadow-metal-hover: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(63, 65, 65, 0.08), 12px 12px 26px rgba(63, 65, 65, 0.18), -8px -8px 20px rgba(255, 255, 255, 0.95);*/ /* Token del CONTENUTO delle card (vedi regole più sotto). */ --card-ink: var(--ink); --card-ink-soft: var(--gray-text); --card-accent: var(--accent-text); /* arancio scurito: 3.46:1 su card chiara */ --card-edge: #e0dcd5; /* freccetta timeline, bordo avatar team */ --card-chevron: none; /* chevron FAQ: già scuro, non va invertito */ } /* ── BLOCCO 2 — Sezioni scure: card metalliche come oggi ── Cancella questo blocco per la variante "tutto chiaro". Il modale sta su un backdrop scuro: se diventasse chiaro perderebbe lo stacco dal velo, quindi resta metallico anche qui. */ /* html:not([data-theme="dark"]) .section-dark, html:not([data-theme="dark"]) .section-gradient-orange, html:not([data-theme="dark"]) .modal-kw { --surface-metal: linear-gradient(135deg, #4a4843 0%, #222019 45%, var(--dark) 100%); --shadow-metal: inset 0 2px 6px rgba(145, 145, 145, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 8px 8px 18px rgba(0, 0, 0, 0.6), -6px -6px 16px rgba(145, 145, 145, 0.10); --shadow-metal-hover: inset 0 2px 8px rgba(145, 145, 145, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 12px 12px 26px rgba(0, 0, 0, 0.7), -8px -8px 20px rgba(145, 145, 145, 0.14); --card-ink: var(--white); --card-ink-soft: #d4d4d4; --card-accent: var(--main-bright); --card-edge: #222019; --card-chevron: brightness(0) invert(1); } */ /* ── BLOCCO 3 — Contenuto delle card sui token ── Valgono solo in tema chiaro; grazie ai token dei blocchi 1/2 funzionano sia sulle card chiare sia su quelle rimaste scure. */ html:not([data-theme="dark"]) .feature-card .card-title-custom, html:not([data-theme="dark"]) .ba-card .card-title-custom, html:not([data-theme="dark"]) .timeline-content .card-title-custom, html:not([data-theme="dark"]) .intro-card .twocol-text h2, html:not([data-theme="dark"]) .intro-card-content h2, html:not([data-theme="dark"]) .intro-card-content strong, html:not([data-theme="dark"]) .approccio-cards .feature-card strong, html:not([data-theme="dark"]) .feature-team-name, html:not([data-theme="dark"]) .cs-heading, html:not([data-theme="dark"]) .project-card__title, html:not([data-theme="dark"]) .case-quote, html:not([data-theme="dark"]) .case-quote blockquote, html:not([data-theme="dark"]) .case-quote cite, html:not([data-theme="dark"]) .faq-accordion .accordion-button, html:not([data-theme="dark"]) .faq-accordion .accordion-body strong, html:not([data-theme="dark"]) .form-label-kw, html:not([data-theme="dark"]) .altcha-label, html:not([data-theme="dark"]) .contact-label, html:not([data-theme="dark"]) .uv-title, html:not([data-theme="dark"]) .uv-room-name { color: var(--card-ink); } html:not([data-theme="dark"]) .feature-card .card-text-custom, html:not([data-theme="dark"]) .ba-card .card-text-custom, html:not([data-theme="dark"]) .timeline-content .card-text-custom, html:not([data-theme="dark"]) .approccio-cards .feature-card p, html:not([data-theme="dark"]) .approccio-cards .feature-card ul, html:not([data-theme="dark"]) .intro-card-content p, html:not([data-theme="dark"]) .cs-text, html:not([data-theme="dark"]) .cs-row:hover .cs-text, html:not([data-theme="dark"]) .kpi-label, html:not([data-theme="dark"]) .project-card__text, html:not([data-theme="dark"]) .faq-accordion .accordion-body, html:not([data-theme="dark"]) .req-note, html:not([data-theme="dark"]) .uv-subtitle, html:not([data-theme="dark"]) .uv-room-desc, html:not([data-theme="dark"]) .ba-card--before .section-label { color: var(--card-ink-soft); } /* Accenti arancio dentro le card: su card chiara l'arancio pieno non regge il contrasto (2.75:1), quindi passa alla variante scurita via --card-accent; su card scura resta --main-bright, come oggi. */ html:not([data-theme="dark"]) .feature-team-role, html:not([data-theme="dark"]) .project-card__sector, html:not([data-theme="dark"]) .project-card__link, html:not([data-theme="dark"]) .kpi-value, html:not([data-theme="dark"]) .milestone-year, html:not([data-theme="dark"]) .cs-text-link, html:not([data-theme="dark"]) .cs-row:hover .cs-text-link, html:not([data-theme="dark"]) .ba-card--after .section-label, html:not([data-theme="dark"]) .req, html:not([data-theme="dark"]) .faq-accordion .accordion-button:not(.collapsed) { color: var(--card-accent); } /* Chevron dell'accordion FAQ: l'invert serve solo su card scura. */ html:not([data-theme="dark"]) .faq-accordion .accordion-button::after { filter: var(--card-chevron); } /* Freccetta della timeline verso la spina + bordo avatar team. */ html:not([data-theme="dark"]) .timeline-item:nth-child(odd) .timeline-content::after { border-left-color: var(--card-edge); } html:not([data-theme="dark"]) .timeline-item:nth-child(even) .timeline-content::after { border-right-color: var(--card-edge); } @media (max-width: 768px) { html:not([data-theme="dark"]) .timeline-item:nth-child(odd) .timeline-content::after, html:not([data-theme="dark"]) .timeline-item:nth-child(even) .timeline-content::after { border-right-color: var(--card-edge); } } html:not([data-theme="dark"]) .feature-team { border-color: var(--card-edge); } /* Hover delle card-link: il velo arancio al 30% su card chiara resta chiaro, quindi il testo NON deve diventare bianco (sparirebbe). Icone: SVG inline all'arancio scurito, icona mascherata senza il filtro che la sbianca. */ html:not([data-theme="dark"]) a.feature-card:hover .card-title-custom { color: var(--card-ink); } html:not([data-theme="dark"]) a.feature-card:hover .card-text-custom { color: var(--card-ink-soft); } html:not([data-theme="dark"]) a.feature-card:hover .block-icon { fill: var(--main-deep) !important; } html:not([data-theme="dark"]) a.feature-card:hover .card-icon { filter: none; } /* Eccezione: le card "cover" dello slider Soluzioni hanno un'IMMAGINE di sfondo con velo scuro, non il metallo — il titolo lì resta bianco. */ html:not([data-theme="dark"]) .feature-slider-cover .feature-card .card-title-custom, html:not([data-theme="dark"]) .feature-slider-cover a.feature-card:hover .card-title-custom { color: var(--white); } /* Bordo di separazione sulle card chiare: il rilievo neumorfico da solo, su sezioni molto chiare (.section-white), stacca poco. Un hairline caldo definisce il bordo senza appesantire. Non tocca le card rimaste scure. */ html:not([data-theme="dark"]) .section-white .feature-card, html:not([data-theme="dark"]) .section-white .cs-row, html:not([data-theme="dark"]) .section-white .timeline-content, html:not([data-theme="dark"]) .section-white .kpi-card, html:not([data-theme="dark"]) .section-white .project-card, html:not([data-theme="dark"]) .section-gradient-grey .feature-card, html:not([data-theme="dark"]) .section-gradient-grey .cs-row, html:not([data-theme="dark"]) .section-gradient-grey .kpi-card, html:not([data-theme="dark"]) .section-gradient-grey .uv-room { border: 0.0625rem solid var(--card-edge); } /* ── BLOCCO 4 — Testo bianco hardcoded che finisce su card chiare ── Due regole del CSS originale colorano di bianco senza sapere se il testo sta sullo SFONDO della sezione o dentro una CARD: .section-gradient-orange h2 / p / li → bianco .modal-email-link → bianco Lo sfondo di .section-gradient-orange resta il gradiente scuro in entrambi i temi, quindi lì il bianco è giusto e non va toccato. Dentro le card, invece, il colore dipende dalla superficie: per questo qui si passa dai token --card-ink / --card-ink-soft, che valgono "scuro su card chiara" o "chiaro su card scura" a seconda di come hai configurato i blocchi 1 e 2. Risultato: funziona sia con il BLOCCO 2 attivo sia senza. */ /* Testo dentro una card nella sezione arancione (titoli, corpo, liste). Specificità (0,2,2): batte .section-gradient-orange li (0,1,1). */ html:not([data-theme="dark"]) .section-gradient-orange :is(.feature-card, .cs-row, .intro-card, .form-card, .ba-card, .kpi-card, .project-card, .uv-room, .timeline-content, .contact-item, .accordion-item) :is(h2, h3, strong) { color: var(--card-ink); } html:not([data-theme="dark"]) .section-gradient-orange :is(.feature-card, .cs-row, .intro-card, .form-card, .ba-card, .kpi-card, .project-card, .uv-room, .timeline-content, .contact-item, .accordion-item) :is(p, li) { color: var(--card-ink-soft); } /* Bordo delle FAQ nella sezione arancione: era bianco per staccare dalla card scura; su card chiara sparirebbe. */ html:not([data-theme="dark"]) .section-gradient-orange .faq-accordion .accordion-item { border-color: var(--card-edge); } /* ── Modale contatti ── Titolo in --main e label in --main-bright: su card chiara scendono rispettivamente a 2.75:1 e ~1.8:1. Il link email era bianco su bianco. Con i token: su modale scuro l'aspetto attuale non cambia. */ html:not([data-theme="dark"]) .modal-email-link { color: var(--card-ink); } html:not([data-theme="dark"]) .modal-email-link:hover { color: var(--card-accent); } html:not([data-theme="dark"]) .modal-title-kw { color: var(--card-accent); } html:not([data-theme="dark"]) .modal-body-label { color: var(--card-ink-soft); } html:not([data-theme="dark"]) .contact-item-consulenza .contact-label { color: var(--white); }