/* 01-tokens.css */ /* ============================================================ Amarasico, gettoni. Bianco di pagina e crema di fascia sono del riferimento (un modello Shopify per cosmetica). I pastelli e gli accenti sono del materiale: l'arancio del flacone Fresia, il fucsia dell'Orchidea, l'acqua rosa della Ninfea, il giallo del Narciso, i petali sull'ammorbidente. Ogni rapporto e' calcolato, non stimato: la tabella completa sta in DESIGN.md, paragrafo 2. ============================================================ */ @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ptserif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ptserif-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/ptserif-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ptserif-bold-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- superfici ------------------------------------------------ */ --white: #FFFFFF; --cream: #F5F1E8; /* le fasce */ --cream-2: #EFE9DC; /* riempimenti piatti, chip, campi */ --ink: #161412; /* titoli, pastiglie, piede: 18,4 su bianco, 16,3 su crema */ /* --- inchiostri ------------------------------------------------ */ --text: #1F1D1A; /* 16,8 su bianco · 14,9 su crema */ --body: #5E5852; /* 7,0 su bianco · 6,2 su crema · 5,3 sul pastello peggiore */ --muted: #7A736B; /* 4,7 su bianco: solo etichette e testo grande, mai un paragrafo su crema */ --on-ink: #FFFFFF; --on-ink-2:#B9B3AB; /* 7,6 sul nero */ /* --- pastelli, dal materiale ----------------------------------- */ --fresia: #F8E2C4; /* albicocca: bucato, fruttate testo 13,4 · corpo 5,6 */ --ninfea: #F3D8E2; /* rosa: fiorite, regalo 12,6 · 5,3 */ --narciso: #F8EBC3; /* giallo: bimbi, legnose 14,1 · 5,9 */ --menta: #DCEBDD; /* foglia: casa 13,6 · 5,7 */ --cielo: #DCE7EE; /* acqua: fresche 13,4 · 5,6 */ --lilla: #E6DCEA; /* corpo, cipriate 12,6 · 5,3 */ --bar: #E4F0E1; /* la barra annunci testo 14,3 */ /* --- accenti: due gettoni, uno riempie e uno scrive ------------ */ --arancio: #E47400; /* 2,7 su crema: solo la sottolineatura a mano */ --arancio-testo: #A9540B; /* 5,3 su bianco · 4,7 su crema · 4,0 sul pastello peggiore */ --oro: #F1C27C; /* le stelle */ --oro-testo: #8A5A0F; --rosa-testo: #9B3D64; /* 4,9 sul rosa */ --verde-testo: #3E6B45; /* 5,0 sul verde */ --alert: #A33A2C; /* 6,1 su bianco */ --ok: #3E6B45; /* --- filetti ----------------------------------------------------- */ --line: #E3DDD2; /* separa e basta */ --line-ui: #8F877D; /* bordo di campi e opzioni: 3,5 su bianco · 3,1 su crema */ --focus: #A9540B; /* --- le velature sopra i filmati --------------------------------- Bianca sull'apertura (materiale chiaro, testo scuro). Sul piano sequenza il bagliore cambia colore con il capitolo: bianco dietro il testo scuro, inchiostro dietro il testo chiaro. Le densita' stanno in 04-film.css e si misurano con tools/contrasto.py. */ --veil-white: 255, 255, 255; --veil-ink: 22, 20, 18; /* --- tipografia --------------------------------------------------- */ --serif: 'PT Serif', Georgia, 'Times New Roman', serif; --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --t-h1: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); --t-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); --t-h3: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); --t-lede: clamp(1.08rem, 1rem + .35vw, 1.28rem); --t-body: 1.0625rem; --t-small: .9375rem; --t-label: .75rem; --track: .14em; /* il maiuscoletto spaziato del riferimento */ /* --- forma ---------------------------------------------------------- */ --r-pill: 999px; --r-img: 20px; --r: 12px; /* riquadri opzione, campi, schede del carrello */ --r-sm: 8px; --shadow-float: 0 18px 50px rgba(22, 20, 18, .18); /* --- ritmo ------------------------------------------------------------ */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem; --gutter: clamp(1.25rem, .6rem + 2.4vw, 3.5rem); --measure: 36rem; --page-max: 88rem; --annunci-h: 34px; --header-h: 72px; --ease: cubic-bezier(.22, .61, .36, 1); } @media (max-width: 900px) { :root { --header-h: 60px; --annunci-h: 30px; } } /* I pastelli come classi di superficie: la tessera, la scheda sul pastello della famiglia, la fascia della pagina di linea. */ .tint--fresia { --tint: var(--fresia); --tint-text: var(--arancio-testo); } .tint--ninfea { --tint: var(--ninfea); --tint-text: var(--rosa-testo); } .tint--narciso { --tint: var(--narciso); --tint-text: var(--oro-testo); } .tint--menta { --tint: var(--menta); --tint-text: var(--verde-testo); } .tint--cielo { --tint: var(--cielo); --tint-text: var(--text); } .tint--lilla { --tint: var(--lilla); --tint-text: var(--rosa-testo); } [class*='tint--'] { background: var(--tint); } /* 02-base.css */ /* ============================================================ Base: azzeramento, tipografia, pastiglie, chip, etichette. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s5)); } body { margin: 0; background: var(--white); color: var(--text); font-family: var(--sans); font-size: var(--t-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video, canvas, picture { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; } h1 { font-size: var(--t-h1); line-height: 1.04; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: 0; } p { margin: 0 0 var(--s4); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; } strong, b { font-weight: 600; } em { font-style: italic; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: var(--s3); left: var(--s3); z-index: 100; padding: var(--s2) var(--s4); background: var(--ink); color: var(--on-ink); border-radius: var(--r-pill); transform: translateY(-200%); transition: transform .2s var(--ease); } .skip-link:focus { transform: none; } .wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); } .lede { font-size: var(--t-lede); line-height: 1.5; color: var(--body); text-wrap: pretty; } .prose { max-width: var(--measure); color: var(--body); } .prose h2, .prose h3 { color: var(--text); margin: var(--s6) 0 var(--s3); } .prose strong { color: var(--text); } .todo { color: var(--alert); text-decoration: underline dotted var(--alert); text-underline-offset: .2em; } /* La parola con la sottolineatura a mano in oro: il gesto del riferimento sotto «Natural». E' un tratto SVG un po' storto, arancio Fresia, che sta sotto e non tocca le lettere. */ .ul { position: relative; white-space: nowrap; } .ul::after { content: ''; position: absolute; left: -.04em; right: -.04em; bottom: -.16em; height: .22em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-6 80-8 120-6 30 1 50 3 74 7M20 15c30-2 60-3 90-2' fill='none' stroke='%23E47400' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; pointer-events: none; } /* ------------------------------------------------------------ L'etichetta: maiuscoletto spaziato sopra il titolo, come nel riferimento («Empower Your Skin care»). ------------------------------------------------------------ */ .label { display: block; margin: 0 0 var(--s4); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); } /* ------------------------------------------------------------ La pastiglia. Nera con il testo bianco in maiuscoletto spaziato; bianca sui fondi tinti; a contorno come secondaria. ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1em 1.9em; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font: inherit; font-size: .78rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .btn:hover { background: #2B2825; } .btn--white { background: var(--white); color: var(--ink); } .btn--white:hover { background: var(--cream); } .btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-ui); } .btn--ghost:hover { background: var(--cream-2); } .btn--wide { width: 100%; } .btn--sm { padding: .75em 1.3em; font-size: .72rem; } .btn--wa { background: #0E7A6D; } /* bianco a 5,2:1 */ .btn--wa:hover { background: #0A6459; } .wa-ico { width: 1.2em; height: 1.2em; display: inline-block; } .wa-ico svg { width: 100%; height: 100%; } .actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } /* Il collegamento sottolineato in maiuscoletto («VIEW ALL»). */ .more { display: inline-block; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: .2em; } .more:hover { border-bottom-width: 2px; } /* La chip pastello: «Novita'», le famiglie olfattive. */ .chip { display: inline-flex; align-items: center; padding: .3em .75em; border-radius: var(--r-pill); background: var(--cream-2); color: var(--text); font-size: .72rem; font-weight: 500; line-height: 1.3; white-space: nowrap; } .chip--fresia { background: var(--fresia); } .chip--ninfea { background: var(--ninfea); } .chip--narciso { background: var(--narciso); } .chip--menta { background: var(--menta); } .chip--cielo { background: var(--cielo); } .chip--lilla { background: var(--lilla); } /* Il tondino numerato a bordo sottile con il numerale in serif. */ .ring { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; line-height: 1; } .ring b { font-weight: 400; } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cream-2); } .dot--fresia { background: var(--fresia); } .dot--ninfea { background: var(--ninfea); } .dot--narciso { background: var(--narciso); } .dot--menta { background: var(--menta); } .dot--cielo { background: var(--cielo); } .dot--lilla { background: var(--lilla); } /* Le fisarmoniche con il «+» che ruota. */ .qa { border-top: 1px solid var(--line); } .qa:last-of-type { border-bottom: 1px solid var(--line); } .qa summary { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s4); cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.1rem; } .qa summary::-webkit-details-marker { display: none; } .qa summary span { flex: 1; } .qa summary i { position: relative; flex: none; width: 18px; height: 18px; } .qa summary i::before, .qa summary i::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--ink); transform: translateY(-50%); } .qa summary i::after { transform: translateY(-50%) rotate(90deg); transition: transform .24s var(--ease); } .qa[open] summary i::after { transform: translateY(-50%) rotate(0); } .qa-body { padding-bottom: var(--s5); color: var(--body); max-width: 56ch; } /* Entrate in scena, dietro `.js`: senza JavaScript la pagina resta visibile. Tre reti in app.js: l'osservatore, il controllo su cio' che e' gia' in vista, la scadenza a 2,5 s. */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .42s var(--ease), transform .42s var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 03-layout.css */ /* ============================================================ Impaginato: barra annunci, testata, menu, fasce, piede. ============================================================ */ .section { padding-block: clamp(3.25rem, 1.6rem + 5.2vw, 6.5rem); } .section--tight { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem); } .band-cream { background: var(--cream); } .band-white { background: var(--white); } .band-cream + .band-cream { padding-top: 0; } .section-head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); } .section-head .lede { margin-top: var(--s4); } .section-head .more { margin-top: var(--s4); } .section-head--left { margin-inline: 0; text-align: left; } /* ------------------------------------------------------------ La barra annunci: verde foglia, tre fatti veri che scorrono. Si ferma con movimento ridotto e sotto il puntatore. ------------------------------------------------------------ */ .annunci { height: var(--annunci-h); overflow: hidden; background: var(--bar); color: var(--text); font-size: .78rem; font-weight: 500; letter-spacing: .02em; display: flex; align-items: center; } .annunci-track { display: flex; gap: 0; white-space: nowrap; animation: scorri 40s linear infinite; } .annunci-track span { padding-inline: 2.2rem; position: relative; } .annunci-track span::after { content: ''; position: absolute; right: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--verde-testo); transform: translateY(-50%); } .annunci:hover .annunci-track { animation-play-state: paused; } @keyframes scorri { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .annunci-track { animation: none; } } /* ------------------------------------------------------------ La testata: menu a sinistra come parole, marchio al centro, a destra lingua, ricerca, carrello. E' piena e appiccicata. ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); padding-inline: var(--gutter); background: var(--white); border-bottom: 1px solid var(--line); } .hd-left { display: flex; align-items: center; gap: var(--s5); } .hd-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); } .site-brand img { width: 150px; height: 50px; } @media (max-width: 900px) { .site-brand img { width: 120px; height: 40px; } } .nav-main ul { display: flex; gap: var(--s5); } .nav-link { position: relative; padding-block: .4em; color: var(--text); font-size: var(--t-small); font-weight: 500; text-decoration: none; white-space: nowrap; } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); } .nav-link:hover::after, .nav-link[aria-current='page']::after { transform: none; } .menu-toggle { display: inline-flex; align-items: center; gap: .6em; color: var(--text); text-decoration: none; font-size: var(--t-small); font-weight: 500; } .menu-bars { display: grid; gap: 5px; width: 20px; } .menu-bars span { display: block; height: 1.5px; background: currentColor; } .hd-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); position: relative; } .hd-ico svg { width: 22px; height: 22px; } .hd-ico:hover { background: var(--cream-2); } .cart-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: .68rem; font-weight: 600; line-height: 18px; text-align: center; } .cart-count[hidden] { display: none; } .lang-switch { display: inline-grid; place-items: center; min-width: 2.4em; height: 2.4em; padding-inline: .5em; border-radius: var(--r-pill); color: var(--text); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-decoration: none; } .lang-switch:hover { background: var(--cream-2); } @media (max-width: 1100px) { .nav-main { display: none; } .menu-word { display: none; } } @media (max-width: 420px) { :root { --gutter: 1rem; } .lang-switch { display: none; } } /* ------------------------------------------------------------ Il menu a tutto schermo. Si apre con :target prima che arrivi il JavaScript. ------------------------------------------------------------ */ .site-menu { position: fixed; inset: 0; z-index: 60; background: var(--cream); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s; } .site-menu:target, .site-menu.is-open { opacity: 1; visibility: visible; } html.menu-open { overflow: hidden; } .menu-inner { display: flex; flex-direction: column; gap: var(--s7); min-height: 100%; max-width: var(--page-max); margin-inline: auto; padding: calc(var(--header-h) + var(--s6)) var(--gutter) var(--s7); } .menu-close { position: absolute; top: var(--s4); right: var(--gutter); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.6rem; line-height: 1; text-decoration: none; } .menu-list { display: grid; gap: 0; max-width: 40rem; } .menu-list li + li { border-top: 1px solid var(--line); } .menu-list a { display: grid; gap: 2px; padding-block: var(--s4); text-decoration: none; color: var(--text); } .menu-list span { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.1; } .menu-list small { color: var(--body); font-size: var(--t-small); } .menu-list a:hover span, .menu-list a[aria-current='page'] span { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; } .menu-foot { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin-top: auto; padding-top: var(--s6); border-top: 1px solid var(--line); } .menu-langs { display: flex; gap: var(--s3); margin-inline-start: auto; } .menu-langs a { padding: .45em .95em; border-radius: var(--r-pill); background: var(--white); color: var(--text); font-size: var(--t-small); text-decoration: none; } .menu-langs a[aria-current='true'] { background: var(--ink); color: var(--on-ink); } /* ------------------------------------------------------------ Il piede: nero, con la parola gigante in serif. ------------------------------------------------------------ */ .site-footer { background: var(--ink); color: var(--on-ink-2); overflow: hidden; } .ft-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); padding-block: var(--s8) var(--s6); } .ft-col h2 { font-size: 1.25rem; color: var(--on-ink); margin-bottom: var(--s4); } .ft-col li + li { margin-top: var(--s2); } .ft-col a { color: var(--on-ink-2); text-decoration: none; font-size: var(--t-small); } .ft-col a:hover { color: var(--on-ink); text-decoration: underline; } .ft-col li { font-size: var(--t-small); } .ft-social { display: flex; gap: var(--s4); margin-top: var(--s4); } .ft-social li + li { margin-top: 0; } .ft-word { margin: 0; padding: .1em var(--gutter) .12em; font-family: var(--serif); font-size: clamp(5rem, 21vw, 21rem); line-height: .8; letter-spacing: -.03em; color: var(--on-ink); white-space: nowrap; text-align: center; overflow: hidden; } .ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); padding-block: var(--s5) var(--s6); border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8rem; } .ft-legal p { margin: 0; max-width: 60ch; } .ft-copy { display: flex; flex-wrap: wrap; gap: var(--s4); } .ft-copy a { color: var(--on-ink-2); } @media (max-width: 900px) { .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .ft-top { grid-template-columns: 1fr; } } /* 04-film.css */ /* ============================================================ I due filmati. L'APERTURA riproduce e basta: quattro inquadrature di prodotto, flacone al centro. Il materiale e' chiaro (luminanza media 0,416, p95 0,789) e la riga alta e' l'unica calma: il testo e' scuro, sta in alto e al centro come nel riferimento, e sotto ha una lavata BIANCA piatta che si spegne entro il 46%. IL PIANO SEQUENZA si scrubba: sette capitoli, ognuno con la scheda del prodotto che si vede. Le didascalie stanno in alto e cambiano lato e colore per capitolo, con un bagliore ellittico dietro (mai una fascia): bianco dietro il testo scuro, inchiostro dietro il testo chiaro. Le densita' si misurano con tools/contrasto.py. ============================================================ */ /* ------------------------------------------------------------ L'apertura. ------------------------------------------------------------ */ .videohero { position: relative; height: calc(100svh - var(--header-h) - var(--annunci-h)); min-height: 34rem; max-height: 62rem; overflow: hidden; background: var(--cream); isolation: isolate; } .vh-stage { position: absolute; inset: 0; } .vh-poster, .vh-poster img, .vh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } .vh-poster { z-index: 0; } .vh-video { z-index: 1; } /* La lavata arriva al 64% e non al 48%: il sommario sta fra il 41 e il 54% del palco, e sotto il 48 leggeva 1,60:1 sull'etichetta del flacone (misurato con tools/contrasto.py, prima 7,4 sul titolo e 1,6 sul sommario). Piatta a 0,66 fino al 44%, poi in caduta. */ .vh-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--veil-white), .66) 0%, rgba(var(--veil-white), .66) 44%, rgba(var(--veil-white), .40) 55%, rgba(var(--veil-white), 0) 64%); } .vh-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); max-width: var(--page-max); margin-inline: auto; padding: clamp(2rem, 1rem + 4vh, 4rem) var(--gutter) 0; } .vh-kicker { margin: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--text); } .vh-inner h1 { font-size: clamp(3rem, 1.6rem + 6vw, 6.6rem); max-width: 14ch; } .vh-sub { max-width: 40ch; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--text); margin: 0; } .vh-inner .actions { justify-content: center; margin-top: var(--s2); } .vh-down { position: absolute; z-index: 3; left: 50%; bottom: var(--s5); width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .78); } .vh-down span { width: 10px; height: 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-2px) rotate(45deg); animation: nudge 2.6s var(--ease) infinite; } @keyframes nudge { 0%, 72%, 100% { transform: translateY(-2px) rotate(45deg); } 84% { transform: translateY(2px) rotate(45deg); } } @media (max-width: 700px) { .vh-inner .btn--white { display: none; } .vh-veil { background: linear-gradient(to bottom, rgba(var(--veil-white), .68) 0%, rgba(var(--veil-white), .68) 34%, rgba(var(--veil-white), .30) 46%, rgba(var(--veil-white), 0) 56%); } } /* ------------------------------------------------------------ Il piano sequenza. L'altezza della sezione E' la velocita' dello scrub: 1300vh a 900 px fanno 22 px per fotogramma; il telefono ne vuole di piu' (1700vh), perche' una scorsa col dito copre molta piu' distanza di una tacca di rotellina. ------------------------------------------------------------ */ .scrolly { position: relative; height: calc(var(--seq-vh, 1300) * 1vh); background: var(--cream); } @media (max-width: 900px) { .scrolly { height: calc(var(--seq-vh-narrow, 1700) * 1vh); } } .scrolly-stage { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; } .scrolly-canvas, .scrolly-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; } .scrolly-poster img { width: 100%; height: 100%; object-fit: cover; } [data-painted='true'] .scrolly-poster { opacity: 0; } /* Nessuna velatura piena: il bagliore sta dietro ogni blocco. Il velo resta nel DOM per il contratto, ma e' vuoto. */ .scrolly-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* Il manifesto e le didascalie stanno nello stesso strato, in alto, e il lato lo decide `data-side`. */ .scrolly-lead, .scrolly-phase { position: absolute; z-index: 3; top: clamp(1.5rem, 3vh, 3rem); left: var(--gutter); right: var(--gutter); pointer-events: none; } /* Solo la didascalia del capitolo ACCESO riceve i clic. Le altre sei stanno nello stesso punto, a opacita' zero, e con `auto` su tutte era l'ultima nel DOM a prendersi il «+» del prodotto: si cliccava sulla scheda del capitolo 1 e rispondeva l'invisibile del 7, cioe' nessuno. Il motore mette `is-active` sopra meta' dissolvenza. */ .scrolly-lead .cap, .scrolly-phase .cap { pointer-events: none; } .scrolly-phase.is-active .cap { pointer-events: auto; } [data-mode='static'] .scrolly-phase .cap, [data-mode='static'] .scrolly-lead .cap { pointer-events: auto; } .cap { position: relative; max-width: min(46%, 26rem); } [data-side='right'] .cap { margin-left: auto; text-align: left; } @media (max-width: 760px) { .cap { max-width: 100%; } [data-side='right'] .cap { margin-left: 0; } } /* Sul telefono la didascalia va a tutta larghezza e `cover` tiene la fetta centrale del fotogramma: nel capitolo 6 e' la finestra al tramonto, e l'occhiello bianco leggeva 2,97:1 con il bagliore a 0,82. E' un altro strumento, non lo stesso alzato: qui il bagliore scuro sale a 0,92 e si allarga in alto. Misurato. */ @media (max-width: 760px) { .cap::before { inset: -34% -12%; } [data-tone='light'] .cap::before { background: rgba(var(--veil-ink), .92); } } /* IL BAGLIORE. Un'ellisse dietro il blocco, grande quanto il blocco piu' un margine. Bianco dietro il testo scuro, inchiostro dietro il testo chiaro. La densita' e' la stessa dappertutto e la decide la misura (DESIGN.md, paragrafo 7). */ /* Il margine dell'ellisse e' piu' largo sopra e sotto (-26%) che ai lati (-16%): l'occhiello sta sul bordo alto del blocco, e con -18% ci arrivava a 0,66 di densita' invece di 0,82. Misurato. */ .cap::before { content: ''; position: absolute; inset: -26% -16%; z-index: -1; border-radius: 50%; filter: blur(22px); pointer-events: none; } [data-tone='dark'] .cap::before { background: rgba(var(--veil-white), .84); } [data-tone='light'] .cap::before { background: rgba(var(--veil-ink), .82); } [data-tone='dark'] .cap { color: var(--text); } [data-tone='light'] .cap { color: var(--on-ink); } [data-tone='light'] .cap .label, [data-tone='light'] .cap-kicker, [data-tone='light'] .lead-text, [data-tone='light'] .cap-text, [data-tone='light'] .lead-hint { color: var(--on-ink); } .scrolly-lead .label { color: var(--text); margin-bottom: var(--s3); } .lead-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); margin-bottom: var(--s3); max-width: 14ch; } .lead-text { max-width: 34ch; color: var(--text); margin-bottom: var(--s4); } .lead-hint { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--text); margin: 0; } .lead-hint span { width: 20px; height: 32px; border: 1.5px solid currentColor; border-radius: 10px; position: relative; flex: none; } .lead-hint span::after { content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: currentColor; animation: scrollcue 1.9s var(--ease) infinite; } @keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(10px); opacity: .2; } } .scrolly-phase { opacity: 0; } .cap-kicker { margin: 0 0 var(--s2); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--text); } .cap-kicker i { font-style: normal; opacity: .6; } .cap-title { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-bottom: var(--s2); } .cap-text { max-width: 34ch; margin-bottom: var(--s4); color: var(--text); } /* LA SCHEDA CHE GALLEGGIA: entra inclinata dal lato e si raddrizza, che e' il gesto delle fotografie del riferimento. Il motore scrive opacity e transform sulla FASE, non sulla scheda: qui si e' liberi. */ .cap-prods { display: grid; gap: var(--s2); } .mini { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--s2); background: var(--white); color: var(--text); border-radius: var(--r); box-shadow: var(--shadow-float); } .mini-media { width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; background: var(--white); } .mini-media img { width: 100%; height: 100%; object-fit: cover; } .mini-body { display: grid; gap: 1px; min-width: 0; } .mini-name { font-size: var(--t-small); font-weight: 500; text-decoration: none; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-name:hover { text-decoration: underline; } .mini-meta { font-size: var(--t-label); color: var(--body); } .mini-add { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--on-ink); text-decoration: none; font-size: 1.2rem; line-height: 1; } .mini-add:hover { background: #2B2825; } /* La scheda arriva dal lato e VA A FUOCO: sfocata e un filo piu' piccola, poi nitida. Era inclinata, ma le polaroid inclinate sono il gesto del sito precedente (registro), e la messa a fuoco e' un attributo di macchina fotografica che nessun sito della serie usa. */ .js .scrolly[data-mode='scrub'] .mini { opacity: 0; transform: translateX(-18px) scale(.96); filter: blur(6px); transform-origin: left center; transition: opacity .5s var(--ease), transform .55s var(--ease), filter .55s var(--ease); } .js .scrolly[data-mode='scrub'] [data-side='right'] .mini { transform: translateX(18px) scale(.96); transform-origin: right center; } .js .scrolly[data-mode='scrub'] .scrolly-phase.is-active .mini { opacity: 1; transform: none; filter: none; } .js .scrolly[data-mode='scrub'] .scrolly-phase.is-active .mini:nth-child(2) { transition-delay: .12s; } /* I SETTE TONDINI: l'avanzamento. Quello in corso e' pieno d'inchiostro, i passati si riempiono del pastello della famiglia. */ .rings { position: absolute; z-index: 4; left: var(--gutter); bottom: clamp(1.2rem, 2.6vh, 2.2rem); display: flex; gap: 8px; pointer-events: none; } .rings .ring { width: 32px; height: 32px; font-size: .95rem; background: rgba(255, 255, 255, .72); border-color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease); } .ring.is-on { background: var(--ink); color: var(--on-ink); } .ring.is-past.ring--fresia { background: var(--fresia); } .ring.is-past.ring--ninfea { background: var(--ninfea); } .ring.is-past.ring--narciso { background: var(--narciso); } .ring.is-past.ring--menta { background: var(--menta); } .ring.is-past.ring--cielo { background: var(--cielo); } .ring.is-past.ring--lilla { background: var(--lilla); } @media (max-width: 760px) { .rings .ring { width: 26px; height: 26px; font-size: .8rem; } } /* La barra del motore resta nel DOM ma invisibile: i tondini dicono la stessa cosa. */ .scrolly-progress { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* ------------------------------------------------------------ Il ripiego senza JavaScript. `data-mode="static"` e' quello che parte nell'HTML; il motore promuove. La sezione e' una colonna editoriale: sette capitoli con il proprio fermo immagine, che stanno GIA' nel markup. ------------------------------------------------------------ */ .scrolly[data-mode='static'] { height: auto; background: var(--white); } [data-mode='static'] .scrolly-stage { position: static; height: auto; overflow: visible; } [data-mode='static'] .scrolly-canvas, [data-mode='static'] .scrolly-veil, [data-mode='static'] .rings { display: none; } [data-mode='static'] .scrolly-poster { position: relative; height: clamp(320px, 56svh, 620px); } [data-mode='static'] .scrolly-lead { position: relative; top: auto; left: auto; right: auto; max-width: var(--page-max); margin: var(--s7) auto 0; padding-inline: var(--gutter); } [data-mode='static'] .scrolly-phase { position: relative; top: auto; left: auto; right: auto; opacity: 1; max-width: var(--page-max); margin: var(--s7) auto 0; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s5); align-items: start; } [data-mode='static'] .cap { max-width: none; color: var(--text); } [data-mode='static'] .cap::before { display: none; } [data-mode='static'] .cap-kicker, [data-mode='static'] .cap-text, [data-mode='static'] .lead-text { color: var(--body); } [data-mode='static'] .lead-hint { display: none; } [data-mode='static'] .mini { box-shadow: none; border: 1px solid var(--line); } [data-mode='static'] .scrolly-still { margin: 0; } [data-mode='static'] .scrolly-still img { width: 100%; height: auto; border-radius: var(--r-img); } @media (max-width: 760px) { [data-mode='static'] .scrolly-phase { grid-template-columns: 1fr; } } [data-mode='scrub'] .scrolly-still { display: none; } /* Lo stato dei tondini lo porta `:has()` sulla fase attiva, senza JavaScript in piu': in corso pieno d'inchiostro, passati nel pastello della famiglia. */ .scrolly-stage:has(.scrolly-phase:nth-of-type(1).is-active) .ring[data-i='1'], .scrolly-stage:has(.scrolly-phase:nth-of-type(2).is-active) .ring[data-i='2'], .scrolly-stage:has(.scrolly-phase:nth-of-type(3).is-active) .ring[data-i='3'], .scrolly-stage:has(.scrolly-phase:nth-of-type(4).is-active) .ring[data-i='4'], .scrolly-stage:has(.scrolly-phase:nth-of-type(5).is-active) .ring[data-i='5'], .scrolly-stage:has(.scrolly-phase:nth-of-type(6).is-active) .ring[data-i='6'], .scrolly-stage:has(.scrolly-phase:nth-of-type(7).is-active) .ring[data-i='7'] { background: var(--ink); color: var(--on-ink); } .scrolly-stage:has(.scrolly-phase:nth-of-type(2).is-active) .ring[data-i='1'], .scrolly-stage:has(.scrolly-phase:nth-of-type(3).is-active) :is(.ring[data-i='1'], .ring[data-i='2']), .scrolly-stage:has(.scrolly-phase:nth-of-type(4).is-active) :is(.ring[data-i='1'], .ring[data-i='2'], .ring[data-i='3']), .scrolly-stage:has(.scrolly-phase:nth-of-type(5).is-active) :is(.ring[data-i='1'], .ring[data-i='2'], .ring[data-i='3'], .ring[data-i='4']), .scrolly-stage:has(.scrolly-phase:nth-of-type(6).is-active) :is(.ring[data-i='1'], .ring[data-i='2'], .ring[data-i='3'], .ring[data-i='4'], .ring[data-i='5']), .scrolly-stage:has(.scrolly-phase:nth-of-type(7).is-active) :is(.ring[data-i='1'], .ring[data-i='2'], .ring[data-i='3'], .ring[data-i='4'], .ring[data-i='5'], .ring[data-i='6']) { border-color: transparent; } .scrolly-stage:has(.scrolly-phase:nth-of-type(n+2).is-active) .ring--fresia[data-i='1'] { background: var(--fresia); } .scrolly-stage:has(.scrolly-phase:nth-of-type(n+3).is-active) .ring--fresia[data-i='2'] { background: var(--fresia); } .scrolly-stage:has(.scrolly-phase:nth-of-type(n+4).is-active) .ring[data-i='3'] { background: var(--fresia); } .scrolly-stage:has(.scrolly-phase:nth-of-type(n+5).is-active) .ring[data-i='4'] { background: var(--fresia); } .scrolly-stage:has(.scrolly-phase:nth-of-type(n+6).is-active) .ring[data-i='5'] { background: var(--ninfea); } .scrolly-stage:has(.scrolly-phase:nth-of-type(n+7).is-active) .ring[data-i='6'] { background: var(--ninfea); } /* 05-blocks.css */ /* ============================================================ I blocchi. Tre regole: nessuna ombra tranne cio' che galleggia, nessun bordo sulle schede, e la separazione la fa la fascia. ============================================================ */ /* La dichiarazione con i tondini fotografici. */ .statement .wrap { text-align: center; } .statement .label { margin-bottom: var(--s5); } .st-text { margin: 0 auto; max-width: 30ch; font-family: var(--serif); font-size: clamp(1.7rem, 1rem + 2.9vw, 3.4rem); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; } .st-img { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .12em; border-radius: 50%; overflow: hidden; vertical-align: -.22em; background: var(--cream-2); } .st-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } .statement .actions { justify-content: center; margin-top: var(--s6); } /* Le tessere di collezione: accostate senza spazio. */ .tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .tessera { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; min-height: 30rem; padding: var(--s6) var(--s4) var(--s6); text-decoration: none; color: var(--text); overflow: hidden; } .tessera-media { display: block; width: min(72%, 300px); aspect-ratio: 1; margin-block: auto; } .tessera-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease); } .tessera:hover .tessera-media img { transform: scale(1.04); } .tessera-body { display: grid; justify-items: center; gap: var(--s2); } .tessera-title { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.1; } .tessera-sub { font-size: var(--t-small); color: var(--body); max-width: 26ch; } .tessera .btn { margin-top: var(--s3); } @media (max-width: 900px) { .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tessera { min-height: 24rem; } } @media (max-width: 480px) { .tessere { grid-template-columns: 1fr; } } /* Le linguette: radio + CSS. */ .tabs { position: relative; } .tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tabs-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin-bottom: var(--s6); } .tabs-bar label { cursor: pointer; padding-block: .35em; font-size: var(--t-small); font-weight: 500; color: var(--body); border-bottom: 1.5px solid transparent; } .tabs-bar label:hover { color: var(--text); } .tabs-pane { display: none; } .tabs > input:nth-of-type(1):checked ~ .tabs-pane[data-pane='0'], .tabs > input:nth-of-type(2):checked ~ .tabs-pane[data-pane='1'], .tabs > input:nth-of-type(3):checked ~ .tabs-pane[data-pane='2'], .tabs > input:nth-of-type(4):checked ~ .tabs-pane[data-pane='3'], .tabs > input:nth-of-type(5):checked ~ .tabs-pane[data-pane='4'], .tabs > input:nth-of-type(6):checked ~ .tabs-pane[data-pane='5'] { display: block; } .tabs > input:nth-of-type(1):checked ~ .tabs-bar label:nth-child(1), .tabs > input:nth-of-type(2):checked ~ .tabs-bar label:nth-child(2), .tabs > input:nth-of-type(3):checked ~ .tabs-bar label:nth-child(3), .tabs > input:nth-of-type(4):checked ~ .tabs-bar label:nth-child(4), .tabs > input:nth-of-type(5):checked ~ .tabs-bar label:nth-child(5), .tabs > input:nth-of-type(6):checked ~ .tabs-bar label:nth-child(6) { color: var(--text); border-bottom-color: var(--ink); } .tabs > input:focus-visible ~ .tabs-bar { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; } .tabs--chips .tabs-bar { gap: var(--s2); } .tabs--chips .tabs-bar label { border: 1px solid transparent; padding: .45em 1em; font-size: .8rem; color: var(--text); } .tabs--chips > input:nth-of-type(1):checked ~ .tabs-bar label:nth-child(1), .tabs--chips > input:nth-of-type(2):checked ~ .tabs-bar label:nth-child(2), .tabs--chips > input:nth-of-type(3):checked ~ .tabs-bar label:nth-child(3), .tabs--chips > input:nth-of-type(4):checked ~ .tabs-bar label:nth-child(4), .tabs--chips > input:nth-of-type(5):checked ~ .tabs-bar label:nth-child(5) { border-color: var(--ink); border-bottom-color: var(--ink); } .fam-intro { max-width: 52ch; margin: 0 auto var(--s6); text-align: center; color: var(--body); } /* Il blocco firma: diciassette centesimi. */ .dose { background: var(--cream); } .dose-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; } .dose-side h2 { margin-bottom: var(--s4); max-width: 14ch; } .dose-note { margin-top: var(--s4); font-size: var(--t-small); color: var(--body); max-width: 40ch; } .dose-panel { background: var(--white); border-radius: var(--r-img); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .dose-kg { display: grid; gap: var(--s2); } .dose-kg > span { font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); } .dose-kg > b { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; } .dose-kg input { width: 100%; accent-color: var(--ink); margin-top: var(--s2); } .js .dose-kg input { cursor: pointer; } html:not(.js) .dose-kg input { display: none; } .dose-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--line); } .dose-out div { display: grid; gap: .2rem; } .dose-out dt { font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); } .dose-out dd { margin: 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1; } .dose-out dd b { font-weight: 400; } .dose-big { grid-column: 1 / -1; padding-top: var(--s4); border-top: 1px solid var(--line); } .dose-big dd { font-size: clamp(2.6rem, 2rem + 2vw, 4rem); } .dose-legend { margin-top: var(--s5); font-size: var(--t-small); color: var(--body); } .dose-panel .actions { margin-top: var(--s5); } @media (max-width: 900px) { .dose-wrap { grid-template-columns: 1fr; gap: var(--s6); } } /* I passi con i tondini. */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s6); } .steps li { display: grid; gap: var(--s3); justify-items: center; text-align: center; } .steps p { color: var(--body); max-width: 30ch; } /* La biblioteca delle fragranze. */ .fr-group + .fr-group { margin-top: var(--s7); } .fr-fam { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .fr summary { font-family: var(--sans); } .fr-name { font-family: var(--serif); font-size: 1.2rem; } .fr-formats { font-size: var(--t-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: none; } .fr-body { padding-bottom: var(--s5); color: var(--body); display: grid; gap: var(--s4); max-width: 60rem; } .pyr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0; } .pyr div { display: grid; gap: .2rem; } .pyr dt { font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); } .pyr dd { margin: 0; color: var(--text); font-size: var(--t-small); } .fr-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); } .fr-links a { font-size: var(--t-small); color: var(--text); } @media (max-width: 700px) { .pyr { grid-template-columns: 1fr; } .fr-formats { display: none; } } /* Immagine e testo su fascia. */ .banda { padding-block: 0; } .banda-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .banda--flip .banda-media { order: 2; } /* La fotografia sta in assoluto dentro la colonna: cosi' non porta la propria altezza (una foto verticale da 1600x2400 faceva una fascia da 1080 px) e la fascia e' alta quanto il testo, con un minimo. */ .banda-media { position: relative; min-height: 26rem; } .banda-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .banda-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2.5rem, 1.5rem + 4vw, 6rem); } .banda-body h2 { margin-bottom: var(--s4); max-width: 16ch; } .banda-body .prose { margin-bottom: var(--s4); } .banda-body .actions { margin-top: var(--s3); } .ticks { display: grid; gap: var(--s2); margin-bottom: var(--s4); } .ticks li { position: relative; padding-left: 1.6rem; color: var(--body); } .ticks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 6px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); } @media (max-width: 900px) { .banda-inner { grid-template-columns: 1fr; } .banda--flip .banda-media { order: 0; } .banda-media { min-height: 0; height: 20rem; } } /* I valori: quattro icone a tratto. */ .valori-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } .valori-list li { display: grid; justify-items: center; text-align: center; gap: var(--s2); } .valori-list h3 { font-size: 1.2rem; } .valori-list p { color: var(--body); font-size: var(--t-small); max-width: 26ch; } .v-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cream); color: var(--ink); } .v-ico svg { width: 28px; height: 28px; } @media (max-width: 760px) { .valori-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Le recensioni. */ .rev-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } .rev { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: var(--s5); background: var(--white); border-radius: var(--r-img); } .band-cream .rev { background: var(--white); } .stars { margin: 0; color: var(--oro); letter-spacing: .1em; font-size: .95rem; } .rev blockquote { margin: 0; } .rev blockquote p { color: var(--text); } .rev figcaption { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-small); } .rev figcaption b { display: block; font-weight: 500; } .rev figcaption span { color: var(--body); } .rev-note { margin-top: var(--s5); text-align: center; font-size: var(--t-small); color: var(--body); } @media (max-width: 900px) { .rev-row { grid-template-columns: 1fr; } } /* La lettera. */ .newsletter { background: var(--cielo); text-align: center; } .newsletter h2 { max-width: 20ch; margin-inline: auto; } .newsletter .lede { max-width: 44ch; margin: var(--s4) auto var(--s5); } .nl-form { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); max-width: 34rem; margin-inline: auto; position: relative; } .nl-form input[type='email'] { flex: 1 1 16rem; padding: .95em 1.2em; border: 1px solid var(--line-ui); border-radius: var(--r-pill); background: var(--white); font: inherit; color: var(--text); } .nl-note { margin-top: var(--s4); font-size: var(--t-label); color: var(--body); } .nl-ok { flex-basis: 100%; margin: var(--s2) 0 0; color: var(--verde-testo); } .nl-ok[hidden] { display: none; } /* Domande. */ .faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s7); align-items: start; } .faq-wrap .section-head { margin-bottom: 0; } @media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: var(--s5); } } /* Testo. */ .testo-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s7); } .testo-wrap .section-head { margin-bottom: 0; } .testo-wrap .prose { max-width: 42rem; } @media (max-width: 900px) { .testo-wrap { grid-template-columns: 1fr; gap: var(--s5); } } /* I rivenditori. */ .riv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s6) var(--s5); } .riv-reg h3 { font-size: 1.15rem; padding-bottom: var(--s2); margin-bottom: var(--s3); border-bottom: 1px solid var(--line); } .riv-reg li { display: grid; gap: 1px; padding-block: var(--s2); font-size: var(--t-small); } .riv-reg li b { font-weight: 500; } .riv-reg li span { color: var(--body); } .riv-more { font-size: var(--t-small); color: var(--body); } .riv-note { margin-top: var(--s6); font-size: var(--t-small); color: var(--body); max-width: 60ch; } /* La scheda a righe alternate (spedizioni). */ .spec { margin: 0; max-width: 52rem; } .spec div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s4); padding: var(--s3) var(--s4); } .spec div:nth-child(odd) { background: var(--cream); border-radius: var(--r-sm); } .spec dt { font-weight: 500; } .spec dd { margin: 0; color: var(--body); } .table-note { margin-top: var(--s4); font-size: var(--t-small); color: var(--body); max-width: 60ch; } @media (max-width: 600px) { .spec div { grid-template-columns: 1fr; gap: .2rem; } } /* Contatti. */ .ct-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s7); align-items: start; } .ct-side h2 { margin-bottom: var(--s4); } .ct-list { display: grid; gap: var(--s3); margin: var(--s6) 0 0; } .ct-list div { display: grid; gap: 2px; padding-top: var(--s3); border-top: 1px solid var(--line); } .ct-list dt { font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); } .ct-list dd { margin: 0; } .ct-list a { color: var(--text); } @media (max-width: 900px) { .ct-wrap { grid-template-columns: 1fr; } } /* Chiusura. */ .cta-inner { display: grid; justify-items: center; text-align: center; gap: var(--s4); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-radius: var(--r-img); } .cta-inner h2 { max-width: 18ch; } .cta-inner .lede { max-width: 46ch; } .cta-inner .actions { justify-content: center; margin-top: var(--s2); } /* L'apertura di pagina interna, su pastello. */ .pagehero { padding-block: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); background: var(--cream); } .pagehero .wrap { display: grid; gap: var(--s6); align-items: center; } .pagehero--img .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .ph-text h1 { margin-bottom: var(--s4); max-width: 16ch; } .ph-text .lede { max-width: 44ch; color: var(--text); } .ph-text .actions { margin-top: var(--s5); } .ph-media img { width: 100%; height: clamp(16rem, 30vw, 26rem); object-fit: cover; border-radius: var(--r-img); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s4); font-size: var(--t-label); color: var(--body); } .breadcrumb li + li::before { content: '/'; margin-right: .5rem; } .breadcrumb a { color: var(--body); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } @media (max-width: 900px) { .pagehero--img .wrap { grid-template-columns: 1fr; } } /* 06-shop.css */ /* ============================================================ Il negozio: schede prodotto, griglia, filtri, pagina prodotto, barra fissa, cassetto del carrello. ============================================================ */ /* La scheda: fotografia, chip, riga in maiuscoletto, nome, prezzo. Nessun bordo, nessuna ombra. */ .pgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s6) var(--s5); } .pgrid[data-cols='3'] { --cols: 3; } .pgrid[data-cols='4'] { --cols: 4; } .pgrid[data-cols='5'] { --cols: 5; } .pc { display: flex; flex-direction: column; text-align: center; } .pc[hidden] { display: none; } .pc-media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-img); overflow: hidden; background: var(--white); } .pc-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); } .pc-media--tint img { mix-blend-mode: multiply; } .pc:hover .pc-media img { transform: scale(1.04); } .pc-chips { position: absolute; top: var(--s3); left: var(--s3); display: flex; gap: 4px; } .pc-body { display: grid; gap: .3rem; padding: var(--s4) var(--s2) 0; justify-items: center; } .pc-kicker { margin: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .pc-name { font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.3; } .pc-name a { text-decoration: none; color: var(--text); } .pc-name a:hover { text-decoration: underline; } .pc-price { margin: 0; font-weight: 500; } .pc-add { margin-top: var(--s2); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: .15em; } .pc-add:hover { border-bottom-width: 2px; } @media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); } .pc-kicker { display: none; } } /* I filtri del negozio: radio + CSS. */ .shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-bottom: var(--s6); } .filters { display: flex; flex-wrap: wrap; gap: var(--s2); border: 0; margin: 0; padding: 0; } .filters input { position: absolute; opacity: 0; width: 1px; height: 1px; } .filters label { cursor: pointer; padding: .5em 1.1em; border-radius: var(--r-pill); border: 1px solid var(--line-ui); font-size: var(--t-small); font-weight: 500; color: var(--text); } .filters input:checked + label { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .filters input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; } .shop-search { margin: 0; margin-inline-start: auto; } .shop-search[hidden] { display: none; } .shop-search input { width: min(18rem, 60vw); padding: .6em 1em; border: 1px solid var(--line-ui); border-radius: var(--r-pill); font: inherit; font-size: var(--t-small); } .shop-count { margin: 0; font-size: var(--t-small); color: var(--body); flex-basis: 100%; } .shop-empty { text-align: center; color: var(--body); padding-block: var(--s7); } .shop-empty[hidden] { display: none; } /* Il filtro per linea senza JavaScript: le schede che non appartengono alla linea scelta spariscono. */ .shop:has(#linea-bucato:checked) .pc:not([data-linea='bucato']), .shop:has(#linea-casa:checked) .pc:not([data-linea='casa']), .shop:has(#linea-corpo:checked) .pc:not([data-linea='corpo']), .shop:has(#linea-bimbi:checked) .pc:not([data-linea='bimbi']), .shop:has(#linea-regalo:checked) .pc:not([data-linea='regalo']) { display: none; } /* ------------------------------------------------------------ La pagina prodotto: galleria a sinistra che resta ferma, riquadro d'acquisto a destra. ------------------------------------------------------------ */ .product { padding-block: var(--s6) var(--s8); } .product-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; } .pd-gallery { position: sticky; top: calc(var(--header-h) + var(--s5)); } .pd-media { border-radius: var(--r-img); overflow: hidden; aspect-ratio: 1; } .pd-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .pd-buy { display: grid; gap: var(--s4); } .pd-buy .breadcrumb ol { margin-bottom: 0; } .pd-kicker { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); } .pd-buy h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); } .pd-price { margin: 0; font-size: 1.3rem; } .pd-price b { font-weight: 500; } .pd-price span { color: var(--body); font-size: var(--t-small); } .pd-blurb { margin: 0; color: var(--body); } .pd-claims { display: grid; gap: .3rem; } .pd-claims li { position: relative; padding-left: 1.2rem; font-size: var(--t-small); color: var(--body); } .pd-claims li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); } .pd-form { display: grid; gap: var(--s4); padding-top: var(--s2); } /* I riquadri opzione a bordo 1 px, con il radio dentro. */ .opts { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); } .opts-legend { font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); margin-bottom: var(--s2); } .opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line-ui); border-radius: var(--r); cursor: pointer; transition: border-color .18s var(--ease); } .opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); } .opt.is-on, .opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .opt-name { font-weight: 500; } .opt-price { color: var(--text); } .pd-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: stretch; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-ui); border-radius: var(--r-pill); overflow: hidden; } .qty button { width: 42px; height: 46px; border: 0; background: transparent; font: inherit; font-size: 1.2rem; color: var(--text); cursor: pointer; } .qty button:hover { background: var(--cream-2); } .qty input { width: 3rem; height: 46px; border: 0; text-align: center; font: inherit; font-weight: 500; color: var(--text); -moz-appearance: textfield; } .qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { appearance: none; margin: 0; } html:not(.js) .qty button { display: none; } .pd-usp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); padding-block: var(--s4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pd-usp li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--body); } .pd-usp .v-ico { width: 32px; height: 32px; flex: none; } .pd-usp .v-ico svg { width: 18px; height: 18px; } .acc .qa:first-of-type { border-top: 0; } .pd-same { margin-top: var(--s8); } .pd-same h2 { font-size: 1.5rem; margin-bottom: var(--s4); } .same-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--s3); } .same-list .mini { box-shadow: none; border: 1px solid var(--line); } @media (max-width: 900px) { .product-wrap { grid-template-columns: 1fr; gap: var(--s5); } .pd-gallery { position: static; } .pd-usp { grid-template-columns: 1fr; } } /* La barra fissa in fondo alla pagina prodotto: compare quando il riquadro d'acquisto e' uscito dallo schermo. */ .pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -12px 40px rgba(22, 20, 18, .08); transform: translateY(100%); transition: transform .3s var(--ease); } .pbar[hidden] { display: none; } .pbar.is-on { transform: none; } .pbar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding-block: var(--s2); } .pbar-media { width: 52px; height: 52px; border-radius: var(--r-sm); overflow: hidden; } .pbar-media img { width: 100%; height: 100%; object-fit: cover; } .pbar-name { display: grid; gap: 1px; font-size: var(--t-small); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pbar-name b { font-weight: 400; color: var(--body); } @media (max-width: 600px) { .pbar-media { display: none; } .pbar-inner { grid-template-columns: minmax(0, 1fr) auto; } } /* ------------------------------------------------------------ Il cassetto del carrello. ------------------------------------------------------------ */ .cart-veil { position: fixed; inset: 0; z-index: 70; background: rgba(22, 20, 18, .35); } .cart-veil[hidden] { display: none; } .cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(27rem, 100vw); display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow-float); transform: translateX(100%); transition: transform .32s var(--ease); } .cart[hidden] { display: none; } .cart.is-open { transform: none; } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); } .cart-head h2 { font-size: 1.4rem; } .cart-head h2 span { color: var(--body); font-family: var(--sans); font-size: var(--t-small); } .cart-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--cream-2); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--text); } .cart-ship { padding: var(--s3) var(--s5); background: var(--cream); font-size: var(--t-small); } .cart-ship p { margin: 0 0 var(--s2); } .cart-bar { display: block; height: 6px; border-radius: 3px; background: var(--white); overflow: hidden; } .cart-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s var(--ease); } .cart-ship.is-free .cart-bar i { background: var(--verde-testo); } .cart-list { flex: 1; overflow-y: auto; padding: var(--s3) var(--s5); } .cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding-block: var(--s3); border-bottom: 1px solid var(--line); } .cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); } .cart-item-body { display: grid; gap: 2px; min-width: 0; } .cart-item-name { font-size: var(--t-small); font-weight: 500; text-decoration: none; color: var(--text); } .cart-item-meta { font-size: var(--t-label); color: var(--body); } .cart-item .qty { margin-top: var(--s1); } .cart-item .qty button { width: 30px; height: 30px; font-size: 1rem; } .cart-item .qty input { width: 2.2rem; height: 30px; font-size: var(--t-small); } .cart-item-price { font-weight: 500; text-align: right; } .cart-remove { display: block; margin-top: var(--s1); border: 0; background: none; font: inherit; font-size: var(--t-label); color: var(--body); cursor: pointer; text-decoration: underline; } .cart-empty { padding: var(--s6) var(--s5); text-align: center; color: var(--body); } .cart-empty[hidden] { display: none; } .cart-foot { display: grid; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--line); } .cart-foot[hidden] { display: none; } .cart-total { display: flex; justify-content: space-between; margin: 0; font-size: 1.1rem; } .cart-total b { font-weight: 500; } .cart-hint { margin: 0; font-size: var(--t-label); color: var(--body); } .cart-note { margin: 0; font-size: var(--t-label); color: var(--body); } html.cart-open { overflow: hidden; } /* 07-forms.css */ /* ============================================================ Moduli. Etichette sempre visibili; il bordo di un campo e' un elemento d'interfaccia e sta a 3:1. ============================================================ */ .form { display: grid; gap: var(--s4); padding: var(--s5); background: var(--cream); border-radius: var(--r-img); } .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .fld { display: grid; gap: var(--s2); margin: 0; } .fld label { font-size: var(--t-small); font-weight: 500; } .fld label em { font-style: normal; color: var(--alert); } .fld input, .fld textarea { width: 100%; padding: .78em .95em; font: inherit; color: var(--text); background: var(--white); border: 1px solid var(--line-ui); border-radius: var(--r); } .fld textarea { resize: vertical; min-height: 6rem; } .fld input:focus, .fld textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22, 20, 18, .1); } .fld[data-invalid] input, .fld[data-invalid] textarea { border-color: var(--alert); } .fld-err { display: none; font-size: var(--t-label); color: var(--alert); } .fld[data-invalid] .fld-err { display: block; } .choice { border: 0; margin: 0; padding: 0; } .choice legend { font-size: var(--t-small); font-weight: 500; margin-bottom: var(--s2); } .choice-options { display: flex; flex-wrap: wrap; gap: var(--s2); } .choice-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choice-option label { display: inline-block; padding: .45em 1em; border: 1px solid var(--line-ui); border-radius: var(--r-pill); font-size: var(--t-small); cursor: pointer; background: var(--white); } .choice-option input:checked + label { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .choice-option input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .consents { display: grid; gap: var(--s2); } .chk { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: var(--s3); align-items: start; font-size: var(--t-small); color: var(--body); cursor: pointer; } .chk input { appearance: none; width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; border: 1px solid var(--line-ui); border-radius: 4px; background: var(--white); display: grid; place-items: center; cursor: pointer; } .chk input::after { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--on-ink); border-bottom: 2px solid var(--on-ink); transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .16s var(--ease); } .chk input:checked { background: var(--ink); border-color: var(--ink); } .chk input:checked::after { transform: rotate(-45deg) scale(1); } .chk input[aria-invalid='true'] { border-color: var(--alert); } .form-note { margin: 0; font-size: var(--t-label); color: var(--body); } .form-ok { padding: var(--s4); background: var(--menta); color: var(--verde-testo); border-radius: var(--r); } .form-ok[hidden] { display: none; } @media (max-width: 600px) { .fields { grid-template-columns: 1fr; } } /* 08-checkout.css */ /* ============================================================ La cassa. Una pagina senza distrazioni: testata ridotta al marchio, modulo a sinistra, riepilogo a destra su fondo crema che arriva al bordo dello schermo, come fanno le casse migliori. Le etichette dei campi stanno dentro il campo e salgono quando si scrive: piu' compatto, e il modulo si legge come un elenco. ============================================================ */ /* --- il guscio ridotto ----------------------------------------------- */ .co-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); padding: var(--s4) var(--gutter); background: var(--white); border-bottom: 1px solid var(--line); } .co-back { justify-self: start; display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-small); color: var(--body); text-decoration: none; } .co-back:hover { color: var(--text); } .co-back svg { width: 16px; height: 16px; } .co-secure { justify-self: end; display: inline-flex; align-items: center; gap: .45em; font-size: .68rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); } .co-secure svg { width: 15px; height: 15px; } .co-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s5); padding: var(--s5) var(--gutter); border-top: 1px solid var(--line); font-size: var(--t-label); color: var(--body); background: var(--white); } .co-footer a { color: inherit; } @media (max-width: 600px) { .co-back span, .co-secure span { display: none; } } /* --- la pagina in due colonne ------------------------------------------ */ .co { position: relative; overflow-x: clip; background: var(--white); } .co-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: clamp(2rem, 5vw, 5rem); width: 100%; max-width: 70rem; margin-inline: auto; padding: var(--s6) var(--gutter) var(--s9); } .co-wrap[hidden] { display: none; } .co-form { display: grid; gap: 0; min-width: 0; } .co-title { font-size: 1.9rem; margin-bottom: var(--s5); } .co-sec { display: grid; gap: var(--s4); padding-block: var(--s5); border-top: 1px solid var(--line); } .co-sec:first-of-type { border-top: 0; padding-top: 0; } .co-sec h2 { font-size: 1.45rem; } .co-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .co-sec-head p { display: inline-flex; align-items: center; gap: .4em; margin: 0; font-size: var(--t-label); color: var(--body); } .co-sec-head p svg { width: 14px; height: 14px; flex: none; } .co-note { margin: 0; font-size: var(--t-label); color: var(--body); } .co-note a { color: inherit; } .co-note[hidden] { display: none; } /* --- la colonna del riepilogo ------------------------------------------- */ .co-sum { position: relative; min-width: 0; } .co-sum::before { content: ''; position: absolute; z-index: 0; top: calc(-1 * var(--s6)); bottom: calc(-1 * var(--s9)); left: calc(-1 * var(--s5)); right: -100vw; background: var(--cream); } .co-sum-inner { position: sticky; top: var(--s5); z-index: 1; display: grid; gap: var(--s4); } .co-sum-toggle { display: none; } .co-sum-body { display: grid; gap: var(--s4); } .co-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .co-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; } .co-thumb { position: relative; display: block; width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--line); } .co-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .co-badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ink); color: var(--on-ink); font: 500 .7rem/22px var(--sans); text-align: center; } .co-item-body { display: grid; gap: 2px; min-width: 0; } .co-item-name { font-size: var(--t-small); font-weight: 500; color: var(--text); text-decoration: none; } .co-item-name:hover { text-decoration: underline; } .co-item-meta { font-size: var(--t-label); color: var(--body); } .co-item-price { font-size: var(--t-small); font-weight: 500; text-align: right; } .co-step { display: inline-flex; align-items: center; gap: .15rem; margin-top: .3rem; } .co-step button { width: 26px; height: 26px; border: 1px solid var(--line-ui); border-radius: 50%; background: var(--white); font: inherit; font-size: 1rem; line-height: 1; color: var(--text); cursor: pointer; } .co-step button:hover { background: var(--cream-2); } .co-step span { min-width: 1.6rem; text-align: center; font-size: var(--t-small); font-weight: 500; } .co-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start; } .co-code .btn { height: 3.4rem; border-radius: var(--r); } .co-code-msg { margin: 0; font-size: var(--t-label); } .co-code-msg.is-ok { color: var(--verde-testo); } .co-code-msg.is-no { color: var(--alert); } .co-code-msg[hidden] { display: none; } .co-chip { display: inline-flex; align-items: center; gap: .5em; justify-self: start; padding: .35em .5em .35em .8em; border-radius: var(--r-pill); background: var(--white); border: 1px dashed var(--line-ui); font-size: var(--t-label); } .co-chip b { font-weight: 500; letter-spacing: .04em; } .co-chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--cream-2); font: inherit; line-height: 1; cursor: pointer; color: var(--text); } .co-chip[hidden] { display: none; } .co-totals { display: grid; gap: var(--s2); margin: 0; padding-top: var(--s4); border-top: 1px solid var(--line); } .co-totals > div { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-small); color: var(--body); } .co-totals > div[hidden] { display: none; } .co-totals dd { margin: 0; color: var(--text); } .co-total { padding-top: var(--s3); margin-top: var(--s2); border-top: 1px solid var(--line); } .co-total dt, .co-total dd { font-size: 1.15rem; color: var(--text); } .co-total small { margin-left: .45em; font-size: var(--t-label); color: var(--body); } .co-free { display: grid; gap: var(--s2); margin: 0; font-size: var(--t-label); color: var(--body); } .co-free[hidden] { display: none; } .co-free .cart-bar { background: var(--white); } /* --- i campi con l'etichetta dentro -------------------------------------- */ .co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .co-grid .span { grid-column: 1 / -1; } .co-grid3 { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 10.5rem; gap: var(--s3); } .co-grid[hidden], .co-grid3[hidden], .fl[hidden] { display: none; } .fl { position: relative; display: grid; margin: 0; } .fl input, .fl select, .fl textarea { width: 100%; min-height: 3.4rem; padding: 1.35rem .95rem .5rem; font: inherit; font-size: 1rem; color: var(--text); background: var(--white); border: 1px solid var(--line-ui); border-radius: var(--r); appearance: none; } .fl select { padding-right: 2.4rem; text-overflow: ellipsis; } .fl textarea { min-height: 6rem; resize: vertical; padding-top: 1.5rem; } .fl label { position: absolute; left: .95rem; top: 1.7rem; transform: translateY(-50%); max-width: calc(100% - 2rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; color: var(--muted); pointer-events: none; transition: top .15s var(--ease), font-size .15s var(--ease), color .15s var(--ease); } .fl input:focus ~ label, .fl input:not(:placeholder-shown) ~ label, .fl textarea:focus ~ label, .fl textarea:not(:placeholder-shown) ~ label, .fl select:valid ~ label, .fl select:focus ~ label { top: .95rem; font-size: .7rem; color: var(--body); } .fl input:focus, .fl select:focus, .fl textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22, 20, 18, .1); } .fl[data-invalid] input, .fl[data-invalid] select, .fl[data-invalid] textarea { border-color: var(--alert); } .fl .fld-err { display: none; margin-top: .35rem; font-size: var(--t-label); color: var(--alert); } .fl[data-invalid] .fld-err { display: block; } .fl--select::after { content: ''; position: absolute; right: 1rem; top: 1.45rem; width: 8px; height: 8px; border-right: 1.5px solid var(--body); border-bottom: 1.5px solid var(--body); transform: rotate(45deg); pointer-events: none; } .fl-hint { position: absolute; right: .95rem; top: 1.7rem; transform: translateY(-50%); font-size: var(--t-label); color: var(--muted); pointer-events: none; } .fl-count { justify-self: end; margin-top: .3rem; font-size: var(--t-label); color: var(--muted); } .co-chk { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: var(--s3); align-items: start; font-size: var(--t-small); color: var(--body); cursor: pointer; } .co-chk input { appearance: none; width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; border: 1px solid var(--line-ui); border-radius: 4px; background: var(--white); display: grid; place-items: center; cursor: pointer; } .co-chk input::after { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--on-ink); border-bottom: 2px solid var(--on-ink); transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .16s var(--ease); } .co-chk input:checked { background: var(--ink); border-color: var(--ink); } .co-chk input:checked::after { transform: rotate(-45deg) scale(1); } .co-chk input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .co-chk small { display: block; font-size: var(--t-label); color: var(--muted); } .co-sub { display: grid; gap: var(--s3); padding: var(--s4); background: var(--cream); border-radius: var(--r); } .co-sub[hidden] { display: none; } /* --- le scelte a scheda: consegna, spedizione, fatturazione ------------ */ .co-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .co-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border: 1px solid var(--line-ui); border-radius: var(--r); background: var(--white); cursor: pointer; transition: border-color .18s var(--ease); } .co-mode input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--ink); } .co-mode.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .co-mode-name { display: block; font-weight: 500; font-size: var(--t-small); } .co-mode-sub { display: block; font-size: var(--t-label); color: var(--body); } .co-ship { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px var(--ink); border-radius: var(--r); background: var(--white); } .co-ship[hidden] { display: none; } .co-ship-name { display: block; font-weight: 500; font-size: var(--t-small); } .co-ship-sub { display: block; font-size: var(--t-label); color: var(--body); } .co-ship-price { font-weight: 500; font-size: var(--t-small); white-space: nowrap; } .co-ship-isole { margin: 0; font-size: var(--t-label); color: var(--body); } .co-ship-isole[hidden] { display: none; } /* --- il pagamento --------------------------------------------------------- */ .co-pay { display: grid; gap: var(--s2); } .co-pm { border: 1px solid var(--line-ui); border-radius: var(--r); background: var(--white); transition: border-color .18s var(--ease); } .co-pm.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .co-pm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); cursor: pointer; } .co-pm-head input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); } .co-pm-name { display: block; font-weight: 500; font-size: var(--t-small); } .co-pm-sub { display: block; font-size: var(--t-label); color: var(--body); } .co-pm-price { font-size: var(--t-small); font-weight: 500; white-space: nowrap; } .co-brands { display: flex; gap: 4px; } .co-brand { display: inline-grid; place-items: center; width: 38px; height: 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); font: 700 .56rem/1 var(--sans); letter-spacing: .03em; color: var(--body); transition: opacity .18s var(--ease); } .co-brand.is-on { border-color: var(--ink); color: var(--ink); } .co-brand.is-off { opacity: .3; } .co-pm-body { display: grid; gap: var(--s3); padding: var(--s4); border-top: 1px solid var(--line); background: var(--cream); border-radius: 0 0 var(--r) var(--r); } .co-pm-body[hidden] { display: none; } .co-pm-body p { margin: 0; font-size: var(--t-small); color: var(--body); } .co-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .co-card-grid .span { grid-column: 1 / -1; } .co-demo { margin: 0; padding: var(--s3) var(--s4); border: 1px dashed var(--line-ui); border-radius: var(--r); font-size: var(--t-label); color: var(--body); } .co-alert { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r); background: #FBEAE6; color: var(--alert); font-size: var(--t-small); font-weight: 500; } .co-alert[hidden] { display: none; } .co-pay-btn { margin-top: var(--s5); font-size: .85rem; padding: 1.15em 1.9em; } .co-pay-btn span { opacity: .5; } .co-pay-btn b { font-weight: 500; } .co-pay-btn:disabled { opacity: .6; cursor: wait; } .co-legal { margin: var(--s3) 0 0; font-size: var(--t-label); color: var(--body); text-align: center; } .co-legal a { color: inherit; } .co-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s5); margin: var(--s4) 0 0; padding: 0; list-style: none; font-size: var(--t-label); color: var(--body); } .co-trust li { display: inline-flex; align-items: center; gap: .4em; } .co-trust svg { width: 15px; height: 15px; } /* --- vuoto, senza script ---------------------------------------------------- */ .co-empty { display: grid; justify-items: center; gap: var(--s4); padding: var(--s9) var(--gutter); text-align: center; } .co-empty[hidden] { display: none; } .co-nojs { max-width: 40rem; margin-inline: auto; padding: var(--s7) var(--gutter); } html:not(.js) [data-co-wrap], html:not(.js) [data-buy-now] { display: none; } /* --- la conferma --------------------------------------------------------------- */ .co-done { display: grid; gap: var(--s5); width: 100%; max-width: 44rem; margin-inline: auto; padding: var(--s7) var(--gutter) var(--s9); } .co-done[hidden] { display: none; } .co-check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--menta); color: var(--verde-testo); } .co-check svg { width: 26px; height: 26px; } .co-done .label { margin: 0; } .co-done h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); } .co-done .lede { margin: 0; } .co-next { display: grid; gap: var(--s3); padding: var(--s5); background: var(--cream); border-radius: var(--r-img); } .co-next[hidden] { display: none; } .co-next h2 { font-size: 1.35rem; } .co-next p { margin: 0; color: var(--body); } .co-iban { display: grid; gap: var(--s2); margin: var(--s2) 0 0; } .co-iban > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); align-items: center; font-size: var(--t-small); } .co-iban dt { color: var(--body); } .co-iban dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .co-iban code { font-family: var(--sans); font-weight: 500; letter-spacing: .05em; background: var(--white); padding: .4em .7em; border-radius: var(--r-sm); } .co-copy { border: 1px solid var(--line-ui); border-radius: var(--r-pill); background: var(--white); padding: .35em .85em; font: inherit; font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text); cursor: pointer; } .co-copy.is-done { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .co-recap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } .co-recap h2 { margin-bottom: var(--s2); font-family: var(--sans); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--body); } .co-recap p { margin: 0; font-size: var(--t-small); white-space: pre-line; } .co-gift { padding: var(--s4); border: 1px dashed var(--line-ui); border-radius: var(--r); font-size: var(--t-small); } .co-gift[hidden] { display: none; } .co-gift b { display: block; margin-bottom: var(--s1); font-weight: 500; } .co-gift p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--text); } .co-done .co-items { padding-top: var(--s4); border-top: 1px solid var(--line); } .co-done .actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; } .co-fine { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-label); color: var(--muted); } .co-none { padding: var(--s9) var(--gutter); text-align: center; } .co-none[hidden] { display: none; } /* --- il telefono --------------------------------------------------------------- */ @media (max-width: 900px) { .co-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 0; } .co-sum { order: -1; margin: 0 calc(-1 * var(--gutter)) var(--s5); padding: 0 var(--gutter); background: var(--cream); border-bottom: 1px solid var(--line); } .co-sum::before { display: none; } .co-sum-inner { position: static; gap: 0; } .co-sum-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; padding: var(--s4) 0; border: 0; background: none; font: inherit; font-size: var(--t-small); font-weight: 500; color: var(--text); cursor: pointer; } .co-sum-toggle > span { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; } .co-sum-toggle svg { width: 14px; height: 14px; transition: transform .2s var(--ease); } .co-sum-toggle[aria-expanded='true'] svg { transform: rotate(180deg); } .co-sum-toggle b { font-size: 1.05rem; font-weight: 500; } .co-sum-body { display: none; padding-bottom: var(--s5); } .co-sum.is-open .co-sum-body { display: grid; } .co-title { margin-top: var(--s2); } .co-grid, .co-card-grid, .co-modes { grid-template-columns: 1fr; } .co-grid3 { grid-template-columns: 1fr 1fr; } .co-grid3 .fl:nth-child(2) { grid-column: 1 / -1; order: -1; } .co-recap { grid-template-columns: 1fr; } .co-pay-btn { position: sticky; bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-float); } }