/* ========================================================================== AURA — Private Motorsport Hospitality global.css · Fondazioni: design tokens, reset, base, utilities Filosofia: mobile-first, unità relative (% vw em rem clamp), zero pixel fissi nel layout. Gli unici px sono hairline tipografici da 1px. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · DESIGN TOKENS — il cuore del sistema. Cambi un valore qui, cambia su tutto il sito. Tutto relativo, tutto fluido. -------------------------------------------------------------------------- */ :root { /* — Colori · DNA ereditato dalla palette originale del cliente — */ --crema: #EDEBE6; /* base, respiro */ --crema-chiara: #F4F2EE; /* superfici (card, campi) */ --crema-bordo: #D2CFCA; /* hairline di separazione */ --marrone: #493929; /* testo principale */ --marrone-70: rgba(73, 57, 41, .70); /* testo secondario */ --marrone-40: rgba(73, 57, 41, .40); /* placeholder, bordi tenui */ --marrone-15: rgba(73, 57, 41, .15); /* ombre, chip */ --verde: #24584E; /* azione, brand */ --verde-scuro: #164037; /* sezioni immersive */ --verde-20: rgba(36, 88, 78, .20); --oro: #F1BF85; /* dettaglio lusso, usato con parsimonia */ --oro-scuro: #D9A468; /* hover dell'oro */ --taupe: #9E948A; /* testo "quieto" (footer, meta) */ --bianco-soft: #FBFAF8; --errore: #A33B2E; /* sobrio, in famiglia col marrone */ /* — Tipografia — Display: Fahkwang (scaricata via negli HTML, 1 sola richiesta). Body: stack di sistema → 0 KB, 0 richiesta, rendering immediato. */ --font-display: "Fahkwang", "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* — Scala tipografica fluida: cresce da mobile a desktop in un colpo solo, senza breakpoint. clamp(min, preferita, max) — mai px assoluti. */ --fs-display: clamp(2.75rem, 9vw, 7rem); /* hero claim */ --fs-h1: clamp(2.25rem, 6vw, 4.5rem); /* titoli pagina */ --fs-h2: clamp(1.9rem, 4.5vw, 3.25rem); /* titoli sezione */ --fs-h3: clamp(1.35rem, 2.5vw, 1.75rem); --fs-body-l: clamp(1.05rem, 1.4vw, 1.25rem); /* lead / manifesto */ --fs-body: 1rem; --fs-small: .875rem; --fs-eyebrow: .75rem; --fs-micro: .6875rem; /* — Ritmo verticale: spaziatura che respira col viewport */ --sp-3xs: .25rem; --sp-2xs: .5rem; --sp-xs: clamp(.75rem, 1.5vw, 1rem); --sp-s: clamp(1.25rem, 2.5vw, 1.75rem); --sp-m: clamp(2rem, 4vw, 3rem); --sp-l: clamp(3rem, 6vw, 4.5rem); --sp-xl: clamp(4.5rem, 9vw, 7rem); /* — Layout */ --container: 90rem; /* max 1440: oltre, il testo ringrazia */ --gutter: clamp(1.25rem, 5vw, 4rem); /* margine laterale fluido */ --radius-s: .25em; /* in em: scala col testo */ --radius-m: .5em; /* — Moto: stesse curve ovunque = sito che sembra "un pezzo solo" */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --t-fast: .18s; --t-med: .3s; --t-slow: .5s; /* — Layer e misure condivise (usate da layout.css, fase 2) */ --z-header: 100; --z-overlay: 200; --header-h: clamp(3.5rem, 9vw, 5rem); } /* -------------------------------------------------------------------------- 2 · RESET — minimale e moderno -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* anchor: si arriva dolcemente */ } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--marrone); background: var(--crema); min-height: 100svh; /* svh: l'altezza VERA del mobile */ overflow-x: clip; /* niente scroll orizzontale fantasma */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } a { color: inherit; } /* Anchor: atterra sotto l'header fisso, non sotto di lui */ :target { scroll-margin-top: calc(var(--header-h) + 1rem); } /* -------------------------------------------------------------------------- 3 · TIPOGRAFIA BASE -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: .01em; text-wrap: balance; /* titoli sempre eleganti, se supportato */ } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-body-l); } p { max-width: 65ch; } /* ch = relativo alla larghezza dello 0: righe sempre leggibili su qualunque schermo */ strong { font-weight: 700; } em { font-style: italic; } ::selection { background: var(--verde); color: var(--crema); } /* Focus visibile ma elegante — accessibilità non negoziabile */ :focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 4 · UTILITIES -------------------------------------------------------------------------- */ /* Contenitore: 100% meno due gutter → sempre percentuale pura. Il max-width ferma gli ultrawide senza toccare il flusso. */ .container { width: min(100% - (2 * var(--gutter)), var(--container)); margin-inline: auto; } /* Testo solo per screen reader (skip link, aria) */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* "Passa al contenuto" — primo tab della pagina */ .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: var(--z-overlay); padding: .7em 1.2em; background: var(--verde); color: var(--crema); border-radius: var(--radius-s); font-size: var(--fs-small); font-weight: 600; transform: translateY(-200%); /* fuori schermo finché non è attivo */ transition: transform var(--t-fast) var(--ease-out); } .skip-link:focus-visible { transform: none; } /* -------------------------------------------------------------------------- 5 · SCROLLBAR sobria (solo desktop, solo WebKit) — tocco di marca -------------------------------------------------------------------------- */ @media (pointer: fine) { ::-webkit-scrollbar { width: .75rem; } ::-webkit-scrollbar-track { background: var(--crema); } ::-webkit-scrollbar-thumb { background: var(--taupe); border: 3px solid var(--crema); border-radius: 1rem; } } /* -------------------------------------------------------------------------- 6 · ACCESSIBILITÀ · prefers-reduced-motion Chi lo chiede, riceve un sito fermo: tutto si spegne in 3 righe. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }