*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy:#0F2240; --navy-mid:#1E3A5F; --navy-light:#EEF3F9; --azure:#2C6FAC; --azure-bg:#EEF6FF; --azure-border:#4A90C4; --text:#1A1A1A; --muted:#505863; --border:#DDE3EA; --bg:#F4F6F9; --white:#FFF; /* Colori di RUOLO (--c-role1 … --c-role4): identificano un pezzo dell'espressione, non danno giudizi. Volutamente fuori dal semaforo — rosso, verde e arancione qui non entrano mai. Qui non hanno valore apposta: li dichiara il file dei contenuti, in PALETTE, e il motore li scrive su :root all'avvio. Il CSS non deve sapere se role1 è «la base» o «il coefficiente»: cambia da un argomento all'altro. */ /* Colori di SEMAFORO: usati solo per comunicare un esito o un avviso. */ --ok:#16A34A; /* verde — giusto, fatto, risolto */ --no:#E5484D; /* rosso — sbagliato */ --warn:#B45309; /* arancione — attenzione, suggerimento */ } html, body { height:100%; } body { font-family:'Figtree','Segoe UI',sans-serif; color:var(--text); background:var(--bg); font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%; } /* tutta la larghezza dello schermo: lo spazio in orizzontale è quello che evita di andare a capo, e ogni capo in più spinge la tabella delle potenze fuori dalla vista. Su schermo stretto tutto va a capo da solo. */ .wrap { max-width:1400px; margin:0 auto; padding:14px 18px 12px; } /* ---------- intestazione ---------- Ridotta a una riga: il nome della pagina e la definizione di riferimento. Aggiungere altro (materia, capitolo, nome del metodo) non servirebbe a fare l'esercizio, e ogni cosa in più sullo schermo è una cosa in più da scartare. */ .top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:10px; } .top-title { font-family:'Playfair Display',Georgia,serif; font-size:20px; font-weight:700; color:var(--navy); line-height:1.15; } /* I nomi nel titolo, scritti a mano in mezzo alla stampa: è l'unico posto in tutto il materiale dove compare un terzo carattere, e sta lì perché quella pagina è fatta per una persona sola, non per una classe. Non entra da nessuna altra parte — nelle tessere e nelle domande i caratteri restano due, il serif per la matematica e il sans per la prosa. */ .top-title .gp { font-family:'Shantell Sans','Segoe UI',sans-serif; font-weight:700; letter-spacing:.01em; } /* Le pagine (mai la index) rimandano alla index dalla scritta col nome del metodo: stesso colore e carattere di prima, solo il cursore a dire che si può cliccare. */ .top-title a { color:inherit; text-decoration:none; } .top-title a:hover { text-decoration:underline; } /* Link ad azione dentro al titolo (es. "schema dei passaggi"): pillola azzurra, visibile ma piccola — è un'azione, non il titolo, quindi resta nel sans e nel colore che nel resto del materiale vuol dire «qui si agisce». Selettore rinforzato apposta: senza, «.top-title a» sopra vincerebbe e la pillola resterebbe color:inherit. */ .top-title a.top-action { display:inline-flex; align-items:center; vertical-align:middle; font-family:'Figtree',sans-serif; font-size:13px; font-weight:700; color:var(--azure); background:var(--azure-bg); border:1.5px solid var(--azure-border); border-radius:999px; padding:4px 13px; margin-left:12px; text-decoration:none; letter-spacing:.01em; } .top-title a.top-action:hover { background:var(--azure); color:#fff; border-color:var(--azure); text-decoration:none; } .top-def { font-family:Georgia,serif; font-size:16px; color:var(--navy); white-space:nowrap; letter-spacing:.3px; } .top-def .r1 { color:var(--c-role1); font-weight:700; } .top-def .r2 { color:var(--c-role2); font-weight:700; } .top-def .r3 { color:var(--c-role3); font-weight:700; } .top-def .eq { color:var(--azure); padding:0 9px; } /* Link interni alle schede di riepilogo.html: solo su quella pagina compare più di un argomento sullo stesso schermo, quindi solo lì serve saltare da uno all'altro senza scorrere. */ .ri-jump { display:flex; flex-wrap:wrap; gap:4px 16px; } .ri-jump a { font-size:13px; font-weight:600; color:var(--navy); text-decoration:none; } .ri-jump a:hover { text-decoration:underline; } /* ---------- barra dei livelli ---------- */ /* barra dei livelli: serve per spostarsi, non mentre si lavora — quindi resta leggera e in secondo piano, e solo quello in corso è marcato */ .levels { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; } .lv { border:1px solid transparent; background:none; border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:600; color:#8A94A0; cursor:pointer; font-family:inherit; transition:.14s; display:flex; align-items:center; gap:6px; } .lv:hover { color:var(--navy); background:var(--navy-light); } .lv.on { background:var(--navy); color:#fff; } .lv .tick { color:var(--ok); font-weight:800; } .lv.on .tick { color:#7BE3AC; } .lv .par { display:none; } /* ---------- griglia principale ---------- */ /* la colonna del quaderno è larga quanto la riga più lunga che ci finisce dentro (quella dell'Es 246): il procedimento va guardato, non scorso di lato */ .grid { display:grid; grid-template-columns:1fr 390px; gap:18px; align-items:start; } /* Alla fine del livello non c'è più un esercizio in corso: il quaderno col procedimento svolto, di lato nel resto della pagina, non ha più niente da mostrare (l'ultimo passo è già superato) e sparisce — la colonna stretta con lui. Quello che resta, «Da fare sul quaderno», prende tutta la larghezza. */ .grid.foglio .side { display:none; } .grid.foglio .panel-stage { grid-column:1 / -1; } /* senza questo la riga più lunga del quaderno (che non va a capo) allargherebbe la colonna, e con lei tutta la pagina: su schermo stretto comparirebbe lo scorrimento orizzontale, che è la cosa peggiore da usare con un dito */ .grid > *, .side > .panel, .sheet-b { min-width:0; } .panel { background:var(--white); border:1px solid var(--border); border-radius:8px; } /* il campo di lavoro deve pesare più delle aree di consultazione (quaderno, proprietà, tabella delle potenze): stesso navy della barra dei livelli quando un livello è "on", non un colore nuovo */ .panel-stage { border:2px solid var(--navy); box-shadow:0 3px 10px rgba(15,34,64,.10); } /* ---------- campo di lavoro ---------- */ .stage { padding:13px 20px 14px; } /* Riaprendo si torna in mezzo a un livello: la riga lo dice e lascia le due strade aperte. Non è un errore e non è un premio — nessun colore del semaforo, lo stesso grigio-azzurro degli strumenti. */ .resume { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; background:var(--navy-light); border-radius:8px; padding:9px 13px; font-size:13.5px; color:var(--navy); } .btn.mini { font-size:12.5px; padding:6px 12px; border-width:1px; } .stage-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:6px; } .ex-name { font-family:'Playfair Display',Georgia,serif; font-size:19px; font-weight:700; color:var(--navy); } /* l'esercizio di ripasso va riconosciuto subito, senza che sembri un errore o un passo indietro: etichetta neutra, nessun colore del semaforo */ .rip { font-family:'Figtree',sans-serif; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); background:var(--navy-light); border-radius:5px; padding:3px 9px; margin-right:10px; vertical-align:middle; } /* «indietro» è navigazione, non una risposta: stesso grigio in secondo piano della barra dei livelli, e sta quassù, lontano dai bottoni delle opzioni. `margin-left:auto` lo tiene appiccicato al contatore, all'altro capo della riga rispetto al nome dell'esercizio. Quando non c'è niente dietro resta visibile e spento, come i bottoni delle opzioni dopo la risposta. */ .back { margin-left:auto; border:1px solid transparent; background:none; border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:600; color:#8A94A0; cursor:pointer; font-family:inherit; transition:.14s; } .back:hover:enabled { color:var(--navy); background:var(--navy-light); } .back:disabled { opacity:.4; cursor:default; } /* Un numero solo in primo piano — i passi del livello, ripasso compreso — perché è quello che si attraversa davvero: «esercizio 2 di 3» e «passo 1 di 6» insieme obbligano a moltiplicare a mente per sapere quanto manca. Il conto dentro l'esercizio resta sotto, più piccolo: è un'altra domanda. */ .counter { font-size:14px; font-weight:600; color:var(--navy); letter-spacing:.03em; text-align:right; } .counter b { color:var(--navy); font-size:15.5px; } .counter-ex { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-top:2px; } .dots { display:flex; gap:6px; margin:10px 0 4px; } .dot { width:9px; height:9px; border-radius:50%; background:var(--border); } .dot.done { background:var(--ok); } .dot.now { background:var(--navy); box-shadow:0 0 0 3px var(--navy-light); } /* ---------- tessere ---------- */ .field { min-height:132px; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:22px 4px 18px; } .expr { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .op { font:600 27px/1 Georgia,serif; color:var(--navy-mid); padding:0 1px; } /* ---------- grafico (livello "il disegno", log §3) ---------- Stesso ruolo delle tessere ma disegnato, non scritto: un SVG campionato, niente libreria. Curva del logaritmo sempre azzurra, curva dell'esponenziale (solo nel confronto per la simmetria) viola — colori fuori dal semaforo, come i colori di ruolo delle tessere, ma non sono la stessa scala: qui non c'è un "argomento" o una "base" da colorare, solo due funzioni da distinguere. */ .field.has-graf { align-items:center; } .graf { width:100%; max-width:340px; height:auto; display:block; } .gg { stroke:#E4E9EF; stroke-width:1; } .ga { stroke:#B9C3CE; stroke-width:1.4; } .gd { stroke:#B9C3CE; stroke-width:1.4; stroke-dasharray:4 4; } .gasi{ stroke:var(--warn); stroke-width:1.4; stroke-dasharray:3 5; opacity:.75; } .gc { fill:none; stroke-width:3; stroke-linecap:round; } /* quale curva è «quella del paragrafo» e quale «quella di confronto» lo decide il file dei contenuti, in PALETTE (curva1/curva2): qui non si sa quale delle due sia la logaritmica. */ .gc-1 { stroke:var(--c-curva1); color:var(--c-curva1); } .gc-2 { stroke:var(--c-curva2); color:var(--c-curva2); } /* i puntini che fanno proseguire la curva oltre il taglio dell'asintoto: stesso colore della curva, presi da currentColor */ .gcp { fill:currentColor; stroke:none; opacity:.7; } .gp { fill:var(--navy); stroke:#fff; stroke-width:1.5; } .gt { font:700 11px 'Figtree',sans-serif; fill:var(--muted); } .t { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:48px; height:56px; padding:0 11px; border-radius:10px; font:700 27px/1 Georgia,serif; color:#fff; letter-spacing:.01em; box-shadow:0 2px 5px rgba(15,34,64,.22); transition:.18s; } /* i ruoli sono numerati, non nominati: che cosa sia role1 lo decide il file dei contenuti. role4 è di riserva, per un argomento che avrà un pezzo in più. */ .t.role1 { background:var(--c-role1); } .t.role2 { background:var(--c-role2); } .t.role3 { background:var(--c-role3); } .t.role4 { background:var(--c-role4); } .t.s { background:var(--white); color:var(--navy); border:2px solid #C9D3DE; box-shadow:none; } /* nessun ruolo: la soluzione trovata, il valore di x, il delta. Grigio e basta, così l'ardesia continua a voler dire «argomento» e solo quello */ .t.n { background:#8B95A1; } .t.sm { min-width:33px; height:39px; padding:0 8px; font-size:19px; border-radius:8px; } .t.sub { transform:translateY(13px); margin-left:-5px; font-size:25px; } .t.sup { transform:translateY(-15px); margin-left:-5px; font-size:25px; } .t.ghost { opacity:.4; } .t.faded { opacity:.22; transform:rotate(-6deg) translateY(6px); } .t.sub.faded { transform:rotate(-6deg) translateY(16px); } /* ---------- la tessera di prosa ---------- Una tessera che contiene un testo da leggere invece di un pezzo di espressione. Nasce per il testo del problema delle percentuali — lì c'è della prosa, e chiedere di ricordarla mentre si lavora sarebbe chiedere proprio la cosa che manca: deve restare sotto gli occhi a ogni passo — ma è una classe di RUOLO, non di argomento: il motore costruisce la tessera dalla classe che trova in RUOLI e non sa che dentro c'è della prosa. Che cosa cambia rispetto a una tessera qualunque, e perché: - il carattere è quello della prosa e non quello della matematica, perché questo è testo da leggere. Ogni pezzo prende il carattere di ciò che è; - l'altezza è libera e il testo va a capo: una tessera alta 56px con dentro due righe le taglierebbe. `align-items:flex-start` sull'espressione che la contiene non serve: qui la tessera è da sola sulla sua riga; - sta su tutta la larghezza (`flex-basis:100%`) e non si allunga oltre il campo, così lo schema che viene sotto resta dove sta invece di essere spinto di lato. Su schermo stretto va a capo, non esce; - il testo è allineato a sinistra e non centrato: un paragrafo centrato costringe l'occhio a cercare l'inizio di ogni riga; - un massimo di larghezza in `ch`, perché una riga lunga quanto un monitor si perde tornando a capo. Il fondo resta quello delle tessere chiare: non è un ruolo nuovo, è dove sta scritto il problema. */ .t.prosa { display:block; flex:1 1 100%; height:auto; min-width:0; max-width:62ch; padding:11px 14px; text-align:left; white-space:normal; overflow-wrap:break-word; font:400 16px/1.45 'Figtree','Segoe UI',sans-serif; } /* ---------- la frazione impilata ---------- Sul quaderno e al compito una frazione si scrive col denominatore sotto: «3/4» in linea è leggibile, ma non è la riga che si scrive, e la colonna del quaderno esiste apposta per mostrare quella riga. Sta dentro una tessera e dentro una riga del quaderno, che hanno caratteri di misura diversa: per questo è dimensionata in em, con un pavimento a 12px che è il minimo del progetto. La barra è un bordo e non un carattere: così è larga quanto il pezzo più largo dei due e resta dritta a qualsiasi dimensione. I due pezzi portano il colore del loro ruolo (.r1 il numeratore, .r2 il denominatore, per come lo dice il file dei contenuti): è l'unico posto dove due ruoli stanno dentro la stessa tessera, e per questo la tessera che la contiene è chiara — su fondo pieno un colore di ruolo non si vedrebbe. */ .fr { display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; line-height:1.06; font-size:max(12px, .7em); } .fr > span { padding:0 .2em; } .fr > span:first-child { border-bottom:max(1px, .08em) solid currentColor; padding-bottom:.08em; } .fr > span:last-child { padding-top:.08em; } .fr .r1 { color:var(--c-role1); } .fr .r2 { color:var(--c-role2); } .fr .r3 { color:var(--c-role3); } /* ---------- due ruoli in linea, dentro lo stesso pezzo ---------- La stessa cosa che fa `.fr` per la frazione, ma senza impilare niente: due ruoli che stanno dentro un pezzo solo dell'espressione. Nasce per «30 : 100» delle percentuali — il pezzo e il cento sono due ruoli diversi e la coppia è una cosa sola, quindi la tessera che la contiene è chiara, come per la frazione: su fondo pieno un colore di ruolo non si vedrebbe. Non è agganciata a `.t` apposta: lo stesso frammento va nella tessera che atterra e nel bottone dell'opzione, e i due sono elementi diversi. */ .rr .r1 { color:var(--c-role1); } .rr .r2 { color:var(--c-role2); } .rr .r3 { color:var(--c-role3); } .t.slot { background:var(--white); border:3px dashed var(--azure-border); color:var(--azure); box-shadow:none; font-size:24px; animation:breathe 1.9s ease-in-out infinite; } .t.slot.sm { font-size:17px; border-width:2px; } @keyframes breathe { 0%,100%{ background:#fff } 50%{ background:var(--azure-bg) } } /* La casella in cui si scrive: la stessa casella da riempire, con dentro il cursore invece del punto interrogativo. Nessuna regola di colore nuova — il testo prende il colore del ruolo che sta producendo, come la tessera che comparirà al suo posto. Larga a sufficienza per «100» e per «1/8», non di più: la lunghezza della casella non deve suggerire la lunghezza della risposta. */ /* la larghezza sta qui e non in .slot-in perché deve restare la stessa anche dopo la risposta, quando la casella diventa tessera: altrimenti il campo si riassesta sotto gli occhi proprio nel momento in cui si guarda il risultato */ input.t { width:104px; padding:0 8px; text-align:center; font:700 26px/1 Georgia,serif; -webkit-appearance:none; appearance:none; } .t.slot-in { background:var(--white); border:3px dashed var(--azure-border); box-shadow:none; animation:breathe 1.9s ease-in-out infinite; } /* il tratteggio resta anche col fuoco dentro: è il segno che quella casella è da riempire, e sparirebbe proprio quando la si sta usando */ .t.slot-in:focus { outline:none; border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-bg); } .t.slot-in.role1 { color:var(--c-role1); caret-color:var(--c-role1); } .t.slot-in.role2 { color:var(--c-role2); caret-color:var(--c-role2); } .t.slot-in.role3 { color:var(--c-role3); caret-color:var(--c-role3); } .t.slot-in.role4 { color:var(--c-role4); caret-color:var(--c-role4); } .t.slot-in.n { color:#6C7683; caret-color:#6C7683; } /* stesso scuotimento del bottone sbagliato: è la stessa cosa che è successa */ .t.slot-in.wrong { animation:shake .34s; border-color:var(--no); background:#FEF2F2; } /* ---------- la casella che si impila ---------- Dove la risposta è una frazione, quello che si scrive mentre lo si scrive dev'essere già la frazione: si batte «23/20», perché quella è la tastiera, ma appena si preme «/» (o «:») il campo si apre in due piani con la barra in mezzo. Il gesto non cambia — cambia che quello che si ha davanti è già la riga che si scriverebbe al compito, senza niente da tradurre alla fine. Due campi veri e non uno solo con dentro un disegno: dentro un campo di testo il cursore sta dove sta il testo: un testo impilato altrove lo lascerebbe a lampeggiare in un punto che non c'entra niente. Qui il cursore è sempre nel piano in cui si sta scrivendo. Finché non si preme il separatore il piano di sotto non c'è: la casella è identica a quella di sempre: chi risponde con un numero non vede niente di nuovo. Qui la tessera è il contenitore e i due campi dentro sono nudi, quindi bordo, fondo e larghezza restano quelli di .slot-in e di input.t. La barra è un bordo e non un carattere: larga quanto il piano più largo e dritta a qualunque dimensione, come in .fr. I due piani prendono i colori dei due ruoli con la stessa convenzione di .fr — role1 sopra, role2 sotto — che è ciò che l'unico argomento a usarla dichiara nel suo file. */ .t.cas { flex-direction:column; width:104px; padding:0 8px; } .t.cas .cas-c { width:100%; padding:0; border:none; background:transparent; outline:none; text-align:center; font:700 26px/1 Georgia,serif; color:inherit; -webkit-appearance:none; appearance:none; } .t.cas .cas-n { color:var(--c-role1); caret-color:var(--c-role1); } .t.cas .cas-d { color:var(--c-role2); caret-color:var(--c-role2); } /* col piano di sotto aperto ci stanno due righe nell'altezza di una: stessa misura di .fr — 0,7 del carattere della tessera, mai sotto i 12px — così la frazione che si sta scrivendo è grande come quelle già scritte accanto */ .t.cas.due .cas-c { font-size:max(12px, .7em); line-height:1.14; } .t.cas.due .cas-n { border-bottom:max(1px, .08em) solid var(--navy); } .t.cas.due .cas-d { padding-top:1px; } .t.landed { animation:land .34s cubic-bezier(.2,1.4,.4,1); } @keyframes land { 0%{ opacity:.15 } 60%{ opacity:1 } 100%{ opacity:1 } } /* la tessera tiene il suo colore di ruolo; è l'anello verde a dire «giusto» */ .t.okring { box-shadow:0 0 0 4px var(--ok), 0 2px 5px rgba(15,34,64,.22); } .next { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; } .next .lab { font-size:16px; font-weight:700; color:var(--ok); } /* la risposta fatta comparire non è un errore, ma nemmeno un «giusto»: nessun colore del semaforo, si dice soltanto che cos'era */ .next .lab.neutra { color:var(--muted); font-weight:600; } .btn.go { background:var(--ok); border-color:var(--ok); } .btn.go:hover { background:#12833D; border-color:#12833D; } /* ---------- domanda e risposte ---------- */ .ask { background:var(--navy-light); border-radius:7px; padding:11px 16px; margin-top:2px; } .ask-q { font-size:16.5px; font-weight:600; color:var(--navy); line-height:1.5; } .ask-sub { font-size:13.5px; color:var(--muted); margin-top:4px; } .opts { display:flex; gap:10px; flex-wrap:wrap; margin-top:11px; align-items:center; } /* Invio fa già quello che fa «controlla». Prima non lo sapeva nessuno. Mezza riga accanto al bottone, nel grigio di ciò che si legge una volta sola. */ .tasto { font-size:12.5px; color:var(--muted); } .opt { font-family:Georgia,serif; font-size:21px; font-weight:700; color:var(--navy); background:var(--white); border:2.5px solid #C9D3DE; border-radius:11px; padding:11px 20px; min-width:82px; cursor:pointer; transition:.14s; line-height:1.3; } .opt:hover:not(:disabled) { border-color:var(--navy); transform:translateY(-2px); } /* le risposte a parole stanno affiancate su una riga sola: impilate spingerebbero la tabella delle potenze fuori dalla schermata */ .opt.long { font-family:'Figtree',sans-serif; font-size:15.5px; font-weight:600; text-align:left; flex:1 1 210px; max-width:320px; } /* il colore sulle risposte è solo feedback: rosso = sbagliato, verde = giusto. Mai decorativo. */ .opt.wrong { animation:shake .34s; border-color:var(--no); background:#FEF2F2; } .opt.dim { opacity:.32; } .opt.right { border-color:var(--ok); background:#DCFCE7; } .opt:disabled { cursor:default; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } .hint { margin-top:12px; background:#FEF3C7; border:1px solid #D97706; border-left:5px solid var(--warn); border-radius:6px; padding:11px 15px; font-size:14.5px; line-height:1.55; color:#4A3208; } .hint b { color:#7C4A03; } .nowrite { margin-top:12px; font-size:13px; font-style:italic; color:var(--muted); } /* ---------- colonna destra ---------- */ .side { display:flex; flex-direction:column; gap:14px; } .card-h { font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding:8px 16px; background:#F6F8FA; border-bottom:1px solid var(--border); border-radius:8px 8px 0 0; } .card-b { padding:14px 16px 16px; } /* ---------- proprietà che serve adesso, e tabella delle potenze ---------- Stanno affiancate sotto il campo: così il riquadro che compare e sparisce a ogni passo non aggiunge una riga alla pagina, e quando non serve non lascia spazio vuoto — la tabella si riprende semplicemente la larghezza. */ /* La riga arriva fino al bordo destro, come la griglia qui sopra: il riquadro si prende una fetta, la tabella tutto il resto. Larghi quanto il loro contenuto, la riga finirebbe a metà pagina, disallineata da tutto ciò che le sta sopra — e il riquadro, stretto a 306px, manderebbe a capo tre volte una regola che è lunga una riga. */ .tools { display:flex; align-items:stretch; gap:14px; margin-top:10px; } #propbox { flex:1 1 340px; max-width:470px; min-width:0; } #propbox:empty { display:none; } .prop { height:100%; border:2px solid var(--azure-border); animation:propin .3s ease-out; } @keyframes propin { from { opacity:0; transform:translateX(-8px) } } .prop-h { font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--azure); padding:8px 16px; background:var(--azure-bg); border-bottom:1px solid var(--azure-border); } .prop-b { padding:10px 16px 12px; } .prop-t { font-size:13px; font-weight:700; color:var(--navy); display:block; margin-bottom:6px; } .prop-f { font-family:Georgia,serif; font-size:17px; line-height:1.45; color:var(--navy); display:block; background:var(--navy-light); border-radius:6px; padding:8px 12px; } /* Il serif è il carattere della matematica: tessere, tabella delle potenze, formule. Quando qui dentro c'è una regola scritta a parole e non una formula, va nel carattere della prosa, lo stesso della domanda e dell'aiuto — altrimenti nello stesso riquadro il titolo è in un carattere e la regola in un altro. */ .prop-f .w { font-family:'Figtree','Segoe UI',sans-serif; font-size:15.5px; } /* Le due coppie della proporzione, segnate sotto l'esempio. Non è una figura nuova da tradurre: è il segno che si tira con la penna sopra una proporzione sul quaderno, sulla stessa riga e sugli stessi numeri. Serve perché quali numeri stiano in coppia sulla riga non si vede, e finché non si vede la regola va contata a occhio ogni volta. Neutro apposta: non è un ruolo (blu la parte, viola l'intero) né un esito, è come la riga è fatta. L'inline-block tiene il posto agli archi, se no il più basso finirebbe addosso alla riga di parole qui sotto. */ .cop-riga { display:inline-block; padding-bottom:13px; } /* Tratteggiati: sono un segno tirato a mano sopra la riga, non una parte della notazione. Il tratteggio è disegnato a mano invece che con `dashed`, perché il passo di `dashed` lo decide il browser e viene lungo: qui il tratto è di 4px con 3 di stacco, cioè il passo di una matita e non di una riga tratteggiata da modulo. */ .cop, .cop-in { background-image:linear-gradient(to right, var(--muted) 57%, transparent 57%); background-repeat:repeat-x; background-size:7px 2px; background-position:left bottom; } .cop { padding-bottom:11px; } .cop-in { padding-bottom:3px; } /* Lo stacco fra i due membri dell'esempio, in tutti i Formulari: sono due righe diverse del procedimento accostate, non una formula sola. Un margine, non una fila di   da contare a occhio. */ .poi { margin-left:34px; } .pw-panel { flex:2 1 340px; min-width:0; } /* i gruppi occupano solo lo spazio che serve: con una base sola in gioco, la tabella è corta e sta tutta vicina, invece di spalmarsi su tutta la riga */ .pw { display:flex; flex-wrap:wrap; gap:6px 44px; font-family:Georgia,serif; font-size:15.5px; line-height:1.55; color:var(--text); } /* Anche dentro il gruppo si va a capo. Le voci sono scritte attaccate, senza uno spazio in mezzo (il separatore è disegnato dal CSS): come testo unico sarebbero una riga sola che non si può spezzare, e su telefono uscirebbe dallo schermo di lato. Da elementi flex il capo si può prendere fra una voce e l'altra, e a schermo largo non cambia niente. */ .pw > div { display:flex; flex-wrap:wrap; align-items:baseline; min-width:0; } .pw b { color:var(--navy); } /* separatore: mai il punto medio, che si legge come segno di moltiplicazione. Sta dentro l'elemento che precede, così andando a capo non finisce a inizio riga. */ .pw .it { white-space:nowrap; } /* Il numero d'ordine: dice a che posto sta quella voce nella riga, che è la risposta a «per quanto si moltiplica 4 per arrivare a 20?». Sta sopra e piccolo — la riga resta una sequenza di multipli; il numero c'è per chi lo cerca invece di doverlo contare con gli occhi. */ .pw .ord { display:block; font-family:'Figtree',sans-serif; font-size:12px; font-weight:700; color:#9AA8B6; line-height:1; margin-bottom:1px; } .pw .it:not(:last-child)::after { content:'|'; color:#9AA8B6; font-weight:400; padding:0 4px 0 9px; } .pw .rowlab { font-family:'Figtree',sans-serif; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); flex:0 0 100%; margin-bottom:3px; } .sheet-b { padding:6px 16px 16px; } /* La misura più importante della pagina: queste righe sono quelle da ricopiare sul foglio; le frazioni che ci stanno dentro scendono a .7em. A 17,5px arrivavano a 12,25px — la scritta più piccola della pagina, in un serif, proprio dove un 15/20 e un 15/26 diventano la stessa macchia e l'errore di copiatura finisce sul quaderno per un motivo che con le frazioni non c'entra niente. A 22px le frazioni salgono da sole a circa 15,5px. L'altezza delle righe e la riga del rigo crescono in proporzione, o la frazione impilata sborderebbe sulla riga di sotto. Il 22 è ripetuto in motore.js, dove una riga troppo larga viene rimpicciolita: se cambia qui, cambia là. */ .sheet { font-family:Georgia,serif; font-size:22px; color:var(--navy); letter-spacing:.4px; background:repeating-linear-gradient(to bottom, transparent 0 41px, #DCE5EE 41px 42px); padding:4px 10px 6px; min-height:168px; max-height:336px; overflow:auto; } .sheet div { height:42px; line-height:40px; white-space:nowrap; } .sheet .sp { border-bottom:0; } .sheet .in { animation:fadein .3s; } .sheet .fin { color:var(--navy); font-weight:700; } @keyframes fadein { from{ opacity:0; transform:translateX(-8px) } } /* ---------- fine livello ---------- */ .done-box { text-align:center; padding:18px 24px 20px; } .done-t { font-family:'Playfair Display',Georgia,serif; font-size:24px; font-weight:700; color:var(--navy); margin-bottom:8px; } .paper { border:2px solid var(--navy); border-radius:8px; padding:14px 20px 16px; max-width:560px; margin:0 auto; background:#FCFDFE; text-align:left; } .paper-h { font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--navy); padding-bottom:11px; border-bottom:1px solid var(--border); margin-bottom:4px; } /* Il rimando al box di destra: sta sotto il titolo perché va letto prima degli esercizi, ma in grigio e piccolo — è un'indicazione, non una consegna. */ .paper-m { font-size:13.5px; color:var(--muted); line-height:1.6; margin:9px 0 4px; } .paper-item { display:flex; align-items:center; gap:13px; padding:10px 2px; border-bottom:1px solid #EDF1F5; } .paper-item:last-of-type { border-bottom:none; } .paper-i { flex:none; width:23px; height:23px; border-radius:50%; background:var(--navy-light); color:var(--navy-mid); font:700 12px/23px 'Figtree',sans-serif; text-align:center; } .paper-q { font-family:Georgia,serif; font-size:21px; color:var(--navy); flex:1; } /* Le soluzioni non prendono il verde: nel resto del sito il verde vuol dire «giusto», mentre qui comparirebbe uguale accanto a un esercizio sbagliato. Sono la risposta, non un esito. */ .paper-a { font-family:Georgia,serif; font-size:18px; color:var(--navy); font-weight:700; text-align:right; flex:none; } /* la riga che compare solo con le soluzioni: finché è vuota non deve lasciare né il bordo né lo spazio */ .dopo-sol:empty { display:none; } .paper-n { font-size:13.5px; color:var(--muted); line-height:1.6; margin-top:13px; padding-top:12px; border-top:1px solid var(--border); } .btn { font-family:inherit; font-size:14.5px; font-weight:600; border-radius:8px; padding:11px 22px; cursor:pointer; border:2px solid var(--navy); background:var(--navy); color:#fff; transition:.14s; } .btn:hover { background:var(--navy-mid); } .btn.ghost { background:transparent; color:var(--navy); } /* I bottoni delle opzioni dopo la risposta restano dove sono, spenti: sparire sposterebbe quello che c'è sotto proprio mentre si legge l'esito. «controlla» invece se ne va (`hidden` da motore.js): è solo; restare spento accanto al verde «avanti →» vuol dire due bottoni di cui uno morto. */ .btn:disabled { opacity:.4; cursor:default; } .btn:disabled:hover { background:var(--navy); } .btn.ghost:hover { background:var(--navy-light); } .btn-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; } /* ---------- riferimento della schermata ---------- Non è per chi studia: serve a chi corregge, per dire «l'errore è in questa schermata» senza descriverla. Perciò sta in un angolo, in un grigio che si legge solo se lo si cerca, e non prende spazio a niente (fixed). Un clic solo lo seleziona tutto: è fatto per essere copiato, non letto. */ .scr-id { position:fixed; right:6px; bottom:4px; z-index:1; font:400 12px/1 'Figtree',sans-serif; letter-spacing:.04em; color:#959ba3; user-select:all; -webkit-user-select:all; cursor:text; } .scr-id:hover { color:var(--muted); } /* Angolo opposto: reset dei progressi e numero di build. Stesso font, stesso grigio, stesso trattamento — sono strumenti per chi cura il materiale, non per chi studia. */ .scr-left { position:fixed; left:6px; bottom:4px; z-index:1; display:flex; align-items:center; gap:10px; font:400 12px/1 'Figtree',sans-serif; letter-spacing:.04em; color:#959ba3; } .scr-left button { font:inherit; letter-spacing:inherit; color:inherit; background:none; border:none; padding:0; margin:0; cursor:pointer; text-decoration:underline; } .scr-left button:hover { color:var(--muted); } .scr-left span { user-select:all; -webkit-user-select:all; cursor:text; } /* ---------- box "commenta" ---------- Non modale: niente sfondo che oscura, così chi lo usa può selezionare testo altrove nella pagina mentre il box resta aperto. Si sposta trascinando la testata, per liberare la porzione di schermo che serve. */ .commento-box { position:fixed; top:90px; right:24px; z-index:5; width:320px; background:var(--white); border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 24px rgba(15,34,64,.18); font-family:'Figtree','Segoe UI',sans-serif; } .commento-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px 8px 14px; cursor:move; user-select:none; background:#F6F8FA; border-bottom:1px solid var(--border); border-radius:10px 10px 0 0; font-size:13px; font-weight:700; color:var(--navy-mid); } .commento-head button { background:none; border:none; font-size:18px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; } .commento-head button:hover { color:var(--text); } .commento-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:9px; } .commento-hint { font-size:12.5px; color:var(--muted); margin:0; line-height:1.4; } .commento-testo { width:100%; min-height:90px; resize:vertical; font:14px/1.5 inherit; border:1px solid var(--border); border-radius:7px; padding:9px 10px; color:var(--text); } .commento-testo:focus { outline:2px solid var(--azure-border); outline-offset:-1px; } .commento-errore { font-size:12.5px; color:var(--no); } /* ---------- note finali ---------- */ .foot { margin-top:6px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); } .foot .brand { font-family:'Playfair Display',Georgia,serif; font-style:italic; color:var(--navy); font-size:13px; } /* Su schermo stretto niente sta più affiancato: le due colonne diventano una, e la proprietà va sopra la tabella invece che accanto. */ @media (max-width:1100px) { .tools { flex-wrap:wrap; } #propbox { flex:1 1 100%; max-width:none; } .prop { height:auto; } } @media (max-width:900px) { .grid { grid-template-columns:1fr; } .side { order:2; } .t { min-width:42px; height:50px; font-size:23px; } .t.sm { min-width:29px; height:35px; font-size:17px; } input.t { width:92px; font-size:23px; } /* la casella che si impila non è un `input.t`: la tessera è il contenitore, quindi la larghezza va rimessa qui accanto a quella dell'altra */ .t.cas { width:92px; } .t.cas .cas-c { font-size:23px; } .top-title { font-size:24px; } .opt.long { flex:1 1 100%; max-width:none; } .sheet { max-height:252px; } } /* ---------- riepilogo.html ---------- La pagina di chi insegna, non di chi studia: non è linkata da nessuna parte e qui dentro non entra niente della pagina di studio. Le regole stanno in fondo e in una sezione loro perché non servono a nessun'altra pagina. COLORE SOLO SULLA PERCENTUALE GRANDE: rosso-arancione-verde, la stessa scala del semaforo del progetto ma smorzata (bassa saturazione) — qui non è un esito sì/no, è un livello continuo, e un colore acceso griderebbe un giudizio che il numero da solo non dà. Tutto il resto resta grigio/navy: il caso è un riferimento, non un voto, e non prende colore. Nessun grafico: le righe di una tabella si leggono meglio di una barra. I caratteri seguono la regola di sempre — i numeri nel serif, come la tabella delle potenze; le etichette e la prosa nel sans. */ .ri-sub { font-size:13px; color:var(--muted); font-style:italic; } .ri-card { margin-bottom:16px; } .ri-card .card-h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .ri-tag, .ri-when { font-weight:600; letter-spacing:.04em; text-transform:none; color:#8A94A0; font-size:11px; } .ri-tag { border:1px solid var(--border); border-radius:4px; padding:1px 6px; } /* la riga grossa: la percentuale non compare mai da sola — accanto, nello stesso corpo, quella che verrebbe fuori tirando a indovinare, stesso formato. Sotto ciascuna, in piccolo, il conteggio che ci sta dietro («8 su 9»): la percentuale dice il livello a colpo d'occhio, il conteggio dice quanto pesa quel livello. */ .ri-big { display:flex; flex-wrap:wrap; gap:14px 34px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:14px; } .ri-blk { display:flex; align-items:baseline; gap:12px; min-width:0; } .ri-n-wrap { display:flex; flex-direction:column; gap:1px; } .ri-n { font-family:Georgia,serif; font-size:38px; font-weight:700; color:var(--navy); line-height:1; flex:none; } .ri-n-sub { font-family:Georgia,serif; font-size:13px; font-weight:400; color:var(--muted); line-height:1; } .ri-l { font-size:13.5px; font-weight:700; color:var(--navy); line-height:1.35; } .ri-l span { display:block; font-size:12px; font-weight:400; color:var(--muted); max-width:250px; } /* il pavimento del caso è un termine di paragone, non un risultato: sta in secondo piano, ma nello stesso corpo, perché va letto insieme all'altro — e non prende mai il colore della competenza, solo grigio */ .ri-blk.muto .ri-n, .ri-blk.muto .ri-l { color:var(--muted); } .ri-blk.muto .ri-n { font-weight:400; } .ri-rows { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; } .ri-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:14px; } .ri-rl { font-weight:700; color:var(--navy); flex:0 0 250px; } .ri-rv { font-family:Georgia,serif; font-size:17px; font-weight:700; color:var(--navy); } .ri-rv i { font-family:'Figtree',sans-serif; font-size:12.5px; font-weight:400; font-style:normal; color:var(--muted); } .ri-rn { font-size:12px; color:var(--muted); } .ri-h { font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:22px 0 8px; padding-top:14px; border-top:1px solid var(--border); } /* una tabella più larga della colonna scorre dentro di sé: la pagina non deve mai scorrere di lato */ .ri-scroll { overflow-x:auto; } .ri-tab { border-collapse:collapse; width:100%; font-size:13.5px; } .ri-tab th { text-align:left; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); padding:6px 12px 6px 0; white-space:nowrap; } .ri-tab td { padding:7px 12px 7px 0; border-bottom:1px solid #EDF1F5; color:var(--navy); vertical-align:baseline; } .ri-tab td:first-child { font-weight:600; } /* le colonne dei numeri nel serif, come la tabella delle potenze */ .ri-tab td:not(:first-child):not(:nth-child(2)) { font-family:Georgia,serif; white-space:nowrap; } .ri-tab td i { font-family:'Figtree',sans-serif; font-size:12px; font-style:normal; color:var(--muted); } /* un livello mai aperto non è un livello andato male: si spegne, non si segna */ .ri-tab tr.spento td { color:#9AA8B6; } /* il riferimento della schermata, identico a quello in basso a destra nella pagina di studio: un clic lo seleziona tutto, ed è fatto per essere copiato */ .ri-key { font-family:'Figtree',sans-serif; font-size:12px; letter-spacing:.03em; color:var(--muted); background:var(--navy-light); border-radius:4px; padding:2px 6px; user-select:all; -webkit-user-select:all; cursor:text; white-space:nowrap; } /* quando la chiave è anche un link (peggiori, con la pagina nota): stesso aspetto, ma il puntatore dice che si può cliccare oltre che copiare */ a.ri-key { text-decoration:none; cursor:pointer; } a.ri-key:hover { text-decoration:underline; } .ri-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); } /* nella scheda «I dati», in fondo alla pagina, il blocco è l'unico contenuto della card: lo stacco e la riga sopra separerebbero da niente */ #strumenti .ri-actions { margin-top:0; padding-top:0; border-top:none; } #strumenti .ri-note { flex:1 1 100%; margin-top:10px; } /* la cancellazione sta staccata da tutto il resto: non si preme per sbaglio mentre si esporta */ .ri-danger { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:26px; padding-top:14px; border-top:1px dashed var(--border); } .ri-note { font-size:12px; color:var(--muted); flex:1 1 240px; } /* un