/* ========================================================================= Cinzià — Atelier sartoriale e creativo Design system unico — Breganzona, Ticino ========================================================================= */ /* ---------- Font faces ---------- I font sono caricati con nell' di ogni pagina, non con @import: un @import qui obbligherebbe il browser a scaricare e parsare questo file prima ancora di scoprire la richiesta ai font, creando una catena bloccante HTML → style.css → fonts.googleapis.com → file font (e rendendo inutili i preconnect). */ /* ---------- Design tokens ---------- */ :root { /* Palette — tessuto grezzo, ruggine del filo, ottone degli spilli */ --cream: #F7F1E4; --cream-2: #EFE3CC; --paper: #FFFCF5; --ink: #241E19; --ink-70: rgba(36, 30, 25, .72); /* .68 è il gradino più chiaro che regge ancora 4.5:1 sulle nostre superfici (5.6:1 su --paper, 5.4:1 su --cream): sotto, il testo secondario non passa AA. */ --ink-68: rgba(36, 30, 25, .68); --ink-35: rgba(36, 30, 25, .35); --ink-12: rgba(36, 30, 25, .12); --ink-08: rgba(36, 30, 25, .08); --rust: #B44F29; --rust-dark: #8A3A1D; --rust-light: #D97A4E; /* --gold è l'ottone decorativo: cuciture, ago, filo, bordi. Non regge 4.5:1 come testo (3.5:1 su --paper, 2.8:1 su --cream-2), quindi il testo usa --gold-text, che mantiene lo stesso calore ma passa AA ovunque. */ --gold: #A6813A; --gold-text: #755A22; --gold-light: #CDAA63; --sage: #6C7A57; --sage-dark: #515D40; /* Il salvia "da testo": sulle pezze chiare è il verde scuro, sulle scure diventa luce. Senza questo gradino il badge "Moda upcycled" restava verde scuro su velluto notte, a 2,4:1. */ --sage-text: var(--sage-dark); /* Tinte nate per il patchwork: servono più pezze di quante ne desse la palette originale, ma tutte imparentate con lei — cotone rosato dal ruggine schiarito, seta pallida dall'oro. */ --blush: #EACFBD; --blush-deep: #DFBBA3; --gold-pale: #DCC08A; /* Le tinte delle pezze scure hanno un token tutto loro, gemello di --ink e --rust-dark. Serve perché una pezza scura ridefinisce --ink in chiaro per ribaltare il testo: se la tinta leggesse --ink, la pezza si tingerebbe del proprio colore di testo e resterebbe chiara. */ --night: #241E19; --rust-deep: #8A3A1D; --white: #FFFEFB; /* Superfici funzionali */ --surface: var(--paper); --surface-alt: var(--cream-2); --border: var(--ink-12); --border-soft: var(--ink-08); /* Tipografia */ --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-hand: 'Caveat', cursive; /* Scala fluida */ --fs-hero: clamp(2.75rem, 6vw + 1.3rem, 7.5rem); --fs-h1: clamp(2.25rem, 3.4vw + 1rem, 4rem); --fs-h2: clamp(1.75rem, 2.2vw + 1rem, 2.75rem); --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.65rem); --fs-lead: clamp(1.1rem, .5vw + 1rem, 1.375rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.8125rem; /* Spaziatura */ --sp-3xs: .25rem; --sp-2xs: .5rem; --sp-xs: .75rem; --sp-sm: 1.25rem; --sp-md: 2rem; --sp-lg: 3.25rem; --sp-xl: 5rem; --sp-2xl: 7.5rem; /* Trame dei tessuti — sempre i colori della palette, ma a bassissimo alfa: il materiale è una texture *sopra* la superficie, non un colore nuovo. */ --weave-ink: rgba(36, 30, 25, .055); --weave-ink2: rgba(36, 30, 25, .085); --weave-rust: rgba(180, 79, 41, .09); --weave-gold: rgba(166, 129, 58, .11); --weave-sage: rgba(108, 122, 87, .10); /* Versioni a alfa zero: `transparent` è rgba(0,0,0,0), e in una sfumatura morbida il browser ci interpola attraverso — lasciando un alone grigio sporco. Nei passaggi netti non succede, in quelli morbidi sì. */ --weave-rust-0: rgba(180, 79, 41, 0); --weave-gold-0: rgba(166, 129, 58, 0); /* Cursore: un ago da cucito. Punta in alto a sinistra = hotspot 3 3. La variante col filo infilato marca gli elementi interattivi. */ --cursor-needle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F7F1E4%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%203%20L23.5%2020.6%20L20.6%2023.5%20Z%22%2F%3E%3Ccircle%20cx%3D%2226.6%22%20cy%3D%2226.6%22%20r%3D%223.2%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M3%203%20L23.5%2020.6%20L20.6%2023.5%20Z%22%20fill%3D%22%23241E19%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2226.6%22%20cy%3D%2226.6%22%20r%3D%223.2%22%20stroke%3D%22%23A6813A%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 3 3; --cursor-needle-thread: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F7F1E4%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%203%20L23.5%2020.6%20L20.6%2023.5%20Z%22%2F%3E%3Ccircle%20cx%3D%2226.6%22%20cy%3D%2226.6%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M28.4%2029.2%20C32.6%2030.4%2033.4%2033.6%2029.6%2035%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M3%203%20L23.5%2020.6%20L20.6%2023.5%20Z%22%20fill%3D%22%23241E19%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2226.6%22%20cy%3D%2226.6%22%20r%3D%223.2%22%20stroke%3D%22%23A6813A%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M28.4%2029.2%20C32.6%2030.4%2033.4%2033.6%2029.6%2035%22%20stroke%3D%22%23B44F29%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 3 3; --container: 1240px; --edge: clamp(1.25rem, 5vw, 3.5rem); --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --radius-pill: 999px; /* Easing su misura — nessun linear/ease di default */ --ease-expo-out: cubic-bezier(.16, 1, .3, 1); --ease-quart-out: cubic-bezier(.25, 1, .5, 1); --ease-expo-in-out: cubic-bezier(.87, 0, .13, 1); /* Nessun easing con overshoot: il rimbalzo elastico (era .34, 1.56, .64, 1) fa "molla" e invecchia male. Un overshoot attenuato non risolve, si limita a diventare impercettibile — quindi non guadagna il proprio token. Tutto decelera con expo/quart-out, come farebbe un oggetto reale. */ --dur-fast: .3s; --dur-mid: .6s; --dur-slow: 1s; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* clip (non hidden): evita lo scroll orizzontale senza creare un contenitore di scroll, così position: sticky continua a funzionare (sezione Atelier). */ overflow-x: clip; width: 100%; } /* Movimento ridotto: togliamo lo spostamento nello spazio, non il feedback. Un azzeramento globale a .01ms cancellerebbe anche i cambi di stato che *comunicano* qualcosa (focus, hover, apertura del menu), lasciando l'interfaccia muta invece che calma. Qui fermiamo i loop e i movimenti ampi, e teniamo transizioni brevi di colore/opacità come conferma. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Nessuna animazione in loop e nessuna parallasse/traslazione decorativa. */ *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* Gli elementi che entrano in scena partono già a posto, senza scorrimento. */ [data-reveal], .hero__title .line span, .hero__lead, .hero__cta { opacity: 1 !important; transform: none !important; transition: none !important; } /* Il patchwork non ha bisogno di eccezioni: è già fermo. */ .kicker.will-draw::before { transform: scaleX(1) !important; transition: none !important; } .card::after { transition-duration: .12s !important; } .thread-progress span { transition: none !important; } /* Il feedback resta, accorciato: colore, opacità e ombre sì; spostamenti no. */ .btn, .card, .footer-social a, .to-top { transition-duration: .12s !important; } .btn:hover, .card:hover, .footer-social a:hover { transform: none !important; } .btn:hover svg { transform: none !important; } .card:hover .card__icon { transform: none !important; } /* Menu e accordion si aprono subito: qui l'attesa non aggiunge nulla. */ .site-nav, .acc-item__panel { transition-duration: .01ms !important; } } body { min-height: 100%; font-family: var(--font-body); background: var(--cream); color: var(--ink); font-size: var(--fs-body); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg, picture, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ---------- Cursore: un ago da cucito ---------- Solo dove esiste davvero un puntatore: su touch il cursore non si vede e `cursor` verrebbe comunque ignorato, ma la regola resta fuori per non far scaricare due data URI a chi non li userà mai. I campi di testo tengono il loro cursore di sistema: lì la I-beam dice dove cadrà il carattere, e un ago non saprebbe dirlo. */ @media (hover: hover) and (pointer: fine) { body { cursor: var(--cursor-needle), auto; } a, button, summary, label, [role="button"], [data-magnetic], .acc-item__head, .nav-toggle, .to-top, select { cursor: var(--cursor-needle-thread), pointer; } input, textarea, [contenteditable] { cursor: text; } :disabled, [aria-disabled="true"] { cursor: not-allowed; } } ul, ol { list-style: none; padding: 0; } input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--rust); color: var(--white); } ::-moz-selection { background: var(--rust); color: var(--white); } :focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; border-radius: 3px; } /* ---------- Utility layout ---------- */ .container { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--edge); } .section { padding-block: var(--sp-xl); position: relative; } .section--tight { padding-block: var(--sp-lg); } .section--alt { background: var(--surface-alt); } .section--ink { background: var(--ink); color: var(--cream); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--cream); padding: .75rem 1.25rem; border-radius: var(--radius-sm); z-index: 999; transition: top .25s var(--ease-quart-out); } .skip-link:focus { top: 1rem; } /* ---------- Eyebrow / kicker ---------- */ .kicker { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label); /* --rust cade a 4.0:1 su --cream-2 (sezioni --alt): a 13px maiuscoletto serve --rust-dark, che tiene 6.1:1 su tutte e tre le superfici chiare. */ letter-spacing: .14em; text-transform: uppercase; color: var(--rust-dark); } /* Il trattino si allunga quando la riga entra in scena, come un filo tirato. Parte disegnato: è il JS ad aggiungere .will-draw, così senza JS il trattino c'è comunque invece di restare invisibile per sempre. */ .kicker::before { content: ''; width: 22px; height: 1.5px; background: currentColor; display: inline-block; transform-origin: left; transition: transform .7s var(--ease-expo-out) .1s; } .kicker.will-draw::before { transform: scaleX(0); } .kicker.will-draw.in-view::before { transform: scaleX(1); } .kicker--hand { font-family: var(--font-hand); font-weight: 600; font-size: 1.4rem; letter-spacing: 0; text-transform: none; color: var(--gold-text); transform: rotate(-2deg); } /* ---------- Header ---------- La barra è staccata dal bordo dello schermo: galleggia sopra la pagina come un cartellino appuntato, non come una fascia incollata in cima. */ .site-header { position: sticky; top: 0; z-index: 200; padding: clamp(.55rem, 1.3vw, 1rem) var(--edge) 0; transition: transform .45s var(--ease-quart-out); } /* Scorrendo verso il basso la barra si ritira: mentre si legge non serve. Risalendo torna subito — è lì che si cerca la navigazione. */ .site-header.is-tucked { transform: translateY(calc(-100% - 12px)); } .site-header__bar { position: relative; isolation: isolate; max-width: var(--container); margin-inline: auto; padding-inline: clamp(.9rem, 2vw, 1.5rem); display: flex; align-items: center; justify-content: space-between; padding-block: .7rem; gap: 1rem; border-radius: var(--radius-lg); /* Un bordo e un'ombra leggeri anche a riposo: senza, la barra si confonde con lo sfondo e l'aria che ha sopra sembra un errore invece di uno stacco. */ border: 1px solid var(--border-soft); box-shadow: 0 10px 26px -22px rgba(36,30,25,.5); transition: border-color var(--dur-fast) var(--ease-quart-out), box-shadow var(--dur-fast) var(--ease-quart-out); } /* Nota: il blur è applicato su ::before (non sulla barra stessa) perché backdrop-filter/filter sull'elemento creerebbe un containing block per i discendenti position:fixed (il menu mobile), intrappolandoli nell'altezza della barra invece di coprire l'intero schermo. */ .site-header__bar::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(247, 241, 228, .86); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .site-header.is-scrolled .site-header__bar { border-color: var(--border); box-shadow: 0 16px 36px -24px rgba(36,30,25,.5); } /* Su schermo stretto la barra staccata costa due margini invece di uno: senza stringerli, marchio e hamburger finiscono su due righe per una manciata di pixel. */ @media (max-width: 640px) { .site-header { padding-inline: clamp(.75rem, 3.2vw, 1.25rem); } .site-header__bar { padding-inline: .75rem; gap: .6rem; } } .brand { display: flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); } .brand__mark { width: 40px; height: 40px; flex: none; } .brand__word { font-weight: 600; } .brand__word em { font-style: italic; color: var(--rust); } .brand__tag { display: block; font-family: var(--font-body); font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-68); white-space: nowrap; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; gap: 5px; z-index: 210; position: relative; border-radius: var(--radius-sm); } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-quart-out), opacity var(--dur-fast) var(--ease-quart-out); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); background: var(--ink); color: var(--cream); transform: translateX(100%); transition: transform .55s var(--ease-expo-out); z-index: 205; display: flex; flex-direction: column; padding: 6.5rem var(--edge) var(--sp-md); overflow-y: auto; } .site-nav.is-open { transform: translateX(0); } .site-nav__list { display: flex; flex-direction: column; gap: .25rem; margin-bottom: auto; } /* Lo scostamento all'hover usa transform, non padding-left: la voce scivola sul compositor invece di forzare un reflow del menu a ogni passaggio. */ .site-nav__list a { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; padding: .5rem 0; border-bottom: 1px solid rgba(247,241,228,.12); transition: color var(--dur-fast) var(--ease-quart-out), transform var(--dur-fast) var(--ease-quart-out); } .site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a.is-active { color: var(--rust-light); transform: translateX(.5rem); } /* Sotto il puntatore, ogni voce si appoggia su una pezza di stoffa diversa: lino, saia, velluto, seta, lana, carta da modello — le stesse trame delle sezioni, in miniatura. I fili cambiano colore fra il pannello scuro del mobile e la barra chiara del desktop: la trama deve restare leggibile. */ .site-nav__list { --nav-thread: rgba(247, 241, 228, .20); --nav-thread-2: rgba(205, 170, 99, .30); --nav-bg: rgba(247, 241, 228, .07); } .site-nav__list a { position: relative; z-index: 0; } .site-nav__list a::before { content: ''; position: absolute; inset: -.1rem -.7rem; z-index: -1; border-radius: var(--radius-sm); background-color: var(--nav-bg); opacity: 0; transform: scale(.95); transition: opacity .3s var(--ease-quart-out), transform .45s var(--ease-expo-out); } .site-nav__list a:hover::before, .site-nav__list a:focus-visible::before { opacity: 1; transform: scale(1); } /* lino — tela semplice */ .site-nav__list li:nth-child(1) a::before { background-image: repeating-linear-gradient(90deg, var(--nav-thread) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, var(--nav-thread) 0 1px, transparent 1px 4px); } /* saia — la diagonale del twill */ .site-nav__list li:nth-child(2) a::before { background-image: repeating-linear-gradient(45deg, var(--nav-thread) 0 2px, transparent 2px 8px), repeating-linear-gradient(45deg, transparent 0 4px, var(--nav-thread-2) 4px 5px, transparent 5px 16px); } /* velluto — pelo verticale fitto */ .site-nav__list li:nth-child(3) a::before { background-image: repeating-linear-gradient(90deg, var(--nav-thread) 0 1px, transparent 1px 3px); } /* seta — bande di luce diagonali */ .site-nav__list li:nth-child(4) a::before { background-image: repeating-linear-gradient(115deg, transparent 0, var(--nav-thread-2) 24px, transparent 48px); } /* carta da modello — il piano quadrettato */ .site-nav__list li:nth-child(5) a::before { background-image: linear-gradient(var(--nav-thread) 1px, transparent 1px), linear-gradient(90deg, var(--nav-thread) 1px, transparent 1px); background-size: 12px 12px; } .site-nav__meta { padding-top: var(--sp-md); display: flex; flex-direction: column; gap: .9rem; } .site-nav__meta a { font-size: var(--fs-small); color: rgba(247,241,228,.75); } .site-nav__meta a:hover { color: var(--gold-light); } .site-nav__social { display: flex; gap: .9rem; padding-top: .3rem; } .site-nav__social a { width: 44px; height: 44px; border: 1px solid rgba(247,241,228,.3); border-radius: 50%; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-quart-out), border-color var(--dur-fast); } .site-nav__social a:hover { background: var(--rust); border-color: var(--rust); } .site-nav__social svg { width: 17px; height: 17px; } .nav-scrim { position: fixed; inset: 0; background: rgba(36,30,25,.45); z-index: 204; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-quart-out); } .nav-scrim.is-open { opacity: 1; pointer-events: auto; } /* Il menu orizzontale completo richiede spazio per logo + 6 voci + telefono + CTA: attiviamo il layout desktop solo da 1180px, evitando che gli elementi vadano in overflow (mascherato altrimenti da overflow-x:hidden) nella fascia laptop stretta. */ @media (min-width: 1220px) { .nav-toggle { display: none; } .site-nav { position: static; width: auto; transform: none; background: transparent; color: var(--ink); flex-direction: row; align-items: center; padding: 0; overflow: visible; } .site-nav__list { flex-direction: row; gap: 1.3rem; margin-bottom: 0; --nav-thread: rgba(36, 30, 25, .12); --nav-thread-2: rgba(166, 129, 58, .26); --nav-bg: rgba(180, 79, 41, .10); } .site-nav__list a { font-family: var(--font-body); font-size: .95rem; font-weight: 600; border-bottom: 0; padding: .3rem 0; position: relative; white-space: nowrap; } .site-nav__list a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--rust); transition: right var(--dur-fast) var(--ease-expo-out); } .site-nav__list a:hover::after, .site-nav__list a.is-active::after { right: 0; } .site-nav__list a:hover, .site-nav__list a.is-active { color: var(--rust-dark); transform: none; } .site-nav__meta { flex-direction: row; padding-top: 0; margin-left: 1.3rem; gap: .9rem; align-items: center; } .site-nav__meta a:not(.btn) { color: var(--ink-70); white-space: nowrap; } .site-nav__meta a:not(.btn):hover { color: var(--rust); } .site-nav__social { display: none; } .nav-scrim { display: none; } .site-header__bar { gap: 1.4rem; } } /* Rete di sicurezza: se anche a 1180px+ lo spazio scarseggiasse (zoom, lingue più lunghe), il contenuto va a capo invece di uscire dal viewport. */ .site-header__bar { flex-wrap: wrap; row-gap: .6rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.7rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .9rem; letter-spacing: .01em; transition: transform var(--dur-fast) var(--ease-quart-out), background var(--dur-fast) var(--ease-quart-out), color var(--dur-fast) var(--ease-quart-out), box-shadow var(--dur-fast) var(--ease-quart-out); } /* will-change solo dove serve davvero e solo mentre serve: i pulsanti magnetici seguono il mouse frame per frame. Applicarlo a tutti i .btn a riposo promuoverebbe ogni pulsante della pagina a layer composito permanente. */ @media (hover: hover) { [data-magnetic]:hover { will-change: transform; } } .btn-primary { background: var(--rust); color: var(--white); box-shadow: 0 10px 24px -12px rgba(180,79,41,.65); } .btn-primary:hover { background: var(--rust-dark); box-shadow: 0 14px 30px -12px rgba(138,58,29,.7); } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-35); } .btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); } .btn-ghost--light { color: var(--cream); border-color: rgba(247,241,228,.4); } .btn-ghost--light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } .btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-quart-out); } .btn:hover svg { transform: translate(3px, -3px); } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: var(--sp-xl); overflow: hidden; background: radial-gradient(60% 55% at 85% 8%, rgba(180,79,41,.14), transparent 60%), radial-gradient(50% 45% at 8% 92%, rgba(166,129,58,.16), transparent 60%), var(--cream); } .hero__grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: repeating-linear-gradient(115deg, rgba(36,30,25,.035) 0 1px, transparent 1px 3px); } .hero__inner { position: relative; z-index: 1; } .hero__title { font-size: var(--fs-hero); font-weight: 500; color: var(--ink); max-width: 15ch; } /* overflow: hidden serve a nascondere la riga finché non sale, ma tagliato a filo del box tronca anche le discendenti (la "g" di "ogni"). Il box viene quindi allungato sotto la linea di base e recuperato con un margine negativo: la maschera resta, le code delle lettere no. */ .hero__title .line { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.13em; } .hero__title .line span { display: inline-block; transform: translateY(135%); transition: transform 1s var(--ease-expo-out); } .hero__title em { font-style: italic; color: var(--rust); font-weight: 500; } .is-loaded .hero__title .line span { transform: translateY(0); } .hero__title .line:nth-child(1) span { transition-delay: .05s; } .hero__title .line:nth-child(2) span { transition-delay: .16s; } .hero__title .line:nth-child(3) span { transition-delay: .27s; } .hero__grid { display: grid; gap: var(--sp-lg); margin-top: var(--sp-md); align-items: stretch; } .hero__lead { margin-top: var(--sp-md); font-size: var(--fs-lead); color: var(--ink-70); max-width: 46ch; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-quart-out) .4s, transform .8s var(--ease-quart-out) .4s; } .is-loaded .hero__lead { opacity: 1; transform: translateY(0); } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--sp-md); opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-quart-out) .55s, transform .8s var(--ease-quart-out) .55s; } .is-loaded .hero__cta { opacity: 1; transform: translateY(0); } .hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem 1.25rem; margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--border); } /* Il titolo di ogni statistica sta su una riga sola: "Zero sprechi" spezzato in due leggeva come due voci diverse. La scala è tarata sulla colonna più stretta, non sulla parola più corta. */ .hero__stats .stat b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--rust); font-size: clamp(1.25rem, 1.7vw, 1.85rem); white-space: nowrap; } .hero__stats .stat span { font-size: var(--fs-small); color: var(--ink-68); } /* La cucitura verticale dell'hero taglia la pagina intera, non il solo contenitore: qui l'hero esce dal container e le due colonne diventano frazioni del viewport. Il taglio resta volutamente sbilanciato (53,5 / 46,5), ma dentro ciascuna pezza il contenuto sta al centro della *propria* metà, non appoggiato alla cucitura. */ @media (min-width: 900px) { .hero__inner { max-width: none; padding-inline: 0; } .hero__grid { grid-template-columns: 53.5% 46.5%; gap: 0; } /* Larghezza del testo invariata rispetto a prima: cambia solo dove cade, ora centrata nella sua metà invece che incollata al bordo del container. */ .hero__copy { width: min(100% - var(--edge) * 2, 36rem); margin-inline: auto; } } /* --- L'hero è pezzato in due: a sinistra il lino del discorso, a destra un riquadro di carta da modello con dentro il manichino. Il manichino è l'unica figura rimasta, e per questo è grande: era una miniatura accanto a un'illustrazione, ora è il soggetto. --- */ .hero__since { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem); } /* La pezza sfonda fino al bordo dello schermo (.hero ha overflow: hidden che la taglia lì). Nasce dal bordo sinistro della colonna, non da una percentuale del viewport: così la costura cade sempre sul giunto delle due colonne e non attraversa mai la figura. */ /* Sopra e sotto la pezza deborda largamente: .hero ha overflow: hidden e la taglia esattamente ai bordi della sezione, così la colonna di stoffa è alta quanto la pezza e non quanto il suo contenuto. */ .hero__since::before { content: ''; position: absolute; z-index: -1; top: -100vh; bottom: -100vh; left: 0; width: 100vw; background-color: var(--cream-2); background-image: linear-gradient(var(--weave-ink) 1px, transparent 1px), linear-gradient(90deg, var(--weave-ink) 1px, transparent 1px); background-size: 46px 46px; box-shadow: inset 4px 0 10px -8px rgba(36, 30, 25, .55); } .hero__since::after { content: ''; position: absolute; z-index: -1; top: -100vh; bottom: -100vh; left: 0; width: 30px; transform: translateX(-15px); background-repeat: repeat-y; background-image: linear-gradient(to bottom right, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), linear-gradient(to bottom left, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), repeating-linear-gradient(0deg, var(--thread-2) 0 10px, transparent 10px 19px); background-size: 16px 24px, 16px 24px, 2px 19px; background-position: 5px center, 5px center, 24px 7px; } /* Sul telefono il manichino esce di scena. Impilato sotto il titolo occupava quasi uno schermo intero di sola figura, e la sua vestizione — che sul desktop si guarda con la coda dell'occhio mentre si legge — diventava un ostacolo da scorrere prima di arrivare al contenuto. La pezza di carta da modello se ne va con lui: senza figura dentro sarebbe una fascia vuota, e la cucitura fra hero e servizi la disegna già .patch::before della sezione successiva. */ @media (max-width: 899px) { .hero__since { display: none; } } .hero__since-badge { background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: .85rem 1.15rem; box-shadow: 0 22px 44px -24px rgba(36,30,25,.4); opacity: 0; transform: translateY(10px) rotate(-1.5deg); } .is-loaded .hero__since-badge { animation: mn-badge .5s var(--ease-expo-out) 2.5s both; } .hero__since-badge b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--rust); } .hero__since-badge span { font-size: .75rem; color: var(--ink-68); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } @keyframes mn-badge { from { opacity: 0; transform: translateY(10px) rotate(-1.5deg); } to { opacity: 1; transform: translateY(0) rotate(-1.5deg); } } /* ========================================================================= IL MANICHINO — la vestizione al caricamento della pagina Un manichino da sartoria completo — testa, collo, anello d'ottone, busto — su cui i capi compaiono uno dopo l'altro: gonna, corpetto, cintura e bottoni, cappotto, cuciture. Tutto parte da .is-loaded (aggiunta dal JS al primo frame utile) e si chiude in ~2,5 s: una vestizione, non un loop. Nessun ago attraversa la scena: la vecchia animazione mn-run faceva entrare un ago da fuori quadro a sinistra al caricamento della home, e da lì sembrava un elemento comparso per sbaglio ai margini della pagina. ========================================================================= */ .mannequin { width: clamp(210px, 25vw, 360px); } .mannequin svg { width: 100%; height: auto; overflow: visible; } /* transform-box: fill-box su tutto il gruppo — senza, le origini si calcolerebbero sul viewBox intero e i capi crescerebbero fuori posto. */ .mannequin [class^="mn__"] { transform-box: fill-box; } .mn__shadow { fill: var(--ink); opacity: .09; } .mn__stand { fill: var(--ink); opacity: .3; } /* Il busto è un gruppo (testa, collo, torso): l'animazione sta sul gruppo, così le tre forme si vestono come un pezzo solo; le tinte stanno sui figli. Testa e collo sono il legno scuro del pomello, il torso la tela chiara del manichino: la pezza sotto è già --cream-2, e un busto dello stesso beige spariva lasciando in vista il solo filo del contorno. */ .mn__head, .mn__neck { fill: var(--ink); opacity: .8; } .mn__bust { fill: var(--paper); stroke: var(--ink-12); stroke-width: 1.2; } /* L'anello d'ottone fra collo e busto, come sui manichini da sartoria. */ .mn__ring { fill: var(--gold); } .mn__lapel { fill: var(--sage-dark); } .mn__skirt { fill: var(--rust-light); } .mn__bodice { fill: var(--rust); } .mn__belt { fill: var(--gold-text); } .mn__buckle { fill: var(--gold-light); } .mn__button { fill: var(--gold-light); } .mn__jacket { fill: var(--sage); } .mn__stitch { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 5; } .mn__stitch--hem { stroke: var(--gold-light); stroke-width: 1.6; stroke-dasharray: 3 4; } .is-loaded .mn__stand { animation: mn-fade-stand .45s var(--ease-quart-out) .05s both; } .is-loaded .mn__shadow { animation: mn-fade-shadow .45s var(--ease-quart-out) .05s both; } .is-loaded .mn__form { animation: mn-grow .6s var(--ease-expo-out) .18s both; transform-origin: bottom; } .is-loaded .mn__ring { animation: mn-pop .4s var(--ease-expo-out) .68s both; } .is-loaded .mn__skirt { animation: mn-grow .7s var(--ease-expo-out) .8s both; transform-origin: bottom; } .is-loaded .mn__bodice { animation: mn-grow .65s var(--ease-expo-out) 1.2s both; transform-origin: bottom; } .is-loaded .mn__trim { animation: mn-pop .45s var(--ease-expo-out) 1.6s both; } .is-loaded .mn__jacket--l { animation: mn-swing-l .6s var(--ease-expo-out) 1.75s both; transform-origin: top right; } .is-loaded .mn__jacket--r { animation: mn-swing-r .6s var(--ease-expo-out) 1.85s both; transform-origin: top left; } .is-loaded .mn__stitch { animation: mn-sew .7s var(--ease-quart-out) 2.15s both; } /* Senza .is-loaded (JS assente) il manichino è già vestito: nessuno stato parziale ereditato da un'animazione che non partirà mai. */ .mn__skirt, .mn__bodice, .mn__jacket, .mn__stitch, .mn__trim, .mn__ring { opacity: 1; } @keyframes mn-fade-stand { from { opacity: 0; } to { opacity: .3; } } @keyframes mn-fade-shadow { from { opacity: 0; } to { opacity: .09; } } @keyframes mn-grow { from { opacity: 0; transform: scaleY(.04); } to { opacity: 1; transform: scaleY(1); } } @keyframes mn-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } @keyframes mn-swing-l { from { opacity: 0; transform: translateX(-14px) rotate(-9deg); } to { opacity: 1; transform: none; } } @keyframes mn-swing-r { from { opacity: 0; transform: translateX(14px) rotate(9deg); } to { opacity: 1; transform: none; } } @keyframes mn-sew { from { opacity: 0; stroke-dashoffset: 60; } to { opacity: 1; stroke-dashoffset: 0; } } /* ========================================================================= IL PATCHWORK — la homepage è una trapunta Ogni sezione è una *pezza*: tinta propria, armatura propria, e una cucitura a vista che la unisce a quella sopra. Niente movimento: una trapunta sta ferma, e il piacere è vedere come i pezzi sono stati messi insieme. Tre livelli, tutti in CSS puro: .patch la pezza — colore + armatura .patch::before la cucitura sul giunto (punto a croce + punto filza) .patch::after il nome della stoffa, scritto a mano come su un cartellino .patch__piece un riquadro di stoffa affiancata, con la sua costura verticale ========================================================================= */ .patch { position: relative; background-color: var(--patch); background-image: var(--weave); background-size: var(--weave-size, auto); color: var(--ink); /* Le due stoffe si sovrappongono sul giunto: un'ombra sottile dice quale sta sopra. Senza, il passaggio legge come due colori affiancati. */ box-shadow: inset 0 4px 10px -8px rgba(36, 30, 25, .55); } /* Il contenuto sta sopra la stoffa affiancata. */ .patch > .container { position: relative; z-index: 1; } /* --- La cucitura -------------------------------------------------------- Punto a croce (×××) a cavallo del giunto e, sotto, un punto filza di rinforzo: è la cucitura più riconoscibile che esista, ed è il motivo per cui sta a cavallo e non sotto — una costura che non morde entrambe le stoffe non tiene, e si vede. Le due diagonali sono due gradienti sullo stesso riquadro: uno sale, uno scende, e insieme fanno la croce. */ .patch::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; transform: translateY(-13px); z-index: 2; pointer-events: none; background-repeat: repeat-x; background-image: linear-gradient(to top right, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), linear-gradient(to bottom right, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), repeating-linear-gradient(90deg, var(--thread-2) 0 10px, transparent 10px 19px); background-size: 24px 16px, 24px 16px, 19px 2px; background-position: center 5px, center 5px, 7px 24px; } /* La prima pezza non è cucita a niente: sopra c'è solo la testata. */ .patch--first::before { content: none; } /* --- Il cartellino della stoffa ---------------------------------------- Come le etichette che le sarte spillano sugli scampoli. Sta appeso sotto la cucitura, leggermente storto: è scritto a mano, non stampato. */ .patch::after { content: attr(data-fabric); position: absolute; left: var(--edge); top: 20px; z-index: 2; pointer-events: none; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1; color: var(--thread-text); opacity: .85; transform: rotate(-2.5deg); white-space: nowrap; } .patch--first::after { content: none; } /* --- I blocchi d'angolo ------------------------------------------------- Quello che distingue una trapunta da una pila di strisce: dentro la stessa riga convivono due pezze. Sono blocchi d'angolo — quadrotti di stoffa sorella cuciti dentro la pezza grande, come nei blocchi di una coperta. Sono alti quanto il margine superiore della sezione (--sp-xl), quindi finiscono esattamente dove comincia il testo: nessuna costura attraversa mai una riga da leggere. Il vincolo è anche la ragione della forma. */ .patch__piece { position: absolute; z-index: 0; pointer-events: none; height: min(var(--sp-xl), 100px); background-color: var(--piece); background-image: var(--piece-weave, var(--weave)); background-size: var(--weave-size, auto); } .patch__piece--tr { top: 0; right: 0; width: clamp(150px, 32%, 440px); } .patch__piece--bl { bottom: 0; left: 0; width: clamp(150px, 38%, 520px); } /* Costura verticale sul lato interno del blocco: stesso punto a croce, girato di un quarto. */ .patch__piece::before { content: ''; position: absolute; top: 0; bottom: 0; width: 30px; background-repeat: repeat-y; background-image: linear-gradient(to bottom right, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), linear-gradient(to bottom left, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), repeating-linear-gradient(0deg, var(--thread-2) 0 10px, transparent 10px 19px); background-size: 16px 24px, 16px 24px, 2px 19px; background-position: 5px center, 5px center, 24px 7px; } .patch__piece--tr::before { left: 0; transform: translateX(-15px); } .patch__piece--bl::before { right: 0; transform: translateX(15px) scaleX(-1); } /* Costura orizzontale sull'altro lato interno. */ .patch__piece::after { content: ''; position: absolute; left: 0; right: 0; height: 30px; background-repeat: repeat-x; background-image: linear-gradient(to top right, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), linear-gradient(to bottom right, transparent calc(50% - 1.3px), var(--thread) calc(50% - 1.3px), var(--thread) calc(50% + 1.3px), transparent calc(50% + 1.3px)), repeating-linear-gradient(90deg, var(--thread-2) 0 10px, transparent 10px 19px); background-size: 24px 16px, 24px 16px, 19px 2px; background-position: center 5px, center 5px, 7px 24px; } .patch__piece--tr::after { bottom: 0; transform: translateY(15px); } .patch__piece--bl::after { top: 0; transform: translateY(-15px) scaleY(-1); } /* Su schermo stretto il margine si accorcia e il blocco andrebbe a sbattere contro il titolo: fuori. Una pezza sola, cucita a quella sopra. */ @media (max-width: 719px) { .patch__piece { display: none; } } /* ========================================================================= LE STOFFE — tinta + armatura di ogni pezza Le armature sono le stesse di sempre (trame in CSS a bassissimo alfa: la superficie cambia, non il colore); le tinte vengono tutte dalla palette. Ogni pezza dichiara anche il colore del filo con cui è cucita. ========================================================================= */ /* --- Armature --- */ .w-tela { --weave: repeating-linear-gradient(90deg, var(--weave-ink) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, var(--weave-ink) 0 1px, transparent 1px 4px); } .w-saia { --weave: repeating-linear-gradient(45deg, var(--weave-ink2) 0 2px, transparent 2px 8px), repeating-linear-gradient(45deg, transparent 0 4px, var(--weave-gold) 4px 5px, transparent 5px 16px); } .w-velluto { --weave: radial-gradient(130% 75% at 50% 0%, var(--weave-rust), var(--weave-rust-0) 68%), repeating-linear-gradient(90deg, var(--weave-ink2) 0 1px, transparent 1px 3px); } .w-seta { --weave: repeating-linear-gradient(115deg, var(--weave-gold-0) 0, var(--weave-gold) 55px, var(--weave-gold-0) 110px); } .w-lana { --weave: radial-gradient(circle at 2px 2px, var(--weave-ink2) 1.1px, transparent 1.7px), radial-gradient(circle at 8px 10px, var(--weave-sage) 1.5px, transparent 2.1px); --weave-size: 13px 13px, 21px 21px; } .w-carta { --weave: linear-gradient(var(--weave-ink) 1px, transparent 1px), linear-gradient(90deg, var(--weave-ink) 1px, transparent 1px); --weave-size: 46px 46px; } /* --- Tinte chiare: filo ruggine, che si vede sul chiaro --- */ .p-lino { --patch: var(--cream); --piece: var(--cream-2); } .p-carta { --patch: var(--cream-2); --piece: var(--paper); } .p-cotone { --patch: var(--blush); --piece: var(--blush-deep);} .p-seta { --patch: var(--gold-pale); --piece: var(--gold-light); } .p-lino, .p-carta, .p-cotone, .p-seta { --thread: var(--rust); --thread-2: var(--gold); --thread-text: var(--gold-text); } /* Sull'oro il ruggine chiaro si spegne (2,6:1 — sotto qualunque soglia): sulla seta l'accento scende di un gradino e torna leggibile. */ .p-seta { --rust: #7A3016; --rust-dark: #7A3016; --gold-text: #6A4F1B; } /* --- Tinte scure: filo oro, e i token del testo si ribaltano ------------ I componenti (card, badge, bottoni, tabelle, form) leggono tutti da --ink/--border/--paper: ridefinirli qui ribalta l'intera pezza senza toccare una sola regola dei componenti. */ /* La lana è più scura del salvia di palette: a --sage-dark il testo secondario si fermava a 4,3:1, appena sotto la soglia. Un gradino di verde in meno costa nulla all'occhio e riporta la pezza a 5,3:1. */ .p-velluto { --patch: var(--night); --piece: #322A23; } .p-lana { --patch: #454F38; --piece: #59654A; } .p-ruggine { --patch: var(--rust-deep); --piece: #78311A; } .p-velluto, .p-lana, .p-ruggine { color: var(--cream); --thread: var(--gold-light); --thread-2: var(--rust-light); --thread-text: var(--gold-light); --ink: var(--cream); --ink-70: rgba(247, 241, 228, .80); --ink-68: rgba(247, 241, 228, .76); --ink-35: rgba(247, 241, 228, .52); --ink-12: rgba(247, 241, 228, .20); --ink-08: rgba(247, 241, 228, .12); --border: rgba(247, 241, 228, .22); --border-soft: rgba(247, 241, 228, .14); --paper: rgba(247, 241, 228, .07); --cream-2: rgba(247, 241, 228, .12); /* Ruggine e oro scuro sparirebbero sul fondo: sul buio l'accento è chiaro. */ --rust: var(--rust-light); /* --gold-light si ferma a 3,6:1 sulla lana: l'oro dei kicker sale di un gradino e passa AA su tutte e tre le pezze scure. */ --rust-dark: #E4CA95; --gold-text: #E4CA95; /* Le trame nate per il chiaro sono inchiostro su beige: sul buio non si vedrebbero. Qui il filo della trama è luce. */ --weave-ink: rgba(247, 241, 228, .05); --weave-ink2: rgba(247, 241, 228, .07); --weave-gold: rgba(205, 170, 99, .14); --weave-rust: rgba(217, 122, 78, .10); --weave-sage: rgba(247, 241, 228, .06); --weave-rust-0: rgba(217, 122, 78, 0); --weave-gold-0: rgba(205, 170, 99, 0); /* Il salvia dei badge sul buio: chiaro, e con la pastiglia un filo più densa per non sparire nel fondo. 8,9:1 sul velluto, 7,3:1 sulla lana. */ --sage-text: #B9C79E; --badge-bg: rgba(185, 199, 158, .16); } /* Sul ruggine anche il ruggine chiaro e l'oro restano sotto soglia (3,5:1): qui l'accento è un sabbia caldo, che sul fondo bruciato tiene 5,3:1. Va dopo il blocco condiviso, che assegna gli accenti alle pezze scure. */ .p-ruggine { --rust: #EFD3B4; --rust-dark: #EFD3B4; --gold-text: #EFD3B4; } /* Sul buio il bottone pieno tornerebbe ruggine su ruggine: si inverte. */ .p-ruggine .btn-primary { background: var(--cream); color: var(--rust-dark); box-shadow: 0 10px 24px -12px rgba(36, 30, 25, .7); } .p-ruggine .btn-primary:hover { background: var(--white); color: var(--ink); } /* Sulle pezze scure la card è una pezza più chiara di stoffa, non un foglio. */ .p-velluto .card, .p-lana .card, .p-ruggine .card { background: rgba(247, 241, 228, .07); backdrop-filter: none; } /* Le pezze scure si scrivono in chiaro anche quando la sezione porta .section--alt, che imporrebbe il beige. */ .patch.section--alt { background-color: var(--patch); } /* Cucitura semplice: separa due blocchi della *stessa* stoffa. Nessun cambio di pezza, quindi nessun punto a croce — dentro una pezza il tessuto è uno. */ .seam { display: block; width: 100%; height: 2px; margin-block: var(--sp-md); background: repeating-linear-gradient(90deg, var(--rust) 0 10px, transparent 10px 19px); } /* ---------- Filo di avanzamento ---------- Lo scroll della pagina cucito in cima: un punto filza che avanza. */ .thread-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; } .thread-progress span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--rust) 0 9px, transparent 9px 15px); transform: scaleX(var(--progress, 0)); transform-origin: left; } /* ---------- Reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-quart-out), transform .9s var(--ease-quart-out); } [data-reveal].in-view { opacity: 1; transform: translateY(0); } [data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); } /* Finché la griglia dei servizi sta su due colonne, le card entrano a coppie: una riga alla volta, non una tessera alla volta. A quattro colonne (≥960px) torna la cascata da sinistra a destra, che lì segue la lettura. */ @media (max-width: 959px) { .grid--pairs[data-reveal-group] > * { transition-delay: 0s; } .grid--pairs[data-reveal-group] > *:nth-child(n+3) { transition-delay: .14s; } } /* ---------- Section heads ---------- */ .section-head { max-width: 62ch; margin-bottom: var(--sp-lg); } .section-head h2 { font-size: var(--fs-h2); margin-top: .6rem; } .section-head p { font-size: var(--fs-lead); color: var(--ink-70); margin-top: 1rem; max-width: 54ch; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; max-width: none; } /* ---------- Cards: servizi ---------- */ .grid { display: grid; gap: var(--sp-sm); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } /* --pairs: due tessere per riga *anche* sul telefono. Incolonnate una sotto l'altra, le quattro card dei servizi erano quattro schermate di scorrimento per quattro frasi, e non se ne vedevano mai due insieme: la sezione raccontava un elenco invece di un ventaglio. A coppie si abbracciano a colpo d'occhio; sotto i 640px la card si stringe di conseguenza. Sta sulla griglia dei servizi e non su .grid--4 in generale: i valori di chi-siamo hanno un numero grande a fianco del testo, e in mezza colonna di telefono resterebbero tre parole per riga. */ .grid--pairs { grid-template-columns: repeat(2, 1fr); } @media (max-width: 639px) { .grid--pairs { gap: var(--sp-xs); } .grid--pairs .card { padding: var(--sp-sm) 1.05rem; } .grid--pairs .card__icon { width: 42px; height: 42px; margin-bottom: var(--sp-2xs); } .grid--pairs .card__icon svg { width: 21px; height: 21px; } .grid--pairs .card h3 { font-size: 1.05rem; line-height: 1.25; } .grid--pairs .card p { font-size: .875rem; } .grid--pairs .card::after { inset: 6px; } } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--sp-md); position: relative; overflow: hidden; transition: transform var(--dur-mid) var(--ease-expo-out), box-shadow var(--dur-mid) var(--ease-expo-out), border-color var(--dur-fast); height: 100%; display: flex; flex-direction: column; } .card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(36,30,25,.4); border-color: var(--border); } .card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--cream-2); display: grid; place-items: center; margin-bottom: var(--sp-sm); color: var(--rust); transition: background var(--dur-mid) var(--ease-quart-out), transform var(--dur-mid) var(--ease-expo-out); } .card:hover .card__icon { background: var(--rust); color: var(--white); transform: rotate(-8deg) scale(1.06); } /* Al passaggio del mouse la card viene imbastita: un giro di punti in oro. */ .card::after { content: ''; position: absolute; inset: 9px; border-radius: 9px; pointer-events: none; border: 1.5px dashed var(--gold); opacity: 0; transform: scale(.975); transition: opacity .35s var(--ease-quart-out), transform .5s var(--ease-expo-out); } .card:hover::after, .card:focus-within::after { opacity: .5; transform: scale(1); } .card__icon svg { width: 26px; height: 26px; } .card h3 { font-size: var(--fs-h3); margin-bottom: .6rem; } .card p { color: var(--ink-70); font-size: .95rem; flex: 1; } .card__foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--border); font-size: var(--fs-small); color: var(--gold-text); font-weight: 700; } .card--num { position: absolute; top: var(--sp-md); right: var(--sp-md); font-family: var(--font-display); font-style: italic; color: var(--ink-12); font-size: 2.4rem; } /* ---------- Swatch / palette strip decorative ---------- */ .swatchline { display: flex; gap: .4rem; margin-top: var(--sp-md); } .swatchline span { width: 34px; height: 12px; border-radius: 3px; } /* ---------- Quote / testimonial ---------- */ .quote { position: relative; padding: var(--sp-lg) 0; text-align: center; } .quote blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.4rem); max-width: 30ch; margin-inline: auto; color: var(--ink); } .quote cite { display: block; margin-top: var(--sp-sm); font-style: normal; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rust); } /* ---------- Hero figure illustration sizing ---------- */ /* La figura della sezione upcycling (non più dell'hero: lì c'è il manichino). */ .persona__figure { max-width: 380px; margin-inline: auto; } @media (min-width: 860px) { .persona__figure { max-width: none; } } /* ---------- Process / steps ---------- */ .steps { counter-reset: step; display: grid; gap: var(--sp-md); } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; padding-top: var(--sp-md); } /* Il numero è contenuto, non ornamento: --rust-light si ferma a 2.7:1 su --cream e non raggiunge nemmeno il 3:1 del testo grande. */ .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-style: italic; font-size: 2.6rem; color: var(--rust); display: block; margin-bottom: .5rem; } .step h3 { font-size: 1.15rem; margin-bottom: .4rem; } .step p { color: var(--ink-70); font-size: .95rem; } /* ---------- CTA banner ---------- */ .cta-banner { background: var(--ink); color: var(--cream); border-radius: var(--radius-lg); padding: var(--sp-lg) var(--edge); text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 90% -10%, rgba(180,79,41,.35), transparent 60%), radial-gradient(50% 60% at 5% 110%, rgba(166,129,58,.25), transparent 60%); } .cta-banner > * { position: relative; z-index: 1; } .cta-banner h2 { font-size: var(--fs-h2); max-width: 20ch; margin-inline: auto; } .cta-banner p { color: rgba(247,241,228,.75); margin-top: 1rem; max-width: 48ch; margin-inline: auto; font-size: var(--fs-lead); } .cta-banner .hero__cta { justify-content: center; margin-top: var(--sp-md); opacity: 1; transform: none; } /* ---------- Info / contact blocks ---------- */ .info-list { display: grid; gap: 1.1rem; } .info-item { display: flex; gap: 1rem; align-items: flex-start; } .info-item__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--cream-2); color: var(--rust); display: grid; place-items: center; flex: none; } .info-item__icon svg { width: 20px; height: 20px; } .info-item h3 { font-size: 1rem; margin-bottom: .2rem; } .info-item p, .info-item a { color: var(--ink-70); font-size: .95rem; } .info-item a:hover { color: var(--rust); } .hours-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .hours-table td { padding: .6rem 0; border-bottom: 1px dashed var(--border); } .hours-table td:first-child { color: var(--ink); font-weight: 700; width: 40%; } .hours-table td:last-child { color: var(--ink-70); text-align: right; } .hours-note { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-68); font-style: italic; } /* ---------- Forms ---------- */ .form-grid { display: grid; gap: 1.1rem; } @media (min-width: 640px) { .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } } .field { display: flex; flex-direction: column; gap: .45rem; } .field label { font-size: var(--fs-small); font-weight: 700; color: var(--ink); } .field input, .field textarea, .field select { background: var(--paper); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: 1rem; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-quart-out), box-shadow var(--dur-fast) var(--ease-quart-out); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--rust); box-shadow: 0 0 0 4px rgba(180,79,41,.12); outline: none; } .field textarea { resize: vertical; min-height: 130px; } .field--check { flex-direction: row; align-items: flex-start; gap: .6rem; } .field--check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--rust); } .field--check label { font-weight: 500; color: var(--ink-70); } .form-note { font-size: var(--fs-small); color: var(--ink-68); } /* Lo stato del form vive qui, non in style.color dal JS: gli hex scritti a mano nello script resterebbero indietro al primo cambio di palette. */ .form-status { font-size: var(--fs-small); font-weight: 700; margin-top: .5rem; min-height: 1.2em; } .form-status.is-error { color: var(--rust-dark); } .form-status.is-ok { color: var(--sage-dark); } /* ---------- Griglia pagina contatti (form + info) ---------- */ .contact-grid { display: grid; gap: var(--sp-lg); grid-template-columns: 1fr; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1.35fr .95fr; } } /* ---------- Map ---------- */ .map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; background: var(--cream-2); max-height: 560px; } .map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.25) sepia(.12) contrast(1.02); } /* ---------- Badges (upcycling / sostenibilità) ---------- */ .badge { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: var(--radius-pill); background: var(--badge-bg, rgba(108,122,87,.14)); color: var(--sage-text); font-size: var(--fs-small); font-weight: 700; } .badge svg { width: 14px; height: 14px; } .badge--gold { background: rgba(166,129,58,.16); color: var(--gold-text); } .badge--rust { background: rgba(180,79,41,.14); color: var(--rust-dark); } /* ---------- Page hero (interne) ---------- */ .page-hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: var(--sp-lg); background: linear-gradient(180deg, var(--cream-2), var(--cream) 85%); position: relative; } .breadcrumb { font-size: var(--fs-small); color: var(--ink-68); margin-bottom: var(--sp-sm); display: flex; gap: .4rem; align-items: center; } .breadcrumb a:hover { color: var(--rust); } .page-hero h1 { font-size: var(--fs-h1); max-width: 20ch; } .page-hero .lead { margin-top: 1.1rem; font-size: var(--fs-lead); color: var(--ink-70); max-width: 56ch; } /* ---------- Team / persona ---------- */ .persona { display: grid; gap: var(--sp-lg); align-items: center; } @media (min-width: 860px) { .persona { grid-template-columns: .8fr 1.2fr; } } .persona--rev { grid-template-columns: 1fr; } @media (min-width: 860px) { .persona--rev { grid-template-columns: 1.2fr .8fr; } .persona--rev .persona__portrait { order: 2; } } /* Impilata, la figura va in fondo. In cima faceva da muro fra il titolo della pezza e il discorso: si arrivava alla sezione e la prima cosa da scorrere era un'immagine alta uno schermo. In coda chiude il racconto, che è il suo posto naturale quando le colonne diventano una. Da 860px in su la disposizione a due colonne resta quella di prima. */ @media (max-width: 859px) { .persona--figure-last .persona__portrait, .persona--figure-last .persona__figure { order: 2; } } .feature-list { display: grid; gap: .75rem; margin-top: 1.3rem; } .feature-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-70); font-size: .96rem; } .feature-list li svg { flex: none; width: 19px; height: 19px; color: var(--rust); margin-top: .15rem; } .feature-tag { font-size: var(--fs-small); color: var(--gold-text); font-weight: 700; margin-top: 1.2rem; } .persona__portrait { position: relative; } .persona__frame { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: 0 40px 70px -40px rgba(36,30,25,.5); } .persona__frame svg { width: 100%; height: 100%; } /* Le fotografie riempiono la cornice 4/5 senza deformarsi: sono già ritagliate in quel formato, il cover è solo una rete di sicurezza per i tondi mezzi pixel. */ .persona__frame img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Segnaposto foto ---------- Dove arriverà una fotografia vera, per ora c'è un riquadro imbastito: bordo a punti d'imbastitura, trama di lino sotto e una didascalia che dice apertamente cosa manca. Un'illustrazione al suo posto sarebbe più bella ma verrebbe scambiata per la scelta definitiva. */ .photo-ph { display: grid; place-content: center; justify-items: center; gap: .75rem; padding: var(--sp-md); text-align: center; background-color: var(--cream-2); background-image: repeating-linear-gradient(90deg, var(--weave-ink) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, var(--weave-ink) 0 1px, transparent 1px 4px); box-shadow: none; border: 1px solid var(--border); } .photo-ph::after { content: ''; position: absolute; inset: 12px; border-radius: var(--radius-md); border: 1.5px dashed var(--gold); opacity: .55; pointer-events: none; } .photo-ph__icon { width: 62px; height: 62px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--rust); box-shadow: 0 14px 30px -18px rgba(36,30,25,.45); } .photo-ph__icon svg { width: 28px; height: 28px; } .photo-ph__text { font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.2; color: var(--gold-text); transform: rotate(-2deg); max-width: 22ch; } .photo-ph__note { font-size: var(--fs-small); color: var(--ink-68); max-width: 26ch; } /* Sul fondo scuro delle sezioni --alt il segnaposto resta chiaro: è una cornice vuota, non un buco nella pagina. */ .section--alt .photo-ph { background-color: var(--paper); } .persona__badge { position: absolute; bottom: -1rem; left: -1rem; background: var(--paper); border-radius: var(--radius-md); padding: 1rem 1.2rem; box-shadow: 0 20px 40px -20px rgba(36,30,25,.35); border: 1px solid var(--border-soft); } .persona__badge b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--rust); } .persona__badge span { font-size: .75rem; color: var(--ink-68); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } /* ---------- Timeline ---------- */ .timeline { position: relative; padding-left: 1.6rem; border-left: 2px dashed var(--border); display: grid; gap: var(--sp-md); } .timeline__item { position: relative; } .timeline__item::before { content: ''; position: absolute; left: -1.98rem; top: .25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--rust); border: 3px solid var(--cream); } /* Il bordo del pallino serve a staccarlo dal filo della linea: deve essere del colore della stoffa su cui sta, non sempre del beige della pagina. */ .patch .timeline__item::before { border-color: var(--patch); } /* --rust-dark e non --rust: sulle pezze scure --rust è il ruggine chiaro, che qui si ferma a 2,8:1. --rust-dark è l'accento "da testo" in entrambi i versi. */ .timeline__item b { font-family: var(--font-display); color: var(--rust-dark); font-size: 1.15rem; } .timeline__item p { color: var(--ink-70); margin-top: .3rem; font-size: .95rem; } /* ---------- Values grid ---------- */ .value { display: flex; gap: 1rem; } /* A --ink-12 il numero era ornamento invisibile (1,1:1) su qualunque pezza, e a --ink-35 restava sotto soglia sulle tinte chiare. In ottone si legge, e su una pagina di sartoria un numero d'ottone è più giusto di un grigio. */ .value__num { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--gold-text); flex: none; } .value h3 { font-size: 1.05rem; margin-bottom: .35rem; } .value p { color: var(--ink-70); font-size: .93rem; } /* ---------- FAQ / accordion (corsi) ---------- */ .accordion { border-top: 1px solid var(--border); } .acc-item { border-bottom: 1px solid var(--border); } .acc-item__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; text-align: left; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); } .acc-item__icon { flex: none; width: 26px; height: 26px; position: relative; } .acc-item__icon::before, .acc-item__icon::after { content: ''; position: absolute; background: var(--rust); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .acc-item__icon::before { width: 16px; height: 2px; } .acc-item__icon::after { width: 2px; height: 16px; transition: transform .35s var(--ease-expo-out); } /* Lo stato aperto vive su .acc-item come data-open (aria-expanded sta sul