/* Speaking Matter — design tokens * Forensic / cyber-geological lab aesthetic * Black display blocks · white PLA reliefs · raw stone · terminal accent */ :root { /* ─── Colour ─── */ --c-bg: #0a0a0a; /* near-black, like the display blocks */ --c-surface: #161616; /* card/panel surface */ --c-surface-2: #1f1f1f; /* elevated panel */ --c-line: #2a2a2a; /* hairline rules */ --c-fg: #f4f1ea; /* warm off-white, like the PLA reliefs */ --c-fg-dim: #a39f96; /* secondary text */ --c-fg-mute: #6b6862; /* tertiary / metadata */ --c-stone: #8a7a68; /* raw stone warm grey-brown */ --c-accent: #9fd3a4; /* cool terminal green — primary accent */ --c-accent-dim: #5e8c63; --c-warn: #d4a64a; /* amber — used sparingly for crypto warnings */ --c-warn-dim: #8a6e30; --c-danger: #c8543a; /* dramatic delete / destruction */ /* ─── Type ─── */ /* Serif everywhere. English: Source Serif 4 (warm, generous, * exhibition-catalogue). Hebrew: Abraham TRIAL (Masterfont) — * humanist, lightly geometric, sits naturally next to Source Serif 4. * Both are used for body prose AND for what was previously sans * (titles, UI, nav, buttons), so the whole portal reads as a single * serif voice. --f-sans is kept as an alias so legacy references * resolve to serif without churn. * * Abraham TRIAL files are not in this repo (TRIAL license forbids * redistribution) — they're served from speaking-matter-fonts.netlify.app * via @font-face rules in css/fonts-local.css. Frank Ruhl Libre stays * in the chain as a safe Google-Fonts fallback. */ --f-serif: 'Source Serif 4', 'Georgia', serif; --f-sans: var(--f-serif); --f-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace; /* Hebrew serif (used for both prose and chrome). */ --f-serif-he: 'Abraham TRIAL', 'Frank Ruhl Libre', 'David', serif; --f-sans-he: var(--f-serif-he); /* Modular type scale — base 18px, ratio 1.25 */ --t-xs: 0.72rem; /* 12.96px */ --t-sm: 0.9rem; /* 16.2px */ --t-base: 1rem; /* 18px */ --t-md: 1.25rem; /* 22.5px */ --t-lg: 1.563rem; /* 28.1px */ --t-xl: 1.953rem; /* 35.2px */ --t-2xl: 2.441rem; /* 43.9px */ --t-3xl: 3.052rem; /* 54.9px */ --t-4xl: 3.815rem; /* 68.7px */ --t-5xl: 4.768rem; /* 85.8px */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-base: 1.55; --lh-loose: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* eyebrow / station numbers */ /* ─── Spacing (8px grid) ─── */ --s-1: 0.5rem; /* 8 */ --s-2: 1rem; /* 16 */ --s-3: 1.5rem; /* 24 */ --s-4: 2rem; /* 32 */ --s-5: 3rem; /* 48 */ --s-6: 4rem; /* 64 */ --s-7: 6rem; /* 96 */ --s-8: 8rem; /* 128 */ --s-9: 12rem; /* 192 */ /* ─── Layout ─── */ --maxw-text: 60ch; --maxw-prose: 70ch; --maxw-wide: 1280px; --gutter: clamp(1rem, 4vw, 3rem); --header-h: 56px; /* ─── Motion ─── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 180ms; --d-base: 320ms; --d-slow: 640ms; --d-glacial: 1200ms; /* ─── Effects ─── */ --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25); --grain-opacity: 0.04; } html { background: var(--c-bg); color: var(--c-fg); } /* English body prose uses Newsreader serif for warmth + readability. * Headings/buttons/UI chrome stay sans (Inter). */ body { font-family: var(--f-sans); font-size: var(--t-base); line-height: var(--lh-base); letter-spacing: var(--tracking-normal); background: var(--c-bg); color: var(--c-fg); } :root.lang-en .prose, :root.lang-en .station__label, :root.lang-en .hero__sub, :root.lang-en .card__lead, :root.lang-en .modal__body, :root.lang-en .site-footer p { font-family: var(--f-serif); font-weight: 400; line-height: 1.7; letter-spacing: -0.005em; } /* Code, hex, ciphertext */ code, pre, .mono { font-family: var(--f-mono); } /* ─── Locale switching ───────────────────────────────────── * A single root class (.lang-he / .lang-en) plus dir="rtl|ltr" * is set by js/i18n.js. Hebrew layout uses Heebo for chrome/headings * and Frank Ruhl Libre for body prose to give content gravitas. */ :root.lang-he, :root.lang-he body { font-family: var(--f-sans-he); letter-spacing: 0; } :root.lang-he .prose, :root.lang-he .prose-he, :root.lang-he .station__label, :root.lang-he .hero__sub, :root.lang-he .card__lead, :root.lang-he .modal__body, :root.lang-he .site-footer p { font-family: var(--f-serif-he); line-height: 1.85; } :root.lang-he .station__title, :root.lang-he .hero__title, :root.lang-he .station__eyebrow, :root.lang-he .hero__eyebrow, :root.lang-he .site-nav a, :root.lang-he .brand, :root.lang-he h4 { font-family: var(--f-sans-he); letter-spacing: 0; } /* Carousel chrome: prev/next buttons, chip labels at the top of the * stations slider, and the swipe-hint. These selectors hardcode * --f-sans in carousel.css, so without this override they'd render * as Source Serif 4 even in Hebrew mode. Also strip uppercase and * the wide tracking which only make sense for the Latin column. */ :root.lang-he .carousel-btn, :root.lang-he .carousel-btn__label, :root.lang-he .carousel-dots button, :root.lang-he .carousel-dots .dot-label, :root.lang-he .carousel-swipe-hint { font-family: var(--f-sans-he); text-transform: none; letter-spacing: 0; } /* Hebrew content blocks that stay scoped (legacy) */ [lang="he"] { font-family: var(--f-sans-he); direction: rtl; text-align: start; letter-spacing: 0; } [lang="he"].serif { font-family: var(--f-serif-he); } /* Selection */ ::selection { background: var(--c-accent); color: var(--c-bg); } /* Subtle film grain overlay (applied to body via ::before) */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; }