/
con margini di
default): essendo un selettore con classe, batte in specificità le
regole generiche su tag come "p{margin-bottom:1.5em}" che i temi
tipicamente usano per la tipografia, senza bisogno di !important.
I nostri padding/margin voluti sono tutti su regole più specifiche
definite più sotto in questo file e restano quindi validi. */
.ts-course svg{ display:inline-block !important; vertical-align:middle; }
.ts-course h1,.ts-course h2,.ts-course h3,.ts-course h4{
font-family:'Poppins', 'Inter', sans-serif;
font-weight:800;
color:var(--ts-neutral-900);
margin:0;
letter-spacing:-0.01em;
}
.ts-course h1{ font-size:var(--ts-h1); margin-bottom:24px; line-height:1.15; }
.ts-course h2{ font-size:var(--ts-h2); margin-bottom:var(--ts-h2-mb); }
.ts-course h3{ font-size:var(--ts-h3); margin-bottom:12px; }
.ts-course h4{ font-size:var(--ts-h4); margin-bottom:12px; font-weight:700; }
.ts-course p{ font-size:var(--ts-text-size); line-height:1.6; color:var(--ts-text); margin:0; }
/* ---------- Header: macrocategoria, durata, attestato, descrizione ----------
NB: il titolo del corso NON è nel blocco — viene inserito separatamente
dalla pagina prodotto WordPress. */
.ts-header{ margin-bottom:64px; }
.ts-header__meta{
display:flex !important;
align-items:center !important;
gap:32px;
flex-wrap:wrap;
margin-bottom:28px;
}
.ts-badge{
display:inline-flex !important;
align-items:center !important;
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:var(--ts-h5);
padding:10px 22px;
border-radius:var(--ts-radius-md);
background:var(--ts-secondary-100);
color:var(--ts-secondary-600);
}
/* Varianti macrocategoria */
.ts-badge--future{ background:var(--ts-accent); color:var(--ts-neutral-900); }
.ts-badge--normativa{ background:var(--ts-secondary-700); color:var(--ts-white); }
.ts-badge--leadership{ background:var(--ts-secondary-100); color:var(--ts-primary); }
/* .ts-meta-item combina un'icona SVG e del testo sulla stessa riga.
Molti temi/page builder WordPress impongono reset globali del tipo
"svg{ display:block }" che, se la nostra regola inline-flex perde la
battaglia di specificità/ordine di caricamento col CSS del tema, fa
"cadere" l'icona sopra al testo su una riga propria. Le proprietà di
layout qui sotto sono quindi forzate con !important, e l'icona ha
anche un fallback (vertical-align) che funziona anche se il flex
dovesse comunque non applicarsi. */
.ts-meta-item{
display:inline-flex !important;
flex-direction:row !important;
align-items:center !important;
white-space:nowrap;
gap:12px;
font-family:'Poppins', sans-serif;
font-size:var(--ts-h5);
font-weight:700;
color:var(--ts-neutral-900);
}
.ts-meta-item svg{
display:inline-block !important;
vertical-align:middle;
flex:0 0 auto !important;
width:26px; height:26px;
color:var(--ts-neutral-900);
}
/* Testo dell'item avvolto in uno span (non un nodo di testo nudo): alcuni
temi WordPress applicano reset mirati agli elementi (svg, span, ecc.)
e "saltano" i nodi di testo, rendendo la spaziatura tra icona e testo
incoerente quando il testo è un nodo nudo accanto a un elemento sibling
dentro il flex. Avvolgerlo in uno span dà a entrambi lo stesso
comportamento di flex-item. */
.ts-meta-item__label{ display:inline-block; }
.ts-header__description{ max-width:900px; font-size:18px; line-height:1.65; color:var(--ts-neutral-900); }
/* ---------- Sezione: I Contenuti del corso ---------- */
.ts-chapters{ position:relative !important; padding-left:40px; margin-bottom:80px; }
.ts-chapters__rail{
position:absolute; left:6px; top:6px; bottom:6px; width:2px;
background:var(--ts-neutral-100);
}
.ts-chapters__dot{
position:absolute; left:0; width:14px; height:14px; border-radius:50%;
background:var(--ts-white); border:2px solid var(--ts-neutral-100);
}
.ts-chapters__dot--top{ top:-4px; }
.ts-chapters__dot--bottom{ bottom:-4px; }
.ts-chapters__grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:20px;
padding-bottom: 50px;
}
.ts-chapter-card{
background:var(--ts-neutral-50);
border-radius:var(--ts-radius-md);
padding:28px;
transition:transform .2s ease, box-shadow .2s ease;
}
.ts-chapter-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(10,14,39,.06);
}
/* ---------- Sezione: Cosa imparerai? ---------- */
.ts-learn{ margin-bottom:48px; }
.ts-learn__grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:16px 40px;
}
.ts-learn__item{
display:flex !important;
align-items:flex-start !important;
gap:12px;
}
.ts-learn__icon{
flex:0 0 auto;
width:20px; height:20px;
border-radius:50%;
border:2px solid var(--ts-primary);
margin-top:2px;
}
.ts-learn__item p{ color:var(--ts-neutral-900); }
/* ==========================================================================
Slider — 3 modalità decise dal markup HTML:
A) slide SVG generate -> più .ts-slide con .ts-slider__track dentro
B) immagini -> più .ts-slide con .ts-slider__figure dentro
C) PDF -> un unico .ts-slider__pdf + classe is-nav-hidden
Il JS mostra/nasconde le .ts-slide; con 0-1 slide la nav sparisce da sola.
========================================================================== */
.ts-slider{
position:relative;
border-radius:var(--ts-radius-lg);
overflow:hidden;
background:var(--ts-neutral-50);
box-shadow:0 1px 2px rgba(10,14,39,.06);
}
.ts-slider__viewport{
display:flex !important;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
outline-offset:-2px;
}
.ts-slider__viewport::-webkit-scrollbar{ display:none; }
.ts-slider__viewport:focus-visible{ outline:2px solid var(--ts-primary); }
.ts-slide{
flex:0 0 100% !important;
width:100%;
scroll-snap-align:start;
scroll-snap-stop:always;
}
@media (prefers-reduced-motion: reduce){
.ts-slider__viewport{ scroll-behavior:auto; }
}
/* -- A) slide "generata" (quote blu + contenuto + illustrazione SVG) --
Altezza FISSA e identica per tutte le slide: il contenuto testuale è
dimensionato dalla skill per starci comodamente (2 bullet brevi). */
.ts-slider__track{
display:grid !important;
/*grid-template-columns:38% 62%;*/
height:420px;
}
.ts-slider__quote{
background:var(--ts-primary);
color:var(--ts-white);
display:flex;
align-items:center;
padding:48px;
}
.ts-slider__quote p{
color:var(--ts-white);
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:22px;
line-height:1.4;
}
.ts-slider__content{
padding:48px 180px 48px 80px;
display:flex;
flex-direction:column;
justify-content:center;
gap:16px;
position:relative;
min-height:100%;
}
.ts-slider__content h3{ color:var(--ts-primary); }
.ts-slider__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.ts-slider__list li{
display:flex; gap:10px; align-items:flex-start;
font-size:var(--ts-text-size); color:var(--ts-text); line-height:1.6;
}
.ts-slider__list li::before{
content:"";
flex:0 0 auto;
width:7px; height:7px; border-radius:50%;
background:var(--ts-accent);
margin-top:8px;
}
.ts-slider__illustration{
position:absolute;
right:80px; top:50%; transform:translateY(-50%);
width:130px; height:130px;
}
.ts-slider__illustration svg{ width:100%; height:100%; }
/* -- B) modalità immagini — formato slide standard 16:9 -- */
.ts-slider__figure{
margin:0;
position:relative;
aspect-ratio:16/9;
background:var(--ts-neutral-100);
}
.ts-slider__figure img{
width:100%; height:100%;
object-fit:cover;
display:block;
}
.ts-slider__caption{
position:absolute; left:0; right:0; bottom:0;
padding:24px 28px;
background:linear-gradient(0deg, rgba(10,14,39,.72), transparent);
color:var(--ts-white);
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:16px;
}
/* -- C) modalità PDF (navigazione nativa del viewer) — formato 16:9 -- */
.ts-slider__pdf{ position:relative; background:var(--ts-neutral-100); flex:0 0 100%; width:100%; }
.ts-slider__pdf object,
.ts-slider__pdf iframe{
width:100%;
aspect-ratio:16/9;
height:auto;
border:0;
display:block;
}
.ts-slider__pdf-fallback{ padding:48px; text-align:center; }
.ts-slider__pdf-fallback a{ color:var(--ts-primary); font-weight:600; }
.ts-slider__open-link{
position:absolute; top:16px; right:16px;
background:var(--ts-white);
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
font-size:13px; font-weight:600;
text-decoration:none;
padding:8px 14px;
border-radius:var(--ts-radius-sm);
z-index:2;
}
.ts-slider__open-link:hover{ background:var(--ts-primary); color:var(--ts-white); }
/* -- Controlli condivisi -- */
.ts-slider__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px; height:44px;
border-radius:var(--ts-radius-sm);
background:rgba(255,255,255,.25);
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
display:flex !important; align-items:center !important; justify-content:center !important;
cursor:pointer;
transition:background .15s ease, color .15s ease;
z-index:2;
}
.ts-slider__arrow:hover{ background:var(--ts-primary); color:var(--ts-white); }
.ts-slider__arrow:focus-visible{ outline:2px solid var(--ts-neutral-900); outline-offset:2px; }
.ts-slider__arrow svg{ width:20px; height:20px; }
.ts-slider__arrow--prev{ left:16px; }
.ts-slider__arrow--next{ right:16px; }
.ts-slider__dots{
position:absolute;
left:50%; bottom:14px; transform:translateX(-50%);
display:flex !important; gap:4px;
z-index:2;
}
.ts-slider__dot{
width:32px; height:32px;
display:flex !important; align-items:center !important; justify-content:center !important;
background:transparent;
border:none; cursor:pointer; padding:0;
}
.ts-slider__dot::before{
content:"";
width:8px; height:8px; border-radius:50%;
background:rgba(10,14,39,.2);
transition:background .15s ease, transform .15s ease;
display:block;
}
.ts-slider__dot.is-active::before{ background:var(--ts-primary); transform:scale(1.25); }
.ts-slider__dot:focus-visible{ outline:2px solid var(--ts-primary); outline-offset:-4px; border-radius:50%; }
/* Nav nascosta quando non serve (PDF, singola immagine) — gestita da HTML o JS */
.ts-slider.is-nav-hidden .ts-slider__arrow,
.ts-slider.is-nav-hidden .ts-slider__dots{ display:none; }
@media (prefers-reduced-motion: reduce){
.ts-chapter-card{ transition:none; }
.ts-faq__panel{ transition:none; }
.ts-faq__icon{ transition:none; }
}
/* Helper: visivamente nascosto ma accessibile (annunci screen reader) */
.ts-sr-only{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ---------- FAQ ---------- */
.ts-faq{ margin-top:96px; }
.ts-faq__list{ display:flex !important; flex-direction:column !important; gap:12px; margin-top:32px; }
.ts-faq__item{
background:var(--ts-neutral-50);
border-radius:var(--ts-radius-md);
overflow:hidden;
border:1px solid transparent;
transition:border-color .15s ease;
}
.ts-faq__item.is-open{ border-color:var(--ts-secondary-100); }
.ts-faq__question{
width:100%;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
flex-direction:row !important;
gap:16px;
background:none;
border:none;
text-align:left;
padding:20px 24px;
cursor:pointer;
font-family:'Poppins', sans-serif;
font-weight:700;
font-size:var(--ts-h5);
color:var(--ts-neutral-900);
}
.ts-faq__question:focus-visible{ outline:2px solid var(--ts-primary); outline-offset:-2px; border-radius:var(--ts-radius-md); }
/* Testo della domanda avvolto in uno span (stesso motivo del meta-item
qui sopra): due elementi-sibling reali (testo + icona) invece di un
nodo di testo nudo + un elemento, così lo spazio distribuito da
justify-content:space-between resta coerente in ogni tema. */
.ts-faq__question-text{ flex:1 1 auto; min-width:0; }
.ts-faq__icon{
flex:0 0 auto !important;
width:28px; height:28px;
border-radius:50%;
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
display:flex !important; align-items:center !important; justify-content:center !important;
transition:transform .25s ease, background .15s ease, color .15s ease;
}
.ts-faq__item.is-open .ts-faq__icon{
transform:rotate(45deg);
background:var(--ts-primary);
color:var(--ts-white);
}
.ts-faq__icon svg{ width:14px; height:14px; }
.ts-faq__panel{
display:grid !important;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease;
}
.ts-faq__item.is-open .ts-faq__panel{ grid-template-rows:1fr; }
.ts-faq__panel-inner{ overflow:hidden; }
.ts-faq__answer{
padding:0 24px 22px !important;
margin:0 !important;
color:var(--ts-text);
}
/* ==========================================================================
Responsive — tipografia mobile da UI kit (H1 28, H2 24, H3 20, H4 16)
========================================================================== */
@media (max-width:768px){
.ts-course{ padding:40px 20px; }
.ts-course h1{ font-size:28px; margin-bottom:16px; }
.ts-course h2{ font-size:24px; margin-bottom:24px; }
.ts-course h3{ font-size:20px; }
.ts-course h4{ font-size:16px; }
.ts-header{ margin-bottom:48px; }
.ts-header__meta{ gap:16px 20px; margin-bottom:20px; }
.ts-badge{ font-size:14px; padding:8px 16px; }
.ts-meta-item{ font-size:14px; gap:8px; }
.ts-meta-item svg{ width:20px; height:20px; }
.ts-header__description{ font-size:15px; }
.ts-chapters{ padding-left:28px; margin-bottom:56px; }
.ts-chapters__grid{ grid-template-columns:1fr; gap:14px; }
.ts-learn__grid{ grid-template-columns:1fr; gap:16px; }
/* SVG: altezza fissa e identica per tutte le slide anche su mobile */
.ts-slider__track{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:520px; }
.ts-slider__quote{ padding:28px 24px; }
.ts-slider__quote p{ font-size:18px; }
.ts-slider__content{ padding:28px 24px 64px; }
.ts-slider__illustration{ display:none; }
/* Immagini e PDF: stesso formato standard 16:9 anche su mobile */
.ts-slider__figure{ aspect-ratio:16/9; }
.ts-slider__open-link{ font-size:12px; padding:6px 10px; }
/* Frecce: rimosse dalla vista su mobile (swipe + dots sono i controlli
primari), ma restano nel DOM e RIappaiono quando ricevono il focus
da tastiera — nessuna perdita di accessibilità. */
.ts-slider__arrow{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ts-slider__arrow:focus{
width:44px; height:44px; margin:0;
clip:auto; overflow:visible; white-space:normal;
top:50%; transform:translateY(-50%);
}
.ts-slider__arrow--prev:focus{ left:12px; }
.ts-slider__arrow--next:focus{ right:12px; }
.ts-slider__dot{ width:36px; height:36px; }
.ts-faq{ margin-top:64px; }
.ts-faq__question{ padding:16px 18px; font-size:15px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6a8a06 *//* ==========================================================================
TreSkill – Course content block (treskill-course.css)
Stile a livello di pagina per la sezione prodotto/corso.
Tutto è scopato sotto .ts-course per convivere col tema WordPress.
Richiede i font: Poppins (600/700/800) e Inter (400/500/600).
========================================================================== */
.ts-course{
--ts-primary:#1e3fef;
--ts-primary-dark:#1631b8;
--ts-white:#ffffff;
--ts-neutral-50:#f7f7f9;
--ts-neutral-100:#e6e7eb;
--ts-neutral-900:#0a0e27;
--ts-secondary-100:#e3e8fd;
--ts-secondary-600:#1b2f8f;
--ts-secondary-700:#17246b;
--ts-accent:#f2a65a;
--ts-text:#3a3d4d;
--ts-radius-lg:16px;
--ts-radius-md:12px;
--ts-radius-sm:8px;
/* Type scale — UI kit desktop */
--ts-h1:48px; --ts-h1-mb:48px;
--ts-h2:32px; --ts-h2-mb:32px;
--ts-h3:28px; --ts-h3-mb:28px;
--ts-h4:20px; --ts-h4-mb:20px;
--ts-h5:16px; --ts-h5-mb:16px;
--ts-text-size:15px;
--ts-small-size:13px;
font-family:'Inter', system-ui, -apple-system, sans-serif;
color:var(--ts-neutral-900);
background:var(--ts-white);
max-width:1200px;
margin:0 auto;
padding:0 24px 64px 0px;
box-sizing:border-box;
}
.ts-course *{ box-sizing:border-box; margin:0; padding:0; }
/* Reset ampio contro margini/padding "iniettati" dal tema o da wpautop
(WordPress avvolge spesso l'HTML grezzo in
/
con margini di
default): essendo un selettore con classe, batte in specificità le
regole generiche su tag come "p{margin-bottom:1.5em}" che i temi
tipicamente usano per la tipografia, senza bisogno di !important.
I nostri padding/margin voluti sono tutti su regole più specifiche
definite più sotto in questo file e restano quindi validi. */
.ts-course svg{ display:inline-block !important; vertical-align:middle; }
.ts-course h1,.ts-course h2,.ts-course h3,.ts-course h4{
font-family:'Poppins', 'Inter', sans-serif;
font-weight:800;
color:var(--ts-neutral-900);
margin:0;
letter-spacing:-0.01em;
}
.ts-course h1{ font-size:var(--ts-h1); margin-bottom:24px; line-height:1.15; }
.ts-course h2{ font-size:var(--ts-h2); margin-bottom:var(--ts-h2-mb); }
.ts-course h3{ font-size:var(--ts-h3); margin-bottom:12px; }
.ts-course h4{ font-size:var(--ts-h4); margin-bottom:12px; font-weight:700; }
.ts-course p{ font-size:var(--ts-text-size); line-height:1.6; color:var(--ts-text); margin:0; }
/* ---------- Header: macrocategoria, durata, attestato, descrizione ----------
NB: il titolo del corso NON è nel blocco — viene inserito separatamente
dalla pagina prodotto WordPress. */
.ts-header{ margin-bottom:64px; }
.ts-header__meta{
display:flex !important;
align-items:center !important;
gap:32px;
flex-wrap:wrap;
margin-bottom:28px;
}
.ts-badge{
display:inline-flex !important;
align-items:center !important;
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:var(--ts-h5);
padding:10px 22px;
border-radius:var(--ts-radius-md);
background:var(--ts-secondary-100);
color:var(--ts-secondary-600);
}
/* Varianti macrocategoria */
.ts-badge--future{ background:var(--ts-accent); color:var(--ts-neutral-900); }
.ts-badge--normativa{ background:var(--ts-secondary-700); color:var(--ts-white); }
.ts-badge--leadership{ background:var(--ts-secondary-100); color:var(--ts-primary); }
/* .ts-meta-item combina un'icona SVG e del testo sulla stessa riga.
Molti temi/page builder WordPress impongono reset globali del tipo
"svg{ display:block }" che, se la nostra regola inline-flex perde la
battaglia di specificità/ordine di caricamento col CSS del tema, fa
"cadere" l'icona sopra al testo su una riga propria. Le proprietà di
layout qui sotto sono quindi forzate con !important, e l'icona ha
anche un fallback (vertical-align) che funziona anche se il flex
dovesse comunque non applicarsi. */
.ts-meta-item{
display:inline-flex !important;
flex-direction:row !important;
align-items:center !important;
white-space:nowrap;
gap:12px;
font-family:'Poppins', sans-serif;
font-size:var(--ts-h5);
font-weight:700;
color:var(--ts-neutral-900);
}
.ts-meta-item svg{
display:inline-block !important;
vertical-align:middle;
flex:0 0 auto !important;
width:26px; height:26px;
color:var(--ts-neutral-900);
}
/* Testo dell'item avvolto in uno span (non un nodo di testo nudo): alcuni
temi WordPress applicano reset mirati agli elementi (svg, span, ecc.)
e "saltano" i nodi di testo, rendendo la spaziatura tra icona e testo
incoerente quando il testo è un nodo nudo accanto a un elemento sibling
dentro il flex. Avvolgerlo in uno span dà a entrambi lo stesso
comportamento di flex-item. */
.ts-meta-item__label{ display:inline-block; }
.ts-header__description{ max-width:900px; font-size:18px; line-height:1.65; color:var(--ts-neutral-900); }
/* ---------- Sezione: I Contenuti del corso ---------- */
.ts-chapters{ position:relative !important; padding-left:40px; margin-bottom:80px; }
.ts-chapters__rail{
position:absolute; left:6px; top:6px; bottom:6px; width:2px;
background:var(--ts-neutral-100);
}
.ts-chapters__dot{
position:absolute; left:0; width:14px; height:14px; border-radius:50%;
background:var(--ts-white); border:2px solid var(--ts-neutral-100);
}
.ts-chapters__dot--top{ top:-4px; }
.ts-chapters__dot--bottom{ bottom:-4px; }
.ts-chapters__grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:20px;
padding-bottom: 50px;
}
.ts-chapter-card{
background:var(--ts-neutral-50);
border-radius:var(--ts-radius-md);
padding:28px;
transition:transform .2s ease, box-shadow .2s ease;
}
.ts-chapter-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(10,14,39,.06);
}
/* ---------- Sezione: Cosa imparerai? ---------- */
.ts-learn{ margin-bottom:48px; }
.ts-learn__grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:16px 40px;
}
.ts-learn__item{
display:flex !important;
align-items:flex-start !important;
gap:12px;
}
.ts-learn__icon{
flex:0 0 auto;
width:20px; height:20px;
border-radius:50%;
border:2px solid var(--ts-primary);
margin-top:2px;
}
.ts-learn__item p{ color:var(--ts-neutral-900); }
/* ==========================================================================
Slider — 3 modalità decise dal markup HTML:
A) slide SVG generate -> più .ts-slide con .ts-slider__track dentro
B) immagini -> più .ts-slide con .ts-slider__figure dentro
C) PDF -> un unico .ts-slider__pdf + classe is-nav-hidden
Il JS mostra/nasconde le .ts-slide; con 0-1 slide la nav sparisce da sola.
========================================================================== */
.ts-slider{
position:relative;
border-radius:var(--ts-radius-lg);
overflow:hidden;
background:var(--ts-neutral-50);
box-shadow:0 1px 2px rgba(10,14,39,.06);
}
.ts-slider__viewport{
display:flex !important;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
outline-offset:-2px;
}
.ts-slider__viewport::-webkit-scrollbar{ display:none; }
.ts-slider__viewport:focus-visible{ outline:2px solid var(--ts-primary); }
.ts-slide{
flex:0 0 100% !important;
width:100%;
scroll-snap-align:start;
scroll-snap-stop:always;
}
@media (prefers-reduced-motion: reduce){
.ts-slider__viewport{ scroll-behavior:auto; }
}
/* -- A) slide "generata" (quote blu + contenuto + illustrazione SVG) --
Altezza FISSA e identica per tutte le slide: il contenuto testuale è
dimensionato dalla skill per starci comodamente (2 bullet brevi). */
.ts-slider__track{
display:grid !important;
/*grid-template-columns:38% 62%;*/
height:420px;
}
.ts-slider__quote{
background:var(--ts-primary);
color:var(--ts-white);
display:flex;
align-items:center;
padding:48px;
}
.ts-slider__quote p{
color:var(--ts-white);
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:22px;
line-height:1.4;
}
.ts-slider__content{
padding:48px 180px 48px 80px;
display:flex;
flex-direction:column;
justify-content:center;
gap:16px;
position:relative;
min-height:100%;
}
.ts-slider__content h3{ color:var(--ts-primary); }
.ts-slider__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.ts-slider__list li{
display:flex; gap:10px; align-items:flex-start;
font-size:var(--ts-text-size); color:var(--ts-text); line-height:1.6;
}
.ts-slider__list li::before{
content:"";
flex:0 0 auto;
width:7px; height:7px; border-radius:50%;
background:var(--ts-accent);
margin-top:8px;
}
.ts-slider__illustration{
position:absolute;
right:80px; top:50%; transform:translateY(-50%);
width:130px; height:130px;
}
.ts-slider__illustration svg{ width:100%; height:100%; }
/* -- B) modalità immagini — formato slide standard 16:9 -- */
.ts-slider__figure{
margin:0;
position:relative;
aspect-ratio:16/9;
background:var(--ts-neutral-100);
}
.ts-slider__figure img{
width:100%; height:100%;
object-fit:cover;
display:block;
}
.ts-slider__caption{
position:absolute; left:0; right:0; bottom:0;
padding:24px 28px;
background:linear-gradient(0deg, rgba(10,14,39,.72), transparent);
color:var(--ts-white);
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:16px;
}
/* -- C) modalità PDF (navigazione nativa del viewer) — formato 16:9 -- */
.ts-slider__pdf{ position:relative; background:var(--ts-neutral-100); flex:0 0 100%; width:100%; }
.ts-slider__pdf object,
.ts-slider__pdf iframe{
width:100%;
aspect-ratio:16/9;
height:auto;
border:0;
display:block;
}
.ts-slider__pdf-fallback{ padding:48px; text-align:center; }
.ts-slider__pdf-fallback a{ color:var(--ts-primary); font-weight:600; }
.ts-slider__open-link{
position:absolute; top:16px; right:16px;
background:var(--ts-white);
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
font-size:13px; font-weight:600;
text-decoration:none;
padding:8px 14px;
border-radius:var(--ts-radius-sm);
z-index:2;
}
.ts-slider__open-link:hover{ background:var(--ts-primary); color:var(--ts-white); }
/* -- Controlli condivisi -- */
.ts-slider__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px; height:44px;
border-radius:var(--ts-radius-sm);
background:rgba(255,255,255,.25);
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
display:flex !important; align-items:center !important; justify-content:center !important;
cursor:pointer;
transition:background .15s ease, color .15s ease;
z-index:2;
}
.ts-slider__arrow:hover{ background:var(--ts-primary); color:var(--ts-white); }
.ts-slider__arrow:focus-visible{ outline:2px solid var(--ts-neutral-900); outline-offset:2px; }
.ts-slider__arrow svg{ width:20px; height:20px; }
.ts-slider__arrow--prev{ left:16px; }
.ts-slider__arrow--next{ right:16px; }
.ts-slider__dots{
position:absolute;
left:50%; bottom:14px; transform:translateX(-50%);
display:flex !important; gap:4px;
z-index:2;
}
.ts-slider__dot{
width:32px; height:32px;
display:flex !important; align-items:center !important; justify-content:center !important;
background:transparent;
border:none; cursor:pointer; padding:0;
}
.ts-slider__dot::before{
content:"";
width:8px; height:8px; border-radius:50%;
background:rgba(10,14,39,.2);
transition:background .15s ease, transform .15s ease;
display:block;
}
.ts-slider__dot.is-active::before{ background:var(--ts-primary); transform:scale(1.25); }
.ts-slider__dot:focus-visible{ outline:2px solid var(--ts-primary); outline-offset:-4px; border-radius:50%; }
/* Nav nascosta quando non serve (PDF, singola immagine) — gestita da HTML o JS */
.ts-slider.is-nav-hidden .ts-slider__arrow,
.ts-slider.is-nav-hidden .ts-slider__dots{ display:none; }
@media (prefers-reduced-motion: reduce){
.ts-chapter-card{ transition:none; }
.ts-faq__panel{ transition:none; }
.ts-faq__icon{ transition:none; }
}
/* Helper: visivamente nascosto ma accessibile (annunci screen reader) */
.ts-sr-only{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ---------- FAQ ---------- */
.ts-faq{ margin-top:96px; }
.ts-faq__list{ display:flex !important; flex-direction:column !important; gap:12px; margin-top:32px; }
.ts-faq__item{
background:var(--ts-neutral-50);
border-radius:var(--ts-radius-md);
overflow:hidden;
border:1px solid transparent;
transition:border-color .15s ease;
}
.ts-faq__item.is-open{ border-color:var(--ts-secondary-100); }
.ts-faq__question{
width:100%;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
flex-direction:row !important;
gap:16px;
background:none;
border:none;
text-align:left;
padding:20px 24px;
cursor:pointer;
font-family:'Poppins', sans-serif;
font-weight:700;
font-size:var(--ts-h5);
color:var(--ts-neutral-900);
}
.ts-faq__question:focus-visible{ outline:2px solid var(--ts-primary); outline-offset:-2px; border-radius:var(--ts-radius-md); }
/* Testo della domanda avvolto in uno span (stesso motivo del meta-item
qui sopra): due elementi-sibling reali (testo + icona) invece di un
nodo di testo nudo + un elemento, così lo spazio distribuito da
justify-content:space-between resta coerente in ogni tema. */
.ts-faq__question-text{ flex:1 1 auto; min-width:0; }
.ts-faq__icon{
flex:0 0 auto !important;
width:28px; height:28px;
border-radius:50%;
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
display:flex !important; align-items:center !important; justify-content:center !important;
transition:transform .25s ease, background .15s ease, color .15s ease;
}
.ts-faq__item.is-open .ts-faq__icon{
transform:rotate(45deg);
background:var(--ts-primary);
color:var(--ts-white);
}
.ts-faq__icon svg{ width:14px; height:14px; }
.ts-faq__panel{
display:grid !important;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease;
}
.ts-faq__item.is-open .ts-faq__panel{ grid-template-rows:1fr; }
.ts-faq__panel-inner{ overflow:hidden; }
.ts-faq__panel p{ padding:0 24px 22px; color:var(--ts-text); }
/* ==========================================================================
Responsive — tipografia mobile da UI kit (H1 28, H2 24, H3 20, H4 16)
========================================================================== */
@media (max-width:768px){
.ts-course{ padding:40px 20px; }
.ts-course h1{ font-size:28px; margin-bottom:16px; }
.ts-course h2{ font-size:24px; margin-bottom:24px; }
.ts-course h3{ font-size:20px; }
.ts-course h4{ font-size:16px; }
.ts-header{ margin-bottom:48px; }
.ts-header__meta{ gap:16px 20px; margin-bottom:20px; }
.ts-badge{ font-size:14px; padding:8px 16px; }
.ts-meta-item{ font-size:14px; gap:8px; }
.ts-meta-item svg{ width:20px; height:20px; }
.ts-header__description{ font-size:15px; }
.ts-chapters{ padding-left:28px; margin-bottom:56px; }
.ts-chapters__grid{ grid-template-columns:1fr; gap:14px; }
.ts-learn__grid{ grid-template-columns:1fr; gap:16px; }
/* SVG: altezza fissa e identica per tutte le slide anche su mobile */
.ts-slider__track{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:520px; }
.ts-slider__quote{ padding:28px 24px; }
.ts-slider__quote p{ font-size:18px; }
.ts-slider__content{ padding:28px 24px 64px; }
.ts-slider__illustration{ display:none; }
/* Immagini e PDF: stesso formato standard 16:9 anche su mobile */
.ts-slider__figure{ aspect-ratio:16/9; }
.ts-slider__open-link{ font-size:12px; padding:6px 10px; }
/* Frecce: rimosse dalla vista su mobile (swipe + dots sono i controlli
primari), ma restano nel DOM e RIappaiono quando ricevono il focus
da tastiera — nessuna perdita di accessibilità. */
.ts-slider__arrow{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ts-slider__arrow:focus{
width:44px; height:44px; margin:0;
clip:auto; overflow:visible; white-space:normal;
top:50%; transform:translateY(-50%);
}
.ts-slider__arrow--prev:focus{ left:12px; }
.ts-slider__arrow--next:focus{ right:12px; }
.ts-slider__dot{ width:36px; height:36px; }
.ts-faq{ margin-top:64px; }
.ts-faq__question{ padding:16px 18px; font-size:15px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d122ef9 *//* ==========================================================================
TreSkill – Course content block (treskill-course.css)
Stile a livello di pagina per la sezione prodotto/corso.
Tutto è scopato sotto .ts-course per convivere col tema WordPress.
Richiede i font: Poppins (600/700/800) e Inter (400/500/600).
========================================================================== */
.ts-course{
--ts-primary:#1e3fef;
--ts-primary-dark:#1631b8;
--ts-white:#ffffff;
--ts-neutral-50:#f7f7f9;
--ts-neutral-100:#e6e7eb;
--ts-neutral-900:#0a0e27;
--ts-secondary-100:#e3e8fd;
--ts-secondary-600:#1b2f8f;
--ts-secondary-700:#17246b;
--ts-accent:#f2a65a;
--ts-text:#3a3d4d;
--ts-radius-lg:16px;
--ts-radius-md:12px;
--ts-radius-sm:8px;
/* Type scale — UI kit desktop */
--ts-h1:48px; --ts-h1-mb:48px;
--ts-h2:32px; --ts-h2-mb:32px;
--ts-h3:28px; --ts-h3-mb:28px;
--ts-h4:20px; --ts-h4-mb:20px;
--ts-h5:16px; --ts-h5-mb:16px;
--ts-text-size:15px;
--ts-small-size:13px;
font-family:'Inter', system-ui, -apple-system, sans-serif;
color:var(--ts-neutral-900);
background:var(--ts-white);
max-width:1200px;
margin:0 auto;
padding:0 24px 64px 0px;
box-sizing:border-box;
}
.ts-course *{ box-sizing:border-box; margin:0; padding:0; }
/* Reset ampio contro margini/padding "iniettati" dal tema o da wpautop
(WordPress avvolge spesso l'HTML grezzo in
/
con margini di
default): essendo un selettore con classe, batte in specificità le
regole generiche su tag come "p{margin-bottom:1.5em}" che i temi
tipicamente usano per la tipografia, senza bisogno di !important.
I nostri padding/margin voluti sono tutti su regole più specifiche
definite più sotto in questo file e restano quindi validi. */
.ts-course svg{ display:inline-block !important; vertical-align:middle; }
.ts-course h1,.ts-course h2,.ts-course h3,.ts-course h4{
font-family:'Poppins', 'Inter', sans-serif;
font-weight:800;
color:var(--ts-neutral-900);
margin:0;
letter-spacing:-0.01em;
}
.ts-course h1{ font-size:var(--ts-h1); margin-bottom:24px; line-height:1.15; }
.ts-course h2{ font-size:var(--ts-h2); margin-bottom:var(--ts-h2-mb); }
.ts-course h3{ font-size:var(--ts-h3); margin-bottom:12px; }
.ts-course h4{ font-size:var(--ts-h4); margin-bottom:12px; font-weight:700; }
.ts-course p{ font-size:var(--ts-text-size); line-height:1.6; color:var(--ts-text); margin:0; }
/* ---------- Header: macrocategoria, durata, attestato, descrizione ----------
NB: il titolo del corso NON è nel blocco — viene inserito separatamente
dalla pagina prodotto WordPress. */
.ts-header{ margin-bottom:64px; }
.ts-header__meta{
display:flex !important;
align-items:center !important;
gap:32px;
flex-wrap:wrap;
margin-bottom:28px;
}
.ts-badge{
display:inline-flex !important;
align-items:center !important;
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:var(--ts-h5);
padding:10px 22px;
border-radius:var(--ts-radius-md);
background:var(--ts-secondary-100);
color:var(--ts-secondary-600);
}
/* Varianti macrocategoria */
.ts-badge--future{ background:var(--ts-accent); color:var(--ts-neutral-900); }
.ts-badge--normativa{ background:var(--ts-secondary-700); color:var(--ts-white); }
.ts-badge--leadership{ background:var(--ts-secondary-100); color:var(--ts-primary); }
/* .ts-meta-item combina un'icona SVG e del testo sulla stessa riga.
Molti temi/page builder WordPress impongono reset globali del tipo
"svg{ display:block }" che, se la nostra regola inline-flex perde la
battaglia di specificità/ordine di caricamento col CSS del tema, fa
"cadere" l'icona sopra al testo su una riga propria. Le proprietà di
layout qui sotto sono quindi forzate con !important, e l'icona ha
anche un fallback (vertical-align) che funziona anche se il flex
dovesse comunque non applicarsi. */
.ts-meta-item{
display:inline-flex !important;
flex-direction:row !important;
align-items:center !important;
white-space:nowrap;
gap:12px;
font-family:'Poppins', sans-serif;
font-size:var(--ts-h5);
font-weight:700;
color:var(--ts-neutral-900);
}
.ts-meta-item svg{
display:inline-block !important;
vertical-align:middle;
flex:0 0 auto !important;
width:26px; height:26px;
color:var(--ts-neutral-900);
}
/* Testo dell'item avvolto in uno span (non un nodo di testo nudo): alcuni
temi WordPress applicano reset mirati agli elementi (svg, span, ecc.)
e "saltano" i nodi di testo, rendendo la spaziatura tra icona e testo
incoerente quando il testo è un nodo nudo accanto a un elemento sibling
dentro il flex. Avvolgerlo in uno span dà a entrambi lo stesso
comportamento di flex-item. */
.ts-meta-item__label{ display:inline-block; }
.ts-header__description{ max-width:900px; font-size:18px; line-height:1.65; color:var(--ts-neutral-900); }
/* ---------- Sezione: I Contenuti del corso ---------- */
.ts-chapters{ position:relative !important; padding-left:40px; margin-bottom:80px; }
.ts-chapters__rail{
position:absolute; left:6px; top:6px; bottom:6px; width:2px;
background:var(--ts-neutral-100);
}
.ts-chapters__dot{
position:absolute; left:0; width:14px; height:14px; border-radius:50%;
background:var(--ts-white); border:2px solid var(--ts-neutral-100);
}
.ts-chapters__dot--top{ top:-4px; }
.ts-chapters__dot--bottom{ bottom:-4px; }
.ts-chapters__grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:20px;
padding-bottom: 50px;
}
.ts-chapter-card{
background:var(--ts-neutral-50);
border-radius:var(--ts-radius-md);
padding:28px;
transition:transform .2s ease, box-shadow .2s ease;
}
.ts-chapter-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(10,14,39,.06);
}
/* ---------- Sezione: Cosa imparerai? ---------- */
.ts-learn{ margin-bottom:48px; }
.ts-learn__grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:16px 40px;
}
.ts-learn__item{
display:flex !important;
align-items:flex-start !important;
gap:12px;
}
.ts-learn__icon{
flex:0 0 auto;
width:20px; height:20px;
border-radius:50%;
border:2px solid var(--ts-primary);
margin-top:2px;
}
.ts-learn__item p{ color:var(--ts-neutral-900); }
/* ==========================================================================
Slider — 3 modalità decise dal markup HTML:
A) slide SVG generate -> più .ts-slide con .ts-slider__track dentro
B) immagini -> più .ts-slide con .ts-slider__figure dentro
C) PDF -> un unico .ts-slider__pdf + classe is-nav-hidden
Il JS mostra/nasconde le .ts-slide; con 0-1 slide la nav sparisce da sola.
========================================================================== */
.ts-slider{
position:relative;
border-radius:var(--ts-radius-lg);
overflow:hidden;
background:var(--ts-neutral-50);
box-shadow:0 1px 2px rgba(10,14,39,.06);
}
.ts-slider__viewport{
display:flex !important;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
outline-offset:-2px;
}
.ts-slider__viewport::-webkit-scrollbar{ display:none; }
.ts-slider__viewport:focus-visible{ outline:2px solid var(--ts-primary); }
.ts-slide{
flex:0 0 100% !important;
width:100%;
scroll-snap-align:start;
scroll-snap-stop:always;
}
@media (prefers-reduced-motion: reduce){
.ts-slider__viewport{ scroll-behavior:auto; }
}
/* -- A) slide "generata" (quote blu + contenuto + illustrazione SVG) --
Altezza FISSA e identica per tutte le slide: il contenuto testuale è
dimensionato dalla skill per starci comodamente (2 bullet brevi). */
.ts-slider__track{
display:grid !important;
/*grid-template-columns:38% 62%;*/
height:420px;
}
.ts-slider__quote{
background:var(--ts-primary);
color:var(--ts-white);
display:flex;
align-items:center;
padding:48px;
}
.ts-slider__quote p{
color:var(--ts-white);
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:22px;
line-height:1.4;
}
.ts-slider__content{
padding:48px 180px 48px 80px;
display:flex;
flex-direction:column;
justify-content:center;
gap:16px;
position:relative;
min-height:100%;
}
.ts-slider__content h3{ color:var(--ts-primary); }
.ts-slider__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.ts-slider__list li{
display:flex; gap:10px; align-items:flex-start;
font-size:var(--ts-text-size); color:var(--ts-text); line-height:1.6;
}
.ts-slider__list li::before{
content:"";
flex:0 0 auto;
width:7px; height:7px; border-radius:50%;
background:var(--ts-accent);
margin-top:8px;
}
.ts-slider__illustration{
position:absolute;
right:80px; top:50%; transform:translateY(-50%);
width:130px; height:130px;
}
.ts-slider__illustration svg{ width:100%; height:100%; }
/* -- B) modalità immagini — formato slide standard 16:9 -- */
.ts-slider__figure{
margin:0;
position:relative;
aspect-ratio:16/9;
background:var(--ts-neutral-100);
}
.ts-slider__figure img{
width:100%; height:100%;
object-fit:cover;
display:block;
}
.ts-slider__caption{
position:absolute; left:0; right:0; bottom:0;
padding:24px 28px;
background:linear-gradient(0deg, rgba(10,14,39,.72), transparent);
color:var(--ts-white);
font-family:'Poppins', sans-serif;
font-weight:600;
font-size:16px;
}
/* -- C) modalità PDF (navigazione nativa del viewer) — formato 16:9 -- */
.ts-slider__pdf{ position:relative; background:var(--ts-neutral-100); flex:0 0 100%; width:100%; }
.ts-slider__pdf object,
.ts-slider__pdf iframe{
width:100%;
aspect-ratio:16/9;
height:auto;
border:0;
display:block;
}
.ts-slider__pdf-fallback{ padding:48px; text-align:center; }
.ts-slider__pdf-fallback a{ color:var(--ts-primary); font-weight:600; }
.ts-slider__open-link{
position:absolute; top:16px; right:16px;
background:var(--ts-white);
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
font-size:13px; font-weight:600;
text-decoration:none;
padding:8px 14px;
border-radius:var(--ts-radius-sm);
z-index:2;
}
.ts-slider__open-link:hover{ background:var(--ts-primary); color:var(--ts-white); }
/* -- Controlli condivisi -- */
.ts-slider__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px; height:44px;
border-radius:var(--ts-radius-sm);
background:rgba(255,255,255,.25);
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
display:flex !important; align-items:center !important; justify-content:center !important;
cursor:pointer;
transition:background .15s ease, color .15s ease;
z-index:2;
}
.ts-slider__arrow:hover{ background:var(--ts-primary); color:var(--ts-white); }
.ts-slider__arrow:focus-visible{ outline:2px solid var(--ts-neutral-900); outline-offset:2px; }
.ts-slider__arrow svg{ width:20px; height:20px; }
.ts-slider__arrow--prev{ left:16px; }
.ts-slider__arrow--next{ right:16px; }
.ts-slider__dots{
position:absolute;
left:50%; bottom:14px; transform:translateX(-50%);
display:flex !important; gap:4px;
z-index:2;
}
.ts-slider__dot{
width:32px; height:32px;
display:flex !important; align-items:center !important; justify-content:center !important;
background:transparent;
border:none; cursor:pointer; padding:0;
}
.ts-slider__dot::before{
content:"";
width:8px; height:8px; border-radius:50%;
background:rgba(10,14,39,.2);
transition:background .15s ease, transform .15s ease;
display:block;
}
.ts-slider__dot.is-active::before{ background:var(--ts-primary); transform:scale(1.25); }
.ts-slider__dot:focus-visible{ outline:2px solid var(--ts-primary); outline-offset:-4px; border-radius:50%; }
/* Nav nascosta quando non serve (PDF, singola immagine) — gestita da HTML o JS */
.ts-slider.is-nav-hidden .ts-slider__arrow,
.ts-slider.is-nav-hidden .ts-slider__dots{ display:none; }
@media (prefers-reduced-motion: reduce){
.ts-chapter-card{ transition:none; }
.ts-faq__panel{ transition:none; }
.ts-faq__icon{ transition:none; }
}
/* Helper: visivamente nascosto ma accessibile (annunci screen reader) */
.ts-sr-only{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ---------- FAQ ---------- */
.ts-faq{ margin-top:96px; }
.ts-faq__list{ display:flex !important; flex-direction:column !important; gap:12px; margin-top:32px; }
.ts-faq__item{
background:var(--ts-neutral-50);
border-radius:var(--ts-radius-md);
overflow:hidden;
border:1px solid transparent;
transition:border-color .15s ease;
}
.ts-faq__item.is-open{ border-color:var(--ts-secondary-100); }
.ts-faq__question{
width:100%;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
flex-direction:row !important;
gap:16px;
background:none;
border:none;
text-align:left;
padding:20px 24px;
cursor:pointer;
font-family:'Poppins', sans-serif;
font-weight:700;
font-size:var(--ts-h5);
color:var(--ts-neutral-900);
}
.ts-faq__question:focus-visible{ outline:2px solid var(--ts-primary); outline-offset:-2px; border-radius:var(--ts-radius-md); }
/* Testo della domanda avvolto in uno span (stesso motivo del meta-item
qui sopra): due elementi-sibling reali (testo + icona) invece di un
nodo di testo nudo + un elemento, così lo spazio distribuito da
justify-content:space-between resta coerente in ogni tema. */
.ts-faq__question-text{ flex:1 1 auto; min-width:0; }
.ts-faq__icon{
flex:0 0 auto !important;
width:28px; height:28px;
border-radius:50%;
border:1.5px solid var(--ts-primary);
color:var(--ts-primary);
display:flex !important; align-items:center !important; justify-content:center !important;
transition:transform .25s ease, background .15s ease, color .15s ease;
}
.ts-faq__item.is-open .ts-faq__icon{
transform:rotate(45deg);
background:var(--ts-primary);
color:var(--ts-white);
}
.ts-faq__icon svg{ width:14px; height:14px; }
.ts-faq__panel{
display:grid !important;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease;
}
.ts-faq__item.is-open .ts-faq__panel{ grid-template-rows:1fr; }
.ts-faq__panel-inner{ overflow:hidden; }
.ts-faq__panel p{ padding:0 24px 22px; color:var(--ts-text); }
/* ==========================================================================
Responsive — tipografia mobile da UI kit (H1 28, H2 24, H3 20, H4 16)
========================================================================== */
@media (max-width:768px){
.ts-course{ padding:40px 20px; }
.ts-course h1{ font-size:28px; margin-bottom:16px; }
.ts-course h2{ font-size:24px; margin-bottom:24px; }
.ts-course h3{ font-size:20px; }
.ts-course h4{ font-size:16px; }
.ts-header{ margin-bottom:48px; }
.ts-header__meta{ gap:16px 20px; margin-bottom:20px; }
.ts-badge{ font-size:14px; padding:8px 16px; }
.ts-meta-item{ font-size:14px; gap:8px; }
.ts-meta-item svg{ width:20px; height:20px; }
.ts-header__description{ font-size:15px; }
.ts-chapters{ padding-left:28px; margin-bottom:56px; }
.ts-chapters__grid{ grid-template-columns:1fr; gap:14px; }
.ts-learn__grid{ grid-template-columns:1fr; gap:16px; }
/* SVG: altezza fissa e identica per tutte le slide anche su mobile */
.ts-slider__track{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:520px; }
.ts-slider__quote{ padding:28px 24px; }
.ts-slider__quote p{ font-size:18px; }
.ts-slider__content{ padding:28px 24px 64px; }
.ts-slider__illustration{ display:none; }
/* Immagini e PDF: stesso formato standard 16:9 anche su mobile */
.ts-slider__figure{ aspect-ratio:16/9; }
.ts-slider__open-link{ font-size:12px; padding:6px 10px; }
/* Frecce: rimosse dalla vista su mobile (swipe + dots sono i controlli
primari), ma restano nel DOM e RIappaiono quando ricevono il focus
da tastiera — nessuna perdita di accessibilità. */
.ts-slider__arrow{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ts-slider__arrow:focus{
width:44px; height:44px; margin:0;
clip:auto; overflow:visible; white-space:normal;
top:50%; transform:translateY(-50%);
}
.ts-slider__arrow--prev:focus{ left:12px; }
.ts-slider__arrow--next:focus{ right:12px; }
.ts-slider__dot{ width:36px; height:36px; }
.ts-faq{ margin-top:64px; }
.ts-faq__question{ padding:16px 18px; font-size:15px; }
}/* End custom CSS */