@charset "UTF-8";
/*
* =============================================================================
* Milano Unica - Tendenze PE28 - CSS unificato
* =============================================================================
* File unico per tutti i template PE28: homepage, collezioni, colori, media.
* Caricato via esterno + font via (no @import per performance).
*
* Struttura:
* 1. BASE - Layout, navbar, footer, gold section, tipografia, variabili
* 2. PUNK - Homepage (hero, content, temi)
* 3. COLLEZIONE - Pagine collezione (hero + fade contenuto, slider, lightbox, video)
* 4. COLORI MEDIA - Pagine colori e media
* 5. HEADER OVERLAY - Menu full-screen, override stili globali
* 6. MOBILE - Ottimizzazioni responsive (991px, 767px, 480px)
* =============================================================================
*/
/* =============================================================================
* 1. BASE - Layout condiviso, navbar, footer, gold section, tipografia
* ============================================================================= */
/* Font caricati via nell'HTML per evitare @import bloccante */
/* Evita scroll laterale e fascia bianca tra header e body su tutte le pagine PE28 */
html:has(.tendenze-punk-pe28),
html:has(.tendenze-collezione-pe28),
html:has(.tendenze-colori-pe28),
html:has(.tendenze-media-pe28) {
overflow-x: hidden;
}
html:has(.tendenze-punk-pe28) body,
html:has(.tendenze-collezione-pe28) body,
html:has(.tendenze-colori-pe28) body,
html:has(.tendenze-media-pe28) body {
background-color: #1c2a25;
}
/* Variabili e layout base */
.tendenze-punk-pe28,
.tendenze-collezione-pe28,
.tendenze-colori-pe28,
.tendenze-media-pe28 {
--bianco: #fff;
--Gold: #B2883E;
--pantone-17-1040-tpg: #B2883E;
--verde-scuro: #1c2a25;
/* Corpo: viewport sotto 1280 — fluido 16px→18px; da 1280px vedi media query sotto */
--pe28-text-size: clamp(16px, calc(16px + (100vw - 320px) * 2 / 960), 18px);
--pe28-line-height: 142.857%;
--pe28-text-spacing: 0.01em;
font-family: "Inter", sans-serif;
background-color: #1c2a25;
color: var(--bianco, #fff);
min-height: 100vh;
overflow-x: hidden;
}
.tendenze-collezione-pe28 {
--pe28-collection-title-gradient: linear-gradient(240deg, #bf8816 0%, #cd9727 24.73%, #eebc55 41.71%, #ba8922 83.9%, #af7d13 100.87%);
}
/* Corpo: 1280–1440 fluido 18px→21px; ≥1440 cap 21px */
@media (min-width: 1280px) {
.tendenze-punk-pe28,
.tendenze-collezione-pe28,
.tendenze-colori-pe28,
.tendenze-media-pe28 {
--pe28-text-size: clamp(18px, calc(18px + (100vw - 1280px) * 3 / 160), 21px);
}
}
/* --- Navbar --- */
.tendenze-punk-pe28 .punk-navbar,
.tendenze-collezione-pe28 .col-navbar,
.tendenze-colori-pe28 .col-navbar,
.tendenze-media-pe28 .col-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 90px;
background-color: #1c2a25;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 40px;
z-index: 1000;
}
.tendenze-punk-pe28 .punk-navbar-inner,
.tendenze-collezione-pe28 .col-navbar-inner,
.tendenze-colori-pe28 .col-navbar-inner,
.tendenze-media-pe28 .col-navbar-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
width: 100%;
max-width: 1440px;
}
.tendenze-punk-pe28 .punk-logo,
.tendenze-collezione-pe28 .col-logo,
.tendenze-colori-pe28 .col-logo,
.tendenze-media-pe28 .col-logo {
width: 192px;
height: 24px;
display: block;
justify-self: start;
}
.tendenze-punk-pe28 .punk-logo img,
.tendenze-collezione-pe28 .col-logo img,
.tendenze-colori-pe28 .col-logo img,
.tendenze-media-pe28 .col-logo img {
width: 100%;
height: auto;
}
.tendenze-punk-pe28 .punk-logo-fallback,
.tendenze-collezione-pe28 .col-logo-fallback,
.tendenze-colori-pe28 .col-logo-fallback,
.tendenze-media-pe28 .col-logo-fallback {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tendenze-punk-pe28 .punk-nav-links,
.tendenze-collezione-pe28 .col-nav-links,
.tendenze-colori-pe28 .col-nav-links,
.tendenze-media-pe28 .col-nav-links {
display: flex;
align-items: center;
gap: 20px;
justify-self: center;
grid-column: 2;
}
.tendenze-punk-pe28 .punk-nav-link,
.tendenze-collezione-pe28 .col-nav-link,
.tendenze-colori-pe28 .col-nav-link,
.tendenze-media-pe28 .col-nav-link {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 21px;
color: #B2883E;
text-transform: uppercase;
text-decoration: none;
padding: 15px;
letter-spacing: 0.02em;
border: 2px solid transparent;
border-radius: 5px;
}
.tendenze-punk-pe28 .punk-nav-link:hover,
.tendenze-collezione-pe28 .col-nav-link:hover,
.tendenze-colori-pe28 .col-nav-link:hover,
.tendenze-media-pe28 .col-nav-link:hover {
border-color: #B2883E;
}
.tendenze-collezione-pe28 .col-nav-link.active,
.tendenze-collezione-pe28 .col-nav-link.active:hover {
border-color: #B2883E;
}
.tendenze-punk-pe28 .punk-nav-divider,
.tendenze-collezione-pe28 .col-nav-divider,
.tendenze-colori-pe28 .col-nav-divider,
.tendenze-media-pe28 .col-nav-divider {
width: 1px;
height: 23px;
background-color: #B2883E;
}
.tendenze-punk-pe28 .punk-menu-toggle,
.tendenze-collezione-pe28 .col-menu-toggle,
.tendenze-colori-pe28 .col-menu-toggle,
.tendenze-media-pe28 .col-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 29px;
height: 16px;
background: none;
border: none;
cursor: pointer;
padding: 0;
justify-self: end;
grid-column: 3;
}
.tendenze-punk-pe28 .tendenze-menu-toggle-icon--menu,
.tendenze-collezione-pe28 .tendenze-menu-toggle-icon--menu,
.tendenze-colori-pe28 .tendenze-menu-toggle-icon--menu,
.tendenze-media-pe28 .tendenze-menu-toggle-icon--menu {
display: block;
width: 29px;
height: 16px;
}
/* --- Footer --- */
.tendenze-punk-pe28 .punk-footer {
background-color: #ffffff;
padding: 50px 40px;
min-height: 140px;
}
.tendenze-collezione-pe28 .col-footer,
.tendenze-colori-pe28 .col-footer,
.tendenze-media-pe28 .col-footer {
background-color: #ffffff;
padding: 50px 40px;
}
.tendenze-punk-pe28 .punk-footer-inner,
.tendenze-collezione-pe28 .col-footer-inner,
.tendenze-colori-pe28 .col-footer-inner,
.tendenze-media-pe28 .col-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
max-width: 1440px;
margin: 0 auto;
}
.tendenze-punk-pe28 .punk-footer-logo,
.tendenze-collezione-pe28 .col-footer-logo,
.tendenze-colori-pe28 .col-footer-logo,
.tendenze-media-pe28 .col-footer-logo {
width: 192px;
height: 24px;
display: block;
}
.tendenze-punk-pe28 .punk-footer-logo img,
.tendenze-collezione-pe28 .col-footer-logo img,
.tendenze-colori-pe28 .col-footer-logo img,
.tendenze-media-pe28 .col-footer-logo img {
width: 100%;
height: auto;
}
.tendenze-punk-pe28 .punk-logo-fallback-dark,
.tendenze-collezione-pe28 .col-logo-fallback-dark,
.tendenze-colori-pe28 .col-logo-fallback-dark,
.tendenze-media-pe28 .col-logo-fallback-dark {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 18px;
color: #2b2b2a !important;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tendenze-punk-pe28 .punk-footer-loghi,
.tendenze-collezione-pe28 .col-footer-loghi,
.tendenze-colori-pe28 .col-footer-loghi,
.tendenze-media-pe28 .col-footer-loghi {
display: flex;
align-items: center;
gap: 33.33px;
}
.tendenze-punk-pe28 .punk-footer-logo-img,
.tendenze-collezione-pe28 .col-footer-logo-img,
.tendenze-colori-pe28 .col-footer-logo-img,
.tendenze-media-pe28 .col-footer-logo-img {
object-fit: contain;
flex-shrink: 0;
}
.tendenze-punk-pe28 .punk-footer-logo-ministero,
.tendenze-collezione-pe28 .col-footer-logo-ministero,
.tendenze-colori-pe28 .col-footer-logo-ministero,
.tendenze-media-pe28 .col-footer-logo-ministero {
width: 167.615px;
height: 47.142px;
aspect-ratio: 32/9;
}
.tendenze-punk-pe28 .punk-footer-logo-ita,
.tendenze-collezione-pe28 .col-footer-logo-ita,
.tendenze-colori-pe28 .col-footer-logo-ita,
.tendenze-media-pe28 .col-footer-logo-ita {
width: 85.922px;
height: 44.237px;
aspect-ratio: 85.92/44.24;
}
.tendenze-punk-pe28 .punk-footer-logo-opportunity,
.tendenze-collezione-pe28 .col-footer-logo-opportunity,
.tendenze-colori-pe28 .col-footer-logo-opportunity,
.tendenze-media-pe28 .col-footer-logo-opportunity {
width: 97.563px;
height: 16.332px;
aspect-ratio: 227/38;
}
.tendenze-punk-pe28 .punk-footer-logo-divider,
.tendenze-collezione-pe28 .col-footer-logo-divider,
.tendenze-colori-pe28 .col-footer-logo-divider,
.tendenze-media-pe28 .col-footer-logo-divider {
height: 51px;
width: 1px;
flex-shrink: 0;
object-fit: contain;
}
.tendenze-punk-pe28 .punk-footer-legal,
.tendenze-collezione-pe28 .col-footer-legal,
.tendenze-colori-pe28 .col-footer-legal,
.tendenze-media-pe28 .col-footer-legal {
font-family: "Heebo", sans-serif;
font-size: 14px;
font-weight: 400;
color: #2b2b2a;
text-align: right;
text-transform: uppercase;
line-height: 26px;
}
.tendenze-punk-pe28 .punk-footer-legal a,
.tendenze-collezione-pe28 .col-footer-legal a,
.tendenze-colori-pe28 .col-footer-legal a,
.tendenze-media-pe28 .col-footer-legal a {
color: #2b2b2a;
text-decoration: none;
padding: 4px 8px;
margin: -4px -8px;
border: 2px solid transparent;
border-radius: 5px;
}
.tendenze-punk-pe28 .punk-footer-legal a:hover,
.tendenze-collezione-pe28 .col-footer-legal a:hover,
.tendenze-colori-pe28 .col-footer-legal a:hover,
.tendenze-media-pe28 .col-footer-legal a:hover {
border-color: #2b2b2a;
}
/* --- Gold section (Design Figma 1857-9212) --- */
.tendenze-punk-pe28 .punk-gold-section,
.tendenze-collezione-pe28 .col-gold-section,
.tendenze-colori-pe28 .col-gold-section,
.tendenze-media-pe28 .col-gold-section {
padding: 80px 40px 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #B2883E;
}
.tendenze-punk-pe28 .punk-gold-content,
.tendenze-collezione-pe28 .col-gold-content,
.tendenze-colori-pe28 .col-gold-content,
.tendenze-media-pe28 .col-gold-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 70px;
text-align: center;
width: 100%;
max-width: 940px;
}
.tendenze-punk-pe28 .punk-gold-titles,
.tendenze-collezione-pe28 .col-gold-section .punk-gold-titles,
.tendenze-colori-pe28 .col-gold-section .punk-gold-titles,
.tendenze-media-pe28 .col-gold-section .punk-gold-titles {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 100%;
}
.tendenze-punk-pe28 .punk-gold-section .punk-title-main.punk-title-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-title-main.punk-title-dark,
.tendenze-colori-pe28 .col-gold-section .punk-title-main.punk-title-dark,
.tendenze-media-pe28 .col-gold-section .punk-title-main.punk-title-dark {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(48px, 10vw, 125px);
line-height: 1;
letter-spacing: 6.25px;
color: #1c2a25 !important;
text-transform: uppercase;
margin: 0;
background: none;
-webkit-text-fill-color: #1c2a25;
filter: none;
}
.tendenze-punk-pe28 .punk-underline-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-underline-dark,
.tendenze-colori-pe28 .col-gold-section .punk-underline-dark,
.tendenze-media-pe28 .col-gold-section .punk-underline-dark {
width: 100%;
max-width: 785px;
height: 4px;
border-radius: 4px;
background: #1c2a25 !important;
box-shadow: none;
}
.tendenze-punk-pe28 .punk-gold-section .punk-title-sub.punk-title-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-title-sub.punk-title-dark,
.tendenze-colori-pe28 .col-gold-section .punk-title-sub.punk-title-dark,
.tendenze-media-pe28 .col-gold-section .punk-title-sub.punk-title-dark {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(28px, 6vw, 70px);
line-height: 1;
letter-spacing: 2.8px;
color: #1c2a25 !important;
text-transform: uppercase;
margin: 0;
background: none;
-webkit-text-fill-color: #1c2a25;
filter: none;
}
.tendenze-punk-pe28 .punk-gold-section .punk-season.punk-season-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-season.punk-season-dark,
.tendenze-colori-pe28 .col-gold-section .punk-season.punk-season-dark,
.tendenze-media-pe28 .col-gold-section .punk-season.punk-season-dark {
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: 32.5px;
line-height: normal;
letter-spacing: 2.6px;
color: #1c2a25;
text-transform: uppercase;
text-align: center;
margin: 0 0 30px 0;
}
.tendenze-punk-pe28 .punk-gold-section .col-gold-nav,
.tendenze-collezione-pe28 .col-gold-nav,
.tendenze-colori-pe28 .col-gold-nav,
.tendenze-media-pe28 .col-gold-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
}
.tendenze-punk-pe28 .punk-gold-section .col-gold-link,
.tendenze-collezione-pe28 .col-gold-link,
.tendenze-colori-pe28 .col-gold-link,
.tendenze-media-pe28 .col-gold-link {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 21px;
color: #1c2a25 !important;
text-transform: uppercase;
text-decoration: none;
padding: 15px;
border: 2px solid transparent;
border-radius: 5px;
}
.tendenze-punk-pe28 .punk-gold-section .col-gold-link:hover,
.tendenze-collezione-pe28 .col-gold-link:hover,
.tendenze-colori-pe28 .col-gold-link:hover,
.tendenze-media-pe28 .col-gold-link:hover {
border-color: #1c2a25;
}
.tendenze-punk-pe28 .punk-gold-section .col-gold-nav .col-nav-divider,
.tendenze-collezione-pe28 .col-gold-nav .col-nav-divider,
.tendenze-colori-pe28 .col-gold-nav .col-nav-divider,
.tendenze-media-pe28 .col-gold-nav .col-nav-divider {
width: 1px;
height: 23px;
background-color: #1c2a25;
}
/* --- Body text: Inter Light 200 + strong 800 --- */
.tendenze-punk-pe28 .punk-body-text,
.tendenze-collezione-pe28 .col-body-text,
.tendenze-colori-pe28 .col-body-text,
.tendenze-media-pe28 .col-body-text {
font-family: "Inter", sans-serif;
font-size: var(--pe28-text-size, 18px);
font-weight: 200;
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
color: var(--bianco, #fff);
font-style: normal;
text-align: left;
}
.tendenze-punk-pe28 .punk-body-text p,
.tendenze-collezione-pe28 .col-body-text p,
.tendenze-colori-pe28 .col-body-text p,
.tendenze-media-pe28 .col-body-text p {
font-family: "Inter", sans-serif;
font-size: var(--pe28-text-size, 18px);
font-weight: 200;
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
margin: 0 0 20px 0;
}
.tendenze-punk-pe28 .punk-body-text p:last-child,
.tendenze-collezione-pe28 .col-body-text p:last-child,
.tendenze-colori-pe28 .col-body-text p:last-child,
.tendenze-media-pe28 .col-body-text p:last-child {
margin-bottom: 0;
}
.tendenze-punk-pe28 .punk-body-text strong,
.tendenze-collezione-pe28 .col-body-text strong,
.tendenze-colori-pe28 .col-body-text strong,
.tendenze-media-pe28 .col-body-text strong {
font-weight: 800;
letter-spacing: 0.01em;
color: #ffffff;
}
/* Corsivo = Inter Light 200 (non Regular), anche dentro strong */
.tendenze-punk-pe28 .punk-body-text em,
.tendenze-collezione-pe28 .col-body-text em,
.tendenze-colori-pe28 .col-body-text em,
.tendenze-media-pe28 .col-body-text em,
.tendenze-punk-pe28 .punk-list li em,
.tendenze-collezione-pe28 .col-list li em,
.tendenze-collezione-pe28 .col-colors-desc em {
font-family: "Inter", sans-serif;
font-style: italic;
font-weight: 200;
}
.tendenze-punk-pe28 .punk-body-text strong em,
.tendenze-collezione-pe28 .col-body-text strong em,
.tendenze-collezione-pe28 .col-list li strong em {
font-weight: 200;
font-style: italic;
}
/* --- Base: media queries --- */
@media (max-width: 991px) {
/* Mobile: header solo logo + toggle, voci collezioni solo nel dropdown overlay */
.tendenze-punk-pe28 .punk-nav-links,
.tendenze-collezione-pe28 .col-nav-links,
.tendenze-colori-pe28 .col-nav-links,
.tendenze-media-pe28 .col-nav-links,
.tendenze-pe28-header-wrap .punk-nav-links,
.tendenze-pe28-header-wrap .col-nav-links {
display: none !important;
}
.tendenze-punk-pe28 .punk-navbar-inner,
.tendenze-collezione-pe28 .col-navbar-inner,
.tendenze-colori-pe28 .col-navbar-inner,
.tendenze-media-pe28 .col-navbar-inner {
position: relative;
grid-template-columns: minmax(0, 1fr) auto;
}
.tendenze-punk-pe28 .punk-menu-toggle,
.tendenze-collezione-pe28 .col-menu-toggle,
.tendenze-colori-pe28 .col-menu-toggle,
.tendenze-media-pe28 .col-menu-toggle {
grid-column: 2;
}
.tendenze-pe28-header-wrap .punk-navbar-inner,
.tendenze-pe28-header-wrap .col-navbar-inner {
grid-template-columns: minmax(0, 1fr) auto !important;
}
.tendenze-pe28-header-wrap .punk-menu-toggle,
.tendenze-pe28-header-wrap .col-menu-toggle {
grid-column: 2 !important;
}
.tendenze-punk-pe28 .punk-footer-inner,
.tendenze-collezione-pe28 .col-footer-inner,
.tendenze-colori-pe28 .col-footer-inner,
.tendenze-media-pe28 .col-footer-inner {
flex-direction: column;
align-items: center;
text-align: center;
}
.tendenze-punk-pe28 .punk-footer-legal,
.tendenze-collezione-pe28 .col-footer-legal,
.tendenze-colori-pe28 .col-footer-legal,
.tendenze-media-pe28 .col-footer-legal {
text-align: center;
}
.tendenze-punk-pe28 .punk-footer-loghi,
.tendenze-collezione-pe28 .col-footer-loghi,
.tendenze-colori-pe28 .col-footer-loghi,
.tendenze-media-pe28 .col-footer-loghi {
justify-content: center;
}
.tendenze-punk-pe28 .punk-gold-section,
.tendenze-collezione-pe28 .col-gold-section,
.tendenze-colori-pe28 .col-gold-section,
.tendenze-media-pe28 .col-gold-section {
padding: 60px 20px 80px;
}
}
@media (min-width: 1200px) {
.tendenze-punk-pe28 .punk-gold-content,
.tendenze-collezione-pe28 .col-gold-content,
.tendenze-colori-pe28 .col-gold-content,
.tendenze-media-pe28 .col-gold-content {
max-width: 1140px;
}
}
/* Toggle menu sempre visibile anche su desktop (le collezioni sono in navbar; nel dropdown solo HOME / COLORI / MEDIA) */
@media (max-width: 767px) {
.tendenze-punk-pe28 .punk-navbar,
.tendenze-collezione-pe28 .col-navbar,
.tendenze-colori-pe28 .col-navbar,
.tendenze-media-pe28 .col-navbar {
padding: 10px 20px;
}
.tendenze-punk-pe28 .punk-logo,
.tendenze-collezione-pe28 .col-logo,
.tendenze-colori-pe28 .col-logo,
.tendenze-media-pe28 .col-logo {
width: 140px;
}
.tendenze-punk-pe28 .punk-footer,
.tendenze-collezione-pe28 .col-footer,
.tendenze-colori-pe28 .col-footer,
.tendenze-media-pe28 .col-footer {
padding: 30px 20px;
}
.tendenze-punk-pe28 .punk-footer-loghi,
.tendenze-collezione-pe28 .col-footer-loghi,
.tendenze-colori-pe28 .col-footer-loghi,
.tendenze-media-pe28 .col-footer-loghi {
flex-direction: column;
gap: 20px;
}
.tendenze-punk-pe28 .punk-footer-logo-divider,
.tendenze-collezione-pe28 .col-footer-logo-divider,
.tendenze-colori-pe28 .col-footer-logo-divider,
.tendenze-media-pe28 .col-footer-logo-divider {
display: none;
}
.tendenze-punk-pe28 .punk-gold-section,
.tendenze-collezione-pe28 .col-gold-section,
.tendenze-colori-pe28 .col-gold-section,
.tendenze-media-pe28 .col-gold-section {
padding: 40px 15px 60px;
}
.tendenze-punk-pe28 .punk-gold-section .col-gold-nav,
.tendenze-collezione-pe28 .col-gold-nav,
.tendenze-colori-pe28 .col-gold-nav,
.tendenze-media-pe28 .col-gold-nav {
flex-direction: column;
gap: 15px;
}
.tendenze-punk-pe28 .punk-gold-section .col-gold-nav .col-nav-divider,
.tendenze-collezione-pe28 .col-gold-nav .col-nav-divider,
.tendenze-colori-pe28 .col-gold-nav .col-nav-divider,
.tendenze-media-pe28 .col-gold-nav .col-nav-divider {
display: none;
}
}
/* =============================================================================
* 2. PUNK - Homepage (hero, content, temi)
* ============================================================================= */
/* --- Hero --- */
.tendenze-punk-pe28 .punk-hero {
padding: 180px 40px 120px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 70px;
perspective: 900px;
perspective-origin: center center;
}
.tendenze-punk-pe28 .punk-hero-titles {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
padding: 80px;
margin: -80px;
width: calc(100% + 160px);
}
.tendenze-punk-pe28 .punk-hero-titles .punk-section {
opacity: 0;
}
.tendenze-punk-pe28 .punk-hero-titles .punk-title-underline-wrap {
width: 100%;
max-width: 785px;
overflow: visible;
}
.tendenze-punk-pe28 .punk-hero-titles .punk-title-underline {
transform: scaleX(0);
transform-origin: center;
height: 2px;
width: 100%;
max-width: 785px;
background: #B2883E;
border-radius: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.tendenze-punk-pe28 .punk-hero-titles.punk-hero-animated .punk-section {
opacity: 0;
animation: punk-titles-fade 1s ease-out 2s forwards;
}
.tendenze-punk-pe28 .punk-hero-titles.punk-hero-animated .punk-title-underline {
animation: punk-line-entrance 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes punk-line-entrance {
0% { transform: scaleX(0); height: 2px; }
55% { transform: scaleX(1); height: 2px; }
100% { transform: scaleX(1); height: 3px; }
}
@keyframes punk-titles-fade {
to { opacity: 1; }
}
.tendenze-punk-pe28 .punk-hero .punk-season {
opacity: 0;
}
.tendenze-punk-pe28 .punk-hero-titles.punk-hero-animated ~ .punk-season {
animation: punk-subtitle-fade 0.8s ease-out 3.2s forwards;
}
@keyframes punk-subtitle-fade {
to { opacity: 1; }
}
.tendenze-punk-pe28 .punk-body-text > *,
.tendenze-punk-pe28 .punk-themes-intro,
.tendenze-punk-pe28 .punk-themes-nav {
opacity: 1;
transform: translateY(0);
}
.tendenze-punk-pe28 .punk-section {
transform-style: preserve-3d;
will-change: transform;
}
/* Titoli gold homepage hero — gradiente originale (indipendente da --Gold #B2883E) */
.tendenze-punk-pe28 .punk-title-main {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(60px, 10vw, 125px);
text-transform: uppercase;
letter-spacing: 6.25px;
margin: 0;
line-height: 1.1;
background: linear-gradient(180deg, #bf8816 0%, #cd9727 24.5%, #eebc55 41.3%, #ba8922 83.2%, #af7d13 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: none;
}
.tendenze-punk-pe28 .punk-title-sub {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(36px, 6vw, 70px);
text-transform: uppercase;
letter-spacing: 2.8px;
margin: 0;
line-height: 1.1;
background: linear-gradient(180deg, #bf8816 0%, #cd9727 24.5%, #eebc55 41.3%, #ba8922 83.2%, #af7d13 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: none;
}
.tendenze-punk-pe28 .punk-season {
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: clamp(20px, 2.5vw, 32.5px);
color: #B2883E;
text-transform: uppercase;
letter-spacing: 2.6px;
margin: 0;
}
/* --- Content --- */
.tendenze-punk-pe28 .punk-content {
padding: 0 40px 100px;
max-width: 940px;
margin: 0 auto;
}
.tendenze-punk-pe28 .punk-content-inner {
display: flex;
flex-direction: column;
gap: 60px;
}
.tendenze-punk-pe28 .punk-body-text p {
font-family: "Inter", sans-serif;
font-weight: 200;
font-size: var(--pe28-text-size, 18px);
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
margin: 0 0 22px 0;
}
.tendenze-punk-pe28 .punk-list {
margin: 0 0 30px 0;
padding-left: 24px;
list-style: none;
}
.tendenze-punk-pe28 .punk-list li {
font-family: "Inter", sans-serif;
font-size: var(--pe28-text-size, 18px);
font-weight: 200;
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
color: var(--bianco, #fff);
margin: 0;
padding-left: 10px;
position: relative;
}
.tendenze-punk-pe28 .punk-list li:last-child {
margin-bottom: 0;
}
.tendenze-punk-pe28 .punk-list li::before {
content: "•";
position: absolute;
left: -15px;
color: #ffffff;
}
.tendenze-punk-pe28 .punk-list strong {
font-weight: 800;
letter-spacing: 0.01em;
color: #ffffff;
}
.tendenze-punk-pe28 .punk-themes-intro p {
font-family: "Inter", sans-serif;
text-align: center;
font-size: var(--pe28-text-size, 18px);
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
font-weight: 200;
}
.tendenze-punk-pe28 .punk-themes-intro strong {
font-weight: 800;
letter-spacing: 0.01em;
color: #ffffff;
}
.tendenze-punk-pe28 .punk-themes-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
}
.tendenze-punk-pe28 .punk-theme-link {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 21px;
color: #B2883E;
text-transform: uppercase;
text-decoration: none;
padding: 15px;
border: 2px solid transparent;
border-radius: 5px;
}
.tendenze-punk-pe28 .punk-theme-link:hover {
border-color: #B2883E;
}
.tendenze-punk-pe28 .punk-themes-nav-dark {
gap: 50px;
}
.tendenze-punk-pe28 .punk-themes-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.tendenze-punk-pe28 .punk-theme-link-dark {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 21px;
color: #1c2a25 !important;
text-transform: uppercase;
text-decoration: none;
padding: 15px;
border: 2px solid transparent;
border-radius: 5px;
}
.tendenze-punk-pe28 .punk-theme-link-dark:hover {
border-color: #1c2a25;
}
.tendenze-punk-pe28 .punk-nav-divider-dark {
width: 1px;
height: 23px;
background-color: #1c2a25;
}
/* --- Punk: media queries --- */
@media (min-width: 1200px) {
.tendenze-punk-pe28 .punk-content {
max-width: 1140px;
}
}
@media (max-width: 991px) {
.tendenze-punk-pe28 .punk-hero {
padding: 120px 20px 60px;
gap: 40px;
}
.tendenze-punk-pe28 .punk-content {
padding: 0 20px 60px;
}
.tendenze-punk-pe28 .punk-body-text,
.tendenze-punk-pe28 .punk-body-text p {
line-height: 142.857%;
font-weight: 200;
}
.tendenze-punk-pe28 .punk-themes-nav {
gap: 20px;
}
.tendenze-punk-pe28 .punk-theme-link {
font-size: 18px;
}
.tendenze-punk-pe28 .punk-theme-link-dark {
font-size: 18px;
}
}
@media (max-width: 767px) {
.tendenze-punk-pe28 .punk-hero {
padding: 100px 15px 40px;
gap: 30px;
}
.tendenze-punk-pe28 .punk-title-main {
font-size: 48px;
}
.tendenze-punk-pe28 .punk-title-sub {
font-size: 28px;
}
.tendenze-punk-pe28 .punk-season {
font-size: 13px;
}
/* Gold section: gap ridotto su mobile */
.tendenze-punk-pe28 .punk-gold-content,
.tendenze-collezione-pe28 .col-gold-content,
.tendenze-colori-pe28 .col-gold-content,
.tendenze-media-pe28 .col-gold-content {
gap: 30px;
}
/* Gold section: stesse dimensioni e gap dell'hero su mobile */
.tendenze-punk-pe28 .punk-gold-titles,
.tendenze-collezione-pe28 .col-gold-section .punk-gold-titles,
.tendenze-colori-pe28 .col-gold-section .punk-gold-titles,
.tendenze-media-pe28 .col-gold-section .punk-gold-titles {
gap: 15px;
}
.tendenze-punk-pe28 .punk-gold-section .punk-title-main.punk-title-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-title-main.punk-title-dark,
.tendenze-colori-pe28 .col-gold-section .punk-title-main.punk-title-dark,
.tendenze-media-pe28 .col-gold-section .punk-title-main.punk-title-dark {
font-size: 48px;
}
.tendenze-punk-pe28 .punk-gold-section .punk-title-sub.punk-title-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-title-sub.punk-title-dark,
.tendenze-colori-pe28 .col-gold-section .punk-title-sub.punk-title-dark,
.tendenze-media-pe28 .col-gold-section .punk-title-sub.punk-title-dark {
font-size: 28px;
}
.tendenze-punk-pe28 .punk-gold-section .punk-season.punk-season-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-season.punk-season-dark,
.tendenze-colori-pe28 .col-gold-section .punk-season.punk-season-dark,
.tendenze-media-pe28 .col-gold-section .punk-season.punk-season-dark {
font-size: 16px;
}
.tendenze-punk-pe28 .punk-content {
padding: 0 15px 40px;
}
.tendenze-punk-pe28 .punk-body-text,
.tendenze-punk-pe28 .punk-body-text p {
line-height: 142.857%;
font-weight: 200;
}
.tendenze-punk-pe28 .punk-themes-nav {
flex-direction: column;
gap: 15px;
}
.tendenze-punk-pe28 .punk-nav-divider {
display: none;
}
.tendenze-punk-pe28 .punk-themes-nav-dark {
flex-direction: column;
gap: 15px;
}
.tendenze-punk-pe28 .punk-themes-secondary {
flex-direction: column;
gap: 15px;
}
.tendenze-punk-pe28 .punk-themes-secondary .punk-nav-divider-dark {
display: none;
}
.tendenze-punk-pe28 .punk-nav-divider-dark {
display: none;
}
}
/* =============================================================================
* 3. COLLEZIONE - Pagine collezione (hero + fade contenuto, slider, lightbox, video)
* ============================================================================= */
.tendenze-collezione-pe28 {
/* Easing morbido per titolo / hero / stage (no “scatti”) */
--pe28-col-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--pe28-col-ease-soft: cubic-bezier(0.22, 0.99, 0.36, 1);
--pe28-col-dur-title: 1.5s;
--pe28-col-dur-stage: 1.4s;
--pe28-col-dur-inner: 1.3s;
--pe28-col-dur-pad: 1.25s;
--pe28-col-dur-fade-in: 1.65s;
--pe28-col-title-fade-out: 0.7s;
--pe28-col-title-fade-final: 1.35s;
/* Dissolvenza titolo finale + .col-main + blocchi (allineata, un po’ più lenta) */
--pe28-col-reveal-fade: 1.35s;
}
.tendenze-collezione-pe28 .col-body {
overflow-x: hidden;
overflow-y: visible;
}
.tendenze-collezione-pe28 .col-hero,
.tendenze-collezione-pe28 .col-hero-stage,
.tendenze-collezione-pe28 .col-hero-inner {
overflow: visible;
}
.tendenze-collezione-pe28 .col-hero {
min-height: calc(100vh - 90px);
padding: 152.5px 40px 80px;
text-align: left;
position: relative;
transition: padding var(--pe28-col-dur-pad, 1.25s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1)),
min-height 1s var(--pe28-col-ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete {
min-height: 0;
transition: padding var(--pe28-col-dur-pad, 1.25s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1)),
min-height 1.1s var(--pe28-col-ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.tendenze-collezione-pe28 .col-hero-stage {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: left var(--pe28-col-dur-stage, 1.4s) var(--pe28-col-ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
top var(--pe28-col-dur-stage, 1.4s) var(--pe28-col-ease-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
transform var(--pe28-col-dur-stage, 1.4s) var(--pe28-col-ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.tendenze-collezione-pe28 .col-hero.col-hero-align-left .col-hero-stage {
left: max(40px, calc(50% - 430px));
top: 152.5px;
transform: translate(0, 0);
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete .col-hero-stage {
position: static;
left: auto;
top: auto;
transform: none;
margin-top: 0;
/* Blocca interpolazione left/transform dello stage centrato → layout finale (effetto “entra da sinistra”) */
transition: none;
}
.tendenze-collezione-pe28 .col-hero-inner {
width: fit-content;
max-width: 940px;
opacity: 1;
box-sizing: border-box;
display: flex;
justify-content: center;
transition: max-width var(--pe28-col-dur-inner, 1.3s) var(--pe28-col-ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Opacity solo sul titolo: fade in → fade out (centrato) → riappare col body (complete + col-title-visible) */
.tendenze-collezione-pe28 .col-hero.col-hero-centered .col-hero-inner {
opacity: 1;
}
.tendenze-collezione-pe28 .col-hero.col-hero-align-left .col-hero-inner {
max-width: 940px;
}
.tendenze-collezione-pe28 .col-hero.col-hero-title-left .col-hero-inner {
justify-content: flex-start;
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete .col-hero-inner {
max-width: 940px;
margin: 0 auto;
width: 100%;
padding-left: 40px;
opacity: 1;
/* Layout finale istantaneo: solo il titolo usa opacity (sotto .col-title-wrap) */
transition: none;
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete .col-title-wrap {
transform: none;
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete .col-title-main {
transition: none;
}
.tendenze-collezione-pe28 .col-title-main {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 6px;
margin: 0;
line-height: 1.1;
white-space: nowrap;
font-size: clamp(28px, 10vw, 120px);
transition: none;
background: var(--pe28-collection-title-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: none;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}
.tendenze-collezione-pe28 .col-hero.col-hero-shrink .col-title-main {
font-size: clamp(24px, 4vw, 68px);
}
.tendenze-collezione-pe28 .col-title-wrap {
display: inline-block;
opacity: 0;
transition: opacity var(--pe28-col-dur-fade-in, 1.65s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1));
}
.tendenze-collezione-pe28 .col-hero.col-hero-centered:not(.col-hero-title-out):not(.col-hero-complete) .col-title-wrap {
opacity: 1;
}
.tendenze-collezione-pe28 .col-hero.col-hero-title-out .col-title-wrap {
opacity: 0;
transition: opacity var(--pe28-col-title-fade-out, 0.7s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1));
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete:not(.col-title-visible) .col-title-wrap {
opacity: 0;
transition: opacity 0.05s linear;
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete.col-title-visible .col-title-wrap {
opacity: 1;
transform: none;
transition: opacity var(--pe28-col-reveal-fade, 0.95s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1));
}
/* Se title-out è rimasto per errore, il titolo deve comunque riapparire (specificità sopra a .col-hero-title-out) */
.tendenze-collezione-pe28 .col-hero.col-hero-complete.col-title-visible.col-hero-title-out .col-title-wrap {
opacity: 1;
}
.tendenze-collezione-pe28 .col-main {
padding: 0 40px 80px;
max-width: 940px;
margin: 0 auto;
opacity: 0;
visibility: hidden;
transform: none;
transition: opacity var(--pe28-col-reveal-fade, 0.95s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1)),
visibility 0s var(--pe28-col-reveal-fade, 0.95s);
}
.tendenze-collezione-pe28 .col-main.col-main-visible {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity var(--pe28-col-reveal-fade, 0.95s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1));
}
/* Blocchi nel main: solo dissolvenza (niente slide / translate), in linea con titolo e .col-main */
.tendenze-collezione-pe28 .col-main .col-fade-in {
opacity: 0;
transform: none;
transition: opacity var(--pe28-col-reveal-fade, 0.95s) var(--pe28-col-ease-soft, cubic-bezier(0.22, 0.99, 0.36, 1));
}
.tendenze-collezione-pe28 .col-main .col-fade-in.col-visible {
opacity: 1;
transform: none;
}
.tendenze-collezione-pe28 .col-main-inner {
display: flex;
flex-direction: column;
gap: 60px;
}
.tendenze-collezione-pe28 .col-hero-image {
margin: 0;
}
.tendenze-collezione-pe28 .col-hero-image img {
width: 100%;
max-width: 940px;
height: auto;
display: block;
}
.tendenze-collezione-pe28 .col-body-text + .col-video-section,
.tendenze-collezione-pe28 .col-hero-image + .col-video-section {
margin-top: -36px;
}
.tendenze-collezione-pe28 .col-video-section {
margin: 0;
padding-top: 30px;
display: flex;
align-items: flex-start;
justify-content: center;
align-self: stretch;
position: relative;
}
/* Stesso pattern di ai2627/pe27: emoji 🔊/🔇 su sfondo scuro, allineato al blocco video max 940px */
.tendenze-collezione-pe28 .col-video-section .toggle-audio.col-toggle-audio {
position: absolute;
bottom: 0;
right: max(0px, calc(50% - 470px + 30px));
padding: 6px 10px;
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
z-index: 3;
font-size: 20px;
line-height: 1;
}
/*
* Video: 1) linea che si allarga dal centro (clip-path inset)
* 2) poi alzata fluida 16:9 (padding-bottom % sulla larghezza)
*/
.tendenze-collezione-pe28 .col-video-expand {
max-width: 940px;
margin: 0 auto;
overflow: hidden;
width: 100%;
height: 0;
/* Sottile fascia per la fase “linea” visibile mentre si apre dal centro */
padding-bottom: 0.55%;
position: relative;
clip-path: inset(0 50% 0 50%);
}
.tendenze-collezione-pe28 .col-video-expand .col-video-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 1;
pointer-events: none;
}
.tendenze-collezione-pe28 .col-video-section.col-visible .col-video-expand {
animation: col-video-expand-anim 2.75s cubic-bezier(0.22, 0.99, 0.36, 1) forwards;
}
.tendenze-collezione-pe28 .col-video-section.col-visible .col-video-overlay {
animation: col-video-overlay-fade 2s cubic-bezier(0.22, 0.99, 0.36, 1) 1.15s forwards;
}
@keyframes col-video-expand-anim {
0% {
clip-path: inset(0 50% 0 50%);
padding-bottom: 0.55%;
}
/* Linea a tutta larghezza (apertura simmetrica dal centro) */
36% {
clip-path: inset(0 0 0 0);
padding-bottom: 0.55%;
}
/* Salita graduale fino al 16:9 */
100% {
clip-path: inset(0 0 0 0);
padding-bottom: 56.25%;
}
}
@keyframes col-video-overlay-fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.tendenze-collezione-pe28 .col-video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
background: #2b2b2a;
}
.tendenze-collezione-pe28 .col-section {
margin: 0;
}
.tendenze-collezione-pe28 .col-section-title {
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: 26px;
line-height: 32px;
letter-spacing: 0.02em;
color: #ffffff;
margin: 0 0 22px 0;
}
/* COLORI / COLORS — solo questo sottotitolo in Pantone 17-1040 TPG */
.tendenze-collezione-pe28 .col-section-title--colori {
color: var(--pantone-17-1040-tpg, #b2883e);
}
.tendenze-collezione-pe28 .col-list {
margin: 0;
padding-left: 24px;
list-style: disc;
}
.tendenze-collezione-pe28 .col-list li {
font-family: "Inter", sans-serif;
font-size: var(--pe28-text-size, 18px);
font-weight: 200;
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
color: var(--bianco, #fff);
margin: 0;
}
.tendenze-collezione-pe28 .col-list li:last-child {
margin-bottom: 0;
}
.tendenze-collezione-pe28 .col-list li strong {
font-weight: 800;
letter-spacing: 0.01em;
color: #ffffff;
}
.tendenze-collezione-pe28 .col-gallery .col-swatches {
display: flex;
align-items: center;
gap: 20px;
overflow: hidden;
}
.tendenze-collezione-pe28 .col-swatches-track {
display: flex;
gap: 20px;
transition: transform 0.3s ease;
flex: 1;
}
.tendenze-collezione-pe28 .col-swatch {
flex: 0 0 calc(25% - 15px);
min-width: 200px;
}
.tendenze-collezione-pe28 .col-swatch img,
.tendenze-collezione-pe28 .col-swatch-placeholder {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
background: #2b2b2a;
}
.tendenze-collezione-pe28 .col-swatch-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 48px;
color: #B2883E;
}
.tendenze-collezione-pe28 .col-swatch-caption {
margin: 12px 0 0 0;
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.8);
}
.tendenze-collezione-pe28 .col-carousel-prev,
.tendenze-collezione-pe28 .col-carousel-next {
flex-shrink: 0;
width: 44px;
height: 44px;
background: #B2883E;
color: #1c2a25;
border: none;
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.tendenze-collezione-pe28 .col-carousel-prev:hover,
.tendenze-collezione-pe28 .col-carousel-next:hover {
background: #d4a020;
}
.tendenze-collezione-pe28 .col-slider-section {
margin: 0;
width: calc(50vw + 430px);
max-width: none;
}
.tendenze-collezione-pe28 .col-slider-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
position: relative;
}
.tendenze-collezione-pe28 .col-slider {
flex: 1;
overflow: hidden;
user-select: none;
min-width: 0;
}
.tendenze-collezione-pe28 .col-slider-track {
display: flex;
gap: 48px;
transition: transform 0.4s ease;
width: max-content;
flex-shrink: 0;
align-items: flex-start;
}
.tendenze-collezione-pe28 .col-slider-slide {
flex: 0 0 315px;
width: 315px;
height: 420px;
cursor: url('data:image/svg+xml;charset=utf-8,') 40 40, pointer;
overflow: hidden;
position: relative;
}
.tendenze-collezione-pe28 .col-slider-slide-img {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 340px;
overflow: hidden;
transition: height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-img {
height: 420px;
}
.tendenze-collezione-pe28 .col-slider-slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
-webkit-user-drag: none;
user-drag: none;
pointer-events: none;
}
.tendenze-collezione-pe28 .col-slider-slide-gradient {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-gradient {
opacity: 1;
}
.tendenze-collezione-pe28 .col-slider-slide-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
padding: 0 25px 24px 0;
height: 80px;
box-sizing: border-box;
z-index: 1;
min-width: 0;
transition: padding-left 0.4s ease;
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-footer {
padding-left: 12px;
}
.tendenze-collezione-pe28 .col-slider-slide-num {
font-family: "Inter", sans-serif;
font-weight: 300;
font-synthesis: none;
font-size: 32px;
line-height: 1;
color: var(--bianco, #fff);
flex-shrink: 0;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.tendenze-collezione-pe28 .col-slider-slide-caption {
flex: 0 0 0;
min-width: 0;
width: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-caption {
flex: 1 1 0;
min-width: 0;
max-width: 165px;
opacity: 1;
visibility: visible;
}
.tendenze-collezione-pe28 .col-slider-slide-caption-text {
display: -webkit-box;
width: 100%;
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 20px;
line-height: 1.2;
color: var(--bianco, #fff);
text-align: left;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Frecce ai lati delle preview invece che in basso */
.tendenze-collezione-pe28 .col-slider-arrow {
flex-shrink: 0;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.tendenze-collezione-pe28 .col-slider-arrow:hover {
opacity: 0.8;
}
.tendenze-collezione-pe28 .col-slider-arrow svg {
width: 24px;
height: 24px;
display: block;
}
/* Mantieni selettori col-slider-prev/next per JS */
.tendenze-collezione-pe28 .col-slider-prev,
.tendenze-collezione-pe28 .col-slider-next {
flex-shrink: 0;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.tendenze-collezione-pe28 .col-slider-prev:hover,
.tendenze-collezione-pe28 .col-slider-next:hover {
opacity: 0.8;
}
.tendenze-collezione-pe28 .col-slider-prev svg,
.tendenze-collezione-pe28 .col-slider-next svg {
width: 24px;
height: 24px;
display: block;
}
.tendenze-collezione-pe28 .col-slider-dots {
flex-basis: 100%;
width: 100%;
max-width: 100%;
margin-top: 24px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
justify-content: center;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tendenze-collezione-pe28 .col-slider-dots::-webkit-scrollbar {
display: none;
}
.tendenze-collezione-pe28 .col-slider-dots-track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
width: max-content;
padding: 4px 0;
}
.tendenze-collezione-pe28 .col-slider-dots .col-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
border: none;
cursor: pointer;
padding: 0;
transition: background 0.2s ease;
}
.tendenze-collezione-pe28 .col-slider-dots .col-dot:hover {
opacity: 0.9;
}
.tendenze-collezione-pe28 .col-slider-dots .col-dot.active {
background: #B2883E;
}
.tendenze-collezione-pe28 .col-lightbox {
position: fixed;
inset: 0;
background: #000;
z-index: 2000;
display: flex;
flex-direction: column;
transform: translateX(-100%);
visibility: hidden;
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s;
}
.tendenze-collezione-pe28 .col-lightbox.open {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
}
.tendenze-collezione-pe28 .col-lightbox.closing {
transform: translateX(-100%);
visibility: visible;
pointer-events: auto;
}
.tendenze-collezione-pe28 .col-lightbox-viewer {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.tendenze-collezione-pe28 .col-lightbox-overlay {
position: absolute;
top: 0;
bottom: 0;
width: 150px;
pointer-events: none;
z-index: 5;
}
.tendenze-collezione-pe28 .col-lightbox-overlay-left {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}
.tendenze-collezione-pe28 .col-lightbox-overlay-right {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}
.tendenze-collezione-pe28 .col-lightbox-prev,
.tendenze-collezione-pe28 .col-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: opacity 0.2s ease;
}
.tendenze-collezione-pe28 .col-lightbox-prev:hover,
.tendenze-collezione-pe28 .col-lightbox-next:hover {
opacity: 0.8;
}
.tendenze-collezione-pe28 .col-lightbox-nav-wrap {
display: contents;
}
.tendenze-collezione-pe28 .col-lightbox-prev {
left: 24px;
}
.tendenze-collezione-pe28 .col-lightbox-next {
right: 24px;
}
.tendenze-collezione-pe28 .col-lightbox-prev svg,
.tendenze-collezione-pe28 .col-lightbox-next svg {
width: 48px;
height: 48px;
}
.tendenze-collezione-pe28 .col-lightbox-content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.tendenze-collezione-pe28 .col-lightbox-slide {
display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.tendenze-collezione-pe28 .col-lightbox-slide.active {
display: flex;
}
.tendenze-collezione-pe28 .col-lightbox-slide img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.tendenze-collezione-pe28 .col-lightbox-bar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: 120px;
padding: 0 40px;
background: #1c2a25;
}
.tendenze-collezione-pe28 .col-lightbox-title {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(22px, calc(1.9 * var(--pe28-text-size, 18px)), 40px);
line-height: 1.12;
letter-spacing: 0.02em;
background: var(--pe28-collection-title-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-transform: uppercase;
margin: 0;
flex-shrink: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.25);
}
.tendenze-collezione-pe28 .col-lightbox-caption {
font-family: "Inter", sans-serif;
font-weight: 500;
font-size: var(--pe28-text-size, 18px);
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
color: #fff;
text-transform: uppercase;
text-align: center;
margin: 0;
flex: 1;
max-width: 952px;
padding: 0 24px;
}
.tendenze-collezione-pe28 .col-lightbox-actions {
display: flex;
align-items: center;
gap: 24px;
flex-shrink: 0;
}
.tendenze-collezione-pe28 .col-lightbox-download,
.tendenze-collezione-pe28 .col-lightbox-close {
width: 24px;
height: 24px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #B2883E;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: opacity 0.2s ease;
}
.tendenze-collezione-pe28 .col-lightbox-download:hover,
.tendenze-collezione-pe28 .col-lightbox-close:hover {
opacity: 0.8;
}
.tendenze-collezione-pe28 .col-lightbox-download svg,
.tendenze-collezione-pe28 .col-lightbox-close svg {
width: 24px;
height: 24px;
}
.tendenze-collezione-pe28 .col-colors-desc {
font-family: "Inter", sans-serif;
margin: 0 0 22px 0;
font-size: var(--pe28-text-size, 18px);
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
font-weight: 200;
}
.tendenze-collezione-pe28 .col-palette {
display: flex;
flex-wrap: nowrap;
gap: 24px;
align-items: flex-start;
}
.tendenze-collezione-pe28 .col-swatch-color {
width: 130px;
height: 180px;
flex-shrink: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
cursor: default;
}
.tendenze-collezione-pe28 .col-swatch-color-block {
height: 130px;
background-color: var(--swatch-color, #ccc);
flex-shrink: 0;
transition: height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.tendenze-collezione-pe28 .col-swatch-color:hover .col-swatch-color-block {
height: 180px;
}
.tendenze-collezione-pe28 .col-swatch-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 8px;
background-color: transparent;
z-index: 1;
}
.tendenze-collezione-pe28 .col-swatch-code {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 30px;
color: #fff;
text-align: center;
transition: color 0.2s ease;
}
.tendenze-collezione-pe28 .col-swatch-color:hover.col-swatch-light .col-swatch-code {
color: #1c2a25;
}
/* Collezione: media queries */
@media (min-width: 1200px) {
.tendenze-collezione-pe28 .col-hero-inner,
.tendenze-collezione-pe28 .col-hero.col-hero-align-left .col-hero-inner,
.tendenze-collezione-pe28 .col-hero.col-hero-complete .col-hero-inner {
max-width: 1140px;
}
.tendenze-collezione-pe28 .col-hero.col-hero-align-left .col-hero-stage {
left: max(40px, calc(50% - 530px));
}
.tendenze-collezione-pe28 .col-main {
max-width: 1140px;
}
.tendenze-collezione-pe28 .col-hero-image img {
max-width: 1140px;
}
.tendenze-collezione-pe28 .col-video-expand {
max-width: 1140px;
}
.tendenze-collezione-pe28 .col-video-section .toggle-audio.col-toggle-audio {
right: max(0px, calc(50% - 570px + 30px));
}
.tendenze-collezione-pe28 .col-slider-section {
width: calc(50vw + 530px);
}
.tendenze-collezione-pe28 .col-lightbox-caption {
max-width: 1152px;
}
}
@media (max-width: 991px) {
.tendenze-collezione-pe28 .col-hero {
padding: 120px 20px 60px;
}
.tendenze-collezione-pe28 .col-main {
padding: 0 20px 60px;
}
.tendenze-collezione-pe28 .col-slider-section {
width: calc(50vw + 450px);
}
.tendenze-collezione-pe28 .col-swatch {
flex: 0 0 calc(50% - 10px);
min-width: 140px;
}
.tendenze-collezione-pe28 .col-slider-track {
gap: 20px;
}
.tendenze-collezione-pe28 .col-slider-slide {
flex: 0 0 calc(50% - 10px);
width: calc(50% - 10px);
min-width: 140px;
height: 360px;
}
.tendenze-collezione-pe28 .col-slider-slide-img {
height: 280px;
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-img {
height: 360px;
}
.tendenze-collezione-pe28 .col-slider-slide-num {
font-size: 28px;
font-weight: 300;
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-caption {
max-width: 120px;
}
.tendenze-collezione-pe28 .col-slider-slide-caption-text {
font-size: 16px;
}
}
@media (max-width: 767px) {
.tendenze-collezione-pe28 .col-hero {
padding: 100px 15px 40px;
}
.tendenze-collezione-pe28 .col-title-main {
font-size: 42px;
}
.tendenze-collezione-pe28 .col-hero.col-hero-shrink .col-title-main {
font-size: 36px;
}
.tendenze-collezione-pe28 .col-main {
padding: 0 15px 40px;
}
.tendenze-collezione-pe28 .col-slider-section {
width: 100%;
}
.tendenze-collezione-pe28 .col-body-text,
.tendenze-collezione-pe28 .col-body-text p {
line-height: 142.857%;
font-weight: 200;
}
.tendenze-collezione-pe28 .col-section-title {
font-size: 24px;
}
.tendenze-collezione-pe28 .col-swatch-color {
width: 80px;
height: 120px;
}
.tendenze-collezione-pe28 .col-swatch-color-block {
height: 80px;
}
.tendenze-collezione-pe28 .col-swatch-color:hover .col-swatch-color-block {
height: 120px;
}
.tendenze-collezione-pe28 .col-swatch-footer {
min-height: 40px;
padding: 8px 4px;
}
.tendenze-collezione-pe28 .col-swatch-code {
font-size: 12px;
}
.tendenze-collezione-pe28 .col-swatch {
flex: 0 0 100%;
min-width: 100%;
}
.tendenze-collezione-pe28 .col-slider-slide {
flex: 0 0 100%;
min-width: 100%;
height: 360px;
}
.tendenze-collezione-pe28 .col-slider-slide-img {
height: 280px;
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-img {
height: 360px;
}
.tendenze-collezione-pe28 .col-lightbox-overlay {
width: 80px;
}
.tendenze-collezione-pe28 .col-lightbox-prev,
.tendenze-collezione-pe28 .col-lightbox-next {
width: 48px;
height: 48px;
}
.tendenze-collezione-pe28 .col-lightbox-prev {
left: 10px;
}
.tendenze-collezione-pe28 .col-lightbox-next {
right: 10px;
}
.tendenze-collezione-pe28 .col-lightbox-bar {
padding: 0 20px;
height: 100px;
}
}
/* Lightbox mobile: layout Figma (1932-6204) - verticale centrato, spaziatura generosa */
@media (max-width: 767px) {
.tendenze-collezione-pe28 .col-lightbox {
display: grid;
grid-template-rows: 1fr auto auto auto auto auto 1fr;
grid-template-columns: 1fr;
row-gap: 36px;
align-items: center;
justify-items: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #1c2a25;
min-height: 100vh;
padding: 24px 0;
}
.tendenze-collezione-pe28 .col-lightbox-viewer,
.tendenze-collezione-pe28 .col-lightbox-bar {
display: contents;
}
.tendenze-collezione-pe28 .col-lightbox-overlay {
display: none;
}
.tendenze-collezione-pe28 .col-lightbox-actions {
grid-row: 2;
justify-content: center;
padding: 0;
gap: 30px;
}
.tendenze-collezione-pe28 .col-lightbox-title {
grid-row: 3;
text-align: center;
padding: 0 20px;
margin: 0;
}
.tendenze-collezione-pe28 .col-lightbox-content {
grid-row: 4;
min-height: 200px;
max-height: 278px;
width: 100%;
padding: 0 16px;
}
.tendenze-collezione-pe28 .col-lightbox-slide {
width: 100%;
height: 100%;
}
.tendenze-collezione-pe28 .col-lightbox-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
.tendenze-collezione-pe28 .col-lightbox-nav-wrap {
display: flex;
grid-row: 5;
align-items: center;
justify-content: center;
gap: 34px;
padding: 16px 0;
}
.tendenze-collezione-pe28 .col-lightbox-prev,
.tendenze-collezione-pe28 .col-lightbox-next {
position: static;
transform: none;
width: 80px;
height: 80px;
flex-shrink: 0;
}
.tendenze-collezione-pe28 .col-lightbox-prev svg,
.tendenze-collezione-pe28 .col-lightbox-next svg {
width: 48px;
height: 48px;
}
.tendenze-collezione-pe28 .col-lightbox-caption {
grid-row: 6;
font-size: var(--pe28-text-size, 18px);
line-height: var(--pe28-line-height, 142.857%);
letter-spacing: var(--pe28-text-spacing, 0.01em);
text-align: center;
padding: 0 20px 24px;
max-width: 100%;
}
}
/* =============================================================================
* 4. COLORI E MEDIA - Pagine colori e media
* ============================================================================= */
.tendenze-colori-pe28 .col-hero,
.tendenze-media-pe28 .col-hero {
padding: 152.5px 40px 80px;
text-align: left;
display: block;
visibility: visible;
opacity: 1;
overflow: visible;
}
.tendenze-colori-pe28 .col-hero-inner,
.tendenze-media-pe28 .col-hero-inner {
max-width: 940px;
margin: 0 auto;
width: 100%;
padding-left: 40px;
display: block;
visibility: visible;
opacity: 1;
overflow: visible;
}
.tendenze-colori-pe28 .col-title-main,
.tendenze-media-pe28 .col-title-main {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(24px, 4vw, 68px);
color: #B2883E !important;
text-transform: uppercase;
letter-spacing: 6px;
margin: 0;
line-height: 1.1;
display: block;
visibility: visible;
opacity: 1;
}
.tendenze-colori-pe28 .col-main {
padding: 0 40px 80px;
max-width: 940px;
margin: 0 auto;
}
.tendenze-colori-pe28 .col-main-inner {
display: flex;
flex-direction: column;
gap: 60px;
}
.tendenze-colori-pe28 .col-colori-section {
margin: 0;
}
.tendenze-colori-pe28 .col-section-title {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 36px;
line-height: normal;
color: var(--Gold, #B2883E);
text-transform: uppercase;
margin: 0 0 24px 0;
}
.tendenze-colori-pe28 .col-colori-palette {
display: flex;
flex-wrap: nowrap;
gap: 32px;
align-items: flex-start;
}
.tendenze-colori-pe28 .col-colori-swatch {
width: 130px;
height: 180px;
flex-shrink: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
cursor: default;
}
.tendenze-colori-pe28 .col-colori-swatch-color {
height: 130px;
background-color: var(--swatch-color, #ccc);
flex-shrink: 0;
transition: height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.tendenze-colori-pe28 .col-colori-swatch:hover .col-colori-swatch-color {
height: 180px;
}
.tendenze-colori-pe28 .col-colori-swatch-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 8px;
background-color: transparent;
z-index: 1;
}
.tendenze-colori-pe28 .col-colori-code {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 30px;
color: #fff;
text-align: center;
transition: color 0.2s ease;
}
.tendenze-colori-pe28 .col-colori-swatch:hover.col-swatch-light .col-colori-code {
color: #1c2a25;
}
.tendenze-colori-pe28 .col-colori-cta {
text-align: center;
margin-top: 40px;
}
.tendenze-colori-pe28 .col-btn-pdf,
.tendenze-media-pe28 .col-btn-pdf {
display: inline-block;
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 21px;
color: #B2883E;
text-transform: uppercase;
text-decoration: none;
padding: 15px 30px;
border: 2px solid #B2883E;
border-radius: 5px;
}
.tendenze-colori-pe28 .col-btn-pdf:hover,
.tendenze-media-pe28 .col-btn-pdf:hover {
background: rgba(191,136,22,0.2);
}
.tendenze-colori-pe28 .col-btn-pdf-placeholder,
.tendenze-media-pe28 .col-btn-pdf-placeholder {
cursor: default;
opacity: 0.8;
}
.tendenze-media-pe28 .col-main {
padding: 0 40px 80px;
max-width: 940px;
margin: 0 auto;
}
.tendenze-media-pe28 .col-main-inner {
display: flex;
flex-direction: column;
gap: 60px;
}
.tendenze-media-pe28 .col-media-section {
margin: 0;
}
.tendenze-media-pe28 .col-media-intro {
margin-top: 0;
}
.tendenze-media-pe28 .col-media-lead-title {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: clamp(22px, 3.5vw, 30px);
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff;
margin: 0;
}
.tendenze-media-pe28 .col-media-quote-text {
font-style: italic;
}
.tendenze-media-pe28 .col-media-quote-text p {
font-style: inherit;
}
/* Materiali / lavorazioni / colori: stesso filo del body, niente titoletto bold + due punti */
.tendenze-media-pe28 .col-media-section .col-media-field {
margin: 0 0 16px 0;
}
.tendenze-media-pe28 .col-media-section .col-media-field:last-child {
margin-bottom: 0;
}
.tendenze-media-pe28 .col-media-field-run {
font-family: "Inter", sans-serif;
font-weight: 200;
font-size: inherit;
font-style: normal;
letter-spacing: var(--pe28-text-spacing, 0.01em);
color: rgba(255, 255, 255, 0.78);
}
.tendenze-media-pe28 .col-media-field-run::after {
content: " — ";
color: rgba(255, 255, 255, 0.42);
font-weight: 200;
}
.tendenze-media-pe28 .col-section-title {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 36px;
line-height: normal;
color: var(--Gold, #B2883E);
text-transform: uppercase;
margin: 0 0 24px 0;
}
.tendenze-media-pe28 .col-media-cta {
text-align: center;
margin-top: 40px;
}
/* Colori/Media: media queries */
@media (min-width: 1200px) {
.tendenze-colori-pe28 .col-hero-inner,
.tendenze-media-pe28 .col-hero-inner {
max-width: 1140px;
}
.tendenze-colori-pe28 .col-main,
.tendenze-media-pe28 .col-main {
max-width: 1140px;
}
}
@media (max-width: 991px) {
.tendenze-colori-pe28 .col-hero,
.tendenze-media-pe28 .col-hero {
padding: 120px 20px 60px;
}
.tendenze-colori-pe28 .col-main,
.tendenze-media-pe28 .col-main {
padding: 0 20px 60px;
}
.tendenze-colori-pe28 .col-colori-swatch {
width: 100px;
height: 150px;
}
.tendenze-colori-pe28 .col-colori-swatch-color {
height: 100px;
}
.tendenze-colori-pe28 .col-colori-swatch:hover .col-colori-swatch-color {
height: 150px;
}
.tendenze-colori-pe28 .col-colori-code {
font-size: 14px;
}
}
@media (max-width: 767px) {
.tendenze-colori-pe28 .col-hero,
.tendenze-media-pe28 .col-hero {
padding: 100px 15px 40px;
}
.tendenze-colori-pe28 .col-hero-inner,
.tendenze-media-pe28 .col-hero-inner {
padding-left: 0;
}
.tendenze-colori-pe28 .col-title-main,
.tendenze-media-pe28 .col-title-main {
font-size: 42px;
}
.tendenze-colori-pe28 .col-main,
.tendenze-media-pe28 .col-main {
padding: 0 15px 40px;
}
.tendenze-colori-pe28 .col-colori-swatch {
width: calc(50% - 10px);
min-width: calc(50% - 10px);
flex: 0 0 calc(50% - 10px);
height: 120px;
}
.tendenze-colori-pe28 .col-colori-swatch-color {
height: 80px;
}
.tendenze-colori-pe28 .col-colori-swatch:hover .col-colori-swatch-color {
height: 120px;
}
.tendenze-colori-pe28 .col-colori-swatch-footer {
min-height: 40px;
padding: 8px 4px;
}
.tendenze-colori-pe28 .col-colori-code {
font-size: 12px;
}
.tendenze-media-pe28 .col-body-text,
.tendenze-media-pe28 .col-body-text p {
line-height: 142.857%;
font-weight: 200;
}
}
/* =============================================================================
* 5. HEADER OVERLAY - Menu full-screen, override stili globali (Figma 1848-1618)
* ============================================================================= */
.tendenze-pe28-header-wrap {
background-color: transparent;
}
.tendenze-pe28-header-wrap a,
.tendenze-pe28-header-wrap a:hover,
.tendenze-pe28-header-wrap a:focus,
.tendenze-pe28-header-wrap a:visited {
color: #B2883E !important;
text-decoration: none !important;
}
.tendenze-pe28-header-wrap .punk-navbar,
.tendenze-pe28-header-wrap .col-navbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 90px !important;
background-color: #1c2a25 !important;
background: #1c2a25 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 40px !important;
z-index: 1000 !important;
border: none !important;
box-shadow: none !important;
}
/* Menu aperto: la navbar resta sopra l'overlay così logo e toggle restano visibili */
.tendenze-pe28-header-wrap:has(.tendenze-menu-overlay.is-open) .punk-navbar,
.tendenze-pe28-header-wrap:has(.tendenze-menu-overlay.is-open) .col-navbar {
z-index: 3001 !important;
}
.tendenze-pe28-header-wrap .punk-navbar-inner,
.tendenze-pe28-header-wrap .col-navbar-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
align-items: center !important;
width: 100% !important;
max-width: 1440px !important;
}
.tendenze-pe28-header-wrap .punk-logo,
.tendenze-pe28-header-wrap .col-logo {
width: 192px !important;
height: 24px !important;
display: block !important;
justify-self: start !important;
}
.tendenze-pe28-header-wrap .punk-logo img,
.tendenze-pe28-header-wrap .col-logo img {
width: 100% !important;
height: auto !important;
}
.tendenze-pe28-header-wrap .punk-logo-fallback,
.tendenze-pe28-header-wrap .col-logo-fallback {
font-family: "Cormorant Garamond", serif !important;
font-weight: 700 !important;
font-size: 18px !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
.tendenze-pe28-header-wrap .punk-nav-links,
.tendenze-pe28-header-wrap .col-nav-links {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 20px !important;
justify-self: center !important;
grid-column: 2 !important;
}
.tendenze-pe28-header-wrap .punk-nav-link,
.tendenze-pe28-header-wrap .col-nav-link {
font-family: "Cormorant Garamond", serif !important;
font-weight: 700 !important;
font-size: 21px !important;
color: #B2883E !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 15px !important;
letter-spacing: 0.02em !important;
border: 2px solid transparent !important;
border-radius: 5px !important;
}
.tendenze-pe28-header-wrap .punk-nav-link:hover,
.tendenze-pe28-header-wrap .col-nav-link:hover {
border-color: #B2883E !important;
}
.tendenze-pe28-header-wrap .col-nav-link.active,
.tendenze-pe28-header-wrap .col-nav-link.active:hover {
border-color: #B2883E !important;
}
.tendenze-pe28-header-wrap .punk-nav-divider,
.tendenze-pe28-header-wrap .col-nav-divider {
width: 1px !important;
height: 23px !important;
background-color: #B2883E !important;
}
.tendenze-pe28-header-wrap .punk-menu-toggle,
.tendenze-pe28-header-wrap .col-menu-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 29px !important;
height: 16px !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
justify-self: end !important;
grid-column: 3 !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-toggle-icon--menu {
display: block !important;
width: 29px !important;
height: 16px !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-toggle-icon--close {
display: none !important;
width: 20px !important;
height: 20px !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-toggle.is-open .tendenze-menu-toggle-icon--menu {
display: none !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-toggle.is-open .tendenze-menu-toggle-icon--close {
display: block !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay {
/* Solo dropdown full-screen: −30% (scale 0.7), non la navbar */
--pe28-menu-scale: 0.7;
--pe28-menu-nav-fs: calc(21px * var(--pe28-menu-scale));
--pe28-menu-nav-pad: calc(15px * var(--pe28-menu-scale));
--pe28-menu-nav-gap: calc(20px * var(--pe28-menu-scale));
--pe28-menu-divider-h: calc(23px * var(--pe28-menu-scale));
--pe28-menu-nav-lh: 1.2;
--pe28-menu-overlay-item-fs: calc(70px * var(--pe28-menu-scale));
--pe28-menu-overlay-item-pad-y: calc(15px * var(--pe28-menu-scale));
--pe28-menu-overlay-item-pad-x: calc(25px * var(--pe28-menu-scale));
--pe28-menu-overlay-gap: calc(90px * var(--pe28-menu-scale));
--pe28-menu-overlay-inner-gap: calc(150px * var(--pe28-menu-scale));
--pe28-menu-overlay-inner-gap-md: calc(80px * var(--pe28-menu-scale));
--pe28-menu-lang-fs: calc(30px * var(--pe28-menu-scale));
--pe28-menu-lang-pad-bottom: calc(40px * var(--pe28-menu-scale));
--pe28-menu-lang-link-pad-v: calc(8px * var(--pe28-menu-scale));
--pe28-menu-lang-link-pad-h: calc(12px * var(--pe28-menu-scale));
--pe28-menu-overlay-item-mobile-main: calc(50px * var(--pe28-menu-scale));
--pe28-menu-overlay-item-mobile-punk: calc(28px * var(--pe28-menu-scale));
--pe28-menu-overlay-lang-mobile: calc(21px * var(--pe28-menu-scale));
--pe28-menu-overlay-punk-gap-mobile: calc(22px * var(--pe28-menu-scale));
--pe28-menu-overlay-lang-pb-mobile: calc(32px * var(--pe28-menu-scale));
--pe28-menu-overlay-lang-pt-mobile: calc(36px * var(--pe28-menu-scale));
/* Riduce solo lo spazio tra COLORI e MEDIA (coppia consecutiva nel DOM) */
--pe28-menu-colori-media-gap-tighten: 22px;
--pe28-menu-overlay-item-480: calc(24px * var(--pe28-menu-scale));
--pe28-menu-overlay-inner-gap-480: calc(48px * var(--pe28-menu-scale));
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: #1c2a25 !important;
background: #1c2a25 none !important;
z-index: 2000 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
opacity: 0;
visibility: hidden;
/* Chiuso: non intercettare scroll / click sul body sottostante */
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 1440px !important;
min-height: 100vh !important;
padding: 0 40px !important;
gap: var(--pe28-menu-overlay-inner-gap, 105px) !important;
background-color: #1c2a25 !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-nav {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
height: 90px !important;
padding: 10px 0 !important;
flex-shrink: 0 !important;
background-color: #1c2a25 !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-logo {
width: 192px;
height: 24px;
display: block;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-logo img {
width: 100%;
height: auto;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-logo-fallback {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 18px;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-links {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: var(--pe28-menu-nav-gap, 14px) !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-link {
font-family: "Cormorant Garamond", serif !important;
font-weight: 700 !important;
font-size: var(--pe28-menu-nav-fs, 14.7px) !important;
line-height: var(--pe28-menu-nav-lh, 1.2) !important;
color: #B2883E !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: var(--pe28-menu-nav-pad, 10.5px) !important;
border: 2px solid transparent !important;
border-radius: 5px !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-link:hover,
.tendenze-pe28-header-wrap .tendenze-menu-overlay-link.active {
border-color: #B2883E !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-divider {
width: 1px;
height: var(--pe28-menu-divider-h, 16.1px);
background-color: #B2883E;
flex-shrink: 0;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-close {
width: 28px;
height: 28px;
position: relative;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.tendenze-pe28-header-wrap .tendenze-menu-close-line {
position: absolute;
width: 24px;
height: 2.6px;
background-color: #B2883E;
border-radius: 1px;
}
.tendenze-pe28-header-wrap .tendenze-menu-close-line:first-child {
transform: rotate(45deg);
}
.tendenze-pe28-header-wrap .tendenze-menu-close-line:last-child {
transform: rotate(-45deg);
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-main {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: var(--pe28-menu-overlay-gap, 63px) !important;
flex: 1 !important;
justify-content: center !important;
}
/* Solo tra COLORI e MEDIA (due link .item-main consecutivi): avvicina senza toccare HOME / collezioni */
.tendenze-pe28-header-wrap .tendenze-menu-overlay-main > a.tendenze-menu-overlay-item-main + a.tendenze-menu-overlay-item-main {
margin-top: calc(-1 * var(--pe28-menu-colori-media-gap-tighten, 22px)) !important;
}
/* Desktop: punk-group come singoli item (nessuna differenza visiva) */
.tendenze-pe28-header-wrap .tendenze-menu-overlay-punk-group {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pe28-menu-overlay-gap, 63px);
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-item {
font-family: "Cormorant Garamond", serif !important;
font-weight: 700 !important;
font-size: var(--pe28-menu-overlay-item-fs, 49px) !important;
line-height: 1 !important;
color: #B2883E !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
padding: var(--pe28-menu-overlay-item-pad-y, 10.5px) var(--pe28-menu-overlay-item-pad-x, 17.5px) !important;
border: 2px solid transparent !important;
border-radius: 5px !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-item:hover,
.tendenze-pe28-header-wrap .tendenze-menu-overlay-item-punk.active {
border-color: #B2883E !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-lang {
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: var(--pe28-menu-lang-fs, 21px);
line-height: var(--pe28-menu-nav-lh, 1.2);
color: #B2883E;
text-align: center;
padding-bottom: var(--pe28-menu-lang-pad-bottom, 28px);
flex-shrink: 0;
}
.tendenze-pe28-header-wrap .tendenze-menu-lang-link {
color: #B2883E !important;
text-decoration: none !important;
padding: var(--pe28-menu-lang-link-pad-v, 5.6px) var(--pe28-menu-lang-link-pad-h, 8.4px) !important;
border: 2px solid transparent !important;
border-radius: 5px !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-lang-link:hover,
.tendenze-pe28-header-wrap .tendenze-menu-lang-link.active {
border-color: #B2883E !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-lang-divider {
margin: 0 0.3em;
opacity: 0.8;
}
/* Mobile: nasconde voci collezioni dalla navbar (solo nel dropdown overlay) */
@media (max-width: 991px) {
.tendenze-pe28-header-wrap .punk-nav-links,
.tendenze-pe28-header-wrap .col-nav-links {
display: none !important;
}
}
/* Desktop: nel dropdown full-screen non ripetere le tre collezioni (già in navbar); restano HOME, COLORI, MEDIA, lingue */
@media (min-width: 992px) {
.tendenze-pe28-header-wrap .tendenze-menu-overlay-links-desktop,
.tendenze-pe28-header-wrap .tendenze-menu-overlay-punk-group {
display: none !important;
}
}
@media (max-width: 768px) {
/* Overlay mobile: nasconde voci collezioni duplicate nella nav (usate in overlay-main) */
.tendenze-pe28-header-wrap .tendenze-menu-overlay-links-desktop {
display: none !important;
}
/* Overlay mobile: layout nav compatto, close in alto a destra */
.tendenze-pe28-header-wrap .tendenze-menu-overlay-nav {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
position: relative;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-close {
position: absolute !important;
top: 0 !important;
right: 0 !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-inner {
gap: var(--pe28-menu-overlay-inner-gap-md, 56px) !important;
}
}
/* Mobile overlay: design Figma 1932-6171 - gerarchia tipografica e spaziatura */
@media (max-width: 767px) {
.tendenze-pe28-header-wrap .tendenze-menu-overlay-nav {
height: 60px !important;
padding: 0 20px !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-inner {
padding: 0 20px !important;
gap: 0 !important;
justify-content: flex-start !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-main {
flex: 1 !important;
gap: var(--pe28-menu-overlay-inner-gap-md, 56px) !important;
justify-content: center !important;
width: 250px !important;
max-width: 100% !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-item-main {
font-size: var(--pe28-menu-overlay-item-mobile-main, 35px) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-punk-group {
flex-direction: column !important;
align-items: center !important;
gap: var(--pe28-menu-overlay-punk-gap-mobile, 15px) !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-item-punk {
font-size: var(--pe28-menu-overlay-item-mobile-punk, 19.6px) !important;
line-height: var(--pe28-menu-nav-lh, 1.2) !important;
white-space: nowrap !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-lang {
font-size: var(--pe28-menu-overlay-lang-mobile, 14.7px) !important;
line-height: var(--pe28-menu-nav-lh, 1.2) !important;
padding-top: var(--pe28-menu-overlay-lang-pt-mobile, 25.2px) !important;
padding-bottom: var(--pe28-menu-overlay-lang-pb-mobile, 22.4px) !important;
margin-top: auto !important;
}
}
/* =============================================================================
* 6. MOBILE - Ottimizzazioni dedicate per smartphone e tablet
* =============================================================================
* Breakpoints: 991px (tablet), 767px (mobile), 480px (small mobile)
* Touch targets min 44x44px, padding ridotti, palette wrap, slider full-width
* ============================================================================= */
/* --- Tablet (max 991px): palette colori wrap, overlay padding --- */
@media (max-width: 991px) {
.tendenze-colori-pe28 .col-colori-palette {
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-inner {
padding: 0 24px !important;
}
}
/* --- Mobile (max 767px): touch targets, hero, slider, lightbox --- */
@media (max-width: 767px) {
/* Menu toggle: touch target 44px */
.tendenze-punk-pe28 .punk-menu-toggle,
.tendenze-collezione-pe28 .col-menu-toggle,
.tendenze-colori-pe28 .col-menu-toggle,
.tendenze-media-pe28 .col-menu-toggle {
padding: 14px;
min-width: 44px;
min-height: 44px;
}
/* Navbar più compatta */
.tendenze-punk-pe28 .punk-navbar,
.tendenze-collezione-pe28 .col-navbar,
.tendenze-colori-pe28 .col-navbar,
.tendenze-media-pe28 .col-navbar {
height: 72px;
}
.tendenze-pe28-header-wrap .punk-navbar,
.tendenze-pe28-header-wrap .col-navbar {
height: 72px !important;
}
/* Mobile: titoli oro piatti (no drop-shadow rilievo); tilt JS disattivato sotto — perspective flat */
.tendenze-punk-pe28 .punk-hero {
perspective: none;
}
.tendenze-punk-pe28 .punk-section {
transform-style: flat;
will-change: auto;
}
.tendenze-punk-pe28 .punk-title-main,
.tendenze-punk-pe28 .punk-title-sub {
filter: none;
}
.tendenze-collezione-pe28 .col-hero,
.tendenze-collezione-pe28 .col-hero-inner {
perspective: none;
}
.tendenze-collezione-pe28 .col-title-wrap {
transform-style: flat;
will-change: auto;
}
.tendenze-collezione-pe28 .col-title-main {
filter: none;
}
/* Punk hero titles: padding e gap ridotti per mobile */
.tendenze-punk-pe28 .punk-hero-titles {
padding: 24px 16px;
margin: -24px -16px;
width: calc(100% + 48px);
gap: 15px;
}
/* Barra tra i titoli: larga quanto le scritte, centrata (hero e gold) */
.tendenze-punk-pe28 .punk-hero-titles .punk-title-underline-wrap,
.tendenze-punk-pe28 .punk-hero-titles .punk-title-underline {
width: 39ch;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.tendenze-punk-pe28 .punk-gold-section .punk-underline-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-underline-dark,
.tendenze-colori-pe28 .col-gold-section .punk-underline-dark,
.tendenze-media-pe28 .col-gold-section .punk-underline-dark {
width: 39ch;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Collezione hero: stage positioning su schermi piccoli */
.tendenze-collezione-pe28 .col-hero.col-hero-align-left .col-hero-stage {
left: 15px;
top: 100px;
}
.tendenze-collezione-pe28 .col-hero.col-hero-complete .col-hero-inner {
padding-left: 0;
}
/* Slider controls: touch targets 44px */
.tendenze-collezione-pe28 .col-slider-prev,
.tendenze-collezione-pe28 .col-slider-next {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
.tendenze-collezione-pe28 .col-slider-prev svg,
.tendenze-collezione-pe28 .col-slider-next svg {
width: 24px;
height: 24px;
}
/* Colori palette: wrap e gap ridotto */
.tendenze-colori-pe28 .col-colori-palette {
flex-wrap: wrap;
gap: 16px;
justify-content: flex-start;
}
/* Overlay menu mobile: design Figma 1932-6171 - padding 20px come da design */
.tendenze-pe28-header-wrap .tendenze-menu-overlay-inner {
padding: 0 20px !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-logo {
width: 140px;
}
/* Overlay close: touch target 44px */
.tendenze-pe28-header-wrap .tendenze-menu-overlay-close {
padding: 14px;
min-width: 44px;
min-height: 44px;
}
}
/* --- Small mobile (max 480px): ulteriori riduzioni --- */
@media (max-width: 480px) {
.tendenze-punk-pe28 .punk-navbar,
.tendenze-collezione-pe28 .col-navbar,
.tendenze-colori-pe28 .col-navbar,
.tendenze-media-pe28 .col-navbar {
padding: 10px 16px;
height: 64px;
}
.tendenze-pe28-header-wrap .punk-navbar,
.tendenze-pe28-header-wrap .col-navbar {
padding: 10px 16px !important;
height: 64px !important;
}
.tendenze-punk-pe28 .punk-logo,
.tendenze-collezione-pe28 .col-logo,
.tendenze-colori-pe28 .col-logo,
.tendenze-media-pe28 .col-logo {
width: 120px;
}
.tendenze-punk-pe28 .punk-title-main {
font-size: 48px;
}
.tendenze-punk-pe28 .punk-title-sub {
font-size: 28px;
}
/* Gold section: stesse dimensioni dell'hero su small mobile */
.tendenze-punk-pe28 .punk-gold-section .punk-title-main.punk-title-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-title-main.punk-title-dark,
.tendenze-colori-pe28 .col-gold-section .punk-title-main.punk-title-dark,
.tendenze-media-pe28 .col-gold-section .punk-title-main.punk-title-dark {
font-size: 48px;
}
.tendenze-punk-pe28 .punk-gold-section .punk-title-sub.punk-title-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-title-sub.punk-title-dark,
.tendenze-colori-pe28 .col-gold-section .punk-title-sub.punk-title-dark,
.tendenze-media-pe28 .col-gold-section .punk-title-sub.punk-title-dark {
font-size: 28px;
}
.tendenze-punk-pe28 .punk-gold-section .punk-season.punk-season-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-season.punk-season-dark,
.tendenze-colori-pe28 .col-gold-section .punk-season.punk-season-dark,
.tendenze-media-pe28 .col-gold-section .punk-season.punk-season-dark {
font-size: 13px;
}
/* Barra tra i titoli: stessa larghezza delle scritte su small mobile */
.tendenze-punk-pe28 .punk-hero-titles .punk-title-underline-wrap,
.tendenze-punk-pe28 .punk-hero-titles .punk-title-underline,
.tendenze-punk-pe28 .punk-gold-section .punk-underline-dark,
.tendenze-collezione-pe28 .col-gold-section .punk-underline-dark,
.tendenze-colori-pe28 .col-gold-section .punk-underline-dark,
.tendenze-media-pe28 .col-gold-section .punk-underline-dark {
width: 39ch;
max-width: 100%;
}
.tendenze-collezione-pe28 .col-title-main,
.tendenze-collezione-pe28 .col-hero.col-hero-shrink .col-title-main {
font-size: 24px;
}
.tendenze-colori-pe28 .col-title-main,
.tendenze-media-pe28 .col-title-main {
font-size: 28px;
}
.tendenze-punk-pe28 .punk-hero {
padding: 80px 12px 30px;
gap: 24px;
}
.tendenze-punk-pe28 .punk-content {
padding: 0 12px 30px;
}
.tendenze-collezione-pe28 .col-hero {
padding: 80px 12px 30px;
}
.tendenze-collezione-pe28 .col-main {
padding: 0 12px 30px;
}
.tendenze-colori-pe28 .col-hero,
.tendenze-media-pe28 .col-hero {
padding: 80px 12px 30px;
}
.tendenze-colori-pe28 .col-main,
.tendenze-media-pe28 .col-main {
padding: 0 12px 40px;
}
.tendenze-punk-pe28 .punk-gold-section,
.tendenze-collezione-pe28 .col-gold-section,
.tendenze-colori-pe28 .col-gold-section,
.tendenze-media-pe28 .col-gold-section {
padding: 30px 12px 50px;
}
.tendenze-punk-pe28 .punk-footer,
.tendenze-collezione-pe28 .col-footer,
.tendenze-colori-pe28 .col-footer,
.tendenze-media-pe28 .col-footer {
padding: 24px 16px;
}
.tendenze-colori-pe28 .col-colori-swatch {
width: calc(50% - 8px);
min-width: calc(50% - 8px);
flex: 0 0 calc(50% - 8px);
height: 100px;
}
.tendenze-colori-pe28 .col-colori-swatch-color {
height: 70px;
}
.tendenze-colori-pe28 .col-colori-swatch:hover .col-colori-swatch-color {
height: 100px;
}
.tendenze-collezione-pe28 .col-slider-slide {
height: 320px;
}
.tendenze-collezione-pe28 .col-slider-slide-img {
height: 240px;
}
.tendenze-collezione-pe28 .col-slider-slide:hover .col-slider-slide-img {
height: 320px;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-inner {
padding: 0 16px !important;
gap: var(--pe28-menu-overlay-inner-gap-480, 33.6px) !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-item {
font-size: var(--pe28-menu-overlay-item-480, 16.8px) !important;
line-height: 1 !important;
}
.tendenze-pe28-header-wrap .tendenze-menu-overlay-logo {
width: 120px;
}
.tendenze-collezione-pe28 .col-lightbox-prev,
.tendenze-collezione-pe28 .col-lightbox-next {
width: 64px;
height: 64px;
}
.tendenze-collezione-pe28 .col-lightbox-prev svg,
.tendenze-collezione-pe28 .col-lightbox-next svg {
width: 40px;
height: 40px;
}
}