/* =========================================================
ATF Theme 2.0 — Design system
Stessa palette del sito attuale, linguaggio visivo 2026.
Un solo foglio di stile: meno richieste, meno peso.
========================================================= */
/* ---------- 1. Token ---------- */
:root {
/* Colori di marca — invariati */
--atf-primary: #7f75fc;
--atf-primary-dark: #6459f5;
--atf-secondary: #f468b1;
--atf-secondary-dark: #e14b9c;
--atf-purple: #4b19f7;
--atf-blue: #1274e7;
--atf-green: #4ed199;
--atf-yellow: #ffc168;
--atf-cyan: #29e0ff;
--atf-gray-1: #f8f9fa;
--atf-gray-2: #e9ecef;
--atf-gray-3: #dee2e6;
--atf-gray-4: #ced4da;
--atf-gray-5: #adb5bd;
--atf-gray-6: #6c757d;
--atf-gray-7: #495057;
--atf-gray-8: #343a40;
--atf-gray-9: #212529;
--atf-ink: #14161a;
--atf-body-bg: var(--atf-gray-1);
--atf-surface: #ffffff;
--atf-text: var(--atf-gray-9);
--atf-text-muted: var(--atf-gray-6);
--atf-border: var(--atf-gray-3);
--atf-gradient: linear-gradient(100deg, var(--atf-secondary) 0%, var(--atf-primary) 55%, var(--atf-purple) 100%);
--atf-gradient-soft: linear-gradient(100deg, #ffe3f2 0%, #ece9ff 60%, #e2f9ff 100%);
--atf-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--atf-lh-base: 1.7;
--atf-space-1: .25rem;
--atf-space-2: .5rem;
--atf-space-3: 1rem;
--atf-space-4: 1.5rem;
--atf-space-5: 2rem;
--atf-space-6: 3rem;
--atf-space-7: 4.5rem;
--atf-space-8: 6.5rem;
--atf-radius-sm: 10px;
--atf-radius: 20px;
--atf-radius-lg: 28px;
--atf-radius-xl: 36px;
--atf-radius-pill: 999px;
--atf-shadow-sm: 0 2px 10px rgba(20, 22, 26, .05);
--atf-shadow: 0 10px 34px rgba(20, 22, 26, .08);
--atf-shadow-lg: 0 26px 70px rgba(20, 22, 26, .14);
--atf-shadow-brand: 0 14px 34px rgba(127, 117, 252, .32);
--atf-container: 1180px;
--atf-container-wide: 1360px;
--atf-header-h: 78px;
--atf-ease: cubic-bezier(.165, .84, .44, 1);
--atf-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
--atf-transition: .25s var(--atf-ease);
}
/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--atf-header-h) + 1rem);
}
body {
margin: 0;
font-family: var(--atf-font);
font-size: 1rem;
line-height: var(--atf-lh-base);
color: var(--atf-text);
background: var(--atf-body-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--atf-primary); text-decoration: none; transition: color var(--atf-transition); }
a:hover { color: var(--atf-secondary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--atf-primary); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(244, 104, 177, .25); }
/* ---------- 3. Tipografia ---------- */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--atf-space-3);
font-weight: 700;
line-height: 1.08;
letter-spacing: -.035em;
color: var(--atf-text);
text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.25rem); }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); letter-spacing: -.025em; }
h4 { font-size: 1.25rem; letter-spacing: -.02em; }
h5, h6 { font-size: 1rem; letter-spacing: -.01em; }
p { margin: 0 0 var(--atf-space-3); }
p:last-child { margin-bottom: 0; }
.atf-lead {
font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
line-height: 1.65;
color: var(--atf-gray-7);
text-wrap: pretty;
}
/* Pillola-etichetta sopra i titoli */
.atf-eyebrow {
display: inline-flex;
align-items: center;
gap: .5em;
padding: .38em 1.05em;
border-radius: var(--atf-radius-pill);
background: rgba(244, 104, 177, .1);
color: var(--atf-secondary-dark);
font-size: .8125rem;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.5;
}
.atf-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.atf-eyebrow--plain { background: none; padding: 0; }
.atf-eyebrow--plain::before { display: none; }
.atf-eyebrow--light { background: rgba(255, 255, 255, .16); color: #fff; }
.atf-grad-text {
background: var(--atf-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.atf-mark {
background-image: linear-gradient(transparent 66%, rgba(255, 193, 104, .85) 66%);
background-repeat: no-repeat;
padding: 0 .08em;
}
.atf-highlight { color: var(--atf-secondary-dark); font-weight: 600; }
/* ---------- 4. Layout ---------- */
.atf-container {
width: 100%;
max-width: var(--atf-container);
margin-inline: auto;
padding-inline: clamp(1rem, .3rem + 2vw, 2rem);
}
.atf-container--wide { max-width: var(--atf-container-wide); }
.atf-container--narrow { max-width: 780px; }
.atf-section { padding-block: clamp(3.25rem, 1.4rem + 6.2vw, 6.5rem); }
.atf-section--tight { padding-block: clamp(2.5rem, 1.3rem + 4vw, 4.5rem); }
.atf-section--white { background: var(--atf-surface); }
.atf-section--dark { background: var(--atf-ink); color: #fff; }
.atf-section--dark h2, .atf-section--dark h3 { color: #fff; }
/* Nota: qui c'era content-visibility: auto. Accorciava il primo rendering,
ma facendo su e giù con la rotella la pagina sobbalzava, perché il browser
ricalcolava l'altezza delle sezioni ogni volta che rientravano in vista.
Stabilità prima di tutto: il tema è già leggerissimo senza. */
.atf-section-head { max-width: 720px; margin: 0 auto var(--atf-space-6); text-align: center; }
.atf-section-head--left { margin-inline: 0; text-align: left; }
.atf-section-head .atf-eyebrow { margin-bottom: var(--atf-space-3); }
.atf-grid { display: grid; gap: clamp(1rem, .6rem + 1.1vw, 1.75rem); }
.atf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .atf-grid--3, .atf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .atf-grid--2, .atf-grid--3, .atf-grid--4 { grid-template-columns: 1fr; } }
.atf-text-center { text-align: center; }
.atf-mt-3 { margin-top: var(--atf-space-3); }
.atf-mt-4 { margin-top: var(--atf-space-4); }
.atf-mt-5 { margin-top: var(--atf-space-5); }
.atf-mt-6 { margin-top: var(--atf-space-6); }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--atf-surface);
padding: var(--atf-space-2) var(--atf-space-3);
border-radius: var(--atf-radius-sm);
}
.skip-link:focus { left: var(--atf-space-3); top: var(--atf-space-3); }
/* ---------- 5. Bottoni ---------- */
.atf-btn {
--btn-bg: var(--atf-gray-9);
--btn-fg: #fff;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
padding: .85em 1.9em;
border: 0;
border-radius: var(--atf-radius-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font-weight: 600;
font-size: .9375rem;
line-height: 1.4;
letter-spacing: -.01em;
text-align: center;
cursor: pointer;
isolation: isolate;
transition: transform .3s var(--atf-ease-spring), box-shadow var(--atf-transition), color var(--atf-transition);
}
.atf-btn:hover { transform: translateY(-3px); color: var(--btn-fg); }
.atf-btn:active { transform: translateY(-1px); }
.atf-btn svg { width: 1.05em; height: 1.05em; transition: transform var(--atf-transition); }
.atf-btn:hover svg { transform: translateX(3px); }
.atf-btn--gradient {
background: var(--atf-gradient);
background-size: 200% 100%;
box-shadow: var(--atf-shadow-brand);
transition: transform .3s var(--atf-ease-spring), box-shadow var(--atf-transition), background-position .55s var(--atf-ease);
}
.atf-btn--gradient:hover { background-position: 100% 0; box-shadow: 0 18px 42px rgba(127, 117, 252, .42); }
.atf-btn--primary { --btn-bg: var(--atf-primary); }
.atf-btn--primary:hover { --btn-bg: var(--atf-primary-dark); }
.atf-btn--dark { --btn-bg: var(--atf-ink); }
.atf-btn--light { --btn-bg: #fff; --btn-fg: var(--atf-ink); box-shadow: var(--atf-shadow-sm); }
.atf-btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--atf-gray-9);
box-shadow: inset 0 0 0 1.5px var(--atf-gray-3);
}
.atf-btn--ghost:hover { --btn-fg: var(--atf-primary); box-shadow: inset 0 0 0 1.5px var(--atf-primary); }
.atf-btn--block { width: 100%; }
.atf-btn--lg { padding: 1.05em 2.4em; font-size: 1rem; }
.atf-btn--sm { padding: .6em 1.3em; font-size: .8125rem; }
/* ---------- 6. Header ---------- */
.atf-progressbar {
position: fixed;
inset: 0 auto auto 0;
z-index: 200;
height: 3px;
width: 100%;
transform: scaleX(var(--atf-scroll, 0));
transform-origin: left center;
background: var(--atf-gradient);
pointer-events: none;
}
.atf-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid transparent;
transition: border-color var(--atf-transition), box-shadow var(--atf-transition);
}
/* Il vetro smerigliato sta su uno strato a parte, non sull'header stesso:
backdrop-filter creerebbe un blocco contenitore e il pannello del menu
(position: fixed) resterebbe intrappolato nell'altezza dell'header. */
.atf-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(255, 255, 255, .82);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
.atf-header.is-stuck { border-bottom-color: var(--atf-gray-2); box-shadow: 0 4px 24px rgba(20, 22, 26, .05); }
.atf-header__main {
display: flex;
align-items: center;
gap: var(--atf-space-4);
min-height: var(--atf-header-h);
transition: min-height var(--atf-transition);
}
.atf-brand { display: flex; align-items: center; flex-shrink: 0; }
.atf-brand img {
width: auto;
height: auto;
max-height: 46px;
max-width: 220px;
transition: max-height var(--atf-transition);
}
.atf-header.is-stuck .atf-brand img { max-height: 38px; }
.atf-brand__text {
font-weight: 700; font-size: 1.2rem; letter-spacing: .05em;
color: var(--atf-ink); text-transform: uppercase; line-height: 1.1;
}
.atf-brand__text small {
display: block; font-size: .48rem; letter-spacing: .28em;
font-weight: 500; color: var(--atf-gray-6);
}
.atf-nav { margin-left: auto; }
.atf-nav ul {
display: flex; align-items: center;
gap: clamp(.35rem, -.4rem + 1.3vw, 1.1rem);
list-style: none; margin: 0; padding: 0;
}
.atf-nav li { position: relative; }
.atf-nav > ul > li > a {
display: block;
padding: .5rem .8rem;
border-radius: var(--atf-radius-pill);
font-size: clamp(.9rem, .84rem + .22vw, 1.0625rem);
font-weight: 500;
color: var(--atf-gray-8);
white-space: nowrap;
transition: background-color var(--atf-transition), color var(--atf-transition);
}
.atf-nav > ul > li > a:hover { background: var(--atf-gray-1); color: var(--atf-ink); }
.atf-nav .current-menu-item > a,
.atf-nav .current_page_item > a,
.atf-nav .current-menu-ancestor > a {
background: rgba(127, 117, 252, .12);
color: var(--atf-primary-dark);
font-weight: 600;
}
.atf-nav .sub-menu {
position: absolute; top: calc(100% + 8px); left: 0;
min-width: 230px;
flex-direction: column; align-items: stretch; gap: 2px;
padding: var(--atf-space-2);
background: var(--atf-surface);
border-radius: var(--atf-radius);
box-shadow: var(--atf-shadow);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: all var(--atf-transition);
}
.atf-nav li:hover > .sub-menu,
.atf-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.atf-nav .sub-menu a { display: block; padding: .55rem .8rem; border-radius: var(--atf-radius-sm); font-size: .9375rem; color: var(--atf-gray-7); }
.atf-nav .sub-menu a:hover { background: var(--atf-gray-1); color: var(--atf-primary); }
.atf-header__actions { display: flex; align-items: center; gap: var(--atf-space-2); }
.atf-cart {
position: relative;
display: inline-grid; place-items: center;
width: 42px; height: 42px;
border-radius: var(--atf-radius-pill);
color: var(--atf-ink);
transition: background-color var(--atf-transition);
}
.atf-cart:hover { background: var(--atf-gray-1); color: var(--atf-ink); }
.atf-cart svg { width: 21px; height: 21px; }
.atf-cart__count {
position: absolute; top: 2px; right: 0;
min-width: 18px; height: 18px;
display: grid; place-items: center;
padding: 0 4px;
border-radius: var(--atf-radius-pill);
background: var(--atf-gradient);
color: #fff; font-size: .625rem; font-weight: 700; line-height: 1;
}
.atf-topbar {
border-top: 1px solid var(--atf-gray-2);
font-size: .875rem;
background: rgba(255, 255, 255, .6);
}
.atf-topbar__inner { display: flex; align-items: center; min-height: 44px; }
.atf-topbar ul {
display: flex; align-items: center; justify-content: space-between;
gap: var(--atf-space-3); width: 100%;
list-style: none; margin: 0; padding: 0;
}
.atf-topbar a { color: var(--atf-gray-6); font-weight: 500; }
.atf-topbar a:hover { color: var(--atf-secondary-dark); }
.atf-burger {
display: none;
width: 44px; height: 44px;
padding: 0; border: 0;
border-radius: var(--atf-radius-pill);
background: var(--atf-gray-1);
cursor: pointer;
}
.atf-burger span {
display: block; width: 20px; height: 2px;
margin: 4px auto;
background: var(--atf-ink);
border-radius: 2px;
transition: transform var(--atf-transition), opacity var(--atf-transition);
}
.atf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.atf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.atf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Velo dietro il pannello del menu */
.atf-backdrop {
position: fixed;
inset: 0;
z-index: 99;
background: rgba(20, 22, 26, .5);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition: opacity var(--atf-transition), visibility var(--atf-transition);
}
.atf-backdrop.is-on { opacity: 1; visibility: visible; }
body.atf-locked { overflow: hidden; }
.atf-subtoggle,
.atf-nav__head { display: none; }
/* =======================================================
MOBILE E TABLET — il menu diventa un pannello laterale
======================================================= */
@media (max-width: 1100px) {
.atf-burger { display: block; order: 3; margin-left: var(--atf-space-2); }
.atf-header__actions { margin-left: auto; order: 2; }
.atf-header__main { min-height: 68px; gap: var(--atf-space-2); }
.atf-brand img { max-height: 40px; }
/* Il pannello */
.atf-nav {
position: fixed;
inset: 0 0 0 auto;
z-index: 101;
width: min(400px, 88vw);
margin: 0;
padding: 0 0 var(--atf-space-6);
background: var(--atf-surface);
box-shadow: -20px 0 60px rgba(20, 22, 26, .18);
overflow-y: auto;
overscroll-behavior: contain;
display: block;
transform: translateX(100%);
visibility: hidden;
transition: transform .38s var(--atf-ease), visibility .38s;
}
.atf-nav.is-open { transform: none; visibility: visible; }
/* Testa del pannello: resta ferma mentre si scorre l'elenco */
.atf-nav__head {
position: sticky;
top: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 68px;
padding: 0 clamp(1rem, 4vw, 1.5rem) 0 clamp(1.25rem, 5vw, 1.75rem);
background: var(--atf-surface);
border-bottom: 1px solid var(--atf-gray-2);
}
.atf-nav__title {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--atf-gray-5);
}
.atf-nav__close {
display: grid;
place-items: center;
width: 40px; height: 40px;
padding: 0; border: 0;
border-radius: var(--atf-radius-pill);
background: var(--atf-gray-1);
color: var(--atf-ink);
cursor: pointer;
}
.atf-nav__close svg { width: 18px; height: 18px; }
.atf-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.atf-nav > ul > li {
position: relative;
border-bottom: 1px solid var(--atf-gray-2);
}
.atf-nav > ul > li > a {
display: flex;
align-items: center;
min-height: 58px;
padding: .9rem clamp(1.25rem, 5vw, 1.75rem);
border-radius: 0;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -.02em;
color: var(--atf-ink);
}
.atf-nav > ul > li > a:hover { background: var(--atf-gray-1); }
.atf-nav .current-menu-item > a,
.atf-nav .current_page_item > a {
background: rgba(127, 117, 252, .09);
box-shadow: inset 3px 0 0 var(--atf-primary);
}
/* Bottone della fisarmonica */
.atf-subtoggle {
position: absolute;
top: 0; right: 0;
z-index: 2;
display: grid;
place-items: center;
width: 58px; height: 58px;
padding: 0;
border: 0;
background: transparent;
color: var(--atf-gray-6);
cursor: pointer;
}
.atf-subtoggle svg { width: 20px; height: 20px; transition: transform var(--atf-transition); }
.atf-nav li.is-expanded > .atf-subtoggle svg { transform: rotate(180deg); }
/* Fisarmonica: l'altezza esatta la misura il JS, così l'apertura
dura sempre lo stesso tempo qualunque sia il numero di voci. */
.atf-nav .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border-radius: 0;
padding: 0;
background: var(--atf-gray-1);
overflow: hidden;
max-height: 0;
transition: max-height .34s var(--atf-ease);
}
.atf-nav li.is-expanded > .sub-menu { max-height: var(--atf-sub-h, 70vh); }
.atf-nav .sub-menu li { border-top: 1px solid var(--atf-gray-2); }
.atf-nav .sub-menu a {
display: flex;
align-items: center;
min-height: 50px;
padding: .7rem clamp(1.25rem, 5vw, 1.75rem) .7rem calc(clamp(1.25rem, 5vw, 1.75rem) + 1rem);
font-size: .9375rem;
color: var(--atf-gray-7);
}
/* La barra secondaria entra nel pannello, non resta a metà pagina */
.atf-topbar { display: none; }
.atf-nav__extra {
margin-top: var(--atf-space-5);
padding: var(--atf-space-4) clamp(1.25rem, 5vw, 1.75rem) var(--atf-space-2);
}
.atf-nav__extra ul { gap: 0; }
.atf-nav__extra li { border: 0; }
.atf-nav__extra a {
display: flex;
align-items: center;
min-height: 46px;
font-size: .9375rem;
font-weight: 500;
color: var(--atf-gray-6);
}
.atf-nav__extra a:hover { color: var(--atf-secondary-dark); }
.atf-nav__extra h4 {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--atf-gray-5);
margin-bottom: var(--atf-space-1);
}
}
@media (min-width: 1101px) {
.atf-nav__extra { display: none; }
}
/* ---------- 7. Hero ---------- */
.atf-hero {
position: relative;
padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem) var(--atf-space-7);
text-align: center;
overflow: hidden;
isolation: isolate;
}
/* ---- Sfondi dell'hero: si scelgono dal Customizer ----
Tutti in CSS puro tranne "immagine": nessuna richiesta in più. */
.atf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atf-bg > span { position: absolute; display: block; }
/* 1. Aurora */
.atf-bg--aurora { inset: -20% -10% auto -10%; height: 130%; filter: blur(72px); opacity: .55; }
.atf-bg--aurora > span { border-radius: 50%; will-change: transform; }
.atf-bg--aurora > span:nth-child(1) {
width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -6%; left: -4%;
background: radial-gradient(circle, var(--atf-secondary) 0%, transparent 68%);
animation: atf-drift-a 22s ease-in-out infinite alternate;
}
.atf-bg--aurora > span:nth-child(2) {
width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; top: -12%; right: -4%;
background: radial-gradient(circle, var(--atf-cyan) 0%, transparent 68%);
animation: atf-drift-b 26s ease-in-out infinite alternate;
}
.atf-bg--aurora > span:nth-child(3) {
width: 44vw; height: 44vw; max-width: 600px; max-height: 600px; top: 8%; left: 34%;
background: radial-gradient(circle, var(--atf-primary) 0%, transparent 68%);
animation: atf-drift-c 30s ease-in-out infinite alternate;
}
@keyframes atf-drift-a { to { transform: translate3d(9%, 7%, 0) scale(1.12); } }
@keyframes atf-drift-b { to { transform: translate3d(-8%, 10%, 0) scale(1.08); } }
@keyframes atf-drift-c { to { transform: translate3d(4%, -8%, 0) scale(.92); } }
/* 2. Aurora solo ai bordi, centro bianco */
.atf-bg--edge { background: #fff; }
.atf-bg--edge > span { border-radius: 50%; filter: blur(64px); opacity: .5; }
.atf-bg--edge > span:nth-child(1) { width: 38%; aspect-ratio: 1; top: -16%; left: -10%;
background: radial-gradient(circle, var(--atf-secondary), transparent 66%); animation: atf-e1 20s ease-in-out infinite alternate; }
.atf-bg--edge > span:nth-child(2) { width: 34%; aspect-ratio: 1; top: -12%; right: -8%;
background: radial-gradient(circle, var(--atf-cyan), transparent 66%); animation: atf-e2 24s ease-in-out infinite alternate; }
.atf-bg--edge > span:nth-child(3) { width: 30%; aspect-ratio: 1; bottom: -18%; left: 38%;
background: radial-gradient(circle, var(--atf-primary), transparent 66%); animation: atf-e3 28s ease-in-out infinite alternate; }
.atf-bg--edge::after { content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 52% 46% at 50% 46%, #fff 34%, transparent 76%); }
@keyframes atf-e1 { to { transform: translate(14%, 10%) scale(1.1); } }
@keyframes atf-e2 { to { transform: translate(-12%, 12%) scale(1.08); } }
@keyframes atf-e3 { to { transform: translate(8%, -14%) scale(.9); } }
/* 3. Griglia tecnica con faro */
.atf-bg--grid { background: #fff; }
.atf-bg__lines { inset: 0;
background-image: linear-gradient(rgba(20,22,26,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(20,22,26,.055) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 30%, transparent 78%);
mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 30%, transparent 78%);
}
.atf-bg__glow { top: -34%; left: 50%; width: 72%; aspect-ratio: 1; transform: translateX(-50%);
background: radial-gradient(circle, rgba(127,117,252,.30), rgba(244,104,177,.16) 42%, transparent 68%);
filter: blur(44px); animation: atf-glow 14s ease-in-out infinite alternate; }
@keyframes atf-glow { to { transform: translateX(-50%) translateY(7%) scale(1.14); } }
/* 4. Mesh organico con grana */
.atf-bg--mesh { background: #fdfdff; }
.atf-bg--mesh > span:not(.atf-bg__grain) { border-radius: 44% 56% 52% 48% / 48% 44% 56% 52%; filter: blur(52px); }
.atf-bg--mesh > span:nth-child(1) { width: 44%; aspect-ratio: 1; top: -14%; left: 6%;
background: rgba(244,104,177,.5); animation: atf-m1 19s ease-in-out infinite alternate; }
.atf-bg--mesh > span:nth-child(2) { width: 40%; aspect-ratio: 1; top: -6%; right: 4%;
background: rgba(41,224,255,.42); animation: atf-m2 23s ease-in-out infinite alternate; }
.atf-bg--mesh > span:nth-child(3) { width: 46%; aspect-ratio: 1; bottom: -26%; left: 30%;
background: rgba(127,117,252,.45); animation: atf-m3 27s ease-in-out infinite alternate; }
.atf-bg__grain { inset: 0; opacity: .5; mix-blend-mode: overlay; filter: none;
background-image: url("data:image/svg+xml;utf8,"); }
.atf-bg--mesh::after { content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 58% 50% at 50% 48%, rgba(255,255,255,.9) 22%, transparent 72%); }
@keyframes atf-m1 { to { transform: translate(12%, 8%) rotate(38deg) scale(1.1); } }
@keyframes atf-m2 { to { transform: translate(-10%, 12%) rotate(-30deg) scale(1.06); } }
@keyframes atf-m3 { to { transform: translate(6%, -12%) rotate(24deg) scale(.92); } }
/* 5. Immagine */
.atf-bg--image { background: #fdfdff; }
.atf-bg__img { width: 100%; height: 100%; object-fit: cover; }
.atf-bg--image.is-zoom .atf-bg__img {
transform: scale(1.05);
animation: atf-kenburns 28s ease-in-out infinite alternate;
}
@keyframes atf-kenburns { to { transform: scale(1.18) translate(-1.5%, -2%); } }
.atf-bg__veil { position: absolute; inset: 0; }
.atf-bg__veil--gradient {
background: linear-gradient(120deg, rgba(244,104,177,.74), rgba(127,117,252,.64) 52%, rgba(75,25,247,.74));
mix-blend-mode: multiply;
}
.atf-bg__veil--dark { background: linear-gradient(180deg, rgba(20,22,26,.55), rgba(20,22,26,.72)); }
.atf-bg__veil--light { background: rgba(255,255,255,.78); }
/* Velo centrale: schiarisce solo la zona del titolo e lascia vivi i lati.
È il trattamento giusto per gli sfondi con il soggetto sui bordi. */
.atf-bg__veil--scrim {
background: radial-gradient(ellipse 52% 62% at 50% 46%,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.72) 42%,
rgba(255,255,255,.28) 66%,
transparent 82%);
}
.atf-bg__fade { position: absolute; inset: 0; background: linear-gradient(transparent 58%, var(--atf-body-bg) 98%); }
/* Testo bianco quando l'immagine ha un velo scuro o colorato */
.atf-hero--onimage h1,
.atf-hero--onimage .atf-lead { color: #fff; }
.atf-hero--onimage .atf-eyebrow { background: rgba(255,255,255,.18); color: #fff; }
.atf-hero--onimage .atf-highlight { color: #fff; }
.atf-hero--onimage .atf-btn--ghost { --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.atf-hero--onimage .atf-btn--ghost:hover { --btn-fg: var(--atf-ink); background: #fff; box-shadow: none; }
.atf-hero--onimage .atf-trust { background: rgba(255,255,255,.92); }
.atf-hero h1 { margin-block: var(--atf-space-4); }
.atf-hero .atf-lead { max-width: 640px; margin-inline: auto; }
/* Riga di accreditamento sotto il titolo: piccola, spaziata, in maiuscolo */
.atf-hero__sub {
margin: calc(var(--atf-space-3) * -1) auto var(--atf-space-4);
font-size: clamp(.8rem, .72rem + .28vw, 1.0625rem);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.5;
color: var(--atf-gray-7);
max-width: 640px;
text-wrap: balance;
}
.atf-hero--onimage .atf-hero__sub { color: rgba(255, 255, 255, .9); }
.atf-hero__actions {
display: flex; flex-wrap: wrap; justify-content: center;
gap: var(--atf-space-3);
margin-top: var(--atf-space-5);
}
/* Striscia di fiducia */
.atf-trust {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: clamp(1rem, .2rem + 2.4vw, 2.75rem);
margin-top: var(--atf-space-6);
padding: var(--atf-space-4) clamp(1rem, .4rem + 2vw, 2.25rem);
border-radius: var(--atf-radius-lg);
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--atf-shadow-sm);
}
.atf-trust__item { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.atf-trust__value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
.atf-trust__label { font-size: .75rem; color: var(--atf-gray-6); letter-spacing: .05em; text-transform: uppercase; }
.atf-trust__stars { color: var(--atf-yellow); font-size: .95rem; letter-spacing: .12em; }
.atf-trust__sep { width: 1px; align-self: stretch; background: var(--atf-gray-2); }
@media (max-width: 640px) { .atf-trust__sep { display: none; } }
/* ---------- 8. Marquee dei partner ---------- */
.atf-marquee {
position: relative;
overflow: hidden;
padding-block: var(--atf-space-5);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.atf-marquee__track {
display: flex; width: max-content;
gap: clamp(2rem, 1rem + 3vw, 4.5rem);
animation: atf-marquee 36s linear infinite;
}
.atf-marquee:hover .atf-marquee__track { animation-play-state: paused; }
.atf-marquee__item { display: grid; place-items: center; height: 62px; flex-shrink: 0; }
.atf-marquee__item img {
max-height: 62px; width: auto;
/* Questi sono i riconoscimenti ufficiali: devono leggersi.
Un filo di desaturazione basta a non farli urlare. */
filter: grayscale(.2); opacity: .92;
transition: filter var(--atf-transition), opacity var(--atf-transition);
}
.atf-marquee__item:hover img { filter: none; opacity: 1; }
.atf-marquee__item--text {
padding-inline: 1.5rem;
border: 1.5px dashed var(--atf-gray-3);
border-radius: var(--atf-radius-sm);
color: var(--atf-gray-5);
font-size: .8125rem; font-weight: 600;
}
@keyframes atf-marquee { to { transform: translateX(-50%); } }
/* ---------- 9. Card ---------- */
.atf-card {
position: relative;
display: flex; flex-direction: column;
background: var(--atf-surface);
border-radius: var(--atf-radius-lg);
overflow: hidden;
box-shadow: var(--atf-shadow-sm);
transition: transform .4s var(--atf-ease), box-shadow .4s var(--atf-ease);
}
.atf-card:hover { transform: translateY(-6px); box-shadow: var(--atf-shadow-lg); }
.atf-card__media {
position: relative; display: block;
aspect-ratio: 4 / 3;
background: var(--atf-gray-2);
overflow: hidden;
}
.atf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--atf-ease); }
.atf-card:hover .atf-card__media img { transform: scale(1.07); }
.atf-card__media::after {
content: "";
position: absolute; inset: 40% 0 0 0;
background: linear-gradient(transparent, rgba(20, 22, 26, .5));
opacity: 0; transition: opacity var(--atf-transition);
}
.atf-card:hover .atf-card__media::after { opacity: 1; }
/* Nessuna immagine: al posto del vuoto grigio, l'iniziale su fondo brand */
.atf-card__ph {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: var(--atf-gradient);
color: rgba(255, 255, 255, .92);
font-size: 3.5rem;
font-weight: 700;
letter-spacing: -.04em;
line-height: 1;
}
.atf-card__badge {
position: absolute; top: var(--atf-space-3); left: var(--atf-space-3); z-index: 2;
padding: .3em .85em;
border-radius: var(--atf-radius-pill);
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(8px);
color: var(--atf-ink);
font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
}
.atf-card__badge--done { background: var(--atf-green); color: #fff; }
.atf-card__badge--enrolled { background: var(--atf-gradient); color: #fff; }
.atf-card__body {
display: flex; flex-direction: column; flex: 1;
gap: var(--atf-space-3);
padding: clamp(1.1rem, .8rem + .9vw, 1.6rem);
}
.atf-card__title { font-size: 1.2rem; margin: 0; letter-spacing: -.025em; line-height: 1.25; }
.atf-card__title a { color: var(--atf-ink); }
.atf-card__title a:hover { color: var(--atf-primary); }
.atf-card__meta { font-size: .75rem; color: var(--atf-gray-6); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.atf-card__excerpt { color: var(--atf-gray-7); font-size: .9375rem; line-height: 1.6; }
.atf-card__footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--atf-space-3); }
.atf-card__price { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; color: var(--atf-ink); margin: 0; }
.atf-card__price del { color: var(--atf-gray-5); font-weight: 500; font-size: .875rem; margin-right: .4em; }
.atf-card__price ins { text-decoration: none; }
.atf-card__price--free { color: var(--atf-green); }
.atf-progress { display: flex; align-items: center; gap: var(--atf-space-2); font-size: .75rem; font-weight: 700; color: var(--atf-gray-6); }
.atf-progress__bar {
position: relative; flex: 1; height: 6px;
border-radius: var(--atf-radius-pill);
background: var(--atf-gray-2);
overflow: hidden;
}
.atf-progress__bar::after {
content: "";
position: absolute; inset: 0 auto 0 0;
width: var(--atf-progress, 0%);
border-radius: var(--atf-radius-pill);
background: var(--atf-gradient);
transition: width 1.1s var(--atf-ease);
}
.atf-progress__label { flex-shrink: 0; min-width: 34px; text-align: right; }
/* ---------- 10. Bento dei punti di forza ---------- */
.atf-bento {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, .6rem + 1vw, 1.5rem);
}
@media (max-width: 900px) { .atf-bento { grid-template-columns: 1fr; } }
.atf-tile {
position: relative;
display: flex; flex-direction: column;
gap: var(--atf-space-3);
padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
border-radius: var(--atf-radius-lg);
background: var(--atf-surface);
box-shadow: var(--atf-shadow-sm);
overflow: hidden;
transition: transform .4s var(--atf-ease), box-shadow .4s var(--atf-ease);
}
.atf-tile:hover { transform: translateY(-5px); box-shadow: var(--atf-shadow); }
.atf-tile--wide { grid-column: span 2; }
@media (max-width: 900px) { .atf-tile--wide { grid-column: span 1; } }
.atf-tile--brand { background: var(--atf-gradient); color: #fff; box-shadow: var(--atf-shadow-brand); }
.atf-tile--brand h3, .atf-tile--brand p { color: #fff; }
.atf-tile--brand .atf-tile__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.atf-tile__icon {
width: 54px; height: 54px;
display: grid; place-items: center;
border-radius: 16px;
background: rgba(127, 117, 252, .12);
color: var(--atf-primary);
transition: transform .4s var(--atf-ease-spring);
}
.atf-tile:hover .atf-tile__icon { transform: translateY(-4px) rotate(-6deg); }
.atf-tile__icon svg { width: 26px; height: 26px; }
.atf-tile__kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--atf-secondary-dark); }
.atf-tile--brand .atf-tile__kicker { color: rgba(255, 255, 255, .82); }
.atf-tile h3 { margin: 0; }
.atf-tile p { color: var(--atf-gray-6); font-size: .9375rem; margin: 0; }
.atf-tile--brand p { color: rgba(255, 255, 255, .88); }
/* ---------- 11. Numeri su fondo scuro ---------- */
.atf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--atf-space-5); text-align: center; }
@media (max-width: 640px) { .atf-stats { grid-template-columns: 1fr; gap: var(--atf-space-4); } }
.atf-stat__value {
font-size: clamp(3rem, 1.6rem + 4.4vw, 5rem);
font-weight: 700; line-height: 1; letter-spacing: -.045em;
background: linear-gradient(120deg, #fff 0%, var(--atf-secondary) 45%, var(--atf-primary) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.atf-stat__label { margin-top: var(--atf-space-2); color: rgba(255, 255, 255, .62); font-weight: 500; letter-spacing: .02em; }
/* ---------- 12. Banner CTA ---------- */
.atf-cta {
position: relative;
padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, .8rem + 3vw, 4rem);
border-radius: var(--atf-radius-xl);
background: var(--atf-gradient);
color: #fff; text-align: center;
overflow: hidden; isolation: isolate;
}
.atf-cta::before {
content: "";
position: absolute; inset: -50% -20% auto auto;
width: 60%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 62%);
z-index: -1;
}
.atf-cta h2, .atf-cta p { color: #fff; }
.atf-cta p { max-width: 620px; margin-inline: auto; opacity: .9; }
.atf-cta .atf-eyebrow { margin-bottom: var(--atf-space-3); }
/* ---------- 13. Contenuto editoriale ---------- */
.atf-page-header {
position: relative;
padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem) var(--atf-space-5);
overflow: hidden;
isolation: isolate;
}
.atf-page-header::before {
content: "";
position: absolute; inset: -60% 30% auto -10%;
height: 240%;
background: var(--atf-gradient-soft);
filter: blur(70px); opacity: .55; z-index: -1;
}
.atf-page-header .atf-eyebrow { margin-bottom: var(--atf-space-3); }
.atf-page-header h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); }
.atf-entry {
background: var(--atf-surface);
border-radius: var(--atf-radius-lg);
padding: clamp(1.5rem, 1rem + 2.2vw, 3.5rem);
box-shadow: var(--atf-shadow-sm);
font-size: 1.0625rem;
line-height: 1.75;
}
.atf-entry > *:first-child { margin-top: 0; }
.atf-entry > *:last-child { margin-bottom: 0; }
.atf-entry h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); margin-top: var(--atf-space-6); }
.atf-entry h3 { margin-top: var(--atf-space-5); }
.atf-entry ul, .atf-entry ol { padding-left: 1.3em; margin-bottom: var(--atf-space-4); }
.atf-entry li { margin-bottom: .45em; }
.atf-entry li::marker { color: var(--atf-primary); font-weight: 700; }
.atf-entry img { border-radius: var(--atf-radius); margin-block: var(--atf-space-5); }
.atf-entry blockquote {
margin: var(--atf-space-5) 0;
padding: var(--atf-space-4) var(--atf-space-5);
border: 0; border-left: 4px solid var(--atf-secondary);
background: var(--atf-gray-1);
border-radius: 0 var(--atf-radius) var(--atf-radius) 0;
color: var(--atf-gray-7); font-size: 1.05rem;
}
.atf-entry blockquote p:last-child { margin-bottom: 0; }
.atf-entry table { width: 100%; border-collapse: collapse; margin-bottom: var(--atf-space-4); font-size: .9375rem; }
.atf-entry th, .atf-entry td { padding: .7rem .9rem; border-bottom: 1px solid var(--atf-border); text-align: left; }
.atf-entry th { background: var(--atf-gray-1); font-weight: 600; }
.atf-entry code { background: var(--atf-gray-2); padding: .15em .45em; border-radius: 6px; font-size: .9em; }
.atf-entry a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
.atf-meta { color: var(--atf-gray-6); font-size: .875rem; }
.atf-meta a { color: var(--atf-gray-7); }
.atf-layout { display: grid; gap: var(--atf-space-6); align-items: start; }
.atf-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 991px) { .atf-layout--sidebar { grid-template-columns: 1fr; } }
.atf-sidebar .widget {
background: var(--atf-surface);
border-radius: var(--atf-radius);
padding: var(--atf-space-4);
box-shadow: var(--atf-shadow-sm);
margin-bottom: var(--atf-space-4);
}
.atf-sidebar .widget-title { font-size: 1.0625rem; margin-bottom: var(--atf-space-3); }
.atf-sidebar ul { list-style: none; margin: 0; padding: 0; }
.atf-sidebar li { padding: .4rem 0; border-bottom: 1px solid var(--atf-gray-2); }
.atf-sidebar li:last-child { border-bottom: 0; }
/* ---------- 14. Form ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
width: 100%;
padding: .75rem 1.1rem;
border: 1.5px solid var(--atf-gray-2);
border-radius: var(--atf-radius-pill);
background: var(--atf-surface);
transition: border-color var(--atf-transition), box-shadow var(--atf-transition);
}
textarea { border-radius: var(--atf-radius); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--atf-primary);
box-shadow: 0 0 0 4px rgba(127, 117, 252, .15);
}
label { display: inline-block; margin-bottom: .35rem; font-weight: 500; font-size: .9375rem; }
.atf-searchform { display: flex; gap: var(--atf-space-2); }
.atf-searchform .atf-btn { flex-shrink: 0; }
/* ---------- 15. Paginazione ---------- */
.atf-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--atf-space-2); margin-top: var(--atf-space-6); }
.atf-pagination .page-numbers {
display: grid; place-items: center;
min-width: 44px; height: 44px;
padding: 0 .7rem;
border-radius: var(--atf-radius-pill);
background: var(--atf-surface);
color: var(--atf-gray-7);
box-shadow: var(--atf-shadow-sm);
font-weight: 600;
transition: transform var(--atf-transition), color var(--atf-transition);
}
.atf-pagination .page-numbers:hover { transform: translateY(-2px); color: var(--atf-primary); }
.atf-pagination .page-numbers.current { background: var(--atf-gradient); color: #fff; box-shadow: var(--atf-shadow-brand); }
/* ---------- 16. Footer ---------- */
.atf-footer {
margin-top: var(--atf-space-8);
background: var(--atf-surface);
color: var(--atf-gray-7);
border-top: 1px solid var(--atf-gray-2);
}
.atf-footer a { color: var(--atf-gray-7); }
.atf-footer a:hover { color: var(--atf-secondary-dark); }
.atf-footer__top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: var(--atf-space-6);
padding-block: var(--atf-space-7);
}
@media (max-width: 900px) { .atf-footer__top { grid-template-columns: 1fr; gap: var(--atf-space-5); } }
.atf-footer h4 {
color: var(--atf-ink);
font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
margin-bottom: var(--atf-space-4);
}
.atf-footer ul { list-style: none; margin: 0; padding: 0; }
.atf-footer li { margin-bottom: .6rem; }
.atf-footer__brand img {
width: auto;
height: auto;
max-height: 62px;
max-width: 260px;
margin-bottom: var(--atf-space-4);
}
.atf-footer__legal { font-size: .875rem; line-height: 1.9; color: var(--atf-gray-6); }
.atf-footer__legal strong { color: var(--atf-ink); display: block; margin-bottom: .3rem; font-weight: 600; }
.atf-footer__bottom {
border-top: 1px solid var(--atf-gray-2);
padding-block: var(--atf-space-4);
display: flex; flex-wrap: wrap; gap: var(--atf-space-3);
justify-content: space-between; align-items: center;
font-size: .8125rem; color: var(--atf-gray-6);
}
/* ---------- 17. WooCommerce ---------- */
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, .6rem + 1.1vw, 1.75rem);
margin: 0; padding: 0; list-style: none;
}
@media (max-width: 991px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .woocommerce ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
position: relative;
background: var(--atf-surface);
border-radius: var(--atf-radius-lg);
overflow: hidden;
box-shadow: var(--atf-shadow-sm);
padding: 0 0 var(--atf-space-4);
margin: 0; text-align: left;
width: auto !important; float: none !important;
transition: transform .4s var(--atf-ease), box-shadow .4s var(--atf-ease);
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--atf-shadow-lg); }
.woocommerce ul.products li.product a { display: block; }
.woocommerce ul.products li.product img {
width: 100%; height: auto;
aspect-ratio: 4 / 3; object-fit: cover;
margin: 0 0 var(--atf-space-3);
border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
padding: 0 var(--atf-space-4);
font-size: 1.15rem; font-weight: 700;
letter-spacing: -.025em; line-height: 1.25;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button { margin-inline: var(--atf-space-4); }
.woocommerce ul.products li.product .price { display: block; color: var(--atf-ink); font-weight: 700; font-size: 1.15rem; }
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
position: absolute;
top: var(--atf-space-3); left: var(--atf-space-3); right: auto;
min-height: 0; min-width: 0; margin: 0;
padding: .3em .85em;
border-radius: var(--atf-radius-pill);
background: var(--atf-green);
color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.6;
z-index: 2;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
display: inline-flex; align-items: center; justify-content: center;
padding: .75em 1.7em;
border: 0;
border-radius: var(--atf-radius-pill);
background: var(--atf-gradient);
background-size: 200% 100%;
color: #fff; font-weight: 600; font-size: .9375rem;
transition: transform .3s var(--atf-ease-spring), background-position .55s var(--atf-ease);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { color: #fff; transform: translateY(-3px); background-position: 100% 0; }
.woocommerce div.product .product_title { margin-bottom: var(--atf-space-3); }
.woocommerce div.product p.price { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; color: var(--atf-ink); }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
border-top-color: var(--atf-primary);
background: var(--atf-surface);
border-radius: var(--atf-radius);
box-shadow: var(--atf-shadow-sm);
}
/* ---------- 18. LearnDash ---------- */
.learndash-wrapper { font-family: var(--atf-font) !important; }
.learndash-wrapper .ld-button,
.learndash-wrapper .ld-primary-background { background-color: var(--atf-primary) !important; }
.learndash-wrapper .ld-primary-color { color: var(--atf-primary) !important; }
/* ---------- 19. Movimento ---------- */
.atf-js .atf-reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .55s var(--atf-ease), transform .55s var(--atf-ease);
transition-delay: var(--atf-delay, 0ms);
}
.atf-js .atf-reveal.is-in { opacity: 1; transform: none; }
.atf-js .atf-reveal--zoom { transform: scale(.95); }
.atf-js .atf-reveal--zoom.is-in { transform: none; }
.atf-js .atf-stagger > * {
opacity: 0;
transform: translateY(26px);
transition: opacity .55s var(--atf-ease), transform .55s var(--atf-ease);
}
.atf-js .atf-stagger.is-in > * { opacity: 1; transform: none; }
.atf-js .atf-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.atf-js .atf-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
.atf-js .atf-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; }
.atf-js .atf-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
.atf-js .atf-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; }
.atf-js .atf-stagger.is-in > *:nth-child(n+6) { transition-delay: 400ms; }
.atf-slide-text { display: inline; }
.atf-slide-word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: .1em;
margin-bottom: -.1em;
}
.atf-slide-word > span {
display: inline-block;
transform: translateY(110%);
transition: transform .8s var(--atf-ease);
transition-delay: var(--atf-delay, 0ms);
}
.atf-slide-text.is-in .atf-slide-word > span { transform: none; }
/* ---------- 20. Preferenze di sistema ---------- */
@media (prefers-reduced-motion: reduce) {
.atf-js .atf-reveal,
.atf-js .atf-stagger > *,
.atf-slide-word > span {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.atf-bg > span,
.atf-bg__img,
.atf-marquee__track { animation: none !important; }
.atf-card:hover .atf-card__media img { transform: none; }
html { scroll-behavior: auto; }
}
@media print {
.atf-header, .atf-footer, .atf-topbar, .atf-progressbar, .atf-marquee { display: none !important; }
body { background: #fff; }
.atf-entry { box-shadow: none; padding: 0; }
}
/* ---------- 21. Recensioni ---------- */
.atf-reviews-wrap { background: var(--atf-surface); }
.atf-reviews__stars { color: var(--atf-yellow); letter-spacing: .08em; }
.atf-reviews {
position: relative;
margin-inline: calc(clamp(1rem, .3rem + 2vw, 2rem) * -1);
}
.atf-reviews__track {
display: flex;
gap: clamp(1rem, .6rem + 1vw, 1.5rem);
margin: 0;
padding: .5rem clamp(1rem, .3rem + 2vw, 2rem) 1.5rem;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.atf-reviews__track::-webkit-scrollbar { display: none; }
.atf-review {
scroll-snap-align: center;
flex: 0 0 clamp(260px, 78vw, 380px);
display: flex;
flex-direction: column;
gap: var(--atf-space-3);
padding: clamp(1.25rem, 1rem + .9vw, 1.75rem);
background: var(--atf-surface);
border-radius: var(--atf-radius-lg);
box-shadow: var(--atf-shadow-sm);
transition: transform .4s var(--atf-ease), box-shadow .4s var(--atf-ease);
}
.atf-review:hover { transform: translateY(-4px); box-shadow: var(--atf-shadow); }
.atf-review__head { display: flex; align-items: center; gap: var(--atf-space-3); }
.atf-review__avatar {
flex: none;
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--atf-gradient);
color: #fff;
font-weight: 700;
font-size: 1.1rem;
line-height: 1;
}
.atf-review__name { display: block; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.atf-review__stars { display: block; color: var(--atf-yellow); font-size: .875rem; letter-spacing: .1em; }
.atf-review__g { width: 20px; height: 20px; margin-left: auto; flex: none; }
.atf-review__text {
margin: 0;
color: var(--atf-gray-7);
font-size: .9375rem;
line-height: 1.65;
}
/* Frecce */
.atf-reviews__nav {
position: absolute;
top: 50%;
z-index: 3;
transform: translateY(-50%);
display: grid; place-items: center;
width: 44px; height: 44px;
border: 0;
border-radius: var(--atf-radius-pill);
background: var(--atf-surface);
color: var(--atf-ink);
box-shadow: var(--atf-shadow);
cursor: pointer;
transition: transform var(--atf-transition), opacity var(--atf-transition);
}
.atf-reviews__nav:hover { transform: translateY(-50%) scale(1.08); }
.atf-reviews__nav svg { width: 20px; height: 20px; }
.atf-reviews__nav--prev { left: .25rem; }
.atf-reviews__nav--next { right: .25rem; }
.atf-reviews__nav[disabled] { opacity: .3; cursor: default; }
@media (max-width: 640px) { .atf-reviews__nav { display: none; } }
/* ---------- 22. LearnDash: banner di fine corso e contatore studenti ---------- */
/* L'avviso verde con il certificato lo emette LearnDash: qui lo rivestiamo. */
.learndash-wrapper .ld-alert,
.learndash-wrapper .ld-alert-success {
border-radius: var(--atf-radius) !important;
border: 1.5px solid var(--atf-green) !important;
background: rgba(78, 209, 153, .08) !important;
box-shadow: var(--atf-shadow-sm);
padding: clamp(1rem, .8rem + .8vw, 1.5rem) !important;
font-size: .9375rem;
}
.learndash-wrapper .ld-alert-success .ld-alert-icon { background: var(--atf-green) !important; color: #fff !important; }
.learndash-wrapper .ld-alert a.ld-button,
.learndash-wrapper .ld-alert-certificate .ld-button {
background: var(--atf-green) !important;
border-radius: var(--atf-radius-pill) !important;
font-weight: 600;
box-shadow: 0 10px 24px rgba(78, 209, 153, .32);
}
.learndash-wrapper .ld-alert a:not(.ld-button) {
color: var(--atf-primary-dark) !important;
font-weight: 700;
text-decoration: underline;
text-underline-offset: .18em;
}
/* Contatore studenti (plugin ATF Live Sales Widget) */
.atf-students,
.atf_live_sales {
display: inline-flex;
align-items: center;
gap: .6em;
padding: .6em 1.2em;
border-radius: var(--atf-radius-pill);
background: rgba(127, 117, 252, .1);
color: var(--atf-gray-7);
font-size: .9375rem;
font-weight: 500;
line-height: 1.4;
}
.atf-students strong,
.atf_live_sales strong {
font-size: 1.35em;
font-weight: 700;
letter-spacing: -.03em;
background: var(--atf-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.atf-students::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--atf-green);
box-shadow: 0 0 0 0 rgba(78, 209, 153, .7);
animation: atf-pulse 2.4s ease-out infinite;
}
@keyframes atf-pulse {
70% { box-shadow: 0 0 0 10px rgba(78, 209, 153, 0); }
100% { box-shadow: 0 0 0 0 rgba(78, 209, 153, 0); }
}
@media (prefers-reduced-motion: reduce) { .atf-students::before { animation: none; } }
/* =======================================================
23. RIFINITURA MOBILE
Il telefono è il primo schermo, non un ripiego: qui le
proporzioni vengono ricalibrate perché tutto resti
leggibile e toccabile senza cambiare il linguaggio grafico.
======================================================= */
/* La barra di amministrazione di WordPress non deve coprire l'header */
body.admin-bar .atf-header { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .atf-header { top: 46px; }
body.admin-bar .atf-nav { padding-top: 46px; }
}
@media (max-width: 782px) {
h1, h2, h3 { overflow-wrap: break-word; }
h1 { font-size: clamp(2.35rem, 1.1rem + 5.6vw, 3.4rem); }
.atf-section-head { margin-bottom: var(--atf-space-5); }
/* Hero */
.atf-hero { padding-block: var(--atf-space-6) var(--atf-space-5); }
.atf-hero h1 { margin-block: var(--atf-space-3); }
.atf-hero__sub { letter-spacing: .09em; }
.atf-hero__actions { margin-top: var(--atf-space-4); gap: var(--atf-space-2); }
/* Striscia di fiducia: una scheda sola divisa da filetti.
Sopra il giudizio su una riga, sotto i due numeri affiancati. */
.atf-trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: var(--atf-space-5);
padding: 0;
overflow: hidden;
background: rgba(255, 255, 255, .9);
}
.atf-trust__sep { display: none; }
.atf-trust__item { padding: .95rem .6rem; }
.atf-trust__item:first-child {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: center;
gap: .5rem;
padding-block: .7rem;
background: rgba(127, 117, 252, .07);
border-bottom: 1px solid var(--atf-gray-2);
}
.atf-trust__item:last-child { border-left: 1px solid var(--atf-gray-2); }
.atf-trust__value {
font-size: 1.65rem;
background: var(--atf-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.atf-trust__label { font-size: .625rem; letter-spacing: .07em; }
.atf-trust__item:first-child .atf-trust__value {
font-size: 1.2rem;
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: var(--atf-ink);
}
.atf-trust__item:first-child .atf-trust__stars { font-size: .8125rem; letter-spacing: .1em; }
.atf-trust__item:first-child .atf-trust__label { font-size: .625rem; color: var(--atf-gray-6); }
/* Numeri su fondo scuro: un elenco ordinato, non tre blocchi impilati */
.atf-stats {
grid-template-columns: 1fr;
gap: 0;
text-align: left;
border-radius: var(--atf-radius-lg);
background: rgba(255, 255, 255, .045);
overflow: hidden;
}
.atf-stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--atf-space-3);
padding: 1.1rem 1.35rem;
}
.atf-stat + .atf-stat { border-top: 1px solid rgba(255, 255, 255, .09); }
.atf-stat__value { font-size: 2.25rem; }
.atf-stat__label {
margin-top: 0;
text-align: right;
font-size: .8125rem;
letter-spacing: .05em;
text-transform: uppercase;
color: rgba(255, 255, 255, .5);
}
/* Loghi partner più contenuti */
.atf-marquee { padding-block: var(--atf-space-4); }
.atf-marquee__item { height: 44px; }
.atf-marquee__item img { max-height: 44px; }
/* Card e riquadri */
.atf-card__title { font-size: 1.1rem; }
.atf-tile { padding: var(--atf-space-4); }
.atf-cta { padding: var(--atf-space-6) var(--atf-space-4); }
/* Numeri */
.atf-stats { gap: var(--atf-space-5); }
/* Contenuto editoriale */
.atf-entry { padding: var(--atf-space-4) var(--atf-space-3); border-radius: var(--atf-radius); }
.atf-entry blockquote { padding: var(--atf-space-3) var(--atf-space-4); }
.atf-entry table { display: block; width: 100%; overflow-x: auto; }
/* Footer */
.atf-footer__bottom { justify-content: center; text-align: center; }
.atf-footer__brand img { margin-inline: auto; }
/* Recensioni: la scheda occupa quasi tutto lo schermo, si scorre col dito */
.atf-review { flex: 0 0 min(86vw, 340px); }
}
/* Telefoni stretti */
@media (max-width: 480px) {
.atf-hero__actions { flex-direction: column; align-items: stretch; }
.atf-hero__actions .atf-btn { width: 100%; }
.atf-btn--lg { padding: .95em 1.6em; font-size: .9375rem; }
.atf-eyebrow { font-size: .75rem; }
.atf-trust__item:first-child { grid-column: 1 / -1; }
.atf-brand img { max-height: 34px; }
.atf-header__main { gap: var(--atf-space-1); }
.atf-cart { width: 40px; height: 40px; }
.atf-burger { width: 40px; height: 40px; }
.atf-pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 .5rem; }
}
/* =======================================================
24. MENU DESKTOP
Una sola pillola che scivola sotto la voce puntata, tendine
a scheda con freccetta, e barra superiore raccolta a sinistra
con l'accesso in evidenza a destra.
======================================================= */
/* Base: fuori dal desktop la pillola non deve nemmeno esistere visivamente */
.atf-nav__pill {
position: absolute;
top: 0; left: 0;
width: 0; height: 0;
opacity: 0;
pointer-events: none;
}
@media (min-width: 1101px) {
.atf-nav { position: relative; }
/* La pillola: un solo elemento che si sposta, non uno sfondo per voce */
.atf-nav__pill {
position: absolute;
top: 0; left: 0;
z-index: 0;
border-radius: var(--atf-radius-pill);
background: var(--atf-gray-1);
opacity: 0;
pointer-events: none;
transition: transform .42s var(--atf-ease), width .42s var(--atf-ease),
height .42s var(--atf-ease), opacity .25s var(--atf-ease),
background-color var(--atf-transition);
}
.atf-nav.has-pill .atf-nav__pill { opacity: 1; }
.atf-nav.is-current .atf-nav__pill { background: rgba(127, 117, 252, .12); }
.atf-nav__list { position: relative; z-index: 1; }
/* Con la pillola i singoli sfondi non servono più */
.atf-nav > ul > li > a,
.atf-nav > ul > li > a:hover,
.atf-nav .current-menu-item > a,
.atf-nav .current_page_item > a,
.atf-nav .current-menu-ancestor > a { background: none; }
.atf-nav > ul > li > a:hover { color: var(--atf-ink); }
/* Freccetta sulle voci che hanno una tendina */
.atf-nav > ul > li.menu-item-has-children > a::after {
content: "";
display: inline-block;
width: .34em; height: .34em;
margin-left: .5em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-radius: 1px;
transform: translateY(-.16em) rotate(45deg);
opacity: .45;
transition: transform var(--atf-transition), opacity var(--atf-transition);
}
.atf-nav > ul > li.menu-item-has-children:hover > a::after,
.atf-nav > ul > li.menu-item-has-children:focus-within > a::after {
transform: translateY(.06em) rotate(225deg);
opacity: 1;
}
/* Ponte invisibile: il mouse può scendere senza che la tendina sparisca */
.atf-nav > ul > li.menu-item-has-children::after {
content: "";
position: absolute;
top: 100%; left: 0; right: 0;
height: 16px;
}
/* La tendina */
.atf-nav .sub-menu {
top: calc(100% + 14px);
min-width: 252px;
padding: .45rem;
background: var(--atf-surface);
border: 1px solid var(--atf-gray-2);
border-radius: 18px;
box-shadow: 0 26px 60px rgba(20, 22, 26, .13);
transform: translateY(10px);
transition: opacity .26s var(--atf-ease), transform .26s var(--atf-ease), visibility .26s;
}
.atf-nav > ul > li:last-child > .sub-menu { left: auto; right: 0; }
.atf-nav .sub-menu::before {
content: "";
position: absolute;
top: -6px; left: 28px;
width: 11px; height: 11px;
background: var(--atf-surface);
border-left: 1px solid var(--atf-gray-2);
border-top: 1px solid var(--atf-gray-2);
border-radius: 3px 0 0 0;
transform: rotate(45deg);
}
.atf-nav > ul > li:last-child > .sub-menu::before { left: auto; right: 28px; }
.atf-nav .sub-menu a {
position: relative;
padding: .58rem 1rem .58rem 1.55rem;
border-radius: 11px;
font-weight: 500;
white-space: nowrap;
}
.atf-nav .sub-menu a::before {
content: "";
position: absolute;
left: .72rem; top: 50%;
margin-top: -3px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--atf-gradient);
opacity: 0;
transform: scale(.4);
transition: opacity var(--atf-transition), transform var(--atf-transition);
}
.atf-nav .sub-menu a:hover::before { opacity: 1; transform: none; }
/* Le voci entrano una dopo l'altra */
.atf-nav .sub-menu li {
opacity: 0;
transform: translateY(-5px);
transition: opacity .24s var(--atf-ease), transform .24s var(--atf-ease);
}
.atf-nav li:hover > .sub-menu li,
.atf-nav li:focus-within > .sub-menu li { opacity: 1; transform: none; }
.atf-nav .sub-menu li:nth-child(2) { transition-delay: .035s; }
.atf-nav .sub-menu li:nth-child(3) { transition-delay: .07s; }
.atf-nav .sub-menu li:nth-child(4) { transition-delay: .105s; }
.atf-nav .sub-menu li:nth-child(5) { transition-delay: .14s; }
.atf-nav .sub-menu li:nth-child(6) { transition-delay: .175s; }
.atf-nav .sub-menu li:nth-child(7) { transition-delay: .21s; }
.atf-nav .sub-menu li:nth-child(n+8) { transition-delay: .245s; }
/* Filo di luce sotto l'header quando la pagina scorre */
.atf-header.is-stuck { border-bottom-color: transparent; }
.atf-header.is-stuck::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(127, 117, 252, .4) 28%, rgba(244, 104, 177, .4) 72%, transparent);
}
}
/* Un piccolo segno per i link che portano fuori dal sito */
.atf-nav a.is-ext::after {
content: "↗";
margin-left: .3em;
font-size: .78em;
opacity: .45;
transition: opacity var(--atf-transition), transform var(--atf-transition);
}
.atf-nav a.is-ext:hover::after { opacity: .9; transform: translate(1px, -1px); }
@media (prefers-reduced-motion: reduce) {
.atf-nav__pill { transition: opacity .2s linear; }
.atf-nav .sub-menu li { opacity: 1; transform: none; transition: none; }
}
/* =======================================================
25. PAGINA CORSO
Landing page: la promessa e il prezzo si vedono subito,
il resto scende in ordine di domande che si fa chi compra.
======================================================= */
.atf-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin-bottom: var(--atf-space-4);
font-size: .875rem;
color: var(--atf-gray-6);
}
.atf-crumbs a { color: var(--atf-gray-6); }
.atf-crumbs a:hover { color: var(--atf-primary); }
.atf-crumbs__ora { color: var(--atf-ink); font-weight: 600; }
/* ---- Testata ---- */
.atf-course-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--atf-space-6) var(--atf-space-7); }
.atf-course-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(1.5rem, 1rem + 3vw, 4rem);
align-items: center;
}
.atf-course-hero__titolo {
font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem);
margin-block: var(--atf-space-3);
}
.atf-course-hero__studenti { margin-block: var(--atf-space-4); }
/* Il contatore del plugin: stessa forma delle nostre pillole */
.atf-course-hero__studenti .atf-inline {
display: inline-flex;
align-items: baseline;
gap: .55em;
padding: .5em 1.1em;
border-radius: var(--atf-radius-pill);
background: rgba(127, 117, 252, .1);
color: var(--atf-gray-7);
font-size: .9375rem;
}
.atf-course-hero__studenti .atf-number {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.03em;
background: var(--atf-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.atf-course-hero__studenti .atf-text { color: var(--atf-gray-6); font-size: .875rem; }
/* Il plugin del contatore stampa la pillola due volte (una statica e una
che si aggiorna da sola). Ne lasciamo vedere una sola: la prima. */
.atf-course-hero__studenti .atf-inline ~ .atf-inline { display: none; }
/* Elenco dei vantaggi */
.atf-course-facts {
list-style: none;
margin: var(--atf-space-4) 0 0;
padding: 0;
display: grid;
gap: .7rem;
}
.atf-course-facts li {
display: flex;
align-items: flex-start;
gap: .7rem;
font-size: 1rem;
color: var(--atf-gray-8);
}
.atf-ico-check {
flex: none;
width: 20px; height: 20px;
margin-top: .15em;
padding: 3px;
border-radius: 50%;
background: rgba(78, 209, 153, .16);
color: #1e9e6a;
}
/* Blocco prezzo + pulsante */
.atf-course-buy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--atf-space-3);
margin-top: var(--atf-space-5);
}
.atf-course-buy__prezzo .atf-card__price,
.atf-course-buy__prezzo {
font-size: 2.1rem;
font-weight: 700;
letter-spacing: -.04em;
color: var(--atf-ink);
line-height: 1;
}
.atf-course-buy__prezzo del { font-size: 1.1rem; color: var(--atf-gray-5); font-weight: 500; margin-right: .35em; }
.atf-course-buy__prezzo ins { text-decoration: none; }
.atf-course-hero__nota {
margin-top: var(--atf-space-3);
font-size: .8125rem;
color: var(--atf-gray-6);
}
/* Immagine */
.atf-course-hero__media {
position: relative;
border-radius: var(--atf-radius-lg);
overflow: hidden;
box-shadow: 0 30px 70px rgba(20, 22, 26, .16);
aspect-ratio: 4 / 3;
background: var(--atf-gray-2);
}
.atf-course-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.atf-course-hero__ph {
position: absolute; inset: 0;
display: grid; place-items: center;
background: var(--atf-gradient);
color: rgba(255, 255, 255, .92);
font-size: 5rem; font-weight: 700; line-height: 1;
}
.atf-course-hero__badge {
position: absolute;
left: var(--atf-space-3); bottom: var(--atf-space-3);
display: inline-flex;
align-items: baseline;
gap: .4em;
padding: .5em 1em;
border-radius: var(--atf-radius-pill);
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(8px);
font-size: .8125rem;
color: var(--atf-gray-7);
box-shadow: var(--atf-shadow-sm);
}
.atf-course-hero__badge strong { font-size: 1.15rem; color: var(--atf-ink); letter-spacing: -.02em; }
/* ---- Elenco a schede: requisiti, filosofia ---- */
.atf-course-intro { max-width: 780px; margin-bottom: var(--atf-space-5); }
.atf-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(1rem, .6rem + 1vw, 1.5rem);
}
.atf-fact {
padding: clamp(1.25rem, 1rem + .8vw, 1.75rem);
background: var(--atf-surface);
border-radius: var(--atf-radius-lg);
box-shadow: var(--atf-shadow-sm);
border-top: 3px solid transparent;
border-image: var(--atf-gradient) 1;
border-image-slice: 1;
border-width: 3px 0 0 0;
transition: transform .4s var(--atf-ease), box-shadow .4s var(--atf-ease);
}
.atf-fact:hover { transform: translateY(-4px); box-shadow: var(--atf-shadow); }
.atf-fact__et {
display: block;
margin-bottom: .5rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--atf-secondary-dark);
}
.atf-fact p { margin: 0; color: var(--atf-gray-7); font-size: .9375rem; line-height: 1.65; }
.atf-course-chiusura {
margin-top: var(--atf-space-5);
padding: var(--atf-space-4) var(--atf-space-5);
border-left: 4px solid var(--atf-secondary);
background: var(--atf-gray-1);
border-radius: 0 var(--atf-radius) var(--atf-radius) 0;
color: var(--atf-gray-7);
}
/* ---- Passi numerati: come funziona il corso ---- */
.atf-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
counter-reset: atf-step;
}
.atf-step {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: var(--atf-space-4);
padding-block: var(--atf-space-4);
}
.atf-step + .atf-step { border-top: 1px solid var(--atf-gray-2); }
.atf-step__n {
display: grid;
place-items: center;
width: 52px; height: 52px;
border-radius: 50%;
background: var(--atf-gradient);
color: #fff;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -.02em;
box-shadow: var(--atf-shadow-brand);
}
.atf-step__corpo h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.atf-step__corpo p { margin: 0; color: var(--atf-gray-7); line-height: 1.7; }
/* ---- Blocchi LearnDash rivestiti ---- */
.atf-ld { --ld-primary: var(--atf-primary); }
/* Il banner verde di fine corso */
.atf-ld--banner .ld-alert,
.atf-ld--banner .ld-alert-success {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--atf-space-4);
margin: 0;
padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
border: 2px solid rgba(78, 209, 153, .55);
border-radius: var(--atf-radius-lg);
background: linear-gradient(120deg, rgba(78, 209, 153, .12), rgba(41, 224, 255, .08));
box-shadow: 0 14px 40px rgba(78, 209, 153, .16);
color: var(--atf-gray-8);
font-size: 1rem;
line-height: 1.65;
}
.atf-ld--banner .ld-alert-icon {
flex: none;
display: grid;
place-items: center;
width: 54px; height: 54px;
border-radius: 50%;
background: var(--atf-green);
color: #fff;
font-size: 1.4rem;
}
.atf-ld--banner .ld-alert-content { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--atf-space-3); }
.atf-ld--banner .ld-alert-messages { flex: 1 1 300px; margin: 0; }
.atf-ld--banner .ld-alert-messages a {
font-weight: 700;
color: var(--atf-primary-dark);
text-decoration: underline;
text-underline-offset: .18em;
text-decoration-thickness: 2px;
}
.atf-ld--banner .ld-alert-messages a:hover { color: var(--atf-secondary-dark); }
/* Il pulsante "Scarica il certificato in PDF" */
.atf-ld--banner .ld-button {
display: inline-flex;
align-items: center;
gap: .55em;
padding: .85em 1.7em;
border: 0;
border-radius: var(--atf-radius-pill);
background: linear-gradient(120deg, #4ed199, #2bb67e);
color: #fff;
font-weight: 600;
font-size: .9375rem;
line-height: 1;
text-decoration: none;
box-shadow: var(--atf-shadow-sm);
transition: transform .3s var(--atf-ease-spring), background-color var(--atf-transition);
}
.atf-ld--banner .ld-button:hover { transform: translateY(-3px); background: var(--atf-ink); color: #fff; box-shadow: var(--atf-shadow); }
/* La barra di avanzamento */
.atf-ld--infobar {
margin-top: var(--atf-space-4);
padding: var(--atf-space-4) clamp(1rem, .6rem + 1vw, 1.6rem);
background: var(--atf-surface);
border-radius: var(--atf-radius-lg);
box-shadow: var(--atf-shadow-sm);
}
.atf-ld--infobar .ld-progress-bar { background: var(--atf-gray-2); border-radius: var(--atf-radius-pill); overflow: hidden; height: 10px; }
.atf-ld--infobar .ld-progress-bar-percentage { background: var(--atf-gradient); height: 100%; border-radius: var(--atf-radius-pill); }
.atf-ld--infobar .ld-progress-percentage { font-weight: 700; color: var(--atf-ink); }
/* L'elenco delle lezioni */
.atf-ld--contenuto .ld-item-list-item {
border: 1px solid var(--atf-gray-2);
border-radius: var(--atf-radius);
margin-bottom: .6rem;
background: var(--atf-surface);
transition: border-color var(--atf-transition), box-shadow var(--atf-transition);
}
.atf-ld--contenuto .ld-item-list-item:hover { border-color: var(--atf-primary); box-shadow: var(--atf-shadow-sm); }
.atf-ld--contenuto .ld-item-name { font-weight: 600; color: var(--atf-ink); }
.atf-ld--contenuto .ld-item-list-section-heading,
.atf-ld--contenuto .ld-section-heading { margin-bottom: var(--atf-space-3); }
/* Il titolo "Contenuto del Corso" lo stampiamo noi: quello di LearnDash
lo nascondiamo, altrimenti si legge due volte di fila. */
.atf-ld--contenuto .ld-section-heading > h2 { display: none; }
/* ---- Barra di acquisto che compare scorrendo ---- */
.atf-course-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 90;
background: rgba(255, 255, 255, .94);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--atf-gray-2);
box-shadow: 0 -8px 30px rgba(20, 22, 26, .08);
transform: translateY(110%);
transition: transform .4s var(--atf-ease);
}
.atf-course-bar.is-on { transform: none; }
.atf-course-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--atf-space-3);
min-height: 68px;
padding-block: .7rem;
}
.atf-course-bar__testo { display: flex; flex-direction: column; min-width: 0; }
.atf-course-bar__testo strong {
font-size: .9375rem;
letter-spacing: -.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.atf-course-bar__prezzo { font-size: 1.15rem; font-weight: 700; color: var(--atf-ink); letter-spacing: -.03em; }
.atf-course-bar__prezzo del { font-size: .8125rem; font-weight: 500; color: var(--atf-gray-5); margin-right: .3em; }
.atf-course-bar__prezzo ins { text-decoration: none; }
@media (max-width: 900px) {
.atf-course-hero__grid { grid-template-columns: 1fr; }
.atf-course-hero__media { order: -1; aspect-ratio: 16 / 10; }
.atf-course-buy { flex-direction: column; align-items: stretch; }
.atf-course-buy .atf-btn { width: 100%; }
.atf-course-buy__prezzo { text-align: center; }
.atf-step { grid-template-columns: 44px minmax(0, 1fr); gap: var(--atf-space-3); }
.atf-step__n { width: 44px; height: 44px; font-size: 1.05rem; }
.atf-ld--banner .ld-alert,
.atf-ld--banner .ld-alert-success { flex-direction: column; align-items: flex-start; text-align: left; }
.atf-course-bar__inner { gap: var(--atf-space-2); }
.atf-course-bar .atf-btn { flex: none; padding-inline: 1.3em; }
}
/* Il blocco d'acquisto si accende quando arrivi dalla barra in basso */
.atf-course-buy.is-evidenza {
border-radius: var(--atf-radius-lg);
animation: atf-evidenza 2.2s var(--atf-ease) 1;
}
@keyframes atf-evidenza {
0% { box-shadow: 0 0 0 0 rgba(127, 117, 252, .5); background: rgba(127, 117, 252, .1); }
60% { box-shadow: 0 0 0 18px rgba(127, 117, 252, 0); background: rgba(127, 117, 252, .06); }
100% { box-shadow: 0 0 0 0 rgba(127, 117, 252, 0); background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .atf-course-buy.is-evidenza { animation: none; } }
/* Sfondo della testata corso: stessa immagine della homepage, ma il velo
è laterale invece che circolare, perché qui il testo sta a sinistra. */
.atf-bg--corso .atf-bg__img { object-position: center 40%; }
.atf-bg__veil--lato {
background:
linear-gradient(100deg,
rgba(255, 255, 255, .90) 0%,
rgba(255, 255, 255, .82) 32%,
rgba(255, 255, 255, .52) 54%,
rgba(255, 255, 255, .16) 74%,
rgba(255, 255, 255, .02) 100%);
}
/* Un secondo strato leggerissimo tiene sotto controllo anche il bordo alto */
.atf-bg--corso::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 30%);
pointer-events: none;
}
@media (max-width: 900px) {
/* Su telefono il testo occupa tutta la larghezza: velo pieno, non laterale */
.atf-bg__veil--lato {
background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.96) 100%);
}
}
/* =======================================================
26. DOMANDE FREQUENTI
======================================================= */
.atf-faq { max-width: 860px; margin-inline: auto; }
.atf-faq__cerca {
position: relative;
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: var(--atf-space-5);
padding: .55rem .55rem .55rem 1.1rem;
border-radius: var(--atf-radius-pill);
background: var(--atf-surface);
box-shadow: var(--atf-shadow-sm);
border: 1px solid var(--atf-gray-2);
transition: border-color var(--atf-transition), box-shadow var(--atf-transition);
}
.atf-faq__cerca:focus-within { border-color: var(--atf-primary); box-shadow: 0 0 0 4px rgba(127, 117, 252, .14); }
.atf-faq__cerca svg { flex: none; width: 20px; height: 20px; color: var(--atf-gray-5); }
.atf-faq__cerca input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: none;
padding: .5rem 0;
font-size: 1rem;
outline: none;
}
.atf-faq__cerca input::-webkit-search-cancel-button { cursor: pointer; }
.atf-faq__conteggio {
flex: none;
padding: .4em .9em;
border-radius: var(--atf-radius-pill);
background: var(--atf-gray-1);
font-size: .75rem;
font-weight: 600;
color: var(--atf-gray-6);
white-space: nowrap;
}
.atf-faq__vuoto {
padding: var(--atf-space-5);
text-align: center;
border-radius: var(--atf-radius-lg);
background: var(--atf-gray-1);
color: var(--atf-gray-6);
}
.atf-faq details {
margin-bottom: .7rem;
border: 1px solid var(--atf-gray-2);
border-radius: var(--atf-radius);
background: var(--atf-surface);
overflow: hidden;
transition: border-color var(--atf-transition), box-shadow var(--atf-transition);
}
.atf-faq details[open] { border-color: rgba(127, 117, 252, .45); box-shadow: 0 10px 34px rgba(20, 22, 26, .07); }
.atf-faq details:hover { border-color: var(--atf-gray-3); }
.atf-faq summary {
position: relative;
display: flex;
align-items: center;
gap: var(--atf-space-3);
padding: 1.05rem 3.2rem 1.05rem 1.35rem;
cursor: pointer;
list-style: none;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -.02em;
color: var(--atf-ink);
}
.atf-faq summary::-webkit-details-marker { display: none; }
.atf-faq summary::after {
content: "";
position: absolute;
right: 1.35rem; top: 50%;
width: 11px; height: 11px;
margin-top: -7px;
border-right: 2.4px solid var(--atf-gray-5);
border-bottom: 2.4px solid var(--atf-gray-5);
border-radius: 2px;
transform: rotate(45deg);
transition: transform var(--atf-transition), border-color var(--atf-transition);
}
.atf-faq details[open] > summary::after {
margin-top: -2px;
transform: rotate(225deg);
border-color: var(--atf-primary);
}
.atf-faq details[open] > summary { color: var(--atf-primary-dark); }
.atf-faq summary:hover { background: var(--atf-gray-1); }
.atf-faq summary:focus-visible { outline: 3px solid var(--atf-primary); outline-offset: -3px; }
.atf-faq details > *:not(summary) {
padding: 0 1.35rem 1.25rem;
color: var(--atf-gray-7);
line-height: 1.75;
}
.atf-faq details > *:not(summary) p:last-child { margin-bottom: 0; }
.atf-faq details a { color: var(--atf-primary); text-decoration: underline; text-underline-offset: .18em; }
.atf-faq details.is-nascosta { display: none; }
.atf-faq mark { background: rgba(255, 193, 104, .55); color: inherit; padding: 0 .1em; border-radius: 3px; }
@media (max-width: 640px) {
.atf-faq__cerca { flex-wrap: wrap; border-radius: var(--atf-radius); padding-inline: .9rem; }
.atf-faq__conteggio { order: 3; }
.atf-faq summary { font-size: 1rem; padding-right: 2.8rem; }
}
/* ---- Il bonus incluso nel corso ---- */
.atf-bonus {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1rem, .6rem + 1.6vw, 2.25rem);
padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
padding-left: clamp(1.75rem, 1.2rem + 2vw, 3rem);
border-radius: var(--atf-radius-lg);
background: var(--atf-ink);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.atf-bonus::before {
content: "";
position: absolute;
inset: -60% -20% auto 40%;
height: 220%;
z-index: -1;
background: var(--atf-gradient);
opacity: .32;
filter: blur(60px);
}
/* Il filo di gradiente sul bordo sinistro: dice "questo è un extra" */
.atf-bonus__nastro {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
background: var(--atf-gradient);
}
.atf-bonus__icona {
display: grid;
place-items: center;
width: 62px; height: 62px;
border-radius: var(--atf-radius);
background: rgba(255, 255, 255, .12);
color: var(--atf-yellow);
flex: none;
}
.atf-bonus__icona svg { width: 30px; height: 30px; }
.atf-bonus__corpo h2 {
margin: .35rem 0 .5rem;
color: #fff;
font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
}
.atf-bonus__corpo p { margin: 0; color: rgba(255, 255, 255, .78); line-height: 1.7; }
.atf-bonus .atf-eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }
.atf-bonus__azione { flex: none; }
/* La riga in evidenza nell'elenco della testata */
.atf-course-facts__bonus span { color: var(--atf-ink); }
.atf-course-facts__bonus .atf-ico-check {
background: rgba(255, 193, 104, .3);
color: #b8760a;
}
@media (max-width: 900px) {
.atf-bonus {
grid-template-columns: 1fr;
text-align: left;
padding-left: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
}
.atf-bonus__nastro { width: 100%; height: 6px; bottom: auto; }
.atf-bonus__azione .atf-btn { width: 100%; }
}
/* Il valore commerciale del bonus: prezzi barrati, perché il messaggio
è "questo costa, ma tu non lo paghi". */
.atf-bonus__valori {
display: flex;
flex-wrap: wrap;
gap: var(--atf-space-3);
list-style: none;
margin: var(--atf-space-4) 0 0;
padding: 0;
}
.atf-bonus__valori li {
display: flex;
flex-direction: column;
gap: .15rem;
padding: .6rem 1.1rem;
border-radius: var(--atf-radius);
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
}
.atf-bonus__prezzo {
position: relative;
width: fit-content;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.03em;
color: rgba(255, 255, 255, .55);
}
/* La barratura è disegnata, non un : resta leggibile e obliqua */
.atf-bonus__prezzo::after {
content: "";
position: absolute;
left: -4%; right: -4%; top: 52%;
height: 2.5px;
border-radius: 2px;
background: var(--atf-secondary);
transform: rotate(-7deg);
}
.atf-bonus__chi {
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
.atf-bonus__nota {
display: flex;
align-items: flex-start;
gap: .7rem;
margin: var(--atf-space-4) 0 0 !important;
padding: .85rem 1.1rem;
border-radius: var(--atf-radius);
background: rgba(78, 209, 153, .14);
border: 1px solid rgba(78, 209, 153, .35);
color: #fff !important;
font-weight: 600;
line-height: 1.55;
}
.atf-bonus__nota-ico {
flex: none;
display: grid;
place-items: center;
width: 22px; height: 22px;
margin-top: .1em;
border-radius: 50%;
background: var(--atf-green);
color: #fff;
}
.atf-bonus__nota-ico svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
.atf-bonus__valori { gap: var(--atf-space-2); }
.atf-bonus__valori li { flex: 1 1 140px; padding: .55rem .85rem; }
.atf-bonus__prezzo { font-size: 1.15rem; }
}
/* =======================================================
27. I DOCUMENTI RILASCIATI
Una striscia sola, piccola: sono una conferma, non il
protagonista della pagina. Le miniature bastano a far
capire che i documenti esistono davvero.
======================================================= */
.atf-docs-box {
display: grid;
grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
gap: clamp(1.25rem, .8rem + 1.4vw, 2.25rem);
align-items: center;
padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
border: 1px solid var(--atf-gray-2);
border-radius: var(--atf-radius-lg);
background: var(--atf-surface);
box-shadow: var(--atf-shadow-sm);
}
.atf-docs-box__intro p {
margin: .6rem 0 0;
font-size: .9375rem;
line-height: 1.6;
color: var(--atf-gray-7);
}
.atf-docs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.atf-doc {
display: flex;
align-items: center;
gap: .8rem;
padding: .3rem .9rem;
}
.atf-doc + .atf-doc { border-left: 1px solid var(--atf-gray-2); }
/* Riquadro fisso: i tre documenti hanno proporzioni diverse
ma le miniature restano allineate. */
.atf-doc__thumb {
flex: none;
display: grid;
place-items: center;
width: 46px; height: 62px;
padding: 3px;
border-radius: 5px;
background: var(--atf-gray-1);
box-shadow: 0 2px 8px rgba(20, 22, 26, .1);
overflow: hidden;
}
.atf-doc__thumb img {
max-width: 100%;
max-height: 100%;
width: auto; height: auto;
border-radius: 2px;
}
.atf-doc__testo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.atf-doc__testo strong {
font-size: .875rem;
font-weight: 600;
letter-spacing: -.01em;
color: var(--atf-ink);
line-height: 1.3;
}
.atf-doc__ente {
font-size: .6875rem;
line-height: 1.35;
color: var(--atf-gray-5);
}
.atf-docs__nota {
margin: var(--atf-space-3) 0 0;
text-align: center;
font-size: .75rem;
color: var(--atf-gray-5);
}
@media (max-width: 900px) {
.atf-docs-box { grid-template-columns: 1fr; }
.atf-docs { grid-template-columns: 1fr; gap: 0; }
.atf-doc { padding: .7rem .2rem; }
.atf-doc + .atf-doc { border-left: 0; border-top: 1px solid var(--atf-gray-2); }
}
/* =======================================================
28. BLINDATURA
Su questo sito convivono un centinaio di fogli di stile
fra Elementor e i widget pixfort. Alcuni colpiscono gli
stessi elementi con la stessa specificità: a parità vince
l'ultimo che parla, e non sempre siamo noi.
Qui ripetiamo le poche regole che non possono sbagliare
raddoppiando la classe: la specificità sale di un gradino
e nessuno ce le porta più via. Niente !important: quando
spegneremo Elementor e pixfort, questa sezione si toglie
e sotto è rimasto tutto pulito.
======================================================= */
/* ---- Pulsanti ---- */
.atf-btn.atf-btn {
background: var(--btn-bg);
color: var(--btn-fg);
border: 0;
text-decoration: none;
}
.atf-btn--gradient.atf-btn--gradient {
background: var(--atf-gradient);
background-size: 200% 100%;
color: #fff;
}
.atf-btn--gradient.atf-btn--gradient:hover { background-position: 100% 0; }
.atf-btn--primary.atf-btn--primary { background: var(--atf-primary); color: #fff; }
.atf-btn--dark.atf-btn--dark { background: var(--atf-ink); color: #fff; }
.atf-btn--blue.atf-btn--blue { background: var(--atf-gray-9); color: #fff; }
.atf-btn--light.atf-btn--light { background: #fff; color: var(--atf-ink); }
.atf-btn--ghost.atf-btn--ghost {
background: transparent;
color: var(--atf-gray-9);
box-shadow: inset 0 0 0 1.5px var(--atf-gray-3);
}
.atf-btn--ghost.atf-btn--ghost:hover {
color: var(--atf-primary);
box-shadow: inset 0 0 0 1.5px var(--atf-primary);
}
/* ---- Testo bianco sui fondi scuri o colorati ---- */
.atf-section--dark.atf-section--dark,
.atf-section--dark.atf-section--dark h1,
.atf-section--dark.atf-section--dark h2,
.atf-section--dark.atf-section--dark h3,
.atf-section--dark.atf-section--dark p { color: #fff; }
.atf-section--dark.atf-section--dark .atf-stat__label { color: rgba(255, 255, 255, .62); }
.atf-tile--brand.atf-tile--brand h3,
.atf-tile--brand.atf-tile--brand .atf-tile__kicker { color: #fff; }
.atf-tile--brand.atf-tile--brand p { color: rgba(255, 255, 255, .88); }
.atf-cta.atf-cta h2 { color: #fff; }
.atf-cta.atf-cta p { color: rgba(255, 255, 255, .9); }
.atf-bonus.atf-bonus h2 { color: #fff; }
.atf-bonus.atf-bonus p { color: rgba(255, 255, 255, .78); }
.atf-bonus.atf-bonus .atf-bonus__nota { color: #fff; }
.atf-hero--onimage.atf-hero--onimage h1,
.atf-hero--onimage.atf-hero--onimage .atf-lead { color: #fff; }
/* ---- Il numero in gradiente non deve tornare nero ---- */
.atf-stat__value.atf-stat__value,
.atf-course-hero__studenti .atf-number {
background: linear-gradient(120deg, #fff 0%, var(--atf-secondary) 45%, var(--atf-primary) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.atf-course-hero__studenti .atf-number { background: var(--atf-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---- Titoli e testo del corpo ---- */
.atf-main h1, .atf-main h2, .atf-main h3,
.atf-hero h1 { color: var(--atf-text); }
.atf-section--dark .atf-main h2 { color: #fff; }
/* =========================================================================
29. PAGINA "CORSI ONLINE" (/all-courses/)
====================================================================== */
.atf-corsi-hero { text-align: center; }
.atf-corsi-hero__titolo {
font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
margin-block: var(--atf-space-3);
}
.atf-corsi-hero .atf-lead {
max-width: 62ch;
margin-inline: auto;
}
/* La barra con la ricerca e il conteggio */
.atf-corsi-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--atf-space-3);
margin-bottom: var(--atf-space-6);
}
.atf-corsi-cerca {
position: relative;
flex: 1 1 320px;
display: flex;
align-items: center;
}
.atf-corsi-cerca svg {
position: absolute;
left: 1.1rem;
width: 20px;
height: 20px;
color: var(--atf-gray-5);
pointer-events: none;
}
.atf-corsi-cerca input {
width: 100%;
padding: .95em 1.2em .95em 3.1rem;
border: 1.5px solid var(--atf-gray-3);
border-radius: var(--atf-radius-pill);
background: #fff;
color: var(--atf-gray-9);
font: inherit;
font-size: 1rem;
transition: border-color var(--atf-transition), box-shadow var(--atf-transition);
}
.atf-corsi-cerca input::placeholder { color: var(--atf-gray-5); }
.atf-corsi-cerca input:focus {
outline: none;
border-color: var(--atf-primary);
box-shadow: 0 0 0 4px rgba(127, 117, 252, .16);
}
.atf-corsi-cerca input::-webkit-search-cancel-button { cursor: pointer; }
.atf-corsi-conteggio {
margin: 0;
color: var(--atf-gray-6);
font-size: .9375rem;
white-space: nowrap;
}
.atf-corsi-conteggio strong {
color: var(--atf-gray-9);
font-size: 1.15rem;
font-weight: 700;
}
.atf-corsi-vuoto {
margin-top: var(--atf-space-6);
text-align: center;
color: var(--atf-gray-6);
font-size: 1.05rem;
}
/* Le card nascoste dalla ricerca non devono lasciare il buco della griglia */
.atf-corsi .atf-card[hidden] { display: none !important; }
@media (max-width: 640px) {
.atf-corsi-barra { flex-direction: column; align-items: stretch; }
.atf-corsi-conteggio { text-align: center; }
}
/* =========================================================================
30. SCONTRO DI NOMI: .atf-grid esiste anche in un altro foglio del sito
(stampato dopo il nostro) che la forza a due colonne. Ripetendo la
classe alziamo il peso della regola senza usare !important.
====================================================================== */
.atf-grid.atf-grid { display: grid; }
.atf-grid--2.atf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atf-grid--3.atf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atf-grid--4.atf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
.atf-grid--4.atf-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
.atf-grid--3.atf-grid--3,
.atf-grid--4.atf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.atf-grid--2.atf-grid--2,
.atf-grid--3.atf-grid--3,
.atf-grid--4.atf-grid--4 { grid-template-columns: 1fr; }
}
/* =========================================================================
31. LE CARD RIEMPIONO SEMPRE LA LORO COLONNA
Su iPhone la prima card dei corsi si presentava molto più stretta delle
altre, centrata nella colonna. Motivo: la card veniva dimensionata sul
proprio contenuto (max-content) invece che sulla colonna della griglia.
Quando l'immagine di copertina è piccola e il titolo è corto — è il caso
di "Nutrizione Sportiva" — la card si restringe fino alla larghezza del
titolo, mentre le altre, con titoli lunghi, arrivano a fondo colonna e
sembrano normali.
Qui la larghezza non viene più lasciata al contenuto: ogni figlio della
griglia occupa il 100% della sua colonna, su qualsiasi browser.
Niente !important: classe raddoppiata, come nella sezione 28.
====================================================================== */
.atf-grid.atf-grid > * {
justify-self: stretch;
align-self: stretch;
width: 100%;
min-width: 0;
max-width: none;
margin-inline: 0;
}
.atf-card.atf-card {
width: 100%;
max-width: none;
margin-inline: 0;
}
/* Il riquadro immagine segue la card, non il file caricato: così una
copertina a bassa risoluzione non trascina più giù tutta la card. */
.atf-card .atf-card__media {
width: 100%;
max-width: none;
}
.atf-card .atf-card__media img {
display: block;
width: 100%;
min-width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
}
/* Stessa blindatura per la griglia dei prodotti WooCommerce */
.woocommerce ul.products > li.product { width: 100%; max-width: none; margin-inline: 0; }
/* =========================================================================
32. RETE DI SICUREZZA: NIENTE RIQUADRO "STATUS ATTUALE" NEL CORPO PAGINA
Il riquadro di LearnDash con stato, prezzo e "Inizia questo Corso" viene
già tolto in PHP (inc/learndash.php). Se una versione futura del plugin
lo stampasse da un'altra strada, qui resta comunque fuori dal programma
e dal contenuto del corso — dove la testata lo ripete già.
La barra di stato per gli iscritti (.atf-ld--infobar) NON è toccata.
====================================================================== */
.atf-course .atf-entry .ld-course-status,
.atf-course .atf-ld--contenuto .ld-course-status { display: none; }
/* =========================================================================
33. PAGINA CORSO: LA BARRA DI ACQUISTO E I PULSANTI FLOTTANTI
Tre difetti visti dal vivo, stessa causa di fondo: la barra viveva a
z-index 90, mentre Joinchat sta a 9000 e il chatbot di AI Engine arriva
a 999999. Il contenitore del chatbot, anche a finestra chiusa, occupa
una fascia larga nell'angolo in basso a destra: invisibile, ma si
prendeva i clic. Da qui il "il pulsante è cliccabile solo a sinistra".
Qui la barra passa sopra tutto, e i due pulsanti flottanti si spostano
invece di coprirla. Su telefono, dove lo spazio non basta per entrambi,
sulla sola pagina corso spariscono: coprivano nome, prezzo e pulsante.
!important solo verso i due plugin, che si posizionano da soli con
regole molto specifiche. Le nostre regole restano pulite.
====================================================================== */
/* Da desktop la barra resta DIETRO i due pulsanti flottanti, come prima:
WhatsApp e chatbot devono continuare a vedersi. Il z-index originale
(90) va benissimo, quindi qui non lo tocchiamo.
Restava però il difetto del clic: il chatbot di AI Engine, anche a
finestra chiusa, tiene in pagina il pannello `.mwai-window-box` con
opacita' 0. Invisibile, ma ingombra l'angolo in basso a destra e si
prendeva i clic destinati a "Iscriviti ora" — per questo il pulsante
rispondeva solo sulla parte sinistra.
La riga qui sotto toglie i clic al solo pannello invisibile, e solo
mentre e' chiuso. Il pulsante rotondo (.mwai-trigger) resta cliccabile
come sempre e nulla cambia a vedersi. */
body.single-sfwd-courses .mwai-window:not(.mwai-open):not(.mwai-opening) .mwai-window-box {
pointer-events: none;
}
/* Telefono e tablet: sulla pagina corso vince la barra di acquisto.
Qui lo schermo non basta per entrambi e i due pulsanti coprivano
nome del corso, prezzo e "Iscriviti ora". */
@media (max-width: 1024px) {
body.single-sfwd-courses .joinchat,
body.single-sfwd-courses .mwai-chatbot-container { display: none !important; }
}
/* =========================================================================
34. PAGINA CORSO SU TELEFONO: IL PULSANTE D'ACQUISTO A TUTTA LARGHEZZA
"Vedi il programma" è un pulsante del tema e obbediva alla regola
.atf-course-buy .atf-btn { width: 100% }. "Inizia questo Corso" invece
lo stampa LearnDash dentro .atf-course-buy__azione, con classi sue: la
regola non lo prendeva e restava stretto e appoggiato a sinistra.
Qui prendiamo qualunque cosa LearnDash metta lì dentro.
====================================================================== */
@media (max-width: 900px) {
.atf-course-buy__azione { width: 100%; }
.atf-course-buy__azione > *,
.atf-course-buy__azione form,
.atf-course-buy__azione a,
.atf-course-buy__azione button,
.atf-course-buy__azione input[type="submit"] { width: 100%; }
.atf-course-buy__azione a,
.atf-course-buy__azione button,
.atf-course-buy__azione input[type="submit"] {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
}
/* =========================================================================
35. RICERCA CORSI CON SUGGERIMENTI
L'elenco dei titoli che compare sotto il campo di ricerca in
/all-courses/. Si scrive, si sceglie il corso, la griglia resta su
quello. Il pannello lo costruisce assets/js/main.js.
====================================================================== */
.atf-corsi-sugg {
position: absolute;
top: calc(100% + .4rem);
left: 0;
right: 0;
z-index: 40;
margin: 0;
padding: .35rem;
list-style: none;
max-height: 320px;
overflow-y: auto;
background: #fff;
border: 1px solid var(--atf-gray-2);
border-radius: var(--atf-radius);
box-shadow: var(--atf-shadow-lg);
}
.atf-corsi-sugg[hidden] { display: none; }
.atf-corsi-sugg li { margin: 0; list-style: none; }
.atf-corsi-sugg button {
display: block;
width: 100%;
padding: .6rem .8rem;
border: 0;
background: none;
border-radius: calc(var(--atf-radius) - 5px);
font: inherit;
font-size: .9375rem;
line-height: 1.35;
color: var(--atf-gray-9);
text-align: left;
cursor: pointer;
}
.atf-corsi-sugg button:hover,
.atf-corsi-sugg button:focus-visible,
.atf-corsi-sugg li.is-attiva button {
background: var(--atf-gray-1);
outline: none;
}
.atf-corsi-sugg mark {
padding: 0 .1em;
border-radius: 3px;
background: rgba(127, 117, 252, .22);
color: inherit;
font-weight: 700;
}
/* =========================================================================
36. PAGINA DOMANDE FREQUENTI: RESPIRO, FILTRI, DUE COLONNE
La prima versione era una colonna sola stretta e lunghissima: giusta ma
faticosa. Qui la pagina si allarga, le domande si dispongono su due
colonne e sopra compaiono i pulsanti per argomento. Stessa grafica del
resto del sito — pillole, gradiente, ombre morbide — solo applicata a
un contenuto che prima era solo un elenco.
====================================================================== */
/* ---- Testata ---- */
.atf-faq-hero { text-align: center; }
.atf-faq-hero__titolo {
font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
margin-block: var(--atf-space-3);
}
.atf-faq-hero .atf-lead { max-width: 68ch; margin-inline: auto; }
/* ---- Il blocco largo ---- */
.atf-faq--largo { max-width: none; }
.atf-faq--largo .atf-faq__cerca { max-width: 720px; margin-inline: auto; }
/* ---- Pulsanti per argomento ---- */
.atf-faq__filtri {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-bottom: var(--atf-space-5);
}
.atf-faq__filtro {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55em 1.05em;
border: 1.5px solid var(--atf-gray-2);
border-radius: var(--atf-radius-pill);
background: var(--atf-surface);
color: var(--atf-gray-7);
font: inherit;
font-size: .875rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: border-color var(--atf-transition), color var(--atf-transition),
background var(--atf-transition), box-shadow var(--atf-transition);
}
.atf-faq__filtro:hover { border-color: var(--atf-gray-4); color: var(--atf-gray-9); }
.atf-faq__filtro:focus-visible { outline: 3px solid var(--atf-primary); outline-offset: 2px; }
.atf-faq__filtro.is-attivo {
border-color: transparent;
background: var(--atf-gradient);
color: #fff;
box-shadow: var(--atf-shadow-brand);
}
.atf-faq__filtro-n {
padding: .1em .5em;
border-radius: var(--atf-radius-pill);
background: var(--atf-gray-1);
color: var(--atf-gray-6);
font-size: .75rem;
font-weight: 700;
}
.atf-faq__filtro.is-attivo .atf-faq__filtro-n { background: rgba(255, 255, 255, .24); color: #fff; }
/* Il pallino non deve intercettare il clic al posto del pulsante */
.atf-faq__punto { pointer-events: none; }
/* ---- Il pallino colorato dell'argomento ---- */
.atf-faq__punto {
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--atf-gray-4);
}
.atf-faq__punto[data-cat="corso"] { background: var(--atf-primary); }
.atf-faq__punto[data-cat="documenti"] { background: var(--atf-secondary); }
.atf-faq__punto[data-cat="pagamenti"] { background: var(--atf-blue); }
.atf-faq__punto[data-cat="area"] { background: var(--atf-green); }
.atf-faq__punto[data-cat="dopo"] { background: var(--atf-yellow); }
.atf-faq__filtro.is-attivo .atf-faq__punto { background: #fff; }
/* ---- Due colonne ---- */
/* Due colonne vere, non una griglia: con la griglia una domanda aperta
allungava la riga e lasciava un buco nell'altra colonna. Cosi' le
schede si incastrano e la pagina resta corta. */
.atf-faq__griglia {
columns: 2;
column-gap: .8rem;
}
@media (max-width: 900px) { .atf-faq__griglia { columns: 1; } }
.atf-faq__griglia > details {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: .8rem;
}
/* ---- La singola domanda ---- */
.atf-faq--largo details {
border-radius: var(--atf-radius);
box-shadow: var(--atf-shadow-sm);
transition: transform .35s var(--atf-ease), border-color var(--atf-transition),
box-shadow var(--atf-transition);
}
.atf-faq--largo details:hover { transform: translateY(-2px); box-shadow: var(--atf-shadow); }
.atf-faq--largo details[open] { transform: none; }
.atf-faq--largo summary { align-items: flex-start; gap: .75rem; }
.atf-faq--largo summary .atf-faq__q { flex: 1 1 auto; }
.atf-faq--largo summary .atf-faq__punto { margin-top: .55em; }
/* Un filo di colore sul bordo sinistro quando la domanda è aperta:
dice a colpo d'occhio di che famiglia è. */
.atf-faq--largo details { position: relative; }
.atf-faq--largo details::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--atf-gray-3);
opacity: 0;
transition: opacity var(--atf-transition);
}
.atf-faq--largo details[open]::before { opacity: 1; }
.atf-faq--largo details[data-cat="corso"]::before { background: var(--atf-primary); }
.atf-faq--largo details[data-cat="documenti"]::before { background: var(--atf-secondary); }
.atf-faq--largo details[data-cat="pagamenti"]::before { background: var(--atf-blue); }
.atf-faq--largo details[data-cat="area"]::before { background: var(--atf-green); }
.atf-faq--largo details[data-cat="dopo"]::before { background: var(--atf-yellow); }
/* ---- L'etichetta dell'argomento in coda alla risposta ---- */
.atf-faq__tag {
display: inline-block;
margin-top: var(--atf-space-3);
padding: .3em .8em;
border-radius: var(--atf-radius-pill);
background: var(--atf-gray-1);
color: var(--atf-gray-6);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
/* La risposta scende invece di comparire di colpo. */
@media (prefers-reduced-motion: no-preference) {
.atf-faq--largo details[open] > .atf-faq__risposta {
animation: atf-faq-apri .28s var(--atf-ease) both;
}
}
@keyframes atf-faq-apri {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* ---- Su telefono: barra di ricerca su una riga, filtri che scorrono ---- */
@media (max-width: 640px) {
/* Il segnaposto è lungo e faceva andare a capo tutto: qui il campo
parte da zero e si prende lo spazio che resta accanto alla lente. */
.atf-faq--largo .atf-faq__cerca input { flex: 1 1 0; }
.atf-faq--largo .atf-faq__conteggio { width: 100%; text-align: center; }
/* I filtri diventano un nastro che si scorre col dito, invece di
spezzarsi su quattro righe sbilenche. */
.atf-faq__filtri {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scroll-snap-type: x proximity;
margin-inline: calc(var(--atf-space-3) * -1);
padding: 0 var(--atf-space-3) .4rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.atf-faq__filtri::-webkit-scrollbar { display: none; }
.atf-faq__filtro { flex: none; scroll-snap-align: start; }
}
/* =========================================================================
37. PAGINA RINNOVI E CONVERSIONI: LE SCHEDE PREZZO
Sei piani, due gruppi. Stessa materia del resto del sito — scheda
bianca, angoli morbidi, ombra leggera che si alza al passaggio del
mouse — con il prezzo trattato come si tratta un prezzo: quello
vecchio piccolo e barrato, quello nuovo grande.
====================================================================== */
.atf-rin-hero { text-align: center; }
.atf-rin-hero__titolo {
font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
margin-block: var(--atf-space-3);
}
.atf-rin-hero .atf-lead { max-width: 64ch; margin-inline: auto; }
.atf-listino { align-items: stretch; }
.atf-piano {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
border-radius: var(--atf-radius-lg);
border: 1.5px solid var(--atf-gray-2);
background: var(--atf-surface);
box-shadow: var(--atf-shadow-sm);
transition: transform .4s var(--atf-ease), box-shadow .4s var(--atf-ease),
border-color var(--atf-transition);
}
.atf-piano:hover {
transform: translateY(-6px);
border-color: var(--atf-gray-3);
box-shadow: var(--atf-shadow-lg);
}
/* La scheda di mezzo: la stessa, con un filo di colore in più. */
.atf-piano--spicca {
border-color: rgba(127, 117, 252, .45);
box-shadow: 0 18px 50px rgba(127, 117, 252, .18);
}
.atf-piano__nastro {
position: absolute;
top: 0;
right: clamp(1.2rem, 1rem + 1vw, 2rem);
transform: translateY(-50%);
padding: .4em .95em;
border-radius: var(--atf-radius-pill);
background: var(--atf-gradient);
color: #fff;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
box-shadow: var(--atf-shadow-brand);
white-space: nowrap;
}
.atf-piano__nome {
margin: 0 0 var(--atf-space-4);
font-size: 1.05rem;
line-height: 1.4;
letter-spacing: -.02em;
color: var(--atf-ink);
}
.atf-piano__prezzo {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .5rem;
margin: 0 0 var(--atf-space-4);
}
.atf-piano__prezzo del {
color: var(--atf-gray-5);
font-size: 1.05rem;
font-weight: 500;
text-decoration-thickness: 2px;
}
.atf-piano__prezzo ins {
text-decoration: none;
font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
font-weight: 700;
letter-spacing: -.035em;
color: var(--atf-ink);
line-height: 1;
}
.atf-piano__periodo {
color: var(--atf-gray-6);
font-size: .875rem;
font-weight: 600;
}
.atf-piano__voci {
list-style: none;
margin: 0 0 var(--atf-space-5);
padding: 0;
display: grid;
gap: .65rem;
}
.atf-piano__voci li {
display: flex;
align-items: center;
gap: .65rem;
font-size: .9375rem;
color: var(--atf-gray-7);
}
.atf-piano__voci .atf-ico-check {
flex: none;
width: 18px;
height: 18px;
padding: 3px;
border-radius: 50%;
background: rgba(78, 209, 153, .16);
color: #2f9e73;
}
/* Il pulsante si incolla in fondo: schede alte uguali, pulsanti in riga. */
.atf-piano__cta {
margin-top: auto;
width: 100%;
justify-content: center;
}
@media (max-width: 640px) {
.atf-piano__nastro { right: auto; left: clamp(1.2rem, 1rem + 1vw, 2rem); }
}
/* =========================================================================
38. PAGINA VIDEO TUTORIAL
Un indice cliccabile in cima e i video sotto, uno per blocco. I file
sono pesanti (il primo sfiora i 200 MB): il lettore carica solo le
informazioni di testa, il resto parte quando si preme play.
====================================================================== */
.atf-vt-hero { text-align: center; }
.atf-vt-hero__titolo {
font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
margin-block: var(--atf-space-3);
}
.atf-vt-hero .atf-lead { max-width: 60ch; margin-inline: auto; }
/* ---- L'indice ---- */
.atf-vt-indice {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .8rem;
}
@media (max-width: 900px) { .atf-vt-indice { grid-template-columns: 1fr; } }
.atf-vt-voce {
display: flex;
align-items: center;
gap: var(--atf-space-3);
padding: 1rem 1.2rem;
border: 1.5px solid var(--atf-gray-2);
border-radius: var(--atf-radius);
background: var(--atf-surface);
color: var(--atf-gray-9);
text-decoration: none;
font-weight: 600;
line-height: 1.35;
transition: transform .3s var(--atf-ease), border-color var(--atf-transition),
box-shadow var(--atf-transition), color var(--atf-transition);
}
.atf-vt-voce:hover {
transform: translateY(-2px);
border-color: rgba(127, 117, 252, .45);
box-shadow: var(--atf-shadow);
color: var(--atf-primary-dark);
}
.atf-vt-voce__n {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--atf-gradient);
color: #fff;
font-size: .875rem;
font-weight: 700;
}
.atf-vt-voce__t { flex: 1 1 auto; font-size: .9375rem; }
.atf-vt-voce__freccia {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 26px;
color: var(--atf-gray-5);
transition: transform .3s var(--atf-ease), color var(--atf-transition);
}
.atf-vt-voce__freccia svg { width: 18px; height: 18px; }
.atf-vt-voce:hover .atf-vt-voce__freccia { transform: translateY(3px); color: var(--atf-primary); }
/* ---- Il singolo tutorial ---- */
.atf-vt-blocco {
/* L'intestazione del sito è fissa: senza questo margine il titolo
del tutorial finirebbe sotto la barra quando si arriva dall'indice. */
scroll-margin-top: 120px;
}
.atf-vt-blocco + .atf-vt-blocco { margin-top: var(--atf-space-7); }
@media (max-width: 782px) { .atf-vt-blocco { scroll-margin-top: 90px; } }
.atf-vt-blocco__testa {
display: flex;
align-items: flex-start;
gap: var(--atf-space-3);
margin-bottom: var(--atf-space-4);
}
.atf-vt-blocco__n {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--atf-gradient);
color: #fff;
font-size: 1.05rem;
font-weight: 700;
box-shadow: var(--atf-shadow-brand);
}
.atf-vt-blocco__testa h2 {
margin: 0;
font-size: clamp(1.25rem, 1.05rem + .7vw, 1.7rem);
line-height: 1.3;
letter-spacing: -.025em;
align-self: center;
}
.atf-vt-schermo {
overflow: hidden;
border-radius: var(--atf-radius-lg);
background: var(--atf-ink);
box-shadow: var(--atf-shadow-lg);
line-height: 0;
}
.atf-vt-schermo video {
display: block;
width: 100%;
height: auto;
max-height: 78vh;
background: var(--atf-ink);
}
.atf-vt-blocco__su {
margin-top: var(--atf-space-3);
text-align: right;
font-size: .875rem;
}
.atf-vt-blocco__su a {
color: var(--atf-gray-6);
text-decoration: none;
border-bottom: 1px solid var(--atf-gray-3);
}
.atf-vt-blocco__su a:hover { color: var(--atf-primary); border-bottom-color: var(--atf-primary); }
/* =========================================================================
39. IL VOTO GOOGLE SULLA PAGINA CORSO
Deve farsi vedere senza rubare la scena al prezzo: sta in riga con il
contatore studenti, stessa forma a pillola del resto del sito, e si
apre sulla scheda Google dove le recensioni si leggono davvero.
====================================================================== */
.atf-course-hero__prove {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
}
.atf-google {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5em .95em;
border-radius: var(--atf-radius-pill);
border: 1.5px solid var(--atf-gray-2);
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--atf-gray-8);
text-decoration: none;
line-height: 1;
white-space: nowrap;
transition: transform .3s var(--atf-ease), border-color var(--atf-transition),
box-shadow var(--atf-transition);
}
.atf-google:hover {
transform: translateY(-2px);
border-color: rgba(127, 117, 252, .45);
box-shadow: var(--atf-shadow);
color: var(--atf-gray-9);
}
.atf-google__voto {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -.02em;
color: var(--atf-ink);
}
.atf-google__stelle {
color: #fbbc04; /* il giallo delle stelle di Google */
font-size: .8125rem;
letter-spacing: .06em;
}
.atf-google__testo {
font-size: .8125rem;
font-weight: 500;
color: var(--atf-gray-6);
}
.atf-google__testo strong { font-weight: 700; color: var(--atf-gray-8); }
@media (max-width: 480px) {
.atf-course-hero__prove { gap: .5rem; }
.atf-google { padding: .45em .8em; }
.atf-google__testo { font-size: .75rem; }
}
/* =========================================================================
40. DOCUMENTI RILASCIATI: SI APRONO IN GRANDE
In pagina i fac-simile sono francobolli e le diciture non si leggono.
Al clic si apre l'immagine grande, con accanto la spiegazione di cosa
sia quel documento — testo che finora stava nel codice e non si vedeva
da nessuna parte. Fatto a mano, senza librerie: sono poche righe e non
vale una dipendenza in più su un sito che stiamo alleggerendo.
====================================================================== */
/* Il pulsante non deve sembrare un pulsante: eredita la scheda che c'era. */
.atf-doc__apri {
display: flex;
align-items: center;
gap: var(--atf-space-3);
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: zoom-in;
}
.atf-doc__apri:focus-visible { outline: 3px solid var(--atf-primary); outline-offset: 4px; border-radius: var(--atf-radius-sm); }
.atf-doc__thumb { position: relative; }
/* La lentina compare al passaggio: dice che si può ingrandire senza
sporcare la scheda quando non serve. */
.atf-doc__lente {
position: absolute;
right: -6px;
bottom: -6px;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--atf-gradient);
color: #fff;
box-shadow: var(--atf-shadow-brand);
opacity: 0;
transform: scale(.7);
transition: opacity var(--atf-transition), transform .25s var(--atf-ease);
}
.atf-doc__lente svg { width: 14px; height: 14px; }
.atf-doc__apri:hover .atf-doc__lente,
.atf-doc__apri:focus-visible .atf-doc__lente { opacity: 1; transform: scale(1); }
.atf-doc__apri:hover .atf-doc__thumb img { transform: translateY(-3px); }
.atf-doc__thumb img { transition: transform .3s var(--atf-ease); }
/* ---- Il riquadro grande ---- */
.atf-lente {
position: fixed;
inset: 0;
z-index: 1000000; /* sopra i pulsanti flottanti dei plugin */
display: grid;
place-items: center;
padding: clamp(1rem, .6rem + 2vw, 2.5rem);
opacity: 0;
transition: opacity .2s var(--atf-ease);
}
.atf-lente[hidden] { display: none; }
.atf-lente.is-on { opacity: 1; }
.atf-lente__velo {
position: absolute;
inset: 0;
background: rgba(12, 13, 16, .78);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
cursor: zoom-out;
}
.atf-lente__box {
position: relative;
width: min(980px, 100%);
max-height: 100%;
overflow: auto;
padding: clamp(1.1rem, .8rem + 1vw, 1.8rem);
/* spazio in basso riservato alle frecce, che non devono mai
finire sopra al testo della didascalia */
padding-bottom: 68px;
border-radius: var(--atf-radius-lg);
background: var(--atf-surface);
box-shadow: var(--atf-shadow-lg);
transform: translateY(12px) scale(.98);
transition: transform .25s var(--atf-ease);
}
.atf-lente.is-on .atf-lente__box { transform: none; }
.atf-lente__figura {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: center;
gap: clamp(1rem, .7rem + 1.4vw, 2rem);
margin: 0;
}
@media (max-width: 780px) { .atf-lente__figura { grid-template-columns: 1fr; } }
.atf-lente__img {
display: block;
width: 100%;
height: auto;
max-height: 68vh;
object-fit: contain;
border-radius: var(--atf-radius);
background: var(--atf-gray-1);
}
.atf-lente__dida { display: flex; flex-direction: column; gap: .45rem; }
.atf-lente__titolo { font-size: 1.35rem; letter-spacing: -.03em; color: var(--atf-ink); line-height: 1.25; }
.atf-lente__ente { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--atf-primary); }
.atf-lente__testo { margin-top: .3rem; font-size: .9375rem; line-height: 1.7; color: var(--atf-gray-7); }
/* ---- Chiusura e frecce ---- */
.atf-lente__x,
.atf-lente__nav {
position: absolute;
z-index: 2;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: var(--atf-surface);
color: var(--atf-gray-8);
box-shadow: var(--atf-shadow);
cursor: pointer;
transition: transform .25s var(--atf-ease), color var(--atf-transition);
}
.atf-lente__x svg, .atf-lente__nav svg { width: 18px; height: 18px; }
.atf-lente__x:hover, .atf-lente__nav:hover { transform: scale(1.08); color: var(--atf-primary); }
.atf-lente__x:focus-visible, .atf-lente__nav:focus-visible { outline: 3px solid var(--atf-primary); outline-offset: 3px; }
.atf-lente__x { top: 12px; right: 12px; }
/* Le frecce stanno in basso a destra, dentro al riquadro. Fuori venivano
tagliate dal bordo; sopra l'immagine avrebbero coperto il documento,
che è esattamente la cosa che si è venuti a guardare. */
.atf-lente__nav { bottom: 14px; }
.atf-lente__nav--prev { right: 62px; }
.atf-lente__nav--next { right: 14px; }
@media (prefers-reduced-motion: reduce) {
.atf-lente, .atf-lente__box, .atf-doc__lente, .atf-doc__thumb img { transition: none; }
.atf-lente__box { transform: none; }
}
/* =========================================================================
41. LA RIGA "VIDEO PRATICI"
Compare solo sui corsi che hanno le riprese con istruttori reali, e si
accende dalla scheda del corso. Icona diversa dalla spunta delle altre
garanzie: è un'altra cosa e si deve capire senza doverlo scrivere.
====================================================================== */
.atf-course-facts__video .atf-ico-play {
flex: none;
width: 22px;
height: 22px;
color: var(--atf-primary);
}
.atf-course-facts__video span { color: var(--atf-gray-9); }
.atf-course-facts__video strong { font-weight: 700; }
/* =========================================================================
42. IL CHATBOT DI AI ENGINE, VESTITO COME IL SITO
Due cose in una.
La prima è un difetto vero: le risposte dell'assistente uscivano in
testo scuro su fondo scuro, cioè illeggibili. Non era un caso: il tema
del chatbot stampa `color: var(--mwai-fontColor)` e quella variabile era
impostata su un colore scuro. Bastava cambiarla.
La seconda è estetica: AI Engine espone tutti i suoi colori come
variabili CSS, quindi invece di combattere regola per regola gli
passiamo la palette del sito e il resto lo fa lui.
!important sulle variabili perché il plugin le scrive in linea
sull'elemento, e senza non le sposteremmo.
====================================================================== */
.mwai-chatbot-container,
.mwai-chatbot-container .mwai-window,
.mwai-window {
/* Testo e corpo: il fondo è scuro come le sezioni scure del sito,
quindi il testo deve essere chiaro. Questo è il difetto risolto. */
--mwai-fontColor: #eef0f4 !important;
--mwai-backgroundPrimaryColor: #14161a !important; /* --atf-ink */
--mwai-backgroundSecondaryColor: #1e2128 !important;
/* La bolla dell'assistente: un velo chiaro sul fondo scuro, come le
schede della sezione "numeri" della homepage. */
--mwai-backgroundAiColor: rgba(255, 255, 255, .07) !important;
/* La bolla di chi scrive: il viola del brand, testo bianco. */
--mwai-backgroundUserColor: #7f75fc !important;
/* Accenti: pulsante di invio, cursore, dettagli. */
--mwai-primaryColor: #7f75fc !important;
--mwai-accentColor: #f468b1 !important;
/* Attenzione: `headerColor` NON e' lo sfondo della testata, e' quello che
ci sta sopra — il titolo, la freccia di ridimensionamento e le due
barrette che formano la X di chiusura (il plugin le disegna con
`background-color: var(--mwai-headerColor)`). Va tenuto chiaro, o la
X sparisce dentro il colore della testata. Lo sfondo e'
`backgroundHeaderColor`. */
--mwai-headerColor: #ffffff !important;
--mwai-backgroundHeaderColor: #7f75fc !important;
--mwai-borderColor: rgba(255, 255, 255, .13) !important;
--mwai-lineColor: rgba(255, 255, 255, .13) !important;
/* Il pulsante rotondo che sta sempre in basso a destra. */
--mwai-bubbleColor: #7f75fc !important;
/* Il fumetto di invito accanto al pulsante. */
--mwai-iconTextBackgroundColor: #14161a !important;
--mwai-iconTextColor: #ffffff !important;
--mwai-conversationsBackgroundColor: #1e2128 !important;
--mwai-conversationsTextColor: #eef0f4 !important;
/* Forma e carattere: stessi raggi e stesso font del sito. */
--mwai-borderRadius: 18px !important;
--mwai-fontFamily: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
--mwai-fontSize: 15px !important;
--mwai-lineHeight: 1.6 !important;
}
/* ---- Rete di sicurezza sul testo ----
Se un domani il plugin smettesse di usare la variabile, queste due
righe tengono comunque il testo leggibile. È il difetto che ha
segnalato l'utente: meglio due cinture. */
.mwai-window .mwai-conversation .mwai-reply,
.mwai-window .mwai-conversation .mwai-reply p,
.mwai-window .mwai-conversation .mwai-reply li,
.mwai-window .mwai-body { color: #eef0f4; }
.mwai-window .mwai-conversation .mwai-reply.mwai-user,
.mwai-window .mwai-conversation .mwai-reply.mwai-user p { color: #ffffff; }
/* I link dentro le risposte devono staccare dal testo chiaro. */
.mwai-window .mwai-conversation .mwai-reply a {
color: #c9c3ff;
text-decoration: underline;
text-underline-offset: .16em;
}
.mwai-window .mwai-conversation .mwai-reply a:hover { color: #ffffff; }
/* Il testo in evidenza e il codice restano leggibili sul fondo scuro. */
.mwai-window .mwai-conversation .mwai-reply strong { color: #ffffff; }
.mwai-window .mwai-conversation .mwai-reply code {
background: rgba(255, 255, 255, .1);
color: #ffd9ef;
padding: .1em .35em;
border-radius: 6px;
}
/* ---- Testata: il gradiente del brand invece del colore piatto ----
Serve `!important`: il plugin scrive lo sfondo con un selettore piu'
specifico del nostro (`.mwai-chatgpt-theme.mwai-window .mwai-header`),
e senza questo il gradiente non si vedrebbe mai. */
.mwai-window .mwai-header {
background: linear-gradient(100deg, #f468b1 0%, #7f75fc 55%, #4b19f7 100%) !important;
}
/* ---- La X di chiusura e la freccia di ridimensionamento ----
Rete di sicurezza: se un domani cambia il tema del chatbot e le
barrette venissero disegnate con un'altra variabile, restano
comunque bianche e visibili sopra il gradiente. */
.mwai-window .mwai-header .mwai-buttons .mwai-close-button::before,
.mwai-window .mwai-header .mwai-buttons .mwai-close-button::after,
.mwai-window .mwai-header .mwai-buttons .mwai-resize-button::before {
background-color: #ffffff !important;
}
/* Un'area di tocco un po' piu' generosa e un riscontro al passaggio:
sul telefono 32px sono il minimo, e senza sfondo non si capisce
dove finisce il pulsante. */
.mwai-window .mwai-header .mwai-buttons .mwai-close-button,
.mwai-window .mwai-header .mwai-buttons .mwai-resize-button {
border-radius: 10px;
transition: background-color .18s ease;
}
.mwai-window .mwai-header .mwai-buttons .mwai-close-button:hover,
.mwai-window .mwai-header .mwai-buttons .mwai-resize-button:hover {
background-color: rgba(255, 255, 255, .18);
}
/* ---- Il pulsante rotondo: stessa ombra colorata dei bottoni del sito ---- */
.mwai-chatbot-container .mwai-trigger .mwai-icon-container {
background: linear-gradient(100deg, #f468b1 0%, #7f75fc 55%, #4b19f7 100%);
box-shadow: 0 14px 34px rgba(127, 117, 252, .38);
}
/* ---- Il fumetto di invito: la pillola del sito ---- */
.mwai-chatbot-container .mwai-icon-text {
border-radius: 999px;
box-shadow: 0 10px 34px rgba(20, 22, 26, .18);
font-weight: 500;
}
/* ---- Il campo di scrittura ---- */
.mwai-window .mwai-input-text textarea,
.mwai-window .mwai-input-text input {
color: #eef0f4;
font-family: inherit;
}
.mwai-window .mwai-input-text textarea::placeholder,
.mwai-window .mwai-input-text input::placeholder { color: rgba(238, 240, 244, .45); }
/* =========================================================================
43. IL PULSANTE DEL CERTIFICATO SULLE CARD DEI CORSI FINITI
Chi ha completato un corso non torna per rileggere le lezioni: torna
per il diploma. Prima doveva aprire il corso e cercare il banner verde
in mezzo alla pagina. Adesso ha un pulsante sulla card.
Volutamente secondario rispetto a "Rivedi il corso": bordo invece di
fondo pieno, verde invece del viola del sito. Il verde è lo stesso del
banner a cui porta, così quando la pagina si apre la persona riconosce
dove è finita.
====================================================================== */
.atf-card__certificato {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
margin-top: var(--atf-space-2);
padding: .7rem 1rem;
border: 1.5px solid rgba(16, 185, 129, .45);
border-radius: var(--atf-radius-2, 14px);
background: rgba(16, 185, 129, .07);
color: #047857;
font-weight: 600;
font-size: .93rem;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.atf-card__certificato:hover,
.atf-card__certificato:focus-visible {
background: rgba(16, 185, 129, .14);
border-color: rgba(16, 185, 129, .75);
color: #065f46;
transform: translateY(-1px);
}
.atf-ico-diploma {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
/* L'ancora del banner. Senza questo margine l'intestazione appiccicata
in cima coprirebbe proprio il titolo a cui stiamo portando la persona. */
#certificato {
scroll-margin-top: 120px;
}