/* ============================================================================ DESIGN TOKENS — tommasocherubini.it ---------------------------------------------------------------------------- Single source of truth for the visual language of the public site and of both dashboard areas (Sito / Studio). Extracted from the live CSS of the reference microsite https://www.plutostudio.it/IE-tevere/ (fetched 2026-09-10). Values marked [REF] are verbatim from that stylesheet. Values marked [NEW] are additions required by the brief that the reference did not contain; each is logged in DECISIONS.md. Nothing in this file emits CSS rules except the :root declarations and the scrollbar/selection primitives at the end, which are global by nature. Load order: tokens.css must come first, before any other stylesheet. ========================================================================== */ :root { /* ========================================================================== 1. TYPEFACES -------------------------------------------------------------------------- Two voices, both SIL Open Font License, both self-hosted as subsetted woff2 (no Google Fonts, no external CDN — see @font-face in fonts.css). --font-sans Space Grotesk. Geometric grotesk. Body copy and display titles. Weights loaded: 300 / 400 / 500 / 600. [REF] --font-mono Share Tech Mono. Squared technical monospace, slashed zero. Labels, data values, navigation, buttons, all ASCII elements. Single weight: 400. [REF] ====================================================================== */ --font-sans: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'Share Tech Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ========================================================================== 2. COLOR PRIMITIVES -------------------------------------------------------------------------- The reference palette is strictly monochrome: pure black, pure white, and a ladder of white alphas. Alphas are used instead of solid grays so every value composites correctly over any surface, including image overlays. ====================================================================== */ --black: #000; --white: #fff; /* White alpha ladder — the full set in use on the reference. [REF] */ --w-06: rgba(255, 255, 255, 0.06); --w-12: rgba(255, 255, 255, 0.12); --w-15: rgba(255, 255, 255, 0.15); --w-18: rgba(255, 255, 255, 0.18); --w-20: rgba(255, 255, 255, 0.20); --w-25: rgba(255, 255, 255, 0.25); --w-35: rgba(255, 255, 255, 0.35); --w-40: rgba(255, 255, 255, 0.40); --w-45: rgba(255, 255, 255, 0.45); --w-50: rgba(255, 255, 255, 0.50); --w-55: rgba(255, 255, 255, 0.55); --w-60: rgba(255, 255, 255, 0.60); --w-65: rgba(255, 255, 255, 0.65); --w-70: rgba(255, 255, 255, 0.70); --w-75: rgba(255, 255, 255, 0.75); --w-80: rgba(255, 255, 255, 0.80); --w-90: rgba(255, 255, 255, 0.90); /* Solid equivalents of the alpha ladder composited over pure black. Use only where transparency is not an option (e.g. an opaque element that must hide content scrolling behind it). [NEW] */ --solid-06: #0f0f0f; /* panel fill */ --solid-12: #1f1f1f; /* track / rule */ --solid-18: #2e2e2e; /* standard border */ --solid-40: #666; /* strong border */ /* ========================================================================== 3. SEMANTIC SURFACES AND TEXT ====================================================================== */ /* Surfaces */ --bg: var(--black); /* page background [REF] */ --surface-1: var(--w-06); /* panels, cards, inset blocks [REF] */ --surface-2: var(--w-12); /* hover fill, bar tracks [REF] */ --scrim: rgba(0, 0, 0, 0.97); /* full-screen menu overlay [REF] */ /* Text — descending emphasis */ --text: var(--white); /* display titles, values, bold [REF] */ --text-strong: var(--w-90); /* inside body copy [REF] */ --text-body: var(--w-75); /* default body paragraph [REF] */ --text-body-soft: var(--w-65); /* secondary body, captions [REF] */ --text-dim: var(--w-35); /* labels, meta, monospace data [REF] */ --text-faint: var(--w-25); /* de-emphasised meta [REF] */ --text-ghost: var(--w-15); /* nav overlay items at rest [REF] */ /* Borders */ --border: var(--w-18); /* default 1px hairline [REF] */ --border-soft: var(--w-12); /* dividers inside dense blocks [REF] */ --border-strong: var(--w-40); /* hover state, corner brackets [REF] */ --hairline: 1px; /* every rule in the system is 1px */ --radius: 0; /* the system has no rounded corners except full-round status dots [REF] */ --radius-dot: 50%; /* ========================================================================== 4. ACCENTS -------------------------------------------------------------------------- Used sparingly: small dot bullets before labels, thin 2px colored bars. On the reference these are generated procedurally per data record; the two fixed brand accents below are specified by the brief. [BRIEF] ====================================================================== */ --accent-green: #7cff4f; --accent-magenta: #e8337a; /* Low-opacity fills of the same hues, for bar tracks and tag backgrounds. */ --accent-green-dim: rgba(124, 255, 79, 0.15); --accent-magenta-dim: rgba(232, 51, 122, 0.15); /* ========================================================================== 5. STATUS COLORS (dashboard) -------------------------------------------------------------------------- Not present on the reference — required for dense dashboard data. Tuned to the same high-chroma / high-value register as the two brand accents so they read as one family on black. [NEW] ====================================================================== */ --status-ok: var(--accent-green); /* published, done, confirmed */ --status-warn: #ffb84f; /* draft, pending, "da tradurre" */ --status-err: #ff5a4f; /* error, overdue, rejected */ --status-info: #4fd5ff; /* neutral notice, in progress */ --status-ok-dim: rgba(124, 255, 79, 0.14); --status-warn-dim: rgba(255, 184, 79, 0.14); --status-err-dim: rgba(255, 90, 79, 0.14); --status-info-dim: rgba(79, 213, 255, 0.14); /* ========================================================================== 6. TYPE SCALE — MONOSPACE -------------------------------------------------------------------------- Monospace is always uppercase and always tracked. Sizes are in px on purpose: these are UI chrome, they must not scale with the root size. ====================================================================== */ --mono-3xs: 8px; /* card tags [REF] */ --mono-2xs: 9px; /* corner meta, footer, field labels, scroll cue [REF] */ --mono-xs: 10px; /* section labels, buttons, data, ticker, nav [REF] */ --mono-sm: 11px; /* hero eyebrow, primary buttons, data values [REF] */ --mono-md: 12px; /* hero name, timeline column labels [REF] */ --mono-lg: 14px; /* scientific name / subtitle line [REF] */ --mono-xl: 1.4rem; /* timeline year [REF] */ /* ========================================================================== 7. TYPE SCALE — SANS ====================================================================== */ /* Body sizes */ --text-2xs: 0.8rem; /* card role, footnote [REF] */ --text-xs: 0.82rem; /* source text [REF] */ --text-sm: 0.85rem; /* timeline column text [REF] */ --text-base: 0.875rem; /* dense panel copy [REF] */ --text-md: 0.9rem; /* field value [REF] */ --text-lg: 1rem; /* default body paragraph [REF] */ --text-xl: 1.05rem; /* card name [REF] */ --text-2xl: 1.1rem; /* section title [REF] */ /* Fluid display sizes */ --display-sm: clamp(1.1rem, 3vw, 1.6rem); /* hero over-title [REF] */ --display-md: clamp(2rem, 5vw, 3.5rem); /* page title [REF] */ --display-lg: clamp(2rem, 6vw, 4rem); /* nav overlay item [REF] */ --display-xl: clamp(2.5rem, 7vw, 5rem); /* project title [REF] */ --display-2xl: clamp(3.5rem, 12vw, 10rem); /* hero title [REF] */ --hero-title-size: clamp(2.75rem, 9vw, 7.5rem); /* the name: a step under display-2xl, so the statement below it can be the loud line */ --statement-size: var(--display-xl); /* home statement, first thing past the hero */ --entry-label-size: clamp(1.75rem, 3.2vw, 2.75rem); /* home section buttons */ /* Weights — Space Grotesk */ --weight-light: 300; /* all body copy [REF] */ --weight-regular: 400; --weight-medium: 500; /* section titles, card names [REF] */ --weight-bold: 600; /* display titles, nav items [REF] */ /* ========================================================================== 8. LETTER-SPACING -------------------------------------------------------------------------- Tracking carries most of the system's character. Display type is tight, monospace chrome is wide. ====================================================================== */ --track-tight: 0.02em; /* large display titles [REF] */ --track-snug: 0.04em; /* nav overlay items [REF] */ --track-normal: 0.05em; /* section titles, timeline year, data [REF] */ --track-wide: 0.1em; /* timeline column labels, source labels [REF] */ --track-wider: 0.15em; /* corner meta, footer, card tags, ticker [REF] */ --track-widest: 0.2em; /* section labels, buttons, lang switcher [REF] */ --track-ultra: 0.25em; /* hero eyebrow [REF] */ --track-mega: 0.3em; /* hero name, scroll cue [REF] */ --track-max: 0.35em; /* hero over-title [REF] */ /* ========================================================================== 9. LINE-HEIGHT ====================================================================== */ --leading-none: 0.9; /* hero title [REF] */ --leading-flat: 1; /* project title [REF] */ --leading-tight: 1.1; /* nav overlay items [REF] */ --leading-snug: 1.6; /* card role text [REF] */ --leading-normal: 1.7; /* dense body, field values, source text [REF] */ --leading-relaxed: 1.8; /* default body paragraph [REF] */ /* ========================================================================== 10. SPACING -------------------------------------------------------------------------- Sub-rem px values are for UI chrome only (borders, dots, small padding). ====================================================================== */ --space-px-1: 3px; --space-px-2: 4px; --space-px-3: 5px; --space-px-4: 6px; --space-px-5: 10px; --space-3xs: 0.3rem; --space-2xs: 0.4rem; --space-xs: 0.5rem; --space-sm: 0.6rem; --space-md: 0.8rem; --space-lg: 1rem; --space-xl: 1.2rem; --space-2xl: 1.5rem; --space-3xl: 1.6rem; --space-4xl: 1.8rem; --space-5xl: 2rem; --space-6xl: 3rem; --space-7xl: 3.5rem; --space-8xl: 4rem; --space-9xl: 6rem; /* standard vertical section rhythm [REF] */ --space-10xl: 8rem; --space-11xl: 10rem; /* ========================================================================== 11. LAYOUT -------------------------------------------------------------------------- Breakpoints cannot be consumed by @media from a custom property; they are declared here as the canonical values for JS and documented for CSS. Public site uses a single breakpoint at 680px. [REF] ====================================================================== */ --container-narrow: 700px; /* long-form text page [REF] */ --container-text: 900px; /* about section [REF] */ --container: 1100px; /* default page container [REF] */ --container-wide: 1400px; /* dashboard tables [NEW] */ --gutter: 2rem; /* desktop page padding [REF] */ --gutter-sm: 1rem; /* mobile page padding [REF] */ --bp-mobile: 680px; /* public site breakpoint [REF] */ --bp-tablet: 900px; /* dashboard sidebar collapse [NEW] */ --bp-desktop: 1200px; /* [NEW] */ /* ========================================================================== 12. COMPONENT TOKENS ====================================================================== */ /* -- Outlined button: transparent, 1px border, tracked mono uppercase. Used everywhere including the landing ENTER button. External links append the "↗" glyph. [REF] */ --btn-padding: 0.75rem 1.5rem; --btn-font-size: var(--mono-sm); --btn-track: var(--track-widest); --btn-border: var(--border); --btn-color: var(--text); --btn-bg: transparent; --btn-border-hover: var(--border-strong); --btn-bg-hover: var(--surface-2); --btn-arrow: '\2197'; /* ↗ external-link indicator */ /* -- Small outlined control: language switcher, tags, chips. [REF] */ --chip-padding: 5px 10px; --chip-font-size: var(--mono-xs); --chip-border: var(--w-20); --chip-color: var(--w-50); --chip-color-hover: var(--text); --chip-border-hover: var(--w-50); /* -- Card tag: the smallest outlined label. [REF] */ --tag-padding: 3px 8px; --tag-font-size: var(--mono-3xs); /* -- Hamburger: three 1px lines. Open state rotates ±45° with a 6px vertical shift and hides the middle bar. [REF] */ --burger-width: 22px; --burger-line: 1px; --burger-gap: 5px; --burger-padding: 6px; --burger-color: var(--w-60); --burger-shift: 6px; /* -- Section label: gray tracked mono prefixed with "// ". [REF] */ --section-label-size: var(--mono-xs); --section-label-color: var(--text-dim); --section-label-prefix: '// '; --section-label-gap: 1.5rem; /* gap to the section title */ /* -- Data pair: dim mono label followed by a white mono value. [REF] */ --datum-label-size: var(--mono-xs); --datum-label-color: var(--w-50); --datum-value-size: var(--mono-sm); --datum-value-color: var(--text); --datum-gap: 2rem; /* horizontal gap between pairs in a row */ /* -- Timeline: vertical 1px rule with 7px diamond nodes, large mono year on the left, content on the right. [REF] */ --timeline-year-col: 90px; --timeline-year-col-mobile: 60px; --timeline-gap: 2rem; --timeline-gap-mobile: 1rem; --timeline-row-padding: 2rem 0; --timeline-node-size: 7px; /* square, rotated 45° into a diamond */ --timeline-node-offset: -3px; /* centers the node on the 1px rule */ --timeline-node-top: 0.3rem; /* -- Card grid: 1px gaps over a border-colored background produce true hairline separators between cells. [REF] */ --card-min-width: 280px; --card-padding: 1.8rem 1.5rem; --grid-hairline-gap: 1px; /* -- Corner brackets on framed images. [REF] */ --bracket-size: 20px; --bracket-color: var(--border-strong); /* -- Thin meter / color bar. [REF] */ --bar-height: 2px; --bar-track: var(--surface-2); --bar-fill: var(--text); --bar-segment-gap: 4px; /* -- Status dot bullet before a label. [REF] */ --dot-size: 10px; --dot-gap: 0.6rem; /* -- Ticker strip. [REF] */ --ticker-padding: 10px 0; --ticker-gap: 4rem; --ticker-bg: var(--surface-1); /* ========================================================================== 13. HERO ASCII RAIN -------------------------------------------------------------------------- Columns of characters falling behind the hero. The trail is produced by fading the whole canvas each frame rather than tracking every glyph, so --rain-fade is what sets how long a trail lingers. Read by JS via getComputedStyle. ====================================================================== */ --rain-font-size: 14; /* px */ --rain-column-ratio: 0.75; /* column width / font size */ --rain-row-ratio: 1.15; /* row height / font size */ --rain-speed-min: 8; /* rows per second */ --rain-speed-max: 22; --rain-fade: 0.045; /* per-frame black overlay alpha; lower = longer trail */ --rain-head-color: var(--white); --rain-body-color: var(--w-35); --rain-opacity: 0.5; /* canvas element opacity */ /* ========================================================================== 14. MOTION -------------------------------------------------------------------------- Short and mechanical. No spring, no bounce. ====================================================================== */ --dur-fast: 0.2s; /* color and border hovers [REF] */ --dur-base: 0.3s; /* hamburger morph [REF] */ --dur-slow: 0.35s; /* overlay fade [REF] */ --dur-enter: 0.4s; /* page section enter [REF] */ --ease: ease; --ticker-duration: 40s; /* full marquee cycle [REF] */ --blink-duration: 2s; /* scroll cue / terminal caret [REF] */ --enter-offset: 16px; /* fadeUp translateY start [REF] */ --caret-blink-min: 0.2; /* opacity floor of the blink keyframe [REF] */ /* ========================================================================== 15. Z-INDEX ====================================================================== */ --z-hero-content: 2; /* above the grid canvas [REF] */ --z-nav-overlay: 150; /* [REF] */ --z-back-button: 199; /* [REF] */ --z-header: 200; /* lang switcher and hamburger [REF] */ --z-modal: 300; /* [NEW] */ --z-toast: 400; /* [NEW] */ /* ========================================================================== 16. SCROLLBAR -------------------------------------------------------------------------- Thin custom gray scrollbar. Not present on the reference; specified by the brief and sized to match the system's 1px/hairline register. [BRIEF] ====================================================================== */ --scrollbar-width: 8px; --scrollbar-track: var(--black); --scrollbar-thumb: var(--w-18); --scrollbar-thumb-hover: var(--w-40); /* ========================================================================== 17. DASHBOARD OVERRIDES -------------------------------------------------------------------------- Same design system, retuned for dense data and long working sessions: a marginally lifted base (kills OLED smear behind large tables while leaving room for a true-black modal scrim), a tighter spacing scale, and smaller leading. Applied by scoping to the dashboard root element. [NEW] ====================================================================== */ --dash-bg: #070707; --dash-surface: #101010; /* panel, card, table header */ --dash-surface-hover: #161616; /* row hover */ --dash-border: var(--w-12); /* softer than the public site's 0.18 */ --dash-border-strong: var(--w-25); --dash-row-height: 34px; --dash-cell-padding: 0.5rem 0.75rem; --dash-sidebar-width: 220px; --dash-topbar-height: 48px; --dash-font-size: 13px; /* table and form body */ --dash-label-size: var(--mono-2xs); --dash-leading: 1.5; --dash-space-xs: 0.25rem; --dash-space-sm: 0.5rem; --dash-space-md: 0.75rem; --dash-space-lg: 1rem; --dash-space-xl: 1.5rem; --dash-space-2xl: 2rem; --dash-input-height: 32px; --dash-input-bg: var(--black); --dash-input-border: var(--w-18); --dash-input-border-focus: var(--w-50); --dash-focus-ring: var(--accent-green); } /* ============================================================================ GLOBAL PRIMITIVES ---------------------------------------------------------------------------- The only rules in this file. They are here because a scrollbar and a selection color are properties of the token system itself, not of any single component. ========================================================================== */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* WebKit / Blink */ *::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 0; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: var(--scrollbar-track); } ::selection { background: var(--white); color: var(--black); } /* Respect the OS reduced-motion setting: the ticker, the grid drift, the blink and the typing effect all stop. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-enter: 0.01ms; --ticker-duration: 0s; --blink-duration: 0s; --grid-drift: 0; --enter-offset: 0px; } } /* ========================================================================== PUBLIC SITE — REDESIGN 2026-10 -------------------------------------------------------------------------- The redesign's tokens, taken from the approved prototype (design-reference/home/index.html). Own names, so the dashboard — which shares this file — keeps everything above exactly as it was. Black and white only: colour reaches the page through project media alone. ========================================================================== */ :root { /* palette */ --pub-bg: #000; --pub-fg: #f4f4f2; --pub-dim: #7d7d79; --pub-faint: #3a3a37; --pub-line: #1f1f1d; --pub-body: #cfcfcb; /* running text, a step under the fg */ --pub-panel: #050505; /* the data-viz window, media wells */ --pub-veil: rgba(0, 0, 0, .52); /* faces */ --pub-display: "Space Grotesk", system-ui, sans-serif; --pub-mono: "Geist Mono", ui-monospace, Menlo, monospace; --pub-text: "IBM Plex Sans", system-ui, sans-serif; /* layout */ --pub-gut: clamp(16px, 2.6vw, 40px); --pub-measure: 65ch; /* readable line for long text */ /* type */ --pub-mono-size: 11px; --pub-mono-track: .16em; --pub-title-size: clamp(30px, 4.6vw, 76px); /* section titles */ --pub-hero-size: clamp(26px, 3.6vw, 60px); /* hero lines */ --pub-big-size: clamp(30px, 4vw, 64px); /* Let's work together */ --pub-text-size: 16px; --pub-desc-size: clamp(15px, 1.15vw, 19px); /* descriptive text */ --pub-lead-size: clamp(16px, 1.3vw, 21px); /* first paragraph of an introduction */ /* vertical rhythm */ --gap-title-text: clamp(20px, 2.4vw, 36px); /* a title and its text */ --gap-text-block: clamp(32px, 4vw, 64px); /* a text and the next block */ --gap-section: clamp(56px, 7vw, 112px); /* page and home sections */ --gap-cards: clamp(14px, 1.6vw, 24px); /* cards in a grid */ /* motion */ --pub-ease: cubic-bezier(.2, .7, .2, 1); --pub-ease-roll: cubic-bezier(.7, 0, .2, 1); --pub-ease-rise: cubic-bezier(.2, .75, .15, 1); --pub-reveal: .6s; --pub-rise-step: 24ms; /* letter stagger of section titles */ }