/* ============================================================= STRANG DESIGN SYSTEM — Foundations (Color + Type) Kälte + Klimatechnik · Braunschweig · seit 1945 ============================================================= */ /* ---- Fonts (Google Fonts CDN — see /fonts/README.md if you need locally-hosted copies) ---- */ @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Manrope:wght@300..800&display=swap"); :root { /* ========================================================= COLOR — Brand ========================================================= */ --strang-orange: #fb670b; /* primary CTA, akzent, brand */ --strang-orange-deep: #d34d00; /* hover / pressed CTAs */ --strang-navy: #192f6b; /* primary brand, headings on cream */ --strang-navy-deep: #0e1b3d; /* footer, stat blocks, dark surfaces */ --strang-yellow: #f4c430; /* sekundärer Akzent — Industrie/Gewerbe-Karten */ --strang-yellow-deep: #c79900; /* hover / pressed yellow accents */ /* Neutrals */ --cream: #faf7f2; /* page background */ --paper: #ffffff; /* cards, surfaces */ --ink: #0e1b3d; /* body text (= navy-deep, on purpose) */ --muted: #5b6373; /* secondary text */ --line: rgba(14, 27, 61, 0.12); /* hairline borders */ --line-strong: rgba(14, 27, 61, 0.24); /* Navy scale — derived from #192f6b 50 lightest → 900 darkest (matches deep) */ --navy-50: #eef1f8; --navy-100: #d9e0ee; --navy-200: #b1bdd9; --navy-300: #8597c0; --navy-400: #5a72a4; --navy-500: #3a528a; --navy-600: #283f78; --navy-700: #192f6b; /* = strang-navy */ --navy-800: #122452; --navy-900: #0e1b3d; /* = navy-deep */ /* Orange scale — for state-stacking */ --orange-50: #fff2e8; --orange-100: #ffd9bd; --orange-200: #ffb481; --orange-300: #fe8c47; --orange-400: #fb670b; /* = strang-orange */ --orange-500: #e75a04; --orange-600: #d34d00; /* = orange-deep */ --orange-700: #a73d00; /* ========================================================= COLOR — Semantic aliases (use these in components) --------------------------------------------------------- SURFACE HIERARCHY — four equal-weight primary surfaces. Cream is NOT the default; choose intentionally per section. · --surface-cream #faf7f2 ruhige Sektionen, Erzählung · --surface-paper #ffffff Karten, dichte Sektionen · --surface-navy #192f6b sekundäre dunkle Flächen · --surface-navy-deep #0e1b3d Hero, Stats, CTA-Bands, Footer ========================================================= */ --surface-cream: var(--cream); --surface-paper: var(--paper); --surface-navy: var(--strang-navy); --surface-navy-deep: var(--navy-deep, var(--navy-900)); --bg-default: var(--paper); /* DEFAULT page background */ --bg-soft: var(--cream); /* ruhige Sektionen, optional Page-BG */ --bg-dark: var(--navy-900); /* Hero, Stats, Footer, CTA-Bands */ --bg: var(--bg-default); /* legacy alias — prefer --bg-default */ --bg-inverse: var(--bg-dark); --surface: var(--paper); --surface-2: var(--navy-50); --surface-dark: var(--navy-900); --text: var(--ink); --text-muted: var(--muted); --text-on-dark: var(--cream); --text-on-cta: #ffffff; --cta: var(--strang-orange); --cta-hover: var(--strang-orange-deep); --link: var(--strang-orange); /* CTA ≡ link colour */ --link-hover: var(--strang-orange-deep); --accent: var(--strang-yellow); /* sekundärer Akzent */ --accent-hover: var(--strang-yellow-deep); --border: var(--line); --border-strong:var(--line-strong); --emergency: var(--strang-orange); /* 24h-Notdienst banner */ --emergency-bg: #fff1e6; /* ========================================================= TYPOGRAPHY — Families --------------------------------------------------------- DEFAULT display = Manrope bold (straight). OPTIONAL editorial variant = Fraunces italic, only inside `.display-editorial` / `` inside a heading. ========================================================= */ --font-headline: "Manrope", "Archivo", system-ui, -apple-system, sans-serif; --font-display: "Manrope", "Archivo", system-ui, -apple-system, sans-serif; --font-editorial: "Fraunces", "Times New Roman", Georgia, serif; --font-body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Heading scale (px) — Strang scale: 11/13/15/17/22/28/40/56/72/96 */ --fs-11: 11px; --fs-13: 13px; --fs-15: 15px; --fs-17: 17px; --fs-22: 22px; --fs-28: 28px; --fs-40: 40px; --fs-56: 56px; --fs-72: 72px; --fs-96: 96px; /* Line-heights */ --lh-tight: 1.05; /* display */ --lh-snug: 1.18; /* H1/H2 */ --lh-normal: 1.45; /* H3/H4 */ --lh-body: 1.55; /* paragraphs */ --lh-loose: 1.7; /* small caps / eyebrows */ /* Letter-spacing */ --tracking-eyebrow: 0.22em; --tracking-button: 0.04em; --tracking-display: -0.015em; --tracking-tight: -0.02em; /* ========================================================= SPACING — 8 px base, 10-step scale ========================================================= */ --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; /* ========================================================= RADII — engineering-DNA defaults: SHARP --------------------------------------------------------- Strang is Kälte- und Anlagentechnik. Scharfe Kanten signalisieren Präzision. Rounded shapes belong to lifestyle / boutique brands — not here. · Buttons : 0 default, 2 max. NEVER more. · Inputs : 0 default, 2 max. · Cards : 0 default, 2 max. · Pills : 100% (only for status / trust markers). ========================================================= */ --radius-0: 0px; /* default — sharp, used for buttons/inputs/cards */ --radius-1: 2px; /* MAX softening allowed on rectilinear surfaces */ --radius-pill: 9999px; /* pills, status chips, avatar dots */ --radius-button: 0; --radius-input: 0; --radius-card: 0; /* ========================================================= SHADOWS — low / medium / high Tuned to navy ink for warmth on cream backgrounds. ========================================================= */ --shadow-low: 0 1px 2px rgba(14, 27, 61, 0.06), 0 1px 1px rgba(14, 27, 61, 0.04); --shadow-medium: 0 4px 12px rgba(14, 27, 61, 0.08), 0 2px 4px rgba(14, 27, 61, 0.04); --shadow-high: 0 18px 40px rgba(14, 27, 61, 0.14), 0 6px 12px rgba(14, 27, 61, 0.06); --shadow-focus: 0 0 0 3px rgba(251, 103, 11, 0.32); /* ========================================================= LAYOUT ========================================================= */ --container-max: 1280px; --container-pad: var(--space-5); } /* ============================================================= ELEMENT-LEVEL DEFAULTS — drop colors_and_type.css on a page and get sensible Strang typography immediately. ============================================================= */ html, body { background: var(--bg-default); color: var(--text); font-family: var(--font-body); font-size: var(--fs-17); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); color: var(--text); font-weight: 800; /* Manrope ExtraBold — straight, gerade */ letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); margin: 0; font-style: normal; } h1 { font-size: var(--fs-72); line-height: var(--lh-tight); letter-spacing: -0.025em; } h2 { font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: -0.022em; } h3 { font-size: var(--fs-40); letter-spacing: -0.02em; } h4 { font-size: var(--fs-28); line-height: var(--lh-normal); letter-spacing: -0.015em; } h5 { font-size: var(--fs-22); line-height: var(--lh-normal); letter-spacing: -0.01em; } h6 { font-size: var(--fs-17); line-height: var(--lh-normal); font-weight: 700; letter-spacing: 0; } p { margin: 0 0 var(--space-4); max-width: 68ch; } small, .small { font-size: var(--fs-13); color: var(--text-muted); } a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 120ms ease; } a:hover { color: var(--link-hover); } /* Eyebrow — the signature Strang micro-label */ .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-11); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--strang-orange); display: inline-flex; align-items: center; gap: 12px; line-height: 1; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; display: inline-block; } /* Display — OPTIONAL editorial variant: Fraunces italic. Use only inside `.display-editorial` or for tags inside an element marked `.display-editorial`. NEVER auto-style headings. Default headings are Manrope bold, straight. */ .display-editorial { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 100; letter-spacing: -0.015em; } .display-editorial em { font-style: italic; color: var(--strang-navy); } .display-italic { font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; } /* Service-card N° marker — Fraunces italic accent, scoped */ .numeral { font-family: var(--font-editorial); font-style: italic; font-weight: 300; color: var(--strang-orange); font-variation-settings: "opsz" 144; }