/* ========================================================================== Tack System — Design tokens Ricostruiti a mano dal Figma "Tack Design ULTIMO" (63tHgGF7ST8hpk8bqNpEC4). Il file non usa le Variabili di Figma: questi valori sono la sola fonte di verita'. Ogni nuovo colore o dimensione va aggiunto qui, mai inline. ========================================================================== */ :root { /* --- Colori di marca ------------------------------------------------- */ --tk-orange: #d74a31; /* primario: CTA, accenti, link card */ --tk-orange-deep: #b53a23; /* fine del gradiente del CTABanner */ --tk-green-deep: #128055; /* hover dei bottoni verdi */ --tk-yellow-deep: #c08e14; /* hover dei bottoni gialli (pagine settore) */ --tk-purple-deep: #6b3775; /* hover dei bottoni viola (pagine settore) */ --tk-green: #179765; /* eyebrow hero, badge materiali */ --tk-yellow: #dea71f; /* eyebrow settori, statistica anni */ --tk-purple: #83468e; /* eyebrow "Perche' noi", settori uffici/arch */ --tk-green-900: #0e5c3b; /* i tre stop del fondo verde della barra numeri */ --tk-green-700: #177a52; --tk-green-500: #1a9460; /* --- Fondali scuri ---------------------------------------------------- */ --tk-black: #080808; /* hero, griglia settori */ --tk-black-deep: #060606; /* barra statistiche */ --tk-navbar-bg: rgba(8, 8, 8, 0.97); --tk-navbar-bg-lt: rgba(255, 255, 255, 0.97); /* testata chiara delle pagine settore */ --tk-navbar-scrim: transparent; /* testata sovrapposta all'hero: del tutto trasparente all'apertura. Le scritte bianche restano leggibili perche' sotto c'e' la velatura dell'hero. */ --tk-card: #161616; /* card settore */ --tk-card-media: #1a1a1a; /* fondo dietro la foto della card */ --tk-card-float: #0d0d0d; /* card sospesa sezione materiali */ /* --- Fondali chiari --------------------------------------------------- */ --tk-white: #ffffff; --tk-light: #f8f9fb; /* striscia caratteristiche */ --tk-light-alt: #f4f5f8; /* sezione perche' noi */ --tk-grey: #e8e8e8; /* griglia settori, dal 23/09 non piu' nera */ /* --- Testo su chiaro -------------------------------------------------- */ --tk-ink: #0a0a0a; /* titoli */ --tk-ink-800: #2a2a2a; /* voci elenco materiali */ --tk-ink-700: #444444; /* link del footer */ --tk-ink-600: #4a4a4a; /* paragrafo materiali */ --tk-ink-500: #555555; /* testo striscia caratteristiche */ --tk-ink-400: #666666; /* testo card perche' noi */ --tk-ink-300: #999999; /* copyright */ /* Aggiunti il 24/09/2026 per le pagine di sezione (Figma 52:10190 e segg.) */ --tk-ink-950: #111111; /* tondo nero delle icone sulle foto delle card */ --tk-ink-750: #333333; /* voci di elenchi, etichette dei moduli */ --tk-ink-350: #888888; /* briciole di pane */ --tk-ink-200: #aaaaaa; /* segnaposto dei campi */ --tk-media: #e4e4e4; /* fondo dietro le foto delle card, finche' carica */ /* --- Testo su scuro (sempre bianco a opacita' decrescente) ------------ */ --tk-on-dark: #ffffff; --tk-on-dark-70: rgba(255, 255, 255, 0.7); --tk-on-dark-60: rgba(255, 255, 255, 0.6); --tk-on-dark-50: rgba(255, 255, 255, 0.5); --tk-on-dark-40: rgba(255, 255, 255, 0.4); --tk-on-dark-25: rgba(255, 255, 255, 0.25); /* --- Bordi ------------------------------------------------------------ */ --tk-border-light: #e5e7eb; --tk-border-hair: rgba(0, 0, 0, 0.05); --tk-border-dark: rgba(255, 255, 255, 0.07); --tk-border-dark-12:rgba(255, 255, 255, 0.12); --tk-border-ink-12: rgba(10, 10, 10, 0.12); /* bordi sul chiaro, testata e bottoni */ --tk-border-ink-25: rgba(10, 10, 10, 0.25); /* bottone bordato su chiaro */ --tk-border-06: rgba(0, 0, 0, 0.06); /* righe sopra e sotto le strisce dei vantaggi */ --tk-border-07: rgba(0, 0, 0, 0.07); /* card chiare, righe dei download */ --tk-border-08: rgba(0, 0, 0, 0.08); /* card con foto */ --tk-border-12: rgba(0, 0, 0, 0.12); /* campi dei moduli */ --tk-border-15: rgba(0, 0, 0, 0.15); /* bottone tondo di download */ --tk-border-dark-30:rgba(255, 255, 255, 0.3); /* bottone bordato su nero */ /* --- Velature colorate (fondo delle icone) ---------------------------- */ --tk-orange-08: rgba(215, 74, 49, 0.08); --tk-orange-09: rgba(215, 74, 49, 0.09); --tk-green-08: rgba(23, 151, 101, 0.08); --tk-green-09: rgba(23, 151, 101, 0.09); --tk-green-10: rgba(23, 151, 101, 0.10); --tk-yellow-08: rgba(222, 167, 31, 0.08); --tk-yellow-09: rgba(222, 167, 31, 0.09); --tk-purple-08: rgba(131, 70, 142, 0.08); --tk-purple-09: rgba(131, 70, 142, 0.09); --tk-purple-14: rgba(131, 70, 142, 0.14); --tk-green-07: rgba(23, 151, 101, 0.07); /* icone della lista download */ --tk-green-13: rgba(23, 151, 101, 0.13); /* icona della newsletter, su nero */ /* --- Velatura del hero delle pagine settore --------------------------- */ /* Il Make ha una velatura obliqua molto carica, pensata per il testo a sinistra. Con il testo centrato e con le nostre foto spegneva del tutto le immagini chiare: qui e' verticale e piu' leggera, cosi' la foto si vede e il titolo resta leggibile su tutte e quattro le diapositive. */ --tk-hero-scrim: linear-gradient(180deg, rgba(8,8,8,0.70) 0%, rgba(8,8,8,0.58) 45%, rgba(8,8,8,0.80) 100%); --tk-stats-bg: linear-gradient(135deg, var(--tk-green-900) 0%, var(--tk-green-700) 60%, var(--tk-green-500) 100%); --tk-hero-veil: linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.80) 38%, rgba(8,8,8,0.35) 70%, rgba(8,8,8,0.15) 100%); --tk-hero-veil-mob: linear-gradient(180deg, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.88) 55%, rgba(8,8,8,0.94) 100%); /* --- Tipografia ------------------------------------------------------- */ --tk-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tk-fs-eyebrow: 12px; --tk-lh-eyebrow: 16px; --tk-ls-eyebrow: 2.4px; --tk-fs-label: 12px; --tk-lh-label: 16px; --tk-ls-label: 1.2px; --tk-fs-h1: 64px; --tk-lh-h1: 75.6px; --tk-fs-h2: 48px; --tk-lh-h2: 60px; --tk-fs-h1-pg: 60px; --tk-lh-h1-pg: 62.4px; /* apertura delle pagine di sezione */ --tk-fs-h2-pg: 36px; --tk-lh-h2-pg: 45px; /* titoli delle loro sezioni */ --tk-fs-h3: 16px; --tk-lh-h3: 22px; --tk-fs-stat: 36px; --tk-lh-stat: 36px; --tk-fs-lead: 18px; --tk-lh-lead: 29.25px; --tk-fs-body: 16px; --tk-lh-body: 26px; --tk-fs-sm: 14px; --tk-lh-sm: 22.75px; --tk-fs-ui: 14px; --tk-lh-ui: 20px; --tk-fs-xs: 12px; --tk-lh-xs: 19.5px; /* --- Impaginazione ---------------------------------------------------- */ --tk-container: 1280px; /* larghezza massima, padding incluso */ --tk-gutter: 32px; /* -> 1216px di contenuto */ --tk-header-h: 80px; --tk-logo-h: 54px; /* 36px + 50%, richiesta del 23/09; in testata e nel footer */ --tk-logo-h-mob: 42px; /* la testata mobile e' alta 64: a 54 non respirerebbe */ --tk-header-h-mob: 64px; /* --- Raggi ------------------------------------------------------------ */ --tk-r-pill: 9999px; --tk-r-card: 16px; --tk-r-media: 24px; --tk-r-icon: 16px; --tk-r-icon-sm: 12px; --tk-r-panel: 12px; /* pannelli prima/dopo del refit */ --tk-r-field: 12px; /* campi dei moduli, riquadri piccoli */ --tk-r-form: 24px; /* il riquadro bianco del modulo contatti */ /* --- Ombre ------------------------------------------------------------ */ --tk-sh-card: 0 4px 20px rgba(0, 0, 0, 0.3); --tk-sh-soft: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); --tk-sh-btn: 0 4px 3px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1); --tk-sh-cta: 0 8px 16px rgba(215, 74, 49, 0.25); --tk-sh-media: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --tk-sh-float: 0 24px 24px rgba(0, 0, 0, 0.4); --tk-sh-panel: 0 12px 32px rgba(0, 0, 0, 0.12); --tk-sh-scheda: 0 2px 12px rgba(0, 0, 0, 0.06); /* card delle pagine di sezione */ --tk-sh-scheda-h: 0 12px 28px rgba(0, 0, 0, 0.10); /* la stessa, al passaggio */ /* --- Transizioni ------------------------------------------------------ */ --tk-ease: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* --- Colore del settore (23/09/2026) ------------------------------------- Ogni pagina settore ha il suo colore, lo stesso della sua card in Home e nella pagina Settori (campo settore_colore). tk_body_class() mette sul body .tk-colore--, e qui il colore diventa l'accento della pagina: pillole, bottone principale, targhette, contorni di focus. Fuori dalle pagine settore l'accento resta l'arancione di marca. --tk-accento-su e' il colore del testo SOPRA l'accento: bianco sui tre colori scuri, nero sul giallo — il bianco su #dea71f ha un contrasto di circa 2:1, illeggibile per un bottone. */ :root, .tk-colore--orange { --tk-accento: var(--tk-orange); --tk-accento-deep: var(--tk-orange-deep); --tk-accento-su: var(--tk-white); --tk-accento-ombra: rgba(215, 74, 49, 0.25); } .tk-colore--green { --tk-accento: var(--tk-green); --tk-accento-deep: var(--tk-green-deep); --tk-accento-su: var(--tk-white); --tk-accento-ombra: rgba(23, 151, 101, 0.25); } .tk-colore--yellow { --tk-accento: var(--tk-yellow); --tk-accento-deep: var(--tk-yellow-deep); --tk-accento-su: var(--tk-ink); --tk-accento-ombra: rgba(222, 167, 31, 0.28); } .tk-colore--purple { --tk-accento: var(--tk-purple); --tk-accento-deep: var(--tk-purple-deep); --tk-accento-su: var(--tk-white); --tk-accento-ombra: rgba(131, 70, 142, 0.25); }