/* ============================================================ GM Facility Services - brand skin on the facility template (source: [YL] yllw.com). Colours from the GM logo: blue #2C51AD, red #D7473A, black wordmark. THE one file to edit for the look. Touch nothing else. ============================================================ */ @font-face { font-family: "Roboto Flex"; src: url("fonts/robotoflex-var.woff2") format("woff2"); font-weight: 400 800; font-stretch: 25% 100%; font-display: swap; } @font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } :root { /* ---- color ---------------------------------------------------- [YL] white page, one accent used ONLY as a fill (topbar, hover fills, footer CTA bar), a stone neutral for the primary button and EVERY hairline. Ink is near-black, never #000 (WEBSITE-STANDARD 9). GM: accent = logo blue, button hover = logo red, both with white text. */ --bg: #ffffff; --ink: #0d0d0d; --ink-muted: rgba(13, 13, 13, .65); --dark: #0b1530; /* slider backdrop: very dark GM blue */ --accent: #2c51ad; /* GM blue: topbar, hover fills (7.3:1 with white) */ --accent-soft: #c63d31; /* GM red, darkened to 5.1:1 with white: primary button hover */ --accent-ink: #ffffff; /* text on accent and accent-soft */ --stone: #c9d1e3; /* cool grey from the blue: primary button + hairlines */ --stone-dark: #5f6f93; /* text-link hover (5:1 on white) */ --stone-light: #dfe4ef; --on-dark: #ffffff; --line: var(--stone); --line-soft: rgba(13, 13, 13, .15); --line-input: rgba(13, 13, 13, .12); --line-on-dark: rgba(255, 255, 255, .3); --focus: #c63d31; --photo-dim: .7; /* photo opacity over --dark */ --placeholder: linear-gradient(135deg, #eef1f7 0%, #dfe4ef 55%, #c9d1e3 100%); /* Lydia: blue and white reads as clean. The old site's baby blue is the soft colour: primary buttons, open service row, light step numbers and FAQ. The strong GM blue stays a small accent (topbar, footer CTA, hover). */ --soft: #d8e8f7; /* baby blue of the old GM site, ink text 16:1 */ --btn-bg: var(--soft); /* primary button */ --btn-ink: var(--ink); --tint: #ebf3fb; /* the same baby blue, half strength (FAQ) */ --invert-ink: #f2f2f2; /* Branchen word, blended by difference: reads #0d0d0d on white */ --mark-ratio: 492 / 387; /* GM mark viewBox */ --mark-h: 10.4cqw; /* hero GM mark: taller than the cap height (8.1cqw) */ --mark-h-m: 15.5cqw; /* phone */ --mark-h-xs: 14.5cqw; /* phones under 360px */ /* ---- type ----------------------------------------------------- One variable family. Hierarchy by the WIDTH axis: headings uppercase + condensed, body sentence case at normal width. Grio wdth 10-50 maps to Roboto Flex wdth 25-40. */ --font-body: "Barlow", "Arial", sans-serif; /* running text; headings, nav and buttons stay Roboto Flex */ --font: "Roboto Flex", "Arial Narrow", Arial, sans-serif; --fv-hero: "wght" 640, "wdth" 25; --fv-display: "wght" 600, "wdth" 25; --fv-h1: "wght" 660, "wdth" 25; --fv-h2: "wght" 640, "wdth" 30; --fv-h3: "wght" 600, "wdth" 38; --fv-card: "wght" 580, "wdth" 35; --fv-stat: "wght" 580, "wdth" 38; --fv-slide-on: "wght" 680, "wdth" 32; --fv-slide-off:"wght" 420, "wdth" 25; --fv-bar: "wght" 640, "wdth" 35; --fv-nav: "wght" 450, "wdth" 82; --fv-btn: "wght" 520, "wdth" 86; --fv-large: "wght" 450, "wdth" 86; --fv-h4: "wght" 480, "wdth" 100; --fv-footlink: "wght" 550, "wdth" 82; --fv-menu: "wght" 580, "wdth" 50; --fv-tiny: "wght" 480, "wdth" 90; --hero-size: 11.5cqw; /* 165.6px @1440 */ --hero-size-m: 16cqw; /* "Saubere + Logo + Räume" fits one phone line from 360px */ --hero-size-xs: 15cqw; /* the same under 360px (the font gets wider when small) */ --display: 15cqw; /* 216px @1440 */ --display-m: 13vw; --h1: 7.25rem; /* 116px */ --h1-t: 6rem; --h1-m: 17.5vw; --h2: 4rem; /* 64px */ --h2-t: 6vw; --h2-m: 12.5vw; --h3: 2.5rem; /* 40px */ --h3-m: 10vw; --card-h: 2.8vw; --card-h-t: 2.25rem; --card-h-m: 11vw; --stat: 6.25cqw; --stat-m: 20cqw; --slide-on: 6.75vw; --slide-off: 2.5vw; --slide-on-m: 11.5vw; --slide-off-m: 8vw; --bar: 2.75rem; /* footer CTA bar */ --bar-m: 5.5vw; --t-large: 1.75rem; /* 28px lead */ --t-large-m: 1.25rem; --t-reg: 1.125rem; /* 18px */ --t-h4: 1.25rem; /* 20px */ --t-body: 1rem; --t-tiny: .875rem; --t-top: .8125rem; /* 13px topbar */ --t-menu: 2rem; --lh-hero: .88; --lh-display: .96; --lh-h3: 1; --lh-reg: 1.28; --lh-large: 1.24; --track-hero: -0.015em; --track-h2: -0.01em; --track-h3: -0.025em; /* ---- rhythm --------------------------------------------------- */ --pad-x: 24px; --pad-x-m: 12px; --gap: 16px; --sp-s: 24px; --sp-m: 64px; --sp-l: 96px; --sp-h: 160px; --sp-xh: 288px; --sp-l-m: 80px; --sp-h-m: 128px; --sp-xh-m: 160px; --nav-h: 48px; --top-h: 32px; --measure: 35rem; /* 560px lead column */ /* ---- details -------------------------------------------------- */ --r-btn: 2px; --r-btn-hover: 2px; /* same as --r-btn: no rounding on hover */ --r-ui: 4px; --r-card: 6px; --hairline: 1px; --t-btn: .2s; /* hover feedback: fast, or the site feels sluggish */ --t-link: .3s; --t-bar: .3s; --t-morph: 1.1s; --t-slide: .9s; --t-card: .35s; --t-tick-out: .2s; --t-tab: .25s; --t-acc: .35s; --t-top-coll: .3s; --t-marquee: 70s; --t-cycle: 9.6s; --t-tick: 9s; --ease-morph: cubic-bezier(.713, .018, .355, 1); --ease-word: cubic-bezier(.708, .007, .193, .995); --ease-link: cubic-bezier(.215, .61, .355, 1); --ease-bar: cubic-bezier(.743, .007, .25, 1); --ease-tab: cubic-bezier(.538, .094, .25, 1); --ease-out: ease-out; --ease-io: ease-in-out; --btn-pad: 12px 20px; --btn-pad-s: 8px 20px; --btn-pad-m: 10px 18px; }