/* ============================================================ FHNW Design System — Foundational tokens Source: FHNW Corporate Design Manual (Jan 2023) + webteam.pages.fhnw.ch/fhnw-styleguide-v4 + live www.fhnw.ch ============================================================ */ /* ---------- Fonts ---------- Inter & Spectral are licensed under the SIL Open Font License and downloadable from fonts.google.com (per FHNW manual §2.2). We load via Google Fonts CDN here; for offline use, drop TTF/WOFF2 files into /fonts and swap the @import for @font-face. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Spectral:ital,wght@0,400;0,700;1,400&display=swap'); :root { /* ====== Brand color: FHNW Gelb ====== The signature, "kräftig leuchtendes Gelb" (vivid luminous yellow). Pantone 3955 — CMYK 5/0/100/0 — RGB 253/231/14 */ --fhnw-yellow: #fde70e; /* primary brand */ --fhnw-yellow-1: #f5dd19; /* alt 1 */ --fhnw-yellow-2: #fbd100; /* alt 2 (warmer) */ --fhnw-yellow-4: #fff48d; /* tint */ --fhnw-tangerine: #ea8700; /* accent / TrueTangerine */ /* ====== Neutral scale ====== The CD-Manual treats text and headings as pure black on white; greys come from the Web Styleguide v4 set. */ --black: #000000; --white: #ffffff; --grey-bg-soft: #f7f7f5; /* search-bar focus, soft surfaces */ --grey-100: #f1f1ee; /* "Helles Grau" — portrait background */ --grey-200: #deded9; /* Mouseover Grau */ --grey-300: #bebdb9; /* Scrollbar Grau */ --grey-500: #999999; /* Mittleres Grau */ --grey-600: #767573; /* Text & Border Grau */ --grey-800: #4c4c4c; /* Dunkelgrau */ /* ====== Semantic (status) ====== */ --error: #df305b; /* Fehlerrot */ --error-bg: #fff7f7; /* Rot Hintergrund */ --emergency-border: #e31650; /* Notfall Border */ /* ====== Semantic surfaces & ink ====== */ --fg-primary: var(--black); --fg-secondary: var(--grey-800); --fg-muted: var(--grey-600); --fg-on-yellow: var(--black); /* always black on yellow */ --fg-on-dark: var(--white); --bg-page: var(--white); --bg-subtle: var(--grey-100); --bg-hover: var(--grey-200); --bg-brand: var(--fhnw-yellow); --bg-invert: var(--black); --border-subtle: var(--grey-200); --border-default: var(--grey-600); --border-strong: var(--black); --focus-ring: var(--fhnw-yellow); /* ====== Type families ====== Inter — primary screen + print headline / body Spectral — long-form print + testimonials (serif) Arial — Office (Word/Outlook/PPT) fallback */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-serif: 'Spectral', 'Times New Roman', Georgia, serif; --font-office: Arial, 'Helvetica Neue', sans-serif; /* ====== Type scale ====== The CD-Manual sets a 1-2-3 hierarchy in Inter Bold/Light, flush-left. Scale derived from observed www.fhnw.ch ratios; everything is left aligned and tightly tracked. */ --fs-display: clamp(2.5rem, 4.5vw + 1rem, 5.5rem); /* "intro__title" */ --fs-h1: clamp(2rem, 3vw + 1rem, 3.5rem); --fs-h2: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); /* distributor__title */ --fs-h3: 1.375rem; --fs-h4: 1.125rem; /* card__title */ --fs-lead: 1.25rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; /* category / tag */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.55; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* ====== Spacing & radii ====== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-none: 0; /* default — FHNW is squared off */ --radius-sm: 2px; --radius-md: 4px; /* used sparingly on form inputs */ --radius-pill: 999px; /* category/tag chips */ /* ====== Border widths ====== */ --bw-hair: 1px; --bw-rule: 2px; --bw-band: 12px; /* yellow accent line height = ½ logo */ /* ====== Shadows ====== The brand is flat. Use shadow sparingly — for picked-up cards / hover lift only. No drop-shadow on logo, no shadows on the yellow Akzentfläche. */ --shadow-none: none; --shadow-hover: 0 8px 24px -8px rgba(0,0,0,0.12), 0 2px 6px -2px rgba(0,0,0,0.08); --shadow-focus: 0 0 0 3px var(--fhnw-yellow); /* ====== Motion ====== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* primary easing */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; /* ====== Layout ====== */ --content-max: 1440px; --content-gutter: clamp(16px, 4vw, 64px); --grid-gap: clamp(16px, 2vw, 32px); } /* ============================================================ Element defaults (semantic baseline) ============================================================ */ html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--fg-primary); background: var(--bg-page); } body { margin: 0; font-family: var(--font-sans); font-weight: 300; /* CD-Manual default: Inter Light for body */ font-size: var(--fs-body); line-height: var(--lh-normal); letter-spacing: var(--tracking-normal); text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--font-sans); font-weight: 700; /* Inter Bold for headlines */ letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } .display { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .lead { font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-relaxed); } .body { font-size: var(--fs-body); font-weight: 300; } .small { font-size: var(--fs-small); } .micro { font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; } p { margin: 0 0 1em; } a { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } a:hover { background: var(--fhnw-yellow); text-decoration: none; } ::selection { background: var(--fhnw-yellow); color: var(--black); } :focus-visible { outline: 3px solid var(--fhnw-yellow); outline-offset: 2px; } /* Serif/quote treatment — testimonials & long-form */ blockquote, .serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; } /* Mono — not part of the brand; fallback for code only */ code, pre, kbd, samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ============================================================ Brand utility classes ============================================================ */ /* The "Akzentfläche": flat yellow block, always anchored bottom-left, acts as a title container. Never used without text inside. */ .akzentflaeche { background: var(--fhnw-yellow); color: var(--fg-on-yellow); padding: var(--space-5) var(--space-6); display: inline-block; } /* The "Akzentlinie": yellow bar used on back-covers / footers in place of the akzentfläche when there's no title to host. */ .akzentlinie { height: var(--bw-band); background: var(--fhnw-yellow); width: 100%; } .surface--brand { background: var(--fhnw-yellow); color: var(--fg-on-yellow); } .surface--invert { background: var(--black); color: var(--fg-on-dark); } .surface--subtle { background: var(--grey-100); color: var(--fg-primary); } /* Icons — official FHNW set lives in assets/icons/ (3,513 SVGs, 128 grid). SVGs carry fill="currentColor", so they inherit text colour. Inline the SVG when you need currentColor to track `color`; renders the file as-is (black). Browse/search them in preview/icons.html. */ .icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.25em; fill: currentColor; flex: none; } .icon--sm { width: 1em; height: 1em; vertical-align: -0.125em; } .icon--lg { width: 2em; height: 2em; vertical-align: -0.35em; }