/* ============================================================ tokens.css — copia dal design system, NON modificare qui. Fonte: 01_Governance_and_Identity/design_system/tokens/tokens.css Per cambiare un valore: modificalo là, poi ricopia questo file. ============================================================ */ /* ============================================================ CHIESU DESIGN SYSTEM — tokens.css Fonte unica di verità. Due fonti, in questo ordine di autorità: 1. il sito vivo — `old stuff/2026-chiesu-it/` (styles.css, index.html, script.js). È ciò che i clienti vedono davvero: vince sul resto. 2. `01_Governance_and_Identity/brand_guidelines.md` per le regole che il codice del sito non esprime (lessico, limiti etici, ritmo della consegna). REGOLA ZERO — Due assi indipendenti, non tre modalità in fila: TEMA (chiaro/scuro) — chi guarda :root segue il sistema operativo [data-theme="carta"] forza il chiaro [data-theme="notte"] forza lo scuro (anche il lightbox, sempre) SUPERFICIE (vetro/opaco) — a cosa serve la schermata default Liquid Glass e grana: il sito pubblico [data-surface="matte"] opaco e denso: listini, PDF, dashboard I due assi si combinano liberamente: esiste un listino scuro e una gallery chiara. Ogni ruolo qui sotto dichiara chiaro e scuro sulla stessa riga con light-dark(), così non esistono due liste da tenere allineate a mano. ============================================================ */ :root { /* L'interruttore. color-scheme fa due cose: dice a light-dark() quale dei due valori prendere, e mette in scuro anche scrollbar e controlli nativi del browser, che nessun token può raggiungere. */ color-scheme: light dark; /* ---------- 1. PRIMITIVI COLORE --------------------------------------- Presi dal sito, non inventati: --bg-primary #E6DFD3 → sabbia-200 --bg-secondary #DDD5C7 → sabbia-300 --text-main #3E3A37 → inchiostro-800 --text-muted #5C5651 → inchiostro-700 --color-primary #D4AF37 → oro-400 --color-secondary #C5A028 → oro-500 --card-gradient #FFFCE8 → oro-050 (era un token morto: qui rivive) Le rampe intorno a questi valori sono estese per dare stati e bordi. */ /* SABBIA — la carta del brand. Nessun bianco puro in tutto il sistema. */ --c-sabbia-050: #FBF8F2; --c-sabbia-100: #F4EFE6; --c-sabbia-200: #E6DFD3; /* ★ fondo pagina */ --c-sabbia-300: #DDD5C7; /* ★ fondo alternato, fascia workflow */ --c-sabbia-400: #CFC5B4; --c-sabbia-500: #B8AC98; /* INCHIOSTRO — scuri caldi. Il nero neutro non esiste in questo brand: ogni scuro tiene una punta di marrone, come il legno della golden hour. */ --c-inchiostro-950: #171514; --c-inchiostro-900: #23211F; --c-inchiostro-850: #2C2926; /* gradino di elevazione, esiste solo al buio */ --c-inchiostro-800: #3E3A37; /* ★ testo principale — 8.50:1 su sabbia */ --c-inchiostro-700: #5C5651; /* ★ testo attenuato — 5.46:1 */ --c-inchiostro-600: #67615A; /* solo icone e decoro, non corpo testo */ --c-inchiostro-400: #9A928A; --c-inchiostro-200: #C8C1B7; /* ORO — l'accento del sito. Come il giallo dei brand guidelines, è un colore di SUPERFICIE: come testo su sabbia arriva a 1.59:1. Per scrivere in oro esistono due soli token, oro-600 e oro-700. */ --c-oro-700: #5E4C11; /* testo in oro su sabbia — 6.30:1 */ --c-oro-600: #6E5A15; /* testo in oro, minimo ammesso — 5.06:1 */ --c-oro-500: #C5A028; /* ★ bordo, stato premuto */ --c-oro-400: #D4AF37; /* ★ accento primario del sito */ --c-oro-300: #E3C766; --c-oro-050: #FFFCE8; /* ★ velo dorato dietro le card */ --c-oro-glow: rgba(212, 175, 55, 0.4); /* --accent-glow del sito */ /* IL GIALLO ACCENTO È UNO SOLO: l'oro qui sopra. Il «Colore Chiesu» di §16 — il giallo acceso #FADE00 — è una decisione rimandata: non esiste come token, quindi non può entrare per sbaglio in un componente. Quando arriverà, avrà una sua scheda e un suo perimetro. Fino ad allora l'unico accento del sistema è l'oro, in tutte e tre le modalità: su sabbia 1.59:1 come testo (quindi solo superficie), su inchiostro 8.66:1 (quindi anche testo). Un accento, nessuna ambiguità. */ /* SEMANTICI — due tarature. I -600 sono per la sabbia, i -400 per l'inchiostro: lo stesso verde che si legge sulla carta al buio sparisce, e viceversa. Nessuno dei due è «il colore giusto». */ --c-ok-600: #276B43; /* 4.85:1 su sabbia */ --c-ok-400: #5FBE85; /* 7.97:1 su notte */ --c-warn-600: #8A5010; /* 4.90:1 su sabbia */ --c-warn-400: #E0A445; /* 8.29:1 su notte */ --c-danger-600: #A32D1B; /* 5.38:1 su sabbia */ --c-danger-400: #F0705A; /* 6.21:1 su notte */ /* Canali social — il colore ufficiale del marchio più una versione schiarita per il fondo scuro. Il blu di LinkedIn su inchiostro fa 3.62:1: supera la soglia 3:1 degli elementi non testuali, ma su un tratto da 2px il margine è risicato. Le versioni -400 non correggono una violazione, allargano un margine. */ --c-instagram: #E1306C; --c-instagram-400: #F0619A; --c-linkedin: #0E76A8; --c-linkedin-400: #4FB3DE; --c-youtube: #FF0000; --c-youtube-400: #FF6B5B; /* ---------- 2. TIPOGRAFIA ------------------------------------------- I nomi reali del kit Typekit del sito (pny8nhw): `acumin-pro` e `altesse-std-64pt`. La licenza web esiste già — non serve sostituirli. */ --font-ui: acumin-pro, "Acumin Pro", "Helvetica Neue", Inter, -apple-system, system-ui, sans-serif; --font-script: altesse-std-64pt, "Altesse Std", "Snell Roundhand", "Apple Chancery", cursive; --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --typekit-url: "https://use.typekit.net/pny8nhw.css"; /* Scala presa dagli rem del sito (h1 3rem→5rem, h2 1.8→3rem, corpo 1rem, descrizioni 0.95rem, about 1.15→1.3rem). */ --fs-100: 0.75rem; /* 12 — micro-testo */ --fs-200: 0.875rem; /* 14 */ --fs-300: 0.95rem; /* 15.2 — ★ testo di card e descrizioni */ --fs-400: 1rem; /* 16 — ★ corpo */ --fs-500: 1.1rem; /* 17.6 — sottotitolo hero, lead */ --fs-600: 1.25rem; /* 20 — titolo di social card */ --fs-700: 1.4rem; /* 22.4 — titolo di workflow card */ --fs-800: 1.8rem; /* 28.8 — h2 mobile, titolo progetto in Altesse */ --fs-900: 3rem; /* 48 — h2 desktop, h1 mobile */ --fs-1000: 4rem; /* 64 — numeri workflow in Altesse */ --fs-1100: 5rem; /* 80 — wordmark hero desktop */ --lh-tight: 1.2; /* titoli — il valore del sito */ --lh-base: 1.6; /* corpo — il valore del sito */ --lh-loose: 1.8; /* blocco «Info Utili» */ --tr-tight: -0.01em; --tr-base: 0em; --tr-micro: 0.14em; /* micro-testo maiuscolo */ --fw-regular: 400; /* Altesse gira sempre a 400 */ --fw-bold: 700; /* il sito usa solo 400 e 700: non inventare pesi */ /* ---------- 3. SPAZIO E GRIGLIA ------------------------------------- Il sito ragiona in rem da 1.5 (padding di body e nav). Base 4px. */ --sp-025: 0.125rem; --sp-05: 0.25rem; --sp-1: 0.5rem; --sp-15: 0.75rem; --sp-2: 1rem; --sp-25: 1.25rem; --sp-3: 1.5rem; /* ★ padding di body e gutter della nav */ --sp-4: 2rem; --sp-5: 2.5rem; --sp-6: 3rem; --sp-8: 4rem; /* ★ padding laterale desktop */ --sp-10: 5rem; --sp-12: 6rem; --w-page: 1200px; /* max-width delle sezioni del sito */ --w-card: 800px; /* project card su desktop */ --w-reading: 600px; /* descrizioni e about */ --w-workflow-card: 420px; /* ---------- 4. RAGGI -------------------------------------------------- Tutti presi dal sito: la pillola da 60px è la firma geometrica. */ --r-input: 8px; --r-img: 14px; /* immagine dentro la project card */ --r-sm: 20px; /* about item, social card */ --r-md: 24px; /* project card, workflow card */ --r-lg: 40px; /* gruppo di voci del menu */ --r-pill: 60px; /* ★ nav, bottoni, voci di menu */ --r-round: 50%; /* foto profilo, burger, icone social */ --r-polaroid: 2px; /* la stampa fisica non ha angoli morbidi */ --bw-hair: 1px; --bw-focus: 2px; /* ---------- 5. LIQUID GLASS ----------------------------------------- LA ricetta. Nel sito è copiata a mano 20 volte: qui esiste una volta, e ogni strato porta il suo valore chiaro e il suo valore scuro. Al buio il vetro non è la stessa cosa schiarita: il riflesso bianco scende dal 35% al 10% (sopra sembrerebbe latte) e l'ombra esterna sale da 0.08 a 0.45, perché su fondo scuro un'ombra tenue non esiste. */ --glass-fill: light-dark(rgba(230, 223, 211, 0.5), rgba(44, 41, 38, 0.55)); --glass-fill-2: light-dark(rgba(230, 223, 211, 0.95), rgba(23, 21, 20, 0.95)); --glass-border: light-dark(rgba(255, 255, 255, 0.55), rgba(244, 239, 230, 0.16)); --glass-blur: blur(28px) saturate(160%); --glass-blur-thin: blur(16px); --sheen-color: light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.10)); --glass-sheen: linear-gradient(160deg, var(--sheen-color) 0%, rgba(255, 255, 255, 0) 60%); --shadow-ambient: light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.45)); --shadow-inset-top: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.10)); --shadow-inset-bottom: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.30)); --glass-shadow: 0 8px 24px var(--shadow-ambient), 0 1px 0 var(--shadow-inset-top) inset, 0 -1px 0 var(--shadow-inset-bottom) inset; --glass-shadow-sm: 0 4px 24px var(--shadow-ambient), 0 1px 0 var(--shadow-inset-top) inset, 0 -1px 0 var(--shadow-inset-bottom) inset; --glass-shadow-lift: 0 15px 35px var(--accent-glow); /* ---------- 6. GRANA ------------------------------------------------ feTurbulence in SVG inline. Due frequenze: 0.95 per la pagina, 0.8 per le card — grano più fine su superficie più piccola, come la pellicola. */ --grain-page: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-card: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Questi due non sono colori, quindi light-dark() non li raggiunge: si ribaltano più sotto. In multiply il rumore scurisce, ed è ciò che serve sulla carta; al buio scurire il nero non produce nulla, quindi passa a overlay, che schiarisce dove il rumore è chiaro. */ --grain-opacity: 0.04; --grain-blend: multiply; /* ---------- 7. MOTO -------------------------------------------------- Durate e curva del sito. `cubic-bezier(0.16, 1, 0.3, 1)` compare 12 volte: è la curva del brand, l'unica con carattere. */ --ease-drop: cubic-bezier(0.16, 1, 0.3, 1); /* ★ il drop */ --ease-out: ease-out; --dur-tap: 0.2s; --dur-fast: 0.3s; /* hover, bordi, icone */ --dur-base: 0.4s; /* ★ la durata più usata del sito */ --dur-slow: 0.8s; /* reveal in scroll */ --dur-morph: 0.35s; /* comparsa della nav */ /* Sollevamenti reali dell'hover, non inventati. */ --lift-card: translateY(-6px) scale(1.02); --lift-row: translateX(8px); --press-card: scale(0.98); --spin-icon: rotate(8deg) scale(1.1); /* Dutch angle: sul sito solo all'hover; sui social statico e voluto. */ --tilt-hover: -2.5deg; --tilt-social: -4deg; --tilt-social-alt: 3.5deg; /* ---------- 8. RUOLI SEMANTICI -------------------------------------- Una riga per ruolo: a sinistra la carta, a destra la notte. Chi legge vede subito le due facce della stessa decisione, e non esiste il modo di aggiornarne una e dimenticare l'altra. */ /* Elevazione. Sulla carta si sale verso il bianco, al buio verso il grigio caldo: l'ombra al buio quasi non si vede, quindi a fare l'elevazione è il fondo che schiarisce, non l'ombra che si allunga. */ --bg: light-dark(var(--c-sabbia-200), var(--c-inchiostro-950)); --bg-alt: light-dark(var(--c-sabbia-300), var(--c-inchiostro-900)); --bg-raised: light-dark(var(--c-sabbia-050), var(--c-inchiostro-850)); --fg: light-dark(var(--c-inchiostro-800), var(--c-sabbia-100)); --fg-muted: light-dark(var(--c-inchiostro-700), var(--c-sabbia-400)); --fg-subtle: light-dark(var(--c-inchiostro-600), var(--c-inchiostro-400)); --fg-on-accent: light-dark(var(--c-inchiostro-900), var(--c-inchiostro-950)); /* L'accento non cambia: l'oro è l'oro. Cambia cosa gli è permesso fare. Su sabbia come testo fa 1.59:1, quindi il testo in oro scende a oro-700; su inchiostro fa 8.66:1, quindi può salire a oro-300. */ --accent: var(--c-oro-400); --accent-strong: light-dark(var(--c-oro-500), var(--c-oro-300)); --accent-text: light-dark(var(--c-oro-700), var(--c-oro-300)); --accent-veil: light-dark(var(--c-oro-050), rgba(212, 175, 55, 0.14)); --accent-glow: light-dark(var(--c-oro-glow), rgba(212, 175, 55, 0.30)); --ok: light-dark(var(--c-ok-600), var(--c-ok-400)); --warn: light-dark(var(--c-warn-600), var(--c-warn-400)); --danger: light-dark(var(--c-danger-600), var(--c-danger-400)); --ch-instagram: light-dark(var(--c-instagram), var(--c-instagram-400)); --ch-linkedin: light-dark(var(--c-linkedin), var(--c-linkedin-400)); --ch-youtube: light-dark(var(--c-youtube), var(--c-youtube-400)); --border: light-dark(rgba(62, 58, 55, 0.08), rgba(244, 239, 230, 0.12)); --border-strong: light-dark(rgba(62, 58, 55, 0.20), rgba(244, 239, 230, 0.26)); --divider: light-dark(rgba(62, 58, 55, 0.10), rgba(244, 239, 230, 0.14)); /* Focus a due toni: l'anello prende il colore opposto al fondo, l'alone resta oro. Così è visibile in entrambi i temi senza casi particolari. */ --focus-ring: light-dark(var(--c-inchiostro-900), var(--c-oro-300)); --focus-halo: light-dark(var(--c-oro-400), var(--c-inchiostro-950)); --disabled-bg: light-dark(var(--c-sabbia-400), var(--c-inchiostro-850)); --disabled-fg: light-dark(var(--c-inchiostro-700), var(--c-inchiostro-400)); --z-base: 0; --z-sticky: 20; --z-nav: 1000; --z-overlay: 999; --z-anim: 1100; } /* ============================================================ L'INTERRUTTORE DEL TEMA Senza attributo si segue il sistema operativo: è il default giusto, perché nessuno deve configurare un sito di fotografia per leggerlo. L'attributo su è la scelta esplicita di chi guarda e vince sempre; sul singolo elemento serve a inchiodare una superficie a un tema, come il lightbox, che è nero anche a mezzogiorno. ============================================================ */ [data-theme="carta"] { color-scheme: light; } [data-theme="notte"] { color-scheme: dark; } /* La grana non è un colore: si ribalta qui. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="carta"]) { --grain-blend: overlay; --grain-opacity: 0.05; } } [data-theme="notte"] { --grain-blend: overlay; --grain-opacity: 0.05; } [data-theme="carta"] { --grain-blend: multiply; --grain-opacity: 0.04; } /* ============================================================ MATTE — strumenti e stampa: opaco, denso, niente vetro né grana. Il Liquid Glass «riduce la produttività» su uno schermo di lavoro (§12). È un asse indipendente dal tema: esiste un listino chiaro e un listino scuro, e questo blocco non nomina un solo colore — legge i ruoli, così segue il tema qualunque esso sia. ============================================================ */ [data-surface="matte"] { --glass-fill: var(--bg-raised); --glass-fill-2: var(--bg-raised); --glass-border: var(--border-strong); --glass-blur: none; --glass-blur-thin: none; --sheen-color: transparent; --glass-sheen: none; --glass-shadow: 0 1px 3px var(--shadow-ambient); --glass-shadow-sm: 0 1px 2px var(--shadow-ambient); --glass-shadow-lift: 0 2px 6px var(--shadow-ambient); --grain-page: none; --grain-card: none; --lift-card: none; --lift-row: none; --tilt-hover: 0deg; --dur-slow: var(--dur-fast); --r-md: 12px; --r-sm: 10px; --r-pill: 8px; /* gli strumenti non hanno pillole: hanno campi */ } /* ============================================================ Il sito non ha nessuna riga di prefers-reduced-motion, e gira su un render loop con lerp continuo, morph FLIP e scroll orizzontale pilotato da JS. Questo blocco è il debito che il design system paga: «ci si ferma davanti a un no» (§1) vale anche qui. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-slow: 1ms; --dur-base: 1ms; --dur-morph: 1ms; --lift-card: none; --lift-row: none; --spin-icon: none; --tilt-hover: 0deg; } }