/* ============================================================
StudioAFRA — main.css
Estratto da studioafra_v8_FINAL.html + adattamenti WP
Font: Bebas Neue (--BN) · Montserrat (--M) · DM Sans (--B)
============================================================ */
/* Google Fonts: loaded via wp_enqueue_style in inc/enqueue.php */
:root{
--dark:#0A0A0A;--dark2:#141414;--dark3:#1E1E1E;
--grey:#2A2A2A;
--gold:#F5C400;
--tx:#F5F0E8;--tx2:#888;--tx3:#3a3a3a;
--BN:'Bebas Neue',sans-serif;
--M:'Montserrat',sans-serif;
--B:'DM Sans',sans-serif;
--r:20px;--gap:10px;
/* Rapporto copertine news: 1920x1080 (16:9) - aggiornato 11/08/2026 */
--cover-ratio:16 / 9;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#070707;color:var(--tx);font-family:var(--B);overflow-x:hidden;cursor:none;padding:var(--gap);}
/* Gap tra sezioni — margin invece di flex gap (compatibile con GSAP ScrollTrigger pin) */
.sec, #cap, section{margin-bottom:var(--gap);}
section:last-child, .sec:last-child{margin-bottom:0;}
/* Visibilità nav — sezioni disattivate via Customizer */
.nav-hidden{display:none;}
/* Clienti marquee — logo immagine */
.client-logo-img{max-height:36px;width:auto;opacity:.45;filter:grayscale(100%);transition:opacity .3s,filter .3s;}
.logo-item:hover .client-logo-img{opacity:.85;filter:grayscale(0%);}
/* CURSOR */
#cur{position:fixed;width:8px;height:8px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;mix-blend-mode:difference;transition:transform .1s;}
#curf{position:fixed;width:26px;height:26px;border:1px solid rgba(245,196,0,.35);border-radius:50%;pointer-events:none;z-index:9998;transition:width .2s,height .2s,border-color .2s;}
/* LOADER */
#loader{position:fixed;inset:0;z-index:9990;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .9s,visibility .9s;}
#loader.done{opacity:0;visibility:hidden;}
.ld-mark{animation:ld-pulse 1.8s ease-in-out infinite alternate;}
@keyframes ld-pulse{from{opacity:.7;transform:scale(.97);}to{opacity:1;transform:scale(1.03);}}
.ld-wordmark{font-family:var(--M);font-size:13px;font-weight:600;letter-spacing:.55em;color:var(--tx);text-transform:uppercase;margin-top:6px;}
.ld-wordmark span{color:var(--gold);}
.ld-bar{width:clamp(180px,32vw,340px);height:1px;background:rgba(255,255,255,.08);position:relative;}
.ld-fill{height:1px;background:var(--gold);width:0%;}
.ld-dot{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:5px;height:5px;background:var(--gold);border-radius:50%;box-shadow:0 0 10px var(--gold);}
.ld-pct{font-family:var(--M);font-size:10px;font-weight:500;letter-spacing:.3em;color:rgba(245,196,0,.6);}
.sec{border-radius:var(--r);overflow:hidden;position:relative;}
/* NAV */
#nav{position:fixed;top:var(--gap);left:var(--gap);right:var(--gap);z-index:500;border-radius:var(--r);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;transition:background .4s,border-color .4s;border:1px solid transparent;}
#nav.sc{background:rgba(10,10,10,.92);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.05);}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-mark{width:36px;height:39px;flex-shrink:0;}
.nav-wordmark{font-family:var(--M);font-size:13px;font-weight:700;letter-spacing:.38em;color:var(--tx);text-transform:uppercase;}
.nav-wordmark span{color:var(--gold);}
.nav-menu-links{display:flex;gap:28px;list-style:none;}
.nav-menu-links a{font-family:var(--BN);font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx2);text-decoration:none;transition:color .2s;}
.nav-menu-links a:hover{color:var(--gold);}
.nav-cta{font-family:var(--M);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dark);background:var(--gold);padding:10px 22px;border:none;cursor:none;border-radius:40px;transition:background .2s,transform .15s;}
.nav-cta:hover{background:#e0b200;transform:translateY(-1px);}
/* HERO */
#hero{background:var(--dark);min-height:calc(100vh - var(--gap)*2);display:flex;align-items:center;padding:100px 5vw 60px;position:relative;overflow:hidden;}
#cvs{position:absolute;inset:0;z-index:0;}
.hero-content{position:relative;z-index:2;max-width:52%;}
/* H1 Bebas Neue */
.hero-h1{font-family:var(--BN);font-size:clamp(5.5rem,12vw,11rem);font-weight:400;line-height:.9;letter-spacing:.02em;color:var(--tx);margin-bottom:28px;}
.h1-line{display:block;overflow:hidden;}
.h1-inner{display:block;transform:translateY(110%);opacity:0;}
.h1-line:nth-child(1) .h1-inner{animation:wup .8s cubic-bezier(.16,1,.3,1) .5s forwards;}
.h1-line:nth-child(2) .h1-inner{animation:wup .8s cubic-bezier(.16,1,.3,1) .68s forwards;}
.gold-txt{color:var(--gold);}
/* Montserrat per sottotitoli hero */
.hero-sub{display:flex;align-items:center;gap:14px;margin-bottom:36px;opacity:0;animation:fup .5s 1.1s forwards;flex-wrap:wrap;}
.sdot{width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0;}
.stxt{font-family:var(--M);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tx2);}
.hero-nums{display:flex;gap:40px;margin-bottom:44px;opacity:0;animation:fup .5s 1.25s forwards;}
.hn{display:flex;flex-direction:column;}
.hn-n{font-family:var(--BN);font-size:2.8rem;color:var(--gold);line-height:1;}
.hn-l{font-family:var(--M);font-size:9px;font-weight:400;color:var(--tx2);letter-spacing:.06em;margin-top:4px;}
.hero-ctas{display:flex;gap:12px;opacity:0;animation:fup .5s 1.4s forwards;}
/* BOTTONI Montserrat */
.bp{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;background:var(--gold);color:var(--dark);font-family:var(--M);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;border:none;cursor:none;border-radius:40px;transition:background .2s,transform .2s;}
.bp:hover{background:#e0b200;transform:translateY(-2px);}
.ar{transition:transform .2s;display:inline-block;}
.bp:hover .ar{transform:translateX(4px);}
.bg{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:transparent;color:var(--tx2);font-family:var(--M);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(255,255,255,.12);cursor:none;border-radius:40px;transition:color .2s,border-color .2s;}
.bg:hover{color:var(--tx);border-color:rgba(255,255,255,.28);}
.hero-hint{position:absolute;bottom:80px;right:4vw;font-family:var(--M);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,196,0,.28);opacity:0;animation:fup .5s 2.2s forwards;}
.scr{position:absolute;bottom:46px;left:5vw;display:flex;align-items:center;gap:10px;opacity:0;animation:fup .5s 1.8s forwards;}
.scr-line{width:40px;height:1px;background:linear-gradient(to right,var(--gold),transparent);}
.scr-lbl{font-family:var(--M);font-size:9px;font-weight:500;letter-spacing:.28em;color:var(--tx3);text-transform:uppercase;}
/* TICKER — continuo larghezza piena */
.ticker-wrap{position:absolute;bottom:0;left:0;right:0;overflow:hidden;border-top:1px solid rgba(255,255,255,.05);padding:9px 0;background:rgba(10,10,10,.3);}
.ticker-inner{display:flex;white-space:nowrap;animation:tick 35s linear infinite;}
.ti{display:inline-flex;align-items:center;gap:20px;padding-right:60px;font-family:var(--M);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tx2);}
.sp{color:var(--gold);}
/* SEZIONI */
.pad{padding:clamp(60px,8vw,120px) clamp(32px,5vw,80px);}
.wrap{max-width:1200px;margin:0 auto;}
.stag{font-family:var(--BN);font-size:15px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.stag::before{content:'';width:16px;height:1px;background:var(--gold);}
.sh2{font-family:var(--BN);font-size:clamp(3rem,5.5vw,5rem);line-height:.92;letter-spacing:.03em;margin-bottom:20px;}
.sbody{font-family:var(--B);font-size:.92rem;font-weight:300;color:var(--tx2);line-height:1.88;max-width:480px;}
/* ABOUT */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.qb{margin-top:28px;padding:20px 24px;border-left:2px solid var(--gold);background:rgba(245,196,0,.05);border-radius:0 8px 8px 0;}
.qb p{font-family:var(--B);font-size:.95rem;font-weight:400;font-style:italic;color:var(--tx);line-height:1.7;}
.cnts{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.cnt{background:var(--dark3);padding:28px 24px;border:1px solid rgba(255,255,255,.05);border-radius:4px;position:relative;overflow:hidden;transition:border-color .3s;}
.cnt:hover{border-color:rgba(245,196,0,.2);}
.cnt::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gold);transition:width .5s;}
.cnt:hover::after{width:100%;}
.cn{font-family:var(--BN);font-size:3.5rem;color:var(--gold);line-height:1;margin-bottom:4px;}
.cl{font-family:var(--M);font-size:9px;font-weight:400;color:var(--tx2);letter-spacing:.06em;}
/* CAPABILITIES — grigio scuro */
/* ══ CAPABILITIES ANIMATED ══ */
#cap{
width:100%;
min-height:100vh;
height:auto;
background:#F0EEE8;
display:flex;flex-direction:column;
/* Stesso padding orizzontale delle altre sezioni (.pad) */
padding:0 clamp(32px,5vw,80px);
border-radius:var(--r);
}
/* Inner wrapper — solo max-width + margine auto, NO padding laterale extra */
#cap .cap-inner{
max-width:1200px;
width:100%;
margin:0 auto;
padding:64px 0 52px; /* solo verticale */
display:flex;
flex-direction:column;
flex:1;
}
/* Header nella sezione */
#cap .cap-tag{
font-family:var(--M);font-size:11px;font-weight:600;
letter-spacing:.32em;text-transform:uppercase;
color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
#cap .cap-tag::before{content:'';width:16px;height:1px;background:var(--gold);}
#cap .cap-h2{
font-family:var(--BN);
font-size:clamp(2.8rem,5.5vw,5rem);
line-height:.9;letter-spacing:.03em;color:#0A0A0A;margin-bottom:36px;
}
#cap .cap-h2 .gold{color:var(--gold);}
/* Grid */
.cg{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:auto;
gap:12px;flex:1;
position:relative;z-index:2;
}
/* Cards */
.cc{
background:#2A2A2A;border-radius:10px;
padding:28px;position:relative;
cursor:none;
transition:background .28s,scale .28s,box-shadow .28s;
animation:float-card 4s ease-in-out infinite;
}
.cc:nth-child(2){animation-delay:.4s;}
.cc:nth-child(3){animation-delay:.8s;}
.cc:nth-child(4){animation-delay:1.2s;}
.cc:nth-child(5){animation-delay:1.6s;}
.cc:nth-child(6){animation-delay:2s;}
@keyframes float-card{0%,100%{translate:0 0;}50%{translate:0 -6px;}}
.cnum{font-family:var(--BN);font-size:14px;letter-spacing:.28em;color:#444;margin-bottom:22px;transition:color .25s;}
.cico{font-size:1.2rem;margin-bottom:12px;display:block;transition:color .25s;}
.ct{font-family:var(--BN);font-size:1.45rem;letter-spacing:.05em;color:var(--tx);margin-bottom:8px;transition:color .25s;}
.cd{font-family:var(--B);font-size:.8rem;font-weight:300;color:#777;line-height:1.8;transition:color .25s;}
.car{
position:absolute;bottom:22px;right:22px;
color:var(--gold);font-size:.95rem;
opacity:0;transform:translateX(-4px);
transition:opacity .2s,transform .2s;
}
.cc:hover .car{opacity:1;transform:translateX(0);}
.cc:hover{background:#F5C400;scale:1.03;box-shadow:0 20px 55px rgba(245,196,0,.22);}
.cc:hover .ct{color:#0A0A0A;}
.cc:hover .cnum{color:rgba(0,0,0,.35);}
.cc:hover .cd{color:rgba(0,0,0,.58);}
/* ── STAGE OVERLAYS (fixed, animati) ── */
.stage{
position:fixed;border-radius:10px;
background:var(--gold); /* default — overridden by data-bg-color/image */
pointer-events:none;z-index:300;opacity:0;
display:flex;flex-direction:column;justify-content:flex-end;
padding:52px 64px;overflow:hidden;
will-change:left,top,width,height,border-radius;
}
/* Overlay scuro quando c'è un'immagine di sfondo — per leggibilità testo */
.stage.has-image::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 100%);
z-index:0;
}
.stage.has-image .stage-content{position:relative;z-index:1;}
.stage-accent{
position:absolute;top:-40%;right:-15%;
width:70%;height:140%;
background:rgba(0,0,0,.05);border-radius:50%;
pointer-events:none;
}
.stage-dot{
position:absolute;top:36px;right:40px;
width:14px;height:14px;border-radius:50%;
background:#0A0A0A;
}
.stage.has-image .stage-dot{background:rgba(255,255,255,.7);}
.stage-content{display:flex;flex-direction:column;justify-content:flex-end;}
.stage-num{
font-family:var(--BN);font-size:14px;letter-spacing:.3em;
color:rgba(0,0,0,.35);margin-bottom:18px;
}
.stage.has-image .stage-num{color:rgba(255,255,255,.5);}
.stage-ico{font-size:2.2rem;margin-bottom:14px;display:block;color:#0A0A0A;}
.stage.has-image .stage-ico{color:rgba(255,255,255,.85);}
.stage-title{
font-family:var(--BN);
font-size:clamp(2.8rem,6vw,5.5rem);
letter-spacing:.03em;line-height:.9;
color:#0A0A0A;margin-bottom:16px;
}
.stage.has-image .stage-title{color:#fff;}
.stage-desc{
font-family:var(--M);font-size:1rem;font-weight:400;
color:rgba(0,0,0,.6);line-height:1.75;max-width:560px;
}
.stage.has-image .stage-desc{color:rgba(255,255,255,.78);}
/* PORTFOLIO */
.ph{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;}
.pf{display:flex;gap:4px;flex-wrap:wrap;}
.fb{font-family:var(--M);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:7px 16px;background:transparent;color:var(--tx2);border:1px solid rgba(255,255,255,.08);cursor:none;border-radius:40px;transition:all .2s;}
.fb.on,.fb:hover{background:var(--gold);color:var(--dark);border-color:var(--gold);}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.pi{aspect-ratio:4/3;border-radius:12px;position:relative;overflow:hidden;cursor:none;}
.pibg{width:100%;height:100%;transition:transform .7s cubic-bezier(.25,1,.5,1);display:flex;align-items:center;justify-content:center;}
.pi:hover .pibg{transform:scale(1.06);}
.piov{position:absolute;inset:0;border-radius:12px;background:linear-gradient(to top,rgba(10,10,10,.93) 40%,transparent);opacity:0;transition:opacity .4s;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;}
.pi:hover .piov{opacity:1;}
.pcat{font-family:var(--M);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
.ptit{font-family:var(--BN);font-size:1.5rem;letter-spacing:.03em;color:var(--tx);}
.pcli{font-family:var(--M);font-size:.75rem;color:var(--tx2);margin-top:3px;}
.g1{background:linear-gradient(135deg,#1a1a2e,#16213e);}
.g2{background:linear-gradient(135deg,#0f3460,#1a1a3e);}
.g3{background:linear-gradient(135deg,#141414,#2a2a2a);}
.g4{background:linear-gradient(135deg,#2d1b00,#3d2900);}
.g5{background:linear-gradient(135deg,#001a0d,#002d18);}
.g6{background:linear-gradient(135deg,#1a000e,#2d0018);}
/* CLIENTS — dark con gold headline (dual color) */
/* ── CLIENTS MARQUEE ── */
.clients-header{
display:flex;align-items:flex-end;justify-content:space-between;
margin-bottom:56px;gap:24px;flex-wrap:wrap;
}
.clients-counter{
font-family:var(--BN);font-size:clamp(3rem,5vw,5rem);
color:var(--gold);line-height:1;
display:flex;align-items:baseline;gap:10px;
}
.clients-counter small{
font-family:var(--M);font-size:11px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;
color:var(--tx2);margin-left:4px;
}
/* Marquee track */
.marquee-wrap{
overflow:hidden;
/* Fade ai bordi */
-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
margin:0 calc(-1 * clamp(32px,5vw,80px)); /* rompe il padding della section per full-width */
padding:0 clamp(32px,5vw,80px);
}
.marquee-track{
display:flex;
gap:0;
width:max-content;
animation:marquee-scroll 28s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
/* Track inverso (seconda riga) */
.marquee-track.reverse{
animation-direction:reverse;
animation-duration:36s;
}
@keyframes marquee-scroll{
0% { transform:translateX(0); }
100%{ transform:translateX(-50%); }
}
/* Singolo logo item */
.logo-item{
display:flex;align-items:center;justify-content:center;
padding:28px 48px;
border-right:1px solid rgba(255,255,255,.06);
position:relative;
flex-shrink:0;
cursor:none;
transition:background .3s;
}
.logo-item:hover{ background:rgba(245,196,0,.05); }
.logo-name{
font-family:var(--BN);
font-size:clamp(1.2rem,2vw,1.7rem);
letter-spacing:.12em;
color:rgba(255,255,255,.22);
text-transform:uppercase;
transition:color .3s;
white-space:nowrap;
user-select:none;
}
.logo-item:hover .logo-name{ color:rgba(245,196,0,.75); }
/* Separatore dot tra nomi */
.logo-sep{
width:5px;height:5px;
background:rgba(245,196,0,.2);
border-radius:50%;
margin:0 36px;
flex-shrink:0;
align-self:center;
}
/* Seconda riga — loghi con immagini (placeholder) */
.logo-img-row{ margin-top:32px; }
.logo-item-img{
padding:20px 40px;
display:flex;align-items:center;
opacity:.35;
transition:opacity .3s;
}
.logo-item-img:hover{ opacity:.8; }
.logo-placeholder{
width:120px;height:36px;
background:rgba(255,255,255,.12);
border-radius:4px;
/* In WP: sostituire con ![]()
*/
}
/* CONTACTS */
.cog{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.ce{font-family:var(--BN);font-size:clamp(2rem,3vw,2.8rem);color:var(--gold);text-decoration:none;display:block;margin-top:20px;transition:color .2s;letter-spacing:.03em;}
.ce:hover{color:#e0b200;}
.ctel{font-family:var(--M);font-size:.95rem;color:var(--tx2);text-decoration:none;display:block;margin-top:8px;transition:color .2s;}
.ctel:hover{color:var(--tx);}
.ccp{display:inline-flex;align-items:center;gap:6px;font-family:var(--M);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);cursor:none;border:none;background:none;margin-top:14px;transition:color .2s;}
.ccp:hover{color:var(--gold);}
.cf{display:flex;flex-direction:column;gap:3px;}
.cfi{background:var(--dark3);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:13px 16px;color:var(--tx);font-family:var(--B);font-size:.88rem;font-weight:300;outline:none;transition:border-color .2s;width:100%;cursor:none;}
.cfi::placeholder{color:var(--tx3);}
.cfi:focus{border-color:rgba(245,196,0,.3);}
textarea.cfi{resize:none;height:100px;}
.cfb{background:var(--gold);color:var(--dark);border:none;border-radius:40px;padding:13px;font-family:var(--M);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;cursor:none;transition:background .2s,transform .2s;margin-top:2px;}
.cfb:hover{background:#e0b200;transform:translateY(-1px);}
/* FOOTER */
.footer-center{display:flex;flex-direction:column;align-items:center;margin-bottom:48px;gap:10px;}
.footer-mark{width:80px;height:87px;}
.footer-wordmark{font-family:var(--M);font-size:14px;font-weight:700;letter-spacing:.55em;color:var(--tx);text-transform:uppercase;}
.footer-wordmark span{color:var(--gold);}
.footer-links-row{display:flex;gap:32px;margin-top:8px;}
.footer-links-row a{font-family:var(--BN);font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);text-decoration:none;transition:color .2s;}
.footer-links-row a:hover{color:var(--gold);}
.footer-social{display:flex;gap:20px;margin-top:6px;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:var(--tx2);text-decoration:none;transition:color .2s,border-color .2s;}
.footer-social a:hover{color:var(--gold);border-color:rgba(245,196,0,.3);}
.frg{width:100%;height:1px;background:linear-gradient(to right,transparent,var(--gold) 30%,var(--gold) 70%,transparent);margin:32px 0;position:relative;}
.frgc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:5px;align-items:center;}
.fd{width:4px;height:4px;background:var(--gold);border-radius:50%;}
.fd.b{width:6px;height:6px;}
.fbt{display:flex;justify-content:space-between;align-items:center;}
.fin{font-family:var(--B);font-size:10px;font-weight:300;color:var(--tx3);line-height:1.9;}
.fco{font-family:var(--M);font-size:9px;font-weight:500;letter-spacing:.1em;color:var(--tx3);}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:translateY(0);}
@keyframes fup{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes wup{from{transform:translateY(110%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes tick{0%{transform:translateX(0);}100%{transform:translateX(-25%);}}
@media(max-width:900px){
.ag,.cog{grid-template-columns:1fr;gap:48px;}
.pg{grid-template-columns:1fr 1fr;}
.nav-menu-links{display:none;}
.hero-content{max-width:100%;}
.fbt{flex-direction:column;gap:12px;text-align:center;}
}
/* ══ MOBILE (≤768px) ══════════════════════════════════════ */
@media(max-width:768px){
/* HERO — nascondi canvas, mostra fregio SVG statico centrato a destra */
#cvs { display: none !important; }
#hero { justify-content: flex-end; flex-direction: column; padding: 100px 24px 80px; }
.hero-content { max-width: 100%; }
.hero-hint { display: none; }
/* CAPABILITIES — card sempre visibili, nessuna animazione */
#cap {
height: auto !important;
min-height: auto !important;
}
#cap .cap-inner { padding: 48px 0 40px; }
.cg {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
gap: 8px;
}
.cc {
animation: none !important; /* nessun float su mobile */
}
/* Hover touch-friendly */
.cc:active { background: #F5C400 !important; }
.cc:active .ct { color: #0A0A0A !important; }
}
@media(max-width:600px){
.pg { grid-template-columns: 1fr; }
.ph { flex-direction: column; gap: 20px; align-items: flex-start; }
.ag, .cog { grid-template-columns: 1fr; gap: 40px; }
.clg { grid-template-columns: 1fr 1fr; }
.fbt { flex-direction: column; gap: 12px; text-align: center; }
}
.ph{flex-direction:column;gap:20px;align-items:flex-start;}
/* ── SVG LOGO SIZES ── */
.ld-mark-svg { width: 100px; height: 113px; animation: ld-pulse 1.8s ease-in-out infinite alternate; }
.nav-mark-svg { width: 32px; height: 36px; flex-shrink: 0; }
.footer-mark-svg { width: 80px; height: 90px; }
/* Logo immagine da Customizer (quando caricato via Aspetto → Personalizza) */
img.nav-mark-svg,
img.footer-mark-svg,
img.ld-mark-svg { display:block; object-fit:contain; width:auto; }
/* ============================================================
STILI SPECIFICI WORDPRESS
============================================================ */
/* Cursor custom: disabilita in admin WP */
.wp-admin body { cursor: default !important; }
.wp-admin * { cursor: default !important; }
/* Immagini WP responsive */
img {
max-width: 100%;
height: auto;
}
/* Classi allineamento WP standard */
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
margin-bottom: .5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
margin-bottom: .5em;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
}
/* Block editor: figure reset */
figure.wp-block-image {
margin: 0;
max-width: 100%;
}
figure.wp-block-image img {
display: block;
height: auto;
}
/* Contact form feedback (main.js) */
.cf-feedback {
font-family: var(--M);
font-size: .78rem;
font-weight: 600;
letter-spacing: .1em;
padding: 10px 14px;
border-radius: 6px;
margin-top: 4px;
display: none;
}
.cf-feedback:not(:empty) { display: block; }
.cf-feedback.ok {
background: rgba(16, 185, 129, .12);
color: #10b981;
border: 1px solid rgba(16, 185, 129, .25);
}
.cf-feedback.err {
background: rgba(239, 68, 68, .1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, .2);
}
/* SVG logo mark — classi anche qui per garantire il rendering via