/* Canonical "live" families pulled straight from Google Fonts (same source the landing pages load via ). Hosted on fonts.gstatic.com, so no local upload is required. */ @import url("https://fonts.googleapis.com/css2?family=Michroma&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); /* ============================================================ Revenue Matrix — Colors & Type Source: uploads/Arculati kézikönyv.md (brand manual, Hungarian) The base tokens here are taken verbatim from the manual. Tokens marked "EXTENSION" are inferred to make the palette workable for full UI surfaces (states, semantics, scales). ============================================================ */ /* REM — the brand's specified type family. Loaded locally from fonts/. The manual specifies: Heading: REM SemiBold (600) Body: REM Regular (400) Full weight ladder (100–900 + italics) is included so type can flex into display, monospace-like data labels, etc. */ @font-face { font-family: "REM"; src: url("fonts/REM-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-ExtraLightItalic.ttf")format("truetype"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "REM"; src: url("fonts/REM-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; } :root { /* ---------- BRAND COLOR TOKENS (from manual) ------------- */ --rm-brand: #468eef; /* Arculati szín — primary blue */ --rm-bg: #303030; /* Háttérszín — base background */ --rm-secondary: #a6a6a6; /* Másodlagos szín — secondary */ --rm-heading: #f6f4f0; /* Heading text color */ --rm-body: #a6a6a6; /* Normal/body text color */ /* ---------- NEUTRAL SCALE (EXTENSION) -------------------- */ /* Built around #303030 base + #f6f4f0 high. Used for cards, borders, surfaces, dividers. */ --rm-ink-0: #ffffff; --rm-ink-50: #f6f4f0; /* highest text / on-bg */ --rm-ink-100: #e6e4e0; --rm-ink-200: #c9c7c2; --rm-ink-300: #a6a6a6; /* secondary text */ --rm-ink-400: #7a7a7a; --rm-ink-500: #555555; --rm-ink-600: #3d3d3d; /* card surface (1 step up) */ --rm-ink-700: #303030; /* base background */ --rm-ink-800: #242424; /* recessed surface */ --rm-ink-900: #1a1a1a; /* sidebar / chrome */ --rm-ink-1000: #0f0f0f; /* ---------- BRAND SCALE (EXTENSION) ---------------------- */ /* Tints / shades of #468eef for hovers, fills, glows. */ --rm-brand-50: #eaf3fe; --rm-brand-100: #d4e6fc; --rm-brand-200: #a9cdfa; --rm-brand-300: #7eb3f7; --rm-brand-400: #62a2f3; --rm-brand-500: #468eef; /* canonical brand */ --rm-brand-600: #3578d9; --rm-brand-700: #2862b3; --rm-brand-800: #1c4c8c; --rm-brand-900: #133766; /* ---------- SEMANTIC (EXTENSION, harmonized with brand) -- */ --rm-success: #4caf6c; --rm-success-bg: #1e3327; --rm-warning: #e0a93b; --rm-warning-bg: #3a2f17; --rm-danger: #e0584a; --rm-danger-bg: #3a1d1a; --rm-info: var(--rm-brand-500); --rm-info-bg: #182740; /* ---------- ALPHA / OVERLAYS (EXTENSION) ----------------- */ --rm-alpha-light-04: rgba(246, 244, 240, 0.04); --rm-alpha-light-08: rgba(246, 244, 240, 0.08); --rm-alpha-light-12: rgba(246, 244, 240, 0.12); --rm-alpha-light-20: rgba(246, 244, 240, 0.20); --rm-alpha-light-60: rgba(246, 244, 240, 0.60); --rm-alpha-dark-40: rgba(15, 15, 15, 0.40); --rm-alpha-dark-60: rgba(15, 15, 15, 0.60); --rm-alpha-brand-20: rgba(70, 142, 239, 0.20); --rm-alpha-brand-40: rgba(70, 142, 239, 0.40); /* ---------- SEMANTIC ALIASES ----------------------------- */ --rm-bg-base: var(--rm-ink-700); --rm-bg-elevated: var(--rm-ink-600); --rm-bg-recessed: var(--rm-ink-800); --rm-bg-chrome: var(--rm-ink-900); --rm-fg-primary: var(--rm-heading); /* high-emphasis */ --rm-fg-secondary: var(--rm-body); /* medium-emphasis */ --rm-fg-tertiary: var(--rm-ink-400); /* low-emphasis */ --rm-fg-inverse: var(--rm-ink-900); /* on light bg */ --rm-border: var(--rm-alpha-light-08); --rm-border-strong:var(--rm-alpha-light-20); --rm-divider: var(--rm-alpha-light-04); --rm-accent: var(--rm-brand-500); --rm-accent-hover: var(--rm-brand-400); --rm-accent-press: var(--rm-brand-600); --rm-accent-glow: var(--rm-alpha-brand-40); /* ---------- TYPE SYSTEM ---------------------------------- */ /* CANONICAL FAMILIES — the codified "live" direction. Display : Michroma (section + hero headings, eyebrows) Body / UI: Inter (all running text, buttons, labels) Data : JetBrains Mono (codes, counters, caps data-labels) The REM @font-face above is retained as legacy only — it is NOT a default anymore. Do not introduce new families; reference these tokens ("define once, use everywhere"), never hard-code a family. */ --rm-font-display: "Michroma", ui-sans-serif, system-ui, sans-serif; --rm-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rm-font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* back-compat aliases (older selectors used --rm-font-sans / -mono) */ --rm-font-sans: var(--rm-font-body); --rm-font-mono: var(--rm-font-data); /* Type ramp — RATIONALIZED to the roles the product actually uses. Values are chosen to match the live design (minimal visual shift), not a pure modular scale. Map every text element to one role. */ --rm-text-data: 11px; /* Intel One Mono caps label / counter */ --rm-text-xs: 12px; /* caption / micro */ --rm-text-sm: 13.5px; /* small body */ --rm-text-base: 15px; /* body */ --rm-text-md: 18px; /* lede / card title */ --rm-text-lg: 22px; --rm-text-xl: 28px; /* title L */ --rm-text-2xl: 38px; /* section title */ --rm-text-3xl: 48px; --rm-text-4xl: 56px; /* index numeral */ --rm-text-display: 64px; /* hero display */ --rm-leading-tight: 1.15; --rm-leading-snug: 1.30; --rm-leading-normal: 1.50; --rm-leading-relaxed: 1.65; --rm-tracking-tight: -0.02em; --rm-tracking-snug: -0.01em; --rm-tracking-normal: 0; --rm-tracking-wide: 0.04em; --rm-tracking-caps: 0.10em; /* Weights — brand uses 400 / 600. Others are EXTENSION. */ --rm-w-light: 300; /* @kind font */ --rm-w-regular: 400; /* @kind font */ /* body */ --rm-w-medium: 500; /* @kind font */ --rm-w-semibold: 600; /* @kind font */ /* headings */ --rm-w-bold: 700; /* @kind font */ /* ---------- SPACING (4px base, EXTENSION) ---------------- */ --rm-space-0: 0; --rm-space-1: 4px; --rm-space-2: 8px; --rm-space-3: 12px; --rm-space-4: 16px; --rm-space-5: 20px; --rm-space-6: 24px; --rm-space-8: 32px; --rm-space-10: 40px; --rm-space-12: 48px; --rm-space-16: 64px; --rm-space-20: 80px; --rm-space-24: 96px; /* ---------- RADII (EXTENSION) ---------------------------- */ --rm-radius-xs: 4px; --rm-radius-sm: 6px; --rm-radius-md: 10px; --rm-radius-lg: 14px; --rm-radius-xl: 20px; --rm-radius-2xl: 28px; --rm-radius-pill: 999px; /* ---------- ELEVATION (EXTENSION) ------------------------ */ /* Dark UI — shadows are subtle; pair with light hairline. */ --rm-shadow-1: 0 1px 0 0 var(--rm-alpha-light-04), 0 1px 2px 0 var(--rm-alpha-dark-40); --rm-shadow-2: 0 1px 0 0 var(--rm-alpha-light-04), 0 4px 12px -2px var(--rm-alpha-dark-40); --rm-shadow-3: 0 1px 0 0 var(--rm-alpha-light-08), 0 12px 32px -6px var(--rm-alpha-dark-60); --rm-shadow-glow: 0 0 0 4px var(--rm-alpha-brand-20); /* ---------- MOTION (EXTENSION) --------------------------- */ --rm-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --rm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --rm-dur-fast: 120ms; /* @kind other */ --rm-dur-base: 180ms; /* @kind other */ --rm-dur-slow: 280ms; /* @kind other */ } /* ============================================================ SEMANTIC TYPE STYLES Use these classes directly, or @extend the rules. ============================================================ */ html, body { background: var(--rm-bg-base); color: var(--rm-fg-secondary); font-family: var(--rm-font-sans); font-weight: var(--rm-w-regular); font-size: var(--rm-text-base); line-height: var(--rm-leading-normal); letter-spacing: var(--rm-tracking-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rm-display, .rm-h1, .rm-h2 { color: var(--rm-fg-primary); font-family: var(--rm-font-display); /* Michroma */ font-weight: var(--rm-w-regular); /* Michroma is mono-weight */ line-height: var(--rm-leading-tight); letter-spacing: var(--rm-tracking-tight); margin: 0; } .rm-h3, .rm-h4, .rm-h5, .rm-h6 { color: var(--rm-fg-primary); font-family: var(--rm-font-body); /* Inter */ font-weight: var(--rm-w-semibold); line-height: var(--rm-leading-snug); letter-spacing: var(--rm-tracking-snug); margin: 0; } .rm-display { font-size: var(--rm-text-display); line-height: 1.08; letter-spacing: -0.02em; } .rm-h1 { font-size: var(--rm-text-2xl); } /* section title · 38 */ .rm-h2 { font-size: var(--rm-text-xl); } /* title L · 28 */ .rm-h3 { font-size: var(--rm-text-md); } /* card / sub title · 18 */ .rm-h4 { font-size: 16px; } .rm-h5 { font-size: var(--rm-text-base); } .rm-h6 { font-size: var(--rm-text-sm); letter-spacing: var(--rm-tracking-normal); } .rm-body-lg { font-size: var(--rm-text-md); line-height: var(--rm-leading-relaxed); color: var(--rm-fg-secondary); } .rm-body { font-size: var(--rm-text-base); line-height: var(--rm-leading-normal); color: var(--rm-fg-secondary); } .rm-body-sm { font-size: var(--rm-text-sm); line-height: var(--rm-leading-normal); color: var(--rm-fg-secondary); } .rm-caption { font-size: var(--rm-text-xs); line-height: var(--rm-leading-snug); color: var(--rm-fg-tertiary); } .rm-eyebrow { font-family: var(--rm-font-display); /* Michroma small caps */ font-size: var(--rm-text-data); font-weight: var(--rm-w-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rm-accent); } .rm-data { font-family: var(--rm-font-data); /* Intel One Mono caps label */ font-size: var(--rm-text-data); font-weight: var(--rm-w-semibold); letter-spacing: var(--rm-tracking-caps); text-transform: uppercase; color: var(--rm-fg-tertiary); } .rm-mono { font-family: var(--rm-font-mono); font-size: 0.95em; letter-spacing: 0; } .rm-link { color: var(--rm-accent); text-decoration: none; transition: color var(--rm-dur-fast) var(--rm-ease-out); } .rm-link:hover { color: var(--rm-accent-hover); } .rm-link:active { color: var(--rm-accent-press); }