, e il margine sotto l'ultimo paragrafo aggiungerebbe uno stacco che nel
disegno non c'e' - su mobile spingerebbe giu' la form di 16px. Circoscritto
al blocco della leadbox: la Nota legale 2, che sta nel .disclaimerbox piu'
sotto, e' gia' rich text da prima e non va toccata. */
.leadbox .disclaimer > p:last-child {
margin-bottom: 0;
}
.leadbox {
padding: 2rem 0.5rem;
position: relative;
}
/* ---- da 992px in su: misure fisse invece della griglia a 12 colonne ----
Il Figma quota 60px sopra il titolo, 140 di margine, il blocco di testo a
474, 16 di stacco e il form a 670. Le percentuali di Bootstrap
(offset-lg-1 + col-lg-4 + col-lg-6) non cadono su quei numeri: davano 139 di
margine, 451 di testo, 24 di stacco e 157 a destra.
Il conto del disegno chiude esatto: 140 + 474 + 16 + 670 + 140 = 1440, e i
due margini da 140 non si scrivono - nascono dal centrare il gruppo.
Le colonne possono restringersi (flex-shrink a 1), cosi' fra 992 e 1440 il
blocco si adatta invece di sbordare. */
@media (min-width: 992px) {
.leadbox {
padding-top: 60px;
}
.leadbox > .container-fluid > .row {
flex-wrap: nowrap;
justify-content: center;
gap: 16px;
margin-left: 0;
margin-right: 0;
}
.leadbox > .container-fluid > .row > [class*="col-lg-"] {
padding-left: 0;
padding-right: 0;
}
.leadbox > .container-fluid > .row > .col-lg-4 {
flex: 0 1 474px;
max-width: 474px;
/* annulla offset-lg-1: il margine sinistro lo da' la centratura */
margin-left: 0;
}
.leadbox > .container-fluid > .row > .col-lg-6 {
flex: 0 1 670px;
max-width: 670px;
}
}
.disclaimerbox {
padding: 2rem 0;
}
/* Padding allineato al Figma il 05/08/2026: il nodo "Form" dichiara 32, prima
erano 24. La larghezza di 670 la da' la colonna, piu' sotto, cosi' sul
telefono la scatola resta piena. */
.form-box {
border-top: 0.1875rem solid #228000;
box-shadow: 0 0 0.75rem 0 #0000001f;
background-color: #fff;
padding: 2rem;
z-index: 10;
}
.form-box p {
font-size: 0.75rem;
line-height: 1rem;
}
.form-title {
line-height: 1.375rem;
margin-bottom: 0.3125rem;
}
.form-subtitle {
font-size: 0.875rem;
line-height: 1.1875rem;
margin-bottom: 1rem;
}
/* Qui stava .contact-bar, la barra "Contattaci" fissa in fondo su mobile.
Rimossa perche' non e' nel Figma (segnalazione Elisa, punto 4). La classe
non e' usata da nessun'altra view e questo foglio di stile e' solo di
questa landing, quindi la regola se ne va con lei. */
.infobox {
padding: 1.5rem 0.5rem;
background-color: #f8f8f8;
}
.info-title {
font-size: 1.5rem;
line-height: 2rem;
}
.info-card {
width: 16.25rem;
min-width: 16.25rem;
max-width: 16.25rem;
padding: 2rem;
background-color: #fff;
border-top: 3px solid #228000;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.2);
margin: 0 0.5rem;
}
.info-card .card-title {
font-size: 1.125rem;
line-height: 1.5rem;
}
.info-card .desc {
font-size: 0.875rem;
line-height: 1.5rem;
}
.info-card .card-link {
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 20px;
}
.info-card .card-link:hover {
color: #228000;
}
.info-card .card-link:hover svg * {
fill: #228000;
stroke: #228000;
}
section#feedback {
display: none;
flex: 1;
flex-direction: column;
}
section#feedback .disclaimerbox,
section#feedback .blogbox {
display: none;
}
.feedbackbox {
background-color: #f8f8f8;
padding: 3.75rem 1rem;
display: none;
min-width: 100%;
}
.feedbackbox.negative {
flex: 1;
}
.feedbackbox .title {
font-size: 2rem;
line-height: 2.625rem;
}
.feedbackbox .subtitle {
font-size: 1.125rem;
line-height: 1.875rem;
}
.feedbackbox .icon {
width: 4.6875rem;
}
.blogbox {
padding: 2.5rem 0 0;
}
.blogbox .carousel .slick-list {
overflow-y: visible;
}
.blogbox .carousel .slick-track {
padding: 0 0 1rem;
}
.brandbox {
padding: 2.5rem 0;
}
.brandbox .title {
font-size: 1.25rem;
line-height: 1.75rem;
}
.brandbox .subtitle {
font-size: 0.875rem;
line-height: 1.25rem;
}
.brandbox .info-card {
padding: 1.5rem 1rem;
}
.brandbox .info-card .btn {
text-transform: none;
font-weight: 600;
}
.bannerbox .banner {
background-color: #f8f8f8;
}
.bannerbox .banner .banner-title {
font-size: 1.25rem;
line-height: 1.75rem;
}
.bannerbox .banner .benner-desc {
font-size: 0.875rem;
line-height: 1.375rem;
}
.descriptionbox .desc-title {
font-size: 1.5rem;
line-height: 2.0625rem;
}
.descriptionbox .desc {
font-size: 1rem;
line-height: 1.5rem;
}
.descriptionbox .desc a {
text-decoration: none;
display: inline-flex;
}
.descriptionbox .desc img {
display: block;
margin: 2.5rem auto 0;
}
section#otp {
display: none;
flex: 1;
}
.otp-box {
padding: 3.75rem 0.375rem 3.75rem;
display: none;
}
.otp-box .otp-error {
display: none;
}
.otp-box .otp-ok .icon,
.otp-box .otp-error .icon {
max-width: 75px;
}
.otp-box .title {
font-size: 1.5rem;
line-height: 2rem;
}
.otp-box .desc {
font-size: 1.125rem;
line-height: 1.5rem;
}
.otp-box .otp-list {
max-width: 18.75rem;
}
.otp-box .otp-error-message {
max-width: 18.75rem;
padding-left: 0.3125rem;
display: none;
}
.otp-box .otp-error-message p {
display: none;
}
.otp-box .instructions {
font-size: 0.875rem;
line-height: 1rem;
}
.otp-box .instructions .tip {
display: none;
}
.otp-box .instructions .send-tip label {
display: none;
}
.otp-box .instructions .tip .resend {
color: #228000;
text-decoration: underline;
cursor: pointer;
}
.otp-box .instructions .tip .resend.disabled {
pointer-events: none;
}
.otp-loader {
display: none;
}
@media (min-width: 992px) {
#wrapper {
padding-top: 6.25rem;
}
.overflow-list {
overflow-x: hidden;
margin: 0;
width: 100%;
padding: 0;
}
/* HEADER */
header {
height: 6.25rem;
}
header img {
width: 14.6875rem;
}
header .back-link {
margin-right: 6.5rem;
}
/* FOOTER */
footer p {
line-height: 1.0212rem;
}
/* CONTENT*/
.title {
font-size: 2.125rem;
line-height: 2.875rem;
margin: 0;
}
/* H2 su desktop: 32px, vedi la nota alla regola base. */
h2.title {
font-size: 2rem; /* 32px */
line-height: 2.75rem; /* 44px */
}
.subtitle {
font-size: 1.5rem;
line-height: 1.875rem;
margin: 0;
}
.description {
font-size: 1rem;
line-height: 1.5rem;
}
.disclaimer {
font-size: 0.75rem;
font-style: italic;
line-height: 1rem;
}
.info-title {
font-size: 2rem;
line-height: 2.75rem;
}
.headbox {
height: 0;
padding-top: 28%; /* 3.6:1 aspect ratio */
--bs-aspect-ratio: 0;
}
.leadbox {
padding: 2rem 0;
}
.leadbox .title,
.leadbox .subtitle,
.leadbox .description,
.leadbox .disclaimer {
margin-right: 4.5rem;
}
/* Il margine negativo tirava la scheda della form sopra la vecchia immagine
di testata, che non viene piu' renderizzata: l'apertura di pagina ora e' il
modulo Slider. Lasciandolo, la form si sovrapporrebbe all'hero. */
.leadbox .form-box {
padding: 2rem;
}
.disclaimerbox {
padding: 2rem 0;
}
.form-title {
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 0.5rem;
}
.form-subtitle {
font-size: 1rem;
line-height: 1.375rem;
margin-bottom: 1rem;
}
.infobox {
padding: 3rem 0;
}
.info-card {
width: 100%;
max-width: 100%;
margin: 0;
padding: 2rem 2rem 1.5rem;
}
.info-card.wide-lg {
width: 100%;
max-width: 100%;
}
.info-card .card-title {
font-size: 1.25rem;
line-height: 1.7025rem;
}
.info-card .desc {
font-size: 0.875rem;
line-height: 1.625rem;
}
.feedbackbox .subtitle {
font-size: 1.25rem;
line-height: 1.875rem;
max-width: 61.25rem;
margin: 0 auto;
}
.blogbox {
padding: 3.75rem 0 5rem;
}
.feedbackbox .title,
.blogbox .title {
font-size: 40px;
line-height: 3.375rem;
}
.blogbox .subtitle {
font-size: 1.25rem;
line-height: 1.875rem;
margin-bottom: -3rem;
max-width: 37.5rem;
}
.blogbox .carousel-container {
padding-left: 2rem;
margin-left: -2rem;
}
.blogbox .carousel {
width: calc(100% + 23rem);
padding: 5rem 0 2rem;
}
.blogbox .info-card {
margin-right: 0.75rem;
max-width: 35rem;
width: 35rem;
margin: 0 0.25rem;
}
.brandbox {
padding: 3rem 0;
}
.brandbox .title {
font-size: 1.5rem;
line-height: 2rem;
}
.brandbox .subtitle {
font-size: 1rem;
line-height: 1.375rem;
max-width: 100%;
}
.brandbox .info-card {
padding: 1.5rem 1rem;
}
.brandbox .info-card .btn {
text-transform: none;
font-weight: 600;
}
.bannerbox .banner .banner-title {
font-size: 2rem;
line-height: 2.75rem;
}
.bannerbox .banner .benner-desc {
font-size: 1rem;
line-height: 1.5rem;
}
.descriptionbox .desc-title {
font-size: 1.5rem;
line-height: 2rem;
}
.descriptionbox .desc {
font-size: 1rem;
line-height: 1.5rem;
}
.descriptionbox .desc img {
margin: 2rem auto;
}
}
@media (min-width: 1205px) {
.descriptionbox .desc img {
display: inline-block;
margin: 2rem 3rem;
}
.otp-box {
padding: 2rem 8.75rem;
display: none;
flex: 1;
height: 100%;
align-items: center;
}
.otp-box .title {
font-size: 2rem;
line-height: 2.75rem;
}
.otp-box .desc {
font-size: 1.25rem;
line-height: 1.75rem;
}
.otp-box .instructions {
font-size: 0.875rem;
line-height: 1rem;
}
}
/* =====================================================================
Modulo Slider (hero) - CR Call Me Back 14/09/2026
Misure rilevate dal Figma, vedi CR-CallMeBack-SpecFigma.md.
Mobile first, come il resto del file: il breakpoint e' 992px.
Le due composizioni sono diverse, non una il restringimento dell'altra:
- da 992px in su i testi stanno SOPRA l'immagine, con la velatura scura
- sotto i 992px l'immagine e' una fascia 16:9 e i testi stanno SOTTO,
su fondo bianco, senza velatura
===================================================================== */
.cmb-hero {
position: relative;
/* Colore dei comandi. Su mobile sono sempre scuri perche' stanno su fondo
bianco; da 992px in su seguono il colore testo della slide corrente. */
color: #1d1d1d;
}
.cmb-hero__viewport {
overflow: hidden;
}
.cmb-hero__track {
display: flex;
transition: transform .5s ease;
}
.cmb-hero__slide {
position: relative;
flex: 0 0 100%;
min-width: 100%;
}
/* Rapporto 16:9 della fascia mobile: 212 di altezza su 375 di larghezza. */
.cmb-hero__media {
position: relative;
padding-top: 56.53%;
}
/* e porzioni in
grassetto, ed e' li' che nasce il peso misto del disegno. */
.cmb-hero__titolo {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 28px;
/* Il Figma dichiara "line height 100%", che pero' significa interlinea
naturale del font (circa 1,36) e non line-height: 1. */
line-height: normal;
margin: 0;
}
.cmb-hero__titolo p {
margin: 0;
}
.cmb-hero__titolo b,
.cmb-hero__titolo strong {
font-weight: 700;
}
/* Anche il sottotitolo arriva da un rich text, quindi contiene paragrafi: il
margine sta sul contenitore e i paragrafi interni non ne aggiungono altri. */
.cmb-hero__sottotitolo {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
/* 20px e non 18: e' un H3, e nella gerarchia degli heading del cliente
(Accenture, 02/09/2026) l'H3 su mobile vale 20. Il desktop era gia' a 24. */
font-size: 20px;
line-height: normal;
margin: 16px 0 0;
}
.cmb-hero__sottotitolo p {
margin: 0;
}
/* Nel Figma, fra il sottotitolo e la CTA, c'e' una riga di nota legale: Open
Sans 400 a 12px, dello stesso colore del testo, staccata di 32px come tutti
gli altri elementi del blocco.
Non e' un campo a se' (decisione del 05/08/2026): i redattori la scrivono
come paragrafo successivo dentro il rich text del sottotitolo. Il primo
paragrafo e' quindi il sottotitolo, tutto quello che segue e' nota. */
.cmb-hero__sottotitolo p + p {
/* 16px su mobile, 32 da 992 in su: e' lo stesso passo degli altri stacchi
del blocco, che sul telefono sono tutti dimezzati. */
margin-top: 16px;
font-size: 12px;
}
/* Il richiamo alla velina e' un link dentro il sottotitolo: deve restare
leggibile anche sul testo bianco sopra la fotografia, quindi eredita il
colore del testo invece del verde di sistema, e resta sottolineato perche'
il solo colore non basta a segnalare un link. */
.cmb-hero__sottotitolo a {
color: inherit;
font-weight: inherit;
text-decoration: underline;
}
.cmb-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
min-width: 128px;
margin-top: 16px;
padding: 0 16px;
background-color: #228000;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
/* Il passaggio del mouse e' quello di .btn del sito: il fondo va da verde a
grigio scuro, senza sottolineatura. Prima c'era la sola sottolineatura, che
non e' il comportamento delle altre CTA della landing. */
.cmb-hero__cta:hover,
.cmb-hero__cta:focus {
background-color: #323232;
color: #fff;
text-decoration: none;
}
/* ---- frecce ----
Sul mockup mobile non compaiono: li' si scorre col dito, e due bersagli in
piu' sopra una fascia alta 212px ruberebbero spazio all'immagine. */
/* Il comando e' il cuneo 30 x 60 del Figma, a filo del bordo e centrato in
verticale: nel disegno sta da 1410 a 1440 su 1440, e da 320 a 380 su 700. */
.cmb-hero__freccia {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 30px;
height: 60px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
/* Sul primo e sull'ultimo scatto la freccia si spegne invece di riportare
all'altro capo. Stesso trattamento delle frecce del modulo Cards. */
.cmb-hero__freccia[disabled] {
opacity: .3;
cursor: default;
}
/* Su immagine scura: cuneo quasi bianco, freccia grigia. Letti dal pannello
del Figma il 05/08/2026 sul nodo Group 40996 delle due varianti: il cuneo
NON e' bianco pieno ma Neutral/Grey-4 #F7F7F7. */
.cmb-hero__cuneo {
fill: #f7f7f7;
}
.cmb-hero__punta {
fill: #7a7a7a;
}
/* Su immagine chiara si scambiano. La classe la mette il JS sulla fascia, in
base alla slide corrente, ed e' la stessa che governa barre e pausa. */
.cmb-hero.is-comandi-scuri .cmb-hero__cuneo {
fill: #767676;
}
.cmb-hero.is-comandi-scuri .cmb-hero__punta {
fill: #fff;
}
/* ⚠️ Le frecce restano ai BORDI DELLO SCHERMO e NON rientrano nella griglia
da 1160 introdotta il 09/09/2026: sono comandi di navigazione, non
contenuto. ✅ Confermato dal cliente lo stesso giorno - «devono restare
ancorate ai bordi dello schermo, come sulla home fideuram.it».
Chi allinea anche queste alla griglia sta correggendo una cosa che e'
gia' stata decisa. */
.cmb-hero__freccia--prec {
left: 0;
}
.cmb-hero__freccia--succ {
right: 0;
}
.cmb-hero__freccia svg {
display: block;
}
/* ---- barre di avanzamento e comando pausa ----
Su mobile stanno sotto l'immagine: barre a sinistra, pulsante a destra,
entrambi centrati sull'asse a 24px dal bordo inferiore della fascia.
La fascia e' alta il 56,53% della larghezza della finestra, da cui il calc. */
.cmb-hero__comandi {
position: absolute;
top: calc(56.53vw + 8px);
left: 20px;
right: 20px;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
}
.cmb-hero__barre {
display: flex;
align-items: center;
gap: 8px;
}
/* Il pulsante e' alto 24px per rispettare la dimensione minima del bersaglio;
la barra visibile e' disegnata dallo pseudo-elemento. */
.cmb-hero__barra {
position: relative;
width: 8px;
height: 24px;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.cmb-hero__barra::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 4px;
border-radius: 2px;
background-color: currentColor;
opacity: .4;
}
/* La slide corrente si distingue per lunghezza, non solo per opacita':
resta riconoscibile anche senza percezione del colore. */
.cmb-hero__barra.is-active {
width: 16px;
}
.cmb-hero__barra.is-active::before {
width: 16px;
opacity: 1;
}
.cmb-hero__pausa {
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.cmb-hero__icona {
display: block;
}
/* Il comando e' un DISCO PIENO grigio con il segno bianco dentro, non un
cerchio vuoto col contorno. Letto dal pannello del Figma il 05/08/2026 sul
nodo Pause/Play: 32 x 32, raggio 1000 (quindi tondo), riempimento
Neutral/Grey-2 #767676, e il vettore del segno bianco 12 x 14.
⚠️ Il disco NON cambia colore fra le due varianti della hero: e' #767676
sia sulla tavola a sfondo scuro sia su quella a sfondo chiaro, verificato
su entrambe. Le frecce invece si scambiano, e per questo non condividono
piu' lo stesso `color` ereditato. */
.cmb-hero__disco {
fill: #767676;
}
.cmb-hero__segno {
fill: #fff;
}
.cmb-hero__icona--play {
display: none;
}
.cmb-hero.is-in-pausa .cmb-hero__icona--pausa {
display: none;
}
.cmb-hero.is-in-pausa .cmb-hero__icona--play {
display: block;
}
/* ---- da 992px in su: i testi tornano sopra l'immagine ---- */
@media (min-width: 992px) {
/* Il colore dei comandi segue la slide: chiara -> comandi bianchi,
scura -> comandi scuri (classe messa dal JS). */
.cmb-hero {
color: #fff;
}
.cmb-hero.is-comandi-scuri {
color: #1d1d1d;
}
/* Immagine e testi occupano la STESSA cella di griglia: si sovrappongono come
nel disegno, ma l'altezza della fascia diventa la MAGGIORE DELLE DUE.
E' lo stesso impianto della card della Striscia, e per la stessa ragione:
prima l'altezza era bloccata sul rapporto del disegno e i testi ci stavano
dentro in posizionamento assoluto, quindi un sottotitolo piu' lungo del
previsto sbordava dalla fascia, finiva sotto la testata e spingeva la CTA
sopra la sezione successiva. I limiti di caratteri sulle property sono solo
redazionali: nessuno impedisce di superarli, quindi non ci si puo' contare. */
.cmb-hero__slide {
display: grid;
}
/* Hero A: il frame nel Figma e' 1440 x 700 fisso, quindi 700/1440 = 48,61%.
Sulla scheda quotata c'e' scritto "aspect ratio di 2.05:1", ma quello e' un
arrotondamento: 1/2,05 darebbe 48,78%, cioe' 702,4px invece di 700. Vale il
frame, non l'etichetta.
Il rapporto ora sta sull'immagine e non piu' sulla slide: e' cosi' che
diventa un'altezza MINIMA invece che fissa. Se i testi chiedono di piu',
la riga cresce e la fotografia si allunga con lei, che con object-fit:
cover vuol dire ritagliata, non deformata. */
.cmb-hero__media {
grid-area: 1 / 1;
position: relative;
padding-top: 48.61%;
}
/* Rapporto 2.88:1 della hero B. */
.cmb-hero--bassa .cmb-hero__media {
padding-top: 34.72%;
}
/* Gradiente del Figma aggiornato, COPIATO dal file e non ricavato.
Letto il 15/09/2026 con "Copy as code > CSS" dal menu contestuale, che
funziona anche in sola lettura e - a differenza del pannello Properties -
da' angolo e posizione delle fermate. Identico su:
- Hero full viewport - A (sfondo scuro) nodo 1661:1381
- Hero slider con testo - B sx (sfondo scuro) nodo 1661:1433
Valore dichiarato:
linear-gradient(270deg, rgba(0,0,0,0) 37.57%,
rgba(0,0,0,0.702393) 63.39%, #000000 100%)
270deg va verso SINISTRA: nero pieno sul bordo del copy, 70% al 36,6% della
larghezza, trasparente dal 62,4% in poi. La meta' opposta della foto resta
pulita.
⚠️ Storia, perche' qui il valore e' cambiato tre volte:
- fino all'11/09: gradiente lineare 70% -> 0 + tinta piatta al 20%;
- 11/09: il Figma perde la tinta piatta, resta 70% -> 0;
- 15/09: il gradiente passa a tre fermate, fino al nero pieno.
⚠️ La variante B dx (sfondo scuro, nodo 1661:1490) NON e' stata aggiornata
nel Figma: ha ancora 70% -> 0 + 20% pieno, per giunta sotto un'altra
immagine. Per il copy a destra si usa quindi lo SPECCHIO di quella a
sinistra (90deg, stesse fermate): e' una deduzione, non un valore letto.
Serve a garantire il contrasto del testo bianco sulla fotografia: e' un
requisito di accessibilita', non una scelta estetica. */
.cmb-hero__velatura {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(270deg,
rgba(0, 0, 0, 0) 37.57%,
rgba(0, 0, 0, .702393) 63.39%,
#000 100%);
}
/* Col testo a destra il gradiente parte dal lato opposto: stesse fermate,
angolo speculare. */
.cmb-hero__slide--destra .cmb-hero__velatura {
background-image:
linear-gradient(90deg,
rgba(0, 0, 0, 0) 37.57%,
rgba(0, 0, 0, .702393) 63.39%,
#000 100%);
}
/* Nella stessa cella dell'immagine, ma NEL FLUSSO: e' questo che permette ai
testi di far crescere la fascia invece di sbordarne.
I 140 laterali sono quelli del disegno. In verticale ci vuole per forza uno
stacco: finche' i testi ci stanno nel rapporto questi padding non cambiano
nulla - la riga resta alta 48,61% - ma quando sono i testi a dettare
l'altezza evitano che tocchino i bordi. I 100 in fondo tengono conto dei
comandi, che stanno a 36 dal fondo e sono alti 32. */
.cmb-hero__contenuto {
grid-area: 1 / 1;
position: relative;
display: flex;
align-items: center;
padding: 60px 140px 100px;
}
.cmb-hero__slide--destra .cmb-hero__contenuto {
justify-content: flex-end;
}
.cmb-hero__testi {
max-width: 473px;
}
.cmb-hero__slide--chiaro .cmb-hero__testi {
color: #fff;
}
.cmb-hero__slide--scuro .cmb-hero__testi {
color: #1d1d1d;
}
.cmb-hero__titolo {
font-size: 34px;
}
.cmb-hero__sottotitolo {
font-size: 24px;
margin-top: 32px;
}
.cmb-hero__sottotitolo p + p {
margin-top: 32px;
}
.cmb-hero__cta {
margin-top: 32px;
}
.cmb-hero__freccia {
display: block;
}
.cmb-hero__comandi {
top: auto;
bottom: 36px;
left: 140px;
right: auto;
justify-content: flex-start;
/* Distanza fra l'ultima barra e il pulsante, da Figma. */
gap: 36px;
}
.cmb-hero--bassa .cmb-hero__comandi {
bottom: 24px;
}
.cmb-hero__barra {
width: 32px;
}
.cmb-hero__barra::before {
width: 32px;
height: 2px;
opacity: .6;
}
/* Su desktop la slide corrente e' piu' lunga E piu' spessa. */
.cmb-hero__barra.is-active {
width: 46px;
}
.cmb-hero__barra.is-active::before {
width: 46px;
height: 4px;
}
}
/* Chi ha chiesto meno animazioni non deve subire ne' lo scorrimento
automatico (spento dal JS) ne' la transizione. */
@media (prefers-reduced-motion: reduce) {
.cmb-hero__track {
transition: none;
}
}
/* =====================================================================
Velina del disclaimer - CR Call Me Back 14/09/2026
Misure in CR-CallMeBack-SpecFigma.md. Il guscio e' una modale Bootstrap
5.3, gia' caricata dalla pagina: da' focus trap, chiusura con ESC e
ritorno del fuoco al punto di partenza senza doverli scrivere.
===================================================================== */
/* Velatura della pagina: misurata sul mockup a nero 50%, che e' gia' il valore
predefinito di Bootstrap (--bs-backdrop-bg #000, --bs-backdrop-opacity .5).
Non serve quindi nessuna sovrascrittura: farla toccherebbe anche le altre
modali della pagina senza alcun guadagno. */
/* Mobile: la finestra sta a 18px dai bordi della viewport. */
.cmb-velina__dialog {
margin: 18px;
max-width: none;
}
.cmb-velina__finestra {
position: relative;
border: 0;
/* Angoli VIVI, non smussati (segnalazione Accenture del 27/08/2026, punto 22):
i 30px di raccordo vengono da Fideuram Direct, ma questa pagina sta su
fideuram.it, dove gli angoli sono a 90 gradi. */
border-radius: 0;
padding: 64px 18px 32px;
/* Nel Figma la finestra non ha ombra: il passaggio fra la pagina velata e il
bianco e' netto, senza sfumatura. Bootstrap ne mette una sua, va spenta. */
box-shadow: none;
/* Nessuna barra di scorrimento dentro la finestra: la larghezza e' definita,
quindi il testo va a capo e la finestra cresce in altezza. Se diventa piu'
alta dello schermo scorre il contenitore esterno della modale, che e' il
comportamento normale di Bootstrap e tiene la chiusura raggiungibile. */
overflow: visible;
}
.cmb-velina__chiudi {
position: absolute;
top: 30px;
right: 24px;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
color: #1d1d1d;
cursor: pointer;
}
.cmb-velina__chiudi svg {
display: block;
}
.cmb-velina__titolo {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: normal;
color: #1d1d1d;
margin: 0 0 16px;
overflow-wrap: break-word;
}
.cmb-velina__corpo {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #1d1d1d;
/* I testi incollati dai redattori arrivano spesso con spazi indivisibili al
posto degli spazi normali: senza questo, una riga lunga non andrebbe a capo
e sbordherebbe dalla finestra. */
overflow-wrap: break-word;
}
.cmb-velina__corpo p {
margin: 0 0 1em;
}
.cmb-velina__corpo p:last-child {
margin-bottom: 0;
}
/* ---- da 992px in su ---- */
@media (min-width: 992px) {
/* Larghezza 964px a 1440, centrata sui due assi. La centratura verticale
la mette modal-dialog-centered di Bootstrap. */
.cmb-velina__dialog {
margin: 1.75rem auto;
max-width: 964px;
}
.cmb-velina__finestra {
padding: 60px 98px;
}
.cmb-velina__chiudi {
top: 36px;
right: 36px;
}
}
/* =====================================================================
Modulo Striscia - CR Call Me Back 14/09/2026
Misure in CR-CallMeBack-SpecFigma.md. Mobile first, breakpoint 992px.
Le due composizioni sono diverse, non una il restringimento dell'altra:
- sotto i 992px immagine e card sono IMPILATE, la card sta sotto
- da 992px in su la card e' SOVRAPPOSTA all'immagine, a sinistra
===================================================================== */
.cmb-striscia {
/* Il grigio e' campionato dal mockup. Il bianco e' l'altra scelta possibile. */
background-color: #fff;
/* Mobile: 32px sopra l'immagine e 32px sotto la card. */
padding: 32px 0;
}
.cmb-striscia--grigia {
background-color: #f7f7f7;
}
.cmb-striscia__interno {
position: relative;
/* Alle misure del disegno a 1440; oltre, il contenuto non si stira. */
max-width: 1440px;
margin: 0 auto;
}
/* Rapporto 16:9 dell'immagine: su mobile e' 375 x 212, a filo dei bordi. */
.cmb-striscia__media {
position: relative;
padding-top: 56.25%;
}
.cmb-striscia__img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Attribuzione del copyright: riquadro a filo dell'angolo in basso a sinistra
dell'immagine, come nel Figma. Misurato sul mockup: 28px di altezza, nero al
65% uniforme (non una sfumatura), testo bianco in corsivo da 12px. */
.cmb-striscia__copyright {
position: absolute;
left: 0;
bottom: 0;
max-width: 100%;
padding: 6px 8px;
background-color: rgba(0, 0, 0, .65);
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-style: italic;
font-size: 12px;
line-height: 16px;
}
.cmb-striscia__card {
position: relative;
/* Mobile: 24px sotto l'immagine, 18px dai bordi, padding 16/32. */
margin: 24px 18px 0;
padding: 16px 32px;
background-color: #fff;
/* Filetto verde in testa, 3px: e' lo stesso trattamento che ha gia' .form-box
su questa landing, quindi il componente resta coerente col resto. */
border-top: 3px solid #228000;
/* Ombra: mancava, segnalata dalla redazione il 27/08/2026 - era l'unica
scheda della pagina senza. Il valore e' quello letto dal pannello del
Figma sulla card delle Cards (X 0, Y 0, Blur 16, Spread 0, #000000 12%),
applicato qui perche' e' lo stesso file e la stessa famiglia di
componenti. I due nodi della Striscia nel Figma sono schede quotate da
731px e l'ombra da li' non si legge.
⚠️ Le vecchie .info-card della landing usano invece il 20%: se in
revisione la Striscia dovesse sembrare troppo leggera, e' quello il
numero da cambiare. */
box-shadow: 0 0 16px rgba(0, 0, 0, .12);
}
/* Mobile 20px, desktop 24px: gli stessi due corpi del titolo delle Cards. Il
Figma non quota i corpi della Striscia, sono indicati dal cliente. */
.cmb-striscia__titolo {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 20px;
/* Interlinea naturale del font (circa 1,36), non line-height: 1. */
line-height: normal;
color: #1d1d1d;
margin: 0;
overflow-wrap: break-word;
}
.cmb-striscia__titolo p {
margin: 0;
}
/* Mobile 14px, desktop 16px. L'interlinea resta in proporzione: 22 e 26. */
.cmb-striscia__testo {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
/* Su desktop l'interlinea e' dichiarata e non naturale: 26px misurati sul
mockup, cioe' piu' aria di quella che ha il testo della hero. */
line-height: 22px;
color: #1d1d1d;
margin: 12px 0 0;
overflow-wrap: break-word;
}
.cmb-striscia__testo p {
margin: 0;
}
.cmb-striscia__testo p + p {
margin-top: .75em;
}
/* Il richiamo alla velina sta dentro questo testo: eredita il colore e resta
sottolineato, perche' il solo colore non basta a segnalare un link. */
.cmb-striscia__testo a {
color: inherit;
font-weight: inherit;
text-decoration: underline;
}
.cmb-striscia__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
min-width: 128px;
margin-top: 12px;
padding: 0 16px;
background-color: #228000;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
/* Stesso passaggio del mouse di .btn e della CTA della hero. */
.cmb-striscia__cta:hover,
.cmb-striscia__cta:focus {
background-color: #323232;
color: #fff;
text-decoration: none;
}
/* ---- da 992px in su: card sovrapposta all'immagine ---- */
@media (min-width: 992px) {
/* 60px sopra e sotto l'immagine. */
.cmb-striscia {
padding: 60px 0;
}
.cmb-striscia__titolo {
font-size: 24px;
}
.cmb-striscia__testo {
font-size: 16px;
line-height: 26px;
}
/* Immagine e card occupano la STESSA cella di griglia: si sovrappongono come
nel disegno, ma l'altezza della fascia diventa la maggiore delle due. Con la
card in posizionamento assoluto, un testo piu' lungo del previsto le sarebbe
sbordato fuori - e i limiti di caratteri sono solo redazionali, quindi puo'
succedere. */
.cmb-striscia__interno {
display: grid;
}
/* Immagine 1006 x 566 su 1440, a filo del bordo destro: 1006/1440 = 69,86%.
Il rapporto resta 16:9, quindi l'altezza segue la larghezza. */
.cmb-striscia__media {
grid-area: 1 / 1;
justify-self: end;
width: 69.86%;
padding-top: 39.31%; /* 566/1440 */
}
/* Col box a destra, l'immagine passa a sinistra. */
.cmb-striscia--box-destra .cmb-striscia__media {
justify-self: start;
}
/* Senza box di testo l'immagine non ha un lato a cui appoggiarsi: si centra. */
.cmb-striscia--senza-box .cmb-striscia__media {
justify-self: center;
}
/* Card larga 474 a 140 dal margine, su 1440: 32,92% e 9,72%.
Centrata verticalmente NELLA FASCIA, non sull'immagine: i 177px segnati
sulle schede sono derivati dall'altezza del contenuto, non una regola. */
.cmb-striscia__card {
grid-area: 1 / 1;
align-self: center;
justify-self: start;
z-index: 1;
width: 32.92%;
margin: 0 0 0 9.72%;
padding: 32px;
}
.cmb-striscia--box-destra .cmb-striscia__card {
justify-self: end;
margin: 0 9.72% 0 0;
}
}
/* =====================================================================
Modulo Cards - CR Call Me Back 14/09/2026
Le tavole non esistono nel Figma: geometria ricavata dal PDF (pag. 11)
e dalla griglia dichiarata. Dettaglio in CR-CallMeBack-SpecFigma.md.
Mobile first, breakpoint 992px. Sotto i 992px le card scorrono sempre
in un carosello; sopra, fino a tre stanno affiancate e il carosello
compare solo dalla quarta in poi.
===================================================================== */
/* I 32px sopra e sotto (60 su desktop) sono divisi fra fascia e contenitore:
al contenitore ne restano 16, che sono lo spazio in cui l'ombra delle card
puo' respirare senza essere tagliata. La somma non cambia. */
.cmb-cards {
background-color: #fff;
padding: 16px 0;
}
.cmb-cards--grigia {
background-color: #f7f7f7;
}
/* Qui si taglia la pista, e non sulla fascia: il taglio deve cadere sul bordo
dei 1440 del disegno, altrimenti su uno schermo piu' largo la card che
dovrebbe solo intravedersi si vedrebbe per intero. Con overflow: hidden il
taglio e' sul bordo esterno del padding, quindi la card sconfina nei 140 del
margine - com'e' nel Figma - e si ferma li'. */
.cmb-cards__interno {
position: relative;
max-width: 1440px;
margin: 0 auto;
/* Mobile: 20px per lato, quotati sulla scheda "Cards Mobile". */
padding: 16px 20px;
overflow: hidden;
}
.cmb-cards__pista {
display: flex;
gap: 15px;
transition: transform .4s ease;
}
/* Card 376 x 530 su 1440 e 278 x 390 su 375: in entrambi i casi il rapporto
dichiarato e' 1:1.4. Su mobile 278 su 335 di spazio interno fa l'83%, e i
42px che restano sono la card successiva che si intravede. */
.cmb-cards__card {
position: relative;
flex: 0 0 83%;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* Misure dal Figma: 376 x 530 su 1440. */
aspect-ratio: 376 / 530;
overflow: hidden;
/* Quotata nel Figma su entrambi gli stati della card. */
box-shadow: 0 0 16px rgba(0, 0, 0, .12);
transition: opacity .4s ease;
}
/* Filetto verde 3px: in basso a card chiusa, in ALTO a card aperta.
E' un pseudo-elemento e non un bordo. Con i due bordi - uno dei quali
trasparente per non far ballare l'altezza - l'immagine, che e' in
posizionamento assoluto, partiva DENTRO il riquadro dei bordi: veniva
376 x 524 invece di 376 x 530, e sopra la fotografia affioravano 3px di
fondo della fascia. Cosi' l'immagine riempie la card per intero e
l'altezza resta comunque 530, perche' i bordi erano gia' inclusi. */
.cmb-cards__card::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background-color: #228000;
z-index: 2;
}
/* Card fuori dalla finestra visibile: nel Figma la quarta, quella che si
intravede a destra, sta al 40%. Su mobile vale per la successiva, con lo
stesso trattamento. La classe la mette il JS, che sa quante ne stanno in
vista e a che punto e' lo scorrimento. */
.cmb-cards__card.is-fuori {
opacity: .4;
}
/* Sfumatura di leggibilita' della card CHIUSA: nel Figma e' un gradiente
lineare di nero, da trasparente in cima a pieno in fondo. Senza, il titolo
bianco sparirebbe sulle fotografie chiare. All'apertura lascia il posto al
velo pieno. */
.cmb-cards__card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
transition: opacity .3s ease;
pointer-events: none;
}
.cmb-cards__card.is-aperta::after {
opacity: 0;
}
.cmb-cards__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Velo scuro, acceso solo a card aperta: senza, il testo di approfondimento
sarebbe illeggibile su una fotografia chiara. */
.cmb-cards__velo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
/* All'apertura il filetto passa in testa alla card, come nel Figma. */
.cmb-cards__card.is-aperta::before {
top: 0;
bottom: auto;
}
.cmb-cards__card.is-aperta .cmb-cards__velo {
opacity: 1;
}
/* 32px su tutti i lati, quotati sulle schede "Card singola": su desktop il
testo resta largo 312 su 376, su mobile 214 su 278. */
.cmb-cards__corpo {
position: relative;
z-index: 1;
padding: 32px;
color: #fff;
}
/* Il comando occupa tutta la larghezza: l'area sensibile e' la riga del
titolo insieme al segno, come chiede il PDF. */
.cmb-cards__comando {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
text-align: left;
cursor: pointer;
}
.cmb-cards__titolo {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 20px;
/* Il Figma segna "line height 100%", che e' l'interlinea naturale del font:
a 24px il blocco di testo misura 33px, cioe' 1,375. */
line-height: normal;
color: #fff;
}
.cmb-cards__titolo--fisso {
display: block;
}
/* Il segno passa da + a - all'apertura. E' disegnato con due tratti invece
che con un carattere, cosi' non dipende dal font. */
.cmb-cards__segno {
position: relative;
flex: 0 0 auto;
/* 24 x 24 nel Figma, che e' anche il minimo richiesto dal criterio 2.5.8. */
width: 24px;
height: 24px;
}
.cmb-cards__segno::before,
.cmb-cards__segno::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 24px;
height: 2px;
margin-top: -1px;
background-color: currentColor;
transition: transform .3s ease;
}
.cmb-cards__segno::after {
transform: rotate(90deg);
}
.cmb-cards__card.is-aperta .cmb-cards__segno::after {
transform: rotate(0deg);
}
/* Desktop 16/26, mobile 14/22: gli stessi valori della Striscia. Nel Figma la
card mobile e' disegnata solo chiusa, quindi il corpo del testo su mobile non
e' quotato: i 14px sono indicati dal cliente. Il bianco e' pieno come quello
del titolo, il Figma quota #FFFFFF su entrambi. */
.cmb-cards__testo {
margin-top: 12px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #fff;
}
.cmb-cards__testo p {
margin: 0;
}
.cmb-cards__testo p + p {
margin-top: .75em;
}
.cmb-cards__testo a {
color: inherit;
font-weight: inherit;
text-decoration: underline;
}
/* ---- comandi del carosello ---- */
.cmb-cards__comandi {
display: flex;
align-items: center;
justify-content: space-between;
/* 20px sotto le card, quotati sulla scheda del carosello. */
margin-top: 20px;
}
.cmb-cards__barre {
display: flex;
align-items: center;
gap: 8px;
}
/* Barre del Figma: 30 x 4 grigie a riposo, 60 x 4 scure per quella attiva,
spigoli vivi. Sono piu' lunghe di quelle della hero, che restano 8/16.
L'altezza del bottone e' 24px per rispettare il criterio 2.5.8, mentre la
barra visibile ne occupa 4 al centro. */
.cmb-cards__barra {
width: 30px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
position: relative;
}
.cmb-cards__barra::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 4px;
background-color: #c7c7c7;
}
.cmb-cards__barra.is-active {
width: 60px;
}
.cmb-cards__barra.is-active::before {
width: 60px;
background-color: #333;
}
/* Su mobile si scorre col dito: le frecce ruberebbero spazio e basta. */
.cmb-cards__frecce {
display: none;
gap: 16px;
}
/* Nel Figma il bottone e' 56 x 56 e la freccia disegnata dentro 30 x 24. Sono
i 56px che danno alla fascia del carosello i suoi 726 di altezza:
60 + 530 + 20 + 56 + 60. */
.cmb-cards__freccia {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
border: 0;
background: none;
color: #228000;
cursor: pointer;
}
.cmb-cards__freccia[disabled] {
opacity: .3;
cursor: default;
}
.cmb-cards__freccia svg {
display: block;
width: 30px;
height: 24px;
}
/* ---- da 992px in su ---- */
@media (min-width: 992px) {
.cmb-cards {
padding: 44px 0;
}
/* 140 per lato su 1440: lo stesso margine della card della Striscia.
44 + 16 = i 60px quotati sopra e sotto.
⚠️ IL min() NON E' UN VEZZO, RIPARA UN DIFETTO MISURATO IL 27/08/2026.
Una percentuale di padding si calcola sulla larghezza del GENITORE, non
su quella dell'elemento. Qui il genitore e' la fascia, che e' larga
quanto la finestra, mentre questo contenitore e' bloccato a 1440: su uno
schermo da 1520 il padding diventava 147,8 invece di 140, lo spazio
interno si stringeva e le card scendevano a 370,8.
Il risultato era al contrario di quello che ci si aspetta: PIU' LARGA
era la finestra, PIU' PICCOLE venivano le card.
Con min() sotto i 1440 il margine resta proporzionale - il layout scala
tutto insieme, com'e' giusto - e sopra si ferma ai 140 del disegno.
La Striscia non aveva il problema perche' li' la percentuale sta su un
figlio del contenitore bloccato, non sul contenitore stesso. */
.cmb-cards__interno {
padding: 16px min(9.72%, 140px);
}
/* A 1440: 140 + 376 + 16 + 376 + 16 + 376 + 140 = 1440. I conti tornano
esatti con le misure del Figma. */
.cmb-cards__pista {
gap: 16px;
}
/* Tre card nello spazio interno: a 1440 fanno 376 ciascuna, come nel Figma. */
.cmb-cards__card {
flex: 0 0 calc((100% - 32px) / 3);
}
/* Fino a tre card non c'e' niente da scorrere: stanno in fila centrata. Con
tre esatte riempiono comunque lo spazio, con una o due la centratura si
vede. */
.cmb-cards:not(.cmb-cards--carosello) .cmb-cards__pista {
justify-content: center;
}
.cmb-cards__titolo {
font-size: 24px;
}
.cmb-cards__testo {
font-size: 16px;
line-height: 26px;
}
/* Le frecce stanno a destra, allineate al margine di contenuto. Su mobile
restano le barre, che con space-between si appoggiano a sinistra. */
.cmb-cards__comandi {
justify-content: flex-end;
}
/* Fino a tre card non c'e' niente da scorrere: la fascia resta statica e i
comandi spariscono. E' anche il motivo per cui il PDF dice che oltre le tre
"cambia l'altezza della fascia": le frecce compaiono solo da li' in poi. */
.cmb-cards:not(.cmb-cards--carosello) .cmb-cards__comandi {
display: none;
}
.cmb-cards--carosello .cmb-cards__frecce {
display: flex;
}
.cmb-cards--carosello .cmb-cards__barre {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.cmb-cards__pista,
.cmb-cards__card,
.cmb-cards__velo,
.cmb-cards__card::after,
.cmb-cards__segno::before,
.cmb-cards__segno::after {
transition: none;
}
}
/* =====================================================================
reCAPTCHA sul telefono - segnalazione Accenture del 27/08/2026, punto 23.
Il widget di Google e' largo 304px FISSI e non si adatta: e' un iframe di
terze parti, la larghezza non si puo' cambiare da CSS. Sul telefono la
colonna che lo ospita e' piu' stretta, e `overflow-hidden` - che sta gia'
nella marcatura - lo TAGLIA a destra invece di farlo uscire.
L'unica via e' rimpicciolirlo per intero con una trasformazione, che e' la
soluzione che Google stessa indica. L'altezza va dichiarata a mano perche'
`transform` non cambia lo spazio occupato: senza, sotto al widget resterebbe
il vuoto dei pixel risparmiati.
⚠️ **CORRETTO IL 08/09/2026: una scala sola non bastava**, ed era scritto
qui sopra («sotto i 360 va riverificata») senza che nessuno la riverificasse.
Con `scale(.85)` il widget misura 258px, e lo spazio disponibile e' questo:
viewport spazio scala max con .85
320px 208px 0,684 TAGLIATO di 50px
360px 248px 0,816 TAGLIATO di 10px
375px 263px 0,865 ok, ma per 5px soli
414px 302px 0,993 ok
Lo spazio si ricava togliendo alla finestra 24px di container, 24px di
colonna e 64px di padding della `.form-box`: in tutto 112px.
Da qui i quattro gradini: uno per fascia, ognuno con qualche pixel di
margine, perche' un widget che entra «per un pelo» torna a tagliarsi al
primo padding che cambia.
⚠️ Chi tocca il padding di `.form-box` deve rifare questi conti.
📌 La via definitiva sarebbe `data-size="compact"` (164 x 144), che Google
offre apposta per il telefono e non richiede scale: va pero' impostata
PRIMA che l'API renderizzi il widget, quindi tocca il flusso di init del
captcha. Non si fa a due giorni dal rilascio, ma e' il passo giusto.
===================================================================== */
@media (max-width: 575.98px) {
.recaptcha-field .g-recaptcha {
transform-origin: left top;
}
}
/* Fino a 420px il widget ci sta intero: sotto, si scala per fascia.
L'altezza segue la scala, perche' `transform` non cambia lo spazio
occupato e sotto al widget resterebbe il vuoto. */
@media (max-width: 419.98px) {
.recaptcha-field .g-recaptcha {
transform: scale(.90);
}
/* 78 x 0,90 = 70,2 */
.recaptcha-field .captcha {
height: 71px;
}
}
@media (max-width: 399.98px) {
.recaptcha-field .g-recaptcha {
transform: scale(.83);
}
/* 78 x 0,83 = 64,7 */
.recaptcha-field .captcha {
height: 65px;
}
}
@media (max-width: 374.98px) {
.recaptcha-field .g-recaptcha {
transform: scale(.78);
}
/* 78 x 0,78 = 60,8 */
.recaptcha-field .captcha {
height: 61px;
}
}
/* Sotto i 360 il widget diventa piccolo, ma l'alternativa e' vederlo tagliato:
a 320px lo spazio e' 208px contro i 304 nativi. */
@media (max-width: 359.98px) {
.recaptcha-field .g-recaptcha {
transform: scale(.65);
}
/* 78 x 0,65 = 50,7 */
.recaptcha-field .captcha {
height: 51px;
}
}
/* =====================================================================
reCAPTCHA tagliato ANCHE SU DESKTOP - segnalazione dell'08/09/2026.
Le regole qui sopra guardano la larghezza della FINESTRA, e su desktop non
scattano mai. Ma il widget non sta stretto per colpa della finestra: sta
stretto per colpa della COLONNA che lo ospita. Da 1400px in su (breakpoint
`xxl` di Bootstrap) il captcha divide la riga con «*Campi Obbligatori»:
`col-12 col-xxl-6` diventa meta' riga, e meta' riga puo' misurare meno dei
304px del widget. Sotto i 1400 la colonna e' piena e il problema non c'e' -
ecco perche' si vedeva su desktop e non sul telefono.
Legare la regola alla finestra vorrebbe dire indovinare quanto misura la
colonna a ogni larghezza, e sbagliare al primo padding che cambia. Si lega
quindi **alla colonna stessa**, con una container query: se il contenitore
scende sotto i 304px, il widget si rimpicciolisce quanto basta. Non importa
piu' quale sia la finestra, ne' quale il breakpoint.
⚠️ Queste regole vengono DOPO quelle a media query e le scavalcano dove
valgono entrambe. Le prime restano come rete per i browser che non
conoscono le container query: la` il comportamento e' quello di prima, sul
telefono, e nessuno sta peggio di adesso.
===================================================================== */
.recaptcha-field {
container-type: inline-size;
}
@container (max-width: 303px) {
.recaptcha-field .g-recaptcha {
transform: scale(.90);
transform-origin: left top;
}
.recaptcha-field .captcha {
height: 71px;
}
}
@container (max-width: 280px) {
.recaptcha-field .g-recaptcha {
transform: scale(.83);
}
.recaptcha-field .captcha {
height: 65px;
}
}
@container (max-width: 260px) {
.recaptcha-field .g-recaptcha {
transform: scale(.78);
}
.recaptcha-field .captcha {
height: 61px;
}
}
@container (max-width: 240px) {
.recaptcha-field .g-recaptcha {
transform: scale(.65);
}
.recaptcha-field .captcha {
height: 51px;
}
}
/* =====================================================================
Titolo sopra la form sul telefono - segnalazione Accenture del
27/08/2026, punto 21: "il titolo del paragrafo sopra al form, in mobile,
dovrebbe avere corpo 18px". Era il titolo della leadbox, portato da 28
a 18 dentro una media query di solo telefono.
⚠️ SUPERATO il 07/09/2026 dalla gerarchia degli heading: nel mockup del
cliente quel titolo e' 20 su mobile e 24 su desktop, e la regola sta ora
nel blocco «Gerarchia degli heading» in fondo al file, che vale su
entrambe le larghezze. Il 18px e' stato tolto invece di essere lasciato
qui a perdere: due regole sullo stesso selettore, di cui una morta, sono
il modo piu' rapido per far credere a chi legge il valore sbagliato.
===================================================================== */
/* =====================================================================
Mouseover del comando Play/Pausa - segnalazione Accenture del
27/08/2026, punto 17.
Valori letti dal Figma il 02/09/2026, pagina Foundation/Utilities, frame
"New Landing Page [LUG 26]", componente Play/Pause: il disco passa da
#767676 (Status=Default) a #595959 (Status=Mouseover). Il segno resta
bianco in entrambi gli stati.
⚠️ Il disco NON cambia fra hero chiara e hero scura - vale per tutte e due.
===================================================================== */
.cmb-hero__pausa:hover .cmb-hero__disco,
.cmb-hero__pausa:focus-visible .cmb-hero__disco {
fill: #595959;
}
/* La transizione non e' quotata nel Figma: e' un raccordo breve perche' il
cambio non risulti a scatto. Se il cliente specifichera' una durata, si
corregge qui. */
.cmb-hero__disco {
transition: fill .2s ease;
}
/* =====================================================================
Striscia oltre i 1440 - segnalazione Accenture del 27/08/2026, punto 18:
"l'immagine dovrebbe ancorarsi a sinistra o a destra scalando anche a
risoluzioni maggiori". Nello screenshot allegato il riquadro rosso segna
proprio il distacco fra il bordo destro della fotografia e il bordo della
finestra.
La causa: `.cmb-striscia__interno` si ferma a `max-width: 1440px` ed e'
centrato, quindi l'immagine - che e' `justify-self: end` - si appoggia al
bordo del CONTENITORE, non a quello della finestra. Misurato in collaudo a
viewport 1536: fascia larga 1521, contenitore 1440 con 40 di margine per
lato, immagine 1006 che finisce a 41px dal bordo destro.
La correzione toglie il tetto SOLO da 1440 in su e restituisce all'immagine
la meta' di sovrapiu' che le spetta, lasciando la card dov'era.
⚠️ Niente `100vw`: includerebbe la barra di scorrimento (1536 contro 1521
di larghezza utile) e l'immagine sborderebbe di una quindicina di pixel.
Si usa `100%` del contenitore, che la barra non la conta.
⚠️ Il rapporto passa da `padding-top` ad `aspect-ratio`: la percentuale si
calcola sulla larghezza del contenitore, che qui cambia, e l'altezza
sarebbe cresciuta piu' della larghezza deformando il 16:9.
⚠️ DA VERIFICARE A VISTA a 1440, 1600 e 1920: i conti tornano sui numeri
misurati (a 1521 l'immagine diventa larga 1046,5 e il suo bordo sinistro
resta a 474,5, dov'era), ma il controllo con l'occhio non e' stato fatto.
===================================================================== */
@media (min-width: 1440px) {
.cmb-striscia__interno {
max-width: none;
}
/* 1006 del disegno piu' la meta' del sovrapiu' rispetto a 1440: cosi' il
bordo destro tocca la finestra e quello sinistro non si muove. */
.cmb-striscia__media {
width: calc(1006px + (100% - 1440px) / 2);
padding-top: 0;
aspect-ratio: 1006 / 566;
}
/* La card resta alle misure e alla posizione del disegno su 1440: 474 di
larghezza a 140 dal margine del riquadro centrato. */
.cmb-striscia__card {
width: 474px;
margin-left: calc((100% - 1440px) / 2 + 140px);
}
/* Col box a destra tutto si specchia: l'immagine tocca il bordo sinistro. */
.cmb-striscia--box-destra .cmb-striscia__card {
margin-left: 0;
margin-right: calc((100% - 1440px) / 2 + 140px);
}
/* Senza box l'immagine resta centrata e non deve sbordare da nessun lato:
torna alle proporzioni di prima. */
.cmb-striscia--senza-box .cmb-striscia__media {
width: 69.86%;
aspect-ratio: auto;
padding-top: 39.31%;
}
}
/* =====================================================================
Animazioni del modulo Cards - segnalazione Accenture del 27/08/2026,
punto 16: "nelle card non sono presenti le animazioni di apertura e
chiusura del testo di approfondimento; allo stesso modo, il passaggio tra
le card tramite le frecce del carosello avviene senza transizione animata".
Nel Figma esistono i due flussi di prototipo `Animazione card singola` e
`Animazione carosello cards`, ma il file e' in sola lettura e i campi
Duration ed Easing dell'interazione non sono leggibili.
⚠️ 300ms ed ease-out sono il PREDEFINITO di Figma per lo Smart Animate,
non un valore letto dal disegno: concordato con l'utente il 02/09/2026 di
procedere cosi' e ritoccarli in collaudo se non convincono. Sono due
numeri in questo blocco, si cambiano in un minuto.
===================================================================== */
/* Il testo di approfondimento non puo' essere animato finche' dipende solo
da `hidden`: fra `display: none` e `display: block` non c'e' niente da
interpolare. Il JS ora toglie `hidden` prima e aggiunge `is-visibile` un
fotogramma dopo, cosi' la dissolvenza ha due stati fra cui muoversi. */
.cmb-cards__testo {
opacity: 0;
transform: translateY(8px);
transition: opacity .3s ease-out, transform .3s ease-out;
}
.cmb-cards__testo.is-visibile {
opacity: 1;
transform: translateY(0);
}
/* Il velo scuro e la sfumatura avevano gia' una transizione, ma a .3s ease:
allineate alla stessa curva, altrimenti il fondo e il testo si muovono con
due tempi diversi e si vede. */
.cmb-cards__velo,
.cmb-cards__card::after {
transition: opacity .3s ease-out;
}
/* Il filetto verde passa da sotto a sopra all'apertura: senza transizione
salta da un bordo all'altro. */
.cmb-cards__card::before {
transition: top .3s ease-out, bottom .3s ease-out;
}
/* ⚠️ Chi ha chiesto il moto ridotto non deve vedere niente di tutto questo:
il testo compare e sparisce, senza dissolvenza e senza scorrimento. La
regola sta DOPO le altre perche' deve vincerle. */
@media (prefers-reduced-motion: reduce) {
.cmb-cards__testo,
.cmb-cards__velo,
.cmb-cards__card::after,
.cmb-cards__card::before {
transition: none;
}
.cmb-cards__testo {
transform: none;
}
}
/* =====================================================================
Stati al passaggio del mouse - segnalazione Accenture del 27/08/2026,
punto 17: "mancano i mouseover dei vari elementi (frecce dello slider,
tacche dello slider, pulsante +/- del componente card). I vari stati sono
presenti nella pagina Foundations del Figma".
Colori LETTI dal Figma il 02/09/2026, componente per componente, dal
pannello Properties - non dedotti:
Cards Arrows Default #228000 -> Mouseover #005200
Play/Pause disco Default #767676 -> Mouseover #595959
Slider dots Default #767676 -> Mouseover #595959
Active: 46x4 invece di 32x2, cioe' cambia la MISURA
Le frecce della hero stanno nel blocco "Secondo giro di mouseover" in
fondo al file: il componente `Slider Arrows` (varianti Light e Dark) e'
stato campionato il 07/09/2026, dopo la seconda segnalazione.
===================================================================== */
/* Le frecce del carosello Cards. Il disabilitato resta com'era, a opacita'
ridotta: nel Figma e' un verde chiaro, ma la trasparenza rende la stessa
cosa sopra qualunque fondo. */
.cmb-cards__freccia {
transition: color .2s ease-out;
}
.cmb-cards__freccia:hover:not([disabled]),
.cmb-cards__freccia:focus-visible:not([disabled]) {
color: #005200;
}
/* Il disco di play/pausa. Il segno resta bianco in entrambi gli stati:
verificato nel Figma, cambia solo il tondo dietro. */
.cmb-hero__disco {
transition: fill .2s ease-out;
}
.cmb-hero__pausa:hover .cmb-hero__disco,
.cmb-hero__pausa:focus-visible .cmb-hero__disco {
fill: #595959;
}
/* Le tacche dello slider. Nel Figma il colore va da #767676 a #595959, e la
tacca attiva si distingue per DIMENSIONE - 46x4 contro 32x2 - non per
colore. Qui le tacche sono in `currentColor` con opacita' variabile, che
e' come sono state costruite per funzionare su fondo chiaro e scuro: si
alza l'opacita' invece di forzare un esadecimale, altrimenti sulla hero
scura la tacca sparirebbe.
07/09/2026: il passo del Figma (#767676 -> #595959, cioe' da .6 a circa
.73 di opacita') era troppo fine e il cliente l'ha segnalato come
mancante. Si sale a .85: da #777 a #3F3F3F su fondo bianco, che si vede,
restando sotto l'1 della tacca attiva. */
.cmb-hero__barra::before {
transition: opacity .2s ease-out, width .2s ease-out;
}
.cmb-hero__barra:hover::before,
.cmb-hero__barra:focus-visible::before {
opacity: .85;
}
/* ⚠️ Chi ha chiesto il moto ridotto vede il cambio di colore, non lo
scorrimento: il colore serve a capire dove si e', non e' decorazione. */
@media (prefers-reduced-motion: reduce) {
.cmb-cards__freccia,
.cmb-hero__disco,
.cmb-hero__barra::before {
transition: none;
}
}
/* =====================================================================
Secondo giro di mouseover - segnalazione del 07/09/2026: "manca l'over
sulle frecce dello slider e sui trattini; tutti i link devono avere
l'over verde come Dichiarazione di Accessibilita'; il + delle card deve
ingrandirsi di due pixel, e il - con la stessa logica".
===================================================================== */
/* ---- frecce della hero ----
LETTE dal Figma il 07/09/2026, componente `Slider Arrows` nella pagina
Foundation/Utilities, pannello Properties di Vector 1 (cuneo) e
Vector 2 (punta):
Light (immagine scura) Default: cuneo #F7F7F7, punta #7A7A7A
Mouseover: cuneo #F7F7F7, punta #4D4D4D
Dark (immagine chiara) Default: cuneo #767676, punta #FFFFFF
Mouseover: cuneo #4D4D4D, punta #FFFFFF
In ogni variante cambia UN solo pezzo, e sempre verso #4D4D4D. */
.cmb-hero__cuneo,
.cmb-hero__punta {
transition: fill .2s ease-out;
}
.cmb-hero__freccia:hover:not([disabled]) .cmb-hero__punta,
.cmb-hero__freccia:focus-visible:not([disabled]) .cmb-hero__punta {
fill: #4d4d4d;
}
.cmb-hero.is-comandi-scuri .cmb-hero__freccia:hover:not([disabled]) .cmb-hero__cuneo,
.cmb-hero.is-comandi-scuri .cmb-hero__freccia:focus-visible:not([disabled]) .cmb-hero__cuneo {
fill: #4d4d4d;
}
/* Nella variante scura la punta resta bianca: senza questa regola vincerebbe
quella di due blocchi sopra, piu' specifica di `.is-comandi-scuri .cmb-hero__punta`. */
.cmb-hero.is-comandi-scuri .cmb-hero__freccia:hover:not([disabled]) .cmb-hero__punta,
.cmb-hero.is-comandi-scuri .cmb-hero__freccia:focus-visible:not([disabled]) .cmb-hero__punta {
fill: #fff;
}
/* ---- il segno + / - delle card: due pixel in piu' al passaggio ----
Da 24 a 26px restando centrato, cioe' il tratto si allunga di 1px per
lato. Il "-" e' lo stesso tratto con l'altro ruotato sopra, quindi segue
da solo la stessa regola. Il cliente ha chiesto solo la misura, non un
colore: il segno resta in currentColor. La transizione ripete quella del
transform perche' la dichiarazione la sostituisce, non la somma. */
.cmb-cards__segno::before,
.cmb-cards__segno::after {
transition: transform .3s ease, width .2s ease-out, left .2s ease-out;
}
.cmb-cards__comando:hover .cmb-cards__segno::before,
.cmb-cards__comando:hover .cmb-cards__segno::after,
.cmb-cards__comando:focus-visible .cmb-cards__segno::before,
.cmb-cards__comando:focus-visible .cmb-cards__segno::after {
width: 26px;
left: -1px;
}
/* ---- link: mouseover verde come "Dichiarazione di Accessibilita'" ----
Il footer ce l'aveva gia' (grigio -> #228000), come header .back-link e
.info-card .card-link. Mancavano i link dentro i testi: quelli dei moduli
nuovi ereditavano il colore e non reagivano, gli altri erano verdi gia'
a riposo (e il cliente, 07/09/2026, non li vuole cosi': "deve esserlo
solo passando sopra"). Da qui la regola unica, con `a { color: inherit }`
in testa al file:
a riposo -> colore del testo, grassetto, sottolineato
al passaggio -> #228000 (come Dichiarazione di Accessibilita')
Le regole piu' specifiche gia' presenti (footer, .btn, .btn-secondary,
le CTA dei moduli) restano padrone del loro stato. */
a:hover,
a:focus-visible {
color: #228000;
}
.cmb-hero__sottotitolo a:hover,
.cmb-hero__sottotitolo a:focus-visible,
.cmb-striscia__testo a:hover,
.cmb-striscia__testo a:focus-visible {
color: #228000;
}
/* Anche dove il testo e' bianco su fondo scuro - il testo delle card aperte
(velo nero al 60%) e il sottotitolo della hero sulle slide con testo
bianco, da 992px in su - il link passa allo stesso verde. Decisione del
07/09/2026, presa sapendo che #228000 misura 3,3:1 sul velo e non passa
il criterio 1.4.3 (4,5:1): e' uno stato transitorio, il link resta
sottolineato e in riposo ha il colore del testo. */
.cmb-cards__testo a:hover,
.cmb-cards__testo a:focus-visible {
color: #228000;
}
/* Il blocco di moto ridotto va ripetuto qui sotto: le transizioni appena
dichiarate stanno DOPO quello di prima nel file e lo scavalcherebbero. */
@media (prefers-reduced-motion: reduce) {
.cmb-hero__cuneo,
.cmb-hero__punta,
.cmb-cards__segno::before,
.cmb-cards__segno::after {
transition: none;
}
}
/* =====================================================================
Gerarchia degli heading - mockup del cliente (07/09/2026) e sua
segnalazione dell'08/09/2026.
Il cliente ha dato una griglia (H1 34/28, H2 32/24, H3 24/20, H4 20/18),
l'ha applicata nei frame `Mockup_desktop` (node 2002-1670) e
`Mockup_mobile` (node 2002-1270), e il giorno dopo ha elencato sei
scostamenti puntuali. Qui stanno le misure; i LIVELLI stanno nelle view.
⚠️ CORREZIONE DEL 08/09/2026, e vale la pena spiegarla perche' era un
errore che si vedeva solo in pagina. Il 07/09 quattro regole erano state
puntate sulle classi sbagliate, leggendo il mockup senza confrontarlo con
il DOM: nel Figma «Affidati ai nostri private banker.» e «Compila il
form...» sono due testi vicini, ma in pagina il primo e' `.leadbox .title`
e il secondo `.form-title`, che stanno in due componenti diversi. Allo
stesso modo `.descriptionbox` NON e' il blocco accanto alla form: e' il
componente a pie' di pagina, quello sopra i loghi delle tre divisioni.
Da qui in avanti ogni regola porta scritto QUALE testo governa.
⚠️ Le regole stanno in coda al file perche' devono vincere su quelle
storiche a parita' di specificita'. Chi le sposta piu' su le disattiva.
===================================================================== */
/* ---- «Affidati ai nostri private banker.» — titolo sopra la form ----
H2 quando la hero c'e' (l'H1 e' suo), H1 quando la hero manca.
Misura: 32px desktop, 24px mobile. La regola vale su entrambi i tag,
cosi' il corpo non cambia a seconda che lo slider ci sia o no. */
.leadbox .title {
font-size: 1.5rem; /* 24px */
line-height: 2rem;
}
/* ---- «Diamo valore al tuo patrimonio con:» — riga sopra l'elenco ----
Nel mockup e' 24px desktop e 20px mobile, in peso normale. Il desktop
era gia' giusto ereditando `.subtitle`; mancava il mobile, che stava a 18.
⚠️ Si scrive `.leadbox .subtitle` e non `.subtitle`: quella classe la
usano anche i due esiti dell'OTP, il thank-you e lo strillo delle card. */
.leadbox .subtitle {
font-size: 20px;
line-height: 1.36;
/* Peso normale, come nel mockup. Dal 09/09/2026 il contenitore e' un del TinyMCE:
il margine del paragrafo va tolto, altrimenti sotto all'occhiello si apre
uno stacco che prima non c'era - quando il contenitore era un - decisione del cliente: questo occhiello non e' un
heading - quindi il 400 e' gia' il valore naturale. La regola resta
esplicita perche' regge anche se un redattore marca il testo dall'editor. */
font-weight: 400;
}
/* Il contenuto arriva da un rich text, quindi e' avvolto nel
il
browser riparava il markup e il paragrafo finiva fuori.
Se i paragrafi fossero piu' d'uno restano staccati fra loro, ma non
aggiungono spazio in fondo. */
.leadbox .subtitle p {
margin: 0;
}
.leadbox .subtitle p + p {
margin-top: .5em;
}
/* Un heading scritto dal redattore dentro un campo rich text NON deve portarsi
dietro la misura di default del browser: la misura la decide il contenitore,
che e' quello allineato al mockup. Succede dove la partial `_Titolo` trova un
heading gia' presente e quindi non ne aggiunge un altro, lasciando un
`
...