/* ========================================================================== Mario Cioni & C. — Homepage layout, components and motion Loaded after tokens.css. No inline styles in markup; runtime transforms (turntable rotation, crossfade opacity) are applied by JS. Progressive enhancement: without `.js` on the brand section is a plain stack of readable full-height panels (SEO + no-JS friendly). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Site navigation -------------------------------------------------------------------------- */ .site-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); border-bottom: 1px solid transparent; color: var(--mc-ivory); } .site-nav[data-theme="light"] { color: var(--mc-black); } .site-nav[data-solid="true"] { background: color-mix(in srgb, var(--mc-ivory) 92%, transparent); backdrop-filter: saturate(1.1) blur(14px); -webkit-backdrop-filter: saturate(1.1) blur(14px); border-bottom-color: var(--border-hairline); color: var(--mc-black); } .site-nav[data-solid="true"][data-theme="dark"] { background: color-mix(in srgb, var(--mc-black) 90%, transparent); border-bottom-color: var(--border-on-inverse); color: var(--mc-ivory); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%; } .site-nav__brand { display: inline-flex; align-items: center; line-height: 1; } .site-nav__logo { display: block; height: 42px; width: auto; } /* Light nav: terracotta logo (transparent PNG). */ .site-nav__logo--ivory { display: none; } /* Dark nav: ivory recolour of the logo. */ .site-nav[data-theme="dark"] .site-nav__logo--ink { display: none; } .site-nav[data-theme="dark"] .site-nav__logo--ivory { display: block; } .site-nav__menu { display: none; align-items: center; gap: var(--space-6); } .site-nav__link { position: relative; font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.01em; padding-block: var(--space-2); } .site-nav__link::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .site-nav__link:hover { color: var(--accent); } .site-nav[data-theme="dark"] .site-nav__link:hover { color: var(--accent-on-dark); } .site-nav__link:hover::after { transform: scaleX(1); } .site-nav__actions { display: flex; align-items: center; gap: var(--space-5); } .site-nav__shop { display: none; font-size: var(--fs-small); font-weight: var(--fw-medium); } .site-nav__shop:hover { color: var(--accent); } .lang-switch { display: none; align-items: center; gap: var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); } .lang-switch__sep { opacity: 0.4; } .lang-switch__opt[aria-current="true"] { color: var(--accent); } .site-nav[data-theme="dark"] .lang-switch__opt[aria-current="true"] { color: var(--accent-on-dark); } .lang-switch--footer { display: flex; color: var(--text-on-inverse-dim); margin-top: var(--space-6); } .lang-switch--footer .lang-switch__opt[aria-current="true"] { color: var(--accent-on-dark); } /* Burger */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; background: none; border: 0; } .nav-toggle__bar { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear; } .nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile drawer */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--mc-black); color: var(--mc-ivory); display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--layout-gutter); transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-out); visibility: hidden; } .nav-open .mobile-menu { transform: translateY(0); visibility: visible; } .mobile-menu__list { display: flex; flex-direction: column; gap: var(--space-4); } .mobile-menu__link { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); font-weight: var(--fw-medium); letter-spacing: var(--ls-display); opacity: 0; transform: translateY(20px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .nav-open .mobile-menu__link { opacity: 1; transform: translateY(0); } .nav-open .mobile-menu__link:nth-child(1) { transition-delay: 120ms; } .nav-open .mobile-menu__link:nth-child(2) { transition-delay: 180ms; } .nav-open .mobile-menu__link:nth-child(3) { transition-delay: 240ms; } .nav-open .mobile-menu__link:nth-child(4) { transition-delay: 300ms; } .nav-open .mobile-menu__link:nth-child(5) { transition-delay: 360ms; } .nav-open .mobile-menu__link:nth-child(6) { transition-delay: 420ms; } .mobile-menu__link:hover { color: var(--accent-on-dark); } .mobile-menu__foot { margin-top: var(--space-8); display: flex; gap: var(--space-5); align-items: center; color: var(--text-on-inverse-dim); font-size: var(--fs-small); } /* -------------------------------------------------------------------------- 2. Hero — white editorial ground, centered fashion serif, and a looping conveyor of products that sweep along a gentle curve left→right, growing to ~3/4 of the hero height before exiting. -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; background: var(--mc-black); text-align: center; } /* Background video — full-bleed, dimmed for legible ivory text */ .hero__bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__bg-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16,15,14,0.82) 0%, rgba(16,15,14,0.56) 42%, rgba(16,15,14,0.3) 68%, rgba(16,15,14,0.42) 100%); } /* Headline column — shifted left and left-aligned for an editorial composition. */ .hero__content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: fit-content; max-width: min(100%, 40rem); margin-left: 0; margin-right: auto; padding-top: calc(var(--nav-height) + var(--space-4)); padding-bottom: var(--space-8); } .hero__eyebrow { color: var(--accent-on-dark); margin-bottom: var(--space-5); } .hero__title { font-size: clamp(3rem, 8.5vw, 7rem); font-weight: var(--fw-regular); line-height: 0.98; letter-spacing: -0.025em; color: var(--mc-ivory); } .hero__title em { font-style: italic; font-weight: var(--fw-regular); color: var(--accent-on-dark); } .hero__lead { margin-top: var(--space-6); margin-inline: 0; font-weight: var(--fw-light); font-size: var(--fs-lead); line-height: 1.7; color: var(--text-on-inverse-dim); max-width: 46ch; } .hero__cta { margin-top: var(--space-7); } .hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: var(--space-5); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; } .hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollPulse 2.4s var(--ease-standard) infinite; } @keyframes scrollPulse { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } } /* -------------------------------------------------------------------------- 3. Heritage strip (marquee) -------------------------------------------------------------------------- */ .heritage { background: var(--mc-black); color: var(--text-on-inverse-dim); min-height: var(--heritage-band-height); display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--border-on-inverse); border-bottom: 1px solid var(--border-on-inverse); } .heritage__track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .heritage__group { display: flex; align-items: center; flex-shrink: 0; } .heritage__item { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; padding-inline: var(--space-6); white-space: nowrap; } .heritage__item::after { content: "·"; margin-left: var(--space-6); color: var(--accent-on-dark); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 4. Brands — the scroll-driven turntable section (the centerpiece) -------------------------------------------------------------------------- */ .brands { position: relative; background: var(--mc-black); } /* No-JS / fallback: panels stack as full-height readable sections */ .brand-panel { position: relative; min-height: 100vh; } /* Window scroll-snap, enabled only with JS. Only the brand anchors carry scroll-snap-align, so snapping engages just at brand boundaries; the rest of the page (hero, process, footer) has no snap targets and scrolls freely. */ html.js { scroll-snap-type: y proximity; } /* Enhanced: tall scroll track + pinned viewport. --brand-track controls scroll distance per brand: longer track = slower rotation (the sequence is spread over more scroll). */ .js .brands { --brand-track: 310vh; height: calc(var(--brand-count, 4) * var(--brand-track)); } .js .brands__viewport { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .js .brand-panel { position: absolute; inset: 0; min-height: 0; opacity: 0; visibility: hidden; pointer-events: none; /* hard cut between brands — no dissolve */ transition: none; } .js .brand-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; } /* Scroll-snap: each brand has an anchor at the start of its rotation track, so finishing one brand snaps cleanly to the next (no crossfade). Proximity (not mandatory) leaves the rotation free to scrub mid-brand. */ .js .brands__snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; } .js .brands__snap--0 { top: 0; } .js .brands__snap--1 { top: calc(var(--brand-track) * 1); } .js .brands__snap--2 { top: calc(var(--brand-track) * 2); } .js .brands__snap--3 { top: calc(var(--brand-track) * 3); } .js .brands__snap--4 { top: calc(var(--brand-track) * 4); } /* Panel tones */ .brand-panel[data-tone="dark"] { background: var(--mc-black); color: var(--mc-ivory); } .brand-panel[data-tone="darker"] { background: var(--mc-black-deep); color: var(--mc-ivory); } .brand-panel[data-tone="light"] { background: var(--mc-ivory-shade); color: var(--mc-black); } /* Full-bleed split: image half always white, text half carries the brand tone */ .brand-panel__inner { display: grid; grid-template-columns: 1fr; grid-template-rows: 44vh 1fr; height: 100%; width: 100%; } /* Media (turntable) — white ground in every panel, image fills it */ .brand-panel__media { position: relative; min-height: 0; height: 100%; background: var(--mc-white); overflow: hidden; } .brand-panel__text { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--space-6) var(--layout-gutter) var(--space-7); } /* --- Turntable — fills the white media half --- */ .turntable { position: relative; width: 100%; height: 100%; min-height: 0; display: block; overflow: hidden; perspective: 1600px; } .turntable__glow, .turntable__sheen, .turntable__reflection { display: none; } /* Image hidden until every frame of the brand is decoded (no jank on scrub) */ .turntable__img { opacity: 1; transition: opacity 0.5s var(--ease-out); } .js .turntable.is-loading .turntable__img { opacity: 0; } .js .turntable.is-ready .turntable__img { opacity: 1; } /* Desktop frame rotation renders to a canvas (instant frame blits). */ .turntable__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.45s var(--ease-out); pointer-events: none; } .turntable.is-rotating.is-ready .turntable__canvas { opacity: 1; } .turntable.is-rotating .turntable__img { opacity: 0; } /* Loading spinner shown over the white media half while frames decode */ .js .turntable.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--mc-ivory-line); border-top-color: var(--mc-gold); animation: turntableSpin 0.8s linear infinite; } @keyframes turntableSpin { to { transform: rotate(360deg); } } /* Mobile: looping MP4 in place of the scroll-driven frame rotation. The video overlays the still and fades in only once it can play, so a missing/slow MP4 simply leaves the still image showing. */ .turntable__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(0.8); transform-origin: center; opacity: 0; transition: opacity 0.45s var(--ease-out); } .turntable__video.is-playing { opacity: 1; } .turntable.has-video.is-loading::after { display: none; } .turntable__glow { position: absolute; width: 78%; aspect-ratio: 1 / 1; max-width: 520px; border-radius: 50%; filter: blur(2px); } .brand-panel[data-tone="dark"] .turntable__glow { background: radial-gradient(circle at 50% 45%, rgba(248,246,242,0.34) 0%, rgba(201,168,118,0.14) 34%, rgba(248,246,242,0) 66%); } .brand-panel[data-tone="darker"] .turntable__glow { width: 88%; background: radial-gradient(circle at 50% 45%, rgba(248,246,242,0.52) 0%, rgba(201,168,118,0.20) 30%, rgba(248,246,242,0) 62%); } .brand-panel[data-tone="light"] .turntable__glow { background: radial-gradient(circle at 50% 46%, rgba(176,139,90,0.10) 0%, rgba(26,26,24,0.04) 40%, rgba(248,246,242,0) 70%); } .turntable__plate { position: absolute; inset: 0; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; } .turntable__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* 20% smaller within the white media half */ transform: scale(0.8); transform-origin: center; will-change: transform, opacity; -webkit-user-drag: none; user-select: none; } .turntable__sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.16) 50%, transparent 62%); mix-blend-mode: screen; opacity: 0.7; will-change: transform; } .turntable__reflection { position: absolute; bottom: 8%; width: 46%; height: 5%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 72%); filter: blur(6px); } .brand-panel[data-tone="light"] .turntable__reflection { background: radial-gradient(ellipse, rgba(26,26,24,0.18), transparent 72%); } .turntable__scrub-hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: currentColor; opacity: 0.5; } .turntable__scrub-hint svg { width: 16px; height: 16px; } .turntable__scrub-hint { color: var(--mc-stone); } /* --- Brand text --- */ .brand-text__index { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .brand-text__num { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.1em; color: var(--accent-on-dark); } .brand-panel[data-tone="light"] .brand-text__num { color: var(--accent); } .brand-text__rule { height: 1px; width: 64px; background: currentColor; opacity: 0.4; transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-out) 0.15s; } .brand-panel.is-active .brand-text__rule { transform: scaleX(1); } .brand-text__eyebrow { font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: currentColor; opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease-out) 0.1s, transform 0.7s var(--ease-out) 0.1s; } .brand-panel.is-active .brand-text__eyebrow { opacity: 0.7; transform: none; } .brand-text__logo { height: clamp(34px, 5vw, 52px); width: auto; align-self: flex-start; max-width: 70%; object-fit: contain; object-position: left center; margin-bottom: var(--space-5); opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease-out) 0.18s, transform 0.8s var(--ease-out) 0.18s; } .brand-panel.is-active .brand-text__logo { opacity: 1; transform: none; } .brand-text__title { font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 1.04; letter-spacing: var(--ls-display); margin-bottom: var(--space-5); } /* Line-by-line mask reveal */ .reveal-line { display: block; overflow: hidden; } .reveal-line > span { display: block; transform: translateY(115%); transition: transform 0.95s var(--ease-out); } .brand-panel.is-active .reveal-line > span, .reveal-line.is-inview > span { transform: translateY(0); } .reveal-line:nth-child(1) > span { transition-delay: 0.22s; } .reveal-line:nth-child(2) > span { transition-delay: 0.32s; } .reveal-line:nth-child(3) > span { transition-delay: 0.42s; } .brand-text__copy { font-weight: var(--fw-light); font-size: var(--fs-lead); line-height: 1.75; max-width: 42ch; margin-bottom: var(--space-6); opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease-out) 0.5s, transform 0.8s var(--ease-out) 0.5s; } .brand-panel[data-tone="dark"] .brand-text__copy, .brand-panel[data-tone="darker"] .brand-text__copy { color: var(--text-on-inverse-dim); } .brand-panel[data-tone="light"] .brand-text__copy { color: var(--text-secondary); } .brand-panel.is-active .brand-text__copy { opacity: 1; transform: none; } .brand-text__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: var(--space-6); opacity: 0.65; } .brand-text__meta li:not(:last-child)::after { content: "·"; margin-left: var(--space-3); color: var(--accent-on-dark); } .brand-panel[data-tone="light"] .brand-text__meta li:not(:last-child)::after { color: var(--accent); } .brand-text__cta { align-self: flex-start; opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease-out) 0.62s, transform 0.8s var(--ease-out) 0.62s; } .brand-panel.is-active .brand-text__cta { opacity: 1; transform: none; } /* Vertical index 01-04 */ .brands__index { position: absolute; z-index: 5; top: 50%; right: clamp(12px, 3vw, 32px); transform: translateY(-50%); display: none; flex-direction: column; gap: var(--space-4); } .brands__index li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--mc-stone); transition: color var(--dur-base) var(--ease-standard); } .brands__index-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); } .brands__index li[aria-current="true"] { color: var(--accent-on-dark); } .brands[data-active-tone="light"] .brands__index li[aria-current="true"] { color: var(--accent); } .brands__index li[aria-current="true"] .brands__index-dot { transform: scale(1.7); opacity: 1; } /* Prev/next control for the rotating collections */ .brands__nav { position: absolute; z-index: 5; bottom: clamp(24px, 5vh, 48px); right: clamp(12px, 3vw, 32px); display: none; flex-direction: column; gap: var(--space-3); } /* Prev/next belongs to the pinned desktop rotation; static/mobile uses scroll-snap, so hide the (non-functional, hard-to-see) buttons there. */ @media (min-width: 980px) { html.js .brands__nav { display: flex; } html.js.brands-static .brands__nav { display: none; } } .brands__nav-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(248,246,242,0.3); border-radius: 50%; background: rgba(248,246,242,0.06); color: var(--mc-ivory); backdrop-filter: blur(6px); transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .brands__nav-btn svg { width: 18px; height: 18px; } .brands__nav-btn:hover { background: var(--accent-on-dark); color: var(--mc-black); border-color: var(--accent-on-dark); } /* On light-tone brands the ivory buttons vanish — flip to ink outline. */ .brands[data-active-tone="light"] .brands__nav-btn { border-color: rgba(26,26,24,0.28); background: rgba(26,26,24,0.05); color: var(--mc-black); } .brands[data-active-tone="light"] .brands__nav-btn:hover { background: var(--accent); color: var(--mc-black); border-color: var(--accent); } /* -------------------------------------------------------------------------- 5. Process — four elements -------------------------------------------------------------------------- */ .process { background: var(--surface-band); padding-block: var(--space-10); } .section-head { max-width: 52ch; } .section-head__eyebrow { margin-bottom: var(--space-4); } .section-head__title { font-size: var(--fs-h2); font-weight: var(--fw-medium); } .process__quote { margin-top: var(--space-5); max-width: 26ch; color: var(--text-primary); } .process__grid { margin-top: var(--space-9); display: grid; grid-template-columns: 1fr; gap: var(--space-7); } .element__icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: var(--space-4); stroke-width: 1.5; } .element__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); margin-bottom: var(--space-3); } .element__desc { font-weight: var(--fw-light); color: var(--text-secondary); max-width: 34ch; } .element__rule { margin-top: var(--space-5); height: 1px; background: var(--border-hairline); } /* -------------------------------------------------------------------------- 6. Credentials -------------------------------------------------------------------------- */ .credentials { padding-block: var(--space-9); background: var(--surface-page); } .credentials__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); } .stat__figure { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-display); } .stat__label { margin-top: var(--space-3); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-secondary); } /* -------------------------------------------------------------------------- 6b. Chi siamo + video -------------------------------------------------------------------------- */ .about { background: var(--surface-inverse); color: var(--text-on-inverse); padding-block: var(--space-10); } .about__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; } .about__media { position: relative; display: grid; grid-template-columns: 1fr; } .about__portrait { width: 100%; height: auto; border-radius: var(--radius-sm); object-fit: cover; } /* Small overlapping detail image, desktop only */ .about__detail { display: none; } .about__eyebrow { color: var(--accent-on-dark); margin-bottom: var(--space-5); } .about__title { font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.1; margin-bottom: var(--space-6); } .about__lead { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.8; color: var(--text-on-inverse); margin-bottom: var(--space-5); max-width: 52ch; } .about__body { font-weight: var(--fw-light); line-height: 1.8; color: var(--text-on-inverse-dim); margin-bottom: var(--space-6); max-width: 52ch; } .about__link { color: var(--accent-on-dark); } /* Video feature */ .video-feature { margin: var(--space-9) 0 0; padding: 0; } .video-feature__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; max-width: calc(80vh * 16 / 9); margin-inline: auto; overflow: hidden; border-radius: var(--radius-sm); cursor: pointer; background: var(--mc-black-deep); } .video-feature__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 1.2s var(--ease-out); } .video-feature__frame:hover .video-feature__poster { transform: scale(1.04); } .video-feature__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,15,14,0.72) 0%, rgba(16,15,14,0.12) 50%, rgba(16,15,14,0.28) 100%); } .video-feature__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); display: grid; place-items: center; border: 1px solid rgba(248,246,242,0.6); border-radius: 50%; background: rgba(26,26,24,0.32); color: var(--mc-ivory); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); } .video-feature__play svg { width: 40%; height: 40%; margin-left: 6%; } .video-feature__frame:hover .video-feature__play { background: var(--accent); border-color: var(--accent); color: var(--mc-black); transform: translate(-50%, -50%) scale(1.06); } .video-feature__caption { position: absolute; left: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); color: var(--mc-ivory); } .video-feature__eyebrow { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-on-dark); } .video-feature__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); } .video-feature__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-feature__frame.is-playing .video-feature__poster, .video-feature__frame.is-playing .video-feature__scrim, .video-feature__frame.is-playing .video-feature__play, .video-feature__frame.is-playing .video-feature__caption { display: none; } /* -------------------------------------------------------------------------- 6c. Prossimo evento -------------------------------------------------------------------------- */ .event { background: var(--surface-band); padding-block: var(--space-10); border-top: 1px solid var(--border-hairline); } .event__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .event__eyebrow { color: var(--accent); margin-bottom: var(--space-5); } .event__title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--fw-medium); line-height: 1.04; margin-bottom: var(--space-7); } .event__title-em { font-style: italic; color: var(--accent); } .event__meta { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-7); } .event__meta-item { display: flex; flex-direction: column; gap: var(--space-2); } .event__meta-label { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-secondary); } .event__meta-value { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--text-primary); } /* -------------------------------------------------------------------------- 6d. Instagram gallery -------------------------------------------------------------------------- */ .instagram { padding-block: var(--space-9); background: var(--surface-page); overflow: hidden; } .instagram__head { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-7); } .instagram__eyebrow { margin-bottom: var(--space-3); } .instagram__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-medium); } .instagram__head-right { display: flex; align-items: center; gap: var(--space-6); } .instagram__follow { color: var(--accent); } .ig-nav { display: flex; gap: var(--space-3); } .ig-nav__btn { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border-hairline); border-radius: 50%; background: var(--surface-card); color: var(--text-primary); transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .ig-nav__btn svg { width: 20px; height: 20px; } .ig-nav__btn:hover { background: var(--accent); color: var(--mc-black); border-color: var(--accent); } .ig-nav__btn[disabled] { opacity: 0.32; pointer-events: none; } /* Carousel: 2 tiles per view (mobile), 5 per view (desktop). */ .instagram__carousel { width: 100%; } .ig-track { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--space-2); } .ig-track::-webkit-scrollbar { display: none; } .ig-tile { flex: 0 0 calc((100% - 1 * var(--space-3)) / 2); scroll-snap-align: start; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); } .ig-tile a { display: block; width: 100%; height: 100%; } .ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); } .ig-tile__icon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mc-ivory); background: rgba(26,26,24,0); opacity: 0; transition: opacity var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .ig-tile__icon svg { width: 30px; height: 30px; } .ig-tile:hover img { transform: scale(1.06); } .ig-tile:hover .ig-tile__icon { opacity: 1; background: rgba(26,26,24,0.32); } /* -------------------------------------------------------------------------- 7. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--mc-black); color: var(--text-on-inverse-dim); padding-block: var(--space-9) var(--space-6); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .footer-brand__name { font-family: var(--font-display); font-size: 1.4rem; color: var(--mc-ivory); margin-bottom: var(--space-4); } .footer-brand__name span { color: var(--accent-on-dark); } .footer-brand__addr { font-weight: var(--fw-light); line-height: 1.9; } .footer-brand__addr a:hover { color: var(--accent-on-dark); } .footer-col__title { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mc-stone); margin-bottom: var(--space-5); } .footer-col__list { display: flex; flex-direction: column; gap: var(--space-3); } .footer-col__list a { font-size: var(--fs-small); } .footer-col__list a:hover { color: var(--accent-on-dark); } .footer-social { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); } .footer-social a { color: var(--text-on-inverse-dim); } .footer-social a:hover { color: var(--accent-on-dark); } .footer-social svg { width: 20px; height: 20px; stroke-width: 1.5; } .site-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-on-inverse); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; font-size: var(--fs-label); letter-spacing: 0.04em; } .site-footer__bottom a:hover { color: var(--accent-on-dark); } /* -------------------------------------------------------------------------- 8. Buttons & shared -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--ls-cta); text-transform: uppercase; padding: 0.95em 1.7em; border: 1px solid currentColor; border-radius: var(--radius-md); background: transparent; color: inherit; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .btn__arrow { transition: transform var(--dur-base) var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(5px); } .btn--gold { border-color: var(--accent); color: inherit; } /* Hero CTA: solid white in its resting state, gold on hover. */ .hero .btn--gold { background: var(--mc-white); } .btn--gold:hover { background: var(--accent); color: var(--mc-black); border-color: var(--accent); } .brand-panel[data-tone="dark"] .btn--gold:hover, .brand-panel[data-tone="darker"] .btn--gold:hover { background: var(--accent-on-dark); border-color: var(--accent-on-dark); } .btn--solid { background: var(--mc-black); color: var(--mc-ivory); border-color: var(--mc-black); } .btn--solid:hover { background: var(--mc-black-90); border-color: var(--mc-black-90); } .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.02em; } .link-arrow .btn__arrow { transition: transform var(--dur-base) var(--ease-out); } .link-arrow:hover { color: var(--accent); } .brand-panel[data-tone="dark"] .link-arrow:hover, .brand-panel[data-tone="darker"] .link-arrow:hover { color: var(--accent-on-dark); } .link-arrow:hover .btn__arrow { transform: translateX(5px); } /* Scroll-reveal for standard (non-pinned) sections */ .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .reveal-up.is-inview { opacity: 1; transform: none; } .reveal-up[data-delay="1"] { transition-delay: 0.1s; } .reveal-up[data-delay="2"] { transition-delay: 0.2s; } .reveal-up[data-delay="3"] { transition-delay: 0.3s; } /* -------------------------------------------------------------------------- 9. Responsive — mobile first; enhancements at breakpoints -------------------------------------------------------------------------- */ @media (min-width: 760px) { .credentials__grid { grid-template-columns: repeat(4, 1fr); } .process__grid { grid-template-columns: repeat(2, 1fr); } .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 980px) { .site-nav__menu { display: flex; } .site-nav__shop { display: inline-block; } .lang-switch { display: flex; } .nav-toggle { display: none; } .process__grid { grid-template-columns: repeat(4, 1fr); } .brands__index { display: flex; } .about__inner { grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-7), 6vw, var(--space-10)); } .about__text { order: 1; } .about__media { order: 0; padding-bottom: var(--space-7); padding-right: var(--space-7); } .about__detail { display: block; position: absolute; right: 0; bottom: 0; width: 46%; height: auto; border-radius: var(--radius-sm); border: 6px solid var(--mc-black); object-fit: cover; } .event__meta { flex-direction: row; gap: var(--space-9); } .instagram__head { flex-direction: row; align-items: flex-end; justify-content: space-between; } /* 5 tiles per view on desktop */ .ig-tile { flex-basis: calc((100% - 4 * var(--space-3)) / 5); } .brand-panel__inner { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } /* alternating split: image left/right per panel */ .brand-panel[data-layout="image-left"] .brand-panel__media { order: 0; } .brand-panel[data-layout="image-left"] .brand-panel__text { order: 1; } .brand-panel[data-layout="image-right"] .brand-panel__media { order: 1; } .brand-panel[data-layout="image-right"] .brand-panel__text { order: 0; } .brand-panel__text { padding-block: calc(var(--nav-height) + var(--space-5)) var(--space-7); padding-inline: clamp(var(--space-6), 5vw, var(--space-9)); } } /* Mobile: turntable sits above text inside each panel */ @media (max-width: 979px) { /* Hero on phones: product carousel fills the top band, headline sits in the band below (no overlap, so no veil needed). */ .hero__content { width: 100%; max-width: 100%; padding-top: 0; padding-bottom: var(--space-8); } .hero__title { font-size: clamp(2.5rem, 11vw, 3.5rem); } .hero__lead { font-size: var(--fs-body); } .brand-panel__inner { grid-template-rows: 42vh 1fr; } .brand-text__logo { height: clamp(28px, 6vw, 40px); margin-bottom: var(--space-4); } .brand-text__title { font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: var(--space-4); } .brand-text__copy { font-size: var(--fs-body); margin-bottom: var(--space-5); } .brand-text__meta { margin-bottom: var(--space-5); } .turntable__scrub-hint { display: none; } /* Mobile uses a stacked, scroll-snapped layout with a looping MP4 per brand (set by JS via the `brands-static` flag) instead of the pinned scroll rotation — lighter and smoother on phones. */ html.brands-static .brands { height: auto; } html.brands-static .brands__viewport { position: static; height: auto; overflow: visible; } html.brands-static .brand-panel { position: relative; inset: auto; min-height: 100vh; min-height: 100svh; opacity: 1; visibility: visible; pointer-events: auto; scroll-snap-align: start; scroll-snap-stop: always; } html.brands-static .brands__snap { display: none; } } /* -------------------------------------------------------------------------- 10. Reduced motion — disable scrub/marquee, fall back to readable stack -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .heritage__track { animation: none; transform: none; } .hero__scroll-line { animation: none; } .hero__media { transform: none; } *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } }