/* ═══ SPLASH SCREEN ═══ */
.splash {
position: fixed;
inset: 0;
z-index: 9999;
background: #000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.35s ease;
cursor: pointer; /* hint: double-click/tap to skip (app.js initSplash) */
touch-action: manipulation; /* no 300ms double-tap-zoom delay on mobile */
}
/* Video can absorb taps on some mobile browsers — forward them to .splash */
.splash video { pointer-events: none; }
.splash.fade-out {
opacity: 0;
pointer-events: none;
}
.splash video {
width: 49%; /* -30% vs v3.11.19 (was 70%) — laptop feedback Samuel */
height: auto;
}
@media (max-width: 767px) {
.splash video { width: 100%; transform: scale(1.4) translateY(-8%); }
}
/* ═══ HOME — Layout 2-3-2 sfalsato ═══ */
.home {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100dvh - var(--header-height));
overflow: hidden;
padding: var(--space-lg);
gap: var(--space-xl);
}
/* Claim */
.home-claim {
font-family: 'Priestacy', var(--font-body);
font-size: clamp(1.3rem, 4vw, 2rem);
font-weight: 400;
letter-spacing: 0.15em;
text-transform: none;
color: var(--color-text-secondary);
text-align: center;
}
/* Griglia pallini — simmetria orizzontale via flex center (dots sfalsati come honeycomb),
vertical gap fisso per evitare che le righe si tocchino. Non è più honeycomb puro
(centro-centro diagonale != orizzontale), ma visivamente molto simile e più compatto. */
.petal-grid {
--petal-size: 133px;
--petal-h-gap: 17px;
--petal-v-gap: 5px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--petal-v-gap);
}
.petal-row {
display: flex;
gap: var(--petal-h-gap);
justify-content: center;
}
.flower-petal {
width: var(--petal-size);
height: var(--petal-size);
border-radius: 50%;
background: var(--color-primary);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.flower-petal:hover {
transform: scale(1.08);
box-shadow: var(--shadow-lg);
}
.flower-petal span {
font-size: 0.9375rem;
font-weight: 700;
text-align: center;
line-height: 1.2;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0 8px;
}
/* Footer home — posizionato in basso senza spostare i pallini */
.home-footer {
position: absolute;
bottom: var(--space-2xl);
left: 0;
right: 0;
text-align: center;
}
@media (max-width: 767px) {
.petal-grid {
/* Target 140px dots (~+30% su 108) con proporzioni identiche al desktop
(h-gap/size = 17/133 ≈ 0.128, v-gap/size = 5/133 ≈ 0.038).
Row width = 3*size + 2*h-gap = 3.256*size. Fallback: scala verso il
basso su viewport stretti (iPhone 375/390) per non oltrepassare
.home overflow:hidden. 48px = padding --space-lg sui due lati. */
--petal-size: min(140px, calc((100vw - 48px) / 3.256));
--petal-h-gap: calc(var(--petal-size) * 0.128);
--petal-v-gap: calc(var(--petal-size) * 0.038);
margin-top: -8rem;
}
.flower-petal span { font-size: calc(var(--petal-size) * 0.11); }
}
/* ═══ GALLERY — Lightbox ═══ */
.lightbox {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--duration) var(--ease);
}
.lightbox.active { opacity: 1; }
.lightbox img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: var(--radius-sm);
}
/* Lightbox zoomabile per flipbook — pinch-to-zoom touch, scroll desktop */
.lightbox.zoomable {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.lightbox.zoomable img {
max-width: none;
max-height: none;
width: 90vw;
cursor: zoom-in;
transition: width 0.3s var(--ease);
}
.lightbox.zoomable img.zoomed {
width: 180vw;
cursor: zoom-out;
}
/* Hotspot pill nel lightbox flipbook */
.lightbox-hotspot-pill {
position: fixed;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: rgba(255, 255, 255, 0.95);
color: var(--color-primary);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--radius-full);
text-decoration: none;
z-index: 301;
backdrop-filter: blur(8px);
transition: background 0.2s, transform 0.2s;
}
.lightbox-hotspot-pill:hover {
background: #fff;
transform: translateX(-50%) scale(1.05);
}
.lightbox-close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.1);
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.1);
}
.lightbox-prev { left: var(--space-md); }
.lightbox-next { right: var(--space-md); }
/* Gallery grid — tipo immagine vs video */
.gallery-item { position: relative; }
/* Thumb slot: shimmer skeleton while the image loads, image fades in on load.
Reserves the 1:1 slot so layout is stable regardless of load order. */
.card-thumb-slot {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--radius-md) var(--radius-md) 0 0;
background: linear-gradient(100deg,
var(--color-bg-tertiary) 20%,
var(--color-bg-secondary) 50%,
var(--color-bg-tertiary) 80%);
background-size: 200% 100%;
animation: card-thumb-shimmer 1.4s infinite linear;
}
.card-thumb-slot img.card-thumb {
opacity: 0;
transition: opacity 0.35s ease-out;
}
.card-thumb-slot img.card-thumb.is-loaded { opacity: 1; }
/* Stop the shimmer once the image is in (modern browsers with :has()). */
.card-thumb-slot:has(img.is-loaded) {
animation: none;
background: transparent;
}
@keyframes card-thumb-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.card-thumb-slot { animation: none; }
.card-thumb-slot img.card-thumb { transition: none; }
}
.gallery-item.is-video::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1 / 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
border-radius: var(--radius-md) var(--radius-md) 0 0;
pointer-events: none;
z-index: 1;
}
.gallery-item.is-video::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1 / 1;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
transition: transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.gallery-item.is-video:hover::after {
transform: scale(1.06);
}
}
/* ═══ TAVOLE — Griglia collezioni (landing) ═══ */
.collections-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
padding: var(--space-md);
max-width: var(--max-width);
margin: 0 auto;
}
.collection-card {
background: var(--color-bg-card);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.collection-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.collection-card-thumb {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
background: #fff;
display: block;
}
.collection-card.np-card-wide {
grid-column: 1 / -1;
}
.collection-card.np-card-wide .collection-card-thumb {
aspect-ratio: 16/7;
}
.collection-card-body {
padding: var(--space-sm) var(--space-md);
}
.collection-card-title {
font-weight: 600;
font-size: 0.9375rem;
}
.collection-card-count {
font-size: 0.8125rem;
color: var(--color-text-secondary);
margin-top: 2px;
}
/* ═══ TAVOLE — Aree (editorial mosaic, v3.10.2) ═══
Direzione: pagina da rivista di design — tipografia-guida,
asimmetria per aspect ratio nativo delle immagini (non arbitraria),
chrome fuori dall'immagine (didascalia), hover/scroll subtle.
Nessuna card è "promossa a hero" per posizione: la variazione
di forma è data da `shape` nel dataset, derivato dagli originali. */
.areas-intro {
max-width: 1800px;
margin: 0 auto;
padding: var(--space-md) var(--space-md) var(--space-sm);
}
@media (min-width: 640px) {
.areas-intro { padding: var(--space-lg) var(--space-lg) var(--space-md); }
}
@media (min-width: 900px) {
.areas-intro { padding: var(--space-2xl) var(--space-xl) var(--space-lg); }
}
.areas-intro-eyebrow {
font-family: var(--font-display);
font-weight: 400;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: var(--space-sm);
}
.areas-intro-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem, 5.5vw, 4.25rem);
line-height: 0.98;
letter-spacing: -0.015em;
margin: 0 0 var(--space-md);
color: var(--color-text);
}
.areas-intro-lead {
font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
line-height: 1.55;
color: var(--color-text-secondary);
max-width: 52ch;
margin: 0;
}
/* ── Mosaic grid ──
Mobile: singola colonna, aspect uniforme per scroll pulito.
Tablet portrait: 2 colonne, ultima card span 2 (niente orfana).
Desktop 900+: 3 colonne, portraits span 2 rows.
Desktop 1400+: 4 colonne, portraits span 2 rows. */
.areas-grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: dense;
gap: var(--space-lg) var(--space-md);
padding: var(--space-sm) var(--space-md) var(--space-xl);
max-width: 1800px;
margin: 0 auto;
width: 100%;
}
/* Mobile: forza tutti i frame a landscape uniforme.
Le portrait (Icons/Contract/Darwin) restano portrait solo da tablet in su,
dove il grid ha lo spazio per gestire il rapporto verticale senza scroll
lunghissimo. */
@media (max-width: 639px) {
.area-card-frame,
.area-card--portrait .area-card-frame,
.area-card--wide .area-card-frame,
.area-card--landscape .area-card-frame {
aspect-ratio: 3 / 2;
}
.area-card-title { font-size: 1.375rem; }
}
/* ── Card ── */
.area-card {
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
background: transparent;
box-shadow: none;
border-radius: 0;
outline: none;
/* reveal state */
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.9s var(--ease),
transform 0.9s var(--ease);
transition-delay: var(--reveal-delay, 0ms);
-webkit-tap-highlight-color: transparent;
}
.area-card.is-revealed {
opacity: 1;
transform: translateY(0);
}
.area-card:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 6px;
}
/* ── Image frame ──
The image holds the cell's height; portraits get a taller aspect,
wide cells get a wider aspect. Radius small, as a magazine plate. */
.area-card-frame {
position: relative;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--color-bg-tertiary);
aspect-ratio: 3 / 2;
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--glass-edge);
transition: box-shadow var(--duration) var(--ease);
width: 100%;
transition: border-radius var(--duration) var(--ease);
}
.area-card--portrait .area-card-frame { aspect-ratio: 3 / 4; }
.area-card--wide .area-card-frame { aspect-ratio: 16 / 10; }
.area-card--landscape .area-card-frame { aspect-ratio: 3 / 2; }
.area-card-hero {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.001); /* hint compositor */
transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.area-card:hover .area-card-hero,
.area-card:focus-visible .area-card-hero {
transform: scale(1.04);
}
}
/* Index numeral — small, confident, top-left plate */
.area-card-index {
position: absolute;
top: var(--space-md);
left: var(--space-md);
font-family: var(--font-display);
font-weight: 300;
font-size: 0.75rem;
letter-spacing: 0.22em;
color: #fff;
mix-blend-mode: difference; /* legibile su qualsiasi foto */
opacity: 0.92;
transition: opacity var(--duration) var(--ease),
transform 0.6s var(--ease);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.area-card:hover .area-card-index {
opacity: 0.55;
transform: translateY(-2px);
}
}
/* ── Caption (outside the image) ── */
.area-card-caption {
padding: var(--space-md) 0 0;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 44px; /* touch surface */
}
.area-card-meta {
display: flex;
align-items: baseline;
gap: var(--space-md);
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
.area-card-kicker {
position: relative;
padding-left: 18px;
}
.area-card-kicker::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 10px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
.area-card-count { opacity: 0.8; }
.area-card-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.25rem, 2.4vw, 1.875rem);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.05;
color: var(--color-text);
margin: 2px 0 0;
transition: transform 0.5s var(--ease), color var(--duration) var(--ease);
}
.area-card--portrait .area-card-title,
.area-card--wide .area-card-title {
font-size: clamp(1.375rem, 2.8vw, 2.125rem);
}
/* Accent rule — grows from 0 to 48px on hover. Brand red, thin. */
.area-card-rule {
display: block;
width: 0;
height: 1px;
margin-top: 10px;
background: var(--color-primary);
transition: width 0.5s var(--ease);
}
.area-card:focus-visible .area-card-rule {
width: 48px;
}
@media (hover: hover) and (pointer: fine) {
.area-card:hover .area-card-rule {
width: 48px;
}
.area-card:hover .area-card-title {
transform: translateY(-2px);
}
.area-card:hover .area-card-frame {
box-shadow: var(--shadow-md), inset 0 0 0 1px var(--glass-edge);
}
}
/* ── Breakpoints ── */
/* Tablet portrait — 2-col, last card spans full width to avoid lone orphan */
@media (min-width: 640px) and (max-width: 899px) {
.areas-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xl) var(--space-lg);
padding: var(--space-md) var(--space-lg) var(--space-2xl);
}
.areas-grid .area-card:last-child {
grid-column: span 2;
}
.areas-grid .area-card:last-child .area-card-frame {
aspect-ratio: 21 / 9;
}
}
/* Tablet landscape / small desktop */
@media (min-width: 900px) and (max-width: 1399px) {
.areas-intro {
padding: var(--space-2xl) var(--space-xl) var(--space-lg);
}
.areas-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2xl) var(--space-xl);
padding: var(--space-lg) var(--space-xl) var(--space-2xl);
}
/* portrait cells span 2 rows — tall column echoes moodboard */
.area-card--portrait { grid-row: span 2; }
.area-card--portrait .area-card-frame { aspect-ratio: 3 / 4; height: 100%; }
/* wide cells keep 1 col here (3-col grid doesn't divide cleanly into 2) */
.area-card--wide { grid-column: auto; }
.area-card--wide .area-card-frame { aspect-ratio: 16 / 10; }
/* Finale: last card spans full row at 3-col with cinematic 21:9 */
.areas-grid .area-card:last-child {
grid-column: span 3;
}
.areas-grid .area-card:last-child .area-card-frame {
aspect-ratio: 21 / 9;
}
}
/* Desktop wide — explicit 4×5 mosaic matching the brief sketch */
@media (min-width: 1400px) {
.areas-intro {
padding: var(--space-2xl) var(--space-xl) var(--space-lg);
}
.areas-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(5, auto);
grid-auto-flow: row;
gap: var(--space-lg) var(--space-xl);
padding: var(--space-lg) var(--space-xl) var(--space-2xl);
}
/* Rows 1-3 cols 1-3: Collier feature. Explicit 16:9 aspect on the frame
makes it ~15% shorter than the cell-fill height (3:2 natural). Dead
space below the frame is absorbed by flex-column default alignment
(frame top, caption right below). Per Samuel's 20 Apr review. */
.areas-grid .area-card[data-area-slug="collier"] {
grid-column: 1 / 4;
grid-row: 1 / 4;
justify-content: flex-start;
}
.areas-grid .area-card[data-area-slug="collier"] .area-card-frame {
aspect-ratio: 16 / 9;
height: auto;
flex: 0 0 auto;
}
/* Col 4 rows 1-2: Antigua Living / EMU Library stacked. Antigua Dining
moved to col 1 row 5 (under Darwin) per Samuel's 20 Apr tweak. */
.areas-grid .area-card[data-area-slug="antigua-living"] {
grid-column: 4;
grid-row: 1;
}
.areas-grid .area-card[data-area-slug="emu-library"] {
grid-column: 4;
grid-row: 2;
}
/* Col 1 rows 4-5: Darwin (landscape) on top, Antigua Dining below */
.areas-grid .area-card[data-area-slug="darwin"] {
grid-column: 1;
grid-row: 4;
}
.areas-grid .area-card[data-area-slug="antigua-dining"] {
grid-column: 1;
grid-row: 5;
}
/* Row 4-5 col 2: Saint Martin / Tami stacked (landscape 3:2) */
.areas-grid .area-card[data-area-slug="saint-martin"] {
grid-column: 2;
grid-row: 4;
}
.areas-grid .area-card[data-area-slug="tami"] {
grid-column: 2;
grid-row: 5;
}
/* Row 4-5 col 3: Contract portrait (tall) */
.areas-grid .area-card[data-area-slug="contract"] {
grid-column: 3;
grid-row: 4 / 6;
}
.areas-grid .area-card[data-area-slug="contract"] .area-card-frame {
aspect-ratio: auto;
height: 100%;
flex: 1;
}
/* Row 4-5 col 4: Icons portrait (tall) */
.areas-grid .area-card[data-area-slug="icons"] {
grid-column: 4;
grid-row: 4 / 6;
}
.areas-grid .area-card[data-area-slug="icons"] .area-card-frame {
aspect-ratio: auto;
height: 100%;
flex: 1;
}
}
/* Ultra-wide — keep rhythm, cap max column width via padding */
@media (min-width: 2000px) {
.areas-grid {
padding-left: var(--space-2xl);
padding-right: var(--space-2xl);
}
}
/* ─── News 2027 editorial mosaic ───────────────────────────────────────
Reuses .areas-grid + .area-card from Products Aree. At ≥1400px an
explicit slug-based 4×5 layout kicks in (same pattern as Products,
different cells). When the segmented filter narrows the set, we add
.is-filtered to fall back to auto-flow so the mosaic doesn't leave holes.
Still-life heroes today; swap file names in section-new-products.json
when "Foto ambientate" arrive from Marta — no code change needed. */
.news-grid .np-subtitle {
display: inline-block;
margin-left: 8px;
font-size: 0.7em;
font-weight: 400;
letter-spacing: 0.08em;
opacity: 0.72;
}
/* Desktop wide — explicit 4×4 mosaic for 9 News collections.
Revised 20 Apr (per Samuel's review): Collier flagship is landscape wide
(not 2×2 tall), Star is portrait spanning 2 rows at the right of Dora,
Antigua promoted to wide to fill row 2 right. Shape mix at ≥1400px:
5 wide (2×1) + 2 portrait (1×2) + 2 landscape (1×1) = 9 cards / 16 cells. */
@media (min-width: 1400px) {
.news-grid:not(.is-filtered) {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(4, auto);
}
/* Row 1: Collier (flagship, landscape wide) + Opera wide */
.news-grid:not(.is-filtered) .area-card[data-coll-slug="collier"] {
grid-column: 1 / 3;
grid-row: 1;
}
.news-grid:not(.is-filtered) .area-card[data-coll-slug="opera"] {
grid-column: 3 / 5;
grid-row: 1;
}
/* Row 2: Tami wide + Antigua wide */
.news-grid:not(.is-filtered) .area-card[data-coll-slug="tami"] {
grid-column: 1 / 3;
grid-row: 2;
}
.news-grid:not(.is-filtered) .area-card[data-coll-slug="antigua"] {
grid-column: 3 / 5;
grid-row: 2;
}
/* Rows 3-4 col 1: Darwin Evolution portrait anchor */
.news-grid:not(.is-filtered) .area-card[data-coll-slug="darwin-evolution"] {
grid-column: 1;
grid-row: 3 / 5;
}
.news-grid:not(.is-filtered) .area-card[data-coll-slug="darwin-evolution"] .area-card-frame {
aspect-ratio: auto;
height: 100%;
flex: 1;
}
/* Row 3 cols 2-3: Dora wide (NEW, natural 16:9 source) */
.news-grid:not(.is-filtered) .area-card[data-coll-slug="dora"] {
grid-column: 2 / 4;
grid-row: 3;
}
/* Rows 3-4 col 4: Star portrait (right of Dora, fills the space) */
.news-grid:not(.is-filtered) .area-card[data-coll-slug="star"] {
grid-column: 4;
grid-row: 3 / 5;
}
.news-grid:not(.is-filtered) .area-card[data-coll-slug="star"] .area-card-frame {
aspect-ratio: auto;
height: 100%;
flex: 1;
}
/* Row 4 cols 2-3: Alisea + L-ume (1×1 landscapes) */
.news-grid:not(.is-filtered) .area-card[data-coll-slug="alisea"] {
grid-column: 2;
grid-row: 4;
}
.news-grid:not(.is-filtered) .area-card[data-coll-slug="l-ume"] {
grid-column: 3;
grid-row: 4;
}
}
/* Filtered state — auto-flow grid (Tutte → Estensioni/Nuove). Cards pick
their own shape via .area-card--portrait/--wide/--landscape modifiers. */
.news-grid.is-filtered {
/* Inherits .areas-grid defaults (1fr single-col), but the smaller-
breakpoint rules on .areas-grid already handle 2-col and 3-col
layouts for auto-flow, so we just need to clear the explicit slug
placements that otherwise leave gaps. */
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.area-card,
.area-card-hero,
.area-card-title,
.area-card-rule,
.area-card-index {
transition: none !important;
}
.area-card {
opacity: 1;
transform: none;
}
.area-card:hover .area-card-hero { transform: none; }
}
/* ─── News: per-collection image-fit overrides ──────────────────────
Darwin Evolution, Star and Opera have square (1:1) source photos with
the product centred on a neutral background. In the mosaic they land
in tall portrait / wide cells, so `object-fit: cover` would crop the
product. Switch to `contain` + a 1.2 zoom so the product stays whole
but fills more of the card. White frame background replaces the
default cream so the letterbox disappears into the product photo's
studio backdrop. Hover scale bumped to 1.25 to keep the +4% micro-
animation consistent with other cards (1.2 × 1.04 ≈ 1.25). */
.news-grid .area-card[data-coll-slug="darwin-evolution"] .area-card-frame,
.news-grid .area-card[data-coll-slug="star"] .area-card-frame,
.news-grid .area-card[data-coll-slug="opera"] .area-card-frame {
background: #fff;
}
.news-grid .area-card[data-coll-slug="darwin-evolution"] .area-card-hero,
.news-grid .area-card[data-coll-slug="star"] .area-card-hero,
.news-grid .area-card[data-coll-slug="opera"] .area-card-hero {
object-fit: contain;
object-position: center;
transform: scale(1.2);
}
/* Opera-only: hide the left-edge seam of opera-19.jpg where the studio
backdrop doesn't match pure #fff. A mask that fades the image to
transparent still shows the colour boundary; instead we paint an
opaque-to-transparent white gradient ON TOP of the image, using the
same #fff as the frame background. The overlay literally covers the
seam with the frame colour, so the transition is perfectly seamless
regardless of what the image's edge colour actually is.
Ease-out curve (4 stops) gives a softer fall-off than linear. */
.news-grid .area-card[data-coll-slug="opera"] .area-card-frame::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 45%;
background: linear-gradient(to right,
#fff 0%,
rgba(255, 255, 255, 0.92) 18%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.18) 80%,
rgba(255, 255, 255, 0) 100%);
pointer-events: none;
z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
.news-grid .area-card[data-coll-slug="darwin-evolution"]:hover .area-card-hero,
.news-grid .area-card[data-coll-slug="darwin-evolution"]:focus-visible .area-card-hero,
.news-grid .area-card[data-coll-slug="star"]:hover .area-card-hero,
.news-grid .area-card[data-coll-slug="star"]:focus-visible .area-card-hero,
.news-grid .area-card[data-coll-slug="opera"]:hover .area-card-hero,
.news-grid .area-card[data-coll-slug="opera"]:focus-visible .area-card-hero {
transform: scale(1.25);
}
}
/* ─── News filtered state: Estensioni (6 cards) / Nuove (3 cards) ────
When the segmented filter is active, the mosaic collapses to a uniform
grid of 3:2 landscape cards. The explicit slug placements from the
unfiltered state don't apply (gated by `:not(.is-filtered)`), and the
per-card shape modifiers (portrait/wide) are overridden here so the
cards align in clean rows regardless of how few are on screen. */
.news-grid.is-filtered .area-card-frame,
.news-grid.is-filtered .area-card--portrait .area-card-frame,
.news-grid.is-filtered .area-card--wide .area-card-frame,
.news-grid.is-filtered .area-card--landscape .area-card-frame {
aspect-ratio: 3 / 2;
height: auto;
flex: 0 0 auto;
}
/* Cancel the .areas-grid :last-child finale rules (span 2/3 + 21:9) at
tablet breakpoints — makes no sense on a 3- or 6-card filtered grid. */
.news-grid.is-filtered .area-card:last-child {
grid-column: auto;
}
.news-grid.is-filtered .area-card:last-child .area-card-frame {
aspect-ratio: 3 / 2;
height: auto;
}
/* Desktop wide — uniform 3-col grid when filtered */
@media (min-width: 1400px) {
.news-grid.is-filtered {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto;
grid-auto-flow: row;
}
}
/* ─── News: Antigua hero object-position lift ───────────────────────────
The Antigua card-cover image is framed centre-centre by default; shifting
the focal point up to 35% reveals ~15% more of the top of the composition,
keeping the dining set fully visible inside the mosaic's wide cell. */
.news-grid .area-card[data-coll-slug="antigua"] .area-card-hero {
object-position: center 35%;
}
/* ─── Products: per-area product-card image framing ─────────────────────
The area-detail grid (rendered by tavole.js renderAreaView) carries a
[data-area-slug=""] attribute. Use it to tweak card-thumb framing
per area WITHOUT leaking the change into other Aree. Collier: the sunbed
hero is wider than tall, so the default centre crop hides ~half of the
sunbed silhouette. Anchor the crop to the left edge so the interesting
half of the product remains visible inside the 1:1 card slot. */
#tavole-grid[data-area-slug="collier"] .card-thumb {
object-position: left center;
}
/* Extras — editorial divider + grid (L-ume + future Complementi/Tappeti/Sgabelli) */
.areas-extras-title {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.75rem;
color: var(--color-text-secondary);
padding: var(--space-lg) var(--space-md) var(--space-md);
max-width: 1800px;
margin: var(--space-xl) auto 0;
position: relative;
display: flex;
align-items: center;
gap: var(--space-md);
clear: both;
}
@media (min-width: 900px) {
.areas-extras-title {
padding: var(--space-2xl) var(--space-lg) var(--space-md);
margin-top: calc(var(--space-2xl) * 2);
}
}
.areas-extras-title::before {
content: '';
flex: 0 0 28px;
height: 1px;
background: var(--color-border);
}
.areas-extras-title::after {
content: '';
flex: 1 1 auto;
height: 1px;
background: var(--color-border);
}
#extras-grid {
max-width: 1800px;
grid-template-columns: 1fr;
padding: var(--space-sm) var(--space-md) var(--space-xl);
gap: var(--space-lg);
}
@media (min-width: 480px) {
#extras-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
#extras-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
#extras-grid {
grid-template-columns: repeat(4, 1fr);
padding: var(--space-md) var(--space-lg) var(--space-2xl);
}
}
@media (min-width: 1500px) {
#extras-grid { grid-template-columns: repeat(6, 1fr); }
}
/* ═══ TAVOLE — Search nella sezione ═══ */
.tavole-search {
padding: var(--space-md) var(--space-md) var(--space-sm);
max-width: var(--max-width);
margin: 0 auto;
}
.product-detail {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-lg);
}
.product-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
@media (max-width: 767px) {
.product-hero { grid-template-columns: 1fr; }
}
.product-hero > img {
width: 100%;
border-radius: var(--radius-md);
background: var(--color-bg-tertiary);
}
.bg-white {
background: #fff !important;
}
.product-info h2 {
font-family: var(--font-display);
font-size: 1.75rem;
margin-bottom: var(--space-sm);
}
.product-info .product-code {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
}
.product-info .product-desc {
line-height: 1.7;
margin-bottom: var(--space-lg);
}
.product-tech-sheet {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.product-tech-sheet-text {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin-bottom: var(--space-sm);
}
.product-tech-sheet-link {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) 0;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-primary);
background: none;
border: none;
cursor: pointer;
transition: opacity var(--duration) var(--ease);
}
.product-tech-sheet-link:hover {
opacity: 0.7;
}
.product-left-col {
align-self: start;
}
.product-image-wrap {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
background: #fff;
}
.product-image-wrap img {
display: block;
width: 100%;
border-radius: 0;
}
.product-fullscreen-btn {
position: absolute;
top: 10px;
left: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.6);
color: var(--color-text-secondary);
cursor: pointer;
transition: background 0.2s, color 0.2s;
backdrop-filter: blur(4px);
}
.product-fullscreen-btn:hover {
background: rgba(255, 255, 255, 0.9);
color: var(--color-text);
}
.product-site-link {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: var(--color-text-secondary);
text-decoration: none;
transition: background 0.2s, color 0.2s;
backdrop-filter: blur(4px);
}
.product-site-link:hover {
background: var(--color-primary);
color: #fff;
}
.product-colors {
margin-top: var(--space-lg);
}
.product-color-group {
margin-bottom: var(--space-md);
}
.product-color-group:last-child {
margin-bottom: 0;
}
.product-color-group-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: var(--space-xs);
}
.product-color-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.product-color-swatch {
width: 38px;
height: 38px;
border-radius: var(--radius-full);
border: none;
cursor: default;
position: relative;
transition: transform 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.swatch-code {
font-family: var(--font-display);
font-size: 0.625rem;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
line-height: 1;
pointer-events: none;
}
.product-color-swatch:hover {
transform: scale(1.15);
}
.product-color-swatch[title] {
cursor: pointer;
}
/* Swatch lightbox carousel */
.swatch-lightbox {
flex-direction: column;
gap: var(--space-lg);
}
.swatch-lightbox-bg {
display: flex;
align-items: center;
justify-content: center;
width: min(75vw, 75vh, 320px);
height: min(75vw, 75vh, 320px);
background: #fff;
border-radius: var(--radius-lg);
}
.swatch-lightbox-circle {
width: min(60vw, 60vh, 256px);
height: min(60vw, 60vh, 256px);
border-radius: var(--radius-full);
background-size: cover;
background-position: center;
border: 1px solid #E0E0E0;
}
.swatch-lightbox-label {
color: #fff;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
}
.swatch-lightbox-counter {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
}
/* ═══ LINK PAGE (progettazione) ═══ */
.link-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(60dvh);
text-align: center;
padding: var(--space-2xl);
gap: var(--space-lg);
}
.link-page--hero {
padding: 0;
gap: 0;
justify-content: flex-start;
min-height: auto;
}
.link-page__bg {
width: 100%;
aspect-ratio: 1404 / 768;
max-height: 65dvh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.link-page__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
padding: var(--space-2xl) var(--space-2xl) var(--space-2xl);
margin-top: var(--space-xl);
}
.link-page h2 {
font-family: var(--font-display);
font-size: 2.25rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.link-page p {
color: var(--color-text-secondary);
max-width: 500px;
line-height: 1.7;
}
.link-page--hero .btn-primary {
margin-top: var(--space-sm);
font-size: 1rem;
padding: 14px 32px;
background: var(--color-primary);
border: none;
letter-spacing: 0.04em;
}
/* ═══ PRESS KIT ═══ */
.press-kit {
padding: var(--space-lg);
max-width: var(--max-width);
margin: 0 auto;
}
.press-kit-hero {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-2xl);
}
.press-kit-hero-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
}
.press-kit-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-xl);
gap: var(--space-sm);
}
.press-kit-hero-overlay h2 {
color: #fff;
font-family: var(--font-display);
font-size: 1.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.press-kit-hero-btn {
display: inline-block;
color: #fff;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.8;
}
.press-kit-section-title {
font-family: var(--font-display);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-secondary);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-border);
}
.press-release-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.press-release-item {
display: flex;
gap: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-md);
background: var(--color-bg-card);
color: var(--color-text);
transition: transform 0.15s ease;
}
.press-release-item:hover {
transform: translateY(-2px);
}
.press-release-item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 6px;
}
.press-release-thumb {
width: 80px;
height: 113px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.press-release-info {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.press-release-info h4 {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.press-release-info p {
font-size: 0.8125rem;
color: var(--color-text-secondary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.press-release-dl {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 767px) {
.press-release-thumb {
width: 60px;
height: 85px;
}
.press-kit-hero-overlay h2 {
font-size: 1.25rem;
}
}
/* ═══ MERCH TOOLS ═══ */
.merch-thumb {
aspect-ratio: 16/9;
object-fit: contain;
background: var(--color-bg-tertiary);
}
/* ═══ COMING SOON ═══ */
.coming-soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(60dvh);
text-align: center;
padding: var(--space-2xl);
gap: var(--space-lg);
}
.coming-soon-icon {
color: var(--color-primary);
opacity: 0.7;
}
.coming-soon h2 {
font-family: var(--font-display);
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.coming-soon p {
color: var(--color-text-secondary);
max-width: 400px;
line-height: 1.7;
}
/* ═══ NEW PRODUCTS ═══ */
.np-filter {
padding: var(--space-md) var(--space-md) 0;
max-width: var(--max-width);
margin: 0 auto;
}
.np-card {
position: relative;
}
.np-badge {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
background: var(--color-primary);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 3px 8px;
border-radius: var(--radius-full);
z-index: 1;
}
.np-subtitle {
font-weight: 400;
font-size: 0.8125rem;
opacity: 0.7;
}
.np-designer {
font-size: 0.75rem;
color: var(--color-text-secondary);
font-style: italic;
}
.np-products {
font-size: 0.75rem;
color: var(--color-text-secondary);
margin-top: 2px;
}
.np-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
color: var(--color-text-secondary);
background: var(--color-bg-tertiary);
}
.np-placeholder-text {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.4;
}
.np-gallery-grid {
padding: 0 var(--space-md);
}
.np-gallery-item {
cursor: pointer;
overflow: hidden;
}
.np-gallery-item img {
transition: transform 0.3s var(--ease);
}
.np-gallery-item:hover img {
transform: scale(1.05);
}
.np-lightbox-counter {
position: absolute;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
}
/* ── Fullscreen carousel (ambientate lightbox v2) ── */
.np-fscarousel-overlay {
position: fixed;
inset: 0;
/* z-index deve superare .app-header (100) e qualsiasi overlay menu/search
attualmente presenti. 9998 resta sotto a .splash (9999) per coerenza
col flow di boot. Background opaco: rgba 0.92 lasciava trasparire
l'header e le specs del prodotto rendendo l'esperienza non fullscreen. */
z-index: 9998;
background: #000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s ease;
}
.np-fscarousel-overlay.active {
opacity: 1;
}
/* Strip a tutta larghezza con snap centrato */
.np-fscarousel-strip {
width: 100%;
height: 100%;
display: flex;
align-items: center;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0 50vw;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
user-select: none;
}
.np-fscarousel-strip::-webkit-scrollbar { display: none; }
/* Item: height-driven sizing (same pattern as the inline strip but
full-viewport). Giving items an explicit height + auto width avoids
the ambiguous CSS sizing cycle that broke layout on desktop — img
width derived from its intrinsic aspect at the fixed height. */
.np-fscarousel-item {
flex: 0 0 auto;
height: calc(100vh - 80px);
max-width: calc(100vw - 128px);
width: auto;
scroll-snap-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.np-fscarousel-item img {
display: block;
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
/* Didascalia in overlay sulla foto */
.np-fscarousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-sm) var(--space-md);
background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
color: #fff;
font-size: 0.78rem;
letter-spacing: 0.02em;
text-align: center;
pointer-events: none;
}
/* Pulsante chiudi — angolo in alto a destra */
.np-fscarousel-close {
position: fixed;
top: var(--space-md);
right: var(--space-md);
z-index: 9999;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 0;
border-radius: 0;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.np-fscarousel-close:hover { background: rgba(255, 255, 255, 0.25); }
/* Counter "3 / 10" */
.np-fscarousel-counter {
position: fixed;
bottom: var(--space-md);
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
z-index: 9999;
pointer-events: none;
}
/* Frecce di navigazione */
.np-fscarousel-arrow {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
width: 52px;
height: 52px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 0;
border-radius: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.np-fscarousel-arrow:hover { background: rgba(255, 255, 255, 0.25); }
.np-fscarousel-arrow-prev { left: var(--space-md); }
.np-fscarousel-arrow-next { right: var(--space-md); }
@media (max-width: 720px) {
.np-fscarousel-item {
height: calc(100vh - 60px);
max-width: 100vw;
}
.np-fscarousel-arrow { display: none; }
.np-fscarousel-strip {
gap: 8px;
}
}
/* ── Product specs — editorial list ── */
.np-specs-inline {
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
}
.np-specs-title {
font-family: var(--font-display);
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-text-secondary);
margin: 0 0 var(--space-md);
opacity: 0.6;
}
.np-specs-list {
display: flex;
flex-direction: column;
}
.np-specs-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.np-specs-item:last-child {
border-bottom: none;
}
.np-specs-name {
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.np-specs-meta {
display: flex;
align-items: baseline;
gap: var(--space-md);
flex-shrink: 0;
}
.np-specs-dim {
font-size: 0.75rem;
color: var(--color-text-secondary);
letter-spacing: 0.02em;
}
.np-specs-weight {
font-size: 0.75rem;
color: var(--color-text-secondary);
opacity: 0.6;
}
/* ─── News collection detail — wireframe layout (20 Apr, Samuel's sketch) ───
Top hero: image left + designer caption under it, title/subtitle/description/
measures stacked in the right column. Below: 3-image mosaic (wide left + 2
stacked right). Mobile stacks single column. */
.np-detail {
max-width: 1400px;
margin: 0 auto;
padding: var(--space-md) var(--space-md) var(--space-2xl);
}
.np-detail-hero {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: start;
}
@media (min-width: 900px) {
.np-detail-hero {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-2xl);
}
}
.np-detail-left {
display: flex;
flex-direction: column;
}
.np-detail-image {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--color-bg-tertiary);
}
.np-detail-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.np-detail-image .product-fullscreen-btn {
position: absolute;
top: var(--space-md);
right: var(--space-md);
}
.np-detail-designer-caption {
font-family: var(--font-display);
font-size: 0.8125rem;
color: var(--color-text-secondary);
margin-top: var(--space-md);
letter-spacing: 0.02em;
}
.np-detail-right {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.np-detail-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
line-height: 1.05;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--color-text);
margin: 0;
}
.np-detail-subtitle {
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 400;
color: var(--color-text-secondary);
margin: -4px 0 0 0;
}
.np-detail-description {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-text);
margin: var(--space-md) 0 0 0;
}
.np-detail-sheet-link {
display: inline-block;
margin: var(--space-md) 0 0 0;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.np-detail-sheet-link:hover,
.np-detail-sheet-link:focus {
color: var(--emu-red, #d8232a);
border-bottom-color: var(--emu-red, #d8232a);
}
.np-detail-measures {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.np-detail-measures-label {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.np-detail-measures-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.np-detail-measures-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-md);
flex-wrap: wrap;
font-size: 0.8125rem;
color: var(--color-text-secondary);
}
.np-detail-measures-name {
color: var(--color-text);
flex: 1 1 auto;
min-width: 0;
}
.np-detail-measures-dim {
font-variant-numeric: tabular-nums;
opacity: 0.85;
white-space: nowrap;
flex-shrink: 0;
}
/* Lower-half gallery is handled by the pre-existing per-product system
(showcase / tabbed / grid layouts in new-products.js), not here. */
/* Products block separated from hero */
.np-collection-products {
max-width: var(--max-width);
margin: var(--space-2xl) auto 0;
padding: 0 var(--space-md) var(--space-2xl);
}
.np-collection-products-head {
display: flex;
align-items: baseline;
gap: var(--space-md);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-lg);
}
.np-collection-products-label {
font-family: var(--font-display);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text);
margin: 0;
}
.np-collection-products-count {
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--color-text-secondary);
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
/* When .np-collection-products is used, drop the older .np-specs-inline
padding/margins it inherits so the new spacing rules are authoritative. */
.np-collection-products.np-specs-inline {
padding: 0 var(--space-md) var(--space-2xl);
margin: var(--space-2xl) auto 0;
}
.np-specs-code {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-secondary);
opacity: 0.7;
}
.np-specs-price {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text);
}
.np-specs-desc {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-text-secondary);
margin-top: 4px;
max-width: 70ch;
}
.np-specs-link {
display: inline-block;
margin-top: 6px;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-primary);
text-decoration: none;
letter-spacing: 0.02em;
transition: opacity var(--duration) var(--ease);
}
.np-specs-link:hover { opacity: 0.75; }
/* When np-specs-item holds code/desc/link, let it stack vertically */
.np-specs-item {
flex-direction: column;
align-items: flex-start;
}
.np-specs-item .np-specs-meta {
flex-wrap: wrap;
}
/* ── Per-product blocks ── */
.np-product-block {
padding: 0 var(--space-md);
margin-bottom: var(--space-xl);
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
}
.np-product-block + .np-product-block {
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
}
.np-product-header {
margin-bottom: var(--space-md);
}
.np-product-name {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text);
}
.np-product-dims {
font-size: 0.8rem;
color: var(--color-text-secondary);
margin-top: 4px;
letter-spacing: 0.02em;
}
.np-product-mosaic {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 6px;
border-radius: var(--radius-md);
overflow: hidden;
}
.np-product-mosaic .np-mosaic-hero {
grid-row: 1 / 3;
overflow: hidden;
cursor: pointer;
}
.np-product-mosaic .np-mosaic-hero img {
object-fit: cover;
}
.np-product-mosaic .np-mosaic-thumb {
overflow: hidden;
cursor: pointer;
}
.np-product-mosaic img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.3s var(--ease);
}
.np-product-mosaic div:hover img {
transform: scale(1.04);
}
/* Single image in mosaic: hero only, no grid needed */
.np-product-mosaic.np-mosaic-single {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
/* Two images: side by side */
.np-product-mosaic.np-mosaic-pair {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.np-product-mosaic.np-mosaic-pair .np-mosaic-hero {
grid-row: 1;
}
@media (max-width: 480px) {
.np-product-mosaic {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.np-product-mosaic .np-mosaic-hero {
grid-column: 1 / 3;
grid-row: 1;
}
.np-product-mosaic.np-mosaic-single {
grid-template-columns: 1fr;
}
.np-product-mosaic.np-mosaic-single .np-mosaic-hero {
grid-column: 1;
}
}
/* ── Singles row — consecutive single-image products side-by-side ──
Prevents "table"-style SKUs (e.g. Antigua 6/8-seater) from stacking
as full-width landscape billboards. Runs of 2–3 singles share a row;
solo singles get a constrained width so they don't dominate visually. */
.np-singles-row {
display: grid;
gap: var(--space-lg) var(--space-md);
padding: 0 var(--space-md);
margin: 0 auto var(--space-xl);
/* Extra breathing room on top so the deferred singles (tables) don't
press against the preceding product block. Total gap above:
.np-product-block margin-bottom (32px) + this (24px) = 56px. */
margin-top: var(--space-lg);
}
.np-singles-row[data-count="1"] {
grid-template-columns: minmax(0, 1fr);
max-width: 560px;
}
.np-singles-row[data-count="2"] {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
max-width: 960px;
}
.np-singles-row[data-count="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: var(--max-width);
}
.np-singles-cell {
display: flex;
flex-direction: column;
gap: var(--space-sm);
cursor: pointer;
}
.np-singles-cell .np-product-header {
margin-bottom: 0;
}
.np-singles-img {
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius-md);
background: #f5f5f5;
}
.np-singles-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s var(--ease);
}
.np-singles-cell:hover .np-singles-img img {
transform: scale(1.03);
}
@media (max-width: 720px) {
.np-singles-row[data-count="2"],
.np-singles-row[data-count="3"] {
grid-template-columns: minmax(0, 1fr);
max-width: 560px;
}
}
/* ── Ambientate: editorial lifestyle photo strip ──
Design reference: premium editorial / fashion / design sites (Apple,
Hermès, Bloomberg Graphics). Principles applied here:
- Sharp corners (no border-radius) — editorial, not app-like
- Hidden scrollbar — clean
- Edge fade mask — photos fade at viewport edges
- Overlay arrows on desktop hover, disabled at boundaries
- Mouse drag-to-scroll — grab / grabbing cursor
- Scroll-snap proximity (not mandatory) — doesn't fight the user
- Progress bar below the strip
*/
.np-ambientate {
margin: var(--space-xl) auto;
max-width: 100%;
position: relative;
}
.np-ambientate-viewport {
position: relative;
/* Edge fade mask — the first/last ~24px of the strip fade to transparent
so photos feel like they come in / leave the viewport. */
-webkit-mask-image: linear-gradient(90deg,
transparent 0,
#000 var(--space-md),
#000 calc(100% - var(--space-md)),
transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0,
#000 var(--space-md),
#000 calc(100% - var(--space-md)),
transparent 100%);
}
.np-ambientate-strip {
display: flex;
gap: var(--space-md);
overflow-x: auto;
overflow-y: hidden;
/* Mandatory snap + center alignment = cinematic focus pattern. Every
item snaps to the viewport center, with the previous/next peeking
on the sides. */
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* padding-inline: 50vw gives enough runway for the first and last
items to reach the viewport center without CSS tricks. */
padding: 0 50vw;
cursor: grab;
user-select: none;
-webkit-overflow-scrolling: touch;
/* Hidden scrollbar cross-browser */
scrollbar-width: none;
-ms-overflow-style: none;
}
.np-ambientate-strip::-webkit-scrollbar {
display: none;
}
.np-ambientate-strip.is-dragging {
cursor: grabbing;
/* Disable snap + smooth behavior DURING drag so every pointermove's
scrollLeft assignment is honored exactly. With `mandatory` snap
still on, Chrome resolves each new scrollLeft to the nearest snap
point, producing a visible jerky step between images instead of
continuous follow-the-pointer scroll. Re-enabled on drag-end by
class removal. */
scroll-snap-type: none;
scroll-behavior: auto;
}
.np-ambientate-item {
flex: 0 0 auto;
/* Samuel's 22 Apr call: bigger. clamp scales with viewport height —
capped so ultra-tall displays don't turn the strip into a monster. */
height: clamp(360px, 62vh, 680px);
border: 0;
padding: 0;
background: #f5f5f5;
/* Sharp corners per Samuel's 22 Apr call — editorial, flat. */
border-radius: 0;
overflow: hidden;
cursor: pointer;
scroll-snap-align: center;
position: relative;
transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
/* Peek items (not-centered) dim slightly to emphasize focus. The
centered item regains full opacity via :focus / :hover / when the
strip data-centered attribute matches. Simpler: always full opacity
— the mask fade at viewport edges already provides the cue. */
}
.np-ambientate-item img {
height: 100%;
width: auto;
max-width: none;
display: block;
object-fit: cover;
transition: transform 0.4s var(--ease);
/* Image itself doesn't intercept drag pointer events */
pointer-events: none;
/* Suppress native image-drag ghost on desktop — would otherwise
steal the pointer before our handler runs. */
-webkit-user-drag: none;
user-select: none;
}
.np-ambientate-item:hover img {
transform: scale(1.02);
}
/* Grab cursor must beat the button's native cursor */
.np-ambientate-item { cursor: grab; }
.np-ambientate-strip.is-dragging,
.np-ambientate-strip.is-dragging .np-ambientate-item { cursor: grabbing; }
.np-ambientate-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-sm) var(--space-md);
background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
color: #fff;
font-size: 0.78rem;
letter-spacing: 0.02em;
text-align: left;
pointer-events: none;
}
/* Overlay arrows — appear on viewport hover (desktop). Disabled at
scroll boundaries via [disabled] attribute. Hidden on touch devices
where swipe is more natural. */
.np-ambientate-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.92);
color: #111;
border: 0;
border-radius: 50%;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
pointer-events: none;
}
.np-ambientate-viewport:hover .np-ambientate-arrow:not([disabled]) {
opacity: 1;
pointer-events: auto;
}
.np-ambientate-arrow:hover {
background: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.np-ambientate-arrow:active {
transform: translateY(-50%) scale(0.96);
}
.np-ambientate-arrow[disabled] {
opacity: 0 !important;
cursor: default;
pointer-events: none;
}
.np-ambientate-arrow-prev { left: var(--space-md); }
.np-ambientate-arrow-next { right: var(--space-md); }
/* Positional progress bar — hidden (looked like a scrollbar to Samuel,
redundant now that the timer bar below communicates autoplay state).
Kept in the DOM so the JS that updates it stays simple; visually off. */
.np-ambientate-progress {
display: none;
}
.np-ambientate-progress-bar {
display: none;
}
/* Autoplay countdown bar — thin line that fills left→right over 4s,
resetting on every auto-advance. Pauses (frozen in place) on hover
or touch-hold. Rendered just below the positional progress bar. */
.np-ambientate-timer {
margin: 6px var(--space-lg) 0;
height: 2px;
background: var(--color-border, rgba(128,128,128,0.18));
position: relative;
overflow: hidden;
}
.np-ambientate-timer-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--color-text);
opacity: 0.55;
}
/* Touch/mobile: shorter height, variable-width-per-photo (same
height-driven pattern as desktop) — every photo fills its natural
aspect ratio, landscapes stay wide, portraits stay narrow. No
letterboxing, no forced crop. Overlay arrows hidden (swipe is
natural), edge mask off (swipe feedback benefits from seeing items
reach the edge). */
@media (max-width: 720px) {
.np-ambientate-item {
height: clamp(300px, 52vh, 520px);
/* Explicit width override: undo any earlier 3:2 / full-viewport
rule. Let img's height-driven width dictate the box. */
width: auto;
aspect-ratio: auto;
background: #f5f5f5;
}
.np-ambientate-item img {
/* Desktop pattern: full height, natural width, object-fit cover
to crop tiny edges only if the photo's aspect doesn't match
exactly — which it will because width auto-adapts. Effectively
no crop in practice. */
height: 100%;
width: auto;
max-width: none;
object-fit: cover;
}
.np-ambientate-arrow {
display: none;
}
.np-ambientate-viewport {
-webkit-mask-image: none;
mask-image: none;
}
}
@media (hover: none) {
/* Coarse-pointer devices: no drag cursor, no hover arrows. */
.np-ambientate-strip { cursor: default; }
.np-ambientate-arrow { display: none; }
}
/* ── Product showcase cards (1 image per product) ── */
.np-product-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg) 6px;
padding: 0 var(--space-md);
max-width: var(--max-width);
margin: var(--space-lg) auto 0;
}
.np-showcase-card {
cursor: pointer;
}
.np-showcase-label {
margin-bottom: var(--space-sm);
}
.np-showcase-name {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text);
}
.np-showcase-dims {
font-size: 0.7rem;
color: var(--color-text-secondary);
margin-top: 2px;
letter-spacing: 0.02em;
}
.np-showcase-img {
overflow: hidden;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--glass-edge);
transition: box-shadow var(--duration) var(--ease);
}
.np-showcase-img img {
width: 100%;
display: block;
object-fit: contain;
transition: transform 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.np-showcase-card:hover .np-showcase-img {
box-shadow: var(--shadow-md), inset 0 0 0 1px var(--glass-edge);
}
.np-showcase-card:hover .np-showcase-img img {
transform: scale(1.04);
}
}
@media (max-width: 480px) {
.np-product-showcase {
grid-template-columns: 1fr;
}
}
/* ── SKU showcase (one card per SKU, opt-in via card_layout) ── */
/* Outer wrapper: stacks family groups vertically with generous rhythm. */
.np-sku-groups {
display: flex;
flex-direction: column;
gap: var(--space-xl);
padding: 0 var(--space-md);
max-width: var(--max-width);
margin: var(--space-lg) auto 0;
}
.np-sku-group {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.np-sku-group-title {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text);
margin: 0;
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--glass-edge);
}
/* Inner grid: 3-col desktop, 2-col ≤900px, 1-col rhythm tightened on phone. */
.np-sku-showcase {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg) var(--space-md);
}
.np-sku-card {
cursor: pointer;
display: flex;
flex-direction: column;
}
.np-sku-img {
overflow: hidden;
border-radius: var(--radius-md);
aspect-ratio: 1 / 1;
background: var(--color-surface-2, #f4f2ee);
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--glass-edge);
transition: box-shadow var(--duration) var(--ease);
}
.np-sku-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.np-sku-card:hover .np-sku-img {
box-shadow: var(--shadow-md), inset 0 0 0 1px var(--glass-edge);
}
.np-sku-card:hover .np-sku-img img {
transform: scale(1.04);
}
}
.np-sku-label {
margin-top: var(--space-sm);
}
.np-sku-family {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text);
line-height: 1.25;
}
.np-sku-cover {
font-size: 0.7rem;
color: var(--color-text-secondary);
margin-top: 2px;
letter-spacing: 0.04em;
text-transform: lowercase;
}
@media (max-width: 900px) {
.np-sku-showcase {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 420px) {
.np-sku-showcase {
gap: var(--space-md) 8px;
}
.np-sku-family {
font-size: 0.78rem;
}
}
/* ── np-sku-detail: single-SKU subsection ── */
/* Route /new-products//. Used today only by L-UME. Scoped with
.np-sku-detail prefix so no other section picks these up inadvertently. */
.np-sku-detail {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.np-sku-detail-header {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
}
.np-sku-detail-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
color: var(--color-text);
}
.np-sku-detail-code {
font-family: var(--font-mono, monospace);
font-size: 0.85rem;
color: var(--color-text-secondary);
letter-spacing: 0.06em;
}
.np-sku-detail-dims {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.np-sku-detail-gallery {
margin-top: var(--space-sm);
}
.np-sku-detail-cell {
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-surface-2, #f4f2ee);
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--glass-edge);
aspect-ratio: 4 / 3;
cursor: pointer;
transition: box-shadow var(--duration) var(--ease);
}
.np-sku-detail-cell img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.np-sku-detail-cell:hover {
box-shadow: var(--shadow-md), inset 0 0 0 1px var(--glass-edge);
}
.np-sku-detail-cell:hover img {
transform: scale(1.04);
}
}
/* ── Per-product image grid (color variants) ── */
.np-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
row-gap: 16px;
}
.np-grid-cell {
overflow: hidden;
border-radius: var(--radius-md);
cursor: pointer;
}
.np-grid-cell img {
width: 100%;
display: block;
object-fit: contain;
transition: transform 0.3s var(--ease);
}
.np-grid-cell:hover img {
transform: scale(1.04);
}
.np-grid-cell:nth-child(4n+1) {
padding-top: 0;
}
.np-grid-cell:nth-child(n+5) {
margin-top: 0;
}
.np-product-grid.np-grid-3col {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
.np-product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Tabbed product view ── */
.np-product-tabs {
margin: var(--space-lg) var(--space-md) 0;
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
}
.np-tab-content {
padding: 0 var(--space-md);
max-width: var(--max-width);
margin: var(--space-md) auto 0;
}
.np-tab-panel {
display: none;
}
.np-tab-panel.active {
display: block;
}
.np-tab-dims {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary);
margin-top: var(--space-md);
letter-spacing: 0.02em;
}
/* ── Color filter bar ── */
.np-color-bar {
display: flex;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md) var(--space-md);
max-width: var(--max-width);
margin: 0 auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.np-color-bar::-webkit-scrollbar {
display: none;
}
.np-color-chip {
padding: 6px 14px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-bg-card);
color: var(--color-text-secondary);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--duration) var(--ease);
}
.np-color-chip:hover {
border-color: var(--color-text-secondary);
color: var(--color-text);
}
.np-color-chip.active {
background: var(--color-text);
color: var(--color-bg);
border-color: var(--color-text);
}
@media (max-width: 767px) {
.np-specs-table {
font-size: 0.75rem;
}
}
/* ═══ LOADING ═══ */
.loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
color: var(--color-text-secondary);
}
/* ═══ FLIPBOOK — Company Profile ═══ */
.flipbook-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-sm);
min-height: calc(100dvh - var(--header-height));
}
.flipbook-container {
max-width: 1200px;
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
.flipbook-container .stf__wrapper {
margin: 0 auto !important;
transition: transform 0.4s ease;
}
.flipbook-page {
background: #000;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.flipbook-page img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Rigidità visiva sulle pagine soft in movimento */
.stf__block {
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* Clippa la metà vuota dello spread su cover/back */
/* overflow sul wrapper esterno: clippa la metà vuota senza tagliare l'animazione 3D */
.flipbook-wrapper {
overflow: hidden;
}
/* ═══ FLIPBOOK — Fullscreen mode ═══ */
.flipbook-wrapper:fullscreen,
.flipbook-wrapper:-webkit-full-screen {
background: #000;
padding: var(--space-lg);
overflow: hidden;
}
.flipbook-wrapper:fullscreen .flipbook-container,
.flipbook-wrapper:-webkit-full-screen .flipbook-container {
max-width: none;
}
.flipbook-wrapper:fullscreen .flipbook-controls,
.flipbook-wrapper:-webkit-full-screen .flipbook-controls {
position: relative;
z-index: 10;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.flipbook-wrapper:fullscreen .flipbook-controls.flipbook-controls--hidden,
.flipbook-wrapper:-webkit-full-screen .flipbook-controls.flipbook-controls--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.flipbook-wrapper:fullscreen .flipbook-btn,
.flipbook-wrapper:-webkit-full-screen .flipbook-btn {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.flipbook-wrapper:fullscreen .flipbook-btn:hover,
.flipbook-wrapper:-webkit-full-screen .flipbook-btn:hover {
background: var(--color-primary);
}
.flipbook-wrapper:fullscreen .flipbook-counter,
.flipbook-wrapper:-webkit-full-screen .flipbook-counter {
color: rgba(255, 255, 255, 0.7);
}
.flipbook-wrapper:fullscreen .flipbook-download,
.flipbook-wrapper:-webkit-full-screen .flipbook-download {
display: none;
}
.flipbook-wrapper:fullscreen .flipbook-linkbar-item,
.flipbook-wrapper:-webkit-full-screen .flipbook-linkbar-item {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
}
/* Niente ombra su cover/back — nasconde il lato vuoto dello spread */
.flipbook-single-right .stf__block,
.flipbook-single-left .stf__block {
box-shadow: none !important;
}
/* Centraggio cover: sposta lo spread per centrare la metà destra (copertina) */
.flipbook-single-right .stf__wrapper {
transform: translateX(-25%) !important;
transition: transform 0.4s ease;
}
/* Centraggio ultima pagina: sposta lo spread per centrare la metà sinistra */
.flipbook-single-left .stf__wrapper {
transform: translateX(25%) !important;
transition: transform 0.4s ease;
}
/* Portrait mode (single page): no centering shift needed — StPageFlip centers natively */
.flipbook-single-right .stf__wrapper.--portrait,
.flipbook-single-left .stf__wrapper.--portrait {
transform: none !important;
}
/* Bottoni zoom pagina — inline nei controls */
.flipbook-zoom-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--color-bg-card);
box-shadow: var(--shadow-sm);
color: var(--color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.flipbook-zoom-btn:hover {
background: var(--color-primary);
color: #fff;
}
.flipbook-wrapper:fullscreen .flipbook-zoom-btn,
.flipbook-wrapper:-webkit-full-screen .flipbook-zoom-btn {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.flipbook-wrapper:fullscreen .flipbook-zoom-btn:hover,
.flipbook-wrapper:-webkit-full-screen .flipbook-zoom-btn:hover {
background: var(--color-primary);
}
/* Fullscreen button — sotto l'angolo destro del flipbook */
.flipbook-fullscreen-btn {
position: absolute;
bottom: -44px;
right: 0;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--color-bg-card);
box-shadow: var(--shadow-sm);
color: var(--color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
z-index: 5;
}
.flipbook-fullscreen-btn:hover {
background: var(--color-primary);
color: #fff;
}
.flipbook-wrapper:fullscreen .flipbook-fullscreen-btn,
.flipbook-wrapper:-webkit-full-screen .flipbook-fullscreen-btn {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.flipbook-wrapper:fullscreen .flipbook-fullscreen-btn:hover,
.flipbook-wrapper:-webkit-full-screen .flipbook-fullscreen-btn:hover {
background: var(--color-primary);
color: #fff;
}
.flipbook-controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.flipbook-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--color-bg-card);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--duration) var(--ease);
color: var(--color-text);
}
.flipbook-btn:hover {
background: var(--color-primary);
color: #fff;
}
.flipbook-counter {
font-size: 0.875rem;
color: var(--color-text-secondary);
min-width: 60px;
text-align: center;
}
.flipbook-download {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
background: var(--color-primary);
color: #fff;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: opacity var(--duration) var(--ease);
}
.flipbook-download:hover {
opacity: 0.85;
}
/* Link bar contestuale — appare sotto i controlli quando la pagina ha link */
.flipbook-linkbar {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s var(--ease), opacity 0.3s var(--ease);
}
.flipbook-linkbar--visible {
max-height: 80px;
opacity: 1;
}
.flipbook-linkbar-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.8125rem;
line-height: 1;
}
.flipbook-linkbar-icon {
display: flex;
align-items: center;
color: var(--color-primary);
flex-shrink: 0;
}
.flipbook-linkbar-label {
color: var(--color-text-secondary);
font-weight: 500;
white-space: nowrap;
}
.flipbook-linkbar-url {
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
transition: color var(--duration) var(--ease);
}
.flipbook-linkbar-url:hover {
color: var(--color-primary);
}
.flipbook-linkbar-copy {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
flex-shrink: 0;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.flipbook-linkbar-copy:hover {
background: var(--color-border);
color: var(--color-text);
}
.flipbook-linkbar-copy--done {
color: #22c55e;
}
/* ═══ FLIPBOOK — Rotate Overlay (phone portrait) ═══ */
.flipbook-rotate-overlay {
display: none;
position: absolute;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
}
.flipbook-rotate--visible {
display: flex;
}
.flipbook-rotate-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding: var(--space-xl);
text-align: center;
max-width: 280px;
}
.flipbook-rotate-icon {
color: #fff;
animation: flipbook-rotate-anim 2s ease-in-out infinite;
}
@keyframes flipbook-rotate-anim {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-90deg); }
50% { transform: rotate(-90deg); }
75% { transform: rotate(0deg); }
}
.flipbook-rotate-msg {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9375rem;
line-height: 1.5;
margin: 0;
}
.flipbook-rotate-dismiss {
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: rgba(255, 255, 255, 0.7);
font-size: 0.8125rem;
cursor: pointer;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.flipbook-rotate-dismiss:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
/* ═══ FLIPBOOK — Phone portrait optimization ═══ */
@media (max-width: 767px) and (orientation: portrait) {
.flipbook-wrapper {
padding: var(--space-sm) var(--space-xs);
gap: var(--space-sm);
min-height: 100dvh;
}
.flipbook-wrapper.flipbook-immersive {
padding-top: 48px; /* room for floating back button */
}
.flipbook-container {
max-width: 100%;
min-height: 50dvh; /* give StPageFlip vertical room to stretch */
}
.flipbook-controls {
gap: var(--space-xs);
}
.flipbook-btn {
width: 36px;
height: 36px;
}
.flipbook-zoom-btn {
width: 32px;
height: 32px;
}
.flipbook-counter {
font-size: 0.75rem;
min-width: 48px;
}
.flipbook-download {
font-size: 0.8125rem;
padding: var(--space-xs) var(--space-sm);
}
.flipbook-linkbar-item {
font-size: 0.75rem;
padding: var(--space-xs) var(--space-sm);
}
.flipbook-linkbar-url {
max-width: 140px;
}
.flipbook-fullscreen-btn {
bottom: -36px;
width: 30px;
height: 30px;
}
}
/* ═══ FLIPBOOK — Phone landscape optimization ═══ */
@media (max-width: 900px) and (orientation: landscape) {
.flipbook-wrapper.flipbook-phone-landscape {
padding: var(--space-xs) var(--space-sm);
gap: 0;
min-height: 100dvh;
}
.flipbook-wrapper.flipbook-phone-landscape .flipbook-container {
max-width: 100%;
min-height: calc(100dvh - 60px);
}
/* Overlay controls in landscape immersive */
.flipbook-wrapper.flipbook-phone-landscape.flipbook-immersive {
position: relative;
}
.flipbook-wrapper.flipbook-phone-landscape.flipbook-immersive .flipbook-controls {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 15;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--radius-full);
padding: 4px 12px;
gap: var(--space-xs);
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.flipbook-wrapper.flipbook-phone-landscape.flipbook-immersive .flipbook-controls .flipbook-btn {
background: transparent;
box-shadow: none;
color: rgba(255, 255, 255, 0.9);
width: 32px;
height: 32px;
}
.flipbook-wrapper.flipbook-phone-landscape.flipbook-immersive .flipbook-controls .flipbook-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.flipbook-wrapper.flipbook-phone-landscape.flipbook-immersive .flipbook-controls .flipbook-zoom-btn {
background: transparent;
box-shadow: none;
color: rgba(255, 255, 255, 0.9);
width: 28px;
height: 28px;
}
.flipbook-wrapper.flipbook-phone-landscape.flipbook-immersive .flipbook-controls .flipbook-counter {
color: rgba(255, 255, 255, 0.7);
font-size: 0.75rem;
min-width: 40px;
}
.flipbook-wrapper.flipbook-phone-landscape.flipbook-immersive .flipbook-controls.flipbook-controls--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.flipbook-wrapper.flipbook-phone-landscape .flipbook-download {
display: none;
}
.flipbook-wrapper.flipbook-phone-landscape .flipbook-fullscreen-btn {
display: none;
}
.flipbook-wrapper.flipbook-phone-landscape .flipbook-linkbar {
display: none;
}
}
/* ═══ FLIPBOOK — Floating back button (immersive mode) ═══ */
.flipbook-back-btn {
display: none;
}
.flipbook-immersive .flipbook-back-btn {
display: flex;
position: absolute;
top: 8px;
left: 8px;
z-index: 25;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
}
.flipbook-immersive .flipbook-back-btn:hover {
background: rgba(0, 0, 0, 0.55);
}
/* Tap-zone rules removed in v3.11.15 — they sat at z-index:5 above
StPageFlip's canvas and swallowed touchstart/move events, breaking
swipe-to-flip on phone/tablet. StPageFlip handles tap + swipe
natively via its internal listeners; Prev/Next buttons are the
fallback if a device's tap detection is flaky. */
/* ═══ FLIPBOOK — Hint arrow (show controls) ═══ */
.flipbook-hint-arrow {
display: none;
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 15;
width: 40px;
height: 28px;
border-radius: 14px;
border: none;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.7);
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, opacity 0.3s ease;
animation: flipbook-hint-pulse 2s ease-in-out infinite;
}
.flipbook-hint-arrow:hover {
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
@keyframes flipbook-hint-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* ═══ FLIPBOOK — Fullscreen pill button (phone) ═══ */
.flipbook-fullscreen-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-bg-card);
box-shadow: var(--shadow-sm);
color: var(--color-text);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.flipbook-fullscreen-pill:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
/* Hide pill in landscape phone (fullscreen less needed) */
@media (max-width: 900px) and (orientation: landscape) {
.flipbook-fullscreen-pill {
display: none;
}
}