HTML normale con lo stesso transform invece funzionava perfettamente). Anello e matita vivono quindi in due ), non su geometria interna a un reale sul sito live. Cosi' il marchio e' identico e garantito in entrambi gli ambienti, invece di un fallback CSS solo-locale. */ .semplice-navbar .logo a svg { display: block; width: 32px; height: 32px; } /* Il marchio iniettato da initLogo() (qui sopra) ha fill/stroke "white" FISSI nel proprio markup (MM_LOGO_SVG, mm-animations.js) - corretto sulla navbar scura di sempre, ma illeggibile (bianco su chiaro) col tema chiaro aggiunto il 2026-09-03. invert(1) sull'intero interno delle voci di menu attive/hover (".semplice-navbar [data-nav=...] nav ul li.current-menu-item a span { color: rgb(0,0,0); }") - pensata per un design chiaro dove l'item attivo aveva uno sfondo chiaro dietro. Sul nostro sfondo scuro diventa testo nero su nero, invisibile. Il colore va quindi forzato anche sullo , non solo sul link (il testo vive nello span, non viene ereditato perche' la regola di Semplice lo sovrascrive direttamente su quell'elemento). */ .semplice-navbar nav.standard .menu-item a:hover, .semplice-navbar nav.standard .menu-item.current-menu-item a, .semplice-navbar nav.standard .menu-item.current_page_item a, .semplice-navbar nav.standard .menu-item a:hover span, .semplice-navbar nav.standard .menu-item.current-menu-item a span, .semplice-navbar nav.standard .menu-item.current_page_item a span { color: var(--accent-light) !important; } /* piccolo indicatore sotto la voce di menu attiva, per renderla inequivocabile. Sullo del testo, non su : il tema padre usa il padding-right dell' (30px) come spaziatura tra le voci di menu invece di un gap sul contenitore - un ::after con left:0/right:0 su copriva anche quei 30px di padding, sporgendo ben oltre "PROJECTS" (segnalato da Marco, 2026-09-02). Lo invece avvolge stretto solo il testo. */ .semplice-navbar nav.standard .menu-item.current-menu-item a span, .semplice-navbar nav.standard .menu-item.current_page_item a span { position: relative; } .semplice-navbar nav.standard .menu-item.current-menu-item a span::after, .semplice-navbar nav.standard .menu-item.current_page_item a span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); } /* ========================================================================== 3b. Menu mobile (hamburger + overlay a tutto schermo) Scoperto in locale (2026-09-03, sanity check mobile): il tema padre Semplice disegna le 3 barre dell'hamburger (".menu-icon span" + "::before"/"::after") con "background-color:#000" - stessa causa radice del bug gia' risolto sullo del menu attivo (3. Navbar qui sopra), pensata per un design chiaro. Sul nostro sfondo scuro l'icona era quasi invisibile (nero su navbar quasi nera). Stessa regola copre anche la "X" di chiusura: e' lo STESSO , Semplice lo trasforma via transform:rotate() quando l' passa da classe "open-menu" a "close-menu", non e' un elemento diverso. */ .menu-icon span, .menu-icon span::before, .menu-icon span::after { background-color: var(--text-primary) !important; } /* L'overlay a tutto schermo (#overlay-menu, iniettato da Semplice) aveva "background:#fff" fisso nel tema padre - mai coperto dal nostro restyling dark, quindi si apriva come un pannello bianco/grigio chiaro con le voci di menu in nero, completamente fuori stile rispetto al resto del sito (e con "PROJECTS"/"ABOUT" praticamente illeggibili sovrapposte al contenuto sottostante durante la transizione di opacita'). Stessa identita' vetro della navbar (3. Navbar qui sopra) invece di un pannello bianco. */ #overlay-menu { background-color: var(--overlay-menu-bg) !important; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } #overlay-menu .overlay-menu-inner nav ul li a span { color: var(--text-secondary) !important; font-family: var(--font-mono) !important; letter-spacing: 0.08em; transition: color var(--transition-fast); } /* stessa causa radice del fix sullo del menu desktop: il tema padre colora di NERO il testo della voce hover/attiva (pensato per uno sfondo chiaro dietro l'item), invisibile sul nostro overlay scuro. */ #overlay-menu .overlay-menu-inner nav ul li a:hover span, #overlay-menu .overlay-menu-inner nav ul li.current-menu-item a span, #overlay-menu .overlay-menu-inner nav ul li.current_page_item a span { color: var(--accent-light) !important; } /* stesso indicatore a gradiente sotto la voce attiva usato nella navbar desktop (qui sopra), per coerenza visiva tra le due versioni del menu. */ #overlay-menu .overlay-menu-inner nav ul li.current-menu-item a span, #overlay-menu .overlay-menu-inner nav ul li.current_page_item a span { position: relative; } #overlay-menu .overlay-menu-inner nav ul li.current-menu-item a span::after, #overlay-menu .overlay-menu-inner nav ul li.current_page_item a span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); } /* ========================================================================== 4. Hero - trattamento "filled + outline" ripreso da andrewreff.com dopo lo studio in intro-prototype.html (li' e' uno stile statico permanente, non un'animazione di riempimento, riprodotto identico qui). In origine viveva solo nel primo .content-block della home, come DUE

