/* ==========================================
ADS — CSS UNICO PULITO
(versione semplificata, 2026)
========================================== */
/* ------------------------------
ROOT VARS
-------------------------------- */
:root{
/* Dark base */
--bg-dark: #050816;
--bg-alt: #0b1020;
/* Accenti */
--accent: #2a79c5;
--accent-soft: #2063a1;
--gold: #f3c969;
--purple: #c3a3ff;
/* Testi */
--text-main: #f5f7fb;
--text-muted: #acb4c8;
/* Tipografia */
--fs-body: 18px;
--fs-body-mobile: 17px;
--lh-body: 1.65;
--fs-small: 14px;
--lh-small: 1.55;
--fs-h2: clamp(28px, 2.1vw + 18px, 32px);
--fs-h3: clamp(22px, 1.4vw + 16px, 24px);
--fs-h4: 18px;
/* Radius & shadow */
--radius-lg: 18px;
--radius-md: 12px;
--shadow-soft: 0 18px 45px rgba(0,0,0,0.55);
--shadow-card: 0 14px 30px rgba(0,0,0,0.45);
/* Light system */
--paper-0: #fbf7ef;
--paper-1: #f6f0e4;
--ink: #14131a;
--ink-soft: rgba(20,19,26,.72);
--panel-radius: 22px;
--panel-pad: 28px;
--panel-shadow: 0 24px 70px rgba(0,0,0,.45);
--card-radius: 18px;
--card-pad: 20px;
--card-shadow: 0 16px 45px rgba(0,0,0,.28);
/* Altezza header */
--ads-header-h: 82px;
}
/* ------------------------------
RESET BASE
-------------------------------- */
*,
*::before,
*::after{
box-sizing: border-box;
}
html{
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
body{
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: radial-gradient(circle at top, #151b35 0, #070b1a 55%, #050816 100%);
color: var(--text-main);
line-height: var(--lh-body);
font-size: var(--fs-body);
}
@media (max-width: 560px){
body{ font-size: var(--fs-body-mobile); }
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
/* Titoli globali (h1 è gestito nella hero) */
h2{
font-size: var(--fs-h2);
line-height: 1.18;
}
h3{
font-size: var(--fs-h3);
line-height: 1.22;
}
h4{
font-size: var(--fs-h4);
line-height: 1.30;
}
/* Testi piccoli */
small,
.label,
.note,
.fineprint,
.helper-text,
.meta,
.text-small{
font-size: var(--fs-small);
line-height: var(--lh-small);
}
/* ------------------------------
HEADER
-------------------------------- */
.site-header{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 7vw;
min-height: var(--ads-header-h);
backdrop-filter: blur(18px);
background: linear-gradient(
120deg,
rgba(5,8,22,0.92),
rgba(5,8,22,0.78)
);
border-bottom: none;
}
.logo-area{
display: flex;
align-items: center;
gap: 10px;
}
.logo-mark{
width: 40px;
height: 40px;
border-radius: 999px;
background: radial-gradient(circle at 30% 20%, #fff8dc, var(--gold));
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
color: #1a1a1a;
box-shadow: 0 0 18px rgba(243,201,105,0.65);
}
.logo-text{
display: flex;
flex-direction: column;
line-height: 1.1;
}
/* Logo glam premium */
.logo-title{
font-size: 20px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
background: linear-gradient(120deg, #ffffff, #f3c969, #c3a3ff);
-webkit-background-clip: text;
color: transparent;
text-shadow: 0 0 20px rgba(0,0,0,0.7);
}
/* Payoff nascosto (non usato qui) */
.logo-sub{
display: none !important;
}
@media (max-width: 768px){
.logo-title{
font-size: 17px;
letter-spacing: 0.14em;
}
}
/* NAV */
.main-nav{
display: flex;
align-items: center;
gap: 18px;
font-size: 14px;
}
.main-nav a{
text-decoration: none;
color: var(--text-muted);
padding: 6px 0;
position: relative;
}
.main-nav a::after{
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--gold), var(--accent));
transition: width 0.18s ease-out;
}
.main-nav a:hover{
color: #fff;
}
.main-nav a:hover::after{
width: 100%;
}
.nav-cta{
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(243,201,105,0.75);
color: #fff;
background: radial-gradient(circle at top left, rgba(243,201,105,0.18), transparent);
}
/* --- SFONDO SEZIONI: LASCIA PASSARE IL VIDEO GLOBALE --- */
.section,
.section.alt,
#chi-siamo,
#cosa-ottieni,
#il-percorso,
#perche-funziona,
#workshop,
#contatti {
background: transparent !important;
}
/* nel dubbio, pulisco eventuali pseudo-elementi di sfondo */
.section.alt::before,
.section.alt::after {
background: none !important;
box-shadow: none !important;
}
/* MOBILE NAV */
.nav-toggle{
display: none;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.24);
background: rgba(5,8,22,0.82);
padding: 0;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav-toggle span{
display: block;
width: 16px;
height: 2px;
background: #fff;
border-radius: 999px;
position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
content: "";
position: absolute;
left: 0;
width: 16px;
height: 2px;
background: #fff;
border-radius: 999px;
}
.nav-toggle span::before{ top: -5px; }
.nav-toggle span::after{ top: 5px; }
/* ------------------------------
LAYOUT
-------------------------------- */
.site-main{
padding-top: 0; /* la hero parte subito sotto l'header */
}
.section{
padding: 80px 7vw;
scroll-margin-top: calc(var(--ads-header-h) + 16px);
}
.section.alt{
background: transparent;
}
.container{
max-width: 1120px;
margin: 0 auto;
}
.section-head{
text-align: center;
max-width: 680px;
margin: 0 auto 40px;
}
.section-head h2{
margin-bottom: 12px;
}
.section-head p{
color: var(--text-muted);
font-size: 1em;
}
.two-cols{
display: grid;
grid-template-columns: minmax(0,1.1fr) minmax(0,1.1fr);
gap: 36px;
align-items: center;
}
/* ------------------------------
SFONDO LIQUID
-------------------------------- */
.ads-liquid-bg{
position: fixed;
inset: 0;
z-index: -2;
overflow: hidden;
opacity: 0;
transition: opacity 1s ease-out;
}
body.loaded .ads-liquid-bg{
opacity: 1;
}
.ads-liquid-video{
width: 140%;
height: 140%;
object-fit: cover;
filter: blur(10px) saturate(1.4);
opacity: 0.25;
transform: translate3d(-10%, -8%, 0);
will-change: transform;
backface-visibility: hidden;
}
/* ------------------------------
HERO
-------------------------------- */
.hero{
position: relative;
height: 100vh;
min-height: 680px;
color: #fff;
display: flex;
align-items: flex-start; /* testo in alto */
justify-content: flex-start;
padding: 0 8vw;
padding-top: calc(var(--ads-header-h) + 40px); /* distacco dall'header */
overflow: hidden;
}
.hero-video{
position: absolute;
inset: 0;
width: 100%;
height: 105%;
object-fit: cover;
filter: saturate(1.25) contrast(1.1) brightness(1.05);
transform: scale(1.03);
transform-origin: center;
transition: transform 18s ease-out;
}
body.loaded .hero-video{
transform: scale(1.015);
}
.hero-overlay{
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 18%, rgba(5, 10, 40, 0.95) 0%, rgba(5, 10, 40, 0.78) 35%, rgba(5, 10, 40, 0.45) 55%, transparent 70%),
linear-gradient(120deg, rgba(5, 7, 20, 0.95) 0%, rgba(5, 7, 20, 0.70) 30%, rgba(5, 7, 20, 0.20) 55%, transparent 80%);
mix-blend-mode: normal;
opacity: 0.70; /* leggero: si vede di più il video */
}
.hero-content{
position: relative;
max-width: 720px;
z-index: 2;
text-shadow: 0 14px 40px rgba(0,0,0,0.7);
}
.hero-kicker{
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.24em;
color: var(--gold);
margin-bottom: 14px;
}
.hero h1{
font-size: clamp(36px, 4.4vw, 48px);
line-height: 1.05;
margin: 0 0 16px;
}
.hero-lead{
font-size: 1em;
max-width: 640px;
color: rgba(236,241,255,0.9);
margin-bottom: 24px;
}
.hero-cta-group{
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* Entrata dolce elementi hero */
.hero-content > *{
opacity: 0;
transform: translateY(18px);
animation: hero-fade-up 0.7s ease-out forwards;
}
.hero-kicker{ animation-delay: 0.08s; }
.hero h1{ animation-delay: 0.2s; }
.hero-lead{ animation-delay: 0.35s; }
.hero-cta-group{ animation-delay: 0.5s; }
@keyframes hero-fade-up{
from{
opacity: 0;
transform: translateY(18px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
/* ------------------------------
BUTTONS
-------------------------------- */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition:
transform 0.16s ease-out,
box-shadow 0.16s ease-out,
background 0.16s ease-out,
border-color 0.16s ease-out;
border: 1px solid transparent;
}
.btn.primary{
background: linear-gradient(135deg, var(--accent), var(--accent-soft));
color: #fff;
box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.btn.ghost{
background: rgba(5,8,22,0.9);
color: var(--text-main);
border-color: rgba(243,201,105,0.65);
}
.btn:hover{
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
/* ------------------------------
LIGHT SYSTEM
-------------------------------- */
.ads-panel-light{
position: relative;
background: linear-gradient(180deg, var(--paper-0), var(--paper-1));
border: 2px solid rgba(243,201,105,.40);
border-top-color: rgba(243,201,105,.75);
border-left-color: rgba(243,201,105,.75);
border-radius: var(--panel-radius);
box-shadow:
0 24px 70px rgba(0,0,0,.45),
inset 0 0 0 1px rgba(255,255,255,.50);
padding: var(--panel-pad);
overflow: hidden;
color: var(--ink);
}
.ads-panel-light::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(900px 260px at 18% 0%, rgba(243,201,105,.14), transparent 62%),
radial-gradient(700px 240px at 82% 10%, rgba(195,163,255,.10), transparent 64%);
opacity: .85;
}
.ads-panel-light > *{
position: relative;
}
.ads-panel-light p,
.ads-panel-light li{
color: var(--ink-soft);
}
.ads-card-light{
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,247,239,.92));
border: 2px solid rgba(243,201,105,.32);
border-top-color: rgba(243,201,105,.65);
border-left-color: rgba(243,201,105,.65);
border-radius: var(--card-radius);
box-shadow:
0 16px 45px rgba(0,0,0,.28),
inset 0 0 0 1px rgba(255,255,255,.55);
padding: var(--card-pad);
color: var(--ink);
}
.ads-card-light p,
.ads-card-light li{
color: var(--ink-soft);
}
.ads-card-accent{
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,242,255,.88));
border: 2px solid rgba(195,163,255,.28);
border-top-color: rgba(195,163,255,.65);
border-left-color: rgba(195,163,255,.65);
border-radius: var(--card-radius);
box-shadow:
0 16px 45px rgba(0,0,0,.28),
inset 0 0 0 1px rgba(255,255,255,.55);
padding: var(--card-pad);
color: var(--ink);
}
.ads-card-accent p,
.ads-card-accent li{
color: var(--ink-soft);
}
/* bottoni dentro pannello chiaro */
.ads-panel-light .btn.ghost{
background: rgba(255,255,255,.65);
color: var(--ink);
border-color: rgba(243,201,105,.55);
}
/* ------------------------------
VIDEO INTRO
-------------------------------- */
.section.video-intro{
position: relative;
}
.video-intro .container{
max-width: 980px;
}
.video-frame{
position: relative;
border-radius: 22px;
border: 1px solid rgba(243,201,105,0.48);
overflow: hidden;
box-shadow: 0 26px 60px rgba(0,0,0,0.75);
background: radial-gradient(circle at top left, rgba(243,201,105,0.16), rgba(5,8,22,0.98));
}
.video-frame video{
width: 100%;
display: block;
}
.video-play-overlay{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
.video-play-overlay.is-hidden{
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.play-ring{
width: 100px;
height: 100px;
border-radius: 999px;
border: 2px solid rgba(243,201,105,0.6);
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 30% 20%, rgba(243,201,105,0.24), rgba(5,8,22,0.9));
box-shadow: 0 0 28px rgba(243,201,105,0.8);
}
.play-icon{
width: 0;
height: 0;
border-left: 20px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 4px;
}
/* link storia */
#chi-siamo .story-link{
margin-top: 18px;
font-size: 14px;
text-align: center;
}
/* Bottoni "LA MIA STORIA" — blu ADS, glam metal, testo più grande ma compatto */
#chi-siamo .pill-story{
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 32px; /* un po’ più bassi, ma comodi */
min-width: 170px;
border-radius: 999px;
/* Blu ADS metal */
background:
radial-gradient(circle at 10% 0%, #3A8AE0 0%, #2A79C5 36%, #0B2A45 100%);
color: #F6F0E4;
/* tipografia */
font-size: 0.95rem; /* ~20% più grande */
line-height: 1.1; /* righe più vicine */
letter-spacing: 0.10em; /* niente effetto “L A M I A” */
text-transform: uppercase;
text-align: center;
/* effetto pillola metal */
border: 1px solid rgba(233,238,246,0.96);
box-shadow:
0 18px 40px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.85);
cursor: pointer;
}
#chi-siamo .pill-story span{
display: block;
line-height: 1.1; /* compatta le due righe LA MIA / STORIA */
}
/* hover più “glam” */
#chi-siamo .pill-story:hover{
transform: translateY(-2px);
background:
radial-gradient(circle at 10% 0%, #4A96EC 0%, #2A79C5 40%, #0B2A45 100%);
box-shadow:
0 24px 60px rgba(0,0,0,0.8),
inset 0 1px 0 rgba(255,255,255,0.95);
}
/* ------------------------------
CHI SIAMO / FOUNDERS
-------------------------------- */
#chi-siamo .two-cols{
align-items: stretch;
}
/* testo colonna sinistra */
#chi-siamo .text p{
margin-top: 0;
margin-bottom: 10px;
font-size: 1.02em;
line-height: 1.7;
}
/* griglia founder (colonna destra) */
.founders{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
}
/* card base (si appoggia a ads-card-light / ads-card-accent) */
.founder-card{
position: relative;
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: 0 22px 65px rgba(0,0,0,.35);
}
/* Avatar tondo con glow oro */
.avatar{
width: 112px;
height: 112px;
border-radius: 999px;
margin-bottom: 14px;
border: 3px solid rgba(243,201,105,0.75);
box-shadow: 0 0 34px rgba(243,201,105,.55);
background-size: cover;
background-position: 50% 22%;
background-color: rgba(0,0,0,.08);
}
/* path definitivi avatar */
.avatar-m{
background-image: url("/assets/img/founders/founder-manuel.jpg");
}
.avatar-l{
background-image: url("/assets/img/founders/founder-lara.jpg");
}
/* firme */
.founder-card .signature{
width: 150px;
opacity: 0.9;
}
/* link storia + bottone */
#chi-siamo .story-link{
margin-top: 18px;
font-size: 14px;
text-align: center;
}
/* Bottone "LA MIA STORIA" – blu ADS metal */
#chi-siamo .story-link .btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 30px;
border-radius: 999px;
/* testo più grande ma compatto */
font-size: 0.95rem; /* ~20% in più */
line-height: 1.05;
letter-spacing: 0.14em;
text-transform: uppercase;
/* pillola blu ADS glam */
color: #FDFDFD;
background:
radial-gradient(circle at 10% 0%, rgba(255,255,255,0.18), transparent 55%),
linear-gradient(135deg, #2A79C5, #0B2A45);
border: 1px solid rgba(233,238,246,0.95);
box-shadow:
0 16px 38px rgba(0,0,0,0.75),
inset 0 1px 0 rgba(255,255,255,0.80);
}
#chi-siamo .story-link .btn:hover{
background:
radial-gradient(circle at 10% 0%, rgba(255,255,255,0.24), transparent 55%),
linear-gradient(135deg, #3A8AE0, #12385E);
box-shadow:
0 22px 55px rgba(0,0,0,0.9),
inset 0 1px 0 rgba(255,255,255,0.95);
transform: translateY(-1px);
}
/* tipografia dentro le card founder */
.founder-card h3{
margin: 0 0 8px;
font-size: 22px;
color: var(--ink);
}
.founder-card p{
margin: 0 0 22px;
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
}
/* Hover movimento leggero solo desktop */
@media (hover: hover) and (pointer: fine){
#chi-siamo .founder-card{
transition: transform .18s ease-out, box-shadow .18s ease-out;
will-change: transform;
}
#chi-siamo .founder-card:hover{
transform: translateY(-6px) scale(1.012);
box-shadow: 0 32px 88px rgba(0,0,0,.42);
}
}
/* ------------------------------
GRID / CARD DARK BASE
-------------------------------- */
.grid{
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 20px;
}
.card{
padding: 18px 18px 16px;
background: radial-gradient(circle at top left, rgba(243,201,105,0.14), rgba(9,13,31,0.98));
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--shadow-card);
}
.card h3{
margin: 0 0 8px;
font-size: 18px;
}
.card p{
margin: 0;
font-size: 1em;
color: var(--text-muted);
}
/* Steps */
.steps .card{
position: relative;
padding-top: 26px;
}
.step-num{
position: absolute;
top: 10px;
left: 14px;
font-size: 18px;
font-weight: 600;
color: var(--gold);
}
/* ------------------------------
COSA OTTIENI — CARD PIÙ GRANDI/COLORATE
---------------------------
#cosa-ottieni .grid.benefits{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
#cosa-ottieni .grid.benefits .card{
position: relative;
overflow: hidden;
border-radius: 22px;
padding: 32px 28px 26px;
min-height: 190px;
border: 4px solid rgba(255,255,255,.72);
box-shadow:
0 60px 170px rgba(0,0,0,.62),
inset 0 0 0 3px rgba(255,255,255,.55);
color: #111018;
transform: translateZ(0);
transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out;
}
#cosa-ottieni .grid.benefits .card::before{
content:"";
position:absolute;
inset:-3px;
pointer-events:none;
background:
radial-gradient(1000px 340px at 14% 0%, var(--b-tint-1, rgba(243,201,105,.95)), transparent 58%),
radial-gradient(900px 360px at 92% 110%, var(--b-tint-2, rgba(195,163,255,.55)), transparent 56%),
linear-gradient(180deg, rgba(255,255,255,.97), rgba(251,247,239,.93));
opacity: 1;
}
#cosa-ottieni .grid.benefits .card::after{
content:"";
position:absolute;
left: 0;
top: 0;
bottom: 0;
width: 14px;
background: var(--b-stripe, linear-gradient(180deg, rgba(243,201,105,1), rgba(243,201,105,.42)));
box-shadow:
14px 0 34px rgba(0,0,0,.16),
0 0 28px rgba(255,255,255,.16);
opacity: 1;
}
#cosa-ottieni .grid.benefits .card > *{
position: relative;
z-index: 1;
}
#cosa-ottieni .grid.benefits .card h3{
font-size: 22px;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
#cosa-ottieni .grid.benefits .card p{
margin: 0;
font-size: 16.5px;
line-height: 1.68;
color: rgba(16,15,26,.72);
}
/* Alternanza colori */
#cosa-ottieni .grid.benefits .card:nth-child(1){
--b-tint-1: rgba(243,201,105,.98);
--b-tint-2: rgba(195,163,255,.55);
--b-stripe: linear-gradient(180deg, rgba(243,201,105,1), rgba(243,201,105,.42));
border-color: rgba(243,201,105,.92);
}
#cosa-ottieni .grid.benefits .card:nth-child(2){
--b-tint-1: rgba(195,163,255,.92);
--b-tint-2: rgba(20,152,155,.62);
--b-stripe: linear-gradient(180deg, rgba(195,163,255,1), rgba(195,163,255,.40));
border-color: rgba(195,163,255,.88);
}
#cosa-ottieni .grid.benefits .card:nth-child(3){
--b-tint-1: rgba(20,152,155,.88);
--b-tint-2: rgba(243,201,105,.46);
--b-stripe: linear-gradient(180deg, rgba(20,152,155,1), rgba(20,152,155,.38));
border-color: rgba(20,152,155,.78);
}
#cosa-ottieni .grid.benefits .card:nth-child(4){
--b-tint-1: rgba(196,93,74,.92);
--b-tint-2: rgba(243,201,105,.44);
--b-stripe: linear-gradient(180deg, rgba(196,93,74,1), rgba(196,93,74,.40));
border-color: rgba(196,93,74,.82);
}
@media (hover:hover) and (pointer:fine){
#cosa-ottieni .grid.benefits .card:hover{
transform: translateY(-10px) scale(1.016);
filter: saturate(1.24) contrast(1.05);
box-shadow:
0 75px 210px rgba(0,0,0,.68),
inset 0 0 0 3px rgba(255,255,255,.62);
}
}
/* ------------------------------
PERCORSO — CARD GRANDI + NUMERI ESTERNI
-------------------------------- */
#percorso .grid.steps{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
#percorso .card.step{
position: relative;
overflow: hidden;
border-radius: 22px;
padding: 34px 28px 26px;
min-height: 180px;
border: 6px solid rgba(255,255,255,.70);
box-shadow:
0 62px 175px rgba(0,0,0,.60),
inset 0 0 0 3px rgba(255,255,255,.52);
filter: saturate(1.18) contrast(1.03);
color: #111018;
transition: transform .18s ease-out, box-shadow .18s ease-out;
}
#percorso .card.step::before{
content:"";
position:absolute;
inset:-3px;
pointer-events:none;
background:
radial-gradient(980px 340px at 18% 0%, rgba(243,201,105,.70), transparent 58%),
radial-gradient(900px 360px at 90% 110%, rgba(195,163,255,.44), transparent 56%),
linear-gradient(180deg, rgba(255,255,255,.97), rgba(251,247,239,.92));
opacity: 1;
}
#percorso .card.step > *{
position:relative;
z-index:1;
}
/* NUMERO: grande che esce dal bordo */
#percorso .step-num{
position: absolute;
top: -26px;
left: -26px;
width: 82px;
height: 82px;
display: grid;
place-items: center;
font-size: 34px;
font-weight: 800;
color: #101018;
border-radius: 999px;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), rgba(233,238,252,.92) 45%, rgba(185,194,216,.92));
border: 6px solid rgba(243,201,105,.92);
box-shadow:
0 34px 90px rgba(0,0,0,.46),
0 0 0 3px rgba(255,255,255,.30),
inset 0 2px 12px rgba(255,255,255,.92);
}
/* testo dentro percorso */
#percorso .card.step h3{
font-size: 22px;
margin: 0 0 12px;
color: #111018;
}
#percorso .card.step p{
font-size: 16.5px;
line-height: 1.68;
color: rgba(16,15,26,.72);
}
@media (hover:hover) and (pointer:fine){
#percorso .card.step:hover{
transform: translateY(-6px) scale(1.01);
box-shadow: 0 75px 210px rgba(0,0,0,.68);
}
}
/* ------------------------------
PERCHÉ FUNZIONA
-------------------------------- */
#perche-funziona .highlight{
padding: 24px;
border-radius: var(--radius-md);
background: radial-gradient(circle at top left, rgba(243,201,105,0.14), rgba(9,13,31,0.98));
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--shadow-card);
}
#perche-funziona ul{
list-style: none;
padding: 0;
margin: 0;
}
#perche-funziona li{
margin-bottom: 10px;
padding-left: 20px;
position: relative;
color: var(--text-muted);
font-size: 1em;
}
#perche-funziona li::before{
content: "•";
position: absolute;
left: 0;
color: var(--gold);
}
/* ------------------------------
WORKSHOP
-------------------------------- */
.workshops .card{
text-align: left;
}
.workshops .card h3{
margin-bottom: 10px;
}
.workshops .card p{
margin-bottom: 14px;
}
/* Center helper */
.center{
text-align: center;
margin-top: 26px;
}
/* ------------------------------
STICKY WHATSAPP
-------------------------------- */
.sticky-whatsapp{
position: fixed;
right: 20px;
bottom: 20px;
z-index: 50;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 20px;
border-radius: 999px;
background: #25d366;
color: #000;
font-weight: 600;
text-decoration: none;
box-shadow: 0 10px 26px rgba(0,0,0,0.45);
opacity: 0;
transform: translateY(10px);
transition: opacity .18s ease-out, transform .18s ease-out;
}
.sticky-whatsapp.visible{
opacity: 1;
transform: translateY(0);
}
/* ------------------------------
CONTATTI
-------------------------------- */
.ads-contacts-duo{
padding: 80px 7vw 60px;
background: transparent;
}
.ads-contacts-inner{
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0,1.05fr) minmax(0,1.05fr);
gap: 24px;
}
.ads-contact-card{
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), rgba(5, 8, 22, 0.96));
border-radius: 18px;
padding: 20px 20px 18px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 18px 40px rgba(0,0,0,0.64);
}
.ads-contact-card h3{
margin: 0 0 12px;
}
.ads-contact-name{
font-weight: 500;
margin: 0 0 0.5rem;
}
.ads-contact-card p{
margin: 0 0 0.45rem;
font-size: 0.95em;
}
.ads-contact-card a{
text-decoration: none;
}
.ads-contact-card a:hover{
text-decoration: underline;
}
/* social */
.ads-contact-social{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-top: 14px;
}
.ads-contact-social-label{
font-size: 0.9em;
color: var(--text-muted);
margin-right: 0.25rem;
}
.ads-social-icons{
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
}
.ads-social-icon{
width: 42px;
height: 42px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(20,19,26,0.10);
color: #111;
box-shadow: 0 14px 30px rgba(0,0,0,0.20);
transition: transform .16s ease-out, box-shadow .16s ease-out, background .16s ease-out;
}
.ads-social-icon svg{
width: 18px;
height: 18px;
display: block;
}
.ads-social-icon:hover{
transform: translateY(-2px);
background: rgba(255,255,255,0.92);
box-shadow: 0 18px 38px rgba(0,0,0,0.26);
}
/* ------------------------------
FOOTER
-------------------------------- */
.site-footer{
border-top: 1px solid rgba(255,255,255,0.06);
background: #050816;
padding: 28px 7vw 18px;
font-size: 13px;
}
.footer-grid{
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 24px;
margin-bottom: 14px;
}
.site-footer h4{
margin: 0 0 8px;
font-size: 14px;
}
.site-footer p{
margin: 0 0 4px;
color: var(--text-muted);
}
.footer-bottom{
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 8px;
text-align: center;
color: var(--text-muted);
}
/* ------------------------------
REVEAL ON SCROLL
-------------------------------- */
.reveal{
opacity: 0;
transform: translate3d(0, 18px, 0);
transition:
opacity 700ms cubic-bezier(.2,.8,.2,1),
transform 700ms cubic-bezier(.2,.8,.2,1);
will-change: opacity, transform;
}
.reveal--up{
transform: translate3d(0, 22px, 0);
}
.reveal--left{
transform: translate3d(-22px, 0, 0);
}
.reveal--right{
transform: translate3d(22px, 0, 0);
}
.reveal.is-visible{
opacity: 1;
transform: translate3d(0,0,0);
}
/* accessibilità: se l’utente disattiva animazioni */
@media (prefers-reduced-motion: reduce){
#cosa-ottieni .grid.benefits .card,
#percorso .card.step{
transition: none !important;
}
}
/* ------------------------------
RESPONSIVE
-------------------------------- */
@media (max-width: 960px){
.site-header{
padding: 10px 16px;
}
.main-nav{
display: none;
position: absolute;
top: calc(var(--ads-header-h) - 12px);
right: 12px;
flex-direction: column;
align-items: flex-start;
padding: 12px 14px;
border-radius: 14px;
background: rgba(5,8,22,0.98);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 16px 45px rgba(0,0,0,0.7);
}
.main-nav a{
padding: 6px 2px;
}
.nav-toggle{
display: inline-flex;
}
.main-nav.is-open{
display: flex;
}
.hero{
padding: 0 16px;
min-height: 520px;
}
.hero h1{
font-size: clamp(28px, 8vw, 34px);
}
.section{
padding: 56px 16px;
}
.grid{
grid-template-columns: 1fr;
gap: 16px;
}
.two-cols{
grid-template-columns: minmax(0,1fr);
}
.founders{
grid-template-columns: 1fr;
}
.ads-contacts-inner{
grid-template-columns: minmax(0,1fr);
}
.sticky-whatsapp{
right: 16px;
bottom: 16px;
}
.footer-grid{
grid-template-columns: minmax(0,1fr);
}
.video-frame{
border-radius: 18px;
}
.play-ring{
width: 80px;
height: 80px;
}
}
@media (max-width: 600px){
.btn{
width: 100%;
justify-content: center;
}
.ads-contacts-duo{
padding: 56px 16px 44px;
}
#cosa-ottieni .grid.benefits .card,
#percorso .card.step{
padding: 24px 18px 18px;
border-radius: 18px;
min-height: unset;
border-width: 5px;
}
#percorso .step-num{
width: 70px;
height: 70px;
font-size: 30px;
top: -20px;
left: -20px;
border-width: 5px;
}
.avatar{
width: 96px;
height: 96px;
}
}
/* ===========================
HEADER PREMIUM (LOGO + NAV)
=========================== */
/* Logo area un filo più importante */
.logo-area{
display: flex;
align-items: center;
gap: 14px;
}
/* Badge tipo stemma cromato, senza glow giallo */
.logo-mark{
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
font-weight: 700;
font-size: 18px;
color: #111018;
background:
radial-gradient(circle at 30% 20%, #ffffff 0%, #f7f8fc 35%, #c9d0e0 75%, #9299ad 100%);
border: 1px solid rgba(255,255,255,0.85);
box-shadow:
0 14px 32px rgba(0,0,0,0.55),
inset 0 0 0 1px rgba(255,255,255,0.55);
}
/* Scritta “ALCHIMISTI DEI SOGNI” glam oro/platino */
.logo-title{
font-size: 22px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
background: linear-gradient(120deg, #ffffff, #f3d47a, #c3a3ff);
-webkit-background-clip: text;
color: transparent;
text-shadow: 0 0 18px rgba(0,0,0,0.55);
}
/* niente payoff sotto il logo */
.logo-sub{
display: none !important;
}
@media (max-width: 768px){
.logo-title{
font-size: 18px;
letter-spacing: 0.16em;
}
}
/* Nav semplice, senza righette sotto stile LV */
.main-nav a{
position: static;
padding: 6px 0;
color: var(--text-muted);
text-decoration: none;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 13px;
}
.main-nav a::after{
content: none !important; /* via la riga animata sotto */
}
.main-nav a:hover{
color: #ffffff;
}
/* ==========================================
WORKSHOP — CARD RETTANGOLARI PREMIUM
========================================== */
#workshop .grid.workshops{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
/* Card: rettangolari, larghe, effetto metallo soft */
#workshop .card.workshop{
position: relative;
overflow: hidden;
border-radius: 24px;
padding: 30px 28px 24px;
min-height: 190px;
border: 4px solid rgba(255,255,255,0.70);
box-shadow:
0 46px 120px rgba(0,0,0,0.60),
inset 0 0 0 2px rgba(255,255,255,0.42);
background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(251,247,239,0.93));
color: #111018;
transform: translateZ(0);
transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s ease-out;
}
/* Glow colore tipo MG sopra il fondo chiaro */
#workshop .card.workshop::before{
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background:
radial-gradient(900px 320px at 16% 0%, var(--ws-t1, rgba(243,201,105,.75)), transparent 60%),
radial-gradient(820px 320px at 88% 110%, var(--ws-t2, rgba(195,163,255,.35)), transparent 58%);
opacity: 1;
}
#workshop .card.workshop > *{
position: relative;
z-index: 1;
}
/* Alternanza colori: Manuel = sabbia/petrolio, Lara = porpora/mattone */
#workshop .card.workshop:nth-child(1){
--ws-t1: rgba(243,201,105,.85); /* sabbia/oro */
--ws-t2: rgba(20,152,155,.38); /* petrolio */
border-color: rgba(243,201,105,.88);
}
#workshop .card.workshop:nth-child(2){
--ws-t1: rgba(195,163,255,.80); /* porpora */
--ws-t2: rgba(196,93,74,.40); /* mattone */
border-color: rgba(195,163,255,.86);
}
/* Tipografia più leggibile */
#workshop .card.workshop h3{
margin: 0 0 12px;
font-size: 20px;
letter-spacing: .01em;
}
#workshop .card.workshop p{
margin: 0 0 18px;
font-size: 16px;
line-height: 1.7;
color: rgba(16,15,26,0.75);
}
/* Bottoni: stacco chiaro su fondo premium */
#workshop .card.workshop .btn.primary{
margin-top: 4px;
}
/* Hover “alla MG” (solo desktop) */
@media (hover: hover) and (pointer: fine){
#workshop .card.workshop:hover{
transform: translateY(-8px) scale(1.012);
box-shadow:
0 60px 170px rgba(0,0,0,0.68),
inset 0 0 0 2px rgba(255,255,255,0.55);
filter: saturate(1.06);
}
}
/* Mobile: una sotto l’altra, ma con la stessa presenza */
@media (max-width: 960px){
#workshop .grid.workshops{
grid-template-columns: 1fr;
gap: 20px;
}
#workshop .card.workshop{
padding: 24px 18px 18px;
border-radius: 20px;
}
}
/* =========================================================
HEADER — STILE LV + LOGO GLAM METAL
========================================================= */
/* barra uniforme, che si “accende” quando ci passi sopra */
.site-header{
background: rgba(5,8,22,0.96) !important;
border-bottom: none !important;
padding: 14px 7vw !important;
min-height: 80px;
box-shadow: 0 18px 40px rgba(0,0,0,0.55);
transition: background 0.18s ease-out, box-shadow 0.18s ease-out;
}
.site-header:hover{
background: rgba(12,16,30,0.98);
box-shadow: 0 24px 60px rgba(0,0,0,0.65);
}
/* logo: niente cerchio sotto, solo il png appoggiato sullo sfondo */
.logo-area--clean .logo-mark{
width: auto;
height: 40px;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
}
.logo-area--clean .logo-img{
display: block;
height: 40px;
width: auto;
filter: drop-shadow(0 0 14px rgba(0,0,0,0.65));
}
/* scritta ALCHIMISTI DEI SOGNI: effetto metallo oro/platino */
.logo-title{
font-size: 22px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
background: linear-gradient(120deg, #ffffff, #f3c969, #c3a3ff);
-webkit-background-clip: text;
color: transparent;
text-shadow: 0 0 20px rgba(0,0,0,0.7);
}
.logo-sub{
display: none !important; /* niente payoff sotto */
}
@media (max-width: 768px){
.logo-title{
font-size: 17px;
letter-spacing: 0.14em;
}
}
/* menu: testo stile “targhetta” pulita, con sottolineatura solo on hover */
.main-nav{
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.main-nav a{
color: rgba(234,236,248,0.78);
padding: 4px 0;
}
.main-nav a::after{
height: 1px;
background: linear-gradient(90deg, #f3c969, #c3a3ff);
}
.main-nav a:hover{
color: #ffffff;
text-shadow: 0 0 14px rgba(243,201,105,0.6);
}
/* CTA WORKSHOP in alto: bottone metallo 3D oro/platino */
.nav-cta{
padding: 9px 24px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 11px;
border: 1px solid rgba(243,201,105,0.8);
background:
linear-gradient(180deg, rgba(255,255,255,0.10), rgba(10,14,30,1)) padding-box,
linear-gradient(135deg, rgba(243,201,105,0.98), rgba(195,163,255,0.85)) border-box;
box-shadow:
0 18px 40px rgba(0,0,0,0.65),
0 0 0 1px rgba(255,255,255,0.22) inset;
color: #fdf7eb;
}
.nav-cta::after{ display: none; } /* niente sottolineatura sotto la pillola */
.nav-cta:hover{
transform: translateY(-2px);
box-shadow:
0 26px 70px rgba(0,0,0,0.75),
0 0 0 1px rgba(255,255,255,0.30) inset;
background:
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(10,14,30,1)) padding-box,
linear-gradient(135deg, rgba(243,201,105,1), rgba(195,163,255,0.95)) border-box;
}
/* =========================================================
WORKSHOP — CARD RETTANGOLARI + TESTO PIÙ FORTE
========================================================= */
#workshop .grid.workshops{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
align-items: stretch;
}
/* card più larghe, una di fianco all’altra, stile “targhetta” */
#workshop .card.workshop{
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 210px;
padding: 26px 24px 20px;
border-radius: 24px;
color: #14131a;
}
#workshop .card.workshop h3{
margin: 0 0 12px;
font-size: 22px;
}
#workshop .card.workshop p{
margin: 0 0 18px;
flex: 1 1 auto;
font-size: 16px;
line-height: 1.65;
color: rgba(20,19,26,0.72);
}
#workshop .card.workshop .btn{
align-self: flex-start;
}
/* mobile: una sopra l’altra ma sempre rettangolari */
@media (max-width: 960px){
#workshop .grid.workshops{
grid-template-columns: 1fr;
gap: 18px;
}
#workshop .card.workshop{
min-height: 0;
padding: 22px 18px 18px;
border-radius: 20px;
}
}
/* =========================================================
PATCH — EFFETTO METALLO (LOGO + MENU + BOTTONI)
========================================================= */
/* palette metallo */
:root{
--metal-light: #f7f8fb;
--metal-mid: #c4c9d5;
--metal-dark: #8790a3;
}
/* 1) LOGO: niente cerchio sotto, solo il simbolo appoggiato sullo sfondo */
.logo-mark{
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* se hai un ![]()
dentro .logo-mark */
.logo-mark img{
display: block;
height: 40px;
width: auto;
filter: drop-shadow(0 0 14px rgba(0,0,0,0.70));
}
/* 2) SCRITTA “ALCHIMISTI DEI SOGNI” — nichel spazzolato */
.logo-title{
font-size: 24px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
/* doppio gradient per effetto metallo spazzolato */
background-image:
linear-gradient(90deg, var(--metal-light), var(--metal-mid), var(--metal-light)),
repeating-linear-gradient(
-45deg,
rgba(255,255,255,0.32) 0px,
rgba(255,255,255,0.32) 1px,
rgba(150,154,170,0.32) 1px,
rgba(150,154,170,0.32) 3px
);
background-size: 100% 100%, 200% 200%;
background-position: 0 0, 0 0;
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 #ffffff,
0 3px 6px rgba(0,0,0,0.75);
}
/* niente payoff sotto il logo */
.logo-sub{
display: none !important;
}
/* piccolo “shine” quando passi sull’header */
.site-header:hover .logo-title{
animation: ads-metal-shine 1.2s linear both;
}
@keyframes ads-metal-shine{
from{ background-position: 0 0, -100% 0; }
to{ background-position: 0 0, 100% 0; }
}
/* 3) HEADER BAR: fascia uniforme che si schiarisce appena in hover */
.site-header{
background: rgba(5,8,22,0.95) !important;
border-bottom: none !important;
padding: 14px 7vw !important;
min-height: 80px;
box-shadow: 0 18px 40px rgba(0,0,0,0.55);
transition: background 0.18s ease-out, box-shadow 0.18s ease-out;
}
.site-header:hover{
background: rgba(10,14,30,0.98);
box-shadow: 0 24px 60px rgba(0,0,0,0.70);
}
/* 4) MENU — testo metallico, pulito, SENZA riga sotto */
.main-nav{
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.main-nav a{
position: relative;
padding: 4px 0;
text-decoration: none;
background-image: linear-gradient(
90deg,
var(--metal-light),
var(--metal-mid),
var(--metal-light)
);
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,0.9),
0 0 10px rgba(0,0,0,0.5);
transition: background-image 0.18s ease-out, text-shadow 0.18s ease-out;
}
/* elimina totalmente la vecchia sottolineatura */
.main-nav a::after{
display: none !important;
content: none !important;
}
/* hover: un filo più “blu” come luce sul metallo */
.main-nav a:hover{
background-image: linear-gradient(
90deg,
#ffffff,
#b7c8ff,
#ffffff
);
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 16px rgba(90,140,255,0.9);
}
/* 5) CTA IN ALTO (WORKSHOP) — pill metallica 3D */
.nav-cta{
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
padding: 10px 26px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.60);
background: linear-gradient(
180deg,
rgba(255,255,255,0.45),
rgba(76,86,110,0.95)
);
box-shadow:
0 16px 36px rgba(0,0,0,0.70),
inset 0 1px 0 rgba(255,255,255,0.75),
inset 0 -2px 3px rgba(0,0,0,0.65);
color: #f5f7fb;
}
/* niente underline per la CTA */
.nav-cta::after{ display: none !important; }
.nav-cta:hover{
transform: translateY(-2px);
background: linear-gradient(
180deg,
rgba(255,255,255,0.70),
rgba(92,118,176,0.98)
);
box-shadow:
0 24px 60px rgba(0,0,0,0.80),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -2px 4px rgba(0,0,0,0.70);
}
/* 6) BOTTONI PRINCIPALI (es. hero) — look metallo, non plastica */
.btn.primary{
border: 1px solid rgba(255,255,255,0.70);
background: linear-gradient(
180deg,
#fefefe,
#c7cbd7,
#8a92a5
);
color: #111018;
box-shadow:
0 16px 40px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -2px 3px rgba(0,0,0,0.55);
}
.btn.primary:hover{
transform: translateY(-2px);
background: linear-gradient(
180deg,
#ffffff,
#d4d8e3,
#949cb0
);
box-shadow:
0 24px 70px rgba(0,0,0,0.75),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -2px 4px rgba(0,0,0,0.6);
}
/* ghost rimane scuro ma con bordi metal */
.btn.ghost{
border: 1px solid rgba(255,255,255,0.55);
background: rgba(5,8,22,0.92);
color: #f5f7fb;
box-shadow: 0 14px 30px rgba(0,0,0,0.65);
}
.btn.ghost:hover{
transform: translateY(-2px);
background: rgba(15,20,40,0.98);
box-shadow: 0 22px 55px rgba(0,0,0,0.75);
}
/* =========================================================
PATCH v2 — LOGO PULITO + TESTI METAL / PIÙ GRANDI
========================================================= */
/* 0) Logo link: nessuna sottolineatura, mai */
.logo-area,
.logo-area:link,
.logo-area:visited,
.logo-area:hover,
.logo-area:active{
text-decoration: none !important;
}
/* 1) Logo: togli QUALSIASI quadrato/cornice CSS */
.logo-area,
.logo-mark{
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* se c'è un ![]()
del logo, niente bordini strani */
.logo-area img{
display: block;
background: transparent !important;
border: none !important;
box-shadow: 0 0 14px rgba(0,0,0,0.65); /* solo un filo di glow */
}
/* 2) Scritta “ALCHIMISTI DEI SOGNI” — come i bottoni, ma testo */
.logo-title{
font-size: 26px; /* più grande */
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
/* stesso “metallo soft” dei pulsanti/menu */
background-image: linear-gradient(
90deg,
#ffffff,
#d5dae7,
#ffffff
);
background-size: 100% 100%;
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,0.95),
0 0 16px rgba(0,0,0,0.75);
}
/* 3) Menu (CHI SIAMO, COSA OTTIENI…) più grandi e in risalto */
.main-nav{
font-size: 12px; /* prima più piccolo */
gap: 24px;
}
.main-nav a{
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.20em;
background-image: linear-gradient(
90deg,
#ffffff,
#d5dae7,
#ffffff
);
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,0.9),
0 0 12px rgba(0,0,0,0.65);
transition: background-image 0.18s ease-out,
text-shadow 0.18s ease-out;
}
/* hover: un filo di luce blu sul metallo */
.main-nav a:hover{
background-image: linear-gradient(
90deg,
#ffffff,
#b7c8ff,
#ffffff
);
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 18px rgba(90,140,255,0.95);
}
/* =========================================================
HEADER — METALLO + SFONDO BLU SOLO ON-HOVER
========================================================= */
/* Header trasparente di base: si vede il video dietro */
.site-header{
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
position: fixed; /* ribadisco per sicurezza */
inset: 0 auto auto 0;
}
/* Layer sotto le scritte che diventa blu SOLO in hover */
.site-header::before{
content: "";
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
transition:
background 200ms ease-out,
box-shadow 200ms ease-out,
backdrop-filter 200ms ease-out;
z-index: -1; /* sta sotto a logo + menu */
}
/* Quando passi con il mouse sull’header → fascia blu “luxury” */
.site-header:hover::before{
background: rgba(5, 8, 22, 0.92);
box-shadow: 0 20px 45px rgba(0,0,0,0.65);
backdrop-filter: blur(18px);
}
/* ---------------------------------------------------------
TESTO HEADER PIÙ “SPINTO” (metallo + glow)
--------------------------------------------------------- */
/* Logo ALCHIMISTI DEI SOGNI: metallo oro/platino più forte */
.logo-title{
font-size: 26px;
font-weight: 800;
letter-spacing: 0.26em;
text-transform: uppercase;
background-image: linear-gradient(
90deg,
#ffffff,
#f3c969,
#e4e8f5,
#ffffff
);
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 18px rgba(0,0,0,0.9),
0 0 32px rgba(0,0,0,0.75);
}
/* Menu: CHI SIAMO / COSA OTTIENI / ... in metallo più leggibile */
.main-nav{
gap: 24px;
font-size: 12px;
}
.main-nav a{
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.20em;
background-image: linear-gradient(
90deg,
#ffffff,
#dfe4f4,
#ffffff
);
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 14px rgba(0,0,0,0.85);
transition:
background-image 160ms ease-out,
text-shadow 160ms ease-out;
}
/* Hover: un filo di blu, come “metallo illuminato” */
.main-nav a:hover{
background-image: linear-gradient(
90deg,
#ffffff,
#b7c8ff,
#ffffff
);
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 22px rgba(90,140,255,1);
}
/* =========================================================
PATCH FINALE HEADER — TRASPARENTE + METALLO
========================================================= */
/* Header di base: trasparente, fisso sopra il video */
.site-header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 7vw;
min-height: var(--ads-header-h);
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
/* Layer sotto le scritte: si colora SOLO in hover */
.site-header::before{
content: "";
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
z-index: -1;
transition:
background 200ms ease-out,
box-shadow 200ms ease-out,
backdrop-filter 200ms ease-out;
}
.site-header:hover::before{
background: rgba(5, 8, 22, 0.92);
box-shadow: 0 20px 45px rgba(0,0,0,0.65);
backdrop-filter: blur(18px);
}
/* ---------------------------------
LOGO PULITO (niente quadrati)
--------------------------------- */
.logo-area,
.logo-area:link,
.logo-area:visited,
.logo-area:hover,
.logo-area:active{
display: flex;
align-items: center;
gap: 14px;
text-decoration: none !important;
}
.logo-mark{
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* se il simbolo è un ![]()
*/
.logo-area img,
.logo-mark img{
display: block;
height: 40px;
width: auto;
background: transparent !important;
border: none !important;
box-shadow: 0 0 14px rgba(0,0,0,0.70); /* solo un filo di glow */
}
/* Scritta ALCHIMISTI DEI SOGNI — metallo oro/platino ben leggibile */
.logo-title{
font-size: 26px;
font-weight: 800;
letter-spacing: 0.26em;
text-transform: uppercase;
background-image: linear-gradient(
90deg,
#ffffff,
#f3c969,
#e3e7f5,
#ffffff
);
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 18px rgba(0,0,0,0.9),
0 0 32px rgba(0,0,0,0.75);
}
.logo-sub{
display: none !important;
}
@media (max-width: 768px){
.logo-title{
font-size: 18px;
letter-spacing: 0.18em;
}
}
/* ---------------------------------
MENU METAL (testo più in risalto)
--------------------------------- */
.main-nav{
display: flex;
align-items: center;
gap: 24px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.20em;
}
.main-nav a{
position: relative;
padding: 4px 0;
text-decoration: none !important;
background-image: linear-gradient(
90deg,
#ffffff,
#dfe4f4,
#ffffff
);
-webkit-background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 14px rgba(0,0,0,0.85);
transition:
background-image 160ms ease-out,
text-shadow 160ms ease-out;
}
/* elimina eventuali righe sotto */
.main-nav a::after{
content: none !important;
display: none !important;
}
/* Hover: luce blu sul metallo (stile luxury) */
.main-nav a:hover{
background-image: linear-gradient(
90deg,
#ffffff,
#b7c8ff,
#ffffff
);
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 22px rgba(90,140,255,1);
}
/* CTA WORKSHOP in alto: pill metallica coerente */
.nav-cta{
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
padding: 10px 26px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.60);
background: linear-gradient(
180deg,
#ffffff,
#c7cbd7,
#8a92a5
);
box-shadow:
0 16px 36px rgba(0,0,0,0.70),
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -2px 3px rgba(0,0,0,0.55);
color: #111018;
}
.nav-cta::after{ display: none !important; }
.nav-cta:hover{
transform: translateY(-2px);
background: linear-gradient(
180deg,
#ffffff,
#d4d8e3,
#949cb0
);
box-shadow:
0 24px 60px rgba(0,0,0,0.80),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -2px 4px rgba(0,0,0,0.70);
}
/* Mobile: tieni menu nascosto finché non apri il toggle */
@media (max-width: 960px){
.main-nav{
font-size: 11px;
gap: 14px;
}
}
/* === FIX MENU DOPPIO SOTTO L'HEADER === */
/* Nasconde la copia del menu che è fuori dall'header */
body > nav#main-nav,
body > button.nav-toggle {
display: none;
}
/* === HEADER TIPO LOUIS VUITTON: VIDEO SEMPRE VISIBILE, BARRA BLU SOLO ON HOVER === */
.site-header {
background: transparent; /* niente banda blu fissa */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
}
/* Pellicola blu che compare SOLO quando passi sul header */
.site-header::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 0% 0%, rgba(243,201,105,0.08), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(141,191,255,0.18), transparent 55%),
linear-gradient(120deg, rgba(5,8,22,0.92), rgba(5,8,22,0.78));
opacity: 0;
transition: opacity 0.25s ease-out;
z-index: -1;
pointer-events: none;
}
/* Quando passi con il mouse sulla barra, si accende lo sfondo */
.site-header:hover::before {
opacity: 1;
}
/* Mettiamo il contenuto sopra alla pellicola blu */
.site-header > * {
position: relative;
z-index: 1;
}
/* === LOGO E TESTI HEADER EFFETTO METALLO CHIARO === */
/* Titolo "ALCHIMISTI DEI SOGNI" in metallo oro/platino chiaro */
.logo-title {
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
background: linear-gradient(
120deg,
#fdfbff 0%,
#f7e9b8 26%,
#dfe9ff 55%,
#f3d792 85%,
#ffffff 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 0 10px rgba(0, 0, 0, 0.7),
0 0 18px rgba(0, 0, 0, 0.55);
}
/* Voci di menu più grandi e luminose */
.site-header .main-nav {
font-size: 15px;
}
.site-header .main-nav a {
color: #fdfbff;
font-weight: 500;
text-shadow: 0 0 9px rgba(0, 0, 0, 0.7);
}
/* Sottolineatura dorata più visibile all'hover */
.site-header .main-nav a::after {
background: linear-gradient(
90deg,
rgba(243,201,105,0.9),
rgba(255,255,255,0.9)
);
}
/* Pulsante "WORKSHOP" tipo targhetta metallica */
.nav-cta {
font-weight: 500;
border: 1px solid rgba(243,201,105,0.85);
box-shadow:
0 0 14px rgba(0, 0, 0, 0.7),
0 0 22px rgba(243,201,105,0.55);
}
/* =====================================================
HEADER BIGGER (+50%) — LOGO + MENU
===================================================== */
/* Logo icona più grande */
.logo-mark {
width: 54px;
height: 54px;
}
/* Titolo "ALCHIMISTI DEI SOGNI" più grande */
@media (min-width: 961px) {
.logo-title {
font-size: 27px; /* prima ~18 → +50% */
}
/* Menu più grande e distanziato */
.site-header .main-nav {
font-size: 17px; /* prima 11–12 / 14 → più presente */
gap: 26px;
}
/* Targhetta WORKSHOP un filo più corposa */
.nav-cta {
padding: 10px 24px;
font-size: 15px;
}
}
/* Mobile: solo un piccolo aumento, senza spaccare il layout */
@media (max-width: 960px) {
.logo-mark {
width: 46px;
height: 46px;
}
.logo-title {
font-size: 19px;
}
.site-header .main-nav {
font-size: 15px;
}
}
/* =========================================================
ADS — PALETTE UFFICIALE BLUE METAL PLATINUM MOTION
(PATCH COLORE FINALE)
========================================================= */
/* --- PALETTE BASE --- */
:root{
/* Palette ufficiale */
--ads-navy: #050816; /* Midnight Navy */
--ads-ocean: #0B2A45; /* Deep Ocean */
--ads-steel: #2A79C5; /* Steel Blue (CTA) */
--ads-plat: #E9EEF6; /* Platinum */
--ads-ivory: #F6F0E4; /* Warm Ivory */
/* Rimappo i token già usati nel CSS */
--bg-dark: var(--ads-navy);
--bg-alt: var(--ads-ocean);
--accent: var(--ads-steel);
--accent-soft: #1f5f93;
--paper-0: #ffffff;
--paper-1: var(--ads-ivory);
--text-main: #E9EEF6;
--text-muted: #B4BED8;
}
/* Sfondo globale: navy/ocean (70%) */
body{
background:
radial-gradient(circle at top,
var(--ads-ocean) 0,
var(--ads-navy) 55%,
#02030a 100%
);
color: var(--text-main);
}
/* ------------------------------
HERO / OVERLAY
------------------------------ */
.hero-video{
filter: saturate(1.15) contrast(1.05) brightness(1.03);
}
/* Overlay lato testo: navy/ocean, niente giallo */
.hero-overlay{
background:
radial-gradient(circle at 10% 18%,
rgba(5, 11, 40, 0.98) 0%,
rgba(5, 11, 40, 0.84) 36%,
rgba(5, 11, 40, 0.48) 58%,
transparent 72%
),
linear-gradient(120deg,
rgba(5, 8, 22, 0.98) 0%,
rgba(11, 42, 69, 0.78) 34%,
rgba(11, 42, 69, 0.32) 56%,
transparent 86%
);
opacity: .78;
}
/* ------------------------------
HEADER METAL + PALETTE
------------------------------ */
/* Header trasparente di base, fascia blu solo in hover (LV style) */
.site-header{
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
/* pellicola blu che appare solo quando sei sopra con il mouse */
.site-header::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg,
rgba(5, 8, 22, 0.96),
rgba(11, 42, 69, 0.90)
);
opacity: 0;
transition: opacity .22s ease-out;
z-index:-1;
pointer-events:none;
}
.site-header:hover::before{
opacity: 1;
}
/* logo pulito (niente quadrato) + testo metallo platino */
.logo-area,
.logo-area:link,
.logo-area:visited,
.logo-area:hover,
.logo-area:active{
text-decoration:none !important;
background:transparent !important;
}
.logo-mark{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
}
.logo-mark img{
display:block;
height:54px;
width:auto;
background:transparent !important;
border:none !important;
box-shadow:0 0 14px rgba(0,0,0,.7);
}
/* Titolo metallo oro/platino ma entro palette (Platinum + Ivory) */
.logo-title{
font-size: 27px;
font-weight: 800;
letter-spacing: 0.26em;
text-transform: uppercase;
background-image: linear-gradient(
120deg,
#ffffff,
var(--ads-plat),
var(--ads-ivory),
var(--ads-plat),
#ffffff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 18px rgba(0,0,0,0.9),
0 0 32px rgba(0,0,0,0.75);
}
.logo-sub{ display:none !important; }
/* Menu metallo chiaro */
.site-header .main-nav{
font-size: 17px;
gap: 26px;
text-transform: uppercase;
letter-spacing: .20em;
}
.site-header .main-nav a{
text-decoration:none !important;
background-image: linear-gradient(
90deg,
#ffffff,
#dfe4f4,
#ffffff
);
-webkit-background-clip:text;
color:transparent;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 14px rgba(0,0,0,0.85);
position:relative;
}
.site-header .main-nav a::after{
content:none !important;
}
.site-header .main-nav a:hover{
background-image: linear-gradient(
90deg,
#ffffff,
#b7c8ff,
#ffffff
);
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 22px rgba(90,140,255,1);
}
/* CTA “WORKSHOP” in Steel Blue (CTA = 10%) */
.nav-cta{
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.18em;
padding: 10px 24px;
border-radius: 999px;
border: 1px solid rgba(233,238,246,0.9);
background: linear-gradient(
135deg,
var(--ads-steel),
#1f5f93
);
color:#ffffff;
box-shadow:
0 18px 40px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.55);
}
.nav-cta::after{ display:none !important; }
.nav-cta:hover{
transform:translateY(-2px);
background:linear-gradient(
135deg,
#3a8ae0,
var(--ads-steel)
);
box-shadow:
0 24px 60px rgba(0,0,0,0.8),
inset 0 1px 0 rgba(255,255,255,0.7);
}
/* ------------------------------
BUTTONS (Steel Blue & Ghost Navy)
------------------------------ */
.btn{
border-radius:999px;
}
.btn.primary{
border: none;
background: linear-gradient(
135deg,
var(--ads-steel),
var(--accent-soft)
);
color:#ffffff;
box-shadow:0 18px 40px rgba(0,0,0,0.6);
}
.btn.primary:hover{
transform:translateY(-2px);
background:linear-gradient(
135deg,
#3a8ae0,
var(--ads-steel)
);
box-shadow:0 24px 70px rgba(0,0,0,0.75);
}
.btn.ghost{
border:1px solid rgba(233,238,246,0.5);
background:rgba(5,8,22,0.92);
color:#f5f7fb;
box-shadow:0 14px 30px rgba(0,0,0,0.65);
}
.btn.ghost:hover{
transform:translateY(-2px);
background:rgba(10,14,32,0.98);
box-shadow:0 22px 55px rgba(0,0,0,0.75);
}
/* ------------------------------
LIGHT SYSTEM (PANNELLI IVORY)
------------------------------ */
/* Pannello grande chiaro */
.ads-panel-light{
background: linear-gradient(180deg, var(--ads-ivory), #ffffff);
border-radius: var(--panel-radius);
border: 2px solid var(--ads-plat);
box-shadow: var(--panel-shadow);
color: var(--ink);
}
.ads-panel-light::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(800px 260px at 18% 0%, rgba(42,121,197,0.12), transparent 62%),
radial-gradient(700px 240px at 82% 10%, rgba(5,8,22,0.06), transparent 64%);
opacity:.9;
}
/* Card chiare */
.ads-card-light{
background: linear-gradient(180deg,#ffffff,var(--ads-ivory));
border: 2px solid rgba(233,238,246,0.9);
}
/* Card accent: Ivory + Steel leggero (10–18%) */
.ads-card-accent{
background: linear-gradient(
180deg,
rgba(246,240,228,0.96),
rgba(233,238,246,0.96)
);
border: 2px solid rgba(233,238,246,0.95);
}
/* ------------------------------
GRID DARK BASE / HIGHLIGHT
------------------------------ */
.grid .card{
background: radial-gradient(circle at top left,
rgba(233,238,246,0.08),
rgba(5,8,22,0.98)
);
border: 1px solid rgba(233,238,246,0.18);
}
/* ------------------------------
COSA OTTIENI — CARD GRANDI
------------------------------ */
#cosa-ottieni .grid.benefits .card{
border-radius: 22px;
padding: 32px 28px 26px;
min-height: 190px;
border: 3px solid rgba(233,238,246,0.95);
box-shadow:
0 60px 170px rgba(0,0,0,0.6),
inset 0 0 0 2px rgba(255,255,255,0.45);
color:#111018;
}
/* Fondo card: pannello Ivory + glow Steel leggero */
#cosa-ottieni .grid.benefits .card::before{
content:"";
position:absolute;
inset:-3px;
pointer-events:none;
background:
radial-gradient(900px 340px at 16% 0%, rgba(246,240,228,0.80), transparent 60%),
radial-gradient(900px 360px at 92% 110%, rgba(42,121,197,0.35), transparent 58%),
linear-gradient(180deg,#ffffff,var(--ads-ivory));
opacity:1;
}
/* Stripe laterale in Steel Blue (10%) */
#cosa-ottieni .grid.benefits .card::after{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:10px;
background:linear-gradient(180deg,
rgba(42,121,197,0.85),
rgba(42,121,197,0.25)
);
box-shadow:
10px 0 30px rgba(0,0,0,0.25),
0 0 24px rgba(255,255,255,0.16);
}
/* Testo dentro */
#cosa-ottieni .grid.benefits .card h3{
font-size:22px;
}
#cosa-ottieni .grid.benefits .card p{
font-size:16.5px;
line-height:1.68;
color:rgba(16,15,26,0.72);
}
/* Hover */
@media (hover:hover) and (pointer:fine){
#cosa-ottieni .grid.benefits .card:hover{
transform:translateY(-10px) scale(1.016);
filter:saturate(1.08) contrast(1.04);
box-shadow:
0 75px 210px rgba(0,0,0,0.7),
inset 0 0 0 2px rgba(255,255,255,0.6);
}
}
/* ------------------------------
PERCORSO — CARD GRANDI + NUMERI
------------------------------ */
#percorso .card.step{
border-radius:22px;
padding:34px 28px 26px;
min-height:180px;
border:4px solid rgba(233,238,246,0.95);
box-shadow:
0 62px 175px rgba(0,0,0,0.6),
inset 0 0 0 2px rgba(255,255,255,0.45);
background: linear-gradient(
180deg,
rgba(246,240,228,0.96),
rgba(233,238,246,0.96)
);
}
/* Numero che esce, bordo Platinum + hint Steel */
#percorso .step-num{
background:
radial-gradient(circle at 30% 20%, #ffffff, var(--ads-plat));
border:4px solid rgba(233,238,246,0.98);
color:#050816;
}
/* ------------------------------
WORKSHOP — CARD RETTANGOLARI
------------------------------ */
#workshop .grid.workshops{
grid-template-columns: repeat(2,minmax(0,1fr));
gap:28px;
}
#workshop .card.workshop{
border-radius:24px;
padding:26px 24px 20px;
min-height:210px;
border:3px solid rgba(233,238,246,0.95);
box-shadow:
0 46px 120px rgba(0,0,0,0.6),
inset 0 0 0 2px rgba(255,255,255,0.45);
background: linear-gradient(
180deg,
rgba(246,240,228,0.96),
rgba(233,238,246,0.96)
);
color:#14131a;
}
/* Glow leggero alternato Steel / Ocean */
#workshop .card.workshop::before{
content:"";
position:absolute;
inset:-3px;
pointer-events:none;
background:
radial-gradient(900px 320px at 16% 0%, rgba(42,121,197,0.22), transparent 60%),
radial-gradient(820px 320px at 88% 110%, rgba(11,42,69,0.24), transparent 58%);
opacity:1;
}
#workshop .card.workshop:nth-child(2)::before{
background:
radial-gradient(900px 320px at 16% 0%, rgba(11,42,69,0.24), transparent 60%),
radial-gradient(820px 320px at 88% 110%, rgba(42,121,197,0.22), transparent 58%);
}
#workshop .card.workshop h3{
font-size:22px;
}
#workshop .card.workshop p{
font-size:16px;
line-height:1.65;
color:rgba(20,19,26,0.72);
}
#workshop .card.workshop .btn{
align-self:flex-start;
}
@media (hover:hover) and (pointer:fine){
#workshop .card.workshop:hover{
transform:translateY(-8px) scale(1.012);
box-shadow:
0 60px 170px rgba(0,0,0,0.7),
inset 0 0 0 2px rgba(255,255,255,0.55);
}
}
/* ------------------------------
PERCHÉ FUNZIONA — BOX
------------------------------ */
#perche-funziona .highlight{
background: radial-gradient(circle at top left,
rgba(233,238,246,0.10),
rgba(5,8,22,0.98)
);
border:1px solid rgba(233,238,246,0.18);
}
/* ------------------------------
RESPONSIVE ADATTATO (+ palette)
------------------------------ */
@media (max-width:960px){
.logo-mark img{
height:46px;
}
.logo-title{
font-size:19px;
letter-spacing:0.18em;
}
.site-header .main-nav{
font-size:15px;
}
}
/* ==========================================
ADS BLUE METAL – PALETTE OVERRIDE
(incolla da qui in GIÙ in fondo al file)
========================================== */
:root {
/* Palette ufficiale */
--ads-navy: #050816; /* Midnight Navy */
--ads-ocean: #0B2A45; /* Deep Ocean */
--ads-steel: #2A79C5; /* Steel Blue */
--ads-platinum: #E9EEF6; /* Platinum */
--ads-ivory: #F6F0E4; /* Warm Ivory */
/* Mappatura sui vecchi token */
--bg-dark: var(--ads-navy);
--bg-darker: #02030b;
--bg-alt: radial-gradient(circle at 18% 0%, rgba(42,121,197,.18), transparent 54%),
radial-gradient(circle at 82% 0%, rgba(111,193,255,.14), transparent 54%),
linear-gradient(180deg, #050816, #050816);
--paper-1: var(--ads-ivory);
--paper-2: #EFE5D5;
--accent-cta: var(--ads-steel);
--accent-soft: rgba(233,238,246,.8);
}
/* BOTTONI HERO – versione seria, alto contrasto */
.hero-actions .btn.primary {
/* PARTECIPA – pillola chiara metallica */
background: linear-gradient(135deg, #F6F0E4, #E9EEF6);
color: #050816;
border-radius: 999px;
border: 1px solid rgba(233,238,246,.95);
box-shadow:
0 18px 40px rgba(0,0,0,.65),
0 0 0 1px rgba(255,255,255,.06);
text-shadow: none;
}
.hero-actions .btn.primary:hover {
background: linear-gradient(135deg, #FFFFFF, #F6F0E4);
box-shadow:
0 22px 55px rgba(0,0,0,.78),
0 0 0 1px rgba(255,255,255,.14);
transform: translateY(-1px);
}
/* SCRIVICI SU WHATSAPP – pillola scura blu */
.hero-actions .btn.ghost {
background: radial-gradient(circle at 10% 0%, rgba(42,121,197,.85), transparent 55%),
radial-gradient(circle at 90% 120%, rgba(11,42,69,.95), rgba(5,8,22,1));
color: #FDFDFD;
border-radius: 999px;
border: 1px solid rgba(233,238,246,.4);
box-shadow:
0 20px 60px rgba(0,0,0,.85),
0 0 0 1px rgba(5,8,22,.9);
text-shadow: 0 0 18px rgba(0,0,0,.76);
}
.hero-actions .btn.ghost:hover {
box-shadow:
0 26px 75px rgba(0,0,0,.95),
0 0 0 1px rgba(42,121,197,.8);
transform: translateY(-1px);
}
/* CARD BASE – look coerente e pulito */
.card {
position: relative;
border-radius: 22px;
padding: 26px 26px 22px;
background:
radial-gradient(160% 200% at 0% 0%, rgba(42,121,197,.28), transparent 58%),
linear-gradient(150deg, rgba(11,42,69,.96), rgba(5,8,22,.98));
border: 1px solid rgba(233,238,246,.45);
box-shadow: 0 30px 80px rgba(0,0,0,.8);
color: #FDFDFD;
}
/* Variante chiara per lettura (già usata in Chi Siamo, ecc.) */
.card.light,
.ads-card-light {
background: linear-gradient(145deg, #F6F0E4, #E9EEF6);
color: #050816;
border-radius: 22px;
border: 1px solid rgba(233,238,246,.95);
box-shadow: 0 22px 60px rgba(0,0,0,.25);
}
/* Nessun colore “teal/lilla/giallo” sulle card di default */
.ads-card-accent {
background:
radial-gradient(190% 260% at 0% 0%, rgba(42,121,197,.20), transparent 60%),
linear-gradient(150deg, #050816, #0B2A45);
color: #FDFDFD;
border: 1px solid rgba(233,238,246,.60);
}
/* COSA OTTIENI – card sobrie, nessun colore alternato */
#cosa-ottieni .grid.benefits .card {
background: linear-gradient(145deg, #F6F0E4, #E9EEF6);
color: #050816;
border-radius: 22px;
border: 1px solid rgba(233,238,246,.95);
box-shadow: 0 26px 70px rgba(0,0,0,.25);
padding: 24px 24px 20px;
}
/* “Colonna” verticale lato sinistro in stile platinum/steel */
#cosa-ottieni .grid.benefits .card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(42,121,197,.72), rgba(233,238,246,0) 36%);
mix-blend-mode: multiply;
opacity: .9;
}
/* Titoli ben in evidenza */
#cosa-ottieni .grid.benefits .card h3 {
font-size: 1.05rem;
letter-spacing: .02em;
text-transform: none;
color: #050816;
}
/* PERCORSO – step uniformi, palette blu metal */
#percorso .grid.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
#percorso .card.step {
position: relative;
overflow: hidden;
border-radius: 22px;
padding: 34px 28px 26px;
min-height: 180px;
border: 1px solid rgba(233,238,246,.70);
box-shadow: 0 60px 160px rgba(0,0,0,.85);
filter: none; /* via filtri saturazione vecchi */
background:
radial-gradient(200% 260% at 0% 0%, rgba(42,121,197,.35), transparent 60%),
linear-gradient(145deg, #050816, #0B2A45);
color: #FDFDFD;
}
/* Glow interno più soft */
#percorso .card.step::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(220% 280% at 0% 0%, rgba(233,238,246,.08), transparent 60%),
radial-gradient(200% 260% at 110% 110%, rgba(42,121,197,.22), transparent 60%);
opacity: 1;
}
/* Numero grande che esce dal bordo */
#percorso .card.step .step-number {
font-size: 3.2rem;
font-weight: 700;
color: rgba(233,238,246,.16);
position: absolute;
top: -10px;
right: 16px;
}
/* Testo step super leggibile */
#percorso .card.step h3 {
font-size: 1.05rem;
letter-spacing: .03em;
text-transform: uppercase;
margin-bottom: 8px;
}
#percorso .card.step p {
font-size: .95rem;
line-height: 1.5;
}
/* SEZIONI STANDARD */
.section {
background: #050816;
color: #FDFDFD;
}
.section.alt {
background: radial-gradient(circle at 18% 0%, rgba(42,121,197,.18), transparent 55%),
linear-gradient(180deg, #050816, #050816);
}
/* Pannelli chiari di lettura (Chi siamo, ecc.) */
.section-panel,
.section .panel {
background: linear-gradient(145deg, #F6F0E4, #E9EEF6);
color: #050816;
box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
/* ===========================
HOTFIX HEADER + HERO 13/12
=========================== */
/* 1. Logo wordmark: metallizzato chiaro + 10% più piccolo */
.logo-title{
/* circa 10% più piccolo */
font-size: clamp(18px, 1.9vw, 21px);
letter-spacing: 0.34em;
/* metallo chiaro/oro soft */
background: linear-gradient(
120deg,
#ffffff 0%,
#f7f2e7 18%,
#f1ddae 36%,
#f5c975 52%,
#f1ddae 70%,
#f7f2e7 88%,
#ffffff 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* ombra scura (non più bianca) */
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.75);
-webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.7);
}
/* 3. Togli la freccia ">" vicino al logo */
.logo-arrow{
display: none !important;
}
/* 2. Hero CTA: Partecipa = grigio metal, WhatsApp = scuro */
.hero .btn.primary{
background:
radial-gradient(circle at 10% 0%,
rgba(255, 255, 255, 0.96),
rgba(233, 238, 246, 0.98) 40%,
rgba(225, 231, 243, 0.96) 72%,
rgba(210, 216, 230, 0.90) 100%);
color: #050816;
border-color: rgba(233, 238, 246, 0.98);
box-shadow:
0 18px 35px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.hero .btn.primary:hover{
transform: translateY(-2px);
box-shadow:
0 22px 40px rgba(0, 0, 0, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.hero-overlay{
opacity: 0.60; /* prima era 0.70, ora un filo più trasparente */
}
/* HERO OVERLAY – area più piccola (10% in meno) */
.hero-overlay{
position: absolute;
inset: 0;
background:
/* macchia scura concentrata SOLO sulla zona testo */
radial-gradient(
circle at 15% 18%,
rgba(5, 10, 40, 0.95) 0%,
rgba(5, 10, 40, 0.80) 28%,
rgba(5, 10, 40, 0.45) 45%,
transparent 60% /* prima 70% → ora “più piccola” */
),
/* gradiente laterale che finisce prima */
linear-gradient(
120deg,
rgba(5, 7, 20, 0.95) 0%,
rgba(5, 7, 20, 0.70) 24%,
rgba(5, 7, 20, 0.20) 46%,
transparent 60% /* prima 80% → lascia libero il lato destro */
);
mix-blend-mode: normal;
opacity: 0.60; /* resta uguale, cambia solo la “superficie” */
}/* ================================
VIDEO FRAME — CORNICE +50%
(1px -> 1.5px) + look Platinum
Incolla in fondo a ads.css
================================ */
.video-frame{
border-width: 1.5px !important; /* +50% */
border-style: solid !important;
border-color: rgba(233,238,246,.42) !important; /* Platinum */
box-shadow:
0 26px 60px rgba(0,0,0,0.75),
0 0 0 1px rgba(233,238,246,.14) inset; /* micro “doppio bordo” */
}
/* opzionale: ring play un filo più coerente */
.play-ring{
border-width: 3px; /* era 2px */
}
/* CHI SIAMO – Bottoni "LA MIA STORIA" blu ADS metal */
#chi-siamo .founder-card .btn{
/* testo più grande (+~20%) e più compatto */
font-size: 0.95rem;
line-height: 1.05; /* stringe lo spazio tra le due righe */
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 10px 30px;
border-radius: 999px;
/* inversione colori: pillola blu, testo chiaro */
color: #FDFDFD;
background:
radial-gradient(circle at 10% 0%, rgba(255,255,255,0.18), transparent 55%),
linear-gradient(135deg, #2A79C5, #0B2A45); /* Steel + Ocean ADS */
border: 1px solid rgba(233,238,246,0.95);
box-shadow:
0 16px 38px rgba(0,0,0,0.75),
inset 0 1px 0 rgba(255,255,255,0.80); /* effetto glam metal */
}
/* hover: un filo più luminoso */
#chi-siamo .founder-card .btn:hover{
background:
radial-gradient(circle at 10% 0%, rgba(255,255,255,0.24), transparent 55%),
linear-gradient(135deg, #3A8AE0, #12385E);
box-shadow:
0 22px 55px rgba(0,0,0,0.9),
inset 0 1px 0 rgba(255,255,255,0.95);
transform: translateY(-1px);
}
/* ===== VIDEO FRAME — CORNICE BOOST (+50% / più “platinum”) ===== */
.video-frame{
border: 2px solid rgba(233,238,246,.50); /* platino */
outline: 1px solid rgba(233,238,246,.18); /* secondo bordo */
outline-offset: -6px; /* “doppia cornice” interna */
}
/* =========================================================
PATCH — CARD "GLASS" BLU ADS (lascia vedere il video sotto)
Sezioni: #cosa-ottieni + #percorso
Incolla IN FONDO a ads.css
========================================================= */
#cosa-ottieni .card,
#percorso .card{
/* vetro blu, non copre il background video */
background: linear-gradient(
135deg,
rgba(11, 42, 69, .58) 0%,
rgba(5, 8, 22, .34) 55%,
rgba(5, 8, 22, .22) 100%
) !important;
/* effetto “glass” */
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
/* cornici platinum più visibili */
border: 1px solid rgba(233, 238, 246, .28) !important;
box-shadow:
0 20px 55px rgba(0,0,0,.45),
inset 0 0 0 1px rgba(233, 238, 246, .16);
color: rgba(245, 247, 251, .98);
overflow: hidden;
}
/* testi leggibili su vetro blu */
#cosa-ottieni .card h3,
#percorso .card h3{
color: rgba(245, 247, 251, .98);
}
#cosa-ottieni .card p,
#percorso .card p{
color: rgba(236, 241, 255, .82);
}
/* micro-luce diagonale (premium) */
#cosa-ottieni .card::before,
#percorso .card::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(700px 260px at 18% 0%, rgba(42,121,197,.22), transparent 62%),
radial-gradient(520px 220px at 86% 18%, rgba(233,238,246,.14), transparent 60%);
opacity:.95;
}
/* assicurati che il contenuto stia sopra il glow */
#cosa-ottieni .card > *,
#percorso .card > *{
position: relative;
z-index: 1;
}
/* =========================================================
PATCH — CARD "METAL GLAM" (più piene + testo grande/chiaro)
Sezioni: #cosa-ottieni + #percorso
Incolla IN FONDO a ads.css
========================================================= */
#cosa-ottieni .card,
#percorso .card{
position: relative;
padding: 28px 30px !important;
/* BLUE METAL pieno (non trasparente) */
background: linear-gradient(
135deg,
rgba(11, 42, 69, .96) 0%,
rgba(5, 8, 22, .92) 55%,
rgba(5, 8, 22, .88) 100%
) !important;
/* cornice platinum più “delux” */
border: 2px solid rgba(233, 238, 246, .32) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233, 238, 246, .18),
inset 0 18px 28px rgba(233, 238, 246, .06),
inset 0 -28px 44px rgba(0,0,0,.35);
border-radius: 26px !important;
overflow: hidden;
}
/* sheen metallico (glam) */
#cosa-ottieni .card::before,
#percorso .card::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
linear-gradient(120deg,
rgba(233,238,246,.18) 0%,
rgba(233,238,246,.06) 18%,
rgba(42,121,197,.22) 48%,
rgba(233,238,246,.06) 72%,
transparent 100%),
radial-gradient(800px 260px at 18% 0%,
rgba(42,121,197,.28), transparent 60%),
radial-gradient(520px 220px at 92% 18%,
rgba(233,238,246,.14), transparent 62%);
opacity: .95;
}
/* highlight bordo alto (platinum) */
#cosa-ottieni .card::after,
#percorso .card::after{
content:"";
position:absolute;
left: 18px; right: 18px; top: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(233,238,246,.55), transparent);
opacity: .7;
pointer-events:none;
}
/* testo: più grande + chiaro + contrasto */
#cosa-ottieni .card h3,
#percorso .card h3{
color: rgba(246,240,228,.98) !important; /* warm ivory */
font-weight: 800;
letter-spacing: .2px;
font-size: clamp(20px, 1.25vw + 14px, 28px) !important;
text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
#cosa-ottieni .card p,
#percorso .card p{
color: rgba(233,238,246,.92) !important; /* platinum */
font-size: clamp(15px, .65vw + 12px, 19px) !important;
line-height: 1.55 !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* contenuto sopra gli effetti */
#cosa-ottieni .card > *,
#percorso .card > *{
position: relative;
z-index: 1;
}
/* hover “premium” */
@media (hover:hover){
#cosa-ottieni .card:hover,
#percorso .card:hover{
transform: translateY(-6px);
box-shadow:
0 34px 90px rgba(0,0,0,.62),
inset 0 0 0 1px rgba(233, 238, 246, .20),
inset 0 18px 28px rgba(233, 238, 246, .07),
inset 0 -28px 44px rgba(0,0,0,.38);
}
}
/* =========================================================
ADD-ON — TEXT SHIMMER "PLATINUM / CHAMPAGNE"
(titoli h3 nelle card di #cosa-ottieni + #percorso)
========================================================= */
/* fallback già ok: resta il color normale se non supporta clip-text */
@supports (-webkit-background-clip: text) or (background-clip: text) {
#cosa-ottieni .card h3,
#percorso .card h3{
/* shimmer metallico */
background-image: linear-gradient(
110deg,
rgba(233,238,246,.92) 0%,
rgba(233,238,246,.98) 14%,
rgba(246,240,228,.92) 26%, /* champagne (soft) */
rgba(42,121,197,.92) 40%, /* steel blue */
rgba(233,238,246,.98) 55%,
rgba(246,240,228,.88) 70%, /* champagne (soft) */
rgba(233,238,246,.92) 100%
);
background-size: 260% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
/* glow elegante (non pacchiano) */
text-shadow:
0 2px 12px rgba(0,0,0,.65),
0 0 18px rgba(233,238,246,.10);
animation: adsTextShimmer 5.2s linear infinite;
}
@keyframes adsTextShimmer{
0% { background-position: 0% 50%; }
100% { background-position: 260% 50%; }
}
@media (prefers-reduced-motion: reduce){
#cosa-ottieni .card h3,
#percorso .card h3{
animation: none;
background-position: 50% 50%;
}
}
}
/* =========================================================
PATCH — "PERCHE FUNZIONA" BOX METAL GLAM (card scura a destra)
Incolla IN FONDO a ads.css
========================================================= */
/* target “abbastanza largo”: se la tua box è .card o .ads-card */
#perche-funziona .card,
#perche-funziona .ads-card,
#perche-funziona .ads-card-light{
position: relative;
padding: 28px 30px !important;
background: linear-gradient(
135deg,
rgba(11, 42, 69, .96) 0%,
rgba(5, 8, 22, .92) 55%,
rgba(5, 8, 22, .88) 100%
) !important;
/* cornice platinum “delux” */
border: 2px solid rgba(233,238,246,.34) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233,238,246,.18),
inset 0 18px 28px rgba(233,238,246,.06),
inset 0 -28px 44px rgba(0,0,0,.35);
border-radius: 26px !important;
overflow: hidden;
}
/* sheen metallico */
#perche-funziona .card::before,
#perche-funziona .ads-card::before,
#perche-funziona .ads-card-light::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
linear-gradient(120deg,
rgba(233,238,246,.16) 0%,
rgba(233,238,246,.06) 20%,
rgba(42,121,197,.22) 48%,
rgba(233,238,246,.06) 72%,
transparent 100%),
radial-gradient(800px 260px at 18% 0%,
rgba(42,121,197,.26), transparent 60%),
radial-gradient(520px 220px at 92% 18%,
rgba(233,238,246,.14), transparent 62%);
opacity: .95;
}
/* highlight top */
#perche-funziona .card::after,
#perche-funziona .ads-card::after,
#perche-funziona .ads-card-light::after{
content:"";
position:absolute;
left: 18px; right: 18px; top: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(233,238,246,.55), transparent);
opacity: .7;
pointer-events:none;
}
/* testo più chiaro + leggibile */
#perche-funziona .card,
#perche-funziona .ads-card,
#perche-funziona .ads-card-light{
color: rgba(233,238,246,.92) !important;
}
#perche-funziona h3,
#perche-funziona .card h3,
#perche-funziona .ads-card h3{
color: rgba(246,240,228,.98) !important;
font-weight: 800;
font-size: clamp(20px, 1.1vw + 14px, 28px) !important;
text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* bullets “steel blue” (niente giallo) */
#perche-funziona ul{
margin: 0;
padding-left: 0;
list-style: none;
}
#perche-funziona li{
position: relative;
padding-left: 18px;
line-height: 1.55;
font-size: clamp(15px, .55vw + 12px, 18px) !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
#perche-funziona li::before{
content:"";
position:absolute;
left: 0; top: .72em;
width: 6px; height: 6px;
border-radius: 999px;
background: rgba(42,121,197,.95);
box-shadow: 0 0 10px rgba(42,121,197,.35);
}
/* contenuto sopra gli effetti */
#perche-funziona .card > *,
#perche-funziona .ads-card > *,
#perche-funziona .ads-card-light > *{
position: relative;
z-index: 1;
}
/* =========================================================
PATCH — #perche-funziona (COLORI + CONTRASTO + METAL GLAM)
Incolla IN FONDO a ads.css
========================================================= */
/* 1) Pannello chiaro: più “premium” (platinum + warm ivory) */
#perche-funziona .ads-panel-light{
background: linear-gradient(
135deg,
rgba(246,240,228,.94) 0%, /* warm ivory */
rgba(233,238,246,.92) 55%, /* platinum */
rgba(246,240,228,.90) 100%
) !important;
border: 2px solid rgba(233,238,246,.55) !important;
box-shadow:
0 22px 60px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.32) !important;
border-radius: 28px !important;
}
/* 2) Box scura a destra: metal glam blu (come le altre) */
#perche-funziona .ads-panel-light .card,
#perche-funziona .ads-panel-light .ads-card,
#perche-funziona .ads-panel-light .ads-card-light{
position: relative;
background: linear-gradient(
135deg,
rgba(11, 42, 69, .96) 0%,
rgba(5, 8, 22, .92) 55%,
rgba(5, 8, 22, .88) 100%
) !important;
border: 2px solid rgba(233,238,246,.34) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233,238,246,.18),
inset 0 18px 28px rgba(233,238,246,.06),
inset 0 -28px 44px rgba(0,0,0,.35) !important;
border-radius: 26px !important;
overflow: hidden;
}
/* sheen metallico */
#perche-funziona .ads-panel-light .card::before,
#perche-funziona .ads-panel-light .ads-card::before,
#perche-funziona .ads-panel-light .ads-card-light::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
linear-gradient(120deg,
rgba(233,238,246,.16) 0%,
rgba(233,238,246,.06) 20%,
rgba(42,121,197,.22) 48%,
rgba(233,238,246,.06) 72%,
transparent 100%),
radial-gradient(800px 260px at 18% 0%,
rgba(42,121,197,.26), transparent 60%),
radial-gradient(520px 220px at 92% 18%,
rgba(233,238,246,.14), transparent 62%);
opacity: .95;
}
/* 3) TESTO: forza colore + togli “sbiadito” ovunque */
#perche-funziona .ads-panel-light .card *,
#perche-funziona .ads-panel-light .ads-card *,
#perche-funziona .ads-panel-light .ads-card-light *{
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
/* titoli nella box scura */
#perche-funziona .ads-panel-light .card h3,
#perche-funziona .ads-panel-light .ads-card h3,
#perche-funziona .ads-panel-light .ads-card-light h3{
color: rgba(246,240,228,.98) !important; /* warm ivory */
font-weight: 800;
font-size: clamp(20px, 1.05vw + 14px, 26px) !important;
text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* paragrafi e lista nella box scura */
#perche-funziona .ads-panel-light .card p,
#perche-funziona .ads-panel-light .card li,
#perche-funziona .ads-panel-light .ads-card p,
#perche-funziona .ads-panel-light .ads-card li,
#perche-funziona .ads-panel-light .ads-card-light p,
#perche-funziona .ads-panel-light .ads-card-light li{
color: rgba(233,238,246,.94) !important; /* platinum */
font-size: clamp(15px, .55vw + 12px, 18px) !important;
line-height: 1.55 !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* bullets: steel blue (no giallo) */
#perche-funziona .ads-panel-light .card ul,
#perche-funziona .ads-panel-light .ads-card ul,
#perche-funziona .ads-panel-light .ads-card-light ul{
margin: 0;
padding-left: 0;
list-style: none;
}
#perche-funziona .ads-panel-light .card li,
#perche-funziona .ads-panel-light .ads-card li,
#perche-funziona .ads-panel-light .ads-card-light li{
position: relative;
padding-left: 18px;
}
#perche-funziona .ads-panel-light .card li::before,
#perche-funziona .ads-panel-light .ads-card li::before,
#perche-funziona .ads-panel-light .ads-card-light li::before{
content:"";
position:absolute;
left: 0; top: .72em;
width: 7px; height: 7px;
border-radius: 999px;
background: rgba(42,121,197,.95);
box-shadow: 0 0 12px rgba(42,121,197,.35);
}
/* contenuto sopra gli effetti */
#perche-funziona .ads-panel-light .card > *,
#perche-funziona .ads-panel-light .ads-card > *,
#perche-funziona .ads-panel-light .ads-card-light > *{
position: relative;
z-index: 1;
}
/* =========================================================
PATCH — WORKSHOP + PERCHÉ FUNZIONA (BLUE METAL GLAM)
Incolla IN FONDO a ads.css
========================================================= */
/* ---------- 1) WORKSHOP: 2 card come stile "4 percorsi" ---------- */
#workshop .card.workshop{
position: relative;
padding: 28px 30px !important;
background: linear-gradient(
135deg,
rgba(11, 42, 69, .96) 0%,
rgba(5, 8, 22, .92) 55%,
rgba(5, 8, 22, .88) 100%
) !important;
/* doppia cornice platinum (più visibile) */
border: 2px solid rgba(233,238,246,.38) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 2px rgba(233,238,246,.16),
inset 0 18px 28px rgba(233,238,246,.06),
inset 0 -28px 44px rgba(0,0,0,.38);
border-radius: 26px !important;
overflow: hidden;
}
/* sheen metallico */
#workshop .card.workshop::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
linear-gradient(120deg,
rgba(233,238,246,.18) 0%,
rgba(233,238,246,.06) 18%,
rgba(42,121,197,.22) 48%,
rgba(233,238,246,.06) 72%,
transparent 100%),
radial-gradient(800px 260px at 18% 0%,
rgba(42,121,197,.28), transparent 60%),
radial-gradient(520px 220px at 92% 18%,
rgba(233,238,246,.14), transparent 62%);
opacity: .95;
}
/* highlight bordo alto */
#workshop .card.workshop::after{
content:"";
position:absolute;
left: 18px; right: 18px; top: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(233,238,246,.55), transparent);
opacity: .75;
pointer-events:none;
}
/* testo più grande + chiaro */
#workshop .card.workshop h3{
font-weight: 850;
letter-spacing: .2px;
font-size: clamp(20px, 1.2vw + 14px, 28px) !important;
text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
#workshop .card.workshop p{
color: rgba(233,238,246,.92) !important;
font-size: clamp(15px, .65vw + 12px, 19px) !important;
line-height: 1.55 !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* contenuto sopra gli effetti */
#workshop .card.workshop > *{ position:relative; z-index:1; }
/* hover premium */
@media (hover:hover){
#workshop .card.workshop:hover{
transform: translateY(-6px);
box-shadow:
0 34px 90px rgba(0,0,0,.62),
inset 0 0 0 2px rgba(233,238,246,.18),
inset 0 18px 28px rgba(233,238,246,.07),
inset 0 -28px 44px rgba(0,0,0,.40);
}
}
/* ---------- 2) PERCHÉ FUNZIONA: applica la classe .ads-metal-card al box lista ---------- */
/* (vedi mini-fix HTML sotto) */
#perche-funziona .ads-metal-card{
position: relative;
padding: 26px 28px !important;
background: linear-gradient(
135deg,
rgba(11, 42, 69, .96) 0%,
rgba(5, 8, 22, .92) 55%,
rgba(5, 8, 22, .88) 100%
) !important;
border: 2px solid rgba(233,238,246,.38) !important;
border-radius: 26px !important;
overflow: hidden;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 2px rgba(233,238,246,.16),
inset 0 18px 28px rgba(233,238,246,.06),
inset 0 -28px 44px rgba(0,0,0,.38);
}
/* sheen */
#perche-funziona .ads-metal-card::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
linear-gradient(120deg,
rgba(233,238,246,.16) 0%,
rgba(233,238,246,.06) 18%,
rgba(42,121,197,.20) 48%,
rgba(233,238,246,.06) 72%,
transparent 100%);
opacity: .95;
}
/* lista leggibile */
#perche-funziona .ads-metal-card *{ position:relative; z-index:1; }
#perche-funziona .ads-metal-card ul{ margin:0; padding-left: 1.15em; }
#perche-funziona .ads-metal-card li{
color: rgba(233,238,246,.92) !important;
font-size: clamp(15px, .55vw + 12px, 18px) !important;
line-height: 1.55 !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
#perche-funziona .ads-metal-card li::marker{
color: rgba(42,121,197,.95);
}
/* ---------- 3) SCINTILLIO "PLATINUM" (senza giallo) su TITOLI ---------- */
@keyframes adsPlatinumShine{
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* Titoli dentro card metal (4 percorsi + workshop) */
#cosa-ottieni .card h3,
#percorso .card h3,
#workshop .card.workshop h3{
background-image: linear-gradient(
90deg,
rgba(246,240,228,.92),
rgba(233,238,246,1),
rgba(42,121,197,.85),
rgba(233,238,246,1),
rgba(246,240,228,.92)
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
animation: adsPlatinumShine 6.5s linear infinite;
}
@media (prefers-reduced-motion: reduce){
#cosa-ottieni .card h3,
#percorso .card h3,
#workshop .card.workshop h3{
animation: none !important;
color: rgba(246,240,228,.98) !important;
-webkit-text-fill-color: rgba(246,240,228,.98);
background: none !important;
}
}
/* =========================================================
PATCH — RADIUS FIX + METAL GLAM su "Perché funziona"
(angoli smussati come le altre + sheen che rispetta il bordo)
Incolla IN FONDO a ads.css
========================================================= */
#perche-funziona .ads-metal-card,
#perche-funziona .col.highlight{
position: relative;
border-radius: 26px !important;
overflow: hidden !important; /* CLIP degli effetti, altrimenti "spigola" */
}
/* se hai già la card in metal, questa parte la rinforza e uniforma */
#perche-funziona .ads-metal-card{
padding: 28px 30px !important;
background: linear-gradient(
135deg,
rgba(11, 42, 69, .96) 0%,
rgba(5, 8, 22, .92) 55%,
rgba(5, 8, 22, .88) 100%
) !important;
border: 2px solid rgba(233, 238, 246, .32) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233, 238, 246, .18),
inset 0 18px 28px rgba(233, 238, 246, .06),
inset 0 -28px 44px rgba(0,0,0,.35) !important;
}
/* IMPORTANTISSIMO: gli effetti DEVONO seguire il radius */
#perche-funziona .ads-metal-card::before,
#perche-funziona .ads-metal-card::after{
border-radius: inherit !important;
}
/* sheen metallico (glam) */
#perche-funziona .ads-metal-card::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
linear-gradient(120deg,
rgba(233,238,246,.18) 0%,
rgba(233,238,246,.06) 18%,
rgba(42,121,197,.22) 48%,
rgba(233,238,246,.06) 72%,
transparent 100%),
radial-gradient(800px 260px at 18% 0%,
rgba(42,121,197,.28), transparent 60%),
radial-gradient(520px 220px at 92% 18%,
rgba(233,238,246,.14), transparent 62%);
opacity: .95;
}
/* highlight bordo alto (platinum) */
#perche-funziona .ads-metal-card::after{
content:"";
position:absolute;
left: 18px; right: 18px; top: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(233,238,246,.55), transparent);
opacity: .7;
pointer-events:none;
}
/* testo lista più chiaro */
#perche-funziona .ads-metal-card ul{
margin: 0;
padding-left: 22px;
}
#perche-funziona .ads-metal-card li{
color: rgba(233,238,246,.92) !important;
font-size: clamp(15px, .65vw + 12px, 18px) !important;
line-height: 1.6 !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
#perche-funziona .ads-metal-card li::marker{
color: rgba(42,121,197,.95);
}
/* contenuto sopra gli effetti */
#perche-funziona .ads-metal-card > *{
position: relative;
z-index: 1;
}
/* =========================================================
ADS — PATCH FINALE (layout + workshop + MG alt + video + shimmer)
Incolla IN FONDO a ads.css
========================================================= */
/* ------------------------------
0) VARIABILI (radius/bordi coerenti ADS)
-------------------------------- */
:root{
--ads-radius-card: 22px;
--ads-radius-soft: 18px;
--ads-border-platinum: rgba(233,238,246,.28);
--ads-border-platinum-strong: rgba(233,238,246,.36);
--ads-metal-1: rgba(11, 42, 69, .96);
--ads-metal-2: rgba(5, 8, 22, .92);
--ads-metal-3: rgba(5, 8, 22, .88);
/* MG overlay (tinte “decise ma ADS”, usate SOLO a bassa opacità) */
--mg-porpora: 135, 48, 112; /* porpora */
--mg-mattone: 140, 68, 48; /* mattone */
--mg-sabbia: 214, 194, 163; /* sabbia */
--mg-petrolio: 18, 92, 92; /* verde petrolio */
/* shimmer */
--shimmer-platinum: rgba(233,238,246,.98);
--shimmer-warm: rgba(246,240,228,.92);
--shimmer-gold: rgba(243,201,105,.85); /* micro highlight (non dominante) */
--shimmer-speed: 3.6s;
}
/* ------------------------------
1) SPAZIATURE — taglio “arie” tra sezioni
-------------------------------- */
/* riduce padding globale sezioni (eccetto hero) */
.section:not(.hero){
padding-top: 72px !important;
padding-bottom: 72px !important;
}
/* su mobile un filo più compatto */
@media (max-width: 768px){
.section:not(.hero){
padding-top: 56px !important;
padding-bottom: 56px !important;
}
}
/* testa sezione + griglie più strette */
.section .section-head{
margin-bottom: 26px !important;
}
.section .section-head p{
margin-top: 10px !important;
}
/* riduci gap tra card/colonne */
.grid{
gap: 18px !important;
}
@media (max-width: 768px){
.grid{ gap: 14px !important; }
}
/* ------------------------------
2) RIFINITURE GLOBALI — radius + bordi coerenti su card/box
-------------------------------- */
.card,
.box,
.panel,
[class*="box"],
[class*="panel"]{
border-radius: var(--ads-radius-card) !important;
overflow: hidden !important;
}
/* bordo platinum “di base” (senza snaturare dove già è forte) */
.card{
border-color: var(--ads-border-platinum) !important;
}
/* hover premium uniforme */
.card:hover{
border-color: var(--ads-border-platinum-strong) !important;
transform: translateY(-2px);
}
/* ------------------------------
3) WORKSHOP — “Scegli da dove partire” uniformato alle card blu
-------------------------------- */
#workshop .card.workshop{
position: relative;
padding: 28px 30px !important;
background: linear-gradient(
135deg,
var(--ads-metal-1) 0%,
var(--ads-metal-2) 55%,
var(--ads-metal-3) 100%
) !important;
border: 2px solid var(--ads-border-platinum) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233,238,246,.10);
}
#workshop .card.workshop:hover{
border-color: var(--ads-border-platinum-strong) !important;
box-shadow:
0 30px 82px rgba(0,0,0,.62),
inset 0 0 0 1px rgba(233,238,246,.14);
}
/* ------------------------------
4) CARD ALTERNATE “MG” — movimento anche da fermo
Uso consigliato: aggiungi classi in HTML:
- class="card mg-alt mg-porpora"
- class="card mg-alt mg-mattone"
- class="card mg-alt mg-sabbia"
- class="card mg-alt mg-petrolio"
-------------------------------- */
.card.mg-alt{
position: relative;
border: 2px solid var(--ads-border-platinum) !important;
overflow: hidden !important;
}
/* overlay tinta leggera + sheen animato sempre attivo */
.card.mg-alt::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
/* sheen che si muove “da fermo” */
background:
linear-gradient(120deg,
transparent 0%,
rgba(233,238,246,.10) 38%,
rgba(246,240,228,.10) 50%,
rgba(233,238,246,.08) 62%,
transparent 100%
);
transform: translateX(-35%);
opacity: .55;
mix-blend-mode: screen;
animation: ads-mg-sheen 5.6s ease-in-out infinite;
}
@keyframes ads-mg-sheen{
0% { transform: translateX(-40%); }
50% { transform: translateX(8%); }
100% { transform: translateX(-40%); }
}
/* tinta “decisa” ma solo in 10–18% */
.card.mg-porpora{
background:
linear-gradient(135deg,
rgba(var(--mg-porpora), .16) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
.card.mg-mattone{
background:
linear-gradient(135deg,
rgba(var(--mg-mattone), .16) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
.card.mg-sabbia{
background:
linear-gradient(135deg,
rgba(var(--mg-sabbia), .14) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
.card.mg-petrolio{
background:
linear-gradient(135deg,
rgba(var(--mg-petrolio), .16) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
/* rispetto preferenze accessibilità */
@media (prefers-reduced-motion: reduce){
.card.mg-alt::before{ animation: none !important; }
}
/* ------------------------------
5) VIDEO CORNICE — +50% “peso” cornice player
-------------------------------- */
/* Aumenta bordo e aggiunge doppio-ring platinum */
.video-frame{
border-width: 3px !important; /* (se prima era 2px ≈ +50%) */
border-color: rgba(233,238,246,.30) !important;
border-radius: var(--ads-radius-card) !important;
overflow: hidden !important;
box-shadow:
0 26px 60px rgba(0,0,0,0.75),
inset 0 0 0 1px rgba(233,238,246,.12) !important;
}
.video-frame::after{
content:"";
position:absolute;
inset: 10px;
border-radius: calc(var(--ads-radius-card) - 10px);
border: 1px solid rgba(233,238,246,.16);
pointer-events:none;
}
/* ------------------------------
6) SHIMMER TESTO — platinum/gold premium sulle card
Auto: titoli h3 in sezioni card principali
-------------------------------- */
@supports (-webkit-background-clip: text) or (background-clip: text){
#cosa-ottieni .card h3,
#percorso .card h3,
#workshop .card h3,
#perche-funziona .card h3,
#perche-funziona .box h3{
/* fallback */
color: rgba(233,238,246,.98);
/* shimmer */
background-image: linear-gradient(
110deg,
var(--shimmer-platinum) 0%,
var(--shimmer-warm) 35%,
var(--shimmer-gold) 50%,
var(--shimmer-warm) 65%,
var(--shimmer-platinum) 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: ads-text-shimmer var(--shimmer-speed) linear infinite;
}
@keyframes ads-text-shimmer{
0% { background-position: 0% 50%; }
100% { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce){
#cosa-ottieni .card h3,
#percorso .card h3,
#workshop .card h3,
#perche-funziona .card h3,
#perche-funziona .box h3{
animation: none !important;
-webkit-text-fill-color: unset;
color: rgba(233,238,246,.98);
}
}
}
/* =========================================================
ADS — PATCH FINALE (layout + workshop + MG alt + video + shimmer)
Incolla IN FONDO a ads.css
========================================================= */
/* ------------------------------
0) VARIABILI (radius/bordi coerenti ADS)
-------------------------------- */
:root{
--ads-radius-card: 22px;
--ads-radius-soft: 18px;
--ads-border-platinum: rgba(233,238,246,.28);
--ads-border-platinum-strong: rgba(233,238,246,.36);
--ads-metal-1: rgba(11, 42, 69, .96);
--ads-metal-2: rgba(5, 8, 22, .92);
--ads-metal-3: rgba(5, 8, 22, .88);
/* MG overlay (tinte “decise ma ADS”, usate SOLO a bassa opacità) */
--mg-porpora: 135, 48, 112; /* porpora */
--mg-mattone: 140, 68, 48; /* mattone */
--mg-sabbia: 214, 194, 163; /* sabbia */
--mg-petrolio: 18, 92, 92; /* verde petrolio */
/* shimmer */
--shimmer-platinum: rgba(233,238,246,.98);
--shimmer-warm: rgba(246,240,228,.92);
--shimmer-gold: rgba(243,201,105,.85); /* micro highlight (non dominante) */
--shimmer-speed: 3.6s;
}
/* ------------------------------
1) SPAZIATURE — taglio “arie” tra sezioni
-------------------------------- */
/* riduce padding globale sezioni (eccetto hero) */
.section:not(.hero){
padding-top: 72px !important;
padding-bottom: 72px !important;
}
/* su mobile un filo più compatto */
@media (max-width: 768px){
.section:not(.hero){
padding-top: 56px !important;
padding-bottom: 56px !important;
}
}
/* testa sezione + griglie più strette */
.section .section-head{
margin-bottom: 26px !important;
}
.section .section-head p{
margin-top: 10px !important;
}
/* riduci gap tra card/colonne */
.grid{
gap: 18px !important;
}
@media (max-width: 768px){
.grid{ gap: 14px !important; }
}
/* ------------------------------
2) RIFINITURE GLOBALI — radius + bordi coerenti su card/box
-------------------------------- */
.card,
.box,
.panel,
[class*="box"],
[class*="panel"]{
border-radius: var(--ads-radius-card) !important;
overflow: hidden !important;
}
/* bordo platinum “di base” (senza snaturare dove già è forte) */
.card{
border-color: var(--ads-border-platinum) !important;
}
/* hover premium uniforme */
.card:hover{
border-color: var(--ads-border-platinum-strong) !important;
transform: translateY(-2px);
}
/* ------------------------------
3) WORKSHOP — “Scegli da dove partire” uniformato alle card blu
-------------------------------- */
#workshop .card.workshop{
position: relative;
padding: 28px 30px !important;
background: linear-gradient(
135deg,
var(--ads-metal-1) 0%,
var(--ads-metal-2) 55%,
var(--ads-metal-3) 100%
) !important;
border: 2px solid var(--ads-border-platinum) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233,238,246,.10);
}
#workshop .card.workshop:hover{
border-color: var(--ads-border-platinum-strong) !important;
box-shadow:
0 30px 82px rgba(0,0,0,.62),
inset 0 0 0 1px rgba(233,238,246,.14);
}
/* ------------------------------
4) CARD ALTERNATE “MG” — movimento anche da fermo
Uso consigliato: aggiungi classi in HTML:
- class="card mg-alt mg-porpora"
- class="card mg-alt mg-mattone"
- class="card mg-alt mg-sabbia"
- class="card mg-alt mg-petrolio"
-------------------------------- */
.card.mg-alt{
position: relative;
border: 2px solid var(--ads-border-platinum) !important;
overflow: hidden !important;
}
/* overlay tinta leggera + sheen animato sempre attivo */
.card.mg-alt::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
/* sheen che si muove “da fermo” */
background:
linear-gradient(120deg,
transparent 0%,
rgba(233,238,246,.10) 38%,
rgba(246,240,228,.10) 50%,
rgba(233,238,246,.08) 62%,
transparent 100%
);
transform: translateX(-35%);
opacity: .55;
mix-blend-mode: screen;
animation: ads-mg-sheen 5.6s ease-in-out infinite;
}
@keyframes ads-mg-sheen{
0% { transform: translateX(-40%); }
50% { transform: translateX(8%); }
100% { transform: translateX(-40%); }
}
/* tinta “decisa” ma solo in 10–18% */
.card.mg-porpora{
background:
linear-gradient(135deg,
rgba(var(--mg-porpora), .16) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
.card.mg-mattone{
background:
linear-gradient(135deg,
rgba(var(--mg-mattone), .16) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
.card.mg-sabbia{
background:
linear-gradient(135deg,
rgba(var(--mg-sabbia), .14) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
.card.mg-petrolio{
background:
linear-gradient(135deg,
rgba(var(--mg-petrolio), .16) 0%,
rgba(11,42,69,.92) 40%,
rgba(5,8,22,.92) 100%
) !important;
}
/* rispetto preferenze accessibilità */
@media (prefers-reduced-motion: reduce){
.card.mg-alt::before{ animation: none !important; }
}
/* ------------------------------
5) VIDEO CORNICE — +50% “peso” cornice player
-------------------------------- */
/* Aumenta bordo e aggiunge doppio-ring platinum */
.video-frame{
border-width: 3px !important; /* (se prima era 2px ≈ +50%) */
border-color: rgba(233,238,246,.30) !important;
border-radius: var(--ads-radius-card) !important;
overflow: hidden !important;
box-shadow:
0 26px 60px rgba(0,0,0,0.75),
inset 0 0 0 1px rgba(233,238,246,.12) !important;
}
.video-frame::after{
content:"";
position:absolute;
inset: 10px;
border-radius: calc(var(--ads-radius-card) - 10px);
border: 1px solid rgba(233,238,246,.16);
pointer-events:none;
}
/* ------------------------------
6) SHIMMER TESTO — platinum/gold premium sulle card
Auto: titoli h3 in sezioni card principali
-------------------------------- */
@supports (-webkit-background-clip: text) or (background-clip: text){
#cosa-ottieni .card h3,
#percorso .card h3,
#workshop .card h3,
#perche-funziona .card h3,
#perche-funziona .box h3{
/* fallback */
color: rgba(233,238,246,.98);
/* shimmer */
background-image: linear-gradient(
110deg,
var(--shimmer-platinum) 0%,
var(--shimmer-warm) 35%,
var(--shimmer-gold) 50%,
var(--shimmer-warm) 65%,
var(--shimmer-platinum) 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: ads-text-shimmer var(--shimmer-speed) linear infinite;
}
@keyframes ads-text-shimmer{
0% { background-position: 0% 50%; }
100% { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce){
#cosa-ottieni .card h3,
#percorso .card h3,
#workshop .card h3,
#perche-funziona .card h3,
#perche-funziona .box h3{
animation: none !important;
-webkit-text-fill-color: unset;
color: rgba(233,238,246,.98);
}
}
}
/* =========================================================
ADS — LIFTING MG (Perché funziona) + ENTRATA SX/DX
========================================================= */
#perche-funziona .pf-wrap{
display:grid;
grid-template-columns: 1.15fr .85fr;
align-items:center;
gap: 0;
}
/* se non hai .pf-wrap, NON preoccuparti:
la cosa funziona comunque con le classi su sinistra/destra. */
/* --- Card sinistra (chiara) --- */
#perche-funziona .pf-light{
position: relative;
z-index: 1;
padding: 34px 38px !important;
background: rgba(246,240,228,.96) !important; /* Warm Ivory */
border-radius: 22px !important;
border: 2px solid rgba(233,238,246,.28) !important;
box-shadow:
0 24px 60px rgba(0,0,0,.28),
inset 0 0 0 1px rgba(243,201,105,.10); /* micro-gold, super soft */
}
/* testo più “distribuito” */
#perche-funziona .pf-light p{
max-width: 62ch;
line-height: 1.7;
}
#perche-funziona .pf-light p + p{
margin-top: 14px !important;
}
/* --- Card destra (blu metal) con overlap --- */
#perche-funziona .pf-dark{
position: relative;
z-index: 2;
margin-left: -74px; /* overlap MG */
padding: 28px 28px !important;
background: linear-gradient(135deg,
rgba(11,42,69,.96) 0%,
rgba(5,8,22,.92) 55%,
rgba(5,8,22,.88) 100%
) !important;
border-radius: 22px !important;
border: 2px solid rgba(233,238,246,.32) !important;
box-shadow:
0 28px 78px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233,238,246,.12);
}
/* Kicker / titolo brand-style dentro card blu */
#perche-funziona .pf-kicker{
display:flex;
align-items:center;
gap: 12px;
text-transform: uppercase;
letter-spacing: .28em;
font-weight: 700;
font-size: 12px;
color: rgba(233,238,246,.92);
margin-bottom: 14px;
}
#perche-funziona .pf-kicker::before{
content:"";
height: 1px;
flex: 1;
background: linear-gradient(90deg,
rgba(233,238,246,.14),
rgba(243,201,105,.18),
rgba(233,238,246,.14)
);
border-radius: 99px;
}
/* lista più pulita */
#perche-funziona .pf-dark ul{
margin: 0 !important;
padding-left: 18px !important;
}
#perche-funziona .pf-dark li{
margin: 10px 0 !important;
line-height: 1.6;
}
/* --- Mobile: via overlap, stack pulito --- */
@media (max-width: 900px){
#perche-funziona .pf-wrap{
grid-template-columns: 1fr;
gap: 14px;
}
#perche-funziona .pf-dark{
margin-left: 0;
}
}
/* =========================================================
ENTRATA MG: prima sinistra, poi destra
========================================================= */
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 0;
transform: translateY(10px);
filter: blur(2px);
}
#perche-funziona .pf-enter-left{
transform: translateX(-34px) translateY(10px) scale(.985);
transition: opacity .75s ease, transform .75s ease, filter .75s ease;
}
#perche-funziona .pf-enter-right{
transform: translateX(34px) translateY(10px) scale(.985);
transition: opacity .75s ease, transform .75s ease, filter .75s ease;
transition-delay: .18s; /* entra dopo */
}
#perche-funziona.pf-in .pf-enter-left,
#perche-funziona.pf-in .pf-enter-right{
opacity: 1;
transform: translateX(0) translateY(0) scale(1);
filter: blur(0);
}
/* accessibilità */
@media (prefers-reduced-motion: reduce){
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* =========================================================
PF — MG REPLICA (shape + overlap + motion)
========================================================= */
:root{
--pf-radius: 22px;
--pf-gold: rgba(243,201,105,.55);
--pf-gold-strong: rgba(243,201,105,.72);
--pf-platinum: rgba(233,238,246,.28);
--pf-platinum-strong: rgba(233,238,246,.38);
--pf-metal-1: rgba(11,42,69,.96);
--pf-metal-2: rgba(5,8,22,.92);
}
/* il “box bianco grande” diventa un wrapper trasparente (stile MG) */
#perche-funziona .pf-mg{
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1.08fr .92fr !important;
align-items: center !important;
gap: 0 !important;
position: relative;
}
/* CARD SINISTRA — crema + bordo oro (come MG) */
#perche-funziona .pf-mg-left{
position: relative;
z-index: 1;
padding: 36px 40px !important;
background: rgba(246,240,228,.97) !important; /* Warm Ivory */
border-radius: var(--pf-radius) !important;
border: 2px solid var(--pf-gold) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.30),
inset 0 0 0 1px rgba(255,255,255,.55);
}
/* testo più “distribuito” (meno muro) */
#perche-funziona .pf-mg-left p{
max-width: 62ch;
line-height: 1.72;
}
#perche-funziona .pf-mg-left p + p{
margin-top: 14px !important;
}
/* CARD DESTRA — metal glam + overlap (come MG) */
#perche-funziona .pf-mg-right{
position: relative;
z-index: 2;
margin-left: -86px; /* OVERLAP MG */
padding: 28px 28px !important;
background: linear-gradient(135deg, var(--pf-metal-1) 0%, var(--pf-metal-2) 100%) !important;
border-radius: var(--pf-radius) !important;
border: 2px solid var(--pf-platinum-strong) !important;
box-shadow:
0 30px 86px rgba(0,0,0,.60),
inset 0 0 0 1px rgba(233,238,246,.12);
overflow: hidden !important;
}
/* “Sheen” MG (movimento anche da fermo) */
#perche-funziona .pf-mg-right::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background: linear-gradient(120deg,
transparent 0%,
rgba(233,238,246,.10) 38%,
rgba(246,240,228,.10) 50%,
rgba(233,238,246,.08) 62%,
transparent 100%
);
transform: translateX(-42%);
opacity: .60;
mix-blend-mode: screen;
animation: pf-sheen 5.6s ease-in-out infinite;
}
@keyframes pf-sheen{
0% { transform: translateX(-45%); }
50% { transform: translateX(10%); }
100% { transform: translateX(-45%); }
}
/* Titolo dentro card blu — stile “marchio” */
#perche-funziona .pf-mg-kicker{
text-transform: uppercase;
letter-spacing: .28em;
font-weight: 800;
font-size: 12px;
color: rgba(233,238,246,.92);
margin: 2px 0 14px;
display:flex;
align-items:center;
gap: 12px;
}
#perche-funziona .pf-mg-kicker::after{
content:"";
height: 1px;
flex: 1;
background: linear-gradient(90deg,
rgba(233,238,246,.14),
var(--pf-gold-strong),
rgba(233,238,246,.14)
);
border-radius: 99px;
opacity: .55;
}
/* lista più pulita */
#perche-funziona .pf-mg-right ul{
margin: 0 !important;
padding-left: 18px !important;
}
#perche-funziona .pf-mg-right li{
margin: 10px 0 !important;
line-height: 1.6;
}
/* MOBILE: stack senza overlap */
@media (max-width: 900px){
#perche-funziona .pf-mg{
grid-template-columns: 1fr !important;
gap: 14px !important;
}
#perche-funziona .pf-mg-right{
margin-left: 0 !important;
}
}
/* =========================================================
ENTRATA MG: sx prima, dx dopo + micro-float
========================================================= */
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 0;
filter: blur(2px);
transform: translateY(10px);
will-change: transform, opacity, filter;
}
#perche-funziona .pf-enter-left{
transform: translateX(-70px) translateY(10px) scale(.985);
transition: opacity .85s ease, transform .85s ease, filter .85s ease;
}
#perche-funziona .pf-enter-right{
transform: translateX(70px) translateY(10px) scale(.985);
transition: opacity .85s ease, transform .85s ease, filter .85s ease;
transition-delay: .18s;
}
#perche-funziona.pf-in .pf-enter-left,
#perche-funziona.pf-in .pf-enter-right{
opacity: 1;
filter: blur(0);
transform: translateX(0) translateY(0) scale(1);
}
/* micro movimento continuo (tipo MG) */
#perche-funziona.pf-in .pf-mg-right{
animation: pf-float 4.8s ease-in-out infinite;
}
@keyframes pf-float{
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* accessibilità */
@media (prefers-reduced-motion: reduce){
#perche-funziona .pf-mg-right::before,
#perche-funziona.pf-in .pf-mg-right{
animation: none !important;
}
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* =========================================================
PF — FIX ORIZZONTALE (MG layout vero)
Incolla IN FONDO a ads.css
========================================================= */
/* allarga solo questo pannello */
#perche-funziona .section-panel{
max-width: 1180px !important;
margin: 0 auto !important;
}
/* Il layout MG deve stare su .two-cols (non sul panel) */
#perche-funziona .two-cols.pf-mg{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
position: relative !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Card sinistra: forza larghezza “orizzontale” */
#perche-funziona .two-cols.pf-mg .pf-mg-left{
flex: 0 1 660px !important;
max-width: 660px !important;
min-width: 520px !important;
}
/* Card destra: larghezza + overlap MG */
#perche-funziona .two-cols.pf-mg .pf-mg-right{
flex: 0 1 560px !important;
max-width: 560px !important;
min-width: 440px !important;
margin-left: -86px !important;
}
/* Se qualche CSS vecchio mette width strane sulle .col, le neutralizziamo */
#perche-funziona .two-cols.pf-mg > .col{
width: auto !important;
max-width: none !important;
}
/* Mobile: stack pulito */
@media (max-width: 980px){
#perche-funziona .two-cols.pf-mg{
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
}
#perche-funziona .two-cols.pf-mg .pf-mg-left,
#perche-funziona .two-cols.pf-mg .pf-mg-right{
min-width: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
}
}
/* =========================================================
PF — MG V2 (layout + posizione + animazioni solide)
Incolla IN FONDO a ads.css
========================================================= */
:root{
--pf-left-w: 680px;
--pf-right-w: 560px;
--pf-overlap-x: -112px; /* quanto si sovrappone il blu */
--pf-right-y: 10px; /* micro alzata/abbassata blu */
--pf-radius: 22px;
--pf-gold: rgba(243,201,105,.55);
--pf-platinum: rgba(233,238,246,.30);
--pf-platinum-strong: rgba(233,238,246,.40);
--pf-metal-1: rgba(11,42,69,.96);
--pf-metal-2: rgba(5,8,22,.92);
}
/* 1) SPEGNI IL PANNELLONE “section-panel” SOLO QUI */
#perche-funziona .section-panel{
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* opzionale: evita che l’effetto .reveal sul panel interferisca */
#perche-funziona .section-panel/* 2) Layout MG orizzontale vero (controllo su .two-cols.pf-mg) */
#perche-funziona .two-cols.pf-mg{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
position: relative !important;
}
/* neutralizza width strane delle .col (se presenti altrove) */
#perche-funziona .two-cols.pf-mg > .col{
width: auto !important;
max-width: none !important;
}
/* 3) Card sinistra “MG light” (più definita) */
#perche-funziona .pf-mg-left{
flex: 0 1 var(--pf-left-w) !important;
max-width: var(--pf-left-w) !important;
padding: 38px 42px !important;
border-radius: var(--pf-radius) !important;
background: linear-gradient(135deg,
rgba(246,240,228,.98) 0%,
rgba(246,240,228,.96) 55%,
rgba(233,238,246,.35) 160%
) !important;
border: 2px solid var(--pf-gold) !important;
box-shadow:
0 26px 72px rgba(0,0,0,.30),
inset 0 0 0 1px rgba(255,255,255,.55);
}
#perche-funziona .pf-mg-left p{
max-width: 62ch;
line-height: 1.72;
}
#perche-funziona .pf-mg-left p + p{
margin-top: 14px !important;
}
/* 4) Card destra “MG metal” + overlap + posizione */
#perche-funziona .pf-mg-right{
flex: 0 1 var(--pf-right-w) !important;
max-width: var(--pf-right-w) !important;
margin-left: var(--pf-overlap-x) !important;
margin-top: var(--pf-right-y) !important;
padding: 28px 28px !important;
border-radius: var(--pf-radius) !important;
background: linear-gradient(135deg, var(--pf-metal-1) 0%, var(--pf-metal-2) 100%) !important;
border: 2px solid var(--pf-platinum-strong) !important;
box-shadow:
0 30px 86px rgba(0,0,0,.60),
inset 0 0 0 1px rgba(233,238,246,.12);
position: relative;
overflow: hidden !important;
}
/* Kicker */
#perche-funziona .pf-mg-kicker{
text-transform: uppercase;
letter-spacing: .28em;
font-weight: 800;
font-size: 12px;
color: rgba(233,238,246,.92);
margin: 2px 0 14px;
display:flex;
align-items:center;
gap: 12px;
}
#perche-funziona .pf-mg-kicker::after{
content:"";
height: 1px;
flex: 1;
background: linear-gradient(90deg,
rgba(233,238,246,.14),
rgba(243,201,105,.70),
rgba(233,238,246,.14)
);
border-radius: 99px;
opacity: .55;
}
/* 5) Sheen MG: fermo finché non è visibile */
#perche-funziona .pf-mg-right::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background: linear-gradient(120deg,
transparent 0%,
rgba(233,238,246,.10) 38%,
rgba(246,240,228,.10) 50%,
rgba(233,238,246,.08) 62%,
transparent 100%
);
transform: translateX(-45%);
opacity: .62;
mix-blend-mode: screen;
animation: pf-sheen 5.6s ease-in-out infinite;
animation-play-state: paused;
}
@keyframes pf-sheen{
0% { transform: translateX(-45%); }
50% { transform: translateX(10%); }
100% { transform: translateX(-45%); }
}
/* 6) Entrata sx/dx: triggera con pf-in OPPURE con reveal is-visible */
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 0;
filter: blur(2px);
transform: translateY(10px);
will-change: transform, opacity, filter;
}
#perche-funziona .pf-enter-left{
transform: translateX(-70px) translateY(10px) scale(.985);
transition: opacity .85s ease, transform .85s ease, filter .85s ease;
}
#perche-funziona .pf-enter-right{
transform: translateX(70px) translateY(10px) scale(.985);
transition: opacity .85s ease, transform .85s ease, filter .85s ease;
transition-delay: .18s;
}
#perche-funziona.pf-in .pf-enter-left,
#perche-funziona .section-panel.is-visible .pf-enter-left,
#perche-funziona.pf-in .pf-enter-right,
#perche-funziona .section-panel.is-visible .pf-enter-right{
opacity: 1;
filter: blur(0);
transform: translateX(0) translateY(0) scale(1);
}
/* 7) Float: parte SOLO quando visibile e DOPO l’entrata */
#perche-funziona .pf-mg-right{
animation: pf-float 5.4s ease-in-out infinite;
animation-play-state: paused;
animation-delay: 1.05s;
}
@keyframes pf-float{
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* attiva sheen + float quando visibile */
#perche-funziona.pf-in .pf-mg-right,
#perche-funziona .section-panel.is-visible .pf-mg-right{
animation-play-state: running;
}
#perche-funziona.pf-in .pf-mg-right::before,
#perche-funziona .section-panel.is-visible .pf-mg-right::before{
animation-play-state: running;
}
/* Mobile: stack */
@media (max-width: 980px){
#perche-funziona .two-cols.pf-mg{
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
}
#perche-funziona .pf-mg-left,
#perche-funziona .pf-mg-right{
max-width: 100% !important;
margin-left: 0 !important;
margin-top: 0 !important;
}
}
/* Accessibilità */
@media (prefers-reduced-motion: reduce){
#perche-funziona .pf-mg-right,
#perche-funziona .pf-mg-right::before{
animation: none !important;
}
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* =========================================================
PF — TUNE V2.1 (spazio + entrata blu)
Incolla IN FONDO a ads.css
========================================================= */
/* 1) Micro tuning posizione overlap (puoi cambiare i 2 numeri) */
#perche-funziona{
--pf-overlap-x: -122px; /* più negativo = più overlap */
--pf-right-y: 12px; /* + = più giù, - = più su */
}
/* 2) Card chiara: più “alta” e soprattutto spazio a destra per il blu */
#perche-funziona .pf-mg-left{
min-height: 520px !important; /* la rende più alta */
padding-right: 170px !important; /* questo è il TRUCCO MG: spazio per il blu */
padding-bottom: 54px !important;
}
/* Mobile: niente min-height e niente “spazio a destra” */
@media (max-width: 980px){
#perche-funziona .pf-mg-left{
min-height: auto !important;
padding-right: 42px !important;
padding-bottom: 38px !important;
}
}
/* 3) FIX movimento blu: il float NON deve usare transform (sennò rompe l’entrata)
-> usiamo la proprietà 'translate' così la transition transform resta libera */
#perche-funziona .pf-mg-right{
translate: 0 0; /* base */
animation: pf-float-translate 5.4s ease-in-out infinite;
animation-play-state: paused;
animation-delay: 1.05s; /* parte dopo l’entrata */
}
/* float solo su translate (non tocca transform) */
@keyframes pf-float-translate{
0%,100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
/* attiva il float quando visibile (pf-in o reveal) */
#perche-funziona.pf-in .pf-mg-right,
#perche-funziona .section-panel.is-visible .pf-mg-right{
animation-play-state: running;
}
/* =========================================================
PF — ENTRATA BLINDATA (usa translate, non transform)
========================================================= */
/* stato iniziale (prima che arrivi pf-in) */
#perche-funziona .pf-mg-left.pf-enter-left{
opacity: 0 !important;
filter: blur(2px) !important;
translate: -90px 10px !important;
scale: .985 !important;
transition: opacity .85s ease, translate .85s ease, scale .85s ease, filter .85s ease !important;
}
#perche-funziona .pf-mg-right.pf-enter-right{
opacity: 0 !important;
filter: blur(2px) !important;
translate: 120px 10px !important; /* entra da destra */
scale: .985 !important;
transition: opacity .85s ease, translate .85s ease, scale .85s ease, filter .85s ease !important;
transition-delay: .16s !important; /* arriva dopo la chiara */
}
/* stato finale */
#perche-funziona.pf-in .pf-mg-left.pf-enter-left,
#perche-funziona.pf-in .pf-mg-right.pf-enter-right{
opacity: 1 !important;
filter: blur(0) !important;
translate: 0 0 !important;
scale: 1 !important;
}
/* =========================================================
WORKSHOP — NEGATIVO + ADSUMZ MANUAL ZENON MOTION + METAL 3D
========================================================= */
:root{
--ws-radius: 22px;
--ws-platinum: rgba(233,238,246,.30);
--ws-platinum-strong: rgba(233,238,246,.42);
--ws-gold: rgba(243,201,105,.70);
--ws-navy: #050816;
--ws-ocean: #0B2A45;
--ws-steel: #2A79C5;
--ws-ivory: #F6F0E4;
}
/* NEGATIVO: background scuro, testo chiaro */
#workshop.ws-invert{
position: relative;
color: rgba(233,238,246,.92);
background: radial-gradient(1200px 600px at 50% 20%,
rgba(11,42,69,.72) 0%,
rgba(5,8,22,.96) 55%,
rgba(5,8,22,1) 100%
) !important;
border-radius: 26px;
padding: 80px 0;
}
/* header sopra le card (titolo + sottotitolo) */
#workshop.ws-invert h2,
#workshop.ws-invert .section-title{
color: rgba(233,238,246,.98) !important;
}
#workshop.ws-invert p,
#workshop.ws-invert .section-subtitle{
color: rgba(233,238,246,.72) !important;
}
/* CARD LIGHT (negativo): pannelli chiari su sfondo scuro */
#workshop.ws-invert .ws-card{
border-radius: var(--ws-radius) !important;
background: linear-gradient(135deg,
rgba(246,240,228,.98) 0%,
rgba(246,240,228,.94) 55%,
rgba(233,238,246,.45) 160%
) !important;
border: 2px solid rgba(243,201,105,.40) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.55);
overflow: hidden !important;
}
/* testo dentro card */
#workshop.ws-invert .ws-card *{
color: rgba(5,8,22,.92);
}
/* CTA button dentro card */
#workshop.ws-invert .ws-card a,
#workshop.ws-invert .ws-card .btn{
background: rgba(42,121,197,.95) !important;
color: rgba(233,238,246,.98) !important;
border: 1px solid rgba(233,238,246,.28) !important;
}
/* TITOLI METAL 3D (glam oro/platino) */
@supports (-webkit-background-clip: text) or (background-clip: text){
#workshop.ws-invert .ws-card h3,
#workshop.ws-invert .ws-card .card-title{
font-weight: 900;
letter-spacing: -0.02em;
background-image: linear-gradient(115deg,
rgba(233,238,246,.98) 0%,
rgba(246,240,228,.95) 26%,
rgba(243,201,105,.92) 50%,
rgba(246,240,228,.95) 72%,
rgba(233,238,246,.98) 100%
);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 3D depth */
text-shadow:
0 1px 0 rgba(0,0,0,.18),
0 2px 0 rgba(0,0,0,.12),
0 10px 26px rgba(0,0,0,.28);
animation: ws-title-shimmer 3.8s linear infinite;
}
@keyframes ws-title-shimmer{
0% { background-position: 0% 50%; }
100% { background-position: 220% 50%; }
}
}
/* PILL WhatsApp (terza “scheda”) */
#workshop.ws-invert .ws-pill{
margin-top: 26px;
padding: 14px 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(233,238,246,.08);
border: 1px solid rgba(233,238,246,.18);
color: rgba(233,238,246,.92);
box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
/* =========================================================
ADSUMZ MANUAL ZENON MOTION — Workshop (3 elementi)
========================================================= */
#workshop.ws-motion .ws-card,
#workshop.ws-motion .ws-pill{
opacity: 0;
filter: blur(2px);
translate: 0 12px;
scale: .99;
transition: opacity .85s ease, translate .85s ease, filter .85s ease, scale .85s ease;
will-change: opacity, translate, filter;
}
#workshop.ws-motion .ws-left{ translate: -120px 12px; }
#workshop.ws-motion .ws-right{ translate: 120px 12px; transition-delay: .14s; }
#workshop.ws-motion .ws-up{ translate: 0 34px; transition-delay: .28s; }
/* stato finale quando attivo */
#workshop.ws-in .ws-card,
#workshop.ws-in .ws-pill{
opacity: 1;
filter: blur(0);
translate: 0 0;
scale: 1;
}
/* mobile */
@media (max-width: 980px){
#workshop.ws-invert{ padding: 64px 0; }
}
/* riduci motion */
@media (prefers-reduced-motion: reduce){
#workshop.ws-motion .ws-card,
#workshop.ws-motion .ws-pill{
opacity: 1 !important;
translate: 0 0 !important;
filter: none !important;
transition: none !important;
}
#workshop.ws-invert .ws-card h3,
#workshop.ws-invert .ws-card .card-title{
animation: none !important;
-webkit-text-fill-color: unset;
color: rgba(5,8,22,.92);
}
}
/* =========================================================
WORKSHOP — FIX REALE (negativo + stop ghost reveal)
Incolla IN FONDO ad ads.css
========================================================= */
/* 1) Negativo vero sulla sezione */
#workshop.ws-invert{
background: radial-gradient(1200px 620px at 50% 20%,
rgba(11,42,69,.68) 0%,
rgba(5,8,22,.94) 55%,
rgba(5,8,22,1) 100%
) !important;
color: rgba(233,238,246,.92) !important;
}
/* 2) Pannello interno: NON deve restare “light” */
#workshop.ws-invert .ads-panel-light.ws-panel{
background: rgba(5,8,22,.32) !important;
border: 1px solid rgba(233,238,246,.16) !important;
box-shadow: 0 26px 86px rgba(0,0,0,.60) !important;
border-radius: 26px !important;
backdrop-filter: blur(10px);
}
/* 3) STOP effetto fantasma del sistema reveal SOLO nel workshop */
#workshop.ws-invert /* =========================================================
ADS MOTION STYLE — Workshop (3 elementi: sx, dx, su)
========================================================= */
#workshop.ws-motion .ws-card,
#workshop.ws-motion .ws-pill{
opacity: 0;
filter: blur(2px);
translate: 0 12px;
scale: .99;
transition: opacity .85s ease, translate .85s ease, filter .85s ease, scale .85s ease;
will-change: opacity, translate, filter;
}
#workshop.ws-motion .ws-left{ translate: -120px 12px; }
#workshop.ws-motion .ws-right{ translate: 120px 12px; transition-delay: .14s; }
#workshop.ws-motion .ws-up{ translate: 0 34px; transition-delay: .28s; }
#workshop.ws-in .ws-card,
#workshop.ws-in .ws-pill{
opacity: 1;
filter: blur(0);
translate: 0 0;
scale: 1;
}
/* =========================================================
WORKSHOP — VIDEO VISIBILE + CONTRASTO (TUNE)
Incolla IN FONDO a ads.css
========================================================= */
/* MANOPOLE: alza/abbassa qui */
#workshop.ws-invert{
--ws-scrim: .42; /* 0.30 = vedi più video | 0.55 = più leggibile */
--ws-panel: .44; /* 0.30 = più trasparente | 0.60 = più contrasto */
}
/* 1) NON coprire il video con un background pieno: usa uno scrim trasparente */
#workshop.ws-invert{
background: transparent !important;
position: relative;
}
#workshop.ws-invert::before{
content:"";
position:absolute;
inset: 0;
pointer-events:none;
/* scrim trasparente: lascia vedere il video sotto */
background: radial-gradient(1100px 560px at 50% 18%,
rgba(11,42,69,var(--ws-scrim)) 0%,
rgba(5,8,22,calc(var(--ws-scrim) + .10)) 55%,
rgba(5,8,22,calc(var(--ws-scrim) + .18)) 100%
);
}
/* porta contenuto sopra allo scrim */
#workshop.ws-invert .container,
#workshop.ws-invert .ws-panel{
position: relative;
z-index: 1;
}
/* 2) Pannello glass scuro (leggibile ma non “muro”) */
#workshop.ws-invert .ads-panel-light.ws-panel{
background: rgba(5,8,22,var(--ws-panel)) !important;
border: 1px solid rgba(233,238,246,.18) !important;
box-shadow: 0 28px 92px rgba(0,0,0,.62) !important;
backdrop-filter: blur(14px) saturate(120%);
}
/* 3) Head più leggibile sul video */
#workshop.ws-invert .section-head h2{
color: rgba(233,238,246,.98) !important;
text-shadow: 0 10px 30px rgba(0,0,0,.65);
}
#workshop.ws-invert .section-head p{
color: rgba(233,238,246,.78) !important;
text-shadow: 0 10px 26px rgba(0,0,0,.55);
}
/* 4) Card: più “piene” e testo più scuro (niente effetto lavato) */
#workshop.ws-invert .ws-card{
background: linear-gradient(135deg,
rgba(246,240,228,.97) 0%,
rgba(246,240,228,.93) 55%,
rgba(233,238,246,.48) 160%
) !important;
border: 2px solid rgba(243,201,105,.48) !important;
box-shadow:
0 28px 78px rgba(0,0,0,.58),
inset 0 0 0 1px rgba(255,255,255,.58) !important;
}
#workshop.ws-invert .ws-card p{
color: rgba(5,8,22,.88) !important;
}
/* 5) Titolo metal: più contrasto + “stacco” */
@supports (-webkit-background-clip: text) or (background-clip: text){
#workshop.ws-invert .ws-metal-title{
background-image: linear-gradient(115deg,
rgba(233,238,246,1) 0%,
rgba(246,240,228,.98) 22%,
rgba(243,201,105,.98) 50%,
rgba(246,240,228,.98) 76%,
rgba(233,238,246,1) 100%
) !important;
text-shadow:
0 2px 0 rgba(0,0,0,.22),
0 12px 28px rgba(0,0,0,.30) !important;
}
}
/* =========================================================
WORKSHOP — METAL MODE (meno blu, più metal, +10% testo, 3D)
Incolla IN FONDO ad ads.css
========================================================= */
#workshop.ws-invert{
--ws-metal-1: rgba(11,42,69,.92); /* Deep Ocean */
--ws-metal-2: rgba(5,8,22,.96); /* Midnight Navy */
--ws-platinum: rgba(233,238,246,.34);
--ws-platinum-strong: rgba(233,238,246,.46);
--ws-gold: rgba(243,201,105,.68);
--ws-steel: rgba(42,121,197,.85); /* Steel Blue (solo glow) */
}
/* CARD: da light a metal dark */
#workshop.ws-invert .ws-card{
background: linear-gradient(135deg, var(--ws-metal-1) 0%, var(--ws-metal-2) 100%) !important;
border: 2px solid var(--ws-platinum-strong) !important;
box-shadow:
0 28px 86px rgba(0,0,0,.66),
inset 0 0 0 1px rgba(233,238,246,.10) !important;
}
/* TESTI: +10% e più leggibili */
#workshop.ws-invert .ws-card p{
font-size: 1.10em !important; /* +10% */
line-height: 1.68 !important;
color: rgba(233,238,246,.78) !important;
}
#workshop.ws-invert .ws-card a,
#workshop.ws-invert .ws-card .btn{
font-size: 1.05em !important;
}
/* TITOLI: metal 3D più deciso */
@supports (-webkit-background-clip:text) or (background-clip:text){
#workshop.ws-invert .ws-metal-title{
background-image: linear-gradient(115deg,
rgba(233,238,246,1) 0%,
rgba(246,240,228,.95) 22%,
rgba(243,201,105,.95) 50%,
rgba(246,240,228,.95) 76%,
rgba(233,238,246,1) 100%
) !important;
background-size: 240% 100% !important;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:
0 1px 0 rgba(0,0,0,.40),
0 2px 0 rgba(0,0,0,.28),
0 12px 30px rgba(0,0,0,.55) !important;
filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
}
/* BOTTONI: METAL (no pieno blu) + micro glow steel */
#workshop.ws-invert .ws-card .btn.primary{
background: linear-gradient(135deg,
rgba(233,238,246,.18) 0%,
rgba(233,238,246,.08) 55%,
rgba(243,201,105,.10) 100%
) !important;
border: 1px solid rgba(233,238,246,.40) !important;
color: rgba(233,238,246,.96) !important;
box-shadow:
0 16px 44px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.10) !important;
position: relative;
overflow: hidden;
}
/* sheen sul bottone */
#workshop.ws-invert .ws-card .btn.primary::before{
content:"";
position:absolute;
inset:-2px;
background: linear-gradient(120deg,
transparent 0%,
rgba(233,238,246,.18) 45%,
rgba(243,201,105,.14) 55%,
transparent 100%
);
transform: translateX(-55%);
opacity: .70;
transition: transform .8s ease;
}
#workshop.ws-invert .ws-card .btn.primary:hover::before{
transform: translateX(20%);
}
/* glow steel SOLO in hover (così non “azzurra” tutto) */
#workshop.ws-invert .ws-card .btn.primary:hover{
border-color: rgba(233,238,246,.55) !important;
box-shadow:
0 18px 52px rgba(0,0,0,.62),
0 0 0 3px rgba(42,121,197,.12) !important;
transform: translateY(-1px);
}
/* pill whatsapp: più metal, meno panna */
#workshop.ws-invert .ws-pill .btn.ghost{
background: rgba(233,238,246,.06) !important;
border: 1px solid rgba(233,238,246,.20) !important;
color: rgba(233,238,246,.94) !important;
box-shadow: 0 18px 46px rgba(0,0,0,.50) !important;
}
/* PF MG — titolo "LA DIFFERENZA È QUI" +20% */
#perche-funziona .pf-mg-kicker{
font-size: 13.2px !important; /* era 12px → +10% */
}
/* PF MG — scheda blu: bullet -10% (titolo invariato) */
#perche-funziona .ads-metal-card ul{
font-size: 0.90em !important;
}
/* WORKSHOP — titoli in MAIUSCOLO + -20% */
#workshop .ws-metal-title{
text-transform: uppercase !important;
font-size: 0.80em !important; /* -20% */
letter-spacing: 0.06em !important;
}
#workshop .workshop h3{
text-transform: uppercase !important;
font-size: 0.80em !important;
letter-spacing: 0.06em !important;
}
/* WORKSHOP — titoli MAIUSCOLO: riduzione extra -20% */
#workshop .ws-metal-title{
font-size: 0.64em !important; /* 0.80 * 0.80 = 0.64 */
}
#workshop .workshop h3{
font-size: 0.64em !important;
}
/* WORKSHOP — titoli MAIUSCOLO: ancora -20% */
#workshop .ws-metal-title{
font-size: 0.512em !important; /* 0.64 * 0.80 = 0.512 */
}
#workshop .ws-metal-title{ letter-spacing: 0.04em !important; }
/* WORKSHOP — titoli MAIUSCOLO: -40% extra */
#workshop .ws-metal-title{
font-size: 0.3072em !important; /* 0.512 * 0.60 */
}
#workshop .ws-metal-title{ letter-spacing: 0.03em !important; }
/* =========================================
WORKSHOP — Titoli: stesso FONT dei 4 STEP
========================================= */
/* prova a “pescare” la variabile font già usata nel sito (senza rompere nulla) */
:root{
--ads-font-steps: var(--font-title, var(--font-display, var(--font-heading, inherit)));
}
#workshop .card.workshop h3{
font-family: var(--ads-font-steps) !important; /* <-- QUI si uniforma */
text-transform: uppercase;
/* lascia pure le tue regole di size (40% in meno) se le hai già */
}
/* WORKSHOP — TITOLI: font come 4 step + MAIUSCOLO + size forzata */
#workshop .card.workshop h3{
font-family: var(--font-title, var(--font-display, var(--font-heading, inherit))) !important;
text-transform: uppercase !important;
/* QUI decidi la dimensione (metti il valore che vuoi) */
font-size: 16px !important;
letter-spacing: 0.05em !important;
line-height: 1.1 !important;
}
/* WORKSHOP — titoli +10% */
#workshop .card.workshop h3{
font-size: 17.6px !important; /* 16px * 1.10 */
}
/* WORKSHOP — titoli +30% */
#workshop .card.workshop h3{
font-size: 17.6px !important; /* 16px * 1.10 */
}
/* =========================================================
WORKSHOP — TITOLI +10% (Lara + Manuel)
Incolla in FONDO a ads.css
========================================================= */
#workshop .grid.workshops .card.workshop h3{
/* prima: clamp(20px, 1.2vw + 14px, 28px) → +10% */
font-size: clamp(22px, 1.32vw + 15px, 31px) !important;
}
/* =========================================================
WORKSHOP — TITOLI -40% (rispetto alla dimensione attuale)
Incolla in FONDO a ads.css
========================================================= */
#workshop .grid.workshops .card.workshop h3{
/* da: clamp(22px, 1.32vw + 15px, 31px) → -40% */
font-size: clamp(13.2px, 0.792vw + 9px, 18.6px) !important;
}
/* WORKSHOP — TITOLI: +10% rispetto al -40% */
#workshop .grid.workshops .card.workshop h3{
font-size: clamp(14.52px, 0.8712vw + 9.9px, 20.46px) !important;
}
/* ==============================
CONTATTI — GLASS ADS (come “Scegli da dove partire”)
Social chiari + testo ad alto contrasto
================================ */
/* Palette ADS */
:root{
--ads-navy:#050816;
--ads-ocean:#0B2A45;
--ads-steel:#2A79C5;
--ads-plat:#E9EEF6;
--ads-ivory:#F6F0E4;
}
/* 1) Pannello grande (quello bianco) -> glass scuro */
:is(#contatti, #contacts, #contact) > :is(.container, .wrap, .section-inner, .inner, .content, .box){
background: linear-gradient(180deg, rgba(11,42,69,.45), rgba(5,8,22,.68));
border: 1px solid rgba(233,238,246,.30);
border-radius: 22px;
box-shadow: 0 18px 60px rgba(5,8,22,.55);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
}
/* Titolo + sottotitolo leggibili */
:is(#contatti, #contacts, #contact) h2,
:is(#contatti, #contacts, #contact) .title{
color: var(--ads-ivory);
text-shadow: 0 2px 10px rgba(5,8,22,.55);
}
:is(#contatti, #contacts, #contact) p,
:is(#contatti, #contacts, #contact) .subtitle{
color: rgba(233,238,246,.86);
}
/* 2) Card interne (Manuel / Lara) -> glass scuro */
:is(#contatti, #contacts, #contact) :is(.card, .contact-card, .contact-box){
background: linear-gradient(180deg, rgba(11,42,69,.35), rgba(5,8,22,.35));
border: 1px solid rgba(233,238,246,.26);
border-radius: 16px;
box-shadow: 0 14px 40px rgba(5,8,22,.45);
}
/* Testo card ad alto contrasto */
:is(#contatti, #contacts, #contact) :is(.card, .contact-card, .contact-box) *{
color: rgba(233,238,246,.92);
}
:is(#contatti, #contacts, #contact) :is(.card, .contact-card, .contact-box) strong,
:is(#contatti, #contacts, #contact) :is(.card, .contact-card, .contact-box) h3{
color: var(--ads-ivory);
}
/* Link (email/sito) leggibili */
:is(#contatti, #contacts, #contact) a{
color: var(--ads-plat);
text-decoration: underline;
text-decoration-color: rgba(233,238,246,.35);
text-underline-offset: 3px;
}
:is(#contatti, #contacts, #contact) a:hover{
color: var(--ads-steel);
text-decoration-color: rgba(42,121,197,.55);
}
/* 3) Social: DEVONO restare chiari */
:is(#contatti, #contacts, #contact) :is(.social a, .social-links a, .social-icons a){
background: rgba(233,238,246,.92) !important;
border: 1px solid rgba(233,238,246,.85) !important;
color: var(--ads-ocean) !important;
box-shadow: 0 10px 24px rgba(5,8,22,.35);
}
:is(#contatti, #contacts, #contact) :is(.social a:hover, .social-links a:hover, .social-icons a:hover){
background: rgba(246,240,228,.95) !important; /* ivory */
transform: translateY(-1px);
}
/* Se usi SVG o FontAwesome dentro i bottoni social */
:is(#contatti, #contacts, #contact) :is(.social a svg, .social-links a svg, .social-icons a svg){
fill: currentColor !important;
}
:is(#contatti, #contacts, #contact) :is(.social a i, .social-links a i, .social-icons a i){
color: currentColor !important;
}
/* Mobile: un filo più aria */
@media (max-width: 640px){
:is(#contatti, #contacts, #contact) > :is(.container, .wrap, .section-inner, .inner, .content, .box){
border-radius: 18px;
}
}
/* =========================
CONTATTI — ADS GLASS STYLE
(come "Scegli da dove partire")
========================= */
:root{
--ads-navy:#050816;
--ads-ocean:#0B2A45;
--ads-steel:#2A79C5;
--ads-plat:#E9EEF6;
--ads-ivory:#F6F0E4;
}
/* Sezione contatti (aggancio robusto) */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"]) {
color: rgba(246,240,228,.92);
}
/* PANNELLO GRANDE (quello con titolo Contatti + le 2 card) */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
> :where(.container,.wrap,.wrapper,.panel,.section-inner,.content,.box),
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.contacts-wrapper,.contacts-panel,.contacts-container,.contacts-box) {
background:
radial-gradient(1100px 520px at 50% 0%, rgba(42,121,197,.18) 0%, transparent 60%),
linear-gradient(180deg, rgba(11,42,69,.55) 0%, rgba(5,8,22,.74) 100%) !important;
border: 1px solid rgba(233,238,246,.26) !important;
box-shadow: 0 24px 90px rgba(5,8,22,.60) !important;
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
}
/* Titolo + sottotitolo ben leggibili */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:is(h1,h2,h3,.section-title,.title){
color: rgba(246,240,228,.96) !important;
text-shadow: 0 10px 30px rgba(5,8,22,.55);
}
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:is(p,.subtitle,.section-subtitle,.desc){
color: rgba(233,238,246,.86) !important;
}
/* CARD CONTATTI (Manuel / Lara) — glass scuro + bordo platino */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.contact-card,.contact-box,.contacts-card,.contact-item,[class*="contact"][class*="card"],[class*="contact"][class*="box"]) {
position: relative;
background:
linear-gradient(180deg, rgba(11,42,69,.58) 0%, rgba(5,8,22,.58) 100%) !important;
border: 1px solid rgba(233,238,246,.22) !important;
box-shadow: 0 18px 60px rgba(5,8,22,.55) !important;
border-radius: 20px !important;
overflow: hidden;
}
/* sheen premium leggero */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.contact-card,.contact-box,.contacts-card,.contact-item,[class*="contact"][class*="card"],[class*="contact"][class*="box"])::before{
content:"";
position:absolute; inset:0;
background: linear-gradient(120deg,
rgba(233,238,246,.16) 0%,
rgba(233,238,246,.06) 22%,
transparent 45%,
rgba(42,121,197,.10) 100%);
opacity:.75;
pointer-events:none;
}
/* Testo dentro le card: contrasto alto */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.contact-card,.contact-box,.contacts-card,.contact-item,[class*="contact"][class*="card"],[class*="contact"][class*="box"])
:is(h1,h2,h3,h4,strong){
color: rgba(246,240,228,.96) !important;
}
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.contact-card,.contact-box,.contacts-card,.contact-item,[class*="contact"][class*="card"],[class*="contact"][class*="box"])
:is(p,li,span,small,div){
color: rgba(233,238,246,.88) !important;
}
/* Link (mail/whatsapp/sito) in steel blue ma leggibili */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.contact-card,.contact-box,.contacts-card,.contact-item,[class*="contact"][class*="card"],[class*="contact"][class*="box"])
a{
color: rgba(42,121,197,.95) !important;
text-decoration: none;
}
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.contact-card,.contact-box,.contacts-card,.contact-item,[class*="contact"][class*="card"],[class*="contact"][class*="box"])
a:hover{
color: rgba(246,240,228,.96) !important;
}
/* SOCIAL: devono rimanere CHIARI (ivory) */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.social, .socials, .social-icons, .social-links) a,
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
a:where(.social-btn,.social-icon,.icon-btn){
background: rgba(246,240,228,.94) !important;
border: 1px solid rgba(233,238,246,.70) !important;
box-shadow: 0 10px 30px rgba(5,8,22,.35) !important;
}
/* Icone dentro i bottoni social: scure (leggibili) */
:where(section[id*="contatti"], section[id*="contact"], section[class*="contatti"], section[class*="contact"])
:where(.social, .socials, .social-icons, .social-links) a *{
color: rgba(5,8,22,.92) !important;
fill: rgba(5,8,22,.92) !important;
}
/* =========================
CONTATTI — HOTFIX CONTRASTO (ADS GLASS DARK)
========================= */
:root{
--ads-navy:#050816;
--ads-ocean:#0B2A45;
--ads-steel:#2A79C5;
--ads-plat:#E9EEF6;
--ads-ivory:#F6F0E4;
}
/* 1) Sezione contatti: testo sempre visibile (niente opacità strani) */
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"]) *{
opacity: 1 !important;
}
/* 2) Pannello grande: via ivory -> glass scuro */
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.panel,.wrapper,.container,.section-inner,.content,.box,.contacts-wrapper,.contacts-panel,.contacts-container){
background:
radial-gradient(1100px 520px at 50% 0%, rgba(42,121,197,.18) 0%, transparent 60%),
linear-gradient(180deg, rgba(11,42,69,.58) 0%, rgba(5,8,22,.78) 100%) !important;
border: 1px solid rgba(233,238,246,.26) !important;
box-shadow: 0 24px 90px rgba(5,8,22,.60) !important;
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
}
/* 3) Titolo + sottotitolo: contrasto alto */
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:is(h1,h2,h3,.section-title,.title){
color: rgba(246,240,228,.96) !important;
text-shadow: 0 10px 30px rgba(5,8,22,.55) !important;
}
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:is(.subtitle,.section-subtitle,p){
color: rgba(233,238,246,.86) !important;
text-shadow: 0 8px 24px rgba(5,8,22,.40) !important;
}
/* 4) Card Manuel/Lara: glass scuro + bordo platino */
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.contact-card,.contacts-card,.contact-box,.contact-item,.card,.info-card){
background:
linear-gradient(180deg, rgba(11,42,69,.62) 0%, rgba(5,8,22,.62) 100%) !important;
border: 1px solid rgba(233,238,246,.22) !important;
box-shadow: 0 18px 60px rgba(5,8,22,.55) !important;
border-radius: 22px !important;
overflow: hidden;
position: relative;
}
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.contact-card,.contacts-card,.contact-box,.contact-item,.card,.info-card)::before{
content:"";
position:absolute; inset:0;
background: linear-gradient(120deg,
rgba(233,238,246,.16) 0%,
rgba(233,238,246,.06) 22%,
transparent 45%,
rgba(42,121,197,.10) 100%);
pointer-events:none;
}
/* 5) Testo dentro card: super leggibile */
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.contact-card,.contacts-card,.contact-box,.contact-item,.card,.info-card)
:is(h1,h2,h3,h4,strong){
color: rgba(246,240,228,.96) !important;
}
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.contact-card,.contacts-card,.contact-box,.contact-item,.card,.info-card)
:is(p,li,span,small,div){
color: rgba(233,238,246,.88) !important;
}
/* 6) Link (email/telefono/pagina): più visibili */
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.contact-card,.contacts-card,.contact-box,.contact-item,.card,.info-card) a{
color: rgba(42,121,197,.98) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
text-shadow: 0 8px 22px rgba(42,121,197,.20);
}
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.contact-card,.contacts-card,.contact-box,.contact-item,.card,.info-card) a:hover{
color: rgba(246,240,228,.96) !important;
}
/* 7) Social: restano chiari (come richiesto) */
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.social,.socials,.social-icons,.social-links) a{
background: rgba(246,240,228,.94) !important;
border: 1px solid rgba(233,238,246,.70) !important;
box-shadow: 0 10px 30px rgba(5,8,22,.35) !important;
}
:where(#contatti,#contact,#contacts,.contatti,.contact,.contacts,section[id*="contatt"],section[id*="contact"],section[class*="contatt"],section[class*="contact"])
:where(.social,.socials,.social-icons,.social-links) a *{
color: rgba(5,8,22,.92) !important;
fill: rgba(5,8,22,.92) !important;
}
/* ==============================
CONTATTI – ADS METAL TITLE
Stesso effetto dei titoli WORKSHOP (metal + shimmer)
============================== */
:is(#contatti,#contacts,#contact) h2{
text-transform: uppercase;
letter-spacing: .18em;
font-weight: 900;
font-size: clamp(22px, 2.8vw, 40px);
line-height: 1.05;
margin: 0 0 10px;
color: #0B2A45; /* fallback */
text-shadow: 0 12px 30px rgba(5,8,22,.55);
}
@supports (-webkit-background-clip:text) or (background-clip:text){
:is(#contatti,#contacts,#contact) h2{
background-image: linear-gradient(110deg,
rgba(233,238,246,.95) 0%,
rgba(246,240,228,.92) 28%,
rgba(233,238,246,.98) 52%,
rgba(170,180,195,.70) 78%,
rgba(233,238,246,.92) 100%);
background-size: 240% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-stroke: 1px rgba(5,8,22,.45);
text-shadow:
0 1px 0 rgba(255,255,255,.20),
0 14px 34px rgba(5,8,22,.62);
animation: ads-text-shimmer 6.5s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce){
:is(#contatti,#contacts,#contact) h2{
animation: none;
background-position: 50% 50%;
}
}
/* Titoli dentro le card (Contatti Manuel/Lara) */
:is(#contatti,#contacts,#contact) .contact-card h3{
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 900;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
:is(#contatti,#contacts,#contact) .contact-card h3{
background-image: linear-gradient(110deg,
rgba(233,238,246,.95) 0%,
rgba(246,240,228,.90) 45%,
rgba(233,238,246,.95) 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 10px 22px rgba(5,8,22,.55);
animation: ads-text-shimmer 7.2s ease-in-out infinite;
}
}
/* Sottotitolo più leggibile */
:is(#contatti,#contacts,#contact) p{
color: rgba(5,8,22,.72);
font-weight: 500;
}
/* Testo card più contrasto */
:is(#contatti,#contacts,#contact) .contact-card{
color: rgba(233,238,246,.92);
}
:is(#contatti,#contacts,#contact) .contact-card strong{
color: rgba(246,240,228,.95);
}
:is(#contatti,#contacts,#contact) .contact-card a{
color: rgba(42,121,197,.98);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
:is(#contatti,#contacts,#contact) .contact-card a:hover{
filter: brightness(1.12);
}
/* Social chiari (come richiesto) */
:is(#contatti,#contacts,#contact) .social-icons a,
:is(#contatti,#contacts,#contact) .social-links a{
background: rgba(233,238,246,.92);
border: 1px solid rgba(233,238,246,.60);
box-shadow: 0 10px 24px rgba(5,8,22,.25);
}
/*
/* =========================================================
ADS — CLEAN THREAD (definitivo)
- Titoli coerenti (no scarpa/socolo)
- Contatti: pannello chiaro + card dark, social puliti
- Metal Glam: uguale su Workshop + Contatti (h3)
- Reveal: unico, x3 timing, usa --delay
========================================================= */
/* ---------- 1) CONTATTI: pannello chiaro (alternanza) ---------- */
#contatti .ads-panel-light{
background: linear-gradient(180deg,
rgba(246,240,228,.98) 0%,
rgba(233,238,246,.94) 100%) !important;
border: 2px solid rgba(233,238,246,.82) !important;
box-shadow:
0 34px 110px rgba(0,0,0,.50),
inset 0 0 0 1px rgba(255,255,255,.62) !important;
color: rgba(11,42,69,.92) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Titolo sezione Contatti: nero come "Perché funziona" */
#contatti .section-head h2{
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: rgba(5,8,22,.96) !important;
color: rgba(5,8,22,.96) !important;
-webkit-text-stroke: 0 !important;
letter-spacing: .02em !important;
text-transform: none !important;
font-weight: 900 !important;
text-shadow: 0 1px 0 rgba(255,255,255,.70), 0 10px 22px rgba(0,0,0,.14) !important;
}
#contatti .section-head p{
color: rgba(11,42,69,.78) !important;
text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
}
/* Niente tray / rettangoli sotto o tra le card */
#contatti .ads-contacts-inner{
background: transparent !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
gap: 26px !important;
}
/* Card Manuel/Lara: restano DARK premium */
#contatti .ads-contact-card.ads-card-light{
background: linear-gradient(135deg,
rgba(11,42,69,.92) 0%,
rgba(5,8,22,.96) 100%) !important;
border: 2px solid rgba(233,238,246,.42) !important;
box-shadow:
0 28px 86px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(233,238,246,.10) !important;
color: rgba(233,238,246,.92) !important;
}
/* Testi nelle card */
#contatti .ads-contact-card :is(p,li,span,small){
color: rgba(233,238,246,.84) !important;
}
#contatti .ads-contact-card strong{
color: rgba(246,240,228,.96) !important;
}
#contatti .ads-contact-card a:not(.ads-social-icon){
color: rgba(42,121,197,.92) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
/* Social: via riga scura / box */
#contatti .ads-contact-social,
#contatti .ads-social-icons{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#contatti .ads-contact-social{
padding-top: 0 !important;
margin-top: 10px !important;
}
#contatti .ads-social-icons{
padding: 0 !important;
margin: 0 !important;
gap: 10px !important;
}
#contatti .ads-social-icons::before,
#contatti .ads-social-icons::after{
content: none !important;
display: none !important;
}
#contatti .ads-contact-social-label{
background: none !important;
padding: 0 !important;
}
/* ---------- 2) METAL GLAM UNICO: Workshop + Contatti (h3) ---------- */
:root{
--ads-metal-shadow-1: rgba(0,0,0,.22);
--ads-metal-shadow-2: rgba(0,0,0,.32);
--ads-metal-stroke: rgba(5,8,22,.50);
/* puoi abbassare questo se lo vuoi meno “oro” */
--ads-metal-gold: rgba(243,201,105,.92);
}
@keyframes ads-metal-sheen{
0% { background-position: 0% 50%; }
100% { background-position: 240% 50%; }
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
/* Stesso identico carattere / tracking */
#workshop .ws-metal-title,
#contatti .ads-contact-card h3{
text-transform: uppercase !important;
letter-spacing: .08em !important;
font-weight: 900 !important;
background-image: linear-gradient(115deg,
rgba(233,238,246,1) 0%,
rgba(246,240,228,.98) 22%,
var(--ads-metal-gold) 50%,
rgba(246,240,228,.98) 76%,
rgba(233,238,246,1) 100%
) !important;
background-size: 240% 100% !important;
background-position: 50% 50% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
-webkit-text-stroke: .55px var(--ads-metal-stroke) !important;
text-shadow:
0 2px 0 var(--ads-metal-shadow-1),
0 12px 28px var(--ads-metal-shadow-2) !important;
animation: none !important; /* identici sempre */
filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
/* Sheen solo hover (premium, zero differenze tra le due card) */
@media (hover:hover) and (pointer:fine){
#workshop .ws-card:hover .ws-metal-title,
#contatti .ads-contact-card:hover h3{
animation: ads-metal-sheen 6.8s ease-in-out infinite !important;
}
}
}
/* ---------- 3) REVEAL (unico) — x3 timing + usa --delay ---------- */
.reveal{
--rx: 0px;
--ry: 54px;
opacity: 0 !important;
transform: translate3d(var(--rx), var(--ry), 0) !important;
transition:
opacity 2100ms cubic-bezier(.2,.8,.2,1),
transform 2100ms cubic-bezier(.2,.8,.2,1) !important;
transition-delay: var(--delay, 0ms) !important;
will-change: opacity, transform;
}
.reveal--up{ --rx: 0px; --ry: 66px; }
.reveal--left{ --rx: -66px; --ry: 0px; }
.reveal--right{ --rx: 66px; --ry: 0px; }
.reveal.is-visible{
opacity: 1 !important;
--rx: 0px;
--ry: 0px;
}
@media (prefers-reduced-motion: reduce){
.reveal{
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =========================================
CHI SIAMO — Blue ADS + Glow Metal (match preview)
(solo #chi-siamo, non tocca le altre sezioni)
========================================= */
#chi-siamo .ads-panel-light{
background: linear-gradient(135deg, rgba(11,42,69,.88) 0%, rgba(5,8,22,.94) 55%, rgba(11,42,69,.86) 100%) !important;
border: 1px solid rgba(233,238,246,.18) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.06);
color: rgba(233,238,246,.92) !important;
position: relative;
overflow: hidden;
}
/* pattern diagonale soft come preview */
#chi-siamo .ads-panel-light::before{
content:"";
position:absolute; inset:0;
background:
repeating-linear-gradient(135deg,
rgba(233,238,246,.06) 0 2px,
rgba(0,0,0,0) 2px 18px);
opacity:.22;
pointer-events:none;
}
/* “card” per il blocco testo a sinistra */
#chi-siamo .two-cols .col.text{
background: linear-gradient(180deg, rgba(11,42,69,.40) 0%, rgba(5,8,22,.55) 100%);
border: 1px solid rgba(233,238,246,.14);
border-radius: 18px;
padding: 26px 28px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
/* Titolo metal (non blu-gleam) */
#chi-siamo .two-cols .col.text h2{
font-weight: 900;
letter-spacing: .02em;
text-shadow: 0 18px 46px rgba(0,0,0,.65);
background: linear-gradient(180deg, #F6F0E4 0%, #E9EEF6 42%, #DCE3EF 55%, #E9EEF6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#chi-siamo .two-cols .col.text p{
color: rgba(233,238,246,.82);
}
/* Uniformo le card Manuel/Lara entrambe dark */
#chi-siamo .founder-card{
background: linear-gradient(145deg, rgba(11,42,69,.85) 0%, rgba(5,8,22,.96) 70%) !important;
border: 1px solid rgba(233,238,246,.18) !important;
box-shadow:
0 18px 46px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.06);
color: rgba(233,238,246,.92) !important;
}
#chi-siamo .founder-card h3{ color: rgba(233,238,246,.98) !important; }
#chi-siamo .founder-card p{ color: rgba(233,238,246,.80) !important; }
/* ring avatar più “metal” (oro leggero, non invadente) */
#chi-siamo .founder-card .avatar{
border-color: rgba(243,201,105,.55) !important;
box-shadow:
0 0 0 6px rgba(5,8,22,.65),
0 18px 40px rgba(0,0,0,.45);
}
/* Bottoni “metal style” (rimangono) */
#chi-siamo .pill-story{
background: linear-gradient(180deg, #F6F0E4 0%, #E9EEF6 45%, #F6F0E4 100%) !important;
border: 1px solid rgba(243,201,105,.55) !important;
color: #050816 !important;
box-shadow:
0 14px 30px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.65);
}
#chi-siamo .pill-story:hover{
transform: translateY(-1px);
box-shadow:
0 18px 40px rgba(0,0,0,.40),
inset 0 1px 0 rgba(255,255,255,.75);
}
/* mobile breathing */
@media (max-width: 980px){
#chi-siamo .two-cols .col.text{ padding: 22px 22px; }
}/* =========================
ADS HEADER – chirurgia v1
1) via quadratino sotto logo
2) testo più oro / più giallo / più chiaro
3) meno ombra
========================= */
:root{
--ads-gold-1:#F7E7B0; /* light gold */
--ads-gold-2:#D7B46A; /* deeper gold */
--ads-gold-3:#FFF3CF; /* highlight */
--ads-tshadow:rgba(0,0,0,.35);
}
/* 1) TOGLIERE QUADRATINO SOTTO IL LOGO (bg/bordi/pseudo-elementi) */
header .logo, header .brand, header .site-logo, header .navbar-brand,
header .logo a, header .brand a, header .site-logo a, header .navbar-brand a{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
header .logo::before, header .logo::after,
header .brand::before, header .brand::after,
header .site-logo::before, header .site-logo::after,
header .navbar-brand::before, header .navbar-brand::after{
content: none !important;
display: none !important;
}
header .logo img, header .brand img, header .site-logo img, header .navbar-brand img{
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* (accessibilità ok) niente box “random”, ma focus pulito solo da tastiera */
header .logo a:focus, header .brand a:focus, header .site-logo a:focus, header .navbar-brand a:focus{
outline: none;
}
header .logo a:focus-visible, header .brand a:focus-visible,
header .site-logo a:focus-visible, header .navbar-brand a:focus-visible{
outline: 2px solid rgba(233,238,246,.65);
outline-offset: 4px;
border-radius: 10px;
}
/* 2) TESTO MENU + ORO + GIALLO + CHIARO (metal gradient) */
header nav a,
header .nav a,
header .menu a,
header .nav-link,
header .site-title,
header .brand-name,
header .logo-text{
color: var(--ads-gold-1) !important;
background-image: linear-gradient(180deg, var(--ads-gold-3) 0%, var(--ads-gold-1) 45%, var(--ads-gold-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* hover/attivo ancora più “oro chiaro” */
header nav a:hover,
header nav a:focus-visible,
header nav a[aria-current="page"],
header .nav-link.active{
background-image: linear-gradient(180deg, #FFF7DF 0%, #F7E7B0 45%, #E1C07A 100%);
}
/* 3) MENO OMBRA (testo + header) */
header nav a,
header .nav a,
header .menu a,
header .nav-link,
header .site-title,
header .brand-name,
header .logo-text{
text-shadow: 0 1px 1px var(--ads-tshadow) !important;
filter: none !important;
}
/* se avevi ombra pesante sul contenitore header, la alleggeriamo */
header, .site-header{
box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}/* =========================
ADS HEADER – NO RIGA / NO QUADRATTO LOGO
========================= */
/* 1) TOGLIERE LA RIGA (di solito è border-bottom o shadow inset) */
header, .site-header, .header, .navbar, .topbar{
border-bottom: 0 !important;
outline: 0 !important;
/* sovrascrive eventuale shadow inset che crea la riga */
box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
}
header::before, header::after,
.site-header::before, .site-header::after,
.navbar::before, .navbar::after,
.topbar::before, .topbar::after{
content: none !important;
display: none !important;
}
/* a volte la riga è sul wrapper interno del menu */
header nav, header .nav, header .menu, header .navbar-nav, header .nav-wrap{
border-bottom: 0 !important;
box-shadow: none !important;
}
/* 2) TOGLIERE IL “QUADRATTINO” DEL LOGO (bg/bordo/pseudo) */
header .logo, header .brand, header .site-logo, header .navbar-brand,
header .logo a, header .brand a, header .site-logo a, header .navbar-brand a{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
header .logo::before, header .logo::after,
header .brand::before, header .brand::after,
header .site-logo::before, header .site-logo::after,
header .navbar-brand::before, header .navbar-brand::after{
content: none !important;
display: none !important;
}
/* se c’è una separazione “a riga” vicino al logo */
header .logo, header .brand, header .site-logo, header .navbar-brand{
border-left: 0 !important;
border-right: 0 !important;
}
/* extra: se il logo è svg/img e prende un bg */
header .logo img, header .brand img, header .site-logo img, header .navbar-brand img,
header .logo svg, header .brand svg, header .site-logo svg, header .navbar-brand svg{
background: transparent !important;
box-shadow: none !important;
}
/* (bonus) se vedi quadratini tipo “bullet” nel menu */
header nav ul, header .nav ul, header .menu ul{
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}/* ===========================
ADS — HEADER FIX (vFINAL)
1) NO quadrato/logo badge
2) NO riga/underline sotto il menu
3) Testi più grossi + un filo più ombra
(incolla IN FONDO ad ads.css)
=========================== */
.site-header{
border-bottom: 0 !important;
box-shadow: 0 18px 44px rgba(0,0,0,.42) !important;
}
/* LOGO: niente badge/quadratini */
.site-header .logo-area,
.site-header .logo-area *{
text-decoration: none !important;
}
.site-header .logo-mark,
.site-header .logo-area--clean .logo-mark{
width: auto !important;
height: auto !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.site-header .logo-mark::before,
.site-header .logo-mark::after{
content: none !important;
display: none !important;
}
.site-header .logo-img,
.site-header .logo-mark img{
height: 46px !important;
width: auto !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 0 16px rgba(0,0,0,.70) !important;
}
/* TESTI più grossi + metallo oro chiaro */
@media (min-width: 961px){
.site-header .logo-title{
font-size: 29px !important;
letter-spacing: .24em !important;
background-image: linear-gradient(180deg,#FFF7DF 0%,#F7E7B0 45%,#D7B46A 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow: 0 2px 0 rgba(0,0,0,1), 0 0 18px rgba(0,0,0,.85) !important;
}
.site-header .main-nav{
font-size: 18px !important;
gap: 26px !important;
}
}
@media (max-width: 960px){
.site-header .logo-title{ font-size: 20px !important; }
}
/* MENU: MAI la riga sotto (né hover né active) */
.site-header .main-nav a{
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
background-image: linear-gradient(180deg,#FFF7DF 0%,#F7E7B0 45%,#D7B46A 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow: 0 2px 0 rgba(0,0,0,1), 0 0 14px rgba(0,0,0,.80) !important;
}
.site-header .main-nav a::before,
.site-header .main-nav a::after{
content: none !important;
display: none !important;
}
/* CTA: niente underline */
.site-header .nav-cta::before,
.site-header .nav-cta::after{
content: none !important;
display: none !important;
}
/* =========================================================
ADS HEADER — LV HOVER FILM + METAL GLAM (TONI LOGO)
Patch finale: metti QUESTO BLOCCO IN FONDO ad ads.css
========================================================= */
/* Base: header “pulito” e trasparente (niente banda fissa) */
.site-header{
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 50 !important;
overflow: visible !important;
}
/* Pellicola “luxury” che compare SOLO on-hover (stile LV) */
.site-header::before{
content: "" !important;
display: block !important;
position: absolute;
inset: 0;
background:
radial-gradient(900px 260px at 12% 0%,
rgba(233,238,246,0.10),
transparent 60%),
radial-gradient(700px 240px at 88% 0%,
rgba(42,121,197,0.16),
transparent 58%),
linear-gradient(120deg,
rgba(5,8,22,0.84),
rgba(11,42,69,0.74));
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
opacity: 0;
transform: translateY(-6px);
transition: opacity 220ms ease-out, transform 220ms ease-out;
pointer-events: none;
z-index: 0;
}
/* micro hairline “platinum” che si accende in hover */
.site-header::after{
content: "" !important;
display: block !important;
position: absolute;
left: 7vw; right: 7vw;
bottom: 10px;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(233,238,246,0.55),
transparent);
opacity: 0;
transition: opacity 220ms ease-out;
pointer-events: none;
z-index: 0;
}
/* Hover / focus (desktop) + menu aperto (mobile via JS) */
.site-header:hover,
.site-header:focus-within,
.site-header.is-open{
box-shadow: 0 22px 58px rgba(0,0,0,0.62) !important;
}
.site-header:hover::before,
.site-header:focus-within::before,
.site-header.is-open::before{
opacity: 1;
transform: translateY(0);
}
.site-header:hover::after,
.site-header:focus-within::after,
.site-header.is-open::after{
opacity: 1;
}
/* Contenuti sopra la pellicola */
.site-header > *{
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------
LOGO (niente badge/quadratini, tono logo: oro + platino)
--------------------------------------------------------- */
.site-header .logo-mark,
.site-header .logo-area--clean .logo-mark{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
.site-header .logo-img,
.site-header .logo-mark img{
height: 44px !important;
width: auto !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
filter: drop-shadow(0 0 16px rgba(0,0,0,0.70));
}
/* Scritta “ALCHIMISTI DEI SOGNI” — metal glam elegante */
.site-header .logo-title{
font-weight: 800 !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
background-image: linear-gradient(
120deg,
rgba(246,240,228,1) 0%,
rgba(233,238,246,1) 34%,
rgba(243,201,105,0.98) 55%,
rgba(233,238,246,1) 72%,
rgba(246,240,228,1) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 2px 0 rgba(0,0,0,0.95),
0 0 22px rgba(0,0,0,0.72) !important;
}
/* ---------------------------------------------------------
MENU (metal platinum + micro glow steel, NO righe/underline)
--------------------------------------------------------- */
.site-header .main-nav{
text-transform: uppercase;
letter-spacing: 0.20em;
}
/* voci menu (escludo CTA) */
.site-header .main-nav a:not(.nav-cta){
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
background-image: linear-gradient(
90deg,
rgba(246,240,228,1),
rgba(233,238,246,1),
rgba(246,240,228,1)
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 14px rgba(0,0,0,0.86) !important;
opacity: 0.88;
transition: opacity 160ms ease-out, transform 160ms ease-out, text-shadow 160ms ease-out, background-image 160ms ease-out;
}
.site-header .main-nav a:not(.nav-cta):hover,
.site-header .main-nav a:not(.nav-cta):focus-visible{
opacity: 1;
transform: translateY(-1px);
background-image: linear-gradient(
90deg,
#ffffff,
#b7c8ff,
#ffffff
) !important;
text-shadow:
0 1px 0 rgba(0,0,0,1),
0 0 22px rgba(42,121,197,0.95) !important;
}
/* kill qualsiasi underline/pseudo del menu */
.site-header .main-nav a::before,
.site-header .main-nav a::after,
.site-header .nav-cta::before,
.site-header .nav-cta::after{
content: none !important;
display: none !important;
}
/* CTA WORKSHOP: steel blue (CTA = accento), sempre leggibile */
.site-header .nav-cta{
background: linear-gradient(135deg,
var(--ads-steel, #2A79C5),
#1f5f93) !important;
border: 1px solid rgba(233,238,246,0.85) !important;
color: #fff !important;
text-shadow: 0 1px 0 rgba(0,0,0,0.55) !important;
box-shadow:
0 18px 40px rgba(0,0,0,0.70),
inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
.site-header .nav-cta:hover{
transform: translateY(-2px);
box-shadow:
0 24px 60px rgba(0,0,0,0.80),
inset 0 1px 0 rgba(255,255,255,0.70) !important;
}
/* Mobile: niente hover → do una base leggerissima per leggibilità */
@media (hover: none){
.site-header::before{
opacity: 0.78;
transform: none;
}
.site-header::after{
opacity: 0.55;
}
}
/* piccoli ritocchi responsive */
@media (max-width: 960px){
.site-header{
padding: 10px 16px !important;
}
.site-header .logo-img,
.site-header .logo-mark img{
height: 40px !important;
}
.site-header .logo-title{
font-size: 18px !important;
letter-spacing: 0.18em !important;
}
}
/* =========================================
ADS HEADER — LV hover + MENU 1 RIGA (FIX)
incolla IN FONDO ad ads.css
========================================= */
/* Header: trasparente di base */
.site-header{
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* “Pellicola” che compare solo al passaggio mouse */
.site-header::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
opacity:0 !important;
pointer-events:none !important;
z-index:0 !important;
background:
radial-gradient(circle at 18% 0%, rgba(233,238,246,0.10), transparent 55%),
radial-gradient(circle at 85% 0%, rgba(42,121,197,0.14), transparent 55%),
linear-gradient(120deg, rgba(5,8,22,0.78), rgba(5,8,22,0.58)) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
-webkit-backdrop-filter: blur(18px) saturate(120%) !important;
transition: opacity .20s ease, transform .20s ease !important;
transform: translateY(-6px) !important;
}
@media (hover:hover) and (pointer:fine){
.site-header:hover::before{ opacity:1 !important; transform: translateY(0) !important; }
.site-header:hover{ box-shadow: 0 22px 60px rgba(0,0,0,.55) !important; }
}
/* Metti tutto SOPRA la pellicola */
.site-header > *{ position:relative !important; z-index:1 !important; }
/* ====== FIX “VOGLIO UNA RIGA” ====== */
.site-header .main-nav{
display:flex !important;
flex-wrap: nowrap !important; /* non va mai a capo */
gap: clamp(14px, 2vw, 26px) !important;
flex-shrink: 0 !important;
}
.site-header .main-nav a{
white-space: nowrap !important; /* non spezza “CHI SIAMO” */
flex: 0 0 auto !important; /* non si schiaccia */
letter-spacing: .12em !important;
}
/* Se lo schermo è “medio”, meglio hamburger che doppia riga */
@media (max-width: 1180px){
.site-header .main-nav{ display:none !important; }
.site-header .nav-toggle{ display:block !important; }
}
@media (min-width: 1181px){
.site-header .nav-toggle{ display:none !important; }
.site-header .main-nav{ display:flex !important; }
}/* =========================================
CHI SIAMO — MOTION MG (entrata + sheen/float solo quando centrato)
========================================= */
/* Stato iniziale (niente geometrie: solo motion premium) */
#chi-siamo .two-cols > .col.text,
#chi-siamo .founder-card{
opacity: 0;
filter: blur(2px);
translate: 0 12px;
scale: .985;
transition:
opacity .85s ease,
translate .85s ease,
scale .85s ease,
filter .85s ease;
will-change: opacity, translate, filter;
}
/* Entrate contrapposte (sx testo / dx card) */
#chi-siamo .two-cols > .col.text{
translate: -90px 10px;
transition-delay: .06s;
}
#chi-siamo .founder-card{
translate: 90px 10px;
}
#chi-siamo .founder-card:nth-child(1){ transition-delay: .22s; }
#chi-siamo .founder-card:nth-child(2){ transition-delay: .38s; }
/* Stato finale: scatta quando il panel diventa visibile (reveal) OPPURE quando arriva cs-in */
#chi-siamo .ads-panel-light.is-visible .two-cols > .col.text,
#chi-siamo .ads-panel-light.is-visible .founder-card,
#chi-siamo.cs-in .two-cols > .col.text,
#chi-siamo.cs-in .founder-card{
opacity: 1;
filter: blur(0);
translate: 0 0;
scale: 1;
}
/* Sheen (solo quando centrato) */
#chi-siamo .founder-card::after{
content:"";
position:absolute;
inset:-55% -70%;
pointer-events:none;
opacity: 0;
mix-blend-mode: screen;
background: linear-gradient(115deg,
transparent 35%,
rgba(246,240,228,.20) 48%,
rgba(233,238,246,.10) 55%,
transparent 68%);
}
@keyframes cs-sheen{
0% { transform: translateX(-45%); }
50% { transform: translateX(12%); }
100% { transform: translateX(-45%); }
}
#chi-siamo.cs-in .founder-card::after{
opacity: .70;
animation: cs-sheen 6.6s ease-in-out infinite;
}
/* Float (solo quando centrato) */
@keyframes cs-float{
0%,100% { translate: 0 0; }
50% { translate: 0 -7px; }
}
#chi-siamo.cs-in .founder-card{
animation: cs-float 5.8s ease-in-out infinite;
animation-delay: 1.0s; /* parte dopo l’entrata */
}
#chi-siamo.cs-in .founder-card:nth-child(2){
animation-delay: 1.25s; /* micro stagger */
}
/* Accessibilità */
@media (prefers-reduced-motion: reduce){
#chi-siamo .two-cols > .col.text,
#chi-siamo .founder-card{
opacity: 1 !important;
filter: none !important;
translate: 0 0 !important;
scale: 1 !important;
transition: none !important;
animation: none !important;
}
#chi-siamo .founder-card::after{
display:none !important;
}
}
/* ====== GOLD LOGO TONE (meno scuro, più LV-glass) ====== */
:root{
--ads-gold: #E0AA25; /* oro logo */
}
/* override pellicola: più chiara + glow oro */
.site-header::before{
background:
radial-gradient(circle at 18% 0%, rgba(224,170,37,.22), transparent 58%),
radial-gradient(circle at 88% 0%, rgba(246,240,228,.22), transparent 62%),
radial-gradient(circle at 55% 120%, rgba(42,121,197,.12), transparent 55%),
linear-gradient(120deg, rgba(5,8,22,.42), rgba(5,8,22,.10)) !important;
}
/* bordo premium oro SOLO quando la pellicola è attiva (hover desktop) */
@media (hover:hover) and (pointer:fine){
.site-header:hover{ border-bottom: 1px solid rgba(224,170,37,.35) !important; }
}
/* micro-accent oro sui link (solo hover) */
.site-header .main-nav a:hover{
color: rgba(224,170,37,1) !important;
text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 18px rgba(224,170,37,.22) !important;
}
/* =========================================
FIX TESTO NERO HEADER -> ORO LOGO (metal)
incolla IN FONDO ad ads.css
========================================= */
:root{
--ads-gold: #E0AA25; /* oro logo */
--ads-gold-hi: #FFF3D1;
--ads-gold-mid:#E7C26A;
--ads-gold-lo: #B47A12;
}
/* fallback (anche se il clip non va) */
.site-header .logo-title,
.site-header .main-nav a,
.site-header .nav-cta{
color: var(--ads-gold) !important;
text-shadow:
0 2px 0 rgba(0,0,0,.95),
0 0 16px rgba(0,0,0,.65) !important;
}
/* metal glam vero (Chrome/Edge ok) */
@supports (-webkit-background-clip: text){
.site-header .logo-title,
.site-header .main-nav a,
.site-header .nav-cta{
background-image: linear-gradient(
180deg,
var(--ads-gold-hi) 0%,
var(--ads-gold-mid) 35%,
var(--ads-gold) 62%,
var(--ads-gold-lo) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
}
/* hover: più “oro chiaro” */
.site-header .main-nav a:hover{
color: var(--ads-gold-hi) !important;
}
@supports (-webkit-background-clip: text){
.site-header .main-nav a:hover{
background-image: linear-gradient(180deg,#FFFFFF 0%, var(--ads-gold-hi) 45%, var(--ads-gold) 100%) !important;
}
}
/* =========================================
PERCORSO — NUMERI PIÙ PICCOLI (premium)
========================================= */
/* (in caso tu abbia id diverso in preview) */
#percorso .grid.steps,
#il-percorso .grid.steps{
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap: 26px !important;
}
@media (max-width: 960px){
#percorso .grid.steps,
#il-percorso .grid.steps{
grid-template-columns: 1fr !important;
}
}
/* Badge numero “mini” */
#percorso .card.step,
#il-percorso .card.step{
padding-top: 38px !important; /* spazio per badge */
}
#percorso .step-num,
#il-percorso .step-num{
position: absolute;
top: 16px !important;
left: 16px !important;
width: 38px !important;
height: 38px !important;
display: grid !important;
place-items: center !important;
font-size: 14px !important;
font-weight: 800 !important;
border-radius: 999px !important;
background: radial-gradient(circle at 30% 20%,
rgba(246,240,228,.96),
rgba(233,238,246,.92)) !important;
color: rgba(5,8,22,.95) !important;
border: 2px solid rgba(233,238,246,.70) !important;
box-shadow:
0 14px 34px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.85) !important;
}
@media (max-width: 600px){
#percorso .step-num,
#il-percorso .step-num{
width: 32px !important;
height: 32px !important;
font-size: 13px !important;
top: 14px !important;
left: 14px !important;
}
}
/* =========================================
PERCORSO — NUMERO "VIA DI MEZZO" ELEGANTE (corner premium)
========================================= */
#percorso .step-num,
#il-percorso .step-num{
position: absolute !important;
top: -18px !important;
left: -18px !important;
width: 64px !important;
height: 64px !important;
display: grid !important;
place-items: center !important;
font-size: 22px !important;
font-weight: 850 !important;
letter-spacing: -0.02em !important;
border-radius: 999px !important;
/* “coin” premium */
background: radial-gradient(circle at 30% 20%,
rgba(255,255,255,.96),
rgba(233,238,246,.92) 55%,
rgba(185,194,216,.92)) !important;
color: rgba(5,8,22,.96) !important;
border: 4px solid rgba(243,201,105,.78) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.42),
0 0 0 2px rgba(255,255,255,.22),
inset 0 2px 10px rgba(255,255,255,.92) !important;
z-index: 3 !important;
pointer-events: none !important;
}
/* mobile: leggermente più compatto */
@media (max-width: 600px){
#percorso .step-num,
#il-percorso .step-num{
top: -14px !important;
left: -14px !important;
width: 56px !important;
height: 56px !important;
font-size: 20px !important;
border-width: 3px !important;
}
}
/* =========================================
PERCORSO — BADGE NUMERO "PALLA" METAL GLAM (numero nero + scintillio)
========================================= */
/* assicura contesto */
#percorso .card.step,
#il-percorso .card.step{ position: relative !important; }
/* badge */
#percorso .step-num,
#il-percorso .step-num{
position: absolute !important;
top: 18px !important;
left: 18px !important;
width: 56px !important;
height: 56px !important;
border-radius: 999px !important;
display: grid !important;
place-items: center !important;
/* equidistanza bordo/testo */
padding: 0 !important;
line-height: 1 !important;
font-size: 20px !important;
font-weight: 900 !important;
color: rgba(5,8,22,.98) !important; /* numero NERO */
/* palla metal glam (platinum + ivory + ocean) */
background:
radial-gradient(circle at 28% 22%,
rgba(255,255,255,.96) 0%,
rgba(233,238,246,.94) 34%,
rgba(246,240,228,.90) 52%,
rgba(11,42,69,.26) 100%) !important;
/* doppio bordo premium */
border: 2px solid rgba(233,238,246,.88) !important;
box-shadow:
0 0 0 2px rgba(42,121,197,.18),
0 0 0 4px rgba(243,201,105,.55),
0 18px 40px rgba(0,0,0,.40),
inset 0 2px 10px rgba(255,255,255,.85),
inset 0 -10px 18px rgba(5,8,22,.18) !important;
pointer-events: none !important;
z-index: 3 !important;
}
/* highlight “palla” */
#percorso .step-num::before,
#il-percorso .step-num::before{
content:"";
position:absolute;
inset: 7px 10px auto 10px;
height: 16px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%,
rgba(255,255,255,.95),
rgba(255,255,255,0) 70%);
opacity: .75;
}
/* scintillio lucicante (glint che gira) */
@keyframes ads-badge-glint{
0% { transform: translateX(-60%) rotate(18deg); opacity: 0; }
15% { opacity: .85; }
50% { opacity: .55; }
100% { transform: translateX(60%) rotate(18deg); opacity: 0; }
}
#percorso .step-num::after,
#il-percorso .step-num::after{
content:"";
position:absolute;
inset:-22%;
border-radius: 999px;
background: linear-gradient(115deg,
transparent 40%,
rgba(246,240,228,.22) 50%,
rgba(233,238,246,.12) 57%,
transparent 66%);
mix-blend-mode: screen;
animation: ads-badge-glint 3.8s ease-in-out infinite;
opacity: .35;
}
/* mobile: leggermente più piccolo */
@media (max-width: 600px){
#percorso .step-num,
#il-percorso .step-num{
width: 50px !important;
height: 50px !important;
font-size: 18px !important;
top: 16px !important;
left: 16px !important;
}
}
/* =========================================
PERCORSO — BADGE "PALLA" METAL GLAM v2
- 30% più piccola
- equidistante: bordo card == spazio verso il testo (anche titolo)
========================================= */
#percorso{
--step-badge-size: 40px; /* ~ -30% rispetto a 56 */
--step-badge-gap: 18px; /* spazio tra palla e testo */
--step-badge-inset: 18px; /* spazio tra palla e bordo card (UGUALE al gap) */
}
/* crea spazio a sinistra per NON invadere il titolo */
#percorso .grid.steps .card.step{
padding: 24px 24px 22px calc(var(--step-badge-inset) + var(--step-badge-size) + var(--step-badge-gap)) !important;
}
/* palla metal glam */
#percorso .step-num{
position: absolute !important;
top: var(--step-badge-inset) !important;
left: var(--step-badge-inset) !important;
width: var(--step-badge-size) !important;
height: var(--step-badge-size) !important;
border-radius: 999px !important;
display: grid !important;
place-items: center !important;
font-size: 18px !important;
font-weight: 900 !important;
line-height: 1 !important;
color: rgba(5,8,22,.98) !important; /* numero NERO centrato */
background:
radial-gradient(circle at 28% 22%,
rgba(255,255,255,.98) 0%,
rgba(233,238,246,.95) 36%,
rgba(246,240,228,.90) 58%,
rgba(11,42,69,.22) 100%) !important;
border: 2px solid rgba(233,238,246,.90) !important;
box-shadow:
0 0 0 2px rgba(42,121,197,.18),
0 0 0 4px rgba(243,201,105,.48),
0 16px 34px rgba(0,0,0,.42),
inset 0 2px 10px rgba(255,255,255,.88),
inset 0 -10px 18px rgba(5,8,22,.18) !important;
z-index: 3 !important;
pointer-events: none !important;
}
/* highlight “metallo” */
#percorso .step-num::before{
content:"";
position:absolute;
left: 8px; right: 8px; top: 7px;
height: 12px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%,
rgba(255,255,255,.95),
rgba(255,255,255,0) 70%);
opacity: .75;
}
/* scintillio lucicante */
@keyframes ads-badge-glint{
0% { transform: translateX(-65%) rotate(18deg); opacity: 0; }
18% { opacity: .85; }
55% { opacity: .55; }
100% { transform: translateX(65%) rotate(18deg); opacity: 0; }
}
#percorso .step-num::after{
content:"";
position:absolute;
inset:-30%;
border-radius: 999px;
background: linear-gradient(115deg,
transparent 40%,
rgba(246,240,228,.24) 50%,
rgba(233,238,246,.14) 57%,
transparent 66%);
mix-blend-mode: screen;
animation: ads-badge-glint 3.6s ease-in-out infinite;
opacity: .32;
}
/* mobile */
@media (max-width: 600px){
#percorso{
--step-badge-size: 36px;
--step-badge-gap: 16px;
--step-badge-inset: 16px;
}
#percorso .step-num{ font-size: 16px !important; }
#percorso .grid.steps .card.step{
padding: 22px 20px 20px calc(var(--step-badge-inset) + var(--step-badge-size) + var(--step-badge-gap)) !important;
}
}
/* =========================================
PERCORSO — glint solo quando centrato (pc-in)
========================================= */
/* di base: glint OFF */
#percorso .step-num::after,
#il-percorso .step-num::after{
animation: none !important;
opacity: 0 !important;
}
/* quando centrato: glint ON */
#percorso.pc-in .step-num::after,
#il-percorso.pc-in .step-num::after{
animation: ads-badge-glint 3.6s ease-in-out infinite !important;
opacity: .32 !important;
}
/* =========================================
HEADER — SCHIARITA + METAL GIALLO (senza cambiare dimensioni/hover)
========================================= */
/* 1) Barra più chiara (glass premium sempre ON) */
.site-header{
border-bottom: 1px solid rgba(233,238,246,.14) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.36) !important;
}
/* pellicola: prima era quasi solo on-hover → ora è leggera sempre, e si accende in hover */
.site-header::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:
radial-gradient(circle at 10% 10%, rgba(243,201,105,.16), transparent 58%),
radial-gradient(circle at 90% 0%, rgba(42,121,197,.14), transparent 62%),
linear-gradient(120deg,
rgba(11,42,69,.62),
rgba(5,8,22,.34)
) !important;
opacity: .42 !important; /* <-- schiarita base */
backdrop-filter: blur(14px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
transition: opacity .22s ease-out, box-shadow .22s ease-out !important;
box-shadow: none !important;
z-index: -1 !important;
pointer-events:none !important;
}
.site-header:hover::before{
opacity: .92 !important; /* <-- accensione */
box-shadow: 0 22px 55px rgba(0,0,0,.42) !important;
}
/* 2) Logo title: metallo più “giallo” (teso/pulito) */
.logo-title{
background-image: linear-gradient(120deg,
#FFFCEB 0%,
#F7E7B0 20%,
#F3C969 42%,
#E9EEF6 58%,
#D7B46A 78%,
#FFFCEB 100%
) !important;
background-size: 220% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
/* meno “nero pesante”, più pulito */
text-shadow:
0 1px 0 rgba(0,0,0,.92),
0 0 10px rgba(0,0,0,.45),
0 0 20px rgba(0,0,0,.22) !important;
}
/* micro shine sul logo (solo al passaggio, non cambia dimensioni) */
@keyframes adsLogoShine{
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
.site-header:hover .logo-title{
animation: adsLogoShine 1.1s ease-out both;
}
/* 3) Menu: stesso metallo giallo, più chiaro */
.site-header .main-nav a{
background-image: linear-gradient(120deg,
#FFFCEB 0%,
#F7E7B0 28%,
#E9EEF6 55%,
#F3C969 82%,
#FFFCEB 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-shadow:
0 1px 0 rgba(0,0,0,.85),
0 0 10px rgba(0,0,0,.35) !important;
}
/* hover menu: glow oro (senza underline) */
.site-header .main-nav a:hover{
text-shadow:
0 1px 0 rgba(0,0,0,.9),
0 0 18px rgba(243,201,105,.55),
0 0 34px rgba(243,201,105,.22) !important;
}
/* =========================================================
ADS — HEADER LV LUX (glass + line that appears/disappears)
- base molto trasparente (no mouse)
- hover: fascia/linea tipo luxury dietro al menu + glint
- titolo: metallo oro 3D (ombra sotto delicata)
========================================================= */
/* Base header: più “pulito” e trasparente */
.site-header{
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
backdrop-filter: blur(12px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
isolation: isolate;
}
/* Glass layer (trasparenza senza hover) */
.site-header::before{
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: -1 !important;
background:
radial-gradient(circle at 18% 0%,
rgba(246,240,228,.20),
transparent 58%),
radial-gradient(circle at 85% 0%,
rgba(233,238,246,.18),
transparent 62%),
linear-gradient(120deg,
rgba(5,8,22,.08),
rgba(11,42,69,.10)
) !important;
opacity: .22 !important; /* <-- no mouse */
transition: opacity .22s ease, box-shadow .22s ease, backdrop-filter .22s ease !important;
}
/* Hover: più presente (ma sempre elegante) */
.site-header:hover::before{
opacity: .82 !important;
box-shadow: 0 18px 48px rgba(0,0,0,.32) !important;
backdrop-filter: blur(16px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
}
/* Riga bassa che appare/scompare (luxury line) */
.site-header::after{
content:"" !important;
position:absolute !important;
left: 4vw !important;
right: 4vw !important;
bottom: 10px !important;
height: 1px !important;
border-radius: 999px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(233,238,246,.25) 20%,
rgba(243,201,105,.70) 50%,
rgba(233,238,246,.25) 80%,
transparent 100%) !important;
opacity: 0 !important;
transform: translateY(6px) !important;
transition: opacity .22s ease, transform .22s ease !important;
pointer-events:none !important;
z-index: 0 !important;
}
.site-header:hover::after{
opacity: .85 !important;
transform: translateY(0) !important;
}
/* ===== Menu: fascia “LV” dietro ai link (solo desktop) ===== */
@media (min-width: 861px){
.main-nav{
position: relative !important;
padding: 8px 10px !important;
border-radius: 999px !important;
}
/* Banda dietro al testo */
.main-nav::before{
content:"";
position:absolute;
left:-10px; right:-10px;
top:50%;
height: 34px;
transform: translateY(-50%) scaleX(.96);
border-radius: 999px;
background:
linear-gradient(90deg,
rgba(233,238,246,.08),
rgba(246,240,228,.16),
rgba(233,238,246,.08));
box-shadow:
0 0 0 1px rgba(233,238,246,.14),
inset 0 1px 0 rgba(255,255,255,.16);
opacity: 0;
transition: opacity .20s ease, transform .20s ease;
pointer-events:none;
z-index: -1;
}
/* Glint che scorre (solo hover header) */
@keyframes adsNavGlint{
0% { transform: translate(-65%, -50%) skewX(-18deg); opacity: 0; }
20% { opacity: .75; }
55% { opacity: .35; }
100% { transform: translate(165%, -50%) skewX(-18deg); opacity: 0; }
}
.main-nav::after{
content:"";
position:absolute;
top:50%;
left: 0;
width: 42%;
height: 34px;
transform: translate(-65%, -50%) skewX(-18deg);
border-radius: 999px;
background: linear-gradient(90deg,
transparent 0%,
rgba(243,201,105,.22) 45%,
rgba(233,238,246,.12) 55%,
transparent 100%);
mix-blend-mode: screen;
opacity: 0;
pointer-events:none;
z-index: -1;
}
.site-header:hover .main-nav::before{
opacity: 1;
transform: translateY(-50%) scaleX(1);
}
.site-header:hover .main-nav::after{
opacity: .55;
animation: adsNavGlint 2.9s ease-in-out infinite;
}
/* Link: niente underline, highlight dietro al testo */
.main-nav a::after{ display:none !important; }
.main-nav a{
position: relative !important;
padding: 9px 10px !important;
border-radius: 999px !important;
color: rgba(5,8,22,.78) !important;
text-shadow: 0 1px 0 rgba(255,255,255,.10) !important;
transition: color .18s ease, text-shadow .18s ease !important;
}
.main-nav a::before{
content:"";
position:absolute;
inset: -3px -7px;
border-radius: 999px;
background:
radial-gradient(circle at 20% 20%,
rgba(255,255,255,.22),
rgba(255,255,255,0) 70%),
linear-gradient(180deg,
rgba(246,240,228,.18),
rgba(233,238,246,.06));
box-shadow:
0 0 0 1px rgba(233,238,246,.14),
inset 0 1px 0 rgba(255,255,255,.16);
opacity: 0;
transform: scale(.98);
transition: opacity .18s ease, transform .18s ease;
z-index: -1;
}
.main-nav a:hover,
.main-nav a:focus-visible{
color: rgba(5,8,22,.98) !important;
text-shadow:
0 1px 0 rgba(255,255,255,.16),
0 10px 18px rgba(0,0,0,.22) !important;
}
.main-nav a:hover::before,
.main-nav a:focus-visible::before{
opacity: 1;
transform: scale(1);
}
/* CTA Workshop: resta “pill” ma più luxury */
.main-nav .nav-cta{
border: 1px solid rgba(243,201,105,.78) !important;
background:
radial-gradient(circle at 20% 0%,
rgba(243,201,105,.22),
rgba(246,240,228,.10) 42%,
transparent 75%) !important;
box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
}
}
/* ===== Logo titolo: oro 3D elegante (senza cambiare dimensione) ===== */
.logo-title{
background-image: linear-gradient(180deg,
#FFFCEB 0%,
#F7E7B0 26%,
#F3C969 55%,
#D7B46A 78%,
#FFFCEB 100%) !important;
background-size: 220% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 1px 0 rgba(255,255,255,.16),
0 2px 0 rgba(0,0,0,.78),
0 10px 18px rgba(0,0,0,.30),
0 0 26px rgba(243,201,105,.18) !important;
}
/* shine del titolo (solo hover header, leggero) */
@keyframes adsTitleShine{
from{ background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
.site-header:hover .logo-title{
animation: adsTitleShine 1.05s ease-out both;
}
/* Mobile: niente banda LV (pulito) */
@media (max-width: 860px){
.main-nav::before,
.main-nav::after{ display:none !important; }
.main-nav a::before{ display:none !important; }
}
/* =================================================================
ADS — HEADER LV-ADS METAL (CHIARO + ORO 3D)
✅ incolla COME ULTIMO BLOCCO in fondo ad ads.css
================================================================= */
:root{
--hdr-off: .06; /* trasparenza quando NON c’è mouse sopra */
--hdr-on: .92; /* intensità pellicola quando si “accende” */
--hdr-blur: 18px;
--gold: #E0AA25;
--gold-hi: #FFF3D1;
--gold-mid:#E7C26A;
--gold-lo: #B47A12;
--plat: #E9EEF6;
--ivory: #F6F0E4;
--navy: #050816;
}
/* Base: niente banda fissa “pesante” */
.site-header{
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: fixed !important;
top:0; left:0; right:0;
z-index: 80 !important;
}
/* Pellicola LV: chiara, quasi invisibile a riposo */
.site-header::before{
content:"" !important;
position:absolute; inset:0;
background:
radial-gradient(900px 280px at 18% 0%, rgba(224,170,37,.22), transparent 60%),
radial-gradient(820px 260px at 82% 0%, rgba(246,240,228,.30), transparent 62%),
linear-gradient(180deg, rgba(246,240,228,.84), rgba(233,238,246,.58));
opacity: var(--hdr-off);
transform: translateY(-6px);
transition: opacity .22s ease-out, transform .22s ease-out;
-webkit-backdrop-filter: blur(var(--hdr-blur)) saturate(120%);
backdrop-filter: blur(var(--hdr-blur)) saturate(120%);
pointer-events:none;
z-index:0;
}
/* Hairline elegante che appare solo quando “attivo” */
.site-header::after{
content:"" !important;
position:absolute;
left: 7vw; right: 7vw;
bottom: 10px;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(224,170,37,.55),
rgba(233,238,246,.42),
rgba(42,121,197,.22),
transparent);
opacity: 0;
transform: translateY(6px);
transition: opacity .22s ease-out, transform .22s ease-out;
pointer-events:none;
z-index:0;
}
/* Stato “attivo”: hover/focus desktop + menu aperto mobile (JS mette .is-open) */
.site-header:hover,
.site-header:focus-within,
.site-header.is-open{
box-shadow: 0 22px 58px rgba(0,0,0,0.32) !important;
}
.site-header:hover::before,
.site-header:focus-within::before,
.site-header.is-open::before{
opacity: var(--hdr-on);
transform: translateY(0);
}
.site-header:hover::after,
.site-header:focus-within::after,
.site-header.is-open::after{
opacity: .95;
transform: translateY(0);
}
/* Contenuti sopra la pellicola */
.site-header > *{ position: relative; z-index: 1; }
/* NO badge/quadratini */
.site-header .logo-mark,
.site-header .logo-area--clean .logo-mark{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* LOGO: oro 3D (tendente al giallo) con ombra “appena sotto” */
.site-header .logo-title{
font-weight: 800 !important;
letter-spacing: .24em !important;
text-transform: uppercase !important;
background-image: linear-gradient(180deg,
var(--gold-hi) 0%,
var(--gold-mid) 35%,
var(--gold) 62%,
var(--gold-lo) 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow:
0 1px 0 rgba(0,0,0,.95),
0 10px 22px rgba(0,0,0,.22) !important;
filter: saturate(1.05) brightness(.98);
transition: filter .22s ease, text-shadow .22s ease;
}
.site-header:hover .logo-title,
.site-header:focus-within .logo-title{
filter: saturate(1.12) brightness(1.05);
text-shadow:
0 1px 0 rgba(0,0,0,.95),
0 12px 26px rgba(0,0,0,.26) !important;
}
/* MENU: oro metal (niente underline, niente righe) */
.site-header .main-nav a{
text-decoration:none !important;
border-bottom:0 !important;
box-shadow:none !important;
background-image: linear-gradient(180deg,
var(--gold-hi) 0%,
var(--gold-mid) 40%,
var(--gold) 70%,
var(--gold-lo) 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow: 0 1px 0 rgba(0,0,0,.92), 0 0 14px rgba(0,0,0,.28) !important;
opacity: .85;
transition: opacity .18s ease, text-shadow .18s ease;
}
.site-header:hover .main-nav a,
.site-header:focus-within .main-nav a,
.site-header.is-open .main-nav a{
opacity: 1;
}
/* Disattiva qualsiasi underline vecchio */
.site-header .main-nav a::before,
.site-header .main-nav a::after{
content:none !important;
display:none !important;
}
/* Banda “LV” dietro ai link: solo quando header è attivo */
@media (min-width: 861px){
.site-header .main-nav{
position: relative !important;
padding: 8px 10px !important;
border-radius: 999px !important;
}
.site-header .main-nav::before{
content:"" !important;
position:absolute;
left:-10px; right:-10px;
top:50%;
height: 34px;
transform: translateY(-50%) scaleX(.96);
border-radius: 999px;
background: linear-gradient(90deg,
rgba(233,238,246,.12),
rgba(246,240,228,.26),
rgba(233,238,246,.12));
box-shadow:
0 0 0 1px rgba(224,170,37,.18),
inset 0 1px 0 rgba(255,255,255,.18);
opacity: 0;
transition: opacity .20s ease, transform .20s ease;
pointer-events:none;
z-index: -1;
}
.site-header:hover .main-nav::before,
.site-header:focus-within .main-nav::before,
.site-header.is-open .main-nav::before{
opacity: 1;
transform: translateY(-50%) scaleX(1);
}
}
/* CTA workshop: leggibile su header chiaro */
.site-header .nav-cta{
border: 1px solid rgba(224,170,37,.62) !important;
background: linear-gradient(180deg, rgba(5,8,22,.72), rgba(5,8,22,.90)) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14) !important;
-webkit-text-fill-color: initial !important;
color: rgba(246,240,228,.96) !important;
opacity: 1 !important;
}
.site-header .nav-cta:hover{
transform: translateY(-2px);
box-shadow: 0 26px 66px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* Mobile: niente hover → tieni un filo di pellicola, e full quando is-open */
@media (max-width: 960px){
.site-header::before{
opacity: .22;
transform: translateY(0);
}
.site-header.is-open::before{
opacity: var(--hdr-on);
}
.site-header.is-open::after{
opacity: .85;
transform: translateY(0);
}
}
/* =========================================================
LV-ADS HEADER — FIX WORDMARK (1 riga + oro visibile)
Incolla in FONDO al file ads.css
========================================================= */
:root{
--ads-gold: #E0AA25;
--ads-gold-hi: #FFF3D1;
--ads-gold-mid:#E7C26A;
--ads-gold-lo: #B47A12;
}
/* più spazio utile -> meno possibilità di andare a capo */
.site-header{
padding-left: 5vw !important;
padding-right: 5vw !important;
}
/* blocca il wrap della wordmark */
.site-header .logo-text,
.site-header .logo-title{
white-space: nowrap !important;
}
/* wordmark: oro metal + shimmer solo quando “ingaggi” l’header */
.site-header .logo-title{
display: inline-block !important;
line-height: 1 !important;
/* più piccolo e più elegante (niente doppia riga) */
font-size: clamp(16px, 1.45vw, 22px) !important;
letter-spacing: 0.20em !important;
background-image: linear-gradient(
180deg,
rgba(255,255,255,.96) 0%,
var(--ads-gold-hi) 22%,
var(--ads-gold-mid) 48%,
var(--ads-gold) 68%,
var(--ads-gold-lo) 100%
) !important;
background-size: 220% 100% !important;
background-position: 0% 50% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
/* QUESTO è il “killer” del nero */
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow:
0 2px 6px rgba(0,0,0,.74),
0 0 18px rgba(224,170,37,.18) !important;
-webkit-text-stroke: 0.35px rgba(0,0,0,.55) !important;
-webkit-font-smoothing: antialiased;
}
/* menu coerente (se ti resta “nero”, lo forza) */
.site-header .main-nav a,
.site-header .nav-cta{
-webkit-text-fill-color: transparent !important;
color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
/* shimmer SOLO su hover desktop (effetto LV pulito) */
@media (hover:hover) and (pointer:fine){
.site-header:hover .logo-title{
animation: adsGoldShimmer 1.8s linear infinite;
}
}
@keyframes adsGoldShimmer{
from{ background-position: 0% 50%; }
to { background-position: 220% 50%; }
}
/* schermi medi: stringi un pelo il menu (evita wrap) */
@media (min-width: 861px) and (max-width: 1200px){
.site-header{
padding-left: 4vw !important;
padding-right: 4vw !important;
}
.main-nav{ gap: 18px !important; }
.site-header .logo-title{ letter-spacing: 0.16em !important; }
}
/* mobile: ancora più compatto */
@media (max-width: 768px){
.site-header .logo-title{
font-size: 16px !important;
letter-spacing: 0.14em !important;
}
}
/* PATCH: evita "per te" spezzato a capo */
.nowrap{
white-space: nowrap;
display: inline-block;
}/* =========================================
FIX LOGO: via l’alone QUADRATO (box-shadow)
-> drop-shadow segue l’ALFA del PNG (pulito)
Incolla IN FONDO ad ads.css
========================================= */
.site-header .logo-img,
.site-header .logo-mark img{
background: transparent !important;
box-shadow: none !important; /* <-- uccide la piastrella */
filter:
drop-shadow(0 10px 18px rgba(0,0,0,.55))
drop-shadow(0 0 14px rgba(0,0,0,.65))
drop-shadow(0 0 10px rgba(224,170,37,.12)) !important;
}
.site-header .logo-mark,
.site-header .logo-area--clean .logo-mark{
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
/* PATCH: evita "per te" spezzato a capo */
.nowrap{
white-space: nowrap;
display: inline-block;
}
/* =========================================
HERO — +20% kicker, +10% resto + GLAM
Incolla IN FONDO a ads.css
========================================= */
/* +20% su “È il momento…” */
.hero-kicker{
font-size: 14.4px !important; /* 12px * 1.20 */
letter-spacing: 0.22em !important; /* leggermente più elegante */
}
/* +10% sul titolo */
.hero h1{
font-size: clamp(40px, 4.84vw, 53px) !important; /* era clamp(36px,4.4vw,48px) */
}
/* +10% sul testo descrittivo */
.hero-lead{
font-size: 1.1em !important; /* era 1em */
}
/* +10% sui bottoni (coerenza percezione) */
.hero .btn{
font-size: 15.4px !important; /* 14px * 1.10 */
padding: 12px 22px !important; /* micro scaling visivo */
}
/* ---------- GLAM (sheen metal) ---------- */
/* Kicker in oro “metal” con scintillio */
.hero-kicker{
display: inline-block;
background-image: linear-gradient(
90deg,
rgba(255,244,214,.55) 0%,
rgba(243,201,105,1) 28%,
rgba(255,255,255,.92) 48%,
rgba(243,201,105,1) 68%,
rgba(176,122,18,.85) 100%
) !important;
background-size: 220% 100% !important;
background-position: 0% 50% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow:
0 2px 8px rgba(0,0,0,.55),
0 0 16px rgba(243,201,105,.18) !important;
}
/* Glam sullo span “È una scelta concreta.” */
.hero h1 span{
display: inline-block;
background-image: linear-gradient(
90deg,
rgba(255,255,255,.92) 0%,
rgba(233,238,246,.85) 30%,
rgba(243,201,105,1) 55%,
rgba(255,255,255,.92) 80%,
rgba(233,238,246,.75) 100%
) !important;
background-size: 240% 100% !important;
background-position: 0% 50% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow:
0 10px 24px rgba(0,0,0,.55),
0 0 22px rgba(243,201,105,.10) !important;
}
/* Animazione: attiva solo su desktop hover (elegante, non “tamarrata”) */
@media (hover:hover) and (pointer:fine){
.hero:hover .hero-kicker,
.hero:hover h1 span{
animation: heroGlamSheen 2.4s linear infinite;
}
}
@keyframes heroGlamSheen{
from{ background-position: 0% 50%; }
to { background-position: 220% 50%; }
}
/* PATCH: sottotitolo percorso più largo e wrap più “bello” */
#percorso .section-head p{ text-wrap: balance; } /* se non supportato, viene ignorato */
@media (min-width: 992px){
#percorso .section-head{ max-width: 900px; }
}
/* =========================================
HERO KICKER — SEMPRE VISIBILE + GLAM SOLO HOVER
========================================= */
/* Base: sempre visibile (fallback oro) */
.hero-kicker{
opacity: 1 !important;
visibility: visible !important;
font-size: 14.4px !important; /* +20% */
letter-spacing: 0.22em !important;
color: var(--gold) !important; /* fallback: giallo sempre */
background: none !important;
-webkit-text-fill-color: initial !important;
}
/* Glam: gradient SEMPRE (non solo hover) */
@supports (-webkit-background-clip: text){
.hero-kicker{
background-image: linear-gradient(
90deg,
rgba(255,244,214,.55) 0%,
rgba(243,201,105,1) 28%,
rgba(255,255,255,.92) 48%,
rgba(243,201,105,1) 68%,
rgba(176,122,18,.85) 100%
) !important;
background-size: 220% 100% !important;
background-position: 0% 50% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow:
0 2px 8px rgba(0,0,0,.55),
0 0 16px rgba(243,201,105,.18) !important;
}
}
/* Scintillio SOLO quando passi il mouse sulla hero */
@media (hover:hover) and (pointer:fine){
.hero:hover .hero-kicker{
animation: heroGlamSheen 2.4s linear infinite;
}
}
/* =========================================
HERO — kicker: +10% e nudge a destra (allineamento ottico)
========================================= */
:root{
--hero-kicker-nudge: 12px; /* spostamento a destra: 8–14px a gusto */
}
/* È il momento di scegliere la tua libertà. */
.hero-kicker{
font-size: 15.8px !important; /* 14.4px * 1.10 */
margin-left: var(--hero-kicker-nudge) !important;
/* più “risalto” senza tamarrate */
opacity: .98 !important;
text-shadow:
0 2px 10px rgba(0,0,0,.58),
0 0 18px rgba(243,201,105,.22) !important;
}
/* mobile: nudge più piccolo */
@media (max-width: 768px){
:root{ --hero-kicker-nudge: 6px; }
.hero-kicker{ font-size: 15px !important; } /* leggermente più contenuto */
}
/* CONTATTI — icone NERE ma con CERCHIO che resta */
#contatti .ads-social-icons{
display:flex !important;
align-items:center !important;
gap:18px !important;
}
/* NON tocco il cerchio (bg/border/shadow) del bottone */
#contatti a.ads-social-icon{
/* lascio intatti background/border/box-shadow/radius già definiti nel tema */
color: rgba(0,0,0,.88) !important; /* così currentColor diventa nero */
}
/* Forza anche i path dentro l'SVG (sia fill che stroke) */
#contatti a.ads-social-icon svg,
#contatti a.ads-social-icon svg *{
fill: currentColor !important;
stroke: currentColor !important;
}
/* Hover: solo micro effetto, senza rompere cerchio */
#contatti a.ads-social-icon:hover{
opacity:.85 !important;
transform: translateY(-1px) !important;
}
/* HERO — kicker: nudge più piccolo (rientra) */
:root{
--hero-kicker-nudge: 4px !important;
}
.hero-kicker{
margin-left: var(--hero-kicker-nudge) !important;
}
@media (max-width: 768px){
:root{ --hero-kicker-nudge: 2px !important; }
}
/* FOOTER — colonna 3 (Legale) allineata a destra su desktop */
.site-footer .footer-grid > div:last-child{
text-align: right;
justify-self: end;
}
/* Mobile: quando diventa 1 colonna, torna a sinistra */
@media (max-width: 960px){
.site-footer .footer-grid > div:last-child{
text-align: left;
justify-self: start;
}
}
/* FOOTER — colonna 2 (Contatti) centrata su desktop */
.site-footer .footer-grid > div:nth-child(2){
text-align: center;
justify-self: center;
}
/* Mobile: quando va a colonna singola, torna a sinistra */
@media (max-width: 960px){
.site-footer .footer-grid > div:nth-child(2){
text-align: left;
justify-self: start;
}
}
/* =========================================================
VIDEO — CORNICE ADS METAL GLAM (più importante)
- doppio bordo premium (platinum + gold)
- corner highlights
- sheen che scorre (solo quando visibile / hover)
========================================================= */
.section.video-intro .video-frame{
border-radius: 26px !important;
border: 1px solid rgba(233,238,246,.22) !important; /* platinum base */
background:
radial-gradient(circle at 18% 0%,
rgba(246,240,228,.20),
rgba(5,8,22,.96) 62%) !important;
/* CORNICE PIÙ IMPORTANTE = multi-outline */
box-shadow:
0 0 0 1px rgba(233,238,246,.16), /* micro bordo platinum */
0 0 0 4px rgba(5,8,22,.65), /* cornice scura elegante */
0 0 0 5px rgba(243,201,105,.22), /* filo gold */
0 34px 92px rgba(0,0,0,.80), /* profondità */
inset 0 1px 0 rgba(255,255,255,.16), /* highlight sopra */
inset 0 -1px 0 rgba(0,0,0,.55) !important; /* ombra sotto */
overflow: hidden !important;
}
/* Corner highlights + glass edge */
.section.video-intro .video-frame::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
pointer-events:none;
z-index: 1;
background:
radial-gradient(circle at 0% 0%,
rgba(255,255,255,.22),
transparent 42%),
radial-gradient(circle at 100% 0%,
rgba(243,201,105,.18),
transparent 46%),
radial-gradient(circle at 0% 100%,
rgba(233,238,246,.18),
transparent 46%),
radial-gradient(circle at 100% 100%,
rgba(255,255,255,.14),
transparent 48%),
linear-gradient(180deg,
rgba(255,255,255,.10),
transparent 30%);
opacity: .85;
mix-blend-mode: screen;
}
/* Sheen (scintillio) */
@keyframes adsVideoSheen{
0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
18% { opacity: .55; }
55% { opacity: .22; }
100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
.section.video-intro .video-frame::after{
content:"";
position:absolute;
top:-10%;
left:-40%;
width: 48%;
height: 120%;
border-radius: 999px;
pointer-events:none;
z-index: 2;
background: linear-gradient(90deg,
transparent 0%,
rgba(233,238,246,.20) 35%,
rgba(243,201,105,.22) 50%,
rgba(233,238,246,.18) 65%,
transparent 100%);
mix-blend-mode: screen;
opacity: 0;
}
/* Sheen quando la reveal diventa visibile */
.section.video-intro .video-frame.reveal.is-visible::after{
animation: adsVideoSheen 2.2s ease-in-out 1;
}
/* Sheen anche su hover desktop (1 passata, non loop) */
@media (hover:hover) and (pointer:fine){
.section.video-intro .video-frame:hover::after{
animation: adsVideoSheen 1.8s ease-in-out 1;
}
}
/* assicura che il video resti cliccabile */
.section.video-intro .video-frame video{
position: relative;
z-index: 0;
}
.section.video-intro .video-play-overlay{
z-index: 3;
}
/* =========================================================
VIDEO FRAME — BIG + PLATINUM + LUCENTE (solo cornice)
========================================================= */
:root{
--vf-w: min(1060px, 92vw); /* più grosso */
--vf-r: 28px; /* radius */
--vf-b: 2px; /* bordo principale */
--vf-ring: 6px; /* ring esterno */
}
/* più grande */
.section.video-intro .video-frame{
width: var(--vf-w) !important;
max-width: var(--vf-w) !important;
border-radius: var(--vf-r) !important;
/* più platinum (via tono "oro" dominante) */
border: var(--vf-b) solid rgba(233,238,246,.44) !important;
/* cornice “importante”: doppio ring + glow platinum */
box-shadow:
0 0 0 1px rgba(255,255,255,.18),
0 0 0 var(--vf-ring) rgba(233,238,246,.10),
0 0 0 calc(var(--vf-ring) + 1px) rgba(233,238,246,.20),
0 36px 100px rgba(0,0,0,.78),
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(0,0,0,.55) !important;
background:
radial-gradient(circle at 20% 0%,
rgba(233,238,246,.18),
rgba(5,8,22,.96) 62%) !important;
overflow: hidden !important;
}
/* overlay “platinum glass” lucente (solo cornice) */
.section.video-intro .video-frame::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
pointer-events:none;
z-index: 2;
/* lucentezza: bordo + corner highlights + glass */
background:
radial-gradient(circle at 0% 0%,
rgba(255,255,255,.26),
transparent 44%),
radial-gradient(circle at 100% 0%,
rgba(233,238,246,.22),
transparent 52%),
radial-gradient(circle at 0% 100%,
rgba(233,238,246,.14),
transparent 55%),
linear-gradient(180deg,
rgba(255,255,255,.12),
transparent 28%),
/* micro bordo interno platinum */
linear-gradient(90deg,
rgba(233,238,246,.14),
rgba(233,238,246,.06),
rgba(233,238,246,.14));
opacity: .95;
mix-blend-mode: screen;
}
/* Sheen lucente che passa SOLO sulla cornice */
@keyframes vfPlatinumSheen{
0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
20% { opacity: .55; }
55% { opacity: .25; }
100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
.section.video-intro .video-frame::after{
content:"";
position:absolute;
top:-10%;
left:-40%;
width: 52%;
height: 120%;
border-radius: 999px;
pointer-events:none;
z-index: 3;
background: linear-gradient(90deg,
transparent 0%,
rgba(233,238,246,.22) 36%,
rgba(255,255,255,.26) 50%,
rgba(233,238,246,.20) 64%,
transparent 100%);
mix-blend-mode: screen;
opacity: 0;
}
/* sheen quando entra in viewport + hover desktop */
.section.video-intro .video-frame.reveal.is-visible::after{
animation: vfPlatinumSheen 2.0s ease-in-out 1;
}
@media (hover:hover) and (pointer:fine){
.section.video-intro .video-frame:hover::after{
animation: vfPlatinumSheen 1.7s ease-in-out 1;
}
}
/* sicurezza click */
.section.video-intro .video-frame video{ position: relative; z-index: 0; }
.section.video-intro .video-play-overlay{ z-index: 4; }
/* =========================================================
VIDEO — CORNICE SOLO BORDO (NO VELATURA VIDEO)
METAL CROMO / PLATINUM + sheen solo cornice
========================================================= */
:root{
--vf-r: 28px; /* radius */
--vf-ring: 10px; /* spessore cornice “importante” */
}
/* Frame: niente overlay che sporca il video */
.section.video-intro .video-frame{
position: relative !important;
border-radius: var(--vf-r) !important;
background: transparent !important;
border: 1px solid rgba(233,238,246,.55) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.18),
0 0 0 6px rgba(233,238,246,.12),
0 0 0 7px rgba(233,238,246,.22),
0 36px 100px rgba(0,0,0,.78),
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 -1px 0 rgba(0,0,0,.55) !important;
overflow: hidden !important;
}
/* Sicurezza: il video NON deve mai essere opacizzato */
.section.video-intro .video-frame video{
opacity: 1 !important;
filter: none !important;
}
/* Cornice “platinum chrome” SOLO SUL BORDO (centro bucato) */
.section.video-intro .video-frame::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
pointer-events:none;
z-index: 2;
background:
radial-gradient(circle at 0% 0%, rgba(255,255,255,.28), transparent 44%),
radial-gradient(circle at 100% 0%, rgba(233,238,246,.26), transparent 52%),
radial-gradient(circle at 0% 100%, rgba(233,238,246,.18), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.14), transparent 30%),
linear-gradient(90deg,
rgba(233,238,246,.18),
rgba(233,238,246,.06),
rgba(233,238,246,.18));
opacity: .95;
/* --- MASCHERA: rende visibile SOLO l’anello esterno --- */
padding: var(--vf-ring);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Sheen cromato SOLO cornice */
@keyframes vfChromeSheen{
0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
20% { opacity: .55; }
55% { opacity: .25; }
100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
.section.video-intro .video-frame::after{
content:"";
position:absolute;
top:-10%;
left:-40%;
width: 52%;
height: 120%;
border-radius: 999px;
pointer-events:none;
z-index: 3;
background: linear-gradient(90deg,
transparent 0%,
rgba(233,238,246,.22) 36%,
rgba(255,255,255,.28) 50%,
rgba(233,238,246,.20) 64%,
transparent 100%);
opacity: 0;
/* anche qui: SOLO bordo */
padding: var(--vf-ring);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* sheen quando entra in viewport + hover desktop */
.section.video-intro .video-frame.reveal.is-visible::after{
animation: vfChromeSheen 2.0s ease-in-out 1;
}
@media (hover:hover) and (pointer:fine){
.section.video-intro .video-frame:hover::after{
animation: vfChromeSheen 1.7s ease-in-out 1;
}
}
/* overlay play sopra tutto */
.section.video-intro .video-play-overlay{ z-index: 4; }
/* =========================================
STICKY WHATSAPP — ADS METAL GLAM (NO VERDE)
========================================= */
.sticky-whatsapp{
background: linear-gradient(135deg,
rgba(5,8,22,.92),
rgba(11,42,69,.78)) !important;
color: #E9EEF6 !important;
border: 1px solid rgba(233,238,246,.40) !important;
box-shadow:
0 16px 38px rgba(0,0,0,.58),
0 0 0 1px rgba(255,255,255,.10),
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -1px 0 rgba(0,0,0,.55) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-weight: 700 !important;
letter-spacing: .06em;
text-transform: uppercase;
transition:
opacity .18s ease-out,
transform .18s ease-out,
box-shadow .25s ease,
border-color .25s ease !important;
}
/* hover premium */
@media (hover:hover) and (pointer:fine){
.sticky-whatsapp:hover{
transform: translateY(-2px) !important;
border-color: rgba(233,238,246,.58) !important;
box-shadow:
0 18px 46px rgba(0,0,0,.62),
0 0 0 1px rgba(255,255,255,.14),
0 0 22px rgba(42,121,197,.22),
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 -1px 0 rgba(0,0,0,.58) !important;
}
}
/* sheen “LV” solo sul bottone */
.sticky-whatsapp{
position: fixed; /* ribadisco per sicurezza */
overflow: hidden;
}
.sticky-whatsapp::after{
content:"";
position:absolute;
inset:-2px;
border-radius: inherit;
pointer-events:none;
background: linear-gradient(120deg,
transparent 0%,
rgba(233,238,246,.18) 40%,
rgba(255,255,255,.28) 50%,
rgba(233,238,246,.14) 60%,
transparent 100%);
transform: translateX(-140%) skewX(-18deg);
opacity: 0;
}
@media (hover:hover) and (pointer:fine){
.sticky-whatsapp:hover::after{
opacity: 1;
transform: translateX(160%) skewX(-18deg);
transition: transform .9s ease, opacity .25s ease;
}
}
.sticky-whatsapp{ display:none !important; }
/* =========================================
VIDEO — CORNICE PIÙ PICCOLA (HAO 😄)
========================================= */
:root{
--vf-w: min(880px, 90vw) !important; /* riduce la “taglia” del frame */
--vf-ring: 5px !important; /* cornice più sottile */
--vf-r: 22px !important; /* angoli un pelo più stretti */
}
/* riduco anche un filo l’effetto “bordone” */
.section.video-intro .video-frame{
width: var(--vf-w) !important;
max-width: var(--vf-w) !important;
border-radius: var(--vf-r) !important;
border: 1px solid rgba(233,238,246,.36) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.10),
0 0 0 4px rgba(233,238,246,.06),
0 0 0 5px rgba(233,238,246,.10),
0 22px 66px rgba(0,0,0,.68),
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -1px 0 rgba(0,0,0,.50) !important;
}
/* highlights più discreti */
.section.video-intro .video-frame::before{ opacity: .60 !important; }
/* =========================
CONTATTI — TITOLI “METAL GLAM”
(Manuel / Lara)
========================= */
#contatti .ads-contact-card h3{
margin: 0 0 .35rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
line-height: 1.08;
/* dimensione uniforme e responsive */
font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
/* fallback */
color: #0B2A45;
/* metal glam (su card chiare sta da dio) */
background: linear-gradient(135deg,
#050816 0%,
#0B2A45 22%,
#2A79C5 44%,
#E9EEF6 55%,
#0B2A45 72%,
#050816 100%
);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:
0 1px 0 rgba(255,255,255,.18),
0 10px 22px rgba(0,0,0,.25);
filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}
#contatti .ads-contact-card h3::after{
content:"";
display:block;
height: 2px;
width: 58%;
margin-top: .35rem;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(233,238,246,0),
rgba(233,238,246,.9),
rgba(246,240,228,.95),
rgba(233,238,246,.9),
rgba(233,238,246,0)
);
opacity: .55;
transform: translateX(-6px);
transition: opacity .25s ease, transform .25s ease;
}
#contatti .ads-contact-card:hover h3{
background-position: 100% 0;
}
#contatti .ads-contact-card:hover h3::after{
opacity: .95;
transform: translateX(0);
}
/* riga “Manuel Zanon – Alchimisti…” più pulita e coerente */
#contatti .ads-contact-name{
margin: .05rem 0 .85rem;
font-size: .98rem;
font-weight: 600;
color: rgba(11,42,69,.85);
}
.hero { background-color: #050816; }
.hero-video { z-index: 0; display: block; background: transparent; pointer-events: none; }
.hero-overlay { z-index: 1; }
.hero-content { z-index: 2; }
/* HERO: evita overlay/fallback sopra al video quando parte */
.hero { position: relative; overflow: hidden; }
.hero-video { background: none !important; display: block; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-content { position: relative; z-index: 2; }
/* =========================================================
ADS — GLAM UNIFORM TITLES (safe override / fine sito)
========================================================= */
:root{
--ads-glam-g1:#fff7e3;
--ads-glam-g2:#f0d28b;
--ads-glam-g3:#cfa552;
--ads-glam-g4:#ffffff;
--ads-title-shadow:
0 2px 0 rgba(0,0,0,.35),
0 14px 26px rgba(0,0,0,.45);
--ads-title-h2: clamp(1.65rem, 1.2rem + 1.05vw, 2.25rem);
--ads-title-h3: clamp(1.12rem, 1.0rem + .35vw, 1.35rem);
}
/* fallback sempre leggibile */
.section-head h2,
.section-panel h2{
color: #E9EEF6;
letter-spacing: .02em;
}
/* effetto metal-glam (solo dove ha senso: TITOLI) */
@supports (-webkit-background-clip: text) {
.section-head h2,
.section-panel h2,
#workshop .ws-metal-title,
#contatti .ads-contact-card > h3,
#chi-siamo .founder-card > h3{
font-weight: 800;
line-height: 1.08;
text-shadow: var(--ads-title-shadow);
background-image: linear-gradient(
135deg,
var(--ads-glam-g4) 0%,
var(--ads-glam-g2) 22%,
var(--ads-glam-g1) 40%,
var(--ads-glam-g3) 68%,
var(--ads-glam-g4) 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: .35px rgba(5,8,22,.35);
transition: background-position .45s ease, filter .45s ease;
}
/* shimmer SOLO quando passi sopra (non rompe performance) */
.section-head:hover h2,
.section-head:focus-within h2,
#workshop .ws-card:hover .ws-metal-title,
#contatti .ads-contact-card:hover > h3,
#chi-siamo .founder-card:hover > h3{
background-position: 100% 50%;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
}
/* uniformiamo dimensione “premium” dei titoli sezione */
.section-head h2,
.section-panel h2{ font-size: var(--ads-title-h2); }
/* Contatti: Manuel/Lara più “importanti”, il sottotitolo più pulito */
#contatti .ads-contact-card > h3{
font-size: var(--ads-title-h3);
margin-bottom: .35rem;
}
#contatti .ads-contact-name{
margin-top: 0;
color: rgba(233,238,246,.86);
font-weight: 600;
letter-spacing: .02em;
}
/* FIX: Titolo "Perché funziona davvero" nero (solo sezione #perche-funziona) */
#perche-funziona .pf-mg-left h2{
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #050816 !important; /* Midnight Navy = “nero ADS” */
-webkit-text-fill-color: #050816 !important;
text-shadow: 0 10px 24px rgba(0,0,0,.18); /* ombra soft, premium */
}
/* Contatti: ombra appena accennata sul titolo */
#contatti .section-head h2{
text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* HERO – kicker più visibile (gold glam + contrasto) */
.hero-kicker{
font-size: clamp(13px, 1.2vw, 15px); /* + visibile */
font-weight: 700;
letter-spacing: 0.22em;
opacity: 0.98;
/* gold più “lux” */
color: var(--gold);
/* contrasto + glow elegante */
text-shadow:
0 2px 10px rgba(0,0,0,.70),
0 0 18px rgba(243,201,105,.45);
}
/* mobile: ancora più leggibile */
@media (max-width: 560px){
.hero-kicker{
font-size: 14px;
letter-spacing: 0.20em;
}
}
.hero-kicker{
position: relative;
display: inline-block;
}
.hero-kicker::after{
content:"";
position:absolute;
inset:-2px;
background: linear-gradient(120deg,
transparent 0%,
rgba(255,255,255,.35) 45%,
transparent 70%
);
transform: translateX(-60%);
opacity:.55;
mix-blend-mode: screen;
animation: heroKickerSheen 4.8s ease-in-out infinite;
pointer-events:none;
}
@keyframes heroKickerSheen{
0% { transform: translateX(-70%); }
50% { transform: translateX(35%); }
100% { transform: translateX(-70%); }
}
/* STOP sheen animato sul kicker */
.hero-kicker::after{
content: none !important;
display: none !important;
}
/* HERO kicker – gold inciso (no tamarro) */
.hero-kicker{
font-size: clamp(13px, 1.15vw, 15px);
font-weight: 700;
/* un filo meno “spaziato” = più leggibile */
letter-spacing: 0.18em;
color: var(--gold);
opacity: 0.98;
/* bordo scuro micro + ombra elegante */
-webkit-text-stroke: 0.35px rgba(0,0,0,0.45);
text-shadow:
0 1px 1px rgba(0,0,0,0.85), /* incisione */
0 0 10px rgba(243,201,105,0.18); /* glow soft */
}
/* mobile: leggibilità extra */
@media (max-width: 560px){
.hero-kicker{
font-size: 14px;
letter-spacing: 0.16em;
-webkit-text-stroke: 0.4px rgba(0,0,0,0.50);
}
}
@media (hover:hover){
.hero-kicker{
transition: filter .25s ease, text-shadow .25s ease;
}
.hero-kicker:hover{
filter: drop-shadow(0 0 10px rgba(243,201,105,0.20));
text-shadow:
0 1px 1px rgba(0,0,0,0.85),
0 0 14px rgba(243,201,105,0.22);
}
}
/* ============================
MOBILE HEADER FIX
============================ */
@media (max-width: 960px){
.site-header{ padding: 10px 16px; }
.nav-toggle{
display: inline-flex !important;
z-index: 60;
}
.main-nav{
display: none !important;
position: absolute;
top: calc(var(--ads-header-h) - 10px);
right: 12px;
flex-direction: column;
gap: 14px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(5,8,22,0.98);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 18px 55px rgba(0,0,0,.75);
z-index: 55;
}
.main-nav.is-open{
display: flex !important;
}
.main-nav a{ padding: 8px 4px; }
}
/* HERO mobile: layout pulito */
@media (max-width: 600px){
.hero-content{
padding-top: calc(var(--ads-header-h) + 30px);
padding-left: 16px;
padding-right: 16px;
}
.hero h1{
font-size: 34px;
line-height: 1.05;
}
.hero-lead{
font-size: 16px;
line-height: 1.45;
}
.hero-cta-group{
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.hero-cta-group .btn{
width: 100%;
text-align: center;
}
}
/* FIX: hero kicker fermo (niente “salti”/animazione) */
.hero .hero-kicker{
animation: none !important;
transform: none !important;
transition: none !important;
opacity: .95; /* opzionale: la rende un filo più presente senza sparare */
}
/* MOBILE — hero kicker fermo + più leggibile */
@media (max-width: 768px){
.hero .hero-kicker{
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
/* + visibile senza effetto “supercar kit” */
font-size: calc(0.75rem * 1.10);
text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* opzionale anti “saltelli” da barra browser (iOS/Android) */
.hero{ min-height: 92svh; }
}
/* MOBILE — fallback: Perché funziona sempre visibile */
@media (max-width: 768px){
#perche-funziona .section-panel.reveal{
opacity: 1 !important;
transform: none !important;
}
#perche-funziona .pf-mg-left,
#perche-funziona .pf-mg-right,
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right,
#perche-funziona .ads-metal-card{
opacity: 1 !important;
transform: none !important;
translate: 0 0 !important;
filter: none !important;
}
}
#contatti .section-head h2{
text-shadow: 0 2px 10px rgba(5,8,22,.22);
}
/* HERO: evita “ballo” su mobile (barra indirizzi) */
.hero { min-height: 100svh; }
@supports (height: 100dvh) {
.hero { min-height: 100dvh; }
}
/* Kicker: fermo, niente micro-movimenti/animazioni su mobile */
@media (max-width: 768px) {
.hero-kicker{
transform: none !important;
animation: none !important;
}
}
@media (max-width: 768px){
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 1 !important;
transform: none !important;
}
}
/* MOBILE FAIL-SAFE: se pf-in non scatta, non deve mai sparire */
@media (max-width: 768px){
#perche-funziona .pf-enter-left,
#perche-funziona .pf-enter-right{
opacity: 1 !important;
transform: none !important;
}
}
/* GLAM SOLO: titolo "Chi siamo" */
.ads-glam-title{
font-weight: 900;
letter-spacing: .02em;
background: linear-gradient(90deg,
rgba(233,238,246,.96),
rgba(42,121,197,.92),
rgba(246,240,228,.92),
rgba(233,238,246,.96)
);
background-size: 260% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 10px 26px rgba(0,0,0,.45),
0 0 18px rgba(42,121,197,.18);
animation: adsChiSiamoShine 7.5s linear infinite;
}
@keyframes adsChiSiamoShine{
0% { background-position: 0% 0%; }
100% { background-position: 260% 0%; }
}
@media (prefers-reduced-motion: reduce){
.ads-glam-title{ animation: none !important; }
}
/* =========================================================
HOTFIX — CHI SIAMO (solo sezione): titolo + nomi premium
Obiettivo: glam elegante (non pacchiano), shine solo hover
========================================================= */
#chi-siamo .two-cols .col.text .chi-title,
#chi-siamo .founder-card .chi-name{
font-weight: 900;
letter-spacing: .02em;
line-height: 1.05;
}
#chi-siamo .two-cols .col.text .chi-title{
font-size: clamp(2.15rem, 1.6rem + 1.45vw, 2.85rem);
margin: 0 0 18px;
}
#chi-siamo .founder-card .chi-name{
font-size: clamp(1.32rem, 1.08rem + .65vw, 1.62rem);
margin: 0 0 10px;
}
#chi-siamo .chi-surname{
font-weight: 900;
opacity: .98;
}
#chi-siamo .two-cols .col.text .chi-title,
#chi-siamo .founder-card .chi-name{
/* fallback leggibile */
color: rgba(233,238,246,.98) !important;
text-shadow:
0 2px 0 rgba(0,0,0,.32),
0 14px 28px rgba(0,0,0,.52),
0 0 20px rgba(42,121,197,.16);
}
@supports (-webkit-background-clip: text){
#chi-siamo .two-cols .col.text .chi-title,
#chi-siamo .founder-card .chi-name{
/* Platinum + warm ivory + micro-gold (logo) */
background-image: linear-gradient(135deg,
rgba(233,238,246,.98) 0%,
rgba(246,240,228,.95) 22%,
rgba(240,210,139,.92) 44%,
rgba(233,238,246,.98) 78%,
rgba(255,255,255,.98) 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: .35px rgba(5,8,22,.35);
transition: background-position .55s ease, filter .55s ease;
}
/* IMPORTANT: niente nero sui cognomi -> ereditano il clip */
#chi-siamo .founder-card .chi-name *{
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
@media (hover:hover) and (pointer:fine){
/* shine stile LV: solo quando interagisci */
#chi-siamo .ads-panel-light:hover .two-cols .col.text .chi-title{
background-position: 100% 50%;
filter: drop-shadow(0 12px 18px rgba(0,0,0,.38));
}
#chi-siamo .founder-card:hover .chi-name{
background-position: 100% 50%;
filter: drop-shadow(0 12px 18px rgba(0,0,0,.34));
}
}
}
@media (prefers-reduced-motion: reduce){
#chi-siamo .two-cols .col.text .chi-title,
#chi-siamo .founder-card .chi-name{
transition: none !important;
}
}
/* =========================================================
HOTFIX — Cognomi visibili (no effetto 'ombra')
Solo #chi-siamo
========================================================= */
#chi-siamo .chi-surname{
display: inline-block;
margin-left: .28ch;
/* fallback: leggibile anche senza clip */
color: rgba(233,238,246,.98) !important;
}
@supports (-webkit-background-clip: text){
/* Applica il clip anche allo span del cognome (alcuni browser non lo ereditano) */
#chi-siamo .founder-card .chi-name,
#chi-siamo .founder-card .chi-name .chi-surname{
background-image: linear-gradient(135deg,
rgba(233,238,246,.98) 0%,
rgba(246,240,228,.95) 22%,
rgba(240,210,139,.92) 44%,
rgba(233,238,246,.98) 78%,
rgba(255,255,255,.98) 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
@media (hover:hover) and (pointer:fine){
#chi-siamo .founder-card:hover .chi-name,
#chi-siamo .founder-card:hover .chi-name .chi-surname{
background-position: 100% 50%;
}
}
}
/* =========================================================
HOTFIX — CHI SIAMO: nomi su 2 righe (Nome + Cognome)
Motivazione: Lara va a capo, quindi rendiamo coerente anche Manuel.
========================================================= */
#chi-siamo .founder-card .chi-surname{
display: block;
margin-top: .06em;
/* mantiene glam e leggibilità */
}
/* ===== ADS PERF PATCH (safe) =====
Obiettivo: ridurre micro-lag scroll su mobile/low-end senza cambiare layout.
- Non rimuove nulla su desktop.
- Disattiva solo effetti "pesanti" (blur/backdrop-filter) su schermi piccoli e/o reduce-motion.
================================== */
.ads-liquid-bg,
.ads-liquid-video{
pointer-events: none;
}
@media (max-width: 960px){
/* Blur forte su video fisso può creare micro-scatti su mobile */
.ads-liquid-video{
filter: blur(6px) saturate(1.25) contrast(1.05);
opacity: 0.18;
}
/* Backdrop-filter spesso impatta lo scroll su alcuni Android/iOS */
.site-header::before,
.sticky-whatsapp{
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
}
@media (prefers-reduced-motion: reduce){
.ads-liquid-bg{ display: none !important; }
}
/* ================================
ADS EVENTI: Reveal delay + Motion stronger + Lightbox carousel
(patch by Oscar)
================================= */
/* abilita delay per chi usa --delay (stagger) */
.reveal{ transition-delay: var(--delay, 0ms); }
/* motion più “MG-like” solo per le tile eventi */
#ads-eventi .ads-tile.reveal{
filter: blur(2px) saturate(.92);
transition:
opacity 900ms cubic-bezier(.2,.8,.2,1),
transform 900ms cubic-bezier(.2,.8,.2,1),
filter 900ms cubic-bezier(.2,.8,.2,1);
}
#ads-eventi .ads-tile.reveal--left{ transform: translate3d(-56px, 0, 0); }
#ads-eventi .ads-tile.reveal--right{ transform: translate3d(56px, 0, 0); }
#ads-eventi .ads-tile.reveal.is-visible{ filter: blur(0) saturate(1); }
/* Lightbox */
.ads-lightbox{
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 26px;
background: rgba(5, 8, 22, .86);
backdrop-filter: blur(10px);
}
.ads-lightbox.is-open{ display: flex; }
.ads-lightbox__panel{
width: min(1080px, 96vw);
height: min(78vh, 780px);
border-radius: 18px;
border: 1px solid rgba(233, 238, 246, .38);
background: rgba(11, 42, 69, .35);
box-shadow: 0 26px 70px rgba(0,0,0,.55);
position: relative;
overflow: hidden;
}
.ads-lightbox__img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: rgba(5, 8, 22, .25);
}
.ads-lightbox__btn{
position: absolute;
top: 14px;
width: 44px;
height: 44px;
border-radius: 14px;
border: 1px solid rgba(233, 238, 246, .28);
background: rgba(11, 42, 69, .50);
color: #E9EEF6;
display: grid;
place-items: center;
cursor: pointer;
user-select: none;
}
.ads-lightbox__btn:hover{ border-color: rgba(233, 238, 246, .55); }
.ads-lightbox__close{ right: 14px; }
.ads-lightbox__counter{
position: absolute;
left: 14px;
top: 14px;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(233, 238, 246, .22);
background: rgba(5, 8, 22, .35);
color: #E9EEF6;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
}
.ads-lightbox__nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 18px;
border: 1px solid rgba(233, 238, 246, .24);
background: rgba(11, 42, 69, .50);
color: #E9EEF6;
display: grid;
place-items: center;
cursor: pointer;
}
.ads-lightbox__prev{ left: 14px; }
.ads-lightbox__next{ right: 14px; }
@media (max-width: 700px){
.ads-lightbox{ padding: 14px; }
.ads-lightbox__nav{ width: 48px; height: 48px; border-radius: 16px; }
}
/* =========================================================
FIX v66 — VIDEO INTRO: play sempre cliccabile (mobile-safe)
- l'overlay NON blocca i controlli nativi
========================================================= */
.video-play-overlay{ pointer-events: none; }
.video-play-overlay .play-ring{ pointer-events: auto; touch-action: manipulation; }
/* (opzionale) centra il contenuto video se serve */
.video-frame video{ object-fit: cover; object-position: 50% 50%; }
/* =========================================
FIX — CENTRA VIDEO INTRO (frame big)
========================================= */
/* la container deve poter contenere il frame più largo */
.section.video-intro .container{
max-width: 1120px !important; /* >= 1060px */
}
/* centra davvero la cornice */
.section.video-intro .video-frame{
margin-left: auto !important;
margin-right: auto !important;
}/* =========================
HEADER — TESTI LUMINOSI (stile logo)
Per: .logo-title + .main-nav a
========================= */
:root{
--gold-1: rgba(246,240,228,.95); /* warm ivory */
--gold-2: rgba(214,170,70,.95); /* oro */
--gold-3: rgba(246,240,228,.70); /* highlight */
--glow-1: rgba(246,240,228,.42);
--glow-2: rgba(214,170,70,.34);
--glow-3: rgba(214,170,70,.22);
--blue-micro: rgba(42,121,197,.12);
}
/* Titolo logo + voci menu */
.site-header .logo-title,
.site-header .main-nav a{
color: transparent;
background-image: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 0 4px var(--glow-1),
0 0 12px var(--glow-2),
0 0 22px var(--glow-3),
0 0 38px var(--blue-micro);
letter-spacing: .08em;
transition: text-shadow .25s ease, filter .25s ease, transform .25s ease;
}
/* Hover più luminoso */
.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible{
text-shadow:
0 0 6px rgba(246,240,228,.60),
0 0 16px rgba(214,170,70,.46),
0 0 30px rgba(214,170,70,.30),
0 0 46px rgba(42,121,197,.16);
filter: brightness(1.08) saturate(1.05);
transform: translateY(-1px);
}
/* CTA "Workshop" (mantieni bottone, ma con glow coerente) */
.site-header .main-nav a.nav-cta{
color: transparent !important;
background-image: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
-webkit-background-clip: text;
background-clip: text;
border: 1px solid rgba(246,240,228,.55);
box-shadow:
0 0 10px rgba(214,170,70,.18),
0 0 24px rgba(246,240,228,.10);
}
/* Hover CTA più "premium" */
.site-header .main-nav a.nav-cta:hover,
.site-header .main-nav a.nav-cta:focus-visible{
border-color: rgba(246,240,228,.75);
box-shadow:
0 0 14px rgba(214,170,70,.26),
0 0 34px rgba(246,240,228,.16);
}/* =========================================================
FINAL OVERRIDE — TESTI HEADER ORO ACCESO (stile logo)
Incolla in FONDO a ads.css
========================================================= */
:root{
--ads-gold-hot: #E0AA25; /* oro acceso */
--ads-gold-hi2: #FFF3D6; /* highlight caldo */
--ads-gold-mid2: #FFD27A; /* mezzo tono caldo */
--ads-gold-deep: #B47A12; /* profondità */
}
/* WORDMARK: ALCHIMISTI DEI SOGNI (più oro + glow) */
.site-header .logo-title{
font-weight: 800 !important;
letter-spacing: 0.26em !important;
text-transform: uppercase !important;
background-image: linear-gradient(
180deg,
var(--ads-gold-hi2) 0%,
var(--ads-gold-mid2) 26%,
var(--ads-gold-hot) 58%,
var(--ads-gold-deep) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 1px 0 rgba(0,0,0,.96),
0 0 16px rgba(224,170,37,.55),
0 0 34px rgba(224,170,37,.28),
0 0 18px rgba(42,121,197,.18) !important;
filter: saturate(1.25) brightness(1.06);
}
/* MENU: luminoso come il logo (ma NON tocco la CTA Workshop) */
.site-header .main-nav a:not(.nav-cta){
background-image: linear-gradient(
180deg,
var(--ads-gold-hi2) 0%,
#FFE7B0 45%,
var(--ads-gold-hot) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 1px 0 rgba(0,0,0,.92),
0 0 14px rgba(224,170,37,.28) !important;
opacity: .92;
transition: opacity .18s ease, text-shadow .18s ease, filter .18s ease;
}
.site-header .main-nav a:not(.nav-cta):hover,
.site-header .main-nav a:not(.nav-cta):focus-visible{
opacity: 1;
text-shadow:
0 1px 0 rgba(0,0,0,.95),
0 0 22px rgba(224,170,37,.55),
0 0 16px rgba(42,121,197,.35) !important;
filter: brightness(1.08);
}
/* MOBILE: wordmark un filo più grande */
@media (max-width: 960px){
.site-header .logo-title{ font-size: 22px !important; }
}/* =========================================================
HEADER — ORO LUCENTE + PUNTA DI BLU (NO NERO)
Incolla in fondo a ads.css (ultima cosa)
========================================================= */
:root{
--ads-navy: #050816;
--ads-gold-hi: rgba(255,245,222,1); /* Warm Ivory bright */
--ads-gold-mid: rgba(255,209,110,1); /* Gold mid */
--ads-gold-hot: rgba(224,170,37,1); /* Gold hot */
--ads-gold-deep: rgba(176,122,18,1); /* Deep gold */
--ads-platinum: rgba(233,238,246,1); /* Platinum */
--ads-blue: rgba(42,121,197,1); /* Steel Blue */
}
/* === WORDMARK (ALCHIMISTI DEI SOGNI) === */
.site-header .logo-title{
font-weight: 800 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
/* Oro lucente "metallo" */
background-image: linear-gradient(
180deg,
var(--ads-gold-hi) 0%,
var(--ads-gold-mid) 22%,
var(--ads-gold-hot) 58%,
var(--ads-gold-deep) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
/* Glow elegante: caldo + micro-blue (NO contorno nero) */
text-shadow:
0 0 1px rgba(233,238,246,.55), /* crisp platinum edge */
0 0 7px rgba(255,245,222,.55), /* warm halo */
0 0 16px rgba(224,170,37,.58), /* gold glow */
0 0 34px rgba(224,170,37,.30), /* soft bloom */
0 0 22px rgba(42,121,197,.20) /* punta di blu */
!important;
filter: saturate(1.18) brightness(1.10) !important;
}
/* === MENU (luminoso ma più sobrio del titolo) === */
.site-header .main-nav a:not(.nav-cta){
background-image: linear-gradient(
180deg,
rgba(255,245,222,.95) 0%,
rgba(255,209,110,.92) 48%,
rgba(224,170,37,.92) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 0 1px rgba(233,238,246,.42),
0 0 10px rgba(224,170,37,.26),
0 0 14px rgba(42,121,197,.12)
!important;
opacity: .94;
transition: opacity .18s ease, text-shadow .18s ease, filter .18s ease, transform .18s ease;
}
.site-header .main-nav a:not(.nav-cta):hover,
.site-header .main-nav a:not(.nav-cta):focus-visible{
opacity: 1;
text-shadow:
0 0 1px rgba(233,238,246,.55),
0 0 14px rgba(224,170,37,.42),
0 0 26px rgba(224,170,37,.22),
0 0 18px rgba(42,121,197,.18)
!important;
filter: brightness(1.08) saturate(1.08);
transform: translateY(-1px);
}
/* === CTA Workshop: bordo platinum + glow coerente (niente nero) === */
.site-header .main-nav a.nav-cta{
border-color: rgba(233,238,246,.60) !important;
box-shadow:
0 0 14px rgba(224,170,37,.22),
0 0 26px rgba(42,121,197,.14)
!important;
}
.site-header .main-nav a.nav-cta:hover{
border-color: rgba(233,238,246,.78) !important;
box-shadow:
0 0 18px rgba(224,170,37,.30),
0 0 34px rgba(42,121,197,.18)
!important;
}
/* Mobile: titolo un filo più grande e leggibile */
@media (max-width: 960px){
.site-header .logo-title{ font-size: 22px !important; }
}/* =========================================================
CONTRAST FIX — più leggibile, meno opaco (NO bordo nero)
Incolla in fondo a ads.css
========================================================= */
.site-header .logo-title{
opacity: 1 !important;
filter: saturate(1.22) brightness(1.10) contrast(1.12) !important;
/* più “oro” */
background-image: linear-gradient(
180deg,
rgba(255,250,236,1) 0%,
rgba(255,219,140,1) 26%,
rgba(224,170,37,1) 62%,
rgba(176,122,18,1) 100%
) !important;
/* micro-contrasto: navy molto soft + platinum edge */
text-shadow:
0 1px 0 rgba(5,8,22,.55), /* base (navy) */
0 0 1px rgba(233,238,246,.70), /* edge platinum */
0 0 10px rgba(255,245,222,.55), /* warm halo */
0 0 22px rgba(224,170,37,.55), /* gold glow */
0 0 40px rgba(224,170,37,.26), /* bloom */
0 0 24px rgba(42,121,197,.22) /* punta di blu */
!important;
/* Stroke leggerissimo (aiuta tanto sul chiaro) */
-webkit-text-stroke: .6px rgba(5,8,22,.28);
}
/* MENU: stesso concetto ma più sobrio */
.site-header .main-nav a:not(.nav-cta){
opacity: 1 !important;
filter: saturate(1.12) brightness(1.06) contrast(1.08) !important;
text-shadow:
0 1px 0 rgba(5,8,22,.45),
0 0 1px rgba(233,238,246,.55),
0 0 14px rgba(224,170,37,.28),
0 0 16px rgba(42,121,197,.14)
!important;
-webkit-text-stroke: .45px rgba(5,8,22,.22);
}/* OPTIONAL: strip “glass” per staccare dal background */
.site-header{
background: linear-gradient(
180deg,
rgba(5,8,22,.22) 0%,
rgba(5,8,22,.10) 100%
) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}/* =========================================================
ADS HEADER — luce sopra / ombra petrolio sotto (premium)
Incolla in fondo a ads.css
========================================================= */
:root{
--ads-navy: #050816;
--ads-ocean: #0B2A45; /* petrolio elegante */
--ads-steel: #2A79C5; /* punta blu */
--ads-plat: #E9EEF6;
--ads-ivory:#F6F0E4;
--ads-gold: #E0AA25;
}
/* WORDMARK: ALCHIMISTI DEI SOGNI */
.site-header .logo-title{
opacity: 1 !important;
font-weight: 800 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
/* ORO sopra (luce), oro caldo al centro, micro riflesso petrolio sotto */
background-image: linear-gradient(
180deg,
rgba(246,240,228,1) 0%,
rgba(255,219,140,1) 22%,
rgba(224,170,37,1) 60%,
rgba(11,42,69,.22) 100% /* “petrol reflection” leggerissima */
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
/* LUCE sopra / OMBRA sotto (senza nero) */
text-shadow:
0 -1px 0 rgba(233,238,246,.55), /* luce sopra (platinum) */
0 1px 0 rgba(11,42,69,.40), /* ombra sotto (petrolio) */
0 0 14px rgba(224,170,37,.42), /* glow oro */
0 0 28px rgba(224,170,37,.20), /* bloom soft */
0 0 18px rgba(42,121,197,.18) /* punta blu */
!important;
filter: saturate(1.20) brightness(1.08) contrast(1.12) !important;
/* micro-stroke petrolio: aumenta leggibilità sul cielo chiaro */
-webkit-text-stroke: .45px rgba(11,42,69,.25);
}
/* MENU: stesso mood, meno “forte” del titolo */
.site-header .main-nav a:not(.nav-cta){
opacity: 1 !important;
background-image: linear-gradient(
180deg,
rgba(246,240,228,.96) 0%,
rgba(255,219,140,.90) 48%,
rgba(224,170,37,.90) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 -1px 0 rgba(233,238,246,.35),
0 1px 0 rgba(11,42,69,.32),
0 0 10px rgba(224,170,37,.22),
0 0 12px rgba(42,121,197,.12)
!important;
-webkit-text-stroke: .35px rgba(11,42,69,.20);
transition: filter .18s ease, text-shadow .18s ease, transform .18s ease;
}
.site-header .main-nav a:not(.nav-cta):hover,
.site-header .main-nav a:not(.nav-cta):focus-visible{
filter: brightness(1.08) saturate(1.08);
text-shadow:
0 -1px 0 rgba(233,238,246,.48),
0 1px 0 rgba(11,42,69,.36),
0 0 16px rgba(224,170,37,.36),
0 0 18px rgba(42,121,197,.18)
!important;
transform: translateY(-1px);
}/* =========================================================
ADS — HEADER ULTRA PREMIUM (più contrasto, meno “milk”)
+ oro lucente + punta blu + sheen
Incolla in FONDO a ads.css
========================================================= */
:root{
--ads-navy: #050816;
--ads-ocean: #0B2A45; /* petrolio */
--ads-steel: #2A79C5; /* blu */
--ads-plat: #E9EEF6;
--ads-ivory: #F6F0E4;
--ads-gold-hi: rgba(255,250,238,1);
--ads-gold-mid: rgba(255,219,140,1);
--ads-gold-hot: rgba(224,170,37,1);
--ads-gold-deep: rgba(176,122,18,1);
}
/* 1) HEADER STRIP: meno “milk” (più opaco + blur più controllato) */
.site-header{
background: linear-gradient(
120deg,
rgba(5,8,22,.96) 0%,
rgba(11,42,69,.92) 60%,
rgba(5,8,22,.90) 100%
) !important;
backdrop-filter: blur(10px) saturate(1.15);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
border-bottom: 1px solid rgba(233,238,246,.10) !important;
box-shadow: 0 10px 30px rgba(5,8,22,.45) !important;
}
/* 2) SHEEN (luce che scorre) */
@keyframes adsSheen {
0% { background-position: 0 0, -160% 0; }
55% { background-position: 0 0, 160% 0; }
100% { background-position: 0 0, 160% 0; }
}
/* 3) WORDMARK: oro sopra / petrolio sotto + punta blu (super leggibile) */
.site-header .logo-title{
opacity: 1 !important;
font-weight: 900 !important;
letter-spacing: .28em !important;
text-transform: uppercase !important;
/* Base metal + sheen layer */
background-image:
linear-gradient(
180deg,
var(--ads-gold-hi) 0%,
var(--ads-gold-mid) 22%,
var(--ads-gold-hot) 62%,
rgba(11,42,69,.18) 100%
),
linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.55) 42%,
rgba(255,255,255,0) 60%
) !important;
background-size: 100% 100%, 220% 100% !important;
background-position: 0 0, -160% 0 !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
/* Contrasto elegante: luce sopra + ombra petrolio sotto + glow oro/blu */
text-shadow:
0 -1px 0 rgba(233,238,246,.55), /* luce sopra (platinum) */
0 1px 0 rgba(11,42,69,.48), /* ombra sotto (petrolio) */
0 0 14px rgba(224,170,37,.48), /* glow oro */
0 0 30px rgba(224,170,37,.22), /* bloom soft */
0 0 18px rgba(42,121,197,.18) /* punta blu */
!important;
-webkit-text-stroke: .55px rgba(11,42,69,.28);
filter: saturate(1.22) brightness(1.10) contrast(1.16) !important;
animation: adsSheen 8.5s ease-in-out infinite;
}
/* Rispetta chi ha “riduci animazioni” */
@media (prefers-reduced-motion: reduce){
.site-header .logo-title{ animation: none !important; }
}
/* 4) MENU: stesso stile ma più “sobrio” del titolo */
.site-header .main-nav a:not(.nav-cta){
opacity: 1 !important;
background-image:
linear-gradient(
180deg,
rgba(246,240,228,.96) 0%,
rgba(255,219,140,.88) 50%,
rgba(224,170,37,.92) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
text-shadow:
0 -1px 0 rgba(233,238,246,.35),
0 1px 0 rgba(11,42,69,.38),
0 0 12px rgba(224,170,37,.24),
0 0 12px rgba(42,121,197,.12)
!important;
-webkit-text-stroke: .40px rgba(11,42,69,.22);
transition: filter .18s ease, text-shadow .18s ease, transform .18s ease;
}
.site-header .main-nav a:not(.nav-cta):hover,
.site-header .main-nav a:not(.nav-cta):focus-visible{
filter: brightness(1.10) saturate(1.10) contrast(1.08);
text-shadow:
0 -1px 0 rgba(233,238,246,.45),
0 1px 0 rgba(11,42,69,.42),
0 0 16px rgba(224,170,37,.36),
0 0 18px rgba(42,121,197,.16)
!important;
transform: translateY(-1px);
}
/* 5) CTA "WORKSHOP": premium chiaro, ma con carattere deciso */
.site-header .main-nav a.nav-cta{
background: rgba(246,240,228,.92) !important;
color: rgba(5,8,22,.96) !important;
border: 1px solid rgba(233,238,246,.72) !important;
box-shadow:
0 0 0 1px rgba(224,170,37,.18) inset,
0 10px 26px rgba(5,8,22,.28),
0 0 18px rgba(224,170,37,.18)
!important;
}
.site-header .main-nav a.nav-cta:hover{
filter: brightness(1.05);
box-shadow:
0 0 0 1px rgba(224,170,37,.26) inset,
0 12px 30px rgba(5,8,22,.30),
0 0 22px rgba(42,121,197,.14),
0 0 22px rgba(224,170,37,.22)
!important;
}/* =========================================================
ADS — HEADER SUPER PREMIUM (NO BANDA FISSA)
Trasparente di base, glam gold + contrasto,
pellicola blu/oro SOLO on hover/focus/is-open
(INCORDARE IN FONDO AL CSS)
========================================================= */
/* 1) Header: NIENTE fascia fissa */
.site-header{
background: transparent !important;
box-shadow: none !important;
border-bottom: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 2) Pellicola “glam” che compare SOLO quando attivo */
.site-header::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
/* navy + deep ocean con puntina di steel blue + oro */
background:
radial-gradient(circle at 12% 0%, rgba(243,201,105,.14), transparent 56%),
radial-gradient(circle at 92% 10%, rgba(42,121,197,.22), transparent 58%),
linear-gradient(120deg, rgba(5,8,22,.88), rgba(11,42,69,.72));
opacity: 0 !important;
transition: opacity .20s ease-out !important;
pointer-events:none !important;
z-index:-1 !important;
/* IMPORTANT: zero “milk” finché è spento */
backdrop-filter: blur(0px) saturate(1) !important;
-webkit-backdrop-filter: blur(0px) saturate(1) !important;
}
/* hairline premium (solo quando attivo) */
.site-header::after{
content:"" !important;
position:absolute !important;
left:7vw !important;
right:7vw !important;
bottom:10px !important;
height:1px !important;
background: linear-gradient(90deg,
transparent,
rgba(243,201,105,.55),
rgba(233,238,246,.38),
rgba(42,121,197,.20),
transparent);
opacity: 0 !important;
transform: translateY(6px) !important;
transition: opacity .20s ease-out, transform .20s ease-out !important;
pointer-events:none !important;
z-index:0 !important;
}
/* Stati attivi */
.site-header:hover::before,
.site-header:focus-within::before,
.site-header.is-open::before{
opacity: 1 !important;
backdrop-filter: blur(14px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}
.site-header:hover::after,
.site-header:focus-within::after,
.site-header.is-open::after{
opacity: .95 !important;
transform: translateY(0) !important;
}
/* contenuti sopra la pellicola */
.site-header > *{
position: relative !important;
z-index: 1 !important;
}
/* 3) LOGO: oro più acceso + contrasto netto */
.site-header .logo-title{
font-weight: 900 !important;
letter-spacing: .24em !important;
text-transform: uppercase !important;
background-image: linear-gradient(180deg,
#FFF6D6 0%,
#F3C969 30%,
#E0AA25 58%,
#B67A12 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
/* CONTRASTO: ombra sotto + micro glow oro */
text-shadow:
0 2px 0 rgba(0,0,0,.95),
0 14px 26px rgba(0,0,0,.35),
0 0 12px rgba(243,201,105,.18) !important;
filter: saturate(1.08) brightness(1.02) !important;
}
/* 4) MENU: oro definito SEMPRE leggibile (senza fascia) */
.site-header .main-nav a{
text-decoration: none !important;
background-image: linear-gradient(180deg,
#FFF6D6 0%,
#F3C969 35%,
#E0AA25 65%,
#B67A12 100%) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
/* più contrasto, zero “milk” */
text-shadow:
0 2px 0 rgba(0,0,0,.95),
0 10px 18px rgba(0,0,0,.32) !important;
opacity: .92 !important;
transition: opacity .18s ease, text-shadow .18s ease, filter .18s ease !important;
}
/* Hover: blu premium + più “glow” (senza bande) */
.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible{
opacity: 1 !important;
text-shadow:
0 2px 0 rgba(0,0,0,.95),
0 12px 22px rgba(0,0,0,.34),
0 0 18px rgba(42,121,197,.35) !important;
filter: saturate(1.12) brightness(1.06) !important;
}
/* 5) CTA WORKSHOP: resta premium e leggibile */
.site-header .nav-cta{
-webkit-text-fill-color: initial !important;
color: rgba(246,240,228,.98) !important;
border: 1px solid rgba(224,170,37,.66) !important;
background: linear-gradient(180deg, rgba(5,8,22,.70), rgba(5,8,22,.92)) !important;
box-shadow:
0 18px 44px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.site-header .nav-cta:hover{
transform: translateY(-2px);
box-shadow:
0 26px 66px rgba(0,0,0,.46),
inset 0 1px 0 rgba(255,255,255,.18) !important;
}/* =========================================================
INVERSIONE COLORI TESTO — luce sopra / petrolio sotto
(wordmark + menu) — INCOLLA IN FONDO
========================================================= */
:root{
--ads-ocean: #0B2A45; /* petrolio */
--ads-steel: #2A79C5; /* blu */
--ads-plat: #E9EEF6; /* platinum */
--ads-ivory: #F6F0E4; /* warm ivory */
}
/* WORDMARK: oro sopra → petrolio sotto */
.site-header .logo-title{
background-image: linear-gradient(
180deg,
rgba(246,240,228,1) 0%,
rgba(255,219,140,1) 28%,
rgba(224,170,37,1) 62%,
rgba(11,42,69,.85) 100% /* petrolio sotto */
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
/* INVERSIONE OMBRE: highlight sopra, shadow petrolio sotto (NO NERO) */
text-shadow:
0 -1px 0 rgba(233,238,246,.70), /* luce sopra (platinum) */
0 2px 0 rgba(11,42,69,.55), /* ombra sotto (petrolio) */
0 0 14px rgba(224,170,37,.38), /* glow oro */
0 0 22px rgba(42,121,197,.18) /* punta blu */
!important;
/* stroke petrolio leggero = contrasto top */
-webkit-text-stroke: .55px rgba(11,42,69,.28) !important;
filter: saturate(1.10) contrast(1.14) brightness(1.05) !important;
}
/* MENU: stesso effetto ma più sobrio */
.site-header .main-nav a:not(.nav-cta){
background-image: linear-gradient(
180deg,
rgba(246,240,228,.98) 0%,
rgba(255,219,140,.86) 52%,
rgba(11,42,69,.78) 100% /* petrolio sotto */
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow:
0 -1px 0 rgba(233,238,246,.42),
0 2px 0 rgba(11,42,69,.45),
0 0 10px rgba(224,170,37,.18),
0 0 12px rgba(42,121,197,.12)
!important;
-webkit-text-stroke: .40px rgba(11,42,69,.22) !important;
opacity: .95 !important;
}
.site-header .main-nav a:not(.nav-cta):hover,
.site-header .main-nav a:not(.nav-cta):focus-visible{
text-shadow:
0 -1px 0 rgba(233,238,246,.55),
0 2px 0 rgba(11,42,69,.55),
0 0 16px rgba(224,170,37,.28),
0 0 16px rgba(42,121,197,.18)
!important;
filter: brightness(1.06) saturate(1.10);
}/* =========================================================
GLAM DORATO (SHEEN) su header: wordmark + menu
(mantiene oro sopra / petrolio sotto)
========================================================= */
@keyframes adsGoldSheen {
0% { background-position: 0 0, -160% 0; }
55% { background-position: 0 0, 160% 0; }
100% { background-position: 0 0, 160% 0; }
}
/* Wordmark: aggiunge “colpo di luce” */
.site-header .logo-title{
background-image:
/* base inverted */
linear-gradient(
180deg,
rgba(246,240,228,1) 0%,
rgba(255,219,140,1) 28%,
rgba(224,170,37,1) 62%,
rgba(11,42,69,.85) 100%
),
/* sheen */
linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.55) 42%,
rgba(255,255,255,0) 60%
) !important;
background-size: 100% 100%, 220% 100% !important;
background-position: 0 0, -160% 0 !important;
animation: adsGoldSheen 9s ease-in-out infinite !important;
}
/* Menu: sheen più leggero (meno invasivo) */
.site-header .main-nav a:not(.nav-cta){
background-image:
linear-gradient(
180deg,
rgba(246,240,228,.98) 0%,
rgba(255,219,140,.86) 52%,
rgba(11,42,69,.78) 100%
),
linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.30) 44%,
rgba(255,255,255,0) 62%
) !important;
background-size: 100% 100%, 260% 100% !important;
background-position: 0 0, -170% 0 !important;
animation: adsGoldSheen 12s ease-in-out infinite !important;
}
/* Rispetta chi ha “riduci animazioni” */
@media (prefers-reduced-motion: reduce){
.site-header .logo-title,
.site-header .main-nav a:not(.nav-cta){
animation: none !important;
}
}