/* ================================================================
VF-PATCH.CSS — Patch per VittoriaFornari.com
>>> VERSION-MARKER: 2026-05-27-HERO-V6 <<<
COSA FA QUESTO FILE:
1. Sostituisce il font "Euphoria Script" con "Qwitcher Grypen"
2. Definisce le classi per usare le icone SVG del file vf-icons.svg
COME USARLO:
Aggiungi questi due tag in su OGNI pagina HTML,
DOPO il al CSS principale:
================================================================ */
/* ────────────────────────────────────────────────────────────────
1. FONT — Qwitcher Grypen: self-hosted in css/fonts.css
(l'@import da Google Fonts è stato rimosso — privacy/offline)
──────────────────────────────────────────────────────────────── */
/* Override via CSS custom property (funziona se il sito usa --font-script) */
:root {
--font-script: 'Qwitcher Grypen', cursive !important;
}
/* Fallback: override su tag tipici che usano font script in siti wellness */
.logo-nome,
.logo-brand,
.hero-title-script,
.section-eyebrow,
.quote-text blockquote,
.testimonial-text,
[class*="script"],
[class*="cursive"],
[class*="handwritten"] {
font-family: 'Qwitcher Grypen', cursive !important;
}
/* ────────────────────────────────────────────────────────────────
2. SISTEMA ICONE SVG — classi di base
──────────────────────────────────────────────────────────────── */
/*
USO BASE:
oppure, se lo sprite è inline nella pagina:
*/
/* Classe base — eredita colore dal contesto */
.vf-icon {
display: inline-block;
width: 1.25em;
height: 1.25em;
vertical-align: middle;
flex-shrink: 0;
/* Le icone SVG usano stroke, non fill */
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
/* Transizione fluida per hover */
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* ── Varianti di dimensione ── */
/* Piccola — per testo inline, meta, tag */
.vf-icon--sm {
width: 1rem;
height: 1rem;
}
/* Media — default, per bottoni e label */
.vf-icon--md {
width: 1.25rem;
height: 1.25rem;
}
/* Grande — per card, sezioni feature */
.vf-icon--lg {
width: 2rem;
height: 2rem;
}
/* Extra-large — per hero delle tradizioni */
.vf-icon--xl {
width: 3rem;
height: 3rem;
}
/* Huge — display decorativo */
.vf-icon--2xl {
width: 4rem;
height: 4rem;
}
/* ────────────────────────────────────────────────────────────────
3. ICONE TRADIZIONI — wrapper card
──────────────────────────────────────────────────────────────── */
/* Contenitore icona per le card delle 5 tradizioni */
.tradition-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin: 0 auto 1.25rem;
border-radius: 50%;
/* Sfondo sottile con colore base del sito — adatta il colore se necessario */
background: rgba(139, 115, 85, 0.08);
color: var(--color-primary, #8B7355);
transition: background 0.25s ease, transform 0.25s ease;
}
.tradition-icon-wrap:hover {
background: rgba(139, 115, 85, 0.15);
transform: translateY(-2px);
}
.tradition-icon-wrap .vf-icon {
width: 2rem;
height: 2rem;
}
/* ────────────────────────────────────────────────────────────────
4. ICONE PILASTRI — "Chi sono" page
──────────────────────────────────────────────────────────────── */
.pillar-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: 1rem;
border-radius: 12px;
background: rgba(139, 115, 85, 0.06);
color: var(--color-primary, #8B7355);
border: 1px solid rgba(139, 115, 85, 0.15);
}
.pillar-icon-wrap .vf-icon {
width: 1.75rem;
height: 1.75rem;
}
/* ────────────────────────────────────────────────────────────────
5. ICONE SOCIAL — footer
──────────────────────────────────────────────────────────────── */
.social-icon-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 8px;
color: inherit;
opacity: 0.7;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-icon-link:hover {
opacity: 1;
transform: translateY(-2px);
}
.social-icon-link .vf-icon {
width: 1.25rem;
height: 1.25rem;
}
/* ────────────────────────────────────────────────────────────────
6. ICONE BLOG — meta info (data, categoria, tempo)
──────────────────────────────────────────────────────────────── */
.blog-meta-icon {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
color: inherit;
opacity: 0.7;
}
.blog-meta-icon .vf-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
/* ────────────────────────────────────────────────────────────────
7. ICONE FRECCE — CTA, slider, navigazione
──────────────────────────────────────────────────────────────── */
/* Freccia animata per i link CTA tipo "Scopri di più →" */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.link-arrow .vf-icon {
transition: transform 0.2s ease;
}
.link-arrow:hover .vf-icon {
transform: translateX(4px);
}
/* ────────────────────────────────────────────────────────────────
8. BOTTONE CLOSE / MENU MOBILE
──────────────────────────────────────────────────────────────── */
/* Per sostituire il "✕" testuale nel drawer mobile */
.btn-close-svg,
.btn-menu-svg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background: none;
border: none;
cursor: pointer;
color: inherit;
border-radius: 6px;
transition: background 0.15s ease;
}
.btn-close-svg:hover,
.btn-menu-svg:hover {
background: rgba(0, 0, 0, 0.05);
}
.btn-close-svg .vf-icon,
.btn-menu-svg .vf-icon {
width: 1.5rem;
height: 1.5rem;
}
/* ────────────────────────────────────────────────────────────────
9. UTILITÀ — modificatori colore icone
──────────────────────────────────────────────────────────────── */
/* Icona che usa il colore primario del sito */
.vf-icon--primary { color: var(--color-primary, #8B7355); }
/* Icona silenziosa (testo secondario) */
.vf-icon--muted { opacity: 0.5; }
/* Icona bianca (su sfondi scuri) */
.vf-icon--white { color: #ffffff; }
/* Icona nera */
.vf-icon--dark { color: #1a1a1a; }
/* /* ────────────────────────────────────────────────────────────────
CONTRAST FIX — Rinforzo leggibilità testi secondari
Originali nel variables.css:
--color-text-light: #9A9280 (troppo sbiadito)
--color-text-mid: #6A635A (un po' pallido)
Nuovi valori: stessa tonalità warm-brown, solo più scuri
──────────────────────────────────────────────────────────────── * /
:root {
--color-text-light: #706458; /* era #9A9280 — +30% contrasto * /
--color-text-mid: #4A433A; /* era #6A635A — +25% contrasto * /
--color-gold: #8A7448; /* era #B09A6A — eyebrow e accenti più leggibili * /
} */
/* ────────────────────────────────────────────────────────────────
CONTRAST FIX v2 — Rinforzo leggibilità WCAG 2.1 AA
Originali in variables.css:
--color-text-light: #9A9280 → 2.60–3.09 su sfondi chiari (FAIL)
--color-text-mid: #6A635A → 4.99–5.92 (AA borderline)
--color-gold: #B09A6A → 2.31–2.74 (FAIL)
Nuovi valori: stessa famiglia warm-brown, calibrati per AA pieno
su tutti gli sfondi del sito (white, cream #FAF8F4, bg #F0EBE3).
Note:
• --color-gold è usato sia come colore testo (eyebrow piccole,
link inline) sia come accento decorativo (bordi, underline).
Il valore scelto soddisfa il vincolo testuale più stringente.
• Verificato con WCAG contrast formula 2.1 al 16-04-2026.
──────────────────────────────────────────────────────────────── */
:root {
--color-text-light: #706458; /* 4.85–5.75 (AA) — era #9A9280 */
--color-text-mid: #4A433A; /* 8.21–9.74 (AAA) — era #6A635A */
--color-gold: #746038; /* 5.11–6.06 (AA) — era #B09A6A */
}
/* ════════════════════════════════════════
CHI SONO — CTA: yantra-logo come decorazione di sfondo
con lighting effect (mix-blend-mode: screen)
Override di chi-sono.css riga 465
════════════════════════════════════════ */
.cs-cta {
isolation: isolate; /* contiene il blend al solo contesto cs-cta */
/* Defaults dello spotlight — vivono qui così il JS può sovrascriverli.
Messi dentro ::after verrebbero "pinnati" e ignorerebbero mousemove. */
--mx: 50%;
--my: 50%;
--spot: 100px;
}
.cs-cta::before {
content: '';
position: absolute;
/* reset da chi-sono.css */
top: auto; left: auto; right: auto; bottom: auto;
transform: none;
width: auto; height: auto;
/* nuovo comportamento */
inset: 0;
transform: none; /* ← resetta il translate(-50%, -50%) ereditato da chi-sono.css */
pointer-events: none;
background-image: url('img/brand/vf-yantra.png');
background-repeat: no-repeat;
/* Centrato dietro a tutto (scelta di Davide, 10/08/2026): la
leggibilità si risolve sull'opacità dei testi, più tenue qui */
background-position: center;
background-size: clamp(280px, 35vw, 480px) clamp(280px, 35vw, 480px);
/* ── LIGHTING ──
screen: il nero della PNG diventa trasparente,
il bronzo illumina additivamente il khaki sottostante.
L'opacity può salire perché ora contano solo i pixel luminosi. */
mix-blend-mode: screen;
opacity: .22;
filter: brightness(1.08) saturate(.85);
/* Neutralizza le vecchie proprietà tipografiche del "VF" */
font-size: 0;
letter-spacing: normal;
}
/* Su schermi stretti il testo occupa quasi tutta la larghezza:
yantra ancora più tenue (stessa regola della sezione shop tema) */
@media (max-width: 767px) {
.cs-cta::before { opacity: .14; }
}
/* ────────────────────────────────────────────────────────────────
WARM WHITE — Raffreddamento del bianco puro
Motivazione: #FFFFFF in un sistema cromatico interamente warm
(greige, khaki, cream, gold) risultava percepito come freddo/clinico.
Il nuovo valore mantiene la luminosità massima della palette ma
introduce una minima temperatura calda, coerente con il resto.
Contrasto verificato AA su tutti i testi del sistema.
──────────────────────────────────────────────────────────────── */
:root {
--color-white: #FBFAF6; /* era #FFFFFF */
}
/* ────────────────────────────────────────────────────────────────
PALETTE TRADIZIONI — Nuovi colori canonici
Sostituisce i valori desaturati di variables.css:54-58
con tonalità caratterizzate, verificate WCAG AA (≥4.5) come:
• sfondo per testo bianco (theme-card home, filter-btn active)
• colore testo/tag su sfondi chiari (blog-card__tag, sidebar)
──────────────────────────────────────────────────────────────── */
:root {
--color-yoga: #3D5A80; /* blu indaco polveroso */
--color-cabala: #8A6F2E; /* ocra antica */
--color-celtica: #3A6650; /* verde bosco */
--color-tibet: #7A2E2E; /* bordeaux profondo */
--color-tao: #A34535; /* rosso cinabro */
--color-olis: #9E5020; /* arancio bruciato */
}
/* ────────────────────────────────────────────────────────────────
CHI-SONO — Card "Valori": disaccoppiamento dalle tradizioni
Le 4 card (Olismo/Autenticità/Rigore/Trasformazione) in
chi-sono.css:332-335 usavano 4 colori tradizione (yoga/tao/tibet/celtica).
Con la palette nuova più satura diventavano visivamente "gridate"
e comunicavano falsa appartenenza alle tradizioni.
Nuova mappatura: 4 gradazioni crescenti della famiglia gold/ocra,
coerenti con --color-gold già sovrascritto sopra (vf-patch.css:297).
Caricato DOPO chi-sono.css → l'override è automatico.
──────────────────────────────────────────────────────────────── */
.cs-valore:nth-child(1) { border-top-color: #B09A6A; } /* gold chiaro — Olismo */
.cs-valore:nth-child(2) { border-top-color: #8A7448; } /* gold medio — Autenticità */
.cs-valore:nth-child(3) { border-top-color: #6A5532; } /* gold scuro — Rigore */
.cs-valore:nth-child(4) { border-top-color: #4D3D22; } /* gold profondo — Trasformazione */
/* ════════════════════════════════════════
CHI SONO — CTA: spotlight on hover
Secondo strato dello yantra, a colori pieni,
mascherato da un cerchio radiale che segue il cursore.
Le coordinate --mx / --my vengono scritte da main.js.
════════════════════════════════════════ */
.cs-cta::after {
content: '';
position: absolute;
inset: 0; /* copre tutta la sezione → coordinate mouse dirette */
pointer-events: none;
/* Stesso yantra, stesse dimensioni e centratura di ::before —
così lo spotlight al passaggio del mouse rivela lo stesso punto */
background-image: url('img/brand/vf-yantra.png');
background-repeat: no-repeat;
background-position: center;
background-size: clamp(280px, 35vw, 480px) clamp(280px, 35vw, 480px);
/* Maschera: opaco al centro del cerchio, trasparente fuori.
Lo stop intermedio a 50% ammorbidisce il bordo. */
-webkit-mask-image: radial-gradient(
circle var(--spot) at var(--mx) var(--my),
#000 0%, rgba(0,0,0,.9) 45%, transparent 100%
);
mask-image: radial-gradient(
circle var(--spot) at var(--mx) var(--my),
#000 0%, rgba(0,0,0,.9) 45%, transparent 100%
);
opacity: 0;
transition: opacity .35s ease;
}
/* Appare quando il mouse entra nella sezione */
.cs-cta:hover::after {
opacity: .95;
}
/* Rispetta chi ha ridotto le animazioni di sistema */
@media (prefers-reduced-motion: reduce) {
.cs-cta::after { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
PALETTE NEUTRI — pulizia per risolvere collisione visiva tra sezioni
Problema risolto:
variables.css definisce 6 toni caldi (cream, bg, greige-lt, greige,
greige-md, khaki). Diversi di questi hanno meno del 5% di differenza
di luminanza, quindi due sezioni consecutive in toni "diversi" ma
vicini apparivano come un'unica fascia confusa.
Nuova scala canonica per i background di sezione:
• --color-cream #FAF8F4 — sezioni "leggere" (invariato)
• --color-greige-lt #D8CFC0 — placeholder, accenti morbidi (nuovo)
• --color-khaki #7A7058 — sezioni di stacco, footer (invariato)
I valori --color-bg, --color-greige, --color-greige-md restano definiti
in variables.css per non rompere usi esterni esistenti, ma sono DEPRECATI
come background di sezione — non usarli più in nuovo codice.
Verificato: il nuovo greige-lt (#D8CFC0) ha Δ luminanza ~18% rispetto
al cream e ~35% rispetto al khaki. Distinzione visiva sicura.
──────────────────────────────────────────────────────────────── */
:root {
--color-greige-lt: #D8CFC0; /* era #EDE8E0 — +15% saturazione, fascia visibile */
}
/* ════════════════════════════════════════════════════════════════════════
SCROLL TO TOP — pulsante flottante in basso a destra
Markup creato dinamicamente da main.js (initScrollToTop).
Visibile solo dopo 300px di scroll. Click → smooth scroll a top.
Rispetta prefers-reduced-motion.
──────────────────────────────────────────────────────────────── */
.btn-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 50;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--color-khaki);
color: var(--color-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
/* Stato hidden di default — diventa visible quando scrolla */
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity .25s ease,
transform .25s ease,
visibility 0s linear .25s,
background .15s ease;
}
.btn-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity .25s ease,
transform .25s ease,
visibility 0s,
background .15s ease;
}
.btn-to-top:hover {
background: var(--color-text-dark);
}
.btn-to-top:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 2px;
}
.btn-to-top svg {
width: 18px;
height: 18px;
display: block;
}
@media (prefers-reduced-motion: reduce) {
.btn-to-top {
transition: opacity .15s ease, visibility 0s linear .15s, background .15s ease;
transform: none;
}
.btn-to-top--visible {
transform: none;
transition: opacity .15s ease, visibility 0s, background .15s ease;
}
}
/* Mobile: sposto leggermente più in alto per non interferire con bottom nav del browser */
@media (max-width: 640px) {
.btn-to-top {
right: 16px;
bottom: 16px;
width: 40px;
height: 40px;
}
}
/* ════════════════════════════════════════════════════════════════════════
FOOTER — yantra accanto al brand-name
Yantra posizionato a destra del nome "Vittoria Fornari", in dimensione
50px e nel suo colore originale bronzo (nessun filter applicato).
Override: cambio footer__brand-name da display:block a inline-flex
per allineare testo + yantra sulla stessa riga.
──────────────────────────────────────────────────────────────── */
.footer__brand-name {
display: inline-flex;
align-items: center;
gap: 14px;
}
.footer__yantra {
width: 50px;
height: 50px;
flex-shrink: 0;
/* Stile originale: PNG bronzo invariato, nessun filter. */
opacity: .9;
transition: opacity .25s ease;
}
.footer__brand-name:hover .footer__yantra {
opacity: 1;
}
@media (max-width: 640px) {
.footer__yantra {
width: 40px;
height: 40px;
}
.footer__brand-name {
gap: 12px;
}
}
/* ════════════════════════════════════════════════════════════════════════
CHI SONO — IL MIO APPROCCIO — icone delle 4 card valori
Le icone SVG sono inline nel markup (vedi chi-sono.html). Usano
currentColor per stroke/fill, così il colore è governato qui.
Scelta colore: var(--color-khaki) — neutro caldo, coerente con la
palette warm del sito (in contrasto con il blu navy #003366 originale
degli SVG forniti, che stonava con i toni terra).
──────────────────────────────────────────────────────────────── */
.cs-valore__icon-svg {
width: 48px;
height: 48px;
display: block;
color: var(--color-khaki);
}
/* ════════════════════════════════════════════════════════════════════════
CHI SONO — IL MIO APPROCCIO — ombra leggera alle 4 card
Le card avevano già `transition: box-shadow` ma nessuna ombra di default.
Aggiungiamo un'ombra molto leggera (--shadow-sm) per dare profondità
e fare in modo che non sembrino "disperse nello spazio" sullo sfondo cream.
In hover l'ombra cresce leggermente.
──────────────────────────────────────────────────────────────── */
.cs-valore {
box-shadow: var(--shadow-sm);
}
.cs-valore:hover {
box-shadow: var(--shadow-md);
}
/* ════════════════════════════════════════════════════════════════════════
HOME — wave dopo .hero che eredita i colori della hero sopra
.hero ha 3 colori distinti sopra la wave:
• foto-sx greige caldo #C8B8A0 (visibile da 768px in su)
• centro cream (sempre visibile)
• foto-dx greige verdognolo #B8C0A8 (visibile da 768px in su)
Il layout della .hero cambia a 3 breakpoint:
• < 768px (mobile): foto display:none, solo centro cream
• 768–1023 (tablet): flex column, ultima cosa prima della wave = foto dx
• >= 1024px (desktop): grid 3 colonne (1fr 1.15fr 1fr)
Per matchare i colori, il background della wave si adatta a ciascun caso.
──────────────────────────────────────────────────────────────── */
/* Mobile: solo il centro cream è visibile sopra */
.wave-divider--home-hero {
background: var(--color-cream);
}
/* Tablet: stacked, ultima fascia visibile sopra la wave è la foto destra
(giro 5: anche la destra è greige caldo, niente più sage) */
@media (min-width: 768px) {
.wave-divider--home-hero {
background: var(--color-greige-warm);
}
}
/* Desktop: gradient orizzontale a 3 fasce nette che matchano le 3 colonne
della grid (1fr 1.15fr 1fr → 31.75% / 36.5% / 31.75%). Gli stop doppi
sullo stesso valore creano transizioni nette, non sfumate.
Giro 5: fascia destra greige caldo come la sinistra (era sage). */
@media (min-width: 1024px) {
.wave-divider--home-hero {
background: linear-gradient(
to right,
var(--color-greige-warm) 0%,
var(--color-greige-warm) 31.75%,
var(--color-cream) 31.75%,
var(--color-cream) 68.25%,
var(--color-greige-warm) 68.25%,
var(--color-greige-warm) 100%
);
}
}
/* Ombra: trick "drop-shadow CSS + overflow hidden" per avere ombra
solo sopra l'onda.
• drop-shadow sull'svg con offset Y negativo proietta ombra in alto
(e anche un po' sotto per via del blur radius, omnidirezionale)
• overflow:hidden sul wrapper ritaglia la parte sotto l'onda
(l'ombra che invadeva la sezione successiva)
• padding-top + margin-top negativo crea spazio per non clippare
anche l'ombra sopra
Risultato: ombra morbida e netta solo verso l'hero, niente sotto. */
.wave-divider--home-hero {
position: relative;
overflow: hidden;
padding-top: 10px;
margin-top: -10px;
}
.wave-divider--home-hero svg {
display: block;
filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.18));
}
/* ════════════════════════════════════════════════════════════════════════
HOME — .about-preview con bg greige caldo (visibile dopo override figli)
home.css imposta `background: var(--color-cream)` anche sui due figli
.about-preview__photo e .about-preview__text — questo nascondeva
qualsiasi cambio di bg sul parent. Override: tolgo i bg dei figli
così il bg del parent diventa l'unico visibile.
Colore parent: #C8B8A0 (greige caldo, lo stesso usato per la foto-sx
della hero). Cream è troppo simile al bianco della .intro sopra per
creare percezione di stacco.
──────────────────────────────────────────────────────────────── */
.about-preview {
background: var(--color-greige-warm);
/* Giro 5: come per l'hero — l'ombra della foto proseguiva sotto ma
veniva tagliata dal bg della wave successiva ("patacca", foto-04).
Sollevata di livello, l'ombra sfuma sopra la curva. */
position: relative;
z-index: 1;
}
.about-preview__photo,
.about-preview__text {
background: transparent;
}
/* A. Niente bordo gold attorno alla foto (era 1px solid gold da home.css) */
.about-preview__photo {
border: none;
border-radius: 12px;
box-shadow: var(--shadow-md);
/* L'overflow:hidden ereditato da home.css mantiene l'immagine clippata
dentro i corner arrotondati. */
}
/* B. Script "Ciao, sono Vittoria" era greige-md #B0A090 — illeggibile sul
nuovo bg #C8B8A0. Passa a khaki (#7A7058), warm e con contrasto adeguato. */
.about-preview__script {
color: var(--color-khaki);
}
/* Wave sopra .about-preview: white (.intro) → greige (.about-preview) */
.wave-divider--about-top {
background: var(--color-white);
}
/* Wave sotto .about-preview: greige (.about-preview) → white (.themes-intro) */
.wave-divider--about-bottom {
background: var(--color-greige-warm);
}
/* Wave sopra .shop-preview: white (.themes-grid) → greige (.shop-preview) */
.wave-divider--shop-top {
background: var(--color-white);
}
/* Giro 8 (18/07/2026): respiro tra la griglia tradizioni e lo Shop —
il padding extra (bianco) distanzia le due sezioni in modo armonico.
Sovrascrive il padding-top:10px del gruppo onde più sotto. */
.wave-divider--shop-top {
padding-top: 56px !important;
}
/* Wave sotto .shop-preview: greige → cream (.blog-preview) */
.wave-divider--shop-bottom {
background: var(--color-greige-warm);
}
/* ════════════════════════════════════════════════════════════════════════
HOME — HERO — foto laterali: radius/shadow su img + shine sweep al hover
Sostituisce l'effetto scale(1.03) ereditato da home.css con lo
"shine sweep": un gradient luminoso diagonale che attraversa l'img
al hover (effetto "sbrilluccichio").
Border-radius e shadow vanno DIRETTAMENTE sull'img, non sul wrapper:
se messo sul wrapper, il radius interrompeva la continuità visiva
con la wave sotto creando il famoso "effetto bandiera". Con shadow
e radius sull'img:
• Wrapper resta rettangolare → continuità seamless con la wave
(la zona greige della foto-sx finisce dritta a contatto con la
zona greige della wave, idem per verde a dx, cream al centro)
• Gli angoli arrotondati dell'img lasciano vedere ~12px di bg
wrapper attorno alla foto: "cornice" sottile dei colori della
palette (greige attorno a foto-sx, verde attorno a foto-dx)
Wrapper .hero__photo: overflow visible (lascia uscire l'ombra basso
destra dell'img). position:relative già presente in home.css → ok
come ancora del ::after dello shine.
──────────────────────────────────────────────────────────────── */
/* Wrapper: arrotondato + drop-shadow + overflow:hidden per clippare
lo shine ai bordi. La cornice greige/verde di home.css è mantenuta
(padding 16px ereditato da .photo-placeholder), così l'img resta
"incastonata" con un po' di colore attorno come voluto. */
/* Giro 6 (18/07/2026): l'ombra sta sulla FOTO, non sulla colonna.
Il drop-shadow sul wrapper proiettava una striscia scura a tutta
altezza sul centro cream e sulla wave (le "strisce ai bordi" di
foto-01): il wrapper ora è una fascia piatta di colore, l'img
arrotondata ha la sua ombra e "galleggia" nella cornicetta, come
le foto di about e newsletter. Overflow visibile: l'ombra della
foto può sfumare oltre la cornicetta in modo naturale (lo shine
non ne ha bisogno: è già confinato da inset+radius). */
.hero__photo {
overflow: visible;
filter: none;
}
.hero__photo img {
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.15);
}
/* Giro 4 (18/07/2026): hero sopra la wave nel livello di disegno,
così l'ombra della foto in basso sfuma sopra la curva senza tagli. */
.hero {
position: relative;
z-index: 1;
}
/* Annulla l'effetto scale(1.03) ereditato da home.css:hover img */
.hero__photo:hover img {
transform: none;
}
/* Img: solo border-radius. Niente drop-shadow qui — verrebbe clippato
dall'overflow:hidden del wrapper; l'ombra è sul wrapper stesso. */
.hero__photo img {
border-radius: 12px;
}
/* Shine "ambient" — ispirato a albaunicorn.com .gallery-item::after
Striscia di luce diagonale che attraversa SOLO l'area dell'img
automaticamente in loop (5s). Niente hover: parte da solo.
Il box resta FERMO (inset 16px = padding .photo-placeholder,
border-radius 12px = raggio dell'img): a muoversi è solo il
background-position al suo interno, come lo shine hover di
.about-preview__photo::after. Così la luce non può fisicamente
uscire dalla foto e illuminare la cornice greige/verde attorno.
(La versione precedente traslava l'intero ::after: nei frame
intermedi la striscia passava sulla cornicetta — bug segnalato
da Davide il 18/07/2026.) */
.hero__photo::after {
content: '';
position: absolute;
inset: 16px; /* combacia con la foto (padding .photo-placeholder) */
border-radius: 12px; /* stesso raggio dell'img: niente luce sugli angoli */
pointer-events: none;
background-image: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.4) 50%,
transparent 70%
);
background-size: 250% 100%;
background-position: 100% 0;
background-repeat: no-repeat;
opacity: 0;
animation: vf-shine-sweep 5s ease-in-out infinite;
z-index: 2;
}
/* Sfaso la foto di destra di metà ciclo: non si illuminano insieme,
effetto più naturale (come gli sfasamenti random di albaunicorn). */
.hero__photo--right::after {
animation-delay: 2.5s;
}
@keyframes vf-shine-sweep {
0% { background-position: 100% 0; opacity: 0; }
35% { background-position: 100% 0; opacity: 0; }
50% { background-position: -25% 0; opacity: 1; }
65% { background-position: -150% 0; opacity: 0; }
100% { background-position: -150% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero__photo::after { animation: none; display: none; }
}
/* Giro 3 (18/07/2026): la foto riempie SEMPRE il riquadro, a ogni
larghezza. Prima l'altezza dell'hero era dettata dall'aspect 2:3
delle foto: su schermi larghi diventava enorme (colonna centrale
mezza vuota) e quando invece la colonna centrale era più alta delle
foto il riquadro si stirava lasciando una banda vuota sotto l'img
("problema foto-01") con lo shine che sbordava sotto la foto.
Con l'img in absolute dentro la cornicetta (inset 16px):
• l'img non detta più l'altezza → l'hero è alto quanto il solo
contenuto centrale, a qualunque larghezza;
• l'img combacia sempre col box dello shine (::after inset 16px);
• object-fit: cover ritaglia il necessario, mai bande vuote. */
@media (min-width: 768px) {
.hero__photo img {
position: absolute;
inset: 16px; /* = cornicetta .photo-placeholder */
width: calc(100% - 32px);
height: calc(100% - 32px);
object-fit: cover;
}
}
/* Giro 7+9 (18/07/2026): fascia tablet. Le fasce orizzontali a tutta
larghezza ritagliavano le foto mostrando solo una striscia in alto
(feedback Davide a 768px). Nuova impostazione: titolo sopra a tutta
larghezza, le due foto AFFIANCATE sotto — più piccole, ritaglio
quasi quadrato che tiene i visi ben visibili. */
@media (min-width: 768px) and (max-width: 1023px) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
}
.hero__center {
grid-column: 1 / -1;
grid-row: 1;
}
.hero__photo { height: 380px; min-height: 0; }
.hero__photo img { object-position: center 30%; }
}
/* ════════════════════════════════════════════════════════════════════════
HOME — ABOUT-PREVIEW — stessi effetti delle foto hero
Override delle regole precedenti (vf-patch.css backup riga 749-755):
• Sposto radius/shadow dal wrapper all'img direttamente
• Cambio shadow da centrata (--shadow-md) a basso-destra
(6px 6px 20px), identica alle foto hero
• Aggiungo shine sweep al hover (stesso pattern hero)
• Section: padding 24px + gap 24px (768px+) per dare respiro
all'ombra basso-destra dell'img — senza padding lo shadow
sborderebbe nelle wave sopra/sotto creando rumore visivo
──────────────────────────────────────────────────────────────── */
.about-preview {
padding: 24px;
}
@media (min-width: 768px) {
.about-preview {
gap: 24px;
}
}
/* Wrapper foto: niente più radius/shadow/overflow nascosto qui.
position:relative per ancorare il ::after dello shine. */
.about-preview__photo {
border-radius: 0;
box-shadow: none;
overflow: visible;
position: relative;
}
/* Giro 3 (18/07/2026): come per l'hero, la foto riempie sempre il
riquadro — se la colonna testo è più alta, l'img si adatta con
object-fit: cover invece di lasciare vuoto sotto; il ::after dello
shine (inset 0) combacia sempre. Solo dai 768px (layout a 2 colonne). */
@media (min-width: 768px) {
.about-preview__photo { min-height: 320px; }
.about-preview__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.about-preview__photo img {
border-radius: 12px;
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.12);
transition: box-shadow 1.6s ease;
}
.about-preview__photo:hover img {
box-shadow: 10px 10px 32px rgba(0, 0, 0, 0.18);
}
/* Giro 2 (18/07/2026): shine AMBIENT anche qui, uniforme all'hero —
prima partiva solo al hover. Stessi keyframes vf-shine-sweep,
partenza sfalsata rispetto alle foto hero (0s / 2,5s). */
.about-preview__photo::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
pointer-events: none;
background-image: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.35) 50%,
transparent 70%
);
background-size: 250% 100%;
background-position: 100% 0;
background-repeat: no-repeat;
opacity: 0;
animation: vf-shine-sweep 5s ease-in-out infinite;
animation-delay: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
.about-preview__photo::after { animation: none; display: none; }
.about-preview__photo img,
.about-preview__photo:hover img { transition: none; }
}
/* Fix (20/07/2026, feedback Davide): sotto i 768px l'img resta in flow
dentro la cornicetta (padding 16px di .photo-placeholder) ma il wrapper
aveva min-height:280px (home.css): a 320px l'img (240×160) galleggiava
centrata con ~60px di vuoto sopra/sotto e lo shine (inset 0) spazzava
l'intero box, ben oltre la foto. Qui:
• min-height:0 → il box abbraccia la foto (cornicetta 16px uniforme);
• shine inset 16px = cornicetta → combacia sempre con l'img,
stesso schema dell'hero (inset = padding placeholder). */
@media (max-width: 767px) {
.about-preview__photo { min-height: 0; }
.about-preview__photo::after { inset: 16px; }
}
/* Giro 2+4 (18/07/2026): foto della newsletter ("Resta in contatto")
stilizzata come quella dell'about — arrotondata con ombra, che
"galleggia" sulla fascia colorata della cella — e con shine ambient.
Il padding della cella fa da cornice; img e shine combaciano. */
.newsletter__photo {
position: relative;
overflow: hidden;
padding: 24px;
}
.newsletter__photo img {
border-radius: 12px;
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.12);
}
.newsletter__photo::after {
content: '';
position: absolute;
inset: 24px; /* = padding della cella: combacia con l'img */
border-radius: 12px;
pointer-events: none;
background-image: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.35) 50%,
transparent 70%
);
background-size: 250% 100%;
background-position: 100% 0;
background-repeat: no-repeat;
opacity: 0;
animation: vf-shine-sweep 5s ease-in-out infinite;
animation-delay: 3.6s;
}
@media (prefers-reduced-motion: reduce) {
.newsletter__photo::after { animation: none; display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
HOME — Drop-shadow alle 2 wave attorno alla .about-preview
Stesso pattern già applicato a .wave-divider--home-hero (riga 714-723
del backup): position:relative + overflow:hidden + padding-top:10px +
margin-top:-10px + drop-shadow(0 -2px 4px) sull'svg. L'ombra appare
solo verso la sezione "sopra" la wave (offset Y negativo), e
l'overflow:hidden ritaglia la parte che invaderebbe sotto.
--about-top: ombra in alto verso .intro (bianca)
--about-bottom: ombra in alto verso .about-preview (greige)
──────────────────────────────────────────────────────────────── */
/* Giro 4: tutte le onde tornano alla stessa curva (alta a sx, bassa a dx)
e allo stesso pattern ombra (verso la sezione sopra). */
.wave-divider--about-top,
.wave-divider--about-bottom,
.wave-divider--shop-top,
.wave-divider--shop-bottom {
position: relative;
overflow: hidden;
padding-top: 10px;
margin-top: -10px;
}
.wave-divider--about-top svg,
.wave-divider--about-bottom svg,
.wave-divider--shop-top svg,
.wave-divider--shop-bottom svg {
display: block;
filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.18));
}
/* ════════════════════════════════════════════════════════════════════════
HOME — Onde attorno alla newsletter (aggiunte 18/07/2026)
La newsletter ha 2 colori affiancati dai 768px (grid 1.1fr | 0.9fr →
55% / 45%): foto #B8A888 (hardcoded in home.css:215) a sx, contenuto
greige-lt a dx. Su mobile è impilata: foto sopra, contenuto sotto.
Stessa tecnica dell'onda hero (riga ~677): il background del divider
imita la fascia multicolore, il fill dell'svg la fascia monocolore.
──────────────────────────────────────────────────────────────── */
/* Giro 5: la newsletter è tutta greige-lt (la cella foto non ha più il
bg #B8A888 che sembrava una toppa) → niente più gradient a 2 fasce,
entrambe le onde hanno un background unico. */
.wave-divider--newsletter-top {
background: var(--color-greige-lt);
}
.wave-divider--footer-top {
background: var(--color-greige-lt);
}
/* Ombra: stesso pattern delle altre onde. Per la --newsletter-top il path
è specchiato (curva in alto) → ombra verso il basso e clip inverso. */
.wave-divider--footer-top {
position: relative;
overflow: hidden;
padding-top: 10px;
margin-top: -10px;
}
.wave-divider--footer-top svg {
display: block;
filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, 0.18));
}
.wave-divider--newsletter-top {
position: relative;
overflow: hidden;
padding-bottom: 10px;
margin-bottom: -10px;
}
.wave-divider--newsletter-top svg {
display: block;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18));
}
/* Giro 2, superato dal giro 3: lo specchio orizzontale scaleX(-1) delle
onde "sotto" era impercettibile (stessa curva, solo sfasata). Ora le
onde sotto usano il path capovolto in verticale direttamente nel
markup (vedi index.html) — nessuna trasformazione qui. */
/* ────────────────────────────────────────────────────────────────
CATEGORIE NEUTRE — Maestri, Interviste, Arte (18/08/2026)
Non sono tradizioni: non hanno un colore proprio ma il khaki del
brand, così restano riconoscibili senza competere con le sei
tradizioni. Il khaki #7A7058 passa AA sia come fondo per testo
bianco (filtro attivo, hero) sia come testo su fondo chiaro
(tag della card, sidebar).
Ogni categoria ha il suo token: se un domani una di loro merita
un colore proprio, si cambia qui e basta.
──────────────────────────────────────────────────────────────── */
:root {
--color-neutra: #7A7058; /* khaki brand */
--color-maestri: var(--color-neutra);
--color-interviste: var(--color-neutra);
--color-arte: var(--color-neutra);
--color-libri: var(--color-neutra);
--color-eventi: var(--color-neutra);
--color-gold-dark: #8F7A4A; /* testi attivi oro su crema (27/08, dal mockup) */
}
body.tema--maestri,
body.tema--interviste,
body.tema--arte,
body.tema--libri,
body.tema--eventi {
--tema-color: var(--color-neutra);
--tema-color-dark: #4F4A39;
}
.blog-card__tag--maestri,
.blog-card__tag--interviste,
.blog-card__tag--arte {
color: var(--color-neutra);
border-color: var(--color-neutra);
}
.sidebar-recent-tag--maestri,
.sidebar-recent-tag--interviste,
.sidebar-recent-tag--arte { color: var(--color-neutra); }
.filter-btn[data-tema="maestri"].active,
.filter-btn[data-tema="interviste"].active,
.filter-btn[data-tema="arte"].active {
background: var(--color-neutra);
border-color: var(--color-neutra);
color: var(--color-white);
}