/* ========================================================================== Design tokens Aretusa Global Unico punto in cui vivono colori, tipografia e spaziature. I valori di colore sono quelli letti dagli export del Figma: quando arrivano i valori esatti dalle variabili, si sostituiscono solo qui. ========================================================================== */ :root { /* --- Colore: marchio ---------------------------------------------- Valori presi direttamente dai tracciati di marchio.svg, non stimati. */ --ag-primary: #8135E6; /* viola del marchio */ --ag-primary-dark: #6B27C9; /* hover del primario */ --ag-deep: #39186D; /* Black Violet, variabile Figma */ --ag-magenta: #EE086F; /* magenta del marchio */ --ag-orange: #EC6914; /* Orange, variabile Figma */ --ag-orange-dark: #CE5A0E; /* --- Colore: superfici -------------------------------------------- */ --ag-white: #FFFFFF; --ag-warm: #FDF3EC; /* estremo caldo del gradiente */ --ag-cool: #F3EAFB; /* estremo lilla del gradiente */ --ag-surface: #FFFFFF; --ag-surface-alt: #FAF7FD; /* --- Colore: testo ------------------------------------------------ Nessun grigio neutro: ogni tono e' il violetto del marchio schiarito, cosi' la pagina resta di un solo colore anche nei testi secondari. */ --ag-text: #39186D; --ag-text-soft: #5F4A85; --ag-text-muted: #8577A0; --ag-border: #E8DEF7; --ag-border-strong: #D3C2EC; /* --- Colore: stati ------------------------------------------------ */ --ag-error: #C0392F; --ag-error-bg: #FBE9E7; --ag-success: #2F7D5E; --ag-success-bg: #E4F2EC; /* --- Gradienti ---------------------------------------------------- */ --ag-gradient-page: linear-gradient(135deg, var(--ag-warm) 0%, var(--ag-cool) 100%); --ag-gradient-cta: linear-gradient(120deg, var(--ag-primary) 0%, var(--ag-magenta) 100%); /* Il pulsante pieno nel progetto grafico non e' a tinta unita ma sfumato, dal violetto chiaro in alto a sinistra al pieno in basso. */ --ag-gradient-btn: linear-gradient(135deg, #A265F2 0%, #7A28DE 100%); --ag-gradient-btn-h: linear-gradient(135deg, #9450EE 0%, #6B1FCC 100%); /* Gli aloni del Figma: tre cerchi da 1042px che attraversano la pagina. Qui sono gradienti radiali, cosi' scalano con la larghezza. */ --ag-glow-orange: radial-gradient(58% 76% at 8% 42%, rgba(236, 105, 20, .20) 0%, rgba(236, 105, 20, .07) 42%, rgba(255, 255, 255, 0) 72%); --ag-glow-viola: radial-gradient(60% 80% at 92% 30%, rgba(129, 53, 230, .16) 0%, rgba(129, 53, 230, .05) 45%, rgba(255, 255, 255, 0) 74%); --ag-glow-soft: radial-gradient(70% 90% at 50% 0%, rgba(236, 105, 20, .10) 0%, rgba(129, 53, 230, .08) 48%, rgba(255, 255, 255, 0) 78%); /* Footer: dal viola leggerissimo al bianco, come nel Figma. */ --ag-gradient-footer: linear-gradient(180deg, #F6F0FF 0%, #FFFFFF 100%); /* --- Tipografia --------------------------------------------------- */ /* I due caratteri del progetto, entrambi variabili e con licenza libera: Clash Display (Fontshare) per i titoli, Aspekta Variable (OFL) per il testo corrente. Un solo file ciascuno copre tutti i pesi. */ --ag-font: "Aspekta Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ag-font-display: "Clash Display", "Aspekta Variable", -apple-system, BlinkMacSystemFont, sans-serif; --ag-fs-display: 3rem; /* 48px H1 hero */ --ag-fs-h1: 2.625rem; /* 42px titolo di pagina */ --ag-fs-h2: 2.375rem; /* 38px titolo di sezione */ --ag-fs-h3: 1.5rem; /* 24px titolo card e servizio */ --ag-fs-lead: 1.25rem; /* 20px sottotitolo di sezione */ --ag-fs-body: 1.0625rem; /* 17px corpo */ --ag-fs-small: 0.9375rem; /* 15px descrizioni card */ --ag-fs-label: 0.8125rem; /* 13px etichette, badge, pulsanti */ --ag-lh-tight: 1.15; --ag-lh-title: 1.2; --ag-lh-body: 1.6; --ag-fw-regular: 400; --ag-fw-medium: 500; --ag-fw-semibold: 600; --ag-fw-bold: 700; /* Peso dei titoli. Clash Display copre 200-700. */ --ag-fw-display: 600; /* --- Spaziature: scala da 4px ------------------------------------- */ --ag-s1: 0.25rem; /* 4px */ --ag-s2: 0.5rem; /* 8px */ --ag-s3: 0.75rem; /* 12px */ --ag-s4: 1rem; /* 16px */ --ag-s6: 1.5rem; /* 24px */ --ag-s8: 2rem; /* 32px */ --ag-s12: 3rem; /* 48px */ --ag-s16: 4rem; /* 64px */ --ag-s24: 6rem; /* 96px */ --ag-s32: 8rem; /* 128px */ /* Distanza verticale fra sezioni. Nel Figma oscilla senza regola: qui e' fissata e scala sui breakpoint. */ --ag-section-y: var(--ag-s32); /* --- Layout ------------------------------------------------------- */ --ag-container: 1412px; /* contenitore massimo */ --ag-content: 954px; /* colonna dei titoli di sezione */ --ag-grid: 1170px; /* griglia dei servizi */ --ag-measure: 680px; /* misura di riga per i paragrafi lunghi */ --ag-gutter: 50px; /* margine laterale su desktop */ --ag-header-h: 123px; /* --- Forma -------------------------------------------------------- */ --ag-radius-sm: 8px; --ag-radius: 12px; --ag-radius-lg: 20px; --ag-radius-pill: 999px; --ag-shadow-sm: 0 1px 2px rgba(43, 33, 64, .06); --ag-shadow: 0 2px 4px rgba(43, 33, 64, .05), 0 12px 28px -18px rgba(43, 33, 64, .28); --ag-shadow-lg: 0 4px 8px rgba(43, 33, 64, .06), 0 24px 48px -24px rgba(43, 33, 64, .32); /* --- Movimento ---------------------------------------------------- */ --ag-ease: cubic-bezier(.4, 0, .2, 1); --ag-dur: .2s; /* --- Area di tocco minima (WCAG 2.1 AA) --------------------------- */ --ag-tap: 44px; } @media (max-width: 1279px) { :root { --ag-gutter: 32px; --ag-section-y: var(--ag-s24); } } @media (max-width: 1023px) { :root { --ag-fs-display: 2.5rem; /* 40px */ --ag-fs-h1: 2.125rem; /* 34px */ --ag-fs-h2: 1.875rem; /* 30px */ --ag-fs-h3: 1.375rem; /* 22px */ --ag-fs-lead: 1.125rem; /* 18px */ --ag-gutter: 24px; --ag-section-y: var(--ag-s16); --ag-header-h: 84px; } } @media (max-width: 639px) { :root { --ag-fs-display: 2rem; /* 32px */ --ag-fs-h1: 1.75rem; /* 28px */ --ag-fs-h2: 1.6875rem;/* 27px */ --ag-fs-lead: 1.0625rem;/* 17px */ --ag-fs-body: 1rem; /* 16px */ --ag-fs-small: 0.875rem; /* 14px */ --ag-gutter: 18px; --ag-section-y: 3.5rem; /* 56px */ } }