/* ============================================
CORSI · estende wiki.css con i componenti
specifici dei corsi (Federico Boggia)
Carica SEMPRE dopo ../wiki/wiki.css
============================================ */
/* ---- Categorie corso: riusano la palette wiki ---- */
[data-category="corso-ia"] { --cat-color: var(--wiki-ai); --cat-color-light: var(--wiki-ai-light); --cat-color-dark: #b45309; }
[data-category="corso-cna"] { --cat-color: var(--wiki-brand); --cat-color-light: var(--wiki-brand-light); --cat-color-dark: var(--wiki-primary-dark); }
[data-category="corso-excel"] { --cat-color: var(--wiki-seo); --cat-color-light: var(--wiki-seo-light); --cat-color-dark: #047857; }
[data-category="corso-prog"] { --cat-color: var(--wiki-web); --cat-color-light: var(--wiki-web-light); --cat-color-dark: #1d4ed8; }
[data-category="corso-turing"]{ --cat-color: var(--wiki-geo); --cat-color-light: var(--wiki-geo-light); --cat-color-dark: #6d28d9; }
[data-category="corso-its"] { --cat-color: #0891b2; --cat-color-light: rgba(8,145,178,0.09); --cat-color-dark: #0e7490; }
[data-category="corso-claude"]{ --cat-color: #f5851a; --cat-color-light: rgba(245,133,26,0.10); --cat-color-dark: #bd5f0e; }
[data-category="corso-excel-analisi"]{ --cat-color: #0891b2; --cat-color-light: rgba(8,145,178,0.10); --cat-color-dark: #0e7490; }
[data-category="corso-automazione"]{ --cat-color: var(--wiki-web); --cat-color-light: var(--wiki-web-light); --cat-color-dark: #1d4ed8; }
[data-category="corso-3d"] { --cat-color: #16a34a; --cat-color-light: rgba(22,163,74,0.10); --cat-color-dark: #15803d; }
[data-category="corso-whatsapp"]{ --cat-color: #0f766e; --cat-color-light: rgba(15,118,110,0.10); --cat-color-dark: #115e59; }
[data-category="corso-mac"] { --cat-color: #334155; --cat-color-light: rgba(51,65,85,0.10); --cat-color-dark: #1e293b; }
[data-category="corso-video"] { --cat-color: #6d28d9; --cat-color-light: rgba(109,40,217,0.10); --cat-color-dark: #5b21b6; }
[data-category="corso-processi"]{ --cat-color: #4338ca; --cat-color-light: rgba(67,56,202,0.10); --cat-color-dark: #3730a3; }
/* ⚠️ «TUTTO BLU IL CORSO» (2026-09-21, chiesta di Federico guardando la hero).
*
* `--cat-color` tinge già i titoli, i bordi e le icone dei paragrafi, e basta
* per gli altri corsi. Restavano rossi la briciola di pane
* (`.wiki-breadcrumb a`, in `wiki/wiki.css`) e le icone delle pastiglie della
* hero (`.corso-hero-meta .badge-meta [data-lucide]`, qui sotto): tutti e due
* leggono `--wiki-primary`, che è il rosso del sito. Sono rossi su TUTTI i
* corsi, anche su Claude che è arancio, quindi è una scelta vecchia del tema e
* non un guasto di questo corso.
*
* Qui il token si riscrive sulla hero e sul contenuto invece che sui singoli
* selettori: così prende anche i link dentro al testo e qualunque cosa rossa
* si aggiunga domani, senza doverla rincorrere.
* ⚠️ Si scrive su `.wiki-header` e `main`, NON sul `body`: il menu, la
* pastiglia «Login» e il footer sono del sito e restano rossi. Scrivendolo sul
* body diventerebbe blu anche quella roba, che su 211 pagine è l'unica cosa
* che si riconosce sempre uguale.
* Per estenderlo agli altri corsi basta cambiare il selettore in
* `[data-category^="corso-"]` e mettere `var(--cat-color)`. */
[data-category="corso-automazione"] .wiki-header,
[data-category="corso-automazione"] main,
[data-category="corso-3d"] .wiki-header,
[data-category="corso-3d"] main,
[data-category="corso-whatsapp"] .wiki-header,
[data-category="corso-whatsapp"] main,
[data-category="corso-mac"] .wiki-header,
[data-category="corso-mac"] main,
[data-category="corso-video"] .wiki-header,
[data-category="corso-video"] main,
[data-category="corso-processi"] .wiki-header,
[data-category="corso-processi"] main {
--wiki-primary: var(--cat-color);
--wiki-primary-dark: var(--cat-color-dark);
--fb-red: var(--cat-color);
}
/* Le cinque luci soffuse dietro alla hero (`.wiki-bubble` in `wiki/wiki.css`)
* hanno i colori scritti a mano, rosso e arancio, fuori dai token: sono il
* bagliore di marca e per questo non seguono `--cat-color`. Qui le riportiamo
* sul colore del corso, sennò la hero resta velata di rosa sotto a un titolo
* blu. Restano diverse fra loro per misura, posizione e animazione, che è
* quello che le fa sembrare cinque luci invece di una.
* ⚠️ Tre selettori di classe, così vince su `.wiki-bubble:nth-child(n)` senza
* dipendere dall'ordine in cui i due fogli vengono caricati. */
[data-category="corso-automazione"] .wiki-header .wiki-bubble,
[data-category="corso-3d"] .wiki-header .wiki-bubble,
[data-category="corso-whatsapp"] .wiki-header .wiki-bubble,
[data-category="corso-video"] .wiki-header .wiki-bubble,
[data-category="corso-processi"] .wiki-header .wiki-bubble {
background: radial-gradient(circle,
color-mix(in srgb, var(--cat-color) 12%, transparent) 0%,
transparent 70%);
}
/* ⚠️ Qui c'erano sette gradienti pieni che ridipingevano l'hero della pagina,
uno per categoria di corso. Erano rimasti da quando l'hero era scuro con il
testo bianco sopra: da quando `.wiki-header` è bianco con il testo scuro,
quei gradienti facevano testo nero su fondo blu, verde o viola, cioè pagine
che non si leggevano. Tolti.
Il colore della categoria non è sparito: si vede nel filo di gradiente sotto
all'hero, nelle icone, nei bottoni e nel bordo delle card, che è come lo
usano le landing. Il fondo resta chiaro dappertutto. */
[data-category^="corso-"] .wiki-header::after { background: linear-gradient(90deg, var(--cat-color-dark), var(--cat-color), var(--cat-color-dark)); }
/* ---- Badge meta nell'hero (sotto il lead) ---- */
.corso-hero-meta {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: 1.2rem;
}
.corso-hero-meta .badge-meta {
display: inline-flex;
align-items: center;
gap: .45rem;
background: var(--wiki-card-bg);
border: 1px solid var(--wiki-glass-border);
box-shadow: var(--wiki-shadow);
border-radius: 25px;
padding: .45rem 1.05rem;
font-size: .82rem;
font-weight: 600;
color: var(--wiki-text);
}
.corso-hero-meta .badge-meta [data-lucide] { color: var(--wiki-primary); }
.corso-hero-meta .badge-meta [data-lucide] { width: 15px; height: 15px; }
/* Badge categoria sopra il titolo della card corso (home) */
.wiki-cat-card .corso-badge {
display: inline-block;
font-size: .66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: .22rem .6rem;
border-radius: 20px;
margin-bottom: .85rem;
background: var(--cat-color-light);
color: var(--cat-color);
}
/* Meta riga (durata, destinatari, luogo) dentro la card corso */
.wiki-cat-card .corso-card-meta {
list-style: none;
padding: 0;
margin: 0 0 1rem;
}
.wiki-cat-card .corso-card-meta li {
display: flex;
align-items: center;
gap: .5rem;
font-size: .82rem;
color: var(--wiki-text-muted);
margin-bottom: .4rem;
}
.wiki-cat-card .corso-card-meta [data-lucide] { width: 15px; height: 15px; color: var(--cat-color); flex-shrink: 0; }
.wiki-cat-card .corso-card-cta {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .8rem;
font-weight: 700;
color: var(--cat-color);
text-transform: uppercase;
letter-spacing: .04em;
}
.wiki-cat-card .corso-card-cta [data-lucide] { width: 15px; height: 15px; }
/* ---- Lista lezioni (card numerate) ---- */
.corso-lezioni { display: grid; gap: .9rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.corso-lezione-card {
display: flex;
align-items: center;
gap: 1rem;
background: var(--wiki-card-bg);
border: 1px solid var(--wiki-glass-border);
border-radius: var(--wiki-radius);
padding: 1.1rem 1.25rem;
box-shadow: var(--wiki-shadow);
text-decoration: none;
color: var(--wiki-text);
transition: transform .2s, box-shadow .2s;
}
.corso-lezione-card:hover { transform: translateY(-2px); box-shadow: var(--wiki-shadow-lg); }
.corso-lezione-card .num {
width: 44px; height: 44px;
border-radius: 12px; flex-shrink: 0;
background: var(--cat-color-light); color: var(--cat-color);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.05rem;
}
.corso-lezione-card .num [data-lucide] { width: 22px; height: 22px; }
.corso-lezione-card .corso-lezione-body { flex: 1; min-width: 0; }
.corso-lezione-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; }
.corso-lezione-card p { font-size: .84rem; color: var(--wiki-text-muted); margin: 0; line-height: 1.45; }
.corso-lezione-card .arrow { color: var(--cat-color); flex-shrink: 0; }
.corso-lezione-card .arrow [data-lucide] { width: 20px; height: 20px; }
.corso-lezione-card.locked { opacity: .6; pointer-events: none; }
/* ---- Griglia statistiche corso ---- */
.corso-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.corso-stat {
background: var(--cat-color-light);
border: 1px solid var(--wiki-glass-border);
border-radius: var(--wiki-radius-sm);
padding: 1.15rem 1rem;
text-align: center;
}
.corso-stat [data-lucide] { width: 24px; height: 24px; color: var(--cat-color); }
.corso-stat .val { font-size: 1.3rem; font-weight: 800; margin: .4rem 0 .1rem; }
.corso-stat .lbl { font-size: .74rem; color: var(--wiki-text-muted); text-transform: uppercase; letter-spacing: .05em; }
/* ---- Banner finanziamento UE / GOL ---- */
.corso-eu-banner {
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
background: #003399;
color: #fff;
border-radius: var(--wiki-radius);
padding: 1.25rem 1.6rem;
margin: 1.75rem 0;
box-shadow: var(--wiki-shadow);
}
.corso-eu-banner .stars { font-size: 1.7rem; color: #FFCC00; letter-spacing: 3px; line-height: 1; flex-shrink: 0; }
.corso-eu-banner p { margin: 0; font-size: .86rem; line-height: 1.55; opacity: .95; }
.corso-eu-banner strong { color: #fff; }
/* ---- Lista "cosa imparerai" con check ----
⚠️ La riga era un flex con `flex-wrap`, e questo la rompeva: in un flex ogni
pezzo di testo è un elemento a sé, quindi «Tutte le lezioni dei corsi»
diventava tre blocchi con lo spazio in mezzo, e con `wrap` andavano pure a
capo uno per riga. Adesso la riga è testo normale e la spunta è appoggiata
nel margine. Non rimettere `display:flex` qui. */
.corso-checklist { list-style: none; padding: 0; margin: 1rem 0; }
.corso-checklist li {
position: relative;
padding-left: 1.7rem;
font-size: .92rem;
margin-bottom: .65rem;
line-height: 1.55;
}
.corso-checklist li [data-lucide] {
position: absolute;
left: 0;
top: .25em;
width: 18px;
height: 18px;
color: var(--cat-color);
}
/* Dove la spunta non c'è (metà delle liste non la scrive), il pallino. */
.corso-checklist li:not(:has([data-lucide]))::before {
content: '';
position: absolute;
left: .5rem;
top: .72em;
width: 5px;
height: 5px;
border-radius: 50%;
background: #cbd5e1;
}
/* ---- Pulsanti corso ----
Sono i `fb-btn` delle landing con un altro nome: pillola piena col colore
della pagina, ombra dello stesso colore, e quello vuoto col bordo grigio. */
.btn-corso, .btn-corso-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-size: .92rem;
font-weight: 600;
padding: .7rem 1.6rem;
border-radius: 40px;
text-decoration: none !important;
transition: transform .2s, box-shadow .2s, background .2s;
white-space: nowrap;
cursor: pointer;
}
.btn-corso {
background: var(--cat-color);
color: #fff !important;
border: 2px solid var(--cat-color);
box-shadow: 0 10px 24px color-mix(in srgb, var(--cat-color) 26%, transparent);
}
.btn-corso:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px color-mix(in srgb, var(--cat-color) 32%, transparent);
color: #fff !important;
}
.btn-corso-outline {
background: transparent;
color: var(--wiki-dark) !important;
border: 2px solid var(--wiki-glass-border);
}
.btn-corso-outline:hover { border-color: var(--wiki-dark); transform: translateY(-2px); }
.btn-corso [data-lucide], .btn-corso-outline [data-lucide] { width: 15px; height: 15px; }
/* ---- Griglia lezioni con azioni (landing corso) ---- */
.corso-lezione-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.25rem;
margin-top: 1rem;
}
.corso-lezione-item {
background: var(--wiki-card-bg);
border: 1px solid var(--wiki-glass-border);
border-radius: var(--wiki-radius);
padding: 1.6rem;
box-shadow: var(--wiki-shadow);
display: flex;
flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.corso-lezione-item:hover { transform: translateY(-4px); box-shadow: var(--wiki-shadow-lg); }
.corso-lezione-item .num {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--cat-color-light); color: var(--cat-color);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.05rem; margin-bottom: 1rem;
}
.corso-lezione-item h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.3; }
.corso-lezione-item > p { font-size: .88rem; color: var(--wiki-text-muted); margin: 0 0 1rem; line-height: 1.55; }
.corso-lezione-item .meta {
display: flex; gap: 1.2rem; flex-wrap: wrap;
font-size: .8rem; color: var(--wiki-text-muted);
margin-bottom: 1.1rem; padding-top: .9rem;
border-top: 1px solid var(--wiki-glass-border);
}
.corso-lezione-item .meta span { display: inline-flex; align-items: center; gap: .35rem; }
.corso-lezione-item .meta [data-lucide] { width: 14px; height: 14px; }
.corso-lezione-item .actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
/* Card cliccabile per intero: il pulsante principale copre tutta la card */
.corso-lezione-item { position: relative; }
.corso-lezione-item .actions > .btn-corso:first-child::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--wiki-radius);
z-index: 1;
}
/* il lift resta alla card, non al pulsante-overlay (evita lo sfarfallio) */
.corso-lezione-item .actions > .btn-corso:first-child:hover { transform: none; }
/* i pulsanti secondari (test, materiali) restano cliccabili sopra l'overlay */
.corso-lezione-item .actions > .btn-corso-outline,
.corso-lezione-item .actions > .btn-corso:not(:first-child) { position: relative; z-index: 2; }
/* ---- Tool badges ---- */
.corso-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.corso-tool {
display: inline-flex; align-items: center; gap: .4rem;
background: var(--cat-color-light);
border: 1px solid var(--wiki-glass-border);
border-radius: 25px;
padding: .45rem 1rem;
font-size: .85rem; font-weight: 600;
color: var(--cat-color);
}
.corso-tool [data-lucide] { width: 15px; height: 15px; }
/* ---- Due colonne info (panoramica corso) ---- */
.corso-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
}
/* ---- Navigazione lezione (prev/next in fondo) ---- */
.corso-lesson-nav {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2.5rem;
padding-top: 1.75rem;
border-top: 1px solid var(--wiki-glass-border);
}
/* ---- Blocchi di codice nelle lezioni (prog, ecc.) ---- */
.wiki-content pre {
background: #1e1e2e;
color: #e4e4e7;
border: 1px solid rgba(0,0,0,.25);
border-radius: var(--wiki-radius-sm);
padding: 1.15rem 1.3rem;
margin: 1.25rem 0;
overflow-x: auto;
font-size: .85rem;
line-height: 1.65;
}
.wiki-content pre code {
background: none;
padding: 0;
color: inherit;
font-size: inherit;
font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: pre;
}
/* etichetta linguaggio opzionale: */
.wiki-content pre[data-label] { position: relative; padding-top: 2.1rem; }
.wiki-content pre[data-label]::before {
content: attr(data-label);
position: absolute;
top: .5rem; left: 1.3rem;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.45);
font-family: 'Fira Code', ui-monospace, monospace;
}
.wiki-content :not(pre) > code {
background: var(--wiki-glass-bg);
color: var(--cat-color-dark, var(--wiki-text));
padding: .12rem .4rem;
border-radius: 4px;
font-size: .85em;
font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ---- CTA · Alta Formazione Superiore (home corsi) ---- */
.af-cta {
margin-top: 2.5rem;
background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
border-radius: var(--wiki-radius);
padding: 2.75rem 2rem;
text-align: center;
color: #fff;
}
.af-cta-eyebrow {
display: inline-block;
font-size: .72rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: #ff5a6e;
margin-bottom: .8rem;
}
.af-cta-head h2 { color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .75rem; line-height: 1.15; }
.af-cta-head > p { color: rgba(255,255,255,.72); font-size: .98rem; line-height: 1.6; max-width: 64ch; margin: 0 auto; }
.af-cta-head > p strong { color: #fff; }
.af-cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
margin: 2rem 0;
text-align: left;
}
.af-prof {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--wiki-radius-sm);
padding: 1.5rem 1.4rem;
}
.af-prof-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 12px;
background: rgba(96,165,250,.18); color: #93c5fd;
margin-bottom: 1rem;
}
.af-prof-icon [data-lucide] { width: 24px; height: 24px; }
.af-prof h3 { color: #fff; font-size: 1.08rem; font-weight: 700; margin: 0 0 .5rem; }
.af-prof p { color: rgba(255,255,255,.6); font-size: .86rem; line-height: 1.55; margin: 0; }
.af-cta-btn {
display: inline-flex; align-items: center; gap: .55rem;
background: var(--bn-indigo); color: #fff !important;
font-weight: 700; font-size: .95rem;
padding: .85rem 1.9rem; border-radius: 30px;
text-decoration: none !important;
transition: transform .2s, box-shadow .2s, background .2s;
}
.af-cta-btn:hover { background: var(--bn-purple); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(27,20,100,.35); color: #fff !important; }
.af-cta-btn span { font-size: 1.15em; line-height: 1; }
@media(max-width:600px) { .af-cta { padding: 2rem 1.3rem; } .af-cta-head h2 { font-size: 1.5rem; } }
/* ---- Fix overflow orizzontale su mobile (impaginazione lezioni) ---- */
/* .wiki-content è un grid item: con min-width:auto (default) non si restringe
sotto la larghezza intrinseca dei figli larghi (blocchi dei prompt,
tabelle), allargando tutta la pagina su Chrome/Android. min-width:0 lascia
restringere la colonna; i contenitori con overflow-x:auto (pre, tabelle)
scorrono internamente invece di sfondare la pagina. */
.wiki-layout > * { min-width: 0; }
/* ---- Tabelle lezioni: scroll orizzontale, mai overflow della pagina ---- */
/* Le lezioni usano (Bootstrap) dentro un
wrapper .table-responsive. Su schermi stretti la tabella scorre dentro il suo
contenitore invece di allargare tutta la pagina (fix impaginazione mobile). */
.wiki-content .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.25rem 0;
max-width: 100%;
}
.wiki-content .table-responsive > table { margin-bottom: 0; }
/* ---- Mobile: contenuto lezioni più leggibile su schermi stretti ---- */
@media (max-width: 640px) {
.wiki-container { padding: 2.25rem .85rem 3rem !important; }
.wiki-content { padding: 1.4rem 1.15rem; }
.wiki-header h1 { font-size: 1.7rem; }
.wiki-header .lead { font-size: 1rem; }
/* garantisce colonne leggibili quando la tabella scorre */
.wiki-content .table td, .wiki-content .table th { min-width: 7.5rem; }
.wiki-content .table td:first-child, .wiki-content .table th:first-child { min-width: 5rem; }
}
/* ============================================
VIDEO RIASSUNTO · player self-host con velocità
(inserito in cima alle pagine-lezione da video-player.js)
============================================ */
.video-riassunto { margin: 0 0 2.25rem; }
.video-riassunto .vr-title {
font-size: 1.15rem; font-weight: 700; margin: 0 0 .85rem; padding: 0; border: 0;
display: flex; align-items: center; gap: .55rem; color: var(--wiki-text);
}
.video-riassunto .vr-title::before { content: '▶'; color: var(--cat-color); font-size: .85em; }
.video-player {
background: #000; border-radius: var(--wiki-radius); overflow: hidden;
box-shadow: var(--wiki-shadow-lg); border: 1px solid var(--wiki-glass-border);
}
.video-player video { display: block; width: 100%; height: auto; background: #000; }
.video-player .vp-bar {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
background: #15161c; padding: .55rem .85rem;
}
.video-player .vp-label { color: #c9ccd4; font-size: .8rem; font-weight: 600; }
.video-player .vp-speeds { display: flex; gap: .35rem; flex-wrap: wrap; }
.video-player .vp-speeds button {
appearance: none; cursor: pointer; border: 1px solid #33353f; background: #22242c;
color: #d7dae1; font: inherit; font-size: .8rem; font-weight: 700;
padding: .3rem .7rem; border-radius: 20px; transition: background .15s, border-color .15s, color .15s;
}
.video-player .vp-speeds button:hover { border-color: var(--cat-color); color: #fff; }
.video-player .vp-speeds button.active { background: var(--cat-color); border-color: var(--cat-color); color: #fff; }
.video-player .vp-spacer { flex: 1; }
.video-player .vp-note { color: #7e828c; font-size: .72rem; }
@media (max-width: 640px) { .video-player .vp-note { display: none; } }
/* ---- Tabelle senza wrapper .table-responsive: scrollabili su mobile (fix overflow) ---- */
/* Le tabelle dentro .table-responsive (es. corso Claude) scorrono già nel wrapper.
Questa regola copre le tabelle "nude" (corso excel, excel-analisi) su schermi stretti. */
@media (max-width: 768px) {
.wiki-content > table,
.wiki-content :not(.table-responsive) > table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ---- Badge "gratuito" sulle card dei corsi (home corsi) ---- */
.corso-free-note {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
background: rgba(22,163,74,.08);
border: 1px solid rgba(22,163,74,.25);
border-radius: var(--wiki-radius-sm);
padding: .85rem 1.1rem;
margin-bottom: 1.5rem;
font-size: .92rem;
color: #14532d;
}
.corso-free-note [data-lucide] { width: 20px; height: 20px; color: #16a34a; flex-shrink: 0; }
.corso-free-note p { margin: 0; }
.corso-free-badge {
display: inline-flex; align-items: center; gap: .35rem;
background: #16a34a; color: #fff;
font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
padding: .28rem .7rem; border-radius: 20px;
}
.corso-free-badge [data-lucide] { width: 13px; height: 13px; color: #fff; }
/* ---- CTA · Federico Boggia Academy (corso a pagamento) ---- */
.academy-cta {
margin-top: 2.5rem;
background: var(--wiki-card-bg);
border: 2px solid var(--wiki-brand);
border-radius: var(--wiki-radius);
padding: 2.5rem 2rem;
box-shadow: var(--wiki-shadow);
}
.academy-eyebrow {
display: inline-block;
font-size: .72rem; font-weight: 800;
letter-spacing: .12em; text-transform: uppercase;
color: var(--wiki-brand);
margin-bottom: .7rem;
}
.academy-cta h2 {
font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em;
margin: 0 0 .6rem; line-height: 1.15;
border-top: none; padding-top: 0;
}
.academy-cta h2 em { font-style: italic; color: var(--wiki-brand); }
.academy-subtitle {
font-size: 1.15rem; font-weight: 700; color: var(--wiki-brand);
margin: 0 0 .8rem; line-height: 1.3;
}
.academy-lead { font-size: 1rem; line-height: 1.6; margin: 0 0 1.2rem; max-width: 70ch; }
.academy-facts { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.4rem; }
.academy-fact {
display: inline-flex; align-items: center; gap: .4rem;
background: var(--wiki-brand-light);
border: 1px solid rgba(194,0,28,.16);
color: var(--wiki-brand);
font-size: .84rem; font-weight: 700;
padding: .4rem .85rem; border-radius: 20px;
}
.academy-fact [data-lucide] { width: 15px; height: 15px; }
.academy-fact.price { background: var(--wiki-brand); color: #fff; border-color: var(--wiki-brand); }
.academy-why {
background: var(--wiki-brand-light);
border-left: 4px solid var(--wiki-brand);
border-radius: var(--wiki-radius-sm);
padding: 1.1rem 1.3rem;
margin-bottom: 1.6rem;
}
.academy-why h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .45rem; }
.academy-why p { font-size: .92rem; line-height: 1.6; margin: 0 0 .6rem; }
.academy-why p:last-child { margin-bottom: 0; }
.academy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.1rem;
margin-bottom: 1.6rem;
}
.academy-step {
background: rgba(0,0,0,.02);
border: 1px solid var(--wiki-glass-border);
border-radius: var(--wiki-radius-sm);
padding: 1.3rem 1.25rem;
}
.academy-step .step-n {
display: block;
font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--wiki-brand); margin-bottom: .35rem;
}
.academy-step h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .55rem; }
.academy-step ul { list-style: none; padding: 0; margin: 0; }
.academy-step li {
position: relative; padding-left: 1rem;
font-size: .86rem; line-height: 1.5; color: var(--wiki-text-muted);
margin-bottom: .35rem;
}
.academy-step li::before {
content: "›"; position: absolute; left: 0; top: -1px;
color: var(--wiki-brand); font-weight: 800;
}
/* Pannello iscrizione: l'accademia si compra e si gestisce dalla piattaforma (LMS) */
.academy-enroll {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 1.5rem 2rem;
align-items: start;
background: var(--wiki-brand-light);
border: 1px solid rgba(194,0,28,.16);
border-radius: var(--wiki-radius-sm);
padding: 1.5rem 1.6rem;
margin-bottom: 1.6rem;
}
.academy-enroll-label {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--wiki-text-muted);
margin-bottom: .7rem;
}
.academy-enroll-label [data-lucide] { width: 14px; height: 14px; }
.academy-price { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.academy-price b {
font-size: 3rem; font-weight: 800; line-height: 1;
letter-spacing: -.03em; color: var(--wiki-brand);
}
.academy-price-tag {
display: inline-flex; align-items: center; gap: .4rem;
background: var(--wiki-brand); color: #fff;
font-size: .84rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
padding: .5rem 1rem; border-radius: 30px;
box-shadow: 0 8px 22px rgba(194,0,28,.24);
}
.academy-price-tag [data-lucide] { width: 16px; height: 16px; }
.academy-price-note { font-size: .92rem; line-height: 1.6; margin: 0; color: var(--wiki-text-muted); }
.academy-price-note strong { color: var(--wiki-brand); }
.academy-includes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.academy-includes li {
position: relative; padding-left: 1.6rem;
font-size: .89rem; line-height: 1.55; color: var(--wiki-text-muted);
}
.academy-includes li::before {
content: "\2713"; position: absolute; left: 0; top: 0;
color: var(--wiki-brand); font-weight: 800;
}
.academy-includes li b { color: var(--wiki-text); font-weight: 700; }
.academy-foot { font-size: .85rem; line-height: 1.6; color: var(--wiki-text-muted); margin: 1rem 0 0; }
@media (max-width: 700px) {
.academy-enroll { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.25rem 1.1rem; }
.academy-price b { font-size: 2.4rem; }
}
.academy-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.academy-btn {
display: inline-flex; align-items: center; gap: .55rem;
background: var(--wiki-brand); color: #fff !important;
font-weight: 700; font-size: .95rem;
padding: .85rem 1.8rem; border-radius: 30px;
text-decoration: none !important;
transition: transform .2s, box-shadow .2s, background .2s;
}
.academy-btn:hover { background: var(--wiki-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(194,0,28,.3); color: #fff !important; }
.academy-btn [data-lucide] { width: 17px; height: 17px; }
.academy-btn-outline {
display: inline-flex; align-items: center; gap: .5rem;
border: 2px solid var(--wiki-brand); color: var(--wiki-brand) !important;
font-weight: 700; font-size: .92rem;
padding: .75rem 1.5rem; border-radius: 30px;
text-decoration: none !important;
transition: background .2s, transform .2s;
}
.academy-btn-outline:hover { background: var(--wiki-brand-light); transform: translateY(-2px); }
.academy-btn-outline [data-lucide] { width: 16px; height: 16px; }
@media (max-width: 600px) {
.academy-cta { padding: 1.8rem 1.25rem; }
.academy-cta h2 { font-size: 1.4rem; }
.academy-btn, .academy-btn-outline { width: 100%; justify-content: center; }
}
/* ---- Tasto "torna in alto" (iniettato da corsi/torna-su.js) ---- */
/* Sta sopra il bottone di WhatsApp (bottom 30px + 56px + gap) e ne allinea il
centro. Quando la bolla di WhatsApp e' aperta si tira indietro: la bolla gli
viene addosso, e due tondi colorati uno sull'altro sono un pasticcio. */
.corso-top-btn {
position: fixed;
right: 34px;
bottom: 98px;
width: 48px;
height: 48px;
padding: 0;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--cat-color);
color: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,.22);
cursor: pointer;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .25s, transform .25s, visibility .25s, box-shadow .2s;
}
.corso-top-btn.is-visible { opacity: 1; visibility: visible; transform: none; }
/* `:has()` guarda la casella di spunta della bolla, che sta in un altro angolo
del documento: senza `:has()` da qui non ci si arriva. Dove non c'e' non
succede niente di grave, la bolla gli passa davanti (z-index 1001). */
body:has(.fb-wa-check:checked) .corso-top-btn.is-visible { opacity: 0; visibility: hidden; }
.corso-top-btn:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.corso-top-btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 5px var(--cat-color); }
.corso-top-btn svg { width: 22px; height: 22px; }
/* il focus programmatico sull'h1 dopo il click non deve disegnare il bordo */
h1[tabindex="-1"]:focus { outline: none; }
@media (max-width: 600px) {
.corso-top-btn { right: 36px; bottom: 94px; width: 44px; height: 44px; }
.corso-top-btn svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.corso-top-btn { transition: opacity .15s, visibility .15s; }
.corso-top-btn.is-visible, .corso-top-btn:hover { transform: none; }
}