/* ==========================================================================
KYBO Design System — Colors & Type
Premium residential / real-estate development brand.
Sourced from the official KYBO Brand Book (cs).
========================================================================== */
/* ---------- Fonts ---------- */
/* Goldman is the brand display face (used in the wordmark itself).
Open Sans is the body face per the brand book.
Montserrat is the chosen secondary heading face for corporate / investor
materials per the brand book's comparison table. */
@font-face {
font-family: "Goldman";
src: url("./fonts/Goldman-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Goldman";
src: url("./fonts/Goldman-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Open Sans + Montserrat are loaded via Google Fonts where this CSS is used.
Add to :
*/
:root {
/* ============================================================
CORE BRAND PALETTE — exact hex from the KYBO Brand Book.
============================================================ */
--kybo-cream: #F5F3EF; /* "krémová" — primary light surface */
--kybo-anthracite: #2D3137; /* "antracitová" — primary dark / text */
--kybo-sand: #BBA57F; /* "zlatá / sand" — premium accent */
--kybo-ocean: #475C6A; /* "oceánově modrošedá" — secondary */
--kybo-silver: #A2AFB7; /* "stříbřitě šedá" — secondary tint */
--kybo-black: #000000;
--kybo-white: #FFFFFF;
/* ============================================================
EXTENDED SCALES — tints (lighter) → shade (darker).
Each base color has 50/100/200/300/400/500(base)/600/700/800/900.
Generated to support UI states (hover/active/disabled), section
backgrounds and WCAG-accessible text contrasts.
============================================================ */
/* Cream / Sand-bone neutral */
--cream-50: #FDFCFB;
--cream-100: #FAF8F4;
--cream-200: #F5F3EF; /* base */
--cream-300: #ECE8E0;
--cream-400: #DED9CE;
--cream-500: #C9C2B2;
--cream-600: #A89F8B;
--cream-700: #877E6B;
--cream-800: #5E5747;
--cream-900: #2E2A21;
/* Anthracite */
--anthracite-50: #EEEFF1;
--anthracite-100: #D6D8DC;
--anthracite-200: #ADB1B9;
--anthracite-300: #838996;
--anthracite-400: #5A6371;
--anthracite-500: #2D3137; /* base */
--anthracite-600: #24272C;
--anthracite-700: #1B1E22;
--anthracite-800: #131518;
--anthracite-900: #0A0B0D;
/* Sand / Gold */
--sand-50: #FAF6EE;
--sand-100: #F1E9D5;
--sand-200: #E5D6B5;
--sand-300: #D6C297;
--sand-400: #C8B388;
--sand-500: #BBA57F; /* base — premium accent */
--sand-600: #A08A66;
--sand-700: #826F4F;
--sand-800: #5C4E37;
--sand-900: #332B1E;
/* Ocean (slate blue) */
--ocean-50: #ECF0F3;
--ocean-100: #CFD8DE;
--ocean-200: #A1B0BB;
--ocean-300: #738898;
--ocean-400: #566D7E;
--ocean-500: #475C6A; /* base */
--ocean-600: #394A56;
--ocean-700: #2B3841;
--ocean-800: #1D262C;
--ocean-900: #0E1316;
/* Silver (cool grey) */
--silver-50: #F4F6F7;
--silver-100: #E4E8EB;
--silver-200: #C8D0D5;
--silver-300: #B5BFC6;
--silver-400: #A2AFB7; /* base */
--silver-500: #8F9DA7;
--silver-600: #6F7E89;
--silver-700: #545F69;
--silver-800: #383F46;
--silver-900: #1C2023;
/* ============================================================
SEMANTIC TOKENS — light theme (the brand's default).
Use these in product UI rather than the raw scales.
============================================================ */
/* Surfaces */
--bg: var(--cream-200); /* page */
--bg-elevated: #FFFFFF; /* cards, panels */
--bg-subtle: var(--cream-100); /* subtle section bg */
--bg-muted: var(--cream-300); /* hover row bg */
--bg-inverse: var(--anthracite-500);
/* Foregrounds */
--fg-1: var(--anthracite-500); /* primary text */
--fg-2: var(--anthracite-400); /* secondary text */
--fg-3: var(--silver-600); /* tertiary / meta */
--fg-muted: var(--silver-500);
--fg-inverse: var(--cream-200);
--fg-on-accent: var(--anthracite-500); /* text on sand */
--fg-on-dark: var(--cream-200);
/* Brand */
--brand: var(--anthracite-500);
--brand-fg: var(--cream-200);
--accent: var(--sand-500);
--accent-hover: var(--sand-600);
--accent-press: var(--sand-700);
--accent-soft: var(--sand-100);
/* Lines & strokes */
--border: var(--cream-400);
--border-strong: var(--silver-300);
--divider: var(--cream-300);
--hairline: rgba(45, 49, 55, 0.08);
/* States */
--focus-ring: var(--sand-500);
--selection-bg: var(--sand-200);
--selection-fg: var(--anthracite-700);
/* Status — derived (kept tonal, not generic web colors) */
--success: #5C7A52;
--success-soft: #E5ECDF;
--warning: #B58A3A;
--warning-soft: #F5ECD7;
--danger: #8C3A3A;
--danger-soft: #F1DBDB;
--info: var(--ocean-500);
--info-soft: var(--ocean-100);
/* ============================================================
SHADOWS — soft, architectural; never neon or saturated.
Use sparingly. KYBO design favors flat surfaces with hairline
borders over heavy elevation.
============================================================ */
--shadow-xs: 0 1px 2px rgba(45, 49, 55, 0.04);
--shadow-sm: 0 1px 3px rgba(45, 49, 55, 0.06), 0 1px 2px rgba(45, 49, 55, 0.04);
--shadow-md: 0 4px 12px rgba(45, 49, 55, 0.08), 0 2px 4px rgba(45, 49, 55, 0.04);
--shadow-lg: 0 12px 32px rgba(45, 49, 55, 0.10), 0 4px 8px rgba(45, 49, 55, 0.05);
--shadow-xl: 0 24px 56px rgba(29, 38, 44, 0.18), 0 8px 16px rgba(45, 49, 55, 0.08);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
/* ============================================================
RADII — restrained. Rounded but never bubbly. The monogram
uses a soft pill shape; UI radii echo this at a smaller scale.
============================================================ */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-pill: 999px;
/* ============================================================
SPACING — 4px base, generous whitespace per the brand book
("vzdušný layout s dominancí bílého prostoru").
============================================================ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* ============================================================
TYPOGRAPHY — primary stacks.
- Display / wordmark: Goldman (matches the KYBO logotype).
- Headings (corporate, investor, presentations): Montserrat.
- Body / UI: Open Sans.
============================================================ */
--font-display: "Goldman", "Montserrat", system-ui, sans-serif;
--font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--font-body: "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Weight tokens */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
--w-black: 800;
/* Type scale — modular, optimized for editorial + UI */
--fs-12: 0.75rem;
--fs-13: 0.8125rem;
--fs-14: 0.875rem;
--fs-15: 0.9375rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-28: 1.75rem;
--fs-32: 2rem;
--fs-40: 2.5rem;
--fs-48: 3rem;
--fs-56: 3.5rem;
--fs-64: 4rem;
--fs-80: 5rem;
--fs-96: 6rem;
/* Line-height tokens */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.5;
--lh-relaxed: 1.7;
/* Tracking — KYBO display work tends to use generous letter-spacing,
all-caps for buttons + section eyebrows. */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
--tracking-widest: 0.18em;
}
/* ============================================================
SEMANTIC ELEMENT STYLES — opinionated KYBO defaults.
Authoring HTML inside the design system inherits these.
============================================================ */
html {
font-family: var(--font-body);
font-size: 16px;
color: var(--fg-1);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-16);
line-height: var(--lh-normal);
color: var(--fg-1);
background: var(--bg);
}
/* Display — only for the largest editorial moments (hero titles, project
names, slide title slides). Goldman is geometric, condensed-ish, and
pairs visually with the KYBO monogram. */
.kybo-display,
h1.display {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: clamp(var(--fs-48), 6vw, var(--fs-96));
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
text-wrap: balance;
}
h1 {
font-family: var(--font-heading);
font-weight: var(--w-bold);
font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
margin: 0 0 var(--space-6);
color: var(--fg-1);
text-wrap: balance;
}
h2 {
font-family: var(--font-heading);
font-weight: var(--w-semibold);
font-size: clamp(var(--fs-24), 2.4vw, var(--fs-40));
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
margin: 0 0 var(--space-5);
color: var(--fg-1);
text-wrap: balance;
}
h3 {
font-family: var(--font-heading);
font-weight: var(--w-semibold);
font-size: var(--fs-24);
line-height: var(--lh-snug);
margin: 0 0 var(--space-4);
color: var(--fg-1);
}
h4 {
font-family: var(--font-heading);
font-weight: var(--w-medium);
font-size: var(--fs-18);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-normal);
margin: 0 0 var(--space-3);
color: var(--fg-1);
}
/* Eyebrow / kicker — a signature KYBO move (small, all-caps, wide-tracked,
often in sand or anthracite, sitting above an editorial headline). */
.eyebrow,
.kicker {
font-family: var(--font-heading);
font-weight: var(--w-semibold);
font-size: var(--fs-12);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--accent);
display: inline-block;
}
p {
font-family: var(--font-body);
font-size: var(--fs-16);
line-height: var(--lh-relaxed);
color: var(--fg-2);
margin: 0 0 var(--space-4);
text-wrap: pretty;
max-width: 70ch;
}
.lead {
font-size: var(--fs-20);
line-height: var(--lh-relaxed);
color: var(--fg-2);
font-weight: var(--w-light);
}
small,
.text-meta {
font-size: var(--fs-13);
color: var(--fg-3);
line-height: var(--lh-normal);
}
a {
color: var(--fg-1);
text-decoration: none;
border-bottom: 1px solid var(--accent);
transition: color 160ms ease, border-color 160ms ease;
}
a:hover {
color: var(--accent);
border-color: var(--accent-hover);
}
code,
pre,
.mono {
font-family: var(--font-mono);
font-size: 0.92em;
}
::selection {
background: var(--selection-bg);
color: var(--selection-fg);
}
/* Utility helpers used by preview cards + UI kits. */
.kybo-caps {
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
font-weight: var(--w-semibold);
}
.kybo-divider-gold {
width: 48px; height: 2px; background: var(--accent); border: 0;
}