, non sul : l'intestazione e il piede restano fuori, e l'esagono del marchio MB resta arancione come in ogni altra pagina del sito. E' l'unico arancione di quella pagina, ed e' voluto: il marchio e' della casa, il blu e' della scuola. QUESTO FILE E' PICCOLO APPOSTA. La sezione Academy della home e' fatta con i mattoni della home: .label, .sez__titolo, .grid, .card--serv, .glass, .btn. Qui dentro c'e' solo quello che una scheda di CORSO ha in piu' di una scheda di servizio — il marchio dello strumento e il prezzo — la riga di numeri in fondo, e il pulsante blu pieno. Se una regola qui dentro ridice quello che style.css dice gia', va tolta, non lasciata. Il markup della sezione lo scrive strumenti/genera-home-academy.py; quello della pagina academy/ lo scrive strumenti/genera-academy.py. ========================================================= */ .academy{ --arancio:var(--blu); --arancio-2:var(--blu-2); --arancio-3:var(--blu-3); --arancio-4:var(--blu-4); } /* ── il pulsante blu pieno ───────────────────────────────────────────── L'unico pulsante pieno dell'Academy: «Inizia dal livello 1», «Inizia ora». E' la stessa regola di css/gioco.css, scritta uguale, perche' la pagina academy/ non carica gioco.css e il pulsante deve avere la stessa faccia dovunque compaia. Se una delle due cambia, cambia anche l'altra. */ .btn--blu{background:var(--blu);color:#fff;font-weight:500;box-shadow:0 18px 40px -14px rgba(56,112,224,.6)} .btn--blu:hover{box-shadow:0 22px 46px -14px rgba(56,112,224,.8)} /* ── la sezione nella home ───────────────────────────────────────────── Sta in fondo, prima di chi siamo: chi arriva cerca prima cosa facciamo, poi eventualmente cosa insegna. Il blu qui e' un'isola: dura una sezione e poi il sito torna arancione. */ .section--academy{ position:relative; --arancio:var(--blu); --arancio-2:var(--blu-2); --arancio-3:var(--blu-3); --arancio-4:var(--blu-4); } .section--academy::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(70% 55% at 18% 0%,rgba(56,112,224,.13),transparent 62%), radial-gradient(60% 50% at 88% 100%,rgba(56,112,224,.09),transparent 66%); } .section--academy > .wrap{position:relative;z-index:1} /* ── le tre schede ───────────────────────────────────────────────────── Sono .card--serv, non una copia di .card--serv: altezza minima, corpo, piede e sollevamento arrivano da style.css e restano uguali a quelli di «Cosa facciamo» per sempre, anche il giorno che quelli cambiano. Colonne quante sono le schede, non tre per decreto: il copione scrive --colonne sulla griglia. Con `repeat(3,1fr)` fisso, il giorno che i corsi gratuiti in vetrina fossero due la terza colonna restava vuota — proprio il buco che questa scelta doveva evitare. Il 3 resta come ripiego, per quando il markup arriva senza la variabile. Con auto-fit, invece, su uno schermo medio sarebbero diventate due piu' una, e la scheda spaiata in fondo si nota. Sotto i 900px si scende direttamente a una. */ .grid--corsi{grid-template-columns:repeat(var(--colonne,3),1fr)} @media (max-width:900px){.grid--corsi{grid-template-columns:1fr}} /* COLLISIONE EREDITATA, e va spenta a mano. In style.css, fra 820 e 900px, `.card__body{max-width:70%}` stringe il corpo di OGNI scheda: serve alle schede prodotto, che hanno il disegno a destra e il testo che non ci deve finire sotto. Qui a destra non c'e' niente, e a quella larghezza la scheda e' gia' sola nella sua riga: il testo resterebbe in una colonna stretta con mezza scheda vuota accanto. */ .card--corso .card__body{max-width:100%} /* la testa della scheda: marchio a sinistra, prezzo a destra. Il prezzo sta in alto a destra perche' su una scheda di negozio e' la prima cosa che si guarda — e qui dice zero, che e' tutto l'argomento che questa sezione ha bisogno di fare. */ .corso__testa{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} /* il segno dello strumento: l'esagono del sito nel colore del marchio, col monogramma dentro. Non e' il logo di nessuno — dice di cosa parla il corso, e basta. Dove il logo vero si puo' usare, prende il posto del monogramma dentro lo stesso esagono. */ .corso__marchio{position:relative;display:grid;place-items:center; width:46px;height:46px;flex:none} .corso__marchio svg{position:absolute;inset:0;width:100%;height:100%; fill:none;stroke:#fff;stroke-width:4.2} .corso__marchio b{position:relative;font-family:var(--f-display);font-weight:400; font-size:11px;letter-spacing:.02em;color:#fff} .corso__marchio img{position:relative;width:20px;height:20px; filter:brightness(0) saturate(100%) invert(1);opacity:.92} /* «Gratis» grande, «per sempre» sotto. La seconda riga serve quanto la prima: gratis da solo, oggi, si legge «gratis per due settimane». */ .corso__prezzo{margin:0;text-align:right} .corso__prezzo b{display:block;font-family:var(--f-display);font-weight:400; font-size:clamp(15px,1.7vw,18px);letter-spacing:.02em;color:var(--blu)} /* «per sempre» e' un'informazione, non una decorazione: si scrive piccolo ma con il grigio che si legge, non con quello delle sopralinee. */ .corso__prezzo span{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-3)} /* la riga «OpenAI», «Anthropic», «Il fondamento»: e' la .card__ruolo dei servizi, e prende solo l'aria che la separa dalla testa. */ .card--corso .card__ruolo{margin-top:22px} /* nel piede, accanto a «Comincia →»: quante lezioni e quanto dura. Sono i dati di un prodotto, e stanno dove sulle schede servizio stanno i segni. */ .corso__dati{font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)} .corso__dati b{font-weight:400;color:var(--ink-2)} /* ── sotto le schede ──────────────────────────────────────────────────── La riga sui corsi a pagamento e' una sola e non dice quali sono: nomi, lezioni e durate di Pro ed Expert in questa sezione non ci sono. */ .acad__oltre{margin:clamp(22px,2.6vw,30px) 0 0;font-size:12.5px;color:var(--ink-3)} /* i numeri veri e il pulsante, su una riga sola chiusa da un filo. */ .acad__coda{ display:flex;align-items:center;justify-content:space-between; gap:18px clamp(24px,4vw,48px);flex-wrap:wrap; margin-top:clamp(20px,2.4vw,28px);padding-top:26px;border-top:1px solid var(--line); } .acad__conto{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px clamp(18px,3vw,38px); margin:0;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)} .acad__conto span{display:inline-flex;align-items:baseline;gap:9px} .acad__conto b{font-family:var(--f-display);font-weight:400; font-size:clamp(18px,2.2vw,26px);color:var(--blu)}