/* ===================================================================== FHV Fachbereich Gestaltung — identity tokens (v0.1, 2026-10-20) Single source for colour, type, grid and register across screen + print. Sources: FHV Brand Portal (CD 2025 colour page; Aeonik Pro Hausschrift; black/white primary; three-field composition; no department colours), the purchased Grid Templates family (Digital Presentation Portrait v3 = the 9:16 archive cards), the archive-card language (ecodesignlab/cards/cards.css) and the 2024/2025 symposia (event register). See Fachbereich Comms/00_IDENTITY_DEEPDIVE_2026-10-20.md. Rules: never invent a colour; max three colours per surface; Saol only for event titles; mono only for data; every format derives from its grid template. ===================================================================== */ :root { /* ---------- 1. FHV corporate colours (do not alter) ---------- CMYK per CD 2025 page: white 0/0/0/0 · black 0/0/0/100 · yellow 0/8/76/0 · red 0/68/70/0 · blue 45/5/0/0 · lilac 28/42/0/0 */ --fhv-white: #FFFFFF; --fhv-black: #000000; --fhv-yellow: #FFDC5F; /* Zine Yellow */ --fhv-red: #ED6E4C; /* Sunrise Red (replaces card #EB6257 and poster #F47453) */ --fhv-blue: #9ACFF1; /* Sky Blue */ --fhv-lilac: #C0A1CC; /* Periwinkle Lilac */ /* ---------- 2. Tints of the primaries (department additions, greys only) ---------- */ --tint-paper-dark: #121212; /* screen black for the archive register */ --tint-dark: #1F1F1F; /* third rotating field on dark paper */ --tint-ink-light: #F2F2F2; /* text on dark paper */ --tint-ink-soft: #9A9A9A; /* secondary text on dark paper */ --tint-strip: #C9C9C9; /* grey info strip (archive register) */ --tint-field-grey: #CDCDCD; /* grey field (event register, 2025 Litfass) */ --tint-ink-dark: #111111; /* text on accent / strip */ /* ---------- 3. Accent palette (per student / track / format; CD secondaries only) ---------- */ --accent-1: var(--fhv-red); --accent-2: var(--fhv-yellow); --accent-3: var(--fhv-blue); --accent-4: var(--fhv-lilac); /* ---------- 4. Semantic roles (defaults = archive register) ---------- */ --paper: var(--tint-paper-dark); --ink: var(--tint-ink-light); --ink-soft: var(--tint-ink-soft); --rule: var(--tint-ink-light); --accent: var(--accent-1); --accent-ink: var(--tint-ink-dark); --strip: var(--tint-strip); --strip-ink: var(--tint-ink-dark); --dark: var(--tint-dark); --dark-ink: var(--tint-ink-light); --grid-line: rgba(255,255,255,.045); --grid-col: rgba(255,255,255,.025); --shadow: 0 18px 50px rgba(0,0,0,.6); --radius: 0; /* ---------- 5. Typography ---------- Hausschrift Aeonik Pro (university licence; David licenses the cuts used); Helvetica Neue accepted alternative; Saol Display = event titles only; mono = data register (Aeonik Mono pending licence). */ --font-sans: "Aeonik Pro", "Aeonik", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Saol Display", "Saol Display Trial", Georgia, "Times New Roman", serif; --font-mono: "Aeonik Mono", "Aeonik Mono TRIAL", "SF Mono", Menlo, "JetBrains Mono", "Courier New", monospace; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* Type scale = the InDesign paragraph styles of the Portrait grid (pt size / pt leading). 1 cqw of a 720 pt-wide portrait page = 7.2 pt; use the pt values in print, the cqw values on screen. */ --type-xxl: 68; --lead-xxl: 80; /* Header 1 */ --type-xl: 59.5; --lead-xl: 70; --type-l: 51; --lead-l: 60; /* card headline */ --type-m: 38.25; --lead-m: 45; --type-s: 25.5; --lead-s: 30; --type-xs: 19.125; --lead-xs: 22.5; --type-body: 12.75; --lead-body: 15; /* Text / Bullets / Header Medium */ --type-small: 9.5625; --lead-small: 11.25; --baseline: 15; /* pt */ --headline-case: uppercase; --headline-tracking: -0.02em; --headline-lead: .96; /* Saol Display titles (Obys Typography Principles reference, 2026-10-21): ALL CAPS, line-height 90–100 %, tracking −4.5 % */ --display-case: uppercase; --display-tracking: -0.045em; --display-lead: .92; --mono-label-tracking: .04em; /* ---------- 6. Grid family (pt; from the purchased Grid Templates) ---------- portrait = Digital Presentation Portrait Grid System v3 (9:16, cards, phone, social) Values for the other formats are filled from their IDML (see tokens.json). */ --g-portrait-w: 720; --g-portrait-h: 1280; --g-portrait-bleed: 21; --g-portrait-margin: 35.451; --g-portrait-margin-b: 110; /* bottom margin is 110, not 35.451 */ --g-portrait-cols: 4; --g-portrait-col: 146.936; --g-portrait-gutter: 20.451; --g-portrait-field: 195; --g-portrait-fields: 6; --g-portrait-field-gutter: 15; /* InDesign row gutters; cards use gapless fields */ --g-portrait-foot-top: 1170; --g-portrait-foot-bottom: 1245; /* ---------- 6b. Grid family, other formats (pt; exact from the IDMLs, 2026-10-20) ---------- */ --g-landscape-w: 1280; --g-landscape-h: 720; --g-landscape-bleed: 0; --g-landscape-margin-t: 35.451; --g-landscape-margin-b: 90; --g-landscape-margin-x: 35.451; --g-landscape-cols: 4; --g-landscape-col: 286.936; --g-landscape-gutter: 20.451; --g-landscape-baseline: 15; --g-landscape-baseline-start: 0; --g-landscape-field: 105; --g-landscape-field-gap: 15; --g-a3-w: 841.89; --g-a3-h: 1190.551; --g-a3-bleed: 8.504; --g-a3-margin-t: 34.276; --g-a3-margin-b: 34.276; --g-a3-margin-x: 34.276; --g-a3-cols: 6; --g-a3-col: 128.89; --g-a3-gutter: 0; --g-a3-baseline: 11; --g-a3-baseline-start: 1.276; --g-a3-field: 187; --g-a3-field-gap: 0; --g-a2-w: 1190.551; --g-a2-h: 1683.78; --g-a2-bleed: 8.504; --g-a2-margin-t: 38.679; --g-a2-margin-b: 85.279; --g-a2-margin-x: 38.679; --g-a2-cols: 6; --g-a2-col: 172.466; --g-a2-gutter: 15.679; --g-a2-baseline: 11.5; --g-a2-baseline-start: 0; --g-a2-field: 264.5; --g-a2-field-gap: 11.5; --g-a1-w: 1683.78; --g-a1-h: 2383.937; --g-a1-bleed: 8.504; --g-a1-margin-t: 38.68; --g-a1-margin-b: 95.437; --g-a1-margin-x: 38.679; --g-a1-cols: 12; --g-a1-col: 119.496; --g-a1-gutter: 15.679; --g-a1-baseline: 11.5; --g-a1-baseline-start: 0; --g-a1-field: 379.5; --g-a1-field-gap: 11.5; --g-a0-w: 2383.937; --g-a0-h: 3370.394; --g-a0-bleed: 0; --g-a0-margin-t: 47.197; --g-a0-margin-b: 47.197; --g-a0-margin-x: 47.197; --g-a0-cols: 4; --g-a0-col: 545.386; --g-a0-gutter: 36; --g-a0-baseline: 36; --g-a0-baseline-start: 11.197; --g-brochure-w: 280.63; --g-brochure-h: 595.276; --g-brochure-bleed: 8.504; --g-brochure-margin-t: 14.455; --g-brochure-margin-b: 34.454; --g-brochure-margin-x: 14.455; --g-brochure-cols: 4; --g-brochure-col: 52.704; --g-brochure-gutter: 13.634; --g-brochure-baseline: 10; --g-brochure-baseline-start: 0.821; --g-brochure-field: 70; --g-brochure-field-gap: 13.634; /* ---------- 7. Fold-out panel (print) ---------- 140 x 297 mm = A3/3 = one of twelve panels of A1 folded 6x2; holds a 9:16 card at 140 x 249 mm + 48 mm strip. */ --panel-w-mm: 140; --panel-h-mm: 297; --panel-card-h-mm: 248.9; --panel-strip-mm: 48.1; --print-bleed-mm: 3; --print-safe-mm: 5; /* ---------- 8. Motion (screen only) ---------- */ --ease: cubic-bezier(.65,0,.2,1); --t-flick: .55s; --t-wipe: .5s; --t-media: .45s; --t-fold: .8s; --t-fly: 1400ms; } /* ---------- Registers ---------- archive = dark paper, mono data, grid, N→/E→ rows, Nr. (the map cards; default above) event = light fields, Saol titles, black footer band with Wort-Bild-Marke + partners + QR */ [data-register="event"] { --paper: var(--fhv-white); --ink: var(--fhv-black); --ink-soft: #555555; --rule: var(--fhv-black); --accent: var(--accent-1); --accent-ink: var(--fhv-black); --strip: var(--tint-field-grey); --strip-ink: var(--fhv-black); --dark: var(--fhv-black); /* footer band */ --dark-ink: var(--fhv-white); --grid-line: rgba(0,0,0,.06); --grid-col: rgba(0,0,0,.035); --shadow: none; } /* Accent per student / track: set data-accent="1..4" on the card or page */ [data-accent="1"] { --accent: var(--accent-1); } [data-accent="2"] { --accent: var(--accent-2); } [data-accent="3"] { --accent: var(--accent-3); } [data-accent="4"] { --accent: var(--accent-4); } /* Text on yellow/blue/lilac stays dark; on red use dark too (CD: text black on light) */ /* ---------- Print mapping ---------- */ @media print { :root { --paper: var(--fhv-black); } /* rich black handled in the PDF pipeline */ [data-register="event"] { --paper: var(--fhv-white); } } @media (prefers-reduced-motion: reduce) { :root { --t-flick: 0s; --t-wipe: 0s; --t-media: 0s; --t-fold: 0s; --t-fly: 0ms; } }