/* ============================================================================ CLESSIO LAB — DESIGN SYSTEM V2 · "EDITORIAL ARTIGIANALE" Il banco di lavoro come rivista. Footwear customizer, Davide Paoli, est. 2018. Direzione: blend Editorial/magazine + Luxury refined (anti-slop). ---------------------------------------------------------------------------- CDN da incollare in theme.liquid (NON gestiti qui): Engine (carica con defer, dopo clessio.js): ============================================================================ */ /* ---------------------------------------------------------------------------- 1. TOKENS ---------------------------------------------------------------------------- */ :root { /* — Palette 60/30/10 (vincolo brief) — */ --panna: #F4F1EA; /* 60% dominante */ --antracite: #1A1A1D; /* 30% inchiostro */ --salvia: #6B7A5E; /* 10% accento RARO */ /* Neutri caldi derivati — niente pure white/black */ --panna-deep: #EAE5DA; /* sezioni alternate, leggermente più scure */ --panna-veil: #FBF9F4; /* il quasi-bianco più chiaro ammesso */ --seam: #D8D3C7; /* cuciture / hairline 1px */ --ink-60: rgba(26, 26, 29, 0.62); /* body secondario */ --ink-38: rgba(26, 26, 29, 0.38); /* caption / credit */ --ink-14: rgba(26, 26, 29, 0.14); /* numerali contact-sheet fantasma */ --salvia-08: rgba(107, 122, 94, 0.08); /* — Famiglie tipografiche (3, con pairing vero) — */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; /* titoli serif high-contrast */ --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* corpo grotesque */ --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;/* label / codici archivio */ /* — Scala tipografica DRAMMATICA (clamp fluido, salti ~2x) — */ --t-caption: 0.6875rem; /* 11px mono, label archivio */ --t-eyebrow: 0.75rem; /* 12px mono uppercase */ --t-body: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); /* 16 → 19 */ --t-lead: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); /* 20 → 28, intro */ --t-subhead: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); /* 28 → 52 */ --t-headline: clamp(2.75rem, 1.6rem + 5.4vw, 6rem); /* 44 → 96, titoli sezione */ --t-hero: clamp(4rem, 1rem + 13vw, 10rem); /* 64 → 160, wordmark hero */ --t-numeral: clamp(5rem, 2rem + 16vw, 13rem); /* numerali contact-sheet enormi */ --lh-tight: 0.92; /* display grandi */ --lh-snug: 1.06; /* headline */ --lh-body: 1.62; /* lettura da rivista */ --track-display: -0.025em; /* tracking negativo SOLO sui display */ --track-mono: 0.16em; /* label mono spaziate */ /* — Spacing: NON multipli di 8 uniformi. Densità a salti. — */ --fit-1: 4px; /* fitto: contact-sheet, cuciture interne */ --fit-2: 8px; --fit-3: 12px; --step-1: 20px; /* ritmo medio interno */ --step-2: 32px; --step-3: 48px; --step-4: 64px; /* salto di densita' tra blocco denso e arioso (countdown -> waitlist) */ --breath-1: 72px; /* respiro tra blocchi */ --breath-2: clamp(80px, 9vw, 120px); /* respiro di sezione */ --breath-3: clamp(96px, 13vw, 160px); /* respiro ampio, "rivista" */ /* — Struttura — */ --gutter: clamp(20px, 5vw, 64px); /* margine laterale fluido */ --measure: 60ch; /* larghezza testo da rivista */ --hair: 1px; --radius: 0; /* radius 0 OVUNQUE (vincolo) */ /* — Motion: UNA lingua sola — */ --ease-clessio: cubic-bezier(0.22, 1, 0.36, 1); /* expo-out morbido */ --dur-fast: 0.32s; --dur-base: 0.6s; --dur-slow: 0.9s; } /* ---------------------------------------------------------------------------- 2. RESET / BASE ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Lenis prende il controllo dello scroll quando attivo */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--panna); color: var(--antracite); font-family: var(--font-body); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, canvas, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--salvia); color: var(--panna-veil); } /* ---------------------------------------------------------------------------- 3. TIPOGRAFIA ---------------------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 360; /* Fraunces è high-contrast: peso medio-basso = eleganza */ line-height: var(--lh-snug); letter-spacing: var(--track-display); margin: 0; font-optical-sizing: auto; } h1 { font-size: var(--t-hero); line-height: var(--lh-tight); } h2 { font-size: var(--t-headline); } h3 { font-size: var(--t-subhead); } p { margin: 0 0 var(--step-1); } p:last-child { margin-bottom: 0; } strong, b { font-weight: 600; } /* Eyebrow / label / codici — mono uppercase, MAI sul body */ .eyebrow, .archive-label { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-mono); color: var(--ink-60); margin: 0; } .archive-label { font-size: var(--t-caption); color: var(--ink-38); } .eyebrow--accent { color: var(--salvia); } .lead { font-size: var(--t-lead); line-height: 1.45; color: var(--antracite); font-weight: 350; } .caption { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.04em; color: var(--ink-38); text-transform: none; } /* Larghezza di lettura da rivista */ .measure { max-width: var(--measure); } .measure--wide { max-width: 72ch; } /* ---------------------------------------------------------------------------- 4. UTILITY EDITORIALI (il cuore del sistema) ---------------------------------------------------------------------------- */ /* Contenitore: larghezza VARIA per ruolo, non un'unica shell — */ .wrap { padding-inline: var(--gutter); } .wrap--bleed { padding-inline: 0; } /* full-bleed per image-band */ .wrap--narrow { max-width: 920px; margin-inline: auto; padding-inline: var(--gutter); } /* Sezione: respiro variabile (densità a salti) — */ .section { padding-block: var(--breath-2); } .section--air { padding-block: var(--breath-3); } /* respira */ .section--tight { padding-block: var(--breath-1); } /* più fitto */ .section--alt { background: var(--panna-deep); } /* alternanza tonale */ .section--ink { background: var(--antracite); color: var(--panna); } .section--ink .eyebrow, .section--ink .archive-label { color: rgba(244, 241, 234, 0.5); } .section--ink .caption { color: rgba(244, 241, 234, 0.42); } /* Griglia editoriale asimmetrica a 12 colonne — */ .editorial-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--step-3); align-items: start; } /* helper di campata, mobile = full poi override desktop */ .col-info { grid-column: 1 / -1; } .col-main { grid-column: 1 / -1; } .col-aside { grid-column: 1 / -1; } /* Cucitura — hairline 1px strutturale (NON un bordo card) — */ .seam { border: 0; border-top: var(--hair) solid var(--seam); margin: 0; } .seam--v { border-top: 0; border-left: var(--hair) solid var(--seam); } .section--ink .seam { border-color: rgba(244, 241, 234, 0.18); } /* Band: blocco-immagine full-bleed, NON una card — */ .band { position: relative; width: 100%; overflow: hidden; background: var(--panna-deep); } .band > img, .band > canvas { width: 100%; height: 100%; object-fit: cover; } .band__caption { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.04em; color: var(--ink-38); padding: var(--fit-3) 0 0; } /* Figura off-center — immagine deliberatamente decentrata — */ .figure-offset { position: relative; } .figure-offset img { width: 100%; } .figure-offset__note { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-38); margin-top: var(--fit-3); letter-spacing: 0.04em; } /* Numerale contact-sheet ENORME — la firma — */ .numeral { font-family: var(--font-display); font-size: var(--t-numeral); font-weight: 300; line-height: 0.86; letter-spacing: -0.03em; color: var(--antracite); display: block; } .numeral--ghost { color: var(--ink-14); } .section--ink .numeral { color: var(--panna); } .section--ink .numeral--ghost { color: rgba(244, 241, 234, 0.12); } .numeral__unit { display: block; font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-60); margin-top: var(--fit-2); } /* Placeholder asset marcato (mai dato finto, mai blob AI) — */ .placeholder { position: relative; aspect-ratio: 4 / 5; background: repeating-linear-gradient( 135deg, var(--panna-deep) 0, var(--panna-deep) 11px, var(--panna) 11px, var(--panna) 22px ); border: var(--hair) solid var(--seam); display: grid; place-items: center; } .placeholder::after { content: attr(data-label); font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-38); text-align: center; padding: 0 var(--step-1); } /* ---------------------------------------------------------------------------- 5. BADGE "IN ARRIVO" — trattamento editoriale, non LED appariscente ---------------------------------------------------------------------------- */ .status { display: inline-flex; align-items: center; gap: var(--fit-2); font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--antracite); } .status__dot { width: 6px; height: 6px; border-radius: 50%; /* unica eccezione al radius 0: è un punto, non un box */ background: var(--salvia); flex: 0 0 auto; } @media (prefers-reduced-motion: no-preference) { .status__dot { animation: clessio-pulse 2.4s var(--ease-clessio) infinite; } } @keyframes clessio-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.78); } } .section--ink .status { color: var(--panna); } /* ---------------------------------------------------------------------------- 6. BOTTONI — ghost (testo+underline) e line (1px). NESSUNA card rounded+shadow. ---------------------------------------------------------------------------- */ .btn-ghost { display: inline-block; font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--antracite); padding-bottom: var(--fit-2); position: relative; } .btn-ghost::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--hair); background: var(--antracite); transform-origin: left; transition: transform var(--dur-fast) var(--ease-clessio), background-color var(--dur-fast) var(--ease-clessio); } .btn-ghost:hover::after, .btn-ghost:focus-visible::after { background: var(--salvia); transform: scaleX(0.62); /* l'underline si ritrae, non un box hover */ } .btn-ghost:focus-visible { outline: var(--hair) solid var(--salvia); outline-offset: 6px; } .section--ink .btn-ghost { color: var(--panna); } .section--ink .btn-ghost::after { background: var(--panna); } .btn-line { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--antracite); border: var(--hair) solid var(--antracite); padding: var(--step-1) var(--step-2); background: transparent; transition: background-color var(--dur-fast) var(--ease-clessio), color var(--dur-fast) var(--ease-clessio), border-color var(--dur-fast) var(--ease-clessio); } .btn-line:hover, .btn-line:focus-visible { background: var(--antracite); color: var(--panna); } .btn-line:focus-visible { outline: var(--hair) solid var(--salvia); outline-offset: 4px; } .btn-line:disabled { opacity: 0.4; pointer-events: none; } .section--ink .btn-line { color: var(--panna); border-color: var(--panna); } .section--ink .btn-line:hover { background: var(--panna); color: var(--antracite); } /* ---------------------------------------------------------------------------- 7. FORM (waitlist) — stati reali, niente happy-path ---------------------------------------------------------------------------- */ .field { display: flex; align-items: stretch; border-bottom: var(--hair) solid var(--antracite); max-width: 480px; } .field__input { flex: 1; min-width: 0; background: transparent; border: 0; padding: var(--fit-3) 0; font-family: var(--font-body); font-size: var(--t-body); color: var(--antracite); } .field__input::placeholder { color: var(--ink-38); } .field__input:focus { outline: none; } .field:focus-within { border-color: var(--salvia); } .field__submit { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--track-mono); text-transform: uppercase; padding-left: var(--step-2); white-space: nowrap; color: var(--antracite); transition: color var(--dur-fast) var(--ease-clessio); } .field__submit:hover { color: var(--salvia); } .field__submit:disabled { opacity: 0.4; pointer-events: none; } .form-msg { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.04em; margin-top: var(--step-1); min-height: 1.2em; } .form-msg--error { color: #8a3b2e; } /* terracotta scura, non rosso puro */ .form-msg--ok { color: var(--salvia); } .is-loading .field__submit { opacity: 0.5; pointer-events: none; } .section--ink .field { border-color: var(--panna); } .section--ink .field__input { color: var(--panna); } .section--ink .field__input::placeholder { color: rgba(244, 241, 234, 0.4); } .section--ink .field__submit { color: var(--panna); } /* ---------------------------------------------------------------------------- 8. SCROLL ORIZZONTALE (editoriale) ---------------------------------------------------------------------------- */ .hscroll { position: relative; overflow: hidden; } .hscroll__track { display: flex; gap: var(--gutter); will-change: transform; } .hscroll__item { flex: 0 0 auto; width: clamp(260px, 60vw, 540px); } /* Scala variabile: i pezzi non sono tutti uguali (anti L2) */ .hscroll__item:nth-child(3n+1) { width: clamp(300px, 72vw, 640px); } .hscroll__item:nth-child(3n) { width: clamp(220px, 48vw, 420px); } /* Fallback senza GSAP: scroll-snap nativo */ .hscroll[data-fallback="snap"] .hscroll__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--step-1); } .hscroll[data-fallback="snap"] .hscroll__item { scroll-snap-align: start; } /* ---------------------------------------------------------------------------- 9. REVEAL — una sola "lingua" di motion, sobria (clip/translate piccolo) ---------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-base) var(--ease-clessio), transform var(--dur-base) var(--ease-clessio); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } /* prefers-reduced-motion: niente movimento, contenuto sempre visibile */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .status__dot { animation: none; } } /* ---------------------------------------------------------------------------- 10. RESPONSIVE — mobile-first; il desktop introduce l'asimmetria ---------------------------------------------------------------------------- */ @media (min-width: 768px) { /* Griglia editoriale: colonna-info stretta + main ampio (asimmetria) */ .col-info { grid-column: 1 / 4; } .col-main { grid-column: 4 / 13; } .col-aside { grid-column: 9 / 13; } /* varianti di asimmetria per rompere la ripetizione */ .editorial-grid--flip .col-info { grid-column: 9 / 13; order: 2; } .editorial-grid--flip .col-main { grid-column: 1 / 9; order: 1; } .seam--v { padding-left: var(--step-3); } } @media (min-width: 1100px) { .col-info { grid-column: 1 / 4; } .col-main { grid-column: 5 / 13; } /* gap di una colonna = aria */ .col-aside { grid-column: 9 / 13; } }