/*
* B7's Barber Shop — base CSS.
*
* Bootstrap fa il grosso (utility, grid, components). Qui:
* 1. reset minimo (box-sizing, body defaults)
* 2. typography di base (font display vs body, scale)
* 3. theming dark sopra Bootstrap (header, footer, link, btn-primary)
*
* Gli effetti drammatici (loader blade reveal, vignette, noise, lamp glow,
* sfondo mattoni) NON sono qui: arrivano in A.4 (homepage) o nella sessione
* style dedicata.
*/
/* ============================================================
* 1. RESET
* ============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--brand-bg);
color: var(--brand-text);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-base);
letter-spacing: var(--tracking-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow-x: hidden;
}
/* Noise texture overlay — SVG feTurbulence inline, opacita' bassa.
Crea quella "sporcatura" da pellicola/grain che da' carattere alla dark UI. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1000;
opacity: var(--noise-opacity);
mix-blend-mode: var(--noise-blend);
background-image: url("data:image/svg+xml;utf8,");
}
/* Vignette globale — radial gradient fisso, scurisce i bordi del viewport.
Da' quella sensazione "trailer cinematografico" che il brief chiede. */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
background: radial-gradient(ellipse at center,
transparent 0%,
transparent 55%,
var(--vignette) 100%);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* Foto dal tag {% foto %} (apps/core/templatetags/foto.py): hanno width e
height veri contro i salti di layout, ma l'altezza la decide il CSS di chi
le usa (aspect-ratio, height: 100%...), non l'attributo. */
.foto {
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
/* ============================================================
* 2. TYPOGRAPHY
* ============================================================ */
h1, h2, h3, h4 {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
}
/* Oswald: titoli grandi in bold (mockup), sottotitoli in semibold */
h1, h2 { font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
/* Container allineato al mockup: max 1200px (Bootstrap arriva a 1320) */
@media (min-width: 1400px) {
.container {
max-width: 1200px;
}
}
/* Mobile: 20px di respiro per lato come il mockup (Bootstrap: 12px) */
@media (max-width: 991.98px) {
.container {
--bs-gutter-x: 2.5rem;
}
}
p {
margin: 0 0 var(--space-4);
}
a {
color: var(--brand-primary);
text-decoration: none;
transition: color var(--t-fast), opacity var(--t-fast);
}
a:hover,
a:focus-visible {
color: var(--brand-accent);
}
.text-muted {
color: var(--brand-text-soft) !important;
}
/* ============================================================
* 3. LAYOUT — header, main, footer (override Bootstrap per dark)
* ============================================================ */
.site-header {
/* Sopra la vignettatura globale (body::after, z 999): se no scurisce il
logo e i bottoni, che stanno proprio sul bordo alto dello schermo.
E sopra il velo del menu laterale (backdrop Bootstrap, z 1040): il menu
sta DENTRO la barra, quindi con la barra a 1001 finiva sotto il velo e i
tocchi sui link prendevano il velo (menu che «fa fatica»). */
position: relative;
z-index: 1041;
background-color: transparent;
color: var(--brand-text);
border-bottom: 1px solid var(--brand-primary-12);
}
.site-header .navbar {
min-height: var(--header-h-mobile);
}
/* Mobile: brand + chip + azioni (tema, Prenota, hamburger) su UNA riga:
niente wrap, il brand si stringe con ellipsis se serve */
@media (max-width: 991.98px) {
.site-header .navbar > .container {
flex-wrap: nowrap;
gap: 0.5rem;
}
.site-header .navbar-brand {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.125rem;
margin-right: 0;
}
.site-header .shop-status-chip {
flex: none;
}
.site-header .navbar-actions {
flex: none;
margin-left: auto;
}
}
@media (min-width: 992px) {
.site-header .navbar {
min-height: var(--header-h-desktop);
}
}
/* Logo tondo al posto del nome */
.site-header .navbar-brand {
display: inline-flex;
align-items: center;
padding: 6px 0;
line-height: 0;
}
.site-header .navbar-logo {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
@media (min-width: 992px) {
.site-header .navbar-logo { width: 58px; height: 58px; }
}
.site-header .navbar-brand {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: var(--tracking-display);
color: var(--brand-text) !important;
text-transform: uppercase;
}
.site-header .nav-link {
font-family: var(--font-body);
color: var(--brand-text) !important;
text-transform: uppercase;
font-size: var(--fs-eyebrow);
letter-spacing: 0.2em;
opacity: 0.75;
transition: color var(--t-fast), opacity var(--t-fast);
}
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
opacity: 1;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
color: var(--brand-primary) !important;
}
.site-header .navbar-toggler {
border-color: var(--brand-primary-30);
color: var(--brand-text);
}
.site-header .navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem var(--brand-primary-30);
}
.site-header .navbar-toggler-icon {
/* override SVG dell'icona hamburger per renderlo bianco caldo */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E8DDCC' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* In tema light l'header e' su fondo chiaro -> hamburger scuro (espresso) */
[data-theme="light"] .site-header .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23241A10' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ============ MENU MOBILE — drawer laterale (offcanvas) ============
Dentro .navbar-expand-lg Bootstrap rende l'offcanvas inline a lg+
(header nascosto, body in flex): il desktop resta identico. */
.site-offcanvas {
--bs-offcanvas-width: min(85vw, 340px);
--bs-offcanvas-bg: var(--brand-bg);
--bs-offcanvas-color: var(--brand-text);
--bs-offcanvas-border-color: var(--border-subtle);
}
.site-offcanvas .offcanvas-header {
border-bottom: 1px solid var(--border-subtle);
padding: 1.125rem 1.25rem;
}
.site-offcanvas-title {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--brand-primary);
}
.site-offcanvas .btn-close {
filter: invert(1) grayscale(1) opacity(0.8);
}
[data-theme="light"] .site-offcanvas .btn-close {
filter: none;
}
/* Mobile: link come bottoni grandi impilati, auth in fondo al drawer */
@media (max-width: 991.98px) {
.site-offcanvas .offcanvas-body {
display: flex;
flex-direction: column;
padding: 1.25rem;
}
.site-offcanvas .navbar-nav {
gap: 10px;
}
.site-header .site-offcanvas .nav-link {
display: block;
border: 1px solid var(--border-strong);
padding: 0.9375rem 1.125rem;
font-size: 0.75rem;
font-weight: 700;
opacity: 1;
transition: border-color var(--t-fast), color var(--t-fast);
}
.site-header .site-offcanvas .nav-link:hover,
.site-header .site-offcanvas .nav-link:focus-visible {
border-color: var(--brand-primary);
color: var(--brand-primary) !important;
}
/* Prenota nel drawer: pieno rame, spicca sui link outline */
.nav-prenota-drawer {
display: block;
margin-top: 10px;
text-align: center;
background: var(--brand-primary);
color: var(--on-primary);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 1rem 1.125rem;
transition: background var(--t-fast), color var(--t-fast);
}
.nav-prenota-drawer:hover,
.nav-prenota-drawer:focus-visible {
background: var(--primary-hover-bg);
color: var(--primary-hover-text);
}
.nav-auth {
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid var(--border-subtle);
}
/* Accedi: bottone outline pieno-larghezza, in linea con gli altri */
.nav-login-link {
display: block;
text-align: center;
border: 1px solid var(--border-strong);
color: var(--brand-text);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.9375rem 1.125rem;
transition: border-color var(--t-fast), color var(--t-fast);
}
.nav-login-link:hover,
.nav-login-link:focus-visible {
border-color: var(--brand-primary);
color: var(--brand-primary);
}
}
/* Card account (mobile: card grande in fondo; desktop: voce compatta) */
.nav-account-card {
display: flex;
align-items: center;
gap: 0.875rem;
border: 1px solid var(--border-strong);
background: var(--surface);
padding: 0.875rem 1rem;
color: var(--brand-text);
transition: border-color var(--t-fast);
}
.nav-account-card:hover,
.nav-account-card:focus-visible {
border-color: var(--brand-primary);
color: var(--brand-text);
}
.nav-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.25rem;
flex: none;
}
.nav-account-info {
flex: 1;
min-width: 0;
}
.nav-account-name {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-account-sub {
display: block;
font-size: 0.625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-muted);
margin-top: 3px;
}
.nav-account-arrow {
color: var(--brand-primary);
flex: none;
}
@media (min-width: 992px) {
.nav-auth {
display: flex;
align-items: center;
margin-right: 1.5rem;
}
.nav-account-card {
border: 0;
background: transparent;
padding: 0;
gap: 0.5rem;
}
.nav-avatar {
width: 26px;
height: 26px;
font-size: 0.8125rem;
}
.nav-account-name {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-eyebrow);
letter-spacing: 0.2em;
opacity: 0.75;
transition: opacity var(--t-fast);
}
.nav-account-card:hover .nav-account-name,
.nav-account-card:focus-visible .nav-account-name {
opacity: 1;
}
.nav-account-sub,
.nav-account-arrow {
display: none;
}
.nav-login-link {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-text);
opacity: 0.75;
transition: opacity var(--t-fast), color var(--t-fast);
}
.nav-login-link:hover,
.nav-login-link:focus-visible {
opacity: 1;
color: var(--brand-primary);
}
}
/* ============================================================
* 5b. THEME TOGGLE — bottone sole/luna (A.11)
* ============================================================ */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
margin-right: var(--space-2);
border: 1px solid var(--brand-primary-30);
border-radius: 50%;
background: transparent;
color: var(--brand-text);
cursor: pointer;
transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
color: var(--brand-primary);
border-color: var(--brand-primary);
outline: none;
box-shadow: 0 0 0 0.2rem var(--brand-primary-30);
}
.theme-toggle:active {
transform: scale(0.92);
}
.theme-toggle .theme-icon {
width: 18px;
height: 18px;
}
/* Mostra l'icona dell'azione: in dark il sole (-> vai a light), in light la luna */
.theme-icon--moon { display: none; }
.theme-icon--sun { display: block; }
[data-theme="light"] .theme-icon--moon { display: block; }
[data-theme="light"] .theme-icon--sun { display: none; }
main {
min-height: 60vh;
}
.site-footer {
margin-top: var(--space-12);
padding-top: var(--space-8);
padding-bottom: var(--space-6);
background-color: transparent;
color: var(--brand-text-soft);
border-top: 1px solid var(--border-subtle);
font-size: var(--fs-sm);
}
.footer-brand {
font-family: var(--font-display);
font-size: var(--fs-h4);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
margin-bottom: var(--space-3);
}
.footer-claim {
color: var(--brand-text-soft);
margin: 0;
line-height: 1.6;
}
.footer-title {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-primary);
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--brand-primary-12);
}
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li {
margin-bottom: var(--space-2);
}
.footer-list a {
color: var(--brand-text-soft);
text-decoration: none;
transition: color var(--t-fast);
}
.footer-list a:hover,
.footer-list a:focus-visible {
color: var(--brand-accent);
}
.footer-bottom {
margin-top: var(--space-8);
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
/* muted, non faint: a 10px il faint non arrivava al contrasto minimo (3,3:1) */
color: var(--brand-muted);
}
@media (min-width: 768px) {
.footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.footer-legal a {
color: var(--brand-text-soft);
text-decoration: underline;
text-decoration-color: var(--brand-primary-30);
text-underline-offset: 3px;
margin-left: var(--space-3);
}
.footer-legal a:first-child {
margin-left: 0;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
color: var(--brand-accent);
}
/* ============================================================
* 4. COMPONENTI base (override Bootstrap)
* ============================================================ */
/* Tutti i .btn: squadrati, mono 11px bold spaziato (mockup).
Rimuovi anche focus shadow blu Bootstrap. */
.btn {
/* RGB di var(--brand-primary) = #C8834A = 200, 131, 74 */
--bs-btn-focus-shadow-rgb: 200, 131, 74;
--bs-btn-border-radius: 0;
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.875rem 1.625rem; /* 14px 26px */
}
.btn-sm {
--bs-btn-border-radius: 0;
font-size: 0.625rem;
padding: 0.625rem 1.125rem; /* 10px 18px, come la CTA nav del mockup */
}
.btn-lg {
--bs-btn-border-radius: 0;
font-size: 0.6875rem;
padding: 1rem 2.125rem; /* 16px 34px */
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 0.2rem var(--brand-primary-30) !important;
}
.btn-primary {
--bs-btn-bg: var(--brand-primary);
--bs-btn-border-color: var(--brand-primary);
--bs-btn-color: var(--on-primary);
--bs-btn-hover-bg: var(--primary-hover-bg);
--bs-btn-hover-border-color: var(--primary-hover-bg);
--bs-btn-hover-color: var(--primary-hover-text);
--bs-btn-active-bg: var(--brand-primary);
--bs-btn-active-border-color: var(--brand-primary);
/* Anche lo stato disabilitato: senza queste, Bootstrap ricade sul suo blu di
default e un bottone spento diventa azzurro in mezzo al rame. */
--bs-btn-disabled-bg: var(--brand-primary);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-disabled-color: var(--on-primary);
}
/* Outline neutro (mockup): bordo bruno, testo chiaro; hover fill rame */
.btn-outline-primary {
--bs-btn-color: var(--brand-text);
--bs-btn-border-color: var(--border-strong);
--bs-btn-hover-bg: var(--brand-primary);
--bs-btn-hover-color: var(--on-primary);
--bs-btn-hover-border-color: var(--brand-primary);
--bs-btn-active-bg: var(--brand-primary);
--bs-btn-active-border-color: var(--brand-primary);
--bs-btn-active-color: var(--on-primary);
}
/* alert su sfondo dark — i default Bootstrap sono pensati per sfondo chiaro */
.alert {
background-color: var(--brand-bg-soft);
color: var(--brand-text);
border: 1px solid var(--brand-primary-30);
}
.alert .btn-close {
filter: invert(1) opacity(0.7);
}
/* form controls — bordi visibili su sfondo dark */
.form-control,
.form-select {
background-color: var(--brand-bg-soft);
border-color: var(--brand-primary-30);
color: var(--brand-text);
}
.form-control:focus,
.form-select:focus {
background-color: var(--brand-bg-soft);
border-color: var(--brand-primary);
color: var(--brand-text);
box-shadow: 0 0 0 0.2rem var(--brand-primary-30);
}
.form-control::placeholder {
color: var(--brand-text-soft);
}
/* ============================================================
* 5. CTA Prenota (header) — sempre in evidenza in rame
* ============================================================ */
.cta-prenota {
padding: 0.5rem 0.9rem;
letter-spacing: 0.16em;
}
@media (min-width: 992px) {
.cta-prenota {
padding: 0.625rem 1.125rem;
}
}
/* ============================================================
* 6. FAB WhatsApp/Chiama — fisso bottom-right con "respiro"
* ============================================================ */
.fab {
position: fixed;
bottom: var(--space-4);
right: var(--space-4);
z-index: 1040;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-3);
}
/* Le voci: aperte nel markup (per chi non ha JavaScript), chiuse appena lo
script si accorge di esserci. */
.fab-azioni {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
}
.fab.is-pronto .fab-azioni {
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(0.96);
transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.fab.is-pronto.is-aperto .fab-azioni {
opacity: 1;
visibility: visible;
transform: none;
}
.fab-voce {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 0.55rem 1rem 0.55rem 0.55rem;
border-radius: 999px;
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
color: var(--brand-text);
text-decoration: none;
font-size: var(--fs-sm);
letter-spacing: 0.04em;
white-space: nowrap;
backdrop-filter: blur(6px);
box-shadow: var(--shadow-soft);
transition: transform var(--t-base), border-color var(--t-base);
}
.fab-voce:hover, .fab-voce:focus-visible {
transform: translateX(-2px);
color: var(--brand-text);
border-color: var(--brand-primary);
outline: none;
}
.fab-voce-icona {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
flex: 0 0 34px;
}
.fab-voce-icona svg { width: 19px; height: 19px; }
/* La prenotazione online e' quella che risolve da sola: pieno rame, testo piu'
marcato, e sta attaccata al bottone che apre il pannello (il punto piu' comodo
da raggiungere col pollice). */
.fab-voce--primaria {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--brand-bg);
font-weight: 600;
}
.fab-voce--primaria:hover, .fab-voce--primaria:focus-visible { color: var(--brand-bg); }
.fab-voce--primaria .fab-voce-icona { background: rgba(0, 0, 0, 0.18); color: var(--brand-bg); }
.fab-voce--whatsapp .fab-voce-icona { background: #25d366; color: #fff; }
.fab-voce--telefono .fab-voce-icona { background: var(--brand-primary); color: var(--brand-bg); }
.fab-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--brand-primary);
color: var(--brand-bg);
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: transform var(--t-base), box-shadow var(--t-base);
animation: fab-breath 2.6s ease-in-out infinite;
}
.fab-trigger:hover, .fab-trigger:focus-visible {
transform: scale(1.06);
box-shadow: var(--shadow-soft), var(--shadow-glow);
outline: none;
}
.fab.is-aperto .fab-trigger { animation: none; }
.fab-icona { width: 26px; height: 26px; position: absolute; transition: opacity var(--t-base), transform var(--t-base); }
.fab-trigger { position: relative; }
.fab-icona--aperto { opacity: 0; transform: rotate(-90deg); }
.fab.is-aperto .fab-icona--chiuso { opacity: 0; transform: rotate(90deg); }
.fab.is-aperto .fab-icona--aperto { opacity: 1; transform: none; }
@keyframes fab-breath {
0%, 100% {
transform: scale(1);
box-shadow: var(--shadow-soft), 0 0 0 0 rgba(200, 131, 74, 0.5);
}
50% {
transform: scale(1.04);
box-shadow: var(--shadow-soft), 0 0 0 12px rgba(200, 131, 74, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.fab-trigger { animation: none; }
.fab.is-pronto .fab-azioni { transition: none; }
}
@media (min-width: 992px) {
.fab { bottom: var(--space-6); right: var(--space-6); }
.fab-trigger { width: 64px; height: 64px; }
.fab-icona { width: 30px; height: 30px; }
}
/* ============================================================
* 7. SCROLL REVEAL — base class per IntersectionObserver in main.js
* ============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============================================================
* 8. HOMEPAGE — Hero
* ============================================================ */
.hero {
position: relative;
min-height: calc(100vh - var(--header-h-mobile));
display: flex;
align-items: center;
padding: var(--space-10) 0;
overflow: hidden;
/* L'hero segue il TEMA (A.11): dark -> fascia scura cinematografica,
light -> "carta calda". I 3 sfondi SfondoHero hanno override light piu' sotto.
background-color proprio cosi' la variante mattoni ha una base piena. */
background-color: var(--brand-bg);
}
@media (min-width: 992px) {
.hero {
min-height: calc(100vh - var(--header-h-desktop));
padding: var(--space-12) 0;
}
}
/* Sfondo decorativo: varianti scelte da SfondoHero in admin.
Container base + classe modificatore .hero-bg--. */
.hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-inner {
position: relative;
z-index: 1;
text-align: center;
/* il titolone Oswald deve stare su una riga sui viewport larghi (mockup) */
max-width: 1200px;
}
/* -------- Variante: MATTONI + LAMPADA CALDA -------- */
.hero-bg--mattoni-lamp .hero-bg-bricks {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 320px 160px;
opacity: 0.55;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.4) 80%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.4) 80%, transparent 100%);
}
.hero-bg--mattoni-lamp .hero-bg-glow {
position: absolute;
border-radius: 50%;
filter: blur(60px);
will-change: opacity, transform;
}
.hero-bg--mattoni-lamp .hero-bg-glow--lamp {
top: -10%;
left: 50%;
width: 70vw;
height: 60vh;
transform: translateX(-50%);
background: radial-gradient(circle at center,
rgba(255, 170, 90, 0.32) 0%,
rgba(200, 131, 74, 0.18) 30%,
transparent 70%);
animation: hero-lamp-flicker 8s ease-in-out infinite;
}
.hero-bg--mattoni-lamp .hero-bg-glow--floor {
bottom: -20%;
left: 50%;
width: 90vw;
height: 40vh;
transform: translateX(-50%);
background: radial-gradient(ellipse at center,
rgba(200, 131, 74, 0.18) 0%,
rgba(200, 131, 74, 0.06) 40%,
transparent 70%);
animation: hero-lamp-flicker 11s ease-in-out infinite reverse;
}
@keyframes hero-lamp-flicker {
0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
35% { opacity: 0.85; transform: translateX(-50%) scale(1.04); }
65% { opacity: 0.95; transform: translateX(-50%) scale(0.98); }
}
/* -------- Variante: LAMPADINE BOKEH (luce calda diffusa) -------- */
.hero-bg--lampadine-bokeh {
background: radial-gradient(ellipse at center, #0c0703 0%, #0c0906 100%);
}
.hero-bg--lampadine-bokeh .hero-bulb {
position: absolute;
border-radius: 50%;
pointer-events: none;
will-change: opacity, transform;
animation: bulb-pulse 6s ease-in-out infinite;
}
/* 9 lampadine sparse, dimensioni e colori caldi differenti.
Coordinate scelte per evitare la fascia centrale (dove sta il testo). */
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(1) {
top: 8%; left: 10%;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(255, 204, 136, 0.55) 0%, rgba(255, 170, 90, 0.18) 35%, transparent 70%);
filter: blur(36px);
animation-delay: 0s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(2) {
top: 15%; left: 78%;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(255, 180, 100, 0.5) 0%, rgba(255, 150, 70, 0.16) 35%, transparent 70%);
filter: blur(30px);
animation-delay: 1.2s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(3) {
top: 35%; left: 5%;
width: 100px; height: 100px;
background: radial-gradient(circle, rgba(255, 196, 130, 0.6) 0%, rgba(255, 160, 90, 0.18) 35%, transparent 70%);
filter: blur(24px);
animation-delay: 2.4s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(4) {
top: 30%; left: 90%;
width: 80px; height: 80px;
background: radial-gradient(circle, rgba(255, 220, 160, 0.55) 0%, rgba(255, 180, 100, 0.15) 40%, transparent 70%);
filter: blur(20px);
animation-delay: 3.6s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(5) {
bottom: 25%; left: 15%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255, 170, 90, 0.45) 0%, rgba(255, 140, 60, 0.14) 35%, transparent 70%);
filter: blur(44px);
animation-delay: 0.8s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(6) {
bottom: 12%; left: 75%;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(255, 188, 108, 0.5) 0%, rgba(255, 150, 80, 0.16) 35%, transparent 70%);
filter: blur(38px);
animation-delay: 2.0s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(7) {
top: 55%; left: 50%;
width: 90px; height: 90px;
background: radial-gradient(circle, rgba(255, 210, 140, 0.4) 0%, rgba(255, 170, 90, 0.12) 40%, transparent 70%);
filter: blur(28px);
animation-delay: 4.2s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(8) {
top: 70%; left: 30%;
width: 110px; height: 110px;
background: radial-gradient(circle, rgba(255, 196, 120, 0.5) 0%, rgba(255, 160, 80, 0.16) 35%, transparent 70%);
filter: blur(30px);
animation-delay: 1.6s;
}
.hero-bg--lampadine-bokeh .hero-bulb:nth-child(9) {
top: 5%; left: 45%;
width: 70px; height: 70px;
background: radial-gradient(circle, rgba(255, 230, 180, 0.65) 0%, rgba(255, 200, 130, 0.2) 40%, transparent 70%);
filter: blur(18px);
animation-delay: 3.0s;
}
@keyframes bulb-pulse {
0%, 100% { opacity: 0.95; transform: scale(1); }
50% { opacity: 0.65; transform: scale(1.08); }
}
/* Vignetta complessiva piu' marcata sotto le lampadine, per "incollare" la luce al buio */
.hero-bg--lampadine-bokeh::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center,
transparent 30%,
rgba(12, 9, 6, 0.55) 90%);
}
/* -------- Variante: TUBATURE DI RAME (officina industrial) -------- */
.hero-bg--tubature-rame {
background:
radial-gradient(ellipse at 30% 20%, rgba(200, 131, 74, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(200, 131, 74, 0.05) 0%, transparent 50%),
linear-gradient(135deg, #14100b 0%, #0c0906 100%);
}
/* 2 layer di tubature ortogonali sovrapposte, angoli diversi. Ogni "tubo"
e' una stratificazione di gradient: trasparente -> ombra scura -> highlight rame
-> ombra scura -> trasparente. L'occhio legge un cilindro. */
.hero-bg--tubature-rame .hero-tubi {
position: absolute;
inset: -10%;
pointer-events: none;
opacity: 0.55;
}
.hero-bg--tubature-rame .hero-tubi--diag1 {
background: repeating-linear-gradient(
118deg,
transparent 0,
transparent 120px,
rgba(0, 0, 0, 0.4) 120px,
rgba(0, 0, 0, 0.4) 122px,
rgba(200, 131, 74, 0.55) 124px,
rgba(220, 160, 90, 0.7) 128px,
rgba(200, 131, 74, 0.55) 132px,
rgba(0, 0, 0, 0.4) 134px,
rgba(0, 0, 0, 0.4) 136px,
transparent 138px,
transparent 240px
);
filter: blur(0.5px);
}
.hero-bg--tubature-rame .hero-tubi--diag2 {
background: repeating-linear-gradient(
62deg,
transparent 0,
transparent 180px,
rgba(0, 0, 0, 0.35) 180px,
rgba(0, 0, 0, 0.35) 182px,
rgba(200, 131, 74, 0.4) 184px,
rgba(214, 150, 80, 0.55) 188px,
rgba(200, 131, 74, 0.4) 192px,
rgba(0, 0, 0, 0.35) 194px,
rgba(0, 0, 0, 0.35) 196px,
transparent 198px,
transparent 360px
);
opacity: 0.4;
filter: blur(0.5px);
}
/* Valvole/lampade alle giunture: piccoli aloni ramati con anello */
.hero-bg--tubature-rame .hero-valvola {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle,
rgba(255, 200, 130, 0.65) 0%,
rgba(200, 131, 74, 0.35) 35%,
transparent 70%);
filter: blur(14px);
animation: valvola-blink 5s ease-in-out infinite;
}
.hero-bg--tubature-rame .hero-valvola--1 { top: 12%; left: 18%; animation-delay: 0s; }
.hero-bg--tubature-rame .hero-valvola--2 { top: 22%; left: 72%; width: 120px; height: 120px; animation-delay: 1.3s; }
.hero-bg--tubature-rame .hero-valvola--3 { top: 65%; left: 12%; width: 100px; height: 100px; animation-delay: 2.6s; }
.hero-bg--tubature-rame .hero-valvola--4 { top: 78%; left: 65%; animation-delay: 0.8s; }
.hero-bg--tubature-rame .hero-valvola--5 { top: 45%; left: 88%; width: 60px; height: 60px; animation-delay: 3.4s; }
@keyframes valvola-blink {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.55; }
}
/* Vignetta finale per dare profondita' */
.hero-bg--tubature-rame::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center,
transparent 25%,
rgba(12, 9, 6, 0.6) 95%);
}
/* ============================================================
* 8b. HERO — varianti SfondoHero in TEMA LIGHT (A.11)
* I glow/lampadine/valvole caldi restano: su crema leggono come
* luce calda diffusa. Cambiano le BASI scure -> carta e i mattoni.
* Escluse dalla hero video (.hero-scrub, vedi 8c): li' la
* scenografia fa da quinta dietro un video scuro e resta dark.
* ============================================================ */
/* -------- mattoni-lamp: mattoni chiari + lampada piu' tenue -------- */
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--mattoni-lamp .hero-bg-bricks {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.6;
}
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--mattoni-lamp .hero-bg-glow--lamp {
background: radial-gradient(circle at center,
rgba(255, 180, 105, 0.28) 0%,
rgba(200, 131, 74, 0.12) 30%,
transparent 70%);
}
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--mattoni-lamp .hero-bg-glow--floor {
background: radial-gradient(ellipse at center,
rgba(200, 131, 74, 0.12) 0%,
rgba(200, 131, 74, 0.04) 40%,
transparent 70%);
}
/* -------- lampadine-bokeh: base carta + vignetta calda chiara -------- */
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--lampadine-bokeh {
background: radial-gradient(ellipse at center, #fbf4e6 0%, #ede0ca 100%);
}
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--lampadine-bokeh::after {
background: radial-gradient(ellipse at center,
transparent 35%,
rgba(150, 110, 60, 0.10) 90%);
}
/* -------- tubature-rame: base carta + vignetta chiara + tubi piu' soft -------- */
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--tubature-rame {
background:
radial-gradient(ellipse at 30% 20%, rgba(200, 131, 74, 0.10) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(200, 131, 74, 0.07) 0%, transparent 50%),
linear-gradient(135deg, #fbf4e6 0%, #ede0ca 100%);
}
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--tubature-rame .hero-tubi--diag1 {
background: repeating-linear-gradient(
118deg,
transparent 0,
transparent 120px,
rgba(120, 80, 40, 0.22) 120px,
rgba(120, 80, 40, 0.22) 122px,
rgba(200, 131, 74, 0.72) 124px,
rgba(150, 92, 42, 0.88) 128px,
rgba(200, 131, 74, 0.72) 132px,
rgba(120, 80, 40, 0.22) 134px,
rgba(120, 80, 40, 0.22) 136px,
transparent 138px,
transparent 240px
);
opacity: 0.7;
}
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--tubature-rame .hero-tubi--diag2 {
background: repeating-linear-gradient(
62deg,
transparent 0,
transparent 180px,
rgba(120, 80, 40, 0.18) 180px,
rgba(120, 80, 40, 0.18) 182px,
rgba(200, 131, 74, 0.55) 184px,
rgba(150, 92, 42, 0.7) 188px,
rgba(200, 131, 74, 0.55) 192px,
rgba(120, 80, 40, 0.18) 194px,
rgba(120, 80, 40, 0.18) 196px,
transparent 198px,
transparent 360px
);
opacity: 0.55;
}
[data-theme="light"] .hero:not(.hero-scrub) .hero-bg--tubature-rame::after {
background: radial-gradient(ellipse at center,
transparent 25%,
rgba(150, 110, 60, 0.10) 95%);
}
@media (prefers-reduced-motion: reduce) {
.hero-bg--mattoni-lamp .hero-bg-glow,
.hero-bg--lampadine-bokeh .hero-bulb,
.hero-bg--tubature-rame .hero-valvola {
animation: none;
}
}
.hero-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-4);
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.6em;
}
.hero-eyebrow-addr {
color: var(--brand-text);
}
.hero-eyebrow-sep {
color: var(--brand-primary-30);
}
.hero-eyebrow-city {
color: var(--brand-primary);
}
.hero-title {
/* mockup: clamp(42px, 8.6vw, 110px), lh 0.98 */
font-size: clamp(2.625rem, 8.6vw, 6.875rem);
line-height: 0.98;
margin: 0 0 var(--space-5);
text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
.hero-claim {
font-size: var(--fs-sm);
/* testo pieno + shadow: deve leggersi anche sul video */
color: var(--brand-text);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
max-width: 460px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
line-height: 1.9;
}
.hero-cta {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
/* -------- Hero con la foto del salone (apertura, 24/09/2026) --------
Sempre scura, anche col tema chiaro: sopra c'e' una foto. --hs va da 0
(in cima) a 1 (hero uscita di vista), la aggiorna initHeroSalone(). */
.hero-salone {
--hs: 0;
min-height: 100svh;
background-color: #0d0a07;
color: #efe4d2;
isolation: isolate;
}
.hero-salone-foto {
position: absolute;
inset: -4% 0 0;
z-index: -2;
overflow: hidden;
}
.hero-salone-foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 45%;
transform: translate3d(0, calc(var(--hs) * 22%), 0) scale(calc(1.04 + var(--hs) * 0.1));
filter: blur(calc(var(--hs) * 8px)) saturate(0.85) brightness(calc(0.62 - var(--hs) * 0.3));
will-change: transform, filter;
}
/* Arrivo: la foto parte piu' grande e un filo sfocata e si assesta in 2.4s.
.hs-attesa la mette il JS al caricamento e la toglie al frame dopo: senza
JS la hero e' gia' nello stato finale. */
.hero-salone.hs-attesa .hero-salone-foto img {
transform: scale(1.14);
filter: blur(3px) saturate(0.85) brightness(0.5);
}
.hero-salone.hs-arrivo .hero-salone-foto img {
transition: transform 2.4s cubic-bezier(.2, .7, .2, 1), filter 2.4s ease;
}
/* Velo: vignetta calda + sfumatura verso il fondo pagina, per leggere i testi
e per non avere uno stacco netto con la sezione sotto. */
.hero-salone-velo {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse at 50% 42%, rgba(13, 10, 7, 0.15) 0%, rgba(13, 10, 7, 0.55) 60%, rgba(13, 10, 7, 0.85) 100%),
linear-gradient(180deg, rgba(13, 10, 7, 0.35) 0%, transparent 30%, transparent 62%, var(--brand-bg) 100%);
}
.hero-salone-inner {
transform: translate3d(0, calc(var(--hs) * -90px), 0);
opacity: calc(1 - var(--hs) * 1.6);
}
.hero-salone .hero-eyebrow-addr,
.hero-salone .hero-claim { color: #efe4d2; }
.hero-salone-logo {
margin: var(--space-2) auto var(--space-6);
width: clamp(170px, 24vw, 300px);
line-height: 0;
}
.hero-salone.hs-attesa .hero-salone-logo {
opacity: 0;
transform: translateY(14px);
}
.hero-salone.hs-arrivo .hero-salone-logo {
transition: opacity 1.2s ease 0.35s, transform 1.2s cubic-bezier(.2, .7, .2, 1) 0.35s;
}
.hero-salone-logo img {
width: 100%;
height: auto;
border-radius: 50%;
box-shadow: 0 14px 50px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(239, 228, 210, 0.08);
}
.hero-salone .hero-scrollhint {
color: rgba(239, 228, 210, 0.7);
opacity: calc(1 - var(--hs) * 4);
}
@media (prefers-reduced-motion: reduce) {
.hero-salone-foto img {
transform: scale(1.04);
filter: saturate(0.85) brightness(0.62);
}
.hero-salone-inner { transform: none; opacity: 1; }
}
/* ============================================================
* 9. HOMEPAGE — Marquee servizi/tagli (scroll infinito)
* ============================================================ */
.marquee {
position: relative;
overflow: hidden;
padding: 13px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background-color: var(--surface);
}
/* Il track contiene 1..N blocchi identici (JS clona finche' >= 2x viewport).
Animation trasla esattamente di una blockWidth, cosi' i blocchi successivi
prendono il posto del primo senza gap. */
.marquee-track {
display: flex;
align-items: center;
width: max-content;
white-space: nowrap;
animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}
.marquee-block {
display: inline-flex;
align-items: center;
gap: var(--space-4);
padding-right: var(--space-4);
font-family: var(--font-display);
font-weight: 600;
/* mockup: 15px, ls 0.12em, testo caldo attenuato */
font-size: 0.9375rem;
color: var(--brand-text-dim);
letter-spacing: 0.12em;
text-transform: uppercase;
flex: 0 0 auto;
}
.marquee-item {
padding: 0 var(--space-2);
}
.marquee-sep {
color: var(--brand-primary);
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-1 * var(--marquee-block-width, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
}
/* ============================================================
* 10. HOMEPAGE — Teaser sections
* ============================================================ */
.teaser {
padding: clamp(70px, 10vh, 130px) 0;
border-bottom: 1px solid var(--border-subtle);
}
.teaser-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.teaser-title {
font-size: var(--fs-h2);
margin-bottom: var(--space-5);
}
.teaser-text {
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
max-width: 420px;
margin-bottom: var(--space-5);
}
/* Lista punti sotto il teaser-text: 2-3 highlight con strong in rame */
.teaser-points {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.teaser-points li {
position: relative;
padding-left: var(--space-5);
color: var(--brand-text-soft);
font-size: var(--fs-sm);
line-height: 1.7;
}
.teaser-points li::before {
content: "\203A"; /* › come nel mockup */
position: absolute;
left: 0;
top: 0;
color: var(--brand-primary);
}
.teaser-points strong {
color: var(--brand-primary);
font-weight: 700;
letter-spacing: 0.02em;
}
/* Feature chips: piccoli rettangoli industrial impilati con offset */
.teaser-features {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
padding: var(--space-5) var(--space-3);
justify-content: center;
}
.teaser-feature-chip {
padding: var(--space-2) var(--space-4);
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
color: var(--brand-text);
font-family: var(--font-display);
font-size: var(--fs-sm);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
transition: transform var(--t-base), border-color var(--t-base), color var(--t-base);
}
.teaser-feature-chip:nth-child(odd) { transform: rotate(-1.2deg); }
.teaser-feature-chip:nth-child(even) { transform: rotate(0.8deg); }
.teaser-feature-chip:hover {
transform: rotate(0deg);
border-color: var(--brand-primary);
color: var(--brand-primary);
}
@media (prefers-reduced-motion: reduce) {
.teaser-feature-chip,
.teaser-feature-chip:nth-child(odd),
.teaser-feature-chip:nth-child(even) {
transform: none !important;
}
}
/* Visual placeholder — verra' sostituito con immagini/canvas nella sessione style */
.teaser-visual {
position: relative;
aspect-ratio: 4 / 3;
border: 1px solid var(--brand-primary-30);
background: linear-gradient(135deg,
rgba(200, 131, 74, 0.06) 0%,
rgba(200, 131, 74, 0.02) 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.teaser-visual::before {
content: "";
position: absolute;
inset: var(--space-3);
border: 1px solid var(--brand-primary-12);
pointer-events: none;
}
.teaser-visual-label {
font-family: var(--font-display);
font-size: clamp(3rem, 8vw, 5rem);
color: var(--brand-primary-30);
letter-spacing: var(--tracking-display);
}
/* Servizi teaser — mini-card servizio impilate con offset (no prezzo) */
.teaser-servizi-stack {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4) var(--space-3);
}
.teaser-servizio-card {
position: relative;
padding: var(--space-4) var(--space-5);
background: linear-gradient(160deg,
rgba(200, 131, 74, 0.08) 0%,
var(--brand-bg-soft) 100%);
border: 1px solid var(--brand-primary-30);
box-shadow: var(--shadow-soft);
transition: transform var(--t-base), border-color var(--t-base);
}
.teaser-servizio-card--a { transform: rotate(-1.5deg) translateX(-8px); }
.teaser-servizio-card--b { transform: rotate(0.8deg) translateX(12px); }
.teaser-servizio-card--c { transform: rotate(-0.5deg) translateX(-4px); }
.teaser-servizio-card:hover {
transform: rotate(0deg) translateX(0);
border-color: var(--brand-primary);
}
.teaser-servizio-nome {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
line-height: 1;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 var(--space-2);
}
.teaser-servizio-meta {
font-family: var(--font-body);
color: var(--brand-primary);
font-size: var(--fs-lg);
letter-spacing: 0.05em;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.teaser-servizio-card,
.teaser-servizio-card--a,
.teaser-servizio-card--b,
.teaser-servizio-card--c {
transform: none !important;
}
}
/* Arcade teaser — "cabinet" CSS animato: scanline, insert coin che
lampeggia e selettore che scorre i sei giochi in loop. */
.arcade-cab {
position: relative;
max-width: 460px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border-strong);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
padding: 18px 18px 16px;
overflow: hidden;
}
/* Alone caldo dello schermo + scanline CRT */
.arcade-cab::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(80% 50% at 50% 0%, var(--brand-primary-12) 0%, transparent 70%);
}
.arcade-cab::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
[data-theme="light"] .arcade-cab::after {
background: repeating-linear-gradient(0deg, rgba(70, 45, 18, 0.07) 0 1px, transparent 1px 3px);
}
.arcade-cab-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding-bottom: 12px;
margin-bottom: 6px;
border-bottom: 1px dashed var(--border-subtle);
}
.arcade-cab-brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-primary);
}
.arcade-cab-coin {
font-size: 0.5625rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brand-muted);
animation: arcade-blink 1.6s steps(2, end) infinite;
}
.arcade-cab-list {
list-style: none;
margin: 0;
padding: 0;
}
.arcade-cab-list li {
display: flex;
align-items: baseline;
gap: 10px;
padding: 11px 10px;
border-bottom: 1px solid var(--border-subtle);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-text-dim);
/* selettore in loop: 6 voci x 1.2s */
animation: arcade-select 7.2s linear infinite;
animation-delay: calc(var(--i, 0) * 1.2s);
}
.arcade-cab-list li:last-child {
border-bottom: 0;
}
.arcade-cab-cursor {
color: var(--brand-primary);
font-size: 0.625rem;
opacity: 0;
animation: arcade-select-cursor 7.2s linear infinite;
animation-delay: calc(var(--i, 0) * 1.2s);
}
.arcade-cab-nome {
flex: 1;
}
.arcade-cab-tag {
font-size: 0.5625rem;
letter-spacing: 0.2em;
color: var(--brand-faint);
}
.arcade-cab-start {
margin-top: 14px;
text-align: center;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--brand-primary);
animation: arcade-blink 1.4s steps(2, end) infinite;
}
@keyframes arcade-blink {
50% { opacity: 0.15; }
}
@keyframes arcade-select {
0%, 15% { background: var(--brand-primary-12); color: var(--brand-text); }
16.7%, 100% { background: transparent; }
}
@keyframes arcade-select-cursor {
0%, 15% { opacity: 1; }
16.7%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.arcade-cab-coin,
.arcade-cab-start,
.arcade-cab-list li,
.arcade-cab-cursor {
animation: none;
}
.arcade-cab-list li:first-child { background: var(--brand-primary-12); color: var(--brand-text); }
.arcade-cab-list li:first-child .arcade-cab-cursor { opacity: 1; }
}
/* Gallery — fascia full-bleed "photo rail": polaroid crema su un nastro
leggermente inclinato che scorre da solo, da bordo a bordo. Rompe il
ritmo delle sezioni a due colonne. */
.gallery-band {
padding: clamp(70px, 10vh, 130px) 0;
border-bottom: 1px solid var(--border-subtle);
overflow: hidden;
}
.gallery-band-head {
text-align: center;
margin-bottom: clamp(28px, 4vw, 44px);
}
.gallery-band-head .teaser-title {
margin-bottom: var(--space-4);
}
.gallery-band-text {
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
max-width: 460px;
margin: 0 auto;
}
.gallery-band-cta {
text-align: center;
margin-top: clamp(28px, 4vw, 44px);
}
/* Nastro: inclinato di poco e piu' largo del viewport, cosi' l'inclinazione
non scopre mai gli angoli */
.gallery-rail-wrap {
transform: rotate(-1.6deg);
margin: 0 -4vw;
}
.gallery-rail {
display: flex;
align-items: center;
gap: clamp(16px, 2.5vw, 28px);
width: max-content;
animation: gallery-rail 45s linear infinite;
}
.gallery-rail:hover {
animation-play-state: paused;
}
@keyframes gallery-rail {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Singola stampa polaroid su carta crema */
.gallery-print {
flex: 0 0 auto;
width: clamp(150px, 18vw, 220px);
margin: 0;
padding: 8px 8px 10px;
background: #e8ddcc;
border: 1px solid rgba(26, 18, 8, 0.12);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
transition: transform var(--t-base);
}
.gallery-rail .gallery-print:nth-child(odd) { transform: rotate(1.6deg); }
.gallery-rail .gallery-print:nth-child(even) { transform: rotate(-1.8deg) translateY(8px); }
.gallery-rail .gallery-print:hover {
transform: rotate(0deg) scale(1.05);
z-index: 3;
}
.gallery-print img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
.gallery-print figcaption {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
padding-top: 8px;
font-family: var(--font-body);
font-size: 0.5625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b5a40;
}
.gallery-print-num {
color: #7d5128; /* rame scuro su carta crema: quello del sito qui dava 3,1:1 */
}
@media (prefers-reduced-motion: reduce) {
.gallery-rail {
animation: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
}
/* niente loop: basta la prima serie */
.gallery-rail .gallery-print:nth-child(n+7) {
display: none;
}
.gallery-rail-wrap {
transform: none;
margin: 0;
}
}
/* ============================================================
* 11. HOMEPAGE — Tip del giorno
* ============================================================ */
.tip-oggi {
padding: var(--space-10) 0;
text-align: center;
}
.tip-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-4);
}
.tip-text {
font-family: var(--font-display);
font-weight: 600;
/* mockup: box bordato, titolo compatto uppercase */
font-size: clamp(1.0625rem, 2vw, 1.375rem);
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-text);
max-width: 640px;
margin: 0 auto;
padding: 26px 30px;
border: 1px solid var(--border-subtle);
background: var(--surface);
}
.tip-autore {
text-align: center;
margin-top: var(--space-4);
color: var(--brand-primary);
font-family: var(--font-body);
font-size: var(--fs-sm);
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* ============================================================
* 12. PAGINA SERVIZI — hero + carosello + include + pacchetti
* + testimonial + quiz teaser + FAQ + CTA finale
* ============================================================ */
.servizi-hero {
padding: clamp(64px, 11vh, 130px) 0 0;
text-align: center;
}
.servizi-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.servizi-title {
font-size: clamp(2.625rem, 8vw, 5.5rem);
line-height: 0.95;
margin: 0 0 var(--space-5);
}
.servizi-intro {
max-width: 460px;
margin: 0 auto;
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
}
/* Il taglio: forbici che corrono lungo la linea tratteggiata a tutta
larghezza, "separando" l'hero dal listino. Snip-snip mentre corrono. */
.servizi-cutline {
position: relative;
height: 52px;
margin-top: clamp(32px, 6vh, 56px);
overflow: hidden;
}
.servizi-cutline-dash {
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 2px dashed var(--border-strong);
}
.servizi-cutline-scissors {
position: absolute;
top: 50%;
left: 0;
margin-top: -17px;
color: var(--brand-primary);
animation: cutline-run 11s linear infinite;
will-change: transform;
}
.servizi-cutline-scissors svg {
width: 34px;
height: 34px;
display: block;
/* punta verso destra, nel verso della corsa */
transform: rotate(-45deg);
animation: cutline-snip 0.5s ease-in-out infinite alternate;
}
@keyframes cutline-run {
from { transform: translateX(-60px); }
to { transform: translateX(calc(100vw + 60px)); }
}
@keyframes cutline-snip {
from { transform: rotate(-49deg); }
to { transform: rotate(-38deg); }
}
@media (prefers-reduced-motion: reduce) {
.servizi-cutline-scissors,
.servizi-cutline-scissors svg {
animation: none;
}
.servizi-cutline-scissors {
left: 50%;
}
}
/* Header sezione riusato in tutte le sub-section della pagina servizi */
.servizi-section-eyebrow {
text-align: center;
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.servizi-section-title {
text-align: center;
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: var(--space-5);
}
.servizi-section-intro {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-8);
color: var(--brand-text-soft);
font-size: var(--fs-lg);
line-height: 1.6;
}
/* ---- CAROSELLO LISTINO ---- */
.servizi-listino {
padding: var(--space-10) 0 var(--space-3);
}
.servizi-carousel-wrap {
position: relative;
overflow: hidden;
padding: var(--space-3) 0 var(--space-4);
}
.servizi-carousel-wrap::before,
.servizi-carousel-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--space-8);
z-index: 2;
pointer-events: none;
}
.servizi-carousel-wrap::before {
left: 0;
background: linear-gradient(to right, var(--brand-bg), transparent);
}
.servizi-carousel-wrap::after {
right: 0;
background: linear-gradient(to left, var(--brand-bg), transparent);
}
.servizi-carousel {
display: flex;
gap: var(--space-5);
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
padding: var(--space-4) 7vw;
scroll-padding-inline: 7vw;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.servizi-carousel::-webkit-scrollbar { display: none; }
.servizi-carousel:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 4px;
}
@media (min-width: 992px) {
.servizi-carousel {
padding: var(--space-5) max(7vw, var(--space-8));
scroll-padding-inline: max(7vw, var(--space-8));
gap: var(--space-6);
}
}
/* Frecce nav (visibili solo desktop) */
.servizi-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 48px;
height: 48px;
display: none;
align-items: center;
justify-content: center;
background: var(--brand-bg-soft);
color: var(--brand-text);
border: 1px solid var(--brand-primary-30);
border-radius: 50%;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: background var(--t-base), border-color var(--t-base),
color var(--t-base), opacity var(--t-base);
}
@media (hover: hover) {
.servizi-nav { display: inline-flex; }
}
.servizi-nav:hover,
.servizi-nav:focus-visible {
background: var(--brand-primary);
color: var(--on-primary);
border-color: var(--brand-primary);
outline: none;
}
.servizi-nav:disabled {
opacity: 0.3;
cursor: default;
}
.servizi-nav--prev { left: var(--space-3); }
.servizi-nav--next { right: var(--space-3); }
@media (min-width: 992px) {
.servizi-nav { width: 56px; height: 56px; }
.servizi-nav--prev { left: var(--space-5); }
.servizi-nav--next { right: var(--space-5); }
}
/* Card servizio: 1 mobile, 2 tablet, ~3 desktop */
.servizio-card {
position: relative;
flex: 0 0 auto;
width: 84vw;
max-width: 360px;
scroll-snap-align: center;
background: linear-gradient(160deg,
rgba(200, 131, 74, 0.08) 0%,
var(--brand-bg-soft) 60%,
var(--brand-bg-soft) 100%);
border: 1px solid var(--brand-primary-30);
box-shadow: var(--shadow-soft);
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
@media (min-width: 576px) {
.servizio-card { width: 48vw; max-width: 340px; }
}
@media (min-width: 992px) {
.servizio-card {
width: calc((100vw - 14vw - 2 * var(--space-6)) / 3);
max-width: 360px;
scroll-snap-align: start;
}
}
.servizio-card::before {
content: "";
position: absolute;
inset: var(--space-2);
border: 1px solid var(--brand-primary-12);
pointer-events: none;
}
/* Corner accent ramati ai 4 angoli (look ticket industrial) */
.servizio-corner {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid var(--brand-primary);
pointer-events: none;
z-index: 4;
transition: border-color var(--t-base);
}
.servizio-corner--tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.servizio-corner--tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.servizio-corner--bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.servizio-corner--br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.servizio-card:hover,
.servizio-card:focus-within {
transform: translateY(-4px);
border-color: var(--brand-primary);
box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.servizio-card:hover .servizio-corner {
border-color: var(--brand-accent);
}
.servizio-card-inner {
position: relative;
padding: var(--space-6) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 360px;
}
.servizio-index {
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1;
color: var(--brand-primary);
letter-spacing: 0.08em;
margin: 0;
align-self: flex-start;
opacity: 0.7;
}
.servizio-nome {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4vw, 2.25rem);
line-height: 1;
margin: 0;
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
}
.servizio-divider {
display: block;
width: 32px;
height: 2px;
background: var(--brand-primary);
}
.servizio-descrizione {
color: var(--brand-text-soft);
font-size: var(--fs-sm);
line-height: 1.6;
margin: 0;
flex: 1;
}
.servizio-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-3);
border-top: 1px solid var(--brand-primary-12);
}
.servizio-meta--no-prezzo {
justify-content: flex-end;
}
.servizio-prezzo {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 3.5rem);
line-height: 1;
color: var(--brand-primary);
letter-spacing: var(--tracking-display);
}
.servizio-prezzo-cur {
font-size: 0.55em;
color: var(--brand-primary-30);
margin-left: -0.1em;
}
.servizio-durata {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
line-height: 1;
}
.servizio-durata-label {
font-family: var(--font-body);
font-size: 0.7rem;
color: var(--brand-text-soft);
text-transform: uppercase;
letter-spacing: 0.18em;
}
.servizio-durata-value {
font-family: var(--font-display);
font-size: var(--fs-lg);
color: var(--brand-primary);
letter-spacing: 0.05em;
}
.servizio-cta {
margin-top: var(--space-4);
align-self: stretch;
}
/* Hint "Trascina" — solo touch (su desktop ci sono le frecce) */
.servizi-scrollhint {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-3);
color: var(--brand-primary);
font-family: var(--font-body);
font-size: var(--fs-sm);
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.7;
}
.servizi-scrollhint-line {
flex: 0 0 48px;
height: 1px;
background: var(--brand-primary-30);
}
@media (hover: hover) {
.servizi-scrollhint { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.servizi-scrollhint-text {
animation: scrollhint-pulse 2.4s ease-in-out infinite;
}
}
@keyframes scrollhint-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ---- COSA INCLUDE SEMPRE ---- */
.servizi-include {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.include-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 576px) {
.include-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.include-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
.include-box {
position: relative;
padding: var(--space-5) var(--space-4);
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
text-align: center;
transition: transform var(--t-base), border-color var(--t-base);
}
.include-box:hover {
transform: translateY(-3px);
border-color: var(--brand-primary);
}
.include-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid var(--brand-primary);
border-radius: 50%;
color: var(--brand-primary);
margin-bottom: var(--space-3);
transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
/* icona che si "accende" e dondola quando passi sulla card */
.include-box:hover .include-icon {
background: var(--brand-primary);
color: var(--on-primary);
animation: include-wiggle 0.5s ease;
}
@keyframes include-wiggle {
0%, 100% { transform: rotate(0deg); }
30% { transform: rotate(-8deg); }
65% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
.include-box:hover .include-icon {
animation: none;
}
}
.include-title {
font-family: var(--font-display);
font-size: 1.25rem;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 var(--space-2);
}
.include-text {
color: var(--brand-text-soft);
font-size: var(--fs-sm);
line-height: 1.5;
margin: 0;
}
/* ---- PACCHETTI ---- */
.pacchetti {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.pacchetti-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 768px) {
.pacchetti-grid { grid-template-columns: repeat(3, 1fr); }
}
.pacchetto {
position: relative;
padding: var(--space-6) var(--space-5);
background: linear-gradient(180deg,
rgba(200, 131, 74, 0.06) 0%,
var(--brand-bg-soft) 60%);
border: 1px solid var(--brand-primary-30);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.pacchetto:hover {
transform: translateY(-4px);
border-color: var(--brand-primary);
box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.pacchetto.is-featured {
border-color: var(--brand-primary);
box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.pacchetto-tag {
align-self: flex-start;
padding: 0.2rem 0.6rem;
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0;
}
.pacchetto-nome {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
margin: 0;
}
.pacchetto-incluso {
color: var(--brand-text-soft);
font-size: var(--fs-sm);
line-height: 1.5;
margin: 0;
flex: 1;
}
.pacchetto-prezzo {
margin: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--brand-primary-12);
}
.pacchetto-prezzo-num {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 3rem);
line-height: 1;
color: var(--brand-primary);
letter-spacing: var(--tracking-display);
}
.pacchetto-prezzo-cur {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--brand-primary-30);
}
.pacchetto-prezzo-was {
color: var(--brand-text-soft);
font-size: var(--fs-sm);
text-decoration: line-through;
flex-basis: 100%;
margin-top: 0.2rem;
}
.pacchetto-durata {
margin: 0;
color: var(--brand-text);
font-family: var(--font-display);
font-size: var(--fs-base);
letter-spacing: 0.05em;
}
.pacchetto-durata-label {
color: var(--brand-text-soft);
font-family: var(--font-body);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
margin-right: 0.4em;
}
/* ---- TESTIMONIAL ---- */
.testimonial-section {
padding: var(--space-12) 0 var(--space-8);
border-top: 1px solid var(--brand-primary-12);
}
.testimonial-carousel-wrap {
position: relative;
overflow: hidden;
padding: var(--space-3) 0;
}
.testimonial-carousel-wrap::before,
.testimonial-carousel-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--space-6);
z-index: 2;
pointer-events: none;
}
.testimonial-carousel-wrap::before {
left: 0;
background: linear-gradient(to right, var(--brand-bg), transparent);
}
.testimonial-carousel-wrap::after {
right: 0;
background: linear-gradient(to left, var(--brand-bg), transparent);
}
.testimonial-carousel {
display: flex;
gap: var(--space-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: var(--space-4) 7vw;
scroll-padding-inline: 7vw;
scrollbar-width: none;
-ms-overflow-style: none;
}
.testimonial-carousel::-webkit-scrollbar { display: none; }
@media (min-width: 992px) {
.testimonial-carousel {
padding: var(--space-5) max(7vw, var(--space-8));
scroll-padding-inline: max(7vw, var(--space-8));
}
}
.testimonial-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
display: none;
align-items: center;
justify-content: center;
background: var(--brand-bg-soft);
color: var(--brand-text);
border: 1px solid var(--brand-primary-30);
border-radius: 50%;
cursor: pointer;
transition: background var(--t-base), color var(--t-base);
}
@media (hover: hover) {
.testimonial-nav { display: inline-flex; }
}
.testimonial-nav:hover,
.testimonial-nav:focus-visible {
background: var(--brand-primary);
color: var(--on-primary);
border-color: var(--brand-primary);
outline: none;
}
.testimonial-nav:disabled { opacity: 0.3; cursor: default; }
.testimonial-nav--prev { left: var(--space-3); }
.testimonial-nav--next { right: var(--space-3); }
.testimonial-card {
flex: 0 0 auto;
width: 84vw;
max-width: 380px;
scroll-snap-align: center;
padding: var(--space-5);
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
@media (min-width: 768px) {
.testimonial-card {
width: 44vw;
max-width: 360px;
scroll-snap-align: start;
}
}
.testimonial-stars {
margin: 0;
color: var(--brand-primary);
font-size: 1.25rem;
letter-spacing: 0.1em;
}
.testimonial-stars .is-off {
color: var(--brand-primary-30);
}
.testimonial-text {
margin: 0;
color: var(--brand-text);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.6;
font-style: italic;
padding-left: var(--space-4);
border-left: 2px solid var(--brand-primary);
flex: 1;
}
.testimonial-foot {
margin: 0;
padding-top: var(--space-2);
display: flex;
align-items: baseline;
gap: var(--space-2);
flex-wrap: wrap;
}
.testimonial-nome {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
}
.testimonial-sep { color: var(--brand-primary-30); }
.testimonial-tipo {
font-family: var(--font-body);
color: var(--brand-primary);
font-size: var(--fs-sm);
letter-spacing: 0.05em;
}
/* ---- QUIZ TEASER ---- */
.quiz-teaser {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.quiz-card {
max-width: 640px;
margin: 0 auto;
padding: var(--space-8) var(--space-6);
background: linear-gradient(160deg,
rgba(200, 131, 74, 0.10) 0%,
var(--brand-bg-soft) 70%);
border: 1px solid var(--brand-primary);
text-align: center;
position: relative;
box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.quiz-card::before {
content: "";
position: absolute;
inset: var(--space-2);
border: 1px solid var(--brand-primary-30);
pointer-events: none;
}
.quiz-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0 0 var(--space-5);
}
.quiz-title {
font-size: clamp(2rem, 5vw, 3rem);
margin: 0 0 var(--space-4);
}
.quiz-text {
color: var(--brand-text-soft);
font-size: var(--fs-lg);
line-height: 1.6;
margin: 0 auto var(--space-6);
max-width: 480px;
}
.quiz-mock-dots {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.quiz-mock-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--brand-primary-30);
}
.quiz-mock-dot.is-active {
background: var(--brand-primary);
box-shadow: 0 0 0 3px var(--brand-primary-12);
}
/* ---- FAQ ---- */
.faq {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.faq-item {
border: 1px solid var(--brand-primary-30);
background: var(--brand-bg-soft);
transition: border-color var(--t-base);
}
.faq-item[open] {
border-color: var(--brand-primary);
}
.faq-q {
list-style: none;
cursor: pointer;
padding: var(--space-4) var(--space-5);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
font-family: var(--font-display);
font-size: 1.125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-text);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--brand-primary);
color: var(--brand-primary);
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1;
transition: transform var(--t-base), background var(--t-base), color var(--t-base);
}
.faq-item[open] .faq-icon {
transform: rotate(45deg);
background: var(--brand-primary);
color: var(--on-primary);
}
.faq-a {
margin: 0;
padding: 0 var(--space-5) var(--space-4);
color: var(--brand-text-soft);
font-size: var(--fs-base);
line-height: 1.6;
}
/* ---- CTA FINALE ---- */
.servizi-cta-bottom {
padding: var(--space-12) 0;
text-align: center;
border-top: 1px solid var(--brand-primary-12);
}
.servizi-cta-text {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4vw, 2.75rem);
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.servizi-cta-sub {
color: var(--brand-text-soft);
font-size: var(--fs-lg);
margin-bottom: var(--space-6);
}
.servizi-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
/* ---- EMPTY STATE ---- */
.servizi-empty {
padding: var(--space-10) 0 var(--space-12);
}
.servizi-empty-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3rem);
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.servizi-empty-text {
color: var(--brand-text-soft);
font-size: var(--fs-lg);
max-width: 540px;
margin: 0 auto var(--space-6);
line-height: 1.6;
}
/* ============================================================
* 13. PAGINA GALLERY — hero + chip filtri + masonry + tilt 3D
* ============================================================ */
.gallery-hero {
padding: var(--space-10) 0 var(--space-5);
text-align: center;
}
/* Hero con la bacheca animata (stessa della TV) sfocata in background:
quasi a tutta pagina, il board deriva lento, sopra scrim + testo. */
.gallery-hero--board {
position: relative;
overflow: hidden;
min-height: calc(88vh - var(--header-h-desktop));
display: flex;
align-items: center;
justify-content: center;
padding: clamp(72px, 13vh, 150px) 0;
}
.gallery-hero-bg {
position: absolute;
inset: -12%;
z-index: 0;
pointer-events: none;
filter: blur(7px) brightness(0.45) saturate(0.9);
}
.gallery-hero-board {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4vw;
animation: gallery-hero-drift 26s ease-in-out infinite alternate;
will-change: transform;
}
/* le pinnate dentro l'hero restano in flusso, non serve il legno dietro */
.gallery-hero-board .gallery-pinned {
flex: none;
width: clamp(130px, 15vw, 210px);
}
@keyframes gallery-hero-drift {
0% { transform: scale(1.28) translate(-5%, 3%) rotate(-1.2deg); }
100% { transform: scale(1.5) translate(5%, -3%) rotate(1.4deg); }
}
.gallery-hero-scrim {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(80% 80% at 50% 45%,
rgba(12, 9, 6, 0.42) 0%,
rgba(12, 9, 6, 0.78) 100%);
}
.gallery-hero-inner {
position: relative;
z-index: 1;
}
.gallery-hero--board .gallery-title,
.gallery-hero--board .gallery-intro {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.gallery-hero--board .gallery-intro {
color: var(--brand-text-soft);
}
@media (prefers-reduced-motion: reduce) {
.gallery-hero-board {
animation: none;
transform: scale(1.3);
}
}
.gallery-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.gallery-title {
font-size: clamp(2.625rem, 8vw, 5.5rem);
line-height: 0.95;
margin: 0 0 var(--space-5);
}
.gallery-intro {
max-width: 460px;
margin: 0 auto;
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
}
/* Foto "pinnate" (usate nella bacheca sfocata dell'hero) */
.gallery-pinned {
position: relative;
width: clamp(110px, 15vw, 180px);
margin: 0;
padding: 7px 7px 8px;
background: #e8ddcc;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
transition: transform var(--t-base);
}
.gallery-pinned img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
.gallery-pinned figcaption {
padding-top: 6px;
text-align: center;
font-size: 0.5625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b5a40;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gallery-pinned-dot {
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
width: 13px;
height: 13px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #e85a5a 0%, #a01515 55%, #4a0808 100%);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
z-index: 2;
}
.gallery-pinned--1 { transform: rotate(-3deg); }
.gallery-pinned--2 { transform: rotate(2deg) translateY(10px); }
.gallery-pinned--3 { transform: rotate(-1.4deg); }
.gallery-pinned--4 { transform: rotate(2.6deg) translateY(8px); }
.gallery-pinned--5 { transform: rotate(-2.2deg); }
.gallery-pinned:hover {
transform: rotate(0deg) scale(1.06);
z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
.gallery-pinned,
.gallery-pinned:hover {
transition: none;
}
}
/* Filtri chip — riga orizzontale scrollabile su mobile, wrap su desktop */
.gallery-filters {
padding: var(--space-5) 0 var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.gallery-filters-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: nowrap;
gap: var(--space-3);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: var(--space-2);
}
.gallery-filters-list::-webkit-scrollbar {
display: none;
}
@media (min-width: 992px) {
.gallery-filters-list {
flex-wrap: wrap;
justify-content: center;
overflow-x: visible;
}
}
.gallery-chip {
flex: 0 0 auto;
display: inline-block;
padding: 10px 16px;
border: 1px solid var(--border-strong);
color: var(--brand-text);
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
background: transparent;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
white-space: nowrap;
text-decoration: none;
}
.gallery-chip:hover,
.gallery-chip:focus-visible {
color: var(--brand-text);
border-color: var(--brand-primary);
background: var(--brand-primary-12);
}
.gallery-chip.is-active {
color: var(--on-primary);
background: var(--brand-primary);
border-color: var(--brand-primary);
}
/* Masonry tramite CSS columns: 1 / 2 / 3 colonne ai breakpoint. */
.gallery-masonry-wrap {
padding: var(--space-8) 0 var(--space-12);
}
.gallery-masonry {
column-count: 1;
column-gap: var(--space-4);
}
@media (min-width: 576px) {
.gallery-masonry {
column-count: 2;
}
}
@media (min-width: 992px) {
.gallery-masonry {
column-count: 3;
column-gap: var(--space-5);
}
}
@media (min-width: 1400px) {
.gallery-masonry {
column-count: 4;
}
}
/* Singolo item: break-inside per restare integro in colonna,
perspective per il tilt 3D al mouse (gestito da JS via --rx/--ry). */
.gallery-item {
break-inside: avoid;
margin: 0 0 var(--space-4);
perspective: 1000px;
}
@media (min-width: 992px) {
.gallery-item {
margin: 0 0 var(--space-5);
}
}
.gallery-item-inner {
position: relative;
border: 1px solid var(--border-strong);
background: var(--surface);
overflow: hidden;
transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
transform-style: preserve-3d;
will-change: transform;
}
.gallery-item:hover .gallery-item-inner,
.gallery-item:focus-within .gallery-item-inner {
border-color: var(--brand-primary);
box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.gallery-item-img {
width: 100%;
height: auto;
display: block;
transition: transform var(--t-slow);
transform: translateZ(20px); /* leggera elevazione 3D al tilt */
}
.gallery-item:hover .gallery-item-img {
transform: translateZ(20px) scale(1.02);
}
.gallery-item-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-4) var(--space-4) var(--space-3);
background: linear-gradient(to top,
rgba(12, 9, 6, 0.95) 0%,
rgba(12, 9, 6, 0.7) 60%,
transparent 100%);
color: var(--on-dark);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
transform: translateZ(40px); /* la caption "galleggia" sopra l'immagine */
}
.gallery-item-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--on-dark); /* caption su gradiente scuro: testo chiaro costante */
line-height: 1.1;
}
.gallery-item-tipo {
font-family: var(--font-body);
font-size: 0.625rem;
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.18em;
white-space: nowrap;
}
/* Bottone stretched: copre tutta la card e intercetta il click -> apre lightbox.
translateZ alto per stare sopra img/caption nel contesto 3d del tilt. */
.gallery-item-trigger {
position: absolute;
inset: 0;
z-index: 5;
transform: translateZ(60px);
padding: 0;
margin: 0;
border: 0;
background: transparent;
cursor: zoom-in;
-webkit-appearance: none;
appearance: none;
}
.gallery-item-trigger:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: -4px;
}
/* Lente: appare in hover/focus al centro della card */
.gallery-item-zoom {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brand-primary);
color: var(--on-primary);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) translateZ(50px) scale(0.8);
transition: opacity var(--t-base), transform var(--t-base);
}
.gallery-item-zoom svg {
width: 24px;
height: 24px;
}
.gallery-item:hover .gallery-item-zoom,
.gallery-item:focus-within .gallery-item-zoom {
opacity: 1;
transform: translate(-50%, -50%) translateZ(50px) scale(1);
}
/* Reduced motion / device touch: niente tilt, niente animazioni heavy */
@media (prefers-reduced-motion: reduce), (hover: none) {
.gallery-item-inner {
transform: none !important;
transition: border-color var(--t-fast);
}
.gallery-item-img,
.gallery-item:hover .gallery-item-img {
transform: none;
}
.gallery-item-caption {
transform: none;
}
.gallery-item-trigger {
transform: none;
}
.gallery-item-zoom,
.gallery-item:hover .gallery-item-zoom,
.gallery-item:focus-within .gallery-item-zoom {
transform: translate(-50%, -50%);
}
}
/* Empty state */
.gallery-empty {
padding: var(--space-10) 0 var(--space-12);
}
.gallery-empty-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3rem);
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.gallery-empty-text {
color: var(--brand-muted);
font-size: var(--fs-sm);
max-width: 420px;
margin: 0 auto var(--space-6);
line-height: 1.9;
}
/* ---- CTA finale gallery ---- */
.gallery-cta {
padding: var(--space-10) 0 var(--space-12);
text-align: center;
border-top: 1px solid var(--border-subtle);
}
.gallery-cta-text {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4vw, 2.75rem);
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.gallery-cta-sub {
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
margin-bottom: var(--space-6);
}
.gallery-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
/* ============================================================
* 13b. LIGHTBOX — overlay ingrandimento foto gallery (A.11 gallery rework)
* Backdrop scuro in entrambi i temi: la foto e' protagonista, i controlli
* usano --on-dark (chiaro costante).
* ============================================================ */
.lightbox {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: clamp(1rem, 5vw, 3.5rem);
background: rgba(12, 9, 6, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.lightbox.is-open {
display: flex;
}
.lightbox-figure {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
max-width: 100%;
animation: lightbox-in 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes lightbox-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.lightbox-img {
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
object-fit: contain;
border: 1px solid var(--brand-primary-30);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.lightbox-caption {
text-align: center;
color: var(--on-dark);
}
.lightbox-title {
display: block;
font-family: var(--font-display);
font-size: var(--fs-h4);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
line-height: 1.1;
}
.lightbox-meta {
display: inline-flex;
gap: var(--space-2);
align-items: baseline;
margin-top: var(--space-1);
font-family: var(--font-body);
font-size: var(--fs-sm);
}
.lightbox-tipo {
color: var(--brand-primary);
text-transform: lowercase;
letter-spacing: 0.05em;
}
.lightbox-counter {
color: rgba(240, 230, 211, 0.6);
}
.lightbox-counter::before {
content: "·";
margin-right: var(--space-2);
color: rgba(240, 230, 211, 0.4);
}
/* Bottoni: close (alto-dx) + nav (sinistra/destra) */
.lightbox-close,
.lightbox-nav {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(240, 230, 211, 0.25);
border-radius: 50%;
background: rgba(12, 9, 6, 0.5);
color: var(--on-dark);
cursor: pointer;
transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
color: var(--brand-primary);
border-color: var(--brand-primary);
background: rgba(12, 9, 6, 0.8);
outline: none;
}
.lightbox-close {
top: var(--space-4);
right: var(--space-4);
width: 44px;
height: 44px;
}
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-nav {
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
}
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
transform: translateY(-50%) scale(1.06);
}
.lightbox-nav svg { width: 26px; height: 26px; }
.lightbox-nav--prev { left: var(--space-4); }
.lightbox-nav--next { right: var(--space-4); }
/* Variante single: una sola foto -> niente frecce */
.lightbox.is-single .lightbox-nav {
display: none;
}
@media (min-width: 768px) {
.lightbox-nav--prev { left: var(--space-6); }
.lightbox-nav--next { right: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
.lightbox-figure { animation: none; }
}
/* ============================================================
* 14. PAGINA PRENOTA — hero + form dark + WhatsApp button
* ============================================================ */
/* Bottone «Prenota ora» nella hero: sta sotto il mazzo dei tagli, seguito dal
separatore «oppure» e dalla CTA che scorre ai canali. */
.prenota-hero-azione { text-align: center; margin: var(--space-5) 0 var(--space-3); }
.prenota-info-whatsapp { text-align: center; margin: var(--space-6) 0 var(--space-3); }
/* Nota sull'informativa sotto i moduli. Usava `.form-text` di Bootstrap, che e'
grigio tenue pensato per fondo chiaro: sul nostro scuro diventava illeggibile. */
.nota-privacy {
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--brand-text-soft);
}
.nota-privacy a {
color: var(--brand-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.nota-privacy a:hover, .nota-privacy a:focus-visible { color: var(--brand-text); }
.prenota-hero {
/* Deve stare tutta in una schermata, header compreso: chi arriva su
/prenota/ vede titolo, tagli e bottone senza scorrere.
`dvh` e non `vh` perche' sul telefono la barra del browser si ritrae e
con `vh` il fondo della hero finirebbe sotto il bordo. */
min-height: calc(100vh - var(--header-h-mobile));
min-height: calc(100dvh - var(--header-h-mobile));
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-5) 0;
text-align: center;
}
@media (min-width: 992px) {
.prenota-hero {
min-height: calc(100vh - var(--header-h-desktop));
min-height: calc(100dvh - var(--header-h-desktop));
}
}
/* Schermi bassi (portatili 13", finestre non a tutto schermo): si stringe tutto
invece di far uscire il bottone sotto il bordo, che e' il punto di tutto. */
@media (max-height: 820px) {
.prenota-hero .prenota-title { font-size: clamp(2.6rem, 8vw, 5rem); }
.prenota-hero .prenota-deck { margin: var(--space-4) 0 var(--space-3); }
.prenota-hero .prenota-deck-stage { width: 220px; height: 190px; }
.prenota-hero .prenota-deck-card { width: 118px; height: 165px; }
.prenota-hero .prenota-intro { font-size: 1rem; }
}
@media (max-height: 680px) {
.prenota-hero .prenota-deck { display: none; }
}
.prenota-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.prenota-title {
font-size: clamp(3.5rem, 12vw, 8rem);
line-height: 0.9;
margin: 0 0 var(--space-5);
}
.prenota-intro {
max-width: 640px;
margin: 0 auto;
color: var(--brand-text-soft);
font-size: var(--fs-lg);
line-height: 1.6;
}
.prenota-form-section {
padding: var(--space-8) 0 var(--space-12);
}
.prenota-form {
max-width: 720px;
margin: 0 auto;
padding: var(--space-6) var(--space-5);
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
position: relative;
}
.prenota-form::before {
content: "";
position: absolute;
inset: var(--space-2);
border: 1px solid var(--brand-primary-12);
pointer-events: none;
}
@media (min-width: 768px) {
.prenota-form {
padding: var(--space-8) var(--space-8);
}
}
.prenota-form .form-label {
font-family: var(--font-body);
font-size: var(--fs-sm);
color: var(--brand-text-soft);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-2);
}
/* datetime-local: forza icona del picker visibile su sfondo dark */
.prenota-form input[type="datetime-local"] {
color-scheme: dark;
}
.prenota-submit {
width: 100%;
margin-top: var(--space-3);
}
@media (min-width: 768px) {
.prenota-submit {
width: auto;
min-width: 240px;
}
}
/* WhatsApp prefill button: sotto il form, attivo solo quando ha senso */
.prenota-whatsapp {
max-width: 720px;
margin: var(--space-8) auto 0;
text-align: center;
}
.prenota-whatsapp-text {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.prenota-whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background: #25d366;
color: #fff;
border: none;
font-family: var(--font-display);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
font-size: var(--fs-base);
transition: transform var(--t-base), box-shadow var(--t-base), opacity var(--t-base), filter var(--t-base);
box-shadow: var(--shadow-soft);
}
.prenota-whatsapp-btn:hover:not(:disabled),
.prenota-whatsapp-btn:focus-visible:not(:disabled) {
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow-soft), 0 0 24px rgba(37, 211, 102, 0.45);
}
.prenota-whatsapp-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.5);
}
.prenota-whatsapp-hint {
margin-top: var(--space-3);
color: var(--brand-text-soft);
font-size: var(--fs-sm);
font-family: var(--font-body);
}
/* Success partial (HTMX swap) */
.prenota-success {
max-width: 720px;
margin: 0 auto;
padding: var(--space-8) var(--space-6);
text-align: center;
border: 1px solid var(--brand-primary);
background: linear-gradient(160deg,
rgba(200, 131, 74, 0.12) 0%,
var(--brand-bg-soft) 100%);
box-shadow: var(--shadow-soft), var(--shadow-glow);
position: relative;
}
.prenota-success::before {
content: "";
position: absolute;
inset: var(--space-2);
border: 1px solid var(--brand-primary-30);
pointer-events: none;
}
.prenota-success-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.4em;
font-size: var(--fs-sm);
margin-bottom: var(--space-3);
}
.prenota-success-title {
font-size: clamp(2rem, 5vw, 3rem);
margin: 0 0 var(--space-4);
}
.prenota-success-text {
color: var(--brand-text);
font-size: var(--fs-lg);
line-height: 1.6;
margin-bottom: var(--space-6);
}
/* Errori inline Django */
.prenota-form .errorlist {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
color: #ff8a8a;
font-family: var(--font-body);
font-size: var(--fs-sm);
}
/* ---- Deck di tagli random come carte da gioco a ventaglio leggero ----
Flex wrapper -> stage centrato (garantisce centratura su qualunque viewport).
Le card sono absolute dentro lo stage, posizionate rispetto al suo centro. */
.prenota-deck {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: var(--space-6) 0 var(--space-5);
}
.prenota-deck-stage {
position: relative;
width: 240px;
height: 240px;
}
@media (min-width: 768px) {
.prenota-deck-stage { width: 280px; height: 260px; }
}
.prenota-deck-card {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 210px;
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 180, 0.06);
overflow: hidden;
transition: transform var(--t-base);
}
@media (min-width: 768px) {
.prenota-deck-card { width: 170px; height: 238px; }
}
.prenota-deck-card::before {
content: "";
position: absolute;
inset: var(--space-2);
border: 1px solid var(--brand-primary-12);
pointer-events: none;
z-index: 2;
}
.prenota-deck-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 4 card a ventaglio simmetrico: offset moderati (-/+90 e -/+30) e
rotation contenute (-/+10 e -/+4). z-index: le centrali davanti. */
.prenota-deck-card--a {
transform: translate(-50%, -50%) translate(-90px, 10px) rotate(-10deg);
z-index: 1;
}
.prenota-deck-card--b {
transform: translate(-50%, -50%) translate(-30px, -4px) rotate(-4deg);
z-index: 2;
}
.prenota-deck-card--c {
transform: translate(-50%, -50%) translate(30px, -4px) rotate(4deg);
z-index: 2;
}
.prenota-deck-card--d {
transform: translate(-50%, -50%) translate(90px, 10px) rotate(10deg);
z-index: 1;
}
@media (max-width: 575px) {
.prenota-deck-stage { width: 220px; height: 220px; }
.prenota-deck-card { width: 130px; height: 182px; }
.prenota-deck-card--a { transform: translate(-50%, -50%) translate(-72px, 10px) rotate(-9deg); }
.prenota-deck-card--b { transform: translate(-50%, -50%) translate(-24px, -4px) rotate(-4deg); }
.prenota-deck-card--c { transform: translate(-50%, -50%) translate(24px, -4px) rotate(4deg); }
.prenota-deck-card--d { transform: translate(-50%, -50%) translate(72px, 10px) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
.prenota-deck-card { transition: none; }
}
/* scroll-margin-top per evitare che la sezione si incolli al header dopo lo scroll */
#prenota-canali {
scroll-margin-top: calc(var(--header-h-mobile) + var(--space-4));
}
@media (min-width: 992px) {
#prenota-canali {
scroll-margin-top: calc(var(--header-h-desktop) + var(--space-5));
}
}
/* ---- CTA "Prenota ora" scroll indicator (trasparente con pipe animato) ---- */
.prenota-scroll-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) 0;
margin: var(--space-3) auto 0;
color: var(--brand-primary);
font-family: var(--font-display);
font-size: var(--fs-sm);
letter-spacing: 0.3em;
text-transform: uppercase;
text-decoration: none;
background: transparent;
border: 0;
transition: color var(--t-base), opacity var(--t-base);
}
.prenota-scroll-cta:hover,
.prenota-scroll-cta:focus-visible {
color: var(--brand-accent);
outline: none;
}
.prenota-scroll-text {
line-height: 1;
}
.prenota-scroll-line {
position: relative;
width: 1px;
height: 40px;
background: var(--brand-primary-30);
overflow: hidden;
}
.prenota-scroll-line::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 14px;
background: var(--brand-primary);
animation: scroll-pip 1.8s ease-in-out infinite;
}
@keyframes scroll-pip {
0% { transform: translateY(-14px); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(40px); opacity: 0; }
}
.prenota-scroll-arrow {
transition: transform var(--t-base);
}
.prenota-scroll-cta:hover .prenota-scroll-arrow {
transform: translateY(3px);
}
@media (prefers-reduced-motion: reduce) {
.prenota-scroll-line::after { animation: none; }
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ---- Separatore "Oppure" tra canali e form ---- */
.prenota-or {
display: flex;
align-items: center;
gap: var(--space-4);
max-width: 720px;
margin: var(--space-8) auto var(--space-4);
padding: 0 var(--space-4);
color: var(--brand-primary);
font-family: var(--font-display);
font-size: var(--fs-lg);
letter-spacing: 0.4em;
text-transform: uppercase;
}
.prenota-or::before,
.prenota-or::after {
content: "";
flex: 1;
height: 1px;
background: var(--brand-primary-30);
}
.prenota-or span {
flex: 0 0 auto;
padding: 0 var(--space-2);
}
/* ---- Header sezione (riusato in tutte le sub-section /prenota/) ---- */
.prenota-section-eyebrow {
text-align: center;
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.prenota-section-title {
text-align: center;
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: var(--space-5);
}
.prenota-section-intro {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-8);
color: var(--brand-text-soft);
font-size: var(--fs-lg);
line-height: 1.6;
}
/* ---- ALTRI MODI PER PRENOTARE (3 card) ---- */
.prenota-canali {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.canali-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
/* Sul telefono le card stanno in colonna, e l'ordine conta piu' che altrove:
prima si vede quella che risolve il problema da sola (prenota online), poi i
modi per scriverci, per ultimo l'indirizzo.
Si riordina in CSS e non nel markup perche' su schermo largo l'ordine giusto
e' un altro: cosi' il partial resta uno solo. */
@media (max-width: 767.98px) {
.canale--prenota { order: 1; }
.canale--whatsapp { order: 2; }
.canale--chiama { order: 3; }
.canale--vieni { order: 4; }
}
@media (min-width: 768px) {
.canali-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
/* Quattro card (con la prenotazione online): 2x2, altrimenti la quarta
resta sola in fondo alla griglia da tre. */
.canali-grid--quattro { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
.canali-grid--quattro { grid-template-columns: repeat(4, 1fr); }
}
.canale {
position: relative;
padding: var(--space-6) var(--space-5);
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.canale:hover {
transform: translateY(-4px);
border-color: var(--brand-primary);
box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.canale-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 1px solid var(--brand-primary);
border-radius: 50%;
color: var(--brand-primary);
}
.canale--whatsapp .canale-icon {
color: #25d366;
border-color: #25d366;
}
.canale-title {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
margin: 0;
}
.canale-text {
color: var(--brand-text-soft);
font-size: var(--fs-sm);
line-height: 1.5;
margin: 0;
flex: 1;
}
.canale-cta {
margin-top: var(--space-2);
align-self: stretch;
}
/* ---- COME FUNZIONA (3 step) ---- */
.prenota-step {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.step-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 768px) {
.step-list { grid-template-columns: repeat(3, 1fr); }
}
.step {
position: relative;
padding: var(--space-6) var(--space-5);
background: linear-gradient(160deg,
rgba(200, 131, 74, 0.05) 0%,
var(--brand-bg-soft) 60%);
border: 1px solid var(--brand-primary-30);
text-align: left;
}
.step-num {
display: block;
font-family: var(--font-display);
font-size: 3rem;
line-height: 1;
color: var(--brand-primary);
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.step-title {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 var(--space-2);
}
.step-text {
color: var(--brand-text-soft);
font-size: var(--fs-sm);
line-height: 1.6;
margin: 0;
}
/* ---- ORARI MINI ---- */
.prenota-orari {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.orari-mini {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 600px;
display: flex;
flex-direction: column;
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
}
.orario-mini-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--brand-primary-12);
font-family: var(--font-body);
transition: background var(--t-base);
}
.orario-mini-row:last-child { border-bottom: none; }
.orario-mini-row:hover { background: rgba(200, 131, 74, 0.05); }
.orario-mini-row.is-today {
background: rgba(200, 131, 74, 0.10);
border-left: 3px solid var(--brand-primary);
padding-left: calc(var(--space-5) - 3px);
}
/* Giorno + badge «oggi»: un blocco solo a sinistra, cosi' la colonna degli
orari resta allineata a destra su tutte le righe. */
.orario-mini-sx { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.orario-mini-giorno {
font-family: var(--font-display);
font-size: 1.125rem;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--brand-text);
}
.orario-mini-fasce {
font-size: var(--fs-sm);
color: var(--brand-text);
letter-spacing: 0.05em;
}
.orario-mini-chiuso {
color: var(--brand-text-soft);
font-style: italic;
}
.orario-mini-tag {
margin-left: var(--space-3);
padding: 0.15rem 0.5rem;
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* ---- FAQ PRENOTA (riusa pattern di /servizi/) ---- */
.prenota-faq {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
/* ---- CTA FINALE ---- */
.prenota-cta-final {
padding: var(--space-12) 0;
text-align: center;
border-top: 1px solid var(--brand-primary-12);
}
.prenota-cta-text {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4vw, 2.75rem);
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.prenota-cta-sub {
color: var(--brand-text-soft);
font-size: var(--fs-lg);
margin-bottom: var(--space-6);
}
.prenota-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
/* ============================================================
* 15. STATO NEGOZIO — chip header + full hero
* ============================================================ */
.shop-status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--brand-text);
--status-color: var(--brand-muted);
}
.shop-status.is-open {
--status-color: #3fd47e; /* verde "aperto" (mockup) */
}
.shop-status.is-open.is-closing-soon {
--status-color: #f0b22f; /* giallo "sta per chiudere" */
}
.shop-status.is-closed {
--status-color: var(--brand-muted);
}
.shop-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--status-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 25%, transparent);
flex: 0 0 auto;
/* compenso ottico: dot allineato alla x-height del testo */
align-self: center;
margin-top: 1px;
}
.shop-status-full .shop-status-dot {
margin-top: 2px;
}
.shop-status.is-open .shop-status-dot {
animation: shop-status-pulse 2s ease-in-out infinite;
}
@keyframes shop-status-pulse {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-color) 55%, transparent);
}
50% {
box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-color) 0%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
.shop-status.is-open .shop-status-dot {
animation: none;
}
}
/* === Variante CHIP (header) === */
.shop-status-chip {
padding: 0.3rem 0.65rem;
border: 1px solid color-mix(in srgb, var(--status-color) 60%, transparent);
background: color-mix(in srgb, var(--status-color) 12%, transparent);
font-size: 0.625rem;
letter-spacing: 0.22em;
/* nascondiamo il chip su mobile stretto, dove la nav è già occupata */
display: none;
margin-left: var(--space-3);
}
@media (min-width: 480px) {
.shop-status-chip {
display: inline-flex;
}
}
.shop-status-chip .shop-status-text {
font-weight: 500;
}
/* === Variante FULL (hero) === */
.shop-status-full {
margin-top: var(--space-6);
padding: 7px 14px;
border: 1px solid color-mix(in srgb, var(--status-color) 50%, transparent);
background: color-mix(in srgb, var(--status-color) 8%, var(--brand-bg-soft));
font-size: 0.625rem;
letter-spacing: 0.22em;
flex-wrap: wrap;
justify-content: center;
}
.shop-status-full .shop-status-short {
font-weight: 700;
color: var(--status-color);
}
.shop-status-full .shop-status-sep {
color: color-mix(in srgb, var(--status-color) 45%, transparent);
}
.shop-status-full .shop-status-detail {
color: var(--status-color);
}
.hero-shop-status {
display: flex;
justify-content: center;
}
/* ============================================================
* 16. BACHECA ORARI — pannello industrial con foglietti appesi
* ============================================================ */
.orari-bacheca {
padding: clamp(70px, 10vh, 130px) 0;
}
.orari-eyebrow {
text-align: center;
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.orari-title {
text-align: center;
font-size: var(--fs-h2);
margin-bottom: var(--space-8);
}
/* Pannello "bacheca": cornice legno + sfondo scuro caldo + ombre interne */
.orari-board {
position: relative;
padding: var(--space-10) var(--space-6) var(--space-8);
background:
radial-gradient(circle at 20% 25%, rgba(200, 131, 74, 0.06) 0%, transparent 40%),
radial-gradient(circle at 78% 75%, rgba(200, 131, 74, 0.05) 0%, transparent 35%),
linear-gradient(135deg, #2a1f15 0%, #160e06 100%);
border: 6px solid #6b4626;
border-radius: 4px;
box-shadow:
inset 0 0 90px rgba(0, 0, 0, 0.7),
inset 0 2px 0 rgba(255, 220, 180, 0.08),
var(--shadow-soft);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6) var(--space-4);
justify-items: center;
}
/* Telefoni stretti (sotto i ~360px): con i margini pieni la bacheca usciva
dallo schermo (MERCOLEDI' e «10:00–13:00» non ci stanno in mezza colonna)
e la pagina scorreva di lato. Colonne che possono stringersi, cornice e
testi piu' asciutti. */
.orari-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 399.98px) {
.orari-board {
padding: var(--space-8) var(--space-3) var(--space-6);
gap: var(--space-5) var(--space-3);
border-width: 4px;
}
.orari-board .orario-foglietto { padding-left: var(--space-2); padding-right: var(--space-2); }
.orari-board .orario-giorno { font-size: 1.15rem; letter-spacing: 0.03em; }
.orari-board .orario-fasce { font-size: 0.9rem; }
.orari-board .orario-oggi-tag { right: -4px; padding: 3px 8px; font-size: 0.65rem; }
}
@media (min-width: 768px) {
.orari-board {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Su schermo largo 4 + 3: sette foglietti in fila venivano troppo piccoli
per leggerli da lontano. Flex e non grid, cosi' la fila da tre si centra. */
@media (min-width: 992px) {
.orari-board {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-8) var(--space-6);
padding: var(--space-10) var(--space-8) var(--space-8);
}
.orari-board .orario-foglietto {
flex: 0 0 calc((100% - 3 * var(--space-6)) / 4);
}
}
/* Singolo foglietto "appeso" */
.orario-foglietto {
position: relative;
width: 100%;
max-width: 250px;
min-height: 150px;
padding: var(--space-6) var(--space-3) var(--space-5);
background: linear-gradient(180deg, #f0e6d3 0%, #ddd0b3 100%);
color: #1a1208;
text-align: center;
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: transform var(--t-base), box-shadow var(--t-base);
}
/* Sfumatura "ombra di carta piegata" sull'angolo basso destro */
.orario-foglietto::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 28px;
height: 28px;
background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.18) 50%);
pointer-events: none;
}
.orario-foglietto--a { transform: rotate(-2.4deg); }
.orario-foglietto--b { transform: rotate(1.6deg); }
.orario-foglietto--c { transform: rotate(-1.2deg); }
.orario-foglietto--d { transform: rotate(2.2deg); }
.orario-foglietto:hover {
transform: rotate(0deg) scale(1.04);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
z-index: 3;
}
/* Puntina rossa in cima */
.orario-puntina {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #e85a5a 0%, #a01515 55%, #4a0808 100%);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.7),
inset 0 1px 0 rgba(255, 200, 200, 0.4);
}
.orario-giorno {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1a1208;
margin: 0 0 var(--space-3);
border-bottom: 1px solid rgba(26, 18, 8, 0.25);
padding-bottom: var(--space-2);
}
.orario-fasce {
font-family: var(--font-body);
font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3rem);
font-weight: 700;
color: #1a1208;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.orario-fasce span {
display: block;
line-height: 1.4;
white-space: nowrap;
}
.orario-chiuso {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: #a33d2b;
padding: var(--space-3) 0;
}
/* Foglietto giorno chiuso: leggermente più scolorito */
.orario-foglietto.is-closed {
background: linear-gradient(180deg, #d9c8a8 0%, #b8a78a 100%);
}
/* Foglietto OGGI: dritto, scalato, glow rame */
.orario-foglietto.is-today {
transform: rotate(0deg) scale(1.06);
box-shadow:
0 10px 28px rgba(200, 131, 74, 0.55),
0 0 0 2px var(--brand-primary),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
z-index: 2;
background: linear-gradient(180deg, #faf2e0 0%, #e8d9b8 100%);
}
.orario-foglietto.is-today:hover {
transform: rotate(0deg) scale(1.08);
}
.orario-foglietto.is-today .orario-puntina {
background: radial-gradient(circle at 35% 35%, #f0a050 0%, var(--brand-primary) 55%, #4a2810 100%);
}
.orario-oggi-tag {
position: absolute;
top: -10px;
right: -10px;
background: var(--brand-primary);
color: var(--on-primary);
padding: 4px 10px;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
transform: rotate(8deg);
}
@media (prefers-reduced-motion: reduce) {
.orario-foglietto,
.orario-foglietto--a,
.orario-foglietto--b,
.orario-foglietto--c,
.orario-foglietto--d {
transform: none !important;
transition: none;
}
.orario-foglietto.is-today {
transform: scale(1.04) !important;
}
}
/* ============================================================
* 16b. TAGLI FIGURINE (home) — carosello orizzontale, card collectible
* 1 visibile su mobile, ~3 su desktop. Scroll-snap centrato.
* ============================================================ */
.tagli-section {
padding: clamp(70px, 10vh, 130px) 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background: #0f0b07; /* mockup: fascia leggermente sollevata */
}
[data-theme="light"] .tagli-section {
background: var(--surface);
}
.tagli-eyebrow {
text-align: center;
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.tagli-title {
text-align: center;
font-size: var(--fs-h2);
margin-bottom: var(--space-4);
}
.tagli-intro {
text-align: center;
max-width: 420px;
margin: 0 auto var(--space-8);
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
}
/* Wrapper full-bleed con sfumature ai lati per indicare lo scroll */
.tagli-carousel-wrap {
position: relative;
overflow: hidden;
padding: var(--space-3) 0 var(--space-4);
}
.tagli-carousel-wrap::before,
.tagli-carousel-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--space-3);
z-index: 2;
pointer-events: none;
}
.tagli-carousel-wrap::before {
left: 0;
background: linear-gradient(to right, var(--brand-bg), transparent);
}
.tagli-carousel-wrap::after {
right: 0;
background: linear-gradient(to left, var(--brand-bg), transparent);
}
.tagli-carousel {
/* Larghezza card mobile come variabile: la riusa il padding di centratura
qui sotto, cosi' ANCHE la prima e l'ultima card si centrano. */
--tagli-card-w: min(80vw, 320px);
display: flex;
gap: var(--space-3);
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
/* padding laterale = meta' dello spazio libero attorno alla card: con
snap center, prima/ultima card si centrano come tutte le altre invece
di appoggiarsi al bordo. */
padding: var(--space-4) calc((100vw - var(--tagli-card-w)) / 2);
scroll-padding-inline: calc((100vw - var(--tagli-card-w)) / 2);
-webkit-overflow-scrolling: touch;
/* Scrollbar nascosta: lo scroll resta possibile (swipe / drag / frecce desktop),
l'hint "Trascina" + le sfumature ai lati indicano l'interazione. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.tagli-carousel::-webkit-scrollbar {
display: none;
}
.tagli-carousel:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 4px;
}
@media (min-width: 992px) {
.tagli-carousel {
padding: var(--space-5) max(7vw, var(--space-8));
scroll-padding-inline: max(7vw, var(--space-8));
gap: var(--space-6);
}
}
/* Frecce navigazione: visibili solo su dispositivi hover-capable (desktop) */
.tagli-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 48px;
height: 48px;
display: none; /* nascoste di default, abilitate sotto a hover:hover */
align-items: center;
justify-content: center;
background: var(--brand-bg-soft);
color: var(--brand-text);
border: 1px solid var(--brand-primary-30);
border-radius: 50%;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: background var(--t-base), border-color var(--t-base),
color var(--t-base), opacity var(--t-base), transform var(--t-base);
}
@media (hover: hover) {
.tagli-nav {
display: inline-flex;
}
}
.tagli-nav:hover,
.tagli-nav:focus-visible {
background: var(--brand-primary);
color: var(--on-primary);
border-color: var(--brand-primary);
outline: none;
}
.tagli-nav:disabled {
opacity: 0.3;
cursor: default;
}
.tagli-nav--prev { left: var(--space-3); }
.tagli-nav--next { right: var(--space-3); }
@media (min-width: 992px) {
.tagli-nav { width: 56px; height: 56px; }
.tagli-nav--prev { left: var(--space-5); }
.tagli-nav--next { right: var(--space-5); }
}
/* Card: 1 su mobile, 2 su tablet, ~3 su desktop.
Mobile: card centrata (anche prima/ultima, grazie al padding del track) e
piu' stretta del viewport -> le card vicine fanno "peek" su entrambi i lati,
segnale che il carosello e' scorrevole. Larghezza dalla var --tagli-card-w. */
.taglio-figurina {
position: relative;
flex: 0 0 auto;
width: var(--tagli-card-w, min(80vw, 320px));
scroll-snap-align: center;
background: var(--surface);
border: 1px solid var(--border-strong);
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
display: flex;
flex-direction: column;
}
@media (min-width: 576px) {
/* Tablet: card piu' piccola (~2 visibili). Il padding di centratura segue
la var, quindi resta coerente. */
.tagli-carousel {
--tagli-card-w: min(48vw, 340px);
}
}
@media (min-width: 992px) {
.taglio-figurina {
width: calc((100vw - 14vw - 2 * var(--space-6)) / 3);
max-width: 360px;
scroll-snap-align: start;
}
}
/* Look "tile" del mockup: card pulita bordata, niente cornici interne
ne' corner a L (restano nei template per compatibilita', nascosti qui). */
.taglio-corner {
display: none;
}
.taglio-figurina:hover {
transform: translateY(-6px);
border-color: var(--brand-primary);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.taglio-figurina.is-popolare {
border-color: var(--brand-primary);
}
.taglio-figurina-img {
position: relative;
aspect-ratio: 3 / 4; /* mockup */
overflow: hidden;
background: repeating-linear-gradient(135deg, #1a1512 0 14px, #141210 14px 28px);
}
[data-theme="light"] .taglio-figurina-img {
background: repeating-linear-gradient(135deg, #e7dcc4 0 14px, #efe5cf 14px 28px);
}
.taglio-figurina-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.taglio-figurina:hover .taglio-figurina-img img {
transform: scale(1.04);
}
.taglio-figurina-img::after {
/* Sfumatura inferiore per dare profondita' alla foto e separare dal body */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top,
rgba(12, 9, 6, 0.55) 0%,
rgba(12, 9, 6, 0.0) 35%);
}
/* Index "#01" mono rame, in basso a sinistra sull'immagine (mockup) */
.taglio-index {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 3;
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
color: var(--brand-primary);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.taglio-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
background: var(--brand-primary);
color: var(--on-primary);
padding: 4px 8px;
font-family: var(--font-body);
font-size: 0.5625rem; /* mockup: 9px */
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.taglio-figurina-body {
position: relative;
padding: var(--space-4) var(--space-4) 14px;
border-top: 1px solid var(--border-subtle);
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.taglio-nome {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.125rem; /* mockup: 18px */
line-height: 1.1;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--brand-text);
margin: 0;
}
.taglio-divider {
display: none; /* look tile del mockup: niente divider */
}
.taglio-descrizione {
font-size: 0.71875rem; /* mockup: 11.5px */
line-height: 1.7;
color: var(--brand-muted);
margin: 0;
flex: 1;
}
.taglio-foot {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
margin: 0;
padding-top: 10px;
border-top: 1px dashed var(--border-subtle);
font-family: var(--font-body);
font-size: 0.625rem; /* mockup: 10px */
letter-spacing: 0.18em;
text-transform: uppercase;
}
.taglio-foot-label {
color: var(--brand-faint);
}
.taglio-foot-value {
color: var(--brand-faint);
}
/* Hint "Trascina" sotto il carosello — solo su touch, su desktop ci sono le frecce */
.tagli-scrollhint {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-3);
color: var(--brand-primary);
font-family: var(--font-body);
font-size: var(--fs-sm);
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.7;
}
@media (hover: hover) {
.tagli-scrollhint {
display: none;
}
}
.tagli-scrollhint-line {
flex: 0 0 48px;
height: 1px;
background: var(--brand-primary-30);
}
@media (prefers-reduced-motion: no-preference) {
.tagli-scrollhint-text {
animation: scrollhint-pulse 2.4s ease-in-out infinite;
}
}
/* ============================================================
* 16c. SWIPE TINDER (home) — vota i tagli, like / pass
* ============================================================ */
.swipe-section {
padding: var(--space-12) 0;
border-bottom: 1px solid var(--brand-primary-12);
}
.swipe-eyebrow {
text-align: center;
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.swipe-title {
text-align: center;
font-size: var(--fs-h2);
margin-bottom: var(--space-4);
}
.swipe-intro {
text-align: center;
max-width: 420px;
margin: 0 auto var(--space-6);
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
}
/* Wrapper centrato del deck */
.swipe-deck-wrap {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 360px;
}
.swipe-deck {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
perspective: 1000px;
user-select: none;
-webkit-user-select: none;
}
/* Card stack: tutte absolute, le top sono visivamente in cima */
.swipe-card {
position: absolute;
inset: 0;
background: var(--brand-bg-soft);
border: 1px solid var(--brand-primary-30);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 220, 180, 0.06);
overflow: hidden;
cursor: grab;
transform: translateY(0) scale(1);
/* Snap-back leggermente "elastic" + transizione smooth quando una card
sale di posizione nello stack. */
transition: transform 380ms cubic-bezier(0.34, 1.4, 0.64, 1),
opacity 280ms ease-out,
box-shadow 280ms ease-out;
will-change: transform, opacity;
/* Blocca scroll/zoom durante drag su card (Pointer Events captura tutto). */
touch-action: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
.swipe-card img {
-webkit-user-drag: none;
}
.swipe-card.is-dragging {
cursor: grabbing;
transition: none;
}
/* Fly-out: easing piu' "espressivo", durata leggermente piu' lunga */
.swipe-card.is-flying-right,
.swipe-card.is-flying-left {
transition: transform 420ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 280ms ease-out 100ms;
pointer-events: none;
}
.swipe-card.is-flying-right {
transform: translate(160%, -40px) rotate(32deg) !important;
opacity: 0;
}
.swipe-card.is-flying-left {
transform: translate(-160%, -40px) rotate(-32deg) !important;
opacity: 0;
}
.swipe-card img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* Stamp LIKE / PASS sopra l'immagine, visibili solo durante drag */
.swipe-stamp {
position: absolute;
top: var(--space-5);
padding: 0.25rem 0.75rem;
border: 3px solid currentColor;
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0;
transition: opacity var(--t-fast);
pointer-events: none;
z-index: 3;
}
.swipe-stamp--like {
right: var(--space-4);
color: #2fcf6f;
transform: rotate(12deg);
}
.swipe-stamp--pass {
left: var(--space-4);
color: #e8595c;
transform: rotate(-12deg);
}
.swipe-card-label {
position: absolute;
bottom: var(--space-4);
left: var(--space-4);
right: var(--space-4);
z-index: 2;
padding: 0.4rem 0.75rem;
background: rgba(12, 9, 6, 0.7);
color: var(--on-dark);
font-family: var(--font-display);
font-size: 1.125rem;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
text-align: center;
border: 1px solid var(--brand-primary-30);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.swipe-empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-5);
border: 1px dashed var(--brand-primary-30);
background: var(--brand-bg-soft);
animation: swipe-empty-in 320ms ease-out both;
}
.swipe-empty-text {
margin: 0 0 var(--space-5);
color: var(--brand-text-soft);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.5;
}
.swipe-empty-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
@keyframes swipe-empty-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.swipe-empty { animation: none; }
}
.swipe-controls {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-6);
}
.swipe-btn {
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--brand-primary-30);
background: var(--brand-bg-soft);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform var(--t-base), background var(--t-base),
border-color var(--t-base), color var(--t-base);
}
.swipe-btn:hover,
.swipe-btn:focus-visible {
transform: translateY(-3px);
outline: none;
}
.swipe-btn--pass {
color: #e8595c;
}
.swipe-btn--pass:hover,
.swipe-btn--pass:focus-visible {
background: rgba(232, 89, 92, 0.12);
border-color: #e8595c;
}
.swipe-btn--like {
color: #2fcf6f;
}
.swipe-btn--like:hover,
.swipe-btn--like:focus-visible {
background: rgba(47, 207, 111, 0.12);
border-color: #2fcf6f;
}
@media (min-width: 768px) {
.swipe-deck-wrap { max-width: 400px; }
.swipe-btn { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.swipe-card { transition: none; }
}
/* ============================================================
* 17. SEZIONE DOVE CI TROVI — mappa + indirizzo + CTA
* ============================================================ */
.dove {
padding: var(--space-12) 0;
border-top: 1px solid var(--brand-primary-12);
}
.dove-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.dove-title {
font-size: var(--fs-h2);
margin-bottom: var(--space-5);
}
.dove-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.dove-address {
font-style: normal;
margin: 0 0 var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.dove-via {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
color: var(--brand-text);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
line-height: 1.05;
}
.dove-cap {
font-family: var(--font-body);
font-size: var(--fs-base);
color: var(--brand-text-soft);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dove-note {
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
margin-bottom: var(--space-5);
}
.dove-cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.dove-map-wrap {
position: relative;
}
/* Mappa del negozio: immagine (la stessa della landing), cliccabile verso
Google Maps. Appoggiata come un foglio sul tavolo, leggermente ruotata. */
.mappa-negozio {
position: relative;
display: block;
padding: 10px 10px 34px;
background: #f0e6d3;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
transform: rotate(1.2deg);
transition: transform var(--t-base), box-shadow var(--t-base);
text-decoration: none;
}
.mappa-negozio img {
display: block;
width: 100%;
height: auto;
}
.mappa-negozio:hover,
.mappa-negozio:focus-visible {
transform: rotate(0deg) scale(1.01);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}
.mappa-negozio-apri {
position: absolute;
left: 12px;
bottom: 8px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #1a1208;
}
.mappa-negozio-crediti {
position: absolute;
right: 12px;
bottom: 9px;
font-size: 0.6875rem;
color: rgba(26, 18, 8, 0.6);
}
.dove--contatti {
padding: clamp(50px, 8vh, 100px) 0;
}
/* In contatti la sezione usa titoli di /prenota/, che sono centrati: qui
devono stare in colonna con l'indirizzo. */
.dove--contatti .prenota-section-eyebrow,
.dove--contatti .prenota-section-title {
text-align: left;
margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
.mappa-negozio,
.mappa-negozio:hover { transform: none; transition: none; }
}
/* ============================================================
* 18. Utility a11y (visually-hidden alla Bootstrap)
* ============================================================ */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ============================================================
* 19. QUIZ "CHE TAGLIO SEI?" — step-by-step single page + risultato
* ============================================================ */
/* Hero compatto */
.quiz-hero {
padding: 4rem 0 2rem;
text-align: center;
}
.quiz-hero .quiz-eyebrow {
font-family: var(--font-display);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: 0.85rem;
margin: 0 0 0.6rem;
}
.quiz-hero .quiz-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 7vw, 4rem);
line-height: 1.05;
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 1rem;
}
.quiz-hero .quiz-intro {
max-width: 36rem;
margin: 0 auto;
color: var(--brand-text-soft);
font-size: 1.05rem;
line-height: 1.55;
}
/* Stage + progress */
.quiz-stage {
padding: 1rem 0 5rem;
}
.quiz-progress {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0.4rem;
max-width: 36rem;
margin: 0 auto 2.5rem;
}
.quiz-progress-seg {
height: 4px;
border-radius: 2px;
background: var(--border-subtle);
transition: background 0.35s ease;
}
.quiz-progress-seg.is-active {
background: var(--brand-primary);
}
/* Step (fieldset) */
.quiz-form {
max-width: 42rem;
margin: 0 auto;
}
.quiz-step {
border: 0;
padding: 0;
margin: 0;
opacity: 1;
transition: opacity 0.28s ease;
}
.quiz-step[hidden] {
display: none;
}
.quiz-step.is-leaving {
opacity: 0;
}
.quiz-step-counter {
font-family: var(--font-display);
letter-spacing: 0.24em;
color: var(--brand-text-soft);
font-size: 0.8rem;
margin: 0 0 0.8rem;
text-align: center;
}
.quiz-step-counter-sep {
margin: 0 0.3rem;
color: var(--brand-primary);
}
.quiz-question {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(1.6rem, 4.5vw, 2.4rem);
line-height: 1.15;
color: var(--brand-text);
text-align: center;
margin: 0 0 0.5rem;
}
.quiz-question-sub {
text-align: center;
color: var(--brand-text-soft);
font-size: 0.98rem;
margin: 0 0 2rem;
}
/* Options grid */
.quiz-options {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
margin: 0 0 1.6rem;
}
@media (min-width: 540px) {
.quiz-options {
grid-template-columns: 1fr 1fr;
}
}
/* Option card */
.quiz-option {
appearance: none;
background: var(--surface);
color: var(--brand-text);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 1.1rem 1rem;
display: flex;
align-items: center;
gap: 0.85rem;
text-align: left;
cursor: pointer;
font-size: 1rem;
line-height: 1.3;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
min-height: 72px;
}
.quiz-option:hover,
.quiz-option:focus-visible {
border-color: var(--brand-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
outline: none;
}
.quiz-option:active {
transform: translateY(0);
}
.quiz-option.is-selected {
background: var(--brand-primary);
color: var(--on-primary);
border-color: var(--brand-primary);
}
.quiz-option-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
}
.quiz-option-text {
flex: 1;
}
/* Step nav (back) */
.quiz-step-nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 0.5rem;
}
/* Empty fallback */
.quiz-empty {
padding: 5rem 0;
}
/* ---- Risultato ---- */
.quiz-result {
padding: 4rem 0 5rem;
}
.quiz-result-eyebrow {
text-align: center;
font-family: var(--font-display);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: 0.85rem;
margin: 0 0 0.6rem;
}
.quiz-result-title {
font-family: var(--font-display);
text-transform: uppercase;
text-align: center;
font-size: clamp(2.2rem, 6vw, 3.4rem);
line-height: 1.05;
color: var(--brand-text);
margin: 0 0 2.5rem;
}
.quiz-result-title span {
color: var(--brand-primary);
}
.quiz-result-card {
max-width: 44rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 16px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.quiz-result-card {
grid-template-columns: 280px 1fr;
}
}
.quiz-result-photo {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--brand-bg);
}
.quiz-result-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.quiz-result-body {
padding: 1.8rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.quiz-result-stile {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--brand-primary);
font-size: 0.9rem;
margin: 0;
}
.quiz-result-desc {
margin: 0;
color: var(--brand-text);
line-height: 1.55;
}
.quiz-result-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 0.4rem;
}
.quiz-result-meta {
text-align: center;
color: var(--brand-text-soft);
font-size: 0.9rem;
margin: 2rem 0 0;
}
/* ============================================================
* 20. CONFIGURATORE TAGLIO — scelte indipendenti su 4 dimensioni
* ============================================================ */
.configura-hero {
padding: 4rem 0 2rem;
text-align: center;
}
.configura-hero .configura-eyebrow {
font-family: var(--font-display);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: 0.85rem;
margin: 0 0 0.6rem;
}
.configura-hero .configura-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 7vw, 4rem);
line-height: 1.05;
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 1rem;
}
.configura-hero .configura-intro {
max-width: 36rem;
margin: 0 auto;
color: var(--brand-text-soft);
font-size: 1.05rem;
line-height: 1.55;
}
.configura-stage {
padding: 1rem 0 5rem;
}
.configura-form {
max-width: 44rem;
margin: 0 auto;
}
.configura-dim {
border: 0;
padding: 0;
margin: 0 0 2.5rem;
}
.configura-dim-title {
font-family: var(--font-display);
text-transform: uppercase;
font-size: 1.4rem;
letter-spacing: 0.06em;
color: var(--brand-text);
padding: 0;
margin: 0 0 0.3rem;
}
.configura-dim-title::before {
content: "";
display: inline-block;
width: 28px;
height: 2px;
background: var(--brand-primary);
vertical-align: middle;
margin-right: 0.6rem;
transform: translateY(-3px);
}
.configura-dim-prompt {
color: var(--brand-text-soft);
margin: 0 0 1rem;
font-size: 0.98rem;
}
.configura-options {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 540px) {
.configura-options {
grid-template-columns: 1fr 1fr;
}
}
/* Summary + CTA in fondo */
.configura-summary {
margin-top: 2.5rem;
padding: 1.6rem 1.4rem;
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 14px;
text-align: center;
}
.configura-summary-label {
font-family: var(--font-display);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: 0.8rem;
margin: 0 0 0.6rem;
}
.configura-summary-text {
color: var(--brand-text);
font-size: 1.1rem;
line-height: 1.4;
margin: 0 0 1.4rem;
min-height: 1.5em;
}
.configura-summary-text.is-incomplete {
color: var(--brand-text-soft);
font-style: italic;
}
.configura-cta[aria-disabled="true"] {
opacity: 0.45;
pointer-events: none;
cursor: not-allowed;
}
.configura-empty {
padding: 5rem 0;
}
/* ============================================================
* 21. HOME — TEASER QUIZ "CHE TAGLIO SEI?" (card scenografica)
* ============================================================ */
.home-quiz {
padding: 4rem 0 3rem;
}
/* Card unica, l'intera area e' un cliccabile */
.home-quiz-card {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
padding: 2.4rem 1.8rem;
background:
radial-gradient(85% 80% at 100% 0%, var(--brand-primary-12), transparent 60%),
var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 22px;
color: var(--brand-text);
text-decoration: none;
overflow: hidden;
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
@media (min-width: 820px) {
.home-quiz-card {
grid-template-columns: 1.05fr 1fr;
gap: 3rem;
padding: 3rem 3rem 3rem 3.2rem;
}
}
.home-quiz-card:hover,
.home-quiz-card:focus-visible {
transform: translateY(-4px);
border-color: var(--brand-primary);
box-shadow: var(--shadow-glow);
outline: none;
}
/* Corner accents ramati nei 4 angoli (stile collectible) */
.home-quiz-corner {
position: absolute;
width: 28px;
height: 28px;
pointer-events: none;
}
.home-quiz-corner--tl { top: 14px; left: 14px; border-top: 2px solid var(--brand-primary); border-left: 2px solid var(--brand-primary); border-top-left-radius: 12px; }
.home-quiz-corner--tr { top: 14px; right: 14px; border-top: 2px solid var(--brand-primary); border-right: 2px solid var(--brand-primary); border-top-right-radius: 12px; }
.home-quiz-corner--bl { bottom: 14px; left: 14px; border-bottom: 2px solid var(--brand-primary); border-left: 2px solid var(--brand-primary); border-bottom-left-radius: 12px; }
.home-quiz-corner--br { bottom: 14px; right: 14px; border-bottom: 2px solid var(--brand-primary); border-right: 2px solid var(--brand-primary); border-bottom-right-radius: 12px; }
/* Stamp "Quiz · 60 sec" ruotato (decorativo) */
.home-quiz-stamp {
position: absolute;
top: 1.4rem;
right: -2.2rem;
transform: rotate(35deg);
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-display);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.72rem;
padding: 0.32rem 2.8rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
pointer-events: none;
z-index: 1;
}
@media (max-width: 540px) {
.home-quiz-stamp { display: none; }
}
/* Colonna sinistra: testo + CTA */
.home-quiz-content { position: relative; z-index: 2; }
.home-quiz-eyebrow {
font-family: var(--font-body);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: var(--fs-eyebrow);
margin: 0 0 0.6rem;
}
.home-quiz-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h2);
line-height: var(--lh-tight);
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 1rem;
}
.home-quiz-text {
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
margin: 0 0 1.2rem;
}
.home-quiz-points {
list-style: none;
padding: 0;
margin: 0 0 1.6rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.home-quiz-points li {
position: relative;
padding-left: 1.6rem;
color: var(--brand-text-soft);
font-size: var(--fs-sm);
}
.home-quiz-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 10px;
height: 10px;
background: var(--brand-primary);
transform: rotate(45deg);
}
.home-quiz-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-display);
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.92rem;
padding: 0.85rem 1.4rem;
border-radius: 999px;
transition: gap 0.25s ease, background 0.25s ease;
}
.home-quiz-card:hover .home-quiz-cta,
.home-quiz-card:focus-visible .home-quiz-cta {
gap: 0.9rem;
}
/* Colonna destra: preview "viva" della prima domanda */
.home-quiz-preview {
position: relative;
z-index: 2;
background: var(--brand-bg);
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 1.4rem 1.2rem 1.2rem;
transform: rotate(-1.5deg);
transition: transform 0.4s ease;
}
.home-quiz-card:hover .home-quiz-preview,
.home-quiz-card:focus-visible .home-quiz-preview {
transform: rotate(0deg) translateY(-2px);
}
.home-quiz-preview-counter {
font-family: var(--font-display);
letter-spacing: 0.24em;
color: var(--brand-text-soft);
font-size: 0.78rem;
margin: 0 0 0.5rem;
text-align: center;
}
.home-quiz-preview-counter .sep {
margin: 0 0.35rem;
color: var(--brand-primary);
}
.home-quiz-preview-question {
font-family: var(--font-display);
text-transform: uppercase;
text-align: center;
color: var(--brand-text);
font-size: 1.15rem;
line-height: 1.15;
margin: 0 0 1rem;
}
.home-quiz-preview-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin: 0 0 1rem;
}
.home-quiz-preview-option {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0.65rem;
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 10px;
font-size: 0.85rem;
color: var(--brand-text);
}
.home-quiz-preview-option .emoji { font-size: 1.05rem; line-height: 1; }
.home-quiz-preview-option.is-active {
background: var(--brand-primary);
color: var(--on-primary);
border-color: var(--brand-primary);
}
.home-quiz-preview-progress {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0.3rem;
}
.home-quiz-preview-progress span {
height: 3px;
border-radius: 2px;
background: var(--border-subtle);
}
.home-quiz-preview-progress .is-on {
background: var(--brand-primary);
}
/* ============================================================
* 22. MOOD BOARD — griglia foto pinnabili + pannello board (B.3)
* ============================================================ */
.mood-hero {
padding: 4rem 0 2rem;
text-align: center;
}
.mood-eyebrow {
font-family: var(--font-display);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: 0.85rem;
margin: 0 0 0.6rem;
}
.mood-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 7vw, 4rem);
line-height: 1.05;
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 1rem;
}
.mood-intro {
max-width: 38rem;
margin: 0 auto;
color: var(--brand-text-soft);
font-size: 1.05rem;
line-height: 1.55;
}
.mood-stage {
padding: 1rem 0 5rem;
}
/* Layout: griglia a sinistra, board sticky a destra (desktop) */
.mood-form {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
@media (min-width: 900px) {
.mood-form {
grid-template-columns: 1fr 300px;
gap: 2rem;
}
}
/* Griglia foto */
.mood-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
}
@media (min-width: 600px) {
.mood-grid { grid-template-columns: repeat(3, 1fr); }
}
.mood-card {
position: relative;
appearance: none;
border: 2px solid var(--border-subtle);
background: var(--surface);
border-radius: 12px;
padding: 0;
overflow: hidden;
cursor: pointer;
aspect-ratio: 4 / 5;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.mood-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
}
.mood-card:hover,
.mood-card:focus-visible {
transform: translateY(-3px);
border-color: var(--brand-primary);
box-shadow: var(--shadow-glow);
outline: none;
}
.mood-card:hover img { transform: scale(1.05); }
.mood-card-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 9, 6, 0.35);
opacity: 0;
transition: opacity 0.2s ease;
}
.mood-card:hover .mood-card-overlay,
.mood-card:focus-visible .mood-card-overlay { opacity: 1; }
.mood-card-pinicon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brand-primary);
color: var(--on-primary);
font-size: 1.8rem;
line-height: 44px;
text-align: center;
font-weight: 700;
}
.mood-card-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.5rem 0.6rem;
font-size: 0.78rem;
text-align: left;
color: var(--on-dark);
background: linear-gradient(to top, rgba(6,4,2,0.85), transparent);
pointer-events: none;
}
/* Stato pinnato */
.mood-card.is-pinned {
border-color: var(--brand-primary);
box-shadow: var(--shadow-glow);
}
.mood-card.is-pinned img { filter: saturate(1.05); }
.mood-card.is-pinned .mood-card-overlay {
opacity: 1;
background: rgba(200, 131, 74, 0.28);
}
/* In stato pinnato il "+" diventa "✓": azzero il glifo e uso ::before */
.mood-card.is-pinned .mood-card-pinicon {
font-size: 0;
}
.mood-card.is-pinned .mood-card-pinicon::before {
content: "✓";
font-size: 1.5rem;
}
/* Pannello board */
.mood-board {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 1.2rem 1.1rem;
}
@media (min-width: 900px) {
.mood-board {
position: sticky;
top: 90px;
}
}
.mood-board.is-drop-hover {
border-color: var(--brand-primary);
box-shadow: var(--shadow-glow);
}
.mood-board-label {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--brand-text);
font-size: 1rem;
margin: 0 0 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.mood-board-count {
background: var(--brand-primary);
color: var(--on-primary);
font-size: 0.85rem;
min-width: 1.6rem;
height: 1.6rem;
line-height: 1.6rem;
text-align: center;
border-radius: 999px;
padding: 0 0.4rem;
}
.mood-board-pins {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
min-height: 64px;
margin-bottom: 1rem;
}
@media (min-width: 900px) {
.mood-board-pins { grid-template-columns: repeat(3, 1fr); }
}
.mood-board-empty {
grid-column: 1 / -1;
color: var(--brand-text-soft);
font-size: 0.85rem;
font-style: italic;
margin: 0;
line-height: 1.4;
}
.mood-pin {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.mood-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mood-pin-remove {
position: absolute;
top: 2px;
right: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 0;
background: rgba(6,4,2,0.7);
color: #fff;
font-size: 0.9rem;
line-height: 20px;
text-align: center;
cursor: pointer;
padding: 0;
}
.mood-cta {
width: 100%;
}
.mood-cta:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.mood-empty { padding: 5rem 0; }
/* Tag letti in pagina risultato */
.mood-result-tags {
text-align: center;
margin: 0 auto 2rem;
color: var(--brand-text-soft);
font-size: 0.98rem;
}
.mood-result-tag {
display: inline-block;
margin: 0.2rem 0.25rem 0;
padding: 0.25rem 0.7rem;
border: 1px solid var(--brand-primary);
border-radius: 999px;
color: var(--brand-primary);
font-family: var(--font-display);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.8rem;
}
/* ============================================================
* 23. PROVA VIRTUALE TAGLIO (B.X) — upload foto + render AI
* ============================================================ */
.tryon-demo-banner {
max-width: 44rem;
margin: 0 auto 1rem;
padding: 0.8rem 1.1rem;
border: 1px dashed var(--brand-primary);
border-radius: 10px;
color: var(--brand-text-soft);
font-size: 0.9rem;
text-align: center;
background: var(--brand-primary-12);
}
.tryon-empty { padding: 5rem 0; }
/* ---- Area riservata: prove virtuali salvate (B.X) ---- */
.prove-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
}
@media (min-width: 576px) { .prove-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .prove-grid { grid-template-columns: repeat(3, 1fr); } }
.prova-card {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 14px;
overflow: hidden;
}
.prova-card-imgs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.prova-card-fig { margin: 0; overflow: hidden; }
.prova-card-fig img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
.prova-card-fig figcaption {
padding: 0.4rem;
font-family: var(--font-display);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.72rem;
color: var(--brand-text-soft);
text-align: center;
}
.prova-card-body { padding: 1rem; }
.prova-card-taglio {
font-family: var(--font-display);
text-transform: uppercase;
margin: 0 0 0.2rem;
color: var(--brand-text);
}
.prova-card-data { margin: 0 0 0.8rem; font-size: 0.85rem; color: var(--brand-text-soft); }
/* Dashboard: mini-griglia di anteprima */
.prove-preview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
}
@media (max-width: 575px) { .prove-preview-grid { grid-template-columns: 1fr 1fr; } }
.prove-preview-item {
display: block;
overflow: hidden;
border: 1px solid var(--border-subtle);
text-decoration: none;
}
.prove-preview-item img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
.prove-preview-cap {
display: block;
padding: 0.4rem;
font-size: 0.72rem;
text-align: center;
color: var(--brand-text-soft);
}
/* ============================================================
* 24. AREA UTENTE (Fase D) — login / registrazione / account
* ============================================================ */
.account-page {
padding: clamp(40px, 7vh, 72px) 0 5rem;
}
.account-eyebrow {
font-family: var(--font-body);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: var(--fs-eyebrow);
margin: 0 0 0.5rem;
}
.account-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.75rem, 4.2vw, 2.75rem);
line-height: var(--lh-tight);
text-transform: uppercase;
color: var(--brand-text);
margin: 0;
}
.account-intro {
color: var(--brand-text-soft);
line-height: 1.7;
margin: 0 0 1.6rem;
}
/* ---- Header dashboard: avatar + saluto + dati + esci ---- */
.account-hero {
display: flex;
align-items: center;
gap: 1.25rem;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
.account-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.75rem;
flex: none;
}
.account-hero-info {
flex: 1;
min-width: 200px;
}
.account-hero-info .account-eyebrow {
margin-bottom: 0.25rem;
}
.account-hero-meta {
color: var(--brand-muted);
font-size: 0.75rem;
letter-spacing: 0.08em;
margin: 0.4rem 0 0;
overflow-wrap: anywhere;
}
.account-hero-logout {
margin: 0;
flex: none;
}
/* ---- Statistiche: numeri grandi in rame su tile bordate ---- */
.account-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 1.2rem;
}
.account-stat {
background: var(--surface);
border: 1px solid var(--border-subtle);
padding: 1.25rem 1.375rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.account-stat-num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.25rem, 4.6vw, 3rem);
line-height: 1;
color: var(--brand-primary);
}
.account-stat-num small {
font-size: 0.5em;
font-weight: 600;
color: var(--brand-muted);
}
.account-stat-label {
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-muted);
}
.account-stat-link {
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-primary);
margin-top: 0.25rem;
}
.account-stat-hint {
font-size: 0.6875rem;
color: var(--brand-faint);
margin-top: 0.25rem;
}
/* Shortcut alla dashboard di gestione (solo superadmin) */
.account-admin-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
margin: 0 0 1.2rem;
border: 1px solid var(--brand-primary-30);
background: var(--brand-primary-12);
color: var(--brand-text);
text-decoration: none;
transition: border-color var(--t-fast), transform var(--t-fast);
}
.account-admin-link:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.account-admin-icon { font-size: 1.6rem; color: var(--brand-primary); flex: none; }
.account-admin-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.account-admin-text strong {
font-family: var(--font-display);
font-size: 1.2rem;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
}
.account-admin-text span { color: var(--brand-text-soft); font-size: 0.9rem; }
.account-admin-cta { color: var(--brand-primary); white-space: nowrap; flex: none; }
/* Card centrale per login/registrazione/reset */
.account-card {
max-width: 30rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border-subtle);
padding: 2rem 1.8rem;
}
/* Form: input stilizzati senza bisogno di classi sui widget */
.account-form {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.account-form label {
font-family: var(--font-body);
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.6875rem;
color: var(--brand-text-soft);
margin-top: 0.8rem;
}
.account-form input {
width: 100%;
padding: 0.7rem 0.85rem;
background: var(--brand-bg);
border: 1px solid var(--border-strong);
color: var(--brand-text);
font-size: 0.9375rem;
}
.account-form input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: var(--shadow-glow);
}
.account-form .btn {
margin-top: 1.4rem;
width: 100%;
}
.account-error {
background: rgba(226, 109, 90, 0.14);
border: 1px solid #e26d5a;
color: #e26d5a;
padding: 0.6rem 0.8rem;
font-size: 0.85rem;
margin: 0 0 1rem;
}
.account-field-error {
color: #e26d5a;
font-size: 0.82rem;
}
.account-links,
.account-switch {
text-align: center;
margin: 1rem 0 0;
font-size: 0.92rem;
color: var(--brand-text-soft);
}
.account-links a,
.account-switch a {
color: var(--brand-primary);
font-weight: 600;
}
/* Dashboard: card contenuto in linguaggio mockup (surface + bordo) */
.account-box {
background: var(--surface);
border: 1px solid var(--border-subtle);
padding: 1.375rem 1.5rem;
margin-bottom: 10px;
}
.account-box-label {
font-family: var(--font-body);
letter-spacing: 0.28em;
text-transform: uppercase;
font-size: 0.625rem;
color: var(--brand-faint);
margin: 0 0 0.9rem;
}
.account-box-hint {
color: var(--brand-text-soft);
font-size: 0.8125rem;
margin: 0;
}
.account-movimenti {
list-style: none;
padding: 0;
margin: 0;
}
.account-movimenti li {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.8rem;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 0.9rem;
}
.account-mov-delta {
font-family: var(--font-display);
color: #2e9e5b;
min-width: 2.5rem;
}
.account-mov-delta.is-neg { color: #e26d5a; }
.account-mov-motivo { color: var(--brand-text); }
.account-mov-data { color: var(--brand-text-soft); font-size: 0.8rem; }
/* Badge crediti in nav */
.nav-crediti {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--brand-primary);
font-family: var(--font-display);
letter-spacing: 0.06em;
font-size: 0.85rem;
}
.tryon-gate { padding: 1rem 0 5rem; }
.tryon-gate-card {
max-width: 46rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: 18px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.tryon-gate-card { grid-template-columns: 240px 1fr; }
}
.tryon-gate-visual {
position: relative;
background: var(--brand-bg);
min-height: 200px;
}
.tryon-gate-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.9) contrast(1.05);
}
.tryon-gate-badge {
position: absolute;
top: 0.7rem;
left: 0.7rem;
background: var(--brand-primary);
color: var(--on-primary);
font-family: var(--font-display);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.7rem;
padding: 0.25rem 0.6rem;
border-radius: 6px;
}
.tryon-gate-body { padding: 1.8rem 1.6rem; }
.tryon-gate-eyebrow {
font-family: var(--font-display);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: 0.78rem;
margin: 0 0 0.5rem;
}
.tryon-gate-title {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(1.5rem, 4vw, 2.1rem);
line-height: 1.1;
color: var(--brand-text);
margin: 0 0 0.8rem;
}
.tryon-gate-text {
color: var(--brand-text-soft);
line-height: 1.55;
margin: 0 0 1.4rem;
}
.tryon-gate-actions {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
}
/* ---- Dashboard: Il mio look (D.3) ---- */
.account-look-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
margin-bottom: 1.2rem;
}
@media (min-width: 560px) {
.account-look-grid { grid-template-columns: 1fr 1fr; }
}
.account-look-sub {
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.72rem;
color: var(--brand-text-soft);
margin: 0 0 0.4rem;
}
.account-look-sub--storico { margin-top: 1.2rem; }
.account-look-big {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--brand-primary);
margin: 0 0 0.2rem;
}
.account-look-meta { color: var(--brand-text); margin: 0; font-size: 0.9rem; }
.account-look-empty { color: var(--brand-text-soft); font-style: italic; margin: 0 0 0.8rem; }
.account-pref-form select {
width: 100%;
padding: 0.6rem 0.8rem;
background: var(--brand-bg);
border: 1px solid var(--border-subtle);
border-radius: 10px;
color: var(--brand-text);
font-size: 0.95rem;
}
.account-pref-form select:focus { outline: none; border-color: var(--brand-primary); }
.account-look-link {
display: inline-block;
margin-top: 0.6rem;
color: var(--brand-primary);
font-family: var(--font-display);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.82rem;
}
.account-storico {
list-style: none;
padding: 0;
margin: 0;
}
.account-storico li {
display: flex;
gap: 1rem;
padding: 0.45rem 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 0.9rem;
}
.account-storico-data { color: var(--brand-text-soft); min-width: 6rem; }
.account-storico-serv { color: var(--brand-text); }
/* ============================================================
* 25. STORICO TAGLI A CARD (area cliente) — figurina + carosello foto
* ============================================================ */
.account-box-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.account-box-head .account-box-label { margin: 0; }
.account-box-link {
color: var(--brand-primary);
font-family: var(--font-display);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.8rem;
white-space: nowrap;
}
.storico-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
}
@media (min-width: 560px) {
.storico-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
.storico-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Preview dashboard: carosello orizzontale (pattern home) + card "vedi tutti" */
.storico-row {
position: relative;
--storico-card-w: min(72vw, 240px);
}
.storico-row-track {
display: flex;
gap: var(--space-3);
overflow-x: auto;
padding: var(--space-2) 0 var(--space-3);
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
}
.storico-row-track::-webkit-scrollbar { display: none; }
.storico-row-track:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; }
.storico-row-track .storico-card,
.storico-row-track .storico-card-all {
flex: 0 0 var(--storico-card-w);
scroll-snap-align: start;
}
/* Frecce navigazione (solo desktop hover) */
.storico-row-nav {
position: absolute;
top: 38%;
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
display: none;
align-items: center;
justify-content: center;
background: var(--brand-bg-soft);
color: var(--brand-text);
border: 1px solid var(--brand-primary-30);
border-radius: 50%;
box-shadow: var(--shadow-soft);
cursor: pointer;
transition: background var(--t-base), color var(--t-base), opacity var(--t-base);
}
@media (hover: hover) {
.storico-row-nav { display: inline-flex; }
}
.storico-row-nav:hover:not(:disabled) { background: var(--brand-primary); color: var(--on-primary); }
.storico-row-nav:disabled { opacity: 0.3; cursor: default; }
.storico-row-nav--prev { left: -10px; }
.storico-row-nav--next { right: -10px; }
/* Card fittizia "vedi tutti" in coda */
.storico-card-all {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-align: center;
padding: var(--space-4);
border: 1px dashed var(--brand-primary-30);
border-radius: 0;
background: var(--brand-primary-12);
color: var(--brand-text);
text-decoration: none;
transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.storico-card-all:hover {
border-color: var(--brand-primary);
background: rgba(200, 131, 74, 0.18);
transform: translateY(-4px);
}
.storico-card-all-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--brand-primary);
color: var(--on-primary);
font-size: 1.6rem;
line-height: 1;
}
.storico-card-all-text {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 1rem;
color: var(--brand-text);
}
.storico-card-all-num {
font-family: var(--font-display);
color: var(--brand-primary);
font-size: 1.4rem;
}
/* Card collectible (mirror .taglio-figurina) */
.storico-card {
position: relative;
background: linear-gradient(180deg, rgba(200, 131, 74, 0.05) 0%, var(--brand-bg-soft) 60%);
border: 1px solid var(--brand-primary-30);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.storico-card::before {
content: "";
position: absolute;
inset: var(--space-2);
border: 1px solid var(--brand-primary-12);
pointer-events: none;
z-index: 1;
}
.storico-card:hover {
transform: translateY(-4px);
border-color: var(--brand-primary);
box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.storico-card:hover .taglio-corner { border-color: var(--brand-accent); }
/* Area media (single o carosello) */
.storico-card-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: linear-gradient(135deg, rgba(200, 131, 74, 0.08) 0%, rgba(12, 9, 6, 0.4) 100%);
}
.storico-card-single,
.storico-card-slide {
width: 100%;
height: 100%;
}
.storico-card-single img,
.storico-card-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.storico-card-noimg {
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-text-soft);
font-size: 0.85rem;
font-style: italic;
}
/* Data: nel corpo card (sopra il nome), non sulla foto → sempre leggibile */
.storico-card-eyebrow {
font-family: var(--font-display);
letter-spacing: 0.14em;
color: var(--brand-primary);
font-size: 0.85rem;
margin: 0;
}
/* Carosello foto interno alla card — slider transform-based (no scroll nativo) */
.storico-card-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; }
.storico-card-track {
display: flex;
height: 100%;
transform: translateX(0);
transition: transform 0.35s ease;
will-change: transform;
}
.storico-card-slide {
flex: 0 0 100%;
min-width: 100%;
height: 100%;
}
/* Indicatore foto a pallini (in basso al centro): distinto dalle frecce
"gira card" del carosello esterno, cosi' non si confondono mai. */
.storico-card-dots {
position: absolute;
bottom: var(--space-2);
left: 0;
right: 0;
z-index: 4;
display: flex;
gap: 6px;
justify-content: center;
padding: 0 var(--space-3);
}
.storico-card-dot {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
padding: 0;
cursor: pointer;
background: rgba(240, 230, 211, 0.45);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
transition: background var(--t-base), transform var(--t-base);
}
.storico-card-dot.is-active {
background: var(--brand-primary);
transform: scale(1.3);
}
.storico-card-body {
position: relative;
z-index: 2;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
}
.storico-card-nome {
font-family: var(--font-display);
font-size: 1.3rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: var(--tracking-display);
color: var(--brand-text);
margin: 0;
}
.storico-card-descr {
color: var(--brand-text-soft);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* Pager */
.storico-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
margin-top: 2.5rem;
}
.storico-pager-info {
color: var(--brand-text-soft);
font-size: 0.9rem;
}
/* ============================================================
* 26. PUNCH CARD FEDELTÀ (area cliente) — timbri animati
* ============================================================ */
.punch-omaggi {
color: var(--brand-primary);
font-family: var(--font-display);
letter-spacing: 0.06em;
font-size: 0.85rem;
white-space: nowrap;
}
.punch-stamps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.6rem;
margin: 0.4rem 0 1rem;
}
@media (min-width: 480px) {
.punch-stamps { grid-template-columns: repeat(10, 1fr); }
}
.punch-stamp {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--border-subtle);
border-radius: 50%;
color: var(--brand-text-soft);
font-size: 0.85rem;
background: var(--brand-bg);
}
.punch-stamp.is-on {
border-style: solid;
border-color: var(--brand-primary);
background: var(--brand-primary);
color: var(--on-primary);
font-size: 1rem;
/* Comparsa "timbro" staggered: scala + rotazione che si assesta */
animation: punch-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay: calc(var(--punch-i) * 60ms);
}
@keyframes punch-in {
0% { transform: scale(0) rotate(-25deg); opacity: 0; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.punch-msg {
margin: 0;
color: var(--brand-text);
font-size: 0.95rem;
line-height: 1.5;
}
/* Carta completa: pulsazione celebrativa dei timbri */
.punch--full .punch-stamp.is-on {
animation: punch-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
punch-pulse 1.6s ease-in-out 0.8s infinite;
}
@keyframes punch-pulse {
0%, 100% { box-shadow: 0 0 0 0 var(--brand-primary-30); }
50% { box-shadow: 0 0 0 6px rgba(200, 131, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
.punch-stamp.is-on,
.punch--full .punch-stamp.is-on { animation: none; }
}
/* ---- Dashboard: I tagli che ti piacciono (like swipe, D.7) ---- */
.swipe-like-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 0.5rem;
}
.swipe-like-item {
aspect-ratio: 3 / 4;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--brand-primary-30);
}
.swipe-like-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---- Dashboard: Porta un amico (referral, D.5) ---- */
.referral-count {
color: var(--brand-primary);
font-family: var(--font-display);
letter-spacing: 0.06em;
font-size: 0.85rem;
white-space: nowrap;
}
.referral-body {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
align-items: center;
}
@media (min-width: 560px) {
.referral-body { grid-template-columns: 140px 1fr; }
}
.referral-qr {
width: 140px;
height: 140px;
background: #fff; /* il QR va su sfondo chiaro per la scansione */
border-radius: 12px;
padding: 8px;
justify-self: center;
}
.referral-qr svg { width: 100%; height: 100%; display: block; }
.referral-text {
color: var(--brand-text-soft);
line-height: 1.5;
margin: 0 0 0.9rem;
font-size: 0.95rem;
}
.referral-link-label {
display: block;
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.72rem;
color: var(--brand-text-soft);
margin-bottom: 0.3rem;
}
.referral-link-row {
display: flex;
gap: 0.5rem;
}
.referral-link {
flex: 1;
min-width: 0;
padding: 0.55rem 0.7rem;
background: var(--brand-bg);
border: 1px solid var(--border-subtle);
border-radius: 10px;
color: var(--brand-text);
font-size: 0.85rem;
}
.referral-copy { white-space: nowrap; flex-shrink: 0; }
.referral-code {
margin: 0.8rem 0 0;
color: var(--brand-text-soft);
font-size: 0.9rem;
}
.referral-code b {
color: var(--brand-primary);
font-family: var(--font-display);
letter-spacing: 0.14em;
font-size: 1.05rem;
}
/* ============================================================
* 27. ARCADE (Fase C) — hub /gioca/ + overlay fine partita
* ============================================================ */
.arcade-hero {
padding: 4rem 0 2rem;
text-align: center;
}
.arcade-eyebrow {
font-family: var(--font-body);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: var(--fs-eyebrow);
margin: 0 0 0.6rem;
}
.arcade-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.625rem, 8vw, 5.5rem);
line-height: 0.95;
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 1rem;
}
.arcade-intro {
max-width: 460px;
margin: 0 auto;
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
}
.arcade-grid-section { padding: 1rem 0 5rem; }
.arcade-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
@media (min-width: 640px) {
.arcade-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Card gioco: "tile" del linguaggio mockup (come le card tagli) */
.arcade-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6rem;
padding: 2rem 1.4rem 1.5rem;
background: var(--surface);
border: 1px solid var(--border-strong);
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.arcade-card:not(.is-soon):hover {
transform: translateY(-6px);
border-color: var(--brand-primary);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.arcade-card-icon {
font-size: 2.4rem;
line-height: 1;
}
.arcade-card-nome {
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 1.25rem;
color: var(--brand-text);
margin: 0;
}
.arcade-card-tagline {
color: var(--brand-muted);
font-size: 0.75rem;
line-height: 1.7;
margin: 0;
min-height: 2.6em;
}
.arcade-card-best {
color: var(--brand-faint);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0.2rem 0 0.6rem;
padding-top: 0.6rem;
border-top: 1px dashed var(--border-subtle);
align-self: stretch;
}
.arcade-card-best b {
color: var(--brand-primary);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.05em;
}
.arcade-card-soon {
font-family: var(--font-body);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.625rem;
color: var(--brand-text-soft);
border: 1px dashed var(--border-subtle);
padding: 0.4rem 1rem;
}
.arcade-card.is-soon { opacity: 0.72; }
.arcade-foot {
text-align: center;
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
margin: 2.5rem auto 0;
max-width: 34rem;
}
/* Tabellone globale: riusa il cabinet della home, righe gioco/nick/punti */
.arcade-board {
margin-top: clamp(40px, 6vw, 64px);
}
.arcade-cab--board {
max-width: 560px;
}
.arcade-board-nick {
font-size: 0.625rem;
letter-spacing: 0.18em;
color: var(--brand-text-soft);
}
.arcade-board-nick--empty {
color: var(--brand-faint);
letter-spacing: 0.12em;
}
.arcade-board-punti {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
color: var(--brand-primary);
min-width: 3.5rem;
text-align: right;
}
/* Hub con un solo gioco: card singola centrata (no stretch su 3 colonne).
* La pagina di gioco Fade Master ha il suo CSS dedicato (fade-master.css). */
.arcade-grid--single {
max-width: 26rem;
margin-inline: auto;
}
@media (min-width: 640px) {
.arcade-grid--single { grid-template-columns: 1fr; }
}
/* ============================================================
* 29. PAGINA TAGLI (/tagli/) — sala prove: catalogo + ponte AI + scheda taglio
* ============================================================ */
/* --- Hero --- */
.tg-hero { padding: var(--space-10) 0 var(--space-6); text-align: center; }
.tg-eyebrow {
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.tg-title { font-size: clamp(2.4rem, 8vw, 4rem); margin-bottom: var(--space-4); }
.tg-intro {
max-width: 460px;
margin: 0 auto;
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
}
.tg-intro strong { color: var(--brand-text); }
/* --- Sala prove AI (3 card-ponte; la prima è hero, larga) --- */
.tg-ai { padding: var(--space-4) 0 var(--space-8); }
.tg-ai-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.tg-ai-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border-strong);
padding: 1.5rem 1.4rem;
text-decoration: none;
color: var(--brand-text);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tg-ai-card:hover {
transform: translateY(-3px);
border-color: var(--brand-primary);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}
.tg-ai-card--hero {
background:
linear-gradient(135deg, rgba(200, 131, 74, 0.16), rgba(200, 131, 74, 0));
border-color: var(--brand-primary);
}
.tg-ai-tag {
align-self: flex-start;
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.625rem;
font-weight: 700;
color: var(--brand-primary);
border: 1px solid var(--brand-primary-30);
padding: 4px 9px;
margin-bottom: 0.9rem;
}
.tg-ai-title { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 0 0 0.5rem; }
.tg-ai-title--sm { font-size: clamp(1.4rem, 4vw, 1.7rem); }
.tg-ai-text { color: var(--brand-muted); line-height: 1.8; font-size: var(--fs-sm); margin: 0 0 1.1rem; flex: 1; }
.tg-ai-cta {
font-family: var(--font-body);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-primary);
font-size: var(--fs-eyebrow);
font-weight: 700;
}
/* --- Catalogo --- */
.tg-catalog { padding: var(--space-4) 0 var(--space-10); }
.tg-catalog-eyebrow {
text-align: center;
font-family: var(--font-body);
color: var(--brand-primary);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: var(--fs-eyebrow);
margin-bottom: var(--space-3);
}
.tg-catalog-title { text-align: center; font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: var(--space-6); }
.tg-grid {
display: grid;
gap: 1.2rem;
grid-template-columns: 1fr;
}
/* --- Card taglio --- */
.tg-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border-strong);
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tg-card:hover {
transform: translateY(-3px);
border-color: var(--brand-primary);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
.tg-card.is-popolare { border-color: var(--brand-primary); }
.tg-card-media {
position: relative;
display: block;
aspect-ratio: 4 / 5;
background: var(--brand-bg);
overflow: hidden;
}
.tg-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-card:hover .tg-card-media img { transform: scale(1.04); }
.tg-card-media img { transition: transform 0.4s ease; }
.tg-card-noimg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 3rem;
color: var(--brand-primary-30); letter-spacing: 0.1em;
}
.tg-card-index {
position: absolute; top: 0.7rem; left: 0.8rem;
font-family: var(--font-body); font-size: var(--fs-eyebrow);
color: var(--brand-primary); letter-spacing: 0.05em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.tg-card-badge {
position: absolute; top: 0.7rem; right: 0.7rem;
background: var(--brand-primary); color: var(--on-primary);
font-family: var(--font-body); text-transform: uppercase;
letter-spacing: 0.18em; font-size: 0.5625rem; font-weight: 700;
padding: 4px 8px;
}
.tg-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.1rem 1.2rem; }
.tg-card-name { font-size: 1.5rem; margin: 0 0 0.5rem; }
.tg-card-name a { color: var(--brand-text); text-decoration: none; }
.tg-card-name a:hover { color: var(--brand-primary); }
.tg-card-desc { color: var(--brand-muted); line-height: 1.7; font-size: var(--fs-sm); margin: 0 0 0.8rem; }
.tg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1rem; }
.tg-chip {
font-family: var(--font-body); font-size: 0.625rem;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--brand-faint);
border: 1px solid var(--border-subtle);
padding: 3px 8px;
}
.tg-chips--lg .tg-chip { font-size: 0.8rem; padding: 0.25rem 0.75rem; }
.tg-card-actions { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; }
.tg-card-try { flex: 0 0 auto; }
.tg-card-more {
font-family: var(--font-body); letter-spacing: 0.16em;
text-transform: uppercase; font-size: var(--fs-eyebrow); font-weight: 700;
color: var(--brand-text-soft); text-decoration: none;
}
.tg-card-more:hover { color: var(--brand-primary); }
.tg-empty { padding: var(--space-10) 0; }
/* --- CTA finale --- */
.tg-cta-final { padding: var(--space-8) 0 var(--space-10); }
.tg-cta-title { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: var(--space-2); }
.tg-cta-text { color: var(--brand-text-soft); margin-bottom: var(--space-5); font-size: var(--fs-lg); }
/* --- Dettaglio --- */
.tg-detail { padding: var(--space-6) 0 var(--space-8); }
.tg-breadcrumb {
font-family: var(--font-body); font-size: var(--fs-sm);
color: var(--brand-text-soft); margin-bottom: var(--space-5);
display: flex; gap: 0.5rem; align-items: center;
}
.tg-breadcrumb a { color: var(--brand-primary); text-decoration: none; }
.tg-breadcrumb a:hover { text-decoration: underline; }
.tg-detail-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
.tg-detail-main {
position: relative;
margin: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--brand-bg);
border: 1px solid var(--border-strong);
}
.tg-detail-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-detail-thumbs {
list-style: none; display: flex; gap: 0.6rem; padding: 0.8rem 0 0; margin: 0;
overflow-x: auto;
}
.tg-detail-thumbs li { flex: 0 0 5rem; }
.tg-detail-thumbs img {
width: 5rem; height: 5rem; object-fit: cover;
border: 1px solid var(--border-strong);
}
.tg-detail-eyebrow {
font-family: var(--font-body); color: var(--brand-primary);
text-transform: uppercase; letter-spacing: 0.3em; font-size: var(--fs-sm);
margin-bottom: var(--space-2);
}
.tg-detail-title { font-size: clamp(2.2rem, 7vw, 3.2rem); margin: 0 0 var(--space-4); }
.tg-detail-style { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 var(--space-4); }
.tg-detail-style-label {
font-family: var(--font-body); text-transform: uppercase;
letter-spacing: 0.15em; font-size: 0.72rem; color: var(--brand-text-soft);
}
.tg-detail-style-value { font-family: var(--font-display); font-size: 1.3rem; color: var(--brand-text); }
.tg-detail-desc { color: var(--brand-text-soft); line-height: 1.7; font-size: var(--fs-lg); margin: 0 0 var(--space-5); }
.tg-detail-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--space-5); }
.tg-detail-hint { color: var(--brand-text-soft); font-size: 0.9rem; margin-top: var(--space-3); }
/* --- Tagli simili --- */
.tg-similar { padding: var(--space-4) 0 var(--space-10); }
.tg-similar-title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: var(--space-5); }
.tg-similar-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.tg-similar-card { text-decoration: none; color: var(--brand-text); display: block; }
.tg-similar-media {
display: block; aspect-ratio: 1 / 1; overflow: hidden;
background: var(--brand-bg); border: 1px solid var(--border-strong); margin-bottom: 0.5rem;
position: relative;
}
.tg-similar-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tg-similar-card:hover .tg-similar-media img { transform: scale(1.05); }
.tg-similar-name { font-family: var(--font-display); letter-spacing: 0.04em; font-size: 1.1rem; }
.tg-similar-card:hover .tg-similar-name { color: var(--brand-primary); }
/* --- Breakpoints --- */
@media (min-width: 640px) {
.tg-grid { grid-template-columns: repeat(2, 1fr); }
.tg-similar-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
.tg-ai-grid { grid-template-columns: repeat(2, 1fr); }
.tg-ai-card--hero { grid-column: 1 / -1; }
.tg-grid { grid-template-columns: repeat(3, 1fr); }
.tg-detail-grid { grid-template-columns: 5fr 6fr; align-items: start; }
.tg-detail-info { padding-top: var(--space-4); }
}
/* ============================================================
* 8c. HOMEPAGE — sezioni animate scroll-scrub (D.9)
* hero video, trasformazione prima/dopo, in bottega,
* listino prezzi, CTA prenotazione.
*
* Progressive enhancement: di default le sezioni [data-scrub] sono
* blocchi normali alti ~100vh col video fermo sul primo frame.
* initHomeScrub() (main.js) aggiunge .scrub-on: la sezione si allunga,
* il blocco interno (.-pin) si pinna in sticky e il video avanza con
* lo scroll. Senza JS o con prefers-reduced-motion resta la versione
* statica.
*
* Temi: trasformazione e bottega seguono il tema (il video resta un
* girato scuro dentro la sua card bordata). SOLO l'hero resta scura
* anche in light: il testo poggia direttamente sul video full-bleed,
* quindi i token core vengono ri-fissati qui sotto (stesso approccio
* documentato in _brand.css).
* ============================================================ */
.hero-scrub {
--brand-primary: #C8834A;
--brand-accent: #F0E6D4;
--brand-bg: #0C0906;
--brand-text: #E8DDCC;
--brand-muted: #9B8871;
--brand-text-soft: #B3A288;
--brand-text-dim: #D8C9AE;
--brand-faint: #6F6046;
--brand-primary-12: rgba(200, 131, 74, 0.12);
--brand-primary-30: rgba(200, 131, 74, 0.30);
--brand-bg-soft: rgba(12, 9, 6, 0.85);
--surface: #14100B;
--border-subtle: #2E241A;
--border-strong: #4A3A27;
--primary-hover-bg: var(--brand-accent);
--primary-hover-text: var(--brand-bg);
background-color: var(--brand-bg);
color: var(--brand-text);
}
/* Sezioni video pinnate (trasformazione, bottega, sala AI, arcade):
struttura condivisa .scrub-* + varianti per sezione. Seguono il tema
(dark default, light "carta"): il video resta scuro nella sua card. */
.scrub-sez {
background-color: var(--brand-bg);
color: var(--brand-text);
}
/* Barra di avanzamento in cima alle sezioni pinnate */
.scrub-bar {
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: var(--brand-primary);
z-index: 5;
}
/* -------- HERO scrub -------- */
/* Il section ridefinisce .hero: niente flex qui, il layout vive nel .hero-pin.
overflow visible e' OBBLIGATORIO: l'overflow:hidden ereditato da .hero
renderebbe la sezione lo scrollport dello sticky e il pin non si
aggancerebbe mai (hero che scrolla via + 200vh di vuoto nero sotto).
Il clipping degli sfondi lo fa gia' .hero-pin. */
.hero-scrub {
display: block;
padding: 0;
min-height: 0;
overflow: visible;
}
.hero-pin {
position: relative;
min-height: calc(100vh - var(--header-h-mobile));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: var(--space-10) 0;
}
@media (min-width: 992px) {
.hero-pin {
min-height: calc(100vh - var(--header-h-desktop));
padding: var(--space-12) 0;
}
}
.hero-scrub.scrub-on {
height: 260vh;
}
.hero-scrub.scrub-on .hero-pin {
position: sticky;
top: 0;
height: 100vh;
/* svh: mai tagliare il fondo dietro la barra di Safari iOS */
height: 100svh;
min-height: 0;
}
/* Video sopra la scenografia SfondoHero (che resta visibile in caricamento) */
.hero-scrub-video,
.hero-scrub-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.hero-scrub-overlay {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
/* Scuro abbastanza da far leggere il testo sul video; il JS lo
dissolve insieme al contenuto mentre lo scrub avanza. */
background: linear-gradient(
180deg,
rgba(12, 9, 6, 0.68) 0%,
rgba(12, 9, 6, 0.45) 40%,
rgba(12, 9, 6, 0.92) 100%
);
transition: opacity 0.2s linear;
}
.hero-scrollhint {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--brand-text-soft);
font-size: 0.65rem;
letter-spacing: 0.26em;
text-transform: uppercase;
}
.hero-scrollhint-arrow {
animation: scrub-pulse 1.8s ease-in-out infinite;
}
@keyframes scrub-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
/* -------- Sezioni video pinnate: struttura condivisa -------- */
.scrub-pin {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
padding: var(--space-10) 0;
}
/* Corse scrub piu' corte: abbastanza per "sentire" il video, senza
chilometri di scroll a vuoto. */
.scrub-sez.scrub-on { height: 260vh; }
.trasforma.scrub-on { height: 300vh; }
.scrub-sez.scrub-on .scrub-pin {
position: sticky;
top: 0;
height: 100vh;
/* svh: su iOS il 100vh include la zona della barra Safari e taglia
il fondo; lo small viewport height sta sempre tutto in vista. */
height: 100svh;
min-height: 0;
padding: var(--space-6) 0;
}
.scrub-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: center;
}
/* Gli item non allargano la colonna oltre il track (grid blowout):
serve alla striscia orizzontale mobile, che deborda e trasla. */
.scrub-grid > * {
min-width: 0;
}
@media (min-width: 992px) {
.scrub-grid {
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
}
}
.scrub-eyebrow,
.listino-eyebrow,
.prenota-home-eyebrow {
color: var(--brand-primary);
font-size: var(--fs-eyebrow);
letter-spacing: 0.3em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.scrub-title,
.listino-title {
font-family: var(--font-display);
font-weight: 700;
/* mockup: clamp(32px, 4.6vw, 56px) */
font-size: var(--fs-h2);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.scrub-note {
color: var(--brand-muted);
font-size: var(--fs-sm);
line-height: 1.9;
max-width: 420px;
margin-bottom: var(--space-5);
}
/* Media col video (card bordata, stessa grammatica delle figurine) */
.scrub-media {
position: relative;
width: 100%;
overflow: hidden;
border: 1px solid var(--border-strong);
background: var(--surface);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
order: -1; /* mobile: video sopra al testo */
height: 38vh;
}
@media (min-width: 992px) {
.scrub-media {
order: 0;
height: auto;
aspect-ratio: 4 / 5;
max-height: 82vh;
}
/* Card come il mockup: 4/5 a piena colonna, video in cover.
Gli !important vincono sugli stili inline del ratio-fit JS,
che resta valido solo per la composizione mobile. */
.scrub-media[data-media-fit] {
width: 100% !important;
aspect-ratio: 4 / 5 !important;
height: auto !important;
max-height: 82vh;
}
.scrub-media[data-media-fit] video {
object-fit: cover;
/* clip 9:16 dentro cornice 4/5: crop su alto/basso, ancorato
verso l'alto per non tagliare mai la testa */
object-position: 50% 20%;
}
}
.scrub-media video,
.scrub-media canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Fallback per card senza data-media-fit: clip verticali in cornice
4/5, il crop ancorato al 30% resta centrato su viso e testa. */
object-position: 50% 30%;
pointer-events: none;
}
/* Card [data-media-fit]: letterbox di riserva sempre scuro, anche in
tema light. Su mobile il 9:16 si vede intero (contain); su desktop
vale il cover 4/5 del blocco qui sopra. */
.scrub-media[data-media-fit] {
background: #14100b;
}
@media (max-width: 991.98px) {
.scrub-media[data-media-fit] video {
object-fit: contain;
object-position: 50% 50%;
}
}
/* Video invisibili finche' senza un frame decodificato (.is-ready dal JS):
su iOS il tag