separati ("MARCO" e "MADONNA" - verificato nel DOM reale il 2026-09-01). AGGIORNAMENTO (richiesta esplicita di Marco, 2026-09-02): la stessa coreografia (eyebrow + titolo grande + heading + descrizione) e' ora applicata anche su About, Logos e ogni pagina progetto (vedi initAboutHero/initLogosHero/initProjectHero in mm-animations.js), cosi' l'identita' visiva e' coerente su tutto il sito, non solo in home. Titoli su due parole/righe come "MARCO"/"MADONNA" o "ABOUT"/"MARCO" restano sullo split riempito+contornato (.mm-hero-name); titoli su una parola sola ("LOGOFOLIO", nome progetto) non hanno un secondo "nome" da contrapporre e usano invece un pieno riempimento a gradiente (.mm-hero-name-solid, sezione 4a piu' sotto). */ /* IMPORTANTE (bug trovato in locale, 2026-09-01, x2): 1. Tutte le regole di questa sezione richiedono le classi marcatrici .mm-hero-name / .mm-hero-name-solid / .mm-hero-role / .mm-hero-bio, aggiunte via JS (mm-animations.js) solo sulle pagine pertinenti (controllo su location.pathname, body.home si e' rivelato inaffidabile dopo la navigazione AJAX) - non :nth-of-type. La pagina "About" ha anch'essa un primo .content-block con due

come titolo ("ABOUT"/"MARCO"), quindi in origine veniva scambiata per l'hero home e riceveva lo stesso trattamento fuori contesto (ora invece lo riceve apposta, tramite la propria funzione dedicata). 2. :nth-of-type NON e' piu' usato per individuare questi moduli nemmeno sulla home: conta i fratelli per TAG (div), quindi quando .mm-eyebrow/.mm-tagline (anch'essi

) vengono inseriti come fratelli, il conteggio si sfasa e "il primo div" smette di essere il modulo del nome - il nome perdeva lo stile gradiente/contorno. Le classi marcatrici sono stabili indipendentemente da cosa viene inserito accanto. */ /* Padding-top identico sulla sezione hero delle 3 pagine con questa coreografia (Home, About, Logos) - richiesta esplicita di Marco, 2026-09-02: ognuna arrivava con un padding-top DIVERSO ereditato dal proprio valore originale nel builder Semplice (Home 120px, About/Logos 80px, verificato in locale), non toccato finora perche' su ID di sezione generati a runtime, non su una classe. :has() individua la sezione hero su tutte e 3 le pagine tramite le classi marcatrici gia' iniettate da initHeroCopy()/initAboutHero()/initLogosHero() (.mm-hero-name sulle prime due, .mm-hero-name-solid su Logos), senza bisogno di un selettore per pagina. 80px scelto come valore comune perche' gia' condiviso da 2 pagine su 3. */ .content-block:has(.mm-hero-name, .mm-hero-name-solid) { padding-top: 80px !important; } .mm-hero-name .is-content { color: var(--text-primary) !important; font-family: var(--font-display) !important; } /* Il contenuto originale di Marco specificava dimensione/spaziatura per un design chiaro piu' contenuto (inline style su

/: font-size 3rem, letter-spacing 0.444rem). Per il "grande nome impattante" in stile andrewreff.com serve sovrascriverle esplicitamente - senza, il testo restava al peso/dimensione di default (font-weight 400, ~54px) invece del trattamento bold/grande del prototipo (segnalato da Marco confrontando intro-prototype.html con il sito reale). */ .mm-hero-name .is-content p { /* Pesi/dimensioni allineati esattamente a intro-prototype.html su richiesta di Marco (screenshot di confronto, 2026-09-01): li' era clamp(3rem, 9vw, 6.5rem), qui era piu' piccolo (5.5rem max). */ font-weight: 700 !important; font-size: clamp(3rem, 9vw, 6.5rem) !important; line-height: 0.95 !important; white-space: nowrap !important; /* il browser applica 1em 0 di default ai

- a questa dimensione di font diventava un distacco enorme tra "MARCO" e "MADONNA" (segnalato da Marco). Nel prototipo erano senza margini propri. */ margin: 0 !important; } .mm-hero-name .is-content p span { letter-spacing: -0.01em !important; } /* "MADONNA" (home) porta ancora dal builder Semplice uno annidato con font-family inline "Inter-VariableFont_slntwght" (font mai caricato via @font-face in questo child theme - nome usato internamente da Semplice per il proprio font-picker). Essendo specificato DIRETTAMENTE su quel figlio, batte per cascata il font-family ereditato da .mm-hero-name .is-content anche se quella regola ha !important (un valore ereditato perde sempre contro un valore specificato sull'elemento stesso, importante o no) - il browser ripiega quindi sul sans-serif di sistema. Risultato visibile: "MARCO" (About, senza quello span extra) mostra le lettere strette che si toccano/incrociano al bordo del contorno (l'effetto "vector" segnalato da Marco), "MADONNA" no, perche' renderizza in un font diverso con metriche piu' larghe. Selettore con * per coprire lo span annidato a qualunque profondita', cosi' anche font-family aggiunti dal builder in futuro non rompono piu' l'effetto. */ .mm-hero-name .is-content p span, .mm-hero-name .is-content p span * { font-family: var(--font-display) !important; } .mm-hero-name .is-content p:nth-of-type(1) span { background: linear-gradient(120deg, var(--accent-light), var(--accent) 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent) !important; } .mm-hero-name .is-content p:nth-of-type(2) span { color: transparent !important; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px var(--text-primary); } /* Eyebrow + tagline iniettati da mm-animations.js (initHeroCopy) - copy non presente nel contenuto WordPress originale, scritta per completare la coreografia vista in intro-prototype.html (eyebrow sopra il nome, tagline tra ruolo e bio). */ .mm-eyebrow { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.12em; color: var(--text-secondary); margin-bottom: 1.25rem; } .mm-tagline { font-family: var(--font-mono); font-size: 1rem; color: var(--accent-light); margin-top: 0.75rem; } /* ========================================================================== 4a. Variante "solida" del titolo hero (.mm-hero-name-solid) per i titoli su una parola sola - Logos ("LOGOFOLIO", un

"Instagram" (mm_dark_child_contact_page_markup(), markup nostro non creato nel builder Semplice - vedi nota li' sul perche') apparivano con uno sfondo GIALLO acceso invece del vetro viola atteso. Causa reale, isolata via elementsFromPoint() sull'esatto pixel del bottone: non e' l' (il suo background risultava gia' corretto, viola trasparente al 6%) ma il suo GENITORE ".is-content" - il tema padre (frontend.min.css) ha una regola generica ".is-content{background-color: #ffd300;cursor:pointer}" con NESSUNO scoping, quasi certamente pensata per lo stato "modulo cliccabile per modificarlo" dentro l'editor visuale di Semplice, mai per il frontend reale. Su ogni bottone creato DAVVERO nel builder questo sfondo giallo di base viene sempre sovrascritto da un