/**
* Bereich "Freiluftmanufaktur": Schriften und Stile.
*
* Diese Datei wird im Frontend nur auf Inhalten des Bereichs geladen und im
* Block-Editor immer – dort entscheidet die Klasse .flm-context, die das
* Editor-Skript live setzt, welche Regeln greifen.
*
* Die Schriftdateien liegen im Ordner fonts/ dieses Plugins.
*/
/* -------------------------------------------------------------------------
* 1. Schriften des Bereichs
*
* woff2 zuerst, woff als Rückfallebene. Der Browser lädt nur das erste
* Format, das er versteht.
*
* Das Brandbook verwendet genau vier Schnitte: Noe Display Bold für
* Headlines sowie Questa Sans in Light, Bold und Kursiv. Lizenziert vorliegen
* tut davon bisher nur Noe Display Bold – deshalb steht hier auch nur eine
* Regel.
*
* Questa Sans Regular ist bewusst NICHT deklariert. Der Schnitt liegt zwar
* lizenziert vor, kommt im Brandbook aber in keinem der drei Bände vor. Bis
* Light, Bold und Kursiv lizenziert sind, hat der Bereich also keine eigene
* Grundschrift und fällt auf die Systemschrift zurück. Das ist so gewollt: es
* zeigt den tatsächlichen Stand, statt ihn mit einem falschen Schnitt zu
* überdecken. Lokal springen die Demo-Schnitte aus css/demo-schnitte.css ein.
*
* Sobald die Dateien da sind, hier drei weitere @font-face-Regeln mit
* demselben font-family-Namen ergänzen: 300 normal, 700 normal, 400 italic.
* ---------------------------------------------------------------------- */
@font-face {
font-display: swap;
font-family: "Noe Display";
font-style: normal;
font-weight: 700;
src: url("../fonts/NoeDisplay-Bold.woff2") format("woff2"),
url("../fonts/NoeDisplay-Bold.woff") format("woff");
}
/* -------------------------------------------------------------------------
* 2. Variablen des Bereichs
*
* Drei Dinge passieren hier:
*
* a) Die eigenen Variablen --flm-font--* und --flm-color--* werden gesetzt.
* Bereichs-Stile (Global Styles mit dem Präfix ".flm-") referenzieren
* ausschließlich diese.
*
* b) Die beiden globalen Schrift-Variablen von GeneratePress werden innerhalb
* des Bereichs umgehängt. Dadurch greifen die Bereichsschriften überall
* dort automatisch, wo bestehende Regeln auf sie verweisen – in den Global
* Styles (.h2 setzt Cormorant Upright), in der globalen Typografie von
* GeneratePress und in jedem Block, dessen Schrift über die Schriftbibliothek
* gewählt wurde.
*
* c) Dieselbe Mechanik für die Akzentfarbe: --accent zeigt im Bereich auf
* Koralitorange aus dem FREILUFT-Brandbook statt auf das Site-Rot #BF3918
* der GeneratePress-Palette. GeneratePress definiert --accent auf :root,
* also am -Element. Weil .flm-context im Frontend am und im
* Editor an .editor-styles-wrapper hängt – beides Nachfahren –, gewinnt
* die Definition hier für alles darunter, unabhängig von der Spezifität.
*
* Der Umweg über die Variablen ist Absicht. Eine Regel wie
* ".flm-context h2 { font-family: ... }" bräuchte die Spezifität 0,1,1, um
* ".h2" zu schlagen – und würde damit auch eine bewusste Schriftwahl am
* einzelnen Block überstimmen. Über die Variablen entsteht kein
* Spezifitätskonflikt: Ein Block, an dem jemand ausdrücklich "Questa Sans"
* oder "Noe Display" auswählt, schreibt den Schriftnamen direkt und behält
* immer das letzte Wort.
*
* Kehrseite: Wählt jemand innerhalb des Bereichs ausdrücklich "Montserrat"
* oder "Cormorant Upright" aus der Schriftbibliothek, landet er ebenfalls bei
* den Bereichsschriften. Für einen Bereich mit eigener Typografie ist das
* gewollt; soll es anders sein, muss Abschnitt b) entfallen und die
* Elementregeln in Abschnitt 3 auf Spezifität 0,1,1 gehoben werden.
* ---------------------------------------------------------------------- */
.flm-context {
--flm-font--display: "Noe Display", Georgia, "Times New Roman", serif;
--flm-font--body: "Questa Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Farbwelt des FREILUFT-Brandbooks, mit den vorgesehenen Flächenanteilen. */
--flm-color--nebelgrau: #f2f2f2; /* Hintergrund, 65 % */
--flm-color--schiefergrau: #333332; /* Logo und Schrift, 20 % */
--flm-color--steingrau: #706f6f; /* Neutralfarbe, 10 % */
--flm-color--korall: #ee705f; /* Akzent, 5 % */
/* Globale Schriften innerhalb des Bereichs umhängen. */
--gp-font--cormorant-upright: var( --flm-font--display );
--gp-font--montserrat: var( --flm-font--body );
/* Akzentfarbe innerhalb des Bereichs umhängen. */
--accent: var( --flm-color--korall );
/* Grundfarben des Bereichs. */
background-color: var( --flm-color--nebelgrau );
color: var( --flm-color--schiefergrau );
}
/* -------------------------------------------------------------------------
* 3. Grundtypografie des Bereichs
*
* Setzt die Schriftregeln des FREILUFT-Brandbooks für alles um, was ohne
* Klasse geschrieben wird:
*
* h1, h2 Noe Display Bold (Headlines)
* h3 bis h6 Questa Sans Light (Subheadlines)
* Fließtext Questa Sans Light (Grundschrift)
* strong, b Questa Sans Bold (Hervorhebungen)
*
* Die Selektoren stehen bewusst in :where(), behalten also die Spezifität
* 0,1,0 – zusammen mit der Ladepriorität 22 (nach den Global Styles, vor den
* blockspezifischen Stilen) ergibt das die gewünschte Rangfolge:
*
* Global Styles < Bereichs-Grundtypografie < Schriftwahl am Block
*
* Die Linkfarbe braucht keine eigene Regel: Links laufen über
* "a { color: var( --accent ) }" von GeneratePress und damit über die in
* Abschnitt 2 umgehängte Akzentfarbe. Textfarbe und Hintergrund setzt
* ebenfalls Abschnitt 2.
*
* Bekannte Abweichung: Das Child-Theme setzt in style.css die Regel
* "#content h1, h2, h3, h4, h5 { font-weight: 400 }". Der erste Selektor hat
* die Spezifität 1,0,1 und schlägt damit die 700 für h1 – h2 bis h5 stehen
* dort nur mit 0,0,1 und sind nicht betroffen. Folgenlos, solange von Noe
* Display ausschließlich der Bold-Schnitt vorliegt: Der Browser wählt für
* jedes angeforderte Gewicht die einzige vorhandene Schnittdatei. Kommt ein
* zweiter Noe-Schnitt dazu, muss die Regel im Child-Theme angefasst werden.
* ---------------------------------------------------------------------- */
.flm-context {
font-family: var( --flm-font--body );
font-weight: 300;
}
.flm-context :where( h1, h2 ) {
font-family: var( --flm-font--display );
font-weight: 700;
}
.flm-context :where( h3, h4, h5, h6 ) {
font-family: var( --flm-font--body );
font-weight: 300;
}
.flm-context :where( strong, b ) {
font-weight: 700;
}
/* -------------------------------------------------------------------------
* 4. Auszeichnungen im laufenden Text
*
* Klassen, die sich auf einzelne Wörter beziehen und deshalb nicht als
* Global Style im Stil-Menü auftauchen – dort sind nur Klassen wählbar, die
* einem ganzen Block zugewiesen werden. Sie werden im Editor über "Als HTML
* bearbeiten" gesetzt:
*
* FREILUFT
* Eine Einladung zum Erleben
*
* Die block-bezogenen Klassen .flm-dachzeile, .flm-lead, .flm-claim und
* .flm-schriftmix liegen dagegen als GenerateBlocks Global Styles in der
* Datenbank; .flm-schriftmix steht zusätzlich hier, weil sie erst zusammen
* mit .flm-akzent Sinn ergibt.
* ---------------------------------------------------------------------- */
/*
* Schriftmix aus dem Kapitel "Formate".
*
* Seite 14/15 des Bandes "Gestaltung" zeigt die Regel eindeutig: Das
* hervorgehobene Wort steht IMMER in Noe Display Bold, der Rest der Zeile in
* Questa. Das gilt für lange Headlines ("Eine *Einladung* zum Erleben") wie
* für lange Subheadlines ("Die *Idee*, die nicht ruhen durfte") gleichermaßen.
*
* Daraus folgen zwei Klassen mit verschiedenen Aufgaben:
*
* .flm-schriftmix am Block – setzt eine lange Headline auf die Grundschrift,
* weil h1 und h2 sonst komplett in Noe stünden. Auf h3 bis
* h6 ohne Wirkung, die stehen ohnehin in Questa.
* .flm-akzent am einzelnen Wort – immer Noe Display Bold.
*/
.flm-context .flm-schriftmix {
font-family: var( --flm-font--body );
font-weight: 300;
}
.flm-context .flm-akzent {
font-family: var( --flm-font--display );
font-weight: 700;
}
/*
* Schreibweise des Markennamens: FREILUFT steht laut Brandbook immer in
* Versalien, wird nie getrennt und nie umbrochen. Die Versalien setzt die
* Klasse selbst, damit die Regel auch dann greift, wenn im Quelltext eine
* andere Schreibweise steht.
*/
.flm-marke {
hyphens: none;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}