/* ============================================================ IL BELLO DELLE DONNE — Design Tokens Direzione: «Ciclamino su Nero», impianto editoriale ============================================================ */ :root { /* ---------- MARCHIO — CAMPIONATO DAL LOGO UFFICIALE ---------- Magenta campionato a pixel dal file 1600x1600: #E6007E. Saturazione gia' al 100%: ogni variante muove solo la luminosita'. */ --brand-magenta: hsl(327 100% 45%); /* #E6007E colore reale del marchio */ --brand-nero: hsl(0 0% 0%); /* #000000 fondo del logo */ /* ================= GROUND SCURO (default) ================= Neutri tinti, mai grigi puri: la tinta 336 e' quella dell'antracite reale delle pareti del salone. */ --c-bg: hsl(336 10% 7%); /* #141011 */ --c-surface: hsl(336 9% 12%); /* #211C1E */ --c-surface-2: hsl(336 8% 17%); /* #2F282B */ --c-text: hsl(20 22% 96%); /* #F7F4F3 avorio, NON bianco puro */ --c-text-muted: hsl(340 7% 73%); /* #BFB5B9 */ --c-primary: hsl(327 100% 43%); /* #DB0077 riempimento CTA */ --c-primary-hover: hsl(327 100% 40%); /* #CC006F scurisce + solleva */ --c-primary-active: hsl(327 100% 37%); /* #BD0067 */ --c-on-primary: hsl(20 30% 98%); /* #FBF9F8 etichetta sul pieno */ --c-accent: hsl(327 100% 68%); /* #FF5CB4 link/testo accento su scuro */ --c-accent-hover: hsl(327 100% 76%); /* #FF85C7 */ --c-hairline: hsl(336 8% 20%); /* filetto: separa senza scatolare */ --c-border: hsl(336 8% 24%); /* #42383C solo decorativo */ --c-border-strong: hsl(336 7% 50%); /* #88777E bordi di CONTROLLI */ --c-focus: hsl(327 78% 70%); /* #EE77B8 */ --c-success: hsl(150 40% 70%); /* #94D1B2 */ --c-error: hsl(4 70% 72%); /* #EA8C86 */ --c-scrim: hsl(336 10% 7% / 0.62); --c-shadow-hue: 336 10%; /* ---------- TIPOGRAFIA ---------- Fraunces: serif morbido, asse ottico variabile. Ha carattere ai corpi grandi e regge ai corpi piccoli, dove un Didone si spezza. Plus Jakarta Sans: leggibilita' alta a 17px, che e' il minimo sensato per un pubblico 25-65. */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* ---------- MOVIMENTO ---------- Micro-interazioni sotto i 300ms. Sopra, il sito sembra lento. */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* decelerazione da molla */ --ease-molla: cubic-bezier(0.34, 1.4, 0.64, 1); /* micro-scavalco, uso raro */ --dur-press: 90ms; /* feedback al click: deve essere istantaneo */ --dur-fast: 120ms; /* colore, opacita', bordi */ --dur-base: 170ms; /* transform, elevazione */ --dur-slow: 240ms; /* entrate in scroll */ --stagger: 45ms; /* ritardo fra elementi in sequenza */ /* ---------- SPAZIATURE — GRIGLIA 8pt ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 56px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* PADDING DI SEZIONE — tetto 72px, vincolo del committente */ --section-y: clamp(48px, 5vw, 72px); --section-y-tight: clamp(32px, 3.5vw, 48px); --section-x: clamp(20px, 4vw, 32px); --container: 1180px; --container-text: 62ch; --gap-grid: clamp(16px, 2vw, 24px); /* Respiro fisso fra un'immagine e il testo che la riguarda. Un solo valore in tutto il sito: e' quello che tiene il ritmo. */ --gap-media: var(--space-5); /* ---------- SCALA TIPOGRAFICA — 1.250 Major Third, base 17px ---------- Il corpo non scende mai sotto 17px. Il minimo e' misurato a 375px, il massimo a 1440px. */ --text-display: clamp(2.617rem, 1.960rem + 2.80vw, 4.150rem); /* 44 -> 70px */ --text-h1: clamp(2.094rem, 1.680rem + 1.76vw, 3.052rem); /* 36 -> 52px */ --text-h2: clamp(1.675rem, 1.400rem + 1.17vw, 2.320rem); /* 28 -> 39px */ --text-h3: clamp(1.340rem, 1.180rem + 0.68vw, 1.700rem); /* 23 -> 29px */ --text-h4: clamp(1.180rem, 1.100rem + 0.34vw, 1.375rem); /* 20 -> 22px */ --text-lg: clamp(1.150rem, 1.080rem + 0.30vw, 1.320rem); /* 19 -> 21px */ --text-body: clamp(1.062rem, 1.030rem + 0.14vw, 1.150rem); /* 17 -> 19px */ --text-small: 0.9375rem; /* 15px */ --text-caption: 0.8125rem; /* 13px */ /* ---------- IDENTITA' DI MESTIERE ---------- I colori dei capelli non sono decorazione: sono il prodotto. */ --cap-radice-scura: #2E211B; --cap-castano: #3B2A22; --cap-nocciola: #6B4A2E; --cap-caramello: #A9784A; --cap-miele: #C9A272; --cap-biondo: #D8B183; --cap-rame: #A85B33; --curva-h: clamp(28px, 5vw, 64px); /* ---------- RAGGI ---------- */ --r-xs: 3px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-full: 999px; /* ---------- OMBRE — doppie e tinte, mai nero piatto ---------- */ --shadow-1: 0 1px 2px hsl(var(--c-shadow-hue) 6% / .28), 0 1px 3px hsl(var(--c-shadow-hue) 6% / .16); --shadow-2: 0 2px 4px hsl(var(--c-shadow-hue) 6% / .26), 0 6px 14px -2px hsl(var(--c-shadow-hue) 6% / .18); --shadow-3: 0 4px 8px hsl(var(--c-shadow-hue) 6% / .24), 0 14px 30px -6px hsl(var(--c-shadow-hue) 6% / .22); --shadow-4: 0 8px 16px hsl(var(--c-shadow-hue) 6% / .22), 0 28px 56px -12px hsl(var(--c-shadow-hue) 6% / .30); --glow-primary: 0 8px 28px -8px hsl(327 100% 43% / .40); /* 10 contenuto sollevato · 20 dropdown · 30 header · 40 overlay · 50 modale */ --z-raised: 10; --z-dropdown: 20; --z-header: 30; --z-overlay: 40; --z-modal: 50; } /* ================= GROUND CHIARO ================= */ .ground-light { --c-bg: hsl(30 30% 97%); /* #FAF7F4 carta calda */ --c-surface: hsl(0 0% 100%); --c-surface-2: hsl(338 26% 95%); /* #F6EFF1 rosa cipria dei fiori */ --c-text: hsl(336 14% 11%); /* #20181B */ --c-text-muted: hsl(336 8% 36%); /* #63545A */ --c-primary: hsl(327 100% 32%); /* #A30059 */ --c-primary-hover: hsl(327 100% 28%); --c-primary-active: hsl(327 100% 24%); --c-on-primary: hsl(20 30% 98%); --c-accent: hsl(327 100% 32%); --c-accent-hover: hsl(327 100% 28%); --c-hairline: hsl(338 16% 86%); --c-border: hsl(338 16% 87%); --c-border-strong: hsl(336 12% 50%); --c-focus: hsl(327 100% 32%); --c-success: hsl(150 44% 25%); --c-error: hsl(0 66% 36%); --c-shadow-hue: 336 14%; --glow-primary: var(--shadow-3); } .ground-dark, .ground-light { background: var(--c-bg); color: var(--c-text); }