/* ========================================================================== Humboldini — Colors, Type, Spacing -------------------------------------------------------------------------- Single source of truth. Import before any component styles. TYPE SYSTEM — two voices: PRINT (workbook / PDF / poster): serif — Fraunces + Source Serif 4. WEB (apps, sites, UI, slides-on-screen): sans — Helvetica Neue with Inter as open fallback. This is what `body` gets by default. To opt into PRINT voice on a page or subtree, add `class="ds-print"` on the root element (e.g. `` for a worksheet HTML). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,700..900,100&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..600&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---- BRAND COLORS ----------------------------------------------------- */ --peach: #FDD395; --peach-deep: #F2C373; --peach-ink: #8A5A1F; /* ---- ACCENT / CATEGORY CARDS ----------------------------------------- */ --card-peach: #FDE4BF; --card-mint: #D6EDDD; --card-sky: #DCE9EE; --card-blush: #F8D7D0; /* ---- FORM / INLINE UI ------------------------------------------------ */ --field-fill: #EAF2EE; --bullet-peach: #FDD395; /* ---- INK & PAPER ----------------------------------------------------- */ --ink: #111111; --ink-2: #2B2B2B; --ink-3: #5C5751; --ink-4: #8A847B; --hairline: #E6E1D7; --paper: #FFFFFF; --paper-warm: #FAF7F2; /* ---- SEMANTIC -------------------------------------------------------- */ --ok: #5B8F6A; --ok-bg: #D6EDDD; --warn: #C26B5A; --warn-bg: #F4D5CE; /* ---- SPACING (4px base) ---------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* ---- RADII ----------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* ---- ELEVATION ------------------------------------------------------- */ --shadow-none: none; --shadow-soft: 0 6px 24px -12px rgba(17, 17, 17, 0.15); --shadow-menu: 0 12px 32px -16px rgba(17, 17, 17, 0.22); /* ---- MOTION ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-press: 150ms; --dur-hover: 220ms; --dur-page: 400ms; /* ---- TYPOGRAPHY — WEB DEFAULT (sans) -------------------------------- */ --font-sans: 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif; --font-display: 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif; --font-body: 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif; /* Available for PRINT surfaces via .ds-print — see below */ --font-serif-display: 'Fraunces', 'Source Serif 4', Georgia, serif; --font-serif-body: 'Source Serif 4', Georgia, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale */ --fs-display-xl: 72px; --lh-display-xl: 1.02; --fs-display-lg: 56px; --lh-display-lg: 1.05; --fs-display: 40px; --lh-display: 1.08; --fs-h1: 32px; --lh-h1: 1.15; --fs-h2: 24px; --lh-h2: 1.20; --fs-h3: 20px; --lh-h3: 1.25; --fs-body: 16px; --lh-body: 1.55; --fs-small: 14px; --lh-small: 1.50; --fs-meta: 12px; --lh-meta: 1.40; --fs-label: 13px; } /* ======================================================================= Base ======================================================================= */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); background: var(--paper); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================================================= WEB VOICE (default) — Helvetica Neue / Inter ======================================================================= */ .section-label, .h-label { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } .section-label--xl { font-size: 40px; letter-spacing: 0.08em; } .section-label--lg { font-size: 28px; letter-spacing: 0.10em; } .display-xl, h1.display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: -0.025em; color: var(--ink); } .display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: -0.02em; color: var(--ink); } .display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.015em; color: var(--ink); } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.015em; color: var(--ink); } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; color: var(--ink); } h3, .h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); } /* Subtitle — on web, sans-serif medium (NOT italic serif). The italic serif subtitle is a PRINT convention; see .ds-print below. */ .subtitle { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3); color: var(--ink-2); letter-spacing: -0.005em; } p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; } .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); } .meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-4); } .hinweis { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-3); } .hinweis::before { content: 'Hinweis: '; font-weight: 600; color: var(--ink-2); } .footer-mark { font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0.2em; color: var(--ink-3); text-align: center; } code, .mono { font-family: var(--font-mono); font-size: 0.92em; } /* ======================================================================= PRINT VOICE — opt-in via .ds-print Applies the workbook/PDF serif voice (Fraunces display + Source Serif body + italic serif subtitle). Use on worksheet HTML and poster PDFs. ======================================================================= */ .ds-print, .ds-print body { font-family: var(--font-serif-body); } .ds-print .section-label, .ds-print .h-label { font-family: var(--font-serif-display); font-weight: 900; font-variation-settings: 'opsz' 144, 'SOFT' 40; letter-spacing: 0.14em; } .ds-print .display-xl, .ds-print h1.display, .ds-print .display-lg, .ds-print .display, .ds-print h1, .ds-print .h1, .ds-print h2, .ds-print .h2 { font-family: var(--font-serif-display); font-weight: 800; font-variation-settings: 'opsz' 144, 'SOFT' 50; letter-spacing: -0.01em; } .ds-print h3, .ds-print .h3, .ds-print p, .ds-print .body { font-family: var(--font-serif-body); } .ds-print .subtitle { font-family: var(--font-serif-body); font-style: italic; font-weight: 500; color: var(--ink); } .ds-print .footer-mark { font-family: var(--font-serif-body); } /* ======================================================================= Reduced motion ======================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }