/* ============================================================================ TOKENS — Aldemorisco Arte Dolciaria, Lecce ---------------------------------------------------------------------------- Modalità `redesign`: la palette viene dal marchio, non dalla direzione. Le due fonti sono il logo scaricato (`logo-rame.png`: lo stemma della famiglia Moresco, disegnato in rame/mattone) e i colori renderizzati del loro sito misurati in riferimento/loro-comportamento.json — dove il rosa #ff99aa del tema Enfold faceva da inchiostro per titoli, menu e link, e misurava 1,9:1 contro il fondo: sei violazioni su ventotto testi misurati. Il rosa resta, ma torna a fare quello che fa nel negozio vero — la parete, la superficie — mentre l'inchiostro passa al rame dello stemma. Contrasti verificati su questi valori: testo su fondo 15,9:1 testo su fondo-alt 14,1:1 testo-tenue su fondo 6,0:1 accento su fondo 6,1:1 su-accento su accento 6,3:1 su-scuro su scuro 15,2:1 ========================================================================= */ :root { /* ——— COLORE ————————————————————————————————————————————————————————————— */ /* Grigio appena rosato, non panna: il fondo del loro sito è bianco/#f8f8f8, e la parete del negozio è rosa. Questo sta in mezzo. */ --fondo: #f9f6f5; --fondo-alt: #f2e7e5; /* il rosa del negozio, portato a superficie */ --testo: #241a16; --testo-tenue: #6b5b56; --accento: #a8371f; /* il rame dello stemma Aldemorisco */ --su-accento: #fff7f4; --bordo: #e6d7d3; --su-scuro: #f7efec; --su-scuro-tenue: #d3b7ae; /* Superfici di appoggio: il cioccolato del pannello che spezza il ritmo e il rosa decorativo (filetti, aloni, capilettera). Il rosa non fa mai da inchiostro: è il colore che sul loro sito rendeva illeggibile mezza pagina. */ --scuro: #2e1714; --rosa: #e9c3c0; --oro: #b98a4b; /* la carta dorata dei vassoi, solo ornamento */ /* ——— TIPOGRAFIA ———————————————————————————————————————————————————————— Playfair Display + Karla — la riga Google Fonts è nel . */ --font-titoli: 'Playfair Display', Georgia, serif; --font-testo: 'Karla', system-ui, sans-serif; --t-corpo: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --t-piccolo: clamp(0.8125rem, 0.79rem + 0.14vw, 0.9375rem); --t-h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); --t-h3: clamp(1.4375rem, 1.3rem + 0.7vw, 1.9375rem); --t-h2: clamp(1.9375rem, 1.65rem + 1.45vw, 2.875rem); --t-h1: clamp(2.625rem, 1.9rem + 3.6vw, 5rem); --interlinea: 1.68; --interlinea-titoli: 1.12; --spaziatura-titoli: -0.01em; /* ——— RESPIRO (alternato) ———————————————————————————————————————————————— Il valore ampio; le sezioni dense portano .u-sezione--fitta. */ --spazio-sezione: clamp(4.5rem, 3.5rem + 5.5vw, 9.5rem); --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem); --gronda: clamp(1.25rem, 4vw, 4rem); --larghezza-max: 78rem; --larghezza-lettura: 36rem; /* ——— FORMA (morbida) ———————————————————————————————————————————————————— Raggi generosi, nessun bordo: la separazione la fa il colore. */ --raggio: 1.5rem; --raggio-interattivo: 999px; --bordo-spessore: 0; --ombra: 0 1.5rem 3rem -1.5rem rgba(46, 23, 20, 0.28); /* ——— MOVIMENTO (parallasse) ———————————————————————————————————————————— */ --durata: 420ms; --durata-breve: 180ms; --curva: cubic-bezier(0.16, 1, 0.3, 1); }