/* ============================================================================ TEST DI LIVELLO A2 — foglio di stile. Stesso mondo del sito ("Il quaderno / Vivo"): inchiostro blu su carta, righe sottili, Literata sopra Libre Franklin, ogni segno disegnato. Niente card, niente emoji, niente ombre. Differenza rispetto ai file dentro "sito web/": quelli sono frammenti che WordPress incolla dentro una pagina, quindi hanno le variabili ripetute in ogni file e tutto legato a una classe radice. Qui c'e' un vero, il sito e' statico su Netlify, e quelle regole non servono. I colori sono gli stessi del corso, ma senza var(--theme-palette-color-N): fuori da WordPress quella tavolozza non esiste. ========================================================================= */ :root{ --nv:#1E4159; /* inchiostro */ --mu:#5D6D7E; /* acciaio */ --sl:#2C3E50; /* ardesia, il testo */ --st:#2C5F7E; /* blu secondario */ --pl:#e1e8ed; /* carta scura */ --p2:#f2f5f7; /* carta */ --wh:#ffffff; --rule:#c8d6e0; /* riga sottile, mai testo */ --edge:#7C8FA0; /* bordo di un controllo: serve 3:1 sul fondo */ --red:#A33327; /* la penna che corregge: una risposta sbagliata */ --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --serif:'Literata',Georgia,'Times New Roman',serif; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--p2); color:var(--sl); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } /* Il foglio: carta bianca con la costola rossa a sinistra, come un quaderno. */ .sheet{ max-width:720px; margin:0 auto; min-height:100vh; background:var(--wh); border-left:2px solid var(--red); padding:var(--s7) var(--s6) var(--s8); } h1{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem, 3.4vw, 2.9rem); line-height:1.2; color:var(--nv); margin:0 0 var(--s4); letter-spacing:-.01em; } h2{ font-family:var(--serif); font-weight:700; font-size:1.16rem; line-height:1.3; color:var(--nv); margin:var(--s7) 0 var(--s4); padding-bottom:var(--s2); border-bottom:2px solid var(--nv); } p{margin:0 0 var(--s4)} a{color:var(--st)} a:hover{color:var(--nv)} .lede{ font-family:var(--serif); font-size:1.16rem; line-height:1.55; color:var(--sl); margin-bottom:var(--s6); } .aiuto,.minuta,.pannello-nota,.nota-salvataggio{ font-size:13px; line-height:1.5; color:var(--mu); } /* ---- testata ---- */ .testata{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--rule); margin-bottom:var(--s7); } .eyebrow{ margin:0; font-size:13px; font-weight:600; color:var(--mu); } /* Il timbro: l'unica cosa in maiuscoletto di tutta la pagina. */ .postmark{ margin:0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--nv); border:1.5px solid var(--nv); padding:3px var(--s2); } /* ---- l'elenco dei fatti, su righe ---- */ .fatti{ display:grid; grid-template-columns:150px 1fr; margin:0 0 var(--s6); border-top:1px solid var(--rule); } .fatti .r{display:contents} .fatti dt,.fatti dd{ margin:0; padding:var(--s3) 0; border-bottom:1px solid var(--rule); } .fatti dt{font-size:13px;font-weight:600;color:var(--mu)} .fatti dd{color:var(--sl)} /* ---- campi del modulo: la riga e' il campo, non la scatola ---- */ .campo{margin-bottom:var(--s5)} .campo label{ display:block; font-size:13px; font-weight:600; color:var(--sl); margin-bottom:6px; } .campo input{ display:block; width:100%; font-family:var(--serif); font-size:1.06rem; font-weight:700; color:var(--nv); background:transparent; border:0; border-bottom:1.5px solid var(--edge); border-radius:0; padding:0 0 7px; } .campo input:focus{outline:2px solid var(--nv);outline-offset:3px} .campo input:user-invalid{border-bottom-color:var(--red)} .campo .aiuto{display:block;margin-top:7px} /* Il campo trappola non si vede e non si tabula. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .consenso{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:start; margin-bottom:var(--s4); font-size:14px; line-height:1.5; } .consenso input{margin:4px 0 0;width:18px;height:18px;accent-color:var(--nv)} .consenso label{color:var(--sl)} .nota-salvataggio{margin-top:var(--s5)} /* ---- bottoni ---- */ .btn{ display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.2; padding:12px var(--s5); border:1.5px solid var(--nv); border-radius:0; cursor:pointer; text-decoration:none; } .btn-p{background:var(--nv);color:var(--wh)} .btn-p:hover{background:var(--sl);color:var(--wh)} .btn-s{background:transparent;color:var(--nv)} .btn-s:hover{background:var(--pl);color:var(--nv)} .btn-t{background:transparent;color:var(--mu);border-color:var(--edge)} .btn-t:hover{color:var(--nv);border-color:var(--nv)} .btn-big{width:100%;justify-content:center;padding:15px var(--s5);margin-top:var(--s5)} .btn:focus-visible{outline:2px solid var(--nv);outline-offset:3px} .btn:disabled{opacity:.45;cursor:default} .linkish{ background:none;border:0;padding:0; font-family:var(--sans);font-size:14px;font-weight:600; color:var(--st);text-decoration:underline;cursor:pointer; } .linkish:hover{color:var(--nv)} /* I segni sono disegnati, mai caratteri tipografici. */ .ico{ width:17px;height:17px;flex:none; fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; } /* ---- avanzamento ---- */ .barra{margin-bottom:var(--s6)} .barra-pista{height:3px;background:var(--pl)} /* scaleX invece di width: animare la larghezza rifa il layout a ogni frame. */ .barra-riempita{height:3px;width:100%;background:var(--nv);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease} .barra-testo{margin:var(--s2) 0 0;font-size:13px;color:var(--mu)} /* ---- la domanda ---- */ .q{border:0;padding:0;margin:0 0 var(--s7)} .q-num{ padding:0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mu); } .q-testo{ font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1.45; color:var(--nv); margin:var(--s4) 0 var(--s5); } .q-consegna{ font-size:14px; font-style:italic; color:var(--mu); margin:calc(var(--s5) * -1 + var(--s2)) 0 var(--s5); } /* La casella da riempire e' una riga su cui si scrive, non un rettangolo. */ .gap{ font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--nv); background:transparent; border:0; border-bottom:2px solid var(--edge); border-radius:0; padding:0 var(--s2) 2px; width:min(260px,60vw); } .gap:focus{outline:none;border-bottom-color:var(--nv);background:var(--p2)} /* ---- le opzioni ---- */ .opzioni{display:block} .opt{ display:grid; grid-template-columns:auto auto 1fr; gap:var(--s3); align-items:baseline; padding:var(--s3) 0; border-top:1px solid var(--rule); cursor:pointer; } .opt:last-child{border-bottom:1px solid var(--rule)} .opt input{margin:0;width:18px;height:18px;accent-color:var(--nv);align-self:center} .opt-l{ font-size:11px;font-weight:700;letter-spacing:.1em; color:var(--mu);min-width:1em; } .opt-t{ font-family:var(--serif); font-size:1.16rem; font-weight:600; color:var(--nv); } .opt:has(input:checked) .opt-t{text-decoration:underline;text-underline-offset:3px} .opt:has(input:focus-visible){outline:2px solid var(--nv);outline-offset:2px} /* ---- navigazione ---- */ .navi{ display:flex; gap:var(--s3); justify-content:space-between; padding-top:var(--s5); border-top:1px solid var(--rule); } .riga-mappa{margin:var(--s5) 0 0;text-align:center} /* ---- pannelli (mappa, domande mancanti) ---- */ .pannello{ margin-top:var(--s6); padding:var(--s5); background:var(--p2); border-top:2px solid var(--nv); } .pannello h2{margin-top:0} .griglia-q{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s4) 0 var(--s5); } .mq{ width:40px;height:40px; font-family:var(--sans);font-size:14px;font-weight:400; color:var(--mu); background:var(--wh); border:1px solid var(--rule); border-radius:0; cursor:pointer; } .mq:hover{border-color:var(--nv);color:var(--nv)} .mq.is-fatta{font-weight:700;color:var(--nv);border-color:var(--edge)} .mq.is-qui{outline:2px solid var(--nv);outline-offset:1px} .avviso{ margin:var(--s6) 0; padding:var(--s4) 0 var(--s4) var(--s5); border-left:2px solid var(--nv); } .avviso p:last-child{margin-bottom:0} .avviso-azioni{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)} .is-errore{color:var(--red)} /* ---- risultato ---- */ .score{ font-family:var(--serif); font-size:clamp(2rem, 3.4vw, 2.9rem); font-weight:700; line-height:1.1; color:var(--nv); font-variant-numeric:tabular-nums; margin:var(--s5) 0 var(--s2); padding-bottom:var(--s3); border-bottom:2px solid var(--nv); } .score-pc{font-size:1.16rem;font-weight:600;color:var(--mu);margin-left:var(--s3)} .tempo{font-size:13px;color:var(--mu)} /* Le due penne: blu quello che e' giusto, rosso quello che e' sbagliato. */ .esiti{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 var(--s6)} .eq{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px; font-size:14px;font-weight:700; font-variant-numeric:tabular-nums; } .eq.is-ok{color:var(--nv);border:1.5px solid var(--nv)} .eq.is-ko{color:var(--red);border:1.5px solid var(--red);text-decoration:line-through} .invito{margin-top:var(--s4)} /* ---- chiusura ---- */ .chiusura{ margin-top:var(--s9); padding-top:var(--s4); border-top:1px solid var(--rule); font-size:13px; color:var(--mu); } .chiusura p{margin:0 0 var(--s1)} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ---- telefono ---- */ @media (max-width:600px){ body{font-size:16px} .sheet{padding:var(--s5) var(--s4) var(--s7);border-left-width:2px} h2{margin-top:var(--s6)} .fatti{grid-template-columns:1fr} .fatti dt{padding-bottom:0;border-bottom:0} .fatti dd{padding-top:2px} .q-testo{font-size:1.16rem} /* Sul telefono la casella prende la sua riga invece di allargarsi dentro la frase: stretta dentro il testo diventerebbe illeggibile mentre si scrive. */ .gap{font-size:1.16rem;display:block;width:100%;margin:var(--s3) 0} .navi{flex-wrap:wrap} .navi .btn{flex:1 1 auto;justify-content:center} .mq,.eq{width:34px;height:34px} } /* ---- stampa: solo il risultato, senza i comandi ---- */ @media print{ body{background:var(--wh)} .sheet{border-left:0;padding:0;max-width:none} .btn,.linkish,.riga-mappa,.pannello,.avviso-azioni{display:none !important} .eq.is-ko{text-decoration:line-through} } /* --------------------------------------------------------------------------- Ultima regola, e deve restare ultima. L'attributo hidden nasconde un elemento mettendogli display:none, ma lo fa con la specificita' bassissima del foglio del browser: qualsiasi regola nostra con un display dentro (.btn ha display:inline-flex) vince, e l'elemento resta visibile. E' cosi' che "Consegna il test" compariva su tutte le domande invece che solo sull'ultima. ------------------------------------------------------------------------- */ [hidden]{display:none !important}