/* ========================================================= Home Care Facility Management — Design Tokens Colors + Type foundation for the corporate B2B brand. ========================================================= */ /* Home Care official type pair: - Manrope: geometric sans — headings, UI, body (full Cyrillic) - Source Serif 4: editorial serif — pull quotes, long-form intros (full Cyrillic) */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&display=swap'); :root { /* ---------- Brand colors ---------- Derived from the Home Care logo. Coral is the single brand accent; purple lives only IN the logo itself and is not used as a UI color. */ /* Primary: coral — the dominant logo color. Warm, human, distinctive. */ --hc-primary: #F07050; /* logo coral */ --hc-primary-700: #D85A3C; /* hover / pressed */ --hc-primary-600: #E66248; --hc-primary-500: #F58873; /* lighter tint */ --hc-primary-200: #FAD1C6; --hc-primary-100: #FDEAE3; /* tinted surface */ /* Ink (deep plum) — the dark neutral. Used for headings and dark surfaces. Warmer than black; keeps the system on-brand without introducing purple as a second accent. */ --hc-ink: #2B1F45; /* deep plum ink */ --hc-ink-800: #3D2F5E; /* elevated dark surface */ --hc-ink-600: #544573; /* muted dark text */ /* Legacy accent tokens (kept as aliases for files that still reference them). They now resolve to ink tones — NOT a purple accent. If you want a contrast voice alongside coral, use --hc-ink. */ --hc-accent: var(--hc-ink); --hc-accent-700: var(--hc-ink); --hc-accent-500: var(--hc-ink-600); --hc-accent-200: #D6CDC4; /* falls back to border-strong tone */ --hc-accent-100: #F5EFEA; /* falls back to bg-tint */ /* ---------- Neutrals (warm-tinted to harmonize with coral) ---------- */ --hc-bg: #FFFFFF; --hc-bg-soft: #FAF7F4; /* warm off-white section alt */ --hc-bg-tint: #F5EFEA; /* slightly warmer neutral */ --hc-bg-dark: #1A1530; /* footer / CTA — deep plum, not black */ --hc-border: #ECE6E0; --hc-border-strong: #D6CDC4; /* ---------- Text ---------- */ --hc-fg: #2B1F45; /* headings — deep plum (on-brand) */ --hc-fg-2: #4A3F5E; /* body */ --hc-fg-3: #6E6480; /* secondary / meta */ --hc-fg-4: #A097AE; /* tertiary / hints */ --hc-fg-on-primary: #FFFFFF; /* white on coral — passes AA at 16px+ */ --hc-fg-on-accent: #FFFFFF; /* white on ink */ --hc-fg-on-dark: #F5EFEA; /* ---------- Semantic ---------- */ --hc-success: #2F9E6B; --hc-warning: #E8A339; --hc-error: #D93A3A; --hc-info: var(--hc-ink); /* info = deep plum */ /* ---------- Type families ---------- */ --hc-font-sans: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif; --hc-font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --hc-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---------- Type scale (desktop) ---------- */ --hc-fs-display: clamp(48px, 6vw, 76px); /* hero H1 */ --hc-fs-h1: clamp(36px, 4vw, 52px); --hc-fs-h2: clamp(28px, 3vw, 40px); --hc-fs-h3: 24px; --hc-fs-h4: 20px; --hc-fs-body-lg: 18px; --hc-fs-body: 16px; --hc-fs-small: 14px; --hc-fs-micro: 12px; /* ---------- Eyebrow (spaced uppercase) ---------- */ --hc-eyebrow-size: 13px; --hc-eyebrow-tracking: 0.18em; /* ---------- Line heights ---------- */ --hc-lh-tight: 1.1; --hc-lh-snug: 1.25; --hc-lh-normal: 1.55; --hc-lh-relaxed: 1.7; /* ---------- Weights ---------- */ --hc-fw-regular: 400; --hc-fw-medium: 500; --hc-fw-semi: 600; --hc-fw-bold: 700; --hc-fw-extra: 800; /* ---------- Spacing scale (4px base) ---------- */ --hc-s-1: 4px; --hc-s-2: 8px; --hc-s-3: 12px; --hc-s-4: 16px; --hc-s-5: 24px; --hc-s-6: 32px; --hc-s-7: 48px; --hc-s-8: 64px; --hc-s-9: 96px; --hc-s-10: 120px; /* ---------- Radii ---------- */ --hc-r-sm: 6px; --hc-r-md: 8px; --hc-r-lg: 12px; --hc-r-xl: 20px; --hc-r-pill: 999px; /* ---------- Shadows ---------- */ --hc-shadow-sm: 0 1px 2px rgba(11, 22, 34, 0.06); --hc-shadow-md: 0 4px 14px rgba(11, 22, 34, 0.08); --hc-shadow-lg: 0 14px 36px rgba(11, 22, 34, 0.12); --hc-shadow-hover: 0 18px 40px rgba(11, 61, 107, 0.18); /* ---------- Layout ---------- */ --hc-container: 1280px; --hc-gutter: 24px; --hc-section-py: clamp(64px, 8vw, 120px); /* ---------- Motion ---------- */ --hc-ease: cubic-bezier(.2, .7, .2, 1); --hc-dur-fast: 150ms; --hc-dur-base: 240ms; --hc-dur-slow: 420ms; } /* ========================================================= Base semantic styles ========================================================= */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--hc-font-sans); font-size: var(--hc-fs-body); line-height: var(--hc-lh-normal); color: var(--hc-fg-2); background: var(--hc-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { color: var(--hc-fg); font-weight: var(--hc-fw-bold); line-height: var(--hc-lh-snug); letter-spacing: -0.01em; margin: 0; } h1 { font-size: var(--hc-fs-h1); line-height: var(--hc-lh-tight); letter-spacing: -0.02em; } h2 { font-size: var(--hc-fs-h2); letter-spacing: -0.015em; } h3 { font-size: var(--hc-fs-h3); } h4 { font-size: var(--hc-fs-h4); font-weight: var(--hc-fw-semi); } p { margin: 0; line-height: var(--hc-lh-relaxed); } a { color: var(--hc-primary); text-decoration: none; transition: color var(--hc-dur-fast) var(--hc-ease); } a:hover { color: var(--hc-primary-700); } small { font-size: var(--hc-fs-small); color: var(--hc-fg-3); } /* Eyebrow — the signature section label */ .hc-eyebrow { display: inline-block; font-size: var(--hc-eyebrow-size); letter-spacing: var(--hc-eyebrow-tracking); text-transform: uppercase; font-weight: var(--hc-fw-semi); color: var(--hc-accent); } .hc-display { font-size: var(--hc-fs-display); line-height: 1.02; letter-spacing: -0.025em; font-weight: var(--hc-fw-extra); color: var(--hc-fg); } /* Container */ .hc-container { width: 100%; max-width: var(--hc-container); margin: 0 auto; padding: 0 var(--hc-gutter); }