:root {--color-base: #000000;
--color-base-rgb: 0, 0, 0;--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;--color-primary: #004278;
--color-primary-rgb: 0, 66, 120;--color-secondary: #467FBD;
--color-secondary-rgb: 70, 127, 189;--color-tertiary: #EBAC09;
--color-tertiary-rgb: 235, 172, 9;--color-green: #AAF5BA;
--color-green-rgb: 170, 245, 186;--color-white: #ffffff;
--color-white-rgb: 255, 255, 255;--color-light-blue: #E7EBF6;
--color-light-blue-rgb: 231, 235, 246;--color-primary-10: #F8F9FA;
--color-primary-10-rgb: 248, 249, 250;--color-primary-20: #F0F3FA;
--color-primary-20-rgb: 240, 243, 250;--color-primary-scuro: #031B3B;
--color-primary-scuro-rgb: 3, 27, 59;--color-gray: #747781;
--color-gray-rgb: 116, 119, 129;--color-gray-20: #EDECEC;
--color-gray-20-rgb: 237, 236, 236;--color-gray-40: #E7E5E5;
--color-gray-40-rgb: 231, 229, 229;--color-gray-60: #C4C4C0;
--color-gray-60-rgb: 196, 196, 192;--color-dark-gray: #434750;
--color-dark-gray-rgb: 67, 71, 80;--color-dark-yellow: #92620A;
--color-dark-yellow-rgb: 146, 98, 10;--color-light-yellow: #FFF3CD;
--color-light-yellow-rgb: 255, 243, 205;--color-black: #000000;
--color-black-rgb: 0, 0, 0;--color-danger: #EF212A;
--color-danger-rgb: 239, 33, 42;}
:root {
--easing-smooth: cubic-bezier(0.4, 0, 0.6, 1);
--transition-timing-fast: 0.2s var(--easing-smooth);
--transition-timing-normal: .4s var(--easing-smooth);
--transition-timing-long: .8s var(--easing-smooth);
--viewport-factor: 1;
--swiper-pagination-bullet-color: var(--color-primary);
--swiper-pagination-bullet-inactive-color: var(--color-primary);
--container-max-width-lg: 160.0rem;
--container-max-width-md: 120rem;
--container-max-width: var(--container-max-width-lg);
--container-gutter-x: 2rem;
--container-gutter-x-lg: 6.4rem;
--section-padding-x: var(--container-gutter-x);
--section-padding-y: 6rem;
/* Gabbia dei moduli Figma (image-cta-grid e gli altri): max 1600, gutter e respiro fluidi. */
--layout-max: 1600px;
--layout-gutter: clamp(24px, 8.889vw - 10.67px, 160px);
--section-pad: clamp(30px, 12.16px + 4.575vw, 100px);
--font-family-normal: 'Barlow', sans-serif;
--font-family-condensed: 'Barlow Condensed', sans-serif;
}
@media (prefers-reduced-motion: reduce) {
:root {
--transition-timing-normal: '';
}
}
@media (min-width:769px) {
:root {
--section-padding-y: 12rem;
}
}
@media (max-width:768px) {
:root {
--section-padding-y: 6rem;
}
}
/* Scrollbar sottile e grigio chiaro a livello globale (Firefox non supporta una larghezza
esatta: scrollbar-width:thin e' la resa piu' vicina disponibile li'). */
* {
scrollbar-width: thin;
scrollbar-color: rgba(var(--color-gray-rgb), .5) transparent;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(var(--color-gray-rgb), .5);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--color-gray-rgb), .8);
}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px auto;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none !important;
}body {
margin: 0;
}
*, ::before, ::after {
box-sizing: border-box;
}
hr {
margin: 0;
}
* {
outline-offset: .4rem;
}html {
scroll-padding-block-start: var(--scroll-padding-top);
}
/* La section e' un contenitore neutro: gabbia e respiro li tiene il modulo, come nei moduli Figma.
I padding impostati a mano dall'editor su una section restano validi. */
.dnd-section {
padding: 0;
}
.dnd-section .row-fluid {
display: flex;
flex-direction: row;
margin-inline: auto;
}
.dnd-section > .row-fluid {
max-width: none;
}
.dnd-section .dnd-row,
.dnd-section .row-fluid {
width: 100%;
}
.dnd-section .dnd-column {
min-width:1px;
}
@media (css.breakpoint_up('xl')) {
.blog-post .row-fluid {
flex-wrap: nowrap;
}
}
@media (css.breakpoint_down('xl')) {
.dnd-section .row-fluid {
flex-wrap: wrap;
}
}
.container {
padding-inline: var(--container-gutter-x);
}
.container-max {
margin-inline: auto;
max-width: var(--container-max-width);
}
.container-max-lg {
margin-inline: auto;
max-width: var(--container-max-width-lg);
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-end {
justify-content: flex-end;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
@media (css.breakpoint_up('xl')) {
.justify-content-lg-start {
justify-content: flex-start;
}
.justify-content-lg-end {
justify-content: flex-end;
}
.justify-content-lg-center {
justify-content: center;
}
.justify-content-lg-between {
justify-content: space-between;
}
.justify-content-lg-around {
justify-content: space-around;
}
}
@media (css.breakpoint_up('md')) {
.justify-content-md-start {
justify-content: flex-start;
}
.justify-content-md-end {
justify-content: flex-end;
}
.justify-content-md-center {
justify-content: center;
}
.justify-content-md-between {
justify-content: space-between;
}
.justify-content-md-around {
justify-content: space-around;
}
}
/*.page {
overflow: hidden;
}*/
.page > main {
min-height: 100vh;
/* padding-top: var(--header-height-top);*/
background-color: var(--color-background);
}
.page:has(#footer_website .mod-contact-banner) main .dnd-area .dnd-section:last-child {
padding-block-end: calc(var(--section-padding-y) + var(--mod-contact-banner-height)/2);
}
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
transition: top 0.3s ease-in-out;
}
.skip-link:focus {
top: 0;
}
.go-back {
font-size: 1.6rem;
font-weight: 600;
margin-top: 4rem;
text-transform: uppercase;
text-decoration: none;
}
.smooth-scroll {
overflow: hidden !important;
}/* text */
.color-primary {
color: var(--color-primary);
}
.color-secondary {
color: var(--color-secondary);
}
.color-green {
color: var(--color-green);
}
.color-light-blue {
color: var(--color-light-blue);
}
.color-gray {
color: var(--color-gray);
}
.color-dark-gray {
color: var(--color-dark-gray);
}
.color-dark-yellow {
color: var(--color-dark-yellow);
}
.color-light-yellow {
color: var(--color-light-yellow);
}
.color-white {
color: var(--color-white);
}
.color-black {
color: var(--color-black);
}
.color-danger {
color: var(--color-danger);
}
/* background */
.bg-primary {
background-color: var(--color-primary);
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-green {
background-color: var(--color-green);
}
.bg-light-blue {
background-color: var(--color-light-blue);
}
.bg-gray {
background-color: var(--color-gray);
}
.bg-dark-gray {
background-color: var(--color-dark-gray);
}
.bg-dark-yellow {
background-color: var(--color-dark-yellow);
}
.bg-light-yellow {
background-color: var(--color-light-yellow);
}
.bg-white {
background-color: var(--color-white);
}
.bg-black {
background-color: var(--color-black);
}
.bg-danger {
background-color: var(--color-danger);
}
/* svg */
.svg-primary {
fill: var(--color-primary);
}
.svg-secondary {
fill: var(--color-secondary);
}
.svg-green {
fill: var(--color-green);
}
.svg-light-blue {
fill: var(--color-light-blue);
}
.svg-gray {
fill: var(--color-gray);
}
.svg-dark-gray {
fill: var(--color-dark-gray);
}
.svg-dark-yellow {
fill: var(--color-dark-yellow);
}
.svg-light-yellow {
fill: var(--color-light-yellow);
}
.svg-white {
fill: var(--color-white);
}
.svg-black {
fill: var(--color-black);
}
.svg-danger {
fill: var(--color-danger);
}.row-fluid {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.row-fluid > .widget-span {
flex-basis: 100%;
width: inherit;
}
@media (min-width:1101px) {
.row-fluid {
flex-wrap: nowrap;
}.row-fluid > .span1 {
flex-basis: 8.333333333333334%;
}.row-fluid > .span2 {
flex-basis: 16.666666666666668%;
}.row-fluid > .span3 {
flex-basis: 25.0%;
}.row-fluid > .span4 {
flex-basis: 33.333333333333336%;
}.row-fluid > .span5 {
flex-basis: 41.666666666666664%;
}.row-fluid > .span6 {
flex-basis: 50.0%;
}.row-fluid > .span7 {
flex-basis: 58.333333333333336%;
}.row-fluid > .span8 {
flex-basis: 66.66666666666667%;
}.row-fluid > .span9 {
flex-basis: 75.0%;
}.row-fluid > .span10 {
flex-basis: 83.33333333333333%;
}.row-fluid > .span11 {
flex-basis: 91.66666666666667%;
}.row-fluid > .span12 {
flex-basis: 100.0%;
}}
.row {
--gutter-x: 0rem; /* before 2 rem */
--gutter-y: 0rem;
display: flex;
flex-flow: row wrap;
gap: var(--gutter-y) var(--gutter-x);
width: 100%;
}.col {
flex: 1 0 0%;
}
.col-auto {
flex: 0 0 auto;
}.col-1 {
flex-basis: 8.333333333333334%;
}.col-2 {
flex-basis: 16.666666666666668%;
}.col-3 {
flex-basis: 25.0%;
}.col-4 {
flex-basis: 33.333333333333336%;
}.col-5 {
flex-basis: 41.666666666666664%;
}.col-6 {
flex-basis: 50.0%;
}.col-7 {
flex-basis: 58.333333333333336%;
}.col-8 {
flex-basis: 66.66666666666667%;
}.col-9 {
flex-basis: 75.0%;
}.col-10 {
flex-basis: 83.33333333333333%;
}.col-11 {
flex-basis: 91.66666666666667%;
}.col-12 {
flex-basis: 100.0%;
}
@media (min-width:769px) {
.col-md {
flex: 1 0 0%;
}
.col-md-auto {
flex: 0 0 auto;
}.col-md-1 {
flex-basis: 8.333333333333334%;
}.col-md-2 {
flex-basis: 16.666666666666668%;
}.col-md-3 {
flex-basis: 25.0%;
}.col-md-4 {
flex-basis: 33.333333333333336%;
}.col-md-5 {
flex-basis: 41.666666666666664%;
}.col-md-6 {
flex-basis: 50.0%;
}.col-md-7 {
flex-basis: 58.333333333333336%;
}.col-md-8 {
flex-basis: 66.66666666666667%;
}.col-md-9 {
flex-basis: 75.0%;
}.col-md-10 {
flex-basis: 83.33333333333333%;
}.col-md-11 {
flex-basis: 91.66666666666667%;
}.col-md-12 {
flex-basis: 100.0%;
}
}
@media (min-width:993px) {
.col-lg {
flex: 1 0 0%;
}
.col-lg-auto {
flex: 0 0 auto;
}.col-lg-1 {
flex-basis: 8.333333333333334%;
}.col-lg-2 {
flex-basis: 16.666666666666668%;
}.col-lg-3 {
flex-basis: 25.0%;
}.col-lg-4 {
flex-basis: 33.333333333333336%;
}.col-lg-5 {
flex-basis: 41.666666666666664%;
}.col-lg-6 {
flex-basis: 50.0%;
}.col-lg-7 {
flex-basis: 58.333333333333336%;
}.col-lg-8 {
flex-basis: 66.66666666666667%;
}.col-lg-9 {
flex-basis: 75.0%;
}.col-lg-10 {
flex-basis: 83.33333333333333%;
}.col-lg-11 {
flex-basis: 91.66666666666667%;
}.col-lg-12 {
flex-basis: 100.0%;
}
}
@media (min-width:1101px) {
.col-xl {
flex: 1 0 0%;
}
.col-xl-auto {
flex: 0 0 auto;
}.col-xl-1 {
flex-basis: 8.333333333333334%;
}.col-xl-2 {
flex-basis: 16.666666666666668%;
}.col-xl-3 {
flex-basis: 25.0%;
}.col-xl-4 {
flex-basis: 33.333333333333336%;
}.col-xl-5 {
flex-basis: 41.666666666666664%;
}.col-xl-6 {
flex-basis: 50.0%;
}.col-xl-7 {
flex-basis: 58.333333333333336%;
}.col-xl-8 {
flex-basis: 66.66666666666667%;
}.col-xl-9 {
flex-basis: 75.0%;
}.col-xl-10 {
flex-basis: 83.33333333333333%;
}.col-xl-11 {
flex-basis: 91.66666666666667%;
}.col-xl-12 {
flex-basis: 100.0%;
}
}
html {
font-size: 62.5000%;
}
body {
font-family: var(--font-family-normal);
}
::selection {
background-color: var(--color-tertiary);
color: var(--color-black);
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
margin-block: 0;
}
p {
margin-block: 0;
}
a {
color: var(--color-base);
text-decoration:none;
}
/* Scoped, not on every `a`: a global relative traps stretched-link overlays (e.g. figma card-grid). */
.mod-rich-text a:not(.btn),
.accordion-answer a:not(.btn),
.mod-cards .card .content a:not(.btn),
.mod-cards-row a:not(.btn),
.mod-list-title-description .list .description a:not(.btn),
.mod-video-overlay-contents .description a:not(.btn),
footer a:not(.btn) {
position: relative;
}
.mod-rich-text a:not(.btn):before,
.accordion-answer a:not(.btn):before,
.mod-cards .card .content a:not(.btn):before,
.mod-cards-row a:not(.btn):before,
.mod-list-title-description .list .description a:not(.btn):before,
.mod-video-overlay-contents .description a:not(.btn):before,
footer a:not(.btn):before {
content: '';
position: absolute;
bottom: -0.3rem;
left: 0;
width: 100%;
height: 2px;
background-color: currentColor;
transform: scaleX(1);
transform-origin: left;
transition: transform 0.3s ease;
}
.mod-rich-text a:not(.btn):hover:before,
.accordion-answer a:not(.btn):hover:before,
.mod-cards .card .content a:not(.btn):hover:before,
.mod-cards .card .content a:not(.btn):hover:before,
.mod-cards-row a:not(.btn):hover:before,
.mod-list-title-description .list .description a:not(.btn):hover:before,
.mod-video-overlay-contents .description a:not(.btn):hover:before {
transform: scaleX(0);
}
footer a:not(.btn):before{
transform: scaleX(0) !important;
}
footer a:not(.btn):hover:before {
transform: scaleX(1) !important;
}body { font-family: var(--font-family-normal);
font-size: clamp(1.8rem, 1.8rem + calc(0.0vw*var(--viewport-factor)), 1.8rem);
font-weight: 400;
line-height: 1.5; }.b { font-family: var(--font-family-normal);
font-size: clamp(1.8rem, 1.8rem + calc(0.0vw*var(--viewport-factor)), 1.8rem);
font-weight: 400;
line-height: 1.5; }
@media (min-width:769px) {
.b-desktop { font-family: var(--font-family-normal);
font-size: clamp(1.8rem, 1.8rem + calc(0.0vw*var(--viewport-factor)), 1.8rem);
font-weight: 400;
line-height: 1.5; }
}
@media (max-width:768px) {
.b-mobile {
font-family: var(--font-family-normal);
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5;
}
}.b0 { font-family: var(--font-family-normal);
font-size: clamp(1.6rem, 1.6rem + calc(0.0vw*var(--viewport-factor)), 1.6rem);
font-weight: 400;
line-height: 1.5625; }
@media (min-width:769px) {
.b0-desktop { font-family: var(--font-family-normal);
font-size: clamp(1.6rem, 1.6rem + calc(0.0vw*var(--viewport-factor)), 1.6rem);
font-weight: 400;
line-height: 1.5625; }
}
@media (max-width:768px) {
.b0-mobile {
font-family: var(--font-family-normal);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5625;
}
}.b1 { font-family: var(--font-family-normal);
font-size: clamp(1.6rem, 1.6rem + calc(0.0vw*var(--viewport-factor)), 1.6rem);
font-weight: 400;
line-height: 1.5625; }
@media (min-width:769px) {
.b1-desktop { font-family: var(--font-family-normal);
font-size: clamp(1.6rem, 1.6rem + calc(0.0vw*var(--viewport-factor)), 1.6rem);
font-weight: 400;
line-height: 1.5625; }
}
@media (max-width:768px) {
.b1-mobile {
font-family: var(--font-family-normal);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5625;
}
}.b2 { font-family: var(--font-family-normal);
font-size: clamp(1.8rem, 1.8rem + calc(0.0vw*var(--viewport-factor)), 1.8rem);
font-weight: 400;
line-height: 1.5556; }
@media (min-width:769px) {
.b2-desktop { font-family: var(--font-family-normal);
font-size: clamp(1.8rem, 1.8rem + calc(0.0vw*var(--viewport-factor)), 1.8rem);
font-weight: 400;
line-height: 1.5556; }
}
@media (max-width:768px) {
.b2-mobile {
font-family: var(--font-family-normal);
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5556;
}
}.b3 { font-family: var(--font-family-normal);
font-size: clamp(2.0rem, 2.0rem + calc(0.0vw*var(--viewport-factor)), 2.0rem);
font-weight: 500;
line-height: 1.5; }
@media (min-width:769px) {
.b3-desktop { font-family: var(--font-family-normal);
font-size: clamp(2.0rem, 2.0rem + calc(0.0vw*var(--viewport-factor)), 2.0rem);
font-weight: 500;
line-height: 1.5; }
}
@media (max-width:768px) {
.b3-mobile {
font-family: var(--font-family-normal);
font-size: 2.0rem;
font-weight: 500;
line-height: 1.5;
}
}.b4 { font-family: var(--font-family-normal);
font-size: clamp(2.4rem, 0.2666666666666666rem + calc(2.777777777777778vw*var(--viewport-factor)), 3.6rem);
font-weight: 400;
line-height: 1.6; }
@media (min-width:769px) {
.b4-desktop { font-family: var(--font-family-normal);
font-size: clamp(2.4rem, 0.2666666666666666rem + calc(2.777777777777778vw*var(--viewport-factor)), 3.6rem);
font-weight: 400;
line-height: 1.6; }
}
@media (max-width:768px) {
.b4-mobile {
font-family: var(--font-family-normal);
font-size: 2.4rem;
font-weight: 400;
line-height: 1.6;
}
}.b5 { font-family: var(--font-family-normal);
font-size: clamp(2.6rem, -0.7777777777777772rem + calc(4.398148148148148vw*var(--viewport-factor)), 4.5rem);
font-weight: 400;
line-height: 1.6; }
@media (min-width:769px) {
.b5-desktop { font-family: var(--font-family-normal);
font-size: clamp(2.6rem, -0.7777777777777772rem + calc(4.398148148148148vw*var(--viewport-factor)), 4.5rem);
font-weight: 400;
line-height: 1.6; }
}
@media (max-width:768px) {
.b5-mobile {
font-family: var(--font-family-normal);
font-size: 2.6rem;
font-weight: 400;
line-height: 1.6;
}
}.b6 { font-family: var(--font-family-normal);
font-size: clamp(3.5rem, -0.9444444444444438rem + calc(5.787037037037036vw*var(--viewport-factor)), 6.0rem);
font-weight: 400;
line-height: 1.6; }
@media (min-width:769px) {
.b6-desktop { font-family: var(--font-family-normal);
font-size: clamp(3.5rem, -0.9444444444444438rem + calc(5.787037037037036vw*var(--viewport-factor)), 6.0rem);
font-weight: 400;
line-height: 1.6; }
}
@media (max-width:768px) {
.b6-mobile {
font-family: var(--font-family-normal);
font-size: 3.5rem;
font-weight: 400;
line-height: 1.6;
}
}h1 { font-family: var(--font-family-normal);
font-size: clamp(4.0rem, -1.3333333333333321rem + calc(6.944444444444444vw*var(--viewport-factor)), 7.0rem);
font-weight: 700;
line-height: 1.1429; }.h1 { font-family: var(--font-family-normal);
font-size: clamp(4.0rem, -1.3333333333333321rem + calc(6.944444444444444vw*var(--viewport-factor)), 7.0rem);
font-weight: 700;
line-height: 1.1429; }
@media (min-width:769px) {
.h1-desktop { font-family: var(--font-family-normal);
font-size: clamp(4.0rem, -1.3333333333333321rem + calc(6.944444444444444vw*var(--viewport-factor)), 7.0rem);
font-weight: 700;
line-height: 1.1429; }
}
@media (max-width:768px) {
.h1-mobile {
font-family: var(--font-family-normal);
font-size: 4.0rem;
font-weight: 700;
line-height: 1.1429;
}
}h2 { font-family: var(--font-family-normal);
font-size: clamp(3.2rem, 0.3555555555555565rem + calc(3.703703703703703vw*var(--viewport-factor)), 4.8rem);
font-weight: 700;
line-height: 1.2083; }.h2 { font-family: var(--font-family-normal);
font-size: clamp(3.2rem, 0.3555555555555565rem + calc(3.703703703703703vw*var(--viewport-factor)), 4.8rem);
font-weight: 700;
line-height: 1.2083; }
@media (min-width:769px) {
.h2-desktop { font-family: var(--font-family-normal);
font-size: clamp(3.2rem, 0.3555555555555565rem + calc(3.703703703703703vw*var(--viewport-factor)), 4.8rem);
font-weight: 700;
line-height: 1.2083; }
}
@media (max-width:768px) {
.h2-mobile {
font-family: var(--font-family-normal);
font-size: 3.2rem;
font-weight: 700;
line-height: 1.2083;
}
}h3 { font-family: var(--font-family-normal);
font-size: clamp(2.2rem, 0.4222222222222225rem + calc(2.314814814814815vw*var(--viewport-factor)), 3.2rem);
font-weight: 700;
line-height: 1.25; }.h3 { font-family: var(--font-family-normal);
font-size: clamp(2.2rem, 0.4222222222222225rem + calc(2.314814814814815vw*var(--viewport-factor)), 3.2rem);
font-weight: 700;
line-height: 1.25; }
@media (min-width:769px) {
.h3-desktop { font-family: var(--font-family-normal);
font-size: clamp(2.2rem, 0.4222222222222225rem + calc(2.314814814814815vw*var(--viewport-factor)), 3.2rem);
font-weight: 700;
line-height: 1.25; }
}
@media (max-width:768px) {
.h3-mobile {
font-family: var(--font-family-normal);
font-size: 2.2rem;
font-weight: 700;
line-height: 1.25;
}
}h4 { font-family: var(--font-family-normal);
font-size: clamp(2.0rem, 0.9333333333333333rem + calc(1.388888888888889vw*var(--viewport-factor)), 2.6rem);
font-weight: 600;
line-height: 1.3538; }.h4 { font-family: var(--font-family-normal);
font-size: clamp(2.0rem, 0.9333333333333333rem + calc(1.388888888888889vw*var(--viewport-factor)), 2.6rem);
font-weight: 600;
line-height: 1.3538; }
@media (min-width:769px) {
.h4-desktop { font-family: var(--font-family-normal);
font-size: clamp(2.0rem, 0.9333333333333333rem + calc(1.388888888888889vw*var(--viewport-factor)), 2.6rem);
font-weight: 600;
line-height: 1.3538; }
}
@media (max-width:768px) {
.h4-mobile {
font-family: var(--font-family-normal);
font-size: 2.0rem;
font-weight: 600;
line-height: 1.3538;
}
}h5 { font-family: var(--font-family-normal);
font-size: clamp(1.9rem, 1.3666666666666663rem + calc(0.694444444444445vw*var(--viewport-factor)), 2.2rem);
font-weight: 700;
line-height: 1.2; }.h5 { font-family: var(--font-family-normal);
font-size: clamp(1.9rem, 1.3666666666666663rem + calc(0.694444444444445vw*var(--viewport-factor)), 2.2rem);
font-weight: 700;
line-height: 1.2; }
@media (min-width:769px) {
.h5-desktop { font-family: var(--font-family-normal);
font-size: clamp(1.9rem, 1.3666666666666663rem + calc(0.694444444444445vw*var(--viewport-factor)), 2.2rem);
font-weight: 700;
line-height: 1.2; }
}
@media (max-width:768px) {
.h5-mobile {
font-family: var(--font-family-normal);
font-size: 1.9rem;
font-weight: 700;
line-height: 1.2;
}
}h6 { font-family: var(--font-family-normal);
font-size: clamp(1.7rem, 1.3444444444444446rem + calc(0.46296296296296285vw*var(--viewport-factor)), 1.9rem);
font-weight: 700;
line-height: 1.2; }.h6 { font-family: var(--font-family-normal);
font-size: clamp(1.7rem, 1.3444444444444446rem + calc(0.46296296296296285vw*var(--viewport-factor)), 1.9rem);
font-weight: 700;
line-height: 1.2; }
@media (min-width:769px) {
.h6-desktop { font-family: var(--font-family-normal);
font-size: clamp(1.7rem, 1.3444444444444446rem + calc(0.46296296296296285vw*var(--viewport-factor)), 1.9rem);
font-weight: 700;
line-height: 1.2; }
}
@media (max-width:768px) {
.h6-mobile {
font-family: var(--font-family-normal);
font-size: 1.7rem;
font-weight: 700;
line-height: 1.2;
}
}.label {
font-family: var(--font-family-normal);
font-size: 1.3rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.subtitle {
font-family: var(--font-family-normal);
font-size: clamp(1.8rem, 0.5555555555555558rem + calc(1.6203703703703702vw*var(--viewport-factor)), 2.5rem);
font-weight: 500;
line-height: 1.4;
}
.tab {
font-family: var(--font-family-normal);
font-size: 1.8rem;
font-weight: 600;
line-height: 1.6666666666666667;
text-transform: uppercase;
}
.footer-label {
font-family: var(--font-family-normal);
font-size: 1.5rem;
font-weight: 600;
line-height: 2;
letter-spacing: 0.05rem;
text-transform: uppercase;
}
.fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}.btn,
.hs-form .hs-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
padding: 1.6rem 3.2rem;
border: 1px solid transparent;
border-radius: 0;
font-family: var(--font-family-normal);
font-size: 1.6rem;
font-weight: 600;
line-height: 1.3125;
letter-spacing: 0.06999999999999999rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
transition: background-color var(--transition-timing-normal),
color var(--transition-timing-normal),
border-color var(--transition-timing-normal);
}
.btn-primary {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background-color: color-mix(in srgb, var(--color-primary) 85%, black);
border-color: color-mix(in srgb, var(--color-primary) 85%, black);
}
.btn-primary-outline {
background-color: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-primary-outline:hover,
.btn-primary-outline:focus-visible {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-secondary {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--color-white);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background-color: color-mix(in srgb, var(--color-secondary) 85%, black);
border-color: color-mix(in srgb, var(--color-secondary) 85%, black);
}
.btn-secondary-outline {
background-color: transparent;
border-color: var(--color-secondary);
color: var(--color-secondary);
}
.btn-secondary-outline:hover,
.btn-secondary-outline:focus-visible {
background-color: var(--color-secondary);
color: var(--color-white);
}
.btn-green {
background-color: var(--color-green);
border-color: var(--color-green);
color: var(--color-primary);
}
.btn-green:hover,
.btn-green:focus-visible {
background-color: color-mix(in srgb, var(--color-green) 85%, black);
border-color: color-mix(in srgb, var(--color-green) 85%, black);
}
.btn-green-outline {
background-color: transparent;
border-color: var(--color-green);
color: var(--color-green);
}
.btn-green-outline:hover,
.btn-green-outline:focus-visible {
background-color: var(--color-green);
color: var(--color-primary);
}
.btn-white {
background-color: var(--color-white);
border-color: var(--color-white);
color: var(--color-primary);
}
.btn-white:hover,
.btn-white:focus-visible {
background-color: color-mix(in srgb, var(--color-white) 85%, black);
border-color: color-mix(in srgb, var(--color-white) 85%, black);
}
.btn-white-outline {
background-color: transparent;
border-color: var(--color-white);
color: var(--color-white);
}
.btn-white-outline:hover,
.btn-white-outline:focus-visible {
background-color: var(--color-white);
color: var(--color-primary);
}
.btn-light-blue {
background-color: var(--color-light-blue);
border-color: var(--color-light-blue);
color: var(--color-primary);
}
.btn-light-blue:hover,
.btn-light-blue:focus-visible {
background-color: color-mix(in srgb, var(--color-light-blue) 85%, black);
border-color: color-mix(in srgb, var(--color-light-blue) 85%, black);
}
.btn-light-blue-outline {
background-color: transparent;
border-color: var(--color-light-blue);
color: var(--color-light-blue);
}
.btn-light-blue-outline:hover,
.btn-light-blue-outline:focus-visible {
background-color: var(--color-light-blue);
color: var(--color-primary);
}
.btn-gray {
background-color: var(--color-gray);
border-color: var(--color-gray);
color: var(--color-white);
}
.btn-gray:hover,
.btn-gray:focus-visible {
background-color: color-mix(in srgb, var(--color-gray) 85%, black);
border-color: color-mix(in srgb, var(--color-gray) 85%, black);
}
.btn-gray-outline {
background-color: transparent;
border-color: var(--color-gray);
color: var(--color-gray);
}
.btn-gray-outline:hover,
.btn-gray-outline:focus-visible {
background-color: var(--color-gray);
color: var(--color-white);
}
.btn-dark-gray {
background-color: var(--color-dark-gray);
border-color: var(--color-dark-gray);
color: var(--color-white);
}
.btn-dark-gray:hover,
.btn-dark-gray:focus-visible {
background-color: color-mix(in srgb, var(--color-dark-gray) 85%, black);
border-color: color-mix(in srgb, var(--color-dark-gray) 85%, black);
}
.btn-dark-gray-outline {
background-color: transparent;
border-color: var(--color-dark-gray);
color: var(--color-dark-gray);
}
.btn-dark-gray-outline:hover,
.btn-dark-gray-outline:focus-visible {
background-color: var(--color-dark-gray);
color: var(--color-white);
}
.btn-dark-yellow {
background-color: var(--color-dark-yellow);
border-color: var(--color-dark-yellow);
color: var(--color-white);
}
.btn-dark-yellow:hover,
.btn-dark-yellow:focus-visible {
background-color: color-mix(in srgb, var(--color-dark-yellow) 85%, black);
border-color: color-mix(in srgb, var(--color-dark-yellow) 85%, black);
}
.btn-dark-yellow-outline {
background-color: transparent;
border-color: var(--color-dark-yellow);
color: var(--color-dark-yellow);
}
.btn-dark-yellow-outline:hover,
.btn-dark-yellow-outline:focus-visible {
background-color: var(--color-dark-yellow);
color: var(--color-white);
}
.btn-light-yellow {
background-color: var(--color-light-yellow);
border-color: var(--color-light-yellow);
color: var(--color-primary);
}
.btn-light-yellow:hover,
.btn-light-yellow:focus-visible {
background-color: color-mix(in srgb, var(--color-light-yellow) 85%, black);
border-color: color-mix(in srgb, var(--color-light-yellow) 85%, black);
}
.btn-light-yellow-outline {
background-color: transparent;
border-color: var(--color-light-yellow);
color: var(--color-light-yellow);
}
.btn-light-yellow-outline:hover,
.btn-light-yellow-outline:focus-visible {
background-color: var(--color-light-yellow);
color: var(--color-primary);
}
.btn-black {
background-color: var(--color-black);
border-color: var(--color-black);
color: var(--color-white);
}
.btn-black:hover,
.btn-black:focus-visible {
background-color: color-mix(in srgb, var(--color-black) 85%, black);
border-color: color-mix(in srgb, var(--color-black) 85%, black);
}
.btn-black-outline {
background-color: transparent;
border-color: var(--color-black);
color: var(--color-black);
}
.btn-black-outline:hover,
.btn-black-outline:focus-visible {
background-color: var(--color-black);
color: var(--color-white);
}
.btn-danger {
background-color: var(--color-danger);
border-color: var(--color-danger);
color: var(--color-white);
}
.btn-danger:hover,
.btn-danger:focus-visible {
background-color: color-mix(in srgb, var(--color-danger) 85%, black);
border-color: color-mix(in srgb, var(--color-danger) 85%, black);
}
.btn-danger-outline {
background-color: transparent;
border-color: var(--color-danger);
color: var(--color-danger);
}
.btn-danger-outline:hover,
.btn-danger-outline:focus-visible {
background-color: var(--color-danger);
color: var(--color-white);
}
.hs-form .hs-button {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.hs-form .hs-button:hover,
.hs-form .hs-button:focus-visible {
background-color: color-mix(in srgb, var(--color-primary) 85%, black);
border-color: color-mix(in srgb, var(--color-primary) 85%, black);
}
.btn:disabled,
.btn[aria-disabled="true"],
.hs-form .hs-button:disabled {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}:is(.btn, a.link, .info-btn, .info-row, .modal-x, .of-q, .od-card, .ao-link, .os-link, .opb-more-link, .opb-sf-link, .opb-sf-all, .opb-sf-geo, .opb-sf-book, .opb-pv-toggle, .swiper-button-prev, .swiper-button-next, .breadcrumbs a, .hs-form .hs-button):focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}
:is(.ap-link, .breadcrumbs-inverted a):focus-visible {
box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-white);
}
@media (forced-colors: active) {
:is(.btn, a.link, .info-btn, .info-row, .modal-x, .of-q, .od-card, .ao-link, .os-link, .opb-more-link, .opb-sf-link, .opb-sf-all, .opb-sf-geo, .opb-sf-book, .opb-pv-toggle, .swiper-button-prev, .swiper-button-next, .breadcrumbs a, .hs-form .hs-button):focus-visible,
:is(.ap-link, .breadcrumbs-inverted a):focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
}
.btn-primary::after,
.btn-primary-outline::after,
.btn-secondary::after,
.btn-secondary-outline::after,
.btn-green::after,
.btn-green-outline::after,
.btn-white::after,
.btn-white-outline::after,
.btn-light-blue::after,
.btn-light-blue-outline::after,
.btn-gray::after,
.btn-gray-outline::after,
.btn-dark-gray::after,
.btn-dark-gray-outline::after,
.btn-dark-yellow::after,
.btn-dark-yellow-outline::after,
.btn-light-yellow::after,
.btn-light-yellow-outline::after,
.btn-black::after,
.btn-black-outline::after,
.btn-danger::after,
.btn-danger-outline::after {
content: '';
flex: none;
width: 1.3333rem;
height: 1.3333rem;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml,') no-repeat center / contain;
mask: url('data:image/svg+xml,') no-repeat center / contain;
transition: transform var(--transition-timing-normal);
}
.btn-primary:hover::after,
.btn-primary-outline:hover::after,
.btn-secondary:hover::after,
.btn-secondary-outline:hover::after,
.btn-green:hover::after,
.btn-green-outline:hover::after,
.btn-white:hover::after,
.btn-white-outline:hover::after,
.btn-light-blue:hover::after,
.btn-light-blue-outline:hover::after,
.btn-gray:hover::after,
.btn-gray-outline:hover::after,
.btn-dark-gray:hover::after,
.btn-dark-gray-outline:hover::after,
.btn-dark-yellow:hover::after,
.btn-dark-yellow-outline:hover::after,
.btn-light-yellow:hover::after,
.btn-light-yellow-outline:hover::after,
.btn-black:hover::after,
.btn-black-outline:hover::after,
.btn-danger:hover::after,
.btn-danger-outline:hover::after {
transform: translateX(0.6rem);
}
.download::after {
transform: rotate(90deg);
}
.download:hover::after {
transform: rotate(90deg) translateX(0.6rem);
}
.arrow_left::after {
order: -1;
transform: rotate(180deg);
}
.arrow_left:hover::after {
transform: rotate(180deg) translateX(0.6rem);
}
.btn:has(.icon) {
display:flex;
gap: 0.4em;
align-items:center;
justify-content: center;
}
.btn .icon {
display: block;
width: 0.8em;
height: auto;
}
.btn .icon img,
.btn .icon svg {
display: block;
width: 100%;
height: auto;
}
.btn:has(.icon:only-child) {
border-radius: 50%;
padding: 1.4rem;
}
.btn:has(.icon:only-child).btn-lg {
padding: 2rem;
font-size: clamp(2.2rem, 2.2rem + calc(0.6666666666666665vw*var(--viewport-factor)), 3rem);
}
.btn-icon-clean {
display: flex;
align-items: center;
justify-content: center;
border: none;
width: auto;
height: auto;
background: transparent;
cursor: pointer;
padding: 0.2em;
font-size: 2.2rem;
text-align: center;
color: unset;
line-height: 1;
}
.btn-icon-clean svg {
width: auto;
height: 1em;
fill: currentColor;
}
.btn-icon-clean.btn-sm {
font-size: 1.8rem;
}
a.link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.8rem;
background-color: transparent;
color: var(--color-primary);
font-family: var(--font-family-normal);
font-size: 1.4rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.06999999999999999rem;
text-decoration: none;
text-transform: uppercase;
}
a.link-primary {
color: var(--color-primary);
}
a.link-secondary {
color: var(--color-secondary);
}
a.link-green {
color: var(--color-green);
}
a.link-white {
color: var(--color-white);
}
a.link-light-blue {
color: var(--color-light-blue);
}
a.link-gray {
color: var(--color-gray);
}
a.link-dark-gray {
color: var(--color-dark-gray);
}
a.link-dark-yellow {
color: var(--color-dark-yellow);
}
a.link-light-yellow {
color: var(--color-light-yellow);
}
a.link-black {
color: var(--color-black);
}
a.link-danger {
color: var(--color-danger);
}
a.link svg {
flex: none;
width: 1.6rem;
height: 1.6rem;
}
a.link svg path {
fill: currentColor;
}
a.link::after {
content: '';
position: absolute;
bottom: -0.2rem;
left: 0;
width: 100%;
height: 2px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-timing-normal);
}
a.link:hover::after,
a.link:focus-visible::after {
transform: scaleX(1);
}
.video-toggle {
position:absolute;
bottom:2rem;
right:2rem;
z-index:99;
border:0;
background: none;
font-weight:600;
cursor:pointer;
opacity:.7;
transition: opacity .3s;
}
.video-toggle:hover {
opacity:1;
}
.video-toggle svg {
fill: var(--color-white);
width:4rem;
height:4rem;
}
/* Pulsante informativo ricorrente: la "i" che apre una nota o una modale.
Universale come .btn — le classi specifiche restano solo per il posizionamento. */
.info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
box-sizing: border-box;
/* min-* + flex:none: dentro un flex che si stringe, width/height da soli si lasciano comprimere. */
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
flex: none;
margin-left: 4px;
padding: 0;
border: none;
background: none;
color: var(--color-dark-gray);
cursor: pointer;
}
.info-btn svg {
width: 24px;
height: 24px;
flex: none;
}
@media (hover: hover) {
.info-btn:hover {
color: var(--color-primary);
}
}
/* Text row opening the info popup (benefits with a disclaimer): text and "i" are one button. */
.info-row {
padding: 0;
border: none;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.info-hint {
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.info-row:focus-visible .info-hint {
text-decoration-style: solid;
}
@media (hover: hover) {
.info-row:hover .info-hint {
text-decoration-style: solid;
}
.info-row:hover .info-btn {
color: var(--color-primary);
}
}
/* Chiusura delle modali: la x tonda in alto a destra, uguale ovunque.
Le classi specifiche restano per gli scostamenti (es. il posizionamento in .os-cb-x). */
.modal-x {
width: 36px;
height: 36px;
padding:0;
flex-shrink: 0;
border:0;
/*border: 1px solid var(--color-gray);*/
border-radius: 50%;
background: var(--color-white);
font-size: 1.8rem;
line-height: 1;
color: var(--color-primary);
cursor: pointer;
}
.modal-x > svg {
width:60%;
height:60%;
}.dropdown {
position: relative;
}
.dropdown-toggle {
cursor: pointer;
}
.dropdown-toggle::after {
content: '';
display: inline-block;
margin-inline-start: 0.4em;
margin-inline-end: .8rem;
margin-block-start: .7em;
border-block-end: .15em solid currentColor;
border-inline-start: .15em solid currentColor;
width: .5em;
height: .5em;
transform: translateY(-100%) rotate(225deg);
transition: all var(--transition-timing-fast);
}
.dropdown-toggle.show::after {
transform: rotate(-45deg);
margin-block-start: 0;
}
.dropdown-menu {
position: absolute;
margin: 0;
min-width: 10rem;
padding: 1.2rem 0;
background-color: var(--color-primary);
list-style: none;
}
.dropdown-menu[data-bs-popper] {
inset-block-start: 100%;
inset-inline-start: 0;
margin-top: 1rem;
}
.dropdown-menu:not(.show) {
display: none;
}
.dropdown-item {
display: block;
padding: 1rem 2rem;
width: max-content;
font-size: 1.8rem;
text-decoration: none;
color: var(--color-base);
outline-offset: -0.8rem;
}.offcanvas {
position: fixed;
inset-block-end: 0;
z-index: 501;
display: flex;
flex-direction: column;
max-width: 100%;
color: var(--color-base);
visibility: hidden;
background-color: var(--color-light);
background-clip: padding-box;
outline: 0;
/* faster than --transition-timing-normal: a hamburger-triggered drawer reads as laggy at 0.4s */
transition: transform .25s var(--easing-smooth);
}
.offcanvas.show:not(.hiding),
.offcanvas.showing {
transform: none;
}
.offcanvas.hiding,
.offcanvas.show,
.offcanvas.showing {
visibility: visible;
}
.offcanvas.offcanvas-start {
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
max-width: 50rem;
transform: translateX(-100%);
}
.offcanvas.offcanvas-end {
inset-block-start: 0;
inset-inline-end: 0;
width: 100%;
max-width: 50rem;
transform: translateX(100%);
}
.offcanvas.offcanvas-top {
inset-block-start: 0;
inset-inline-end: 0;
inset-inline-start: 0;
height: 30vh;
max-height: 100%;
transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom {
inset-inline-end: 0;
inset-inline-start: 0;
height: 30vh;
max-height: 100%;
transform: translateY(100%);
}
.offcanvas.offcanvas-bottom-full {
inset-inline-end: 0;
inset-inline-start: 0;
height: 100%;
max-height: unset;
transform: translateY(100%);
}
.offcanvas-header {
padding: var(--container-gutter-x);
}
.offcanvas-body {
overflow-y: auto;
padding: var(--container-gutter-x);
}
.offcanvas:has(.offcanvas-body) .offcanvas-header {
padding-block-end: calc(var(--container-gutter-x)/2);
}
.offcanvas:has(.btn-close) .offcanvas-header {
padding-inline-end: calc(var(--container-gutter-x) + 4rem);
}
.offcanvas:has(> .btn-close) > .offcanvas-body {
padding-block-start: calc(var(--container-gutter-x) + 4rem);
}
.offcanvas .btn-close {
position: absolute;
inset-block-start: var(--container-gutter-x);
inset-inline-end: var(--container-gutter-x);
}
.offcanvas .btn-close svg {
height:.6em;
}
@media (min-width:769px) {
.offcanvas {
--container-gutter-x: 4rem;
}
}.offcanvas-backdrop {
position: fixed;
inset: 0;
z-index: 4;
width: 100vw;
height: 100vh;
background-color: rgba(var(--color-black-rgb), 0.7);
transition: opacity var(--transition-timing-normal);
}
.offcanvas-backdrop.fade {
opacity: 0;
}
.offcanvas-backdrop.show {
opacity: .5;
}.breadcrumbs li {
display: inline;
overflow-wrap: normal;
}
.breadcrumbs li:not(:last-child)::after {
content: '>';
margin-inline: 0.5em;
}
.breadcrumbs a {
color: unset;
text-decoration: none;
}
.breadcrumbs .active-node {
color: var(--color-primary);
}
/* Inverted: breadcrumb su sfondo scuro (hero della scheda offerta). */
.breadcrumbs-inverted {
font-size: 1.4rem;
color: rgba(255, 255, 255, .5);
}
.breadcrumbs-inverted li:not(:last-child)::after {
content: '/';
}
.breadcrumbs-inverted a {
color: rgba(255, 255, 255, .5);
transition: color .15s;
}
.breadcrumbs-inverted .active-node {
color: #fff;
}
@media (hover: hover) {
.breadcrumbs-inverted a:hover {
color: #fff;
}
}/* Hero condivisa fra la scheda offerta e il modulo hero delle pagine.
Qui solo cio' che vale per entrambe: le specificita' stanno in offer/_hero.css
e nel module.css di page-hero.module. */
.oh-root {
--hero-h: 520px;
position: relative;
min-height: var(--hero-h);
}
/* Structural selector (no class on this div in markup): first child is the aria-hidden bg layer.
Senza foto resta il solo gradiente; con --oh-bg il gradiente ci va sopra, non al suo posto. */
.oh-root > [aria-hidden="true"] {
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * var(--oh-bleed-offset, 0px));
width: 100vw;
z-index: 0;
background-color: var(--color-primary);
background-image: linear-gradient(90deg, rgba(0, 20, 46, .82) 0%, rgba(0, 20, 46, .6) 42%, rgba(0, 20, 46, 0) 72%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* Lo scrim resta sopra la foto: senza, il testo bianco cade su soggetti chiari a 1.9:1. */
.oh-root[style*="--oh-bg"] > [aria-hidden="true"] {
background-image:
linear-gradient(90deg, rgba(0, 20, 46, .88) 0%, rgba(0, 20, 46, .72) 42%, rgba(0, 20, 46, .35) 72%),
var(--oh-bg);
}
/* Sotto lg la foto si ricentra e il soggetto chiaro finisce sotto al testo: scrim verticale. */
@media (max-width:992px) {
.oh-root[style*="--oh-bg"] > [aria-hidden="true"] {
background-image:
linear-gradient(180deg, rgba(0, 20, 46, .65) 0%, rgba(0, 20, 46, .88) 100%),
var(--oh-bg);
}
}
/* Offer page: square card image as mobile hero, when set (page-hero never sets --oh-bg-mobile). */
@media (max-width:768px) {
.oh-root[style*="--oh-bg-mobile"] > [aria-hidden="true"] {
background-image:
linear-gradient(180deg, rgba(0, 20, 46, .65) 0%, rgba(0, 20, 46, .88) 100%),
var(--oh-bg-mobile);
}
}
.oh-content {
position: relative;
z-index: 1;
min-height: var(--hero-h);
padding: 40px 0;
display: flex;
flex-direction: column;
}
.oh-content .breadcrumbs {
padding: 24px 0 0;
}
.oh-card {
margin-top: auto;
margin-bottom: 110px;
padding: 32px 32px 32px 0;
max-width: 731px;
text-shadow: 0 0 10px rgba(0, 0, 0, .6);
display: flex;
flex-direction: column;
}
.oh-h1 {
font-size: clamp(4rem, 4.0rem + calc(2.083333333333333vw*var(--viewport-factor)), 6.5rem);
line-height: 1.169;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-white);
margin: 0 0 12px;
}
.oh-sub {
font-size: 2.5rem;
line-height: 1.4;
font-weight: 500;
color: rgba(255, 255, 255, .9);
margin: 0 0 6px;
}
.oh-desc {
font-size: 2.0rem;
line-height: 1.5;
font-weight: 500;
color: rgba(255, 255, 255, .9);
margin: 0 0 24px;
}
@media (max-width:992px) {
.oh-root { --hero-h: 520px; }
.oh-content { padding: 0 20px 28px; }
.oh-card { max-width: none; margin-bottom: 40px; }
}/* Modale di ricontatto ("lascia i tuoi dati") · sitewide, full-screen, 2 colonne.
Vive in un file globale (non assets/css/offer/) perche' il dialog e' incluso da base.html
e i suoi trigger possono comparire su qualunque pagina, non solo sulla scheda offerta. */
dialog.opb-cb-modal {
border: none;
padding: 0;
max-width: 100%;
width: 100%;
max-height: 100vh;
height: 100%;
border-radius: 0;
overflow: hidden;
}
dialog.opb-cb-modal::backdrop {
background: rgba(0, 20, 50, .55);
}
.opb-cb-x {
position: absolute;
top: 20px;
right: 24px;
z-index: 2;
}
.opb-cb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 100%;
}
.opb-cb-left {
background: var(--color-primary);
color: var(--color-white);
padding: 80px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 32px;
overflow: hidden;
}
.opb-cb-licon {
display: block;
width: 91px;
height: 91px;
color: var(--color-white);
flex-shrink: 0;
}
.opb-cb-licon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.opb-cb-ltext-group {
display: flex;
flex-direction: column;
gap: 16px;
}
.opb-cb-ltitle {
font-size: clamp(3.2rem, 3.2rem + calc(3.5833333333333335vw*var(--viewport-factor)), 7.5rem);
font-weight: 700;
line-height: 1.13;
color: var(--color-white);
margin: 0;
}
.opb-cb-ltext {
font-size: 2.0rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-white);
margin: 0;
max-width: 50rem;
}
.opb-cb-right {
height: 100%;
min-height: 0;
overflow-y: auto;
padding: 100px 80px 80px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 40px;
}
.opb-cb-fhead {
display: flex;
flex-direction: column;
gap: 8px;
}
.opb-cb-ftitle {
margin: 0;
font-size: 2.8rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-primary);
}
.opb-cb-fsub {
margin: 0;
font-size: 2.0rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-dark-gray);
}
/* Il form arriva da
come .hs-form: qui si mappano le sue custom property invece di
riscrivere il markup dei campi, che HubSpot genera lato editor. */
.opb-cb-right .hs-form {
--form-input-border-width: 1.5px;
/* var(--color-gray), non un hex fisso: #cbd5e1 dava ~1.49:1 sul fondo quasi bianco dei
campi, sotto il 3:1 richiesto per i confini di un componente UI (stesso fix di
_store-appointment-form.css, stesso pattern). */
--form-input-border-color: var(--color-gray);
--form-input-border-radius: 8px;
--form-input-padding: 12px 16px;
--form-input-background-color: rgba(var(--color-primary-rgb), .04);
--form-input-font-size: 1.6rem;
--form-input-font-weight: 400;
--form-input-text-color: var(--color-primary);
--form-input-accent-color: var(--color-primary);
--form-label-font-size: 1.4rem;
--form-label-font-weight: 600;
--form-label-text-color: var(--color-primary);
--form-legal-font-size: 1.4rem;
--form-legal-font-weight: 400;
--form-legal-text-color: var(--color-dark-gray);
--form-layout-row-gap: 16px;
--form-layout-column-gap: 16px;
row-gap: 28px;
}
.opb-cb-right .hs-form input::placeholder {
color: #64748b;
}
.opb-cb-right .hs-form .hs-button {
width: 100%;
}
@media (max-width:768px) {
/* auto 1fr: il pannello navy resta alto quanto il suo contenuto, il form panel prende
il resto e scorre al suo interno grazie a .opb-cb-right { overflow-y: auto }. */
.opb-cb-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.opb-cb-left { padding: 56px 24px 32px; }
.opb-cb-right { padding: 32px 24px 56px; gap: 24px; }
}/* Popup informativo unico del sito: markup in templates/partials/info-modal.html, incluso una
sola volta da base.html, aperto da qualunque trigger con data-info-*. Wiring in main.js. */
.info-modal {
border: none;
padding: 0;
max-width: 560px;
width: calc(100% - 32px);
max-height: 86vh;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
overflow: hidden;
}
/* Testi lunghi e spesso tabellari (condizioni economiche): 560px li renderebbe illeggibili. */
.info-modal--wide {
max-width: 120rem;
}
.info-modal::backdrop {
background: rgba(0, 20, 50, .55);
}
.info-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid var(--color-gray);
}
.info-modal-title {
margin: 0;
font-size: 1.8rem;
color: var(--color-primary);
}
.info-modal-body {
padding: 20px 24px 28px;
overflow-y: auto;
max-height: calc(86vh - 78px);
font-size: 1.3rem;
line-height: 1.6;
color: var(--color-dark-gray);
}
.info-modal-body p {
margin: 0 0 12px;
}
.info-modal-body > :first-child { margin-top: 0; }
.info-modal-body > :last-child { margin-bottom: 0; }
.info-modal-body a {
color: var(--color-primary);
word-break: break-word;
}/* Pannello form "Richiedi un appuntamento" (templates/partials/store-appointment-form.html),
condiviso dal modulo punti-vendita.module e dalla modale store finder dell'offerta.
Globale (non in assets/css/offer/) perche' il modulo puo' comparire su qualunque pagina. */
.opb-sa-form {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.opb-sa-header {
display: flex;
flex-direction: column;
gap: 8px;
}
.opb-sa-title {
margin: 0;
font-size: 2.8rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-primary);
}
.opb-sa-sub {
margin: 0;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-dark-gray);
}
/* Come nella modale di ricontatto: si mappano le custom property di .hs-form invece di
riscrivere il markup dei campi, che HubSpot genera lato editor. */
.opb-sa-cform .hs-form,
.opb-sa-select-field {
--form-input-border-width: 1.5px;
/* var(--color-gray), non un hex fisso: #cbd5e1 dava ~1.49:1 sul fondo quasi bianco dei
campi, sotto il 3:1 richiesto per i confini di un componente UI. */
--form-input-border-color: var(--color-gray);
--form-input-border-radius: 8px;
--form-input-padding: 12px 16px;
--form-input-background-color: rgba(var(--color-primary-rgb), .04);
--form-input-font-size: 1.6rem;
--form-input-font-weight: 400;
--form-input-text-color: var(--color-primary);
--form-input-accent-color: var(--color-primary);
--form-label-font-size: 1.4rem;
--form-label-font-weight: 600;
--form-label-text-color: var(--color-primary);
--form-legal-font-size: 1.4rem;
--form-legal-font-weight: 400;
--form-legal-text-color: var(--color-dark-gray);
--form-layout-row-gap: 16px;
--form-layout-column-gap: 16px;
}
.opb-sa-cform .hs-form {
row-gap: 28px;
}
.opb-sa-cform .hs-form input::placeholder {
color: #64748b;
}
.opb-sa-cform .hs-form .hs-button {
width: 100%;
}
/* La select vive fuori dal
(vedi partial), ma deve sembrare un suo campo:
stessa struttura hs-form-field/input/select delle regole generiche in _form.css. */
.opb-sa-select-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.opb-sa-select-field label {
font-size: var(--form-label-font-size);
font-weight: var(--form-label-font-weight);
color: var(--form-label-text-color);
}
.opb-sa-select-field select {
width: 100%;
border-width: var(--form-input-border-width);
border-style: solid;
border-color: var(--form-input-border-color);
border-radius: var(--form-input-border-radius);
padding: var(--form-input-padding);
background-color: var(--form-input-background-color);
font-family: inherit;
font-size: var(--form-input-font-size);
color: var(--form-input-text-color);
}
/* Il chevron di .hs-fieldtype-select (_form.css) si sovrappone ai nomi lunghi dei punti vendita.
Specificita' alzata con .opb-sa-cform: _form.css e' incluso dopo questo file. */
.opb-sa-cform .opb-sa-select-field select {
/* appearance, non solo -webkit-: su Firefox la freccia nativa si sommava al chevron. */
appearance: none;
padding-right: 4.5rem;
}
/* Modale sitewide "Richiedi un appuntamento" (templates/partials/store-appointment-modal.html),
stesso pattern full-screen a due colonne di _callback-modal.css. */
dialog.opb-am-modal {
border: none;
padding: 0;
max-width: 100%;
width: 100%;
max-height: 100vh;
height: 100%;
border-radius: 0;
overflow: hidden;
}
dialog.opb-am-modal::backdrop {
background: rgba(0, 20, 50, .55);
}
.opb-am-x {
position: absolute;
top: 20px;
right: 24px;
z-index: 2;
}
.opb-am-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 100%;
}
.opb-am-left {
background: var(--color-primary);
color: var(--color-white);
padding: 80px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 32px;
overflow: hidden;
}
.opb-am-licon {
display: block;
width: 65px;
height: 65px;
color: var(--color-white);
flex-shrink: 0;
}
.opb-am-licon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.opb-am-ltext-group {
display: flex;
flex-direction: column;
gap: 16px;
}
.opb-am-ltitle {
font-size: clamp(3.2rem, 3.2rem + calc(3.5833333333333335vw*var(--viewport-factor)), 7.5rem);
font-weight: 700;
line-height: 1.13;
color: var(--color-white);
margin: 0;
}
.opb-am-ltext {
font-size: 2.0rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-white);
margin: 0;
max-width: 50rem;
}
.opb-am-right {
height: 100%;
min-height: 0;
overflow-y: auto;
padding: 100px 80px 80px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
@media (max-width:768px) {
/* auto 1fr: il pannello navy resta alto quanto il suo contenuto, il form panel prende
il resto e scorre al suo interno grazie a .opb-am-right { overflow-y: auto }. */
.opb-am-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.opb-am-left { padding: 56px 24px 32px; }
.opb-am-right { padding: 32px 24px 56px; }
}/* Store finder · stili generici condivisi da tutti i contesti che usano store-finder-core.js:
la modale store finder della scheda offerta (assets/css/offer/_store-finder.css, solo la sua
chrome da dialog e il suo layout a card compatto) e il modulo modules/punti-vendita.module
(che vive su qualunque pagina, quindi non puo' dipendere da un CSS scoped all'offerta). */
.opb-sf-input-wrap {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.opb-sf-input-wrap > svg {
position: absolute;
left: 14px;
width: 18px;
height: 18px;
stroke: var(--color-gray);
fill: none;
stroke-width: 1.8;
pointer-events: none;
}
.opb-sf-input {
width: 100%;
padding: 12px 14px 12px 42px;
border: 1.5px solid var(--color-gray);
border-radius: 12px;
font-family: inherit;
font-size: 1.4rem;
color: var(--color-primary);
}
.opb-sf-suggest {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 20;
padding: 6px;
background: var(--color-white);
border: 1.5px solid var(--color-gray);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 66, 120, .12);
}
.opb-sf-suggest[hidden] {
display: none;
}
.opb-sf-suggest-list {
margin: 0;
padding: 0;
list-style: none;
}
.opb-sf-suggest-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
color: var(--color-primary);
font-size: 1.4rem;
}
.opb-sf-suggest-item:hover,
.opb-sf-suggest-item.is-active {
background: #F0F3FA;
}
/* L'opzione attiva vive solo in aria-activedescendant: serve un segno visibile oltre al fondo tenue. */
.opb-sf-suggest-item.is-active {
box-shadow: inset 3px 0 0 var(--color-primary);
}
.opb-sf-suggest-main {
font-weight: 600;
}
.opb-sf-suggest-secondary {
font-size: 1.2rem;
color: var(--color-dark-gray);
}
.opb-sf-suggest-attr {
margin: 4px 12px 2px;
text-align: right;
font-size: 1.1rem;
color: var(--color-dark-gray);
}
.opb-sf-geo {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border: 1.5px solid var(--color-gray);
background: var(--color-white);
border-radius: 12px;
font-size: 1.3rem;
font-weight: 600;
color: var(--color-primary);
cursor: pointer;
white-space: nowrap;
}
.opb-sf-geo svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
.opb-sf-geo[aria-busy="true"] {
opacity: .6;
cursor: progress;
}
.opb-sf-map {
height: 280px;
/* Dentro il body flex della modale offerta senza questo il flexbox la comprime fino a farla
sparire quando la lista dei punti vendita e' lunga. */
flex-shrink: 0;
border-radius: 16px;
overflow: hidden;
background: var(--color-gray);
}
/* Marker degli Advanced Marker: il pin classico lo disegna il JS come simbolo SVG. */
/* Marker color: single source for CSS and JS (read via getComputedStyle for classic pins). */
:root {
--color-store-marker: var(--color-primary);
}
.opb-sf-pin {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--color-white);
background: var(--color-store-marker);
box-shadow: 0 2px 6px rgba(25, 26, 38, .35);
transition: transform .15s;
}
.opb-sf-pin.is-active {
transform: scale(1.5);
}
.opb-sf-status {
font-size: 1.3rem;
font-weight: 600;
color: var(--color-dark-gray);
margin: 0;
}
.opb-sf-alert {
font-size: 1.3rem;
font-weight: 600;
/* Il token danger puro e' 4,27:1 su bianco: sotto la soglia AA per questo corpo testo. */
color: color-mix(in srgb, var(--color-danger) 85%, black);
margin: 0;
}
/* Vuota quasi sempre: niente display:none, uno screen reader non annuncia il testo iniettato
in una region che era fuori dal render tree. Nascosta ma sempre renderizzata. */
.opb-sf-status:empty,
.opb-sf-alert:empty {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip-path: inset(50%);
white-space: nowrap;
}
.opb-sf-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 40px 20px;
}
.opb-sf-empty-ill {
width: 72px;
height: 72px;
color: var(--color-gray);
}
.opb-sf-empty-ill svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.opb-sf-empty p {
font-size: 1.4rem;
line-height: 1.55;
color: var(--color-dark-gray);
margin: 0;
max-width: 320px;
}
.opb-sf-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Sopra un eventuale radio invisibile della card (design a selezione, come nella modale
offerta): altrimenti aprire gli orari selezionerebbe la card invece di espandere il dettaglio. */
.opb-sf-hours {
position: relative;
z-index: 2;
margin-top: 10px;
font-size: 1.3rem;
color: var(--color-dark-gray);
}
.opb-sf-hours > summary {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: var(--color-primary);
cursor: pointer;
width: fit-content;
list-style: none;
}
.opb-sf-hours > summary::-webkit-details-marker {
display: none;
}
.opb-sf-hours > summary::after {
content: "";
flex-shrink: 0;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s ease;
}
.opb-sf-hours[open] > summary::after {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.opb-sf-hours > summary::after { transition: none; }
}
.opb-sf-hours-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 16px;
margin: 10px 0 0;
}
.opb-sf-hours-list dt {
font-weight: 600;
color: var(--color-primary);
}
.opb-sf-hours-list dd {
margin: 0;
}
.opb-sf-hours-list dd.is-closed {
color: var(--color-gray);
}
.opb-sf-hours-note {
margin: 8px 0 0;
font-size: 1.25rem;
line-height: 1.5;
}
.opb-sf-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 1.3rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
}
.opb-sf-link svg {
width: 15px;
height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
.opb-sf-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
border-radius: 999px;
font-size: 1.2rem;
font-weight: 600;
}
.opb-sf-badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
/* --color-green (#AAF5BA) e' un tono pastello pensato per sfondi/accenti, non per il testo:
usato com'era dava un contrasto di ~1.13:1 sul suo stesso sfondo chiaro. Scurito con
color-mix, cosi' resta legato al token invece di un hex fisso scollegato. */
.opb-sf-badge.is-open {
background: #E4F5EA;
color: color-mix(in srgb, var(--color-green) 30%, black);
}
.opb-sf-badge.is-closed {
background: color-mix(in srgb, var(--color-gray) 15%, white);
color: var(--color-dark-gray);
}
/* Contenuto della bubble sul marker (InfoWindow di Google): stessi dati della card, in colonna. */
.opb-sf-pop {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 220px;
font-family: inherit;
color: var(--color-dark-gray);
}
.opb-sf-pop-name {
font-size: 1.4rem;
color: var(--color-black);
}
.opb-sf-pop-addr,
.opb-sf-pop-phone {
font-size: 1.3rem;
line-height: 1.4;
}
.opb-sf-pop-phone {
color: var(--color-primary);
font-weight: 600;
}
.opb-sf-pop-badge {
align-self: flex-start;
margin-top: 4px;
padding: 3px 10px;
}
.opb-sf-pop-book {
align-self: flex-start;
margin-top: 8px;
}
/* Bottone "Prenota appuntamento": stesso aspetto ovunque compaia (card della modale offerta,
card del modulo punti vendita). */
.opb-sf-book {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 10px 16px;
border: none;
border-radius: 10px;
background: var(--color-primary);
color: var(--color-white);
font-family: inherit;
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
}
.opb-sf-book svg {
width: 15px;
height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
@media (hover: hover) {
.opb-sf-book:hover {
background: color-mix(in srgb, var(--color-primary) 85%, black);
}
}
@media (max-width:576px) {
.opb-sf-map { height: 200px; }
}.hs-form {
--form-input-accent-color: var(--color-base);
--form-input-border-color: var(--color-gray-subtle);
--form-input-border-style: solid;
--form-input-border-width: 0px 0px 1px 0px;
--form-input-checkbox-border-width: 1px;
--form-input-border-radius: 0;
--form-checkbox-border-radius: 0;
--form-input-padding: 1rem 1rem 1rem 0rem;
--form-input-background-color: var(--color-white);
--form-input-font-size: 1.8rem;
--form-input-font-weight: 400;
--form-input-focus-border-color: var(--color-primary);
--form-input-focus-shadow-color: rgba(var(--color-primary-rgb), 50%);
--form-input-checkbox-size: 2rem;
--form-label-font-size: 1.8rem;
--form-input-text-color: var(--color-base);
--form-label-font-weight: 500;
--form-label-text-color: var(--color-base);
--form-legal-font-size: 1.8rem;
--form-legal-font-weight: 400;
--form-legal-text-color: var(--color-base);
--form-error-font-size: 1.8rem;
--form-error-font-weight: 400;
--form-error-text-color:var(--color-danger);
--form-layout-row-gap: calc(1.5*var(--container-gutter-x));
--form-layout-column-gap: var(--container-gutter-x);
}
.hs-form {
display: flex;
flex-direction: column;
row-gap: 3.2rem;
}
.hs-form fieldset {
max-width:100% !important;
}
.hs-form input {
line-height: 1 !important;
}
.hs-form input[type="text"],
.hs-form input[type="tel"],
.hs-form input[type="email"],
.hs-form input[type="url"],
.hs-form input[type="file"],
.hs-form .hs-input,
.hs-form select,
.hs-form textarea {
margin: var(--form-input-margin);
border-width: var(--form-input-border-width);
border-style: var(--form-input-border-style);
border-color: var(--form-input-border-color);
border-radius: var(--form-input-border-radius);
width: 100% !important;
padding: var(--form-input-padding);
background-color: var(--form-input-background-color);
font-family: inherit;
font-size: var(--form-input-font-size);
font-weight: var(--form-input-font-weight);
color: var(--form-input-text-color);
}
.hs-form input::placeholder,
.hs-form select::placeholder,
.hs-form textarea::placeholder {
color: var(--color-gray-deep);
}
.hs-form input[type="checkbox"] {
appearance: none;
margin: var(--form-input-margin);
padding:1.2rem !important;
border-width: var(--form-input-checkbox-border-width);
border-style: var(--form-input-border-style);
border-color: var(--form-input-border-color);
border-radius: var(--form-checkbox-border-radius);
width: var(--form-input-checkbox-size) !important;
height: var(--form-input-checkbox-size) !important;
background-color: var(--form-input-background-color);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.hs-form input[type="checkbox"]:checked {
background-color: var(--form-input-accent-color) !important;
background-image: url("data:image/svg+xml,")
}
.hs-form input[type="radio"] {
appearance: none;
margin: var(--form-input-margin);
padding:1.2rem !important;
position: relative;
width: var(--form-input-checkbox-size);
height: var(--form-input-checkbox-size);
border-width: var(--form-input-checkbox-border-width);
border-style: var(--form-input-border-style);
border-color: var(--form-input-border-color);
border-radius: 50%;
background-color: var(--form-input-background-color);
}
.hs-form input[type="radio"]:checked {
border-color: var(--form-input-accent-color);
}
.hs-form input[type="radio"]:checked::after {
content: "";
position: absolute;
inset: 25%;
border-radius: 50%;
background-color: var(--form-input-accent-color);
}
/* Opzioni radio in riga (es. Si'/No): verticali per default sarebbero illeggibili per scelte brevi. */
.hs-form .hs-fieldtype-radio .inputs-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.hs-form .hs-fieldtype-radio label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hs-form textarea {
min-height: 15em;
}
.hs-form input:user-invalid,
.hs-form textarea:user-invalid,
.hs-form select:user-invalid {
border-color: var(--color-danger);
}
.hs-form .hs-fieldtype-select .input:has(select) {
position: relative;
}
.hs-form .hs-fieldtype-select .input:has(select)::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-60%) rotate(-45deg);
right: 2rem;
font-size: var(--form-input-font-size);
color: var(--form-input-text-color);
border-block-end: 0.1rem solid currentColor;
border-inline-start: 0.1rem solid currentColor;
display: block;
width: .8em;
height: .8em;
transition: all var(--transition-timing-fast)
}
.hs-form .input:has(select:focus):after {
transform: translateY(-25%) rotate(135deg) !important;
transition: all var(--transition-timing-fast);
}
.hs-form select {
-webkit-appearance:none;
line-height: 1.65;
}
.hs-form select option {
color: initial;
font-weight: 200;
}
.hs-form .hs-form-field {
display: flex;
flex-flow: column nowrap;
column-gap: 4rem;
row-gap: 1rem;
}
.hs-form .hs-form-booleancheckbox-display {
display: flex;
gap: 1em;
}
.hs-form .hs-form-booleancheckbox-display > span {
margin-left: 0 !important;
}
.hs-form .hs-input.hs-fieldtype-intl-phone select {
margin-bottom: 1.8rem;
width: 100% !important;
float: unset;
}
.hs-form label {
font-size: var(--form-label-font-size);
font-weight: var(--form-label-font-weight);
color: var(--form-label-text-color);
}
.hs-form fieldset {
margin: 0;
border: none;
padding: 0;
}
.hs-form .legal-consent-container .inputs-list {
list-style: none;
margin: 0;
padding: 0;
}
.hs-form .legal-consent-container {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.hs-form .legal-consent-container,
.hs-form .legal-consent-container label {
font-size: var(--form-legal-font-size) !important;
font-weight: var(--form-legal-font-weight);
color: var(--form-legal-text-color);
}
.hs-form .legal-consent-container .field.hs-form-field {
margin-bottom: 0;
}
.legal-consent-container .hs-form-booleancheckbox-display>span {
width: calc(100% - var(--form-input-checkbox-size));
}
.hs-form .hs-submit .actions {
display: flex;
justify-content: flex-end;
}
.hs-form .hs-error-msg,
.hs-form .hs_error_rollup .hs-error-msgs label {
font-size: var(--form-error-font-size) !important;
font-weight: var(--form-error-font-weight) !important;
color: var(--form-error-text-color) !important;
}
.hs-form .form-columns-1,
.hs-form .form-columns-2,
.hs-form .form-columns-3 {
display: flex;
flex-direction: column;
row-gap: var(--form-layout-row-gap);
column-gap: var(--form-layout-column-gap);
}
.hs-form ul.inputs-list{
margin: 0px;
padding: 0px;
list-style: none;
}
.hs-form ul.inputs-list li::marker{
content: "";
}
@media (min-width:993px) {
.hs-form .hs-form-field .hs-error-msgs {
width: 100%;
}
.hs-form .form-columns-2,
.hs-form .form-columns-3 {
flex-direction: row;
}
.hs-form .form-columns-2 .hs-form-field {
width: 50%;
}
.hs-form .form-columns-3 .hs-form-field {
width: calc(100%/3);
}
}
@media (max-width:992px) {
.hs-form {
--form-input-padding: 1.4rem;
--form-input-font-size: 1.6rem;
--form-label-font-size: 1.8rem;
}
.hs-form .hs-form-field {
width:100% !important;
}
.hs_newsletter label,
.hs_informativa_privacy label {
font-size: 1.6rem;
}
.hs-form input[type="checkbox"] {
width: calc( var(--form-input-checkbox-size) - 10px ) !important;
height: calc( var(--form-input-checkbox-size) - 10px ) !important;
}
}.fancy-card {
display: block;
border: none;
padding: 0;
width: 100%;
background: transparent;
}
.fancy-card figure {
position: relative;
display: block;
margin: 0;
padding-block-end: 6rem;
transition: transform var(--transition-timing-normal);
}
.fancy-card figure .images {
display: flex;
position: relative;
justify-content: center;
margin-inline: 0;
border-radius: 1rem;
width: 100%;
height: 100%;
aspect-ratio: .925;
overflow: hidden;
}
.fancy-card figure .images img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fancy-card figure .images .image-main {
z-index: 1;
}
.fancy-card figure .images .image-hover {
position: absolute;
inset: 0;
opacity: 0;
z-index: 2;
transition: opacity var(--transition-timing-normal);
}
.fancy-card figure figcaption {
position: absolute;
inset: auto 50% 0rem 50%;
z-index: 3;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border-radius: 1rem;
width: 80%;
height: 12rem;
padding: 1rem;
background: var(--color-white);
text-align: center;
box-shadow: .5rem .5rem 1rem rgba(var(--color-black-rgb), 0.2);
transform: translate(-50%, 0%);
transition: opacity var(--transition-timing-normal), transform var(--transition-timing-normal);
}
.fancy-card:hover figure .image-hover,
.fancy-card:focus figure .image-hover,
.fancy-card:active figure .image-hover {
opacity: 1;
}
button.fancy-card {
cursor: pointer;
border-radius: 1rem;
}
button.fancy-card:hover figure figcaption,
button.fancy-card:focus figure figcaption,
button.fancy-card:active figure figcaption {
transform: translate(-50%, -25%);
}/* Card offerta condivisa (`card offerta generica` in Figma): immagine, angolo giallo e box bianco
sporgente. Vive in main.css e non in offer-page.css perche' la usano anche fasce fuori dalla
scheda offerta (home). La sezione che la contiene porta il proprio layout. */
.ao-card {
position: relative;
box-shadow: 0 24px 48px -12px rgba(0, 27, 68, .15);
transition: transform .22s ease, box-shadow .22s ease;
}
.ao-card--offset {
margin-top: 48px;
}
/* Solo su dispositivi con hover reale: su touch lo stato resta appiccicato dopo il tap. */
@media (hover: hover) {
.ao-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 56px -12px rgba(0, 27, 68, .22);
}
}
.ao-media {
position: relative;
aspect-ratio: 511 / 562;
overflow: hidden;
}
.ao-img {
position: absolute;
inset: 0;
background-color: var(--color-primary);
background-size: cover;
background-position: center;
}
.ao-triangle {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
max-width: 255px;
height: 36px;
background: #edb500;
clip-path: polygon(0 0, 0 100%, 100% 100%);
z-index: 2;
pointer-events: none; /* it sits above the white box and would steal the card's click */
}
.ao-body {
position: absolute;
left: 32px;
right: 32px;
bottom: 0;
background: var(--color-white);
box-shadow: 0 20px 20px rgba(0, 0, 0, .08), 0 1px 1.5px rgba(0, 0, 0, .05);
padding: 31px 32px 32px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 1;
}
.ao-bullets {
list-style: disc;
margin: 0;
font-size: 1.6rem;
line-height: 1.5625;
color: #434750;
}
.ao-bullets li {
margin: 0;
}
.ao-link {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
padding-top: 12px;
text-decoration: none;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--color-primary);
}
/* .ao-body is absolute, so the overlay starts there: it overflows out and .ao-media clips it. */
.ao-link.stretched-link::before {
inset: -1000px -32px 0;
}
.ao-link-icon {
flex: none;
width: 48px;
height: 48px;
background: var(--color-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
}
.ao-link-icon svg {
width: 16px;
height: 16px;
}
@media (max-width:992px) {
.ao-card { margin-top: 0; }
}.of-root {
padding: 40px 0;
}
/* Contenitore (campo `container` di offer-faq). Nel template offerta la FAQ sta in
`.offer-main-col`, che gabbia e respiro li da' gia': `none` resta com'era. In una pagina a
sezioni la section e' neutra (`_layout.css`), quindi li porta il modulo, coi valori della
`FAQ Section` in Figma: 80 sopra e sotto sul desktop, 48 in mobile, fluido fra 390 e 1920.
Il gutter tiene dentro anche il margine di -16px di `.of-q`. */
.of-root--max-width,
.of-root--full {
padding: clamp(48px, 39.84px + 2.092vw, 80px) var(--layout-gutter);
}
.of-root--max-width {
max-width: calc(var(--layout-max) + 2 * var(--layout-gutter));
margin-inline: auto;
}
.of-root > h2 {
letter-spacing: -0.02em;
margin: 0 0 24px;
}
.of-item {
border-bottom: 1px solid var(--color-light-blue);
}
.of-item:first-child {
border-top: 1px solid var(--color-light-blue);
}
/* Heading di servizio: serve solo a rendere le domande navigabili per intestazioni. */
.of-q-heading {
margin: 0;
font: inherit;
}
.of-q {
border: none;
background: none;
font-family: inherit;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
/* Negative inline margin lets the hover background bleed out while text stays aligned with the title. */
width: calc(100% + 32px);
margin-inline: -16px;
padding: 20px 16px;
font-size: 2.0rem;
font-weight: 600;
line-height: 1.5;
color: var(--color-primary);
transition: background-color .2s ease;
}
.of-q:hover {
background-color: var(--color-primary-10);
color: var(--color-primary-scuro);
}
.of-sign {
flex: none;
width: 20px;
height: 20px;
position: relative;
color: var(--color-secondary);
}
.of-sign::before,
.of-sign::after {
content: "";
position: absolute;
background-color: currentColor;
transition: all .3s ease;
}
.of-sign::before {
top: 50%;
left: 0;
width: 100%;
height: 2px;
transform: translateY(-50%);
}
.of-sign::after {
left: 50%;
top: 0;
width: 2px;
height: 100%;
transform: translateX(-50%);
}
.of-item.expanded .of-sign::after {
height: 0;
}
/* 0fr -> 1fr invece di max-height misurata in JS: l'altezza non viene mai congelata, quindi
resta corretta dopo resize, zoom, rotazione e font swap. */
.of-a {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows .4s ease;
}
.of-item.expanded > .of-a {
grid-template-rows: 1fr;
}
.of-a-inner {
overflow: hidden;
min-height: 0;
}
/* Spazio e stile stanno qui e non su .of-a-inner: sul grid item il padding non si comprime a 0fr. */
.of-a-text {
font-size: 1.8rem;
line-height: 1.556;
color: var(--color-dark-gray);
padding-bottom: 3rem;
}
.of-a-text p {
margin: 0 0 2.4rem;
}
.of-a-text > *:last-child {
margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
.of-a,
.of-q { transition: none; }
}:root {
--header-height: 8.4rem;
--header-height-scrolled: 6rem;
--scroll-padding-top: var(--header-height);
}
#header_website {
position: sticky;
top: 0;
z-index: 500;
width: 100%;
background-color: var(--color-primary);
}
/* height/logo shrink on scroll: .scrolled is toggled by updateHeader() in main.js */
#header_website.scrolled {
--header-height: var(--header-height-scrolled);
}
#header_website .header-main {
height: var(--header-height);
transition: height var(--transition-timing-normal);
}
#header_website .header-main .container {
height: 100%;
}
#header_website .header-main .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(2rem, 2vw, 4rem);
height: 100%;
border-bottom: rgba(var(--color-white-rgb), 0.2) 1px solid;
}
/* logo + hamburger, wrapped separately from .header-nav-drawer so this can be raised
above it (solid background, higher z-index) while the drawer drops down from behind it */
#header_website .inner-wrapper {
width: 100%;
height: 100%;
}
#header_website .inner-wrapper .container{
display: flex;
align-items: center;
justify-content: space-between;
}
#header_website #header_website_logo {
display: flex;
height: 3.1rem;
transition: height var(--transition-timing-normal);
}
#header_website.scrolled #header_website_logo {
height: 2.4rem;
}
#header_website #header_website_logo svg {
height: 100%;
width: auto;
}
#header_website .header-actions {
display: flex;
align-items: center;
gap: 1.8rem;
}
/* mobile hamburger toggle: hidden on desktop, shown on mobile/tablet */
#header_website .mod-navigation-toggle {
display: none;
}
@media (max-width:1100px) {
#header_website .mod-navigation-toggle {
display: block;
}
/* keep logo/toggle visible above the drawer instead of it covering the full viewport */
#header_website .header-nav-drawer {
top: var(--header-height);
height: calc(100dvh - var(--header-height));
background-color: var(--color-primary);
}
/* .inner-wrapper (logo + hamburger) is a flex-sibling of the drawer inside .wrapper, not an
ancestor of it — .wrapper itself creates no stacking context, so it needs its own solid
background and a z-index above the drawer's (501, from the shared .offcanvas rule) to stay
visible while the drawer drops down from behind it */
#header_website .inner-wrapper {
position: relative;
z-index: 502;
background-color: var(--color-primary);
}
}
/* on desktop the shared drawer (nav + utility-nav) stops being an offcanvas
and becomes a plain flex row filling the space between logo and hamburger */
@media (min-width:1101px) {
/* between xl and xxl the header row has no slack: type, gaps and gutters scale down to 14px */
#header_website {
--header-nav-font-size: clamp(1.4rem, -0.06666666666666732rem + calc(1.3333333333333337vw*var(--viewport-factor)), 1.8rem);
--header-nav-gap: clamp(2.4rem, -7.133333333333333rem + calc(8.666666666666668vw*var(--viewport-factor)), 5rem);
--header-actions-font-size: clamp(1.4rem, 0.666666666666666rem + calc(0.6666666666666672vw*var(--viewport-factor)), 1.6rem);
}
/* .inner-wrapper only exists to raise logo+hamburger above the mobile drawer; on desktop the
drawer sits between them in normal flow instead, so the wrapper (and its own nested .container)
are dropped from the box tree — both levels, or logo+actions stay bundled together as a single
flex item instead of rejoining .wrapper's flex layout directly — and `order` restores logo/nav/actions */
#header_website .inner-wrapper,
#header_website .inner-wrapper .container {
display: contents;
}
/* In Figma (componente `menu`) i contenuti stanno a 22px dai bordi, non nella gabbia da 1600. */
#header_website .header-main .wrapper {
padding-inline: 2.2rem;
}
#header_website #header_website_logo {
order: 1;
}
#header_website .header-actions {
order: 3;
}
#header_website .header-nav-drawer {
order: 2;
position: static;
z-index: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1;
width: 100%;
max-width: none;
visibility: visible;
background-color: transparent;
color: inherit;
transform: none;
transition: none;
}
#header_website .header-nav-drawer .offcanvas-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1;
width: 100%;
overflow: visible;
padding: 0;
}
}#footer_website {
background-color: var(--color-primary);
color: var(--color-white);
position: relative;
clip-path: inset(0);
}
/* Curtain reveal: the upper footer bands scroll over the underfooter, which sticks to the viewport bottom. */
#footer_website :is(.top, .middle, .bottom) {
position: relative;
z-index: 1;
background-color: var(--color-primary);
}
#footer_website .underfooter {
position: sticky;
bottom: 0;
z-index: 0;
}
#footer_website a {
color: inherit;
}
/* Le section del tema sono neutre: il footer si riprende la gabbia del Figma (contenuti a x=160 a
1920). :where tiene bassa la specificita', cosi' i padding messi dall'editor vincono ancora. */
:where(#footer_website) .dnd-section {
padding-block: 50px;
padding-inline: var(--layout-gutter);
}
:where(#footer_website) .dnd-section > .row-fluid {
max-width: var(--layout-max);
}
/* footer.html avvolge l'area "top" in un .container: il gutter lo da' gia' la section. */
:where(#footer_website) .top > .container {
padding-inline: 0;
}
@media (max-width:992px) {
#footer_website .footer-acc {
border-bottom: 1px solid currentColor;
}
#footer_website .footer-acc .heading {
margin: 0;
}
#footer_website .footer-acc-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 1.5rem 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: start;
cursor: pointer;
}
#footer_website .footer-acc-toggle::after {
content: "";
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
margin-top: -0.25rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
#footer_website .footer-acc-toggle[aria-expanded="true"]::after {
margin-top: 0.25rem;
transform: rotate(-135deg);
}
#footer_website .footer-acc-toggle:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
#footer_website .footer-acc .dnd-row:last-child {
padding-bottom: 1.5rem;
}
}
@media (max-width:992px) and (prefers-reduced-motion: reduce) {
#footer_website .footer-acc-toggle::after {
transition: none;
}
}.visually-hidden {
position: absolute;
overflow: hidden;
margin: -1px;
border: 0;
width: 1px;
height: 1px;
padding: 0;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* clip-path (not just the legacy clip) matters here specifically: WebKit has known flash-of-
unclipped-content glitches with clip:rect() inside a transform-animating ancestor (the drawer) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
position: absolute !important;
overflow: hidden !important;
margin: -1px !important;
border: 0 !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.hide-scrollbar::-webkit-scrollbar { /* Hide scrollbar for Chrome, Safari and Opera */
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
scrollbar-width: none; /* Hide scrollbar for Firefox */
}
/* Whole-card click target: `stretched-link-host` on the card, `stretched-link` on its single link. */
.stretched-link-host {
position: relative;
}
.stretched-link::before {
content: '';
position: absolute;
inset: 0;
z-index: 1; /* without it, positioned siblings later in the DOM cover the overlay and eat the click */
}
/* .btn is relative on its own: without this the overlay would stop at the button, not the card. */
.btn.stretched-link {
position: static;
}
/* The whole card is clickable, so the card draws the focus ring, not just the link text. */
.stretched-link:focus-visible {
box-shadow: none;
}
.stretched-link-host:has(.stretched-link:focus-visible) {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
.no-list {
list-style: none;
margin: 0;
padding: 0;
overflow-wrap: break-word;
}
.hidden {
display: none !important;
}
@media (max-width:768px) {
.hidden-mobile {
display: none !important;
}
}
@media (min-width:769px) and (max-width:1100px) {
.hidden-tablet {
display: none !important;
}
}
@media (min-width:1101px) {
.hidden-desktop {
display: none !important;
}
}
/* Senza supporto a