/* ========================================================================== DESIGN TOKENS — Studio Banchi Valori estratti dal sito Framer (studiobanchi.com), misurati a 390px e 1440px. Unica fonte di verità per colori, tipografia, spaziature e layout. ========================================================================== */ /* --- Font ----------------------------------------------------------------- Archivo (Omnibus-Type, licenza SIL Open Font License: gratuito anche per uso commerciale — vedi /assets/fonts/Archivo-OFL.txt). Font variabile: un solo file contiene tutti i pesi (100–900) e le larghezze (62–125%). Usiamo la larghezza 112,5% ("semi-expanded", --font-stretch) per avvicinarci al disegno largo di Sharp Grotesk. */ @font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-Italic-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } /* Inter Bold, solo per "(LET'S CONNECT)" / "(FOLLOW US)" — caricato in self-hosting */ @font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Bold-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } :root { /* --- Colori ------------------------------------------------------------ */ --color-bg: #272224; /* sfondo di tutto il sito (antracite caldo) */ --color-text: #e6e6e6; /* testo principale */ --color-white: #ffffff; /* nav, footer, bottoni */ --color-accent: #ff0058; /* rosso/fucsia Banchi: titoli, link attivi, numeri */ --color-accent-dark: #bd034b; /* accento scuro (hover) */ --color-ghost: #383838; /* numeri giganti del metodo (01–04) */ --color-muted: #808080; /* grigio secondario */ --color-light: #f2f2f2; /* superfici chiare */ --color-black: #000000; --color-border: rgba(230, 230, 230, 0.15); /* --- Tipografia: famiglie --------------------------------------------- */ --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-stretch: 112.5%; /* larghezza di Archivo usata in tutto il sito */ --font-alt: "Inter", system-ui, sans-serif; /* solo titoletti del footer */ --fw-light: 300; /* testi lunghi, descrizioni */ --fw-book: 400; /* nav, footer */ --fw-medium: 560; /* titoli, CTA (Archivo è variabile: 560 rende come il Medium di Sharp Grotesk) */ --fw-semibold: 650; /* --- Tipografia: scala unica (mobile 390px → desktop 1440px) ---------- Ogni gradino ha un ruolo preciso; i valori vicini dell'originale (25/28 px, 32/34 px…) sono stati unificati. Su mobile tutti i testi correnti hanno la stessa misura: 18 px. */ --fs-caption: 0.9375rem; /* 15 nav, footer, indirizzo */ --fs-label: 1rem; /* 16 etichette, tag, link footer */ --fs-body-sm: 1.125rem; /* 18 testi secondari (didascalie) */ --fs-body: clamp(1.125rem, 0.9625rem + 0.667vw, 1.5625rem); /* 18 → 25 testi correnti */ --fs-body-lg: clamp(1.125rem, 0.75rem + 1.52vw, 2.125rem);/* 18 → 34 testi d'apertura (Chi siamo) */ --fs-h4: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem); /* 20 → 24 titoli di card e passaggi */ --fs-h2: clamp(1.6875rem, 1.52rem + 0.67vw, 2.125rem);/* 27 → 34 frasi manifesto */ --fs-h1: clamp(2rem, 1.70rem + 1.24vw, 2.8125rem); /* 32 → 45 hero, titoli dei servizi */ --fs-title: clamp(2.6875rem, 2.29rem + 1.62vw, 3.75rem);/* 43 → 60 titoli di sezione */ --fs-stat: clamp(3.5rem, 3rem + 2vw, 4.5rem); /* 56 → 72 numeri dei risultati */ /* nomi storici, tenuti come alias */ --fs-xs: var(--fs-caption); --fs-sm: var(--fs-label); --lh-none: 1; --lh-tight: 1.1; --lh-snug: 1.2; --lh-body: 1.5; --ls-title: -0.04em; /* titoli di sezione ("Come lavoriamo") */ --ls-tight: -0.02em; /* hero, frasi manifesto */ --ls-nav: -0.01em; /* --- Spaziature -------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2.25rem; /* 36 */ --space-7: 3rem; /* 48 */ --space-8: 5rem; /* 80 */ --space-9: 6rem; /* 96 */ --space-10: 7.5rem; /* 120 */ /* Valori ricorrenti nel layout Framer */ --gutter: clamp(0.75rem, 0.52rem + 1.14vw, 1.5rem); /* 12→24 margine pagina */ --text-inset: clamp(0.75rem, -2.4rem + 12.9vw, 8.5rem); /* 12→136 rientro blocchi */ --section-title-y: clamp(3.75rem, 2.36rem + 5.71vw, 7.5rem); /* 60→120 sopra i titoli */ --block-y: clamp(3.75rem, 2.97rem + 3.43vw, 6rem); /* 60→96 padding blocchi */ --stack-gap: var(--space-7); /* 48 */ /* --- Layout ----------------------------------------------------------- */ --container-max: 1200px; /* larghezza massima di tutti i contenuti */ --header-h: 64px; /* 55px su mobile, vedi sotto */ --rule: 1px dashed var(--color-accent); /* linee tratteggiate rosse: unica eccezione, vanno a tutta larghezza */ /* --- Forme ------------------------------------------------------------ */ --radius-none: 0; /* il sito Framer usa angoli vivi */ --radius-footer: clamp(2rem, 1.48rem + 2.13vw, 3.75rem); /* 32→60 angoli superiori del footer */ --radius-pill: 999px; /* --- Movimento -------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; } @media (max-width: 809px) { :root { --header-h: 55px; } } /* Breakpoint Framer di riferimento: mobile < 810px · tablet 810–1199px · desktop ≥ 1200px */