/* Buob — Tokens & Basis-Helfer (aus Design-Single-Source) */ /* ============================================================ Buob Rohrleitungsbau Design System — global CSS entry point Consumers link this one file. Imports only. ============================================================ */ /* ============================================================ Buob Rohrleitungsbau — Webfonts Adobe Typekit kit "yxa5zir" serves DIN 2014 (Regular / Demi / Bold / Extra Bold + italics). One family does everything — display is just Extra Bold uppercase, no separate condensed cut. The @import below ships the @font-face rules to consumers. ============================================================ */ /* * The Typekit service used to deliver this font or fonts for use on websites * is provided by Adobe and is subject to these Terms of Use * http://www.adobe.com/products/eulas/tou_typekit. For font license * information, see the list below. * * din-2014: * - http://typekit.com/eulas/000000000000000077587a30 * - http://typekit.com/eulas/000000000000000077587a31 * - http://typekit.com/eulas/000000000000000077587a32 * - http://typekit.com/eulas/000000000000000077587a33 * - http://typekit.com/eulas/000000000000000077587a34 * - http://typekit.com/eulas/000000000000000077587a35 * - http://typekit.com/eulas/000000000000000077587a36 * - http://typekit.com/eulas/000000000000000077587a37 * din-2014-narrow: * - http://typekit.com/eulas/000000000000000077587a3a * - http://typekit.com/eulas/000000000000000077587a3c * * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved. */ /*{"last_published":"2026-06-09 06:16:47 UTC"}*/ /**/ .tk-din-2014 { font-family: "din-2014",sans-serif; } .tk-din-2014-narrow { font-family: "din-2014-narrow",sans-serif; } /* Off the client's production domain the kit is domain-locked, so DIN 2014 falls back to the system grotesque stack declared in typography.css (-apple-system / Segoe UI / Roboto / Helvetica Neue / Arial). */ /* ============================================================ Buob Rohrleitungsbau — Color tokens Derived from the binding "Desktop" Figma frame. ============================================================ */ :root { /* ---- Brand: deep ink / petrol base ---- */ --petrol-800: #00425a; /* deep petrol — CTA fills, headlines on light (rgb 0,66,90) */ --ink-900: #1a2230; /* darkest ink — footer, dark bands, primary text (rgb 26,34,48) */ --ink-700: #231f20; /* near-black, logo black (rgb 35,31,32) */ /* ---- Brand: teal accents ---- */ --teal-700: #3a7070; /* muted teal — contact card panel (rgb 58,112,112) */ --teal-500: #1da3a3; /* accent rules, hairlines, labels (rgb 29,163,163) */ --teal-400: #00c6c6; /* bright eyebrow label on dark (rgb 0,198,198) */ --blue-pale: #b2d7e4; /* pale blue — icon badge fill (rgb 178,215,228) */ /* ---- Logo blue (gradient stops) ---- */ --logo-blue-light: #1f6ca0; /* gradient top (rgb 31,108,160) */ --logo-blue-dark: #004c63; /* gradient bottom (rgb 0,76,99) */ /* ---- Neutrals ---- */ --white: #ffffff; --paper: #f9f9f7; /* warm off-white (rgb 249,249,247) */ --surface: #f2f2f2; /* page background (rgb 242,242,242) */ --surface-2: #eeeeee; /* alternate section band (rgb 238,238,238) */ --surface-card: #f7f7f7; /* service card fill (rgb 247,247,247) */ --line-200: #e6e6e6; /* dividers on light (rgb 230,230,230) */ /* ---- Alpha ink (text on light) ---- */ --ink-55: rgba(26, 34, 48, 0.55); /* secondary body */ --ink-50: rgba(26, 34, 48, 0.50); /* card body copy */ --ink-25: rgba(26, 34, 48, 0.25); /* placeholder text */ /* ---- Scrims (image overlays) ---- */ --scrim-navy: rgba(26, 34, 48, 0.62); /* angled photo scrim (ink) */ --scrim-petrol: rgba(0, 66, 90, 0.30); /* top fade under header */ --scrim-black: rgba(0, 0, 0, 0.60); /* dark photo scrim */ /* ============================================================ Semantic aliases — prefer these in components ============================================================ */ --bg-page: var(--surface); --bg-section: var(--surface-2); --bg-dark: var(--ink-900); --bg-deep: var(--petrol-800); --text-primary: var(--ink-900); --text-secondary: var(--ink-55); --text-muted: var(--ink-50); --text-placeholder: var(--ink-25); --text-on-dark: var(--white); --text-on-dark-soft: rgba(255, 255, 255, 0.72); --eyebrow-on-light: var(--teal-500); --eyebrow-on-dark: var(--teal-400); --accent: var(--teal-500); --accent-strong: var(--petrol-800); --rule: var(--teal-500); --surface-input-border: var(--teal-500); --surface-contact: var(--teal-700); /* CTA / buttons */ --btn-primary-bg: var(--petrol-800); --btn-primary-fg: var(--white); --btn-ghost-fg: var(--white); --btn-phone-bg: var(--surface-2); --btn-phone-fg: var(--petrol-800); } /* ============================================================ Buob Rohrleitungsbau — Typography tokens ONE family: DIN 2014. Display = Extra Bold uppercase (Versal); headings = Extra Bold / Bold; body = Regular. ============================================================ */ :root { /* ---- Families (single family, weights do the work) ---- */ --font-display: "din-2014", "DIN 2014", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "din-2014", "DIN 2014", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---- Weights (DIN 2014: Regular / Demi / Bold / Extra Bold) ---- */ --fw-regular: 400; /* @kind other */ --fw-demi: 600; /* @kind other */ --fw-bold: 700; /* @kind other */ --fw-extrabold: 800; /* @kind other */ /* ---- Display scale (DIN 2014 Extra Bold, UPPERCASE Versal) ---- The buob-H1 text style: Extra Bold 64 / 63.2 (-0.91px). The hero scales larger; the band statement sits at the H1 size. */ --display-1: 88px; /* hero headline */ --display-2: 64px; /* full-bleed band statement = buob-H1 */ --display-1-lh: 0.96; /* @kind other */ --display-2-lh: 0.9875; /* @kind other */ /* 63.2 / 64 */ --display-tracking: -0.014em; /* @kind other */ /* ≈ -0.91px @ 64 */ --display-weight: 800; /* @kind other */ /* Extra Bold */ /* ---- Heading scale (din-2014) — exact Figma text styles ---- H1 Extra Bold 64/63.2 (-0.91px) · H2 Extra Bold 40/46.2 (-0.43px) · H3 Bold 24/auto (-0.43px) */ --h1: 64px; /* buob-H1 */ --h2: 40px; /* buob-H2 */ --h3: 24px; /* buob-h3 — card title, name */ --h1-lh: 0.9875; /* @kind other */ /* 63.2 / 64 */ --h2-lh: 1.155; /* @kind other */ /* 46.2 / 40 */ --h3-lh: 1.0; /* @kind other */ /* auto */ --h1-tracking: -0.91px; /* @kind other */ --h2-tracking: -0.43px; /* @kind other */ --h3-tracking: -0.43px; /* @kind other */ --heading-tracking: -0.43px; /* @kind other */ /* default */ /* ---- Eyebrow / label (buob-eyebrow: Demi 16/24, +2px, uppercase) ---- */ --eyebrow-size: 16px; --eyebrow-lh: 24px; --eyebrow-tracking: 2px; /* @kind other */ --eyebrow-weight: 600; /* @kind other */ /* Demi */ /* ---- Button / UI label (buob-button: Demi 16/24, 0px) ---- */ --button-size: 16px; --button-lh: 24px; --button-weight: 600; /* @kind other */ /* Demi */ /* ---- Body scale (buob-paragraph: Regular 20/27.2, 0px) ---- */ --body-lg: 20px; /* lead / paragraph / inputs */ --body-md: 15px; /* default copy */ --body-sm: 14px; /* dense copy */ --body-xs: 13px; /* card meta copy */ --body-lg-lh: 1.36; /* @kind other */ /* 27.2 / 20 */ --body-md-lh: 1.6; /* @kind other */ --body-sm-lh: 1.75; /* @kind other */ /* ---- Stat numeral (big condensed figures) ---- */ --stat-size: 40px; --stat-lh: 1.0; /* @kind other */ } /* ============================================================ Buob Rohrleitungsbau — Spacing, radius, layout & the logo angle 8px base grid. Single 4px radius across the system. ============================================================ */ :root { /* ---- Spacing scale (8px grid) ---- */ --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: 80px; --space-10: 120px; --space-11: 160px; /* ---- Layout ---- */ --container-max: 1280px; /* content column */ --gutter: 40px; /* page side margin at desktop */ --section-pad-y: 120px; /* vertical rhythm between sections */ /* ---- 12-column grid (binding page layout) ---- 12 columns · 80px page margin · 32px gutter. The whole site aligns to it. */ --grid-columns: 12; /* @kind other */ --grid-gutter: 32px; /* space between columns */ --page-margin: 40px; /* left/right page margin */ --frame-max: 1760px; /* outer frame width (content = 1680 inside margins) */ /* distance from the centered frame to each viewport edge — used for full-bleed elements */ --bleed: max(0px, (100vw - var(--frame-max)) / 2); /* @kind other */ /* ---- Radius (one value, used sparingly) ---- */ --radius: 4px; /* ---- Buttons (one height, padding & radius across every button) ---- */ --btn-height: 52px; --btn-padding-x: 28px; --btn-radius: var(--radius); /* ---- Hairlines / borders ---- */ --border-width: 1px; --hairline: 1px solid var(--teal-500); /* ---- The logo angle ---- The slanted block edge of the Buob mark sits ~6° off vertical (84° off horizontal). EVERY diagonal in the system shares it. */ --logo-angle: 6deg; /* @kind other */ /* off the vertical */ --logo-angle-h: 84deg; /* @kind other */ /* off the horizontal (90 - 6) */ /* horizontal run for a full-height diagonal cut: tan(6°) ≈ 0.1051 */ --logo-slant-ratio: 0.1051; /* @kind other */ /* ready-made clip edge: a block whose right edge leans by the logo angle */ --logo-skew: skewX(-6deg); /* @kind other */ /* ---- The logo gradient ---- Helleres Petrol → tieferes Blau. Use sparingly, for jewel moments. */ --logo-gradient: linear-gradient(180deg, var(--logo-blue-light) 0%, var(--logo-blue-dark) 58%); --logo-gradient-90: linear-gradient(90deg, var(--logo-blue-light) 0%, var(--logo-blue-dark) 58%); /* ---- Elevation ---- */ --shadow-card: 0 1px 2px rgba(0, 32, 43, 0.04); --shadow-raised: 0 18px 48px -24px rgba(0, 32, 43, 0.45); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-med: 280ms; /* @kind other */ } /* ============================================================ Buob Rohrleitungsbau — Base element + helper classes Reusable typographic primitives built on the tokens. ============================================================ */ /* Display headline — DIN 2014 Extra Bold, UPPERCASE Versal */ .buob-display { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: var(--display-tracking); line-height: var(--display-1-lh); color: var(--text-primary); margin: 0; } /* Heading — din-2014 bold, mixed case */ .buob-heading { font-family: var(--font-body); font-weight: var(--fw-bold); letter-spacing: var(--heading-tracking); line-height: var(--h2-lh); color: var(--text-primary); margin: 0; text-wrap: balance; } /* Eyebrow / kicker label */ .buob-eyebrow { font-family: var(--font-body); font-weight: var(--eyebrow-weight); font-size: var(--eyebrow-size); line-height: var(--eyebrow-lh); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--eyebrow-on-light); margin: 0; } /* Body copy */ .buob-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--body-md); line-height: var(--body-md-lh); color: var(--text-secondary); margin: 0; text-wrap: pretty; } /* The signature angled photo/scrim edge. Apply to a block to lean its right edge by the logo angle. */ .buob-angle-edge { clip-path: polygon(0 0, 100% 0, calc(100% - var(--angle-run, 120px)) 100%, 0 100%); } /* A teal hairline rule */ .buob-rule { border: 0; border-top: 1px solid var(--teal-500); margin: 0; }