@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Barlow+Semi+Condensed:wght@500;600&family=Inter:wght@400;500;600&display=swap"); /* ============================================================================= MTDA — FOGLIO DI STILE DEL SITO mtda-style-v9-cld.css · v9 · settembre 2026 Sorgente: MTDA Dance Experience, landing v43 del 31 agosto 2026. Questo file è l'unica dichiarazione di stile del sito: ogni pagina lo collega e non porta CSS proprio. Se una pagina ha bisogno di qualcosa che qui non esiste, quella cosa va aggiunta qui, non nella pagina. DUE TEMI Il tema notte è quello predefinito. Il tema giorno si attiva mettendo data-t="day" sull'elemento ; il pulsante .theme lo commuta. Nessun colore va scritto direttamente in una regola: si usano sempre i token, così il tema chiaro resta corretto senza doppie definizioni. DUE DENSITÀ Le pagine editoriali (landing, presentazione dei corsi) usano il corpo pieno da 20px. Le pagine strumentali — moduli, prenotazioni, elenchi — aggiungono class="app" su e scendono a 17px: stesso sistema, respiro minore. NOVITÀ DELLA v9 Nuova sezione 12, l'orario: la fotografia della Schedula in apertura di pagina e la griglia viva della settimana costruita sul file della Schedula, con i filtri, l'elenco per giorno delle schermate strette, le classi senza orario e la scheda di dettaglio. Con essa arrivano tre corpi di titolo dichiarati — .h-sez, .h-sotto, .h-terzo — che marcano la gerarchia con salti netti invece che con sfumature di grigio. NOVITÀ DELLA v7 Nella scala delle età la riga che separa una classe dall'altra passa da --line-soft a --line-strong: era troppo tenue per reggere righe alte due o tre capoversi, in entrambi i temi. Un sottogruppo può ora annidarsi dentro un altro (.disc dentro .disc) e rientra di conseguenza. NOVITÀ DELLA v6 La sezione 11 — la scala delle età — si allarga: oltre all'asse degli anni e alle bande colorate porta ora l'etichetta di disciplina in negativo, la fila delle mattonelle degli anni e l'elenco delle classi per una data età. L'etichetta in negativo è lo standard per i titoli di sottogruppo: nella gerarchia di un catalogo la disciplina si deve vedere per prima. ORDINE DEL FILE 1. token 6. callout e avvisi 11. scala delle età 2. base 7. moduli 12. orario: la settimana 3. impaginazione 8. cataloghi e programmi in griglia 4. testata 9. tabelle e riepiloghi 5. bottoni 10. chiusura, utilità, movimento ========================================================================== */ /* ============================================================ 1. TOKEN === */ :root{ /* --- fondali e inchiostri --- */ --ink:#050a14; /* fondo della pagina */ --navy:#0b1428; /* fondo rialzato: pannelli, fasce */ --navy2:#122347; /* fondo rialzato, secondo grado */ --paper:#f2efe8; /* testo principale */ --muted:#93a6c7; /* testo secondario, etichette */ /* --- oro: l'accento della casa --- */ --gold:#c9a227; /* pieno: bordi, sfondi di bottone */ --gold2:#e8cd77; /* chiaro: testo su fondo scuro */ --on-gold:#160f00; /* testo sopra l'oro pieno */ /* --- linee --- */ --line:rgba(201,162,39,.28); /* linea dorata: separa le sezioni */ --line-soft:rgba(147,166,199,.16); /* linea fredda tenue: righe di elenco */ --line-strong:rgba(147,166,199,.3); /* linea fredda marcata: controlli */ /* --- superfici --- */ --panel:rgba(11,20,40,.5); /* pannello su fondo notte */ --field:rgba(255,255,255,.06); /* campo di modulo */ --field-on:rgba(255,255,255,.09); /* campo in fuoco */ /* --- stati --- */ --ok:#4fd6a4; --warn:#e6bd5c; --warn-line:rgba(230,189,92,.45); --warn-bg:rgba(230,189,92,.1); --err:#f0918b; --err-line:#e0564f; --err-bg:rgba(224,86,79,.12); /* --- livelli delle classi --- */ --lv-b:#4fd6a4; /* basico */ --lv-i:#e6bd5c; /* intermedio */ --lv-a:#f08a86; /* avanzato */ --on-lv:#08101f; /* --- dipartimenti: stessa famiglia dei pallini docente della landing --- */ --dip-danza:#ff8fbc; --dip-teatro:#5fd6a0; --dip-cinema:#7fb0ff; --dip-musica:#e2574c; /* rosso: il giallo resta riservato agli avvisi */ --dip:var(--gold); /* colore di dipartimento corrente, ereditato */ /* --- accento rosa: sezioni per i più piccoli --- */ --rosa:#d62b7d; --rosa-scuro:#a8175a; --rosa-vivo:#c9256e; --rosa-carta:#fdf4f8; --rosa-ink:#3d1a2c; --rosa-soft:#7a4159; --rosa-line:rgba(200,60,130,.28); /* --- caratteri --- */ --serif:'Playfair Display',Georgia,serif; /* titoli, citazioni, cifre */ --cond:'Barlow Semi Condensed',Arial,sans-serif;/* etichette, bottoni, orari */ --sans:'Inter',system-ui,-apple-system,sans-serif; /* testo corrente */ /* --- misure --- */ --fs:20px; /* corpo del testo, densità editoriale */ --wrap:1120px; --r:2px; /* raggio dei bottoni e dei controlli */ --r-box:4px; /* raggio dei riquadri */ --r-panel:6px; /* raggio dei pannelli grandi */ /* --- ombre --- */ --shadow:0 22px 60px rgba(0,0,0,.45); --shadow-gold:0 14px 40px rgba(201,162,39,.28); } /* densità strumentale: */ html.app{ --fs:17px; --wrap:960px } /* --------------------------------------------------- tema giorno --------- */ html[data-t="day"]{ --ink:#f7f4ec; --navy:#efeadd; --navy2:#e7e0cf; --paper:#1a2233; --muted:#5c6a80; --gold:#96760f; --gold2:#7a5f09; --on-gold:#ffffff; --line:rgba(150,112,20,.32); --line-soft:rgba(92,106,128,.22); --line-strong:rgba(92,106,128,.4); --panel:rgba(255,253,246,.75); --field:rgba(255,255,255,.8); --field-on:#ffffff; --ok:#1e7a46; --warn:#8a5a00; --warn-line:rgba(138,90,0,.35); --warn-bg:rgba(230,189,92,.22); --err:#a6182a; --err-line:#c0392b; --err-bg:rgba(192,57,43,.08); --dip-danza:#b02a63; --dip-teatro:#1e7a46; --dip-cinema:#2b57a6; --dip-musica:#b03a2e; /* rosso: il giallo resta riservato agli avvisi */ --shadow:0 18px 44px rgba(80,60,20,.16); --shadow-gold:0 12px 34px rgba(150,118,15,.3); } /* ============================================================= 2. BASE === */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:var(--fs); line-height:1.7; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15; letter-spacing:.01em;text-wrap:balance;margin:0} h2{font-size:clamp(2.1rem,4.4vw,3rem);margin:0 0 .35em} h3{font-size:1.5rem} p{margin:0 0 1.15em} a{color:var(--gold2);text-decoration-color:var(--line);text-underline-offset:3px} a:hover{color:#f3e0a4} html[data-t="day"] a:hover{color:var(--gold)} :focus-visible{outline:2px solid var(--gold2);outline-offset:3px} /* il sipario: fondale fisso, sotto a tutto */ .curtain{position:fixed;inset:0;z-index:-1; background: radial-gradient(120% 70% at 50% 0%,#1b2f5c 0%,rgba(11,20,40,0) 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,.12) 2px 26px), linear-gradient(180deg,#0b1428 0%,#050a14 55%)} html[data-t="day"] .curtain{ background: radial-gradient(120% 70% at 50% 0%,#fffdf6 0%,rgba(247,244,236,0) 60%), repeating-linear-gradient(90deg,rgba(90,70,20,.035) 0 2px,rgba(0,0,0,0) 2px 26px), linear-gradient(180deg,#faf7f0 0%,#f2ede2 100%)} /* commutatore del tema, in alto a destra. Lo script che lo governa sta in fondo a ogni pagina, sono otto righe. */ .theme{position:fixed;top:16px;right:16px;z-index:40; display:flex;align-items:center;gap:.5em; font-family:var(--cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase; font-size:.8rem;padding:.6em 1em;border-radius:var(--r);cursor:pointer; background:rgba(11,20,40,.6);color:var(--muted);border:1px solid var(--line); backdrop-filter:blur(6px);transition:color .15s,border-color .15s} .theme:hover{color:var(--gold2);border-color:var(--gold)} .theme .th-i{font-size:1.05rem} html[data-t="day"] .theme{background:rgba(255,253,246,.7)} @media(max-width:700px){ .theme{top:10px;right:10px;font-size:.72rem;padding:.5em .8em} .theme .th-t{display:none} } /* ==================================================== 3. IMPAGINAZIONE === */ .wrap{width:min(var(--wrap),92vw);margin-inline:auto} section{padding:clamp(56px,8vw,104px) 0} html.app section{padding:clamp(30px,5vw,56px) 0} /* una sezione annidata è un blocco di contenuto, non una fascia di pagina */ section section,.panel section,html.app section section,html.app .panel section{padding:0} /* occhiello: la riga maiuscola spaziata che precede un titolo */ .kicker{font-family:var(--cond);font-weight:500;letter-spacing:.42em;text-transform:uppercase; font-size:.78rem;color:var(--muted);margin:0 0 1.4rem} /* sommario sotto un h2 */ .lede{max-width:60ch;color:var(--muted);font-size:1.22rem;margin:0 0 2.6rem} html.app .lede{font-size:1.08rem;margin-bottom:1.8rem} /* filetto dorato di separazione */ .rule{width:190px;height:1px;margin:2.1rem auto; background:linear-gradient(90deg,transparent,var(--gold),transparent)} /* pannello: il contenitore delle pagine strumentali */ .panel{border:1px solid var(--line);border-radius:var(--r-panel); background:var(--panel);padding:clamp(20px,3vw,34px);margin:0 0 1.6rem} html.app section.panel{padding:clamp(20px,3vw,34px)} .panel>h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:.3em} .panel>.lede{margin-bottom:1.8rem} /* passi di una procedura */ .steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 2rem} .stepdot{display:flex;align-items:center;gap:.55em; font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase; font-size:.8rem;color:var(--muted); padding:.5em 1em;border:1px solid var(--line-strong);border-radius:var(--r)} .stepdot b{font-family:var(--serif);font-size:.95rem;font-weight:600;letter-spacing:0} .stepdot.on{border-color:var(--gold);color:var(--gold2);background:rgba(201,162,39,.12)} .stepdot.done{border-color:var(--ok);color:var(--ok)} /* ========================================================== 4. TESTATA === */ header.hero{padding:clamp(38px,6vw,64px) 0 clamp(30px,5vw,54px);text-align:center} html.app header.hero{text-align:left;padding-bottom:clamp(22px,4vw,38px)} /* titolo in oro brunito */ .title{font-family:var(--serif);font-weight:700;margin:0; font-size:clamp(2.6rem,8.4vw,5.6rem);line-height:.95;letter-spacing:.005em; /* con line-height sotto l'unità le discendenti (p, q, g) escono dal riquadro dell'elemento, e con background-clip:text restano senza colore: questo margine interno allunga il riquadro quel tanto che basta */ padding-bottom:.14em; background:linear-gradient(178deg,#f6e6a8 8%,var(--gold) 42%,#8f6f14 72%,#f0dc9d 96%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 2px 30px rgba(201,162,39,.16)} html[data-t="day"] .title{ background:linear-gradient(178deg,#b9932a 6%,#8a6c10 46%,#6d5408 74%,#a98a25 96%); -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none} html.app .title{font-size:clamp(2.1rem,5.6vw,3.6rem)} .sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.6rem); color:var(--paper);opacity:.92;margin:.5rem 0 1.5rem} .when{font-family:var(--cond);font-weight:600;font-size:clamp(1.05rem,3vw,1.7rem); letter-spacing:.13em;margin:0} .where{font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase; font-size:.9rem;color:var(--muted);margin:.5rem 0 0} /* ========================================================== 5. BOTTONI === */ .btn{display:inline-block;font-family:var(--cond);font-weight:600;letter-spacing:.14em; text-transform:uppercase;font-size:1rem;padding:.92em 2.1em;text-decoration:none; border-radius:var(--r);cursor:pointer;-webkit-appearance:none;appearance:none; transition:background .18s,color .18s,border-color .18s} .btn-p{background:var(--gold);color:var(--on-gold);border:1px solid var(--gold)} .btn-p:hover{background:var(--gold2);border-color:var(--gold2);color:var(--on-gold)} .btn-s{background:transparent;color:var(--paper);border:1px solid var(--line-strong)} .btn-s:hover{border-color:var(--gold);color:var(--gold2)} .btn-mega{font-size:1.25rem;padding:1.05em 2.6em;letter-spacing:.1em;box-shadow:var(--shadow-gold)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.42;pointer-events:none;box-shadow:none} /* bottone in attesa: dorato e vuoto, non spento */ .btn-p.attesa{opacity:1;background:transparent;color:var(--gold2); border:2px solid var(--gold);box-shadow:none;pointer-events:none} /* bottone su due righe: azionechiarimento */ .btn.due{display:flex;flex-direction:column;align-items:center;gap:.18em;line-height:1.25} .btn.due b{font-weight:600;font-size:1em;letter-spacing:.09em} .btn.due i{font-style:normal;font-weight:500;font-size:.7em;letter-spacing:.1em;opacity:.85} /* fila di richiami */ .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.6rem} header.hero .cta-row,.book .cta-row{justify-content:center} html.app .cta-row{margin-top:1.8rem} /* barra di navigazione in fondo a un pannello */ .nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center; margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)} .navmsg{font-family:var(--cond);font-weight:600;letter-spacing:.06em; font-size:.95rem;color:var(--err);flex:1 1 200px} /* numero di telefono, grande */ .phone{font-family:var(--cond);font-weight:600;letter-spacing:.08em; font-size:clamp(1.7rem,5vw,2.7rem);color:var(--paper);text-decoration:none; display:inline-block;margin-top:1.6rem} .phone:hover{color:var(--gold2)} /* ============================================== 6. CALLOUT E AVVISI === */ /* richiamo dorato con barra a sinistra */ .howto{border:1px solid var(--line);border-left:5px solid var(--gold); background:linear-gradient(100deg,rgba(201,162,39,.12),rgba(201,162,39,0) 62%); padding:1.5rem 1.8rem;border-radius:var(--r-box);margin:0 0 2.6rem;max-width:70ch} .howto p{margin:0;font-size:1.12rem;color:var(--paper)} .howto p+p{margin-top:.6rem} .howto-1{font-family:var(--serif);font-weight:600;color:var(--gold2); font-size:clamp(1.4rem,3vw,2rem);line-height:1.12;margin:0 0 .55rem!important} .howto-2{color:var(--muted);font-size:1rem!important} .howto b{font-weight:500;color:var(--gold2)} html[data-t="day"] .howto{background:linear-gradient(100deg,rgba(150,118,15,.14),rgba(150,118,15,0) 62%)} /* avviso neutro e avviso d'attenzione */ .avviso{border:1px solid var(--line-soft);border-radius:var(--r-box); background:var(--panel);padding:1.1rem 1.3rem;margin:0 0 1.6rem;font-size:1rem} .avviso.attenzione{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)} .avviso strong{font-weight:600} /* testo legale */ .legal{font-size:.95rem;line-height:1.6;color:var(--muted); background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-box); padding:1.1rem 1.3rem;margin:0 0 1rem} /* pastiglie di livello */ .lv{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px; border-radius:50%;font-family:var(--cond);font-weight:600;font-size:.82rem;font-style:normal; color:var(--on-lv);vertical-align:2px} .lv-b{background:var(--lv-b)} .lv-i{background:var(--lv-i)} .lv-a{background:var(--lv-a)} .lvkey{display:flex;align-items:center;gap:.35em;flex-wrap:wrap; margin-top:.9rem;font-size:1rem;color:var(--paper)} .lvkey .lv{margin-left:.6em} .lvkey .lv:first-child{margin-left:0} .lvkey span{color:var(--muted)} /* pallino di colore, per docenti o dipartimenti */ .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block; background:var(--dip)} /* ========================================================== 7. MODULI === */ .grid-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem} .field{display:flex;flex-direction:column;gap:.3rem;min-width:0} .field.wide{grid-column:1/-1} .field>label:not(.check),.field>.et{font-family:var(--cond);font-weight:600;letter-spacing:.1em; text-transform:uppercase;font-size:.78rem;color:var(--muted)} .field .hint{text-transform:none;letter-spacing:.02em;font-weight:500;opacity:.85} .field input,.field select,.field textarea{ display:block;width:100%;font-family:var(--sans);font-size:1.02rem;line-height:1.5; color:var(--paper);background:var(--field); border:1px solid var(--line-strong);border-radius:var(--r);padding:.62em .8em} .field textarea{min-height:5em;resize:vertical} .field input::placeholder{color:var(--muted);opacity:.6} .field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--gold2);outline-offset:1px; border-color:var(--gold);background:var(--field-on)} .field select option{background:var(--navy);color:var(--paper)} html[data-t="day"] .field select option{background:#fff;color:var(--paper)} /* campo mancante o non valido */ .field .err{display:none;font-family:var(--cond);font-weight:600;letter-spacing:.06em; font-size:.85rem;color:var(--err)} .field.manca .err{display:block} .field.manca input,.field.manca select,.field.manca textarea{ border-color:var(--err-line);background:var(--err-bg)} /* spunta: casella disegnata, la nativa resta nascosta ma raggiungibile */ .pick{display:inline-flex;align-items:flex-start;cursor:pointer} .pick input{position:absolute;opacity:0;width:0;height:0} .pick .box{width:21px;height:21px;flex:0 0 21px;display:block;position:relative; border:1.5px solid var(--line-strong);border-radius:3px;background:var(--field); transition:background .15s,border-color .15s} .pick:hover .box{border-color:var(--gold2)} .pick input:checked+.box{background:var(--gold);border-color:var(--gold)} .pick input:checked+.box::after{content:"";position:absolute;left:6px;top:2px; width:6px;height:11px;border:solid var(--on-gold);border-width:0 2.5px 2.5px 0; transform:rotate(42deg)} .pick input:focus-visible+.box{outline:2px solid var(--gold2);outline-offset:2px} /* riga con spunta e testo accanto */ .check{display:flex;gap:.8rem;align-items:flex-start;font-size:1rem;line-height:1.5; cursor:pointer} .check .box{margin-top:.15em} .field.manca .box{border-color:var(--err-line)} /* anteprima di un messaggio, in forma di bolla */ .bubble{background:rgba(255,255,255,.055);border:1px solid var(--line-soft); border-radius:10px 10px 10px 3px;padding:1rem 1.15rem} .bubble pre{margin:0;font-family:var(--sans);font-size:1.02rem;line-height:1.55; color:var(--paper);white-space:pre-wrap;word-break:break-word} html[data-t="day"] .bubble{background:rgba(255,255,255,.75)} /* esito di un'elaborazione: età calcolata, totale, conferma breve */ .esito{display:none;align-items:baseline;gap:.9rem;flex-wrap:wrap; margin-top:1.2rem;padding:.9rem 1.2rem;border-radius:var(--r-box); border:1px solid var(--line);background:rgba(201,162,39,.1)} .esito.on{display:flex} .esito b{font-family:var(--serif);font-weight:600;font-size:1.7rem;color:var(--gold2); line-height:1} .esito span{font-size:.98rem;color:var(--muted)} /* codice o riferimento da leggere e trascrivere */ .code{display:inline-block;font-family:var(--cond);font-weight:600; font-size:1.5rem;letter-spacing:.22em; color:var(--gold2);background:rgba(201,162,39,.12); border:1px solid var(--line);border-radius:var(--r-box); padding:.45em .9em;margin:.4rem 0 1rem} /* ========================================= 8. CATALOGHI E PROGRAMMI === */ /* filtri a pastiglia */ .filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 2.4rem} .chip{font-family:var(--cond);font-weight:600;letter-spacing:.09em;text-transform:uppercase; font-size:.95rem;padding:.62em 1.25em;border-radius:var(--r);cursor:pointer; background:transparent;color:var(--muted);border:1px solid var(--line-strong); transition:color .15s,border-color .15s,background .15s} .chip:hover{color:var(--paper);border-color:var(--muted)} .chip.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} /* dipartimento: blocco con barra colorata a sinistra. Il colore si passa nell'attributo style come --dip. */ .dip{margin:0 0 2.4rem;padding-left:1.1rem;border-left:3px solid var(--dip)} .dip>h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em; font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.1;color:var(--dip);margin:0 0 1.1rem} .disc{margin:0 0 1.4rem} .disc>h4{font-family:var(--serif);font-weight:600;font-size:1.22rem; color:var(--paper);margin:0 0 .7rem} .rows{display:flex;flex-direction:column;gap:.6rem} /* gruppo di voci che si prenotano insieme */ .grp{border:1px dashed var(--line);border-radius:var(--r-box);padding:.9rem; background:rgba(201,162,39,.05)} .grp>header{margin:0 .2rem .8rem;font-size:.95rem;color:var(--muted);line-height:1.5} .grp>header b{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem; color:var(--gold2);margin-bottom:.15rem;letter-spacing:.01em} /* voce di catalogo: spunta, contenuto, etichette */ .voce{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start; border:1px solid var(--line-soft);border-radius:var(--r-box); background:var(--panel);padding:.9rem 1.1rem;cursor:pointer; transition:border-color .15s,box-shadow .15s} .voce:hover{border-color:var(--line-strong)} .voce.sel{border-color:var(--dip);box-shadow:inset 3px 0 0 var(--dip)} .voce.dim{opacity:.65} .voce .pick .box{border-color:var(--line-strong)} .voce.sel .pick .box{border-color:var(--gold)} .voce .nome{display:block;font-family:var(--serif);font-weight:600;font-size:1.12rem; line-height:1.25;margin:0 0 .35rem} .voce .orari{display:block;font-family:var(--cond);font-weight:600;letter-spacing:.05em; font-size:1rem;color:var(--gold2);line-height:1.5} .voce .orari i{font-style:normal;font-weight:500;color:var(--muted);letter-spacing:.02em} .voce .meta{display:block;font-size:.92rem;color:var(--muted);margin-top:.2rem} .voce .rownota{display:block;font-size:.92rem;line-height:1.45;color:var(--warn); background:var(--warn-bg);border-radius:3px;padding:.4em .6em;margin-top:.5rem} /* etichette in colonna a destra della voce */ .tags{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem} .tag{font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase; font-size:.75rem;padding:.25em .6em;border-radius:var(--r);white-space:nowrap; border:1px solid transparent} .t-eta{color:var(--gold2);border-color:var(--line);background:rgba(201,162,39,.1)} .t-aud{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)} .t-off{color:var(--muted);border-color:var(--line-strong)} /* conteggio sopra un elenco */ .count{font-family:var(--cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase; font-size:.85rem;color:var(--muted);margin:0 0 1.4rem} .count b{font-family:var(--serif);font-size:1.25rem;color:var(--gold2);letter-spacing:0} /* elenco vuoto */ .empty{color:var(--muted);font-size:1.02rem} /* ============================================ 9. TABELLE E RIEPILOGHI === */ /* elenco di dati in coppie etichetta / valore */ .facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .facts li{display:flex;justify-content:space-between;gap:18px;padding:1rem 0; border-bottom:1px solid var(--line);font-size:1.08rem} .facts b{font-family:var(--cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase; font-size:.8rem;color:var(--muted);padding-top:.22em} .facts span{text-align:right;color:var(--paper)} /* giornata di un riepilogo: giorno a sinistra, voci a destra */ .day{display:grid;grid-template-columns:130px 1fr;gap:1rem; padding:.85rem 0;border-bottom:1px solid var(--line-soft)} .day:first-child{border-top:1px solid var(--gold)} .day .d{font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase; font-size:.88rem;color:var(--gold2);padding-top:.2em} .day ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem} .day li{font-size:1rem;line-height:1.45} .day li code{font-family:var(--cond);font-weight:600;letter-spacing:.04em; color:var(--paper);margin-right:.5em} /* tabella di prospetto */ .ptab{width:100%;border-collapse:collapse;margin-bottom:1.4rem} .ptab th{font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase; font-size:.8rem;color:var(--muted);text-align:right;padding:0 0 .9rem; border-bottom:1px solid var(--gold)} .ptab th:first-child{text-align:left} .ptab td{padding:.95rem 0;border-bottom:1px solid var(--line-soft);text-align:right} .ptab td:first-child{text-align:left} .ptab .n{font-family:var(--serif);font-size:1.25rem;color:var(--gold2)} .ptab .m{color:var(--muted);font-size:.85rem;display:block} /* ================================ 10. CHIUSURA, UTILITÀ, MOVIMENTO === */ footer{border-top:1px solid var(--line);padding:2.6rem 0 3.4rem; color:var(--muted);font-size:.88rem} footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} footer a{color:var(--muted)} footer a:hover{color:var(--gold2)} /* schermata conclusiva */ .done{text-align:center} .done .mark{font-family:var(--serif);font-size:3rem;color:var(--gold2);line-height:1;margin:0} .done h2{margin:.6rem 0 .4em} .done p{max-width:54ch;margin-inline:auto;color:var(--muted)} .done p strong{color:var(--paper);font-weight:600} /* il riepilogo dentro la schermata conclusiva torna allineato a sinistra */ .done .riep{text-align:left;max-width:34rem;margin:1.6rem auto 1.8rem} .hide{display:none!important} .mono{font-family:var(--cond);font-variant-numeric:tabular-nums;letter-spacing:.03em} .center{text-align:center} @media(prefers-reduced-motion:no-preference){ .fade{opacity:0;transform:translateY(14px);animation:up .9s cubic-bezier(.2,.7,.3,1) forwards} .fade:nth-child(2){animation-delay:.09s} .fade:nth-child(3){animation-delay:.16s} @keyframes up{to{opacity:1;transform:none}} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------------------------------------------------- adattamenti ------- */ @media(max-width:860px){ .day{grid-template-columns:1fr;gap:.3rem} } @media(max-width:640px){ .voce{grid-template-columns:auto 1fr} .tags{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:flex-start} .facts li{flex-direction:column;gap:.2rem} .facts span{text-align:left} .cta-row .btn{flex:1 1 100%;text-align:center} } @media(max-width:520px){ :root{--fs:16px} html.app{--fs:16px} } /* =========================================== ACCENTO ROSA — PRIMI PASSI === Sezione dedicata ai bambini: fondo chiaro e rosa in entrambi i temi. Si applica mettendo class="rosa" sulla
. È una deroga voluta al fondale notte, non un secondo sistema: struttura e componenti restano gli stessi, cambiano soltanto i token di colore. */ .rosa{background:var(--rosa-carta);color:var(--rosa-ink); border-top:1px solid var(--line); --paper:var(--rosa-ink); --muted:var(--rosa-soft); --gold:var(--rosa); --gold2:var(--rosa-scuro); --on-gold:#ffffff; --line:var(--rosa-line); --line-soft:rgba(200,60,130,.2); --line-strong:rgba(200,60,130,.35); --panel:#ffffff; --field:#ffffff; --field-on:#ffffff} .rosa h2{color:var(--rosa-scuro)} .rosa .kicker{color:var(--rosa-vivo);letter-spacing:.28em;font-weight:600} .rosa .title{background:none;-webkit-text-fill-color:currentColor;color:var(--rosa-scuro); text-shadow:none} .rosa a[href^="tel:"]{color:#1b3a8c;font-weight:600;text-decoration:underline} .rosa .bubble{background:#fff;border-color:var(--rosa-line)} .rosa .bubble pre{color:var(--rosa-ink)} /* ============================================== 11. SCALA DELLE ETÀ === La mappa delle classi lungo l'asse degli anni, da 3 a 30. Serve a due pagine: quella pubblica dei corsi e i prospetti interni. La scala è divisa anno per anno — ogni tacca è un compleanno — e la banda colorata prende il colore del dipartimento, ereditato da --dip come nel catalogo. Struttura minima di una riga:
Gioco Danza Mer + Ven 18:00–18:50 · Prok
35
==================================================================== */ /* commutatore delle due viste: riusa .chip, cambia solo il ritmo */ .viste{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 2.2rem} /* intestazione con l'asse degli anni, resta in cima mentre si scorre */ .scala-head{position:sticky;top:0;z-index:5;background:var(--ink); padding:.7rem 0 .3rem;margin-bottom:.2rem} .scala-head .et{font-family:var(--cond);font-weight:600;letter-spacing:.12em; text-transform:uppercase;font-size:.75rem;color:var(--muted)} .cl,.scala-head .riga{display:grid; grid-template-columns:minmax(250px,1fr) minmax(330px,1.4fr); gap:1.4rem;align-items:center} /* l'asse: 28 caselle, una per anno; in oro le tacche ogni tre */ .assi{display:grid;grid-template-columns:repeat(28,1fr);height:26px; align-items:end;border-bottom:1px solid var(--gold)} .assi span{grid-row:1;height:100%;display:flex;align-items:flex-end; justify-content:center;padding-bottom:3px; border-left:1px solid var(--line-strong); font-family:var(--cond);font-weight:500;font-size:.68rem;color:var(--muted); font-variant-numeric:tabular-nums} .assi span:last-child{border-right:1px solid var(--line-strong)} .assi span.maj{border-left-color:var(--gold);color:var(--gold2);font-weight:600} /* blocco di una fascia d'età, nella vista per età */ .fascia{display:flex;align-items:baseline;gap:.9em;flex-wrap:wrap; margin:2.2rem 0 .4rem;padding-top:1rem;border-top:1px solid var(--line)} .fascia h3{font-family:var(--serif);font-weight:600;font-size:1.55rem; color:var(--gold2);margin:0} .fascia span{font-family:var(--cond);font-weight:600;letter-spacing:.16em; text-transform:uppercase;font-size:.74rem;color:var(--muted)} /* riga di classe */ .cl{padding:.8rem 0;border-bottom:1px solid var(--line-strong)} .cl:last-child{border-bottom:none} .cl-nome{display:block;font-family:var(--serif);font-weight:600; font-size:1.1rem;line-height:1.25} .cl-meta{display:block;font-family:var(--cond);font-weight:500; letter-spacing:.03em;font-size:.92rem;color:var(--muted);margin-top:.15rem} .cl-meta em{font-style:normal;color:var(--gold2)} .cl-nota{display:block;font-size:.85rem;line-height:1.45;color:var(--warn); background:var(--warn-bg);border-radius:3px;padding:.35em .6em;margin-top:.45rem} .dipdot{display:inline-block;width:9px;height:9px;border-radius:50%; background:var(--dip);margin-right:.55em;vertical-align:1px} /* la pista e la banda */ .tr{padding:0 2.2em} .track{position:relative;display:grid;grid-template-columns:repeat(28,1fr); height:20px;background:var(--field);border-radius:2px} .track::before,.track::after{content:"";position:absolute;inset:0; pointer-events:none;background-size:calc(100% / 28) 100%} .track::before{background-image:linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px)} .track::after{z-index:2;background-image:linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,transparent 1px)} .band{grid-row:1;height:20px;border-radius:2px;background:var(--dip); position:relative;z-index:1} .band.off{background:repeating-linear-gradient(135deg,var(--warn) 0 4px,transparent 4px 9px); box-shadow:inset 0 0 0 1.5px var(--warn-line)} .band.tutte{background:repeating-linear-gradient(135deg,var(--dip) 0 3px,transparent 3px 8px)} .band b{position:absolute;top:50%;transform:translateY(-50%); font-family:var(--cond);font-weight:600;font-size:.74rem;color:var(--muted); font-variant-numeric:tabular-nums} .band .a{right:100%;margin-right:.55em} .band .b{left:100%;margin-left:.55em} /* legenda della scala */ .scalakey{display:flex;flex-wrap:wrap;gap:.6em 1.6em;align-items:center; margin:1.4rem 0 0;font-size:.95rem;color:var(--muted)} .scalakey i{display:inline-block;width:26px;height:11px;border-radius:2px; vertical-align:-1px;margin-right:.5em;background:var(--dip)} .scalakey i.off{background:repeating-linear-gradient(135deg,var(--warn) 0 4px,transparent 4px 9px); box-shadow:inset 0 0 0 1.5px var(--warn-line)} /* la sezione che ospita la scala segue subito la testata: la mappa è il contenuto della pagina, non una fascia che si apre dopo un respiro */ section.mappa{padding-top:clamp(16px,2.4vw,28px)} /* --------------------------------------------------------------------------- etichetta di sottogruppo, in negativo. È lo standard per la disciplina dentro un dipartimento: evidenziata come con l'evidenziatore, non un sottotitolo grigio che si confonde con il contenuto. */ .disc-hl{display:inline-block;margin:0 0 .9rem;padding:.32em .95em; font-family:var(--cond);font-weight:600;letter-spacing:.11em;text-transform:uppercase; font-size:.86rem;line-height:1.3;border-radius:var(--r); background:var(--dip);color:var(--ink)} /* la disciplina rientra sotto il dipartimento, le classi sotto la disciplina */ .dip>h3{margin-bottom:1.3rem} .dip .disc{padding-left:1.4rem;border-left:1px solid var(--line-soft);margin:0 0 2rem} .dip .disc .disc{margin:1.6rem 0 .4rem;border-left-color:var(--line-strong)} /* --------------------------------------------------------------------------- cerca per età: la fila delle mattonelle e l'elenco di ciò che si può fare */ .anni{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 2.4rem} .anni .chip{min-width:3.2em;padding:.5em .8em;font-size:.92rem;text-align:center} .eta-blocco{margin:0 0 2.8rem;padding-top:1.3rem;border-top:1px solid var(--line)} .eta-blocco>h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.4vw,2rem); color:var(--gold2);margin:0 0 .15rem} .eta-blocco>.quante{font-family:var(--cond);font-weight:600;letter-spacing:.14em; text-transform:uppercase;font-size:.75rem;color:var(--muted);margin:0 0 1.3rem} .eta-dip{margin:0 0 1.5rem} .voceE{padding:.5rem 0 .5rem 1.4rem;border-left:2px solid var(--dip)} .voceE+.voceE{margin-top:.15rem} .voceE b{font-family:var(--serif);font-weight:600;font-size:1.08rem;line-height:1.3} .voceE i{font-style:normal;font-family:var(--cond);font-weight:600;letter-spacing:.07em; font-size:.82rem;color:var(--gold2);margin-left:.65em;white-space:nowrap} .voceE span{display:block;font-family:var(--cond);font-weight:500;letter-spacing:.03em; font-size:.95rem;color:var(--paper);opacity:.9} .voceE em{display:block;font-style:normal;font-size:.9rem;line-height:1.45;color:var(--muted)} @media(max-width:860px){ .cl,.scala-head .riga{grid-template-columns:1fr;gap:.55rem} .scala-head{position:static} .tr{padding:0 2em} } /* ================================ 12. ORARIO — LA SETTIMANA IN GRIGLIA === Serve alla pagina mtda.it/orario: la fotografia della Schedula in apertura e, sotto, la griglia viva costruita sul file `schedula-2026-27-vN-cld.json`. Il colore di ogni blocco arriva dal dipartimento della Schedula e viene passato nella variabile --c; il colore dell'inchiostro sopra il blocco in --ci, calcolato dalla pagina sulla luminosità del fondo. ==================================================================== */ /* la pagina dell'orario respira meno di una pagina editoriale: le sue fasce sono capitoli di un unico prospetto, non pagine diverse */ body.pag-orario section{padding:clamp(30px,4.4vw,58px) 0} /* --- gerarchia dei titoli della pagina ---------------------------------- */ .h-sez{font-size:clamp(2.4rem,5.4vw,3.4rem);line-height:1.08;margin:0 0 .28em} .h-sotto{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;margin:0 0 .5em; color:var(--gold2)} .h-terzo{font-family:var(--serif);font-weight:600;font-size:1.35rem; line-height:1.2;margin:0 0 .5rem} /* --- la fotografia della Schedula --------------------------------------- */ .foto{margin:0 0 1.2rem;border:1px solid var(--line);border-radius:var(--r-box); background:#fff;overflow:auto;-webkit-overflow-scrolling:touch} .foto img{width:100%;min-width:900px;height:auto;display:block} .foto-note{display:flex;flex-wrap:wrap;gap:.8em 1.6em;align-items:center; font-family:var(--cond);font-weight:500;letter-spacing:.04em; font-size:.95rem;color:var(--muted);margin:0 0 2.4rem} /* --- barra dei filtri ---------------------------------------------------- */ .filtri{margin:0 0 1.8rem} .filtri .riga{display:flex;flex-wrap:wrap;align-items:center;gap:9px; margin:0 0 .7rem} .filtri .et{font-family:var(--cond);font-weight:600;letter-spacing:.13em; text-transform:uppercase;font-size:.74rem;color:var(--muted); flex:0 0 8.5em} .filtri .chip{font-size:.88rem;padding:.5em 1em} .filtri input[type="number"],.filtri select{ font-family:var(--sans);font-size:.98rem;color:var(--paper); background:var(--field);border:1px solid var(--line-strong); border-radius:var(--r);padding:.45em .6em} .filtri input[type="number"]{width:5.5em} .filtri select option{background:var(--navy);color:var(--paper)} html[data-t="day"] .filtri select option{background:#fff;color:var(--paper)} .filtri .link{background:none;border:0;padding:.4em .2em;cursor:pointer; font-family:var(--cond);font-weight:600;letter-spacing:.08em; text-transform:uppercase;font-size:.78rem;color:var(--gold2)} .filtri .link:hover{color:var(--paper)} @media(max-width:700px){ .filtri .et{flex:1 0 100%} } /* --- la griglia ---------------------------------------------------------- */ .gr-wrap{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line); border-radius:var(--r-box);background:var(--panel);padding:0 0 2px} .gr{display:grid;align-items:stretch} .gr-ang{position:sticky;left:0;z-index:6;background:var(--navy); border-bottom:1px solid var(--gold);border-right:1px solid var(--line)} .gr-gg{grid-row:1;font-family:var(--cond);font-weight:600;letter-spacing:.18em; text-transform:uppercase;font-size:.92rem;color:var(--gold2); padding:.7em .8em;background:var(--navy); border-bottom:1px solid var(--line-strong); border-left:2px solid var(--gold)} .gr-st{grid-row:2;font-family:var(--cond);font-weight:600;letter-spacing:.1em; text-transform:uppercase;font-size:.76rem;color:var(--muted); padding:.45em .8em;background:var(--navy2); border-bottom:1px solid var(--gold)} .gr-st.g1{border-left:2px solid var(--gold)} /* colonna delle ore */ .gr-ore{grid-row:3;position:sticky;left:0;z-index:5;background:var(--ink); border-right:1px solid var(--line)} .gr-ore .o{position:absolute;left:0;right:0; font-family:var(--cond);font-weight:600;font-variant-numeric:tabular-nums; letter-spacing:.04em;font-size:.78rem;color:var(--gold2); padding-left:.55em;transform:translateY(-.62em)} .gr-ore .o.mezza{color:var(--muted);font-weight:500;font-size:.7rem} .gr-ore .o.prima{transform:none;padding-top:2px} /* corpo di una colonna: le righe dell'ora e della mezz'ora sono disegnate dal fondo, così restano nette anche sotto ai blocchi */ .gr-col{grid-row:3;position:relative;border-left:1px solid var(--line-soft)} .gr-col.g1{border-left:2px solid var(--gold)} .gr-col .riga{position:absolute;left:0;right:0;height:0; border-top:1px solid var(--line-strong)} .gr-col .riga.mezza{border-top-style:dotted;border-top-color:var(--line-soft)} /* il blocco di una lezione */ .blk{position:absolute;left:3px;right:3px;overflow:hidden; border-radius:3px;padding:.28em .45em;cursor:pointer; background:var(--c);color:var(--ci); box-shadow:inset 3px 0 0 rgba(0,0,0,.28); transition:filter .12s,box-shadow .12s} .blk:hover{filter:brightness(1.12);box-shadow:inset 3px 0 0 rgba(0,0,0,.28),0 0 0 2px var(--gold2)} .blk .h{display:block;font-family:var(--cond);font-weight:600; font-variant-numeric:tabular-nums;letter-spacing:.03em;font-size:.72rem; opacity:.85;line-height:1.15} .blk .t{display:block;font-family:var(--sans);font-weight:600; font-size:.82rem;line-height:1.18;margin:.05em 0;overflow-wrap:anywhere} .blk.stretta .t{font-size:.74rem;line-height:1.12} .blk.stretta .h,.blk.stretta .d{font-size:.68rem} .blk .d{display:block;font-family:var(--cond);font-weight:500; letter-spacing:.04em;font-size:.74rem;opacity:.9;line-height:1.15} .blk.corta{padding-top:.12em} .blk.corta .t{font-size:.76rem} .blk.alt{background:repeating-linear-gradient(135deg,var(--c) 0 9px,rgba(0,0,0,.22) 9px 18px)} .blk.apre{background:transparent;color:var(--muted); border:1px dashed var(--c);box-shadow:none} .blk.apre .t{color:var(--paper)} /* --- l'elenco per giorno ------------------------------------------------- */ .el-gg{margin:0 0 2.2rem} .el-gg>h3{font-family:var(--serif);font-weight:600;font-size:1.5rem; color:var(--gold2);margin:0 0 .2rem;padding-bottom:.4rem; border-bottom:1px solid var(--gold)} .el-gg>h3 span{font-family:var(--cond);font-weight:600;letter-spacing:.14em; text-transform:uppercase;font-size:.72rem;color:var(--muted);margin-left:.8em} .el-r{display:grid;grid-template-columns:9.5em 1fr;gap:.2rem 1.1rem; align-items:baseline;padding:.62rem 0 .62rem 1rem; border-bottom:1px solid var(--line-soft); border-left:4px solid var(--c);cursor:pointer} .el-r:hover{background:rgba(255,255,255,.04)} html[data-t="day"] .el-r:hover{background:rgba(0,0,0,.035)} .el-r .h{font-family:var(--cond);font-weight:600;font-variant-numeric:tabular-nums; letter-spacing:.05em;font-size:1rem;color:var(--gold2)} .el-r .t{font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.25} .el-r .m{grid-column:2;font-family:var(--cond);font-weight:500;letter-spacing:.03em; font-size:.92rem;color:var(--muted)} .el-r .n{grid-column:2;font-size:.9rem;line-height:1.4;color:var(--warn)} @media(max-width:560px){ .el-r{grid-template-columns:1fr} .el-r .m,.el-r .n{grid-column:1} } /* --- le classi senza orario in griglia ----------------------------------- */ .senza{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.9rem} .senza .v{border:1px solid var(--line-soft);border-radius:var(--r-box); background:var(--panel);padding:.85rem 1rem;border-left:4px solid var(--c)} .senza .v b{display:block;font-family:var(--serif);font-weight:600; font-size:1.08rem;line-height:1.25} .senza .v i{display:block;font-style:normal;font-family:var(--cond); font-weight:600;letter-spacing:.05em;font-size:.9rem;color:var(--gold2); margin-top:.15rem} .senza .v em{display:block;font-style:normal;font-size:.88rem;line-height:1.45; color:var(--muted);margin-top:.3rem} /* --- la scheda di dettaglio ---------------------------------------------- */ .velo{position:fixed;inset:0;z-index:60;display:none; align-items:center;justify-content:center;padding:20px; background:rgba(3,7,16,.72);backdrop-filter:blur(3px)} .velo.on{display:flex} html[data-t="day"] .velo{background:rgba(60,50,25,.4)} .scheda{width:min(520px,100%);max-height:86vh;overflow:auto; background:var(--navy);border:1px solid var(--line); border-top:5px solid var(--c);border-radius:var(--r-panel); box-shadow:var(--shadow);padding:1.5rem 1.6rem} html[data-t="day"] .scheda{background:#fffdf6} .scheda h3{font-family:var(--serif);font-weight:600; font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.15;margin:0 0 .15em} .scheda .occhio{font-family:var(--cond);font-weight:600;letter-spacing:.14em; text-transform:uppercase;font-size:.74rem;color:var(--muted);margin:0 0 1rem} .scheda .quando{font-family:var(--cond);font-weight:600;letter-spacing:.05em; font-size:1.05rem;color:var(--gold2);line-height:1.6;margin:0 0 1rem} .scheda .nota{font-size:.95rem;line-height:1.5;color:var(--warn); background:var(--warn-bg);border-radius:3px;padding:.55em .7em;margin:0 0 1rem} .scheda .chiudi{margin-top:1.2rem} /* --- legenda ------------------------------------------------------------- */ .legenda{display:flex;flex-wrap:wrap;gap:.7em 1.8em;align-items:center; margin:1.4rem 0 0;font-size:.95rem;color:var(--muted)} .legenda i{display:inline-block;width:26px;height:12px;border-radius:2px; vertical-align:-1px;margin-right:.5em;background:var(--dip)} .legenda i.alt{background:repeating-linear-gradient(135deg,var(--gold) 0 5px,rgba(0,0,0,.3) 5px 10px)} .legenda i.apre{background:transparent;border:1px dashed var(--muted)}