/* ==========================================================================
PAGINA BRAND - PACCHETTO EFFETTI "FX" (2026-09-29) - css/brand_page_fx.css
Incluso da htmlFragments/top_v2.php DOPO css/brand_page.css, solo se brand_page_fx() e' vero
(BRAND_PAGE_FX in functions/brand_page_functions.php, forzabile con ?bp_fx=0 / ?bp_fx=1).
Spegnendo il pacchetto non si carica questo file, ne' js/brand_page_fx.js, ne' il markup FX dei partial.
Regole (le stesse di css/brand_page.css):
- cio' che nasconde o anima l'ingresso sta sotto .bp-anim (messa su dallo script inline di top_v2.php);
se lo stato visibile dipende da js/brand_page_fx.js la regola sta sotto .bp-anim.bp-fx: la classe bp-fx viene
tolta dopo 3 s se il JS FX non parte (window.bpFxReady), quindi nulla resta nascosto;
- senza JS o con prefers-reduced-motion la pagina e' statica e completa (elementi FX visibili e fermi);
- hover solo con (hover: hover) e senza reduced-motion; animazioni continue solo transform / opacity / dashoffset.
Sezione 11 (2026-09-29): foto side/back che si alternano alla frontale nelle cornici del mosaico editoriale (e
dell'hero fino al 2026-10-01, oggi spente li' dal partial), sincronizzate per blocco (classi bp-fx-gal-*, elementi
creati da js/brand_page_fx.js sulle img con data-bp-alt).
Sezione 12 (2026-09-30): blocco "In evidenza" vettoriale (classi bp-fx-ed-*): fondo SVG con blob, cucitura e
puntini, virgolette giganti, freccia a mano, capolettera (markup in htmlFragments/brand_page_editoriale.php);
cornice sfalsata, nastro adesivo e numeri delle foto creati da js/brand_page_fx.js nel mosaico.
Sezione 13: logo animato Styliafoe. Dal 2026-09-30 era nell'hero (grid accanto a kicker + titolo); il 2026-10-01
e' stato tolto dall'hero su richiesta dell'utente (l'hero e' tornato alla sequenza d'ingresso originale) e spostato
a destra dell'intestazione di "Come si acquista" (wrapper .bp-fx-acq-head, .bp-fx-acq-logo, markup in
htmlFragments/brand_page_come_si_acquista.php), con ingresso allo scroll (bp-fx-in da js/brand_page_fx.js).
Sezione 14 (2026-10-01): foto dell'hero a polaroid in fila (cornice bianca con striscia in basso, oblique a versi
alterni, sovrapposte ai bordi, senza puntine; cadono una dopo l'altra al load; col mouse la polaroid si raddrizza e
si solleva e le altre si scansano; classi bp-fx-pola / bp-fx-b-*, variabili --bp-b-*, stati dal JS). Il timbro della
sezione 8 sta in basso a destra dell'ultima polaroid. Nell'hero le foto non si alternano piu' (sezione 11 solo per
"In evidenza").
Sezione 15 (2026-10-01): sfondi vettoriali tema lusso di hero (sartoria: metro, gruccia, ago e filo, forbici,
bottoni) e "In evidenza" (accessori: carta da parati a losanghe, borsa, occhiali, profumo, decollete'), classi
bp-deco-lusso / bp-dl-*. I primi sfondi (cucitura, anelli, blob: css/brand_page.css e sezione 12) restano e si
riprendono con BRAND_PAGE_DECO = 'v1' o ?bp_deco=v1 (brand_page_deco() in functions/brand_page_functions.php).
Sezione 16 (2026-10-01): sfondi vettoriali versione flat (default), illustrazioni piatte: hero con scarpe, borsa,
abito + cucitura e anelli v1 (sneaker, borsa, abito su gruccia); "In evidenza" come vetrina di boutique (arco,
mensole, cappello, foulard, occhiali, profumo, cintura). Classi bp-deco-flat / bp-df-. Le tre versioni si scelgono
con BRAND_PAGE_DECO = 'flat' | 'lusso' | 'v1' o con ?bp_deco=flat / lusso / v1.
Classi: prefisso bp-fx- (sezione 15: bp-dl-; sezione 16: bp-df-). Palette sezione 16 in piu': #E9E4E0, #D9D2CC,
#F6EFE6. Palette: #950A46, #F2A8C4, #FBEEF3, #1D2124, #191B19, #F7F7F7, #E3E3E3, #84898F,
#565C63, #222222.
========================================================================== */
/* ---------- keyframes ---------- */
@keyframes bp-fx-word-up {
from { transform: translateY(115%); }
to { transform: translateY(0); }
}
@keyframes bp-fx-draw {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
@keyframes bp-fx-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bp-fx-stamp-in {
from { opacity: 0; transform: scale(0) rotate(-90deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes bp-fx-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* puntino dei passi: il wrapper largo quanto la linea scorre da -100% a 0, il puntino sta sul suo bordo destro */
@keyframes bp-fx-dot-run {
0% { transform: translateX(-100%); opacity: 0; }
6% { opacity: 1; }
94% { opacity: 1; }
100% { transform: translateX(0); opacity: 0; }
}
/* pulse dei numeri: ~0,9 s su un ciclo di 5 s (quello del puntino) */
@keyframes bp-fx-pulse-disc {
0% { opacity: 0; transform: scale(.4); }
5% { opacity: 1; }
12% { opacity: 1; transform: scale(1); }
18%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes bp-fx-pulse-ring {
0% { opacity: 0; transform: scale(.5); }
3% { opacity: .9; }
18%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes bp-fx-num-pop {
0% { scale: 1; }
7% { scale: 1.25; }
16%, 100% { scale: 1; }
}
/* ==========================================================================
1. TITOLO DELL'HERO PAROLA PER PAROLA
js/brand_page_fx.js avvolge ogni parola in parola (spazi come testo
normale, l'a capo resta naturale) e aggiunge bp-fx-split. Fino ad allora, con bp-fx, il titolo resta nascosto
(niente doppio lampeggio con il fade-up di brand_page.css, che qui viene spento).
========================================================================== */
.bp-anim.bp-fx .bp-hero-h2:not(.bp-fx-split):not(.bp-fx-nosplit) {
opacity: 0;
}
.bp-anim .bp-hero-h2.bp-fx-split {
animation: none;
}
/* padding + margine negativo uguali: la riga non cambia altezza e accenti/discendenti non vengono tagliati */
.bp-anim .bp-fx-w {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-top: .06em;
padding-bottom: .12em;
margin-top: -.06em;
margin-bottom: -.12em;
}
.bp-anim .bp-fx-w > span {
display: inline-block;
animation: bp-fx-word-up .8s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: calc(180ms + var(--bp-w, 0) * 55ms);
}
/* ==========================================================================
2. FOTO DELL'HERO: parallax allo scroll (proprieta' individuale translate, scritta inline dal JS: non tocca il
transform della composizione a polaroid, sezione 14). Nessuna deformazione 3D al passaggio del mouse.
========================================================================== */
.bp-shots {
position: relative; /* contenitore del timbro (assoluto: non entra nella grid) */
}
/* ==========================================================================
4. PAROLA CHIAVE EVIDENZIATA NEGLI H2 DI SEZIONE
Il JS avvolge l'ultima parola degli H2 .bp-sec (non hero, non CTA finale) in .bp-fx-mark. A riposo l'evidenziatore
e' visibile pieno; con bp-anim + bp-fx parte chiuso e si stende quando l'H2 riceve bp-fx-in.
========================================================================== */
.bp-fx-mark {
position: relative;
z-index: 0;
white-space: nowrap;
}
.bp-fx-mark::before {
content: "";
position: absolute;
left: -.08em;
right: -.08em;
bottom: .06em;
height: .38em;
z-index: -1;
border-radius: 2px;
background: rgba(242, 168, 196, .6);
transform: skewX(-8deg);
transform-origin: 0 50%;
pointer-events: none;
}
.bp-anim.bp-fx .bp-fx-mark::before {
transform: skewX(-8deg) scaleX(0);
}
.bp-anim.bp-fx .bp-fx-in .bp-fx-mark::before,
.bp-anim.bp-fx .bp-fx-in.bp-fx-mark::before {
transform: skewX(-8deg) scaleX(1);
transition: transform .7s cubic-bezier(.6, 0, .2, 1) .35s;
}
/* ==========================================================================
5. COME SI ACQUISTA VIVO: puntino sulla linea (solo lg+, dietro le card come la linea) + pulse dei numeri
Partono solo quando .bp-flow-wrap riceve bp-in da js/brand_page.js, dopo che la linea si e' disegnata.
Senza bp-anim il puntino non c'e' (sarebbe un punto fermo senza senso) e i numeri restano normali.
========================================================================== */
.bp-fx-dot-lane {
display: none;
}
.bp-fx-dot-track {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateX(-100%);
}
.bp-fx-dot {
position: absolute;
right: 0;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
border-radius: 50%;
background: #950A46;
box-shadow: 0 0 0 4px rgba(149, 10, 70, .15);
}
@media (min-width: 992px) {
/* stessa quota della linea: top della linea calc(1rem + 29px), alta 2px -> centro a 1rem + 30px */
.bp-anim .bp-fx-dot-lane {
display: block;
position: absolute;
left: 0;
right: 0;
top: calc(1rem + 30px);
height: 24px;
margin-top: -12px;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.bp-anim .bp-flow-wrap.bp-in .bp-fx-dot-track {
animation: bp-fx-dot-run 5s linear 1.6s infinite;
}
/* numeri: disco e anello dietro al numero (pseudo-elementi: l'hover di brand_page.css usa transform sul numero) */
.bp-anim .bp-flow-wrap.bp-in .bp-flow-num {
position: relative;
z-index: 0;
}
.bp-anim .bp-flow-wrap.bp-in .bp-flow-num::before,
.bp-anim .bp-flow-wrap.bp-in .bp-flow-num::after {
content: "";
position: absolute;
top: 50%;
left: -7px;
width: 32px;
height: 32px;
margin-top: -16px;
border-radius: 50%;
z-index: -1;
opacity: 0;
pointer-events: none;
animation: bp-fx-pulse-disc 5s cubic-bezier(.2, .7, .2, 1) infinite;
animation-delay: calc(1.7s + var(--bp-n, 0) * 1.25s);
}
.bp-anim .bp-flow-wrap.bp-in .bp-flow-num::before {
background: rgba(149, 10, 70, .12);
}
.bp-anim .bp-flow-wrap.bp-in .bp-flow-num::after {
border: 1.5px solid rgba(149, 10, 70, .45);
animation-name: bp-fx-pulse-ring;
}
/* il numero cresce con la proprieta' individuale scale (non transform): l'hover scale(1.15) resta intatto */
@supports (scale: 1) {
.bp-anim .bp-flow-wrap.bp-in .bp-flow-num {
transform-origin: left center;
animation: bp-fx-num-pop 5s cubic-bezier(.2, .7, .2, 1) infinite;
animation-delay: calc(1.7s + var(--bp-n, 0) * 1.25s);
}
}
}
/* ==========================================================================
7. NASTRO SCORREVOLE (htmlFragments/brand_page_nastro.php)
Contenitore scuro come la databar sotto, fascia magenta inclinata di -1,2 gradi e larga 104% (i bordi inclinati
restano fuori): overflow nascosto sul contenitore, nessuno scroll orizzontale.
Movimento: solo animazione CSS del track (2 sequenze identiche, -50% = una sequenza), a velocita' costante e
sempre verso sinistra (una sequenza in 38 s). js/brand_page_fx.js (sezione 7) si limita a metterla in pausa quando
il nastro e' fuori dallo schermo (classe bp-fx-nastro-pausa sul contenitore). Dal 2026-10-06: prima il JS
spegneva l'animazione (classe bp-fx-js) e muoveva il track seguendo verso e velocita' dello scroll.
Acceso/spento con BRAND_PAGE_FX_NASTRO (functions/brand_page_functions.php; nascosto dal 2026-09-30): da spento il
markup non c'e' e queste regole restano inerti.
========================================================================== */
.bp-fx-nastro-wrap {
position: relative;
overflow: hidden;
background: #191B19;
padding: 20px 0;
font-family: 'Mulish', sans-serif;
}
.bp-fx-nastro {
position: relative;
width: 104%;
margin-left: -2%;
height: 56px;
display: flex;
align-items: center;
overflow: hidden;
background: #950A46;
color: #FFFFFF;
transform: rotate(-1.2deg);
box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.bp-fx-nastro-track {
display: flex;
flex: 0 0 auto;
width: -webkit-max-content;
width: max-content;
will-change: transform;
}
.bp-fx-nastro-seq {
display: flex;
flex: 0 0 auto;
align-items: center;
}
.bp-fx-nv {
flex: 0 0 auto;
padding: 0 .55em;
font-size: clamp(18px, 2.4vw, 30px);
font-weight: 800;
line-height: 1;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
color: #FFFFFF;
}
.bp-fx-nv-b {
font-weight: 900;
}
@supports (-webkit-text-stroke: 1px #FFFFFF) {
.bp-fx-nv-o {
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .85);
}
}
.bp-fx-ns {
flex: 0 0 auto;
display: block;
width: 14px;
height: 14px;
color: #F2A8C4;
}
@media (prefers-reduced-motion: no-preference) {
.bp-fx-nastro-track {
animation: bp-fx-marquee 38s linear infinite;
}
.bp-fx-nastro-pausa .bp-fx-nastro-track {
animation-play-state: paused;
}
}
@media (max-width: 991.98px) {
.bp-fx-nastro-wrap { padding: 12px 0; }
.bp-fx-nastro { height: 44px; }
.bp-fx-ns { width: 11px; height: 11px; }
}
/* ==========================================================================
8. TIMBRO ROTANTE DELL'HERO (brand_page_hero.php, solo con 2-3 foto)
Il testo circolare gira lentamente, il centro (sconto massimo o stella) resta fermo.
Dal 2026-10-01 (polaroid in fila, sezione 14): in basso a destra, a cavallo dell'angolo dell'ultima polaroid: bilancia
la composizione (la centrale e' alzata, la fila "pende" a destra) e sulla prima foto (in alto a sinistra, come
prima) coprirebbe la parte alta del capo. 96px da 992px (centro 12px fuori dal bordo destro e 6px sopra il bordo
inferiore della polaroid), 70px sotto (centro 6px dentro il bordo destro, 4px sotto il bordo inferiore: a 360px
sporge di ~22px da .bp-shots, dentro i 28px di gutter + padding del contenitore). Bordo destro dell'ultima
polaroid, in % della larghezza di .bp-fx-pola (padding orizzontale 4%): 3 foto (104% del content box) 2,16%,
2 foto (94%) 6,76%. La didascalia di quella polaroid ha piu' padding a destra (sezione 14): non va sotto il timbro.
========================================================================== */
.bp-fx-stamp {
position: absolute;
right: calc(2.16% - 60px);
bottom: -16px;
width: 96px;
height: 96px;
z-index: 6; /* sopra le polaroid a riposo (1-3, sezione 14), sotto quella in primo piano col mouse (8) */
border-radius: 50%;
box-shadow: 0 8px 22px rgba(29, 33, 36, .22);
pointer-events: none;
}
.bp-fx-stamp svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.bp-fx-stamp-ring {
transform-box: view-box;
transform-origin: 50% 50%;
}
.bp-shots-2 > .bp-fx-stamp {
right: calc(6.76% - 60px);
}
/* entra dopo che le polaroid sono cadute (ultima a 1,05 s) */
.bp-anim .bp-fx-stamp {
animation: bp-fx-stamp-in .8s cubic-bezier(.2, .9, .3, 1.15) 1.1s both;
}
.bp-anim .bp-fx-stamp-ring {
animation: bp-fx-spin 18s linear infinite;
}
@media (max-width: 991.98px) {
.bp-fx-stamp {
right: calc(2.16% - 29px);
bottom: -17px;
width: 70px;
height: 70px;
}
.bp-shots-2 > .bp-fx-stamp {
right: calc(6.76% - 29px);
}
}
/* ==========================================================================
9. ICONE VETTORIALI CHE SI DISEGNANO (databar e condizione della merce)
Tutti i path hanno pathLength="1": con bp-anim + bp-fx partono non disegnati e si disegnano quando il contenitore
(.bp-databar .row o la singola .bp-cond) riceve bp-fx-in da js/brand_page_fx.js. Dash 1 + gap 2: nessun puntino
del linecap rotondo a fine path quando e' "spento".
Ritardo = --bp-fx-d (per icona) + --bp-fx-p (per path dentro l'icona).
========================================================================== */
.bp-fx-ico {
display: block;
overflow: visible;
}
.bp-fx-ico-db {
width: 30px;
height: 30px;
margin-bottom: 10px;
color: #F2A8C4;
}
.bp-fx-ico-cond {
width: 40px;
height: 40px;
margin-bottom: 12px;
color: #222222;
transform-origin: 50% 50%;
}
.bp-cond-ev .bp-fx-ico-cond {
color: #950A46;
}
.bp-fx-ico > :nth-child(2) { --bp-fx-p: .18s; }
.bp-fx-ico > :nth-child(3) { --bp-fx-p: .36s; }
.bp-fx-ico > :nth-child(4) { --bp-fx-p: .5s; }
.bp-fx-ico > :nth-child(5) { --bp-fx-p: .62s; }
.bp-databar-item:nth-child(1) .bp-fx-ico { --bp-fx-d: .15s; }
.bp-databar-item:nth-child(2) .bp-fx-ico { --bp-fx-d: .27s; }
.bp-databar-item:nth-child(3) .bp-fx-ico { --bp-fx-d: .39s; }
.bp-databar-item:nth-child(4) .bp-fx-ico { --bp-fx-d: .51s; }
.bp-cond .bp-fx-ico { --bp-fx-d: .3s; }
.bp-anim.bp-fx .bp-fx-ico path {
stroke-dasharray: 1 2;
stroke-dashoffset: 1;
}
.bp-anim.bp-fx .bp-fx-in .bp-fx-ico path {
animation: bp-fx-draw 1s cubic-bezier(.4, 0, .2, 1) both;
animation-delay: calc(var(--bp-fx-d, 0s) + var(--bp-fx-p, 0s));
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.bp-fx-ico-cond {
transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.bp-cond:hover .bp-fx-ico-cond {
transform: rotate(-6deg) scale(1.06);
}
}
/* ==========================================================================
10. PROFILO DELLO STOCK CON I GRAFICI (brand_page_stock_profile.php)
La riga con grafico va a capo: etichetta e valore restano sulla stessa riga, il grafico sotto a tutta larghezza.
Senza bp-anim i grafici sono statici e pieni.
========================================================================== */
.bp-datalist li.bp-fx-has-chart {
flex-wrap: wrap;
}
.bp-fx-chart {
flex: 0 0 auto;
width: 100%;
margin-top: 10px;
}
/* barra divisa per target */
.bp-fx-bar {
display: flex;
height: 10px;
border-radius: 5px;
overflow: hidden;
background: #E3E3E3;
}
.bp-fx-bar i {
display: block;
height: 100%;
transform-origin: 0 50%;
}
.bp-fx-legend {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 8px;
font-size: 12px;
line-height: 1.35;
}
.bp-datalist .bp-fx-chart span {
color: #565C63;
}
.bp-fx-lg {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.bp-fx-lg i {
display: inline-block;
flex: 0 0 auto;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
}
.bp-anim.bp-fx .bp-fx-bar i {
transform: scaleX(0);
}
.bp-anim.bp-fx .bp-fx-chart.bp-fx-in .bp-fx-bar i {
transform: scaleX(1);
transition: transform .6s cubic-bezier(.6, 0, .2, 1);
transition-delay: calc(.3s + var(--bp-s, 0) * .2s);
}
/* ==========================================================================
11. FOTO CHE SI ALTERNANO (cornici del mosaico editoriale; nell'hero spente dal 2026-10-01)
Dal 2026-10-01 il partial dell'hero non scrive piu' data-bp-alt ($bp_hero_alterna = false in
htmlFragments/brand_page_hero.php): le regole restano generiche (".bp-shot") cosi' rimettendolo a true l'hero
torna ad alternare senza toccare il CSS; oggi lavorano solo nel blocco "In evidenza".
Elementi creati da js/brand_page_fx.js (sezione 11) sopra ogni ![]()
(dai partial, solo con FX):
span.bp-fx-gal (assoluto sul box esatto dell'img, top/left/width/height inline) > img.bp-fx-gal-img (una per foto
side/back, padding copiato inline dall'img principale) + span.bp-fx-gal-edge (scia sfocata della tendina) +
span.bp-fx-gal-bar > span.bp-fx-gal-seg > span.bp-fx-gal-fill (indicatore). Il contenitore prende
bp-fx-gal-host (position:relative) solo se era static. Le cornici di uno stesso blocco (hero, mosaico) cambiano
foto nello stesso istante: il ritmo lo da' il JS (un orologio per blocco), qui ci sono solo le transizioni.
Stati delle foto (classi sulle img): nessuna = nascosta (tagliata a destra); bp-fx-gal-shown = visibile;
bp-fx-gal-in = entra con la tendina; bp-fx-gal-out = esce con la tendina (torna la frontale); bp-fx-gal-under =
coperta, si ingrandisce appena (anche sull'img principale). Col mouse la gal ha bp-fx-gal-fast: dissolvenza rapida
(bp-fx-gal-top = quella che sta entrando). Le regole di brand_page.css su ".bp-shot img", ".bp-ed-shot img" e
".bp-ed-shot span" colpiscono anche questi elementi: qui si riportano esplicitamente i valori (specificita' piu' alta).
========================================================================== */
@keyframes bp-fx-gal-edge-move {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* scia: entra e esce in dissolvenza dentro la durata della tendina, opacita' massima bassa */
@keyframes bp-fx-gal-edge-fade {
0% { opacity: 0; }
18%, 72% { opacity: .6; }
100% { opacity: 0; }
}
@keyframes bp-fx-gal-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.bp-anim.bp-fx .bp-fx-gal-host {
position: relative;
}
/* didascalie sempre sopra la gal */
.bp-anim.bp-fx .bp-shot figcaption,
.bp-anim.bp-fx .bp-ed-shot > span:not(.bp-fx-gal) {
position: relative;
z-index: 2;
}
.bp-anim.bp-fx .bp-fx-gal {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
z-index: 1;
display: block;
overflow: hidden;
pointer-events: none;
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font-size: 0;
line-height: 0;
letter-spacing: 0;
text-transform: none;
white-space: normal;
text-overflow: clip;
flex: none;
}
/* azzera cio' che ".bp-ed-shot span" di brand_page.css darebbe agli span interni */
.bp-anim.bp-fx .bp-fx-gal span {
position: absolute;
display: block;
z-index: auto;
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font-size: 0;
line-height: 0;
letter-spacing: 0;
white-space: normal;
overflow: visible;
text-overflow: clip;
flex: none;
}
/* foto alternative: a riposo nascoste, tagliate a destra; fondo bianco come la cornice (coprono la frontale) */
.bp-anim.bp-fx .bp-fx-gal img.bp-fx-gal-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
max-width: none;
min-height: 0;
aspect-ratio: auto;
box-sizing: border-box;
margin: 0;
border: 0;
object-fit: contain;
background: #FFFFFF;
opacity: 1;
transform: none;
transform-origin: 50% 50%;
animation: none;
transition: none;
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
.bp-anim.bp-fx .bp-fx-gal img.bp-fx-gal-img.bp-fx-gal-shown {
z-index: 2;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.bp-anim.bp-fx .bp-fx-gal img.bp-fx-gal-img.bp-fx-gal-in {
z-index: 3;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
transition: -webkit-clip-path .9s cubic-bezier(.7, 0, .2, 1), clip-path .9s cubic-bezier(.7, 0, .2, 1);
}
.bp-anim.bp-fx .bp-fx-gal img.bp-fx-gal-img.bp-fx-gal-out {
z-index: 3;
-webkit-clip-path: inset(0 0 0 100%);
clip-path: inset(0 0 0 100%);
transform: scale(1.04);
transition: -webkit-clip-path .9s cubic-bezier(.7, 0, .2, 1), clip-path .9s cubic-bezier(.7, 0, .2, 1), transform .9s cubic-bezier(.7, 0, .2, 1);
}
.bp-anim.bp-fx .bp-fx-gal img.bp-fx-gal-img.bp-fx-gal-under {
transform: scale(1.04);
transition: transform .9s cubic-bezier(.7, 0, .2, 1);
}
/* la frontale coperta dalla tendina */
.bp-anim.bp-fx img.bp-fx-gal-under {
transform: scale(1.04);
transition: transform .9s cubic-bezier(.7, 0, .2, 1);
}
/* col mouse: dissolvenza rapida; la foto che si spegne resta scoperta finche' non e' sparita (clip con ritardo) */
.bp-anim.bp-fx .bp-fx-gal.bp-fx-gal-fast img.bp-fx-gal-img {
opacity: 0;
transform: none;
transition: opacity .25s ease, -webkit-clip-path 0s linear .25s, clip-path 0s linear .25s, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.bp-anim.bp-fx .bp-fx-gal.bp-fx-gal-fast img.bp-fx-gal-img.bp-fx-gal-shown {
z-index: 2;
opacity: 1;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
transition: opacity .25s ease, -webkit-clip-path 0s, clip-path 0s, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.bp-anim.bp-fx .bp-fx-gal.bp-fx-gal-fast img.bp-fx-gal-img.bp-fx-gal-top {
z-index: 3;
}
/* scia della tendina: il wrapper largo quanto la gal scorre da -100% a 0 (stessa durata e curva del clip-path delle
foto), la scia sta centrata sul suo bordo destro: fascia di 16px con sfumatura trasparente ai lati (niente filter:
il gradiente da' gia' il bordo morbido), in dissolvenza in entrata e in uscita */
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-edge {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
opacity: 0;
transform: translateX(-100%);
}
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-edge::after {
content: "";
position: absolute;
top: 0;
right: -8px;
bottom: 0;
width: 16px;
background: linear-gradient(90deg, rgba(149, 10, 70, 0) 0%, rgba(149, 10, 70, .22) 32%, rgba(242, 168, 196, .28) 50%, rgba(149, 10, 70, .22) 68%, rgba(149, 10, 70, 0) 100%);
}
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-edge.bp-fx-gal-run {
animation: bp-fx-gal-edge-move .9s cubic-bezier(.7, 0, .2, 1) both, bp-fx-gal-edge-fade .9s linear both;
}
/* indicatore stile "stories": dentro l'area della foto, in basso */
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-bar {
left: 12px;
right: 12px;
bottom: 10px;
height: 2px;
z-index: 5;
display: flex;
opacity: 0;
transition: opacity .4s ease;
}
.bp-anim.bp-fx .bp-fx-gal.bp-fx-gal-on .bp-fx-gal-bar {
opacity: 1;
}
.bp-anim.bp-fx .bp-fx-gal.bp-fx-gal-tiny .bp-fx-gal-bar {
display: none;
}
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-seg {
position: relative;
flex: 1 1 0;
height: 2px;
margin-left: 4px;
overflow: hidden;
border-radius: 1px;
background: rgba(29, 33, 36, .15);
}
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-seg:first-child {
margin-left: 0;
}
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-fill {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #950A46;
transform: scaleX(0);
transform-origin: 0 50%;
}
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-done .bp-fx-gal-fill {
transform: scaleX(1);
}
.bp-anim.bp-fx .bp-fx-gal .bp-fx-gal-cur .bp-fx-gal-fill {
animation: bp-fx-gal-fill 3.2s linear both; /* durata del passo e ritardo (negativo = gia' trascorso) inline dal JS */
}
.bp-anim.bp-fx .bp-fx-gal.bp-fx-gal-paused .bp-fx-gal-fill {
animation-play-state: paused;
}
/* hover: la foto alternativa visibile zooma come la frontale (stesso scale e stessa transizione di brand_page.css) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.bp-anim.bp-fx .bp-fx-gal img.bp-fx-gal-img {
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.bp-anim.bp-fx .bp-shot:hover .bp-fx-gal img.bp-fx-gal-img,
.bp-anim.bp-fx .bp-ed-shot:hover .bp-fx-gal img.bp-fx-gal-img {
transform: scale(1.04);
}
}
/* ==========================================================================
12. IN EVIDENZA VETTORIALE (htmlFragments/brand_page_editoriale.php + js/brand_page_fx.js, sezione 12)
Impaginazione della grafica statica del markup (fondo, virgolette, freccia) e capolettera NON dipendono dalla classe
bp-fx su : senza JS o con reduced-motion bp-fx non c'e', ma il markup si' (il partial lo scrive con
brand_page_fx(), la stessa condizione che carica questo file), quindi deve restare impaginato e nello stato finale.
Sotto .bp-anim.bp-fx stanno solo gli stati di partenza, le animazioni e gli elementi creati dal JS.
- Fondo: svg.bp-fx-ed-deco assoluto su tutta la sezione (z-index 0, la .row sopra a z-index 1); la sezione prende
overflow:hidden (nessuno scroll orizzontale; nulla sporgeva: i margini negativi della row sono minori del padding
del contenitore, come nell'hero). Nessun viewBox: 1 unita' = 1 px. Il gruppo .bp-fx-ed-at e' il perno sul centro
del mosaico: senza JS sta al 74% / 50% (desktop) o al 50% / 72% (mobile) con un translate in percentuale
(transform-box: view-box = percentuali dell'svg); il JS lo sposta in px sul centro vero del mosaico e scala i
gruppi .bp-fx-ed-fit sulle misure del mosaico (disegno pensato per un mosaico di 480 x 400 px). Stella e anello
(.bp-fx-ed-pin) restano fuori dalla scala, quindi non si deformano: il JS sposta solo il loro punto.
Il blob sta in .bp-fx-ed-blob-par, il gruppo del parallax (transform scritto dal JS, solo desktop).
- Cucitura: il tratteggio usa gia' stroke-dasharray / dashoffset (6 8 che scorre, come nell'hero), quindi non si puo'
disegnare con il dashoffset. La linea e' mascherata (mask #bp-fx-ed-seam-mask) da un path pieno con lo stesso
tracciato, bianco e piu' spesso, che si disegna lui con pathLength=1 + dashoffset 1 -> 0: il tratteggio compare
lungo il percorso e intanto continua a scorrere. Senza bp-anim la mask e' piena e la cucitura e' intera.
- Trigger: sezione (cucitura, freccia), .bp-ed-head (virgolette) e mosaico (cornice, nastro, numeri) ricevono
bp-fx-ed-in dall'observer di js/brand_page_fx.js, anche se sono gia' nel viewport all'avvio. Classe propria e non
bp-fx-in: su un antenato dell'H2 farebbe partire in anticipo l'evidenziatore della sezione 4.
- Mosaico (elementi creati dal JS, figli assoluti: nessuna cella in piu' nella grid): svg.bp-fx-ed-frame (cornice
sfalsata, z-index -1 nel mosaico isolato = dietro le foto), svg.bp-fx-ed-tape-a / -b (nastro, z-index 3, da
768px), b.bp-fx-ed-num dentro ogni foto (z-index 3, sopra la gal della sezione 11). Selettori con specificita'
alta: lo stagger di brand_page.css (".bp-stagger > *") colpisce tutti i figli del mosaico.
========================================================================== */
@keyframes bp-fx-ed-breathe {
from { transform: scale(1) rotate(-4deg); }
to { transform: scale(1.06) rotate(4deg); }
}
/* tratteggio 6 8 = periodo 14: -280 e' 20 periodi, il loop non scatta */
@keyframes bp-fx-ed-stitch {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -280; }
}
@keyframes bp-fx-ed-twinkle {
0%, 100% { transform: scale(.7) rotate(0deg); opacity: .45; }
50% { transform: scale(1.08) rotate(20deg); opacity: 1; }
}
@keyframes bp-fx-ed-float {
from { transform: translateY(0); }
to { transform: translateY(-12px); }
}
@keyframes bp-fx-ed-pop {
0% { opacity: 0; transform: scale(0); }
70% { opacity: 1; transform: scale(1.15); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes bp-fx-ed-tape-a {
0% { opacity: 0; transform: rotate(-8deg) scale(1.3); }
60% { opacity: 1; transform: rotate(-8deg) scale(.94); }
80% { opacity: 1; transform: rotate(-8deg) scale(1.03); }
100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes bp-fx-ed-tape-b {
0% { opacity: 0; transform: rotate(10deg) scale(1.3); }
60% { opacity: 1; transform: rotate(10deg) scale(.94); }
80% { opacity: 1; transform: rotate(10deg) scale(1.03); }
100% { opacity: 1; transform: rotate(10deg) scale(1); }
}
/* ---------- fondo della sezione ---------- */
.bp-ed {
position: relative;
overflow: hidden;
}
.bp-ed > .row {
position: relative;
z-index: 1;
}
.bp-fx-ed-deco {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
display: block;
overflow: hidden;
pointer-events: none;
}
.bp-fx-ed-at {
transform-box: view-box;
transform: translate(74%, 50%);
}
.bp-fx-ed-breathe,
.bp-fx-ed-star,
.bp-fx-ed-ring,
.bp-fx-ed-dot {
transform-box: fill-box;
transform-origin: center;
}
/* mobile: il mosaico sta sotto il testo; solo blob e puntini, piu' tenui */
@media (max-width: 991.98px) {
.bp-fx-ed-deco { opacity: .6; }
.bp-fx-ed-at { transform: translate(50%, 72%); }
.bp-fx-ed-fit { transform: scale(.6); }
.bp-fx-ed-seam,
.bp-fx-ed-pin { display: none; }
}
.bp-anim.bp-fx .bp-fx-ed-breathe {
animation: bp-fx-ed-breathe 16s ease-in-out -4s infinite alternate;
}
.bp-anim.bp-fx .bp-fx-ed-blob-par {
will-change: transform;
}
.bp-anim.bp-fx .bp-fx-ed-stitch {
animation: bp-fx-ed-stitch 40s linear infinite;
}
.bp-anim.bp-fx .bp-fx-ed-seam-reveal {
stroke-dasharray: 1 2;
stroke-dashoffset: 1;
}
.bp-anim.bp-fx .bp-ed.bp-fx-ed-in .bp-fx-ed-seam-reveal {
animation: bp-fx-draw 2.6s cubic-bezier(.45, 0, .2, 1) .15s both;
}
.bp-anim.bp-fx .bp-fx-ed-star {
animation: bp-fx-ed-twinkle 3.2s ease-in-out infinite;
}
.bp-anim.bp-fx .bp-fx-ed-ring {
animation: bp-fx-spin 36s linear infinite;
}
.bp-anim.bp-fx .bp-fx-ed-dot {
animation: bp-fx-ed-float 7s ease-in-out infinite alternate;
}
.bp-anim.bp-fx .bp-fx-ed-dot:nth-child(2) { animation-duration: 6s; animation-delay: -2s; }
.bp-anim.bp-fx .bp-fx-ed-dot:nth-child(3) { animation-duration: 8.5s; animation-delay: -4s; }
.bp-anim.bp-fx .bp-fx-ed-dot:nth-child(4) { animation-duration: 6.5s; animation-delay: -1s; }
.bp-anim.bp-fx .bp-fx-ed-dot:nth-child(5) { animation-duration: 9s; animation-delay: -3s; }
.bp-anim.bp-fx .bp-fx-ed-dot:nth-child(6) { animation-duration: 7.5s; animation-delay: -5s; }
/* ---------- virgolette giganti dietro l'H2 ---------- */
.bp-ed .bp-ed-head {
position: relative;
isolation: isolate;
}
.bp-fx-ed-quote {
position: absolute;
top: -28px;
left: -18px;
z-index: -1;
display: block;
width: 132px;
height: 110px;
overflow: visible;
opacity: .12;
pointer-events: none;
}
@media (max-width: 991.98px) {
.bp-fx-ed-quote {
top: -18px;
left: -10px;
width: 84px;
height: 70px;
}
}
.bp-anim.bp-fx .bp-ed-head .bp-fx-ed-quote {
opacity: 0;
transform: translateY(-14px);
}
.bp-anim.bp-fx .bp-ed-head.bp-fx-ed-in .bp-fx-ed-quote {
opacity: .12;
transform: none;
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
/* ---------- freccia a mano fra le due colonne (solo lg+) ----------
Colonna testo col-lg-6 (0-50%) e mosaico col-lg-5 allineato a destra (58,33-100%): lo spazio vuoto e' 8,33% della
row + un gutter, centrato al 54,17%. Larghezza = quello spazio meno 32px (16 per lato), fra 60 e 96px. In verticale:
centro delle colonne = 50% della row + meta' gutter (la row sale di un gutter, le colonne scendono di un gutter).
Le regole di Bootstrap su ".row > *" (width, padding, margin-top) vanno azzerate: specificita' piu' alta. */
.bp-fx-ed-arrow {
display: none;
}
@media (min-width: 992px) {
.bp-ed > .row > .bp-fx-ed-arrow {
display: block;
position: absolute;
top: calc(50% + var(--bs-gutter-y, 3rem) / 2);
left: 54.1667%;
width: clamp(60px, calc(8.3333% + var(--bs-gutter-x, 3rem) - 32px), 96px);
max-width: none;
height: auto;
aspect-ratio: 3 / 2;
margin: 0;
padding: 0;
z-index: 0;
overflow: visible;
pointer-events: none;
transform: translate(-50%, -50%);
}
}
.bp-anim.bp-fx .bp-fx-ed-arrow path {
stroke-dasharray: 1 2;
stroke-dashoffset: 1;
}
.bp-anim.bp-fx .bp-ed.bp-fx-ed-in .bp-fx-ed-arrow-body {
animation: bp-fx-draw .9s cubic-bezier(.4, 0, .2, 1) .8s both;
}
.bp-anim.bp-fx .bp-ed.bp-fx-ed-in .bp-fx-ed-arrow-head {
animation: bp-fx-draw .3s ease-out 1.65s both;
}
/* ---------- capolettera sul primo paragrafo ---------- */
.bp-ed .bp-ed-text p:first-child::first-letter {
float: left;
margin: .06em .1em 0 0;
font-family: 'Mulish', sans-serif;
font-weight: 900;
font-size: 3.4em;
line-height: .8;
color: #950A46;
}
/* ---------- mosaico: cornice sfalsata, nastro adesivo, numeri (elementi creati dal JS) ---------- */
.bp-fx .bp-ed-mosaic {
position: relative;
isolation: isolate;
}
.bp-anim.bp-fx .bp-fx-ed-host {
position: relative;
}
/* cornice: dietro la foto grande, spostata di +14 / +14; il path parte dall'angolo in alto a destra e scende, cosi' si
disegnano subito i lati che si vedono (destro e basso) */
.bp-anim.bp-fx .bp-ed-mosaic > .bp-fx-ed-frame {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
margin: 0;
overflow: visible;
pointer-events: none;
opacity: 1;
transform: none;
transition: none;
}
.bp-anim.bp-fx .bp-ed-mosaic > .bp-fx-ed-frame path {
stroke-dasharray: 1 2;
stroke-dashoffset: 1;
}
.bp-anim.bp-fx .bp-ed-mosaic.bp-fx-ed-in > .bp-fx-ed-frame path {
animation: bp-fx-draw 1.2s cubic-bezier(.6, 0, .2, 1) .2s both;
}
/* nastro adesivo: sopra le foto, si "attacca" dopo l'ingresso del mosaico */
.bp-anim.bp-fx .bp-ed-mosaic > .bp-fx-ed-tape {
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: block;
width: 64px;
height: 20px;
margin: 0;
overflow: visible;
pointer-events: none;
opacity: 1;
transition: none;
-webkit-filter: drop-shadow(0 1px 1.5px rgba(29, 33, 36, .14));
filter: drop-shadow(0 1px 1.5px rgba(29, 33, 36, .14));
}
.bp-anim.bp-fx .bp-ed-mosaic > .bp-fx-ed-tape-a {
transform: rotate(-8deg);
}
.bp-anim.bp-fx .bp-ed-mosaic > .bp-fx-ed-tape-b {
transform: rotate(10deg);
}
.bp-anim.bp-fx .bp-ed-mosaic:not(.bp-fx-ed-in) > .bp-fx-ed-tape {
opacity: 0;
}
.bp-anim.bp-fx .bp-ed-mosaic.bp-fx-ed-in > .bp-fx-ed-tape-a {
animation: bp-fx-ed-tape-a .5s cubic-bezier(.2, .7, .3, 1) .65s both;
}
.bp-anim.bp-fx .bp-ed-mosaic.bp-fx-ed-in > .bp-fx-ed-tape-b {
animation: bp-fx-ed-tape-b .5s cubic-bezier(.2, .7, .3, 1) .8s both;
}
@media (max-width: 767.98px) {
.bp-anim.bp-fx .bp-ed-mosaic > .bp-fx-ed-tape {
display: none;
}
}
/* numeri delle foto: in alto a sinistra dell'area immagine (top/left scritti dal JS) */
.bp-anim.bp-fx .bp-ed-shot > b.bp-fx-ed-num {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin: 0;
padding: 0;
border-radius: 50%;
background: #1D2124;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
color: #FFFFFF;
font-family: 'Mulish', sans-serif;
font-size: 11px;
font-style: normal;
font-weight: 800;
line-height: 1;
letter-spacing: .02em;
pointer-events: none;
}
.bp-anim.bp-fx .bp-ed-mosaic:not(.bp-fx-ed-in) .bp-fx-ed-num {
opacity: 0;
}
.bp-anim.bp-fx .bp-ed-mosaic.bp-fx-ed-in .bp-fx-ed-num {
animation: bp-fx-ed-pop .45s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: calc(.45s + var(--bp-fx-n, 0) * .12s);
}
/* ==========================================================================
13. LOGO ANIMATO STYLIAFOE IN COME SI ACQUISTA (htmlFragments/brand_page_come_si_acquista.php)
Storia: dal 2026-09-30 il logo era nell'hero (grid .bp-fx-hero-grid accanto a kicker + titolo, ritardi d'ingresso
dell'hero spostati di .12 s); il 2026-10-01 l'utente l'ha bocciato li': tolto dall'hero, che e' tornato com'era
(kicker con track-in da 768px, intro .09 s, titolo .18 s / parole 180ms + 55ms per parola, lede .27 s, bottoni
.36 s: css/brand_page.css e sezione 1), e spostato qui, a destra dell'intestazione della sezione.
Markup (solo con fx): div.bp-fx-acq-head avvolge .bp-sec-head e ![]()
di
images/styliafoe_logo_animated.svg (sotto la piega: loading lazy). Il ciclo di 28 s (monogramma <-> parole) e' CSS
interno all'SVG, che con prefers-reduced-motion resta da se' sul monogramma fermo.
Impaginazione: flex, intestazione a sinistra e logo a destra, centrati in verticale, gap 32px. Il wrapper prende il
margine inferiore di 28px di .bp-sec-head (che qui va a 0): le spaziature verso i passi restano quelle di prima.
.bp-flow-wrap (linea dei passi e puntino della sezione 5) viene dopo il wrapper e non cambia.
Centraggio sul testo visibile: l'ultimo elemento dell'intestazione (titolo o kicker) ha 12px di margine inferiore
(css/brand_page.css), che sposterebbe il centro di 6px; il logo ha margine superiore -12px, cosi' i due margin-box
hanno la stessa coda e i centri visivi coincidono. Con il logo piu' alto del testo (il caso normale) il logo sale di
12px nel padding della sezione (56px, 42px sotto 992) e il suo bordo inferiore e' a filo del wrapper.
Misure (--bp-fx-logo): 170px da 1200px, 150px fra 992 e 1199, 130px fra 576 e 991, 110px sotto 576.
Sotto 576px il logo va SOPRA l'intestazione allineato a sinistra (column-reverse, gap 14px) per non schiacciare il
titolo; li' niente margine -12px (non c'e' nulla da centrare) e il titolo tiene il suo margine come prima.
Disegno: il bordo piu' esterno e' l'anello (r 231, tratto 20, centro 250 sul viewBox 500) = raggio 241 = 48,2% del
lato, 1,8% di vuoto trasparente per lato. Margine destro -1,8% del lato da 576px in su (anello a filo col bordo
destro del contenuto), margine sinistro -1,8% sotto 576px (a filo col bordo sinistro del testo). I margini negativi
(2-3px) cadono nel padding del contenitore (8% / 12% da 992px, 1rem sotto): nessuno scroll orizzontale.
Ingresso allo scroll (solo .bp-anim.bp-fx): js/brand_page_fx.js (sezione 13) passa il logo a reveal(), che aggiunge
bp-fx-in quando entra nel viewport (subito se c'e' gia'): fade + scale .85 -> 1 + rotate -8deg -> 0 in .8 s. Senza
JS (niente bp-anim) o se il JS FX non parte (bp-fx tolta dopo 3 s) il logo e' visibile e fermo; con reduced-motion
nessun ingresso (blocco in fondo al file).
========================================================================== */
.bp-fx-acq-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-bottom: 28px;
}
.bp-fx-acq-head > .bp-sec-head {
flex: 0 1 auto;
min-width: 0;
margin-bottom: 0;
}
.bp-fx-acq-logo {
--bp-fx-logo: 170px;
display: block;
flex: none;
width: var(--bp-fx-logo);
height: var(--bp-fx-logo);
max-width: none;
margin: -12px calc(var(--bp-fx-logo) * -.018) 0 0;
}
@media (max-width: 1199.98px) {
.bp-fx-acq-logo { --bp-fx-logo: 150px; }
}
@media (max-width: 991.98px) {
.bp-fx-acq-logo { --bp-fx-logo: 130px; }
}
@media (max-width: 575.98px) {
.bp-fx-acq-head {
flex-direction: column-reverse;
align-items: flex-start;
gap: 14px;
}
.bp-fx-acq-logo {
--bp-fx-logo: 110px;
margin: 0 0 0 calc(var(--bp-fx-logo) * -.018);
}
}
.bp-anim.bp-fx .bp-fx-acq-logo {
opacity: 0;
transform: scale(.85) rotate(-8deg);
}
.bp-anim.bp-fx .bp-fx-acq-logo.bp-fx-in {
opacity: 1;
transform: none;
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
/* ==========================================================================
14. FOTO DELL'HERO A POLAROID IN FILA (2026-10-01; prima il mosaico "a bacheca", poi per poco il mosaico inclinato
con cornici polaroid: l'utente ha confermato questa grafica, senza puntine e senza foto che si alternano)
Solo .bp-hero .bp-shots (classe bp-fx-pola messa dal partial con FX), non il mosaico "In evidenza".
Le foto diventano polaroid uguali in fila: cornice bianca con la striscia in basso piu' alta, leggermente oblique a
versi alterni, sovrapposte ai bordi, ombra morbida. Niente puntine (tolte su richiesta dell'utente, 2026-10-01) e
nell'hero niente foto che si alternano ($bp_hero_alterna = false nel partial): ogni cornice mostra solo la frontale.
- Layout (tutte le larghezze): .bp-fx-pola e' una fila flex centrata, NON piu' il mosaico di brand_page.css (grid,
gap, foto grande su due righe, img assolute delle piccole, flex 1 1 0, aspect-ratio 3:4): qui tutto viene
riportato con selettori di specificita' uguale o maggiore (questo file si carica dopo). Larghezze sul content box
di .bp-fx-pola (padding orizzontale 4%):
3 foto 38% ciascuna, -5% di margine fra loro (104%: sporge del 2% per lato nel padding, centrata);
2 foto 50% ciascuna, -6% (94%);
1 foto 70%, al massimo 320px, centrata.
Esempi con 3 foto (colonna col-lg-5): 992px -> polaroid di ~110px, 1200px -> ~140, 1399px -> ~165, 1400px
(padding dell'hero al 12%) -> ~145; sotto 992px la fila e' larga al massimo 620px (tablet: ~210px, prima 3 colonne
a tutta larghezza), 360px -> ~112px, 576px -> ~185px. Padding di .bp-fx-pola: in alto 16px (12px sotto 992; era
28 / 22 con le puntine) per la centrale alzata (-4% = ~6-9px) e gli angoli ruotati (~4-6px); in basso 26px (22)
perche' il timbro resta dov'era (sezione 8). Le sporgenze laterali restano nel gutter della colonna / nel padding
dell'hero (.bp-hero ha comunque overflow:hidden, nessuno scroll orizzontale).
- Cornice: la figure e' bianca senza bordo, con l'ombra; i margini del suo (6% sopra e ai lati, percentuali sulla
larghezza della figure, che e' un flex container in colonna: niente margini che collassano fuori) fanno i lati
sottili; la striscia in basso (22% della larghezza) e' la figcaption: padding verticale calc(11% - 7px) + riga di
14px, Mulish 700 11px #565C63 centrata, ellissi. Senza didascalia la striscia la da' il margine inferiore dell'.
- Area foto: 4:5 (piu' polaroid del 3:4, ma non rimpicciolisce il capo come il quadrato: le foto prodotto sono 3:4),
object-fit contain, padding 5%. Il fondo grigio #F4F4F4 si ottiene con fondo bianco + filter brightness(.957) sulla
img (e sulle foto alternative della sezione 11, se tornano nell'hero): il bianco delle foto prodotto diventa lo
stesso grigio del fondo, quindi l'area e' uniforme (un fondo grigio sotto una foto bianca farebbe due righe grigie
ai lati); il capo si scurisce del 4%, impercettibile. L' e' position:relative + overflow:hidden (la gal della
sezione 11 si posizionerebbe sugli offset* dell'img dentro l').
- Disposizione: transform della .bp-shot (translate + rotate + scale) guidato da variabili:
--bp-b-x / --bp-b-y / --bp-b-rot posto (y in % dell'altezza della polaroid: la centrale sale del 4%).
La scala e' fissa: scale(1) resta scritto perche' la lista di funzioni del transform sia la stessa del fotogramma
di partenza di bp-fx-b-drop (translate + rotate + scale: la caduta si interpola funzione per funzione, come prima).
Fino al 2026-10-06 c'erano anche --bp-b-sc / --bp-b-kr / --bp-b-ly (scala, moltiplicatore della rotazione e
sollevamento della foto in primo piano) e --bp-b-px / --bp-b-py / --bp-b-dr (scansamento, inline dal JS): tolte con
gli stati del mouse; a riposo valevano 1 / 1 / 0px e 0px / 0px / 0deg, quindi il transform a riposo e' lo stesso.
3 foto -4 / +1.5 / +3 gradi (centrale alzata, destra un po' piu' bassa), 2 foto -3 / +2.5, 1 foto -1.5; sotto
992px un po' meno. Il parallax 2b usa la proprieta' individuale translate (inline dal JS), applicata prima del
transform: i due si sommano. Nessun'altra regola mette transform sulle .bp-shot dell'hero.
- Livelli: centrale sopra (3), poi destra (2) e sinistra (1); timbro (sezione 8, in basso a destra a cavallo
dell'ultima polaroid) a 6, sopra le polaroid. Nessun cambio di livello al passaggio del mouse.
- Ingresso (solo .bp-anim.bp-fx, al load: e' above the fold): le polaroid "cadono" una dopo l'altra (bp-fx-b-drop:
da 24px piu' in alto, dritte, trasparenti, alla loro posizione; .6 s, ritardi .15 / .3 / .45 s, l'ultima finisce a
1,05 s), poi entra il timbro (1,1 s, sezione 8). Animazioni solo CSS, fill backwards: finite, vale il transform a
riposo. bp-clip-up / bp-img-settle di brand_page.css sono spenti sotto .bp-anim (non solo .bp-anim.bp-fx: se
top_v2.php togliesse bp-fx dopo 3 s non devono ripartire). Il JS non mette piu' nessuna classe sulle polaroid
(bp-fx-b-set, l'"appoggio" a fine caduta, serviva solo ad abilitare il mouse).
- Mouse: dal 2026-10-06 NESSUNA interazione, su richiesta dell'utente (le carte restano ferme al passaggio del
puntatore, pagina piu' leggera). Tolti gli stati bp-fx-b-top / bp-fx-b-away / bp-fx-b-was (la polaroid sotto il
mouse si raddrizzava, si sollevava e andava sopra tutto, le altre si scansavano), la transition su transform /
box-shadow che li accompagnava e tutto il codice della sezione 14 di js/brand_page_fx.js. Spento per le foto
dell'hero anche lo zoom interno dell'img al passaggio (scale 1.04 di brand_page.css e, se tornano, della sezione
11): regola in fondo a questa sezione. Le foto restano link alla scheda prodotto: il cursore e' quello del link
(nessuna regola cursor qui).
- Senza JS / reduced-motion: composizione statica completa; nessuna transizione.
========================================================================== */
@keyframes bp-fx-b-drop {
from {
opacity: 0;
transform: translate(0px, -24px) rotate(0deg) scale(1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), 0 22px 34px rgba(0, 0, 0, .10);
}
}
/* ---------- fila ---------- */
.bp-hero .bp-fx-pola {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
gap: 0;
padding: 16px 4% 26px;
}
.bp-hero .bp-fx-pola > .bp-shot {
--bp-b-x: 0px;
--bp-b-y: 0%;
--bp-b-rot: 0deg;
position: relative;
z-index: 1;
flex: 0 0 38%;
width: 38%;
min-width: 0;
min-height: 0;
margin: 0;
display: flex;
flex-direction: column;
overflow: visible;
background: #FFFFFF;
border: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 8px 18px rgba(0, 0, 0, .14);
transform: translate(var(--bp-b-x), var(--bp-b-y)) rotate(var(--bp-b-rot)) scale(1);
}
.bp-hero .bp-fx-pola > .bp-shot + .bp-shot {
margin-left: -5%;
}
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot {
flex-basis: 50%;
width: 50%;
}
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot + .bp-shot {
margin-left: -6%;
}
.bp-hero .bp-fx-pola.bp-shots-1 > .bp-shot {
flex-basis: 70%;
width: 70%;
max-width: 320px;
}
/* ---------- cornice: lati sottili (margini dell'), area foto 4:5 grigia ---------- */
.bp-hero .bp-fx-pola > .bp-shot > a {
position: relative;
display: block;
flex: 0 0 auto;
min-height: 0;
margin: 6% 6% 0;
overflow: hidden;
}
.bp-hero .bp-fx-pola > .bp-shot > a:last-child {
margin-bottom: 22%;
}
.bp-hero .bp-fx-pola > .bp-shot > a > img {
position: static;
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 4 / 5;
object-fit: contain;
padding: 5%;
background: #FFFFFF;
-webkit-filter: brightness(.957);
filter: brightness(.957);
}
/* foto alternative della sezione 11: oggi non ci sono nell'hero ($bp_hero_alterna nel partial), pronta se tornano */
.bp-anim.bp-fx .bp-hero .bp-fx-pola .bp-fx-gal img.bp-fx-gal-img {
background: #FFFFFF;
-webkit-filter: brightness(.957);
filter: brightness(.957);
}
/* ---------- striscia in basso con la didascalia ---------- */
.bp-hero .bp-fx-pola > .bp-shot > figcaption {
display: block;
flex: 0 0 auto;
margin: 0;
padding: calc(11% - 7px) 6%;
border: 0;
background: #FFFFFF;
font-family: 'Mulish', sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 14px;
letter-spacing: .01em;
text-transform: none;
text-align: center;
color: #565C63;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ultima polaroid col timbro (il timbro e' l'ultimo figlio di .bp-fx-pola): il testo non finisce sotto il timbro */
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(3):nth-last-child(2) > figcaption,
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot:nth-child(2):nth-last-child(2) > figcaption {
padding-right: calc(6% + 30px);
}
/* ---------- disposizione: desktop (e base) ---------- */
.bp-hero .bp-fx-pola.bp-shots-1 > .bp-shot {
--bp-b-rot: -1.5deg;
}
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot:nth-child(1) {
--bp-b-rot: -3deg;
z-index: 1;
}
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot:nth-child(2) {
--bp-b-y: 3%;
--bp-b-rot: 2.5deg;
z-index: 2;
}
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(1) {
--bp-b-rot: -4deg;
z-index: 1;
}
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(2) {
--bp-b-y: -4%;
--bp-b-rot: 1.5deg;
z-index: 3;
}
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(3) {
--bp-b-y: 2%;
--bp-b-rot: 3deg;
z-index: 2;
}
/* ---------- sotto 992px: fila al massimo 620px, rotazioni piu' lievi ---------- */
@media (max-width: 991.98px) {
.bp-hero .bp-fx-pola {
max-width: 620px;
margin-left: auto;
margin-right: auto;
padding: 12px 4% 22px;
}
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(3):nth-last-child(2) > figcaption,
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot:nth-child(2):nth-last-child(2) > figcaption {
padding-right: calc(6% + 32px);
}
.bp-hero .bp-fx-pola.bp-shots-1 > .bp-shot {
--bp-b-rot: -1deg;
}
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot:nth-child(1) {
--bp-b-rot: -2.2deg;
}
.bp-hero .bp-fx-pola.bp-shots-2 > .bp-shot:nth-child(2) {
--bp-b-y: 2%;
--bp-b-rot: 1.8deg;
}
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(1) {
--bp-b-rot: -3deg;
}
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(2) {
--bp-b-y: -3%;
--bp-b-rot: 1deg;
}
.bp-hero .bp-fx-pola.bp-shots-3 > .bp-shot:nth-child(3) {
--bp-b-y: 1.5%;
--bp-b-rot: 2.2deg;
}
}
@media (max-width: 575.98px) {
.bp-hero .bp-fx-pola > .bp-shot > figcaption {
font-size: 10px;
}
}
/* ---------- ingresso: le polaroid cadono una dopo l'altra ----------
Specificita' piu' alta di ".bp-anim .bp-hero .bp-shot(:nth-child(n))( img)" di brand_page.css (bp-clip-up e
bp-img-settle, spenti anche con il solo bp-anim) */
.bp-anim .bp-hero .bp-fx-pola > .bp-shot,
.bp-anim .bp-hero .bp-fx-pola > .bp-shot > a > img {
animation: none;
}
.bp-anim.bp-fx .bp-hero .bp-fx-pola > .bp-shot {
animation: bp-fx-b-drop .6s cubic-bezier(.25, .75, .3, 1) .15s backwards;
}
.bp-anim.bp-fx .bp-hero .bp-fx-pola > .bp-shot:nth-child(2) {
animation-delay: .3s;
}
.bp-anim.bp-fx .bp-hero .bp-fx-pola > .bp-shot:nth-child(3) {
animation-delay: .45s;
}
/* ---------- mouse: carte ferme (2026-10-06) ----------
Nessuno stato di hover sulle polaroid: niente spostamenti, rotazioni, scale, ombre o livelli diversi. Resta da
spegnere lo zoom interno della foto che arriva da fuori: ".bp-shot:hover img { transform: scale(1.04) }" di
css/brand_page.css (media hover: hover senza reduced-motion; prima lo azzerava lo stato bp-fx-b-top) e, se nell'hero
tornano le foto alternative, ".bp-anim.bp-fx .bp-shot:hover .bp-fx-gal img.bp-fx-gal-img" della sezione 11.
Solo le foto dell'hero: il mosaico "In evidenza" (.bp-ed-shot) tiene il suo zoom. */
.bp-hero .bp-shots .bp-shot:hover img,
.bp-anim.bp-fx .bp-hero .bp-shots .bp-shot:hover .bp-fx-gal img.bp-fx-gal-img {
transform: none;
}
/* ==========================================================================
15. SFONDI VETTORIALI TEMA LUSSO (2026-10-01; htmlFragments/brand_page_hero.php e brand_page_editoriale.php)
Gli sfondi animati dei due blocchi con le foto articolo rifatti "da maison": illustrazioni monolinea sottili (1-1,1
px, magenta a opacita' .2 circa, dettagli in rosa #F2A8C4), niente forme piene. I vecchi (cucitura, anelli, blob,
puntini) restano nel markup e nei CSS/JS di prima: li sceglie brand_page_deco() (functions/brand_page_functions.php,
costante BRAND_PAGE_DECO = 'lusso' | 'v1', forzabile con ?bp_deco=v1 / ?bp_deco=lusso; con fx spento sempre 'v1').
Il nuovo svg ha in piu' la classe bp-deco-lusso: tutte le regole qui sotto partono da li', quelle vecchie non lo
toccano (classi diverse) tranne i contenitori comuni (vedi sotto). Classi e id con prefisso bp-dl-.
- Hero (svg.bp-hero-deco.bp-deco-lusso): impaginazione, z-index, overflow e opacita' .6 sotto 992px vengono da
.bp-hero-deco di css/brand_page.css, come per il vecchio. Niente viewBox: 1 unita' = 1 px, tratti sempre di 1 px
a ogni larghezza (il vecchio usava viewBox + slice e ingrandiva). Ogni pezzo e' un svg annidato .bp-dl-pos con
x / y in percentuale dell'hero (overflow visibile) e il disegno attorno al suo punto:
metro da sarta x 80% y 100%: nastro a due linee (bordi a +-9 px dall'asse) lungo 2300 px verso sinistra, con
la punta metallica sotto le polaroid; tacche ogni 8 px (lunghe ogni 5) e numeri ogni 10 tacche
(Mulish 6,5 px). Il nastro si srotola dalla punta verso sinistra, le tacche compaiono dopo,
scoperte dalla mask #bp-dl-hero-ticks (path pieno lungo l'asse, largo 44, che si disegna);
gruccia x 66% y 0: appesa in alto sopra la prima polaroid, con barra e cartellino; oscilla di +-2 gradi
attorno al gancio (.bp-dl-sway);
ago con filo x 85% y 0: ago obliquo sopra le polaroid, filo rosa dalla cruna con un'asola e un nodino che
scende nel margine destro;
forbici da sarta x 4% y 50%: nel margine sinistro, aperte, anello tondo e anello lungo;
bottoni x 96% y 52% e x 55% y 70% (da 992px), x 86% y 4% (solo sotto 992px, .bp-dl-mob): cerchio,
bordino, 4 fori e filo rosa a croce.
Parallax col mouse: i gruppi data-bp-depth dentro ogni pezzo, mossi da js/brand_page.js come i vecchi. Sotto
992px restano il metro (spostato giu' di 58 px, .bp-dl-metro-m: corre nel margine sotto le polaroid, che li' sono
in fondo all'hero) e un bottone. Ingresso al load sotto .bp-anim (above the fold, nessun JS FX necessario).
- In evidenza (svg.bp-fx-ed-deco.bp-deco-lusso): riusa contenitore e agganci della sezione 12 (svg assoluto sulla
sezione, .bp-fx-ed-at perno sul centro del mosaico, .bp-fx-ed-blob-par col parallax, .bp-fx-ed-pin oggetti
spostati dal JS col mosaico senza deformarli, ingresso bp-fx-ed-in sulla sezione, opacita' .6 sotto 992px).
Carta da parati: rect .bp-dl-ed-motif 920 x 760 centrato sul mosaico, pattern #bp-dl-ed-motif (losanghe 36 x 52
con stelline al centro e punti agli incroci) sfumato ai bordi dalla mask radiale #bp-dl-ed-fade, opacita' .07,
in dissolvenza all'ingresso. Oggetti (pin, attorno al mosaico 480 x 400 di riferimento, in parte sotto le foto):
borsa a mano in alto a sinistra, occhiali da sole sopra a destra, flacone di profumo in basso a sinistra,
decollete' in basso a destra. Sotto 992px solo carta da parati, borsa e decollete' (.bp-dl-m, scala .8).
- Animazioni: .bp-dl-draw (pathLength 1) si disegnano con bp-fx-draw (dashoffset 1 -> 0, ritardo in --bp-dl-d nel
markup, .bp-dl-long piu' lente), .bp-dl-fade compaiono in dissolvenza, poi solo micro-movimenti: .bp-dl-float
(+-5 px, +-1,5 gradi, durata --bp-dl-f 9-14 s, sfasamento --bp-dl-fd) e .bp-dl-sway. Solo transform / opacity /
stroke-dashoffset. Senza .bp-anim (o, nell'editoriale, senza .bp-anim.bp-fx) tutto e' statico e gia' disegnato:
lo stato di partenza esiste solo sotto quelle classi. Reduced-motion: in fondo al file.
- I transform animati stanno su gruppi senza attributo transform (il CSS lo sostituirebbe): posizioni e rotazioni
fisse negli attributi dei gruppi esterni, parallax (inline dal JS) sui gruppi data-bp-depth / pin, animazioni sui
gruppi interni .bp-dl-float / .bp-dl-sway / .bp-dl-sz.
========================================================================== */
@keyframes bp-dl-in {
from { opacity: 0; }
}
@keyframes bp-dl-float {
from { transform: translate(0, -5px) rotate(-1.5deg); }
to { transform: translate(0, 5px) rotate(1.5deg); }
}
@keyframes bp-dl-sway {
from { transform: rotate(-2deg); }
to { transform: rotate(2deg); }
}
/* ---------- comuni ---------- */
.bp-deco-lusso .bp-dl-pos {
overflow: visible;
}
.bp-deco-lusso .bp-dl-float,
.bp-deco-lusso .bp-dl-sz {
transform-box: fill-box;
transform-origin: 50% 50%;
}
.bp-deco-lusso .bp-dl-sway {
transform-box: fill-box;
transform-origin: 50% 0;
}
/* ---------- hero: tema sartoria ---------- */
.bp-hero-deco.bp-deco-lusso .bp-dl-mob {
display: none;
}
@media (max-width: 991.98px) {
.bp-hero-deco.bp-deco-lusso .bp-dl-desk {
display: none;
}
.bp-hero-deco.bp-deco-lusso .bp-dl-mob {
display: inline;
}
.bp-hero-deco.bp-deco-lusso .bp-dl-metro-m {
transform: translate(0, 58px);
}
}
.bp-anim .bp-hero-deco.bp-deco-lusso .bp-dl-draw {
stroke-dasharray: 1 2;
animation: bp-fx-draw 1.3s cubic-bezier(.45, 0, .2, 1) both;
animation-delay: var(--bp-dl-d, 0s);
}
.bp-anim .bp-hero-deco.bp-deco-lusso .bp-dl-long {
animation-duration: 2.4s;
animation-timing-function: cubic-bezier(.3, .45, .25, 1);
}
/* tacche e numeri del metro: compaiono dalla punta verso sinistra, dopo il nastro */
.bp-anim .bp-hero-deco.bp-deco-lusso .bp-dl-reveal {
stroke-dasharray: 1 2;
animation: bp-fx-draw 2.6s cubic-bezier(.3, .45, .25, 1) .9s both;
}
.bp-anim .bp-hero-deco.bp-deco-lusso .bp-dl-fade {
animation: bp-dl-in .8s ease both;
animation-delay: var(--bp-dl-d, 0s);
}
.bp-anim .bp-hero-deco.bp-deco-lusso .bp-dl-float {
animation: bp-dl-float var(--bp-dl-f, 11s) ease-in-out var(--bp-dl-fd, 0s) infinite alternate;
}
.bp-anim .bp-hero-deco.bp-deco-lusso .bp-dl-sway {
animation: bp-dl-sway 12s ease-in-out -3s infinite alternate;
}
/* ---------- In evidenza: tema accessori ---------- */
.bp-fx-ed-deco.bp-deco-lusso .bp-dl-ed-motif {
opacity: .07;
}
@media (max-width: 991.98px) {
/* la sezione 12 nasconde tutti i pin sotto 992px: qui restano borsa e decollete' */
.bp-fx-ed-deco.bp-deco-lusso .bp-fx-ed-pin.bp-dl-m {
display: inline;
}
.bp-fx-ed-deco.bp-deco-lusso .bp-dl-sz {
transform: scale(.8);
}
}
/* stato di partenza (prima che la sezione riceva bp-fx-ed-in) */
.bp-anim.bp-fx .bp-fx-ed-deco.bp-deco-lusso .bp-dl-draw {
stroke-dasharray: 1 2;
stroke-dashoffset: 1;
}
.bp-anim.bp-fx .bp-fx-ed-deco.bp-deco-lusso .bp-dl-fade,
.bp-anim.bp-fx .bp-fx-ed-deco.bp-deco-lusso .bp-dl-ed-motif {
opacity: 0;
}
/* ingresso: carta da parati in dissolvenza, oggetti che si disegnano in sequenza (ritardi nel markup) */
.bp-anim.bp-fx .bp-ed.bp-fx-ed-in .bp-fx-ed-deco.bp-deco-lusso .bp-dl-ed-motif {
opacity: .07;
transition: opacity 1.4s ease .1s;
}
.bp-anim.bp-fx .bp-ed.bp-fx-ed-in .bp-fx-ed-deco.bp-deco-lusso .bp-dl-draw {
animation: bp-fx-draw 1.2s cubic-bezier(.45, 0, .2, 1) both;
animation-delay: var(--bp-dl-d, 0s);
}
.bp-anim.bp-fx .bp-ed.bp-fx-ed-in .bp-fx-ed-deco.bp-deco-lusso .bp-dl-fade {
opacity: 1;
animation: bp-dl-in .8s ease both;
animation-delay: var(--bp-dl-d, 0s);
}
.bp-anim.bp-fx .bp-fx-ed-deco.bp-deco-lusso .bp-dl-float {
animation: bp-dl-float var(--bp-dl-f, 12s) ease-in-out var(--bp-dl-fd, 0s) infinite alternate;
}
/* ==========================================================================
16. SFONDI VETTORIALI VERSIONE FLAT (2026-10-01; htmlFragments/brand_page_hero.php e brand_page_editoriale.php)
Terza versione degli sfondi dei due blocchi con le foto articolo, default (BRAND_PAGE_DECO = 'flat', forzabile con
?bp_deco=flat; le altre con ?bp_deco=lusso / ?bp_deco=v1, con fx spento sempre 'v1'). Illustrazioni FLAT: forme
piene senza contorni, un secondo tono piatto per volumi e pieghe (sovrapposizioni #950A46 o #1D2124 a opacita'
bassa), piccoli dettagli in un terzo tono; palette #FBEEF3, #F2A8C4, #950A46 (solo accenti: suola, fibbia, nastri,
chiusure), #E9E4E0, #D9D2CC, #F6EFE6, #1D2124 (pochissimi dettagli); ogni oggetto in un gruppo a opacita' .72.
Lo svg ha la classe bp-deco-flat: tutte le regole partono da li' (nessun effetto sulle altre due versioni), i
contenitori sono quelli comuni (.bp-hero-deco di css/brand_page.css, .bp-fx-ed-deco della sezione 12: posizione,
z-index, overflow, opacita' .6 sotto 992px). Classi e id con prefisso bp-df-.
- Hero (svg.bp-hero-deco.bp-deco-flat): sneaker, borsa, abito + cucitura e anelli v1 (la decollete' nel margine
sinistro e' stata tolta su richiesta dell'utente, 2026-10-01).
righe v1 "lasciando le righe" = le linee e i cerchi della v1: svg interno svg.bp-df-v1 (x/y 0, 100% x
100%, viewBox 0 0 1440 600, xMidYMid slice come il vecchio svg) con dentro, copiati tali e quali,
g.bp-deco-seam (filo sottile + tratteggio 6 8 che scorre), g.bp-deco-rings (3 anelli
pathLength 1 che si disegnano) e g.bp-deco-dots (5 puntini che fluttuano), stessi data-bp-depth
12 / 20 / 30. Nessuna regola qui: valgono quelle di css/brand_page.css (".bp-anim .bp-hero-deco
.bp-stitch / .bp-ring / .bp-ring-2 / -3 / .bp-dot:nth-child(n)", ".bp-hero-deco .bp-dot",
sotto 992px ".bp-hero-deco .bp-deco-rings { display: none }", reduced-motion ".bp-hero-deco *"),
tutte con selettori discendenti; i :nth-child contano i 5 circle di g.bp-deco-dots come nella v1.
Oggetti flat: niente viewBox (1 unita' = 1 px, non si deformano), svg annidati .bp-df-pos ancorati in percentuale.
borsa top-handle strutturata (tipo Kelly) grigio caldo, patta chiara, cinghie, chiusura magenta col
girello crema, piedini; disegno in #bp-df-bag, usato con