`. ⚠️ Non si nasconde con `display:none` né con `visibility:hidden`: così sparirebbe anche per la tastiera, che è l'unica che lo usa. Si porta fuori schermo e si rimette dentro quando ha il fuoco. */ .fb-salta { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .7rem 1.1rem; background: var(--fb-red); color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 10px 0; } .fb-salta:focus { left: 0; color: #fff; outline: 3px solid #111; outline-offset: 2px; } /* ============================================ IL MENU · uno solo, uguale su tutte le pagine ============================================ Prima ce n'erano due: la barra scura sulle 186 pagine interne e il menu a panino della home, che è un tema comprato e apriva un pannello a tutto schermo. Adesso è questa barra dappertutto, home compresa. È bianca e appiccicata in alto: le pagine sono lunghe (un programma di workshop è mezzo metro di schermo) e la barra scura in cima si perdeva al primo scorrimento. Il nero è rimasto dov'era utile, cioè nel footer. Su telefono le voci stanno dietro al pulsante a tre righe, e il pannello si apre con una casella di spunta nascosta: il sito è statico, e un menu che dipende da JavaScript è un menu che sparisce se lo script non arriva. */ /* * ⚠️ **Il vetro non sta sulla barra, sta su uno strato dietro.** * * `position: sticky` e `backdrop-filter` sullo stesso elemento sono un bug noto di * WebKit: su Safari (Mac e iPhone) la barra sparisce mentre si scorre in basso e * torna scorrendo in alto. Federico l'ha visto il 2026-08-19, su computer e su * telefono; su Chrome non si riproduce, ed è la firma di questo bug. * * La soluzione è quella standard: la barra resta appiccicata e senza filtri, e il * vetro (tinta più sfocatura) lo fa uno `::before` dietro al contenuto. `isolation` * tiene lo `z-index: -1` dentro alla barra, sennò lo strato finirebbe sotto la * pagina e non si vedrebbe niente. * * Il fondo pieno resta come ripiego: se `backdrop-filter` non c'è, la barra è * bianca e leggibile invece che trasparente. */ nav.wiki-site-nav { background: rgba(255,255,255,.97) !important; border-bottom: 1px solid var(--wiki-glass-border); padding: .55rem 0; position: sticky; top: 0; z-index: 500; width: 100%; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { nav.wiki-site-nav { background: transparent !important; isolation: isolate; } nav.wiki-site-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); } } /* * ⚠️ **La barra si tira su quando si scende e torna quando si risale** * (2026-09-01, richiesta di Federico: «come su koral.binatomy.com»). * * Le pagine qui sono lunghe, e una barra bianca sempre in testa si mangia una * striscia di schermo del telefono per tutto il tempo. Mentre si scende si sta * leggendo, quindi la barra se ne va; risalendo si sta cercando qualcosa, * quindi torna subito. * * La logica sta in `_strumenti/uniforma-menu.py`, blocco `fb-scorrimento`, e ha * tre paletti che non vanno «semplificati»: nei primi 140px non si nasconde mai * (lì la barra è ancora in cima alla pagina); serve uno spostamento di almeno * 8px per cambiare stato, sennò il rimbalzo elastico di iOS la fa lampeggiare; * e col menu del telefono aperto (`#fb-menu:checked`) resta ferma, altrimenti * sparirebbe portandosi via le voci che si stanno leggendo. * * Senza JavaScript non succede niente: la classe non arriva mai e la barra * resta appiccicata come prima. * * ⚠️ Il `transform` sta sulla barra, il `backdrop-filter` sul suo `::before`: * tenerli separati è la stessa ragione scritta qui sopra, e mettere il vetro * sull'elemento che si muove è il modo di far tornare il bug di WebKit. */ nav.wiki-site-nav { transition: transform .3s ease; } nav.wiki-site-nav.fb-nav-via { transform: translateY(-105%); } @media (prefers-reduced-motion: reduce) { nav.wiki-site-nav { transition: none; } } /* * La lineetta in cima: a che punto della pagina si è. * * Sta **sopra** la barra (`z-index` più alto) e non dentro: quando la barra si * tira su, la lineetta resta dov'è, ed è l'unica cosa che continua a dire * quanto manca mentre si scende. Cresce con `transform: scaleX()` e non con * `width`, che a ogni pixel di scorrimento rifarebbe l'impaginazione. */ .fb-scorrimento { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 600; background: linear-gradient(90deg, var(--fb-red-dark), var(--fb-red) 55%, #f15a24); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } /* * ⚠️ **Su fondo scuro la lineetta diventa bianca** (2026-09-01, segnalato da * Federico: sulla hero rossa della home una riga rossa su rosso non si vede). * La classe la mette il codice guardando che colore c'è sotto, quindi vale per * la hero, per le fasce scure (`fb-band--dark`, `fb-cta-band`) e per il footer * senza doverli elencare uno per uno. */ .fb-scorrimento--chiaro { background: linear-gradient(90deg, rgba(255,255,255,.7), #fff 60%); } /* * ⚠️ **Il puntatore diventa bianco sul rosso** (2026-09-01, segnalato da * Federico: «il puntatore del mouse è rosso in tutto il sito, nella hero dove * c'è lo sfondo rosso bianco»). * * Il puntatore tondo del tema (`.circle-cursor-inner`, il pallino, e * `.circle-cursor-outer`, l'anello) è colorato con `--base-color`, che è il * rosso `#c2001c`: sulla hero della home, che è rossa a tutta pagina, sparisce. * Sta solo sulle sei home (l'italiana e le cinque tradotte), che sono le uniche * col markup del tema. * * La classe la mette il codice sul `` guardando che colore c'è sotto la * punta, quindi vale anche per le fasce scure e per il footer, dove un pallino * rosso scuro si vede altrettanto poco. Le regole vanno sul `body` (e non solo * sul puntatore) per battere `.custom-cursor .circle-cursor-inner` del tema, e * la riga con `.cursor-link-hover` serve perché sopra a un link il tema ripete * il colore con una specificità più alta. */ body.fb-cursore-chiaro .circle-cursor-inner, body.fb-cursore-chiaro .circle-cursor-inner.cursor-link-hover { background-color: #fff; } body.fb-cursore-chiaro .circle-cursor-outer { border-color: #fff; } nav.wiki-site-nav > .container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } nav.wiki-site-nav .nav-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--wiki-dark); font-weight: 700; font-size: .92rem; flex-shrink: 0; } nav.wiki-site-nav .nav-logo img { height: 34px !important; width: auto !important; max-height: 34px !important; max-width: 130px !important; object-fit: contain; } /* * Le voci stanno in mezzo alla barra (2026-08-17, scelta di Federico): prima * erano tutte a destra e la barra sembrava sbilanciata, con mezzo metro di * bianco fra il nome e il menu. * * `flex: 1` sulla lista le fa occupare lo spazio fra il logo e il bordo, e * `center` le centra dentro quello spazio. Il gruppo di destra (Login e * Scrivimi) si stacca da solo con `margin-left: auto` sulla voce `nav-fine`, * quindi non serve un contenitore in piu' nel markup: sul telefono la lista * diventa una colonna e le voci restano tutte dentro la stessa

