/* * Theme Name: Sunya Child — dadesign * Theme URI: https://dadesign.it * Description: Child theme di Sunya — personalizzazioni per dadesign.it. Il brand e' dichiarato via filtro sunya_brand_colors in functions.php. * Author: Davide Arduini * Author URI: https://dadesign.it * Template: sunya * Version: 2.9.0 * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: sunya-child * Tags: custom, portfolio, developer * Requires at least: 6.0 * Tested up to: 7.1 * Requires PHP: 7.4 * * Questo child theme eredita tutte le funzionalità del tema parent Sunya. * Tutte le personalizzazioni specifiche per dadesign.it vanno qui. */ /* ========================================================================== FONT LOCALI — Space Grotesk + DM Sans Self-hosted per GDPR compliance (nessuna chiamata a Google Fonts) ========================================================================== */ /* --- Space Grotesk (Heading) --- */ @font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* --- DM Sans (Body) --- */ @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== CUSTOM PROPERTIES — Palette dadesign.it Colori brand (dal logo): - Cyan Primary: #00E5D0 (CTA, link, accenti) - Cyan Light: #5CFFF0 (hover, highlight) - Cyan Muted: #00BFB3 (bordi attivi, label) Sfondi scuri (hero, header, footer): - Dark BG: #0D1117 (sfondo principale) - Dark Card: #161B22 (card, box) - Dark Border: #21262D (bordi, separatori) - Dark Surface: #1C2128 (superfici elevate) Sfondi chiari (sezioni contenuto): - Light BG: #FAFBFC (sfondo sezioni chiare) - Light Card: #FFFFFF (card su sfondo chiaro) - Light Border: #E1E4E8 (bordi versione chiara) Testo: - On Dark: #F0F6FC (titoli/body su scuro — 15.4:1 su #0D1117) - Secondary: #8B949E (descrizioni su scuro — 5.1:1, WCAG AA) - Muted: #6E7681 (meta/caption su scuro — 3.8:1, large text AA) - On Light: #1B1F23 (titoli su chiaro — 17.1:1 su #FAFBFC) - Light Sec: #586069 (paragrafi su chiaro — 7.1:1, WCAG AAA) Contrasto link verificato: - #00E5D0 su #0D1117 = 11.2:1 (AAA) ✓ - #00BFB3 su #0D1117 = 8.7:1 (AAA) ✓ - #00E5D0 su #FAFBFC = 1.8:1 (FAIL — usare #0D1117 come CTA su chiaro) ========================================================================== */ :root { /* Font */ --sunya-font-body: 'DM Sans', sans-serif; --sunya-font-heading: 'Space Grotesk', sans-serif; /* Colori primari (dal logo) */ --da-cyan: #00E5D0; --da-cyan-light: #5CFFF0; --da-cyan-muted: #00BFB3; /* Teal — accento accessibile su sfondo chiaro (4.75:1 con bianco). Il cyan e' decorativo: su chiaro non raggiunge il rapporto AA. */ --da-teal: #00756C; --da-teal-hover: #008C82; /* Sfondi scuri */ --da-dark-bg: #0D1117; --da-dark-card: #161B22; --da-dark-border: #21262D; --da-dark-surface: #1C2128; /* Sfondi chiari */ --da-light-bg: #FAFBFC; --da-light-card: #FFFFFF; --da-light-border: #E1E4E8; --da-input-border: #D9DDE2; /* Testo */ --da-text-on-dark: #F0F6FC; --da-text-secondary: #8B949E; --da-text-muted: #6E7681; --da-text-on-light: #1B1F23; --da-text-light-sec: #586069; /* Accento caldo (usato con moderazione per badge/alert) */ --da-accent-warm: #FF6B35; /* Stato */ --da-success: #2EA043; --da-warning: #D29922; --da-error: #F85149; /* Spaziature — Scala 8px */ --da-space-xs: 8px; --da-space-sm: 16px; --da-space-md: 24px; --da-space-lg: 32px; --da-space-xl: 48px; --da-space-2xl: 64px; --da-space-3xl: 96px; /* ---------------------------------------------------------------- Design system Sunya — mappatura preset Gutenberg Il parent registra i preset colore puntando a queste variabili (inc/theme-json-palette.php). Ridefinirle qui e' l'UNICO modo in cui questo sito imposta i colori delle sezioni Gutenberg: nessun colore va scritto nel theme.json del child. I valori --da-* restano la fonte di verita' del brand. ---------------------------------------------------------------- */ --sunya-color-surface-dark: var(--da-dark-bg); --sunya-color-surface-dark-alt: var(--da-dark-card); --sunya-color-surface-light: var(--da-light-bg); --sunya-color-text-on-dark: var(--da-text-on-dark); --sunya-color-text-on-light: var(--da-text-on-light); --sunya-color-accent-bright: var(--da-cyan); --sunya-color-accent-contrast: var(--da-teal); /* ---------------------------------------------------------------- Carta del pre-footer (v2.0.0) Il parent usa l'accent come fondo del pre-footer: `background: var(--sunya-prefooter-bg, var(--sunya-color-accent))`. Finche' l'accent di questo sito era il nero residuo in DB la sezione usciva scura per caso; col brand nel filtro l'accent e' il cyan vero e il pre-footer sarebbe diventato una fascia cyan piena. Su dadesign il pre-footer e' carta SCURA per scelta di design, non per effetto collaterale: lo dichiariamo col token che il parent espone apposta, invece di combattere la cascata ridichiarando sfondo e inchiostro dei singoli elementi. L'INCHIOSTRO VA DICHIARATO INSIEME ALLA CARTA (parent v1.9.5). Il default del parent e' `--sunya-color-on-accent`, derivato dall'ACCENT: giusto finche' la carta E' l'accent, sbagliato qui. Senza questa riga l'hover del pulsante riportava #0d1117 sulla carta #0d1117 — contrasto 1.00, etichetta invisibile dentro il proprio bordo. ---------------------------------------------------------------- */ --sunya-prefooter-bg: var(--da-dark-bg); --sunya-prefooter-ink: var(--da-text-on-dark); } /* ========================================================================== APPLICAZIONE FONT ========================================================================== */ body { font-family: var(--sunya-font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--sunya-font-heading); } /* -------------------------------------------------------------------------- 1. Body text — Sezioni chiare Il sito dadesign.it alterna sezioni scure e chiare. Il parent di default ha sfondo chiaro, quindi partiamo da lì. -------------------------------------------------------------------------- */ body, .entry-content, .sunya-entry-content, .page-content { color: var(--da-text-on-light); } .sunya-meta, .sunya-caption, figcaption, .wp-caption-text, .comment-metadata { color: var(--da-text-light-sec); } /* -------------------------------------------------------------------------- 2. Link e accenti — RIMOSSA in v2.0.0 Dichiarava i link di contenuto a --da-cyan-muted (#00BFB3, 4.3:1 su bianco) con hover --da-cyan (#00E5D0, 1.8:1): l'hover finiva SOTTO il riposo, cioe' il link diventava meno leggibile quando lo si puntava. Col brand nel filtro il parent emette --sunya-color-link e --sunya-color-link-hover derivandoli dall'accent-contrast e conservando il lato (inchiostro scuro -> hover schiarisce). La base `a` del parent li consuma gia': ridichiararli qui con una catena peggiore non serviva piu' a nulla se non a rompere l'hover. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 3. Navigazione — RIMOSSA in v2.0.0 Era la causa del menu quasi invisibile emerso col parent 1.9.4 (contrasto 1.09 sulle pagine senza hero, 2.04 sulla home scrollata). Dichiarava: .sunya-nav__menu > li > a -> da-text-on-light .sunya-header--transparent .sunya-nav__menu > li > a -> da-text-on-dark Reliquia pre-1.7.x: nasceva quando il parent aveva #ffffff hardcoded e il child doveva correggerlo. Dal refactor 1.8.3/1.8.4 l'inchiostro dell'header e' un TOKEN (--sunya-header-color) che la SUPERFICIE dichiara, via guardie body-class mutuamente esclusive. Il difetto: `--transparent` e' una classe di ELEMENTO e resta anche dove le body class (no-hero, force-solid, scrolled) convertono l'header a solido. "Trasparente" non significa "visivamente trasparente". La regola child applicava percio' inchiostro chiaro su header bianco. Fino alla 1.4.3 il parent aveva regole a (0,4,2) che la scavalcavano: la 1.8.3 le ha rimosse — correttamente, ma con esse e' caduto lo scudo che teneva insieme questo child. Gli STATI dell'header li possiede il parent. Il child non li sa. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 4. Pulsanti CTA — RIMOSSA in v2.0.0 Dichiarava .sunya-btn--outline a --da-cyan-muted su qualunque carta (#00BFB3 = 2.3:1 su bianco: sotto AA per il testo e sotto il 3:1 di WCAG 1.4.11 per il bordo), battendo per ordine sorgente le regole superficie-aware del parent 1.7.8+, dove e' la sezione a decidere l'inchiostro dei propri pulsanti. I bottoni di brand veri e propri restano: sezione 9.3 (dd-btn), 9.8 (pre-footer) e 12 (core buttons). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 5. Footer — Colori su sfondo scuro Le regole body { color } cascadano ovunque. Ri-dichiariamo i colori footer per testo chiaro su sfondo scuro. -------------------------------------------------------------------------- */ .sunya-footer { color: var(--da-text-on-dark); } .sunya-footer a { color: var(--da-text-on-dark); } .sunya-footer a:hover, .sunya-footer a:focus { color: var(--da-cyan); } /* Copyright bar: testo secondario su scuro */ .sunya-footer__bottom { color: var(--da-text-secondary); } .sunya-footer__bottom a { color: var(--da-text-secondary); } .sunya-footer__bottom a:hover, .sunya-footer__bottom a:focus { color: var(--da-cyan); } /* 5.1 Area widget sul telefono — due colonne (2026-09-24, child 2.8.3) Il parent sotto i 768px mette ogni griglia widget a UNA colonna: con Servizi (8 link), Lavori (5) e Contatti l'area era alta 1032px a 396, misurata sul servito il 24/09. Qui, solo per la griglia a 3 colonne: Servizi e Lavori affiancati, Contatti sotto a tutta larghezza. Stessa specificita' del parent (0,1,0), vince per ordine: il child si carica dopo. Gap di riga e di colonna ridotti: il 2xl del parent (48px) fra due colonne da ~160px ruberebbe un terzo della larghezza. */ @media screen and (max-width: 768px) { .sunya-footer__widgets-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sunya-spacing-xl) var(--sunya-spacing-lg); } .sunya-footer__widgets-grid--3col > :nth-child(3) { grid-column: 1 / -1; } } /* 5.2 Titolo di colonna attaccato al suo elenco (2026-09-24, child 2.8.4) Nel footer ogni colonna e' fatta di DUE widget: uno col solo Titolo (H2) e uno con l'Elenco pagine o il testo. Fra i due si sommavano il margine sotto del titolo (lg, 24px, footer.css) e il margine sotto del widget (xl, 32px, sidebar.css): 56px, misurati sul servito il 24/09, e il titolo sembrava staccato dalla sua lista. Qui il widget che contiene SOLO un titolo perde il suo margine: resta quello del titolo, lo stesso che il parent prevede fra titolo e contenuto di un widget unico. Nessun effetto su widget con piu' blocchi o senza titolo. */ .sunya-footer__column > .sunya-widget:has(> .wp-block-heading:only-child) { margin-bottom: 0; } /* Poi, su richiesta di Davide (24/09, 2.8.5), il titolo stesso scende da lg a md: 16px fra titolo e widget, 22px fino al testo della prima voce (che ha 4px di padding sopra) — misurati iniettando la regola sul servito. 0,3,0 contro lo 0,2,0 di `.sunya-footer__column .wp-block-heading` del parent. */ .sunya-footer__column > .sunya-widget > .wp-block-heading { margin-bottom: var(--sunya-spacing-md); } /* -------------------------------------------------------------------------- 6. Pre-footer CTA -------------------------------------------------------------------------- */ .sunya-prefooter { color: var(--da-text-on-dark); } .sunya-prefooter a { color: var(--da-cyan); } /* -------------------------------------------------------------------------- 7. Componenti specifici dadesign.it -------------------------------------------------------------------------- */ /* Card servizi — hover con bordo cyan */ .service-card:hover, .sunya-product-card:hover { border-color: var(--da-cyan-muted); } /* Badge / label (opzionale, per sezioni tecniche) */ .da-label { font-family: 'JetBrains Mono', 'DM Sans', monospace; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--da-cyan-muted); } /* Bordi e radius coerenti con style guide */ .service-card, .sunya-product-card, .sunya-btn, img { border-radius: 8px; } /* -------------------------------------------------------------------------- 8. Sezioni scure Gutenberg — cascade colore testo I preset surface-dark / surface-dark-alt impostano solo il background. Queste regole garantiscono testo leggibile dentro ogni sezione scura senza dover impostare textColor blocco per blocco nell'editor. - Heading: serve il selettore esplicito perché il parent colora h1-h6 direttamente sull'elemento (l'ereditarietà non basta). - Link: cyan primario (#00E5D0 su #0D1117 = 11.2:1 AAA); esclusi i bottoni per non toccare gli stili button. - Le classi preset esplicite dell'editor (.has-*-color) usano !important nel core, quindi vincono sempre su queste regole. PERIODO DI SOVRAPPOSIZIONE (rinomina slug, vedi docs/MAPPA-2026-08-11-slug-palette.md): sono presenti SIA i selettori nuovi SIA quelli vecchi (dark-bg / dark-card). I vecchi vanno rimossi solo dopo la migrazione del post_content in DB e la verifica visiva. -------------------------------------------------------------------------- */ .has-surface-dark-background-color, .has-surface-dark-alt-background-color, .has-dark-bg-background-color, .has-dark-card-background-color { color: var(--da-text-on-dark); } .has-surface-dark-background-color :is(h1, h2, h3, h4, h5, h6), .has-surface-dark-alt-background-color :is(h1, h2, h3, h4, h5, h6), .has-dark-bg-background-color :is(h1, h2, h3, h4, h5, h6), .has-dark-card-background-color :is(h1, h2, h3, h4, h5, h6) { color: var(--da-text-on-dark); } .has-surface-dark-background-color a:not(.wp-block-button__link):not(.sunya-btn), .has-surface-dark-alt-background-color a:not(.wp-block-button__link):not(.sunya-btn), .has-dark-bg-background-color a:not(.wp-block-button__link):not(.sunya-btn), .has-dark-card-background-color a:not(.wp-block-button__link):not(.sunya-btn) { color: var(--da-cyan); } .has-surface-dark-background-color a:not(.wp-block-button__link):not(.sunya-btn):hover, .has-surface-dark-background-color a:not(.wp-block-button__link):not(.sunya-btn):focus, .has-surface-dark-alt-background-color a:not(.wp-block-button__link):not(.sunya-btn):hover, .has-surface-dark-alt-background-color a:not(.wp-block-button__link):not(.sunya-btn):focus, .has-dark-bg-background-color a:not(.wp-block-button__link):not(.sunya-btn):hover, .has-dark-bg-background-color a:not(.wp-block-button__link):not(.sunya-btn):focus, .has-dark-card-background-color a:not(.wp-block-button__link):not(.sunya-btn):hover, .has-dark-card-background-color a:not(.wp-block-button__link):not(.sunya-btn):focus { color: var(--da-cyan-light); } /* ========================================================================= NASCONDE BARRA VERDE SU PAGINA PRIVACY E COOKIE POLICY ============================================================================ */ #iub-legalDoc { border-top: 0px !important; } /* ========================================================================== 9. PAGINE DADESIGN — Homepage + styling pass Chi sono APPENDERE in fondo a style.css del child sunya-child-dadesign (dopo la sezione 8 "Sezioni scure Gutenberg", prima del blocco Iubenda o dopo, indifferente — mantenere la numerazione). Dopo il deploy: bump SUNYA_CHILD_VERSION + purge Varnish. Convenzioni: variabili --da-* esistenti; colori del design system via var(--sunya-color-{token}) con fallback esadecimale (NON via --wp--preset--color--*, che dipende dal nome dello slug). Ultima modifica: 2026-08-12 ========================================================================== */ /* -------------------------------------------------------------------------- 9.0 Padding laterale mobile sezioni full-width — RITIRATA il 2026-08-27 Conteneva, sotto i 781px, `padding: 0 20px` sulle .alignfull, perche' il parent scendeva a 1rem (16px) e su dadesign 16px era gia' stato scartato una volta (card ed etichette a filo schermo, vedi 9.7). Dal parent 1.10.3 quel giudizio e' diventato il default del tema: esiste --sunya-content-gutter, che vale 24px su desktop e **20px sotto i 768px**, e governa solo il contenuto — header, footer, pre-footer, Cover e barra breadcrumb restano a --sunya-container-padding. Quindi qui non serve piu' nulla: il valore e' lo stesso, ma ora e' del tema e vale su tutti i siti invece che su questo soltanto. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 9.1 Utility condivise (eyebrow, lead, label gruppo) -------------------------------------------------------------------------- */ .dd-eyebrow { font-family: var(--sunya-font-heading); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--da-cyan); margin-bottom: var(--da-space-xs); } .dd-lead { font-size: 1.15rem; line-height: 1.7; max-width: 620px; margin-left: auto; margin-right: auto; } .has-surface-dark-background-color .dd-lead, .has-surface-dark-alt-background-color .dd-lead, .has-dark-bg-background-color .dd-lead, .has-dark-card-background-color .dd-lead { color: var(--da-text-secondary); } /* Label gruppo su sfondo chiaro: teal AA (mai cyan come testo su chiaro) */ .dd-group-label { font-family: var(--sunya-font-heading); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sunya-color-accent-contrast, #00756C); margin: var(--da-space-lg) 0 var(--da-space-sm); } /* -------------------------------------------------------------------------- 9.2 Hero homepage (sezione scura, testo centrato) -------------------------------------------------------------------------- */ /* ⚠️ SPECIFICITÀ: il parent ha `.sunya-entry-content > .alignfull {padding:0}` (0,2,0). Le sezioni full-width del child DEVONO essere qualificate con `.sunya-entry-content >` per pareggiare e vincere per ordine sorgente. Senza prefisso il padding viene azzerato dal parent. */ .sunya-entry-content > .dd-home-hero { /* Header trasparente sovrapposto: il padding-top compensa l'altezza header (variabile parent) + respiro, così l'eyebrow non finisce sotto il logo/nav */ padding: calc(var(--sunya-header-height, 80px) + var(--da-space-2xl)) var(--da-space-md) var(--da-space-3xl); text-align: center; } .dd-home-hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 0.4em; } .dd-home-hero .dd-hero-actions { margin-top: var(--da-space-lg); gap: var(--da-space-sm); } /* -------------------------------------------------------------------------- 9.3 Bottoni Gutenberg dd-btn (hero + riuso futuro) Primario: cyan pieno + testo scuro (11.2:1, valido su scuro E su chiaro). Outline: bordo/testo cyan — SOLO su sfondi scuri. HOVER = INVERSIONE (pattern unico di sito, allineato a Contatti): il primario si svuota, l'outline si riempie. Mai cyan→cyan-light: la variazione è impercettibile. Focus visibile = hover + anello. -------------------------------------------------------------------------- */ .dd-btn--primary .wp-block-button__link { background: var(--da-cyan); color: var(--da-dark-bg); border: 1.5px solid var(--da-cyan); border-radius: 8px; font-weight: 600; padding: 13px 26px; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; } .dd-btn--primary .wp-block-button__link:hover, .dd-btn--primary .wp-block-button__link:focus-visible { background: transparent; border-color: var(--da-cyan); color: var(--da-cyan); box-shadow: 0 4px 20px rgba(0, 229, 208, 0.3); } .dd-btn--outline .wp-block-button__link { background: transparent; color: var(--da-cyan); border: 1.5px solid var(--da-cyan); border-radius: 8px; font-weight: 600; padding: 13px 26px; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; } .dd-btn--outline .wp-block-button__link:hover, .dd-btn--outline .wp-block-button__link:focus-visible { background: var(--da-cyan); border-color: var(--da-cyan); color: var(--da-dark-bg); box-shadow: 0 4px 20px rgba(0, 229, 208, 0.3); } .dd-btn--primary .wp-block-button__link:focus-visible, .dd-btn--outline .wp-block-button__link:focus-visible { outline: 2px solid var(--da-cyan); outline-offset: 3px; } /* -------------------------------------------------------------------------- 9.4 Sezione servizi homepage + card Card da style guide: bordo, radius 8, hover lift + bordo cyan-muted + barra gradient superiore. Testo card in grigio scuro, link teal AA. -------------------------------------------------------------------------- */ .sunya-entry-content > .dd-home-services { padding: var(--da-space-2xl) var(--da-space-md); } .dd-home-services > h2 { margin-bottom: var(--da-space-md); } .dd-card { position: relative; background: var(--da-light-card); border: 1px solid var(--da-light-border); border-radius: 8px; padding: var(--da-space-md); height: 100%; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .dd-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--da-cyan), var(--da-cyan-light)); opacity: 0; transition: opacity 0.25s ease; } .dd-card:hover, .dd-card:focus-within { border-color: var(--da-cyan-muted); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(13, 17, 23, 0.08); } .dd-card:hover::before, .dd-card:focus-within::before { opacity: 1; } .dd-card h3 { font-size: 1.1rem; margin: 0 0 0.5em; } .dd-card p { font-size: 0.95rem; color: var(--da-text-light-sec); margin: 0 0 0.8em; } .dd-card .dd-card-link { margin: auto 0 0; } .dd-card .dd-card-link a { font-weight: 600; font-size: 0.95rem; color: var(--sunya-color-accent-contrast, #00756C); text-decoration: none; } .dd-card .dd-card-link a:hover { text-decoration: underline; text-underline-offset: 2px; } .dd-card .dd-card-link a:focus-visible { outline: 2px solid var(--sunya-color-accent-contrast, #00756C); outline-offset: 2px; } /* Colonna a piena altezza: card allineate anche con testi di lunghezza diversa */ .dd-home-services .wp-block-column { display: flex; flex-direction: column; } .dd-home-services .wp-block-column > .dd-card { display: flex; flex-direction: column; flex: 1; } /* -------------------------------------------------------------------------- 9.5 Come lavoro — step numerati su sezione dark-card -------------------------------------------------------------------------- */ .sunya-entry-content > .dd-home-steps { padding: var(--da-space-2xl) var(--da-space-md); } .dd-home-steps > h2 { margin-bottom: var(--da-space-lg); } .dd-step-num { font-family: var(--sunya-font-heading); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--da-cyan); margin: 0 0 var(--da-space-xs); } .dd-home-steps h3 { margin: 0 0 0.4em; } .dd-home-steps .wp-block-column > p:last-child { color: var(--da-text-secondary); font-size: 0.98rem; } /* -------------------------------------------------------------------------- 9.6 Chi sono — styling pass (markup già live, classi dd-about-*) -------------------------------------------------------------------------- */ .sunya-entry-content > .dd-about-hero { padding: var(--da-space-2xl) var(--da-space-md); } .dd-about-hero .dd-lead { margin-left: 0; margin-right: 0; } .dd-about-photo img { border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .dd-about-body { padding-top: var(--da-space-xl); padding-bottom: var(--da-space-xl); } /* -------------------------------------------------------------------------- 9.7 Spaziature per device + reduced motion -------------------------------------------------------------------------- */ @media (max-width: 781px) { .sunya-entry-content > .dd-home-hero { padding: calc(var(--sunya-header-height, 80px) + var(--da-space-lg)) 20px var(--da-space-2xl); } /* 2026-08-27: tolti padding-left/right (erano 20px). Ora li da' il parent con --sunya-content-gutter, che vale 20px sotto i 768px. Restano qui solo le verticali, che sono specifiche di queste tre sezioni. */ .sunya-entry-content > .dd-home-services, .sunya-entry-content > .dd-home-steps, .sunya-entry-content > .dd-about-hero { padding-top: var(--da-space-xl); padding-bottom: var(--da-space-xl); } .dd-step-num { font-size: 1.8rem; } /* Colonne impilate: card e step respirano tra loro */ .dd-home-services .wp-block-column:not(:last-child), .dd-home-steps .wp-block-column:not(:last-child) { margin-bottom: var(--da-space-sm); } } /* -------------------------------------------------------------------------- 9.8 Rifiniture post-live (2026-08-10, review screenshot MVP) -------------------------------------------------------------------------- */ /* Chi sono: meno vuoto tra hero e corpo testo */ .dd-about-body { padding-top: var(--da-space-md); } /* Pre-footer CTA Sunya: bottone allineato al primario brand (era bianco default) — hover a INVERSIONE come tutti i dd-btn */ .sunya-prefooter .sunya-prefooter__btn { background: var(--da-cyan); color: var(--da-dark-bg); border: 1.5px solid var(--da-cyan); border-radius: 8px; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; } .sunya-prefooter .sunya-prefooter__btn:hover, .sunya-prefooter .sunya-prefooter__btn:focus-visible { background: transparent; border-color: var(--da-cyan); color: var(--da-cyan); box-shadow: 0 4px 20px rgba(0, 229, 208, 0.3); } .sunya-prefooter .sunya-prefooter__btn:focus-visible { outline: 2px solid var(--da-cyan); outline-offset: 3px; } /* Badge reCAPTCHA — RITIRATO il 2026-08-27. Conteneva `.grecaptcha-badge { bottom: 96px !important }`, per scostarlo dal pulsante torna-su su cui si sovrapponeva. Dal parent 1.10.9 lo fa il tema, in css/footer.css accanto alla geometria del pulsante da cui il valore deriva. I 96px non erano un numero scelto a occhio: sono `--sunya-spacing-xl` (32) + l'altezza del pulsante (48) + un margine (16). Nel parent sono scritti cosi', in calc(), invece che come risultato — se un giorno cambia la geometria del pulsante, il numero si aggiorna da solo. Se servisse ritararlo su questo sito, la variabile e' --sunya-recaptcha-offset: non riscrivere la regola. ⚠️ Resta valida la nota sul nascondere il badge: Google lo consente SOLO affiancando al submit la disclosure testuale "Questo sito e' protetto da reCAPTCHA; si applicano la Privacy Policy e i Termini di servizio di Google". E' una scelta di contenuto, e su questo sito non e' stata fatta. */ /* .grecaptcha-badge { visibility: hidden; } */ /* -------------------------------------------------------------------------- 9.9 Respiro pagine interne — RITIRATA il 2026-08-27 Conteneva l'aria di coda: padding-bottom sull'ultimo .wp-block-group e sul contenitore WPForms, 64px desktop e 48px sotto i 781px, con la home esclusa perche' il suo hero deve restare a filo header. Dal parent 1.10.3 la fa il tema, con la stessa forma inventata qui — il padding DENTRO l'ultimo blocco, cosi' lo sfondo colorato si estende invece di lasciare una fascia — e con gli stessi due accorgimenti: - il Cover e' escluso, perche' con min-height e contenuto centrato il padding sposta il testo invece di allungare il blocco; - la regola vale solo dove il contenitore e' a filo (.sunya-content-area --flush), altrimenti si sommerebbe al padding del template di default. Valori del tema: --sunya-spacing-section, 80px desktop e 48px mobile. La home non va piu' esclusa. Il suo ultimo blocco e' una sezione scura che deve toccare il pre-footer, ed e' esattamente il caso in cui il padding dentro il blocco fa la cosa giusta: lo sfondo si estende, nessuna fascia. (L'esclusione originale serviva per il padding-TOP dell'hero, che questa regola non ha mai toccato.) ⚠️ Perche' era rimasta in piedi anche dopo il deploy del parent: questa regola stava a 0,4,1 (body + :not(.home) + 2 classi + :last-child) e batteva quella del parent a 0,3,0. Misurato il 27/08: 64px invece di 80. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sunya-prefooter .sunya-prefooter__btn { transition: none; } } /* -------------------------------------------------------------------------- 9.10 Lavori in homepage — .dd-home-work + .dd-work-grid + .dd-work-card Aggiunta il 2026-09-23 (child 2.8.0). Contratto: sunya\docs\SPEC-2026-09-22-sezione-15-lavori.md (§4, §6-bis). Sei tessere, una per lavoro, ognuna porta alla sua pagina (sezione 15). Sta DOPO "Come lavoro", su fondo chiaro, e le tessere sono SCURE (P3 H2). Scritta coi soli token --sunya-*, anche se sta nella fascia 1-9: e' il componente che la futura sezione 16 (indice /lavori/) consumera', e la pagina /lavori/ lo usa gia' con le stesse classi. ⚠️ LA DOMANDA DELLA 14: in home convivono 12 card, 6 servizi (9.4) e 6 lavori. Sul telefono devono riconoscersi come oggetti diversi, e la differenza sta su TRE assi insieme — togliendone uno tornano uguali: fondo servizi chiari lavori scuri con la grafica (10.5) contenuto titolo + testo + link solo logo + nome ritmo 1 per riga, alte 2 per riga, basse (3:2) Per questo .dd-card NON si riusa qui, nemmeno come base. STRUTTURA (post_content, modo B): section.dd-home-work (Gruppo alignfull, light-bg, constrained 1200) h2 + p.dd-lead div.dd-work-grid (Gruppo, layout DEFAULT: flow, non constrained) div.dd-work-card (Gruppo) x 6 figure.dd-work-card__logo (Immagine, alt="") h3.dd-work-card__name > a link della tessera div.dd-work-card.dd-work-card--cta tessera invito (P5) p.dd-work-card__invite p.dd-work-card__name > a ⚠️ LA GRIGLIA E' UN GRUPPO FLOW, NON CONSTRAINED. Un Gruppo constrained da' ai figli `margin-inline: auto !important`, che in una cella di griglia restringe la tessera al suo contenuto (trappola della 13 v2). E in griglia i margini NON collassano: il `margin-block-start` del flow fra una tessera e l'altra si sommerebbe al gap. Azzerati sotto, 0,2,0. TUTTA LA TESSERA E' CLICCABILE: il link sta sul nome (testo visibile, il logo e' decorativo con alt=""), e il suo ::after copre la tessera. Il fuoco si disegna sulla tessera, non sul link. LOGO: A COLORI, velato da un OVERLAY SCURO A GRADIENTE che si toglie all'hover e al fuoco (Davide, 2026-09-24 — sostituisce il monocromo bianco a riposo del 23/09, che trasformava un bollino pieno come Pet Style in un disco bianco). L'overlay non altera i colori: e' un velo del fondo della tessera sopra il logo, non un filtro. Il file deve avere il fondo TRASPARENTE. `.dd-work-card--mono` porta il logo a BIANCO PIENO, sempre (anche all'hover): per i loghi scuri che sul fondo scuro spariscono comunque (Grigoletti). Bianco pieno e non scala di grigi: `grayscale()` lascia scure le parti scure. Si aggiunge nel campo "Classe CSS aggiuntiva". Sul telefono non c'e' hover: resta il velo. Voluto: il velo e' leggero abbastanza da lasciare leggibili i marchi, misurato in prova. -------------------------------------------------------------------------- */ .sunya-entry-content > .dd-home-work { padding: var(--sunya-spacing-3xl) var(--sunya-spacing-lg); } .dd-home-work > h2 { margin-bottom: var(--sunya-spacing-lg); } /* Il lead della 9.1 dichiara 620px e margini auto, ma dentro un Gruppo constrained il core gli rimette la larghezza del contenuto (1200): qui si ridichiara a 0,2,0, e si centra il testo come il titolo. */ .dd-home-work > .dd-lead { max-width: 40rem; text-align: center; } .dd-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sunya-spacing-lg); margin-top: var(--sunya-spacing-xl); } /* 0,2,0: batte il flow del core (`:root :where(.is-layout-flow) > * + *`, 0,1,0) che metterebbe un margine sopra ogni tessera dopo la prima. */ .dd-work-grid > .dd-work-card { margin: 0; } .dd-work-card { position: relative; display: flex; flex-direction: column; border: 1px solid color-mix(in oklab, var(--sunya-color-text-on-dark) 12%, var(--sunya-color-surface-dark)); border-radius: var(--sunya-radius-md); color: var(--sunya-color-text-on-dark); transition: transform var(--sunya-transition-base), border-color var(--sunya-transition-base), box-shadow var(--sunya-transition-base); } .dd-work-card:hover, .dd-work-card:focus-within { transform: translateY(-3px); border-color: color-mix(in oklab, var(--sunya-color-accent) 45%, var(--sunya-color-surface-dark)); box-shadow: 0 10px 30px color-mix(in srgb, var(--sunya-color-surface-dark) 22%, transparent); } /* Il fuoco e' della tessera intera: anello teal scuro, perche' sta sul fondo CHIARO della sezione (l'accent pieno li' non arriva a 3:1). */ .dd-work-card:has(a:focus-visible) { outline: 2px solid var(--sunya-color-accent-ink-on-light); outline-offset: 3px; } .dd-work-card a:focus-visible { outline: none; } /* Area del logo: 3:2, logo centrato e contenuto. Le misure massime sono in percentuale dell'area, cosi' un marchio largo e uno quadrato occupano un ingombro simile. `!important` non serve: l'Immagine del core mette width/height come ATTRIBUTI, che qualsiasi regola CSS batte. ⚠️ Il logo e' POSIZIONATO ASSOLUTO dentro l'area. In flusso, il `max-height` in percentuale di un'immagine dentro un box alto per aspect-ratio non si risolveva: un logo quadrato (PetStyle) sfondava l'area e spingeva giu' il nome — misurato in locale il 2026-09-23 a 396px, nomi a quote diverse nella stessa riga. In assoluto le percentuali valgono sul box dell'area, sempre. I file dei loghi (2026-09-24) sono gia' tele 3:2 (600x400) col marchio centrato e il suo margine dentro: per questo il tetto e' 72% in entrambe le direzioni, non piu' stretto in altezza. */ .dd-work-card .dd-work-card__logo { position: relative; aspect-ratio: 3 / 2; margin: 0; } .dd-work-card .dd-work-card__logo img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 72%; max-height: 72%; object-fit: contain; } /* Il velo: sopra il logo (e' dopo l'immagine, entrambi posizionati), sotto il link esteso del nome (z-index 1), trasparente ai clic. Uniforme sul logo e sfumato a zero sul bordo basso dell'area: la riga del nome non ha velo, e un velo pieno fino al bordo disegnava uno scalino di luce sopra il nome (visto in prova il 2026-09-24). */ .dd-work-card .dd-work-card__logo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 180deg, color-mix(in srgb, var(--sunya-color-surface-dark) 50%, transparent) 0%, color-mix(in srgb, var(--sunya-color-surface-dark) 50%, transparent) 72%, transparent 100% ); pointer-events: none; transition: opacity var(--sunya-transition-base); } .dd-work-card:hover .dd-work-card__logo::after, .dd-work-card:focus-within .dd-work-card__logo::after { opacity: 0; } .dd-work-card.dd-work-card--mono .dd-work-card__logo img { filter: brightness(0) invert(1); opacity: .92; } /* Nome: e' il link della tessera. 0,2,0 per battere il `.dd-page h3` della 11.1 (0,1,1) quando la griglia vive dentro una pagina .dd-page. */ .dd-work-card .dd-work-card__name { margin: auto 0 0; padding: 0 var(--sunya-spacing-md) var(--sunya-spacing-md); font-family: var(--sunya-font-heading); font-size: .95rem; font-weight: 600; line-height: 1.3; text-align: center; color: var(--sunya-color-text-on-dark); } .dd-work-card .dd-work-card__name a { color: inherit; text-decoration: none; } .dd-work-card .dd-work-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* Tessera invito (P5): stessa grafica, al posto del logo una domanda. Il bordo tratteggiato dice "questo posto e' libero". Diventa una tessera normale quando il sesto lavoro (Foto Interni Verona) e' online. */ .dd-work-card--cta { border-style: dashed; border-color: color-mix(in oklab, var(--sunya-color-accent) 40%, var(--sunya-color-surface-dark)); } .dd-work-card .dd-work-card__invite { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; margin: 0; padding: var(--sunya-spacing-lg); font-family: var(--sunya-font-heading); font-size: 1.35rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--sunya-color-accent-ink-on-dark); } @media (max-width: 781px) { .sunya-entry-content > .dd-home-work { padding-top: var(--sunya-spacing-2xl); padding-bottom: var(--sunya-spacing-2xl); } .dd-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sunya-spacing-md); margin-top: var(--sunya-spacing-lg); } .dd-work-card .dd-work-card__invite { padding: var(--sunya-spacing-md); } .dd-work-card .dd-work-card__logo img { max-width: 80%; max-height: 80%; } .dd-work-card .dd-work-card__name { padding: 0 var(--sunya-spacing-sm) var(--sunya-spacing-sm); font-size: .85rem; } .dd-work-card .dd-work-card__invite { font-size: 1.05rem; } } @media (prefers-reduced-motion: reduce) { .dd-work-card, .dd-work-card .dd-work-card__logo::after { transition: none; } .dd-work-card:hover, .dd-work-card:focus-within { transform: none; } } /* ========================================================================== 10. GRAFICHE E ANIMAZIONI (2026-08-10) 10.1 Icone SVG card servizi 10.2 Pattern geometrico hero 10.3 Reveal on scroll (richiede js/reveal.js) Tutte le icone sono SVG inline in data-URI usati come `mask-image`: il colore arriva da `background-color`, quindi segue le variabili di palette e cambia con hover/tema senza duplicare i file. Nessuna richiesta HTTP aggiuntiva, nessun font di icone. Le icone sono geometriche e originali (stroke 1.5, viewBox 24), coerenti con lo stile line della style guide. ========================================================================== */ /* -------------------------------------------------------------------------- 10.1 Icone card servizi Il markup card ha una classe modificatore per servizio: dd-card--wordpress / --ecommerce / --manutenzione / --seo / --newsletter / --advertising / --fotografia / --consulenze CONSUMATORI (dal 2026-09-17, 2.6.0): le otto immagini sono consumate da `.dd-card--*` (home, 9.4) E da `.dd-hub__svc--*` (hub /servizi/, 14.5), con un secondo selettore su ogni regola `mask-image`. Le immagini stanno SOLO qui, non si duplicano nella 14. Le regole di POSIZIONE e di colore (`.dd-card h3::before`, l'hover) restano scopate su `.dd-card` e non raggiungono l'hub, che ha le sue nella 14.5. `--fotografia` e `--consulenze`, orfane in home dal 2026-09-03 (sei card), hanno di nuovo un consumatore nell'hub: la riserva del README e' chiusa. -------------------------------------------------------------------------- */ .dd-card { /* spazio per l'icona in alto */ padding-top: calc(var(--da-space-md) + 52px); } .dd-card::after { content: ""; position: absolute; top: var(--da-space-md); left: var(--da-space-md); width: 44px; height: 44px; border-radius: 10px; background-color: rgba(0, 229, 208, 0.1); } .dd-card .dd-icon, .dd-card::before { /* ::before resta la barra gradient dell'hover (sezione 9.4) */ } /* Glifo: elemento generato sul titolo per non toccare la struttura */ .dd-card h3::before { content: ""; position: absolute; top: calc(var(--da-space-md) + 11px); left: calc(var(--da-space-md) + 11px); width: 22px; height: 22px; background-color: var(--sunya-color-accent-contrast, #00756C); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; z-index: 1; transition: background-color 0.25s ease; } .dd-card:hover h3::before, .dd-card:focus-within h3::before { background-color: var(--da-cyan-muted, #00BFB3); } /* --- Glifi per servizio --- */ /* WordPress: finestra browser + codice */ .dd-card--wordpress h3::before, .dd-hub__svc--wordpress > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='2'/%3E%3Cpath d='M2.5 8.5h19'/%3E%3Cpath d='M5.5 6.2h.01M8 6.2h.01'/%3E%3Cpath d='M9.5 12.5 7.5 14.5l2 2M14.5 12.5l2 2-2 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='2'/%3E%3Cpath d='M2.5 8.5h19'/%3E%3Cpath d='M5.5 6.2h.01M8 6.2h.01'/%3E%3Cpath d='M9.5 12.5 7.5 14.5l2 2M14.5 12.5l2 2-2 2'/%3E%3C/svg%3E"); } /* E-commerce: carrello */ .dd-card--ecommerce h3::before, .dd-hub__svc--ecommerce > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.4a1.6 1.6 0 0 0 1.6-1.2l1.6-6.3H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.4a1.6 1.6 0 0 0 1.6-1.2l1.6-6.3H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E"); } /* Manutenzione: scudo + spunta */ .dd-card--manutenzione h3::before, .dd-hub__svc--manutenzione > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4.5 5.5v6c0 4.5 3.1 8.6 7.5 10 4.4-1.4 7.5-5.5 7.5-10v-6z'/%3E%3Cpath d='m8.8 11.8 2.2 2.2 4.2-4.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4.5 5.5v6c0 4.5 3.1 8.6 7.5 10 4.4-1.4 7.5-5.5 7.5-10v-6z'/%3E%3Cpath d='m8.8 11.8 2.2 2.2 4.2-4.2'/%3E%3C/svg%3E"); } /* SEO: lente + grafico in salita */ .dd-card--seo h3::before, .dd-hub__svc--seo > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m20.5 20.5-4.7-4.7'/%3E%3Cpath d='M7.5 12.2l2.2-2.4 2 1.7 2.6-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m20.5 20.5-4.7-4.7'/%3E%3Cpath d='M7.5 12.2l2.2-2.4 2 1.7 2.6-3'/%3E%3C/svg%3E"); } /* Newsletter: busta */ .dd-card--newsletter h3::before, .dd-hub__svc--newsletter > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.2 8.5-6.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.2 8.5-6.2'/%3E%3C/svg%3E"); } /* Advertising: megafono */ .dd-card--advertising h3::before, .dd-hub__svc--advertising > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5v5a1.5 1.5 0 0 0 1.5 1.5h2l8 4.5V4L7 8.5H5a1.5 1.5 0 0 0-1.5 1.5z'/%3E%3Cpath d='M18.5 9.2a4 4 0 0 1 0 5.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5v5a1.5 1.5 0 0 0 1.5 1.5h2l8 4.5V4L7 8.5H5a1.5 1.5 0 0 0-1.5 1.5z'/%3E%3Cpath d='M18.5 9.2a4 4 0 0 1 0 5.6'/%3E%3C/svg%3E"); } /* Fotografia: macchina fotografica */ .dd-card--fotografia h3::before, .dd-hub__svc--fotografia > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8a2 2 0 0 1 2-2h2.6l1.4-2h7l1.4 2h2.6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.5' r='3.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8a2 2 0 0 1 2-2h2.6l1.4-2h7l1.4 2h2.6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.5' r='3.6'/%3E%3C/svg%3E"); } /* Consulenze: fumetti dialogo */ .dd-card--consulenze h3::before, .dd-hub__svc--consulenze > h3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 12.5a2 2 0 0 1-2 2H7l-3.5 3v-11a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M18.5 8h1a2 2 0 0 1 2 2v9l-3-2.5h-5a2 2 0 0 1-2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 12.5a2 2 0 0 1-2 2H7l-3.5 3v-11a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M18.5 8h1a2 2 0 0 1 2 2v9l-3-2.5h-5a2 2 0 0 1-2-2'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 10.2 Pattern geometrico hero Griglia tecnica + nodi cyan a bassa opacità, sfumata verso il centro con mask radiale così il testo resta perfettamente leggibile. Puramente decorativo: nessun impatto su contrasto o accessibilità. -------------------------------------------------------------------------- */ .dd-home-hero { position: relative; overflow: hidden; isolation: isolate; } .dd-home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0, 229, 208, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 208, 0.07) 1px, transparent 1px); background-size: 64px 64px; /* Sfuma ai bordi: la griglia non "taglia" il bordo sezione */ -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%); pointer-events: none; } /* Nodi luminosi agli incroci — alone morbido, nessun bordo netto */ .dd-home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 18% 26%, rgba(0, 229, 208, 0.16), transparent 42%), radial-gradient(circle at 84% 68%, rgba(0, 229, 208, 0.12), transparent 45%), radial-gradient(circle at 62% 12%, rgba(92, 255, 240, 0.08), transparent 38%); pointer-events: none; } /* -------------------------------------------------------------------------- 10.3 Reveal on scroll Gli stili di partenza si applicano SOLO sotto .dd-js, aggiunta da js/reveal.js: senza JavaScript il contenuto è visibile e statico. Il ritardo per lo stagger arriva da --dd-reveal-delay (impostata dal JS). -------------------------------------------------------------------------- */ .dd-js .dd-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; transition-delay: var(--dd-reveal-delay, 0ms); will-change: opacity, transform; } .dd-js .dd-reveal--in { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .dd-js .dd-reveal, .dd-js .dd-reveal--in { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 10.4 Icone su mobile: layout invariato, solo scala ridotta -------------------------------------------------------------------------- */ @media (max-width: 781px) { .dd-card { padding-top: calc(var(--da-space-md) + 46px); } .dd-card::after { width: 38px; height: 38px; } .dd-card h3::before { top: calc(var(--da-space-md) + 9px); left: calc(var(--da-space-md) + 9px); width: 20px; height: 20px; } } /* -------------------------------------------------------------------------- 10.5 Grafica dei lavori — tessera (9.10) e testata della pagina lavoro (15.2) Aggiunta il 2026-09-23 (child 2.8.0). E' la "grafica dadesign" su cui si appoggia il logo (decisione P2): lo stesso linguaggio del pattern della hero (10.2) — griglia tecnica e nodi luminosi — riscritto coi soli token, peso zero, nessuna immagine. Sta nella fascia 10 e non dentro la 9.10 o la 15 perche' la consumano tutte e due: chi apre una tessera ritrova in testa alla pagina la stessa immagine che ha appena cliccato. Un solo posto, due selettori (idioma gia' usato: la 14.5 consuma le icone della 10.1). Differenze dalla 10.2, volute: - colori da `--sunya-color-accent` via color-mix, non rgba() letterali; - maglia 32px invece di 64: la tessera e' larga ~370px, a 64 le linee sarebbero cinque e non si leggerebbe come griglia; - posizione dei nodi in variabili (--dd-work-gx/-gy), variata per tessera con :nth-child, cosi' sei tessere non sono sei fotocopie. Puramente decorativa: sta sotto il contenuto (z-index -1 dentro un contesto isolato) e non tocca i contrasti — misurati comunque sul testo sopra, vedi report. -------------------------------------------------------------------------- */ .dd-work-card, .dd-page.dd-work > .dd-work__head { --dd-work-line: color-mix(in srgb, var(--sunya-color-accent) 9%, transparent); --dd-work-glow: color-mix(in srgb, var(--sunya-color-accent) 18%, transparent); --dd-work-gx: 24%; --dd-work-gy: 30%; position: relative; isolation: isolate; overflow: hidden; background-color: var(--sunya-color-surface-dark); } .dd-work-card::before, .dd-page.dd-work > .dd-work__head::before, .sunya-prefooter.sunya-prefooter--banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--dd-work-line) 1px, transparent 1px), linear-gradient(90deg, var(--dd-work-line) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 85% 80% at var(--dd-work-gx) var(--dd-work-gy), #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 85% 80% at var(--dd-work-gx) var(--dd-work-gy), #000 10%, transparent 75%); pointer-events: none; transition: opacity var(--sunya-transition-base); } .dd-work-card::after, .dd-page.dd-work > .dd-work__head::after, .sunya-prefooter.sunya-prefooter--banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at var(--dd-work-gx) var(--dd-work-gy), var(--dd-work-glow), transparent 48%), radial-gradient(circle at calc(100% - var(--dd-work-gx)) calc(100% - var(--dd-work-gy) / 2), color-mix(in srgb, var(--sunya-color-accent) 9%, transparent), transparent 42%); pointer-events: none; } /* Variazione per tessera: sei posizioni, il ciclo riparte dalla settima. */ .dd-work-grid > .dd-work-card:nth-child(6n+2) { --dd-work-gx: 76%; --dd-work-gy: 24%; } .dd-work-grid > .dd-work-card:nth-child(6n+3) { --dd-work-gx: 50%; --dd-work-gy: 78%; } .dd-work-grid > .dd-work-card:nth-child(6n+4) { --dd-work-gx: 82%; --dd-work-gy: 70%; } .dd-work-grid > .dd-work-card:nth-child(6n+5) { --dd-work-gx: 18%; --dd-work-gy: 72%; } .dd-work-grid > .dd-work-card:nth-child(6n+6) { --dd-work-gx: 58%; --dd-work-gy: 20%; } /* Hover della tessera: la griglia si accende un poco. */ .dd-work-card:hover, .dd-work-card:focus-within { --dd-work-line: color-mix(in srgb, var(--sunya-color-accent) 15%, transparent); } /* In testata la pagina e' larga: maglia della hero (64px), nodo a destra dove sta il logo. */ .dd-page.dd-work > .dd-work__head { --dd-work-gx: 78%; --dd-work-gy: 40%; } .dd-page.dd-work > .dd-work__head::before { background-size: 64px 64px; } /* Terzo consumatore (2026-09-24, child 2.8.3): il PRE-FOOTER banner. La pagina si apre con la griglia della hero (10.2) e si chiude con la stessa, sulla CTA — e il pre-footer si stacca dall'area widget, che ha lo stesso colore (#0D1117) e non aveva nulla che la separasse. Solo variabili e contesto: il FONDO resta quello del contratto del parent (--sunya-prefooter-bg), qui non si ridichiara. Il parent mette gia' position:relative e overflow:hidden sul pre-footer, e z-index:1 sul contenuto (.sunya-prefooter__inner): con `isolation` i due pseudo-elementi a z-index -1 stanno sopra il fondo e sotto il testo. Maglia 64 e nodo a destra, dove sta il pulsante, come in testata. ⚠️ Vale solo per la variante --banner: con un'immagine di fondo (--has-bg) il pre-footer ha gia' la sua grafica e il suo overlay. */ .sunya-prefooter.sunya-prefooter--banner { --dd-work-line: color-mix(in srgb, var(--sunya-color-accent) 9%, transparent); --dd-work-glow: color-mix(in srgb, var(--sunya-color-accent) 18%, transparent); --dd-work-gx: 78%; --dd-work-gy: 50%; isolation: isolate; } .sunya-prefooter.sunya-prefooter--banner::before { background-size: 64px 64px; } @media (max-width: 1024px) { /* Sotto i 1024 il parent centra la CTA in colonna: nodo al centro. */ .sunya-prefooter.sunya-prefooter--banner { --dd-work-gx: 50%; --dd-work-gy: 60%; } } /* ========================================================================== 11. PAGINE EDITORIALI (blocchi HTML) Consolidamento del CSS che fino al 2026-08-12 viveva come