/* ========================================================================== ATLAS ESTATE — DESIGN TOKENS Unica fonte di verita per colore, tipografia, spazio, forma e movimento. Nessun valore di questi qui va mai riscritto a mano altrove. Riferimenti: docs/BRAND.md · docs/MOTION.md ========================================================================== */ :root{ /* --------------------------------------------------------------------- 1 · COLORE — brand Valori istituzionali dal Brand Book v2. Non negoziabili. --------------------------------------------------------------------- */ --navy: #07182C; /* Blu Notte · PANTONE 296 C */ --gold: #C5A15A; /* Oro Antico · PANTONE 4004 C */ --ivory: #F4F0E8; /* Avorio Caldo · PANTONE 7527 C */ --charcoal: #24282D; /* Antracite · PANTONE 433 C */ --white: #FFFFFF; /* --------------------------------------------------------------------- 2 · COLORE — ruoli E questo che si usa nei componenti. Mai i valori brand direttamente. Contrasti calcolati (WCAG 2.1), non stimati: ivory su canvas 16.15:1 AAA secondary su canvas 8.74:1 AAA gold su canvas 7.53:1 AAA navy su gold 7.33:1 AAA (testo del bottone primario) border-int su canvas 3.22:1 AA (bordi interattivi) border su canvas 1.38:1 decorativo, mai interattivo --------------------------------------------------------------------- */ --canvas: #061527; /* fondo del sito. Mai #000: sta nel mondo del footage */ --canvas-alt: #0B2039; /* alternanza di sezione */ --canvas-light: #F4F0E8; /* sezioni invertite: FAQ, editoriale, schede */ --panel: #0E2540; /* schede e superfici rialzate */ --panel-alt: #12294a; --border: #17304F; /* linea decorativa */ --border-interactive:#4E6A8A; /* bordi che si possono toccare: valore proprio */ --border-gold: rgba(197,161,90,.18); /* la "linea Atlas" */ --accent: #C5A15A; /* oro come RIEMPIMENTO: bottoni, linee, marker */ --accent-hover: #D6B674; --accent-press: #B08F4B; --accent-text: #C5A15A; /* oro come TESTO. Su avorio serve un valore piu scuro, vedi .t-light in fondo al file. 7.53:1 su canvas. */ --accent-muted: rgba(197,161,90,.24); /* glow, particelle, tracce */ --accent-faint: rgba(197,161,90,.08); /* pattern colonnato in filigrana */ --text-primary: #F4F0E8; --text-secondary: #A9B4C2; --text-muted: #7A8798; /* solo su testo grande o non essenziale */ --text-on-light: #07182C; --text-on-light-soft:#3D4C5E; --text-on-accent: #07182C; --focus: #C5A15A; --error: #E0736A; --error-on-light: #B3392E; --success: #7FB78A; /* Scrim del video · docs/MOTION.md §5 */ --scrim-base: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(6,12,24,0) 35%, rgba(6,12,24,.62) 100%); --scrim-color: 5,10,20; /* Ombra del testo su footage: bordo stretto, glow medio, caduta larga */ --tshadow: 0 1px 2px rgba(5,10,20,.95), 0 3px 12px rgba(5,10,20,.78), 0 10px 44px rgba(5,10,20,.80); /* --------------------------------------------------------------------- 3 · TIPOGRAFIA Due famiglie sole. Il ruolo "mono" e coperto da Archivo spaziato: e gia la firma tipografica del marchio. Vedi DECISIONS.md D-09. --------------------------------------------------------------------- */ --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; /* Scala fluida. Base 17px, rapporto 1.25 mobile -> 1.333 desktop. */ --fs-label: clamp(0.688rem, 0.66rem + 0.14vw, 0.813rem); /* 11 -> 13 */ --fs-small: clamp(0.813rem, 0.79rem + 0.12vw, 0.938rem); /* 13 -> 15 */ --fs-body: clamp(1.000rem, 0.97rem + 0.16vw, 1.125rem); /* 16 -> 18 */ --fs-lead: clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem); /* 18 -> 22 */ --fs-h4: clamp(1.188rem, 1.10rem + 0.42vw, 1.500rem); --fs-h3: clamp(1.438rem, 1.28rem + 0.78vw, 2.000rem); --fs-h2: clamp(1.875rem, 1.48rem + 1.95vw, 3.250rem); --fs-h1: clamp(2.500rem, 1.60rem + 4.40vw, 5.500rem); --fs-hero: clamp(2.600rem, 1.50rem + 5.40vw, 6.400rem); --lh-tight: 1.04; /* headline molto grandi */ --lh-heading: 1.14; --lh-body: 1.62; --lh-lead: 1.52; --ls-hero: -0.022em; --ls-h1: -0.020em; --ls-h2: -0.014em; --ls-h3: -0.008em; --ls-body: 0em; --ls-label: 0.18em; /* eyebrow e micro etichette */ --ls-atlas: 0.08em; /* wordmark: ATLAS */ --ls-estate: 0.34em; /* wordmark: ESTATE */ /* Misure di riga. Si applicano SULL'ELEMENTO DI TESTO, mai sul contenitore: ch si risolve sul font ereditato dall'elemento, non sul display interno. */ --measure-body: 66ch; --measure-lead: 52ch; --measure-head: 22ch; /* --------------------------------------------------------------------- 4 · SPAZIO — scala 4px --------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ --sp-11: 10rem; /* 160 */ --sp-12: 12rem; /* 192 */ --section-y: clamp(4rem, 3rem + 5vw, 9rem); --section-y-lg: clamp(6rem, 4rem + 8vw, 12rem); /* --------------------------------------------------------------------- 5 · LAYOUT --------------------------------------------------------------------- */ --container: 1280px; --container-text: 760px; /* colonna editoriale */ --container-wide: 1560px; --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 3rem); --grid-gap: clamp(1rem, 0.7rem + 1.4vw, 2rem); --header-h: 76px; --header-h-sm: 62px; /* --------------------------------------------------------------------- 6 · FORMA Atlas e architettonico: raggi piccoli, mai bolle. L'arco e la sola curva ampia ammessa, e una sola per schermata. --------------------------------------------------------------------- */ --r-none: 0; --r-xs: 2px; --r-sm: 6px; --r-md: 14px; --r-pill: 999px; --r-arch: 999px 999px 0 0; /* l'arco Atlas, proporzione 4:5 */ --bw: 1px; /* Nessuna ombra morbida diffusa sul brand: la profondita e luce e sovrapposizione, non blur. Queste due sono le uniche ammesse. */ --elev-1: 0 1px 0 rgba(197,161,90,.10); --elev-2: 0 18px 48px -24px rgba(0,0,0,.75); /* --------------------------------------------------------------------- 7 · MOVIMENTO — docs/MOTION.md §2 Due curve, quattro durate. Non quindici animazioni diverse. --------------------------------------------------------------------- */ --dur-micro: 160ms; --dur-ui: 280ms; --dur-section: 560ms; --stagger: 90ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-cine: cubic-bezier(.16, 1, .30, 1); --ease-in: cubic-bezier(.55, 0, 1, .45); /* --------------------------------------------------------------------- 8 · LIVELLI --------------------------------------------------------------------- */ --z-ambient: 0; --z-content: 1; --z-sticky: 10; --z-header: 50; --z-overlay: 80; --z-modal: 90; --z-cursor: 100; } /* -------------------------------------------------------------------------- BREAKPOINT (di riferimento, per coerenza fra CSS e JS) 360 480 768 1024 1280 1536 I CINQUE GATE DELL'HERO STATICO devono restare identici carattere per carattere qui, in hero.css e in hero-scrub.js: (max-width: 720px) (orientation: portrait) and (max-width: 1024px) (orientation: portrait) and (pointer: coarse) (orientation: landscape) and (pointer: coarse) and (max-height: 560px) (prefers-reduced-motion: reduce) -------------------------------------------------------------------------- */ /* Sezioni invertite su avorio: i ruoli cambiano, i componenti no. */ .t-light{ --canvas: var(--canvas-light); --canvas-alt: #EAE4D8; --panel: #FFFFFF; --panel-alt: #FBF9F5; --border: #DDD5C6; --border-interactive: #8C7F6A; --text-primary: var(--text-on-light); --text-secondary: var(--text-on-light-soft); --text-muted: #6B7787; /* L'oro di riempimento resta quello del brand: navy su #C5A15A da 7.33:1, quindi il bottone primario non cambia mai colore fra i due temi. Cambia solo l'oro usato come TESTO, che su avorio serve piu scuro. */ --accent-text: #8A6729; /* 4.63:1 su avorio */ --error: var(--error-on-light); }