/* ============================================================================ HOMO LAPIS 2026 — TOKEN --------------------------------------------------------------------------- I valori non sono inventati: vengono da sette siti di studi misurati uno per uno (ManvsMachine, Studio Dumbar, BUCK, Basic/Dept, Territory, Instrument, Locomotive). Le costanti che ne escono: - il fondo chiaro e' un grigio neutro (#f4f4f4 su mvsm e Basic), non il bianco e non una carta calda; - il fondo scuro e' un nero non puro (#0a0a0a Territory, #070708 Instrument, #252422 Basic); - il carattere di lavoro e' sempre un grotesque, e i corpi sono contenuti (H1 36px mvsm, H2 42px Basic, H1 70px Locomotive). Il corpo grande e' riservato al marchio, non ai titoli di sezione; - sei siti su sette non hanno **nessun** canvas WebGL. Da qui: chiaro neutro + nero vero che si alternano, un grotesque, un serif come accento raro, e il lavoro al posto della grafica generata. ========================================================================= */ :root { /* --- FONDI ------------------------------------------------------------- Due soli, e si alternano. Il chiaro e' appena caldo perche' il marchio e' caldo, ma resta un grigio: la carta color avorio della versione precedente tirava il sito verso il vintage. */ --hl-light: #f3f2f0; --hl-light-2: #e9e8e5; --hl-sheet: #ffffff; --hl-dark: #0d0d0f; --hl-dark-2: #16161a; --hl-dark-3: #232329; /* --- INCHIOSTRO --------------------------------------------------------- */ --hl-ink: #1a1a1c; --hl-ink-dim: #55555b; /* 4,6:1 anche sul chiaro piu' scuro #e9e8e5, dove vive il testo tenue delle fasce alternate. */ --hl-ink-mute: #66666e; --hl-paper-fg: #f2f2f0; --hl-paper-fg-dim: #b4b4bc; --hl-paper-fg-mute: #8b8b95; /* --- ACCENTO ----------------------------------------------------------- Il viola del marchio, quello vero misurato sul file del 2022. Il rosso e' la seconda tinta e resta rara: un numero, un segno, uno stato. */ --hl-violet: #924c97; --hl-violet-deep: #6e3573; --hl-violet-lt: #b57ab9; --hl-violet-soft: rgba(146, 76, 151, 0.10); --hl-red: #e42320; --hl-red-deep: #c21d1b; /* --- RUOLI -------------------------------------------------------------- */ --hl-bg: var(--hl-light); --hl-bg-alt: var(--hl-light-2); --hl-surface: var(--hl-sheet); --hl-fg: var(--hl-ink); --hl-fg-dim: var(--hl-ink-dim); --hl-fg-mute: var(--hl-ink-mute); --hl-accent: var(--hl-violet); --hl-accent-tx: var(--hl-violet-deep); --hl-rule: rgba(26, 26, 28, 0.14); --hl-rule-soft: rgba(26, 26, 28, 0.07); --hl-rule-strong: rgba(26, 26, 28, 0.32); /* --- FACCE -------------------------------------------------------------- Un grotesque per tutto. Il serif compare in corsivo, una parola per pagina, come fa Instrument. */ --hl-font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --hl-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --hl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- SCALA -------------------------------------------------------------- Il marchio grande, i titoli contenuti: e' il rapporto che hanno tutti i siti misurati. Un H2 da 50px accanto a un marchio da 180px legge come gerarchia; due titoli da 100px leggono come rumore. */ --hl-fs-wordmark: clamp(3.2rem, 11.5vw, 11rem); --hl-fs-display: clamp(2.4rem, 5.2vw, 4.4rem); --hl-fs-h1: clamp(2.1rem, 4.4vw, 3.6rem); --hl-fs-h2: clamp(1.7rem, 3vw, 2.6rem); --hl-fs-h3: clamp(1.2rem, 1.7vw, 1.5rem); --hl-fs-h4: clamp(1rem, 1.3vw, 1.15rem); --hl-fs-lead: clamp(1.05rem, 1.25vw, 1.2rem); --hl-fs-body: 1rem; --hl-fs-sm: 0.875rem; --hl-fs-label: 0.6875rem; --hl-lh-wordmark: 0.86; --hl-lh-display: 1.02; --hl-lh-heading: 1.1; --hl-lh-body: 1.6; --hl-lh-lead: 1.5; --hl-ls-wordmark: -0.045em; --hl-ls-display: -0.03em; --hl-ls-heading: -0.02em; --hl-ls-body: -0.006em; --hl-ls-label: 0.14em; /* Solo per il lockup del marchio: misurata sul file del 2022, dove il rapporto larghezza/altezza-maiuscole e' 5,15 per HOMO e 4,48 per LAPIS. */ --hl-ls-wordmark: 0.19em; /* --- RITMO (base 8) ----------------------------------------------------- */ --hl-s-1: 4px; --hl-s-2: 8px; --hl-s-3: 12px; --hl-s-4: 16px; --hl-s-5: 24px; --hl-s-6: 32px; --hl-s-7: 48px; --hl-s-8: 64px; --hl-s-9: 96px; --hl-s-10: 128px; --hl-s-11: 160px; --hl-section-y: clamp(64px, 6.4vw, 108px); --hl-section-y-tight: clamp(40px, 4vw, 68px); /* --- GRIGLIA ------------------------------------------------------------ */ --hl-page-max: 1680px; --hl-content-max: 1320px; --hl-prose-max: 64ch; --hl-gutter: clamp(18px, 3vw, 40px); --hl-col-gap: clamp(12px, 1.4vw, 20px); /* --- FORME -------------------------------------------------------------- Angoli vivi sulle superfici, pillola solo sui controlli piccoli: e' la combinazione che usano Instrument e Basic. */ --hl-r-none: 0px; --hl-r-sm: 2px; --hl-r-pill: 9999px; --hl-shadow-tile: 0 24px 60px -40px rgba(13, 13, 15, 0.6); /* --- MOVIMENTO ---------------------------------------------------------- Le curve e i tempi sono quelli ricorrenti nei sistemi misurati: cubic-bezier(0.4, 0, 0.2, 1) per gli stati, cubic-bezier(0.16, 1, 0.3, 1) per gli ingressi, 150-300ms sull'interfaccia, 700-1000ms sugli ingressi. */ --hl-d-micro: 150ms; --hl-d-ui: 300ms; --hl-d-reveal: 800ms; --hl-d-media: 1000ms; --hl-e-ui: cubic-bezier(0.4, 0, 0.2, 1); --hl-e-out: cubic-bezier(0.16, 1, 0.3, 1); --hl-e-in: cubic-bezier(0.7, 0, 0.84, 0); --hl-stagger: 70ms; /* --- PIANI -------------------------------------------------------------- */ --hl-z-content: 2; --hl-z-chrome: 50; --hl-z-nav: 90; --hl-z-overlay: 100; } /* Le sezioni scure ribaltano i ruoli senza cambiare i nomi: ogni componente legge --hl-bg / --hl-fg / --hl-rule e non sa dove si trova. */ .hl-on-dark { --hl-bg: var(--hl-dark); --hl-bg-alt: var(--hl-dark-2); --hl-surface: var(--hl-dark-2); --hl-fg: var(--hl-paper-fg); --hl-fg-dim: var(--hl-paper-fg-dim); --hl-fg-mute: var(--hl-paper-fg-mute); --hl-accent: var(--hl-violet-lt); --hl-accent-tx: var(--hl-violet-lt); --hl-rule: rgba(242, 242, 240, 0.16); --hl-rule-soft: rgba(242, 242, 240, 0.08); --hl-rule-strong: rgba(242, 242, 240, 0.32); }