/* ========================================================================== dela Akademie - Schrift und Form je Brandkit Ergaenzt palettes.css. Zusammen ergeben beide Dateien das vollstaendige Kit. Umschaltung ueber dasselbe Attribut: Alle Schriften stehen unter SIL Open Font License 1.1. ========================================================================== */ /* --- 1 Kupfer und Stein: Werkstattbuero ---------------------------------- */ :root, :root[data-palette="kupfer"] { --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 750; --display-stretch: 96%; --display-transform: none; --display-tracking: -0.025em; --body-size: 1rem; --body-leading: 1.6; --r: 4px; --r-sm: 4px; --r-pill: 4px; } /* --- 2 Hochvolt: Werkstatt ----------------------------------------------- */ :root[data-palette="hochvolt"] { --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 700; --display-stretch: 100%; --display-transform: uppercase; --display-tracking: -0.02em; --body-size: 1.0625rem; --body-leading: 1.62; --r: 0px; --r-sm: 0px; --r-pill: 0px; } /* --- 3 Messing und Graphit: praezise und warm ---------------------------- */ :root[data-palette="messing"] { --font-display: "Sora", "Helvetica Neue", Arial, sans-serif; --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 600; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.025em; --body-size: 1.0938rem; --body-leading: 1.7; --r: 14px; --r-sm: 10px; --r-pill: 999px; } /* --- 4 Terracotta: redaktionell ------------------------------------------ */ :root[data-palette="terracotta"] { --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 600; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.022em; --body-size: 1.0625rem; --body-leading: 1.65; --r: 10px; --r-sm: 8px; --r-pill: 10px; } /* --- 5 Sepia und Elfenbein: barrierearm ---------------------------------- */ :root[data-palette="sepia"] { --font-display: "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif; --font-body: "Noto Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 700; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.012em; --body-size: 1.125rem; --body-leading: 1.7; --r: 6px; --r-sm: 4px; --r-pill: 6px; } /* --- 6 dela Original: die bestehende Hausfarbe --------------------------- */ :root[data-palette="dela"] { --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif; --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 600; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.03em; --body-size: 1.0625rem; --body-leading: 1.65; --r: 8px; --r-sm: 6px; --r-pill: 999px; } /* --- 7 Nachtblau: Marine mit Bernstein ----------------------------------- */ :root[data-palette="nachtblau"] { --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 700; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.028em; --body-size: 1.0625rem; --body-leading: 1.68; --r: 3px; --r-sm: 3px; --r-pill: 3px; } /* --- 8 Ziegel und Sand: Baustoff und Signal ------------------------------ */ :root[data-palette="ziegel"] { --font-display: "Chivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 700; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.024em; --body-size: 1.0625rem; --body-leading: 1.66; --r: 2px; --r-sm: 2px; --r-pill: 2px; } /* --- 9 Zinn und Tuerkis: kuehl und technisch ----------------------------- */ :root[data-palette="zinn"] { --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 700; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.026em; --body-size: 1.0625rem; --body-leading: 1.64; --r: 12px; --r-sm: 8px; --r-pill: 999px; } /* --- 10 Olive: Olivgruen mit Ziegelrot ----------------------------------- */ :root[data-palette="olive"] { --font-display: "Urbanist", "Helvetica Neue", Arial, sans-serif; --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --display-weight: 700; --display-stretch: 100%; --display-transform: none; --display-tracking: -0.032em; --body-size: 1.0625rem; --body-leading: 1.66; --r: 18px; --r-sm: 12px; --r-pill: 999px; } /* Wirkung der Kit-Variablen auf die Grundelemente */ body { font-size: var(--body-size); line-height: var(--body-leading); } h1, h2, h3, h4 { font-family: var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); } .bricolage-optisch { font-variation-settings: "opsz" 40; }