/* ============================================================ MACELLERIA POLLERIA — Vibo Marina DESIGN TOKENS Materiale: marmo scuro e ottone. Il fondo è la pietra del banco a luce spenta; l'ottone è l'unica cosa che riflette. Il rosso non è mai un colore dell'interfaccia: è il colore della carne, e sta nelle foto. ============================================================ */ :root { /* ---------- COLORE ------------------------------------------------ Tre neri virati caldi, un accento d'ottone, un bordeaux che serve solo da struttura. Tutti i rapporti sono calcolati su --c-pietra. */ --c-pietra: #0B0908; /* fondo dominante — nero virato bruno */ --c-ardesia: #121010; /* sezioni alternate */ --c-marmo: #171412; /* card e superfici */ --c-venatura: #241E1A; /* bordi e filetti */ --c-ottone: #C8A35A; /* ACCENTO — 8.0:1 su Pietra, AA anche a 14px */ --c-ottone-lux: #E3C88A; /* ottone in luce: hover e riflessi, 11.4:1 */ --c-ottone-cupo:#8A6E36; /* ottone in ombra: solo bordi, mai testo */ --c-bordeaux: #6E1620; /* STRUTTURA — fondi e filetti, mai testo */ --c-bordeaux-lux:#8E1B24; /* stesso rosso in luce, per i gradienti */ --c-osso: #F2EDE4; /* testo principale — bianco caldo, 16.3:1 */ --c-cenere: #A79F94; /* testo secondario — 7.2:1, sopra AA */ --c-cenere-cupa:#6B645C; /* solo decorazioni: mai testo */ --c-alloro: #6FA85A; /* semaforo positivo (conferme) */ --c-ruggine: #D7584A; /* semaforo negativo (errori) */ /* Trasparenze di lavoro — derivate, non nuovi colori */ --c-ottone-04: rgba(200, 163, 90, 0.04); --c-ottone-10: rgba(200, 163, 90, 0.10); --c-ottone-18: rgba(200, 163, 90, 0.18); --c-ottone-32: rgba(200, 163, 90, 0.32); --c-ottone-55: rgba(200, 163, 90, 0.55); --c-osso-06: rgba(242, 237, 228, 0.06); --c-osso-12: rgba(242, 237, 228, 0.12); --c-osso-22: rgba(242, 237, 228, 0.22); --c-pietra-70: rgba(11, 9, 8, 0.70); --c-pietra-88: rgba(11, 9, 8, 0.88); --c-pietra-96: rgba(11, 9, 8, 0.96); /* ---------- OTTONE VERO -------------------------------------------- Un metallo non è un colore piatto: è un gradiente che cambia direzione. Senza le due bande scure in mezzo sembra senape. */ --g-ottone: linear-gradient(135deg, #8A6E36 0%, #E3C88A 18%, #C8A35A 38%, #7C6231 52%, #D8B871 72%, #9E7F42 100%); /* Il filo che separa le sezioni: ottone che si spegne ai lati. */ --g-filo: linear-gradient(90deg, transparent, var(--c-ottone-32) 22%, var(--c-ottone-55) 50%, var(--c-ottone-32) 78%, transparent); /* ---------- GRANA --------------------------------------------------- Grana di pellicola e venatura del marmo generate: 600 byte invece di due texture da 200 kB. Stanno sotto il contenuto. */ --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.75 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23g)'/%3E%3C/svg%3E"); --marmo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.05' numOctaves='6' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.8 0 0 0 0 0.72 0.35 0 0 0 -0.16'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)'/%3E%3C/svg%3E"); /* ---------- TYPE --------------------------------------------------- Bodoni Moda: il carattere di Giambattista Bodoni, parmense. Le aste sottilissime che si aprono nelle grazie sono il lusso — e sono italiane, il che qui conta. Inter: neutra, per tutto ciò che va letto in fretta col pollice mentre si ordina un chilo di carne. */ --f-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif; --f-testo: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --t-mega: clamp(44px, 10.5vw, 148px); --t-display: clamp(34px, 5.6vw, 76px); --t-titolo: clamp(26px, 3.2vw, 42px); --t-sotto: clamp(19px, 2.1vw, 25px); --t-guida: 18px; --t-corpo: 16px; --t-piccolo: 14.5px; --t-micro: 12.5px; --lh-stretto: 0.92; --lh-titolo: 1.08; --lh-corpo: 1.65; --ls-occhiello: 0.22em; /* le maiuscolette hanno bisogno d'aria */ --ls-display: -0.02em; /* il Bodoni grande va stretto, non largo */ /* ---------- SPAZIO ------------------------------------------------- Scala geometrica ×1.5, ancorata a 8. */ --s-1: 8px; --s-2: 12px; --s-3: 18px; --s-4: 27px; --s-5: 40px; --s-6: 60px; --s-7: 90px; --s-8: 135px; --sezione-y: clamp(72px, 9.5vw, 140px); --bordo-x: clamp(20px, 5vw, 64px); --larghezza: 1280px; --leggibile: 62ch; /* Altezza della barra del carrello: il fondo pagina le lascia posto. */ --h-carrello: 76px; /* ---------- FORMA -------------------------------------------------- Raggi minimi. Il lusso qui è lo spigolo netto del marmo tagliato, non l'angolo morbido dell'app. */ --r-1: 3px; --r-2: 6px; --r-3: 12px; --r-4: 20px; --r-pieno: 999px; /* ---------- MOVIMENTO ---------------------------------------------- Una curva per le entrate (decelerazione lunga: il pezzo che si posa sul banco) e una per i micro-stati. */ --e-entrata: cubic-bezier(0.16, 0.84, 0.24, 1); --e-morbida: cubic-bezier(0.4, 0, 0.2, 1); --d-rivela: 820ms; --d-media: 340ms; --d-corta: 170ms; /* ---------- LIVELLI ------------------------------------------------ */ --z-sfondo: 0; --z-corpo: 1; --z-nav: 60; --z-carrello: 70; --z-modale: 90; --z-avviso: 100; } /* Il tema è uno solo e dichiarato: il banco a luce calda, di sera. Nessun light mode — ma rispettiamo chi chiede meno movimento. */ @media (prefers-reduced-motion: reduce) { :root { --d-rivela: 1ms; --d-media: 1ms; --d-corta: 1ms; } }