(academy). Dove `:has()` non c'e', torna lo stacco: brutto, e non rompe niente. */ /* ⚠️ La classe la mette `_strumenti/uniforma-menu.py`, guardando qual è l'ultima sezione della pagina, e NON un selettore. In CSS questo caso non si prende: il fratello adiacente (`+`) non vede il footer perché in mezzo c'è la bolla di WhatsApp; il fratello generico (`~`) vede anche una fascia a metà pagina, e sulle schede dei workshop azzerava lo stacco dove serviva; e `:has()` con `:last-of-type` in Chromium corrisponde ma non applica il margine (la regola è nel CSSOM, `matches()` dice sì, il margine resta a 3rem). */ footer.wiki-footer--attaccato { margin-top: 0; } /* Il logo AIPIA nel footer: è la versione bianca su trasparente, presa dal loro sito e tenuta in casa (`images/aipia-bianco.png`) invece di puntare al loro server. Sotto c'è la riga con la tessera, che porta alla pagina di verifica: una credenziale vale perché si controlla, e un distintivo senza link lo mette chiunque. */ .footer-aipia { display: block; margin-top: 1.1rem; text-decoration: none; max-width: 200px; } .footer-aipia img { display: block; width: 100%; height: auto; /* ⚠️ Un filo spento, come il resto del testo del footer: a piena opacità il logo di un'altra organizzazione grida più del nome di Federico. */ opacity: .75; transition: opacity .2s; } .footer-aipia span { display: block; margin-top: .35rem; font-size: .78rem; color: rgba(255, 255, 255, .55); } .footer-aipia:hover img { opacity: 1; } .footer-aipia:hover span { color: rgba(255, 255, 255, .85); } footer.wiki-footer > .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } footer.wiki-footer .wiki-footer-top { display: grid !important; /* Cinque colonne: Federico, i workshop, i corsi online, la wiki e il resto del sito. Le colonne di sezione stanno tutte qui e non cambiano da una pagina all'altra, sennò il footer torna a essere diverso ovunque. */ grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.08); } @media(max-width:1000px) { footer.wiki-footer .wiki-footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 1.75rem; } } @media(max-width:768px) { footer.wiki-footer .wiki-footer-top { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } @media(max-width:480px) { footer.wiki-footer .wiki-footer-top { grid-template-columns: 1fr; } } footer.wiki-footer .wiki-footer-top h5 { color: #fff !important; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 1rem !important; font-weight: 700; } footer.wiki-footer .wiki-footer-top p { font-size: .82rem; line-height: 1.6; margin: 0 0 .75rem; color: rgba(255,255,255,.5); } footer.wiki-footer .wiki-footer-top a { color: rgba(255,255,255,.55) !important; text-decoration: none !important; font-size: .82rem; display: block !important; padding: .2rem 0; transition: color .2s; } footer.wiki-footer .wiki-footer-top a:hover { color: #fff !important; } footer.wiki-footer .wiki-footer-bottom { padding-top: 1.5rem; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap; gap: 1rem; } footer.wiki-footer .wiki-footer-cats { display: flex !important; flex-wrap: wrap; gap: .5rem 1.25rem; } footer.wiki-footer .wiki-footer-cats a { font-size: .78rem; color: rgba(255,255,255,.4) !important; text-decoration: none !important; font-weight: 500; transition: color .2s; } footer.wiki-footer .wiki-footer-cats a:hover { color: rgba(255,255,255,.8) !important; } footer.wiki-footer small { color: rgba(255,255,255,.35) !important; font-size: .75rem; } footer.wiki-footer small a { color: var(--wiki-primary) !important; text-decoration: none !important; } /* ---- FOOTER · la fascia che porta ai workshop ---- ⚠️ SPENTA dal 2026-08-30 (scelta di Federico: «togli questo dal footer»): nessuna pagina ha più questo markup. Le regole restano perché anche il markup resta, commentato in `_strumenti/uniforma-menu.py` (cerca FASCIA-WORKSHOP): qui non c'è git, e riaccenderla senza il suo foglio darebbe una fascia nuda. */ /* ⚠️ LA FASCIA DELLA NEWSLETTER, IN CIMA AL FOOTER DI TUTTE LE PAGINE (2026-09-30). È il passaggio 2 del funnel di Federico: corso gratuito → newsletter → Academy → Divide et Delega. Sta in cima al footer proprio perché così finisce anche in fondo a ogni lezione dei corsi gratuiti, che è il punto in cui uno ha appena finito di leggere e decide se andare avanti. Il markup lo scrive `_strumenti/uniforma-menu.py`, non si tocca a mano. ⚠️ Non è flex sul testo: il modulo e il testo sono due blocchi, ma dentro al testo si va di margini normali. È la regola di `.corso-checklist` e `.fb-check`, dove un flex spezzava le righe con un link dentro. */ footer.wiki-footer .fb-news { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; padding: 26px 28px; margin-bottom: 40px; border-radius: 18px; background: linear-gradient(135deg, rgba(194, 0, 28, .10), rgba(194, 0, 28, .04)); border: 1px solid rgba(194, 0, 28, .22); } footer.wiki-footer .fb-news-txt { flex: 1 1 280px; min-width: 0; } footer.wiki-footer .fb-news-occhiello { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fb-red); margin-bottom: 6px; } footer.wiki-footer .fb-news h4 { margin: 0 0 6px; font-size: 1.24rem; font-weight: 700; letter-spacing: -.01em; color: #fff; } footer.wiki-footer .fb-news p { margin: 0; font-size: .93rem; line-height: 1.55; max-width: 46ch; } footer.wiki-footer .fb-news-form { flex: 1 1 320px; display: flex; gap: 10px; flex-wrap: wrap; } footer.wiki-footer .fb-news-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } footer.wiki-footer .fb-news-form input { flex: 1 1 190px; min-width: 0; padding: 13px 16px; font: inherit; font-size: 1rem; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; } footer.wiki-footer .fb-news-form input::placeholder { color: rgba(255, 255, 255, .45); } footer.wiki-footer .fb-news-form input:focus-visible { outline: 2px solid var(--fb-red); outline-offset: 2px; background: rgba(255, 255, 255, .12); } footer.wiki-footer .fb-news-form button { padding: 13px 26px; font: inherit; font-size: 1rem; font-weight: 700; color: #fff; background: var(--fb-red); border: 0; border-radius: 10px; cursor: pointer; transition: background .2s ease; } /* Col mouse sopra il rosso si scurisce e resta rosso: è la regola del 2026-09-03, un tasto va nella propria direzione e non diventa un altro. */ footer.wiki-footer .fb-news-form button:hover { background: #960015; } footer.wiki-footer .fb-news-form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 560px) { footer.wiki-footer .fb-news { padding: 22px 18px; gap: 18px; } footer.wiki-footer .fb-news-form input, footer.wiki-footer .fb-news-form button { flex: 1 1 100%; } } footer.wiki-footer .footer-altaformazione { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: var(--fb-gradient); background-size: 200% 200%; border-radius: var(--wiki-radius); padding: 1.6rem 1.9rem; margin-bottom: 2.5rem; text-decoration: none !important; transition: transform .2s, box-shadow .2s; } footer.wiki-footer .footer-altaformazione:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(194, 0, 28, .3); } footer.wiki-footer .footer-altaformazione .faf-txt { display: block; flex: 1; min-width: 240px; } footer.wiki-footer .footer-altaformazione .faf-eyebrow { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72) !important; margin-bottom: .45rem; } footer.wiki-footer .footer-altaformazione .faf-title { display: block; color: #fff !important; font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .35rem; } footer.wiki-footer .footer-altaformazione .faf-desc { display: block; color: rgba(255,255,255,.85) !important; font-size: .85rem; line-height: 1.5; max-width: 62ch; } footer.wiki-footer .footer-altaformazione .faf-btn { flex-shrink: 0; background: #fff; color: var(--fb-red) !important; font-weight: 700; font-size: .9rem; padding: .75rem 1.5rem; border-radius: 30px; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; } footer.wiki-footer .footer-altaformazione .faf-btn span { font-size: 1.1em; line-height: 1; } @media(max-width:560px) { footer.wiki-footer .footer-altaformazione { padding: 1.35rem 1.4rem; } footer.wiki-footer .footer-altaformazione .faf-btn { width: 100%; justify-content: center; } } /* ---- MOBILE TOC TOGGLE ---- */ .wiki-toc-mobile { display: none; background: var(--wiki-card-bg); border-radius: var(--wiki-radius); padding: 1rem 1.25rem; box-shadow: var(--wiki-shadow); border: 1px solid var(--wiki-glass-border); margin-bottom: 1.25rem; cursor: pointer; } .wiki-toc-mobile .toc-toggle { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; font-weight: 600; } .wiki-toc-mobile .toc-toggle i { transition: transform .2s; } .wiki-toc-mobile.open .toc-toggle i { transform: rotate(180deg); } .wiki-toc-mobile ul { display: none; list-style: none; padding: .75rem 0 0; margin: 0; } .wiki-toc-mobile.open ul { display: block; } .wiki-toc-mobile li { margin-bottom: .3rem; } .wiki-toc-mobile a { font-size: .82rem; color: var(--wiki-text-muted); text-decoration: none; padding: .25rem 0; display: block; } @media(max-width:1100px) { .wiki-toc-mobile { display: block; } } /* ---- Category-specific colors ---- */ [data-category="seo"] { --cat-color: var(--wiki-seo); --cat-color-light: var(--wiki-seo-light); --cat-color-dark: #047857; } [data-category="geo"] { --cat-color: var(--wiki-geo); --cat-color-light: var(--wiki-geo-light); --cat-color-dark: #6d28d9; } [data-category="ai"] { --cat-color: var(--wiki-ai); --cat-color-light: var(--wiki-ai-light); --cat-color-dark: #b45309; } [data-category="siti-web"] { --cat-color: var(--wiki-web); --cat-color-light: var(--wiki-web-light); --cat-color-dark: #1d4ed8; } [data-category="brand"] { --cat-color: var(--wiki-brand); --cat-color-light: var(--wiki-brand-light); --cat-color-dark: var(--wiki-primary-dark); } /* ---- Gradiente header per categoria: riprende il colore della propria sezione ---- */ /* (sovrascrivo solo background-image: background-size 300% e l'animazione restano) */ /* La categoria si riconosce dal filo di colore sotto l'hero, non dal fondo: il fondo è chiaro dappertutto, e cinque gradienti pieni diversi facevano sembrare cinque siti. */ [data-category="seo"] .wiki-header::after { background: linear-gradient(90deg, #047857, #10b981, #047857); } [data-category="geo"] .wiki-header::after { background: linear-gradient(90deg, #4c1d95, #733397, #4c1d95); } [data-category="ai"] .wiki-header::after { background: linear-gradient(90deg, #f15a24, #f7931e, #f15a24); } [data-category="siti-web"] .wiki-header::after { background: linear-gradient(90deg, #1d4ed8, #60a5fa, #1d4ed8); } /* brand + hub usano il gradiente rosso di default (.wiki-header) */ /* ============================================ WIKI v2 · ICONE LUCIDE + ILLUSTRAZIONI unDRAW ============================================ */ /* ---- Lucide icons (svg via data-lucide) ---- */ [data-lucide] { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; stroke-width: 2; flex-shrink: 0; } .wiki-meta [data-lucide] { width: 15px; height: 15px; } .toc-toggle [data-lucide] { width: 16px; height: 16px; } i.wiki-search-icon[data-lucide], .wiki-search-icon { width: 18px; height: 18px; } .wiki-cat-card .cat-icon [data-lucide] { width: 24px; height: 24px; } .wiki-header h1 [data-lucide] { width: .95em; height: .95em; vertical-align: -0.08em; margin-right: .35rem; } .wiki-content .info-box h4 [data-lucide] { width: 18px; height: 18px; vertical-align: -0.22em; margin-right: .4rem; } .wiki-content h2 [data-lucide] { width: 20px; height: 20px; vertical-align: -0.18em; color: var(--cat-color); margin-right: .55rem; } .wiki-sidebar-card h4 [data-lucide], .wiki-author-box [data-lucide] { width: 15px; height: 15px; } .btn-wiki [data-lucide], .btn-whatsapp [data-lucide] { width: 15px; height: 15px; vertical-align: -0.18em; } /* ---- Hero illustration (header destra: articoli + indici categoria) ---- */ .wiki-header { overflow: hidden; } .wiki-hero-illustration { position: absolute; right: 3.5%; bottom: 6px; width: clamp(180px, 26vw, 290px); max-height: 80%; height: auto; pointer-events: none; z-index: 1; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.18)); animation: wiki-illu-in .8s cubic-bezier(.2,.7,.3,1) both; } @keyframes wiki-illu-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* lascia spazio al testo perche' non finisca sotto l'illustrazione */ @media (min-width: 993px) { .wiki-header:not(.wiki-hub-hero) .container > .wiki-breadcrumb, .wiki-header:not(.wiki-hub-hero) .container > h1, .wiki-header:not(.wiki-hub-hero) .container > .lead { max-width: 68%; } } @media (max-width: 992px) { .wiki-hero-illustration { display: none; } } /* * Sugli hero centrati (corsi, wiki, pubblicazioni) il testo sta in mezzo e * l'illustrazione resta appesa a destra: finché la finestra non è larga almeno * ~1300px le due cose si sovrappongono, e siccome l'SVG ha il suo cerchio * pieno il lead usciva tagliato a metà parola. Sotto quella soglia * l'illustrazione è solo una decorazione, quindi sparisce. */ @media (max-width: 1300px) { .wiki-hub-hero .wiki-hero-illustration { display: none; } } /* Hub (hero centrato): illustrazione come blocco sotto il lead */ .wiki-hub-hero .wiki-hero-figure { margin: 1.75rem auto 0; max-width: 360px; } .wiki-hero-figure img { width: 100%; height: auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.16)); } /* ---- Figura illustrata dentro il contenuto ---- */ .wiki-figure { margin: 2rem 0; text-align: center; background: var(--cat-color-light); border: 1px solid var(--wiki-glass-border); border-radius: var(--wiki-radius-sm); padding: 1.75rem 1.5rem 1.25rem; } .wiki-figure img { width: 100%; max-width: 360px; height: auto; } .wiki-figure figcaption { font-size: .8rem; color: var(--wiki-text-muted); margin-top: .9rem; font-style: italic; } /* ---- Key takeaways / punti chiave ---- */ .wiki-takeaways { background: linear-gradient(135deg, var(--cat-color-light), var(--wiki-glass-bg)); border: 1px solid var(--wiki-glass-border); border-radius: var(--wiki-radius-sm); padding: 1.5rem 1.6rem; margin: 2.25rem 0; } .wiki-takeaways h4 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; margin: 0 0 .85rem; color: var(--cat-color); } .wiki-takeaways h4 [data-lucide] { width: 20px; height: 20px; } .wiki-takeaways ul { margin: 0; padding-left: 1.3rem; } .wiki-takeaways li { font-size: .92rem; margin-bottom: .45rem; } .wiki-takeaways li:last-child { margin-bottom: 0; } /* ---- CTA formazione in coda articolo ---- */ .wiki-cta-formazione { margin: 2.5rem 0 .5rem; background: linear-gradient(135deg, var(--cat-color), var(--cat-color-dark)); color: #fff; border-radius: var(--wiki-radius); padding: 1.75rem 1.9rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; } .wiki-cta-formazione .txt h4 { color: #fff; font-size: 1.15rem; font-weight: 700; margin: 0 0 .35rem; } .wiki-cta-formazione .txt p { color: rgba(255,255,255,.85); font-size: .9rem; margin: 0; } .wiki-cta-formazione a { background: #fff; color: var(--cat-color) !important; font-weight: 700; font-size: .9rem; padding: .7rem 1.4rem; border-radius: 30px; text-decoration: none !important; white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; transition: transform .2s, box-shadow .2s; } .wiki-cta-formazione a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.2); } .wiki-cta-formazione a [data-lucide] { width: 16px; height: 16px; } /* ============================================ LE LANDING · l'impaginazione delle pagine di Binatomy ============================================ Questi blocchi sono il modo in cui sono fatte le landing di binatomy.com, che è l'impaginazione che volevamo anche qui: hero chiaro con il titolo grande, una striscia con i fatti della giornata, poi fasce bianche e grigie che si alternano fino in fondo, e in mezzo card con gli angoli larghi. Le classi cominciano tutte per `fb-` e non toccano niente di quello che c'è sopra: le pagine vecchie continuano a funzionare con le loro, e chi viene rifatto passa a queste. Il colore della pagina è `--fb-accent`, che si scrive sul tag della sezione (`style="--fb-accent:#733397"`). Dove non c'è si ricade sul rosso. Serve ai workshop, che sono cinque e devono distinguersi fra loro. ============================================ */ .fb-hero, .fb-band, .fb-card, .fb-cta-band { --fb-accent: var(--fb-red); --fb-accent-dark: var(--fb-red-dark); } /* ---- Le fasce: bianca, grigia, scura ---- */ .fb-band { position: relative; padding: 4rem 1.5rem; background: var(--wiki-card-bg); border-bottom: 1px solid var(--wiki-glass-border); } .fb-band--alt { background: var(--wiki-bg); } .fb-band--dark { background: var(--wiki-dark); color: rgba(255,255,255,.72); border-bottom: none; } .fb-band--tight { padding: 2.5rem 1.5rem; } .fb-inner { max-width: 1120px; margin: 0 auto; } .fb-inner--narrow { max-width: 760px; } /* ---- L'hero ---- */ .fb-hero { position: relative; overflow: hidden; padding: 3rem 1.5rem 3.5rem; background: linear-gradient(to bottom, var(--wiki-bg), var(--wiki-card-bg)); border-bottom: 1px solid var(--wiki-glass-border); } /* Il velo del colore della pagina, in cima. Su fondo chiaro è quello che distingue una giornata dall'altra senza colorare tutto. */ .fb-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 190px; background: linear-gradient(to bottom, color-mix(in srgb, var(--fb-accent) 15%, transparent), transparent); pointer-events: none; } .fb-hero > * { position: relative; z-index: 1; } .fb-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 2.5rem; align-items: center; } @media(min-width: 992px) { .fb-hero { padding: 3.5rem 1.5rem 4rem; } .fb-hero-inner--figure { grid-template-columns: 1fr 380px; } } /* Il ritorno all'elenco, sopra al titolo. */ .fb-back { /* Larghezza giusta ma su una riga sua: da `inline-flex` finiva appaiato alla pastiglia del titolo, e sembravano la stessa cosa. */ display: flex; width: fit-content; align-items: center; gap: .4rem; font-size: .88rem; color: var(--wiki-text-muted); text-decoration: none; margin-bottom: 1.6rem; transition: color .2s; } .fb-back:hover { color: var(--wiki-dark); } .fb-back [data-lucide] { width: 16px; height: 16px; } /* La pastiglia sopra al titolo: dice che cos'è e quanto dura. */ .fb-kicker { display: inline-flex; align-items: center; gap: .45rem; background: var(--wiki-card-bg); /* Niente contorno colorato (2026-08-19, «togli tutti i bordi rossi»): la pastiglia si stacca dal fondo con l'ombra, e il colore resta nel testo. */ border: 1px solid var(--wiki-glass-border); color: var(--fb-accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 30px; padding: .45rem 1rem; margin-bottom: 1.25rem; } .fb-kicker [data-lucide] { width: 14px; height: 14px; } .fb-hero h1, .fb-h1 { font-size: clamp(2.3rem, 5.2vw, 3.75rem); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: var(--wiki-dark); margin: 0; } /* Il nome della giornata, sotto al titolo: il titolo dice di che si tratta, questa riga dice cosa esci sapendo fare. Nel colore della pagina. */ .fb-sub { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--fb-accent); margin: .75rem 0 0; max-width: 34ch; } .fb-lead { font-size: 1.2rem; line-height: 1.65; color: var(--wiki-text-muted); margin: 1.25rem 0 0; max-width: 60ch; } .fb-band--dark .fb-lead { color: rgba(255,255,255,.75); } /* ---- Bottoni ---- */ .fb-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } /* ⚠️ `--fb-accent` col ripiego sul rosso, e non nudo: `--fb-accent` è scritto sulle sezioni `fb-`, e un `fb-btn` messo in una sezione del tema (la home) si trovava senza. Un `var()` che non risolve non lascia il valore di prima: butta via tutta la dichiarazione, quindi `border: 2px solid var(--fb-accent)` faceva sparire anche il 2px e il solid, e il bottone vuoto restava senza contorno. */ .fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--fb-accent, var(--fb-red)); color: #fff !important; border: 2px solid var(--fb-accent, var(--fb-red)); font-size: 1rem; font-weight: 600; padding: .85rem 1.9rem; border-radius: 40px; text-decoration: none !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--fb-accent, var(--fb-red)) 28%, transparent); transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; } .fb-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--fb-accent, var(--fb-red)) 34%, transparent); color: #fff !important; } .fb-btn--lg { font-size: 1.08rem; padding: 1rem 2.2rem; } .fb-btn--ghost { background: transparent; color: var(--wiki-dark) !important; border-color: var(--wiki-glass-border); box-shadow: none; } .fb-btn--ghost:hover { border-color: var(--wiki-dark); color: var(--wiki-dark) !important; box-shadow: none; } /* Il bottone vuoto sul fondo scuro: senza questa riga il testo restava scuro sopra allo scuro, cioè un bottone con dentro niente. */ .fb-band--dark .fb-btn--ghost, .fb-cta-band .fb-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.35); } .fb-band--dark .fb-btn--ghost:hover, .fb-cta-band .fb-btn--ghost:hover { border-color: #fff; color: #fff !important; } /* Tranne quando la fascia è chiara, che è il caso della giornata su misura. */ .fb-cta-band--light .fb-btn--ghost { color: var(--wiki-dark) !important; border-color: var(--wiki-glass-border); } .fb-cta-band--light .fb-btn--ghost:hover { border-color: var(--wiki-dark); color: var(--wiki-dark) !important; } .fb-btn--wa { background: #25d366; border-color: #25d366; box-shadow: 0 10px 24px rgba(37,211,102,.28); } .fb-btn--wa:hover { box-shadow: 0 14px 30px rgba(37,211,102,.34); } .fb-btn [data-lucide], .fb-btn i { width: 18px; height: 18px; } /* ---- Il pulsante «Iscriviti» ---- È quello che stava di fianco a ogni data su binatomy.com, e Federico voleva questo (2026-08-17). Le misure sono le sue: pastiglia tonda, 1,5rem di fianco e 0,75rem sopra e sotto, testo bianco a 600, ombra corta, e col mouse sopra cresce del 3% invece di alzarsi. Il lucchetto davanti dice che si paga lì. Non è un `fb-btn`: quello è il bottone grosso dell'hero, con l'ombra colorata larga e il bordo di 2px. Dentro alla riga di una data una data sola occupava mezza schermata. Il colore è quello della pagina (`--fb-accent`, che ogni workshop si scrive sulla sezione): su binatomy.com era `background: course.color`, cioè la stessa cosa. Serve sia ai workshop sia alla pagina delle date. */ .fb-iscriviti { display: inline-flex; align-items: center; gap: .5rem; background: var(--fb-accent, var(--fb-red)); color: #fff !important; border: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; padding: .75rem 1.5rem; border-radius: 9999px; white-space: nowrap; text-decoration: none !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); transition: transform .15s ease; cursor: pointer; } .fb-iscriviti:hover, .fb-iscriviti:focus { transform: scale(1.03); color: #fff !important; } .fb-iscriviti [data-lucide], .fb-iscriviti i { width: 16px; height: 16px; } /* «Dettagli», che non è un'iscrizione: stessa forma, senza il colore pieno. */ .fb-iscriviti--ghost { background: transparent; color: var(--wiki-dark) !important; box-shadow: inset 0 0 0 1px var(--wiki-glass-border); } .fb-iscriviti--ghost:hover, .fb-iscriviti--ghost:focus { color: var(--wiki-dark) !important; box-shadow: inset 0 0 0 1px var(--wiki-dark); } /* Sul telefono, nel calendario della sala, prende tutta la riga: di fianco al prezzo non ci sta, e mezzo bottone incolonnato a destra si legge come un errore. Due misure e non una: `flex: 1 0 100%` sul bottone da solo lo fermava al 70% della riga, perché prezzo e bottone stanno in un flex loro (`cal-side`) che è largo quanto il proprio contenuto. Va allargato anche quello. ⚠️ Qui c'era anche `.fb-date .fb-date-right`, cioè le date dei workshop: quel markup non esiste più (2026-08-19, vedi `fb-agenda`), e lì il piede della scheda tiene prezzo a sinistra e bottone a destra sulla stessa riga, che a 390px ci sta. */ @media(max-width:560px) { .cal-row .cal-side { flex: 1 0 100%; } .cal-side .fb-iscriviti { flex: 1 0 100%; justify-content: center; } } /* ---- La riga sotto al bottone: prossima data, posti, prezzo ---- */ .fb-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.5rem; font-size: 1.05rem; color: var(--wiki-text-muted); } .fb-hero-meta strong { color: var(--wiki-dark); font-weight: 600; } .fb-price { margin-top: .6rem; font-size: 1rem; color: var(--wiki-text-muted); } .fb-price b { font-size: 1.6rem; font-weight: 700; color: var(--wiki-dark); } .fb-price del { color: #94a3b8; margin-left: .4rem; text-decoration-thickness: 2px; } /* ---- «Lo regali?» ---- Sta sotto al prezzo del workshop degli over 60, e da' del tu su una pagina che da' del voi (2026-09-04, Federico: «questo potresti essere te, o ancora piu' probabile tuo nonno o tua nonna: regalagli questo workshop»). Chi paga spesso e' il figlio o il nipote, che legge la stessa pagina ma non e' chi viene in aula. Il riquadro col colore del workshop serve proprio a dire «questa riga non parla a te che verrai, parla a chi ti ha portato qui». ⚠️ L'icona sta in `position:absolute` e non in un flex: dentro un flex ogni pezzo di testo diventa un elemento a se', e una riga con un grassetto o un link in mezzo si spacca in tronconi distanziati. E' gia' capitato tre volte. */ .fb-regalo { position: relative; margin-top: 1.1rem; padding: .85rem 1rem .85rem 2.9rem; border-radius: 12px; background: color-mix(in srgb, var(--fb-accent, var(--fb-red)) 7%, #fff); border: 1px solid color-mix(in srgb, var(--fb-accent, var(--fb-red)) 22%, #fff); font-size: .97rem; line-height: 1.55; color: var(--wiki-dark); } .fb-regalo i, .fb-regalo svg { position: absolute; left: 1rem; top: 1.05rem; width: 18px; height: 18px; color: var(--fb-accent, var(--fb-red)); } /* La pastiglia dei posti: a semaforo, come sulle pagine di Binatomy. */ .fb-seats { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; border-radius: 30px; padding: .35rem .95rem; white-space: nowrap; box-shadow: inset 0 0 0 1px currentColor; } .fb-seats::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .fb-seats--ok { color: #047857; background: rgba(4,120,87,.08); } .fb-seats--few { color: #b45309; background: rgba(180,83,9,.09); } .fb-seats--last { color: var(--fb-red); background: var(--fb-red-light); } .fb-seats--full { color: #64748b; background: rgba(100,116,139,.1); } /* ---- La foto ---- */ .fb-figure { margin: 0; background: var(--wiki-card-bg); border-radius: 26px; overflow: hidden; box-shadow: 0 20px 45px rgba(15,23,42,.12); border: 1px solid var(--wiki-glass-border); } .fb-figure img { display: block; width: 100%; height: auto; object-fit: cover; } .fb-figure--hero img { aspect-ratio: 4 / 3; } /* La mappa dentro alla stessa cornice delle foto (2026-08-18): nel blocco «Dove si tiene» ha preso il posto della foto dell'aula, perché quello che serve lì è sapere dove si va. L'`iframe` di Google non ha un'altezza sua, quindi gliela diamo noi: 4/3 come le foto, e sui fianchi stretti non scende sotto i 280px. */ .fb-figure--mappa { line-height: 0; } .fb-figure--mappa iframe { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 280px; border: 0; } /* * La foto della home è un ritaglio con il fondo trasparente: la scheda bianca * di `.fb-figure` gliela rimetteva dietro, e sembrava una foto incorniciata * invece che una persona appoggiata sull'hero. L'ombra passa sulla sagoma. */ .fb-figure--cutout { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .fb-figure--cutout img { filter: drop-shadow(0 18px 34px rgba(15, 23, 42, .18)); } .fb-figure figcaption { font-size: .82rem; line-height: 1.55; color: var(--wiki-text-muted); padding: .9rem 1.25rem; } /* ---- Il prezzo, quando è lui la cosa da guardare ---- */ .fb-prezzo { display: inline-flex; align-items: center; gap: 1.1rem; margin-top: 1.75rem; padding: 1rem 1.5rem; border: 1px solid var(--wiki-glass-border); border-radius: 20px; background: var(--wiki-card-bg); text-align: left; } .fb-prezzo-cifra { font-size: clamp(2.1rem, 4.5vw, 2.9rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--fb-accent, var(--fb-red)); } .fb-prezzo-nota { font-size: .95rem; line-height: 1.5; color: var(--wiki-text-muted); max-width: 26ch; } /* Sugli hero centrati il blocco sta in mezzo come il resto. */ .wiki-hub-hero .fb-prezzo { margin-left: auto; margin-right: auto; } @media(max-width: 480px) { .fb-prezzo { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.1rem 1.2rem; } .wiki-hub-hero .fb-prezzo { align-items: center; text-align: center; } .fb-prezzo-nota { max-width: none; } } /* ---- La frase che tiene insieme il resto ---- Dal 2026-08-17 è una card, non una citazione con la riga a lato: sul fondo grigio chiaro della home il velo di rosso all'8% non si vedeva, e la frase sembrava un paragrafo qualunque in mezzo agli altri. Ora è un rettangolo bianco con l'ombra e le virgolette in filigrana; la fascia rossa a sinistra è stata levata il 2026-08-18. */ .fb-manifesto { position: relative; margin: 0 0 3.5rem; padding: 2.5rem 3rem; border: 1px solid var(--wiki-glass-border); border-radius: 22px; background: var(--wiki-card-bg); box-shadow: 0 18px 44px rgba(15,23,42,.09); overflow: hidden; } /* Le virgolette: un fregio, quindi grosso, scolorito e sotto al testo. */ .fb-manifesto::before { content: '\201C'; position: absolute; /* Le virgolette stanno dentro alla card: il disegno del carattere ha l'inchiostro in cima al quadratone, e tirandole più su l'`overflow: hidden` le tagliava. */ top: .2rem; right: 1.75rem; font-size: 7.5rem; line-height: 1; color: var(--fb-accent, var(--fb-red)); opacity: .10; pointer-events: none; } .fb-manifesto p { position: relative; margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.45; letter-spacing: -.015em; color: var(--wiki-dark); max-width: 46ch; } .fb-manifesto strong { font-weight: 700; color: var(--fb-accent, var(--fb-red)); } .fb-manifesto em { font-style: italic; } /* ---- La stessa card, usata per l'Academy in home (2026-09-03) ---- Scelta di Federico: «non mi piace scura, la vorrei graficamente come la card del pensiero computazionale, sfondo bianco, meno testo, togli le pill, tutto in una card, niente divisione in due colonne». Prima era un pannello nero in due colonne con cinque pastiglie e tre passi numerati. ⚠️ `fb-manifesto` nasce per una citazione: ha un solo `p`, grande come un titolo (fino a 1.75rem) e largo 46 caratteri. Qui dentro ci sono un occhiello, un titolo e due bottoni, quindi il paragrafo torna a misura di lettura e il titolo si prende lui la parte grande. Senza questa variante il testo usciva grande come la citazione e i bottoni schiacciati contro il bordo. ⚠️ Le virgolette in filigrana restano: sono il segno che lega le due card, ed e' il motivo per cui questa si riconosce come parente dell'altra. */ .fb-manifesto--academy { margin-bottom: 0; } /* ⚠️ Qui si misura in `em` e non in `rem`, e non è un vezzo. La home carica il tema, che sotto una certa larghezza mette `html { font-size: 12px }` tenendo il `body` a 17px: un `1rem` diventa 12px mentre il paragrafo accanto resta a 17. Misurato: con i `rem` questo titolo veniva 18px e il testo 12px, dentro una pagina in cui tutto intorno è 17px. Gli `em` seguono il body, quindi la card resta in scala con la pagina invece che con la radice. */ .fb-manifesto--academy .fb-manifesto-occhio { position: relative; display: block; margin-bottom: .7em; font-size: .8em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fb-accent, var(--fb-red)); } .fb-manifesto--academy h3 { position: relative; margin: 0 0 .55em; font-size: clamp(1.55em, 3vw, 2.2em); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--wiki-dark); } /* La misura da leggere, non da citare. */ .fb-manifesto--academy p { font-size: 1.05em; font-weight: 400; line-height: 1.62; letter-spacing: 0; max-width: 62ch; color: var(--wiki-text-muted); } .fb-manifesto--academy p strong { color: var(--wiki-dark); font-weight: 700; } .fb-manifesto--academy .fb-actions { position: relative; margin-top: 1.55em; } /* Niente riduzione a mano sotto i 575px: con gli `em` la card scende insieme al body, e una soglia in piu' la rimpicciolirebbe due volte. */ @media(max-width: 640px) { .fb-manifesto { margin-bottom: 2.5rem; padding: 1.6rem 1.4rem; border-radius: 18px; } .fb-manifesto::before { font-size: 6rem; right: .8rem; } } /* ---- La cornice delle foto ---- Dal 2026-08-18. Il tema ci metteva `box-shadow-large`, che è un alone piatto tutto intorno (0 0 25px al 8%): sul grigio chiaro della home non si vedeva, e la foto sembrava incollata sul fondo. Qui l'ombra è proiettata in basso, con due strati (una larga e morbida per lo stacco, una corta e stretta per l'appoggio), così la foto sta sopra la pagina invece che dentro. ⚠️ L'ingrandimento sta sull'`img`, il taglio sulla cornice: è la cornice che ha `overflow: hidden`, sennò lo `scale` dell'immagine sborda dalla colonna. */ .fb-foto { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 24px 50px -14px rgba(15,23,42,.30), 0 8px 18px -10px rgba(15,23,42,.20); transition: box-shadow .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1); /* Safari: la cornice si fa un contesto suo, altrimenti il raggio non taglia l'immagine mentre si muove e ricompaiono gli angoli quadrati. */ isolation: isolate; } .fb-foto img { display: block; width: 100%; } /* Solo dove c'è un mouse: sul telefono il `:hover` resta acceso dopo il tocco, e la foto resterebbe ingrandita finché non si toglie il dito da un'altra parte. */ @media (hover: hover) { .fb-foto img { transition: transform .7s cubic-bezier(.2,.6,.2,1); } .fb-foto:hover { transform: translateY(-4px); box-shadow: 0 34px 66px -12px rgba(15,23,42,.38), 0 10px 22px -10px rgba(15,23,42,.24); } .fb-foto:hover img { transform: scale(1.05); } } /* Chi ha chiesto al sistema di non far muovere le cose tiene l'ombra e perde il movimento. */ @media (prefers-reduced-motion: reduce) { .fb-foto, .fb-foto img { transition: none; } .fb-foto:hover, .fb-foto:hover img { transform: none; } } /* ---- La striscia dei fatti ---- */ .fb-facts { background: var(--wiki-card-bg); border-bottom: 1px solid var(--wiki-glass-border); padding: 1.5rem; } .fb-facts ul { max-width: 1120px; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .9rem 2.4rem; font-size: 1.02rem; color: var(--wiki-text); } .fb-facts li { display: inline-flex; align-items: center; gap: .6rem; } .fb-facts [data-lucide] { width: 19px; height: 19px; color: #94a3b8; flex-shrink: 0; } /* ---- Titoli di sezione ---- */ .fb-h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; color: var(--wiki-dark); margin: 0; display: flex; align-items: center; gap: .6rem; } .fb-band--dark .fb-h2 { color: #fff; } .fb-h2 [data-lucide] { width: 26px; height: 26px; color: var(--fb-accent); } .fb-text { max-width: 68ch; margin-top: 1.25rem; font-size: 1.08rem; line-height: 1.75; color: var(--wiki-text); } .fb-text p { margin: 0 0 1rem; } .fb-text p:last-child { margin-bottom: 0; } .fb-text a { color: var(--fb-accent); font-weight: 500; } /* Il riquadro «per chi è»: una riga di colore a sinistra, niente scatola. */ .fb-quote { /* La riga a sinistra resta, grigia: il colore era quello che faceva sembrare la pagina piena di bordi rossi. */ border-left: 3px solid var(--wiki-glass-border); padding-left: 1.4rem; margin: 1.75rem 0 0; max-width: 62ch; } .fb-quote .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wiki-text-muted); } .fb-quote p { margin: .5rem 0 0; font-size: 1.1rem; line-height: 1.7; color: var(--wiki-text); } /* ---- Card ---- */ .fb-grid { display: grid; gap: 1.25rem; margin-top: 2rem; } .fb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .fb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .fb-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .fb-card { background: var(--wiki-card-bg); border: 1px solid var(--wiki-glass-border); border-radius: 24px; padding: 1.75rem; box-shadow: var(--wiki-shadow); } a.fb-card { display: block; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; } a.fb-card:hover { transform: translateY(-3px); box-shadow: var(--wiki-shadow-lg); border-color: var(--wiki-glass-border); } .fb-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; color: var(--wiki-dark); letter-spacing: -.01em; } .fb-card p { font-size: .97rem; line-height: 1.65; margin: 0 0 .8rem; color: var(--wiki-text); } .fb-card p:last-child { margin-bottom: 0; } /* Un link dentro a una card prende il colore della card: senza questa riga restava l'azzurro del browser, che sulle pagine rosse stonava. */ .fb-card p a, .fb-card li a { color: var(--fb-accent); font-weight: 500; } .fb-card-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fb-accent) 12%, transparent); color: var(--fb-accent); margin-bottom: 1rem; } .fb-card-icon [data-lucide] { width: 23px; height: 23px; } .fb-card-tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fb-accent); background: color-mix(in srgb, var(--fb-accent) 10%, transparent); border-radius: 20px; padding: .28rem .75rem; margin-bottom: .8rem; } .fb-card-meta { list-style: none; margin: 1rem 0 0; padding: 0; } .fb-card-meta li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--wiki-text-muted); padding: .22rem 0; } .fb-card-meta [data-lucide] { width: 15px; height: 15px; color: var(--fb-accent); flex-shrink: 0; } .fb-card-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-size: .9rem; font-weight: 700; color: var(--fb-accent); } .fb-card-go [data-lucide] { width: 16px; height: 16px; transition: transform .2s; } a.fb-card:hover .fb-card-go [data-lucide] { transform: translateX(4px); } /* ---- Elenchi con la spunta ---- ⚠️ La riga NON è un flex, e non deve tornare a esserlo: dentro un flex ogni pezzo di testo diventa un elemento a sé, quindi una riga con un grassetto o un link in mezzo si spaccava in tronconi distanziati («Professionisti e imprenditori che vogliono...»). L'icona sta fuori dal testo perché è posizionata, non perché la riga è una colonna di caselle. */ .fb-check { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; } .fb-check--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem 2rem; } .fb-check li { position: relative; padding-left: 1.75rem; font-size: 1rem; line-height: 1.6; color: var(--wiki-text); } .fb-check [data-lucide] { position: absolute; left: 0; top: .22em; width: 19px; height: 19px; color: #059669; } .fb-list { list-style: none; margin: 1rem 0 0; padding: 0; } .fb-list li { position: relative; padding: .3rem 0 .3rem 1rem; font-size: .97rem; line-height: 1.6; color: var(--wiki-text); } .fb-list li::before { content: ''; position: absolute; left: 0; top: 1rem; width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; } /* ---- I passi numerati ---- */ .fb-step-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fb-accent); color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: .9rem; } /* ---- La giornata ora per ora ---- */ .fb-timeline { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.75rem; border-left: 2px solid var(--wiki-glass-border); } .fb-slot { position: relative; padding-bottom: 2.1rem; } .fb-slot:last-child { padding-bottom: 0; } .fb-slot::before { content: ''; position: absolute; left: calc(-1.75rem - 7px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--fb-accent); box-shadow: 0 0 0 4px var(--wiki-card-bg); } .fb-band--alt .fb-slot::before { box-shadow: 0 0 0 4px var(--wiki-bg); } .fb-slot-time { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--fb-accent); background: color-mix(in srgb, var(--fb-accent) 10%, transparent); border-radius: 20px; padding: .22rem .8rem; margin-bottom: .5rem; } .fb-slot h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 .4rem; color: var(--wiki-dark); } .fb-slot p { font-size: 1rem; line-height: 1.65; margin: 0; color: var(--wiki-text); } .fb-slot ul { margin: .8rem 0 0; padding-left: 1.15rem; font-size: .94rem; line-height: 1.8; color: var(--wiki-text-muted); } /* ---- Le date: l'agenda ---- */ /* Una scheda a tutta larghezza per giornata (2026-08-19, seconda passata, su una schermata portata da Federico: «tipo così devono essere»). Tre colonne fisse — **quando** (il giorno grande a sinistra), **cosa** (titolo, descrizione, orario, posti, dove), **quanto** (il prezzo e il pulsante a destra) — e il mese scritto sopra il suo gruppo. ⚠️ Questo blocco ha già cambiato forma due volte in un giorno, e la storia serve a non girare in tondo: 1. all'inizio erano righe larghe, con la data a sinistra e prezzo e pulsante persi a destra; 2. stamattina sono diventate card strette in griglia (`minmax(270px, 1fr)`), perché su quelle righe l'occhio doveva attraversare mezzo schermo per legare una data al suo prezzo, e sul telefono la riga si spezzava in tronconi; 3. adesso tornano larghe, **ma non sono la riga di prima**: la griglia è di tre colonne dichiarate, quindi il prezzo sta sempre nello stesso punto e non galleggia; e sotto i 760px prezzo e pulsante **scendono come piede della scheda** (`grid-column: 1 / -1`), che è esattamente il punto in cui la riga vecchia si rompeva. Se un domani viene la tentazione di rifarle strette: il motivo per cui sono larghe è che nell'hub una riga porta titolo e descrizione di cinque workshop diversi, e in una card da 270px quel testo non ci sta. ⚠️ Il markup lo scrive `workshop/workshop.js` e non si tocca a mano. */ .fb-agenda { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.75rem; } /* Il mese sopra il suo gruppo di giornate: c'è solo dove le date sono di workshop diversi (l'hub). Sulle schede dei singoli workshop no, perché lì le date sono una per mese e verrebbero cinque intestazioni con una scheda sotto ciascuna: il mese sta nella colonna del giorno. */ .fb-agenda-mese { margin: 1.7rem 0 .1rem; font-size: 1.35rem; font-weight: 700; color: var(--wiki-dark); } .fb-agenda-mese:first-child { margin-top: 0; } /* ---- I MESI, CHE SI APRONO E SI CHIUDONO ---- Da ottobre a giugno sono nove mesi: sull'hub sessanta date, sul calendario settantotto righe. Tutte aperte, il footer sta a nove schermate di scorrimento, e su un telefono non si arriva in fondo. Aperto resta il primo mese, che e' quello corrente da se' perche' le date passate non vengono scritte (2026-09-03, richiesta di Federico: «tieni aperto solo il mese corrente»). Il markup lo scrivono `workshop/workshop.js` e `calendario/calendario.js`, funzione `blocco()`, e non si tocca a mano. ⚠️ Sono

: si aprono anche senza JavaScript e la ricerca del browser trova il testo dentro a quelli chiusi. Un pannello fatto con un pulsante e `display:none` non fa nessuna delle due cose. */ .fb-mese { border-top: 1px solid var(--wiki-glass-border); } .fb-mese:first-of-type { border-top: 0; } summary.fb-agenda-mese { display: flex; align-items: baseline; gap: .7rem; margin: 0; padding: 1.1rem 0 .9rem; cursor: pointer; list-style: none; } /* Il triangolino di serie e' diverso in ogni browser e non si colora: si spegne e si disegna la freccia con due bordi. */ summary.fb-agenda-mese::-webkit-details-marker { display: none; } summary.fb-agenda-mese::marker { content: ''; } summary.fb-agenda-mese::after { content: ''; width: .5em; height: .5em; margin-left: auto; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; border-radius: 1px; opacity: .45; transform: translateY(-.18em) rotate(45deg); transition: transform .18s ease; } .fb-mese[open] > summary.fb-agenda-mese::after { transform: translateY(.05em) rotate(-135deg); } summary.fb-agenda-mese:hover { color: var(--fb-red); } summary.fb-agenda-mese:hover::after { opacity: .8; } /* Il conto delle date: da chiuso e' la sola cosa che dice se quel mese vale la pena di aprirlo. */ .fb-mese-n { font-size: .8rem; font-weight: 500; color: var(--wiki-text-muted); letter-spacing: .01em; } .fb-mese > .fb-agenda { padding-bottom: 1.4rem; } /* Una giornata. Tre colonne: quando, cosa, quanto. ⚠️ Il markup lo scrive `workshop/workshop.js` e non si tocca a mano. */ .fb-agenda-card { display: grid; grid-template-columns: 4.4rem 1fr auto; align-items: center; gap: 1.3rem; background: var(--wiki-card-bg); border: 1px solid var(--wiki-glass-border); border-radius: var(--wiki-radius); padding: 1.15rem 1.5rem; box-shadow: var(--wiki-shadow); transition: transform .2s, box-shadow .2s; } @media (hover: hover) { .fb-agenda-card:hover { transform: translateY(-2px); box-shadow: var(--wiki-shadow-lg); } } /* Una data su cui non si prenota più resta in pagina, ma si vede che è passata: chi arriva da un link vecchio deve capire perché non c'è il pulsante. */ .fb-agenda-card--full { opacity: .62; } .fb-agenda-quando { text-align: center; } .fb-agenda-dow, .fb-agenda-mon { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wiki-text-muted); } .fb-agenda-day { display: block; font-size: 2.1rem; font-weight: 700; line-height: 1.02; color: var(--wiki-dark); } /* La riga di colore è il bordo sinistro del testo, non un blocco a sé: è il colore del workshop (`--fb-accent`), ed è quello che fa riconoscere di quale giornata si sta leggendo in una lista dove ce ne sono cinque diverse. */ .fb-agenda-corpo { min-width: 0; border-left: 3px solid var(--fb-accent, var(--fb-red)); padding-left: 1.25rem; } .fb-agenda-titolo { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.35; } .fb-agenda-titolo a { color: var(--wiki-dark); text-decoration: none; } .fb-agenda-titolo a:hover { color: var(--fb-accent, var(--fb-red)); } /* Quando nella riga del titolo c'è solo la pastiglia (le date sulla scheda di un workshop), il margine sinistro che la stacca dal titolo non serve. */ .fb-agenda-titolo--sola { line-height: 1; } .fb-agenda-titolo--sola .fb-stato { margin-left: 0; } .fb-agenda-cosa { margin: .3rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--wiki-text-muted); } /* Orario, posti, dove, pranzo. Flex qui va bene: ogni pezzo è una voce a sé e non una frase, quindi non c'è testo che si spezzi in tronconi. */ .fb-agenda-meta { display: flex; flex-wrap: wrap; /* Lo spazio fra le voci è il minimo che le tiene su una riga sola sulle schede dei workshop, dove la colonna è più stretta che nell'hub. */ gap: .3rem .9rem; margin: .6rem 0 0; font-size: .85rem; color: var(--wiki-text-muted); } .fb-agenda-meta > span { display: inline-flex; align-items: center; gap: .35rem; } .fb-agenda-meta [data-lucide] { width: 14px; height: 14px; flex: 0 0 14px; } /* Dentro la riga i posti non vanno a capo e non prendono il margine che hanno quando stanno sotto il prezzo. */ .fb-agenda-meta .fb-posti { display: inline-flex; margin: 0; } .fb-agenda-meta .fb-pranzo { color: #047857; } .fb-agenda-destra { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; } .fb-agenda-prezzo { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--wiki-dark); white-space: nowrap; } /* Il prezzo pieno barrato va SOTTO la cifra e non di fianco: nella colonna di destra non c'è larghezza per due numeri, e affiancati sembravano una somma. */ .fb-agenda-prezzo del { display: block; font-size: .85rem; font-weight: 400; color: var(--wiki-text-muted); } /* Sul telefono le tre colonne non stanno: quando e cosa restano affiancati, prezzo e pulsante scendono sotto come piede della scheda. */ @media (max-width: 760px) { /* `start` e non `center`: su una scheda alta due righe di descrizione il giorno galleggiava in mezzo, di fianco al testo invece che al titolo. */ .fb-agenda-card { grid-template-columns: 3.2rem 1fr; gap: .9rem; padding: 1.1rem 1.15rem; align-items: start; } .fb-agenda-day { font-size: 1.8rem; } .fb-agenda-corpo { padding-left: .95rem; } .fb-agenda-destra { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .2rem; padding-top: .9rem; border-top: 1px solid var(--wiki-glass-border); } } /* ---- La riga di una data, come stava su binatomy.com ---- Tre pezzi in più rispetto a prima (2026-08-17, «come era su binatomy.com però coi colori di Federico Boggia»): la pastiglia dello stato sopra la data con la spiegazione dietro la «i», la riga del pranzo, e i posti scritti sempre. I colori sono quelli del sito: il verde e l'ambra restano quelli del semaforo, il rosso è `--fb-red` e non il rosso di sistema. */ /* La pastiglia: è un