/* ============================================================ MEICO SYSTEM'S — Color & Type Foundations Single source of truth for the design system. Font: Nexa (Adobe Typekit) — load the kit in every file: ============================================================ */ /* ---------------------------------------------------------- 1. COLOR — base palette Sampled directly from the meico-web Figma file. ---------------------------------------------------------- */ :root { /* Core neutrals — the brand lives in true black & white */ --black: #000000; /* rgb(0,0,0) — primary dark surface */ --white: #ffffff; /* rgb(255,255,255)— primary light surface */ /* Steel / slate — the only "color" the brand allows itself, drawn from galvanised-mast & overcast-sky photography */ --steel-100: #ededed; /* rgb(237,237,237)— hairline fill on white */ --steel-200: #d9d9d9; /* rgb(217,217,217)— dividers, disabled */ --steel-300: #c8d1d3; /* rgb(200,209,211)— signature steel band */ --steel-500: #93a1a4; /* derived mid steel (oklch-harmonised) */ --steel-700: #464646; /* rgb(70,70,70) — strokes on dark */ /* Accent — telecom "sky" blue. Used sparingly: one big word, a hover, an active state. Never a button fill on white. */ --blue: #3e86ba; /* rgb(62,134,186) — signature accent */ --blue-bright: #4f9fd6; /* hover / on-dark lift */ --blue-deep: #2c6691; /* pressed / on-light */ /* Transparency tokens used for watermark type & protection */ --white-12: rgba(255,255,255,0.12); /* giant ghost wordmarks */ --white-79: rgba(255,255,255,0.79); /* radial wash over photos */ --black-scrim: linear-gradient(rgba(0,0,0,0) 0%, rgb(0,0,0) 100%); /* @kind color */ } /* ---------------------------------------------------------- 1b. BRAND PALETTE — MPR HOLDING & sister brands Exact values from the official logo manuals (Pantone-matched). Each brand owns ONE base color, usable for its logo + headings. Note: "Meico Safety" (green) and "Meico System's" naming are retired — the brand is now simply MEICO and uses the holding blue. ---------------------------------------------------------- */ :root { /* MPR HOLDING — the parent. Base = the same blue Meico uses. */ --mpr: #3e86ba; /* Pantone 646 C — MPR + Meico base */ --mpr-dark: #d6cac1; /* Pantone 7531 C 20% — MPR on dark bg */ /* ORSEN — bytové portfolio / sale & leaseback */ --orsen: #f7941d; /* Pantone 152 C — orange */ --orsen-deep: #d97a08; /* pressed / on-light contrast */ /* PRAŽSKÉ REZIDENCE — development. Base color ONLY */ /* (per-residence color mutations exist but are intentionally */ /* excluded from this system — use only the base taupe.) */ --pr: #857363; /* Pantone 7531 C — taupe */ --pr-deep: #6a5b4d; /* pressed / darker */ } /* ---------------------------------------------------------- 2. COLOR — semantic roles ---------------------------------------------------------- */ :root { /* Surfaces */ --bg: var(--white); /* default page surface */ --bg-invert: var(--black); /* dark hero / footer surface */ --bg-steel: var(--steel-300);/* the steel feature band */ --bg-subtle: var(--steel-100);/* faint card / section wash */ /* Foreground (on light) */ --fg1: var(--black); /* headings, primary text */ --fg2: #2b2b2b; /* body copy */ --fg3: #6f7679; /* captions, labels, meta */ --fg-faint: var(--steel-300);/* ghost / decorative type */ /* Foreground (on dark) */ --fg1-inv: var(--white); --fg2-inv: rgba(255,255,255,0.78); --fg3-inv: rgba(255,255,255,0.50); /* Lines */ --line: rgba(0,0,0,0.14); /* hairline on light */ --line-strong: rgba(0,0,0,0.30); --line-inv: rgba(255,255,255,0.16);/* hairline on dark */ /* Interactive */ --accent: var(--blue); --accent-hover: var(--blue-bright); --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--blue); } /* ---------------------------------------------------------- 3. TYPE — families & weights Nexa is geometric, wide, engineered. Tracking is generally tight on display and slightly OPEN + UPPERCASE on labels. ---------------------------------------------------------- */ :root { --font-sans: "nexa", "Nexa", "Century Gothic", "Futura", system-ui, sans-serif; --font-display: var(--font-sans); --w-book: 400; /* @kind font */ /* Nexa Book / Regular — body */ --w-regular: 400; /* @kind font */ --w-bold: 700; /* @kind font */ /* Nexa Bold — sub-headings */ --w-heavy: 800; /* @kind font */ /* Nexa Heavy / XBold — display & numerals */ } /* ---------------------------------------------------------- 4. TYPE — semantic scale Built from the Figma's observed sizes. Display is huge & heavy; body is calm; labels are small, UPPERCASE, tracked. ---------------------------------------------------------- */ :root { /* Hero / statement type (the "odpovědnost." watermark scale) */ --display-xxl: 800 clamp(80px, 12vw, 172px)/0.92 var(--font-display); --display-xl: 800 clamp(54px, 6.6vw, 86px)/1.0 var(--font-display); /* Section titles */ --h1: 800 clamp(40px, 4.4vw, 53px)/1.05 var(--font-display); --h2: 700 clamp(28px, 3vw, 44px)/1.1 var(--font-display); --h3: 700 clamp(22px, 2vw, 30px)/1.15 var(--font-display); --h4: 700 20px/1.25 var(--font-sans); /* Body */ --body-lg: 400 20px/1.55 var(--font-sans); --body: 400 17px/1.6 var(--font-sans); --body-sm: 400 15px/1.55 var(--font-sans); /* Labels / eyebrows / nav — uppercase, tracked */ --label: 700 13px/1.2 var(--font-sans); --label-sm: 800 11px/1.2 var(--font-sans); /* Big statistic numerals */ --stat: 400 clamp(48px, 5vw, 64px)/1 var(--font-display); } /* Helper classes so HTML cards & kits can drop styles in fast */ .t-display-xxl { font: var(--display-xxl); letter-spacing: -0.02em; } .t-display-xl { font: var(--display-xl); letter-spacing: -0.015em; } .t-h1 { font: var(--h1); letter-spacing: -0.01em; } .t-h2 { font: var(--h2); letter-spacing: -0.01em; } .t-h3 { font: var(--h3); letter-spacing: -0.005em; } .t-h4 { font: var(--h4); } .t-body-lg { font: var(--body-lg); } .t-body { font: var(--body); } .t-body-sm { font: var(--body-sm); color: var(--fg3); } .t-label { font: var(--label); text-transform: uppercase; letter-spacing: 0.14em; } .t-label-sm { font: var(--label-sm); text-transform: uppercase; letter-spacing: 0.18em; } .t-stat { font: var(--stat); } /* ---------------------------------------------------------- 5. SPACE / RADIUS / SHADOW / MOTION tokens The brand is mostly hard-edged & flat: small radii, almost no shadow, hairline borders, calm fades. ---------------------------------------------------------- */ :root { --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-sm: 4px; /* inputs, chips */ --radius: 8px; /* cards */ --radius-lg: 14px; /* large feature cards */ --radius-pill: 999px;/* circular arrow buttons */ /* Shadows are restrained — used only on the floating story cards */ --shadow-card: 0 18px 40px -24px rgba(0,0,0,0.28); --shadow-pop: 0 24px 60px -28px rgba(0,0,0,0.35); /* Motion — long, eased, no bounce. Matches the calm scroll feel. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --dur: 0.5s; /* @kind other */ --dur-fast: 0.25s; /* @kind other */ }