/* ------------------------------------------------------------------ Token della landing di ACT Cacciapuoti. Riscritti il 2026-08-23 dopo la bocciatura della direzione "Squadra" e della direzione "La coperta". La firma nuova nasce da quattro riferimenti scelti da Pasquale (Dribbble, TEK Climate, LGPSM, Travelio, SepticFlow) ed e' il canone di categoria eseguito ad alta fedelta': fondo chiaro, molta aria, struttura fatta di spazio e peso tipografico invece che di riquadri, schede bianche che galleggiano e scavalcano la fotografia, e il "wow" affidato al MOVIMENTO invece che alla materia. VINCOLO DI MARCHIO, non negoziabile: la pagina deve richiamare la scelta cromatica di Andrea. Restano i suoi tre colori e i loro derivati; cambia solo il RUOLO che ognuno ricopre. navy #011730 era un accento su fondo chiaro -> ora e' l'inchiostro e il piano scuro dei pannelli di chiusura azzurro #F4F8FC era un fondo fra tanti -> ora e' IL fondo della pagina arancio #EF6C00 era un quadratino -> ora e' l'azione primaria e l'unica parola colorata del titolo Le variabili prefissate --x- sono proprie di questa firma e dichiarate NON portabili. ------------------------------------------------------------------ */ :root { /* --- colore ------------------------------------------------------ */ --fondo: #F4F8FC; /* azzurro pallido del marchio: il fondo della pagina */ --carta: #FFFFFF; /* le schede che galleggiano sopra il fondo */ --fondo-2: #E0ECF8; /* azzurro pallido carico, per alternare i capitoli */ --fondo-3: #011730; /* il piano scuro: pannelli di richiamo e piede */ --inchiostro: #011730; /* 16,87:1 sul fondo, 17,9:1 sulla carta */ --inchiostro-tenue: #546475; /* 5,69:1 sul fondo, 5,07:1 sul fondo-2 */ --accento: #EF6C00; /* superfici: sopra ci va SEMPRE --inchiostro, mai bianco */ --accento-2: #B1560C; /* l'unico arancio ammesso come TESTO su chiaro (4,68:1) */ --filo: #B9D4EF; --filo-forte: #7A92AC; /* 3,01:1 sul fondo, 5,68:1 sul fondo-3 */ /* --- tipografia --------------------------------------------------- */ /* Archivo sul display: grottesco largo e pesante, la lingua della segnaletica dei trasporti, che e' questo mestiere. Due pesi statici, 700 e 800: la versione variabile costa 88 KB contro 14, e in pagina servono solo questi due. Source Sans 3 resta sul corrente. Libre Franklin e' uscita con la direzione che l'aveva scelta. */ --font-titolo: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-testo: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif; --font-etichetta: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; /* La scala si allarga verso l'alto: nel mondo nuovo il titolo E' la composizione, e il pavimento di qualita' concede fino a 6rem. */ --fs-0: clamp(2.6rem, 8.2vw, 5.5rem); /* solo il titolo di apertura */ --fs-1: clamp(2rem, 5.2vw, 3.4rem); --fs-2: clamp(1.75rem, 4.2vw, 2.75rem); --fs-3: clamp(1.35rem, 2.8vw, 1.85rem); --fs-4: clamp(1.1rem, 2vw, 1.35rem); --fs-5: 1.0625rem; --fs-6: 1rem; --fs-7: 0.875rem; --fs-8: 0.75rem; --lh-stretta: 1.02; --lh-media: 1.22; --lh-normale: 1.6; --tracking-etichetta: 0.08em; --misura: 34em; /* --- spazio ------------------------------------------------------- */ /* Piu' generoso della firma precedente: l'aria e' meta' del mondo. */ --sp-1: 0.375rem; --sp-2: 0.75rem; --sp-3: 1.25rem; --sp-4: 2rem; --sp-5: 3.5rem; --sp-6: clamp(4rem, 9vw, 7.5rem); --pad-x: clamp(1.15rem, 4.5vw, 3.5rem); --max-w: 1240px; /* --- forma -------------------------------------------------------- */ /* Decisione ribaltata il 2026-08-23. Il piano fissava --raggio: 0 chiamandolo "il segno piu' riconoscibile della direzione". Tutti e quattro i riferimenti scelti da Pasquale sono arrotondati, e la ricerca dice che nel 2026 il centro tiepido a 8px e' proprio cio' che invecchia: o spigolo vivo o pillola piena. Qui si sta dalla parte della pillola, e generosamente. */ --raggio-xl: 28px; /* il contenitore della fotografia di apertura */ --raggio: 20px; /* schede e pannelli */ --raggio-s: 12px; /* campi, chip, elementi piccoli */ --raggio-pill: 999px; /* pulsanti, chip, badge */ --filetto-sp: 1px; /* --- ombra -------------------------------------------------------- */ /* Lunghe e quasi invisibili: sollevano senza sporcare. Derivate dai colori dichiarati, mai da un grigio nuovo. */ --ombra-carta: 0 1px 2px color-mix(in srgb, var(--inchiostro) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--inchiostro) 6%, transparent); --ombra-alta: 0 2px 4px color-mix(in srgb, var(--inchiostro) 5%, transparent), 0 18px 48px color-mix(in srgb, var(--inchiostro) 11%, transparent); --ombra-corta: 0 1px 2px color-mix(in srgb, var(--inchiostro) 8%, transparent); /* --- movimento ---------------------------------------------------- */ /* La firma precedente dichiarava il movimento NULLO ed e' la ragione per cui e' stata bocciata. Qui il movimento e' il veicolo del "wow", ma con un budget finito: DUE momenti autoriali in tutta la pagina, tutto il resto e' feedback e stato. Fasce del metodo: 100-150ms feedback, 150-300ms cambi di stato, 300-500ms cambi di vista, 500-800ms la sola entrata focale. */ --dur-1: 140ms; /* feedback: colore, opacita', pressione */ --dur-2: 240ms; /* cambi di stato */ --dur-3: 420ms; /* cambi di vista */ --dur-focale: 720ms; /* l'entrata di apertura, una volta sola */ --curva-uscita: cubic-bezier(0.2, 0.6, 0.35, 1); --curva-entrata: cubic-bezier(0.4, 0, 0.2, 1); --curva-arrivo: cubic-bezier(0.16, 1, 0.3, 1); /* la decelerazione degli arrivi */ --scaletta: 90ms; /* sfasamento fra elementi che entrano in sequenza */ /* --- fotografia ---------------------------------------------------- */ /* Quasi niente. La coerenza fra i due corpi fotografici si ottiene in lavorazione sull'immagine, non spegnendo il colore in pagina: era il difetto che Pasquale ha nominato per primo. */ --foto-filtro: saturate(1.02) contrast(1.02); --foto-velo: transparent; /* ================================================================== */ /* Da qui in giu': proprio di questa firma, NON portabile. */ /* ================================================================== */ --x-griglia: repeat(12, minmax(0, 1fr)); --x-gap-colonna: clamp(1.5rem, 2.6vw, 2.75rem); --x-gap-riga: clamp(1.75rem, 3vw, 3rem); --x-misura-stretta: 27em; /* proporzioni. Scelte per COMBACIARE con le fotografie che abbiamo (2000x1126, cioe' 16:9) invece di costringerle in un formato deciso a tavolino: un ritaglio 1:1 non perde il soggetto, un 2:3 si'. E' la scelta che ha eliminato sei generazioni a pagamento. */ --x-ratio-apertura: 4 / 5; /* il contenitore di apertura su telefono */ --x-ratio-apertura-lg: 16 / 11; /* lo stesso su desktop */ --x-ratio-quadro: 1 / 1; --x-ratio-orizzontale: 3 / 2; --x-ratio-banda: 16 / 9; --x-fondo-foto: color-mix(in srgb, var(--inchiostro) 6%, var(--fondo)); /* derivate per il piano scuro */ --x-filo-scuro: color-mix(in srgb, var(--fondo) 22%, transparent); --x-carta-scura: color-mix(in srgb, var(--fondo) 8%, transparent); /* marchio */ --x-h-marchio: 1.9rem; --x-h-marchio-lg: 2.4rem; --x-h-marchio-piede: 3.6rem; /* pesi */ --x-peso-display: 800; --x-peso-titolo: 700; --x-peso-etichetta: 700; --x-peso-testo: 400; /* segni */ --x-tracking-display: -0.035em; /* pavimento di crenatura: -0.04em */ --x-tracking-titolo: -0.02em; --x-bordo-fuoco: 2px; --x-offset-fuoco: 3px; --x-tocco-min: 44px; /* bersaglio minimo, WCAG 2.2 */ --x-pad-bottone: 0.95rem 1.7rem; --x-h-barra-fissa: 72px; --x-punti: color-mix(in srgb, var(--filo-forte) 42%, transparent); } @media (prefers-reduced-motion: reduce) { :root { /* Alternativa intenzionale, non movimento spento: meno movimento e piu' gentile, col feedback che conferma un'azione sempre leggibile. */ --dur-3: 200ms; --dur-focale: 240ms; --scaletta: 0ms; --curva-arrivo: var(--curva-uscita); } }