/*
Theme Name: temascf
Author: S.C.F. Group Srl
Author URI: https://www.scfgroup.it/
Description: Tema su misura S.C.F. Group — fondo bianco, palette viola brand, header e footer gestiti da codice, compatibile Elementor.
Version: 30.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temascf
*/
/* =========================================================================
1. TOKEN
Palette estratta dal logo: viola #3D0779 dominante, blu #2E408D secondario.
Il magenta chiude il gradiente ed e' solo un accento.
========================================================================= */
:root {
--scf-ink: #0B0A12;
--scf-ink-2: #4A4757;
--scf-ink-3: #6B657A; /* 5.6:1 su bianco, 5.2:1 su surface-2 — AA superata */
--scf-line: #E7E4F0;
--scf-line-2: #EFEDF5;
--scf-surface: #FFFFFF;
--scf-surface-2: #F7F6FB;
--scf-surface-3: #FCFBFE;
--scf-tint: #F2ECFD;
--scf-purple: #3D0779;
--scf-purple-700: #55129E;
--scf-violet: #7B18C9;
--scf-magenta: #C31FA0;
--scf-blue: #2E408D;
--scf-grad: linear-gradient(102deg, #3D0779 0%, #7B18C9 46%, #C31FA0 100%);
--scf-grad-soft: linear-gradient(102deg, rgba(61,7,121,.10) 0%, rgba(195,31,160,.10) 100%);
--scf-radius-sm: 8px;
--scf-radius: 12px;
--scf-radius-lg: 20px;
--scf-radius-xl: 24px;
--scf-radius-2xl: 32px;
--scf-shadow: 0 26px 50px -28px rgba(11,10,18,.35);
--scf-shadow-sm: 0 14px 30px -20px rgba(11,10,18,.3);
--scf-ease: cubic-bezier(.22,.61,.36,1);
--scf-wrap: 1280px;
--scf-gutter: 80px;
--scf-section: 128px;
--scf-header-h: 88px;
--scf-font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--scf-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
scroll-behavior: smooth;
color-scheme: light;
}
@media (max-width: 1200px) { :root { --scf-gutter: 48px; --scf-section: 96px; } }
@media (max-width: 780px) { :root { --scf-gutter: 20px; --scf-section: 72px; --scf-header-h: 64px; } }
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }
/* La home e' una vetrina e vive di respiro; le pagine interne aprono gia' con
briciole, sopratitolo, titolo e sommario, quindi con la stessa aria fra le
fasce i blocchi restavano troppo lontani. Qui il ritmo verticale si stringe. */
body:not(.home) { --scf-section: 84px; }
@media (max-width: 1200px) { body:not(.home) { --scf-section: 68px; } }
@media (max-width: 780px) { body:not(.home) { --scf-section: 52px; } }
/* =========================================================================
2. RESET E BASE
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--scf-surface);
color: var(--scf-ink);
font-family: var(--scf-font);
font-size: 17px;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video, canvas, iframe { max-width: 100%; }
img, svg, video { height: auto; display: block; }
a { color: var(--scf-purple-700); text-decoration: none; transition: color .22s ease; }
a:hover { color: var(--scf-magenta); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--scf-tint); color: var(--scf-purple); }
:focus-visible {
outline: 3px solid var(--scf-violet);
outline-offset: 2px;
border-radius: 4px;
}
hr { border: 0; height: 1px; background: var(--scf-line); margin: 40px 0; }
/* salta al contenuto: accessibilita' */
.scf-skip {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--scf-purple); color: #fff; padding: 12px 20px;
border-radius: 0 0 var(--scf-radius) 0; font-weight: 600;
}
.scf-skip:focus { left: 0; color: #fff; }
/* =========================================================================
3. TIPOGRAFIA
Titoli sempre a tracking negativo: alle dimensioni display l'interlettera
di default apre troppo le parole.
========================================================================= */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .5em;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.028em;
color: var(--scf-ink);
text-wrap: balance;
}
/* Scala dei titoli: H1 al massimo 60px, gli altri a scendere con rapporto
~1,4 (60 / 42 / 28 / 21 / 18 / 16). Le pendenze in vw sono tarate perche'
il massimo si raggiunga intorno ai 1440px e sotto i 780px si stia sul minimo. */
h1 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.034em; }
h2 { font-size: clamp(27px, 2.9vw, 42px); line-height: 1.1; letter-spacing: -0.028em; }
h3 { font-size: clamp(21px, 1.95vw, 28px); line-height: 1.2; letter-spacing: -0.018em; font-weight: 700; }
h4 { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.3; letter-spacing: -0.012em; font-weight: 700; }
h5 { font-size: 18px; font-weight: 700; }
h6 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 1.2em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .5em; }
blockquote {
margin: 32px 0;
padding: 4px 0 4px 28px;
border-left: 3px solid var(--scf-purple);
font-size: 1.15em;
line-height: 1.5;
font-weight: 600;
letter-spacing: -0.014em;
}
code, pre, kbd {
font-family: var(--scf-mono);
font-size: .92em;
}
code { background: var(--scf-surface-2); padding: 2px 6px; border-radius: 6px; }
pre {
background: var(--scf-surface-2); padding: 20px 24px;
border-radius: var(--scf-radius); overflow-x: auto;
border: 1px solid var(--scf-line);
}
pre code { background: none; padding: 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--scf-line); text-align: left; }
th { font-weight: 700; background: var(--scf-surface-2); }
figure { margin: 32px 0; }
figcaption { margin-top: 12px; font-size: 14px; color: var(--scf-ink-3); }
/*
* L'attributo hidden deve vincere sempre. Il valore predefinito del browser
* (display:none) ha specificita' minima, quindi qualunque classe che imposta
* un display lo annulla in silenzio: il pulsante "Carica altri progetti"
* (.scf-btn, inline-flex) e il riquadro "Nessun risultato" (.scf-empty, flex)
* restavano a schermo anche con hidden impostato dal JavaScript.
*/
[hidden] { display: none !important; }
/* eyebrow monospace */
.scf-eyebrow {
display: inline-block;
font-family: var(--scf-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--scf-purple);
margin: 0;
}
.scf-eyebrow--muted { color: var(--scf-ink-3); }
/* parola in gradiente */
.scf-grad-text {
background: var(--scf-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.scf-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.62; color: var(--scf-ink-2); }
/* =========================================================================
4. LAYOUT
========================================================================= */
.scf-wrap {
width: 100%;
max-width: calc(var(--scf-wrap) + var(--scf-gutter) * 2);
margin-inline: auto;
padding-inline: var(--scf-gutter);
}
.scf-section { padding-block: var(--scf-section); }
.scf-section--tight { padding-block: calc(var(--scf-section) * .62); }
.scf-section--alt { background: var(--scf-surface-2); }
.scf-stack { display: flex; flex-direction: column; }
.scf-stack--sm { gap: 12px; }
.scf-stack--md { gap: 20px; }
.scf-stack--lg { gap: 30px; }
.scf-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.scf-grid { display: grid; gap: 24px; }
.scf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
/* le card degli articoli respirano un po' di piu'. Sta qui e non in uno stile
in linea perche' da telefono lo slider deve poter azzerare questo spazio, e
un valore in linea non si batte da un foglio di stile. */
.scf-grid--news { gap: 28px; }
/* intestazione di sezione: titolo a sinistra, spalla a destra */
.scf-sechead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 60px;
margin-bottom: 48px;
}
.scf-sechead__main { display: flex; flex-direction: column; gap: 20px; }
.scf-sechead__main h2, .scf-sechead__main h1 { margin: 0; }
.scf-sechead__aside { max-width: 360px; margin-bottom: 8px; color: var(--scf-ink-2); }
/* un link dentro un paragrafo si riconosce anche senza il colore */
.scf-sechead__aside a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* =========================================================================
5. BOTTONI
Pill piena: richiama il cerchio del marchio. Freccia sempre in coda.
========================================================================= */
.scf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 54px;
padding: 0 30px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
text-align: center;
transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.scf-btn svg { flex-shrink: 0; transition: transform .28s var(--scf-ease); }
.scf-btn:hover svg { transform: translateX(5px); }
.scf-btn--primary { background: var(--scf-purple); color: #fff; }
.scf-btn--primary:hover { background: var(--scf-violet); color: #fff; box-shadow: 0 12px 30px -12px rgba(123,24,201,.7); }
.scf-btn--grad { background: var(--scf-grad); color: #fff; }
.scf-btn--grad:hover { color: #fff; box-shadow: 0 14px 34px -12px rgba(195,31,160,.75); }
.scf-btn--ghost { background: transparent; color: var(--scf-ink); border-color: #D9D4E8; }
.scf-btn--ghost:hover { border-color: var(--scf-purple); color: var(--scf-purple); background: var(--scf-surface-2); }
.scf-btn--white { background: #fff; color: var(--scf-purple); }
.scf-btn--white:hover { background: var(--scf-tint); color: var(--scf-purple); box-shadow: 0 14px 34px -14px rgba(0,0,0,.5); }
.scf-btn--sm { height: 44px; padding: 0 22px; font-size: 15px; }
.scf-btn--full { width: 100%; }
.scf-btn--link {
height: auto; padding: 0 0 6px; border-radius: 0;
color: var(--scf-purple); border-bottom: 2px solid var(--scf-line);
}
.scf-btn--link:hover { border-bottom-color: var(--scf-magenta); color: var(--scf-magenta); background: none; }
/* =========================================================================
6. HEADER
========================================================================= */
.scf-header {
position: sticky;
top: 0;
z-index: 90;
height: var(--scf-header-h);
background: rgba(255,255,255,.92);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--scf-line-2);
transition: box-shadow .3s ease;
}
.scf-header--scrolled { box-shadow: 0 12px 30px -24px rgba(11,10,18,.5); }
.scf-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
height: 100%;
}
.scf-logo { display: block; flex-shrink: 0; }
.scf-logo img { width: 232px; height: auto; display: block; }
.scf-logo__text { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--scf-ink); }
/* navigazione principale */
.scf-nav { display: flex; align-items: center; gap: 34px; }
.scf-nav__list {
display: flex;
align-items: center;
gap: 34px;
margin: 0;
padding: 0;
list-style: none;
}
.scf-nav__list > li { margin: 0; position: static; }
.scf-nav__list > li > a {
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
padding: 8px 0;
font-size: 16px;
font-weight: 500;
color: var(--scf-ink);
}
.scf-nav__list > li > a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 2px; width: 0;
background: var(--scf-grad);
transition: width .3s var(--scf-ease);
}
.scf-nav__list > li > a:hover,
.scf-nav__list > li.current-menu-item > a,
.scf-nav__list > li.current-menu-ancestor > a,
.scf-nav__list > li.is-open > a { color: var(--scf-purple); }
.scf-nav__list > li > a:hover::after,
.scf-nav__list > li.current-menu-item > a::after,
.scf-nav__list > li.current-menu-ancestor > a::after,
.scf-nav__list > li.is-open > a::after { width: 100%; }
.scf-nav__caret { transition: transform .3s var(--scf-ease); }
.scf-nav__list > li.is-open .scf-nav__caret { transform: rotate(180deg); }
.scf-header__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.scf-iconbtn {
display: flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 999px;
border: 1px solid var(--scf-line);
background: #fff;
transition: border-color .22s ease, background .22s ease;
}
.scf-iconbtn:hover { border-color: var(--scf-purple); background: var(--scf-surface-2); }
/* =========================================================================
7. MEGA-MENU
Le colonne sono i figli di primo livello della voce; icona, descrizione e
card in evidenza arrivano dai campi impostati sulla voce di menu.
========================================================================= */
.scf-mega {
position: absolute;
left: 0; right: 0;
top: 100%;
background: #fff;
border-bottom: 1px solid var(--scf-line);
box-shadow: 0 32px 60px -34px rgba(11,10,18,.35);
padding: 44px 0 40px;
opacity: 0;
visibility: hidden;
transform: translateY(-14px);
transition: opacity .3s ease, transform .3s var(--scf-ease), visibility .3s;
z-index: 89;
}
.scf-nav__list > li.is-open .scf-mega { opacity: 1; visibility: visible; transform: none; }
.scf-mega__cols {
display: grid;
grid-template-columns: repeat(var(--scf-mega-cols, 5), minmax(0, 1fr));
gap: 22px;
}
.scf-mega__col { display: flex; flex-direction: column; gap: 18px; }
/* titoli di colonna su una riga anche con sei colonne ("Sviluppo E-commerce"):
corpo 15 px, lettere piu' strette, niente a capo */
.scf-mega__head {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--scf-line);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.02em;
white-space: nowrap;
color: var(--scf-ink);
}
.scf-mega__head:hover { color: var(--scf-purple); }
.scf-mega__head svg, .scf-mega__head img { width: 18px; height: 18px; flex-shrink: 0; }
/* riga di sintesi facoltativa sotto il titolo di colonna (campo "Descrizione
breve" della voce di menu); non compare finche' il campo e' vuoto */
.scf-mega__desc { display: block; margin-top: -8px; font-size: 13px; line-height: 1.45; color: var(--scf-ink-3); }
.scf-mega__sub .scf-mega__desc { margin-top: 2px; font-size: 12px; }
.scf-mega__sub { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.scf-mega__sub li { margin: 0; }
.scf-mega__sub a {
display: block;
font-size: 15px;
line-height: 1.45;
color: var(--scf-ink-2);
transition: color .2s ease, transform .2s ease;
}
.scf-mega__sub a:hover { color: var(--scf-purple); transform: translateX(3px); }
.scf-mega__sub .scf-is-highlight > a { color: var(--scf-purple); font-weight: 600; }
/* riga in evidenza sotto le colonne */
.scf-mega__foot {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
margin-top: 38px;
padding-top: 32px;
border-top: 1px solid var(--scf-line-2);
align-items: center;
}
.scf-mega__promo { position: relative; border-radius: 18px; overflow: hidden; display: block; min-height: 148px; }
.scf-mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--scf-ease); }
.scf-mega__promo:hover img { transform: scale(1.06); }
.scf-mega__promo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(160deg, rgba(46,64,141,.92) 0%, rgba(61,7,121,.92) 100%);
mix-blend-mode: multiply;
}
.scf-mega__promo-body {
position: relative; z-index: 2;
padding: 22px;
display: flex; flex-direction: column; justify-content: space-between;
min-height: 148px; color: #fff;
}
.scf-mega__claim { font-size: 17px; line-height: 1.5; font-weight: 600; letter-spacing: -0.012em; color: var(--scf-ink); margin: 0; }
.scf-mega__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.scf-mega__phone { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--scf-ink); }
/* overlay sotto il mega-menu */
.scf-mega-veil {
position: fixed; inset: var(--scf-header-h) 0 0;
background: rgba(11,10,18,.28);
opacity: 0; visibility: hidden;
transition: opacity .3s ease, visibility .3s;
z-index: 80;
}
body.scf-mega-open .scf-mega-veil { opacity: 1; visibility: visible; }
/* =========================================================================
8. MENU MOBILE
========================================================================= */
.scf-burger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px; height: 44px;
border-radius: 999px;
border: 1px solid var(--scf-line);
background: #fff;
}
.scf-burger span {
display: block; width: 18px; height: 2px; border-radius: 2px;
background: var(--scf-ink);
transition: transform .3s var(--scf-ease), opacity .2s ease;
}
.scf-burger[aria-expanded="true"] { background: var(--scf-purple); border-color: var(--scf-purple); }
.scf-burger[aria-expanded="true"] span { background: #fff; }
.scf-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.scf-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.scf-drawer {
position: fixed;
inset: var(--scf-header-h) 0 0;
background: #fff;
z-index: 88;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .34s var(--scf-ease);
visibility: hidden;
}
body.scf-drawer-open .scf-drawer { transform: none; visibility: visible; }
body.scf-drawer-open { overflow: hidden; }
.scf-drawer__body { flex: 1; overflow-y: auto; padding: 22px var(--scf-gutter) 0; -webkit-overflow-scrolling: touch; }
.scf-drawer__foot {
flex-shrink: 0;
padding: 16px var(--scf-gutter) 24px;
border-top: 1px solid var(--scf-line-2);
background: #fff;
box-shadow: 0 -18px 30px -24px rgba(11,10,18,.4);
}
.scf-drawer__list, .scf-drawer__sub { list-style: none; margin: 0; padding: 0; }
.scf-drawer__list > li { border-bottom: 1px solid var(--scf-line-2); }
.scf-drawer__list > li > a,
.scf-drawer__list > li > .scf-drawer__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 60px;
padding: 0;
border: 0;
background: none;
text-align: left;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--scf-ink);
}
.scf-drawer__list > li.is-open > .scf-drawer__toggle { color: var(--scf-purple); }
.scf-drawer__toggle svg { transition: transform .3s var(--scf-ease); }
.scf-drawer__list > li.is-open > .scf-drawer__toggle svg { transform: rotate(45deg); }
.scf-drawer__sub {
display: none;
flex-direction: column;
gap: 2px;
padding: 4px 0 20px 16px;
margin-bottom: 4px;
border-left: 2px solid #EDE7FA;
}
.scf-drawer__list > li.is-open > .scf-drawer__sub { display: flex; }
.scf-drawer__sub a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 46px;
font-size: 16px;
color: var(--scf-ink-2);
}
.scf-drawer__sub a:hover { color: var(--scf-purple); }
.scf-drawer__search { padding: 4px 0 18px; }
.scf-drawer__search .scf-search--lg { height: 50px; }
.scf-drawer__search .scf-search--lg input { font-size: 16px; }
.scf-drawer__search .scf-btn { height: 40px; padding-inline: 16px; }
/* nel menu il pannello dei suggerimenti scorre con il resto, non sopra */
.scf-drawer__search .scf-suggest { position: static; margin-top: 10px; max-height: none; box-shadow: none; }
.scf-drawer__contacts { display: flex; flex-direction: column; gap: 12px; padding: 26px 0 20px; }
.scf-drawer__contacts a {
display: flex; align-items: center; gap: 12px;
min-height: 44px; font-size: 17px; font-weight: 600; color: var(--scf-ink);
}
/* =========================================================================
9. HERO E DECORAZIONI
========================================================================= */
/* --overflow: i contenitori Elementor leggono overflow da quella variabile e
il loro foglio arriva dopo questo, quindi la sola proprieta' non basta. */
.scf-hero { position: relative; overflow: hidden; --overflow: hidden; padding-block: clamp(48px, 6vw, 96px) clamp(56px, 6.5vw, 104px); }
/* Rete di sicurezza: le decorazioni assolute (blob, archi) sporgono di
proposito dal loro blocco; se un blocco non le ritaglia, la pagina non deve
comunque scorrere in orizzontale. clip non crea un contesto di scorrimento,
quindi header sticky e ancore continuano a funzionare. */
.scf-main { overflow-x: clip; }
.scf-hero__grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
.scf-hero__body { display: flex; flex-direction: column; gap: 30px; }
.scf-hero__body h1 { margin: 0; }
.scf-blob {
position: absolute;
border-radius: 999px;
pointer-events: none;
background: radial-gradient(circle at 36% 36%, rgba(195,31,160,.10) 0%, rgba(123,24,201,.08) 40%, rgba(255,255,255,0) 70%);
}
.scf-blob--tr { top: -280px; right: -220px; width: 900px; height: 900px; }
.scf-blob--tl { top: -300px; left: -200px; width: 800px; height: 800px;
background: radial-gradient(circle at 50% 50%, rgba(123,24,201,.09) 0%, rgba(255,255,255,0) 68%); }
.scf-arcs { position: absolute; pointer-events: none; opacity: .5; }
.scf-media {
position: relative;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(146deg, #2E408D 0%, #3D0779 48%, #7B18C9 100%);
}
.scf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scf-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(11,10,18,0) 46%, rgba(14,2,32,.6) 100%);
}
.scf-media__body { position: relative; z-index: 2; }
/* pillola statistiche flottante */
.scf-statcard {
position: absolute;
left: -56px; bottom: 64px;
background: #fff;
border-radius: var(--scf-radius-lg);
padding: 22px 26px;
box-shadow: 0 30px 60px -30px rgba(11,10,18,.45);
display: flex;
align-items: center;
gap: 18px;
}
.scf-statcard__n { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.scf-statcard__sep { width: 1px; height: 46px; background: var(--scf-line); }
/* striscia fiducia */
.scf-trust {
border-block: 1px solid var(--scf-line-2);
background: var(--scf-surface-3);
padding-block: 30px;
}
.scf-trust__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.scf-trust__sep { width: 1px; height: 40px; background: var(--scf-line); }
.scf-badge-iso {
display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 999px;
border: 1.5px solid var(--scf-purple); flex-shrink: 0;
}
/* =========================================================================
10. CARD
========================================================================= */
/* --- card servizio --- */
.scf-svc {
display: flex;
flex-direction: column;
gap: 14px;
padding: 26px;
height: 100%;
border: 1px solid var(--scf-line);
border-radius: var(--scf-radius-lg);
background: #fff;
transition: transform .35s var(--scf-ease), box-shadow .35s ease, border-color .35s ease;
}
.scf-svc:hover { transform: translateY(-6px); box-shadow: var(--scf-shadow); border-color: transparent; }
.scf-svc__icon {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 14px;
background: var(--scf-tint); color: var(--scf-purple);
}
.scf-svc h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.016em; color: var(--scf-ink); }
.scf-svc p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--scf-ink-2); }
.scf-svc__rule {
width: 32px; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, var(--scf-purple), var(--scf-magenta));
transition: width .35s var(--scf-ease);
margin-top: auto;
}
.scf-svc:hover .scf-svc__rule { width: 76px; }
.scf-svc--feature { border-color: #D6C6F2; background: linear-gradient(168deg, #FBF8FF 0%, #FFFFFF 62%); }
.scf-svc--feature .scf-svc__icon { background: var(--scf-grad); color: #fff; }
.scf-tagnew {
display: inline-flex; align-items: center;
font-family: var(--scf-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: #fff; background: var(--scf-magenta); border-radius: 999px; padding: 3px 9px;
}
/* --- card progetto --- */
.scf-proj {
position: relative;
display: flex;
flex-direction: column;
transition: transform .38s var(--scf-ease);
}
.scf-proj:hover { transform: translateY(-6px); }
.scf-proj__media {
position: relative;
border-radius: var(--scf-radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
background: linear-gradient(142deg, #2E408D 0%, #3D0779 62%, #7B18C9 100%);
}
.scf-proj__media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .8s var(--scf-ease);
}
.scf-proj:hover .scf-proj__media img { transform: scale(1.08); }
.scf-proj__veil {
position: absolute; inset: 0; opacity: 0;
background: linear-gradient(180deg, rgba(26,3,54,.1) 0%, rgba(26,3,54,.86) 100%);
transition: opacity .42s ease;
}
.scf-proj:hover .scf-proj__veil { opacity: 1; }
.scf-proj__reveal {
position: absolute; left: 24px; right: 24px; bottom: 24px;
opacity: 0; transform: translateY(14px);
font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.92);
transition: opacity .42s ease, transform .42s var(--scf-ease);
}
.scf-proj:hover .scf-proj__reveal { opacity: 1; transform: none; }
.scf-proj__badge {
position: absolute; top: 18px; left: 18px;
display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
border-radius: 999px; background: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
font-size: 12px; font-weight: 600; color: var(--scf-purple);
}
/*
* "In evidenza": stessa geometria del badge della categoria qui sopra (altezza
* 30, raggio pieno, 12px/600), cosi' i due angoli si somigliano, ma a fondo
* pieno viola -- nel tema la pillola viola piena vuol dire "attivo", come in
* .scf-chip.is-on: e' la stessa cosa che sta dicendo qui.
*
* Sta nell'angolo dove al passaggio del mouse compare la freccia "apri":
* invece di sovrapporsi, i due si scambiano il posto.
*/
.scf-proj__evid {
position: absolute; top: 18px; right: 18px;
display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
border-radius: 999px;
background: var(--scf-purple); color: #fff;
font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
transition: opacity .38s var(--scf-ease), transform .38s var(--scf-ease);
}
.scf-proj:hover .scf-proj__evid { opacity: 0; transform: scale(.85); }
/*
* Con "In evidenza" nell'angolo opposto, il badge della categoria non puo'
* piu' prendersi tutta la larghezza: su una card stretta "Sito pubblica
* amministrazione" ci finiva sopra (misurato: 59 px di sovrapposizione a
* 900 px con tre colonne). Qui si accorcia con i puntini invece di
* sovrapporsi. 95 px sono la pillola "In evidenza" piu' dieci di respiro.
*/
.scf-proj__media.has-evid .scf-proj__badge {
max-width: calc(100% - 36px - 95px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.scf-proj__go {
position: absolute; top: 16px; right: 16px;
display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 999px;
background: rgba(255,255,255,.16);
opacity: 0; transform: scale(.85);
transition: opacity .38s var(--scf-ease), transform .38s var(--scf-ease);
}
.scf-proj:hover .scf-proj__go { opacity: 1; transform: none; }
.scf-proj__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 4px 0; }
.scf-proj__title { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; color: var(--scf-ink); transition: color .24s ease; }
.scf-proj:hover .scf-proj__title { color: var(--scf-purple); }
.scf-tstack { display: flex; flex-wrap: wrap; gap: 6px; }
.scf-tstack span {
display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
border-radius: 6px; background: #F1EFF8;
font-size: 11px; font-weight: 600; color: #565068;
}
/* card progetto grande (hero portfolio / home) */
.scf-proj--wide .scf-proj__media { aspect-ratio: 16 / 10; }
/* --- card articolo --- */
.scf-post { display: flex; flex-direction: column; gap: 18px; }
.scf-post__thumb {
position: relative; border-radius: 18px; overflow: hidden;
aspect-ratio: 16 / 10; background: var(--scf-tint);
}
.scf-post__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--scf-ease); }
.scf-post:hover .scf-post__thumb img { transform: scale(1.06); }
.scf-post h3, .scf-post h4 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.016em; line-height: 1.28; transition: color .25s ease; }
.scf-post:hover h3, .scf-post:hover h4 { color: var(--scf-purple); }
.scf-post p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scf-ink-2); }
.scf-post__meta { font-family: var(--scf-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--scf-ink-3); }
/* --- card generica / contatti --- */
.scf-card {
display: flex; flex-direction: column; gap: 14px;
padding: 30px;
border: 1px solid var(--scf-line);
border-radius: var(--scf-radius-lg);
background: #fff;
transition: transform .3s var(--scf-ease), box-shadow .3s ease, border-color .3s ease;
}
.scf-card:hover { transform: translateY(-5px); box-shadow: var(--scf-shadow-sm); border-color: transparent; }
.scf-card__icon {
display: flex; align-items: center; justify-content: center;
width: 50px; height: 50px; border-radius: 15px;
background: var(--scf-tint); color: var(--scf-purple); flex-shrink: 0;
}
/* --- chip tecnologia --- */
.scf-tech {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
min-height: 116px; padding: 18px 12px;
border: 1px solid var(--scf-line);
border-radius: 16px;
background: #fff;
font-size: 16px; font-weight: 600; color: var(--scf-ink-2);
letter-spacing: -0.01em; text-align: center;
transition: color .28s ease, border-color .28s ease, transform .28s ease;
}
.scf-tech:hover { color: var(--scf-purple); border-color: #C9BEEA; transform: translateY(-3px); }
.scf-tech img { max-height: 40px; width: auto; object-fit: contain; }
/* --- numeri --- */
.scf-stat { display: flex; flex-direction: column; gap: 4px; }
/* cifre tutte della stessa larghezza: mentre il numero sale da 0 al suo valore
non deve ballare da un fotogramma all'altro */
.scf-stat__n { font-size: clamp(36px, 3.8vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.scf-stat__l { font-size: 14px; color: var(--scf-ink-2); }
/* --- passo numerato --- */
.scf-step {
display: flex; flex-direction: column; gap: 14px;
padding-top: 24px;
border-top: 2px solid var(--scf-line);
transition: border-color .3s ease;
}
.scf-step:hover { border-top-color: var(--scf-purple); }
.scf-step__n { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
/* --- riga funzione numerata --- */
.scf-feat {
display: grid; grid-template-columns: 56px 1fr; gap: 22px;
align-items: start; padding: 28px 0;
border-bottom: 1px solid var(--scf-line-2);
}
.scf-feat:first-child { border-top: 1px solid var(--scf-line-2); }
/* wpautop infila vuoti tra i figli della griglia e sposta il testo
nella colonna del numero: non sono elementi della griglia */
.scf-feat > p:empty, .scf-feat > br, .scf-grid > p:empty, .scf-stack > p:empty { display: none; }
.scf-feat h3 { margin: 0 0 8px; font-size: 22px; }
.scf-feat p { margin: 0; color: var(--scf-ink-2); font-size: 16px; }
/* --- link correlato --- */
.scf-rel {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 24px 26px;
border: 1px solid var(--scf-line);
border-radius: 18px;
background: #fff;
font-size: 18px; font-weight: 700; letter-spacing: -0.014em; color: var(--scf-ink);
transition: transform .3s var(--scf-ease), box-shadow .3s ease, border-color .3s ease;
}
.scf-rel:hover { transform: translateY(-4px); box-shadow: var(--scf-shadow-sm); border-color: transparent; color: var(--scf-ink); }
.scf-rel svg { flex-shrink: 0; color: var(--scf-purple); transition: transform .3s var(--scf-ease); }
.scf-rel:hover svg { transform: translateX(5px); }
/* =========================================================================
11. FILTRI PORTFOLIO
========================================================================= */
.scf-filters {
border: 1px solid #EDEAF5;
border-radius: var(--scf-radius-xl);
background: var(--scf-surface-3);
padding: 26px 28px;
display: flex;
flex-direction: column;
gap: 22px;
}
.scf-filters__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scf-filters__sep { height: 1px; background: #EDEAF5; }
.scf-filters__label { margin-right: 4px; }
.scf-chip {
display: inline-flex; align-items: center; gap: 8px;
height: 46px; padding: 0 20px;
border: 1px solid var(--scf-line); border-radius: 999px;
background: #fff;
font-size: 15px; font-weight: 500; color: #2E2B39; white-space: nowrap;
transition: border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}
.scf-chip:hover { border-color: #B9A6E6; color: var(--scf-purple); background: #FBF9FF; }
.scf-chip__n { font-size: 12px; font-weight: 600; color: #67617A; font-variant-numeric: tabular-nums; }
.scf-chip:hover .scf-chip__n { color: var(--scf-violet); }
.scf-chip.is-on {
background: var(--scf-purple); border-color: var(--scf-purple); color: #fff;
box-shadow: 0 10px 24px -14px rgba(61,7,121,.9);
}
.scf-chip.is-on:hover { background: var(--scf-purple-700); border-color: var(--scf-purple-700); color: #fff; }
.scf-chip.is-on .scf-chip__n { color: rgba(255,255,255,.72); }
.scf-tagchip {
display: inline-flex; align-items: center;
height: 34px; padding: 0 14px;
border: 1px solid #EDEAF5; border-radius: var(--scf-radius-sm);
background: #FBFAFE;
font-size: 13px; font-weight: 500; color: #504B60; white-space: nowrap;
transition: all .2s ease;
}
.scf-tagchip:hover { border-color: #C4B4EC; color: var(--scf-purple); background: #F5F0FE; }
.scf-tagchip.is-on { background: var(--scf-tint); border-color: #A889E2; color: var(--scf-purple); font-weight: 600; }
.scf-search {
display: flex; align-items: center; gap: 10px;
height: 46px; padding: 0 16px; flex: 1 1 320px; min-width: 260px;
border: 1px solid var(--scf-line); border-radius: 999px; background: #fff;
transition: border-color .22s ease, box-shadow .22s ease;
}
.scf-search:focus-within { border-color: var(--scf-purple); box-shadow: 0 0 0 4px rgba(61,7,121,.1); }
.scf-search > svg { flex-shrink: 0; color: var(--scf-ink-3); transition: color .22s ease; }
.scf-search:focus-within > svg { color: var(--scf-purple); }
/* Il campo dentro la pillola: la regola generica input[type=search] della
sezione 12 gli dava bordo, raggio, altezza e anello di fuoco propri, e il
modulo usciva con due bordi e due aloni. Qui il campo e' nudo: il bordo e
il fuoco li disegna solo il contenitore. */
.scf-search input[type=search] {
width: 100%; height: 100%; min-width: 0;
margin: 0; padding: 0;
border: 0; border-radius: 0; outline: 0; box-shadow: none;
background: transparent;
font-size: 15px; color: var(--scf-ink);
appearance: none; -webkit-appearance: none;
}
.scf-search input[type=search]:focus { border: 0; outline: 0; box-shadow: none; }
.scf-search input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
.scf-search input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; margin-left: 6px; cursor: pointer;
background: url("data:image/svg+xml;utf8,") center / 18px no-repeat;
}
.scf-search input::placeholder { color: #6E6880; }
.scf-pill {
display: inline-flex; align-items: center; gap: 8px;
height: 34px; padding: 0 8px 0 14px;
border-radius: 999px; background: var(--scf-tint); border: 1px solid #D9C9F6;
font-size: 13px; font-weight: 600; color: var(--scf-purple); white-space: nowrap;
}
.scf-pill button {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px; padding: 0;
border: 0; border-radius: 999px; background: #E0D0F8;
transition: background .2s ease;
}
.scf-pill button:hover { background: #C9AEF2; }
.scf-progress { width: 260px; height: 4px; border-radius: 2px; background: #EDEAF5; overflow: hidden; }
.scf-progress span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--scf-purple), var(--scf-magenta)); }
/* stato vuoto / suggerimento */
.scf-empty {
display: flex; flex-direction: column; justify-content: center; gap: 16px;
padding: 32px;
border: 1px dashed #D9D4E8; border-radius: var(--scf-radius-lg);
background: var(--scf-surface-3);
}
/* nascondi le card filtrate senza ricaricare */
.scf-proj[hidden] { display: none !important; }
/* =========================================================================
12. FORM
========================================================================= */
.scf-field, input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=search], input[type=number], input[type=password], input[type=date], select, textarea {
width: 100%;
height: 56px;
padding: 0 16px;
border: 1px solid #D9D4E8;
border-radius: var(--scf-radius);
background: #fff;
font-size: 16px;
color: var(--scf-ink);
transition: border-color .25s ease, box-shadow .25s ease;
}
textarea { height: auto; min-height: 148px; padding: 16px; line-height: 1.6; resize: vertical; }
select { appearance: none; padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23857F94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; }
.scf-field:focus, input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--scf-purple);
box-shadow: 0 0 0 4px rgba(61,7,121,.12);
}
::placeholder { color: #6E6880; }
label, .scf-label { font-size: 14px; font-weight: 600; color: var(--scf-ink); display: inline-block; margin-bottom: 8px; }
input[type=submit], button[type=submit] {
width: auto;
height: 54px;
padding: 0 30px;
border: 0;
border-radius: 999px;
background: var(--scf-purple);
color: #fff;
font-size: 16px;
font-weight: 600;
transition: background .28s ease, box-shadow .28s ease;
}
input[type=submit]:hover, button[type=submit]:hover { background: var(--scf-violet); box-shadow: 0 12px 30px -12px rgba(123,24,201,.7); }
.scf-formpanel { background: var(--scf-surface-2); border-radius: 28px; padding: clamp(24px, 3vw, 44px); }
/* =========================================================================
13. FOOTER
Fondo chiaro: il sito non ha versione dark.
========================================================================= */
.scf-footer {
background: var(--scf-surface-2);
border-top: 1px solid var(--scf-line-2);
padding-block: 80px 40px;
}
.scf-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px; }
.scf-footer__brand { display: flex; flex-direction: column; gap: 22px; }
.scf-footer__brand img { width: 230px; height: auto; }
.scf-footer__col { display: flex; flex-direction: column; gap: 16px; }
.scf-footer__col > .scf-eyebrow { color: var(--scf-ink); }
.scf-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.scf-footer__menu li { margin: 0; }
.scf-footer__menu a, .scf-flink {
font-size: 15px; color: var(--scf-ink-2);
transition: color .2s ease, padding-left .2s ease;
}
.scf-footer__menu a:hover, .scf-flink:hover { color: var(--scf-purple); padding-left: 4px; }
.scf-footer__contacts { display: flex; flex-direction: column; gap: 8px; }
.scf-footer__contacts a { font-weight: 600; color: var(--scf-ink); font-size: 15px; }
.scf-social { display: flex; gap: 10px; }
.scf-social a {
display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 999px;
border: 1px solid var(--scf-line); background: #fff; color: var(--scf-purple);
transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.scf-social a:hover { background: var(--scf-purple); border-color: var(--scf-purple); color: #fff; transform: translateY(-2px); }
.scf-iso {
display: flex; align-items: flex-start; gap: 18px;
margin-top: 56px; padding: 26px 28px;
background: #fff; border: 1px solid var(--scf-line); border-radius: 18px;
}
.scf-iso p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--scf-ink-2); max-width: 900px; }
.scf-trademarks { margin: 20px 0 0; font-size: 13px; line-height: 1.65; color: var(--scf-ink-3); }
.scf-legal {
display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
margin-top: 32px; padding-top: 26px;
border-top: 1px solid var(--scf-line);
font-size: 13px; color: var(--scf-ink-3);
}
/* whatsapp flottante */
.scf-wa {
position: fixed; right: 22px; bottom: 22px; z-index: 70;
display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 999px;
background: #25D366; color: #fff;
box-shadow: 0 16px 34px -14px rgba(37,211,102,.9);
transition: transform .25s var(--scf-ease);
}
.scf-wa:hover { transform: translateY(-3px) scale(1.04); color: #fff; }
/* =========================================================================
14. BLOCCO CTA
========================================================================= */
.scf-cta {
position: relative;
overflow: hidden;
border-radius: var(--scf-radius-2xl);
background: var(--scf-grad);
padding: clamp(40px, 5vw, 88px) clamp(26px, 4.5vw, 72px);
color: #fff;
}
.scf-cta h2, .scf-cta h3 { color: #fff; margin: 0; }
.scf-cta p { color: rgba(255,255,255,.84); }
.scf-cta .scf-eyebrow { color: rgba(255,255,255,.78); }
.scf-cta__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.scf-cta__arcs { position: absolute; top: -140px; right: -80px; opacity: .22; pointer-events: none; }
.scf-cta a:not(.scf-btn) { color: #fff; }
/* =========================================================================
15. BREADCRUMB
========================================================================= */
.scf-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--scf-ink-3); }
.scf-crumbs a { color: var(--scf-ink-3); }
.scf-crumbs a:hover { color: var(--scf-purple); }
.scf-crumbs .sep { color: #C7C2D6; }
.scf-crumbs [aria-current] { color: var(--scf-ink); font-weight: 600; }
/* =========================================================================
16. FAQ / ACCORDION
========================================================================= */
.scf-faq { border-bottom: 1px solid var(--scf-line); }
.scf-faq:first-child { border-top: 1px solid var(--scf-line); }
.scf-faq__q {
display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
width: 100%; padding: 26px 0; border: 0; background: none; text-align: left;
font-size: 20px; font-weight: 700; letter-spacing: -0.014em; color: var(--scf-ink);
}
.scf-faq__q svg { flex-shrink: 0; margin-top: 3px; color: var(--scf-ink); transition: transform .3s var(--scf-ease), color .3s ease; }
.scf-faq.is-open .scf-faq__q svg { transform: rotate(45deg); color: var(--scf-purple); }
.scf-faq__a { display: none; padding-bottom: 26px; max-width: 780px; color: var(--scf-ink-2); }
.scf-faq.is-open .scf-faq__a { display: block; }
/* =========================================================================
17. PAGINAZIONE E ARCHIVI
========================================================================= */
.scf-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.scf-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 46px; height: 46px; padding: 0 14px;
border: 1px solid var(--scf-line); border-radius: 999px;
font-size: 15px; font-weight: 600; color: var(--scf-ink-2); background: #fff;
transition: all .22s ease;
}
.scf-pagination .page-numbers:hover { border-color: var(--scf-purple); color: var(--scf-purple); }
.scf-pagination .page-numbers.current { background: var(--scf-purple); border-color: var(--scf-purple); color: #fff; }
.scf-pagination .dots { border-color: transparent; }
/* =========================================================================
18. ANIMAZIONI
========================================================================= */
@keyframes scf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/*
Nulla e' nascosto dal CSS: e' il JS a marcare .scf-pre solo sugli elementi che
sta per osservare e che sono ancora fuori schermo. Cosi' se lo script non
parte, o l'elemento e' gia' visibile al caricamento, il contenuto si vede
comunque e il primo rendering non paga nessun ritardo.
*/
.scf-pre { opacity: 0; }
.scf-pre.is-in { animation: scf-rise .7s var(--scf-ease) both; }
.scf-pre.scf-reveal-group > * { opacity: 0; }
.scf-pre.scf-reveal-group.is-in > * { animation: scf-rise .7s var(--scf-ease) both; }
.scf-pre.scf-reveal-group.is-in > *:nth-child(2) { animation-delay: .07s; }
.scf-pre.scf-reveal-group.is-in > *:nth-child(3) { animation-delay: .14s; }
.scf-pre.scf-reveal-group.is-in > *:nth-child(4) { animation-delay: .21s; }
.scf-pre.scf-reveal-group.is-in > *:nth-child(5) { animation-delay: .28s; }
.scf-pre.scf-reveal-group.is-in > *:nth-child(6) { animation-delay: .35s; }
.scf-pre.scf-reveal-group.is-in > *:nth-child(7) { animation-delay: .42s; }
.scf-pre.scf-reveal-group.is-in > *:nth-child(8) { animation-delay: .49s; }
@media (prefers-reduced-motion: reduce) {
.scf-pre, .scf-pre > * { opacity: 1 !important; animation: none !important; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* =========================================================================
19. PONTE ELEMENTOR
Le sezioni costruite con Elementor ereditano container, tipografia e
bottoni del tema: nessun doppio sistema di stili.
========================================================================= */
.elementor-widget-heading .elementor-heading-title { letter-spacing: -0.028em; }
.elementor-button {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
height: 54px; padding: 0 30px; border-radius: 999px;
background: var(--scf-purple); color: #fff;
font-family: var(--scf-font); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
transition: background .28s ease, box-shadow .28s ease;
}
.elementor-button:hover { background: var(--scf-violet); color: #fff; box-shadow: 0 12px 30px -12px rgba(123,24,201,.7); }
.elementor-button .elementor-button-content-wrapper { gap: 12px; }
/* il contenuto Elementor rispetta il container del tema salvo full-width */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--scf-wrap); }
.e-con { --container-max-width: var(--scf-wrap); }
.e-con-inner { max-width: var(--scf-wrap); }
/* contenuto redazionale (editor classico / blocchi): a tutta larghezza del
container, altrimenti nelle pagine di solo testo (privacy, cookie) restava
un terzo di pagina vuoto a destra */
.scf-prose { max-width: none; }
.scf-prose > *:first-child { margin-top: 0; }
.scf-prose h2 { margin-top: 1.6em; }
.scf-prose h3 { margin-top: 1.5em; }
.scf-prose img, .scf-prose iframe { border-radius: var(--scf-radius-lg); }
.scf-prose ul li::marker { color: var(--scf-purple); }
.scf-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* WooCommerce: allineamento minimo, il negozio non e' il fulcro del sito */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button {
border-radius: 999px !important;
background: var(--scf-purple) !important;
color: #fff !important;
font-weight: 600 !important;
}
.woocommerce .button:hover { background: var(--scf-violet) !important; }
/* =========================================================================
20. UTILITY
========================================================================= */
.scf-hide { display: none !important; }
.scf-sr {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.scf-mt-0 { margin-top: 0 !important; }
.scf-mb-0 { margin-bottom: 0 !important; }
.scf-center { text-align: center; }
.scf-muted { color: var(--scf-ink-2); }
.scf-sep { height: 1px; background: var(--scf-line); }
/* =========================================================================
21. RESPONSIVE
Il mobile e' disegnato a parte, non ridotto: gutter 20px, tap target 44px.
========================================================================= */
@media (max-width: 1200px) {
.scf-nav__list { gap: 24px; }
.scf-nav__list > li > a { font-size: 15px; }
.scf-logo img { width: 190px; }
.scf-hero__grid { gap: 48px; }
.scf-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scf-footer__grid { gap: 36px; }
.scf-statcard { left: -24px; }
}
@media (max-width: 1024px) {
/* sul telefono restano logo, chiamata rapida e hamburger: la CTA e'
gia' in fondo al menu, ripeterla toglierebbe spazio all'hamburger */
.scf-nav, .scf-header__search, .scf-header__cta { display: none; }
.scf-burger { display: flex; }
.scf-hero__grid { grid-template-columns: 1fr; gap: 40px; }
.scf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scf-sechead { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
.scf-sechead__aside { max-width: none; margin-bottom: 0; }
.scf-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.scf-statcard { position: static; margin-top: 18px; }
.scf-cta__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
.scf-feat { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 780px) {
body { font-size: 16px; }
.scf-logo img { width: 164px; }
.scf-grid, .scf-grid--2, .scf-grid--3, .scf-grid--4 { grid-template-columns: 1fr; gap: 14px; }
.scf-footer__grid { grid-template-columns: 1fr; gap: 28px; }
.scf-footer { padding-block: 48px 32px; }
.scf-footer__brand img { width: 200px; }
.scf-iso { margin-top: 28px; padding: 20px; gap: 14px; }
.scf-iso p { font-size: 13px; }
.scf-legal { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12px; }
.scf-trust__inner { gap: 18px; }
.scf-trust__sep { display: none; }
.scf-btn { width: 100%; }
.scf-btn--auto { width: auto; }
.scf-svc { padding: 24px; }
.scf-proj__title { font-size: 20px; }
.scf-filters { padding: 20px; gap: 16px; border-radius: var(--scf-radius-lg); }
.scf-filters__row { gap: 8px; }
.scf-search { min-width: 100%; }
.scf-media { border-radius: 22px; }
.scf-cta { border-radius: var(--scf-radius-xl); }
.scf-faq__q { font-size: 17px; padding: 20px 0; gap: 16px; }
.scf-step__n { font-size: 32px; }
.scf-feat h3 { font-size: 20px; }
.scf-rel { padding: 18px 20px; font-size: 16px; }
.scf-wa { right: 16px; bottom: 16px; width: 52px; height: 52px; }
/* scroller orizzontale: su mobile le griglie lunghe scorrono */
.scf-scroller {
display: flex; gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-inline: calc(var(--scf-gutter) * -1);
padding-inline: var(--scf-gutter);
scrollbar-width: none;
}
.scf-scroller::-webkit-scrollbar { display: none; }
.scf-scroller > * { flex: 0 0 282px; scroll-snap-align: start; }
}
/* barra azioni fissa sulle pagine servizio (solo mobile) */
.scf-actionbar { display: none; }
@media (max-width: 780px) {
.scf-actionbar {
position: sticky; bottom: 0; z-index: 60;
display: flex; gap: 10px;
padding: 12px var(--scf-gutter) 16px;
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px);
border-top: 1px solid var(--scf-line-2);
box-shadow: 0 -18px 30px -24px rgba(11,10,18,.4);
}
.scf-actionbar .scf-btn { flex: 1; }
.scf-actionbar .scf-btn--primary { flex: 1.4; }
.scf-wa { bottom: 84px; }
}
/* =========================================================================
22. STAMPA
========================================================================= */
@media print {
.scf-header, .scf-footer, .scf-wa, .scf-actionbar, .scf-drawer, .scf-mega { display: none !important; }
body { font-size: 12pt; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}
/* =========================================================================
23. PANNELLO RICERCA (aperto dall'icona nell'header)
========================================================================= */
.scf-searchpanel {
position: sticky;
top: var(--scf-header-h);
z-index: 85;
background: #fff;
border-bottom: 1px solid var(--scf-line);
box-shadow: 0 26px 46px -34px rgba(11,10,18,.4);
padding-block: 22px;
}
.scf-search--lg { height: 60px; padding: 0 7px 0 20px; gap: 12px; min-width: 0; box-shadow: 0 10px 30px -22px rgba(11,10,18,.35); }
.scf-search--lg input[type=search] { font-size: 17px; }
.scf-search--lg .scf-btn { height: 46px; flex-shrink: 0; padding-inline: 24px; }
.scf-searchform { width: 100%; }
/* =========================================================================
24. RISULTATI DI RICERCA
========================================================================= */
.scf-searchhit {
display: flex;
flex-direction: column;
gap: 8px;
padding: 28px 0;
border-bottom: 1px solid var(--scf-line-2);
}
.scf-searchhit:first-child { border-top: 1px solid var(--scf-line-2); }
.scf-searchhit h3 { margin: 0; font-size: 22px; transition: color .22s ease; }
.scf-searchhit:hover h3 { color: var(--scf-purple); }
.scf-searchhit p { margin: 0; color: var(--scf-ink-2); font-size: 16px; }
/* copertine delle pagine */
.scf-page__cover { object-fit: cover; }
/* =========================================================================
25. PAGINE CONVERTITE DA WPBAKERY
Le righe importate portano gia' i loro spazi interni: qui serve solo un
respiro fra una riga e l'altra, non il padding pieno delle sezioni native.
========================================================================= */
.scf-vcrow { padding-block: 28px; }
.scf-vcrow:first-child { padding-top: clamp(40px, 5vw, 72px); }
.scf-vcrow:last-child { padding-bottom: clamp(48px, 6vw, 96px); }
.scf-vcrow.scf-section--alt { padding-block: clamp(48px, 5vw, 80px); }
.scf-vcrow .elementor-widget-heading + .elementor-widget-text-editor { margin-top: -4px; }
/* card progetto in colonna singola: proporzione da vetrina, non da griglia */
.scf-grid--cols[style*="--scf-cols:1"] .scf-proj__media { aspect-ratio: 5 / 4; }
.scf-grid--cols[style*="--scf-cols:1"] .scf-proj__title { font-size: clamp(22px, 2vw, 28px); }
/* =========================================================================
26. GRIGLIE A COLONNE VARIABILI
Il numero di colonne arriva dallo shortcode come variabile, non come stile
inline: cosi' i breakpoint possono ancora ridurlo su schermi stretti.
========================================================================= */
.scf-grid--cols { grid-template-columns: repeat(var(--scf-cols, 3), minmax(0, 1fr)); }
@media (max-width: 1024px) { .scf-grid--cols { grid-template-columns: repeat(min(var(--scf-cols, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 780px) { .scf-grid--cols { grid-template-columns: repeat(min(var(--scf-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .scf-grid--cols { grid-template-columns: 1fr; } }
/* le tecnologie restano leggibili anche a due o tre per riga */
@media (max-width: 780px) { .scf-grid--cols .scf-tech { height: 66px; font-size: 14px; } }
@media (max-width: 560px) { .scf-grid--cols:has(.scf-tech) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* =========================================================================
27. SLIDER
Lo scorrimento e' quello nativo del browser (scroll-snap): il JavaScript
serve solo a frecce, puntini e riproduzione automatica.
========================================================================= */
.scf-slider {
position: relative;
border-radius: var(--scf-radius-2xl);
overflow: hidden;
background: var(--scf-purple);
}
.scf-slider__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scf-slider__track::-webkit-scrollbar { display: none; }
.scf-slider__slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: start;
min-height: var(--scf-slider-h, 560px);
display: flex;
align-items: flex-end;
background: linear-gradient(146deg, #2E408D 0%, #3D0779 48%, #7B18C9 100%);
}
.scf-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scf-slider__slide::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(11,10,18,.15) 0%, rgba(22,3,48,.82) 100%);
}
.scf-slider__body {
position: relative; z-index: 2;
display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
padding: clamp(28px, 4vw, 56px);
max-width: 720px;
color: #fff;
}
.scf-slider__body h2 { color: #fff; margin: 0; font-size: clamp(28px, 3.4vw, 50px); }
.scf-slider__body p { color: rgba(255,255,255,.86); margin: 0; font-size: clamp(16px, 1.3vw, 18px); }
.scf-slider__nav {
position: absolute; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.32);
background: rgba(255,255,255,.14);
backdrop-filter: blur(8px);
color: #fff; z-index: 3;
transition: background .25s ease, border-color .25s ease;
}
.scf-slider__nav:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6); }
.scf-slider__nav--prev { left: 20px; }
.scf-slider__nav--prev svg { transform: rotate(180deg); }
.scf-slider__nav--next { right: 20px; }
.scf-slider__dots {
position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
display: flex; gap: 8px; z-index: 3;
}
.scf-slider__dots button {
width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
background: rgba(255,255,255,.42);
transition: width .3s var(--scf-ease), background .3s ease;
}
.scf-slider__dots button[aria-selected="true"] { width: 26px; background: #fff; }
@media (max-width: 780px) {
.scf-slider { border-radius: var(--scf-radius-xl); }
.scf-slider__slide { min-height: min(var(--scf-slider-h, 560px), 460px); }
.scf-slider__nav { display: none; }
}
/* su mobile la chiamata rapida sostituisce il pulsante di contatto */
.scf-header__tel { display: none; }
@media (max-width: 1024px) { .scf-header__tel { display: flex; } }
/* la colonna introduttiva dei contatti: il titolo non deve spezzarsi in cinque righe */
.scf-contatti__intro h1 { font-size: clamp(32px, 3.6vw, 52px); }
/* =========================================================================
28. LINK NEL TESTO
Dentro un paragrafo il solo colore non basta a distinguere un link: serve
anche la sottolineatura (WCAG 1.4.1, "uso del colore").
========================================================================= */
.elementor-widget-text-editor a,
.scf-prose a,
.scf-faq__a a,
.scf-svc p a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.elementor-widget-text-editor a:hover,
.scf-prose a:hover { text-decoration-color: currentColor; }
/* Pulsante dei blocchi Gutenberg negli articoli ("Contattaci per
informazioni!"): stesso disegno della pillola primaria del tema, in tutti
gli stati. Il colore "brand" del vecchio tema viene ignorato. */
.wp-block-button { margin: 28px 0 8px; }
.wp-block-button__link,
.wp-block-button__link.has-background,
.wp-block-button__link.has-brand-color-background-color,
.wp-block-button .wp-element-button {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
height: 54px; padding: 0 30px; border-radius: 999px !important; border: 0;
background: var(--scf-purple) !important; color: #fff !important;
font-family: var(--scf-font); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
text-decoration: none !important;
box-shadow: 0 10px 24px -14px rgba(61,7,121,.55);
transition: background .28s ease, box-shadow .28s ease, transform .28s var(--scf-ease);
}
.wp-block-button__link::after { content: "\2192"; font-size: 18px; line-height: 1; transition: transform .28s var(--scf-ease); }
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
background: var(--scf-violet) !important; color: #fff !important;
box-shadow: 0 16px 34px -14px rgba(123,24,201,.7);
transform: translateY(-2px);
}
.wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button__link:focus-visible { outline: 3px solid rgba(123,24,201,.35); outline-offset: 3px; }
.wp-block-button__link:active { transform: translateY(0); background: var(--scf-purple) !important; box-shadow: 0 6px 16px -10px rgba(61,7,121,.6); }
.wp-block-button__link:visited { color: #fff !important; }
.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--scf-purple) !important; border: 1.5px solid #D9D4E8; box-shadow: none; }
.is-style-outline .wp-block-button__link:hover { border-color: var(--scf-purple); background: var(--scf-surface-2) !important; }
@media (max-width: 560px) { .wp-block-button__link { width: 100%; } }
/* i pulsanti e le card restano senza sottolineatura: sono gia' riconoscibili */
.elementor-widget-button a, .scf-btn, .scf-rel, .scf-proj, .scf-post, .scf-card { text-decoration: none; }
/* =========================================================================
30. PULSANTI DENTRO ELEMENTOR
Il widget pulsante e' un blocco: dentro una colonna flex si stirava a tutta
larghezza. Qui il contenitore si stringe sul contenuto e la variante arriva
da una classe sul widget.
========================================================================= */
.elementor-widget-button { width: -moz-fit-content; width: fit-content; max-width: 100%; }
.elementor-widget-button .elementor-button {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
height: 54px; padding: 0 30px; border-radius: 999px;
background: var(--scf-purple); color: #fff; border: 1px solid transparent;
font-family: var(--scf-font); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
text-decoration: none;
transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.elementor-widget-button .elementor-button:hover { background: var(--scf-violet); color: #fff; box-shadow: 0 12px 30px -12px rgba(123,24,201,.7); }
.elementor-widget-button.scf-b--ghost .elementor-button {
background: transparent; color: var(--scf-ink); border-color: #D9D4E8;
}
.elementor-widget-button.scf-b--ghost .elementor-button:hover {
border-color: var(--scf-purple); color: var(--scf-purple); background: var(--scf-surface-2); box-shadow: none;
}
.elementor-widget-button.scf-b--white .elementor-button { background: #fff; color: var(--scf-purple); }
.elementor-widget-button.scf-b--white .elementor-button:hover { background: var(--scf-tint); color: var(--scf-purple); }
.elementor-widget-button.scf-b--link .elementor-button {
height: auto; padding: 0 0 6px; border-radius: 0; background: none;
color: var(--scf-purple); border-bottom: 2px solid var(--scf-line);
}
.elementor-widget-button.scf-b--link .elementor-button:hover {
background: none; color: var(--scf-magenta); border-bottom-color: var(--scf-magenta); box-shadow: none;
}
/* anche i pulsanti del tema dentro una colonna non devono stirarsi */
.e-con .scf-btn, .elementor-widget-container .scf-btn { align-self: flex-start; }
@media (max-width: 780px) {
.elementor-widget-button { width: 100%; }
.elementor-widget-button .elementor-button { width: 100%; }
}
/* =========================================================================
31. MODULI FORMIDABLE
Il plugin porta un proprio foglio di stile generico: qui i moduli prendono
i campi, le spaziature e i colori del design system, cosi' un preventivo
sembra parte del sito e non un modulo incollato.
========================================================================= */
.frm_forms, .with_frm_style { --frm-gap: 20px; }
.with_frm_style .frm_form_fields > fieldset { padding: 0; border: 0; margin: 0; }
/* solo la legenda del modulo, non quelle dei gruppi di scelta */
.with_frm_style .frm_form_fields > fieldset > legend { display: none; }
/* griglia: i campi affiancati stanno su due colonne, non su una riga stretta */
.with_frm_style .frm_form_field { margin-bottom: var(--frm-gap); }
.with_frm_style .frm_form_field > label,
.with_frm_style .frm_primary_label {
display: block;
margin-bottom: 8px;
padding: 0;
font-size: 14px;
font-weight: 600;
color: var(--scf-ink);
line-height: 1.4;
}
.with_frm_style .frm_required { color: var(--scf-magenta); font-weight: 700; }
.with_frm_style input[type=text],
.with_frm_style input[type=email],
.with_frm_style input[type=tel],
.with_frm_style input[type=url],
.with_frm_style input[type=number],
.with_frm_style input[type=password],
.with_frm_style input[type=date],
.with_frm_style select,
.with_frm_style textarea {
width: 100%;
height: 56px;
padding: 0 16px;
border: 1px solid #D9D4E8;
border-radius: var(--scf-radius);
background: #fff;
box-shadow: none;
font-family: var(--scf-font);
font-size: 16px;
color: var(--scf-ink);
transition: border-color .25s ease, box-shadow .25s ease;
}
.with_frm_style textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.with_frm_style select { appearance: none; padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B657A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; }
.with_frm_style input:focus,
.with_frm_style select:focus,
.with_frm_style textarea:focus {
outline: none;
border-color: var(--scf-purple);
box-shadow: 0 0 0 4px rgba(61,7,121,.12);
}
.with_frm_style ::placeholder { color: #6E6880; }
/* scelte multiple: caselle e radio disegnate, non quelle di sistema */
.with_frm_style .frm_checkbox,
.with_frm_style .frm_radio { margin: 0 0 10px; }
.with_frm_style .frm_checkbox label,
.with_frm_style .frm_radio label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
font-weight: 400;
color: var(--scf-ink-2);
line-height: 1.5;
cursor: pointer;
margin: 0;
}
.with_frm_style .frm_checkbox input[type=checkbox],
.with_frm_style .frm_radio input[type=radio] {
appearance: none;
flex: 0 0 20px;
width: 20px; height: 20px;
margin: 1px 0 0;
border: 1.5px solid #C9C3D8;
background: #fff;
cursor: pointer;
transition: border-color .2s ease, background .2s ease;
}
.with_frm_style .frm_checkbox input[type=checkbox] { border-radius: 6px; }
.with_frm_style .frm_radio input[type=radio] { border-radius: 999px; }
.with_frm_style .frm_checkbox input[type=checkbox]:checked,
.with_frm_style .frm_radio input[type=radio]:checked {
border-color: var(--scf-purple);
background-color: var(--scf-purple);
}
.with_frm_style .frm_checkbox input[type=checkbox]:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5L19 7'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
}
.with_frm_style .frm_radio input[type=radio]:checked {
box-shadow: inset 0 0 0 4px #fff;
}
.with_frm_style input[type=checkbox]:focus-visible,
.with_frm_style input[type=radio]:focus-visible { outline: 3px solid var(--scf-violet); outline-offset: 2px; }
/* Le scelte stanno su una colonna; solo gli elenchi lunghi (tre o piu' voci,
i servizi richiesti) passano a due. La spunta della privacy, che e' una
voce sola con un testo lungo, resta cosi' a tutta larghezza. */
.with_frm_style .frm_opt_container { display: grid; grid-template-columns: 1fr; gap: 4px 20px; }
.with_frm_style .frm_opt_container:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .with_frm_style .frm_opt_container:has(> :nth-child(3)) { grid-template-columns: 1fr; } }
/* caricamento file */
.with_frm_style .frm_dropzone,
.with_frm_style input[type=file] {
width: 100%;
padding: 22px;
border: 1.5px dashed #C9C3D8;
border-radius: var(--scf-radius);
background: var(--scf-surface-3);
font-size: 15px;
color: var(--scf-ink-2);
transition: border-color .25s ease, background .25s ease;
}
.with_frm_style .frm_dropzone:hover,
.with_frm_style input[type=file]:hover { border-color: var(--scf-purple); background: var(--scf-tint); }
/* invio */
.with_frm_style .frm_submit { margin: 26px 0 0; }
.with_frm_style .frm_submit button,
.with_frm_style input[type=submit] {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
width: auto; height: 54px; padding: 0 32px;
border: 0; border-radius: 999px;
background: var(--scf-purple); color: #fff;
font-family: var(--scf-font); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
transition: background .28s ease, box-shadow .28s ease;
}
.with_frm_style .frm_submit button:hover,
.with_frm_style input[type=submit]:hover {
background: var(--scf-violet);
box-shadow: 0 12px 30px -12px rgba(123,24,201,.7);
}
@media (max-width: 780px) {
.with_frm_style .frm_submit button,
.with_frm_style input[type=submit] { width: 100%; }
}
/* descrizioni, errori e conferma */
.with_frm_style .frm_description { margin-top: 6px; font-size: 13px; color: var(--scf-ink-3); line-height: 1.5; }
.with_frm_style .frm_error {
margin-top: 6px; font-size: 13px; font-weight: 600; color: #B3123F;
}
.with_frm_style .frm_blank_field input,
.with_frm_style .frm_blank_field select,
.with_frm_style .frm_blank_field textarea { border-color: #D9426B; background: #FFF7F9; }
.with_frm_style .frm_error_style {
padding: 16px 18px; border-radius: var(--scf-radius);
background: #FFF1F5; border: 1px solid #F3C6D5; color: #8C0F33; font-size: 15px;
}
.with_frm_style .frm_message,
.frm_forms .frm_message {
padding: 22px 24px;
border-radius: var(--scf-radius-lg);
background: var(--scf-tint);
border: 1px solid #D9C9F6;
color: var(--scf-purple);
font-size: 16px;
}
.with_frm_style .frm_message p:last-child { margin-bottom: 0; }
/* la riga della privacy sta stretta con il resto */
.with_frm_style .frm_form_field.frm_html_block { font-size: 13px; color: var(--scf-ink-2); line-height: 1.55; }
.with_frm_style .frm_form_field.frm_html_block a { text-decoration: underline; text-underline-offset: 3px; }
/* =========================================================================
32. TECNOLOGIE CON SIMBOLO
I simboli hanno proporzioni molto diverse fra loro (alcuni quadrati, altri
orizzontali): l'altezza fissa e il contain li allineano otticamente.
========================================================================= */
.scf-tech__logo {
height: 34px;
width: auto;
max-width: 78%;
object-fit: contain;
opacity: .82;
transition: opacity .28s ease, transform .28s ease;
}
.scf-tech:hover .scf-tech__logo { opacity: 1; transform: translateY(-1px); }
.scf-tech__nome { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-align: center; }
.scf-tech--logo .scf-tech__nome { color: var(--scf-ink-2); }
.scf-tech:hover .scf-tech__nome { color: var(--scf-purple); }
@media (max-width: 780px) {
.scf-tech { min-height: 96px; padding: 14px 10px; gap: 9px; }
.scf-tech__logo { height: 26px; }
.scf-tech__nome { font-size: 13px; }
}
/* i lockup contengono gia' il nome: piu' spazio al marchio, nessuna didascalia */
.scf-tech--lockup .scf-tech__logo { height: 42px; max-width: 84%; }
@media (max-width: 780px) { .scf-tech--lockup .scf-tech__logo { height: 32px; } }
/* =========================================================================
29. LARGHEZZE DELLE COLONNE
Elementor non applica in modo affidabile l'impostazione "width" ai
contenitori generati da codice, quindi la larghezza arriva da una classe.
Due accortezze imparate sul campo:
- la larghezza e' una proporzione del flex, non una percentuale meno il gap:
sottrarre il gap a mano non funziona, perche' ogni contenitore figlio
ridefinisce --column-gap con il proprio;
- la regola sul flex deve avere due classi, altrimenti perde contro il
"flex: 0 1 auto" che Elementor mette su .e-con.e-child.
========================================================================= */
[class*="scf-w-"] { --scf-n: 100; min-width: 0; }
.scf-w-8 { --scf-n: 8; max-width: 8.333%; }
.scf-w-16 { --scf-n: 16; max-width: 16.666%; }
.scf-w-20 { --scf-n: 20; max-width: 20%; }
.scf-w-25 { --scf-n: 25; max-width: 25%; }
.scf-w-30 { --scf-n: 30; max-width: 30%; }
.scf-w-33 { --scf-n: 33; max-width: 33.333%; }
.scf-w-40 { --scf-n: 40; max-width: 40%; }
.scf-w-44 { --scf-n: 44; max-width: 44%; }
.scf-w-46 { --scf-n: 46; max-width: 46%; }
.scf-w-48 { --scf-n: 48; max-width: 48%; }
.scf-w-50 { --scf-n: 50; max-width: 50%; }
.scf-w-52 { --scf-n: 52; max-width: 52%; }
.scf-w-60 { --scf-n: 60; max-width: 60%; }
.scf-w-66 { --scf-n: 66; max-width: 66.666%; }
.scf-w-75 { --scf-n: 75; max-width: 75%; }
.scf-w-80 { --scf-n: 80; max-width: 80%; }
.scf-w-83 { --scf-n: 83; max-width: 83.333%; }
.scf-w-100 { --scf-n: 100; max-width: 100%; }
.e-con[class*="scf-w-"],
.elementor [class*="scf-w-"],
[class*="scf-w-"][class*="scf-w-"] { flex: var(--scf-n) 1 0 !important; }
@media (max-width: 1024px) {
.scf-w-8, .scf-w-16, .scf-w-20, .scf-w-25 { --scf-n: 50; max-width: 50%; }
}
@media (max-width: 780px) {
[class*="scf-w-"] { max-width: 100%; }
.e-con[class*="scf-w-"],
.elementor [class*="scf-w-"],
[class*="scf-w-"][class*="scf-w-"] { flex: 1 1 100% !important; }
}
/* =========================================================================
33. CONTENUTI IMPORTATI: ALTEZZE COERENTI
Nelle righe importate le colonne hanno larghezze diverse: con un rapporto
d'aspetto fisso le card della stessa riga verrebbero alte in modo diverso.
Qui l'immagine ha un'altezza data e riempie il riquadro.
========================================================================= */
.scf-vcrow .scf-proj__media { aspect-ratio: auto; height: 260px; }
.scf-vcrow .scf-proj__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scf-vcrow .scf-proj__title { font-size: clamp(19px, 1.7vw, 23px); }
@media (max-width: 780px) { .scf-vcrow .scf-proj__media { height: 210px; } }
/* le card servizio importate si allineano in altezza dentro la riga */
.scf-vcrow .e-con.e-child { align-self: stretch; }
.scf-vcrow .scf-svc { height: 100%; }
/* Immagini nelle colonne importate: stesso taglio 4:3, angoli arrotondati,
mai piu' alte di quanto serve. In una riga a tre colonne fanno da striscia
fotografica invece che da tre foto a tutta pagina una sotto l'altra. */
.scf-vcrow .elementor-widget-image { width: 100%; }
.scf-vcrow .elementor-widget-image .elementor-widget-container,
.scf-vcrow .elementor-widget-image figure { margin: 0; }
.scf-vcrow .elementor-widget-image img {
display: block; width: 100%; height: auto;
object-fit: cover;
border-radius: var(--scf-radius-lg);
background: var(--scf-surface-2);
}
/* il taglio 4:3 serve solo nelle colonne strette (le strisce di tre foto);
a mezza pagina l'immagine tiene le sue proporzioni, cosi' i visual 16:9
non perdono i bordi */
.scf-vcrow :is(.scf-w-20, .scf-w-25, .scf-w-30, .scf-w-33) .elementor-widget-image img { aspect-ratio: 4 / 3; }
.scf-vcrow .scf-w-100 > .elementor-widget-image img,
.scf-vcrow .scf-w-100 > .elementor-widget-container > .elementor-widget-image img { aspect-ratio: 16 / 7; }
.scf-vcrow .elementor-widget-image figcaption { margin-top: 10px; font-size: 13px; color: var(--scf-ink-3); }
/* un titolo grande in una colonna stretta va a capo otto volte:
nelle colonne fino a un terzo scende alla misura di un h3 */
.scf-vcrow :is(.scf-w-20, .scf-w-25, .scf-w-30, .scf-w-33) .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
/* intestazione delle pagine importate */
.scf-pagehead + .elementor .scf-vcrow:first-child { padding-top: 40px; }
/* =========================================================================
34. BAGLIORE DELLE INTESTAZIONI
Il cerchio sfumato dentro un'intestazione bassa veniva tagliato da
overflow:hidden e lasciava un bordo netto. Un gradiente sullo sfondo sfuma
sempre, qualunque sia l'altezza del blocco.
========================================================================= */
.scf-pagehead { background: radial-gradient(95% 65% at 87% -6%, rgba(195,31,160,.10) 0%, rgba(123,24,201,.07) 40%, rgba(255,255,255,0) 70%); }
.scf-pagehead .scf-blob { display: none; }
/* Formidable usa .frm_button_submit sul pulsante: senza questa classe fra i
selettori restava con lo stile predefinito del plugin. */
.with_frm_style .frm_button_submit,
.frm_forms .frm_button_submit {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
width: auto; height: 54px; padding: 0 32px;
border: 0; border-radius: 999px;
background: var(--scf-purple); color: #fff;
font-family: var(--scf-font); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
box-shadow: none;
transition: background .28s ease, box-shadow .28s ease;
}
.with_frm_style .frm_button_submit:hover,
.frm_forms .frm_button_submit:hover {
background: var(--scf-violet); color: #fff;
box-shadow: 0 12px 30px -12px rgba(123,24,201,.7);
}
/* le etichette non devono ereditare il bianco del vecchio tema scuro */
.frm_forms.with_frm_style .frm_primary_label,
.frm_forms.with_frm_style .frm_checkbox label,
.frm_forms.with_frm_style .frm_radio label { color: var(--scf-ink); }
.frm_forms.with_frm_style .frm_checkbox label,
.frm_forms.with_frm_style .frm_radio label { color: var(--scf-ink-2); font-weight: 400; }
.frm_forms.with_frm_style .frm_description { color: var(--scf-ink-3); }
/* Il foglio di Formidable viene caricato dopo quello del tema: per queste
poche regole serve un selettore piu' forte, non un !important. */
.frm_forms.with_frm_style input[type=checkbox] {
border-radius: 6px;
border: 1.5px solid #C9C3D8;
box-shadow: none;
width: 20px; height: 20px;
}
.frm_forms.with_frm_style input[type=radio] { border-radius: 999px; border: 1.5px solid #C9C3D8; box-shadow: none; width: 20px; height: 20px; }
.frm_forms.with_frm_style input[type=checkbox]:checked,
.frm_forms.with_frm_style input[type=radio]:checked { border-color: var(--scf-purple); background-color: var(--scf-purple); }
/* la riga della privacy e' un campo come gli altri: niente riquadro attorno */
.frm_forms.with_frm_style .rigaprivacy,
.frm_forms.with_frm_style .frm_form_field.frm_full { border: 0; background: none; padding: 0; }
.frm_forms.with_frm_style .rigaprivacy .frm_primary_label { font-size: 13px; }
/* due colonne per le scelte multiple lunghe */
.frm_forms.with_frm_style .frm_two_col .frm_opt_container { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 24px; }
@media (max-width: 640px) { .frm_forms.with_frm_style .frm_two_col .frm_opt_container { grid-template-columns: 1fr; } }
/* =========================================================================
35. CITAZIONI DEI CLIENTI
========================================================================= */
.scf-quote {
margin: 0;
padding: 30px;
border: 1px solid var(--scf-line);
border-radius: var(--scf-radius-lg);
background: #fff;
height: 100%;
display: flex;
flex-direction: column;
gap: 18px;
transition: transform .3s var(--scf-ease), box-shadow .3s ease, border-color .3s ease;
}
.scf-quote:hover { transform: translateY(-4px); box-shadow: var(--scf-shadow-sm); border-color: transparent; }
.scf-quote blockquote {
margin: 0; padding: 0; border: 0;
font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -0.012em; color: var(--scf-ink);
}
.scf-quote blockquote::before { content: "«"; color: var(--scf-purple); margin-right: 2px; }
.scf-quote blockquote::after { content: "»"; color: var(--scf-purple); margin-left: 2px; }
.scf-quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.scf-quote figcaption strong { font-size: 15px; color: var(--scf-ink); }
.scf-quote figcaption span { font-size: 13px; color: var(--scf-ink-3); }
/* =========================================================================
36. PANNELLO IDENTITA'
Sostituisce la vecchia scritta decorativa "SOLUTIONS": stessa funzione di
contrappeso visivo alla colonna di testo, ma con i colori del marchio e
un contenuto che dice qualcosa invece di riempire.
========================================================================= */
.scf-idpanel {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 34px;
min-height: 420px;
padding: 40px;
border-radius: 28px;
overflow: hidden;
background: var(--scf-grad);
color: #fff;
isolation: isolate;
}
.scf-idpanel__arcs {
position: absolute;
top: -140px; right: -150px;
width: 460px; height: 460px;
opacity: .34;
pointer-events: none;
z-index: -1;
}
.scf-idpanel .scf-eyebrow { color: rgba(255,255,255,.72); }
.scf-idpanel__claim {
margin: 0;
font-size: clamp(24px, 2.3vw, 32px);
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.026em;
color: #fff;
}
.scf-idpanel__claim em { font-style: normal; color: #F6D9FF; }
.scf-idpanel__numeri {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.24);
}
.scf-idpanel__n {
display: block;
font-size: clamp(26px, 2.6vw, 36px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}
.scf-idpanel__l {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.35;
color: rgba(255,255,255,.78);
}
/* =========================================================================
37. LINEA DEL TEMPO
La vecchia lista di riquadri non aveva un filo conduttore: l'anno e la
descrizione stavano su due colonne slegate. Qui l'anno resta agganciato
alla linea e il testo scorre accanto.
========================================================================= */
.scf-timeline {
position: relative;
margin: 0;
padding: 0 0 0 26px;
list-style: none;
border-left: 1px solid var(--scf-line);
}
.scf-timeline__item {
position: relative;
display: grid;
grid-template-columns: 92px 1fr;
gap: 28px;
align-items: start;
padding: 26px 0;
border-bottom: 1px solid var(--scf-line-2, #F0EDF7);
}
.scf-timeline__item:last-child { border-bottom: 0; padding-bottom: 0; }
.scf-timeline__item::before {
content: "";
position: absolute;
left: -31px; top: 34px;
width: 10px; height: 10px;
border-radius: 999px;
background: #fff;
border: 2px solid var(--scf-violet);
transition: transform .3s var(--scf-ease), background-color .3s ease;
}
.scf-timeline__item:hover::before { background: var(--scf-violet); transform: scale(1.3); }
.scf-timeline__anno {
font-family: var(--scf-mono);
font-size: 15px;
font-weight: 500;
letter-spacing: .04em;
color: var(--scf-purple);
padding-top: 3px;
}
.scf-timeline__corpo h3 {
margin: 0 0 6px;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.016em;
color: var(--scf-ink);
}
.scf-timeline__corpo p {
margin: 0;
font-size: 15px;
line-height: 1.62;
color: var(--scf-ink-2);
}
@media (max-width: 700px) {
.scf-timeline { padding-left: 20px; }
.scf-timeline__item { grid-template-columns: 1fr; gap: 8px; }
.scf-timeline__item::before { left: -25px; top: 30px; }
}
/* =========================================================================
38. GALLERIA DELLA SEDE
Tre scatti dell'ufficio: prima erano tre immagini a piena larghezza una
sotto l'altra, ora una griglia con lo stesso taglio per tutte.
========================================================================= */
.scf-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.scf-gallery figure {
position: relative;
margin: 0;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--scf-tint);
}
.scf-gallery img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .7s var(--scf-ease);
}
.scf-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 860px) { .scf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .scf-gallery { grid-template-columns: 1fr; } }
/* =========================================================================
39. NEGOZIO
La vetrina WooCommerce usa il container pieno e card con lo stesso taglio
del portfolio. I selettori con !important vincono sul foglio del plugin,
che imposta larghezze a percentuale e float.
========================================================================= */
.scf-shop .woocommerce-notices-wrapper:empty { display: none; }
.scf-shop .woocommerce-result-count {
float: left !important; margin: 0 !important; line-height: 44px;
font-family: var(--scf-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--scf-ink-3);
}
.scf-shop .woocommerce-ordering { float: right !important; margin: 0 !important; }
.scf-shop .woocommerce-ordering select {
height: 44px; padding: 0 40px 0 16px;
border: 1px solid var(--scf-line); border-radius: 999px; background-color: #fff;
font-family: var(--scf-font); font-size: 14px; font-weight: 600; color: var(--scf-ink);
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center;
}
.scf-shop .woocommerce-ordering select:focus-visible { outline: 3px solid rgba(123,24,201,.35); outline-offset: 2px; }
.scf-shop ul.products,
.woocommerce .scf-shop ul.products,
.woocommerce-page .scf-shop ul.products {
clear: both;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px 24px;
margin: 0 !important; padding: 28px 0 0 !important;
list-style: none;
}
/* il clearfix del plugin (::before/::after a tabella) dentro una griglia
diventa un elemento e occupa la prima cella, lasciandola vuota */
.woocommerce .scf-shop ul.products::before,
.woocommerce .scf-shop ul.products::after,
.woocommerce-page .scf-shop ul.products::before,
.woocommerce-page .scf-shop ul.products::after { display: none !important; content: none; }
.scf-shop ul.products li.product,
.woocommerce .scf-shop ul.products li.product,
.woocommerce-page .scf-shop ul.products li.product {
float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
position: relative; display: flex; flex-direction: column;
transition: transform .38s var(--scf-ease);
}
.scf-shop ul.products li.product:hover { transform: translateY(-6px); }
.scf-shop ul.products li.product .woocommerce-loop-product__link { display: flex; flex-direction: column; color: inherit; }
.scf-shop ul.products li.product img,
.woocommerce .scf-shop ul.products li.product a img {
width: 100%; height: auto; margin: 0 !important; display: block;
aspect-ratio: 4 / 3; object-fit: cover;
border-radius: var(--scf-radius-lg); background: var(--scf-surface-2);
}
.scf-shop ul.products li.product .scf-shop__cat { margin: 18px 4px 6px; }
.scf-shop ul.products li.product .woocommerce-loop-product__title,
.woocommerce .scf-shop ul.products li.product h2.woocommerce-loop-product__title {
margin: 0 4px !important; padding: 0 !important;
font-size: 20px; font-weight: 700; letter-spacing: -0.016em; line-height: 1.25; color: var(--scf-ink);
transition: color .24s ease;
}
.scf-shop ul.products li.product:hover .woocommerce-loop-product__title { color: var(--scf-purple); }
.scf-shop ul.products li.product .price { margin: 8px 4px 0 !important; font-size: 15px; color: var(--scf-ink-2); }
.scf-shop ul.products li.product .price:empty,
.scf-shop ul.products li.product .star-rating { display: none; }
.scf-shop ul.products li.product .button { margin: 16px 4px 0 !important; align-self: flex-start; }
/* freccia al posto di "leggi tutto": la card e' gia' tutta un link */
.scf-shop__go {
position: absolute; top: 14px; right: 14px;
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 999px;
background: rgba(255,255,255,.94); color: var(--scf-purple);
box-shadow: var(--scf-shadow-sm);
opacity: 0; transform: scale(.85);
transition: opacity .32s var(--scf-ease), transform .32s var(--scf-ease);
pointer-events: none;
}
.scf-shop ul.products li.product:hover .scf-shop__go { opacity: 1; transform: none; }
/* paginazione del plugin allineata a quella del tema */
.woocommerce .scf-shop nav.woocommerce-pagination { clear: both; padding-top: 48px; }
.woocommerce .scf-shop nav.woocommerce-pagination ul { border: 0 !important; display: flex; gap: 6px; justify-content: center; }
.woocommerce .scf-shop nav.woocommerce-pagination ul li { border: 0 !important; margin: 0; }
.woocommerce .scf-shop nav.woocommerce-pagination ul li a,
.woocommerce .scf-shop nav.woocommerce-pagination ul li span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px; padding: 0 12px !important;
border-radius: 999px; border: 1px solid var(--scf-line);
font-weight: 600; color: var(--scf-ink); background: #fff;
}
.woocommerce .scf-shop nav.woocommerce-pagination ul li a:hover { border-color: var(--scf-purple); color: var(--scf-purple); background: #fff; }
.woocommerce .scf-shop nav.woocommerce-pagination ul li span.current { background: var(--scf-purple); border-color: var(--scf-purple); color: #fff; }
/* --- scheda prodotto ---------------------------------------------------
Galleria e sommario su griglia (il plugin usa float al 48%), sommario
fisso allo scorrimento, miniature in fila sotto l'immagine con aria e
bordo attivo, invito al contatto al posto del carrello (nessun prodotto
ha un prezzo a listino). */
.scf-shop--singolo .scf-crumbs { margin-bottom: 28px; }
.woocommerce .scf-shop--singolo div.product {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 40px clamp(32px, 5vw, 72px);
align-items: start;
}
.woocommerce .scf-shop--singolo div.product::before,
.woocommerce .scf-shop--singolo div.product::after { display: none; }
.woocommerce .scf-shop--singolo div.product div.images,
.woocommerce .scf-shop--singolo div.product div.summary {
float: none !important; width: auto !important; margin: 0 !important;
}
.woocommerce .scf-shop--singolo div.product div.summary {
position: sticky; top: calc(var(--scf-header-h) + 24px);
display: flex; flex-direction: column; gap: 18px;
}
.woocommerce .scf-shop--singolo div.product > :not(.images):not(.summary) { grid-column: 1 / -1; }
/* galleria */
.scf-shop--singolo .woocommerce-product-gallery__wrapper { border-radius: var(--scf-radius-lg); overflow: hidden; background: var(--scf-surface-2); }
.scf-shop--singolo .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }
.scf-shop--singolo .woocommerce-product-gallery__trigger {
top: 14px !important; right: 14px !important;
width: 42px !important; height: 42px !important;
border-radius: 999px !important; background: rgba(255,255,255,.94) !important;
box-shadow: var(--scf-shadow-sm); z-index: 5;
}
.woocommerce .scf-shop--singolo div.product div.images .flex-control-thumbs {
display: flex; flex-wrap: wrap; gap: 12px;
margin: 14px 0 0; padding: 0;
}
.woocommerce .scf-shop--singolo div.product div.images .flex-control-thumbs li {
float: none !important; width: 88px !important; margin: 0 !important; list-style: none;
}
.woocommerce .scf-shop--singolo div.product div.images .flex-control-thumbs li img {
display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
border-radius: 14px; border: 2px solid transparent;
opacity: .55; cursor: pointer;
transition: opacity .22s ease, border-color .22s ease, transform .22s var(--scf-ease);
}
.woocommerce .scf-shop--singolo div.product div.images .flex-control-thumbs li img:hover { opacity: .9; transform: translateY(-2px); }
.woocommerce .scf-shop--singolo div.product div.images .flex-control-thumbs li img.flex-active { opacity: 1; border-color: var(--scf-purple); }
/* sommario */
.scf-shop--singolo .product .scf-shop__eyebrow { margin: 0; }
.scf-shop--singolo .product .product_title { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.03em; line-height: 1.06; margin: 0; }
.scf-shop--singolo .product .woocommerce-product-details__short-description { font-size: 18px; line-height: 1.6; color: var(--scf-ink-2); }
.scf-shop--singolo .product .woocommerce-product-details__short-description p { margin: 0; }
.scf-shop--singolo .product .woocommerce-product-details__short-description p + p { margin-top: 10px; }
.woocommerce .scf-shop--singolo div.product p.price,
.woocommerce .scf-shop--singolo div.product span.price { font-size: 24px; font-weight: 700; color: var(--scf-purple); margin: 0; }
.woocommerce .scf-shop--singolo div.product p.price:empty { display: none; }
.scf-shop--singolo .product .product_meta { font-size: 14px; color: var(--scf-ink-3); }
.scf-shop__cta {
margin-top: 8px;
padding: 26px 28px;
border: 1px solid var(--scf-line);
border-radius: var(--scf-radius-lg);
background: var(--scf-surface-2);
display: flex; flex-direction: column; gap: 14px;
}
.scf-shop__cta p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scf-ink-2); }
.scf-shop__cta .scf-row { gap: 10px 12px; }
.scf-shop__cta .scf-btn--ghost { background: #fff; }
.scf-shop__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.scf-shop__tags a {
display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
border-radius: 999px; background: var(--scf-tint); color: var(--scf-purple);
font-size: 13px; font-weight: 600;
}
.scf-shop__tags a:hover { background: #E0D0F8; }
@media (max-width: 900px) {
.woocommerce .scf-shop--singolo div.product { grid-template-columns: 1fr; gap: 28px; }
.woocommerce .scf-shop--singolo div.product div.summary { position: static; }
.woocommerce .scf-shop--singolo div.product div.images .flex-control-thumbs li { width: 68px !important; }
}
/* Le schede sotto la galleria: "Descrizione" e' un'etichetta di sezione, non
un tasto. Con una sola scheda l'elenco sparisce del tutto e resta il titolo
del pannello, nello stesso stile dei sopratitoli del sito. */
.scf-shop--singolo .woocommerce-tabs {
margin-top: clamp(40px, 5vw, 64px);
padding-top: 36px;
border-top: 1px solid var(--scf-line);
}
.scf-shop--singolo .woocommerce-tabs ul.tabs { display: flex; gap: 28px; margin: 0 0 22px; padding: 0; border: 0; overflow: visible; }
.scf-shop--singolo .woocommerce-tabs ul.tabs::before { display: none; }
.scf-shop--singolo .woocommerce-tabs ul.tabs li {
border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
margin: 0 !important; padding: 0 !important;
}
.scf-shop--singolo .woocommerce-tabs ul.tabs li::before,
.scf-shop--singolo .woocommerce-tabs ul.tabs li::after { display: none; }
.scf-shop--singolo .woocommerce-tabs ul.tabs li a,
.scf-shop--singolo .woocommerce-tabs .panel > h2:first-child {
display: inline-block; margin: 0; padding: 0 0 8px !important;
font-family: var(--scf-mono); font-size: 18px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--scf-ink-3) !important;
border-bottom: 2px solid transparent;
}
.scf-shop--singolo .woocommerce-tabs ul.tabs li.active a { color: var(--scf-purple) !important; border-bottom-color: var(--scf-purple); }
.scf-shop--singolo .woocommerce-tabs ul.tabs li a:hover { color: var(--scf-purple) !important; }
/* pannello: il titolo interno e' nascosto quando c'e' l'elenco delle schede... */
.scf-shop--singolo .woocommerce-tabs .panel > h2:first-child { display: none; margin-bottom: 18px; color: var(--scf-purple) !important; border: 0; }
/* ...e diventa l'etichetta quando la scheda e' una sola */
.scf-shop--singolo .woocommerce-tabs ul.tabs:has(> li:only-child) { display: none; }
.scf-shop--singolo .woocommerce-tabs ul.tabs:has(> li:only-child) ~ .panel > h2:first-child { display: block; }
/* testo della descrizione: colonna di lettura, non tutta la larghezza */
.scf-shop--singolo .woocommerce-tabs .panel { max-width: 860px; margin: 0; }
.scf-shop--singolo .woocommerce-tabs .panel h2:not(:first-child) { font-size: clamp(24px, 2.0vw, 26px); letter-spacing: -0.022em; margin: 1.5em 0 .5em; }
.scf-shop--singolo .woocommerce-tabs .panel h3 { font-size: clamp(20px, 1.9vw, 24px); margin: 1.4em 0 .4em; }
.scf-shop--singolo .woocommerce-tabs .panel p { font-size: 16px; line-height: 1.7; color: var(--scf-ink-2); }
.scf-shop--singolo .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
.scf-shop--singolo .related.products > h2,
.scf-shop--singolo .upsells.products > h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 64px 0 28px; }
@media (max-width: 1024px) { .scf-shop ul.products, .woocommerce .scf-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .scf-shop ul.products, .woocommerce .scf-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }
@media (max-width: 480px) { .scf-shop ul.products, .woocommerce .scf-shop ul.products { grid-template-columns: 1fr; } .scf-shop .woocommerce-result-count { display: none; } }
/* =========================================================================
40. SUGGERIMENTI DI RICERCA
Il pannello che si apre sotto il campo mentre si digita. Sta dentro il
modulo, che e' relativo, cosi' segue il campo sia nell'header sia nella
pagina dei risultati.
========================================================================= */
.scf-searchform { position: relative; }
.scf-suggest {
position: absolute; left: 0; right: 0; top: calc(100% + 10px);
z-index: 95;
max-height: min(70vh, 640px); overflow: auto;
padding: 10px;
background: #fff;
border: 1px solid var(--scf-line);
border-radius: 22px;
box-shadow: 0 30px 60px -28px rgba(11,10,18,.45);
}
.scf-suggest[hidden] { display: none; }
.scf-suggest__group { padding: 6px 0 4px; }
.scf-suggest__group + .scf-suggest__group { border-top: 1px solid var(--scf-line-2, #F0EDF7); margin-top: 4px; }
.scf-suggest__k {
display: block; padding: 8px 14px 6px;
font-family: var(--scf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--scf-ink-3);
}
.scf-suggest__hit {
display: flex; flex-direction: column; gap: 3px;
padding: 10px 14px; border-radius: 14px;
color: var(--scf-ink); text-decoration: none;
transition: background-color .18s ease;
}
.scf-suggest__hit:hover,
.scf-suggest__hit[aria-selected="true"] { background: var(--scf-tint); color: var(--scf-ink); }
.scf-suggest__t { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
.scf-suggest__t mark { background: none; color: var(--scf-purple); font-weight: 700; }
.scf-suggest__c { font-size: 13px; color: var(--scf-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scf-suggest__c b { font-weight: 600; color: var(--scf-purple); }
.scf-suggest__all,
.scf-suggest__empty {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 6px 0 0; padding: 12px 14px;
border-top: 1px solid var(--scf-line-2, #F0EDF7);
font-size: 14px; font-weight: 600; color: var(--scf-purple);
}
.scf-suggest__empty { color: var(--scf-ink-2); font-weight: 400; border-top: 0; }
.scf-suggest__all[aria-selected="true"] { background: var(--scf-tint); border-radius: 14px; }
@media (max-width: 640px) {
.scf-suggest { left: -6px; right: -6px; border-radius: 18px; }
.scf-suggest__t { font-size: 15px; }
}
/* =========================================================================
41. ELENCHI DI PAGINA
Passi numerati e liste con spunta, usati nelle spalle accanto ai moduli.
========================================================================= */
.scf-passi { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 18px; }
.scf-passi li { position: relative; padding-left: 52px; font-size: 15px; line-height: 1.6; color: var(--scf-ink-2); counter-increment: passo; }
.scf-passi li strong { display: block; margin-bottom: 2px; font-size: 16px; color: var(--scf-ink); }
.scf-passi li::before {
content: counter(passo, decimal-leading-zero);
position: absolute; left: 0; top: 0;
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 12px;
background: var(--scf-tint); color: var(--scf-purple);
font-family: var(--scf-mono); font-size: 13px; font-weight: 500;
}
.scf-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.scf-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--scf-ink-2); }
.scf-lista li svg { flex-shrink: 0; margin-top: 3px; color: var(--scf-purple); }
/* un h2 con la misura di un h3: il titolo del modulo non deve competere con l'H1 */
.scf-h3 .elementor-heading-title { font-size: clamp(21px, 1.95vw, 28px); margin: 0; }
/* =========================================================================
44. MAPPA IN CONTATTI
Iframe di Google Maps gia' aperto sulla sede, caricato pigro (sta sotto la
piega). Il riquadro ha lo stesso raggio delle card.
========================================================================= */
.scf-map {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
min-height: 320px;
border-radius: var(--scf-radius-lg);
overflow: hidden;
border: 1px solid var(--scf-line);
background: var(--scf-surface-2);
}
.scf-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.scf-map__link {
position: absolute; left: 14px; bottom: 14px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
height: 40px; padding: 0 16px; border-radius: 999px;
background: rgba(255,255,255,.94); color: var(--scf-purple);
font-size: 14px; font-weight: 600; box-shadow: var(--scf-shadow-sm);
}
.scf-map__link:hover { background: #fff; color: var(--scf-purple); }
@media (max-width: 780px) { .scf-map { aspect-ratio: 1; min-height: 280px; } }
/*
* Blocco "Dove siamo": indirizzo a sinistra e mappa a destra sul desktop, uno
* sotto l'altro dal tablet in giu'. Prima le colonne erano scritte nello stile
* in linea del widget: nessuna media query poteva cambiarle, e da telefono la
* mappa si riduceva a una striscia di ottanta pixel.
*/
.scf-dove__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
@media (max-width: 1024px) { .scf-dove__grid { gap: 48px; } }
@media (max-width: 860px) { .scf-dove__grid { grid-template-columns: 1fr; gap: 40px; } }
/* =========================================================================
43. TITOLI LUNGHI
Vedi scf_titoli_lunghi() in inc/contenuti.php: la prima frase resta titolo,
il resto scende in un sottotitolo leggero; senza una pausa utile il titolo
prende la misura del livello inferiore. text-wrap: balance evita l'ultima
riga con una parola sola.
========================================================================= */
h1, h2, h3, .elementor-heading-title { text-wrap: balance; }
h2.scf-h--lunga, .elementor-widget-heading h2.scf-h--lunga { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -0.018em; }
h3.scf-h--lunga, .elementor-widget-heading h3.scf-h--lunga { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -0.01em; }
.scf-h__sotto {
margin: 10px 0 0;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.55;
font-weight: 400;
color: var(--scf-ink-2);
max-width: 68ch;
text-wrap: pretty;
}
.elementor-widget-heading .scf-h__sotto { margin-top: 12px; }
.scf-h__sotto + p, .scf-h__sotto + ul { margin-top: 18px; }
/* nel blocco modulo a gradiente il sottotitolo e' bianco e centrato */
.scf-formblock .scf-h__sotto { color: rgba(255,255,255,.9) !important; margin-inline: auto; }
/* nelle colonne strette il titolo diviso non ha bisogno di ridursi oltre */
.scf-vcrow :is(.scf-w-20, .scf-w-25, .scf-w-30, .scf-w-33) .scf-h__sotto { font-size: 15px; }
/* Muri di testo importati: a tutta larghezza il widget Testo lungo va su due
colonne con misura di lettura (vedi scf_titoli_lunghi_elementor). I titoli
dentro al testo restano a tutta larghezza sopra le colonne. */
@media (min-width: 1024px) {
.scf-w-100 .scf-testo-lungo,
.scf-w-75 .scf-testo-lungo,
.scf-w-66 .scf-testo-lungo { columns: 2; column-gap: 56px; }
.scf-testo-lungo > :is(h2, h3, h4, .scf-h__sotto) { column-span: all; }
.scf-testo-lungo p, .scf-testo-lungo li { break-inside: avoid; }
.scf-testo-lungo h2 { margin-top: .4em; }
}
.scf-testo-lungo p { max-width: 72ch; }
.scf-testo-lungo p[style*="justify"] { text-align: left !important; }
/* =========================================================================
42. BLOCCO MODULO NELLE PAGINE CONVERTITE
Nel vecchio tema la riga con il modulo aveva lo sfondo scuro e il testo
introduttivo bianco (colore inline, ancora nel contenuto). Qui il testo
diventa l'intestazione a gradiente del blocco, dove il bianco torna
leggibile, e il modulo sta sotto su un pannello chiaro.
========================================================================= */
.e-con.scf-formblock {
--gap: 0px; --row-gap: 0px; --column-gap: 0px;
--padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px;
--scf-fb-x: clamp(24px, 4vw, 48px);
--scf-fb-y: clamp(28px, 4vw, 48px);
gap: 0;
border-radius: 28px;
overflow: hidden;
/* il gradiente sta sul contenitore: piu' widget di testo in fila restano su
un fondo continuo, senza cuciture */
background: var(--scf-grad);
color: #fff;
}
.scf-formblock > .elementor-element:not(.elementor-widget-shortcode) {
margin: 0 !important;
padding: 0 var(--scf-fb-x);
color: #fff;
}
.scf-formblock > .elementor-element:first-child { padding-top: var(--scf-fb-y); }
.scf-formblock > .elementor-element:has(+ .elementor-widget-shortcode),
.scf-formblock > .elementor-element:not(.elementor-widget-shortcode):last-child { padding-bottom: var(--scf-fb-y); }
.scf-formblock > .elementor-element:not(.elementor-widget-shortcode) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, .elementor-heading-title) { color: #fff !important; }
/* l'intestazione occupa tutta la riga, centrata, con un'interlinea piu' aperta
dei titoli di pagina: sono frasi lunghe, spesso su due righe */
.scf-formblock > .elementor-element:not(.elementor-widget-shortcode) { text-align: center; }
.scf-formblock > .elementor-element h2,
.scf-formblock > .elementor-widget-heading .elementor-heading-title {
font-size: clamp(24px, 2.6vw, 36px); line-height: 1.28; letter-spacing: -0.02em;
margin: 0 auto 10px; max-width: none;
}
.scf-formblock > .elementor-widget-heading .elementor-heading-title { margin-bottom: 0; }
.scf-formblock > .elementor-element h3 { font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; margin: 0 auto 16px; max-width: 60ch; opacity: .92; }
.scf-formblock > .elementor-element h4 { font-size: 17px; font-weight: 600; margin: 0 auto 12px; }
.scf-formblock > .elementor-element p { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.7; }
.scf-formblock > .elementor-widget-shortcode .frm_forms { margin-inline: auto; }
.scf-formblock > .elementor-element p + p { margin-top: 10px; }
.scf-formblock > .elementor-element:not(.elementor-widget-shortcode) a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* il modulo copre il gradiente con il pannello chiaro */
.scf-formblock > .elementor-widget-shortcode {
margin: 0 !important;
padding: clamp(24px, 4vw, 44px) var(--scf-fb-x);
background: var(--scf-surface-2);
color: var(--scf-ink);
}
.scf-formblock > .elementor-widget-shortcode .frm_forms { max-width: 860px; }
@media (max-width: 640px) { .e-con.scf-formblock { border-radius: 20px; } }
/* =========================================================================
45. SLIDER DELLE TECNOLOGIE ([scf_tecnologie slider="1"])
Le stesse card della griglia, una per slide. Le regole base del wrapper
stanno qui cosi' la riga e' gia' in fila prima che arrivi il CSS di Swiper.
========================================================================= */
.scf-techslider { position: relative; overflow: hidden; padding: 6px 0 0; margin: 0 -2px; }
.scf-techslider .swiper-wrapper { display: flex; }
.scf-techslider .swiper-slide { flex: 0 0 auto; width: calc((100% - 64px) / 5); height: auto; display: flex; }
.scf-techslider .scf-tech { width: 100%; }
.scf-techslider .swiper-slide { padding: 0 2px 4px; box-sizing: border-box; }
.scf-techslider__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.scf-techslider__btn {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0; border-radius: 50%;
border: 1px solid var(--scf-line); background: #fff; color: var(--scf-ink);
cursor: pointer; transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}
.scf-techslider__btn:hover { color: var(--scf-purple); border-color: #C9BEEA; transform: translateY(-2px); }
.scf-techslider__btn:focus-visible { outline: 2px solid var(--scf-purple); outline-offset: 3px; }
.scf-techslider__btn .scf-i { width: 18px; height: 18px; }
.scf-techslider__btn .scf-techslider__ico--prev { transform: scaleX(-1); }
/* il CSS di Swiper arriva dopo questo foglio: selettori a tre classi per vincere
sulle sue regole; la barra resta "relative" cosi' il riempimento assoluto si
misura su di lei e non sull'intero slider */
.scf-techslider { --swiper-theme-color: var(--scf-purple); --swiper-pagination-color: var(--scf-purple); }
.scf-techslider .swiper-pagination.swiper-pagination-progressbar,
.scf-techslider .swiper-pagination { position: relative; left: auto; top: auto; width: 140px; height: 4px; border-radius: 2px; background: var(--scf-line); overflow: hidden; transform: none; }
.scf-techslider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--scf-purple); border-radius: 2px; }
/* i link nel testo della scheda prodotto devono distinguersi anche senza colore */
.scf-shop--singolo .woocommerce-tabs a,
.scf-shop--singolo .woocommerce-Tabs-panel a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 1199px) { .scf-techslider .swiper-slide { width: calc((100% - 48px) / 4); } }
@media (max-width: 899px) { .scf-techslider .swiper-slide { width: calc((100% - 28px) / 3); } }
@media (max-width: 559px) { .scf-techslider .swiper-slide { width: calc((100% - 12px) / 2); } }
/* =========================================================================
46. SCHEDA PROGETTO (/project//)
Il racconto sta in una colonna di misura leggibile, la scheda tecnica lo
accompagna restando in vista mentre si legge. Le regole erano scritte a mano
dentro il template: qui stanno insieme e si adattano ai vari schermi.
========================================================================= */
.scf-project__head { padding-bottom: 0; position: relative; overflow: hidden; }
.scf-project__titolo { margin: 0; max-width: 900px; }
.scf-project__lead { max-width: 62ch; }
.scf-project__chips { gap: 12px; }
.scf-project__copertina { margin-top: clamp(28px, 4vw, 48px); }
.scf-project__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: clamp(32px, 4.4vw, 72px);
align-items: start;
}
.scf-project__corpo { min-width: 0; }
.scf-project__corpo > .scf-eyebrow { display: block; margin-bottom: 16px; }
/* misura di lettura: righe troppo lunghe fanno perdere il segno */
.scf-project__testo { max-width: 68ch; }
.scf-project__testo > p:first-of-type { font-size: clamp(17px, 1.3vw, 19px); color: var(--scf-ink-2); }
.scf-project__aside {
position: sticky;
top: calc(var(--scf-header-h) + 24px);
padding: clamp(22px, 2.4vw, 30px);
border-radius: var(--scf-radius-xl);
}
.scf-project__dati { margin: 20px 0 0; display: grid; gap: 15px; }
.scf-project__dati div + div { border-top: 1px solid var(--scf-line); padding-top: 15px; }
.scf-project__dati dt { font-size: 13px; color: var(--scf-ink-3); }
.scf-project__dati dd { margin: 3px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.scf-project__apri { margin-top: 24px; }
.scf-project__galleria { padding-top: 0; }
.scf-project__galtitolo { display: block; margin: 0 0 18px; font-size: 13px; }
.scf-project__gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.scf-project__foto {
margin: 0; overflow: hidden;
border-radius: var(--scf-radius-lg);
background: var(--scf-surface-2);
}
/* con un numero dispari di immagini la prima prende tutta la riga: niente buchi */
.scf-project__foto--larga { grid-column: 1 / -1; }
.scf-project__foto img { display: block; width: 100%; height: auto; transition: transform .5s var(--scf-ease); }
.scf-project__foto:hover img { transform: scale(1.03); }
@media (max-width: 1024px) {
.scf-project__grid { grid-template-columns: 1fr; gap: 40px; }
.scf-project__aside { position: static; }
.scf-project__testo { max-width: none; }
}
@media (max-width: 700px) {
.scf-project__gal { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.scf-project__foto img { transition: none; }
.scf-project__foto:hover img { transform: none; }
}
/* =========================================================================
47. POSIZIONI DI LAVORO
Le voci a fisarmonica di "Lavora con noi": stesso disegno delle FAQ, con la
riga piccola dei dettagli sotto al ruolo e gli elenchi puntati leggibili.
========================================================================= */
.scf-faq__t { display: block; }
.scf-faq__meta {
display: block; margin-top: 5px;
font-family: var(--scf-mono);
font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
color: var(--scf-ink-3);
}
.scf-faq__a > *:first-child { margin-top: 0; }
.scf-faq__a p { margin: 0 0 12px; }
.scf-faq__a p:last-child { margin-bottom: 0; }
.scf-faq__a ul { margin: 0 0 14px; padding-left: 20px; }
.scf-faq__a ul:last-child { margin-bottom: 0; }
.scf-faq__a li { margin: 0 0 6px; }
.scf-faq__a li::marker { color: var(--scf-purple); }
/* i link dentro elenchi, schede e passi si distinguono anche senza colore */
.scf-lista a, .scf-svc a, .scf-step a, .scf-card p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* intestazione e nota sopra a un modulo, quando sono widget nativi di Elementor */
.scf-h--modulo .elementor-heading-title, .scf-h--modulo h2 { margin: 0; font-size: clamp(24px, 2.4vw, 30px); }
.scf-nota--modulo, .scf-nota--modulo p { margin: 0; font-size: 15px; color: var(--scf-ink-2); }
/* =========================================================================
48. Moduli Formidable: campi affiancati, scelte a pillola, pulsante
========================================================================= */
/* le due colonne le fa la griglia di Formidable (frm_half = 6 colonne su 12):
niente larghezze nostre sui campi, altrimenti si dimezzano di nuovo */
.frm_forms.with_frm_style input[type=text],
.frm_forms.with_frm_style input[type=email],
.frm_forms.with_frm_style input[type=tel],
.frm_forms.with_frm_style textarea {
border-radius: 14px;
border-color: #DAD6E6;
background: #fff;
box-shadow: 0 1px 2px rgba(11,10,18,.03);
transition: border-color .2s ease, box-shadow .2s ease;
}
.frm_forms.with_frm_style input[type=text]:hover,
.frm_forms.with_frm_style input[type=email]:hover,
.frm_forms.with_frm_style textarea:hover { border-color: #B9A6E6; }
.frm_forms.with_frm_style input[type=text]:focus,
.frm_forms.with_frm_style input[type=email]:focus,
.frm_forms.with_frm_style input[type=tel]:focus,
.frm_forms.with_frm_style textarea:focus {
outline: none;
border-color: var(--scf-violet);
box-shadow: 0 0 0 4px rgba(123,24,201,.14);
}
.frm_forms.with_frm_style .frm_primary_label { font-size: 13px; letter-spacing: .01em; text-transform: none; color: var(--scf-ink-2); margin-bottom: 7px; }
.frm_forms.with_frm_style .frm_required { margin-left: 2px; }
/* Le scelte multiple lunghe (i servizi richiesti) diventano pillole: si vede
subito cosa e' selezionato e da telefono sono comode da toccare. La riga
della privacy resta una spunta normale. */
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) {
display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none;
}
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) .frm_checkbox { margin: 0; }
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) .frm_checkbox label {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 0 16px 0 12px;
border: 1px solid #DAD6E6; border-radius: 999px;
background: #fff; color: var(--scf-ink);
font-size: 14px; font-weight: 500; line-height: 1.2;
transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) .frm_checkbox label:hover { border-color: #B9A6E6; background: #FBF9FF; }
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) .frm_checkbox input[type=checkbox] {
width: 16px; height: 16px; flex: 0 0 16px; margin: 0; border-radius: 50%;
}
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) .frm_checkbox label:has(input:checked) {
border-color: var(--scf-purple); background: var(--scf-purple); color: #fff;
box-shadow: 0 10px 22px -14px rgba(61,7,121,.9);
}
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) .frm_checkbox input[type=checkbox]:checked { border-color: #fff; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233D0779' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5L19 7'/%3E%3C/svg%3E"); }
.frm_forms.with_frm_style .frm_form_field:not(.rigaprivacy) .frm_opt_container:has(> :nth-child(3)) .frm_checkbox label:has(input:focus-visible) { outline: 3px solid var(--scf-violet); outline-offset: 2px; }
.frm_forms.with_frm_style .rigaprivacy .frm_checkbox label { font-size: 13px; color: var(--scf-ink-3); }
.frm_forms.with_frm_style .frm_submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.frm_forms.with_frm_style .frm_button_submit,
.frm_forms .frm_button_submit { height: 56px; padding: 0 36px; font-size: 16px; }
.frm_forms.with_frm_style .frm_button_submit::after {
content: ""; width: 18px; height: 18px; flex: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
transition: transform .28s var(--scf-ease);
}
.frm_forms.with_frm_style .frm_button_submit:hover::after { transform: translateX(4px); }
@media (max-width: 640px) {
.frm_forms.with_frm_style .frm_button_submit, .frm_forms .frm_button_submit { width: 100%; }
}
/* il blocco a gradiente delle pagine servizio: pannello del modulo piu' arioso */
.scf-formblock .frm_forms { padding-top: 6px; }
/* =========================================================================
49. Campo telefono con prefisso internazionale (telpick)
========================================================================= */
.scf-tel { display: flex; align-items: stretch; gap: 8px; }
.scf-tel input { flex: 1 1 auto; min-width: 0; }
.scf-tel__pick { flex: none; display: flex; }
.scf-tel .telpick-wrapper { display: flex; height: 100%; }
.scf-tel .telpick-btn {
height: 56px; min-width: 0; padding: 0 12px 0 14px; gap: 8px;
border: 1px solid #DAD6E6; border-radius: 14px; background: #fff;
font-family: var(--scf-font); font-size: 15px; font-weight: 600; color: var(--scf-ink);
box-shadow: none; transform: none;
}
.scf-tel .telpick-btn:hover { border-color: #B9A6E6; box-shadow: none; transform: none; }
.scf-tel .telpick-btn:focus, .scf-tel .telpick-btn:focus-visible { outline: none; border-color: var(--scf-violet); box-shadow: 0 0 0 4px rgba(123,24,201,.14); }
.scf-tel .telpick-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; }
.scf-tel--senza .scf-tel__pick { display: none; }
.telpick-dropdown { z-index: 100000; font-family: var(--scf-font); border-radius: 16px; border-color: #E7E4F0; }
.telpick-dropdown .telpick-search { font-family: var(--scf-font); }
.telpick-item-selected, .telpick-item:hover { background: var(--scf-tint) !important; }
.telpick-item-selected { border-left-color: var(--scf-purple) !important; }
/* =========================================================================
50. Pie' di pagina: presenza sul MePA
========================================================================= */
.scf-mepa {
display: flex; align-items: center; gap: 22px;
margin-top: 18px; padding: 18px 22px;
border: 1px solid var(--scf-line); border-radius: var(--scf-radius-lg); background: #fff;
}
.scf-mepa__logo { flex: none; display: flex; align-items: center; padding: 8px 12px; border-radius: 12px; background: #F3F6F4; }
.scf-mepa__logo img { display: block; width: 180px; height: auto; }
.scf-mepa p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--scf-ink-2); }
@media (max-width: 640px) {
.scf-mepa { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* =========================================================================
51. Portfolio: filtri rivisti (barra fissa, righe con regola d'uso,
tecnologie con "+"/"✓" e "Altre N", riga dei filtri attivi)
========================================================================= */
.scf-filters { padding: 0; gap: 0; overflow: visible; background: var(--scf-surface-3); border-top: 0; border-radius: 0 0 var(--scf-radius-xl) var(--scf-radius-xl); }
/* la barra sta fuori dal riquadro (sticky vale solo dentro il genitore, che
qui e' tutto il portfolio): i bordi la fanno sembrare la testa del riquadro */
.scf-filters__bar {
display: flex; align-items: center; gap: 14px;
padding: 16px 22px;
background: #fff; border: 1px solid #EDEAF5;
border-radius: var(--scf-radius-xl) var(--scf-radius-xl) 0 0;
position: sticky; top: calc(var(--scf-header-h) + 8px); z-index: 5;
transition: box-shadow .22s ease, border-radius .22s ease;
}
.scf-filters__bar.is-stuck { box-shadow: 0 16px 30px -22px rgba(11,10,18,.35); border-radius: 0 0 var(--scf-radius-lg) var(--scf-radius-lg); }
.scf-filters__bar .scf-search { height: 44px; min-width: 200px; }
.scf-filters__count { font-size: 14px; color: var(--scf-ink-2); white-space: nowrap; }
.scf-filters__count strong { color: var(--scf-ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.scf-filters__reset {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px;
border: 1px solid var(--scf-line); border-radius: 999px; background: #fff;
font-size: 13px; font-weight: 600; color: var(--scf-ink-2); white-space: nowrap; text-decoration: none;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.scf-filters__reset:hover { border-color: #B9A6E6; color: var(--scf-purple); background: #FBF9FF; }
.scf-filters__reset.is-on { border-color: #B9A6E6; color: var(--scf-purple); }
.scf-filters__reset svg { flex: none; }
.scf-filters__body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.scf-filters__row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
.scf-filters__lab {
display: flex; flex-direction: column; gap: 4px;
padding-top: 11px;
font-family: var(--scf-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--scf-ink-3);
}
.scf-filters__lab small { font-family: var(--scf-font); font-size: 12px; letter-spacing: 0; text-transform: none; color: #8C86A0; }
.scf-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.scf-chip { height: 40px; padding: 0 16px; font-size: 14px; }
.scf-chip__i {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
background: var(--scf-tint); color: var(--scf-purple);
font-style: normal; font-size: 11px; font-weight: 700;
}
.scf-chip__n { background: #F3F1F8; border-radius: 999px; padding: 2px 7px; }
.scf-chip.is-on .scf-chip__i { background: rgba(255,255,255,.2); color: #fff; }
.scf-chip.is-on .scf-chip__n { background: rgba(255,255,255,.18); color: #fff; }
.scf-tagchip { gap: 7px; padding: 0 12px 0 10px; border-radius: 999px; background: #fff; }
.scf-tagchip::before {
content: "+";
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: #F3F1F8; color: #8C86A0; font-size: 12px; font-weight: 700; line-height: 1;
}
.scf-tagchip.is-on::before { content: "✓"; background: var(--scf-purple); color: #fff; font-size: 10px; }
.scf-tagchip.is-extra { display: none; }
.scf-filters__chips.is-open .scf-tagchip.is-extra { display: inline-flex; }
.scf-tagchip--more { border-style: dashed; color: var(--scf-ink-3); cursor: pointer; font-family: inherit; }
.scf-tagchip--more::before { display: none; }
.scf-tagchip--more:hover { color: var(--scf-purple); }
.scf-filters__active {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 12px 22px;
border-top: 1px solid #EDEAF5; background: #fff;
border-radius: 0 0 var(--scf-radius-xl) var(--scf-radius-xl);
font-size: 13px; color: var(--scf-ink-3);
}
.scf-filters__active[hidden] { display: none; }
.scf-filters__active .scf-pill {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 6px 0 12px; border-radius: 999px;
background: var(--scf-tint); color: var(--scf-purple); font-size: 13px; font-weight: 600;
}
.scf-filters__active .scf-pill button {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
background: #fff; color: var(--scf-purple); cursor: pointer;
}
.scf-filters__active .scf-pill button:hover { background: var(--scf-purple); color: #fff; }
@media (max-width: 780px) {
.scf-filters { padding: 0; gap: 0; border-radius: 0 0 var(--scf-radius-lg) var(--scf-radius-lg); }
.scf-filters__bar { position: static; padding: 12px 14px; flex-wrap: wrap; gap: 10px; border-radius: var(--scf-radius-lg) var(--scf-radius-lg) 0 0; }
.scf-filters__bar .scf-search { flex: 1 1 100%; }
.scf-filters__body { padding: 14px 0; gap: 14px; }
.scf-filters__row { grid-template-columns: 1fr; gap: 8px; padding: 0 14px; }
.scf-filters__lab { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
.scf-filters__lab small::after { content: " · scorri →"; }
.scf-filters__chips {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.scf-filters__chips::-webkit-scrollbar { display: none; }
.scf-filters__active { padding: 10px 14px; border-radius: 0 0 var(--scf-radius-lg) var(--scf-radius-lg); }
}
/* =========================================================================
52. Tabelle nei contenuti (blocco "Tabella" di WordPress, editor di testo
di Elementor, testo degli articoli). Cornice arrotondata, intestazione
in maiuscoletto viola, righe alternate, scorrimento orizzontale sugli
schermi stretti. theme.js avvolge la tabella in .scf-table__scroll,
allinea a destra le colonne solo numeriche (.scf-num), tiene su una
riga le colonne con celle corte (.scf-nowrap) e segnala lo scorrimento
(.is-scrollable / .is-end + riga .scf-table__hint). Le tabelle di
WooCommerce (carrello, attributi) restano escluse.
====================================================================== */
.scf-prose .wp-block-table,
.elementor-widget-text-editor .wp-block-table,
.scf-table {
position: relative;
margin: 32px 0;
border: 1px solid var(--scf-line);
border-radius: var(--scf-radius);
background: var(--scf-surface);
overflow-x: auto; /* senza JS scorre la figura stessa */
overflow-y: hidden;
scrollbar-width: thin;
}
:is(.wp-block-table, .scf-table):has(.scf-table__scroll) { overflow: hidden; }
.scf-table__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
:is(.wp-block-table, .scf-table) table {
width: 100%;
min-width: 560px; /* sotto questa misura scorre invece di schiacciare le colonne */
margin: 0;
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
line-height: 1.45;
color: var(--scf-ink);
}
:is(.wp-block-table, .scf-table) thead,
:is(.wp-block-table, .scf-table) tfoot { border: 0; }
:is(.wp-block-table, .scf-table) th,
:is(.wp-block-table, .scf-table) td {
padding: 13px 18px;
border: 0;
border-bottom: 1px solid var(--scf-line-2);
text-align: left;
vertical-align: top;
background: none;
}
:is(.wp-block-table, .scf-table) thead th {
background: var(--scf-surface-2);
color: var(--scf-purple);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.3;
vertical-align: bottom;
border-bottom: 1px solid var(--scf-line);
}
:is(.wp-block-table, .scf-table) tbody tr:last-child td { border-bottom: 0; }
:is(.wp-block-table, .scf-table) tbody td:first-child { font-weight: 600; }
:is(.wp-block-table, .scf-table) tbody tr:nth-child(even) td { background: #FAF9FD; }
@media (hover: hover) {
:is(.wp-block-table, .scf-table) tbody tr:hover td { background: rgba(61,7,121,.05); }
}
:is(.wp-block-table, .scf-table) td.scf-num,
:is(.wp-block-table, .scf-table) th.scf-num { text-align: right; font-variant-numeric: tabular-nums; }
:is(.wp-block-table, .scf-table) td.scf-nowrap,
:is(.wp-block-table, .scf-table) td.scf-num { white-space: nowrap; }
:is(.wp-block-table, .scf-table) tfoot td {
font-weight: 600;
background: var(--scf-surface-2);
border-top: 1px solid var(--scf-line);
border-bottom: 0;
}
:is(.wp-block-table, .scf-table) figcaption {
margin: 0;
padding: 10px 18px 12px;
border-top: 1px solid var(--scf-line-2);
font-size: 13px;
line-height: 1.5;
color: var(--scf-ink-3);
text-align: left;
}
/* variante "Righe alternate" del blocco: stesso disegno, righe dispari tinte */
.wp-block-table.is-style-stripes { border: 1px solid var(--scf-line); border-collapse: separate; background: var(--scf-surface); }
.wp-block-table.is-style-stripes tbody tr:nth-child(even) td { background: none; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td { background: #FAF9FD; }
.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th { border-color: var(--scf-line-2); }
/* segnale di scorrimento: sfumatura sul bordo destro e riga "scorri" sotto la
tabella, che si spegne quando si arriva in fondo (la riga resta, niente salti) */
.scf-table__hint {
display: none;
padding: 8px 18px;
border-top: 1px solid var(--scf-line-2);
font: 600 11px/1.4 var(--scf-font);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--scf-purple);
transition: opacity .25s var(--scf-ease);
}
:is(.wp-block-table, .scf-table).is-scrollable .scf-table__hint { display: block; }
:is(.wp-block-table, .scf-table).is-scrollable.is-end .scf-table__hint { opacity: 0; }
:is(.wp-block-table, .scf-table).is-scrollable::after {
content: "";
position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96));
border-radius: 0 var(--scf-radius) var(--scf-radius) 0;
pointer-events: none;
transition: opacity .25s var(--scf-ease);
}
:is(.wp-block-table, .scf-table).is-scrollable.is-end::after { opacity: 0; }
@media (max-width: 560px) {
:is(.wp-block-table, .scf-table) th,
:is(.wp-block-table, .scf-table) td { padding: 11px 14px; font-size: 14px; }
}
/* =========================================================================
53. BAGLIORE DELLA HOME
Le altre pagine ricevono la sfumatura dall'intestazione del tema
(.scf-pagehead, sezione 34). La home non ha intestazione: la stessa
sfumatura va sulla sua sezione hero, che ha la classe scf-hero. Vale solo
sulla home (body.home), perche' le altre pagine con quella classe hanno
gia' il bagliore sopra e ne avrebbero due. Un gradiente di sfondo sfuma
sempre: il cerchio .scf-blob, dentro un blocco largo, lascerebbe un bordo
netto sul lato.
====================================================================== */
body.home .scf-hero {
background: radial-gradient(95% 65% at 87% -6%, rgba(195,31,160,.10) 0%, rgba(123,24,201,.07) 40%, rgba(255,255,255,0) 70%);
}
/* =========================================================================
54. BARRA DI NAVIGAZIONE STRETTA
Con sette voci di primo livello, fra 1200 e 1400 px lo spazio non bastava e
"Chi siamo" e "Servizi partner" andavano a capo dentro il pulsante. Le voci
non devono spezzarsi mai; sotto i 1400 px si accorcia lo spazio fra loro,
come gia' avviene sotto i 1200.
====================================================================== */
.scf-nav__list > li > a { white-space: nowrap; }
@media (max-width: 1400px) {
.scf-nav { gap: 26px; }
.scf-nav__list { gap: 24px; }
}
/* =========================================================================
55. PAGINA DI CONFERMA (richiesta inviata)
Il blocco centrato con il bollo della spunta: quello che il visitatore vede
dopo aver inviato un modulo. La pagina serve anche come conversione per
Google Ads, quindi deve caricare senza sorprese e dire cosa succede dopo.
Il markup lo produce il widget "Conferma di invio" (scf-conferma).
====================================================================== */
.scf-grazie {
max-width: 60ch;
margin: 0 auto;
text-align: center;
}
.scf-grazie__icona {
display: inline-flex;
align-items: center;
justify-content: center;
width: 78px;
height: 78px;
margin: 0 0 26px;
border-radius: 50%;
background: var(--scf-grad);
color: #fff;
box-shadow: 0 22px 44px -20px rgba(61, 7, 121, .5);
}
.scf-grazie__icona svg { width: 36px; height: 36px; }
.scf-grazie .scf-eyebrow { display: block; margin-bottom: 12px; }
.scf-grazie h1,
.scf-grazie h2 { margin: 0 0 18px; }
.scf-grazie .scf-lead { margin: 0 auto; }
/* senza la colonna dell'immagine l'intestazione puo' stare piu' raccolta */
.scf-grazie-sec.scf-hero { padding-block: clamp(40px, 4.5vw, 72px) clamp(32px, 3.5vw, 56px); }
/* i pulsanti sotto il blocco stanno al centro come il resto */
.scf-grazie-sec .scf-row { justify-content: center; }
.scf-grazie-sec .scf-sechead {
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
}
.scf-grazie-sec .scf-sechead__main { align-items: center; }
.scf-grazie-sec .scf-sechead h2 { max-width: 26ch; }
.scf-grazie-sec .scf-sechead__aside { max-width: 56ch; margin: 0; }
@media (max-width: 560px) {
.scf-grazie__icona { width: 64px; height: 64px; margin-bottom: 20px; }
.scf-grazie__icona svg { width: 30px; height: 30px; }
.scf-grazie-sec .scf-row .scf-btn { width: 100%; }
}
/* =========================================================================
56. MENU DEL FOOTER CHE SI APRONO (da telefono)
Sotto i 780px le tre colonne diventano tre elenchi uno sotto l'altro e il
footer si allunga per uno schermo e mezzo. Il titolo di ogni colonna
diventa un pulsante che apre e chiude il suo elenco.
Il CSS chiude soltanto quello che e' dichiarato chiuso
(aria-expanded="false", scritto dal JS): senza JavaScript non c'e'
l'attributo, gli elenchi restano aperti e il footer funziona come prima.
====================================================================== */
.scf-footer__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.scf-footer__toggle > .scf-eyebrow { color: var(--scf-ink); }
/* la freccia esiste solo dove il pulsante serve: da tablet in su il JS
toglie aria-expanded, e con lui sparisce la freccia */
.scf-footer__caret { flex: none; color: var(--scf-ink-2); transition: transform .22s ease; }
.scf-footer__toggle:not([aria-expanded]) .scf-footer__caret { display: none; }
.scf-footer__toggle[aria-expanded="true"] .scf-footer__caret { transform: rotate(180deg); }
/* da tablet in su il pulsante e' spento: deve sembrare un titolo e non un tasto */
.scf-footer__toggle[disabled] { cursor: default; opacity: 1; }
.scf-footer__panel { display: block; }
@media (max-width: 780px) {
/* l'area da toccare arriva a 44px, quanto chiede una mano */
.scf-footer__toggle {
min-height: 44px;
padding-block: 4px;
border-bottom: 1px solid var(--scf-line);
}
/*
* Chiuso e' lo stato di partenza, deciso dal CSS: il pannello si apre
* solo quando il pulsante lo dichiara aperto. Prima era il contrario
* (si chiudeva solo cio' che era dichiarato chiuso) e in produzione,
* dove WP Rocket rinvia gli script alla prima interazione, il footer
* si disegnava aperto e si accartocciava al primo tocco. Lo stato
* giusto deve valere al primo disegno, non al primo clic.
* Chi ha il JavaScript spento lo riapre col