/* * Theme Name: Sunya Child — kinesis * Theme URI: https://dadesign.it/themes/sunya-child * Description: Child theme di Sunya per kinesis-studios.it — studio polifunzionale. Brand via filtro sunya_brand_colors, tipografia Helvetica Now Display. Tema chiaro. * Author: Davide Arduini * Author URI: https://dadesign.it * Template: sunya * Version: 2.4.3 * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: sunya-child * Tags: custom * Requires at least: 6.0 * Tested up to: 7.1 * Requires PHP: 7.4 * * RICHIEDE PARENT SUNYA >= 1.11.1 per la larghezza di pagina (vedi sotto). * * v2.4.3 (2026-09-19) — larghezza del form allineata a quella del testo. * Aggiunta la 11.11: `div.wpforms-container-full { max-width: 820px }`. * Il blocco WPForms e' FRATELLO di .ks-page, non figlio (misurato il 19/09 * su /contatti/ e /lavora-con-noi/), quindi con il parent 1.11.1 il testo * scende a 820 e il form sarebbe rimasto a 1200. Nessun'altra regola * toccata: l'820 della 11.1 era gia' scritto, era solo morto. * * v2.4.2 (2026-09-18) — pulizia, nessuna regola CSS toccata. * Tolto da functions.php il ponte dei page template Twentig: le 14 pagine * pubblicate sono rimappate sui template Sunya (misurato via REST il 18/09, * zero `tw-*`; /linktree/ su Canvas). Eliminati i cinque file morti del * child (css/custom.css, js/custom.js, inc/*.php): mai caricati. * * v2.4.1 (2026-08-26) — taratura della 12 e ancoraggi misurati. * 1) --ks-header-offset da 120px (valore ereditato dal child TT1, mai * misurato) a 90px: l'header Sunya e' 71px sticky, misurato in pagina * con scroll reale. Governa tutti gli ancoraggi interni. * 2) La 12.3 non consuma piu' --sunya-header-height (che il parent NON * dichiara) ma lo stesso --ks-header-offset della sezione 5. Prima le * due regole dicevano numeri diversi sullo stesso h2 — 104px contro * 120px — e vinceva la 5 per specificita' (0,2,0 contro 0,1,1): * misurato in pagina, non dedotto. Ora c'e' un numero solo. * 3) Via gli 11 fallback colore dalla sezione 12 (motivi nel cartiglio * della sezione): la 12 e' condivisa e un fallback la porterebbe su * un altro brand; uno era per giunta sbagliato. Le sezioni 1-11 * restano com'erano: perimetro dichiarato, non pulizia a tappeto. * 4) Aggiunto il cartiglio di intestazione della sezione 12, che era * arrivato senza: la mappa 12.x, il modo B e le regole colore. * Nessun cambiamento di resa atteso: i token sono tutti dichiarati dal * filtro brand, i fallback erano codice morto. Da confermare in pagina. * * v2.4.0 (2026-08-26) — sezione 12: pagine persone / team. * Nuovo slot semantico condiviso fra i child (come la 11 e' il CSS di pagina * editoriale): .ks-team, .ks-person, .ks-role, .ks-intro, .ks-tags, .ks-cv. * Sorgente: wp-clients/kinesis-studios.it/css/chi-siamo.css. * Le sotto-sezioni non usate restano DICHIARATE VUOTE: la corrispondenza fra * child vale solo se lo stesso numero significa la stessa cosa ovunque. * * ⚠️ Il CSS della sezione 12 e' andato in produzione il 2026-08-26 dentro un * file che dichiarava ancora 2.3.0: l'handle del child e' versionato con * SUNYA_CHILD_VERSION (sunya_normalize_style_version() del parent riallinea * solo 'sunya-style'), quindi la query non era cambiata. Con max-age=2592000 * chi aveva gia' in cache la 2.3.0 senza sezione 12 se la sarebbe tenuta per * 30 giorni: pagina Chi siamo senza schede. Il bump E' il cache busting. * * v2.3.0 (2026-08-26) — via il pulsante WhatsApp flottante. * WhatsApp diventa un bottone normale fra le azioni della pagina Contatti, * come sugli altri siti. Tolte le regole .ks-whatsapp (sezioni 7 e 8), il * selettore di esclusione su linktree e l'hook nel functions.php. Il nome * .ks-whatsapp resta BRUCIATO: non riusarlo per altro. * L'immagine img/whatsapp-button.svg e la cartella img/ le ha gia' eliminate * Davide il 2026-08-26. * * v2.0.0 (2026-08-25) — riscrittura sul contratto brand. * I colori NON stanno piu' qui: stanno nel filtro sunya_brand_colors in * functions.php. Sono spariti anche link, nav e pulsanti, che il parent * possiede dalla v1.8.3: riscriverli nel child e' esattamente il difetto * che ha reso il menu illeggibile su dadesign (1.09) al salto di agosto. * * Qui resta SOLO cio' che il parent non puo' sapere: * tipografia del cliente, classi di pagina, integrazioni di terze parti. */ /* ========================================================================== 1. FONT — Helvetica Now Display COME ERANO NEL CHILD TT1, E PERCHE' NON POTEVANO RESTARE COSI' Il child Twenty Twenty-One dichiarava OTTO famiglie distinte ('Helvetica Now Display Bold', '... Medium', '... RegIta' …), nessuna con font-weight o font-style. Con quel setup un `font-weight: 600` non trova nulla da caricare: il browser sintetizza il grassetto. Sul parent Sunya non lo sintetizza affatto — style.css dichiara `font-synthesis: none` su body dalla v1.2.5, apposta per impedire i falsi corsivi/grassetti. Portando le otto famiglie tali e quali, ogni peso richiesto dal parent sarebbe uscito in Regular. Non un difetto estetico: la gerarchia tipografica sparisce. Qui c'e' UNA famiglia con quattro pesi x due stili. I file sono gli stessi, riconvertiti in woff2: 1.200.780 B -> 358.900 B (30%). Gli originali .ttf stanno in _custom-childs/twentytwentyone-child-kinesis/fonts/ come riferimento. ⚠️ LICENZA: Helvetica Now e' un font Monotype. Servirlo dalla cartella del tema e' distribuzione pubblica — da verificare che la licenza in essere la copra (nota aperta dal censimento del 2026-08-25). ========================================================================== */ @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-LightIta.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-RegIta.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-MedIta.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('fonts/HelveticaNowDisplay-BoldIta.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* ========================================================================== 2. TOKEN NON-COLORE Qui NON ci sono colori: li governa il filtro sunya_brand_colors. Un token colore ridichiarato in questo :root verrebbe comunque battuto dal secondo :root del parent (ordine sorgente), quindi sarebbe ridondanza che confonde chi legge — o peggio, sembra la fonte di verita' senza esserlo. --ks-header-offset: UN SOLO valore per tutti gli ancoraggi interni. Nel child TT1 erano otto blocchi di scroll-margin-top hardcoded (100 / 140 / 160px, 34 ancore) tarati sull'header TT1 + Twentig da 80px. Con l'header Sunya vanno rimisurati: qui si cambia una riga. ========================================================================== */ :root { --ks-font: 'Helvetica Now Display', system-ui, -apple-system, sans-serif; /* MISURATO il 2026-08-26 sull'header Sunya reale: 71px, position sticky, e 71px anche in stato --scrolled (scroll REALE, non simulato: IntersectionObserver non funziona nel contesto in cui si esegue il JS di verifica). 90px = header + ~19px di respiro. Governa TUTTI gli ancoraggi interni: la regola generica della sezione 5 e lo scroll-margin-top della 12.3. Era 120px, cioe' un valore di partenza ereditato dal child TT1, mai misurato. */ --ks-header-offset: 90px; --sunya-font-body: var(--ks-font); --sunya-font-heading: var(--ks-font); } /* ========================================================================== 3. TIPOGRAFIA La scala del child TT1 era otto regole `clamp()` tutte con `!important`, necessarie per battere TT1. Sunya ha una propria scala fluida in theme.json (preset fontSizes, v1.3.0) e i controlli Customizer sunya_heading_scale / sunya_heading_letter_spacing. Qui resta solo la spaziatura, che e' una scelta del brand: il child TT1 metteva letter-spacing 0.07rem su titoli, menu e bottoni. Le DIMENSIONI si tarano dal Customizer dopo lo switch, non con !important dal child. ========================================================================== */ body { font-family: var(--ks-font); } h1, h2, h3, h4, h5, h6, .wp-block-heading { font-family: var(--ks-font); letter-spacing: 0.07rem; } /* ========================================================================== 4. CLASSI DI PAGINA — home `.kinesis-title` / `.kinesis-subtitle` sono classi scritte dentro il post_content della home. Restano al child perche' il parent non le conosce. Lo span arancio dentro il titolo sta su hero scura, e li' e' legittimo: la carta reale e' un overlay nero al 70% su immagine, misurata rgb(55,52,48), dove l'arancio da' 6.02. ⚠️ RETTIFICA 2026-08-26. Il censimento del 25/08 aveva segnalato questo titolo e l'H2 "La nostra mission" come arancio su BIANCO a 2.06. Era un falso positivo dello scanner: risaliva il DOM fino al body invece di fermarsi alla carta effettiva — lo stesso errore gia' a verbale su dadesign. Misurati sull'elemento reale danno 6.02 e 12.38. Non c'e' niente da correggere nel contenuto. ========================================================================== */ .kinesis-title { font-family: var(--ks-font); font-weight: 700; font-style: italic; letter-spacing: 0.2rem; /* La scala del brand, ripresa dal child TT1 (v2.2.0). Senza questa riga il titolo scende da 83.2px a 51.2px, perche' la scala Sunya e' piu' contenuta di quella che TT1 forzava con `!important`. Qui l'`!important` NON serve: il child esce dopo il parent e a parita' di peso vince per ordine sorgente. */ font-size: clamp(2.8rem, 5vw, 5.2rem); text-shadow: -1px 0 1px var(--sunya-color-surface-dark, #000), 1px 0 1px var(--sunya-color-surface-dark, #000), 0 -1px 1px var(--sunya-color-surface-dark, #000), 0 1px 1px var(--sunya-color-surface-dark, #000); } /* La parola "Kinesis" dentro il titolo e' arancione: era nel child TT1 e nella v2.0.0 mi era sfuggita, quindi usciva bianca come il resto. Sulla carta reale della hero — overlay nero al 70% su immagine, misurata rgb(55,52,48) — l'arancio da' 6.02: legittimo. Token e non esadecimale, cosi' segue il brand. */ .kinesis-title span { color: var(--sunya-color-accent); } .kinesis-subtitle { font-family: var(--ks-font); letter-spacing: 0.07rem; font-size: clamp(1.1rem, 1.6vw, 1.8rem); } /* Zoom morbido su immagini/box marcati nel contenuto */ .zoom-container { transition: transform 0.8s ease; } .zoom-container:hover { transform: scale(1.1); } /* ========================================================================== 5. ANCORAGGI INTERNI Il child TT1 elencava 34 id uno per uno. Qui la regola e' generica: qualunque elemento con un id dentro il contenuto si ferma sotto l'header. Aggiungere una sezione nuova non richiede piu' di toccare il CSS. ========================================================================== */ .sunya-entry-content [id], .entry-content [id] { scroll-margin-top: var(--ks-header-offset); } /* ========================================================================== 6. RESIDUI TT1 NEL CONTENUTO — ponti temporanei Non sono scelte di design: riproducono cio' che il sito rende OGGI, in attesa che il blocco venga rifatto nell'editor. Ogni riga qui e' debito, e va tolta quando il contenuto e' bonificato. ========================================================================== */ /* Un gruppo alignfull della home porta `has-subtle-background-color`, slug della palette Twenty Twenty-One. Il fondo #F4F4F4 che si vede oggi arriva da DUE fonti che spariscono entrambe con lo switch: il CSS inline generato da TT1 (`:root .has-subtle-background-color`) e una regola di Twentig. Senza questo ponte il blocco resta senza fondo. TODO CONTENUTO: rifare il blocco con uno slug della palette Sunya (surface-light) e cancellare questa regola. */ .has-subtle-background-color { background-color: #F4F4F4; } /* ========================================================================== 7. TERZE PARTI ========================================================================== */ /* --- Pulsante WhatsApp flottante: RIMOSSO (v2.3.0) --- Non e' una dimenticanza. WhatsApp e' un bottone normale fra le azioni della pagina Contatti (`.ks-btn` su wa.me con testo precompilato), come su dadesign e davidearduini: il flottante globale era un residuo del child TT1 e duplicava la stessa azione su ogni pagina. Tolti insieme: le regole .ks-whatsapp / :hover, il selettore di esclusione su linktree, la voce in sezione 8, l'hook kinesis_whatsapp_button() nel functions.php e l'immagine img/whatsapp-button.svg (cartella img/ eliminata il 2026-08-26). ⚠️ Il nome .ks-whatsapp resta BRUCIATO: non riusarlo per altro. */ /* Pagina linktree: nessun elemento flottante. Restano i due che esistono davvero — badge Iubenda e torna-su del parent. Il terzo selettore e' caduto con la v2.3.0. */ .page-id-1301 .floatable-wrapper, .page-id-1301 .sunya-back-to-top { display: none !important; } /* --- Iubenda: badge e bottone accessibilita' --- Il `bottom: 60px` era tarato per stare SOPRA il pulsante WhatsApp, che partiva a 65px. Senza il flottante puo' restare o scendere: si decide a vista dopo lo switch, non a tavolino. Il bianco del bottone accessibilita' e' un requisito di Iubenda, non una scelta di brand: resta esadecimale di proposito. */ .floatable-wrapper, .floatable-bottom-left { position: fixed; bottom: 60px !important; left: 15px !important; } .iub-accessibility-btn { background-color: #ffffff !important; } #iub-legalDoc { border-top: 0 !important; } /* --- WPForms --- La skin dei campi la fa il parent da css/forms.css (v1.8.7), che mappa le variabili --wpforms-* sui token Sunya. Il child TT1 forzava `.wpforms-submit { background: #ff9f0f !important }`: NON viene portato. Con il filtro brand il submit prende accent + on-accent, e on-accent su questo arancio vale #000000 (10.22) invece del bianco (2.06) che era il default nascosto del tema. ⚠️ Da MISURARE dopo lo switch, non da dare per buono. */ /* ========================================================================== 8. ACCESSIBILITA' MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .zoom-container, .zoom-container:hover { transition: none; transform: none; } } /* -------------------------------------------------------------------------- 11.1 Contenitore di pagina — .ks-page -------------------------------------------------------------------------- */ .ks-page { max-width: 820px; margin: 0 auto; } /* 2026-09-19 — Questa riga era MORTA fino al parent 1.11.0: il fallback di larghezza del parent pesava 0,7,0 contro lo 0,1,0 di .ks-page e vinceva sempre, quindi /contatti/ e /lavora-con-noi/ misuravano 1200, non 820. Dalla 1.11.1 il fallback sta in :where() e l'820 rende. Sono le sole due pagine del sito che portano .ks-page (misurato sulle 14 pubblicate il 19/09); la larghezza del form la fa la 11.11. */ /* -------------------------------------------------------------------------- 11.2 Lead di pagina -------------------------------------------------------------------------- */ .ks-page .ks-lead { font-size: 1.05rem; color: var(--sunya-color-text-light, #757575); margin-bottom: 1.2em; } /* -------------------------------------------------------------------------- 11.3 Callout — .ks-note -------------------------------------------------------------------------- */ .ks-note { background: var(--sunya-color-surface-light, #FBF6EC); border-left: 3px solid var(--sunya-color-accent-contrast, #A86200); border-radius: 0 8px 8px 0; padding: 12px 18px; margin: 1em 0 1.4em; font-size: .96rem; } /* -------------------------------------------------------------------------- 11.4 — (dadesign: .dd-nav indice ancore — non usato qui) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 11.5 Avviso con icona — .ks-appointment (slot semantico di .dd-promise / .dea-promise: qui l'avviso è "Tutti i servizi sono su appuntamento", bordo arancio brand) -------------------------------------------------------------------------- */ .ks-appointment { display: flex; align-items: center; gap: 10px; background: var(--sunya-color-surface-light, #FBF6EC); border: 1px solid #E5E2DC; border-left: 3px solid var(--sunya-color-accent-bright, #FF9F0F); border-radius: 0 8px 8px 0; padding: 12px 18px; margin: 0 0 1.4em; font-size: .98rem; font-weight: 600; } .ks-appointment svg { width: 20px; height: 20px; flex: none; fill: var(--sunya-color-accent-contrast, #A86200); } /* -------------------------------------------------------------------------- 11.6 Bottoni — base + variante brand Scopati sotto .ks-page come su dadesign/davidearduini: senza .ks-page sul contenitore i bottoni escono nudi. .ks-btn--brand, NON --primary (nome bruciato su dadesign) e NON --invert (qui l'inversione è arancio+nero, semantica diversa dal dark+cyan di dadesign). -------------------------------------------------------------------------- */ .ks-page .ks-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1.5px solid var(--sunya-color-accent-contrast, #A86200); border-radius: 10px; background: transparent; color: var(--sunya-color-accent-contrast, #A86200); font-size: 1rem; font-weight: 600; text-decoration: none; line-height: 1; min-height: 48px; transition: background .15s, color .15s, border-color .15s; } .ks-page .ks-btn:hover, .ks-page .ks-btn:focus { background: var(--sunya-color-surface-light, #FBF6EC); color: var(--sunya-color-accent-contrast, #A86200); } .ks-page .ks-btn:focus-visible { outline: 2px solid var(--sunya-color-accent-contrast, #A86200); outline-offset: 2px; } .ks-page .ks-btn svg { width: 19px; height: 19px; flex: none; fill: currentColor; } /* Variante brand: arancio pieno + inchiostro NERO (10.22:1). MAI bianco (2.06:1). Se il parent espone --sunya-color-accent-ink (fase 4, v1.9.3), sostituire il fallback surface-dark con quello. Hover: arancio → accent-contrast con inchiostro bianco (4.22:1 — sopra il 3:1 dei componenti UI; alternativa senza discesa sotto AA: arancio invariato + filter brightness(.92)). Da verificare a vista. */ .ks-page .ks-btn--brand { background: var(--sunya-color-accent-bright, #FF9F0F); border-color: var(--sunya-color-accent-bright, #FF9F0F); color: var(--sunya-color-surface-dark, #000000); } .ks-page .ks-btn--brand:hover, .ks-page .ks-btn--brand:focus { background: var(--sunya-color-accent-contrast, #A86200); border-color: var(--sunya-color-accent-contrast, #A86200); color: var(--sunya-color-text-on-dark, #FFFFFF); } /* -------------------------------------------------------------------------- 11.7 Social — .ks-social Quadrati bordo accent; hover = riempimento brand + inchiostro nero, coerente con la variante --brand. -------------------------------------------------------------------------- */ .ks-social { display: flex; gap: 10px; margin-top: .8em; } .ks-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--sunya-color-accent-contrast, #A86200); border-radius: 10px; color: var(--sunya-color-accent-contrast, #A86200); transition: background .15s, color .15s, border-color .15s; } .ks-social a:hover, .ks-social a:focus { background: var(--sunya-color-accent-bright, #FF9F0F); border-color: var(--sunya-color-accent-bright, #FF9F0F); color: var(--sunya-color-surface-dark, #000000); } .ks-social svg { width: 20px; height: 20px; fill: currentColor; } /* -------------------------------------------------------------------------- 11.8 Box informativo — .ks-info-card + .ks-small .ks-info-card, NON .ks-card (tenuto libero per la home, stessa scelta di dadesign/davidearduini). -------------------------------------------------------------------------- */ .ks-info-card { background: var(--sunya-color-surface-light, #FBF6EC); border: 1px solid #E5E2DC; border-radius: 10px; padding: 18px 22px; } .ks-info-card strong { display: block; margin-bottom: .5em; font-size: 1.05rem; font-family: var(--sunya-font-heading); } .ks-info-card address { font-style: normal; line-height: 1.6; } .ks-info-card ul { list-style: none; margin: 0; padding: 0; } .ks-info-card li { margin: .35em 0; } .ks-small { font-size: .92rem; color: var(--sunya-color-text-light, #757575); } /* -------------------------------------------------------------------------- 11.9 — (dadesign: pagina Servizi — non esiste qui) -------------------------------------------------------------------------- */ .ks-service-title { border-left: 6px solid var(--sunya-color-accent-bright); padding-left: 1.1rem; } /* -------------------------------------------------------------------------- 11.10 Specifico pagina Contatti — .ks-contact .ks-actions .ks-info .ks-maps + .ks-hours (griglia orari, componente proprio di Kinesis: 7 giorni su due colonne, una su mobile). -------------------------------------------------------------------------- */ .ks-contact .ks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.2em 0 2em; } .ks-contact .ks-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.4em 0; } .ks-contact .ks-info-card--wide { grid-column: 1 / -1; } .ks-contact .ks-maps { display: inline-block; margin-top: .7em; font-size: .95rem; } .ks-contact .ks-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .ks-contact .ks-hours > div { display: flex; justify-content: space-between; gap: 12px; padding: .3em 0; border-bottom: 1px dashed #E5E2DC; font-size: .96rem; } .ks-contact .ks-hours > div:nth-last-child(-n+2) { border-bottom: none; } .ks-contact .ks-hours .ks-day { font-weight: 600; } .ks-contact .ks-hours .ks-closed { color: var(--sunya-color-text-light, #757575); } @media (max-width: 600px) { .ks-contact .ks-info { grid-template-columns: 1fr; } .ks-contact .ks-actions { flex-direction: column; } .ks-contact .ks-btn { justify-content: center; } .ks-contact .ks-hours { grid-template-columns: 1fr; } .ks-contact .ks-hours > div:nth-last-child(-n+2) { border-bottom: 1px dashed #E5E2DC; } .ks-contact .ks-hours > div:last-child { border-bottom: none; } } /* -------------------------------------------------------------------------- 11.11 WPForms — larghezza La SKIN dei campi la fa il PARENT da css/forms.css v1.8.7 + filtro brand, come su davidearduini: qui non si ridichiara. Submit da misurare post-switch: nota nel child, sezione 7. 2026-09-19 — Qui c'e' solo la LARGHEZZA, e serve. Il blocco WPForms non sta dentro .ks-page: WordPress lo rende come fratello, non come figlio, perche' un blocco non puo' annidarsi in un blocco HTML. Misurato il 19/09 su /contatti/ e /lavora-con-noi/: i figli diretti di .sunya-entry-content sono .ks-page e, accanto, div.wpforms-container-full. Fino al parent 1.11.0 non si notava — il fallback del parent a 0,7,0 dava 1200 a tutti e due. Dalla 1.11.1 quel fallback sta in :where() e .ks-page (0,1,0) porta il testo a 820: senza questa regola il form resterebbe a 1200 sotto una colonna di 820. Stessa regola gia' presente nel child dadesign dalla 11.11. -------------------------------------------------------------------------- */ div.wpforms-container-full { max-width: 820px; margin: 0 auto; } /* ========================================================================== 12. PAGINA PERSONE / TEAM — slot semantico condiviso Decisione Davide, 2026-08-26. La 11 e' "CSS di pagina editoriale"; la 12 e' lo slot per le PAGINE PERSONE: "Chi siamo", "Chi sono", "Il team", "Lo staff". Il NUMERO significa la stessa cosa su ogni child, cambia solo il prefisso delle classi. Le sotto-sezioni non usate restano dichiarate VUOTE: non si rinumerano e non si riusano. | 12.x | Significato | kinesis | |------|------------------------------------|---------------| | 12.1 | Contenitore pagina persone + lead | .ks-team | | 12.2 | Scheda persona (media-text) | .ks-person | | 12.3 | Nome (filetto brand) + ruolo | h2 + .ks-role | | 12.4 | Sintesi in evidenza | .ks-intro | | 12.5 | Chip servizi | .ks-tags | | 12.6 | Accordion percorso (core/details) | .ks-cv | | 12.7 | CTA di scheda (solo posizionamento)| — (parent) | | 12.8 | Responsive | — | MODO B, non C: la pagina e' fatta di blocchi core (Gruppo + Media e testo + Titolo + Paragrafo + Dettagli) e qui si vestono quelli. Link, bottoni, nav e campi form li possiede il parent: non si riscrivono. Le classi vanno in "Avanzate → Classi CSS aggiuntive", per questo sono corte e poche: chi edita ne digita al massimo tre. COLORI — DECISIONE PRESA (Davide, 2026-08-26): in questa sezione i fallback `var(--token, #hex)` NON ci sono. Solo token. Erano nati per coerenza con la 11, dove il fallback e' storico. Tre ragioni per toglierli qui, in ordine di peso: 1. La 12 nasce CONDIVISA. Su un sito con parent < 1.10.0 (oggi sportpix.it, 1.4.3) il fallback e' l'unica cosa che rende: la 12 dipingerebbe i colori di Kinesis su un altro brand. 2. Un fallback era anche SBAGLIATO: le chip avevano `var(--sunya-color-surface-light, #FBF6EC)`, ma su questo brand surface-light vale #FFFFFF — il crema e' --sunya-card-bg. Se fosse mai entrato in gioco avrebbe portato il testo #A86200 da 4.76 a 4.42, cioe' SOTTO AA, per uno stacco dalla carta di 1.08 (niente). Il fallback prometteva un colore che la regola non rende. 3. Su parent 1.10.2 erano comunque codice morto: i cinque token usati qui sono tutti emessi dal filtro brand (verificato sull'inline servito il 2026-08-26). Il file dichiara in testa "RICHIEDE PARENT SUNYA >= 1.10.2": e' li' che sta il requisito, non replicato in ogni riga. Unico esadecimale ammesso: il bordo #E5E2DC, come nella 11 (slug `border` rimandato, MAPPA-2026-08-11 §1.2). MAI #FF9F0F come testo su bianco: 2.06:1. Sorgente e markup consumatore: wp-clients/kinesis-studios.it/css/chi-siamo.css (fonte di riferimento) wp-clients/kinesis-studios.it/markup/chi-siamo.html ========================================================================== */ /* -------------------------------------------------------------------------- 12.1 Contenitore pagina persone — .ks-team Va sul blocco Gruppo che avvolge H1 + lead + schede. NIENTE max-width: la larghezza la decide il layout engine. Su dadesign un max-width qualificato non ha mai reso, il parent vince con la catena di :not() (guida §5) — qui non si ritenta. -------------------------------------------------------------------------- */ .ks-team .ks-lead { font-size: 1.05rem; color: var(--sunya-color-text-light); margin-bottom: 2.4em; } /* -------------------------------------------------------------------------- 12.2 Scheda persona — .ks-person Va sul blocco "Media e testo". Il ritmo verticale nasce qui: sostituisce i 5 spacer da 100px del vecchio contenuto. La foto e' un ritratto 576x1024: senza tetto in altezza, a colonna 25% su 1200px uscirebbe 533px e mangerebbe la scheda. Nessun crop (sono scontorni: tagliare significa tagliare teste). -------------------------------------------------------------------------- */ .ks-team .ks-person + .ks-person { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid #E5E2DC; } .ks-person .wp-block-media-text__media img { display: block; max-height: 400px; width: auto; margin-inline: auto; } /* -------------------------------------------------------------------------- 12.3 Nome + ruolo — h2 con filetto brand, .ks-role sotto Il filetto arancio era un border inline sull'H2 (8 occorrenze di #ff9f0f nel post_content): rientra qui. scroll-margin-top: le 4 ancore sono bersaglio del menu footer. ⚠️ QUESTA RIGA NON VINCE, e va saputo prima di ritoccarla. La sezione 5 dichiara lo stesso lascito su OGNI [id] dentro il contenuto con `.sunya-entry-content [id]` (0,2,0) contro lo 0,1,1 di `.ks-person h2`: misurato in pagina il 2026-08-26, l'h2 riceve il valore della sezione 5, non questo. Prima era un calc su --sunya-header-height (104px) mentre la sezione 5 dava 120px — due verita' diverse sullo stesso elemento, di cui una sola resa. Ora entrambe dicono --ks-header-offset: si cambia in un posto solo. La riga resta per portabilita' su un child che non abbia la sezione 5. --sunya-header-height resta NON dichiarato dal parent (verificato 2026-08-25 e 2026-08-26): non lo si consuma piu' qui. -------------------------------------------------------------------------- */ .ks-person h2 { border-left: 6px solid var(--sunya-color-accent-bright); padding-left: 1.1rem; margin-bottom: .15em; scroll-margin-top: var(--ks-header-offset, 90px); } .ks-person .ks-role { margin: 0 0 1.2em; padding-left: calc(6px + 1.1rem); font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: var(--sunya-color-accent-contrast); } /* -------------------------------------------------------------------------- 12.4 Sintesi in evidenza — .ks-intro Le 2-3 righe che restano SEMPRE visibili sopra l'accordion. Non e' un callout: niente fondo, niente bordo. Solo peso. -------------------------------------------------------------------------- */ .ks-person .ks-intro { font-size: 1.05rem; line-height: 1.65; margin-bottom: 1.2em; } /* -------------------------------------------------------------------------- 12.5 Chip servizi — .ks-tags Va su un Paragrafo che contiene solo link alle pagine servizio. I link dentro .ks-tags sono l'UNICA eccezione alla regola "i link li veste il parent": qui non sono link di testo, sono controlli. Percio' si dichiarano tutti gli stati insieme — una regola che ridichiara `color` senza il suo :hover azzera l'hover (guida §4). -------------------------------------------------------------------------- */ .ks-person .ks-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.2em; } .ks-person .ks-tags a { display: inline-flex; align-items: center; padding: 5px 13px; border: 1px solid #E5E2DC; border-radius: 999px; background: var(--sunya-color-surface-light); color: var(--sunya-color-accent-contrast); font-size: .9rem; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .ks-person .ks-tags a:hover, .ks-person .ks-tags a:focus { background: var(--sunya-color-accent-bright); border-color: var(--sunya-color-accent-bright); color: var(--sunya-color-surface-dark); } .ks-person .ks-tags a:focus-visible { outline: 2px solid var(--sunya-color-accent-contrast); outline-offset: 2px; } /* -------------------------------------------------------------------------- 12.6 Accordion percorso — .ks-cv sul blocco core "Dettagli" core/details rende
. Elemento nativo: tastiera e screen reader funzionano senza JS e senza ARIA, e il contenuto resta indicizzabile. ⚠️ Il PARENT non ha nessuna regola su `details` (verificato sui 19 css di sunya, zero match il 2026-08-26): tutta la skin sta qui. Le ancore restano sull'h2, FUORI dal details: chi arriva dal menu footer atterra sul nome visibile e non serve JS che apra nulla. -------------------------------------------------------------------------- */ .ks-person .ks-cv { margin: 0 0 1.4em; border-top: 1px solid #E5E2DC; border-bottom: 1px solid #E5E2DC; } .ks-person .ks-cv > summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; list-style: none; font-size: .98rem; font-weight: 600; color: var(--sunya-color-accent-contrast); } /* Marker: via quello di sistema, dentro una freccia che ruota. */ .ks-person .ks-cv > summary::-webkit-details-marker { display: none; } .ks-person .ks-cv > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(-1px, -1px); transition: transform .15s ease; } .ks-person .ks-cv[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); } .ks-person .ks-cv > summary:focus-visible { outline: 2px solid var(--sunya-color-accent-contrast); outline-offset: 2px; } .ks-person .ks-cv > *:not(summary) { font-size: .97rem; } .ks-person .ks-cv > *:last-child { margin-bottom: 1.1em; } @media (prefers-reduced-motion: reduce) { .ks-person .ks-cv > summary::before { transition: none; } } /* -------------------------------------------------------------------------- 12.7 CTA di scheda — SOLO posizionamento. La VESTE non si tocca: il bottone e' un blocco Bottone di Gutenberg in variante is-style-outline, stilata dal parent in css/blocks.css. Un a mano non eredita niente — sulla riscrittura di dadesign i pulsanti scritti a mano uscivano con padding 0 e border 0. Outline e non pieno per scelta: la fascia pre-footer e' gia' arancio piena; quattro bottoni pieni in colonna la annullerebbero. -------------------------------------------------------------------------- */ .ks-person .wp-block-buttons { margin-top: 1.4em; } /* -------------------------------------------------------------------------- 12.8 Responsive Sotto i 782px media-text impila da solo (is-stacked-on-mobile). Qui si limita la foto, che impilata prenderebbe tutta la colonna. -------------------------------------------------------------------------- */ @media (max-width: 781px) { .ks-person .wp-block-media-text__media img { max-height: 300px; } .ks-team .ks-person + .ks-person { margin-top: 2.5rem; padding-top: 2.5rem; } }