/*
* ============================================================
* FULL SERVICE S.c.a.r.l. — DESIGN SYSTEM
* Child Theme: fullservice-child/css/fs-design-system.css
* Versione: 3.4 · Maggio 2026 (Ottimizzazione)
* Stack: WP 6.9.4 · The7 latest · WPBakery 8.7.2
* Dipendenze: Google Fonts — Inter, DM Sans (caricati via )
* Prefisso classi: fs-
* Lingua sito: EN
*
* STRUTTURA:
* B1 — Google Fonts import (RIMOSSO, usa )
* B2 — Token globali :root + dark mode
* B3 — Base elements (migliorati focus e CLS)
* B4 — Layout utilities
* B5 — Sezioni (base, varianti, animazioni bg)
* B5-ter — Fancy Header Dark Mode
* B5-quater — Fancy Header Ken Burns Zoom
* B6 — Componenti (cards, stats, certs, logo strip, badge)
* B6-bis — Numbers vertical scroll snap (Mobile)
* B7 — Sector cards (statica + parallax)
* B7-bis — Sectors mobile scroll + dots (stile Apple)
* B8 — Buttons (aggiunto focus-visible)
* B9 — Text effects & gradient headings
* B10 — Motion & reveal + keyframes
* B11 — Header / logo / menu (fix logo mobile dark/light)
* B12 — Accessibility & reduced motion (esteso)
* B13 — Contact form conversazionale (fix indicizzazione, a11y)
* B14 — Footer & bottom bar
* B15 — Certifications white cards (pulizia duplicati, scroll snap)
* B16 — Wide screens 2K / 4K
* B17 — Legal pages
* B17-bis — WPBakery auto-centering
* B18 — Print styles
* B19 — Apple-style text reveal (scroll-driven word fade)
* B20 - Nascondo Google reCAPTCHA
* ============================================================ */
/* ═══════════════════════════════════════════════════════════
B1 — GOOGLE FONTS (RIMOSSO @import per performance)
#R: Inserire questo tag nell' del tema:
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
B2 — TOKEN GLOBALI
═══════════════════════════════════════════════════════════ */
:root {
/* — Brand palette — */
--fs-primary: #262A5F;
--fs-primary-light: #3B4A8A;
--fs-primary-dark: #1A1D3F;
--fs-ice: #D9E4FF;
--fs-graphite: #1F232D;
--fs-slate: #6D7486;
--fs-cloud: #F4F6FA;
--fs-copper: #B77A4A;
--fs-amber: #D8A43C;
--fs-white: #FFFFFF;
--fs-black: #0A0B0F;
--fs-color-error: #c0392b;
/* — Semantic (light mode default) — */
--fs-bg: #FFFFFF;
--fs-bg-surface: #F4F6FA;
--fs-bg-dark: #1F232D;
--fs-bg-navy: #262A5F;
--fs-text: #1F232D;
--fs-text-muted: #6D7486;
--fs-text-on-dark: #F4F6FA;
--fs-text-on-navy: #D9E4FF;
--fs-border: rgba(38, 42, 95, 0.12);
--fs-border-dark: rgba(255, 255, 255, 0.10);
--fs-accent-light: var(--fs-primary);
--fs-accent-dark: var(--fs-copper);
/* — Gradients — */
--fs-gradient-hero: linear-gradient(135deg, #262A5F 0%, #3B4A8A 40%, #6D7486 70%, #D8A43C 100%);
--fs-gradient-why: radial-gradient(ellipse at 80% 100%, rgba(216,164,60,0.18) 0%, transparent 60%),
linear-gradient(160deg, #1F232D 0%, #262A5F 100%);
--fs-gradient-nums: linear-gradient(135deg, #262A5F 0%, #1A1D3F 100%);
--fs-gradient-certs: linear-gradient(160deg, #1F232D 0%, #262A5F 60%, #1F232D 100%);
/* — Typography — */
--fs-font-primary: 'Inter', system-ui, -apple-system, sans-serif;
--fs-font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
/* — Fluid type scale (320px → 1440px) — */
--fs-t-display: clamp(2.75rem, 5vw + 0.75rem, 5.5rem);
--fs-t-h1: clamp(2rem, 3.5vw + 0.5rem, 4rem);
--fs-t-h2: clamp(1.5rem, 2.2vw + 0.4rem, 2.75rem);
--fs-t-h3: clamp(1.25rem, 1.5vw + 0.3rem, 2rem);
--fs-t-h4: clamp(1.0625rem, 0.8vw + 0.2rem, 1.375rem);
--fs-t-body-lg: clamp(1.0625rem, 0.4vw + 0.9rem, 1.25rem);
--fs-t-body: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
--fs-t-sm: clamp(0.8125rem, 0.1vw + 0.75rem, 0.875rem);
--fs-t-label: 0.6875rem;
/* — Line heights — */
--fs-lh-display: 1.05;
--fs-lh-h1: 1.08;
--fs-lh-h2: 1.15;
--fs-lh-h3: 1.25;
--fs-lh-body: 1.65;
--fs-lh-body-lg: 1.6;
/* — Letter spacing — */
--fs-ls-display: -0.035em;
--fs-ls-h1: -0.03em;
--fs-ls-h2: -0.02em;
--fs-ls-h3: -0.015em;
--fs-ls-body: 0em;
--fs-ls-label: 0.08em;
/* — Font weights — */
--fs-fw-display: 700;
--fs-fw-h1: 700;
--fs-fw-h2: 600;
--fs-fw-h3: 500;
--fs-fw-body: 400;
--fs-fw-label: 600;
/* — Spacing (base 4px) — */
--fs-space-2xs: 4px;
--fs-space-xs: 8px;
--fs-space-sm: 16px;
--fs-space-md: 24px;
--fs-space-lg: 40px;
--fs-space-xl: 64px;
--fs-space-2xl: 96px;
--fs-space-3xl: 128px;
/* — Shape & elevation — */
--fs-radius-sm: 6px;
--fs-radius-md: 22.5%; /* Proporzionale Apple */
--fs-radius-lg: 22.5%; /* Proporzionale Apple */
--fs-radius-full: 999px; /* Pillole perfette */
--fs-shadow-sm: 0 1px 4px rgba(26, 29, 63, 0.06);
--fs-shadow-md: 0 4px 21px rgba(26, 29, 63, 0.06);
--fs-shadow-lg: 0 8px 34px rgba(26, 29, 63, 0.06);
/* — Motion — */
--fs-ease: cubic-bezier(0.22, 1, 0.36, 1);
--fs-ease-in: cubic-bezier(0.4, 0, 1, 1);
--fs-dur-fast: 200ms;
--fs-dur-mid: 400ms;
--fs-dur-slow: 700ms;
/* — Glassmorphism — */
--fs-glass-light: rgba(255, 255, 255, 0.08);
--fs-glass-border: rgba(255, 255, 255, 0.30); /* Bordo luminoso Apple */
--fs-glass-blur: blur(14px);
--fs-glass-highlight: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
/* — Layout widths — */
--fs-w-narrow: 800px;
--fs-w-default: 1200px;
--fs-w-wide: 1400px;
/* — Header height (usato in calc e scroll-margin) — */
--fs-header-h: clamp(80px, 8vw, 110px);
}
/* ── Dark mode: sistema operativo ───────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
--fs-bg: #0E1017;
--fs-bg-surface: #1A1D2A;
--fs-text: #E8EBF4;
--fs-text-muted: #8A90A8;
--fs-border: rgba(216, 228, 255, 0.10);
--fs-accent-light: var(--fs-ice);
}
}
/* ── Dark mode: toggle manuale ──────────────────────────── */
[data-theme="dark"] {
--fs-bg: #0E1017;
--fs-bg-surface: #1A1D2A;
--fs-text: #E8EBF4;
--fs-text-muted: #8A90A8;
--fs-border: rgba(216, 228, 255, 0.10);
--fs-accent-light: var(--fs-ice);
}
[data-theme="light"] {
--fs-bg: #FFFFFF;
--fs-bg-surface: #F4F6FA;
--fs-text: #1F232D;
--fs-text-muted: #6D7486;
--fs-border: rgba(38, 42, 95, 0.12);
--fs-accent-light: var(--fs-primary);
}
/* ═══════════════════════════════════════════════════════════
B3 — BASE ELEMENTS
Sovrascrive Theme Options > Typography di The7
#R: Aggiunti :focus-visible per accessibilità
═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--fs-font-primary);
font-size: var(--fs-t-body);
font-weight: var(--fs-fw-body);
line-height: var(--fs-lh-body);
letter-spacing: var(--fs-ls-body);
color: var(--fs-text);
background-color: var(--fs-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--fs-font-display);
font-weight: var(--fs-fw-h2);
line-height: var(--fs-lh-h2);
margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-t-h1); font-weight: var(--fs-fw-h1); letter-spacing: var(--fs-ls-h1); line-height: var(--fs-lh-h1); }
.fs-section--light h1,
.fs-section--cloud h1 { font-size: clamp(2.2rem, 4vw + 0.5rem, 4.6rem); }
h2 { font-size: var(--fs-t-h2); font-weight: var(--fs-fw-h2); letter-spacing: var(--fs-ls-h2); }
h3 { font-size: var(--fs-t-h3); font-weight: var(--fs-fw-h3); letter-spacing: var(--fs-ls-h3); line-height: var(--fs-lh-h3); }
p { margin: 0 0 1em; }
a {
color: var(--fs-accent-light); text-decoration: none;
transition: opacity var(--fs-dur-fast) var(--fs-ease), outline-color var(--fs-dur-fast) var(--fs-ease);
}
a:hover { opacity: 0.75; }
a:focus-visible {
outline: 2px solid var(--fs-primary-light);
outline-offset: 3px;
opacity: 1;
border-radius: 2px;
}
img, video { max-width: 100%; display: block; height: auto; }
.fs-overline {
display: block;
font-family: var(--fs-font-primary);
font-size: var(--fs-t-label);
font-weight: var(--fs-fw-label);
letter-spacing: var(--fs-ls-label);
text-transform: uppercase;
color: var(--fs-text-muted);
margin-bottom: var(--fs-space-md);
}
.fs-overline--light { color: rgba(255, 255, 255, 0.5); }
.fs-overline--amber { color: var(--fs-amber); }
/* ═══════════════════════════════════════════════════════════
B4 — LAYOUT UTILITIES
═══════════════════════════════════════════════════════════ */
.fs-container {
width: 100%;
max-width: var(--fs-w-default);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.fs-container--wide { max-width: var(--fs-w-wide); }
.fs-container--narrow { max-width: var(--fs-w-narrow); }
.fs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fs-space-lg); }
.fs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fs-space-md); }
.fs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fs-space-md); }
.fs-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--fs-space-md); }
@media (max-width: 900px) {
.fs-grid-4,
.fs-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.fs-grid-2,
.fs-grid-3,
.fs-grid-4,
.fs-grid-5 { grid-template-columns: 1fr; }
}
.fs-text-center { text-align: center; }
.fs-text-left { text-align: left; }
[id] { scroll-margin-top: var(--fs-header-h); }
/* ═══════════════════════════════════════════════════════════
B5 — SEZIONI
═══════════════════════════════════════════════════════════ */
/* Fancy header (pagine interne The7) */
#fancy-header {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: scroll;
height: 100vh;
transform: translate3d(0, 0, 0) scale(1.001);
transform-origin: center center;
will-change: transform, opacity;
position: relative;
z-index: 0;
overflow: hidden;
cursor: pointer;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#fancy-header,
#fancy-header[style],
#fancy-header .page-title-block,
#fancy-header .page-title-inner,
#fancy-header .fancy-title-block,
.with-fancy-title #fancy-header {
height: 100vh !important;
min-height: 100vh !important;
max-height: none !important;
}
@media (max-width: 1024px) {
#fancy-header,
#fancy-header[style],
#fancy-header .page-title-block,
#fancy-header .page-title-inner,
#fancy-header .fancy-title-block,
.with-fancy-title #fancy-header {
height: 44vh !important;
min-height: 44vh !important;
}
}
/* Section base */
.fs-section,
.fs-section--light,
.fs-section--cloud,
.fs-section--dark,
.fs-section--navy,
.fs-section--why,
.fs-section--nums-animated,
.fs-section--certs {
padding-top: clamp(64px, 8vw, 120px);
padding-bottom: clamp(64px, 8vw, 120px);
position: relative;
overflow: hidden;
}
.fs-section--light { background: var(--fs-bg); }
.fs-section--cloud { background: var(--fs-bg-surface); }
.fs-section--dark { background: var(--fs-bg-dark); color: var(--fs-text-on-dark); }
.fs-section--navy { background: var(--fs-bg-navy); color: var(--fs-text-on-navy); }
.fs-section--why { background: var(--fs-gradient-why); color: var(--fs-text-on-dark); }
.fs-section--nums { background: var(--fs-gradient-nums); color: var(--fs-text-on-dark); }
.fs-section--certs { background: var(--fs-gradient-certs); color: var(--fs-text-on-dark); }
/* Dark mode sezioni chiare — unificato OS e toggle */
@media (prefers-color-scheme: dark),
[data-theme="dark"] {
.fs-section--light:not(.fs-pin-section):not(.fs-section--cloud),
.vc_row.fs-section--light:not(.fs-pin-section),
.wpb_row.fs-section--light:not(.fs-pin-section) {
background-color: var(--fs-bg) !important;
}
.fs-section--light h1,
.fs-section--light h2,
.fs-section--light h3 { color: var(--fs-text) !important; }
.fs-section--light p,
.fs-section--light li { color: var(--fs-text-on-dark) !important; }
.fs-section--light .fs-overline { color: var(--fs-text-muted) !important; }
.fs-section--light h4.fs-gradient-slate {
background: linear-gradient(135deg, var(--fs-ice) 0%, var(--fs-text-on-dark) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.fs-section--cloud:not(.fs-pin-section) {
background:
radial-gradient(ellipse at 15% 50%, rgba(59, 74, 138, 0.4) 0%, transparent 50%),
radial-gradient(ellipse at 85% 50%, rgba(26, 29, 63, 0.6) 0%, transparent 50%),
#0E1017;
background-size: 300% 300%;
animation: fs-bg-shift 18s ease-in-out infinite alternate;
}
}
@keyframes fs-bg-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Section Numbers — mesh animato */
.fs-section--nums-animated {
background:
radial-gradient(ellipse at 10% 95%, rgba(216, 164, 60, 0.55) 0%, transparent 40%),
radial-gradient(ellipse at 5% 75%, rgba(255, 255, 255, 0.08) 0%, transparent 30%),
radial-gradient(ellipse at 85% 8%, rgba(59, 74, 138, 0.9) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, #262A5F 0%, #1A1D3F 100%);
background-size: 144% 144%;
animation: fs-nums-shift 5s ease-in-out infinite alternate;
}
@keyframes fs-nums-shift {
0% { background-position: 0% 0%; }
50% { background-position: 30% 80%; }
100% { background-position: 0% 0%; }
}
/* Section title & subtitle */
.fs-section-title {
font-family: var(--fs-font-display);
font-size: var(--fs-t-h2);
font-weight: var(--fs-fw-h1);
letter-spacing: var(--fs-ls-h2);
line-height: var(--fs-lh-h2);
margin-bottom: var(--fs-space-sm);
}
.fs-section-subtitle {
font-size: var(--fs-t-body-lg);
line-height: var(--fs-lh-body-lg);
color: var(--fs-text-muted);
max-width: 800px;
}
/* Hero */
.fs-hero {
min-height: 100svh;
display: flex;
align-items: center;
position: relative;
}
.fs-hero__display {
font-family: var(--fs-font-display);
font-size: var(--fs-t-display);
font-weight: var(--fs-fw-display);
letter-spacing: var(--fs-ls-display);
line-height: var(--fs-lh-display);
color: var(--fs-white);
max-width: 900px;
}
.fs-hero__sub {
font-size: var(--fs-t-body-lg);
color: rgba(255, 255, 255, 0.72);
margin-top: var(--fs-space-sm);
max-width: 560px;
}
/* ═══════════════════════════════════════════════════════════
B5‑ter — FANCY HEADER DARK MODE
Scurisce lo sfondo della fancy header in dark mode
mantenendo il titolo perfettamente bianco e inalterato.
Metodo: overlay semitrasparente via pseudo-elemento ::after
═══════════════════════════════════════════════════════════ */
/* Titolo fancy header — override The7 */
.fancy-header .fancy-title {
font-family: var(--fs-font-display) !important;
font-size: var(--fs-t-h1) !important;
font-weight: var(--fs-fw-h1) !important;
letter-spacing: var(--fs-ls-h1) !important;
line-height: var(--fs-lh-h1) !important;
text-transform: none;
color: var(--fs-text-on-dark);
padding-bottom: 89px;
}
@media (max-width: 640px) {
.fancy-header .fancy-title {
padding-bottom: 0px;
}
}
/* Contenitore fancy header — necessario per posizionare l'overlay */
#fancy-header {
position: relative;
}
/* Overlay dark mode (nascosto di default) */
#fancy-header::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(355deg, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 100%);
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
/* Porta il contenuto sopra l'overlay */
#fancy-header .page-title-block,
#fancy-header .page-title-inner,
#fancy-header .fancy-title-head {
position: relative;
z-index: 1;
}
/* Attiva overlay in dark mode (sistema operativo) */
@media (prefers-color-scheme: dark) {
#fancy-header::after {
opacity: 1;
}
}
/* Attiva overlay in dark mode (toggle manuale) */
[data-theme="dark"] #fancy-header::after {
opacity: 1;
}
/* ═══════════════════════════════════════════════════════════
B5‑quater — FANCY HEADER KEN BURNS ZOOM
Zoom-in lento con decelerazione morbida, stop definitivo.
Partenza scale(1) → arrivo scale(1.05) in 15 secondi.
Disabilitato per ridotta-mozione e mobile (performance).
═══════════════════════════════════════════════════════════ */
/* Animazione attiva solo su desktop e senza preferenze reduced motion */
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
#fancy-header {
animation: fs-ken-burns 15s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
/* forwards = mantiene l'ultimo fotogramma (stop definitivo) */
}
@keyframes fs-ken-burns {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
100% {
transform: translate3d(0, 0, 0) scale(1.05);
}
}
/* Se la fancy header ha già un transform attivo (es. inline style),
lo sovrascriviamo rispettando l'animazione */
#fancy-header[style] {
animation: fs-ken-burns 15s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
}
/* Disabilita animazione se l'utente preferisce ridotta-mozione */
@media (prefers-reduced-motion: reduce) {
#fancy-header {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════
B6 — COMPONENTI
═══════════════════════════════════════════════════════════ */
/* Card base */
.fs-card {
background: var(--fs-bg);
border: 0.5px solid var(--fs-border);
border-radius: var(--fs-radius-md);
padding: var(--fs-space-md) var(--fs-space-lg);
transition:
transform var(--fs-dur-mid) var(--fs-ease),
box-shadow var(--fs-dur-mid) var(--fs-ease);
}
.fs-card:hover {
transform: translateY(-4px);
box-shadow: var(--fs-shadow-md);
}
.fs-card--glass {
background: var(--fs-glass-light);
backdrop-filter: var(--fs-glass-blur) saturate(180%);
-webkit-backdrop-filter: var(--fs-glass-blur) saturate(180%);
border: 0.5px solid var(--fs-glass-border);
border-radius: var(--fs-radius-md);
}
/* Stat cards */
.fs-stat-card {
background: var(--fs-glass-light);
backdrop-filter: var(--fs-glass-blur) saturate(180%);
-webkit-backdrop-filter: var(--fs-glass-blur) saturate(180%);
border: 0.5px solid var(--fs-glass-border);
border-radius: var(--fs-radius-md);
padding: var(--fs-space-md) var(--fs-space-lg);
text-align: center;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.fs-stat-number {
font-family: var(--fs-font-display);
font-size: clamp(2.5rem, 4vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
color: var(--fs-amber);
display: block;
line-height: 1;
}
.fs-stat-prefix {
font-family: var(--fs-font-display);
font-size: clamp(1.5rem, 2vw, 2rem);
font-weight: 700;
color: var(--fs-amber);
opacity: 0.6;
vertical-align: super;
margin-right: 2px;
}
.fs-stat-label {
font-size: var(--fs-t-sm);
font-weight: var(--fs-fw-label);
letter-spacing: var(--fs-ls-label);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-top: var(--fs-space-xs);
display: block;
}
.fs-stat-desc {
font-size: var(--fs-t-sm);
color: rgba(255, 255, 255, 0.45);
margin-top: var(--fs-space-xs);
line-height: 1.5;
}
.fs-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--fs-space-lg);
padding-block: var(--fs-space-xl);
transform: scale(0.89);
}
@media (max-width: 900px) { .fs-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fs-stats-grid { grid-template-columns: 1fr; } }
/* Logo strip */
.fs-logo-strip {
overflow: hidden;
padding-block: var(--fs-space-lg);
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.fs-logo-track {
display: flex;
gap: var(--fs-space-2xl);
width: max-content;
animation: fs-marquee 28s linear infinite;
}
.fs-logo-track:hover { animation-play-state: paused; }
@keyframes fs-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.fs-logo-item {
flex: 0 0 auto;
height: 40px;
opacity: 0.4;
filter: grayscale(100%);
transition:
opacity var(--fs-dur-mid) var(--fs-ease),
filter var(--fs-dur-mid) var(--fs-ease);
}
.fs-logo-item:hover { opacity: 1; filter: grayscale(0%); }
/* USP Badge */
.fs-usp-badge {
display: inline-flex;
align-items: center;
gap: var(--fs-space-xs);
padding: 6px 14px;
border-radius: var(--fs-radius-full);
border: 0.5px solid var(--fs-border);
background: var(--fs-bg-surface);
font-size: var(--fs-t-sm);
font-weight: 500;
color: var(--fs-text-muted);
margin-bottom: var(--fs-space-md);
}
.fs-usp-badge--dark {
border-color: var(--fs-glass-border);
background: var(--fs-glass-light);
color: rgba(255, 255, 255, 0.65);
}
/* ── Bordo luminoso Apple su tutte le card ── */
.fs-stat-card,
.fs-sector-card,
.fs-sector-card-h,
.fs-cert-card--square,
.fs-card--glass {
border: 1px solid var(--fs-glass-border) !important;
box-shadow: var(--fs-glass-highlight) !important;
}
/* ═══════════════════════════════════════════════════════════
B6‑bis — NUMBERS VERTICAL SCROLL SNAP (Mobile)
Una card alla volta centrata, peek sopra e sotto, margini.
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
/* Contenitore scroll verticale */
.fs-stats-grid.fs-stack-fade {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scroll-snap-type: y mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: 0 !important;
height: 460px !important;
max-height: 80vh !important;
padding: calc(230px - 185px) 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.fs-stats-grid.fs-stack-fade::-webkit-scrollbar {
display: none !important;
}
/* Ogni card */
.fs-stats-grid.fs-stack-fade .fs-stat-card {
flex: 0 0 340px !important;
scroll-snap-align: center !important;
opacity: 1 !important;
transform: none !important;
width: 85vw !important;
max-width: 340px !important;
margin: 15px auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
}
/* ═══════════════════════════════════════════════════════════
B7 — SECTOR CARDS
#R: Corretto selettore .vc_col-sm-1/5
═══════════════════════════════════════════════════════════ */
/* Versione statica 5 colonne */
.fs-sector-card {
background: var(--fs-bg);
border: 0.5px solid var(--fs-border);
border-radius: var(--fs-radius-md);
padding: var(--fs-space-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--fs-space-sm);
height: 100%;
box-sizing: border-box;
cursor: default;
transition:
transform var(--fs-dur-mid) var(--fs-ease),
box-shadow var(--fs-dur-mid) var(--fs-ease),
border-color var(--fs-dur-mid) var(--fs-ease);
}
.fs-sector-card:hover {
transform: translateY(-6px);
box-shadow: var(--fs-shadow-lg);
border-color: var(--fs-primary-light);
}
.fs-sector-card svg {
display: block;
width: 140px !important;
height: 140px !important;
flex-shrink: 0;
margin: 0 auto var(--fs-space-md);
}
.fs-sector-icon { width: 48px; height: 48px; color: var(--fs-primary); }
.fs-sector-title {
font-size: var(--fs-t-h4);
font-weight: 600;
color: var(--fs-text);
letter-spacing: var(--fs-ls-h3);
}
.fs-sector-client {
font-size: var(--fs-t-sm);
color: var(--fs-copper);
font-weight: 500;
margin-top: 4px;
}
/* WPBakery override colonne 1/5 */
.fs-section--cloud [class*="vc_col-sm-1/5"] .vc_column-inner { padding: 0 8px !important; }
.fs-section--cloud.vc_row { padding-inline: 24px !important; }
@media (max-width: 1024px) {
.fs-section--cloud [class*="vc_col-sm-1/5"] { width: 33.333% !important; float: left !important; }
.fs-section--cloud [class*="vc_col-sm-1/5"] .vc_column-inner { padding: 0 6px !important; }
.fs-section--cloud.vc_row { padding-inline: 16px !important; }
.fs-sector-card svg { width: 120px !important; height: 120px !important; }
}
@media (max-width: 768px) {
.fs-section--cloud [class*="vc_col-sm-1/5"] { width: 50% !important; float: left !important; }
.fs-section--cloud [class*="vc_col-sm-1/5"] .vc_column-inner { padding: 0 6px 12px !important; }
.fs-section--cloud.vc_row { padding-inline: 12px !important; }
.fs-sector-card svg { width: 100px !important; height: 100px !important; }
}
@media (max-width: 480px) {
.fs-section--cloud [class*="vc_col-sm-1/5"] { width: 100% !important; float: none !important; }
.fs-section--cloud.vc_row { padding-inline: 3px !important; }
.fs-sector-card {
flex-direction: row !important;
align-items: flex-start !important;
text-align: left !important;
gap: var(--fs-space-md) !important;
}
.fs-sector-card svg { width: 80px !important; height: 80px !important; margin: 0 !important; }
}
/* Versione parallasse orizzontale */
.fs-pin-section {
position: relative;
width: 100%;
height: calc(100vh - var(--fs-header-h) - 80px);
min-height: 480px;
max-height: 700px;
overflow: visible !important;
z-index: 10;
display: flex;
align-items: center;
mask-image: linear-gradient(to right, transparent 0%, black 18%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 92%, transparent 100%);
}
.fs-sectors-track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--fs-space-lg);
padding-inline: clamp(40px, 6vw, 96px);
height: 100%;
width: max-content;
box-sizing: border-box;
will-change: transform;
cursor: grab;
user-select: none;
}
.fs-sectors-track.is-dragging { cursor: grabbing; }
.fs-sector-card-h {
flex-shrink: 0;
width: clamp(260px, 22vw, 340px);
height: clamp(260px, 22vw, 340px);
aspect-ratio: 1 / 1;
background: var(--fs-bg);
border: 0.5px solid var(--fs-border);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--fs-space-sm);
padding: var(--fs-space-md);
text-align: center;
box-sizing: border-box;
overflow: hidden;
transition:
transform var(--fs-dur-mid) var(--fs-ease),
box-shadow var(--fs-dur-mid) var(--fs-ease);
}
.fs-sector-card-h:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: var(--fs-shadow-lg);
}
.fs-sector-card-h svg {
width: 100px !important;
height: 100px !important;
flex-shrink: 0;
display: block;
}
.fs-sector-card-h .fs-sector-title {
font-size: var(--fs-t-h4);
font-weight: 600;
color: var(--fs-text);
letter-spacing: var(--fs-ls-h3);
margin: 0;
line-height: 1.2;
}
.fs-sector-card-h p {
font-size: var(--fs-t-sm);
color: var(--fs-text-muted);
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.fs-sector-card-h .fs-sector-client {
font-size: var(--fs-t-label);
color: var(--fs-copper);
font-weight: 600;
letter-spacing: var(--fs-ls-label);
text-transform: uppercase;
margin: 0;
}
/* Dark mode sector card-h */
@media (prefers-color-scheme: dark) {
.fs-sector-card-h {
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
.fs-sector-card-h .fs-sector-title { color: var(--fs-text-on-dark) !important; }
.fs-sector-card-h p { color: rgba(255, 255, 255, 0.65) !important; }
.fs-sector-card-h .fs-sector-client { color: var(--fs-amber) !important; opacity: 0.85; }
}
[data-theme="dark"] .fs-sector-card-h {
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .fs-sector-card-h .fs-sector-title { color: var(--fs-text-on-dark) !important; }
[data-theme="dark"] .fs-sector-card-h p { color: rgba(255, 255, 255, 0.65) !important; }
[data-theme="dark"] .fs-sector-card-h .fs-sector-client { color: var(--fs-amber) !important; opacity: 0.85; }
/* Responsive parallasse */
@media (min-width: 1440px) {
.fs-pin-section { max-height: 740px; }
.fs-sector-card-h { width: clamp(300px, 24vw, 380px); height: clamp(300px, 24vw, 380px); }
.fs-sector-card-h svg { width: 120px !important; height: 120px !important; }
}
@media (min-width: 1920px) {
.fs-pin-section { max-height: 820px; }
.fs-sectors-track { gap: var(--fs-space-xl); }
}
/* ═══════════════════════════════════════════════════════════
B7‑bis — SECTORS MOBILE SCROLL + DOTS (stile Apple)
Trasforma la riga settori in scroll orizzontale nativo
con snap alle card e pallini indicatori.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Contenitore pinned: override per mobile */
.fs-pin-section {
height: auto !important;
min-height: unset !important;
max-height: unset !important;
overflow: visible !important;
display: block !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
/* Track: scroll orizzontale nativo */
.fs-sectors-track {
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: var(--fs-space-md) !important;
padding-inline: clamp(1rem, 5vw, 1.5rem) !important;
padding-block: var(--fs-space-md) !important;
width: 100% !important;
height: auto !important;
will-change: auto !important;
cursor: grab !important;
user-select: none !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.fs-sectors-track::-webkit-scrollbar {
display: none !important;
}
/* Card: dimensione fissa, snap al centro */
.fs-sector-card-h {
flex: 0 0 69vw !important;
max-width: 69vw !important;
min-width: 0 !important;
width: 69vw !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
scroll-snap-align: center !important;
}
.fs-sector-card-h:hover {
transform: none !important;
}
/* Ultima card: margine extra per peek */
.fs-sector-card-h:last-child {
margin-right: clamp(1rem, 5vw, 1.5rem) !important;
}
/* ── Pallini indicatori stile Apple ── */
.fs-sectors-dots {
display: flex !important;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: var(--fs-space-md);
padding-bottom: var(--fs-space-sm);
}
.fs-sectors-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(109, 116, 134, 0.3);
border: none;
cursor: pointer;
transition: background 0.3s var(--fs-ease),
transform 0.3s var(--fs-ease),
width 0.3s var(--fs-ease);
padding: 0;
flex-shrink: 0;
}
.fs-sectors-dot.is-active {
background: var(--fs-primary);
width: 24px;
border-radius: 4px;
transform: scale(1);
}
}
/* Desktop: nascondi pallini */
@media (min-width: 769px) {
.fs-sectors-dots {
display: none !important;
}
}
/* Dark mode: pallini bianchi stile Apple */
[data-theme="dark"] .fs-sectors-dot {
background: rgba(255, 255, 255, 0.30);
}
[data-theme="dark"] .fs-sectors-dot.is-active {
background: rgba(255, 255, 255, 0.90);
}
@media (prefers-color-scheme: dark) {
.fs-sectors-dot {
background: rgba(255, 255, 255, 0.30);
}
.fs-sectors-dot.is-active {
background: rgba(255, 255, 255, 0.90);
}
}
/* ═══════════════════════════════════════════════════════════
B8 — BUTTONS (aggiunto focus-visible)
═══════════════════════════════════════════════════════════ */
.fs-btn-primary,
.fs-btn-secondary,
.fs-btn-ghost,
.fs-btn-copper {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-family: var(--fs-font-primary);
font-size: var(--fs-t-body);
font-weight: 500;
border-radius: var(--fs-radius-full);
border: none;
cursor: pointer;
text-decoration: none;
transition: background var(--fs-dur-fast) var(--fs-ease), transform var(--fs-dur-fast) var(--fs-ease), box-shadow var(--fs-dur-fast) var(--fs-ease), outline-color var(--fs-dur-fast) var(--fs-ease);
}
.fs-btn-primary:focus-visible,
.fs-btn-secondary:focus-visible,
.fs-btn-ghost:focus-visible,
.fs-btn-copper:focus-visible {
outline: 2px solid var(--fs-primary-light);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(38, 42, 95, 0.3);
}
.fs-btn-primary {
background: var(--fs-primary);
color: var(--fs-white);
}
.fs-btn-primary:hover {
background: var(--fs-primary-dark);
color: var(--fs-white); opacity: 1;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(38, 42, 95, 0.28);
}
.fs-btn-secondary {
background: transparent;
color: var(--fs-primary);
padding: 13px 28px;
border: 1px solid var(--fs-primary);
}
.fs-btn-secondary:hover { background: var(--fs-primary); color: var(--fs-white); opacity: 1; }
.fs-btn-ghost {
background: transparent;
color: var(--fs-text-on-dark);
padding: 13px 28px;
border: 0.5px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(8px);
}
.fs-btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.5);
color: var(--fs-white); opacity: 1;
}
.fs-btn-copper {
background: var(--fs-copper);
color: var(--fs-white);
font-weight: 600;
}
.fs-btn-copper:hover {
background: #9E6638;
color: var(--fs-white); opacity: 1;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(183, 122, 74, 0.35);
}
/* ═══════════════════════════════════════════════════════════
B9 — TEXT EFFECTS & GRADIENT HEADINGS
Animazione JS: fs-main.js § 5B
═══════════════════════════════════════════════════════════ */
.fs-headline-premium {
font-family: var(--fs-font-display);
font-size: var(--fs-t-display);
font-weight: var(--fs-fw-display);
letter-spacing: var(--fs-ls-display);
line-height: var(--fs-lh-display);
}
.fs-gradient-navy {
background-image: radial-gradient(circle farthest-side at right center, #262A5F 0%, #3B4A8A 45%, #D9E4FF 100%) !important;
background-size: 220% 100% !important;
background-position: 60% 50% !important;
background-repeat: no-repeat !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.fs-gradient-amber {
background-image: radial-gradient(circle farthest-side at right center, #B77A4A 0%, #D8A43C 45%, #F5E0A0 100%) !important;
background-size: 220% 100% !important;
background-position: 60% 50% !important;
background-repeat: no-repeat !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.fs-gradient-slate {
background-image: linear-gradient(135deg, var(--fs-graphite) 0%, var(--fs-slate) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* ═══════════════════════════════════════════════════════════
B10 — MOTION, REVEAL & KEYFRAMES
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
.fs-reveal-up {
opacity: 0;
transform: translateY(32px);
transition:
opacity var(--fs-dur-slow) var(--fs-ease),
transform var(--fs-dur-slow) var(--fs-ease);
}
.fs-reveal-up.is-visible { opacity: 1; transform: translateY(0); }
.fs-reveal-fade {
opacity: 0;
transition: opacity var(--fs-dur-slow) var(--fs-ease);
}
.fs-reveal-fade.is-visible { opacity: 1; }
.fs-reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition:
opacity var(--fs-dur-slow) var(--fs-ease),
transform var(--fs-dur-slow) var(--fs-ease);
}
.fs-reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.fs-reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.fs-reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.fs-reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.fs-reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
}
/* Keyframe reveal — usato da .fs-cf-step e .fs-cf-success */
@keyframes fs-reveal-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* Keyframe rim glow — usato da .fs-cf-btn-next */
@keyframes fs-dock-rim {
0% {
box-shadow:
0 0 0 0.75px rgba(255, 255, 255, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.40),
0 6px 24px rgba(38, 42, 95, 0.25);
}
50% {
box-shadow:
0 0 0 1.5px rgba(255, 255, 255, 0.70),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 8px 28px rgba(38, 42, 95, 0.35);
}
100% {
box-shadow:
0 0 0 0.75px rgba(255, 255, 255, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.40),
0 6px 24px rgba(38, 42, 95, 0.25);
}
}
/* Preparazione card per effetto tilt Apple */
.fs-stat-card,
.fs-sector-card,
.fs-sector-card-h,
.fs-cert-card--square,
.fs-card--glass {
transform-style: preserve-3d;
will-change: transform;
}
/* ═══════════════════════════════════════════════════════════
B11 — HEADER / LOGO / MENU
The7: Theme Options > Header > Floating + Sticky ON
#R: Centralizzata e corretta logica dark/light logo mobile
═══════════════════════════════════════════════════════════ */
/* 1) Altezza + glassmorphism desktop */
header.header-bar {
min-height: var(--fs-header-h) !important;
backdrop-filter: blur(40px) saturate(200%) !important;
-webkit-backdrop-filter: blur(40px) saturate(200%) !important;
background-color: rgba(255, 255, 255, 0.45) !important;
border-bottom: 0.5px solid rgba(38, 42, 95, 0.08) !important;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;
}
.header-space { height: var(--fs-header-h) !important; }
/* 2) Branding wrapper */
header.header-bar .branding > a,
.mobile-header-bar .mobile-branding > a,
#branding-bottom > a {
display: inline-flex; align-items: center; line-height: 1;
}
/* 3) Logo desktop */
header.header-bar .branding img {
max-width: 100%;
height: clamp(84px, 8vw, 117px);
width: auto;
}
/* 4) Logo mobile — unificato, nessun conflitto */
/* 4a) Switch iniettati da The7 sempre nascosti */
.mobile-header-bar .mobile-branding > a.sticky-mobile-logo-first-switch,
.mobile-header-bar .mobile-branding > a.sticky-mobile-logo-second-switch {
display: none !important;
}
/* 4b) Contenitore principale sempre visibile e ben dimensionato */
.mobile-header-bar .mobile-branding > a.same-logo {
display: inline-flex !important;
align-items: center !important;
width: auto;
height: clamp(44px, 5.5vw, 60px); /* impedisce CLS */
}
/* 4c) Light mode: logo navy visibile, white nascosto */
.mobile-header-bar .mobile-branding > a.same-logo img:not(.mobile-logo) {
display: block !important;
height: 100% !important; /* riempie il contenitore */
width: auto !important;
}
.mobile-header-bar .mobile-branding > a.same-logo img.mobile-logo {
display: none !important;
}
/* 4d) Dark mode (toggle manuale): logo white visibile, navy nascosto */
[data-theme="dark"] .mobile-header-bar .mobile-branding > a.same-logo img:not(.mobile-logo) {
display: none !important;
}
[data-theme="dark"] .mobile-header-bar .mobile-branding > a.same-logo img.mobile-logo {
display: block !important;
height: 100% !important;
width: auto !important;
}
/* 4e) Dark mode (sistema operativo): stessa logica del toggle */
@media (prefers-color-scheme: dark) {
.mobile-header-bar .mobile-branding > a.same-logo img:not(.mobile-logo) {
display: none !important;
}
.mobile-header-bar .mobile-branding > a.same-logo img.mobile-logo {
display: block !important;
height: 100% !important;
width: auto !important;
}
}
/* 5) Logo shine — light mode only */
@media (prefers-color-scheme: light) {
header.header-bar .branding > a.sticky-logo img {
animation: fs-logo-shine 5s ease-in-out infinite;
will-change: filter;
}
}
[data-theme="light"] header.header-bar .branding > a.sticky-logo img {
animation: fs-logo-shine 5s ease-in-out infinite;
will-change: filter;
}
@keyframes fs-logo-shine {
0% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
12% { filter: brightness(1.4) drop-shadow(0 0 6px rgba(217, 228, 255, 0.7)); }
24% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
100% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
}
/* 6) Canvas logo */
header.header-bar .branding .fs-logo-canvas,
.mobile-header-bar .mobile-branding .fs-logo-canvas {
display: block; max-width: 100%; height: auto; pointer-events: none;
}
/* 7) Nascondi canvas in footer / bottom bar */
#branding-bottom canvas,
.footer canvas,
.bottom-bar canvas { display: none !important; }
/* 8) Menu testo — WCAG AA */
span.menu-text {
font-size: clamp(0.9375rem, 0.5rem + 0.4vw, 1.0625rem) !important;
font-family: var(--fs-font-primary) !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
color: var(--fs-text) !important;
}
.mobile-main-nav span.menu-text { font-size: 1.0625rem !important; }
/* 9) Header desktop trasparente / sticky */
#site-header,
.dt-header-wrap {
background-color: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
transition:
background-color var(--fs-dur-mid) var(--fs-ease),
backdrop-filter var(--fs-dur-mid) var(--fs-ease),
border-color var(--fs-dur-mid) var(--fs-ease) !important;
}
.dt-floating-header #site-header,
.dt-floating-header .dt-header-wrap { background-color: transparent !important; }
.dt-sticky-header #site-header,
.dt-sticky-header .dt-header-wrap {
background-color: rgba(255, 255, 255, 0.45) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 0.5px solid rgba(38, 42, 95, 0.10) !important;
}
/* 10) Mobile header bar — glassmorphism — SOLO sotto 778px */
@media (max-width: 778px) {
.mobile-header-bar,
.masthead-mobile,
#mobile-header {
background-color: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 0.5px solid rgba(38, 42, 95, 0.08) !important;
min-height: 64px !important;
display: flex !important;
align-items: center !important;
}
}
/* Su desktop nasconde esplicitamente il mobile-header-bar */
@media (min-width: 779px) {
.mobile-header-bar,
.masthead-mobile,
#mobile-header {
display: none !important;
}
}
/* 11) Colore menu floating vs sticky */
.dt-floating-header .dt-nav-link,
.dt-floating-header #main-nav a { color: rgba(255, 255, 255, 0.92) !important; }
.dt-sticky-header .dt-nav-link,
.dt-sticky-header #main-nav a { color: var(--fs-text) !important; }
/* 12) Menu centrato desktop */
ul#primary-menu {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
padding: 0; white-space: nowrap;
}
.masthead:not(.side-header) .main-nav { display: flex; flex-wrap: nowrap; }
/* 13) Dark mode header — OS (NON contiene più regole per il logo mobile) */
@media (prefers-color-scheme: dark) {
header.header-bar,
.mobile-header-bar,
.masthead-mobile {
background-color: rgba(14, 16, 23, 0.82) !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}
header.header-bar span.menu-text,
header.header-bar #primary-menu a span.menu-text { color: rgba(255, 255, 255, 0.92) !important; }
header.header-bar .branding img:not(.mobile-logo) {
filter: brightness(0) invert(1) !important;
animation: none !important;
}
.dt-sticky-header #site-header,
.dt-sticky-header .dt-header-wrap { background-color: rgba(14, 16, 23, 0.72) !important; }
.dt-sticky-header .dt-nav-link,
.dt-sticky-header #main-nav a { color: rgba(255, 255, 255, 0.92) !important; }
}
/* 13) Dark mode header — toggle (NON contiene più regole per il logo mobile) */
[data-theme="dark"] header.header-bar,
[data-theme="dark"] .mobile-header-bar,
[data-theme="dark"] .masthead-mobile {
background-color: rgba(14, 16, 23, 0.82) !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] header.header-bar span.menu-text,
[data-theme="dark"] header.header-bar #primary-menu a span.menu-text { color: rgba(255, 255, 255, 0.92) !important; }
[data-theme="dark"] header.header-bar .branding img:not(.mobile-logo) {
filter: brightness(0) invert(1) !important;
animation: none !important;
}
[data-theme="dark"] .dt-sticky-header #site-header,
[data-theme="dark"] .dt-sticky-header .dt-header-wrap { background-color: rgba(14, 16, 23, 0.72) !important; }
[data-theme="dark"] .dt-sticky-header .dt-nav-link,
[data-theme="dark"] .dt-sticky-header #main-nav a { color: rgba(255, 255, 255, 0.92) !important; }
/* Pagine interne senza fancy header: header più opaco (copre sfondo chiaro) */
@media (prefers-color-scheme: dark) {
body:not(.home) header.header-bar {
background-color: rgba(10, 11, 15, 0.92) !important;
}
}
[data-theme="dark"] body:not(.home) header.header-bar {
background-color: rgba(10, 11, 15, 0.92) !important;
}
/* 14) Hamburger — linee bianche in dark mode */
[data-theme="dark"] .mobile-navigation .lines-button .menu-line,
[data-theme="dark"] .mobile-navigation .lines-button .menu-line::before,
[data-theme="dark"] .mobile-navigation .lines-button .menu-line::after {
background-color: rgba(255, 255, 255, 0.92) !important;
background: rgba(255, 255, 255, 0.92) !important;
opacity: 1 !important;
}
@media (prefers-color-scheme: dark) {
.mobile-navigation .lines-button .menu-line,
.mobile-navigation .lines-button .menu-line::before,
.mobile-navigation .lines-button .menu-line::after {
background-color: rgba(255, 255, 255, 0.92) !important;
background: rgba(255, 255, 255, 0.92) !important;
opacity: 1 !important;
}
}
/* 15) Drawer menu aperto — dark glassmorphism */
[data-theme="dark"] .dt-mobile-header,
[data-theme="dark"] .dt-mobile-header .mobile-header-scrollbar-wrap {
background-color: rgba(14, 16, 23, 0.96) !important;
backdrop-filter: blur(40px) saturate(180%) !important;
-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}
[data-theme="dark"] .dt-mobile-header .mobile-main-nav a,
[data-theme="dark"] .dt-mobile-header .mobile-main-nav .menu-text {
color: rgba(255, 255, 255, 0.88) !important;
}
[data-theme="dark"] .dt-mobile-header .mobile-main-nav a:hover .menu-text,
[data-theme="dark"] .dt-mobile-header .mobile-main-nav li.act a .menu-text {
color: #ffffff !important;
}
[data-theme="dark"] .dt-close-mobile-menu-icon .close-line {
background-color: rgba(255, 255, 255, 0.75) !important;
}
@media (prefers-color-scheme: dark) {
.dt-mobile-header,
.dt-mobile-header .mobile-header-scrollbar-wrap {
background-color: rgba(14, 16, 23, 0.96) !important;
backdrop-filter: blur(40px) saturate(180%) !important;
-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}
.dt-mobile-header .mobile-main-nav a,
.dt-mobile-header .mobile-main-nav .menu-text {
color: rgba(255, 255, 255, 0.88) !important;
}
.dt-mobile-header .mobile-main-nav a:hover .menu-text,
.dt-mobile-header .mobile-main-nav li.act a .menu-text {
color: #ffffff !important;
}
.dt-close-mobile-menu-icon .close-line {
background-color: rgba(255, 255, 255, 0.75) !important;
}
}
/* 16) Sticky mobile — backdrop filter (background gestito dal JS) */
@media (max-width: 778px) {
.masthead-mobile,
.masthead-mobile .mobile-header-bar {
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 0.5px solid rgba(38, 42, 95, 0.08) !important;
transition: background-color 0.3s ease !important;
}
[data-theme="dark"] .masthead-mobile,
[data-theme="dark"] .masthead-mobile .mobile-header-bar {
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}
}
/* ═══════════════════════════════════════════════════════════
B11‑bis — MOBILE MENU APPLE-STYLE OVERLAY
Sostituisce il drawer di The7 con overlay full-screen,
sfondo blur, voci centrate con stagger, swipe to close.
═══════════════════════════════════════════════════════════ */
/* Sposta il drawer nativo di The7 fuori schermo (non interferisce con overlay) */
.dt-mobile-header {
position: fixed !important;
top: 0 !important;
left: -120vw !important;
width: 100vw !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Overlay container — nasconde il drawer originale e crea overlay */
.fs-mobile-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--fs-ease), visibility 0s 0.4s;
}
.fs-mobile-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.4s var(--fs-ease), visibility 0s 0s;
}
/* Sfondo blur */
.fs-mobile-overlay__bg {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
}
/* Dark mode sfondo */
@media (prefers-color-scheme: dark) {
.fs-mobile-overlay__bg {
background: rgba(10, 11, 15, 0.94);
}
}
[data-theme="dark"] .fs-mobile-overlay__bg {
background: rgba(10, 11, 15, 0.94);
}
/* Light mode sfondo */
[data-theme="light"] .fs-mobile-overlay__bg {
background: rgba(255, 255, 255, 0.92);
}
@media (prefers-color-scheme: light) {
.fs-mobile-overlay__bg {
background: rgba(255, 255, 255, 0.92);
}
}
/* Lista voci */
.fs-mobile-nav {
position: relative;
z-index: 1;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.fs-mobile-nav li {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s var(--fs-ease), transform 0.5s var(--fs-ease);
}
.fs-mobile-nav li.is-visible {
opacity: 1;
transform: translateY(0);
}
.fs-mobile-nav a {
font-family: var(--fs-font-display);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 600;
color: var(--fs-text);
text-decoration: none;
letter-spacing: -0.02em;
transition: color 0.3s var(--fs-ease);
}
.fs-mobile-nav a:hover {
color: var(--fs-primary);
}
/* Dark mode voci */
@media (prefers-color-scheme: dark) {
.fs-mobile-nav a {
color: var(--fs-text-on-dark);
}
.fs-mobile-nav a:hover {
color: var(--fs-ice);
}
}
[data-theme="dark"] .fs-mobile-nav a {
color: var(--fs-text-on-dark);
}
[data-theme="dark"] .fs-mobile-nav a:hover {
color: var(--fs-ice);
}
/* Pulsante chiusura Apple-style */
.fs-mobile-close {
position: absolute;
top: clamp(20px, 4vw, 32px);
right: clamp(20px, 4vw, 32px);
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(128, 128, 128, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s var(--fs-ease), transform 0.3s var(--fs-ease);
}
.fs-mobile-close:hover {
background: rgba(128, 128, 128, 0.25);
transform: scale(1.05);
}
.fs-mobile-close:active {
transform: scale(0.95);
}
/* Linee della X */
.fs-mobile-close::before,
.fs-mobile-close::after {
content: '';
position: absolute;
width: 18px;
height: 1.5px;
background: var(--fs-text);
border-radius: 2px;
transition: background 0.3s var(--fs-ease);
}
.fs-mobile-close::before {
transform: rotate(45deg);
}
.fs-mobile-close::after {
transform: rotate(-45deg);
}
/* Dark mode X */
@media (prefers-color-scheme: dark) {
.fs-mobile-close::before,
.fs-mobile-close::after {
background: var(--fs-text-on-dark);
}
}
[data-theme="dark"] .fs-mobile-close::before,
[data-theme="dark"] .fs-mobile-close::after {
background: var(--fs-text-on-dark);
}
/* Nascondi elementi originali The7 */
.fs-mobile-overlay .dt-close-mobile-menu-icon,
.fs-mobile-overlay .mobile-header-scrollbar-wrap,
.fs-mobile-overlay .mobile-mini-widgets {
display: none !important;
}
/* Hamburger animazione fluida Apple */
.lines-button {
transition: transform 0.3s var(--fs-ease) !important;
}
.lines-button .menu-line {
transition: transform 0.3s var(--fs-ease), opacity 0.2s var(--fs-ease) !important;
}
/* ═══════════════════════════════════════════════════════════
B12 — ACCESSIBILITY & REDUCED MOTION
#R: Aggiunte regole per garantire animazioni ferme e focus visibili.
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.fs-section--nums-animated,
.fs-logo-track,
.fs-gradient--animated { animation: none !important; background-attachment: scroll !important; }
/* Disabilita tutte le animazioni di hover */
.fs-card:hover,
.fs-sector-card:hover,
.fs-btn-primary:hover,
.fs-btn-secondary:hover,
.fs-btn-ghost:hover,
.fs-btn-copper:hover {
transform: none !important;
filter: none !important;
}
}
/* ═══════════════════════════════════════════════════════════
B13 — CONTACT FORM CONVERSAZIONALE
#R: Migliorata indicizzazione SEO dei contenuti e accessibilità.
v3.3: fix placeholder e background input in dark mode
═══════════════════════════════════════════════════════════ */
/* Sezione contatto — background + centratura */
.fs-section--contact {
background: linear-gradient(135deg, #F4F6FA 0%, #D9E4FF 55%, #eef2ff 100%);
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
scroll-margin-top: var(--fs-header-h);
padding-top: var(--fs-header-h);
padding-bottom: clamp(64px, 8vw, 120px);
}
/* Dark mode — sezione */
@media (prefers-color-scheme: dark) {
.fs-section--contact {
background: linear-gradient(135deg, #0E1017 0%, #1A1D3F 50%, #0E1017 100%);
}
}
[data-theme="dark"] .fs-section--contact {
background: linear-gradient(135deg, #0E1017 0%, #1A1D3F 50%, #0E1017 100%);
}
/* Mobile */
@media (max-width: 640px) {
.fs-section--contact {
min-height: auto;
display: block;
scroll-margin-top: var(--fs-header-h);
padding-top: clamp(64px, 8vw, 120px);
}
}
/* Wrapper */
.fs-cf-wrap {
max-width: 560px;
margin-inline: auto;
padding: clamp(32px, 4vw, 48px) clamp(20px, 4vw, 48px);
}
.fs-cf-wrap .fs-overline { margin-bottom: var(--fs-space-sm); }
.fs-cf-wrap h3 { margin-bottom: var(--fs-space-sm); }
.fs-cf-wrap > p { margin-bottom: var(--fs-space-lg); }
/* Progress bar */
.fs-cf-progress {
display: flex;
gap: 6px;
margin-bottom: var(--fs-space-lg);
max-width: 560px;
margin-inline: auto;
}
.fs-cf-dot {
height: 3px;
flex: 1;
border-radius: 2px;
background: var(--fs-border);
transition: background var(--fs-dur-mid) var(--fs-ease);
}
.fs-cf-dot.fs-active { background: var(--fs-primary); }
.fs-cf-dot.fs-done { background: var(--fs-primary-light); }
@media (prefers-color-scheme: dark) {
.fs-cf-dot.fs-active { background: var(--fs-ice); }
.fs-cf-dot.fs-done { background: var(--fs-primary-light); }
}
[data-theme="dark"] .fs-cf-dot.fs-active { background: var(--fs-ice); }
[data-theme="dark"] .fs-cf-dot.fs-done { background: var(--fs-primary-light); }
/* Steps */
.fs-cf-step {
position: absolute;
top: 0;
left: 0;
width: 100%;
visibility: hidden;
opacity: 0;
transition: visibility 0s var(--fs-dur-slow), opacity var(--fs-dur-slow) var(--fs-ease);
}
.fs-cf-step.fs-visible {
position: static;
visibility: visible;
opacity: 1;
transition: visibility 0s 0s, opacity var(--fs-dur-slow) var(--fs-ease);
animation: fs-reveal-up var(--fs-dur-slow) var(--fs-ease);
}
/* Labels */
.fs-cf-label {
display: block;
font-size: var(--fs-t-label);
font-weight: var(--fs-fw-label);
letter-spacing: var(--fs-ls-label);
text-transform: uppercase;
color: var(--fs-text-muted);
margin-bottom: var(--fs-space-sm);
}
.fs-cf-question {
font-family: var(--fs-font-display);
font-size: clamp(1.4rem, 3vw, 1.8rem);
font-weight: 600;
color: var(--fs-text);
margin-bottom: var(--fs-space-lg);
line-height: 1.2;
}
.fs-cf-optional {
font-size: var(--fs-t-sm);
color: var(--fs-text-muted);
font-weight: 400;
margin-left: 8px;
}
/* Inputs */
.fs-cf-input,
.fs-cf-select,
.fs-cf-textarea {
width: 100%;
padding: 14px 18px;
border: 1.5px solid var(--fs-border);
border-radius: 25px !important;
font-size: var(--fs-t-body);
font-family: var(--fs-font-primary);
color: var(--fs-text);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
transition:
border-color var(--fs-dur-fast) var(--fs-ease),
background var(--fs-dur-fast) var(--fs-ease);
}
.fs-cf-input:focus,
.fs-cf-select:focus,
.fs-cf-textarea:focus {
border-color: var(--fs-primary);
background: rgba(255, 255, 255, 0.85);
}
/* Placeholder — light mode */
.fs-cf-input::placeholder,
.fs-cf-textarea::placeholder {
color: rgba(0, 0, 0, 0.55);
opacity: 1;
}
/* Dark mode — input e placeholder (ancorati al navy #1A1D3F) */
@media (prefers-color-scheme: dark) {
.fs-cf-input,
.fs-cf-select,
.fs-cf-textarea {
background: rgba(26, 29, 63, 0.55);
border-color: rgba(255, 255, 255, 0.12);
color: var(--fs-text-on-dark);
}
.fs-cf-input:focus,
.fs-cf-select:focus,
.fs-cf-textarea:focus {
border-color: rgba(255, 255, 255, 0.40);
background: rgba(26, 29, 63, 0.75);
}
.fs-cf-input::placeholder,
.fs-cf-textarea::placeholder {
color: rgba(255, 255, 255, 0.70);
}
}
[data-theme="dark"] .fs-cf-input,
[data-theme="dark"] .fs-cf-select,
[data-theme="dark"] .fs-cf-textarea {
background: rgba(26, 29, 63, 0.55);
border-color: rgba(255, 255, 255, 0.12);
color: var(--fs-text-on-dark);
}
[data-theme="dark"] .fs-cf-input:focus,
[data-theme="dark"] .fs-cf-select:focus,
[data-theme="dark"] .fs-cf-textarea:focus {
border-color: rgba(255, 255, 255, 0.40);
background: rgba(26, 29, 63, 0.75);
}
[data-theme="dark"] .fs-cf-input::placeholder,
[data-theme="dark"] .fs-cf-textarea::placeholder {
color: rgba(255, 255, 255, 0.70);
}
.fs-cf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fs-space-sm);
}
@media (max-width: 480px) { .fs-cf-row { grid-template-columns: 1fr; } }
/* Errori */
.fs-cf-error {
font-size: var(--fs-t-sm);
color: var(--fs-color-error);
margin-top: 6px;
display: none;
}
.fs-cf-error.fs-show { display: block; }
/* Counter */
.fs-cf-counter {
font-size: var(--fs-t-label);
color: var(--fs-text-muted);
margin-top: 6px;
text-align: right;
}
/* Bottoni wrapper */
.fs-cf-btn-wrap {
display: flex;
align-items: center;
gap: var(--fs-space-sm);
margin-top: var(--fs-space-sm);
}
/* Back */
.fs-cf-btn-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
border: 1.5px solid var(--fs-border);
background: transparent;
color: var(--fs-text-muted);
cursor: pointer;
flex-shrink: 0;
transition:
border-color var(--fs-dur-fast) var(--fs-ease),
color var(--fs-dur-fast) var(--fs-ease);
}
.fs-cf-btn-back:hover { border-color: var(--fs-primary); color: var(--fs-primary); }
.fs-cf-btn-back:focus-visible {
outline: 2px solid var(--fs-primary-light);
outline-offset: 2px;
}
/* Next / Submit */
.fs-cf-btn-next {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 34px;
border-radius: 25px;
border: none;
cursor: pointer;
font-family: var(--fs-font-primary);
font-size: var(--fs-t-body);
font-weight: 500;
letter-spacing: 0.02em;
color: #ffffff;
background: rgba(38, 42, 95, 0.75);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
overflow: hidden;
animation: fs-dock-rim 6s ease-in-out infinite;
transition:
background var(--fs-dur-mid) var(--fs-ease),
box-shadow var(--fs-dur-mid) var(--fs-ease),
transform var(--fs-dur-fast) var(--fs-ease);
}
.fs-cf-btn-next::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 44%;
border-radius: 16px 16px 0 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
pointer-events: none;
}
.fs-cf-btn-next span { position: relative; z-index: 1; }
.fs-cf-btn-next:hover {
background: rgba(38, 42, 95, 0.90);
transform: translateY(-2px);
animation: none;
}
.fs-cf-btn-next:active { transform: translateY(0); }
.fs-cf-btn-next:disabled { opacity: 0.5; cursor: not-allowed; transform: none; animation: none; }
.fs-cf-btn-next:focus-visible {
outline: 2px solid var(--fs-ice);
outline-offset: 3px;
}
/* Skip */
.fs-cf-skip {
font-size: var(--fs-t-sm);
color: var(--fs-text-muted);
cursor: pointer;
text-decoration: underline;
margin-left: auto;
background: none;
border: none;
padding: 0;
}
.fs-cf-skip:hover { color: var(--fs-primary); }
/* Privacy + Summary */
.fs-cf-privacy,
.fs-cf-summary {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 0.5px solid var(--fs-border);
border-radius: var(--fs-radius-md);
padding: var(--fs-space-md) var(--fs-space-lg);
}
@media (prefers-color-scheme: dark) {
.fs-cf-privacy,
.fs-cf-summary {
background: rgba(59, 74, 138, 0.15);
border-color: rgba(217, 228, 255, 0.12);
}
}
[data-theme="dark"] .fs-cf-privacy,
[data-theme="dark"] .fs-cf-summary {
background: rgba(59, 74, 138, 0.15);
border-color: rgba(217, 228, 255, 0.12);
}
.fs-cf-privacy {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: var(--fs-space-md);
}
.fs-cf-privacy input[type="checkbox"] {
width: 18px; height: 18px;
flex-shrink: 0; margin-top: 2px;
accent-color: var(--fs-primary);
cursor: pointer;
}
.fs-cf-privacy label {
font-size: var(--fs-t-sm);
color: var(--fs-text-muted);
line-height: 1.6;
cursor: pointer;
}
.fs-cf-privacy a { color: var(--fs-primary); }
.fs-cf-summary {
font-size: var(--fs-t-sm);
line-height: 2;
color: var(--fs-text-muted);
margin-bottom: var(--fs-space-md);
}
.fs-cf-summary strong { color: var(--fs-text); }
/* Success */
.fs-cf-success {
position: absolute;
top: 0;
left: 0;
width: 100%;
visibility: hidden;
opacity: 0;
text-align: center;
padding: var(--fs-space-lg) var(--fs-space-xl);
box-sizing: border-box;
}
.fs-cf-success.fs-visible {
position: static;
visibility: visible;
opacity: 1;
transition: visibility 0s 0s, opacity var(--fs-dur-slow) var(--fs-ease);
animation: fs-reveal-up var(--fs-dur-slow) var(--fs-ease);
}
.fs-cf-success-icon {
width: 72px; height: 72px;
border-radius: var(--fs-radius-lg);
background: rgba(38, 42, 95, 0.75);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
box-shadow: 0 0 0 0.75px rgba(255, 255, 255, 0.45), var(--fs-shadow-lg);
display: flex; align-items: center; justify-content: center;
margin: 0 auto var(--fs-space-lg);
font-size: 28px; color: #ffffff;
}
.fs-cf-success h2 {
font-family: var(--fs-font-display);
font-size: var(--fs-t-h2);
font-weight: 600;
color: var(--fs-text);
margin-bottom: var(--fs-space-xs);
}
.fs-cf-success p {
font-size: var(--fs-t-body-lg);
color: var(--fs-text-muted);
line-height: 1.6;
}
/* CF7 hidden */
.fs-cf-wrap .wpcf7 {
visibility: hidden;
position: absolute;
height: 0;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════
B14 — FOOTER & BOTTOM BAR
═══════════════════════════════════════════════════════════ */
/* Shell */
#footer {
background: rgba(10, 11, 15, 0.95) !important;
backdrop-filter: blur(40px) saturate(180%) !important;
-webkit-backdrop-filter: blur(40px) saturate(180%) !important;
border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}
#footer > .wf-wrap {
max-width: 1280px;
margin: 0 auto !important;
padding-inline: clamp(1.25rem, 4vw, 3rem);
box-sizing: border-box;
}
/* 3 colonne */
#footer .wf-container-footer > .wf-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: clamp(1.5rem, 2vw, 4rem) !important;
width: 100% !important;
}
#footer .wf-container-footer > .wf-container > section,
#footer .wf-container-footer > .wf-container > .widget {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
float: none !important;
padding: clamp(2rem, 4vw, 3.5rem) 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* Colonna contenuto */
.fs-footer-col {
display: flex;
flex-direction: column;
align-items: flex-start;
width: fit-content;
max-width: 100%;
}
/* Logo */
.fs-footer-logo {
filter: brightness(0) invert(1);
height: clamp(72px, 7vw, 100px) !important;
width: auto !important;
margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
margin-top: -13px;
}
/* Payoff */
.fs-footer-payoff {
font-family: var(--fs-font-display);
font-size: clamp(0.9rem, 1vw + 0.4rem, 1.1rem);
font-weight: 600;
color: #fff;
line-height: 1.4;
margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
}
/* Address */
.fs-footer-address {
font-size: clamp(0.7rem, 0.4vw + 0.55rem, 0.8125rem);
color: rgba(255, 255, 255, 0.40);
line-height: 1.9;
}
/* Heading colonne */
.fs-footer-heading {
font-size: clamp(0.6rem, 0.2vw + 0.55rem, 0.6875rem);
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.30);
margin-bottom: clamp(0.75rem, 1.2vw, 1.25rem);
}
/* Liste */
.fs-footer-links,
.fs-footer-info {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 0.8vw, 0.75rem);
}
.fs-footer-links a,
.fs-footer-info li,
.fs-footer-info a {
font-size: clamp(0.75rem, 0.3vw + 0.65rem, 0.875rem);
}
.fs-footer-info li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.55);
}
/* Link */
.fs-footer-links a,
.fs-footer-info a,
#footer a,
#footer .widget a {
color: rgba(255, 255, 255, 0.55) !important;
text-decoration: none !important;
display: inline-block;
transition: color 0.3s ease !important;
}
.fs-footer-links a:hover,
.fs-footer-info a:hover,
#footer a:hover,
#footer .widget a:hover { color: rgba(255, 255, 255, 1) !important; }
/* Social */
.fs-footer-social {
display: flex;
gap: 0.5rem;
margin-top: clamp(0.75rem, 1.5vw, 1.5rem);
}
.fs-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
border: 0.5px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.50);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.fs-social-btn:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
/* Bottom bar */
#bottom-bar {
background: rgba(8, 9, 12, 0.98) !important;
backdrop-filter: blur(40px) !important;
-webkit-backdrop-filter: blur(40px) !important;
border-top: 0.5px solid rgba(255, 255, 255, 0.05) !important;
}
#bottom-bar .wf-wrap {
max-width: 1280px;
margin: 0 auto !important;
padding-inline: clamp(1.25rem, 4vw, 3rem);
}
#bottom-bar,
#bottom-bar div,
#bottom-bar span,
#bottom-bar a {
color: rgba(255, 255, 255, 0.35) !important;
font-size: clamp(0.6rem, 0.2vw + 0.55rem, 0.6875rem) !important;
}
#bottom-bar a:hover { color: rgba(255, 255, 255, 0.65) !important; }
/* Footer sempre dark anche in light mode */
[data-theme="light"] #footer { background: rgba(10, 11, 15, 0.95) !important; }
/* Tablet */
@media (max-width: 900px) {
#footer .wf-container-footer > .wf-container { flex-wrap: wrap !important; }
#footer .wf-container-footer > .wf-container > section,
#footer .wf-container-footer > .wf-container > .widget {
flex: 1 1 45% !important;
padding: 1.5rem 0 !important;
}
}
/* Mobile */
@media (max-width: 600px) {
#footer .wf-container-footer > .wf-container > section,
#footer .wf-container-footer > .wf-container > .widget {
flex: 1 1 100% !important;
padding: 1.25rem 0 !important;
}
/* Fix margine sbilanciato The7 (-25px) */
#footer .wf-container-footer > .wf-container {
margin-inline: 0 !important;
padding-inline: var(--fs-space-sm) !important;
}
/* Stack verticale celle */
#footer .wf-container-footer > .wf-container > .wf-cell,
#footer .wf-container-footer > .wf-container > section,
#footer .wf-container-footer > .wf-container > .widget {
flex: 1 1 100% !important;
width: 100% !important;
float: none !important;
padding: 1.5rem 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* Logo e payoff — centrati */
.fs-footer-logo {
height: 56px !important;
margin-bottom: 12px !important;
}
.fs-footer-payoff {
font-size: 0.95rem !important;
text-align: center !important;
}
.fs-footer-address {
text-align: center !important;
font-size: 0.72rem !important;
}
/* Titolo colonna — centrato */
.fs-footer-heading {
text-align: center !important;
width: 100% !important;
}
/* Lista voci — larghezza fissa, centrato, allineamento sinistro */
.fs-footer-links,
.fs-footer-info {
align-items: flex-start !important;
width: 200px !important;
min-width: 0 !important;
margin-inline: auto !important;
}
.fs-footer-col {
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
.fs-footer-links a,
.fs-footer-info li,
.fs-footer-info a {
text-align: left !important;
}
/* Social — centrato */
.fs-footer-social {
justify-content: center !important;
width: 100% !important;
}
}
/* Nasconde scroll-to-top button (non premium) */
.scroll-top,
.scroll-top.on {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════
B15 — CERTIFICATIONS WHITE CARDS
#R: Pulizia duplicati e migliorie mobile scroll snap.
═══════════════════════════════════════════════════════════ */
.fs-section--certs {
padding-top: clamp(58px, 7vw, 94px);
padding-bottom: clamp(58px, 7vw, 94px);
}
.fs-certs-shell {
max-width: 1320px;
padding-inline: clamp(8px, 1.2vw, 18px);
}
.fs-certs-head { margin-bottom: clamp(22px, 3vw, 36px); }
.fs-certs-head .fs-section-subtitle { display: none; }
/* ── Reset float WPBakery sul row container ── */
.fs-certs-scroll--compact,
.fs-certs-scroll--compact .vc_row,
.fs-certs-scroll--compact .wpb_row,
.fs-section--certs .vc_row.fs-certs-scroll--compact {
display: flex !important;
flex-wrap: nowrap !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: center !important;
gap: clamp(12px, 1.5vw, 20px) !important;
max-width: 880px !important;
width: 100% !important;
margin-inline: auto !important;
padding: 4px 0 8px !important;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
}
/* ── Reset float sulle colonne WPBakery ── */
.fs-certs-scroll--compact > .vc_column_container,
.fs-certs-scroll--compact > [class*="vc_col-"],
.fs-section--certs .vc_row.fs-certs-scroll--compact > .vc_column_container,
.fs-section--certs .vc_row.fs-certs-scroll--compact > [class*="vc_col-"] {
float: none !important;
width: auto !important;
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
}
/* ── Wrapper interno colonna ── */
.fs-certs-scroll--compact .vc_column-inner,
.fs-certs-scroll--compact .wpb_wrapper {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── Card quadrata ── */
.fs-cert-card--square {
width: 100% !important;
aspect-ratio: 1 / 1;
min-height: 220px;
border-radius: var(--fs-radius-md);
padding: clamp(18px, 2vw, 26px);
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.34);
box-shadow:
0 14px 30px rgba(8, 10, 20, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
backdrop-filter: blur(14px) saturate(155%);
-webkit-backdrop-filter: blur(14px) saturate(155%);
box-sizing: border-box;
overflow: hidden;
}
.fs-cert-logo {
display: block;
width: clamp(90px, 7vw, 140px);
height: auto;
object-fit: contain;
margin: 0 auto clamp(10px, 1.2vw, 16px);
padding: 3px;
flex-shrink: 0;
}
.fs-cert-card--square h3 {
margin: 0 0 4px;
font-size: clamp(0.875rem, 0.4vw + 0.82rem, 1.05rem);
line-height: 1.2;
color: #f0c86f;
text-wrap: balance;
}
.fs-cert-card--square p {
margin: 0;
font-size: clamp(0.78rem, 0.2vw + 0.74rem, 0.875rem);
line-height: 1.35;
color: rgba(255, 255, 255, 0.90);
max-width: 18ch;
}
/* Nav bottoni (solo mobile) */
.fs-certs-nav--auto {
display: none;
justify-content: center;
gap: 10px;
margin-top: 14px;
}
.fs-certs-btn {
width: 42px; height: 42px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.24);
color: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.fs-certs-btn:hover { background: rgba(255, 255, 255, 0.24); }
/* Tablet → scroll orizzontale */
@media (max-width: 900px) {
.fs-certs-scroll--compact,
.fs-section--certs .vc_row.fs-certs-scroll--compact {
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important;
max-width: 100% !important;
scroll-snap-type: x proximity;
padding-bottom: 10px !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.fs-certs-scroll--compact::-webkit-scrollbar { display: none; }
.fs-certs-scroll--compact > .vc_column_container,
.fs-certs-scroll--compact > [class*="vc_col-"] {
flex: 0 0 220px !important;
width: 220px !important;
scroll-snap-align: start;
}
.fs-cert-card--square { min-height: 220px; }
.fs-cert-logo { width: clamp(80px, 14vw, 120px); }
}
/* Mobile */
@media (max-width: 640px) {
.fs-section--certs { padding-top: 50px; padding-bottom: 54px; }
.fs-certs-shell { padding-inline: 2px; }
.fs-certs-head { margin-bottom: 20px; }
.fs-certs-scroll--compact,
.fs-section--certs .vc_row.fs-certs-scroll--compact {
gap: 10px !important;
}
.fs-certs-scroll--compact > .vc_column_container,
.fs-certs-scroll--compact > [class*="vc_col-"] {
flex: 0 0 76vw !important;
width: 76vw !important;
}
.fs-cert-card--square {
min-height: 76vw;
border-radius: var(--fs-radius-md);
padding: 16px 12.5px;
}
.fs-cert-logo {
width: clamp(80px, 20vw, 110px);
margin-bottom: 10px;
}
.fs-cert-card--square h3 { font-size: 0.9rem; }
.fs-cert-card--square p { font-size: 0.78rem; }
}
/* Mobile — certificati scroll orizzontale swipe */
@media (max-width: 778px) {
.fs-certs-scroll--compact {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: clamp(0.75rem, 3vw, 1rem) !important;
padding-inline: clamp(1rem, 5vw, 1.5rem) !important;
padding-block: 1rem !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.fs-certs-scroll--compact::-webkit-scrollbar {
display: none !important;
}
.fs-certs-scroll--compact .fs-cert-card--square {
flex: 0 0 65vw !important;
max-width: 65vw !important;
scroll-snap-align: center !important;
height: auto !important;
min-height: 220px !important;
}
.fs-cert-card.fs-cert-card--square:last-child {
margin-right: clamp(1rem, 5vw, 1.5rem) !important;
}
}
/* Dark mode: bordo certificati più visibile */
@media (prefers-color-scheme: dark) {
.fs-cert-card--square {
border-color: rgba(255, 255, 255, 0.40) !important;
}
}
[data-theme="dark"] .fs-cert-card--square {
border-color: rgba(255, 255, 255, 0.40) !important;
}
/* ═══════════════════════════════════════════════════════════
B16 — WIDE SCREENS (1600 / 1920 / 2560 / 3840px) — v2 FIX
Clamp ricalcolati per crescita fluida reale (no stuck-at-min)
Selettori corretti su markup effettivo del tema
═══════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
.fs-container,
.fs-container--wide { max-width: 1540px !important; }
.fs-section {
padding-top: clamp(90px, 6vw, 130px);
padding-bottom: clamp(90px, 6vw, 130px);
}
.fs-hero__display,
.fancy-header .fancy-title { font-size: clamp(3.8rem, 1.3rem + 2.5vw, 4.3rem); line-height: 1.04; }
.fs-section-title { font-size: clamp(2.2rem, 0.7rem + 1.5vw, 2.5rem); line-height: 1.08; }
.fs-section-subtitle,
.fs-lead,
.fs-intro-text { font-size: clamp(1.05rem, 0.8rem + 0.25vw, 1.1rem); line-height: 1.65; }
.fs-stat-card { min-height: 240px; padding: 28px; }
.fs-stat-number { font-size: clamp(2.4rem, 0.07rem + 2.33vw, 3.8rem); }
.fs-cert-card--square {
width: clamp(250px, 17vw, 320px);
min-height: clamp(250px, 17vw, 320px);
padding: 24px;
}
.fs-cert-logo { width: clamp(132px, 8.3vw, 188px); }
.fs-cert-card--square h3 { font-size: clamp(1.08rem, 0.72rem + 0.5vw, 1.24rem); }
.fs-cert-card--square p { font-size: clamp(0.92rem, 0.72rem + 0.3vw, 1rem); }
.fs-certs-scroll--compact { gap: 20px; }
.fs-sector-card-h,
.fs-sector-card { min-width: clamp(300px, 19vw, 360px); }
.fs-sector-card h3,
.fs-sector-card-h h3 { font-size: clamp(1.15rem, 0.85rem + 0.5vw, 1.4rem); }
.fs-sector-card p,
.fs-sector-card-h p { font-size: clamp(0.96rem, 0.75rem + 0.3vw, 1.06rem); }
.fs-cf-wrap { max-width: 1120px; }
}
@media (min-width: 1920px) {
.fs-container,
.fs-container--wide { max-width: 1720px !important; }
.fs-section {
padding-top: clamp(100px, 6vw, 150px);
padding-bottom: clamp(100px, 6vw, 150px);
}
.fs-hero__display,
.fancy-header .fancy-title { font-size: clamp(4.3rem, 2.2rem + 1.75vw, 5rem); }
.fs-section-title { font-size: clamp(2.5rem, 1.6rem + 0.75vw, 2.8rem); }
.fs-section-subtitle,
.fs-lead,
.fs-intro-text { font-size: clamp(1.1rem, 0.92rem + 0.15vw, 1.16rem); }
.fs-stat-card { min-height: 260px; padding: 32px; }
.fs-cert-card--square {
width: clamp(270px, 16vw, 340px);
min-height: clamp(270px, 16vw, 340px);
padding: 26px;
}
.fs-cert-logo { width: clamp(140px, 7.5vw, 196px); }
.fs-certs-scroll--compact { gap: 22px; }
}
@media (min-width: 2560px) {
.fs-container,
.fs-container--wide { max-width: 1880px !important; }
.fs-section { padding-top: 130px; padding-bottom: 130px; }
.fs-hero__display,
.fancy-header .fancy-title { font-size: clamp(5rem, 1.4rem + 2.25vw, 6.8rem); }
.fs-section-title { font-size: clamp(2.8rem, 0.4rem + 1.5vw, 4rem); }
.fs-section-subtitle,
.fs-lead,
.fs-intro-text { font-size: clamp(1.16rem, 0.64rem + 0.325vw, 1.42rem); }
.fs-stat-card { min-height: 280px; padding: 36px; }
.fs-cert-card--square { width: clamp(300px, 13.3vw, 340px); min-height: clamp(300px, 13.3vw, 340px); padding: 28px; }
.fs-cert-logo { width: clamp(160px, 7.4vw, 190px); }
.fs-sector-card-h,
.fs-sector-card { min-width: clamp(340px, 14vw, 360px); }
}
/* Nuovo step per 4K nativo — copre il vuoto oltre 2560px */
@media (min-width: 3840px) {
.fs-container,
.fs-container--wide { max-width: 2100px !important; }
.fs-hero__display,
.fancy-header .fancy-title { font-size: 6.8rem; }
.fs-section-title { font-size: 4rem; }
.fs-section-subtitle,
.fs-lead,
.fs-intro-text { font-size: 1.42rem; }
.fs-cert-card--square { width: 340px; min-height: 340px; }
.fs-cert-logo { width: 190px; }
.fs-sector-card-h,
.fs-sector-card { min-width: 360px; }
}
/* ═══════════════════════════════════════════════════════════
B17 — LEGAL PAGES
═══════════════════════════════════════════════════════════ */
/* Hero — allineamento e larghezza sottotitolo */
.fs-legal-hero {
text-align: left;
}
.fs-legal-hero .fs-section-subtitle {
max-width: 680px;
}
/* Background dinamico — Ice Blue + Cloud */
.fs-section--cloud-dynamic {
background:
radial-gradient(ellipse at 15% 60%, rgba(217,228,255,0.50) 0%, transparent 55%),
radial-gradient(ellipse at 85% 20%, rgba(244,246,250,0.80) 0%, transparent 50%),
#F4F6FA;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.fs-section--cloud-dynamic {
background:
radial-gradient(ellipse at 15% 60%, rgba(38,42,95,0.35) 0%, transparent 55%),
radial-gradient(ellipse at 85% 20%, rgba(59,74,138,0.20) 0%, transparent 50%),
#1A1D2A;
}
}
[data-theme="dark"] .fs-section--cloud-dynamic {
background:
radial-gradient(ellipse at 15% 60%, rgba(38,42,95,0.35) 0%, transparent 55%),
radial-gradient(ellipse at 85% 20%, rgba(59,74,138,0.20) 0%, transparent 50%),
#1A1D2A;
}
/* iubenda — allineamento al design system */
.iubenda_policy .iubenda_policy_content {
font-family: var(--fs-font-primary) !important;
font-size: var(--fs-t-body) !important;
line-height: var(--fs-lh-body) !important;
color: var(--fs-text) !important;
}
.iubenda_policy h1,
.iubenda_policy h2,
.iubenda_policy h3 {
font-family: var(--fs-font-display) !important;
color: var(--fs-primary) !important;
}
.iubenda_policy a {
color: var(--fs-primary) !important;
}
/* Titoli ridotti per pagine legali (~89% rispetto alla home) */
body.fs-page-legal h1,
body.fs-page-legal .fancy-title-head h1,
body.fs-page-legal .fs-headline-premium {
font-size: clamp(1.8rem, 3.2vw + 0.4rem, 3.4rem) !important;
}
body.fs-page-legal h2 {
font-size: clamp(1.35rem, 2vw + 0.3rem, 2.2rem) !important;
}
body.fs-page-legal h3 {
font-size: clamp(1.1rem, 1.3vw + 0.25rem, 1.6rem) !important;
}
body.fs-page-legal p.fs-section-subtitle {
font-size: clamp(0.95rem, 0.35vw + 0.75rem, 1.1rem) !important;
}
/* Riduci anche i titoli con gradienti animati nelle pagine legali */
body.fs-page-legal .fs-gradient-navy.fs-gradient--animated,
body.fs-page-legal .fs-gradient-amber.fs-gradient--animated {
font-size: clamp(1.8rem, 3.2vw + 0.4rem, 3.4rem) !important;
}
/* Contenuto Legalblink embeddato */
.fs-legalblink-content {
font-family: var(--fs-font-primary);
font-size: var(--fs-t-body);
line-height: var(--fs-lh-body);
color: var(--fs-text);
max-width: var(--fs-w-default);
margin-inline: auto;
}
.fs-legalblink-content h1,
.fs-legalblink-content h2,
.fs-legalblink-content h3,
.fs-legalblink-content h4 {
font-family: var(--fs-font-display);
color: var(--fs-primary);
}
.fs-legalblink-content a {
color: var(--fs-primary);
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.fs-legalblink-content {
color: var(--fs-text-on-dark);
}
.fs-legalblink-content h1,
.fs-legalblink-content h2,
.fs-legalblink-content h3,
.fs-legalblink-content h4 {
color: var(--fs-ice);
}
.fs-legalblink-content a {
color: var(--fs-ice) !important;
}
.fs-legalblink-content * {
color: inherit !important;
background-color: transparent !important;
}
}
[data-theme="dark"] .fs-legalblink-content {
color: var(--fs-text-on-dark);
}
[data-theme="dark"] .fs-legalblink-content h1,
[data-theme="dark"] .fs-legalblink-content h2,
[data-theme="dark"] .fs-legalblink-content h3,
[data-theme="dark"] .fs-legalblink-content h4 {
color: var(--fs-ice);
}
[data-theme="dark"] .fs-legalblink-content a {
color: var(--fs-ice) !important;
}
[data-theme="dark"] .fs-legalblink-content * {
color: inherit !important;
background-color: transparent !important;
}
/* Light mode */
.fs-legalblink-content a {
color: var(--fs-primary) !important;
}
/* nasconde secondo banner cookie */
.lb-show-cookie-consent .c--anim #cc_div #cm {
opacity: 0 !important;
visibility: visible !important;
transform: scale(1);
}
/* ═══════════════════════════════════════════════════════════
B17‑bis — WPBakery AUTO-CENTERING
Centra automaticamente il contenuto di tutte le righe
WPBakery senza bisogno di classi manuali.
═══════════════════════════════════════════════════════════ */
body .vc_row .vc_column_container > .vc_column-inner {
max-width: var(--fs-w-default);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 3rem);
}
/* ═══════════════════════════════════════════════════════════
B18 — PRINT STYLES
#R: Ottimizza la stampa, utile per SEO e accessibilità.
═══════════════════════════════════════════════════════════ */
@media print {
* {
background: #fff !important;
color: #000 !important;
text-shadow: none !important;
box-shadow: none !important;
}
body {
font-family: Georgia, "Times New Roman", serif;
font-size: 12pt;
line-height: 1.6;
}
nav,
header.header-bar,
.mobile-header-bar,
#footer,
#bottom-bar,
.fs-cf-btn-wrap,
.fs-cf-skip,
.fs-cf-progress,
.fs-logo-strip,
.fs-pin-section,
.fs-cf-error {
display: none !important;
}
.fs-cf-step,
.fs-cf-success {
position: static !important;
visibility: visible !important;
opacity: 1 !important;
}
.fs-container,
.fs-section {
max-width: 100%;
padding: 20px 0;
margin: 0;
}
h1, h2, h3, h4 {
page-break-after: avoid;
break-after: avoid;
}
img, svg {
max-width: 100% !important;
page-break-inside: avoid;
break-inside: avoid;
}
a { text-decoration: underline; }
}
/* ═══════════════════════════════════════════════════════════
B19 — APPLE-STYLE TEXT REVEAL (scroll-driven word fade)
Opt-in. Aggiungi .fs-reveal-words al singolo heading,
oppure .fs-reveal-words-section al vc_row "solo testo"
(verranno presi tutti gli h1/h2/h3 interni).
Driver: fs-main.js § 9 — Dipendenze: GSAP + ScrollTrigger.
#R: NON combinare con .fs-gradient-navy/amber/slate o
.fs-gradient--animated: il background-clip:text del
parent non si propaga ai figli.
═══════════════════════════════════════════════════════════ */
/* Stato iniziale di ogni parola (pre-scrub) */
.fs-reveal-words .fs-word,
h1.fs-reveal-words > .fs-word,
h2.fs-reveal-words > .fs-word,
h3.fs-reveal-words > .fs-word,
h4.fs-reveal-words > .fs-word,
h5.fs-reveal-words > .fs-word,
h6.fs-reveal-words > .fs-word,
p.fs-reveal-words > .fs-word {
--fs-rw-opacity: 0.15;
--fs-rw-blur: 6px;
--fs-rw-y: 8px;
display: inline-block !important;
opacity: var(--fs-rw-opacity) !important;
filter: blur(var(--fs-rw-blur)) !important;
-webkit-filter: blur(var(--fs-rw-blur)) !important;
transform: translateY(var(--fs-rw-y)) !important;
will-change: opacity, filter, transform;
}
/* Contenitore: scale-in reveal durante lo scroll */
.fs-reveal-words {
transform: scale(0.92);
transform-origin: center center;
will-change: transform;
transition: transform 0.1s linear; /* transizione minima, GSAP la sovrascrive */
}
/* Quando GSAP ha finito, scala piena */
.fs-reveal-words.is-revealed {
transform: scale(1);
}
/* Fallback: split fallito o JS non disponibile */
.fs-reveal-words.fs-no-split,
.fs-reveal-words.fs-no-split .fs-word {
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
transform: none !important;
will-change: auto !important;
}
/* Reduced motion: testo sempre leggibile, niente effetto */
@media (prefers-reduced-motion: reduce) {
.fs-reveal-words .fs-word {
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
transform: none !important;
will-change: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
B20 — Google reCAPTCHA V3
═══════════════════════════════════════════════════════════ */
/* Nasconde il badge di Google reCAPTCHA in modo sicuro */
.grecaptcha-badge {
visibility: hidden !important;
}