/* Storyline Group — colours + typefaces. Sizing lives in base.css / splash.css as literal pixel values. */ /* ---------- Typefaces ---------- Primary source is the client's Adobe Fonts kit, loaded in each page's : It provides all three brand families — rift, aileron, instrument-serif — each with roman + italic at 400 and 700 (instrument-serif at 400 only). Kit family names are lowercase/hyphenated; that is what Adobe emits. The @font-face rules below are the SELF-HOSTED FALLBACK layer. They are named "… Local" so they never collide with the kit's family names (CSS family matching is case-insensitive, so a local "Aileron" would shadow the kit's "aileron"). Do not rename these to match the kit. Font stacks, written out in full wherever they are used: display "rift", "Bebas Neue", sans-serif serif "instrument-serif", "Instrument Serif Local", Georgia, serif sans "aileron", "Aileron Local", system-ui, -apple-system, sans-serif */ @font-face { font-family: "Aileron Local"; src: url("../assets/fonts/Aileron-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Aileron Local"; src: url("../assets/fonts/Aileron-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif Local"; src: url("../assets/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Bebas Neue"; src: url("../assets/fonts/BebasNeue-Regular.woff2") format("woff2"); /* Declared across 400–700 so it stands in for Rift Bold's weight without the browser synthesising a fake bold. Bebas ships one weight only. */ font-weight: 400 700; font-style: normal; font-display: swap; } /* ---------- Colour ---------- Kept as variables: DevTools shows a swatch and the resolved hex inline, so they stay legible while inspecting. Every other value is a literal. */ :root { /* primary */ --sl-cream: #f9f8f4; /* warm off-white — dominant background */ --sl-ink: #272727; /* charcoal — text, dark sections */ --sl-butter: #fff599; /* butter yellow — accent, focal point */ /* secondary — accents only. Never a page background. Never combined with each other outside data viz. Never paired with butter. Text on these is ink or white only. */ --sl-teal: #2d4e4d; --sl-sky: #c0d2fb; --sl-orange: #f2a775; /* hairline rule, ~15% ink */ --sl-rule: #dcdbd7; }