@charset "UTF-8"; /* Design token estratti da Figma (Maibad-sito, fileKey vTFVaoMjO5RAY0LsY3ByUx) */ :root { /* Colori */ --color-text-primary-dark: #322e27; --color-text-secondary-dark: #625d53; --color-text-primary-light: #fdfdfd; --color-text-secondary-light: #f2f0ec; --color-bg-default: #e4d9c4; --color-bg-default-light: #f6f1e9; --color-bg-default-dark: #a6987d; --color-bg-color: #dbe7b1; --color-primary-100: #f6f1e9; --color-primary-500: #a6987d; --color-accent-200: #dbe7b1; --color-accent-500: #a6c23c; --color-accent-700: #637524; --color-neutral-50: #fdfdfd; /* Tipografia */ --font-display: "ivyora-display", Georgia, serif; /* via Adobe Fonts (Typekit), vedi index.php */ --font-body: "roc-grotesk", Arial, sans-serif; /* via Adobe Fonts (Typekit), vedi index.php */ --font-cta: "Plus Jakarta Sans", Arial, sans-serif; /* via Google Fonts, vedi index.php */ /* Il kit Typekit attivato include solo i pesi 400 (Regular) e 700 (Bold/ExtraBold) sia per roc-grotesk sia per ivyora-display: non esiste un peso 500 "Medium" come nel design Figma. Finché non viene aggiunto un peso intermedio al kit, i testi disegnati come "Medium" (titoli, bottoni/CTA) usano il Regular come fallback più fedele. */ --font-weight-body: 400; --font-weight-medium: 400; --font-weight-display: 400; --text-h1-size: 88px; --text-h1-line: 1.1; --text-h2-size: 56px; --text-h2-line: 1.15; --text-h3-size: 34px; --text-h3-line: 1.25; --text-h4-size: 26px; --text-h4-line: 1.25; --text-body-size: 18px; --text-body-line: 1.5; --text-cta-size: 16px; --text-cta-line: 1.2; --text-caption-size: 14px; --text-caption-line: 1.5; /* Spaziature/raggio ricorrenti */ --radius-image: 8px; --radius-pill: 999px; --space-section-x: 72px; } /* Scala tipografica mobile, letta dagli stili "mobile/h1..h4, mobile/body" del file Figma (diversa da una semplice riduzione proporzionale di quella desktop): ridefinire i token qui li propaga automaticamente a ogni h1-h4/testo che li referenzia, senza dover ripetere override sparsi nei vari file di sezione. */ @media (max-width: 960px) { :root { --text-h1-size: 38px; --text-h1-line: 1.1; --text-h2-size: 30px; --text-h2-line: 1.15; --text-h3-size: 24px; --text-h3-line: 1.2; --text-h4-size: 20px; --text-h4-line: 1.2; --text-body-size: 16px; --text-body-line: 1.5; } }