/* ========================================================================== ImperialFood — Design tokens Variabili globali da includere PRIMA di components.css. Aggiornare un valore qui = aggiornarlo ovunque nel sito. ========================================================================== */ :root { /* ---------- Colori ---------- */ --color-blue: #1B3A8C; /* Brand primary — blu pack ImperialFood */ --color-blue-deep: #0E1B3D; /* Navy profondo — footer, sezioni feature */ --color-blue-bright: #3A5BD9; /* Accent — hover, dettagli */ --color-cream: #F2EADE; /* Cream brand — sfondi caldi, testi su blu */ --color-cream-light: #F8F4EC; /* Cream chiaro — body background */ --color-fog: #DDE5EF; /* Fog — light blue-gray, contrasto su cream-light (hover card, accent leggeri) */ --color-ink: #0A0E1A; /* Nero brand — testi e titoli su crema */ --color-ink-soft: #1A1F2E; /* Nero soft — paragrafi */ --color-white: #FFFFFF; --color-line: rgba(10, 14, 26, 0.12); /* Linee sottili su crema */ --color-line-light: rgba(255, 255, 255, 0.18); /* Linee sottili su blu */ --color-error: #B3261E; /* Errori di form - contrasto 6.1:1 su cream-light */ /* Colori brand Doshapet — usati solo nella sezione partnership */ --color-doshapet: #D4117E; /* Magenta Doshapet (logo) */ --color-doshapet-ink: #202621; /* Ink Doshapet (testo logo) */ /* ---------- Tipografia (Adobe Typekit: djf1jvb) ---------- Includere nel : */ --font-display: "apparat", "Helvetica Neue", Arial, sans-serif; /* Titoli */ --font-display-light: "apparat-light", "apparat", sans-serif; /* Titoli più sottili */ --font-body: "area-normal", "area-normal-black", sans-serif; /* Body copy */ --font-body-light: "area-normal-light", "area-normal-extralight", sans-serif; /* Body sottile/editoriale */ --font-ui: "area-normal", "area-normal-black", sans-serif; /* Bottoni, label, UI */ --weight-title: 400; /* Apparat Regular per i titoli */ --weight-body: 400; /* Area Normal Regular per i testi */ /* ---------- Breakpoint (riferimento) ---------- Sistema a 3 fasce mobile-first. NON inventare breakpoint diversi — se serve un'eccezione fermarsi e discuterla. MOBILE: 0 – 767px TABLET: 768 – 1023px @media (min-width: 768px) DESKTOP: 1024px+ @media (min-width: 1024px) Le custom property qui sotto sono solo documentazione: CSS non consente var() dentro @media. */ --bp-tablet: 768px; --bp-desktop: 1024px; /* ---------- Scala tipografica (stepped per breakpoint) — MOBILE FIRST ---------- Override delle dimensioni nei @media più sotto (per tablet/desktop). Ogni rule del sito DEVE usare var(--fs-*) — niente clamp() o px nudi. Minimi non negoziabili: - Qualsiasi testo: ≥ 14px - Touch target interattivo: 44×44px minimo Sotto-scale (organizzate da piccolo a grande): UI — label, eyebrow, badge, button, nav (sempre 14, mai responsive) BODY — paragrafi, copy LEAD — sottotitoli, lead di sezione H1-H4 — heading content CARD-TITLE — titoli di card (più piccoli degli h2 ma più presenti) NUM — numeri prova sociale, KPI digit (medio) NUM-LG — numeri giganti (timeline anni, hero numbers) DISPLAY-SM/MD/LG/XL — titoli display di sezione (hero h2, banner h2) */ /* Mobile defaults */ --fs-ui: 14px; --fs-eyebrow: 12px; /* UI accent micro: .tag, .more dentro card. Solo CAPS+letter-spacing, OK <14 */ --fs-body: 15px; --fs-lead: 18px; --fs-h4: 18px; --fs-h3: 20px; --fs-h2: 34px; /* mobile: alzato da 28 → i titoli di sezione erano quasi pari ai titoli delle card (26px) e la gerarchia leggeva piatta */ --fs-h1: 32px; --fs-card-title: 28px; /* h3 dentro card (line-card, value-item, audience): voce dominante della card */ --fs-num: 24px; --fs-num-lg: 40px; --fs-display-sm: 28px; --fs-display-md: 36px; --fs-display-lg: 48px; --fs-display-xl: 64px; --fs-display: 40px; /* alias = display-sm/md per backward compat */ /* ---------- Layout ---------- */ --container: 1400px; /* max-width contenuto */ --max-content: 1400px; /* alias semantico per i wrapper */ --gutter: 16px; /* mobile gutter; override su tablet/desktop */ /* ---------- Raggi (border-radius) ---------- */ --radius-sm: 4px; --radius-md: 12px; --radius-lg: 24px; --radius-btn: 8px; /* Tutti i bottoni */ /* ---------- Animazioni ---------- */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* snappy — UI ed entrate */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* morbida — hover su card e componenti */ --dur-hover: .55s; /* durata transform/shadow su hover card */ --dur-color: .4s; /* durata variazioni colore/border su hover */ } /* ---------- Override tipografia + gutter su tablet (≥768px) ---------- */ @media (min-width: 768px) { :root { --fs-eyebrow: 14px; /* ≥768 torna a 14 (allineato a --fs-ui) */ --fs-body: 16px; --fs-lead: 20px; --fs-h4: 19px; --fs-h3: 22px; --fs-h2: 36px; --fs-h1: 40px; --fs-card-title: 30px; --fs-num: 28px; --fs-num-lg: 56px; --fs-display-sm: 36px; --fs-display-md: 52px; --fs-display-lg: 72px; --fs-display-xl: 96px; --fs-display: 64px; --gutter: 32px; } } /* ---------- Override tipografia + gutter su desktop (≥1024px) ---------- */ @media (min-width: 1024px) { :root { --fs-eyebrow: 14px; --fs-body: 16px; --fs-lead: 22px; --fs-h4: 20px; --fs-h3: 24px; --fs-h2: 48px; --fs-h1: 56px; --fs-card-title: 34px; --fs-num: 32px; --fs-num-lg: 72px; --fs-display-sm: 48px; --fs-display-md: 72px; --fs-display-lg: 96px; --fs-display-xl: 132px; --fs-display: 96px; --gutter: 48px; } }