/* =========================================================================
FREQUENCY — Brand stylesheet (Music & Language School)
Adattamento del tema Masco. Caricato per ultimo per sovrascrivere lo stile.
Le regole di layout della homepage sono incapsulate sotto .frequency-site
per non alterare blog, shop, archivi o altri template del tema.
========================================================================= */
:root{
--frequency-dark:#07111F;
--frequency-dark-2:#0B172A;
--frequency-cyan:#00D4FF;
--frequency-pink:#FF2D7A;
--frequency-purple:#7C3AED;
--frequency-light:#F6F8FC;
--frequency-white:#FFFFFF;
--frequency-text:#172033;
--frequency-muted:#667085;
--frequency-gradient:linear-gradient(135deg,#00D4FF 0%,#7C3AED 55%,#FF2D7A 100%);
--frequency-gradient-soft:linear-gradient(135deg,rgba(0,212,255,.14),rgba(124,58,237,.14),rgba(255,45,122,.14));
--frequency-border:1px solid rgba(23,32,51,.08);
--frequency-radius:18px;
--frequency-radius-sm:12px;
--frequency-shadow:0 18px 50px -24px rgba(11,23,42,.35);
--frequency-shadow-card:0 12px 34px -18px rgba(11,23,42,.28);
--frequency-font-display:'Space Grotesk','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--frequency-font-body:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/* ---------- Base ---------- */
.frequency-site{
font-family:var(--frequency-font-body);
color:var(--frequency-text);
font-size:17px;
line-height:1.7;
background:var(--frequency-white);
overflow-x:hidden;
}
.frequency-site *{box-sizing:border-box;}
.frequency-container{
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 24px;
}
/* ---------- Tipografia & gerarchia ---------- */
.frequency-site h1,.frequency-site h2,.frequency-site h3,.frequency-site h4{
font-family:var(--frequency-font-display);
color:var(--frequency-text);
margin:0 0 .5em;
font-weight:700;
letter-spacing:-.01em;
}
.frequency-site h1{font-size:62px;line-height:1.08;}
.frequency-site h2{font-size:44px;line-height:1.12;}
.frequency-site h3{font-size:25px;line-height:1.25;}
.frequency-site p{margin:0 0 1rem;}
.frequency-eyebrow{
display:inline-block;
font-family:var(--frequency-font-display);
font-weight:600;
font-size:13px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--frequency-purple);
margin-bottom:14px;
}
.frequency-site .frequency-dark-block .frequency-eyebrow{color:var(--frequency-cyan);}
.frequency-lead{
font-size:19px;
color:var(--frequency-muted);
max-width:680px;
}
.frequency-gradient-text{
background:var(--frequency-gradient);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
/* ---------- Sezioni ---------- */
.frequency-section{padding:100px 0;}
.frequency-section--tight{padding:80px 0;}
.frequency-dark{background:var(--frequency-dark);color:#E6EDF7;}
.frequency-dark-block{background:var(--frequency-dark-2);color:#E6EDF7;}
.frequency-light-block{background:var(--frequency-light);}
.frequency-dark h1,.frequency-dark h2,.frequency-dark h3,
.frequency-dark-block h1,.frequency-dark-block h2,.frequency-dark-block h3{color:#fff;}
.frequency-section-head{max-width:720px;margin:0 0 56px;}
.frequency-section-head.is-center{margin-left:auto;margin-right:auto;text-align:center;}
.frequency-section-head .frequency-lead{margin-left:0;}
.frequency-section-head.is-center .frequency-lead{margin-left:auto;margin-right:auto;}
/* ---------- Bottoni ---------- */
.frequency-button,.frequency-outline-button{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--frequency-font-display);
font-weight:600;font-size:16px;line-height:1;
padding:16px 30px;border-radius:999px;
text-decoration:none;cursor:pointer;border:0;
transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.frequency-button{
color:#fff;background:var(--frequency-gradient);
background-size:160% 160%;
box-shadow:0 14px 30px -12px rgba(124,58,237,.6);
}
.frequency-button:hover{transform:translateY(-2px);background-position:100% 0;color:#fff;box-shadow:0 18px 38px -12px rgba(255,45,122,.55);}
.frequency-outline-button{
color:var(--frequency-text);background:transparent;
border:1.5px solid rgba(23,32,51,.22);
}
.frequency-outline-button:hover{border-color:var(--frequency-purple);color:var(--frequency-purple);transform:translateY(-2px);}
.frequency-dark .frequency-outline-button,
.frequency-dark-block .frequency-outline-button{color:#fff;border-color:rgba(255,255,255,.35);}
.frequency-dark .frequency-outline-button:hover,
.frequency-dark-block .frequency-outline-button:hover{border-color:var(--frequency-cyan);color:var(--frequency-cyan);}
.frequency-btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.frequency-wa-ico{width:18px;height:18px;fill:currentColor;}
/* ---------- Onde / equalizzatore (sfondo decorativo) ---------- */
.frequency-wave-bg{position:relative;overflow:hidden;}
.frequency-wave-bg::before,
.frequency-wave-bg::after{
content:"";position:absolute;border-radius:50%;
filter:blur(70px);opacity:.55;pointer-events:none;z-index:0;
}
.frequency-wave-bg::before{width:480px;height:480px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(0,212,255,.55),transparent 65%);}
.frequency-wave-bg::after{width:520px;height:520px;bottom:-220px;left:-140px;background:radial-gradient(circle,rgba(255,45,122,.5),transparent 65%);}
.frequency-wave-bg>*{position:relative;z-index:1;}
.frequency-eq{display:flex;align-items:flex-end;gap:5px;height:46px;}
.frequency-eq span{width:5px;border-radius:6px;background:var(--frequency-gradient);animation:frequency-eq 1.4s ease-in-out infinite;}
.frequency-eq span:nth-child(1){height:40%;animation-delay:0s}
.frequency-eq span:nth-child(2){height:75%;animation-delay:.15s}
.frequency-eq span:nth-child(3){height:55%;animation-delay:.3s}
.frequency-eq span:nth-child(4){height:95%;animation-delay:.1s}
.frequency-eq span:nth-child(5){height:60%;animation-delay:.25s}
.frequency-eq span:nth-child(6){height:85%;animation-delay:.05s}
.frequency-eq span:nth-child(7){height:45%;animation-delay:.35s}
@keyframes frequency-eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.frequency-eq span{animation:none}}
/* ---------- Hero ---------- */
.frequency-hero{
background:radial-gradient(120% 120% at 80% 0%,#0B1B33 0%,var(--frequency-dark) 55%);
color:#E6EDF7;padding:118px 0 104px;
}
.frequency-hero-grid{
display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.frequency-hero h1{color:#fff;margin-bottom:22px;}
.frequency-hero .frequency-lead{color:#AEBED4;font-size:20px;max-width:560px;}
.frequency-hero-badge{
display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
padding:8px 16px;border-radius:999px;font-size:14px;font-weight:500;
color:#CFE6FF;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.frequency-hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--frequency-cyan);box-shadow:0 0 10px var(--frequency-cyan);}
.frequency-hero-visual{display:flex;justify-content:center;align-items:center;position:relative;}
.frequency-hero-visual img{
width:100%;max-width:440px;border-radius:28px;
box-shadow:0 40px 90px -30px rgba(0,212,255,.4);
}
.frequency-hero-stats{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap;}
.frequency-hero-stats .num{font-family:var(--frequency-font-display);font-size:30px;font-weight:700;color:#fff;}
.frequency-hero-stats .lbl{font-size:14px;color:#9DB0CA;}
/* ---------- Grid layouts ---------- */
.frequency-path-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.frequency-course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
/* ---------- Card ---------- */
.frequency-card{
background:var(--frequency-white);
border:var(--frequency-border);
border-radius:var(--frequency-radius);
padding:30px;
box-shadow:var(--frequency-shadow-card);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
position:relative;overflow:hidden;
}
.frequency-card:hover{transform:translateY(-6px);box-shadow:var(--frequency-shadow);}
.frequency-card h3{margin-bottom:8px;}
.frequency-card p{color:var(--frequency-muted);font-size:16px;margin:0;}
.frequency-card-ico{
width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
font-size:24px;margin-bottom:18px;color:#fff;background:var(--frequency-gradient);
}
.frequency-card--with-media{
display:flex;flex-direction:column;padding:16px 22px 26px;
}
.frequency-card-media{
aspect-ratio:4/3;margin-bottom:20px;border-radius:16px;overflow:hidden;
background:var(--frequency-dark-2);
}
.frequency-card-media img{
display:block;width:100%;height:100%;object-fit:cover;
transition:transform .45s ease;
}
.frequency-card--with-media:hover .frequency-card-media img{transform:scale(1.035);}
.frequency-card--with-media .frequency-card-foot{
margin-top:auto;padding-top:18px;
}
.frequency-card-tag{
display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
/* Path cards (Musica / Lingue) */
.frequency-path-card{
padding:40px;border-radius:24px;color:#fff;position:relative;overflow:hidden;
min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;
box-shadow:var(--frequency-shadow);
}
.frequency-path-card h3{font-size:30px;color:#fff;}
.frequency-path-card p{font-size:17px;color:rgba(255,255,255,.9);}
.frequency-path-card .frequency-card-tag{background:rgba(255,255,255,.18);color:#fff;}
.frequency-path-card .frequency-card-ico{background:rgba(255,255,255,.16);}
.frequency-path-card a{color:#fff;font-weight:600;text-decoration:none;margin-top:18px;display:inline-flex;gap:8px;align-items:center;}
.frequency-music-card{background:linear-gradient(150deg,#7C3AED 0%,#FF2D7A 100%);}
.frequency-language-card{background:linear-gradient(150deg,#0B63E5 0%,#00D4FF 100%);}
/* Course cards accents */
.frequency-music-accent .frequency-card-ico{background:linear-gradient(135deg,#7C3AED,#FF2D7A);}
.frequency-music-accent .frequency-card-tag{background:rgba(124,58,237,.12);color:var(--frequency-purple);}
.frequency-music-accent:hover{border-color:rgba(124,58,237,.4);}
.frequency-language-accent .frequency-card-ico{background:linear-gradient(135deg,#0B63E5,#00D4FF);}
.frequency-language-accent .frequency-card-tag{background:rgba(0,162,212,.12);color:#0481a8;}
.frequency-language-accent:hover{border-color:rgba(0,212,255,.45);}
.frequency-card-level{font-size:13px;color:var(--frequency-muted);margin-top:14px;display:block;font-weight:500;}
/* ---------- Process (come funziona) ---------- */
.frequency-process{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.frequency-step{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
border-radius:var(--frequency-radius);padding:30px;position:relative;
}
.frequency-step .num{
font-family:var(--frequency-font-display);font-size:15px;font-weight:700;letter-spacing:.05em;
color:var(--frequency-dark);background:var(--frequency-cyan);
width:auto;display:inline-block;padding:5px 12px;border-radius:8px;margin-bottom:18px;
}
.frequency-step h3{font-size:20px;color:#fff;}
.frequency-step p{color:#A9BBD4;font-size:15px;margin:0;}
/* ---------- Metodo (two col) ---------- */
.frequency-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.frequency-checklist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;}
.frequency-checklist li{display:flex;gap:12px;align-items:flex-start;font-size:17px;}
.frequency-checklist li::before{
content:"";flex:0 0 24px;width:24px;height:24px;border-radius:50%;margin-top:1px;
background:var(--frequency-gradient);
-webkit-mask:url("data:image/svg+xml;utf8,") center/16px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/16px no-repeat;
}
.frequency-method-visual{
border-radius:24px;padding:46px;color:#fff;background:var(--frequency-dark-2);
border:1px solid rgba(255,255,255,.08);box-shadow:var(--frequency-shadow);
}
/* ---------- CTA banner ---------- */
.frequency-cta{
border-radius:28px;padding:64px 56px;text-align:center;color:#fff;position:relative;overflow:hidden;
background:radial-gradient(120% 140% at 50% 0%,#1A2C4D,var(--frequency-dark));
box-shadow:var(--frequency-shadow);
}
.frequency-cta h2{color:#fff;}
.frequency-cta .frequency-lead{color:#B7C6DD;margin:0 auto 30px;}
.frequency-cta .frequency-btn-row{justify-content:center;}
/* ---------- Audience ---------- */
/* ---------- FAQ ---------- */
.frequency-faq{max-width:840px;margin:0 auto;display:grid;gap:14px;}
.frequency-faq details{
background:var(--frequency-white);border:var(--frequency-border);border-radius:var(--frequency-radius-sm);
padding:4px 24px;box-shadow:var(--frequency-shadow-card);
}
.frequency-faq summary{
list-style:none;cursor:pointer;padding:20px 0;font-family:var(--frequency-font-display);
font-weight:600;font-size:18px;color:var(--frequency-text);
display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.frequency-faq summary::-webkit-details-marker{display:none;}
.frequency-faq summary::after{content:"+";font-size:26px;color:var(--frequency-purple);line-height:1;transition:transform .2s ease;}
.frequency-faq details[open] summary::after{transform:rotate(45deg);}
.frequency-faq details p{color:var(--frequency-muted);margin:0 0 20px;font-size:16px;}
/* ---------- Contatti ---------- */
.frequency-contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.frequency-contact-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;}
.frequency-contact-list li{display:flex;gap:16px;align-items:flex-start;}
.frequency-contact-ico{
flex:0 0 46px;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--frequency-cyan);font-size:20px;
}
.frequency-contact .frequency-contact-ico{color:var(--frequency-cyan);}
.frequency-contact-list .lbl{font-size:13px;color:#9DB0CA;text-transform:uppercase;letter-spacing:.08em;}
.frequency-contact-list .val{font-size:17px;color:#fff;font-weight:500;}
.frequency-contact-list a{color:#fff;text-decoration:none;}
.frequency-contact-list a:hover{color:var(--frequency-cyan);}
.frequency-form{
background:var(--frequency-white);border-radius:24px;padding:36px;box-shadow:var(--frequency-shadow);
}
.frequency-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.frequency-form label{display:block;font-size:14px;font-weight:600;color:var(--frequency-text);margin:14px 0 6px;}
.frequency-form input,.frequency-form select,.frequency-form textarea{
width:100%;padding:13px 15px;border:1px solid rgba(23,32,51,.14);border-radius:12px;
font-family:var(--frequency-font-body);font-size:15px;color:var(--frequency-text);background:#fff;
}
.frequency-form input:focus,.frequency-form select:focus,.frequency-form textarea:focus{
outline:none;border-color:var(--frequency-purple);box-shadow:0 0 0 3px rgba(124,58,237,.12);
}
.frequency-form textarea{min-height:120px;resize:vertical;}
.frequency-form .frequency-button{width:100%;justify-content:center;margin-top:22px;}
.frequency-map{margin-top:14px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);}
.frequency-map iframe{width:100%;height:230px;border:0;display:block;}
.frequency-social{display:flex;gap:12px;margin-top:26px;}
.frequency-social a{
width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:18px;
transition:all .2s ease;
}
.frequency-social a:hover{background:var(--frequency-gradient);border-color:transparent;transform:translateY(-2px);}
/* ---------- Final CTA strip ---------- */
.frequency-final-cta{text-align:center;padding:84px 0;}
.frequency-final-cta h2{font-size:48px;margin-bottom:26px;}
/* ---------- Responsive ---------- */
@media(max-width:992px){
.frequency-hero-grid,.frequency-method-grid,.frequency-contact{grid-template-columns:1fr;gap:40px;}
.frequency-course-grid,.frequency-grid-3,.frequency-process{grid-template-columns:repeat(2,1fr);}
.frequency-hero-visual{order:-1;}
.frequency-hero-visual img{max-width:340px;}
}
@media(max-width:768px){
.frequency-site h1,.frequency-hero h1{font-size:41px;}
.frequency-site h2{font-size:32px;}
.frequency-site h3{font-size:22px;}
.frequency-final-cta h2{font-size:34px;}
.frequency-section{padding:64px 0;}
.frequency-section--tight{padding:56px 0;}
.frequency-path-grid,.frequency-course-grid,.frequency-grid-2,.frequency-grid-3,
.frequency-process,.frequency-contact{grid-template-columns:1fr;}
.frequency-cta{padding:48px 24px;}
.frequency-form .row{grid-template-columns:1fr;}
.frequency-hero{padding:88px 0 72px;}
.frequency-hero .frequency-lead{font-size:18px;}
}
@media(max-width:480px){
.frequency-site h1,.frequency-hero h1{font-size:36px;}
.frequency-container{padding:0 18px;}
.frequency-btn-row .frequency-button,.frequency-btn-row .frequency-outline-button{width:100%;justify-content:center;}
}
/* =========================================================================
FREQUENCY v1.1 — header/footer propri della homepage, fix accessibilità
(regole in coda: stesso selettore = queste prevalgono per ordine sorgente)
========================================================================= */
/* ---- offset ancore sotto header sticky ---- */
.frequency-front{scroll-behavior:smooth;}
.frequency-site section[id]{scroll-margin-top:88px;}
/* ---- HEADER ---- */
.frequency-header{
position:sticky;top:0;z-index:1000;
background:rgba(7,17,31,.92);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.08);
}
body.admin-bar .frequency-header{top:32px;}
@media(max-width:782px){body.admin-bar .frequency-header{top:46px;}}
.frequency-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;}
.frequency-brand{display:inline-flex;align-items:center;line-height:0;}
.frequency-brand img{height:34px;width:auto;display:block;}
.frequency-nav{display:flex;align-items:center;gap:26px;}
.frequency-nav a{
font-family:var(--frequency-font-display);font-weight:500;font-size:15px;
color:#D6E2F2;text-decoration:none;transition:color .2s ease;
}
.frequency-nav a:hover{color:var(--frequency-cyan);}
.frequency-button--sm{padding:11px 18px;font-size:14px;box-shadow:0 10px 22px -12px rgba(124,58,237,.7);}
.frequency-button--sm .frequency-wa-ico{width:16px;height:16px;}
.frequency-nav .frequency-button{color:#fff;}
.frequency-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;}
.frequency-burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s;}
@media(max-width:860px){
.frequency-burger{display:flex;}
.frequency-nav{
position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:4px;
background:#07111F;border-bottom:1px solid rgba(255,255,255,.08);
padding:14px 24px 22px;align-items:stretch;
max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:.25s ease;
}
body.admin-bar .frequency-nav{top:120px;}
.frequency-nav a{padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:16px;}
.frequency-nav .frequency-button{margin-top:12px;justify-content:center;}
.frequency-nav-toggle:checked ~ .frequency-header .frequency-nav,
.frequency-header:has(.frequency-nav-toggle:checked) .frequency-nav{max-height:520px;opacity:1;pointer-events:auto;}
}
/* toggle senza :has() — fallback con sibling sul wrapper */
#frq-nav-toggle:checked + .frequency-header .frequency-nav{max-height:520px;opacity:1;pointer-events:auto;}
/* ---- OUTLINE BUTTON: ora ben visibile ---- */
.frequency-outline-button{
background:#FFFFFF;
border:1.6px solid rgba(23,32,51,.18);
color:var(--frequency-text);
box-shadow:var(--frequency-shadow-card);
}
.frequency-outline-button:hover{
border-color:var(--frequency-purple);
color:var(--frequency-purple);
background:#FFFFFF;
transform:translateY(-2px);
}
/* su sfondi scuri (hero, sezioni dark, CTA): riempimento semitrasparente + bordo chiaro */
.frequency-hero .frequency-outline-button,
.frequency-dark .frequency-outline-button,
.frequency-dark-block .frequency-outline-button,
.frequency-cta .frequency-outline-button,
.frequency-final-cta .frequency-outline-button,
.frequency-mpage .frequency-outline-button{
background:rgba(255,255,255,.10);
border:1.6px solid rgba(255,255,255,.6);
color:#FFFFFF;box-shadow:none;
}
.frequency-hero .frequency-outline-button:hover,
.frequency-dark .frequency-outline-button:hover,
.frequency-dark-block .frequency-outline-button:hover,
.frequency-cta .frequency-outline-button:hover,
.frequency-final-cta .frequency-outline-button:hover,
.frequency-mpage .frequency-outline-button:hover{
background:rgba(0,212,255,.16);border-color:var(--frequency-cyan);color:#fff;
}
/* ---- PROCESS STEPS: card solide e leggibili ---- */
.frequency-step{
background:#0D1D36;
border:1px solid rgba(255,255,255,.12);
border-top:3px solid transparent;
border-image:linear-gradient(135deg,#00D4FF,#7C3AED,#FF2D7A) 1;
border-radius:var(--frequency-radius);
padding:30px 28px;box-shadow:0 18px 40px -26px rgba(0,0,0,.8);
}
.frequency-step .num{
display:inline-block;font-family:var(--frequency-font-display);font-weight:700;font-size:15px;
color:#07111F;background:var(--frequency-cyan);padding:6px 12px;border-radius:8px;margin-bottom:16px;
box-shadow:0 0 18px rgba(0,212,255,.45);
}
.frequency-step h3{font-size:20px;color:#fff;margin-bottom:8px;}
.frequency-step p{color:#C4D2E6;font-size:15px;margin:0;}
/* ---- PATH CARD: una sola freccia (annulla eventuali frecce ereditate dal tema) ---- */
.frequency-path-card a::before{content:none !important;}
.frequency-path-card a i,
.frequency-path-card a svg{display:none !important;}
.frequency-path-card a::after{
content:"→";margin-left:8px;display:inline-block;transition:transform .2s ease;
font-family:inherit;font-weight:600;
}
.frequency-path-card a:hover::after{transform:translateX(4px);}
/* ---- card "CTA" interne alle griglie corsi ---- */
.frequency-card--cta{
display:flex;flex-direction:column;justify-content:center;
background:var(--frequency-light);box-shadow:none;border:1.5px dashed rgba(124,58,237,.4);
}
.frequency-card--cta .frequency-outline-button{align-self:flex-start;margin-top:16px;}
/* ---- FOOTER FREQUENCY ---- */
.frequency-footer{background:#07111F;color:#AEBED4;padding:64px 0 28px;border-top:1px solid rgba(255,255,255,.07);}
.frequency-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;}
.frequency-footer-logo{height:30px;width:auto;margin-bottom:16px;}
.frequency-footer-brand p{font-size:15px;color:#9DB0CA;max-width:320px;}
.frequency-footer h4{font-family:var(--frequency-font-display);color:#fff;font-size:15px;letter-spacing:.04em;margin:0 0 16px;}
.frequency-footer-col{display:flex;flex-direction:column;gap:10px;}
.frequency-footer-col a,.frequency-footer-addr{color:#9DB0CA;text-decoration:none;font-size:15px;transition:color .2s ease;}
.frequency-footer-col a:hover{color:var(--frequency-cyan);}
.frequency-footer .frequency-social{margin-top:18px;}
.frequency-footer-bottom{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
font-size:14px;color:#7C8BA5;
}
.frequency-footer-bottom a{color:#9DB0CA;text-decoration:none;}
.frequency-footer-bottom a:hover{color:var(--frequency-cyan);}
@media(max-width:860px){.frequency-footer-grid{grid-template-columns:1fr 1fr;gap:30px;}}
@media(max-width:560px){.frequency-footer-grid{grid-template-columns:1fr;}}
/* il method visual h3/p restano leggibili anche dopo override */
.frequency-method-visual h3{margin-top:26px;color:#fff;}
.frequency-method-visual p{color:#A9BBD4;margin:0;}
/* =========================================================================
FREQUENCY v1.2 — step a prova di conflitto con il CSS di Masco
(rimuove border-image, usa una barra superiore con ::before; reset difensivi)
========================================================================= */
.frequency-process{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:stretch;}
.frequency-process > *{float:none;min-width:0;}
.frequency-step{
position:relative;
background:#0D1D36 !important;
border:1px solid rgba(255,255,255,.12) !important;
border-image:none !important;
border-radius:var(--frequency-radius) !important;
padding:34px 28px 30px !important;
overflow:hidden;
box-shadow:0 18px 40px -26px rgba(0,0,0,.85) !important;
}
.frequency-step::before{
content:"" !important;position:absolute;top:0;left:0;right:0;height:4px;
background:var(--frequency-gradient);border:0;margin:0;
}
.frequency-step::after{content:none !important;display:none !important;}
@media(max-width:992px){.frequency-process{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.frequency-process{grid-template-columns:1fr;}}
/* =========================================================================
FREQUENCY v2.0 — TEMA STANDALONE
Base globale (il tema non dipende piu da reset/bootstrap di altri temi)
+ stili pagine interne, blog, commenti, ricerca.
========================================================================= */
/* ---- Reset & base ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
margin:0;
font-family:var(--frequency-font-body);
font-size:17px;line-height:1.7;
color:var(--frequency-text);
background:var(--frequency-white);
}
img{max-width:100%;height:auto;}
a{color:var(--frequency-purple);}
.screen-reader-text{
border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:#fff;padding:10px 16px;}
.skip-link:focus{left:8px;top:8px;}
/* ---- Menu del tema (wp_nav_menu) ---- */
.frequency-menu{list-style:none;display:flex;align-items:center;gap:26px;margin:0;padding:0;}
.frequency-menu li{position:relative;}
.frequency-menu a{
font-family:var(--frequency-font-display);font-weight:500;font-size:15px;
color:#D6E2F2;text-decoration:none;transition:color .2s ease;
}
.frequency-menu a:hover{color:var(--frequency-cyan);}
.frequency-menu .sub-menu{
list-style:none;margin:0;padding:10px;display:none;position:absolute;top:100%;left:0;min-width:200px;
background:#0B172A;border:1px solid rgba(255,255,255,.1);border-radius:12px;flex-direction:column;gap:2px;
}
.frequency-menu li:hover>.sub-menu,.frequency-menu li:focus-within>.sub-menu{display:flex;}
.frequency-menu .sub-menu a{display:block;padding:9px 12px;border-radius:8px;}
.frequency-menu .sub-menu a:hover{background:rgba(255,255,255,.06);}
.frequency-brand img,.frequency-brand .custom-logo{height:34px;width:auto;display:block;}
.frequency-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.7);}
/* ---- Container stretto per contenuti testuali ---- */
.frequency-container--narrow{max-width:780px;}
/* ---- Hero pagine interne ---- */
.frequency-page-hero{
background:radial-gradient(120% 140% at 80% 0%,#0B1B33 0%,var(--frequency-dark) 60%);
color:#fff;padding:84px 0 56px;
}
.frequency-page-hero h1{color:#fff;font-size:44px;margin:0;}
.frequency-page-hero .frequency-post-meta{margin-bottom:14px;}
/* ---- Contenuto articolo/pagina ---- */
.frequency-entry{padding:64px 0 90px;}
.frequency-entry-content{font-size:17px;}
.frequency-entry-content h2{font-size:32px;margin-top:1.6em;}
.frequency-entry-content h3{font-size:24px;margin-top:1.4em;}
.frequency-entry-content p{margin:0 0 1.15em;}
.frequency-entry-content ul,.frequency-entry-content ol{margin:0 0 1.15em;padding-left:1.3em;}
.frequency-entry-content blockquote{
margin:1.6em 0;padding:18px 24px;border-left:4px solid var(--frequency-purple);
background:var(--frequency-light);border-radius:0 12px 12px 0;color:var(--frequency-muted);
}
.frequency-entry-content img{border-radius:14px;}
.frequency-entry-content a{color:var(--frequency-purple);}
.alignwide{margin-left:-60px;margin-right:-60px;max-width:none;}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;}
@media(max-width:992px){.alignwide{margin-left:0;margin-right:0;}}
.frequency-post-thumb{margin:0 0 30px;}
.frequency-post-thumb img{border-radius:18px;width:100%;}
.frequency-post-meta{
display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;letter-spacing:.04em;
text-transform:uppercase;color:#8FA3C0;font-weight:500;
}
.frequency-post-meta a{color:var(--frequency-cyan);text-decoration:none;}
.frequency-tags{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap;}
.frequency-tags a{
font-size:13px;padding:5px 12px;border-radius:999px;text-decoration:none;
background:rgba(124,58,237,.1);color:var(--frequency-purple);
}
.frequency-post-nav{
display:flex;justify-content:space-between;gap:18px;margin-top:40px;padding-top:24px;
border-top:1px solid rgba(23,32,51,.1);
}
.frequency-post-nav a{color:var(--frequency-text);text-decoration:none;font-weight:600;font-family:var(--frequency-font-display);}
.frequency-post-nav a:hover{color:var(--frequency-purple);}
/* ---- Blog grid ---- */
.frequency-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.frequency-post-card{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.frequency-post-card-thumb{display:block;line-height:0;}
.frequency-post-card-thumb img{width:100%;height:200px;object-fit:cover;}
.frequency-post-card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.frequency-post-card-body h3{font-size:20px;margin:0;}
.frequency-post-card-body h3 a{color:var(--frequency-text);text-decoration:none;}
.frequency-post-card-body h3 a:hover{color:var(--frequency-purple);}
.frequency-post-card-body p{margin:0;font-size:15px;}
.frequency-readmore{
margin-top:auto;font-family:var(--frequency-font-display);font-weight:600;font-size:14.5px;
color:var(--frequency-purple);text-decoration:none;
}
.frequency-readmore:hover{color:var(--frequency-pink);}
@media(max-width:992px){.frequency-blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.frequency-blog-grid{grid-template-columns:1fr;}}
/* ---- Paginazione ---- */
.frequency-pagination{margin-top:48px;text-align:center;}
.frequency-pagination .nav-links{display:inline-flex;gap:8px;align-items:center;}
.frequency-pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;
border-radius:12px;border:1px solid rgba(23,32,51,.14);color:var(--frequency-text);
text-decoration:none;font-family:var(--frequency-font-display);font-weight:600;font-size:15px;
}
.frequency-pagination .page-numbers.current{background:var(--frequency-gradient);color:#fff;border-color:transparent;}
.frequency-pagination .page-numbers:hover:not(.current){border-color:var(--frequency-purple);color:var(--frequency-purple);}
/* ---- Form di ricerca ---- */
.frequency-searchform{display:flex;gap:10px;}
.frequency-searchform input[type=search]{
flex:1;padding:13px 15px;border:1px solid rgba(23,32,51,.16);border-radius:12px;
font-family:var(--frequency-font-body);font-size:15px;
}
.frequency-searchform input[type=search]:focus{outline:none;border-color:var(--frequency-purple);box-shadow:0 0 0 3px rgba(124,58,237,.12);}
/* ---- Commenti ---- */
.frequency-comments{margin-top:56px;padding-top:32px;border-top:1px solid rgba(23,32,51,.1);}
.frequency-comments-title{font-size:24px;}
.frequency-comments .comment-list{list-style:none;margin:0 0 30px;padding:0;}
.frequency-comments .comment-list .comment{padding:18px 0;border-bottom:1px solid rgba(23,32,51,.08);}
.frequency-comments .comment-list .children{list-style:none;padding-left:34px;}
.frequency-comments .avatar{border-radius:50%;margin-right:10px;vertical-align:middle;}
.frequency-comments .comment-metadata{font-size:13px;color:var(--frequency-muted);}
.frequency-comments .comment-metadata a{color:var(--frequency-muted);text-decoration:none;}
.frequency-comments .reply a{font-size:13.5px;font-weight:600;color:var(--frequency-purple);text-decoration:none;}
.frequency-comments input[type=text],.frequency-comments input[type=email],
.frequency-comments input[type=url],.frequency-comments textarea{
width:100%;padding:12px 14px;border:1px solid rgba(23,32,51,.16);border-radius:12px;
font-family:var(--frequency-font-body);font-size:15px;margin-bottom:12px;
}
.frequency-comments .submit{
display:inline-flex;align-items:center;font-family:var(--frequency-font-display);font-weight:600;font-size:15px;
color:#fff;background:var(--frequency-gradient);border:0;border-radius:999px;padding:14px 28px;cursor:pointer;
}
/* ---- Classi core WordPress richieste ---- */
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:13.5px;color:var(--frequency-muted);text-align:center;margin-top:6px;}
.sticky{display:block;}
.gallery-caption{display:block;}
.bypostauthor{display:block;}
/* ---- Mobile hero pagine interne ---- */
@media(max-width:768px){
.frequency-page-hero{padding:56px 0 40px;}
.frequency-page-hero h1{font-size:32px;}
.frequency-entry{padding:48px 0 64px;}
}
/* menu mobile: la lista wp_nav_menu si impila in colonna */
@media(max-width:860px){
.frequency-menu{flex-direction:column;align-items:stretch;gap:0;width:100%;}
.frequency-menu a{display:block;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:16px;}
.frequency-menu .sub-menu{position:static;display:flex;background:transparent;border:0;padding-left:14px;}
}
/* =========================================================================
FREQUENCY v1.2 — terza area (doposcuola), galleria a scorrimento,
modulo contatti reale, social, footer legale, WhatsApp flottante.
========================================================================= */
/* ---- Tre percorsi invece di due ---- */
.frequency-path-grid{grid-template-columns:repeat(3,1fr);}
.frequency-after-card{background:linear-gradient(150deg,#00A878 0%,#00D4FF 100%);}
/* ---- Accento "doposcuola" per le card corso ---- */
.frequency-after-accent .frequency-card-ico{background:linear-gradient(135deg,#00A878,#00D4FF);}
.frequency-after-accent .frequency-card-tag{background:rgba(0,168,120,.12);color:#00795A;}
.frequency-after-accent:hover{border-color:rgba(0,168,120,.45);}
.frequency-card--cta.frequency-after-accent{border-color:rgba(0,168,120,.45);}
.frequency-card--cta.frequency-language-accent{border-color:rgba(0,162,212,.5);}
/* ---- Galleria: carosello a scorrimento continuo (sezione chiara) ---- */
.frequency-marquee{
margin-top:52px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
overflow:hidden;
}
.frequency-marquee-track{
display:flex;gap:22px;width:max-content;
animation:frequency-scroll 60s linear infinite;
}
.frequency-marquee:hover .frequency-marquee-track,
.frequency-marquee:focus-within .frequency-marquee-track{animation-play-state:paused;}
.frequency-marquee-item{
flex:0 0 auto;width:300px;margin:0;
border-radius:var(--frequency-radius);overflow:hidden;
background:var(--frequency-white);border:var(--frequency-border);
box-shadow:var(--frequency-shadow-card);
}
.frequency-marquee-item img{
display:block;width:100%;height:220px;object-fit:cover;
}
.frequency-marquee-item figcaption{
padding:12px 16px;font-size:14px;color:var(--frequency-muted);
font-family:var(--frequency-font-display);font-weight:500;
}
/* Il track contiene la lista due volte: si scorre di metà larghezza più
mezzo gap, così la ripartenza è invisibile. */
@keyframes frequency-scroll{
from{transform:translateX(0);}
to{transform:translateX(calc(-50% - 11px));}
}
@media(prefers-reduced-motion:reduce){
.frequency-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.frequency-marquee-track{animation:none;}
}
@media(max-width:768px){
.frequency-marquee-item{width:230px;}
.frequency-marquee-item img{height:170px;}
.frequency-marquee-track{animation-duration:42s;}
}
/* ---- Contatti: link secondari e testo tenue su fondo scuro ---- */
.frequency-lead--muted{color:#AEBED4;}
.frequency-inline-link{
display:inline-block;margin-top:6px;font-size:14px;font-weight:600;
color:var(--frequency-cyan);text-decoration:none;
}
.frequency-inline-link:hover{text-decoration:underline;}
/* ---- Social: icone SVG ---- */
.frequency-social a svg{width:19px;height:19px;fill:currentColor;display:block;}
/* ---- Modulo contatti ---- */
.frequency-form-intro{color:var(--frequency-muted);font-size:15px;}
.frequency-form-notice{
border-radius:12px;padding:13px 16px;font-size:15px;font-weight:500;margin:0 0 18px;
}
.frequency-form-notice.is-ok{background:rgba(0,168,120,.12);color:#00694F;border:1px solid rgba(0,168,120,.3);}
.frequency-form-notice.is-err{background:rgba(255,45,122,.10);color:#B3145A;border:1px solid rgba(255,45,122,.3);}
.frequency-consent{margin:20px 0 6px;}
.frequency-consent label{
display:flex;gap:10px;align-items:flex-start;
font-size:13.5px;font-weight:400;color:var(--frequency-muted);line-height:1.55;margin:0;
}
.frequency-consent input[type=checkbox]{width:auto;margin-top:3px;flex:0 0 auto;}
.frequency-form button[type=submit]{margin-top:18px;width:100%;justify-content:center;}
/* honeypot antispam: nascosto agli utenti, compilato solo dai bot */
.frequency-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* ---- Footer: riga dati legali ---- */
/* ---- Bottone WhatsApp flottante ---- */
.frequency-wa-float{
position:fixed;right:20px;bottom:20px;z-index:999;
width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:#25D366;color:#fff;text-decoration:none;
box-shadow:0 12px 28px -8px rgba(37,211,102,.65);
transition:transform .2s ease;
}
.frequency-wa-float:hover{transform:scale(1.06);}
.frequency-wa-float svg{width:28px;height:28px;fill:currentColor;}
@media(max-width:480px){
.frequency-wa-float{width:52px;height:52px;right:16px;bottom:16px;}
.frequency-wa-float svg{width:26px;height:26px;}
}
/* ---- Responsive: tre percorsi ---- */
@media(max-width:992px){
.frequency-path-grid{grid-template-columns:1fr;}
}
/* ---- Correzioni di leggibilità (contrasto WCAG AA) ---- */
/* Il modulo contatti è una card chiara dentro una sezione scura: senza questo
reset il titolo eredita "color:#fff" da .frequency-dark ed è invisibile. */
.frequency-dark .frequency-form,
.frequency-dark-block .frequency-form{color:var(--frequency-text);}
.frequency-dark .frequency-form h1,.frequency-dark .frequency-form h2,
.frequency-dark .frequency-form h3,.frequency-dark .frequency-form h4,
.frequency-dark-block .frequency-form h1,.frequency-dark-block .frequency-form h2,
.frequency-dark-block .frequency-form h3,.frequency-dark-block .frequency-form h4{
color:var(--frequency-text);
}
/* Sottotitoli su fondo scuro: il grigio dei testi chiari non ha contrasto sufficiente. */
.frequency-dark .frequency-lead,
.frequency-dark-block .frequency-lead{color:#AEBED4;}
.frequency-dark .frequency-form .frequency-lead,
.frequency-dark .frequency-form .frequency-form-intro{color:var(--frequency-muted);}
/* Etichetta delle card lingue: portata sopra la soglia AA su fondo bianco. */
.frequency-language-accent .frequency-card-tag{color:#036A8A;}
/* =========================================================================
FREQUENCY v1.3 — menu mobile accessibile, sezioni scure meno squadrate
========================================================================= */
/* ---- Pulsante menu (sostituisce la vecchia checkbox nascosta) ---- */
.frequency-burger{
display:none;align-items:center;justify-content:center;
flex-direction:row;gap:0;padding:10px;
background:transparent;border:0;border-radius:12px;cursor:pointer;
-webkit-appearance:none;appearance:none;
}
.frequency-burger:hover{background:rgba(255,255,255,.08);}
.frequency-burger:focus-visible{outline:2px solid var(--frequency-cyan);outline-offset:2px;}
.frequency-burger .frequency-burger-box{
display:flex;flex-direction:column;gap:5px;
width:24px;height:auto;background:none;border:0;
}
.frequency-burger .frequency-burger-box span{
display:block;width:100%;height:2px;border-radius:2px;background:#fff;
transition:transform .25s ease,opacity .18s ease;
}
.frequency-burger[aria-expanded="true"] .frequency-burger-box span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.frequency-burger[aria-expanded="true"] .frequency-burger-box span:nth-child(2){opacity:0;}
.frequency-burger[aria-expanded="true"] .frequency-burger-box span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(prefers-reduced-motion:reduce){
.frequency-burger .frequency-burger-box span{transition:none;}
}
@media(max-width:860px){
.frequency-burger{display:flex;}
/* pannello aperto: scorrevole, senza far scorrere la pagina sotto */
.frequency-nav.is-open{
max-height:calc(100dvh - 74px);opacity:1;pointer-events:auto;overflow-y:auto;
}
body.frequency-nav-open{overflow:hidden;}
body.admin-bar .frequency-nav.is-open{max-height:calc(100dvh - 120px);}
}
/* ---- Sezioni scure: il titolo non deve stare dentro un riquadro ----
.frequency-dark-block dipinge uno sfondo pieno: applicato a un
section-head produceva un rettangolo squadrato dietro al titolo. */
.frequency-section-head.frequency-dark-block{background:transparent;padding:0;}
.frequency-site .frequency-dark .frequency-eyebrow{color:var(--frequency-cyan);}
/* ---- Numeri degli step: pastiglia invece di quadrato ---- */
.frequency-step .num{border-radius:999px;padding:6px 15px;}
/* ---- Blocco contatti: stessa forma della card del modulo ---- */
.frequency-contact > .frequency-dark-block{
border-radius:24px;padding:36px;
border:1px solid rgba(255,255,255,.10);
box-shadow:var(--frequency-shadow);
}
.frequency-contact > .frequency-dark-block > :first-child{margin-top:0;}
.frequency-contact > .frequency-dark-block .frequency-map{border-radius:18px;}
@media(max-width:560px){
.frequency-contact > .frequency-dark-block,
.frequency-form{padding:26px 22px;border-radius:20px;}
}
/* =========================================================================
FREQUENCY v1.4 — sezioni differenziate
Musica e lingue restano griglie parallele (sono contenuti equivalenti).
Doposcuola, "Perché" e "A chi" avevano la stessa forma a card: ora
ognuna ha un impianto suo, così la pagina non si ripete.
========================================================================= */
/* ---- DOPOSCUOLA: sezione "feature" a due colonne ---- */
.frequency-feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.frequency-feature-copy .frequency-checklist{margin-top:26px;}
.frequency-feature-copy .frequency-btn-row{margin-top:32px;}
.frequency-feature-panel{display:grid;gap:16px;}
.frequency-feature-item{
display:flex;gap:20px;align-items:flex-start;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:20px;padding:26px;
transition:transform .2s ease,border-color .2s ease;
}
.frequency-feature-item:hover{transform:translateY(-3px);border-color:rgba(0,212,255,.45);}
.frequency-feature-ico{
flex:0 0 54px;width:54px;height:54px;border-radius:16px;
display:flex;align-items:center;justify-content:center;font-size:25px;
background:linear-gradient(135deg,#00A878,#00D4FF);
}
.frequency-feature-item h3{font-size:21px;margin:0 0 8px;color:#fff;}
.frequency-feature-item p{color:#A9BBD4;font-size:15.5px;margin:0;}
.frequency-feature-item .frequency-card-level{color:#8FA6C4;margin-top:10px;}
.frequency-feature-note{
color:#8FA6C4;font-size:15px;margin:6px 0 0;padding-left:4px;border-left:2px solid rgba(0,212,255,.4);
padding:2px 0 2px 14px;
}
/* l'alone decorativo qui vira sul verde-ciano dell'area doposcuola */
.frequency-after-section.frequency-wave-bg::before{background:radial-gradient(circle,rgba(0,168,120,.5),transparent 65%);}
.frequency-after-section.frequency-wave-bg::after{background:radial-gradient(circle,rgba(0,212,255,.42),transparent 65%);}
/* ---- PERCHÉ: elenco su due colonne, senza scatole ---- */
.frequency-reasons{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:0 60px;
max-width:1000px;margin-inline:auto;
}
.frequency-reason{
display:flex;gap:20px;align-items:flex-start;
padding:28px 0;border-top:1px solid rgba(23,32,51,.10);
}
.frequency-reason:nth-child(1),.frequency-reason:nth-child(2){border-top:0;padding-top:0;}
.frequency-reason-ico{
flex:0 0 48px;width:48px;height:48px;border-radius:15px;
display:flex;align-items:center;justify-content:center;font-size:23px;
background:var(--frequency-gradient-soft);border:1px solid rgba(124,58,237,.18);
}
.frequency-reason h3{font-size:19px;margin:0 0 6px;}
.frequency-reason p{margin:0;color:var(--frequency-muted);font-size:15.5px;}
/* ---- A CHI: righe larghe invece di tre card ---- */
.frequency-personas{display:grid;gap:18px;max-width:940px;margin-inline:auto;}
.frequency-persona{
display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
background:var(--frequency-white);border:var(--frequency-border);border-radius:22px;
padding:28px 34px;box-shadow:var(--frequency-shadow-card);
position:relative;overflow:hidden;
transition:transform .2s ease,box-shadow .2s ease;
}
.frequency-persona::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--frequency-gradient);
}
.frequency-persona:hover{transform:translateX(4px);box-shadow:var(--frequency-shadow);}
.frequency-persona-ico{
width:68px;height:68px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:31px;
background:var(--frequency-gradient-soft);border:1px solid rgba(124,58,237,.18);
}
.frequency-persona h3{font-size:22px;margin:0 0 4px;}
.frequency-persona p{margin:0 0 10px;color:var(--frequency-muted);}
.frequency-persona-tags{
display:inline-block;font-size:13.5px;font-weight:600;color:var(--frequency-purple);
font-family:var(--frequency-font-display);letter-spacing:.01em;
}
/* ---- FAQ: stato aperto più evidente ---- */
.frequency-faq details{transition:border-color .2s ease,box-shadow .2s ease;}
.frequency-faq details:hover{border-color:rgba(124,58,237,.28);}
.frequency-faq details[open]{border-color:rgba(124,58,237,.35);box-shadow:var(--frequency-shadow);}
.frequency-faq summary:focus-visible{outline:2px solid var(--frequency-purple);outline-offset:4px;border-radius:6px;}
/* ---- Rifiniture globali ---- */
/* Un anello di focus coerente su tutto ciò che è interattivo. */
.frequency-site a:focus-visible,.frequency-site button:focus-visible,
.frequency-site input:focus-visible,.frequency-site select:focus-visible,
.frequency-site textarea:focus-visible,.frequency-header a:focus-visible,
.frequency-footer a:focus-visible,.frequency-wa-float:focus-visible{
outline:2px solid var(--frequency-cyan);outline-offset:3px;border-radius:6px;
}
.frequency-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.frequency-card:not(.frequency-card--cta):hover{transform:translateY(-4px);box-shadow:var(--frequency-shadow);}
/* Comparsa progressiva alla prima visualizzazione (solo se il JS è attivo). */
.frequency-js .frequency-reveal{opacity:0;transform:translateY(18px);}
.frequency-js .frequency-reveal.is-visible{
opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease;
}
@media(prefers-reduced-motion:reduce){
.frequency-js .frequency-reveal{opacity:1;transform:none;}
.frequency-persona,.frequency-feature-item,.frequency-card{transition:none;}
}
/* ---- Responsive delle nuove sezioni ---- */
@media(max-width:992px){
.frequency-feature{grid-template-columns:1fr;gap:44px;}
}
@media(max-width:768px){
.frequency-reasons{grid-template-columns:1fr;gap:0;}
.frequency-reason:nth-child(2){border-top:1px solid rgba(23,32,51,.10);padding-top:28px;}
.frequency-persona{grid-template-columns:1fr;gap:16px;padding:26px 24px;text-align:left;}
.frequency-feature-item{padding:22px;gap:16px;}
}
/* ---- Contatti su schermi stretti ----
Gli elementi di una griglia hanno min-width:auto, quindi una stringa
lunga e non spezzabile (l'indirizzo email) allargava la colonna oltre
il viewport e il contenuto veniva tagliato da overflow-x:hidden. */
.frequency-contact > *{min-width:0;}
.frequency-contact-list .val,
.frequency-contact-list a{overflow-wrap:anywhere;}
.frequency-footer-col a,
.frequency-footer-addr,
.frequency-feature-item,
.frequency-persona-body{min-width:0;overflow-wrap:break-word;}
.frequency-form,
.frequency-form input,
.frequency-form select,
.frequency-form textarea{min-width:0;max-width:100%;}
/* =========================================================================
FREQUENCY v1.5 — menu mobile a pannello laterale (off-canvas)
========================================================================= */
/* Su desktop questi elementi non esistono visivamente. */
.frequency-nav-head,
.frequency-nav-foot,
.frequency-nav-close,
.frequency-nav-backdrop{display:none;}
@media(max-width:860px){
/* L'header ha backdrop-filter, e quella proprietà rende l'header stesso il
blocco di riferimento per i figli position:fixed: il pannello resterebbe
alto quanto la barra. Va disattivata per tutta la fascia mobile, non solo
a menu aperto, altrimenti il riferimento cambia proprio mentre il
pannello scorre e l'animazione parte dal punto sbagliato.
Lo sfondo della barra è comunque quasi opaco, quindi non si perde nulla. */
.frequency-header{
-webkit-backdrop-filter:none;backdrop-filter:none;
background:var(--frequency-dark);
}
/* ---- Velo ---- */
.frequency-nav-backdrop{
display:block;position:fixed;inset:0;z-index:1001;
background:rgba(4,10,20,.62);
opacity:0;visibility:hidden;
transition:opacity .3s ease,visibility .3s ease;
}
body.frequency-nav-open .frequency-nav-backdrop{opacity:1;visibility:visible;}
/* ---- Pannello ---- */
.frequency-nav{
position:fixed;top:0;right:0;bottom:0;left:auto;
width:min(86vw,340px);height:100%;max-height:none;
z-index:1002;
display:flex;flex-direction:column;align-items:stretch;gap:0;
padding:0;overflow-y:auto;overscroll-behavior:contain;
background:linear-gradient(180deg,#0B172A 0%,#07111F 100%);
border-left:1px solid rgba(255,255,255,.10);border-bottom:0;
box-shadow:-26px 0 60px -22px rgba(0,0,0,.75);
/* chiuso: fuori schermo e non raggiungibile da tastiera */
transform:translateX(100%);
opacity:1;visibility:hidden;pointer-events:auto;
transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s ease;
}
.frequency-nav.is-open{
transform:translateX(0);visibility:visible;max-height:none;opacity:1;
}
body.admin-bar .frequency-nav{top:46px;}
/* ---- Testata del pannello ---- */
.frequency-nav-head{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.08);
position:sticky;top:0;background:#0B172A;z-index:1;
}
.frequency-nav-head img{height:40px;width:auto;display:block;} /* era 26px: troppo piccolo nel pannello */
.frequency-nav-close{
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;flex:0 0 40px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:12px;color:#fff;cursor:pointer;padding:0;
}
.frequency-nav-close svg{width:18px;height:18px;fill:currentColor;}
.frequency-nav-close:hover{background:rgba(255,255,255,.12);}
/* ---- Voci ---- */
.frequency-menu{flex-direction:column;align-items:stretch;gap:0;padding:10px 12px;width:100%;}
.frequency-menu a,
.frequency-nav a{
display:block;padding:15px 12px;font-size:17px;border-bottom:0;border-radius:12px;
}
.frequency-menu li + li{border-top:1px solid rgba(255,255,255,.06);}
.frequency-menu a:hover,.frequency-menu a:focus-visible{background:rgba(255,255,255,.06);}
.frequency-menu .sub-menu{position:static;display:block;background:transparent;border:0;padding-left:14px;}
.frequency-nav .frequency-button{margin:14px 22px 4px;justify-content:center;}
/* ---- Contatti in fondo ---- */
.frequency-nav-foot{
display:flex;flex-direction:column;gap:6px;
margin-top:auto;padding:22px;border-top:1px solid rgba(255,255,255,.08);
}
.frequency-nav-foot a{padding:0;font-size:14.5px;color:#9DB0CA;word-break:break-word;}
.frequency-nav-hours{font-size:13.5px;color:#7C8BA5;}
.frequency-nav-foot .frequency-social{margin-top:14px;display:flex;gap:10px;align-items:center;}
.frequency-nav-foot .frequency-social a{
width:44px;height:44px;margin:0;padding:0;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;
}
.frequency-nav-foot .frequency-social a svg{width:20px;height:20px;}
}
@media(prefers-reduced-motion:reduce){
.frequency-nav,.frequency-nav-backdrop{transition:none;}
}
/* =========================================================================
FREQUENCY v1.6 — galleria: elementi video nel carosello
========================================================================= */
.frequency-marquee-item--video{position:relative;}
.frequency-marquee-item video{
display:block;width:100%;height:220px;object-fit:cover;
cursor:pointer;background:var(--frequency-dark-2);
}
.frequency-marquee-item video:focus-visible{outline:2px solid var(--frequency-cyan);outline-offset:-3px;}
/* Distintivo "play" sopra l'anteprima; sparisce durante la riproduzione. */
.frequency-play-badge{
position:absolute;top:0;left:0;right:0;height:220px;
display:flex;align-items:center;justify-content:center;
pointer-events:none;
transition:opacity .25s ease;
}
.frequency-play-badge svg{
width:56px;height:56px;padding:15px;box-sizing:border-box;
border-radius:50%;fill:#fff;
background:linear-gradient(135deg,rgba(0,212,255,.85),rgba(124,58,237,.85));
box-shadow:0 10px 30px -8px rgba(7,17,31,.6);
}
.frequency-marquee-item.is-playing .frequency-play-badge{opacity:0;}
/* Un video in riproduzione tiene fermo il nastro anche senza hover (touch). */
.frequency-marquee.has-playing .frequency-marquee-track{animation-play-state:paused;}
@media(max-width:768px){
.frequency-marquee-item video{height:170px;}
.frequency-play-badge{height:170px;}
.frequency-play-badge svg{width:48px;height:48px;padding:13px;}
}
/* =========================================================================
FREQUENCY v1.7 — logo header più presente + coerenza tipografica
delle pagine costruite con Elementor (Chi Siamo, Corsi, Contattaci)
========================================================================= */
/* ---- Logo nell'header ----
Il marchio orizzontale del tema ha proporzioni 4,5:1, quindi l'altezza si
traduce in una larghezza molto maggiore: 44px danno circa 198px di marchio,
ben leggibile senza rubare spazio al menu. (I 52px del tentativo precedente
erano tarati sul logo quadrato della cliente, che era alto quanto largo.)
Serve anche il selettore .custom-logo: una regola precedente lo usa e,
avendo due classi, vince sul semplice ".frequency-brand img". */
.frequency-brand img,
.frequency-brand .custom-logo{height:44px;width:auto;}
@media(max-width:860px){
.frequency-brand img,
.frequency-brand .custom-logo{height:36px;}
}
/* ---- Pagine Elementor: stessi caratteri del resto del sito ----
Le pagine interne della cliente usano Bebas Neue (titoli fino a 85px)
e Lato: qui ereditano Space Grotesk e Inter, con la scala del tema.
I colori restano i loro: sono calibrati sugli sfondi delle sezioni. */
.frequency-page .elementor h1,
.frequency-page .elementor h2,
.frequency-page .elementor h3,
.frequency-page .elementor h4,
.frequency-page .elementor .elementor-heading-title{
font-family:var(--frequency-font-display) !important;
font-weight:700 !important;
letter-spacing:-.01em !important;
line-height:1.12 !important;
}
/* Le dimensioni restano quelle scelte pagina per pagina dalla cliente:
così la gerarchia (titolo pagina grande, titoli card più piccoli) si
conserva. Solo su mobile i titoli enormi vengono contenuti, perché
Space Grotesk è più largo del Bebas condensato usato in origine. */
@media(max-width:768px){
.frequency-page .elementor h1,
.frequency-page .elementor h2{font-size:min(11vw,44px) !important;overflow-wrap:break-word;}
.frequency-page .elementor h3{font-size:min(7vw,30px) !important;}
}
/* Applicata dal JS ai titoli con corpo originale oltre i 90px: il minimo di
44px pareggia il tetto mobile delle card, così la gerarchia non si inverte. */
.frequency-page .elementor .frq-heading-capped{font-size:clamp(44px,8vw,88px) !important;}
.frequency-page .elementor p,
.frequency-page .elementor li,
.frequency-page .elementor .elementor-widget-text-editor{
font-family:var(--frequency-font-body) !important;
line-height:1.7 !important;
}
.frequency-page .elementor .elementor-button,
.frequency-page .elementor a.e-button{
font-family:var(--frequency-font-display) !important;
font-weight:600 !important;
border-radius:999px !important;
}
/* =========================================================================
FREQUENCY v1.8 — sezione "Chi siamo" in homepage
Impianto editoriale: racconto su colonne + pannello inclusività.
========================================================================= */
.frequency-about{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;}
.frequency-about-story{margin-top:10px;}
.frequency-about-story p{color:var(--frequency-muted);font-size:16.5px;margin:0 0 1em;}
@media(min-width:993px){
.frequency-about-story{columns:2;column-gap:40px;}
.frequency-about-story p{break-inside:avoid;}
}
.frequency-about-panel{
position:relative;
background:var(--frequency-gradient-soft);
border:1px solid rgba(124,58,237,.18);
border-radius:24px;padding:38px 34px;
margin-top:46px;
}
.frequency-about-mark{
position:absolute;top:-18px;left:30px;
width:38px;height:38px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-size:18px;color:#fff;background:var(--frequency-gradient);
box-shadow:0 10px 24px -10px rgba(124,58,237,.6);
}
.frequency-about-panel h3{font-size:22px;margin:6px 0 12px;}
.frequency-about-panel p{color:var(--frequency-muted);font-size:15.5px;margin:0 0 14px;}
.frequency-about-panel .frequency-inline-link{color:var(--frequency-purple);margin-top:2px;}
@media(max-width:992px){
.frequency-about{grid-template-columns:1fr;gap:36px;}
.frequency-about-panel{margin-top:14px;}
}
/* ---- Il bottone WhatsApp cede il passo al banner cookie ----
La classe la mette il JS solo quando la sovrapposizione è reale, misurata
sui rettangoli dei due elementi. Si nasconde invece di spostarsi: su mobile
il banner è alto oltre 400px e sollevare il bottone lo porterebbe a metà
schermo. Il banner richiede una sola scelta, poi il bottone ricompare. */
body.frequency-cookiebanner-open .frequency-wa-float{
opacity:0;
visibility:hidden;
pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
.frequency-wa-float{transition:opacity .25s ease,visibility .25s ease,transform .2s ease;}
}
/* =========================================================================
FREQUENCY v2.0 — header fisso, hero mobile, social nei contatti, footer
========================================================================= */
/* ---- Header davvero fisso ----
Era "sticky": resta in alto ma partecipa al flusso, e in alcune condizioni
(barra del browser su mobile, ancore) dà la sensazione di ricomparire a
ogni scorrimento. Con "fixed" non si muove mai. Lo spazio che occupava
viene restituito al contenuto con un padding pari alla sua altezza.
Niente backdrop-filter: renderebbe l'header il blocco di riferimento del
pannello menu, che è a sua volta position:fixed. */
:root{--frequency-header-h:75px;}
.frequency-header{
position:fixed;top:0;left:0;right:0;
background:var(--frequency-dark);
-webkit-backdrop-filter:none;backdrop-filter:none;
}
.site-content{padding-top:var(--frequency-header-h);}
body.admin-bar .frequency-header{top:32px;}
@media(max-width:782px){
body.admin-bar .frequency-header{top:46px;}
/* Sotto i 783px WordPress rende la barra di amministrazione "absolute":
scorrendo sparisce e nei 46px lasciati liberi sopra l'header passa la
pagina. Riguarda solo chi e' loggato, ma e' proprio chi controlla il sito. */
body.admin-bar #wpadminbar{position:fixed;}
}
/* ---- Dati dell'hero centrati su mobile ---- */
@media(max-width:768px){
.frequency-hero-stats{
justify-content:center;text-align:center;
gap:14px 28px;margin-top:32px;
}
.frequency-hero-stats > div{min-width:90px;}
}
/* ---- Social dentro il blocco contatti ----
Prima galleggiavano staccati: ora hanno etichetta e filetto di
separazione, così si leggono come parte della scheda. */
.frequency-contact-social{
margin-top:24px;padding-top:20px;
border-top:1px solid rgba(255,255,255,.10);
}
.frequency-contact-social .lbl{
display:block;font-size:13px;color:#9DB0CA;
text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
}
.frequency-contact-social .frequency-social{margin-top:0;}
/* ---- Footer: dati legali e informative ---- */
/* =========================================================================
FREQUENCY v2.1 — pastiglia "anche online", allineamento card percorsi
========================================================================= */
/* ---- Piede della card corso: livelli + eventuale pastiglia ---- */
.frequency-card-foot{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
margin-top:14px;
}
.frequency-card-foot .frequency-card-level{margin-top:0;}
.frequency-card-badge{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--frequency-font-display);font-size:13px;font-weight:600;
padding:5px 11px;border-radius:999px;line-height:1;
background:var(--frequency-gradient-soft);
border:1px solid rgba(124,58,237,.22);
color:var(--frequency-purple);
}
.frequency-card-badge::before{
content:"";width:6px;height:6px;border-radius:50%;
background:var(--frequency-gradient);
}
.frequency-language-accent .frequency-card-badge{
border-color:rgba(0,162,212,.3);color:#036A8A;
}
/* ---- Card "Scegli il tuo percorso": contenuti allineati ----
Erano incolonnate dal basso: con un titolo su due righe l'etichetta e il
titolo della terza card partivano più in alto delle altre. Ora etichetta e
titolo sono ancorati in cima e il link resta in fondo. */
.frequency-path-card{justify-content:flex-start;}
/* Due righe esatte: il titolo eredita line-height 1.25, quindi 2 × 1.25em.
Con un valore inferiore i paragrafi delle card a titolo corto partivano
qualche pixel più in alto. */
.frequency-path-card h3{min-height:2.5em;}
.frequency-path-card a{margin-top:auto;}
@media(max-width:992px){
.frequency-path-card h3{min-height:0;}
}
@media(max-width:680px){
.frequency-card-media{aspect-ratio:16/10;}
}
/* =========================================================================
FREQUENCY v2.2 — card "lezioni da remoto" fra i corsi di lingua
========================================================================= */
.frequency-card--remote{
display:flex;flex-direction:column;
background:linear-gradient(150deg,#0B63E5 0%,#00D4FF 100%);
border:0;color:#fff;
box-shadow:var(--frequency-shadow);
}
.frequency-card--remote h3{color:#fff;}
.frequency-card--remote p{color:rgba(255,255,255,.92);}
.frequency-card--remote .frequency-card-ico{
background:rgba(255,255,255,.18);
}
/* Il bottone qui è bianco su fondo colorato: il gradiente del tema
sparirebbe sullo sfondo azzurro della card. */
.frequency-card--remote .frequency-button{
align-self:flex-start;margin-top:auto;
background:#fff;color:#0B63E5;
box-shadow:0 10px 24px -12px rgba(7,17,31,.55);
}
.frequency-card--remote .frequency-button:hover{
background:#fff;color:#07111F;transform:translateY(-2px);
}
.frequency-card--remote .frequency-wa-ico{fill:currentColor;}
.frequency-card--remote:hover{transform:translateY(-4px);}
/* =========================================================================
FREQUENCY v2.3 — modulo contatti alto quanto la scheda dei recapiti
========================================================================= */
/* Le due colonne si allungano insieme; le rassicurazioni scendono in fondo
riempiendo lo spazio invece di lasciare la card mozzata a metà. */
.frequency-contact{align-items:stretch;}
.frequency-contact > .frequency-dark-block{display:flex;flex-direction:column;}
.frequency-form{display:flex;flex-direction:column;}
.frequency-form-extra{
margin-top:auto;padding-top:22px;
border-top:1px solid rgba(23,32,51,.10);
}
.frequency-form-notes{
list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px;
}
.frequency-form-notes li{
display:flex;gap:10px;align-items:flex-start;
font-size:14px;line-height:1.5;color:var(--frequency-muted);
}
.frequency-form-notes li::before{
content:"";flex:0 0 17px;width:17px;height:17px;border-radius:50%;margin-top:2px;
background:var(--frequency-gradient);
-webkit-mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.frequency-form-wa{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--frequency-font-display);font-weight:600;font-size:14.5px;
color:#0F7A3D;text-decoration:none;
background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.32);
border-radius:999px;padding:11px 18px;
transition:background .2s ease;
}
.frequency-form-wa:hover{background:rgba(37,211,102,.18);color:#0B5C2E;}
.frequency-form-wa .frequency-wa-ico{width:17px;height:17px;fill:#25D366;}
@media(max-width:992px){
.frequency-contact{align-items:start;}
.frequency-form-extra{margin-top:24px;}
}
/* =========================================================================
FREQUENCY v2.6 — pagina dedicata ai corsi di musica
Stessa palette del sito, impianto diverso: pagina scura e corsi presentati
come una scaletta numerata, non come la griglia di card della homepage.
Tutto incapsulato sotto .frequency-mpage per non toccare il resto.
========================================================================= */
.frequency-mpage{background:var(--frequency-dark);color:#E6EDF7;}
.frequency-mpage h1,.frequency-mpage h2,.frequency-mpage h3{color:#fff;}
.frequency-mpage .frequency-lead{color:#AEBED4;}
.frequency-mpage .frequency-eyebrow{color:var(--frequency-pink);}
.frequency-mpage .frequency-outline-button{color:#fff;border-color:rgba(255,255,255,.35);}
.frequency-mpage .frequency-outline-button:hover{border-color:var(--frequency-pink);color:var(--frequency-pink);}
.frequency-mpage .frequency-checklist li{color:#D6E2F2;}
/* ---- Apertura ---- */
.frequency-mpage-hero{padding:96px 0 84px;position:relative;}
.frequency-mpage-hero::before{background:radial-gradient(circle,rgba(124,58,237,.55),transparent 65%);}
.frequency-mpage-hero::after{background:radial-gradient(circle,rgba(255,45,122,.45),transparent 65%);}
.frequency-mpage-hero h1{font-size:clamp(38px,6vw,62px);line-height:1.06;margin-bottom:20px;max-width:15ch;}
.frequency-mpage-hero .frequency-lead{font-size:19px;max-width:620px;}
.frequency-mpage-back{
display:inline-block;margin-bottom:26px;
font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:#7C8BA5;text-decoration:none;
}
.frequency-mpage-back::before{content:"\2190";margin-right:8px;}
.frequency-mpage-back:hover{color:var(--frequency-cyan);}
.frequency-mpage-eq{margin:30px 0 4px;height:54px;}
.frequency-mpage .frequency-btn-row{margin-top:26px;}
.frequency-mpage .frequency-hero-stats{margin-top:40px;}
.frequency-mpage .frequency-hero-stats .num{
background:var(--frequency-gradient);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
.frequency-mpage .frequency-hero-stats .lbl{color:#8FA6C4;font-size:14px;}
/* ---- I percorsi: scaletta numerata ---- */
.frequency-mpage-list{padding:88px 0;background:var(--frequency-dark-2);}
.frequency-track{list-style:none;margin:0;padding:0;counter-reset:none;}
.frequency-track-item{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;gap:26px;
padding:28px 30px;
border:1px solid rgba(255,255,255,.10);
border-radius:20px;
background:rgba(255,255,255,.03);
margin-bottom:14px;position:relative;overflow:hidden;
transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
/* barra a gradiente che entra da sinistra al passaggio */
.frequency-track-item::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(180deg,var(--frequency-purple),var(--frequency-pink));
transform:scaleY(0);transform-origin:top;transition:transform .25s ease;
}
.frequency-track-item:hover{
border-color:rgba(255,45,122,.4);
background:rgba(255,255,255,.05);
transform:translateX(4px);
}
.frequency-track-item:hover::before{transform:scaleY(1);}
.frequency-track-cover{
position:relative;width:152px;height:106px;flex:0 0 152px;
border-radius:16px;overflow:hidden;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(124,58,237,.45),rgba(255,45,122,.38));
}
.frequency-track-cover img{
width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.7) contrast(1.04);
transition:filter .3s ease,transform .4s ease;
}
.frequency-track-item:hover .frequency-track-cover img{filter:saturate(1.15);transform:scale(1.06);}
/* velatura scura: tiene leggibile il numero sopra qualsiasi foto */
.frequency-track-cover::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(155deg,rgba(11,15,26,.78) 0%,rgba(11,15,26,.12) 52%,rgba(11,15,26,.5) 100%);
}
.frequency-track-num{
position:absolute;left:13px;top:9px;z-index:1;
font-family:var(--frequency-font-display);font-size:30px;font-weight:700;line-height:1;
color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.frequency-track-ico{
position:relative;z-index:1;font-size:34px;line-height:1;
}
.frequency-track-body h3{font-size:22px;margin:8px 0 6px;}
.frequency-track-body p{color:#A9BBD4;font-size:15.5px;margin:0;}
.frequency-track-body .frequency-card-tag{
background:rgba(255,45,122,.14);color:#FF6FA3;
}
.frequency-track-body .frequency-card-level{color:#8FA6C4;margin-top:10px;}
.frequency-track-cta{
white-space:nowrap;text-decoration:none;font-weight:600;font-size:14.5px;
font-family:var(--frequency-font-display);
color:#fff;border:1.5px solid rgba(255,255,255,.28);
border-radius:999px;padding:11px 20px;transition:all .2s ease;
}
.frequency-track-cta:hover{border-color:transparent;background:var(--frequency-gradient);}
/* ---- Come si lavora ---- */
.frequency-mpage-studio{padding:88px 0;}
.frequency-mpage-studio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.frequency-mpage-panel{
position:relative;border-radius:24px;padding:38px 34px;
background:linear-gradient(150deg,rgba(124,58,237,.22),rgba(255,45,122,.18));
border:1px solid rgba(255,255,255,.12);
}
.frequency-mpage-panel-mark{
position:absolute;top:-18px;left:30px;width:40px;height:40px;border-radius:12px;
display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;
background:var(--frequency-gradient);box-shadow:0 10px 26px -10px rgba(255,45,122,.7);
}
.frequency-mpage-panel h3{font-size:23px;margin:8px 0 12px;}
.frequency-mpage-panel p{color:#D6E2F2;font-size:15.5px;margin-bottom:20px;}
/* ---- Strumenti e piattaforme ---- */
.frequency-mpage-tools{padding:80px 0;background:var(--frequency-dark-2);}
.frequency-tool-grid{
display:flex;flex-wrap:wrap;justify-content:center;
gap:16px;
}
.frequency-tool{
display:flex;align-items:center;justify-content:center;
flex:0 1 220px;padding:24px 22px;min-height:126px;
border:1px solid rgba(255,255,255,.09);border-radius:16px;
background:rgba(255,255,255,.03);
}
/* I marchi arrivano in formati e colori diversi: resi in bianco uniforme,
riprendono colore al passaggio del mouse. */
.frequency-tool img{
/* limite su entrambi i lati: i marchi quadrati e quelli molto larghi
restano di peso visivo simile dentro alla stessa piastrella */
max-width:min(100%,150px);max-height:74px;width:auto;height:auto;display:block;
filter:brightness(0) invert(1);opacity:.55;
transition:opacity .2s ease,filter .2s ease;
}
.frequency-tool:hover img{filter:none;opacity:1;}
/* ---- Le altre aree ---- */
.frequency-mpage-more{padding:80px 0 96px;}
.frequency-mpage-more h2{font-size:30px;margin-bottom:28px;}
.frequency-mpage-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.frequency-mpage-more-card{
display:block;text-decoration:none;color:#fff;
border-radius:24px;padding:34px;min-height:180px;
box-shadow:var(--frequency-shadow);
transition:transform .2s ease;
}
.frequency-mpage-more-card:hover{transform:translateY(-4px);color:#fff;}
.frequency-mpage-more-card h3{font-size:24px;margin:12px 0 8px;}
.frequency-mpage-more-card p{color:rgba(255,255,255,.9);font-size:15.5px;margin:0;}
.frequency-mpage-more-card .frequency-card-tag{background:rgba(255,255,255,.2);color:#fff;}
/* ---- Responsive ---- */
@media(max-width:860px){
.frequency-mpage-studio-grid{grid-template-columns:1fr;gap:36px;}
.frequency-mpage-more-grid{grid-template-columns:1fr;}
/* Copertina sopra al testo: affiancata, la descrizione restava in una
colonna da 176px e diventava un muro di dieci righe. */
.frequency-track-item{
grid-template-columns:1fr;
grid-template-areas:"cover" "body" "cta";
gap:16px;padding:20px;
}
.frequency-track-cover{grid-area:cover;width:100%;height:152px;flex-basis:auto;}
.frequency-track-num{font-size:26px;left:12px;top:9px;}
.frequency-track-body{grid-area:body;}
.frequency-track-body h3{margin-top:6px;font-size:20px;}
.frequency-track-cta{grid-area:cta;justify-self:start;}
}
/* collegamento in fondo a una griglia di corsi.
Selettore a due classi: quello a una sola perdeva contro ".frequency-site p"
e il bottone finiva attaccato alle card (margine calcolato 0). */
.frequency-site .frequency-section-more{text-align:center;margin:52px 0 0;}
/* ---- Pagina musica: carosello foto e video ---- */
.frequency-mpage-reel{padding:88px 0;}
.frequency-reel{position:relative;margin-top:38px;}
.frequency-reel-track{
list-style:none;margin:0;padding:2px;
display:flex;gap:20px;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:2px;
scrollbar-width:none;-ms-overflow-style:none;
}
.frequency-reel-track::-webkit-scrollbar{display:none;}
.frequency-reel-track:focus-visible{outline:2px solid var(--frequency-cyan);outline-offset:6px;border-radius:22px;}
.frequency-reel-item{
position:relative;flex:0 0 min(540px,84%);scroll-snap-align:start;
border-radius:20px;overflow:hidden;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.03);
}
/* I video girati col telefono sono spesso verticali: si mostrano interi, non tagliati. */
.frequency-reel-item video{width:100%;height:320px;display:block;background:#05080F;object-fit:contain;}
.frequency-reel-item img{width:100%;height:320px;display:block;object-fit:cover;}
.frequency-reel-caption{display:block;padding:14px 18px;font-size:14.5px;color:#A9BBD4;}
.frequency-reel-nav{
position:absolute;top:150px;z-index:2;
width:46px;height:46px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:1px solid rgba(255,255,255,.22);
background:rgba(11,15,26,.82);color:#fff;
cursor:pointer;transition:background .2s ease,border-color .2s ease,opacity .2s ease;
}
.frequency-reel-nav svg{width:22px;height:22px;}
.frequency-reel-nav.is-prev{left:-10px;}
.frequency-reel-nav.is-next{right:-10px;}
.frequency-reel-nav:hover{background:var(--frequency-gradient);border-color:transparent;}
.frequency-reel-nav:disabled{opacity:.25;cursor:default;}
.frequency-reel-nav:disabled:hover{background:rgba(11,15,26,.82);border-color:rgba(255,255,255,.22);}
@media(max-width:860px){
.frequency-mpage-reel{padding:62px 0;}
.frequency-reel-item{flex-basis:88%;}
.frequency-reel-item video,.frequency-reel-item img{height:250px;}
.frequency-reel-nav{top:115px;width:40px;height:40px;}
.frequency-reel-nav.is-prev{left:-4px;}
.frequency-reel-nav.is-next{right:-4px;}
}
/* ============================================================
* VARIANTE V2 — impaginazione a scacchiera (pagina di prova)
* ============================================================ */
/* ---- I percorsi: caselle che si alternano ---- */
.frequency-mpage2-board{padding:88px 0 0;}
.frequency-board{margin-top:44px;}
.frequency-board-row{
display:grid;grid-template-columns:1fr 1fr;
min-height:340px;
}
/* Le righe dispari ribaltano il lato: da qui nasce la scacchiera. */
.frequency-board-row.is-flipped .frequency-board-media{order:2;}
.frequency-board-media{
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(124,58,237,.45),rgba(255,45,122,.38));
}
.frequency-board-media img{
width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.72) contrast(1.04);
transition:filter .35s ease,transform .5s ease;
}
.frequency-board-row:hover .frequency-board-media img{filter:saturate(1.12);transform:scale(1.04);}
.frequency-board-media::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(155deg,rgba(11,15,26,.6) 0%,rgba(11,15,26,.05) 55%,rgba(11,15,26,.45) 100%);
}
.frequency-board-ico{position:relative;z-index:1;font-size:56px;line-height:1;}
.frequency-board-num{
position:absolute;left:24px;top:18px;z-index:1;
font-family:var(--frequency-font-display);font-size:40px;font-weight:700;line-height:1;
color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.frequency-board-copy{
display:flex;align-items:center;
padding:48px 52px;
background:var(--frequency-dark-2);
transition:background .25s ease;
}
/* Caselle chiare e scure alternate, come sulla scacchiera. */
.frequency-board-row:nth-child(even) .frequency-board-copy{background:rgba(255,255,255,.045);}
.frequency-board-row:hover .frequency-board-copy{background:rgba(255,255,255,.07);}
.frequency-board-copy-inner{max-width:460px;}
.frequency-board-copy h3{font-size:26px;margin:10px 0 12px;}
.frequency-board-copy p{color:#A9BBD4;font-size:16px;margin:0 0 14px;}
.frequency-board-copy .frequency-card-tag{background:rgba(255,45,122,.14);color:#FF6FA3;}
.frequency-board-copy .frequency-card-level{display:block;color:#8FA6C4;margin-bottom:22px;}
/* ---- Tessere finali: stessa logica, misure diverse ---- */
.frequency-mpage2-tiles{padding:88px 0;}
.frequency-tile-grid{
display:grid;grid-template-columns:repeat(2,1fr);
gap:18px;align-items:stretch;
}
.frequency-tile{
border:1px solid rgba(255,255,255,.10);border-radius:22px;
padding:38px 34px;background:rgba(255,255,255,.03);
}
.frequency-tile h2{font-size:30px;margin:0 0 14px;}
.frequency-tile h3{font-size:22px;margin:0 0 10px;}
.frequency-tile p{color:#A9BBD4;margin:0 0 16px;}
.frequency-tile--copy{grid-row:span 2;}
.frequency-tile--cta{
position:relative;
background:linear-gradient(150deg,rgba(124,58,237,.22),rgba(255,45,122,.18));
border-color:rgba(255,255,255,.16);
}
.frequency-tile--tools .frequency-tool-grid{justify-content:flex-start;}
.frequency-tile--tools .frequency-tool{flex:0 1 150px;min-height:84px;padding:16px;}
.frequency-tile--link{
display:block;text-decoration:none;color:inherit;
transition:transform .2s ease,border-color .2s ease;
}
.frequency-tile--link:hover{transform:translateY(-3px);border-color:rgba(255,45,122,.4);}
.frequency-tile--link .frequency-card-tag{background:rgba(255,255,255,.16);color:#fff;}
@media(max-width:860px){
.frequency-mpage2-board{padding:62px 0 0;}
.frequency-board-row{grid-template-columns:1fr;min-height:0;}
/* In colonna la scacchiera non esiste: l'immagine torna sempre in alto. */
.frequency-board-row.is-flipped .frequency-board-media{order:0;}
.frequency-board-media{height:200px;}
.frequency-board-copy{padding:28px 22px;}
.frequency-board-copy h3{font-size:21px;}
.frequency-board-num{left:18px;top:14px;font-size:30px;}
.frequency-mpage2-tiles{padding:62px 0;}
.frequency-tile-grid{grid-template-columns:1fr;}
.frequency-tile--copy{grid-row:auto;}
.frequency-tile{padding:28px 24px;}
}
/* ---- Marchi su mobile: una fila sola, senza cornici ----
In colonna tre piastrelle da 126px occupavano mezzo schermo per dire
tre nomi: qui la riga è un dettaglio, non una sezione. */
@media(max-width:860px){
/* Riquadri anche sul telefono, due per riga, tutti della stessa altezza:
i loghi "sparsi" senza cornice sembravano buttati li'. */
.frequency-tool-grid{flex-wrap:wrap;gap:10px;align-items:stretch;}
.frequency-tool,
.frequency-tile--tools .frequency-tool{
flex:0 1 calc(50% - 5px);min-width:0;
min-height:84px;padding:14px 12px;
border:1px solid rgba(255,255,255,.10);border-radius:14px;
background:rgba(255,255,255,.04);
}
.frequency-tool img{
max-width:min(100%,124px);max-height:40px;
opacity:.85; /* niente hover sul telefono: restano leggibili così come sono */
}
}
/* ---- Icona-foto nelle card della homepage (area musica) ----
Stesso posto e stesso raggio del riquadro con l'emoji, un po' piu' grande
perche' una foto a 54px si legge male. Niente sfondo a gradiente sotto:
l'immagine copre tutto il riquadro. */
.frequency-card-ico--img{
width:68px;height:68px;padding:0;overflow:hidden;
background:none;border:1px solid rgba(23,32,51,.08);
}
.frequency-card-ico--img img{width:100%;height:100%;object-fit:cover;display:block;}
/* ---- Riquadro icona delle card corso: stessa misura della miniatura-foto ----
Con la foto a 68px sulle card musica, la bandierina a 54px sulle lingue
tornava a sembrare la versione minore. Stesso riquadro per tutte; l'emoji
cresce in proporzione (era 24 su 54, ora 30 su 68). */
.frequency-card .frequency-card-ico{width:68px;height:68px;font-size:30px;}
/* ---- Card corso cliccabile (homepage -> pagina dedicata) ----
Un solo , con testo visibile in fondo alla card, esteso a tutta la card
tramite lo pseudo-elemento: niente link annidati, un solo punto di tab. */
.frequency-card--link{position:relative;}
.frequency-card-link{
display:inline-block;margin-top:16px;
font-family:var(--frequency-font-display);font-size:14px;font-weight:600;
color:var(--frequency-purple);text-decoration:none;
}
.frequency-card-link::after{content:"";position:absolute;inset:0;}
.frequency-card--link:hover .frequency-card-link{text-decoration:underline;}
.frequency-card-link:focus-visible{outline:2px solid var(--frequency-cyan);outline-offset:3px;border-radius:6px;}
/* Arrivando da un'ancora, il corso non deve finire sotto l'header fisso. */
.frequency-track-item,.frequency-board-row{scroll-margin-top:96px;}
/* ---- Footer: metodi di pagamento accettati ----
Etichette testuali, non i marchi: non abbiamo i file ufficiali dei loghi
e quelli disegnati a mano sarebbero usi impropri del marchio. */
.frequency-footer-pay{
display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
margin-top:40px; /* aria fra le colonne e la riga */
padding:22px 0;border-top:1px solid rgba(255,255,255,.08);
}
/* Con la riga dei pagamenti, il blocco sotto non aggiunge il suo margine:
fra pastiglie e riga inferiore restano i 22px di padding, non 50. */
.frequency-footer-pay + .frequency-footer-bottom{margin-top:0;}
.frequency-footer-pay-label{
font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:#8FA6C4;margin-right:4px;
}
.frequency-pay-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.frequency-pay-list li{
font-family:var(--frequency-font-display);font-size:13px;font-weight:600;
color:#DCE6F5;padding:6px 12px;border-radius:999px;
border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
}
@media(max-width:860px){
.frequency-footer-pay{padding-top:18px;}
.frequency-footer-pay-label{width:100%;margin:0 0 2px;}
}
/* Pastiglie con il marchio: SVG monocromatici resi bianchi, stessa altezza per tutti.
Le pastiglie di solo testo (marchi senza file) restano allineate a quelle con il logo. */
.frequency-pay-list li.has-logo{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;}
/* Simple Icons disegna tutto in un quadrato 24x24: i marchi "a parola"
(Apple Pay, Google Pay, Amazon Pay) a 18px erano illeggibili. */
.frequency-pay-list li.has-logo img{
height:26px;width:auto;display:block;
filter:brightness(0) invert(1);opacity:.88;
}
.frequency-pay-list li.has-logo{padding:5px 12px;}
@media(max-width:860px){
.frequency-pay-list li.has-logo img{height:22px;}
}
/* ---- Marchi: fila piccola (software e piattaforme) sotto a quella grande ---- */
/* Due classi nel selettore: con una sola, ".frequency-site p" azzerava il margine
e l'etichetta finiva attaccata alle piastrelle grandi. */
.frequency-site .frequency-tool-sub{
margin:40px 0 14px;text-align:center;
font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8FA6C4;
}
.frequency-tool-grid--small{gap:12px;}
.frequency-tool--small{flex:0 1 160px;min-height:72px;padding:14px 16px;}
.frequency-tool--small img{max-width:min(100%,110px);max-height:34px;}
@media(max-width:860px){
.frequency-site .frequency-tool-sub{margin:26px 0 10px;}
.frequency-tool-grid--small{gap:10px;}
.frequency-tool--small,
.frequency-tile--tools .frequency-tool--small{flex:0 1 calc(50% - 5px);min-height:64px;padding:10px 12px;}
.frequency-tool--small img{max-width:min(100%,104px);max-height:28px;}
}
/* ---- Footer: informative sotto i contatti, riga unica di copyright, credito ---- */
.frequency-footer-policies{margin-top:12px;}
.frequency-footer-policies ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;}
.frequency-footer-policies a{font-size:13px;color:rgba(255,255,255,.6);} /* .42 dava 4.07:1, sotto AA */
.frequency-footer-policies a:hover{color:var(--frequency-cyan);}
.frequency-footer-bottom > span{line-height:1.7;}
.frequency-footer-credit{
margin:12px 0 0;font-size:13px;color:rgba(255,255,255,.6);
}
.frequency-footer-credit a{color:rgba(255,255,255,.62);text-decoration:none;font-weight:600;}
.frequency-footer-credit a:hover{color:var(--frequency-cyan);}
/* Footer: rimando alla pagina dedicata in fondo all'elenco dei corsi */
.frequency-footer-col a.frequency-footer-more{margin-top:6px;color:#DCE6F5;font-weight:600;}
.frequency-footer-col a.frequency-footer-more:hover{color:var(--frequency-cyan);}
/* I loghi arrivano con larghezza e altezza calcolate ad area uguale (vedi
frequency_brand_logos_html): quando su mobile i limiti max-* li riducono,
contain tiene le proporzioni invece di schiacciarli. */
.frequency-tool img{object-fit:contain;height:auto;}
/* ============================================================
* Carosello homepage: icona dell'area su ogni foto/video, didascalie centrate
* ============================================================ */
.frequency-marquee-item{position:relative;}
.frequency-marquee-area{
position:absolute;left:12px;top:12px;z-index:2;
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(7,17,31,.78);color:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.frequency-marquee-area svg{width:17px;height:17px;fill:currentColor;}
.frequency-marquee-area--musica{background:linear-gradient(135deg,#7C3AED,#FF2D7A);}
.frequency-marquee-area--lingue{background:linear-gradient(135deg,#0B63E5,#00D4FF);}
.frequency-marquee-area--doposcuola{background:linear-gradient(135deg,#00A878,#00D4FF);}
.frequency-marquee-item figcaption{text-align:center;}
.frequency-reel-caption{text-align:center;}
/* ============================================================
* Footer: colonne a fisarmonica su mobile
* ============================================================ */
.frequency-footer-toggle{
all:unset;display:flex;align-items:center;justify-content:space-between;gap:10px;
width:100%;font:inherit;color:inherit;cursor:default;
}
.frequency-footer-toggle svg{display:none;width:18px;height:18px;flex:0 0 18px;transition:transform .2s ease;}
@media(max-width:860px){
.frequency-footer-col{gap:0;}
.frequency-footer-col h4{margin:0;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.frequency-footer-toggle{cursor:pointer;}
.frequency-footer-toggle svg{display:block;}
.frequency-footer-col.is-open .frequency-footer-toggle svg{transform:rotate(180deg);}
/* chiuse: resta solo il titolo. La colonna del marchio non ha titolo e non si chiude. */
.frequency-footer-col:not(.is-open) > :not(h4){display:none;}
.frequency-footer-col.is-open > :not(h4){display:block;margin:10px 0 0;}
.frequency-footer-col.is-open > h4{margin-bottom:4px;}
.frequency-footer-col.is-open > :last-child{margin-bottom:14px;}
.frequency-footer-col.is-open .frequency-footer-policies{margin-top:12px;}
}
/* ============================================================
* Footer: riga finale ordinata e credito con piu' peso
* ============================================================ */
.frequency-footer-legal-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;font-size:14px;color:#7C8BA5;line-height:1.7;}
.frequency-footer-legal-line .sep{opacity:.5;margin:0 6px;}
.frequency-footer-vat::before{content:"|";opacity:.5;margin:0 10px;}
.frequency-footer-top{white-space:nowrap;}
.frequency-footer-credit{
margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.62);
}
.frequency-footer-credit a{
display:inline-flex;align-items:center;gap:3px;
color:#fff;font-family:var(--frequency-font-display);font-weight:700;font-size:15.5px;letter-spacing:.01em;text-decoration:none;
}
.frequency-footer-credit a svg{width:15px;height:15px;opacity:.7;transition:transform .2s ease,opacity .2s ease;}
.frequency-footer-credit a:hover{color:var(--frequency-cyan);}
.frequency-footer-credit a:hover svg{opacity:1;transform:translate(1px,-1px);}
@media(max-width:600px){
.frequency-footer-legal-line{flex-direction:column;gap:2px;}
.frequency-footer-legal-line .sep{display:none;}
.frequency-footer-copy{display:flex;flex-direction:column;}
.frequency-footer-vat::before{content:none;}
.frequency-footer-vat{font-size:13px;color:rgba(255,255,255,.5);}
}
/* ============================================================
* Bersagli di tocco su mobile: almeno 44px di altezza sui link "a riga"
* (card dei percorsi, "Scopri il corso", footer). Il padding verticale
* aggiunge area di tocco senza cambiare il ritmo del testo.
* ============================================================ */
@media(max-width:860px){
.frequency-path-card a,
.frequency-card-link,
.frequency-footer-col a,
.frequency-footer-policies a,
.frequency-footer-top,
.frequency-footer-credit a,
.frequency-inline-link{
display:inline-flex;align-items:center;min-height:44px;
}
.frequency-footer-col.is-open > a{margin:0;}
.frequency-footer-policies ul{gap:0 18px;}
.frequency-social a{width:44px;height:44px;}
}
/* Titolo del tema sopra una pagina Elementor senza H1 (cookie policy): piu' basso dell'hero normale. */
.frequency-page-hero--slim{padding:56px 0 34px;}
.frequency-page-hero--slim h1{font-size:34px;margin:0;}
/* ============================================================
* Footer su desktop: le quattro colonne allineate in alto e in basso.
* L'ultimo elemento di ogni colonna (social, "Tutti i corsi", informative)
* scende sulla stessa linea di fondo della colonna piu' alta: l'altezza
* percepita e' uguale senza spaziature artificiali fra le voci.
* ============================================================ */
@media(min-width:861px){
.frequency-footer-grid{align-items:stretch;}
.frequency-footer-brand{display:flex;flex-direction:column;}
.frequency-footer-brand .frequency-social{margin-top:auto;}
.frequency-footer-col > :last-child{margin-top:auto;}
/* Specificita': la regola ".frequency-footer-col a.frequency-footer-more{margin-top:6px}"
batteva ":last-child{margin-top:auto}" e il link restava 20px sopra il fondo. */
.frequency-footer-col > a.frequency-footer-more:last-child{margin-top:auto;padding-top:10px;}
.frequency-footer-col > .frequency-footer-policies:last-child{padding-top:6px;}
}
/* Bersagli di tocco, seconda passata: hamburger, bottoni piccoli, titoli del
footer (il bottone dentro l'h4 era 26px: il padding va sul bottone, non
sull'h4), telefono e email nel blocco contatti. */
@media(max-width:860px){
.frequency-burger{min-width:44px;min-height:44px;}
.frequency-button--sm{min-height:44px;}
.frequency-footer-col h4{padding:0;}
.frequency-footer-toggle{min-height:44px;padding:10px 0;}
.frequency-contact-list a{display:inline-flex;align-items:center;min-height:44px;}
}
/* Il logo nell'header: link alto 36px dentro una barra da 75. Area di tocco a 44. */
@media(max-width:860px){
.frequency-brand{display:inline-flex;align-items:center;min-height:44px;}
}
/* Pagina musica: frase di apertura e dettagli (modalità, livello) di ogni corso.
Testi della cliente dell'8 settembre 2026: un'apertura in evidenza, il
paragrafo, poi due righe con icona al posto delle emoji del brief. */
.frequency-site .frequency-track-claim{
color:#EAF0FA;font-weight:600;font-size:17px;line-height:1.45;margin:0 0 10px;
}
.frequency-site .frequency-track-meta{
list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;
}
.frequency-site .frequency-track-meta li{
display:flex;align-items:flex-start;gap:9px;color:#A9BBD4;font-size:14px;line-height:1.45;
}
.frequency-track-meta svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;fill:#8FA6C4;}
.frequency-track-meta strong{color:#DCE6F5;font-weight:600;}
@media (max-width:860px){
.frequency-site .frequency-track-claim{font-size:16px;}
}
/* Revisione 8 settembre 2026: bersagli di tocco sotto i 44px nel pannello del
menu mobile (email) e sul logo; loghi pagamenti con width/height dichiarati
nel markup, la misura resta quella del CSS. */
@media (max-width:860px){
.frequency-nav-foot a{display:inline-flex;align-items:center;min-height:44px;}
.frequency-brand a{display:inline-flex;align-items:center;min-height:44px;}
}
.frequency-pay-list li.has-logo img{width:auto;}
@media (max-width:860px){
.frequency-nav-close{min-width:44px;min-height:44px;}
}
/* Recensioni (homepage, 8 settembre 2026): schede con stelle, citazione e
firma; punteggio in testa e bottone verso la scheda Google. */
.frequency-site .frequency-reviews-score{
display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;
padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);color:#DCE6F5;font-size:14px;
}
.frequency-reviews-score strong{font-family:var(--frequency-font-display);font-size:20px;color:#fff;}
.frequency-stars{display:inline-flex;gap:2px;}
.frequency-stars svg{width:16px;height:16px;fill:#FFC145;}
.frequency-stars svg.is-off{fill:rgba(255,255,255,.18);}
.frequency-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.frequency-review{
margin:0;display:flex;flex-direction:column;gap:14px;padding:26px 26px 22px;
border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.frequency-review blockquote{margin:0;flex:1;}
.frequency-site .frequency-review blockquote p{margin:0;color:#DCE6F5;font-size:16px;line-height:1.6;}
.frequency-review blockquote p::before{content:"\201C";color:var(--frequency-cyan);font-family:var(--frequency-font-display);font-size:26px;line-height:0;margin-right:4px;vertical-align:-8px;}
.frequency-review figcaption{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
.frequency-review-author{font-family:var(--frequency-font-display);font-weight:600;color:#fff;font-size:15px;}
.frequency-review-meta{color:#8FA6C4;font-size:13px;}
@media (max-width:1024px){
.frequency-reviews{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
.frequency-reviews{grid-template-columns:1fr;gap:14px;}
.frequency-review{padding:22px 20px 18px;}
}
.frequency-site .frequency-button--ghost{
background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;box-shadow:none;
}
.frequency-site .frequency-button--ghost:hover{border-color:transparent;background:var(--frequency-gradient);}