/* * Studio Arfia · servizi.css · v0.2.0 · 27/09/2026 * Hub /servizi/ + pagine servizio (template condiviso). * v0.2 (la pagina Servizi rifatta): il sito e il gestionale che si parlano * (site/flusso) e «In ogni progetto, sempre» (site/inclusi). */ /* 4 voci: 2×2 anche sul desktop largo — niente orfani in terza colonna (la regola porta la sua condizione, §8.4). */ @media (min-width: 1400px) { .as-servizi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Card tipografica (hub e vetrine): niente media, comanda il testo. */ .as-card--tipografica { min-height: 220px; gap: var(--as-sp-4); } .as-servizio__punti .as-mondi__card, .as-servizio__punti article { background: var(--as-sup); border-radius: calc(var(--as-r-card-lg) * var(--as-brm)); padding: clamp(28px, 3vw, 36px); display: flex; flex-direction: column; gap: var(--as-sp-3); } @supports (corner-shape: squircle) { .as-servizio__punti article { corner-shape: squircle; } } .as-servizio__progetti .as-grid-cards { margin-block: var(--as-sp-7); } .as-servizio__faq .as-domande__lista { margin-top: var(--as-sp-7); } /* ══ IL SITO E IL GESTIONALE, FATTI PER PARLARSI (site/flusso) · v0.38 ═══════ Rifatta il 29/09 (Rami: «migliorala tantissimo») sul concept «Lo zoom indietro». Tutto il QUADRO del fotogramma finale è in unità k (94 × 40): i quattro posti hanno le coordinate in k (--x --y --w --h), i dispositivi sono disegnati in em e prendono la taglia da k, i fili hanno una viewBox in k. Senza script (e per ora su touch): il fotogramma finale fermo, tutto «arrivato». Con lo script e un puntatore (.as-flusso--viva): palco fermo alto uno schermo, e la coreografia la scrive motion.js (data-as-flusso) come funzione del progresso dello scroll. ── FLUSSO-INIZIO (blocco di flusso-costruzione; non toccare da fuori) ── */ .as-flusso { --as-goccia: 0px; --as-goccia2: 0px; --k: min(calc((100vw - 2 * var(--as-gutter)) / 94), 17px); position: relative; /* v0.53.2: si ritaglia solo in orizzontale (i dispositivi che entrano da destra); in verticale niente esce dalla sezione, e così i due veli qui sotto possono debordare di 2px oltre il bordo e coprire la cucitura. */ overflow-x: clip; overflow-y: visible; /* v0.53.1 (Rami, 21/10: «gli scatti non si sono tolti del tutto: ne restano a fine sezione, quando si entra nella sezione dopo»). La cupola in alto e la pancia in fondo NON si ritagliano più col raggio della sezione. Con il raggio (v0.53: a 0 dentro il pin, «50% / G» in entrata e in uscita) Chrome, finché G cambiava a ogni fotogramma, rimetteva sotto maschera tutti gli strati della scena fissata e li ridipingeva: su uno schermo vero è lì che compaiono per un attimo pezzi non ridisegnati (gli scatti). Ora la sezione è un rettangolo e gli angoli bianchi li disegnano due veli sopra (::before in alto, ::after in fondo): un'ellisse trasparente sul bianco, alta quanto la goccia. Stessa forma di prima, nessuna maschera. Niente ombra di 2px sul bordo (base.css, [data-fondo="carbone"]): serve tra due blocchi scuri, qui sopra e sotto c'è il bianco, e resterebbe una riga scura sugli angoli bianchi. */ box-shadow: none; } .as-flusso::before, .as-flusso::after { content: ""; position: absolute; z-index: 9; left: 0; right: 0; pointer-events: none; } /* v0.53.2 (Rami, 21/10: «una sottile riga nera tra la sezione coi mockup e quella dopo, solo mentre scorri»). Il velo finiva esattamente sul bordo della sezione scura: mentre si scorre le posizioni sono frazionarie e su quella riga di pixel il carbone (sfumato) e il bianco del velo (sfumato allo stesso modo) si sommano in un grigio: 34 fotogrammi su 167 in uscita, 25 su 145 in entrata (banco, sonda-riga). Da fermi i pixel tornano interi e la riga sparisce. Ora i veli debordano di 2px oltre il bordo, sul bianco della sezione accanto: la cucitura sta sotto il velo pieno. */ .as-flusso::before { top: -2px; height: calc(var(--as-goccia) + 2px); background: radial-gradient(50% 100% at 50% 100%, transparent 99%, var(--as-bianco) 100%); } .as-flusso::after { bottom: -2px; height: calc(var(--as-goccia2) + 2px); background: radial-gradient(50% 100% at 50% 0, transparent 99%, var(--as-bianco) 100%); } .as-flusso__palco { position: relative; padding-block: var(--as-sect); } .as-flusso__testa { display: grid; gap: var(--as-sp-5); max-width: var(--as-container); margin: 0 auto clamp(32px, 4vw, 64px); padding-inline: var(--as-gutter); } @media (min-width: 1000px) { .as-flusso__testa { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: var(--as-sp-8); } } .as-flusso__titolo { margin: 0; max-width: 15ch; } .as-flusso__sotto { margin: 0; max-width: 40ch; color: var(--as-muted); } /* Il quadro e i suoi quattro posti (coordinate in k dall'angolo in alto a sinistra). */ /* v0.56: schede e scena in un contenitore, che si ferma a schermo solo da telefono (il binario, sotto). */ .as-flusso__set { display: contents; } .as-flusso__scena { position: relative; } .as-flusso__quadro { position: relative; width: calc(94 * var(--k)); height: calc(40 * var(--k)); margin-inline: auto; } .as-flusso__posto { position: absolute; z-index: 2; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); margin: 0; } /* v0.39: i telefoni e il portatile sono quelli del kit (inc/dispositivi.php). Il posto è il CORPO del dispositivo (prima era lo schermo, e la cornice sbordava); i centri restano dov'erano e i fondi a 34k, dove partono tutte le didascalie. L'iPhone vero è più stretto del vecchio 19×39: 15,26 × 31,86k. */ .as-flusso__posto.is-cliente { --x: .87; --y: 2.14; --w: 15.26; --h: 31.86; } .as-flusso__posto.is-gestionale { --x: 19; --y: 6.38; --w: 42.9; --h: 27.62; z-index: 1; } .as-flusso__posto.is-carta { --x: 64; --y: 8; --w: 12; --h: 26; } .as-flusso__posto.is-titolare { --x: 78.37; --y: 2.14; --w: 15.26; --h: 31.86; } .as-flusso__oggetto { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .is-cliente .as-fl-tel, .is-titolare .as-fl-tel { font-size: calc(var(--k) * .744); } .is-gestionale .as-fl-pc { font-size: calc(var(--k) * .65); } .is-carta .as-fl-stampa { font-size: var(--k); } .as-flusso__didascalia { position: absolute; left: 0; top: calc(100% + 1.3 * var(--k)); width: 100%; margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.4; color: var(--as-grigio-testo-inv); text-wrap: balance; } .is-gestionale .as-flusso__didascalia { left: calc(2 * var(--k)); width: calc(39 * var(--k)); } .is-carta .as-flusso__didascalia { left: calc(-.5 * var(--k)); width: calc(14 * var(--k)); } /* I fili: arancio pieno, niente bagliore né gradiente (non è il «raggio» delle integrazioni). */ .as-flusso__fili { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .as-flusso__fili path { fill: none; stroke: var(--as-arancio); stroke-width: .14; stroke-linecap: round; stroke-linejoin: round; } .as-flusso--viva .as-flusso__fili path { stroke-width: 2; } /* Il dato in viaggio: il riepilogo vero, in una pillola con l'anello arancio. */ .as-flusso__dato { position: absolute; left: 0; top: 0; z-index: 6; margin: 0; padding: .5em 1em; border-radius: 999px; background: var(--as-bianco); color: var(--as-carbone); font: 500 max(12px, calc(.84 * var(--k))) / 1.2 var(--as-font); letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--as-arancio), 0 .8em 1.6em -.6em rgba(0, 0, 0, .7); opacity: 0; pointer-events: none; will-change: transform, opacity; } .as-flusso__dato.is-piccolo { font-size: max(11px, calc(.72 * var(--k))); padding: .45em .85em; } .as-flusso__chiusa { max-width: var(--as-container); margin: clamp(28px, 3vw, 40px) auto 0; padding-inline: var(--as-gutter); font-size: min(var(--as-type-display-sm), 44px); } .as-flusso__mondi { display: none; } .as-flusso__nota { max-width: var(--as-container); margin: 16px auto 0; padding-inline: var(--as-gutter); font-size: 14px; color: var(--as-muted); } /* I quattro mondi (v0.40): si vede solo quello della sezione. Le schermate si incrociano in .3s (quella che entra sale sopra, quella che esce sparisce dopo): niente fondo che traspare. */ .as-fl-livello { position: absolute; inset: 0; z-index: 1; visibility: hidden; opacity: 0; transition: opacity 0s linear .3s, visibility 0s linear .3s; } .as-flusso[data-mondo="matrimoni"] .as-fl-livello[data-mondo-di="matrimoni"], .as-flusso[data-mondo="concessionaria"] .as-fl-livello[data-mondo-di="concessionaria"], .as-flusso[data-mondo="negozio"] .as-fl-livello[data-mondo-di="negozio"], .as-flusso[data-mondo="impresa"] .as-fl-livello[data-mondo-di="impresa"] { z-index: 2; visibility: visible; opacity: 1; transition: opacity .3s ease; } .as-flusso__dida, .as-flusso__dato > span { display: none; } .as-flusso[data-mondo="matrimoni"] .as-flusso__dida[data-mondo-di="matrimoni"], .as-flusso[data-mondo="concessionaria"] .as-flusso__dida[data-mondo-di="concessionaria"], .as-flusso[data-mondo="negozio"] .as-flusso__dida[data-mondo-di="negozio"], .as-flusso[data-mondo="impresa"] .as-flusso__dida[data-mondo-di="impresa"] { display: block; } .as-flusso[data-mondo="matrimoni"] .as-flusso__dato > [data-mondo-di="matrimoni"], .as-flusso[data-mondo="concessionaria"] .as-flusso__dato > [data-mondo-di="concessionaria"], .as-flusso[data-mondo="negozio"] .as-flusso__dato > [data-mondo-di="negozio"], .as-flusso[data-mondo="impresa"] .as-flusso__dato > [data-mondo-di="impresa"] { display: inline; } /* Le schede: il nome intero; quello corto solo da telefono (e sui computer stretti). */ .as-flusso__corto { display: none; } /* ── Con lo script e un puntatore: il palco fermo, la camera ──────────────── */ /* Sotto il palco resta il posto della pancia (contro-goccia, 150px): senza, la curva tagliava le schede e la nota nell'angolo mentre sale la sezione dopo. */ .as-flusso--viva { --k: min(calc((100vw - 64px) / 94), calc((100vh - 256px) / 40), 17px); padding-bottom: 112px; } .as-flusso--viva .as-flusso__palco { height: 100vh; padding: 0; } .as-flusso--viva .as-flusso__testa { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--as-gutter); width: min(44vw, 640px); max-width: none; margin: 0; padding: 0 0 76px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--as-sp-5); pointer-events: none; } .as-flusso--viva .as-flusso__testa > * { pointer-events: auto; } .as-flusso--viva .as-flusso__scena { position: absolute; inset: 0; z-index: 2; } .as-flusso--viva .as-flusso__quadro { position: absolute; left: calc(50% - 47 * var(--k)); top: calc(164px + (100% - 256px - 40 * var(--k)) / 2); margin: 0; } /* Il telefono del cliente si disegna GRANDE (primo piano) e scala in giù: nitido. */ .as-flusso--viva .is-cliente .as-fl-tel { font-size: calc(min(80.7vh, 745px) / 42.82); } .as-flusso--viva .as-flusso__chiusa { position: absolute; z-index: 3; left: calc(50% - 46 * var(--k)); top: 96px; max-width: none; margin: 0; padding: 0; } .as-flusso--viva .as-flusso__mondi { position: absolute; z-index: 4; left: calc(50% - 46 * var(--k)); bottom: 28px; display: flex; gap: 8px; } .as-flusso--viva .as-flusso__nota { position: absolute; z-index: 3; right: calc(50% - 46.5 * var(--k)); bottom: 40px; max-width: none; margin: 0; padding: 0; } .as-flusso .as-flusso__mondo { min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--as-bianco); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); } .as-flusso .as-flusso__mondo.is-on { background: var(--as-bianco); color: var(--as-carbone); box-shadow: none; } @media (hover: hover) { .as-flusso .as-flusso__mondo:not(.is-on):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); } } /* v0.53.1 (Rami, 21/10: «i bottoni per settore: non si capisce molto che sono cliccabili»). Sopra le schede l'invito «Scegli il settore:», in ogni scheda l'icona del mestiere (stesso set delle schermate), al passaggio la scheda si accende; a scena finita le schede non scelte chiamano una volta, due battiti sfalsati (.is-invito, motion.js), e smettono appena se ne sceglie una. */ .as-flusso__mondi-eti { flex: 0 0 100%; margin: 0 0 4px; font-size: 14px; line-height: 1.3; color: var(--as-grigio-testo-inv); } .as-flusso .as-flusso__mondo { display: inline-flex; align-items: center; gap: 8px; transition: background .25s ease, box-shadow .25s ease, color .25s ease; } .as-flusso__ic { display: grid; place-items: center; } .as-flusso__ic .as-fl-ic { width: 17px; height: 17px; stroke-width: 1.6; } .as-flusso--viva .as-flusso__mondi { flex-wrap: wrap; max-width: min(44vw, 660px); } @keyframes as-fl-invito { 0% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 0 0 0 rgba(255, 255, 255, .42); } 60% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 0 0 0 rgba(255, 255, 255, 0); } } .as-flusso__mondi.is-invito .as-flusso__mondo:not(.is-on) { animation: as-fl-invito 1.5s ease-out calc(var(--i, 0) * .14s) 2; } .as-flusso .as-flusso__mondo:focus-visible { outline: 2px solid var(--as-bianco); outline-offset: 3px; } /* ── I DISPOSITIVI (inc/demo-flusso.php) ───────────────────────────────────────── v0.40: le schermate dentro l'iPhone e il MacBook del kit si scrivono nelle unità del kit. Telefono: un punto dello schermo (402 × 874) è var(--u). Portatile: l'app a tutto schermo è disegnata su 812 × 510 px, e un suo px è var(--p) (il gestionale col browser al 186%: da telefono il testo più piccolo, 13px, resta sopra gli 11px veri). La carta ha il suo em. */ .as-fl-ic { display: block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .as-fl-ancora { position: absolute; width: 0; height: 0; pointer-events: none; } :where(.as-fl-livello) p { margin: 0; } .as-fl-livello { -webkit-font-smoothing: antialiased; } /* I telefoni e il portatile li disegna il kit (dispositivi.css). Qui: l'ora del mondo attivo nella barra del kit (una per mondo, come le schermate). */ .as-flusso .as-disp .as-disp__ora > [data-mondo-di] { display: none; } .as-flusso[data-mondo="matrimoni"] .as-disp__ora > [data-mondo-di="matrimoni"], .as-flusso[data-mondo="concessionaria"] .as-disp__ora > [data-mondo-di="concessionaria"], .as-flusso[data-mondo="negozio"] .as-disp__ora > [data-mondo-di="negozio"], .as-flusso[data-mondo="impresa"] .as-disp__ora > [data-mondo-di="impresa"] { display: inline; } /* ══ v0.53 · LE SCHERMATE NUOVE (Rami, 21/10: «rendi le pagine dentro i mockup super belle e moderne») ══ Quattro attività, quattro siti nello stile dei nostri lavori migliori (inc/demo-flusso.php): la villa alla Pellegrin (vc · vg), la concessionaria alla proposta B di Cibrèo (ab · ag), il negozio alla Platinum (bt · tg), l'impresa alla Sunrise (ti · ig). Telefono in punti (var(--u)), gestionale in px dell'app (var(--p), 812 × 527). Senza i colori vietati: niente gialli, ori, ambra, lime. I CARATTERI: Archivo è già quello del sito; gli altri arrivano solo quando la sezione si avvicina (.as-flusso--font, motion.js), così non pesano sull'apertura di /servizi/. Prima di allora (e senza script) i siti usano i loro ripieghi di sistema. File e licenze OFL in assets/fonts/schermate/. */ @font-face { font-family: 'Archivo Narrow'; src: url('../fonts/schermate/archivo-narrow-normal-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Anton'; src: url('../fonts/schermate/anton-normal-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('../fonts/schermate/instrument-sans-normal-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/schermate/bricolage-grotesque-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Albert Sans'; src: url('../fonts/schermate/albert-sans-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } .as-fl-livello { --f-vc: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-vc-n: 'Archivo', 'Arial Narrow', sans-serif; --f-ab: Impact, 'Arial Narrow Bold', 'Helvetica Neue', sans-serif; --f-ab-t: 'Helvetica Neue', Arial, sans-serif; --f-bt: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-ti: 'Helvetica Neue', Arial, sans-serif; --f-ti-t: 'Helvetica Neue', Arial, sans-serif; } .as-flusso--font .as-fl-livello { --f-vc-n: 'Archivo Narrow', 'Archivo', 'Arial Narrow', sans-serif; --f-ab: 'Anton', Impact, 'Arial Narrow Bold', sans-serif; --f-ab-t: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --f-ti: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; --f-ti-t: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif; } .as-fl-livello .as-volto { display: block; width: 100%; height: 100%; object-fit: cover; } .as-fl-livello img { display: block; } /* ── IL TELEFONO DEL CLIENTE: la pagina che scorre e il foglio della conferma ───────────────────── Lo script scrive --corso (la pagina scende fino al bottone) e --f (il foglio sale) sull'oggetto del cliente; senza script valgono 1 (qui sotto): il fotogramma finale, come il resto della scena. */ .as-flusso__posto.is-cliente .as-flusso__oggetto { --corso: 1; --f: 1; } .as-fl-sito { overflow: hidden; background: var(--s-fondo, #fff); color: var(--s-ink, #111); } .as-fl-pag { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--s-fondo, #fff); transform-origin: 50% 0; transform: translate3d(0, calc(var(--f, 0) * 12 * var(--u)), 0) scale(calc(1 - var(--f, 0) * .075)); border-radius: calc(var(--f, 0) * 48 * var(--u)); } .as-fl-pag__corpo { position: absolute; top: 0; left: 0; right: 0; transform: translate3d(0, calc(var(--corsa, 0px) * var(--corso, 0)), 0); } .as-fl-pag__testa { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: calc(112 * var(--u)); } .as-fl-pag__velo { position: absolute; inset: 0; z-index: 9; background: #0B0B0C; opacity: calc(var(--f, 0) * .46); pointer-events: none; } /* Il foglio della conferma, come i fogli di iOS: angoli grandi, la maniglia, sale dal fondo. */ .as-fl-ok { position: absolute; z-index: 12; left: 0; right: 0; top: calc(70 * var(--u)); bottom: 0; overflow: hidden; border-radius: calc(38 * var(--u)) calc(38 * var(--u)) 0 0; background: var(--ok-fondo, #fff); box-shadow: 0 calc(-6 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .2); transform: translate3d(0, calc((1 - var(--f, 0)) * 104%), 0); } .as-fl-ok > * { position: absolute; } .as-fl-ok__maniglia { top: calc(7 * var(--u)); left: 50%; width: calc(36 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-18 * var(--u)); border-radius: 999px; background: rgba(0, 0, 0, .16); } /* Il segno di spunta si disegna mentre il foglio arriva (prima il cerchio, poi la spunta). */ .as-fl-segno { flex: none; display: block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .as-fl-segno * { stroke-dasharray: 1; } .as-fl-segno circle { stroke-dashoffset: calc(1 - clamp(0, (var(--f, 0) - .45) * 2.6, 1)); } .as-fl-segno path { stroke-dashoffset: calc(1 - clamp(0, (var(--f, 0) - .72) * 4, 1)); } /* Il riepilogo (dato-tel): l'anello arancio lo stacca, poi diventa il dato che corre sul filo. */ [data-ruolo="dato-tel"] { transform-origin: 50% 50%; } [data-ruolo="dato-tel"] > [data-ancora="partenza"] { right: 0; top: 50%; } /* La barra di stato e la barra di chiusura come su iOS: bianche sulla foto scura della villa finché non si scende, bianche (la barra di stato) quando sale il foglio e la pagina dietro si scurisce. */ .as-flusso__posto.is-cliente :is(.as-disp__stato, .as-iphone__home) { --k-buio: calc(var(--su-scura, 0) * (1 - clamp(0, (var(--corso, 1) - .4) * 7, 1))); } .as-flusso__posto.is-cliente .as-disp__stato { color: color-mix(in srgb, #fff calc(max(var(--k-buio), clamp(0, (var(--f, 0) - .2) * 4, 1)) * 100%), #000); } .as-flusso__posto.is-cliente .as-iphone__home { background: color-mix(in srgb, #fff calc(var(--k-buio) * 100%), #111); } .as-flusso[data-mondo="matrimoni"] .as-flusso__posto.is-cliente :is(.as-disp__stato, .as-iphone__home) { --su-scura: 1; } /* Safari (iOS 26) scesi nella pagina: la capsula di vetro col solo dominio, sopra la barra di chiusura. */ .as-fl-safari { position: absolute; z-index: 10; left: 0; right: 0; bottom: calc(24 * var(--u)); width: fit-content; height: calc(32 * var(--u)); margin: 0 auto; display: flex; align-items: center; padding: 0 calc(18 * var(--u)); border-radius: 999px; background: rgba(248, 248, 250, .8); -webkit-backdrop-filter: blur(calc(14 * var(--u))) saturate(1.8); backdrop-filter: blur(calc(14 * var(--u))) saturate(1.8); box-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .1), inset 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .07); font: 500 calc(14 * var(--u)) / 1 -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; color: #1C1C1E; white-space: nowrap; opacity: calc(1 - var(--f, 0)); } /* Il dito: un tocco di vetro sul bottone, dove sta il bottone di quel sito a pagina scesa. */ .as-fl-tocco { position: absolute; z-index: 16; left: calc(var(--tx, 201) * var(--u)); top: calc(var(--ty, 690) * var(--u)); width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin: calc(-27 * var(--u)) 0 0 calc(-27 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .3); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .75), 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; } .as-flusso[data-mondo="matrimoni"] .as-fl-tocco { --tx: 201; --ty: 625; } .as-flusso[data-mondo="concessionaria"] .as-fl-tocco { --tx: 330; --ty: 757; } .as-flusso[data-mondo="negozio"] .as-fl-tocco { --tx: 201; --ty: 640; } .as-flusso[data-mondo="impresa"] .as-fl-tocco { --tx: 201; --ty: 757; } /* Le animazioni continue (Ken Burns, la fascia che scorre, il pennello) girano solo nel mondo in scena. */ @keyframes as-fl-kb { from { transform: scale(1.07); } to { transform: scale(1); } } @keyframes as-fl-scorre { to { transform: translateX(-50%); } } @keyframes as-fl-pennello { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* ─── MATRIMONI · Villa Castelmora, alla Pellegrin: foto scura, Archivo sottilissimo, etichette spaziate ─── */ .as-fl-sito--matrimoni { --s-fondo: #fff; --s-ink: #171717; --corsa: calc(-770 * var(--u)); font-family: var(--f-vc); } .as-fl-vc-hero { position: relative; height: calc(874 * var(--u)); overflow: hidden; background: #1E231D; color: #fff; text-align: center; } .as-fl-vc-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.74) brightness(.84) contrast(1.05); transform-origin: 50% 62%; } .as-flusso[data-mondo="matrimoni"] .as-fl-vc-hero__foto { animation: as-fl-kb 9s ease-in-out infinite alternate; } .as-fl-vc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 12, .46) 0%, rgba(12, 12, 12, .14) 24%, rgba(12, 12, 12, .3) 50%, rgba(12, 12, 12, .7) 80%, rgba(12, 12, 12, .84) 100%); } .as-fl-vc-hero > p { position: absolute; z-index: 1; left: 0; right: 0; } .as-fl-vc-eti { font-family: var(--f-vc); font-weight: 300; font-size: calc(9.5 * var(--u)); line-height: 1.95; letter-spacing: .46em; text-transform: uppercase; color: rgba(255, 255, 255, .84); } .as-fl-vc-hero .as-fl-vc-eti { top: calc(356 * var(--u)); } .as-fl-vc-h1 { top: calc(408 * var(--u)); font-weight: 100; font-size: calc(49 * var(--u)); line-height: 1.02; letter-spacing: -.035em; } .as-fl-vc-h1 em { font-style: italic; font-weight: 200; } /* v0.56 bis (Rami, 22/10: «togli la scritta scorri con il simbolo che scorre da dentro i mockup»): a piè della hero restano il luogo e la pausa del video. */ .as-fl-vc-piede { bottom: calc(92 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 0 calc(24 * var(--u)); font-size: calc(8.5 * var(--u)); font-weight: 300; letter-spacing: .38em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .as-fl-vc-piede > span:first-child { justify-self: start; text-align: left; white-space: nowrap; letter-spacing: .3em; } .as-fl-vc-pausa { justify-self: end; display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); } .as-fl-vc-pausa i { width: calc(1.6 * var(--u)); height: calc(9 * var(--u)); background: #fff; } .as-fl-vc-date { position: relative; padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(36 * var(--u)); background: #fff; color: #2B2B2B; } .as-fl-vc-eti.is-scura { color: #9A9A9A; font-size: calc(9 * var(--u)); } .as-fl-vc-h2 { margin-top: calc(12 * var(--u)); font-weight: 200; font-size: calc(33 * var(--u)); line-height: 1.06; letter-spacing: -.028em; color: #1F1F1F; } .as-fl-vc-mese { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(26 * var(--u)); padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid #171717; } .as-fl-vc-mese b { flex: 1; font-family: var(--f-vc-n); font-weight: 500; font-size: calc(12 * var(--u)); letter-spacing: .2em; text-transform: uppercase; color: #171717; } .as-fl-vc-mese .as-fl-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.2; color: #555; } .as-fl-vc-sabati { margin: 0; padding: 0; list-style: none; } .as-fl-vc-sabati li { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(12 * var(--u)); border-bottom: 1px solid #EDEDED; font-size: calc(14 * var(--u)); font-weight: 300; color: #A1A1A1; } .as-fl-vc-sabati b { width: calc(62 * var(--u)); font-family: var(--f-vc-n); font-weight: 500; font-size: calc(12.5 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: #8A8A8A; } .as-fl-vc-sabati li.is-on { background: #171717; border-bottom-color: #171717; color: #fff; } .as-fl-vc-sabati li.is-on b { color: #fff; } .as-fl-vc-sabati .as-fl-ic { margin-left: auto; width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6; } .as-fl-vc-riga { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(46 * var(--u)); padding-left: calc(12 * var(--u)); border-bottom: 1px solid #EDEDED; font-size: calc(14 * var(--u)); font-weight: 300; color: #777; } .as-fl-vc-riga span { flex: 1; } .as-fl-vc-riga b { margin-right: calc(8 * var(--u)); font-weight: 400; color: #171717; } .as-fl-vc-riga i { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); box-shadow: inset 0 0 0 1px #D6D6D6; color: #444; } .as-fl-vc-riga .as-fl-ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 1.5; } .as-fl-vc-cta { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); height: calc(54 * var(--u)); margin-top: calc(22 * var(--u)); background: #171717; color: #fff; font-size: calc(11 * var(--u)); font-weight: 400; letter-spacing: .24em; text-transform: uppercase; } .as-fl-vc-cta .as-fl-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.3; } .as-fl-vc-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: calc(30 * var(--u)) calc(-24 * var(--u)) 0; background: #EDEDED; } .as-fl-vc-griglia span { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: calc(124 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); background: #3A3D36 center / cover no-repeat; color: #fff; font-size: calc(11.5 * var(--u)); font-weight: 300; isolation: isolate; } .as-fl-vc-griglia span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .58)); } .as-fl-vc-griglia small { font-family: var(--f-vc-n); font-size: calc(9.5 * var(--u)); letter-spacing: .1em; opacity: .85; } .as-fl-vc-nota { margin-top: calc(18 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 300; letter-spacing: .02em; text-align: center; color: #9A9A9A; } /* La testata: bianca sulla foto, poi di vetro bianco col filo quando si scende (come Pellegrin). */ .as-fl-vc-testa { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(16 * var(--u)); margin: 0; padding: calc(56 * var(--u)) calc(22 * var(--u)) 0; } .as-fl-vc-testa.is-su { color: #fff; opacity: calc(1 - clamp(0, (var(--corso, 1) - .38) * 6, 1)); } .as-fl-vc-testa.is-giu { color: #171717; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(calc(12 * var(--u))); backdrop-filter: blur(calc(12 * var(--u))); box-shadow: 0 1px 0 #E5E5E5; opacity: clamp(0, (var(--corso, 1) - .38) * 6, 1); } .as-fl-vc-marchio { flex: 1; display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; } .as-fl-vc-marchio .as-lg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); } .as-fl-vc-lingua { font-size: calc(9.5 * var(--u)); letter-spacing: .2em; text-transform: uppercase; opacity: .75; } .as-fl-vc-menu { display: grid; gap: calc(6 * var(--u)); width: calc(22 * var(--u)); } .as-fl-vc-menu i { height: 1px; background: currentColor; } /* La conferma della villa. */ .as-fl-vc-ok { --ok-fondo: #fff; color: #2B2B2B; font-family: var(--f-vc); } .as-fl-vc-ok > :not(.as-fl-ok__maniglia) { left: calc(24 * var(--u)); right: calc(24 * var(--u)); } .as-fl-vc-ok__foto { top: calc(26 * var(--u)); height: calc(148 * var(--u)); background: #CFCFC9 center 58% / cover no-repeat; filter: saturate(.82); } .as-fl-vc-ok__eti { top: calc(194 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); } .as-fl-vc-ok__eti .as-fl-segno { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #171717; stroke-width: 1.3; } .as-fl-vc-ok__h { top: calc(226 * var(--u)); font-weight: 100; font-size: calc(39 * var(--u)); line-height: 1.04; letter-spacing: -.035em; color: #171717; } .as-fl-vc-ok__t { top: calc(276 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 300; line-height: 1.5; color: #666; } .as-fl-vc-riep { top: calc(340 * var(--u)); height: calc(96 * var(--u)); display: grid; grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr); column-gap: calc(14 * var(--u)); row-gap: calc(3 * var(--u)); align-content: center; padding: 0 calc(12 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(var(--anello, 0) * 2.75 * var(--u)) var(--as-arancio), inset 0 0 0 1px #E2E2E2, 0 calc((4 + var(--anello, 0) * 14) * var(--u)) calc((14 + var(--anello, 0) * 18) * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, .2); } .as-fl-vc-riep__foto { grid-row: 1 / span 3; width: calc(72 * var(--u)); height: calc(72 * var(--u)); background: #CFCFC9 center / cover no-repeat; } .as-fl-vc-riep b { font-family: var(--f-vc-n); font-weight: 500; font-size: calc(12.5 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: #171717; } .as-fl-vc-riep span { font-size: calc(14 * var(--u)); font-weight: 300; color: #444; } .as-fl-vc-riep small { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 300; color: #8A8A8A; } .as-fl-vc-riep .as-fl-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 1.4; } .as-fl-vc-ok__k { top: calc(464 * var(--u)); } .as-fl-vc-passi { top: calc(490 * var(--u)); margin: 0; padding: 0; list-style: none; border-top: 1px solid #EDEDED; } .as-fl-vc-passi li { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(50 * var(--u)); border-bottom: 1px solid #EDEDED; font-size: calc(14 * var(--u)); font-weight: 300; color: #2B2B2B; } .as-fl-vc-passi b { font-family: var(--f-vc-n); font-weight: 500; font-size: calc(11 * var(--u)); letter-spacing: .1em; color: #A1A1A1; } .as-fl-vc-passi i { margin-left: auto; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; overflow: hidden; } .as-fl-vc-ok__btn { top: calc(668 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); box-shadow: inset 0 0 0 1px #171717; font-size: calc(10.5 * var(--u)); letter-spacing: .2em; text-transform: uppercase; color: #171717; } .as-fl-vc-ok__btn .as-fl-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 1.3; } /* ─── CONCESSIONARIA · Autosalone Bellini, alla proposta B di Cibrèo: carta, inchiostro, un blu ─── */ .as-fl-sito--concessionaria { --s-fondo: #F1EFE8; --s-ink: #0F0F10; --corsa: calc(-545 * var(--u)); font-family: var(--f-ab-t); } .as-fl-ab-testa { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(14 * var(--u)); margin: 0; padding: calc(56 * var(--u)) calc(18 * var(--u)) 0; background: #F1EFE8; box-shadow: 0 1px 0 rgba(15, 15, 16, calc(var(--corso, 1) * .14)); color: #0F0F10; } .as-fl-ab-marchio { flex: 1; display: flex; align-items: center; gap: calc(9 * var(--u)); font-family: var(--f-ab); font-size: calc(23 * var(--u)); line-height: 1; letter-spacing: .01em; text-transform: uppercase; } .as-fl-ab-marchio .as-lg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(7 * var(--u)); } .as-fl-ab-prova { font-family: var(--f-ab); font-size: calc(15 * var(--u)); letter-spacing: .02em; text-transform: uppercase; } .as-fl-ab-menu { display: grid; gap: calc(5 * var(--u)); width: calc(22 * var(--u)); } .as-fl-ab-menu i { height: calc(2 * var(--u)); background: currentColor; } .as-fl-ab-hero { padding: calc(128 * var(--u)) calc(20 * var(--u)) 0; color: #0F0F10; } .as-fl-ab-h1 { font-family: var(--f-ab); font-size: calc(66 * var(--u)); line-height: .92; letter-spacing: -.005em; text-transform: uppercase; } .as-fl-ab-pol { display: inline-block; width: 1em; height: .72em; margin-left: .05em; vertical-align: .04em; border: .045em solid #fff; background: #D9D6CC center 60% / 150% no-repeat; box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) calc(-12 * var(--u)) rgba(15, 15, 16, .5); transform: rotate(-5deg); } .as-fl-ab-pol.is-dx { transform: rotate(6deg); } .as-fl-ab-pil { display: inline-block; width: 1.24em; height: .62em; margin-left: .07em; vertical-align: .08em; border-radius: 999px; background: #D9D6CC center 40% / cover no-repeat; } .as-fl-ab-lede { margin-top: calc(22 * var(--u)); max-width: calc(310 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.45; color: rgba(15, 15, 16, .78); } .as-fl-ab-link { display: flex; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); font-family: var(--f-ab); font-size: calc(15 * var(--u)); letter-spacing: .03em; text-transform: uppercase; } .as-fl-ab-link i { font-family: var(--f-ab-t); font-style: normal; font-weight: 700; color: #1F4FD8; } .as-fl-ab-banda { position: relative; height: calc(250 * var(--u)); margin: calc(30 * var(--u)) calc(14 * var(--u)) 0; overflow: hidden; border-radius: calc(10 * var(--u)); background: #3B3B3B center 42% / cover no-repeat; color: #fff; isolation: isolate; } .as-fl-ab-banda::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 15, 16, .42), rgba(15, 15, 16, .12) 42%, rgba(15, 15, 16, .58)); } .as-fl-ab-banda__t { position: absolute; top: calc(24 * var(--u)); left: 0; right: 0; font-family: var(--f-ab); font-size: calc(24 * var(--u)); line-height: .95; text-align: center; text-transform: uppercase; } .as-fl-ab-marquee { position: absolute; left: 0; bottom: calc(18 * var(--u)); display: flex; width: max-content; margin: 0; font-family: var(--f-ab); font-size: calc(58 * var(--u)); line-height: 1; text-transform: uppercase; white-space: nowrap; } .as-fl-ab-marquee span { display: flex; align-items: center; gap: .22em; padding-right: .22em; } .as-fl-ab-marquee i { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: #1F4FD8; } .as-flusso[data-mondo="concessionaria"] .as-fl-ab-marquee { animation: as-fl-scorre 16s linear infinite; } .as-fl-ab-auto { padding: calc(30 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)); color: #0F0F10; } .as-fl-ab-sez { display: flex; justify-content: space-between; align-items: baseline; padding-top: calc(10 * var(--u)); border-top: 1px solid #0F0F10; font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(15, 15, 16, .62); } .as-fl-ab-sez b { font-family: var(--f-ab); font-weight: 400; font-size: calc(20 * var(--u)); letter-spacing: .01em; color: #0F0F10; } .as-fl-ab-foto { position: relative; display: block; height: calc(196 * var(--u)); margin-top: calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: #E4E1D8 center 66% / 118% no-repeat; } .as-fl-ab-foto em { position: absolute; right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: rgba(15, 15, 16, .62); color: #fff; font-size: calc(11 * var(--u)); font-style: normal; font-weight: 600; } .as-fl-ab-nome { margin-top: calc(14 * var(--u)); font-family: var(--f-ab); font-size: calc(30 * var(--u)); line-height: .95; text-transform: uppercase; } .as-fl-ab-meta { margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(15, 15, 16, .6); } .as-fl-ab-meta.is-k { margin-top: calc(16 * var(--u)); } .as-fl-ab-prezzo { display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); } .as-fl-ab-prezzo b { font-family: var(--f-ab); font-weight: 400; font-size: calc(32 * var(--u)); line-height: 1; } .as-fl-ab-prezzo span { font-size: calc(13 * var(--u)); font-weight: 600; color: rgba(15, 15, 16, .7); } .as-fl-ab-pill { display: flex; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); } .as-fl-ab-pill span { display: grid; place-items: center; height: calc(34 * var(--u)); padding: 0 calc(13 * var(--u)); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15, 15, 16, .2); font-size: calc(13 * var(--u)); font-weight: 600; } .as-fl-ab-pill .is-on { background: #0F0F10; color: #fff; box-shadow: none; } .as-fl-ab-pill .is-no { color: rgba(15, 15, 16, .3); text-decoration: line-through; } .as-fl-ab-cta { display: flex; align-items: center; justify-content: space-between; height: calc(60 * var(--u)); margin-top: calc(18 * var(--u)); padding: 0 calc(7 * var(--u)) 0 calc(24 * var(--u)); border-radius: 999px; background: #0F0F10; color: #fff; } .as-fl-ab-cta b { font-family: var(--f-ab); font-weight: 400; font-size: calc(20 * var(--u)); letter-spacing: .02em; text-transform: uppercase; } .as-fl-ab-cta i { display: grid; place-items: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: #1F4FD8; } .as-fl-ab-cta .as-fl-ic { width: calc(19 * var(--u)); height: calc(19 * var(--u)); stroke-width: 2; } .as-fl-ab-ok { --ok-fondo: #F1EFE8; color: #0F0F10; font-family: var(--f-ab-t); } .as-fl-ab-ok > :not(.as-fl-ok__maniglia) { left: calc(20 * var(--u)); right: calc(20 * var(--u)); } .as-fl-ab-ok__h { top: calc(34 * var(--u)); font-family: var(--f-ab); font-size: calc(64 * var(--u)); line-height: .9; letter-spacing: -.005em; text-transform: uppercase; } .as-fl-ab-ok__t { top: calc(168 * var(--u)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(10 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.45; color: rgba(15, 15, 16, .78); } .as-fl-ab-ok__t .as-fl-segno { color: #1F4FD8; stroke-width: 1.8; } .as-fl-ab-riep { top: calc(244 * var(--u)); height: calc(104 * var(--u)); display: grid; grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr); column-gap: calc(14 * var(--u)); align-content: center; padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(var(--anello, 0) * 2.75 * var(--u)) var(--as-arancio), 0 calc((4 + var(--anello, 0) * 14) * var(--u)) calc((14 + var(--anello, 0) * 18) * var(--u)) calc(-8 * var(--u)) rgba(15, 15, 16, .22); } .as-fl-ab-riep__foto { grid-row: 1 / span 3; height: calc(76 * var(--u)); border-radius: calc(6 * var(--u)); background: #E4E1D8 center 66% / 140% no-repeat; } .as-fl-ab-riep b { font-family: var(--f-ab); font-weight: 400; font-size: calc(19 * var(--u)); line-height: 1; text-transform: uppercase; } .as-fl-ab-riep span { margin-top: calc(5 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1F4FD8; } .as-fl-ab-riep small { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(7 * var(--u)); font-size: calc(13 * var(--u)); color: rgba(15, 15, 16, .7); } .as-fl-ab-riep small i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; overflow: hidden; } .as-fl-ab-sez.is-ok { top: calc(378 * var(--u)); } .as-fl-ab-lista { top: calc(418 * var(--u)); margin: 0; padding: 0; list-style: none; } .as-fl-ab-lista li { display: grid; gap: calc(2 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: 1px solid rgba(15, 15, 16, .12); } .as-fl-ab-lista b { font-family: var(--f-ab); font-weight: 400; font-size: calc(17 * var(--u)); text-transform: uppercase; } .as-fl-ab-lista span { font-size: calc(12.5 * var(--u)); color: rgba(15, 15, 16, .62); } .as-fl-ab-cta.is-ok { top: calc(640 * var(--u)); margin: 0; } /* ─── NEGOZIO · Bottega Terra, alla Platinum: cornice, card con la tacca, titoli a due voci ─── */ .as-fl-sito--negozio { --s-fondo: #F4F2EE; --s-ink: #1E1B18; --corsa: calc(-600 * var(--u)); font-family: var(--f-bt); } .as-fl-bt-hero { height: calc(640 * var(--u)); padding: calc(60 * var(--u)) calc(10 * var(--u)) 0; background: #E7DBD1; } .as-fl-bt-palco { position: relative; height: 100%; overflow: hidden; border-radius: calc(28 * var(--u)); color: #fff; text-align: center; isolation: isolate; } @supports (corner-shape: squircle) { .as-fl-bt-palco, .as-fl-bt-card, .as-fl-bt-riep, .as-fl-bt-mazzo__c, .as-fl-tg-kpi p, .as-fl-tg-ordini, .as-fl-tg-scorta { corner-shape: squircle; } } .as-fl-bt-palco img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .as-fl-bt-palco::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 27, 24, .3), rgba(30, 27, 24, .06) 30%, rgba(30, 27, 24, .24) 58%, rgba(30, 27, 24, .62)); } .as-fl-bt-palco > p { position: absolute; left: calc(26 * var(--u)); right: calc(26 * var(--u)); } .as-fl-bt-h1 { top: calc(296 * var(--u)); font-weight: 300; font-size: calc(37 * var(--u)); line-height: 1.04; letter-spacing: -.032em; text-shadow: 0 calc(2 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .22); } .as-fl-bt-h1 span { font-weight: 200; color: rgba(255, 255, 255, .62); } .as-fl-bt-lede { top: calc(424 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.45; color: rgba(255, 255, 255, .9); } .as-fl-bt-btn { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(20 * var(--u)) 0 calc(22 * var(--u)); border-radius: calc(30 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; letter-spacing: -.005em; white-space: nowrap; } .as-fl-bt-btn i { flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #BDB8DA; } .as-fl-bt-btn.is-chiaro { background: #fff; color: #1E1B18; } .as-fl-bt-palco > .as-fl-bt-btn { top: calc(484 * var(--u)); left: 50%; right: auto; transform: translateX(-50%); } .as-fl-bt-btn.is-scuro { display: flex; justify-content: space-between; height: calc(54 * var(--u)); padding: 0 calc(24 * var(--u)); background: #1E1B18; color: #fff; font-size: calc(15 * var(--u)); } .as-fl-bt-testa { position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(66 * var(--u)); display: flex; align-items: center; justify-content: space-between; margin: 0; } .as-fl-bt-marchio { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(6 * var(--u)); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 500; letter-spacing: -.01em; color: #1E1B18; box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(30, 27, 24, .1); } .as-fl-bt-marchio .as-lg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; } .as-fl-bt-borsa { position: relative; display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; color: #1E1B18; box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(30, 27, 24, .1); } .as-fl-bt-borsa .as-fl-ic { width: calc(19 * var(--u)); height: calc(19 * var(--u)); stroke-width: 1.6; } .as-fl-bt-borsa em { position: absolute; top: calc(-5 * var(--u)); right: calc(-5 * var(--u)); display: grid; place-items: center; min-width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 999px; background: #BDB8DA; color: #1E1B18; font-size: calc(10.5 * var(--u)); font-style: normal; font-weight: 600; } .as-fl-bt-prod { position: relative; padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u)); color: #1E1B18; } .as-fl-bt-eti { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(30, 27, 24, .55); } .as-fl-bt-eti::before { content: ""; flex: none; width: calc(22 * var(--u)); height: 1px; background: currentColor; } .as-fl-bt-h2 { margin-top: calc(10 * var(--u)); font-weight: 300; font-size: calc(28 * var(--u)); line-height: 1.08; letter-spacing: -.028em; } .as-fl-bt-h2 span { font-weight: 200; color: rgba(30, 27, 24, .5); } /* La card con la tacca in alto a destra (la maschera della home, v0.52, sulle misure del telefono) e il dischetto nel buco, FRATELLO della card (dentro, la maschera lo cancellerebbe). */ .as-fl-bt-card, .as-fl-bt-riep { --nt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 74'%3E%3Cpath d='M72 74A16 16 0 0 0 56 58L50 58A34 34 0 0 1 16 24L16 18A16 16 0 0 0 0 2L0 0L74 0L74 74Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask: var(--nt) right calc(-1 * var(--u)) top calc(-1 * var(--u)) / calc(74 * var(--u)) calc(74 * var(--u)) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--nt) right calc(-1 * var(--u)) top calc(-1 * var(--u)) / calc(74 * var(--u)) calc(74 * var(--u)) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; } .as-fl-bt-card { position: relative; height: calc(330 * var(--u)); margin-top: calc(16 * var(--u)); overflow: hidden; border-radius: calc(24 * var(--u)); background: #ECE7E1; } .as-fl-bt-card__foto { position: absolute; inset: 0; background: center 55% / cover no-repeat; } .as-fl-bt-card__eti { position: absolute; left: calc(14 * var(--u)); bottom: calc(14 * var(--u)); padding: calc(7 * var(--u)) calc(13 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .88); font-size: calc(11.5 * var(--u)); font-weight: 500; color: #1E1B18; } .as-fl-bt-disco { position: absolute; top: calc(152 * var(--u)); right: calc(24 * var(--u)); display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #1E1B18; color: #fff; } .as-fl-bt-disco .as-fl-ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.8; } .as-fl-bt-prezzo { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); } .as-fl-bt-prezzo b { font-weight: 400; font-size: calc(23 * var(--u)); letter-spacing: -.02em; } .as-fl-bt-stelle { display: flex; gap: calc(1 * var(--u)); color: #1E1B18; } .as-fl-bt-stelle .as-fl-ic { width: calc(12 * var(--u)); height: calc(12 * var(--u)); } .as-fl-bt-prezzo small { font-size: calc(12 * var(--u)); color: rgba(30, 27, 24, .55); } .as-fl-bt-tinte { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); } .as-fl-bt-tinte i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #2A3B66; } .as-fl-bt-tinte i:nth-child(2) { background: #EDE6DA; box-shadow: inset 0 0 0 1px rgba(30, 27, 24, .14); } .as-fl-bt-tinte i:nth-child(3) { background: #8FA390; } .as-fl-bt-tinte i.is-on { box-shadow: 0 0 0 calc(2 * var(--u)) #F4F2EE, 0 0 0 calc(3.5 * var(--u)) #1E1B18; } .as-fl-bt-tinte span { margin-left: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: rgba(30, 27, 24, .65); } .as-fl-bt-tinte b { font-weight: 500; color: #1E1B18; } .as-fl-bt-qta { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(12.5 * var(--u)); color: rgba(30, 27, 24, .7); } .as-fl-bt-qta > span:last-child { display: flex; align-items: center; gap: calc(6 * var(--u)); } .as-fl-bt-qta .as-fl-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6; } .as-fl-bt-passo { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: 999px; background: #fff; } .as-fl-bt-passo i { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #ECE7E1; color: #1E1B18; } .as-fl-bt-passo b { min-width: calc(24 * var(--u)); text-align: center; font-size: calc(15 * var(--u)); font-weight: 500; color: #1E1B18; } .as-fl-bt-prod > .as-fl-bt-btn.is-scuro { margin-top: calc(16 * var(--u)); } .as-fl-bt-ok { --ok-fondo: #F4F2EE; color: #1E1B18; font-family: var(--f-bt); } .as-fl-bt-ok > :not(.as-fl-ok__maniglia) { left: calc(24 * var(--u)); right: calc(24 * var(--u)); } .as-fl-bt-ok__h { top: calc(36 * var(--u)); font-weight: 300; font-size: calc(32 * var(--u)); line-height: 1.06; letter-spacing: -.03em; } .as-fl-bt-ok__h span { font-weight: 200; color: rgba(30, 27, 24, .5); } .as-fl-bt-ok__h .as-fl-segno { width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-bottom: calc(14 * var(--u)); color: #7A4430; stroke-width: 1.4; } .as-fl-bt-ok__t { top: calc(170 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.5; color: rgba(30, 27, 24, .65); } .as-fl-bt-riep { top: calc(214 * var(--u)); height: calc(112 * var(--u)); display: grid; grid-template-columns: calc(80 * var(--u)) minmax(0, 1fr); column-gap: calc(14 * var(--u)); row-gap: calc(3 * var(--u)); align-content: center; padding: 0 calc(52 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(22 * var(--u)); background: #fff; outline: calc(var(--anello, 0) * 2.75 * var(--u)) solid var(--as-arancio); outline-offset: 0; } .as-fl-bt-riep__foto { grid-row: 1 / span 3; width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: calc(16 * var(--u)); background: center / cover no-repeat; } .as-fl-bt-riep b { font-size: calc(15 * var(--u)); font-weight: 500; letter-spacing: -.01em; } .as-fl-bt-riep span { font-size: calc(13 * var(--u)); color: rgba(30, 27, 24, .65); } .as-fl-bt-riep small { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; color: #7A4430; } .as-fl-bt-riep .as-fl-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.7; } .as-fl-bt-riep__disco { top: calc(214 * var(--u)); right: calc(24 * var(--u)); left: auto !important; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #BDB8DA; color: #1E1B18; } .as-fl-bt-riep__disco .as-fl-ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.2; } .as-fl-bt-ok__k { top: calc(356 * var(--u)); } .as-fl-bt-mazzo { top: calc(386 * var(--u)); height: calc(250 * var(--u)); } .as-fl-bt-mazzo__c { position: absolute; top: 0; border-radius: calc(22 * var(--u)); } .as-fl-bt-mazzo__c.is-1 { left: 0; top: calc(22 * var(--u)); width: calc(250 * var(--u)); height: calc(170 * var(--u)); background: #1E1B18; } .as-fl-bt-mazzo__c.is-2 { left: calc(12 * var(--u)); top: calc(11 * var(--u)); width: calc(270 * var(--u)); height: calc(185 * var(--u)); background: #BDB8DA; } .as-fl-bt-mazzo__c.is-3 { left: calc(24 * var(--u)); right: 0; height: calc(200 * var(--u)); display: grid; grid-template-columns: calc(120 * var(--u)) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: calc(14 * var(--u)); align-content: end; padding: calc(14 * var(--u)); background: #E7DBD1; } .as-fl-bt-mazzo__c.is-3 > span { grid-row: 1 / span 2; height: calc(172 * var(--u)); border-radius: calc(14 * var(--u)); background: center / cover no-repeat; } .as-fl-bt-mazzo__c.is-3 b { align-self: end; font-size: calc(16 * var(--u)); font-weight: 400; letter-spacing: -.01em; } .as-fl-bt-mazzo__c.is-3 small { font-size: calc(13 * var(--u)); color: rgba(30, 27, 24, .65); } .as-fl-bt-mazzo__frecce { position: absolute; left: calc(24 * var(--u)); top: calc(212 * var(--u)); display: flex; gap: calc(8 * var(--u)); } .as-fl-bt-mazzo__frecce i { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: #1E1B18; color: #fff; } .as-fl-bt-mazzo__frecce .as-fl-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 2; } .as-fl-bt-ok__btn { top: calc(660 * var(--u)); } /* ─── IMPRESA · La tua impresa, alla Sunrise: la card della hero, il pennello, la casetta ─── */ .as-fl-sito--impresa { --s-fondo: #fff; --s-ink: #12313A; --corsa: calc(-429 * var(--u)); font-family: var(--f-ti-t); } .as-fl-ti-testa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: calc(56 * var(--u)) calc(14 * var(--u)) 0 calc(16 * var(--u)); background: #fff; box-shadow: 0 1px 0 rgba(18, 49, 58, calc(var(--corso, 1) * .1)); } .as-fl-ti-marchio { display: flex; align-items: center; gap: calc(9 * var(--u)); font-family: var(--f-ti); font-weight: 600; font-size: calc(16 * var(--u)); letter-spacing: -.02em; color: #12313A; } .as-fl-ti-marchio .as-lg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8 * var(--u)); } .as-fl-ti-quadri { display: flex; gap: calc(6 * var(--u)); } .as-fl-ti-quadri i { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(8 * var(--u)); } .as-fl-ti-quadri .is-menta { background: #A6DB8E; color: #12313A; } .as-fl-ti-quadri .is-petrolio { background: #1E4D5C; color: #fff; } .as-fl-ti-quadri .is-scuro { background: #12313A; color: #fff; } .as-fl-ti-quadri .as-fl-ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.8; } .as-fl-ti-hero { padding: calc(118 * var(--u)) calc(12 * var(--u)) 0; } .as-fl-ti-card { position: relative; height: calc(450 * var(--u)); overflow: hidden; border-radius: calc(18 * var(--u)); color: #fff; isolation: isolate; } .as-fl-ti-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; } .as-fl-ti-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 30, 36, 0) 34%, rgba(10, 30, 36, .74)); } .as-fl-ti-h1 { position: absolute; left: calc(20 * var(--u)); right: calc(18 * var(--u)); bottom: calc(86 * var(--u)); font-family: var(--f-ti); font-weight: 500; font-size: calc(33 * var(--u)); line-height: 1.08; letter-spacing: -.025em; } .as-fl-ti-pennello { position: relative; display: inline-block; color: #C6EDB4; } .as-fl-ti-pennello svg { position: absolute; left: -3%; bottom: calc(-9 * var(--u)); width: 106%; height: calc(14 * var(--u)); overflow: visible; fill: none; stroke: #A6DB8E; stroke-width: calc(4.5 * var(--u)); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; } .as-fl-ti-pennello svg path { vector-effect: non-scaling-stroke; } .as-flusso[data-mondo="impresa"] .as-fl-ti-pennello svg { animation: as-fl-pennello 1.4s .5s cubic-bezier(.65, 0, .35, 1) both; } .as-fl-ti-bottoni { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(24 * var(--u)); display: flex; gap: calc(8 * var(--u)); margin: 0; } .as-fl-ti-bottoni span { display: grid; place-items: center; height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; } .as-fl-ti-bottoni .is-chiaro { background: #A6DB8E; color: #12313A; } .as-fl-ti-bottoni .is-pieno { background: #1E4D5C; color: #fff; } .as-fl-ast { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: #6FBF5E; stroke-width: 3.2; stroke-linecap: round; } .as-fl-ti-garanzie { margin: calc(10 * var(--u)) calc(22 * var(--u)) 0; padding: 0; list-style: none; } .as-fl-ti-garanzie li { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(48 * var(--u)); border-bottom: 1px solid rgba(18, 49, 58, .12); font-size: calc(15 * var(--u)); font-weight: 500; color: #12313A; } .as-fl-ti-modulo { margin: calc(22 * var(--u)) calc(12 * var(--u)) calc(30 * var(--u)); padding: calc(24 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); border-radius: calc(22 * var(--u)); background: #F3F6F2; color: #12313A; } .as-fl-ti-eti { font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .12em; text-align: center; text-transform: uppercase; color: #3F8B57; } .as-fl-ti-h2 { margin-top: calc(6 * var(--u)); font-family: var(--f-ti); font-weight: 500; font-size: calc(24 * var(--u)); letter-spacing: -.022em; text-align: center; } .as-fl-ti-campo { display: grid; gap: calc(3 * var(--u)); margin-top: calc(14 * var(--u)); padding-bottom: calc(8 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid rgba(18, 49, 58, .22); font-size: calc(15 * var(--u)); } .as-fl-ti-campo small { font-size: calc(11 * var(--u)); font-weight: 500; color: rgba(18, 49, 58, .6); } .as-fl-ti-k { margin-top: calc(16 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; } .as-fl-ti-chip { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); } .as-fl-ti-chip span { display: grid; place-items: center; height: calc(32 * var(--u)); padding: 0 calc(13 * var(--u)); border-radius: calc(7 * var(--u)); background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 49, 58, .18); font-size: calc(13 * var(--u)); font-weight: 500; } .as-fl-ti-chip .is-on { background: #1E4D5C; color: #fff; box-shadow: none; } .as-fl-ti-foto { display: flex; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); } .as-fl-ti-foto span, .as-fl-ti-foto em { width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: calc(10 * var(--u)); background: center / cover no-repeat; } .as-fl-ti-foto em { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(18, 49, 58, .2); color: #1E4D5C; font-style: normal; } .as-fl-ti-foto .as-fl-ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 1.6; } .as-fl-ti-cta { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); margin-top: calc(18 * var(--u)); border-radius: calc(8 * var(--u)); background: #1E4D5C; color: #fff; font-size: calc(15.5 * var(--u)); font-weight: 600; } .as-fl-ti-cta .as-fl-ic { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 2; } .as-fl-ti-ok { --ok-fondo: #fff; color: #12313A; font-family: var(--f-ti-t); text-align: center; } .as-fl-ti-ok > :not(.as-fl-ok__maniglia):not(.as-fl-ti-casa):not(.as-fl-ast) { left: calc(22 * var(--u)); right: calc(22 * var(--u)); } .as-fl-ti-casa { top: calc(30 * var(--u)); left: 50%; width: calc(196 * var(--u)); height: calc(170 * var(--u)); margin-left: calc(-98 * var(--u)); background: #D7DEDD center 45% / cover no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196 170'%3E%3Cpath d='M91 4.5a11 11 0 0 1 14 0l81 63A26 26 0 0 1 196 88v62a20 20 0 0 1-20 20H20A20 20 0 0 1 0 150V88a26 26 0 0 1 10-20.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196 170'%3E%3Cpath d='M91 4.5a11 11 0 0 1 14 0l81 63A26 26 0 0 1 196 88v62a20 20 0 0 1-20 20H20A20 20 0 0 1 0 150V88a26 26 0 0 1 10-20.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .as-fl-ti-casa__ast { top: calc(34 * var(--u)); left: calc(282 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); } .as-fl-ti-ok__h { top: calc(218 * var(--u)); font-family: var(--f-ti); font-weight: 500; font-size: calc(28 * var(--u)); letter-spacing: -.022em; } .as-fl-ti-ok__t { top: calc(258 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.45; color: rgba(18, 49, 58, .72); } .as-fl-ti-riep { top: calc(320 * var(--u)); height: calc(104 * var(--u)); display: grid; grid-template-columns: calc(78 * var(--u)) minmax(0, 1fr); column-gap: calc(14 * var(--u)); row-gap: calc(3 * var(--u)); align-content: center; padding: 0 calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: #F3F6F2; text-align: left; box-shadow: 0 0 0 calc(var(--anello, 0) * 2.75 * var(--u)) var(--as-arancio), 0 calc((2 + var(--anello, 0) * 14) * var(--u)) calc((10 + var(--anello, 0) * 18) * var(--u)) calc(-8 * var(--u)) rgba(18, 49, 58, .22); } .as-fl-ti-riep__foto { position: relative; grid-row: 1 / span 3; width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: calc(12 * var(--u)); background: center / cover no-repeat; } .as-fl-ti-riep__foto em { position: absolute; right: calc(5 * var(--u)); bottom: calc(5 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(18, 49, 58, .72); color: #fff; font-size: calc(11 * var(--u)); font-style: normal; font-weight: 600; } .as-fl-ti-riep b { font-family: var(--f-ti); font-weight: 500; font-size: calc(17 * var(--u)); letter-spacing: -.01em; } .as-fl-ti-riep span { font-size: calc(13 * var(--u)); color: rgba(18, 49, 58, .7); } .as-fl-ti-riep small { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; color: #1E4D5C; } .as-fl-ti-riep .as-fl-ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 1.8; } .as-fl-ti-passi { top: calc(452 * var(--u)); margin: 0; padding: 0; list-style: none; text-align: left; } .as-fl-ti-passi li { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(52 * var(--u)); border-bottom: 1px solid rgba(18, 49, 58, .1); font-size: calc(14.5 * var(--u)); } .as-fl-ti-passi b { font-weight: 500; } .as-fl-ti-passi i { margin-left: auto; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; overflow: hidden; } .as-fl-ti-cta.is-ok { top: calc(642 * var(--u)); margin: 0; } /* ══ I GESTIONALI SUL PORTATILE (in px dell'app: calc(N * var(--p)), 812 × 527, schermo intero) ══ La testata tiene libera la fascia del notch (al centro, 106 px) e un gruppo per parte. Le ancore del bersaglio sono dentro i pezzi che cambiano; l'ingresso è sul bordo sinistro del coperchio, alla stessa altezza (lo script); le uscite sul bordo destro. */ .as-fl-pc { --p: calc(var(--u) * 1.862); } .as-fl-pc [data-ancora="uscita-a"] { left: 63em; top: 32.85em; } .as-fl-pc [data-ancora="uscita-b"] { left: 63em; top: 12.8em; } .as-fl-pc [data-ancora="ingresso"] { left: 3em; top: 18em; } .as-fl-app { display: grid; grid-template-columns: minmax(0, 1fr) calc(252 * var(--p)); grid-template-rows: calc(46 * var(--p)) minmax(0, 1fr); overflow: hidden; background: var(--g-fondo, #fff); color: var(--g-ink, #111); font-size: calc(11 * var(--p)); line-height: 1.3; -webkit-font-smoothing: antialiased; } .as-fl-pc-testa { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--p)); padding: 0 calc(18 * var(--p)); } .as-fl-pc-testa > p { display: flex; align-items: center; margin: 0; } /* Le liste che si fanno spazio quando arriva la voce nuova (la prima scende da sopra: --arrivo da 0 a 1 lo scrive lo script, --passo è l'altezza della voce nuova). */ .as-fl-lista > * { transform: translateY(calc((var(--arrivo, 1) - 1) * var(--passo, 60px))); } .as-fl-lista > .is-nuova { opacity: var(--arrivo, 1); } .as-fl-conta { font-variant-numeric: tabular-nums; } /* Matrimoni (alla Pellegrin): bianco, righe da 1px, numeri sottilissimi. */ .as-fl-app--matrimoni { --g-fondo: #fff; --g-ink: #171717; font-family: var(--f-vc); font-weight: 300; } .as-fl-vg-testa { border-bottom: 1px solid #EDEDED; } .as-fl-vg-marchio { gap: calc(9 * var(--p)); font-size: calc(9 * var(--p)); letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; } .as-fl-vg-marchio .as-lg { width: calc(18 * var(--p)); height: calc(18 * var(--p)); } .as-fl-vg-marchio b { font-weight: 400; } .as-fl-vg-marchio span { padding-left: calc(10 * var(--p)); border-left: 1px solid #E2E2E2; color: #A1A1A1; } .as-fl-vg-nav { gap: calc(17 * var(--p)); font-size: calc(10.5 * var(--p)); color: #8A8A8A; } .as-fl-vg-nav .is-on { color: #171717; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: calc(6 * var(--p)); } .as-fl-vg-nav em { font-family: var(--f-vc-n); font-style: normal; font-weight: 500; color: #171717; } .as-fl-vg-nav i { width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: 50%; overflow: hidden; } .as-fl-vg-main { position: relative; min-width: 0; padding: calc(20 * var(--p)) calc(22 * var(--p)) 0; } .as-fl-vg-eti { display: flex; align-items: baseline; gap: calc(8 * var(--p)); font-size: calc(8 * var(--p)); letter-spacing: .42em; text-transform: uppercase; color: #9A9A9A; } .as-fl-vg-eti .as-fl-conta { font-family: var(--f-vc-n); font-size: calc(10 * var(--p)); font-weight: 500; letter-spacing: .05em; color: #171717; } .as-fl-vg-h { margin-top: calc(8 * var(--p)); font-weight: 100; font-size: calc(30 * var(--p)); line-height: 1.02; letter-spacing: -.035em; color: #171717; } .as-fl-vg-numeri { position: absolute; top: calc(34 * var(--p)); right: calc(22 * var(--p)); display: flex; gap: calc(24 * var(--p)); } /* Da telefono (colonna) del portatile si vede la metà sinistra: i numeri, alzati a 11px, finivano sul titolo. */ .as-flusso--colonna .as-fl-vg-numeri { display: none; } .as-fl-vg-numeri > span { display: grid; gap: calc(3 * var(--p)); text-align: right; } .as-fl-vg-numeri .as-fl-conta { font-weight: 100; font-size: calc(34 * var(--p)); line-height: 1; letter-spacing: -.035em; color: #171717; } .as-fl-vg-numeri small { font-size: calc(7.5 * var(--p)); letter-spacing: .3em; text-transform: uppercase; color: #9A9A9A; } .as-fl-vg-stag { display: grid; gap: 1px; margin-top: calc(18 * var(--p)); border: 1px solid #EDEDED; background: #EDEDED; } .as-fl-vg-riga { display: grid; grid-template-columns: calc(40 * var(--p)) repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0; } .as-fl-vg-mese { display: grid; align-items: center; padding-left: calc(9 * var(--p)); background: #FAFAF8; font-family: var(--f-vc-n); font-size: calc(9.5 * var(--p)); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #666; } .as-fl-vg-d { position: relative; display: grid; align-content: space-between; height: calc(40 * var(--p)); padding: calc(6 * var(--p)) calc(8 * var(--p)); background: #fff; } .as-fl-vg-d b { font-family: var(--f-vc-n); font-size: calc(11 * var(--p)); font-weight: 500; line-height: 1; color: #171717; } .as-fl-vg-d small { overflow: hidden; font-size: calc(9 * var(--p)); line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; color: #555; } .as-fl-vg-d .as-fl-ic { position: absolute; top: calc(6 * var(--p)); right: calc(6 * var(--p)); width: calc(10 * var(--p)); height: calc(10 * var(--p)); stroke-width: 1.4; } .as-fl-vg-d.is-c { background: #F1EFEA; } .as-fl-vg-d.is-c b { color: #171717; } .as-fl-vg-d.is-c small { color: #4A4A4A; } .as-fl-vg-d.is-o { box-shadow: inset 0 0 0 1px #171717; } .as-fl-vg-d.is-l b, .as-fl-vg-prima b { color: #A1A1A1; } .as-fl-vg-d.is-l small, .as-fl-vg-d.is-x small, .as-fl-vg-prima small { font-size: calc(7.5 * var(--p)); letter-spacing: .16em; text-transform: uppercase; color: #B5B5B5; } .as-fl-vg-d.is-x { background: repeating-linear-gradient(135deg, #F6F6F4 0 calc(4 * var(--p)), #EEEEEA calc(4 * var(--p)) calc(8 * var(--p))); } .as-fl-vg-d.is-x b { color: #B5B5B5; } .as-fl-vg-d.is-bersaglio { padding: 0; } .as-fl-vg-prima, .as-fl-vg-dopo { position: absolute; inset: 0; display: grid; align-content: space-between; padding: calc(6 * var(--p)) calc(8 * var(--p)); background: #fff; } .as-fl-vg-prima { opacity: calc(1 - var(--arrivo, 1)); } .as-fl-vg-dopo { opacity: var(--arrivo, 1); box-shadow: inset 0 0 0 1px #171717, 0 0 0 calc(var(--arrivo, 1) * 4 * var(--p)) rgba(23, 23, 23, .1); } .as-fl-vg-d.is-bersaglio [data-ancora="bersaglio"] { left: calc(8 * var(--p)); top: 50%; } .as-fl-vg-legenda { display: flex; gap: calc(18 * var(--p)); margin-top: calc(11 * var(--p)); font-size: calc(7.5 * var(--p)); letter-spacing: .26em; text-transform: uppercase; color: #9A9A9A; } .as-fl-vg-legenda span::before { content: ""; display: inline-block; width: calc(8 * var(--p)); height: calc(8 * var(--p)); margin-right: calc(7 * var(--p)); vertical-align: -1px; } .as-fl-vg-legenda .is-c::before { background: #E6E3DC; } .as-fl-vg-legenda .is-o::before { box-shadow: inset 0 0 0 1px #171717; } .as-fl-vg-legenda .is-l::before { box-shadow: inset 0 0 0 1px #D2D2D2; } .as-fl-vg-lato { min-width: 0; overflow: hidden; padding: calc(20 * var(--p)) calc(18 * var(--p)); background: #FAFAF8; box-shadow: inset 1px 0 0 #EDEDED; } .as-fl-vg-lista { display: grid; margin-top: calc(10 * var(--p)); border-top: 1px solid #E5E5E5; } .as-fl-vg-rich { display: grid; gap: calc(3 * var(--p)); padding: calc(11 * var(--p)) calc(10 * var(--p)); border-bottom: 1px solid #E5E5E5; background: #FAFAF8; } .as-fl-vg-rich b { font-size: calc(12 * var(--p)); font-weight: 400; color: #171717; } .as-fl-vg-rich > span { font-size: calc(10 * var(--p)); color: #666; } .as-fl-vg-rich small { display: flex; align-items: center; gap: calc(6 * var(--p)); font-size: calc(7.5 * var(--p)); letter-spacing: .2em; text-transform: uppercase; color: #9A9A9A; } .as-fl-vg-rich small i { width: calc(16 * var(--p)); height: calc(16 * var(--p)); border-radius: 50%; overflow: hidden; } .as-fl-vg-rich small em { margin-left: auto; padding: calc(2 * var(--p)) calc(6 * var(--p)); box-shadow: inset 0 0 0 1px #171717; font-style: normal; letter-spacing: .18em; color: #171717; } .as-fl-vg-rich.is-nuova { background: #fff; box-shadow: inset calc(2 * var(--p)) 0 0 #171717; } .as-fl-vg-eti.is-sotto { margin-top: calc(22 * var(--p)); } .as-fl-vg-visita { display: grid; grid-template-columns: calc(50 * var(--p)) minmax(0, 1fr); gap: calc(10 * var(--p)); margin: 0; padding: calc(9 * var(--p)) 0; border-bottom: 1px solid #E5E5E5; font-size: calc(9.5 * var(--p)); color: #666; } .as-fl-vg-visita time { display: grid; font-family: var(--f-vc-n); font-size: calc(8.5 * var(--p)); letter-spacing: .1em; text-transform: uppercase; color: #9A9A9A; } .as-fl-vg-visita time b { font-size: calc(12 * var(--p)); font-weight: 500; letter-spacing: .02em; color: #171717; } .as-fl-vg-visita span b { display: block; font-size: calc(11 * var(--p)); font-weight: 400; color: #171717; } /* Concessionaria (alla Cibrèo B): carta, Anton, il blu. */ .as-fl-app--concessionaria { --g-fondo: #F1EFE8; --g-ink: #0F0F10; font-family: var(--f-ab-t); } .as-fl-ag-testa { border-bottom: 1px solid rgba(15, 15, 16, .14); } .as-fl-ag-marchio { gap: calc(8 * var(--p)); font-family: var(--f-ab); font-size: calc(17 * var(--p)); line-height: 1; text-transform: uppercase; } .as-fl-ag-marchio .as-lg { width: calc(22 * var(--p)); height: calc(22 * var(--p)); border-radius: calc(5 * var(--p)); } .as-fl-ag-marchio b { font-weight: 400; } .as-fl-ag-marchio span { margin-left: calc(4 * var(--p)); padding: calc(3 * var(--p)) calc(7 * var(--p)); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15, 15, 16, .2); font-family: var(--f-ab-t); font-size: calc(8 * var(--p)); font-weight: 700; letter-spacing: .08em; color: rgba(15, 15, 16, .6); } .as-fl-ag-nav { gap: calc(16 * var(--p)); font-size: calc(10.5 * var(--p)); font-weight: 600; color: rgba(15, 15, 16, .6); } .as-fl-ag-nav .is-on { color: #0F0F10; box-shadow: 0 calc(5 * var(--p)) 0 calc(-3 * var(--p)) #1F4FD8; } .as-fl-ag-nav em { display: inline-block; width: calc(6 * var(--p)); height: calc(6 * var(--p)); margin-left: calc(4 * var(--p)); border-radius: 50%; background: #1F4FD8; vertical-align: calc(2 * var(--p)); } .as-fl-ag-nav i { width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: 50%; overflow: hidden; } .as-fl-ag-main { min-width: 0; overflow: hidden; padding: calc(16 * var(--p)) calc(22 * var(--p)) 0; } .as-fl-ag-eti { font-size: calc(8.5 * var(--p)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(15, 15, 16, .6); } .as-fl-ag-h { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(4 * var(--p)); font-family: var(--f-ab); font-size: calc(40 * var(--p)); line-height: .95; text-transform: uppercase; } .as-fl-ag-h b { font-weight: 400; color: #1F4FD8; } .as-fl-ag-filtri { display: flex; gap: calc(6 * var(--p)); margin-top: calc(12 * var(--p)); } .as-fl-ag-filtri span { padding: calc(5 * var(--p)) calc(11 * var(--p)); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15, 15, 16, .2); font-size: calc(9.5 * var(--p)); font-weight: 600; } .as-fl-ag-filtri .is-on { background: #0F0F10; color: #fff; box-shadow: none; } .as-fl-ag-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--p)) calc(12 * var(--p)); margin-top: calc(14 * var(--p)); } .as-fl-ag-auto { min-width: 0; } .as-fl-ag-auto__foto { display: block; height: calc(92 * var(--p)); border-radius: calc(6 * var(--p)); background: #E4E1D8 center 64% / 120% no-repeat; } .as-fl-ag-auto > b { display: block; margin-top: calc(7 * var(--p)); font-family: var(--f-ab); font-size: calc(14 * var(--p)); font-weight: 400; line-height: 1; text-transform: uppercase; } .as-fl-ag-auto > small { display: block; margin-top: calc(3 * var(--p)); font-size: calc(8.5 * var(--p)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(15, 15, 16, .55); } .as-fl-ag-auto > p { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--p)); margin: calc(6 * var(--p)) 0 0; } /* Da telefono (colonna) i testi alzati a 11px non stanno in riga: lo stato va sotto il prezzo. */ .as-flusso--colonna .as-fl-ag-auto > p { flex-wrap: wrap; row-gap: calc(4 * var(--p)); } .as-fl-ag-auto strong { font-family: var(--f-ab); font-size: calc(15 * var(--p)); font-weight: 400; } .as-fl-ag-stato { position: relative; display: grid; } .as-fl-ag-stato em { grid-area: 1 / 1; justify-self: end; padding: calc(3 * var(--p)) calc(7 * var(--p)); border-radius: 999px; font-size: calc(8 * var(--p)); font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .as-fl-ag-stato .is-libera { box-shadow: inset 0 0 0 1px rgba(15, 15, 16, .25); color: rgba(15, 15, 16, .7); } .as-fl-ag-stato .is-prova { background: #1F4FD8; color: #fff; } .as-fl-ag-stato .is-prenotata { background: #0F0F10; color: #fff; } .as-fl-ag-prima { opacity: calc(1 - var(--arrivo, 1)); } .as-fl-ag-dopo { opacity: var(--arrivo, 1); box-shadow: 0 0 0 calc(var(--arrivo, 1) * 4 * var(--p)) rgba(31, 79, 216, .2); } .as-fl-ag-stato [data-ancora="bersaglio"] { left: 0; top: 50%; } .as-fl-ag-lato { min-width: 0; overflow: hidden; padding: calc(16 * var(--p)) calc(18 * var(--p)); box-shadow: inset 1px 0 0 rgba(15, 15, 16, .14); } .as-fl-ag-lato__h { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-family: var(--f-ab); font-size: calc(16 * var(--p)); line-height: 1; text-transform: uppercase; } .as-fl-ag-lato__h .as-fl-conta { font-family: var(--f-ab); font-size: calc(26 * var(--p)); font-weight: 400; color: #1F4FD8; } .as-fl-ag-lista { display: grid; gap: calc(6 * var(--p)); margin-top: calc(10 * var(--p)); } .as-fl-ag-fonte { display: grid; grid-template-columns: calc(26 * var(--p)) minmax(0, 1fr) auto; column-gap: calc(8 * var(--p)); row-gap: calc(2 * var(--p)); align-items: center; margin: 0; padding: calc(8 * var(--p)) calc(9 * var(--p)); border-radius: calc(8 * var(--p)); background: rgba(255, 255, 255, .5); } .as-fl-ag-fonte i { grid-row: 1 / span 2; display: grid; place-items: center; width: calc(26 * var(--p)); height: calc(26 * var(--p)); border-radius: 50%; background: #0F0F10; color: #fff; } .as-fl-ag-fonte i.is-sito { background: #1F4FD8; } .as-fl-ag-fonte i.is-tel { background: transparent; box-shadow: inset 0 0 0 1px rgba(15, 15, 16, .3); color: #0F0F10; } .as-fl-ag-fonte .as-fl-ic { width: calc(13 * var(--p)); height: calc(13 * var(--p)); stroke-width: 1.8; } .as-fl-ag-fonte b { font-size: calc(11 * var(--p)); font-weight: 700; } .as-fl-ag-fonte small { font-size: calc(8.5 * var(--p)); font-weight: 600; color: rgba(15, 15, 16, .5); } .as-fl-ag-fonte span { grid-column: 2 / -1; font-size: calc(9.5 * var(--p)); color: rgba(15, 15, 16, .7); } .as-fl-ag-fonte.is-nuova { background: #fff; box-shadow: inset calc(3 * var(--p)) 0 0 #1F4FD8, 0 calc(6 * var(--p)) calc(16 * var(--p)) calc(-10 * var(--p)) rgba(15, 15, 16, .35); } .as-fl-ag-lato__h.is-sotto { margin-top: calc(18 * var(--p)); padding-top: calc(10 * var(--p)); border-top: 1px solid #0F0F10; } .as-fl-ag-agenda { display: grid; margin-top: calc(8 * var(--p)); } .as-fl-ag-agenda p { display: grid; grid-template-columns: calc(44 * var(--p)) minmax(0, 1fr); gap: calc(8 * var(--p)); align-items: center; margin: 0; padding: calc(7 * var(--p)) calc(6 * var(--p)); border-bottom: 1px solid rgba(15, 15, 16, .12); } .as-fl-ag-agenda time { font-family: var(--f-ab); font-size: calc(15 * var(--p)); } .as-fl-ag-agenda span { font-size: calc(9.5 * var(--p)); color: rgba(15, 15, 16, .65); } .as-fl-ag-agenda span b { display: block; font-size: calc(10.5 * var(--p)); font-weight: 700; color: #0F0F10; } .as-fl-ag-agenda p.is-nuova { background: #fff; } .as-fl-ag-agenda p.is-nuova time { color: #1F4FD8; } /* Negozio (alla Platinum): carta, card con la tacca, pillole, lavanda. */ .as-fl-app--negozio { --g-fondo: #F4F2EE; --g-ink: #1E1B18; font-family: var(--f-bt); } .as-fl-tg-testa { justify-content: flex-start; } .as-fl-tg-marchio { gap: calc(7 * var(--p)); font-size: calc(12 * var(--p)); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; } .as-fl-tg-marchio .as-lg { width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: 50%; } .as-fl-tg-marchio b { font-weight: 500; } .as-fl-tg-nav { gap: calc(2 * var(--p)); margin-left: calc(16 * var(--p)) !important; padding: calc(3 * var(--p)); border-radius: 999px; background: #fff; font-size: calc(10 * var(--p)); box-shadow: 0 calc(1 * var(--p)) calc(4 * var(--p)) rgba(30, 27, 24, .06); } .as-fl-tg-nav span { padding: calc(5 * var(--p)) calc(11 * var(--p)); border-radius: 999px; color: rgba(30, 27, 24, .7); } .as-fl-tg-nav .is-on { background: #ECE7E1; color: #1E1B18; font-weight: 500; } .as-fl-tg-destra { gap: calc(8 * var(--p)); margin-left: auto !important; } .as-fl-tg-cerca { display: flex; align-items: center; gap: calc(6 * var(--p)); width: calc(150 * var(--p)); height: calc(26 * var(--p)); padding: 0 calc(10 * var(--p)); border-radius: 999px; background: #fff; font-size: calc(9.5 * var(--p)); color: rgba(30, 27, 24, .5); } .as-fl-tg-cerca .as-fl-ic { width: calc(12 * var(--p)); height: calc(12 * var(--p)); stroke-width: 1.8; } .as-fl-tg-destra i { width: calc(26 * var(--p)); height: calc(26 * var(--p)); border-radius: 50%; overflow: hidden; } .as-fl-tg-main { min-width: 0; overflow: hidden; padding: calc(12 * var(--p)) calc(16 * var(--p)) 0 calc(22 * var(--p)); } .as-fl-tg-h { font-weight: 300; font-size: calc(22 * var(--p)); line-height: 1.1; letter-spacing: -.03em; } .as-fl-tg-h span { font-weight: 200; color: rgba(30, 27, 24, .5); } .as-fl-tg-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--p)); margin-top: calc(12 * var(--p)); } .as-fl-tg-kpi p { --nt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 74'%3E%3Cpath d='M72 74A16 16 0 0 0 56 58L50 58A34 34 0 0 1 16 24L16 18A16 16 0 0 0 0 2L0 0L74 0L74 74Z' fill='%23000'/%3E%3C/svg%3E"); position: relative; display: grid; align-content: end; gap: calc(4 * var(--p)); height: calc(84 * var(--p)); margin: 0; padding: calc(10 * var(--p)) calc(12 * var(--p)); border-radius: calc(16 * var(--p)); -webkit-mask: var(--nt) right calc(-1 * var(--p)) top calc(-1 * var(--p)) / calc(37 * var(--p)) calc(37 * var(--p)) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--nt) right calc(-1 * var(--p)) top calc(-1 * var(--p)) / calc(37 * var(--p)) calc(37 * var(--p)) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; } .as-fl-tg-kpi span { font-size: calc(9 * var(--p)); opacity: .75; } .as-fl-tg-kpi .as-fl-conta, .as-fl-tg-kpi b { font-size: calc(22 * var(--p)); font-weight: 300; line-height: 1; letter-spacing: -.03em; } .as-fl-tg-kpi > div { position: relative; } /* Il dischetto numerato nella tacca, fratello della card (dentro, la maschera lo cancellerebbe). */ .as-fl-tg-kpi em { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: calc(22 * var(--p)); height: calc(22 * var(--p)); border-radius: 50%; background: #1E1B18; color: #fff; font-size: calc(7.5 * var(--p)); font-style: normal; font-weight: 500; } .as-fl-tg-kpi .is-scuro { background: #1E1B18; color: #fff; } .as-fl-tg-kpi .is-argilla { background: #E7DBD1; } .as-fl-tg-kpi .is-pannello { background: #E6E1DA; } .as-fl-tg-kpi .is-lavanda { background: #BDB8DA; } .as-fl-tg-ordini { margin-top: calc(10 * var(--p)); padding: calc(4 * var(--p)) calc(12 * var(--p)) calc(8 * var(--p)); border-radius: calc(16 * var(--p)); background: #fff; } .as-fl-tg-ordini__testa, .as-fl-tg-riga { display: grid; grid-template-columns: calc(70 * var(--p)) minmax(0, 1.2fr) minmax(0, 1.2fr) calc(60 * var(--p)) calc(70 * var(--p)); align-items: center; gap: calc(8 * var(--p)); margin: 0; } .as-fl-tg-ordini__testa { height: calc(28 * var(--p)); border-bottom: 1px solid rgba(30, 27, 24, .1); font-size: calc(8 * var(--p)); letter-spacing: .14em; text-transform: uppercase; color: rgba(30, 27, 24, .5); } .as-fl-tg-righe { display: grid; } .as-fl-tg-riga { position: relative; height: calc(44 * var(--p)); border-bottom: 1px solid rgba(30, 27, 24, .07); font-size: calc(10 * var(--p)); } .as-fl-tg-riga > span { display: grid; min-width: 0; gap: calc(1 * var(--p)); } .as-fl-tg-riga > span:nth-child(3) { display: flex; align-items: center; gap: calc(6 * var(--p)); white-space: nowrap; } .as-fl-tg-riga b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; } .as-fl-tg-riga small { font-size: calc(8.5 * var(--p)); color: rgba(30, 27, 24, .5); } .as-fl-tg-riga span > i { flex: none; width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: calc(7 * var(--p)); background: #ECE7E1 center / cover no-repeat; } .as-fl-tg-riga em { justify-self: start; padding: calc(3 * var(--p)) calc(8 * var(--p)); border-radius: 999px; font-size: calc(8.5 * var(--p)); font-style: normal; font-weight: 500; } .as-fl-tg-riga em.is-spedire { background: #BDB8DA; color: #1E1B18; } .as-fl-tg-riga em.is-spedito { background: #E6E1DA; color: rgba(30, 27, 24, .65); } .as-fl-tg-riga.is-nuova { background: linear-gradient(90deg, rgba(189, 184, 218, .28), rgba(189, 184, 218, 0) 70%); box-shadow: inset calc(2 * var(--p)) 0 0 #1E1B18; } .as-fl-tg-riga [data-ancora="bersaglio"] { left: 0; top: 50%; } .as-fl-tg-lato { min-width: 0; overflow: hidden; padding: calc(12 * var(--p)) calc(18 * var(--p)) calc(12 * var(--p)) calc(6 * var(--p)); } .as-fl-tg-lato__h { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: calc(14 * var(--p)); font-weight: 300; letter-spacing: -.02em; } .as-fl-tg-lato__h i { display: grid; place-items: center; width: calc(22 * var(--p)); height: calc(22 * var(--p)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(30, 27, 24, .3); } .as-fl-tg-lato__h .as-fl-ic { width: calc(11 * var(--p)); height: calc(11 * var(--p)); stroke-width: 1.8; transform: rotate(-45deg); } .as-fl-tg-scorta { margin-top: calc(10 * var(--p)); padding: calc(14 * var(--p)); border-radius: calc(16 * var(--p)); background: #1E1B18; color: #fff; } .as-fl-tg-scorta p { margin: 0; } .as-fl-tg-scorta__nome { display: grid; grid-template-columns: calc(34 * var(--p)) minmax(0, 1fr); column-gap: calc(9 * var(--p)); align-items: center; font-size: calc(10.5 * var(--p)); } .as-fl-tg-scorta__nome i { grid-row: 1 / span 2; width: calc(34 * var(--p)); height: calc(34 * var(--p)); border-radius: calc(10 * var(--p)); background: center / cover no-repeat; } .as-fl-tg-scorta__nome b { font-weight: 500; } .as-fl-tg-scorta__nome small { font-size: calc(9 * var(--p)); color: rgba(255, 255, 255, .55); } .as-fl-tg-scorta__n { display: flex; align-items: baseline; gap: calc(6 * var(--p)); margin-top: calc(14 * var(--p)) !important; } .as-fl-tg-scorta__n .as-fl-conta { font-size: calc(36 * var(--p)); font-weight: 200; line-height: 1; letter-spacing: -.04em; } .as-fl-tg-scorta__n span { font-size: calc(9 * var(--p)); color: rgba(255, 255, 255, .6); } .as-fl-tg-scorta__barra { height: calc(5 * var(--p)); margin-top: calc(10 * var(--p)) !important; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; } .as-fl-tg-scorta__barra i { display: block; height: 100%; width: calc((47.5% - var(--arrivo, 1) * 5%)); border-radius: inherit; background: #BDB8DA; } .as-fl-tg-scorta__min { margin-top: calc(8 * var(--p)) !important; font-size: calc(8 * var(--p)); line-height: 1.4; color: rgba(255, 255, 255, .55); } .as-fl-tg-pezzo { display: flex; align-items: center; gap: calc(8 * var(--p)); margin: 0; padding: calc(8 * var(--p)) 0; border-bottom: 1px solid rgba(30, 27, 24, .08); font-size: calc(10 * var(--p)); } .as-fl-tg-pezzo:first-of-type { margin-top: calc(8 * var(--p)); } .as-fl-tg-pezzo i { width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: calc(7 * var(--p)); background: #ECE7E1 center / cover no-repeat; } .as-fl-tg-pezzo b { margin-left: auto; font-weight: 500; } .as-fl-tg-pezzo b.is-basso { padding: calc(1 * var(--p)) calc(7 * var(--p)); border-radius: 999px; background: #7A4430; color: #fff; } .as-fl-tg-interruttore { display: flex; align-items: center; gap: calc(8 * var(--p)); margin: calc(12 * var(--p)) 0 0; padding: calc(9 * var(--p)) calc(10 * var(--p)); border-radius: calc(12 * var(--p)); background: #fff; font-size: calc(9.5 * var(--p)); } .as-fl-tg-interruttore .as-fl-ic { width: calc(13 * var(--p)); height: calc(13 * var(--p)); stroke-width: 1.7; } .as-fl-tg-interruttore i { position: relative; margin-left: auto; width: calc(28 * var(--p)); height: calc(16 * var(--p)); border-radius: 999px; background: #BDB8DA; } .as-fl-tg-interruttore i::after { content: ""; position: absolute; top: calc(2 * var(--p)); right: calc(2 * var(--p)); width: calc(12 * var(--p)); height: calc(12 * var(--p)); border-radius: 50%; background: #1E1B18; } /* Impresa (alla Sunrise): bianco, pannelli crema arrotondati, il menta, Bricolage e Albert Sans. */ .as-fl-app--impresa { --g-fondo: #fff; --g-ink: #12313A; font-family: var(--f-ti-t); } .as-fl-ig-testa { justify-content: flex-start; border-bottom: 1px solid rgba(18, 49, 58, .08); } .as-fl-ig-marchio { gap: calc(8 * var(--p)); font-family: var(--f-ti); font-size: calc(13 * var(--p)); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; } .as-fl-ig-marchio .as-lg { width: calc(24 * var(--p)); height: calc(24 * var(--p)); border-radius: calc(6 * var(--p)); } .as-fl-ig-marchio b { font-weight: 600; } .as-fl-ig-nav { gap: calc(2 * var(--p)); margin-left: calc(14 * var(--p)) !important; font-size: calc(10 * var(--p)); font-weight: 500; } .as-fl-ig-nav span { padding: calc(5 * var(--p)) calc(10 * var(--p)); border-radius: calc(7 * var(--p)); color: rgba(18, 49, 58, .7); } .as-fl-ig-nav .is-on { background: #F3F6F2; color: #12313A; } .as-fl-ig-destra { gap: calc(8 * var(--p)); margin-left: auto !important; } .as-fl-ig-nuovo { display: flex; align-items: center; gap: calc(5 * var(--p)); height: calc(26 * var(--p)); padding: 0 calc(11 * var(--p)); border-radius: calc(6 * var(--p)); background: #A6DB8E; font-size: calc(9.5 * var(--p)); font-weight: 600; } .as-fl-ig-nuovo .as-fl-ic { width: calc(11 * var(--p)); height: calc(11 * var(--p)); stroke-width: 2.2; } .as-fl-ig-destra i { width: calc(26 * var(--p)); height: calc(26 * var(--p)); border-radius: 50%; overflow: hidden; } .as-fl-ig-main { grid-column: 1 / -1; min-width: 0; overflow: hidden; padding: calc(14 * var(--p)) calc(22 * var(--p)) 0; } .as-fl-ig-h { display: flex; align-items: baseline; gap: calc(10 * var(--p)); font-family: var(--f-ti); font-size: calc(24 * var(--p)); font-weight: 500; letter-spacing: -.025em; } .as-fl-ig-h span { font-family: var(--f-ti-t); font-size: calc(10.5 * var(--p)); font-weight: 400; letter-spacing: 0; color: rgba(18, 49, 58, .55); } .as-fl-ig-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--p)); margin-top: calc(12 * var(--p)); } .as-fl-ig-kpi p { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(10 * var(--p)); height: calc(52 * var(--p)); margin: 0; padding: 0 calc(16 * var(--p)); border-radius: calc(14 * var(--p)); background: #F3F6F2; } .as-fl-ig-kpi .as-fl-ast { width: calc(14 * var(--p)); height: calc(14 * var(--p)); } .as-fl-ig-kpi span { font-size: calc(10 * var(--p)); color: rgba(18, 49, 58, .7); } .as-fl-ig-kpi .as-fl-conta, .as-fl-ig-kpi b { font-family: var(--f-ti); font-size: calc(22 * var(--p)); font-weight: 500; letter-spacing: -.02em; } .as-fl-ig-kpi small { grid-column: 3; justify-self: end; margin-top: calc(-6 * var(--p)); font-size: calc(8.5 * var(--p)); color: rgba(18, 49, 58, .55); } .as-fl-ig-kb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--p)); align-items: start; margin-top: calc(14 * var(--p)); } .as-fl-ig-col { min-width: 0; padding: calc(10 * var(--p)) calc(8 * var(--p)) calc(8 * var(--p)); border-radius: calc(16 * var(--p)); background: #F3F6F2; } .as-fl-ig-col__h { display: flex; align-items: center; gap: calc(6 * var(--p)); margin: 0 0 calc(8 * var(--p)); padding: 0 calc(4 * var(--p)); font-size: calc(10.5 * var(--p)); font-weight: 600; } .as-fl-ig-col__h i { width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: 50%; } .as-fl-ig-col__h .is-nuove { background: #6FBF5E; } .as-fl-ig-col__h .is-sopra { background: #1E4D5C; } .as-fl-ig-col__h .is-prev { background: #8FB3BC; } .as-fl-ig-col__h .is-lavori { background: #12313A; } .as-fl-ig-col__h em { margin-left: auto; padding: calc(1 * var(--p)) calc(7 * var(--p)); border-radius: 999px; background: #fff; font-size: calc(9 * var(--p)); font-style: normal; } .as-fl-ig-carte { display: grid; gap: calc(7 * var(--p)); } .as-fl-ig-col > .as-fl-ig-card + .as-fl-ig-card { margin-top: calc(7 * var(--p)); } .as-fl-ig-card { position: relative; display: grid; gap: calc(3 * var(--p)); padding: calc(9 * var(--p)) calc(10 * var(--p)); border-radius: calc(11 * var(--p)); background: #fff; box-shadow: 0 calc(1 * var(--p)) calc(3 * var(--p)) rgba(18, 49, 58, .06); } .as-fl-ig-card > b { font-size: calc(11 * var(--p)); font-weight: 600; } .as-fl-ig-card > span { font-size: calc(9.5 * var(--p)); color: rgba(18, 49, 58, .65); } .as-fl-ig-card > small { display: flex; align-items: center; gap: calc(5 * var(--p)); font-size: calc(8.5 * var(--p)); font-weight: 500; color: rgba(18, 49, 58, .65); } .as-fl-ig-card > small .as-fl-ic { width: calc(11 * var(--p)); height: calc(11 * var(--p)); stroke-width: 1.8; } .as-fl-ig-card > small em { margin-left: auto; padding: calc(1 * var(--p)) calc(6 * var(--p)); border-radius: calc(5 * var(--p)); background: #A6DB8E; font-style: normal; font-weight: 600; color: #12313A; } .as-fl-ig-card > small.is-euro b { font-weight: 600; color: #12313A; } .as-fl-ig-card__foto { display: flex; gap: calc(4 * var(--p)); margin: calc(3 * var(--p)) 0; } .as-fl-ig-card__foto i { width: calc(30 * var(--p)); height: calc(30 * var(--p)); border-radius: calc(6 * var(--p)); background: center / cover no-repeat; } .as-fl-ig-card__barra { height: calc(5 * var(--p)); margin: calc(3 * var(--p)) 0; border-radius: 999px; background: #E3ECE1; overflow: hidden; } .as-fl-ig-card__barra i { display: block; width: 60%; height: 100%; border-radius: inherit; background: #6FBF5E; } .as-fl-ig-card.is-nuova { box-shadow: 0 0 0 calc(1.5 * var(--p)) #6FBF5E, 0 calc(8 * var(--p)) calc(18 * var(--p)) calc(-10 * var(--p)) rgba(18, 49, 58, .35); } .as-fl-ig-card [data-ancora="bersaglio"] { left: 0; top: calc(16 * var(--p)); } /* La stampante (1em = k): la carta sale dalla fessura, come in una termica vera. */ .as-fl-stampa { position: relative; width: 12em; height: 26em; } /* v0.39: la carta esce DALLA FESSURA (davanti alla faccia di sopra, finisce sulla linea del taglio). */ .as-fl-stampa__uscita { position: absolute; z-index: 2; left: .4em; right: .4em; top: 0; bottom: 5.66em; overflow: hidden; } .as-fl-carta-l { display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 .25em .5em rgba(0, 0, 0, .45)); } .as-fl-carta-l > * { flex: none; } /* La termica vista di fronte e un filo dall'alto (v0.39): la faccia di sopra più chiara con la fessura e la lama del taglio, lo spigolo, il frontale con la giunta dello sportello, tasto e spia, i piedini. */ .as-fl-stampa__corpo { position: absolute; left: 0; right: 0; bottom: 0; height: 6.2em; border-radius: 1.5em 1.5em .7em .7em / 1.05em 1.05em .7em .7em; background: linear-gradient(180deg, #4b4c50 0, #3b3c3f 1em, #2c2d30 1.06em, #262729 2.4em, #1c1d1f 100%); box-shadow: inset 0 .07em 0 rgba(255, 255, 255, .22), inset .07em 0 0 rgba(255, 255, 255, .05), inset -.07em 0 0 rgba(0, 0, 0, .35), inset 0 -.2em .28em rgba(0, 0, 0, .45), 0 1.3em 2.2em -1em rgba(0, 0, 0, .9); } .as-fl-stampa__corpo::before { content: ""; position: absolute; left: .7em; right: .7em; top: 2.55em; height: .05em; background: rgba(0, 0, 0, .5); box-shadow: 0 .05em 0 rgba(255, 255, 255, .06); } .as-fl-stampa__corpo::after { content: ""; position: absolute; z-index: -1; left: 1.2em; bottom: -.2em; width: 1.6em; height: .24em; border-radius: 0 0 .22em .22em; background: #0c0c0d; box-shadow: 8em 0 0 #0c0c0d; } .as-fl-stampa__bocca { position: absolute; left: .75em; right: .75em; top: .44em; height: .2em; border-radius: 999px; background: #030304; box-shadow: 0 .06em 0 rgba(206, 208, 212, .42), 0 -.04em 0 rgba(0, 0, 0, .4); } .as-fl-stampa__led { position: absolute; right: 1.15em; bottom: 1.1em; width: .28em; height: .28em; border-radius: 50%; background: #62D08A; box-shadow: 0 0 .45em rgba(98, 208, 138, .75); } .as-fl-stampa__tasto { position: absolute; right: 1.85em; bottom: 1em; width: 1.25em; height: .48em; border-radius: .24em; background: linear-gradient(180deg, #45464a, #2f3033); box-shadow: inset 0 .05em 0 rgba(255, 255, 255, .12), 0 .05em .08em rgba(0, 0, 0, .5); } .as-fl-stampa [data-ancora="fessura"] { left: 0; top: 23em; } /* ══ LA CARTA (v0.40): un suo em è il testo più piccolo del foglio (.45 della stampante: da telefono la stampante sta a 24,5px o più, quindi 11px veri). A4 23,5 × 33,25em; 10×15 21,33 × 32em. */ .as-fl-doc { --d-t: #1C1C1E; --d-t2: #1C1C1E; display: flex; flex-direction: column; overflow: hidden; width: 23.5em; height: 33.25em; padding: 1.8em 1.9em 1.5em; background: #fff; color: #2A2624; font: 400 .45em/1.3 -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -.005em; } .as-fl-doc--matrimoni { --d-t: #6E1F2B; --d-t2: #2A1A1D; } .as-fl-doc--concessionaria { --d-t: #1F2F46; --d-t2: #0F1B2D; } .as-fl-doc--impresa { --d-t: #1E4D5C; --d-t2: #13303A; } .as-fl-doc__intesta { display: flex; align-items: center; gap: .8em; padding-bottom: .9em; border-bottom: .12em solid var(--d-t); } .as-fl-doc__logo { flex: none; width: 2.7em; height: 2.7em; border-radius: .45em; overflow: hidden; } .as-fl-doc__intesta > span:last-child { display: grid; gap: .1em; line-height: 1.25; color: #7A716B; } .as-fl-doc__intesta b { font-size: 1.15em; font-weight: 700; letter-spacing: .05em; color: var(--d-t2); } .as-fl-doc__titolo { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.1em; } .as-fl-doc__titolo b { font-size: 1.75em; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--d-t2); } .as-fl-doc__titolo em { flex: none; padding: .2em .55em; border-radius: .3em; box-shadow: inset 0 0 0 .1em var(--d-t); color: var(--d-t); font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .as-fl-doc__data { display: grid; gap: .2em; margin-top: .6em; font-size: 1.2em; font-weight: 600; line-height: 1.25; color: var(--d-t2); } .as-fl-doc__data small { font-size: .834em; font-weight: 400; color: #7A716B; } .as-fl-doc__campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em 1.2em; margin-top: 1.1em; padding: 1em 0; border-top: .06em solid #E3DDD7; border-bottom: .06em solid #E3DDD7; } .as-fl-doc__campi span { display: grid; gap: .15em; font-size: 1.1em; font-weight: 600; line-height: 1.2; color: var(--d-t2); } .as-fl-doc__campi small { font-size: .91em; font-weight: 400; color: #7A716B; } .as-fl-doc__campi .is-largo { grid-column: 1 / -1; } .as-fl-doc__k { margin-top: 1.1em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7A716B; } .as-fl-doc__check { display: grid; gap: .45em; margin-top: .55em; } .as-fl-doc__check span { display: flex; align-items: center; gap: .6em; } .as-fl-doc__check span::before { content: ""; flex: none; width: .95em; height: .95em; border-radius: .15em; box-shadow: inset 0 0 0 .1em #3A3431; } .as-fl-doc__voci { display: grid; margin-top: 1em; } .as-fl-doc__voci span { display: flex; justify-content: space-between; gap: 1em; padding: .42em 0; border-bottom: .06em solid #E3DDD7; } .as-fl-doc__voci b { font-weight: 600; font-variant-numeric: tabular-nums; } .as-fl-doc__voci .is-iva { border-bottom: 0; color: #7A716B; } .as-fl-doc__tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: .5em; border-top: .12em solid var(--d-t2); font-size: 1.4em; font-weight: 700; color: var(--d-t2); } .as-fl-doc__tot b { font-variant-numeric: tabular-nums; } .as-fl-doc__nota { margin-top: .6em; color: #7A716B; } .as-fl-doc__firme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4em; margin-top: auto; } .as-fl-doc__firme.is-una { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } .as-fl-doc__firme.is-una span { grid-column: 2; white-space: nowrap; } .as-fl-doc__firme span { padding-top: .4em; border-top: .08em solid #3A3431; color: #7A716B; } /* v0.53: la carta veste l'identità del suo sito, coi suoi caratteri (è lo stesso ecosistema). */ .as-fl-doc--matrimoni { --d-t: #171717; --d-t2: #171717; font-family: var(--f-vc); font-weight: 300; } .as-fl-doc--matrimoni .as-fl-doc__intesta b { font-weight: 300; letter-spacing: .2em; white-space: nowrap; } .as-fl-doc--matrimoni .as-fl-doc__titolo b { font-size: 2.2em; font-weight: 100; letter-spacing: -.035em; } .as-fl-doc--matrimoni .as-fl-doc__titolo em { font-weight: 400; letter-spacing: .2em; } .as-fl-doc--matrimoni :is(.as-fl-doc__data, .as-fl-doc__campi span) { font-weight: 400; } .as-fl-doc--concessionaria { --d-t: #1F4FD8; --d-t2: #0F0F10; background: #FBFAF6; font-family: var(--f-ab-t); } .as-fl-doc--concessionaria :is(.as-fl-doc__intesta b, .as-fl-doc__titolo b) { font-family: var(--f-ab); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; } .as-fl-doc--concessionaria .as-fl-doc__titolo b { font-size: 2.3em; line-height: .95; } .as-fl-doc--impresa { --d-t: #1E4D5C; --d-t2: #12313A; font-family: var(--f-ti-t); } .as-fl-doc--impresa :is(.as-fl-doc__intesta b, .as-fl-doc__titolo b, .as-fl-doc__tot) { font-family: var(--f-ti); font-weight: 600; letter-spacing: -.01em; } .as-fl-doc--impresa .as-fl-doc__titolo b { font-size: 1.9em; font-weight: 500; } /* L'etichetta di spedizione 10×15: stampa termica, nero pieno. */ .as-fl-eti { display: flex; flex-direction: column; width: 21.33em; height: 32em; padding: 1.1em 1.2em 1em; border-radius: .4em; background: #fff; color: #111; font: 400 .45em/1.25 'Helvetica Neue', Helvetica, Arial, sans-serif; } .as-fl-eti > * { flex: none; } .as-fl-eti__corriere { display: flex; align-items: center; gap: .6em; padding-bottom: .8em; border-bottom: .24em solid #111; } .as-fl-eti__corriere b { font-size: 1.8em; font-style: italic; font-weight: 800; letter-spacing: -.03em; } .as-fl-eti__corriere span { padding: .1em .4em; background: #111; color: #fff; font-size: 1.2em; font-weight: 800; } .as-fl-eti__corriere small { margin-left: auto; font-size: 1em; line-height: 1.2; text-align: right; white-space: nowrap; } .as-fl-eti__da { margin-top: .8em; line-height: 1.3; } .as-fl-eti__da small, .as-fl-eti__a small { display: block; margin-bottom: .1em; font-size: 1em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .as-fl-eti__a { margin-top: .8em; padding-top: .8em; border-top: .08em solid #111; font-size: 1.35em; line-height: 1.3; } .as-fl-eti__a small { font-size: .741em; } .as-fl-eti__a b { display: block; font-size: 1.1em; font-weight: 800; } .as-fl-eti__zona { display: flex; align-items: center; justify-content: space-between; margin-top: .9em; padding-top: .9em; border-top: .24em solid #111; } .as-fl-eti__zona b { padding: .08em .3em; background: #111; color: #fff; font-size: 3em; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .as-fl-matrice { display: block; width: 4.8em; height: 4.8em; fill: #111; } .as-fl-barre { display: block; width: 100%; height: 5em; margin-top: auto; fill: #111; } .as-fl-eti__n { margin-top: .35em; text-align: center; letter-spacing: .14em; font-variant-numeric: tabular-nums; } /* ══ IL TELEFONO DEL TITOLARE: lo schermo bloccato di iOS (in punti) ══ La foto, il lucchetto, la data e l'ora grande; UNA notifica in basso, dove iOS le fa arrivare, con l'icona dell'app del gestionale (il logo dell'attività sul suo fondo); torcia e fotocamera. */ .as-fl-blocco { background: #111 center / cover no-repeat; color: #fff; font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; } .as-fl-blocco::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .16); } .as-fl-blocco > * { position: absolute; } .as-fl-blocco__lucchetto { left: calc(191 * var(--u)); top: calc(62 * var(--u)); } .as-fl-blocco__lucchetto .as-fl-ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2.3; } .as-fl-blocco__data { left: 0; right: 0; top: calc(98 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 600; letter-spacing: 0; text-align: center; opacity: .92; } .as-fl-blocco__ora { left: 0; right: 0; top: calc(114 * var(--u)); font-size: calc(106 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -.025em; text-align: center; font-variant-numeric: tabular-nums; opacity: .96; } .as-fl-notifica { left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(642 * var(--u)); display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr); column-gap: calc(11 * var(--u)); align-items: center; padding: calc(13 * var(--u)) calc(15 * var(--u)) calc(14 * var(--u)) calc(13 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(246, 246, 248, .74); -webkit-backdrop-filter: blur(calc(26 * var(--u))) saturate(1.9); backdrop-filter: blur(calc(26 * var(--u))) saturate(1.9); color: #000; transform-origin: 50% 100%; } .as-fl-notifica__app { grid-row: 1 / span 2; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); overflow: hidden; box-shadow: 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .1); } .as-fl-notifica__titolo { display: flex; align-items: baseline; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.3; letter-spacing: -.015em; } .as-fl-notifica__titolo b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-fl-notifica__titolo span { flex: none; font-size: calc(13 * var(--u)); color: rgba(60, 60, 67, .62); } .as-fl-notifica__testo { align-self: start; font-size: calc(15 * var(--u)); line-height: 1.3; letter-spacing: -.015em; color: rgba(0, 0, 0, .86); } .as-fl-blocco__tasto { bottom: calc(37 * var(--u)); display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; background: rgba(28, 28, 32, .44); -webkit-backdrop-filter: blur(calc(12 * var(--u))); backdrop-filter: blur(calc(12 * var(--u))); } .as-fl-blocco__tasto.is-sx { left: calc(47 * var(--u)); } .as-fl-blocco__tasto.is-dx { right: calc(47 * var(--u)); } .as-fl-blocco__tasto .as-fl-ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 1.7; } .as-fl-velo { position: absolute; inset: 0; z-index: 32; background: #000; opacity: 0; pointer-events: none; } .as-fl-tel--scuro [data-ancora="notifica"] { left: calc(8 * var(--u)); top: calc(695 * var(--u)); } /* ── DA TELEFONO (e su touch, e sotto i 900px): LA COLONNA, SENZA PIN (flusso-telefono, 29/09) ── Stesso matchMedia dello script (motion.js, ramo «colonna»). Il quadro in k diventa un viaggio: il telefono del cliente grande, il gestionale in primo piano che esce dal bordo destro (il portatile intero a 390px avrebbe testi da 5px), la stampante al centro, il telefono del titolare intero (v0.40: la notifica arriva in basso, come su iOS). Schede su UNA riga come controllo segmentato, sopra la scena, coi nomi corti. Senza JS: gli oggetti in fila, arrivati, e niente fili. v0.40: la stampante da telefono sta a 24,5px o più, perché il testo più piccolo dei fogli (.45em) resti sopra gli 11px veri. */ @media (max-width: 899px), (hover: none) { .as-flusso { --col: min(calc(100vw - 2 * var(--as-gutter)), 560px); --telf: clamp(14px, calc(var(--col) * .9 / 19.7), 17px); --pcf: clamp(12px, calc(var(--col) * .035), 14px); --stf: max(24.5px, min(calc(var(--col) * .075), 26px)); } .as-flusso__palco { display: flex; flex-direction: column; } .as-flusso__testa { order: 0; width: 100%; max-width: calc(var(--col) + 2 * var(--as-gutter)); margin: 0 auto 28px; gap: 16px; grid-template-columns: minmax(0, 1fr); } .as-flusso__titolo { max-width: 14ch; } .as-flusso__mondi { order: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: var(--col); margin: 0 auto 56px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .as-flusso .as-flusso__mondo { min-width: 0; min-height: 44px; padding: 0 4px; border-radius: 999px; white-space: nowrap; justify-content: center; text-align: center; box-shadow: none; } .as-flusso__mondo.has-corto .as-flusso__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .as-flusso__mondo.has-corto .as-flusso__corto { display: inline; } /* v0.53.1: l'invito sta sopra il controllo segmentato (che ha la sua cornice a pillola); le icone non ci stanno. */ .as-flusso__mondi { position: relative; margin-top: 30px; } .as-flusso__mondi-eti { position: absolute; left: 8px; bottom: calc(100% + 10px); margin: 0; font-size: 15px; } .as-flusso__ic { display: none; } .as-flusso__scena { order: 2; } .as-flusso__chiusa { order: 3; width: 100%; max-width: calc(var(--col) + 2 * var(--as-gutter)); margin-top: 72px; } .as-flusso__nota { order: 4; width: 100%; max-width: calc(var(--col) + 2 * var(--as-gutter)); } .as-flusso__quadro { width: var(--col); height: auto; display: flex; flex-direction: column; gap: 76px; } .as-flusso__posto { position: relative; left: auto; top: auto; width: auto; height: auto; } .as-flusso__oggetto { position: relative; } .as-flusso__didascalia, .is-gestionale .as-flusso__didascalia, .is-carta .as-flusso__didascalia { position: static; width: auto; max-width: 30ch; margin-top: 20px; font-size: 16px; line-height: 1.45; } /* Il cliente: centrato, grande. */ .is-cliente .as-flusso__oggetto { width: calc(20.51 * var(--telf)); margin: 0 auto; } .is-cliente .as-fl-tel, .is-titolare .as-fl-tel { font-size: var(--telf); } .is-cliente .as-flusso__didascalia { text-align: center; margin-inline: auto; } /* Il gestionale: il portatile a --pcf per em (720px a 390) dal bordo della colonna, e il resto esce a destra (la barra a icone e la metà sinistra dell'app, dove c'è il bersaglio). La sezione ha overflow: clip. */ .is-gestionale .as-flusso__oggetto { left: auto; width: calc(66 * var(--pcf)); margin-left: calc(-3 * var(--pcf)); } /* il coperchio (da 3em) sul bordo della colonna, la base sborda come prima */ .is-gestionale .as-fl-pc { font-size: var(--pcf); } /* La carta: la stampante al centro (il filo della carta arriva da sinistra, quello del titolare passa a destra). */ .is-carta .as-flusso__oggetto { width: calc(12 * var(--stf)); margin: 0 auto; } .is-carta .as-fl-stampa { font-size: var(--stf); height: 22em; } .is-carta .as-fl-stampa [data-ancora="fessura"] { top: 19em; } .is-carta .as-flusso__didascalia { text-align: center; margin-inline: auto; } /* Il titolare: intero, con la notifica in basso sopra torcia e fotocamera. */ .is-titolare .as-flusso__oggetto { width: calc(20.51 * var(--telf)); margin: 0 auto; } .is-titolare .as-flusso__didascalia { text-align: center; margin-inline: auto; } /* I fili e i dati: solo con lo script (le misure le prende lui, in px del quadro). */ .as-flusso__fili { display: none; } .as-flusso--colonna .as-flusso__fili { display: block; } .as-flusso--colonna .as-flusso__fili { z-index: 0; } .as-flusso--colonna .as-flusso__fili path { stroke-width: 2; } /* Il filo passa DIETRO le didascalie: il loro fondo è quello della sezione. */ .as-flusso--colonna .as-flusso__didascalia { position: relative; inset: auto; width: fit-content; background: var(--as-carbone); box-shadow: 0 0 0 10px var(--as-carbone); } .as-flusso__dato { font-size: 13px; } .as-flusso__dato.is-piccolo { font-size: 12px; } /* ── IL BINARIO (v0.56, Rami 22/10: «la sezione ecosistema da mobile è una cosa orribile… potresti fare l'animazione di scroll orizzontale anche qui? Occhio che non voglio i mockup di iPhone e MacBook così giganteschi»). Lo mette motion.js (.as-flusso--binario) su schermi alti almeno 500px; altrimenti resta la colonna di sopra. Il titolo scorre via; poi schede e scena si fermano a schermo (pin) e scorrendo la camera va da un dispositivo all'altro, seguendo il dato: telefono del cliente, portatile, stampante, telefono del titolare. Una postazione per larghezza di schermo; ogni dispositivo sta al centro dello spazio libero, i telefoni sono alti al massimo 380px (meno della metà della larghezza: 182px a 390), il portatile sta intero nella larghezza. I testi dentro le schermate diventano piccoli: qui sono un disegno, il racconto lo fanno le didascalie e il dato che viaggia. */ .as-flusso--binario { --b-alto: calc(var(--as-header-h, 64px) + 48px); /* sopra: barra del sito ed etichetta delle schede */ --b-su: calc(var(--b-alto) + 76px); /* sotto le schede */ --b-giu: calc(100svh - 122px); /* sopra le didascalie */ --b-tel-h: clamp(240px, calc(100svh - 330px), 380px); --b-tel: calc(var(--b-tel-h) / 42.82); --b-pc-w: min(calc(100vw - 56px), 470px); --b-pc: calc(var(--b-pc-w) / 66); --b-st-h: clamp(240px, calc(100svh - 330px), 440px); /* v0.56 bis (Rami: «la stampante più grande, da mobile non si legge nulla») */ --b-st: calc(var(--b-st-h) / 26); } .as-flusso--binario .as-flusso__set { display: block; order: 1; position: relative; z-index: 1; width: 100%; height: 100svh; overflow: hidden; } .as-flusso--binario .as-flusso__mondi { position: absolute; z-index: 4; left: 50%; top: var(--b-alto); width: var(--col); margin: 0; transform: translateX(-50%); } .as-flusso--binario .as-flusso__scena { position: absolute; inset: 0; z-index: 2; } .as-flusso--binario .as-flusso__quadro { position: absolute; left: 0; top: 0; display: block; width: 400vw; height: 100%; margin: 0; will-change: transform; } /* ogni dispositivo al centro dello spazio tra le schede e le didascalie (la sua didascalia gli sta sotto) */ .as-flusso--binario .as-flusso__posto { position: absolute; left: calc(var(--slot) * 100vw + 50vw - var(--pw) / 2); top: calc((var(--b-su) + var(--b-giu) - var(--ph)) / 2); width: var(--pw); height: var(--ph); } .as-flusso--binario .as-flusso__posto.is-cliente { --slot: 0; --pw: calc(20.51 * var(--b-tel)); --ph: var(--b-tel-h); } .as-flusso--binario .as-flusso__posto.is-gestionale { --slot: 1; --pw: var(--b-pc-w); --ph: calc(42.5 * var(--b-pc)); } .as-flusso--binario .as-flusso__posto.is-carta { --slot: 2; --pw: calc(12 * var(--b-st)); --ph: var(--b-st-h); } .as-flusso--binario .as-flusso__posto.is-titolare { --slot: 3; --pw: calc(20.51 * var(--b-tel)); --ph: var(--b-tel-h); } .as-flusso--binario .as-flusso__posto .as-flusso__oggetto { position: absolute; left: 0; top: 0; width: 100%; margin: 0; } .as-flusso--binario .is-cliente .as-fl-tel, .as-flusso--binario .is-titolare .as-fl-tel { font-size: var(--b-tel); } .as-flusso--binario .is-gestionale .as-fl-pc { font-size: var(--b-pc); } .as-flusso--binario .is-carta .as-fl-stampa { font-size: var(--b-st); height: 26em; } .as-flusso--binario .is-carta .as-fl-stampa [data-ancora="fessura"] { top: 23em; } .as-flusso--binario .as-flusso__posto .as-flusso__didascalia { position: absolute; left: 50%; top: calc(100% + 18px); width: min(calc(100vw - 48px), 330px); max-width: none; margin: 0; transform: translateX(-50%); font-size: 15px; line-height: 1.4; text-align: center; text-wrap: balance; } .as-flusso--binario .as-flusso__fili { display: block; z-index: 1; } .as-flusso--binario .as-flusso__fili path { stroke-width: 2; } .as-flusso--binario .as-flusso__chiusa { margin-top: 56px; } } /* v0.56: su touch il binario si FISSA durante il pin: come gli altri palchi fissati (base.css, «Safari su iPhone») è nascosto come contenitore e visibile nei figli (tutti posizionati), così Safari 26 non ci colora le sue fasce. */ @media (hover: none) { .as-flusso--binario .as-flusso__set { visibility: hidden; } .as-flusso--binario .as-flusso__set > * { visibility: visible; } } .pin-spacer:has(> .as-flusso__set) { background: var(--as-carbone); } /* v0.84.1 (01/11): il set torna al pin fisso su touch (motion.js: la versione sticky in una corsa tremava sull'iPhone di Rami). */ @media (max-width: 379px) { .as-flusso .as-flusso__mondo { font-size: 14px; } } /* Sui computer stretti le quattro schede col nome intero non stanno sotto il testo: il nome corto. v0.53.1: fino a 1399px (con le icone, a 1280 l'ultima scheda andava a capo). */ @media (min-width: 900px) and (max-width: 1399px) and (hover: hover) { .as-flusso__mondo.has-corto .as-flusso__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .as-flusso__mondo.has-corto .as-flusso__corto { display: inline; } } /* ── FLUSSO-FINE ── */ /* ══ IN OGNI PROGETTO, SEMPRE (site/inclusi) ═══════════════════════════════ */ .as-inclusi__griglia { display: grid; gap: var(--as-sp-7); } @media (min-width: 1000px) { .as-inclusi__griglia { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--as-sp-8); align-items: start; } } .as-inclusi__titolo { margin: 0; max-width: 12ch; } .as-inclusi__sotto { margin: var(--as-sp-5) 0 0; max-width: 34ch; color: var(--as-muted); } .as-inclusi__cta { margin: var(--as-sp-6) 0 0; } .as-inclusi__voci { display: grid; gap: var(--as-sp-5) var(--as-sp-6); } @media (min-width: 700px) { .as-inclusi__voci { grid-template-columns: 1fr 1fr; } } .as-inclusi__voce { display: flex; align-items: flex-start; gap: 14px; padding-top: var(--as-sp-4); border-top: 1px solid var(--as-line); } .as-inclusi__voce .as-sch__ok { margin-top: 1px; font-size: 20px; } /* v0.56 (Rami, 22/10: «assegnali delle icone più adatte»): ogni voce la sua icona, in un cerchio arancio pieno (l'arancio come materia sul bianco, DS §2 legge 2; l'icona carbone, come il testo sull'arancio, legge 4). */ .as-inclusi__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--as-arancio); color: var(--as-carbone); } .as-inclusi__ic .as-ic { width: 20px; height: 20px; } /* Il titolo e il contatore: insieme solo nella fila da telefono (sotto); altrove il contatore non c'è. */ .as-inclusi__capo { display: contents; } .as-inclusi__conta { display: none; font-variant-numeric: tabular-nums; } .as-inclusi__nome { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; } .as-inclusi__riga { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--as-muted); text-wrap: pretty; } .as-inclusi__riga:empty { display: none; } /* v0.60: una voce può avere solo il titolo (Landing page) */ .as-inclusi__titolo { text-wrap: balance; } /* v0.38 (29/09). Sotto i 1000px il bottone arriva DOPO le voci (prima invitava ad andare via prima di aver letto cosa è incluso): la testa si scioglie nella griglia e il bottone va in fondo. Da telefono voci più compatte e titolo senza il limite dei 12ch (andava a capo dopo «questo»). */ @media (max-width: 999px) { .as-inclusi__griglia { gap: 0; } .as-inclusi__testa { display: contents; } .as-inclusi__voci { order: 2; margin-top: var(--as-sp-7); } .as-inclusi__cta { order: 3; margin-top: var(--as-sp-7); } } @media (max-width: 699px) { .as-inclusi__titolo { max-width: none; } .as-inclusi__nome { font-size: 18px; } /* v0.56 (Rami, 22/10: «le 6 garanzie hanno un layout orribile e poco scorrevole, trova un altro modo»): una FILA da sfogliare col dito, come i servizi più su: una card per garanzia (icona, titolo, testo), quella dopo che si vede per un dito, e il contatore a destra del titolo. Le card entrano da destra (motion.js, data-as-inclusi). */ .as-inclusi__capo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--as-sp-4); } .as-inclusi__conta { display: block; margin: 0 0 .35em; font-size: 14px; letter-spacing: .06em; color: var(--as-muted); } .as-inclusi__conta b { font-weight: 400; color: var(--as-ink); } /* .as-inclusi davanti: la regola generale ul[class] (padding 0, base.css) vinceva sulla sola classe e la prima card stava attaccata al bordo dello schermo (Rami, 22/10, dal suo iPhone). */ .as-inclusi .as-inclusi__voci { display: flex; align-items: stretch; gap: 12px; margin: var(--as-sp-6) calc(-1 * var(--as-gutter)) 0; padding: 0 var(--as-gutter) 2px; scroll-padding-inline: var(--as-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .as-inclusi__voci::-webkit-scrollbar { display: none; } .as-inclusi__voce { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; flex-direction: column; gap: var(--as-sp-5); padding: 22px 22px 24px; border-top: 0; border-radius: calc(var(--as-r-card-lg) * var(--as-brm)); background: var(--as-sup); } @supports (corner-shape: squircle) { .as-inclusi__voce { corner-shape: squircle; } } /* v0.56.1: nella fila viva (motion.js) i testi della card che entra arrivano un po' dopo di lei: la card li ritaglia, e cresce dal suo bordo sinistro (il pezzo che si vede a destra resta largo un dito). */ .as-fila--viva > .as-inclusi__voce { overflow: hidden; transform-origin: 0 50%; } /* v0.56 bis (Rami: «i numeri da 0 a 6 mettili alla destra del bottone Perché affidarti a Studio Arfia, c'è lo spazio»). */ .as-inclusi__cta { margin-top: var(--as-sp-6); display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* v0.56.1 (Rami: «mettili alla destra del bottone»): il contatore sta su una riga sola. Col toro il bottone è largo 281px e non si stringe; su un telefono da 390 restano 61px, il contatore a 13px ne usa 43 più i 12 dello spazio. */ .as-inclusi__cta .as-btn { flex: none; } .as-inclusi__cta .as-inclusi__conta { flex: none; margin: 0; white-space: nowrap; font-size: 13px; letter-spacing: .02em; } } /* I telefoni stretti (375: iPhone SE e mini): restano 46px, il contatore si stringe ai lati della barra. Sotto i 360 non ci sta comunque: si nasconde (è solo un aiuto visivo, il lettore di schermo non lo legge). */ @media (max-width: 380px) { .as-inclusi__cta { gap: 8px; } .as-inclusi__cta .as-inclusi__conta { letter-spacing: 0; word-spacing: -.12em; } } @media (max-width: 359px) { .as-inclusi__cta .as-inclusi__conta { display: none; } }