/* ========================================================================== DDK — SEZIONI Gli stili delle singole sezioni della home. Poggiano sempre sui mattoni di ddk-base.css, che va caricato prima. NOTA: qui dentro ci sono anche testata e footer. Non e' piu' provvisorio: la cornice resta nostra (DECISIONI.md, 31/07 sera). GeneratePress resta installato ma non disegna niente. ========================================================================== */ /* -------------------------------------------------------------------------- LE PAGINE INTERNE (0.8.0) Prodotti, area riservata, privacy, cookie policy — e tutte quelle future. Condividono la cornice con la home; qui c'e' solo cio' che alla home non serve. -------------------------------------------------------------------------- */ /* LO SPAZIO IN CIMA. La testata e' fissa, cioe' galleggia sopra il contenuto. Sulla home non si nota perche' la prima sezione ha molta aria; una pagina normale comincerebbe sotto la testata e ci finirebbe dietro. E' la prima cosa che salta all'occhio se manca. */ .pagina-interna{padding-block-start:calc(var(--hdr-h) + 3rem); padding-block-end:clamp(4rem,8vw,7rem);min-height:50vh} .pagina-interna__testa{margin-block-end:2.5rem} /* ⚠️ Il selettore e' piu' specifico del necessario APPOSTA. Su queste pagine il foglio di GeneratePress e' ancora caricato (vedi il commento in ddk-front.php) e contiene h1{font-weight:400}, che viene stampato dopo il nostro e a parita' di forza vincerebbe. Una regola piu' specifica risolve il conflitto senza spegnere il foglio del tema — che e' la strada prudente finche' non si sa cosa ci si appoggia in catalogo e area riservata. */ .pagina-interna .pagina-interna__testa h1{font-size:var(--fs-h2);font-weight:600; color:var(--ink);line-height:1.08;letter-spacing:-.03em;margin:0} /* LA LARGHEZZA DI LETTURA, e non e' un vezzo tipografico: una riga lunga tutto lo schermo e' quasi illeggibile, perche' l'occhio arriva in fondo e non ritrova il capo della riga dopo. La misura comoda sono 60-75 caratteri. Vale per privacy e cookie policy, che sono muri di testo. */ .pagina-interna__corpo{max-width:70ch} .pagina-interna__corpo > * + *{margin-block-start:1.15em} .pagina-interna__corpo h2{font-size:var(--fs-h3);margin-block-start:2.4em} .pagina-interna__corpo h3{font-size:1.15rem;margin-block-start:2em} .pagina-interna__corpo ul,.pagina-interna__corpo ol{padding-inline-start:1.3em} .pagina-interna__corpo li + li{margin-block-start:.5em} .pagina-interna__corpo a{color:var(--bordeaux);text-decoration:underline; text-underline-offset:.18em} /* LE PAGINE CHE OSPITANO UNO STRUMENTO — catalogo, area riservata, richiesta accesso — non si incolonnano: si dispongono da sole e vogliono tutto lo spazio. Il template dà loro la classe dopo aver chiesto alla pagina cosa contiene, non guardando l'indirizzo. */ .pagina-interna.ha-strumento .pagina-interna__corpo{max-width:none} /* 0.12.0: un po' d'aria anche qui. Prima era `var(--hdr-h)` esatto, cioe' lo strumento cominciava attaccato al bordo inferiore della testata e l'arrivo sulla pagina era uno stacco secco. Poca — la ricerca e i chip devono restare raggiungibili senza scorrere: chi arriva su /prodotti/ ci arriva con una richiesta gia' fatta e non va allontanato da quello che ha chiesto. */ .pagina-interna.ha-strumento{padding-block-start:calc(var(--hdr-h) + clamp(1.4rem,3vw,2.6rem))} /* -------------------------------------------------------------------------- L'ARRIVO SULLA PAGINA (0.12.0) -------------------------------------------------------------------------- Il contenuto entra invece di comparire di colpo. ⚠️ LA CORNICE NON SI ANIMA, ed e' una scelta, non una dimenticanza. Testata e footer stanno su trentasei pagine: un'animazione vista una volta e' elegante, la stessa vista trentasei volte diventa un mobile che si aspetta — e la testata e' proprio l'arnese che serve per muoversi, quindi deve esserci gia'. In piu' la testata ha un difetto di tempi ancora aperto (il salto all'apertura del menu da telefono): aggiungerle una seconda animazione significa non poter piu' capire quale delle due causa cosa. La cornice c'e' subito, si muove il contenuto. PERCHE' NON USA data-r COME LA HOME. Quel meccanismo aspetta che l'elemento entri nello schermo, e chiede che se ne veda il 10%. Su un elemento molto alto — il catalogo e' alto — il 10% puo' essere piu' di uno schermo intero, e allora non entra mai: la pagina resterebbe bianca. Qui l'animazione parte dal caricamento e non ha nessuna condizione da soddisfare: non esiste il caso in cui resta invisibile. Tutto dentro `prefers-reduced-motion: no-preference`, quindi chi ha chiesto meno animazioni non ne vede nessuna e non serve nessuna regola che spenga. Senza JavaScript funziona lo stesso: qui il JavaScript non c'entra. */ @keyframes ddk-arriva{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes ddk-arriva-fermo{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:no-preference){ /* Le pagine di testo: sale di poco mentre compare. translateY e non translateX: il verticale non si specchia, quindi in arabo e persiano fa la stessa identica cosa. */ .pagina-interna__testa{animation:ddk-arriva .55s var(--ease) both} .pagina-interna:not(.ha-strumento) .pagina-interna__corpo{ animation:ddk-arriva .55s var(--ease) .1s both} /* Le pagine che ospitano uno strumento: solo dissolvenza, senza movimento. Due motivi. Uno strumento che scivola in posizione sembra meno saldo di quello che e'. E un antenato con una trasformazione in corso cambia il comportamento di `position: fixed` nei suoi discendenti — il pannello dei filtri del catalogo su telefono e' fisso, e non va toccato nemmeno per mezzo secondo. */ .pagina-interna.ha-strumento .pagina-interna__corpo > *{ animation:ddk-arriva-fermo .5s var(--ease) .06s both} } /* -------------------------------------------------------------------------- TESTATA ⚠️ Dalla 0.6.0 le voci NON sono piu' scritte a mano nel template: escono da wp_nav_menu(), quindi il markup e' quello di WordPress —