/* ======================================================================= Holi Design System — colors, type, spacing tokens ---------------------------------------------------------------------- Holi is a Polish online obesity-treatment clinic. The system pairs a warm earthy neutral palette with two violets, anchored by graphite for typography. Three faces: DM Sans (marketing display), Recoleta (literary serif for character) and Inter (UI / body / long form). No bold weights anywhere — Regular and Medium only. ======================================================================= */ /* ── Web fonts ────────────────────────────────────────────────────────── */ /* Inter and DM Sans load from Google Fonts (CDN — works in cross-origin */ /* iframes). Recoleta is the official Holi serif but is paid; for previews */ /* we substitute Fraunces (a free variable humanist serif with similar */ /* warmth). Local font files in /fonts/ ship for production use — swap */ /* Fraunces back to Recoleta when authenticated to load local TTF/OTF. */ /* Google Fonts load from a in , not from here. */ /* Local Recoleta — used when the runtime can authenticate to /fonts/. */ /* Falls through to Fraunces if 401 / blocked. */ @font-face { font-family: "Recoleta"; src: url("./fonts/Recoleta-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* ── Tokens ───────────────────────────────────────────────────────────── */ :root { /* ── Primary palette (90% of materials) ── */ --holi-graphite: #1B1F29; /* typography, primary text */ --holi-violet-deep: #442E7D; /* primary brand, trust, gravity */ --holi-violet-bright: #7E5CD7; /* energy, accent, freshness */ --holi-beige: #E8DFCD; /* warm background, cards */ --holi-beige-light: #F0EDE8; /* secondary background */ --holi-beige-lightest: #F7F5F2; /* page background */ --holi-white: #FFFFFF; /* ── Extended ramps (use as accents to signal content type) ── */ /* Brand — violets */ --violet-50: #1E1043; --violet-100: #442E7D; --violet-200: #6647B8; --violet-300: #7E5CD7; --violet-400: #8C6AE6; --violet-500: #9E7DF7; --violet-600: #B092FF; --violet-700: #C0A9FF; --violet-800: #D6C6FF; /* Medicine — blues */ --blue-50: #091D42; --blue-100: #0E51C7; --blue-200: #1965EA; --blue-300: #4488FF; --blue-400: #76A8FF; --blue-500: #99BEFF; --blue-600: #BCD4FF; --blue-700: #D9E7FF; --blue-800: #E7F0FF; /* Dietetics — reds */ --red-50: #500003; --red-100: #6F0D11; --red-200: #91272B; --red-300: #AF4E52; --red-400: #CD6D71; --red-500: #E7989B; --red-600: #EFB9BB; --red-700: #F3CACC; --red-800: #F4DDDE; /* Science & education — browns */ --brown-50: #39170B; --brown-100: #623524; --brown-200: #7D4C3A; --brown-300: #9B6E5E; --brown-400: #BB8F7F; --brown-500: #D8B0A1; --brown-600: #EECFC3; --brown-700: #F8E8E2; --brown-800: #F8EEEA; /* Earth neutrals */ --earth-50: #2E271A; --earth-100: #796A4D; --earth-200: #A38F67; --earth-300: #B3A27E; --earth-400: #C5B696; --earth-500: #DACDB1; --earth-600: #E8DFCD; --earth-700: #F0EDE8; --earth-800: #F7F5F2; /* ── Semantic surface / text ── */ --bg-page: var(--holi-beige-lightest); --bg-surface: var(--holi-white); --bg-soft: var(--holi-beige-light); --bg-warm: var(--holi-beige); --bg-violet: var(--holi-violet-deep); --bg-violet-bright: var(--holi-violet-bright); --bg-graphite: var(--holi-graphite); --fg-primary: var(--holi-graphite); --fg-muted: rgba(27, 31, 41, 0.72); --fg-subtle: rgba(27, 31, 41, 0.56); --fg-on-warm: #82734D; /* muted brown for top-bar copy */ --fg-on-dark: var(--holi-white); --fg-accent: var(--holi-violet-bright); --fg-accent-strong: var(--holi-violet-deep); --border-subtle: #F0F0F4; --border-default: #DCDCE0; --border-strong: var(--holi-graphite); /* Category accents (single-token shorthands) */ --holi-medicine: var(--blue-200); --holi-dietetics: var(--red-200); --holi-science: var(--brown-200); /* Signal colors (sparingly — from Figma usage) */ --success: #17B26A; --success-soft: #DAF3E7; --success-bg: #ECFDF3; /* ── Typography ── */ --font-display: "DM Sans", "Helvetica Neue", Arial, sans-serif; --font-serif: "Recoleta", "Fraunces", "Georgia", "Times New Roman", serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; /* Holi rule: no bold weights. Regular + Medium only. */ --weight-regular: 400; --weight-medium: 500; /* Type scale (px) — extracted from the marketing page */ --text-xs: 12px; /* meta, fineprint */ --text-sm: 14px; /* nav, button text small, captions */ --text-base: 16px; /* body */ --text-lg: 20px; /* lead body, large UI labels */ --text-xl: 24px; /* small headings, large card titles */ --text-2xl: 28px; /* card / sub-section titles (Recoleta) */ --text-3xl: 32px; /* sub-headlines (Recoleta) */ --text-4xl: 36px; /* section eyebrows (Recoleta) */ --text-5xl: 48px; /* page-level headlines (Recoleta) */ --text-6xl: 64px; /* display, hero (Recoleta) */ /* Line heights — Recoleta is set tight, Inter relaxed */ --leading-tight: 1.05; --leading-snug: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.6; /* ── Spacing (8 px grid) ── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-7: 56px; --space-8: 64px; --space-9: 72px; --space-10: 80px; /* ── Radius ── */ --radius-xs: 4px; --radius-sm: 6px; /* buttons */ --radius-md: 8px; --radius-lg: 16px; /* small cards / testimonials */ --radius-xl: 24px; /* large cards, hero blocks */ --radius-pill: 9999px; /* ── Shadow / elevation ── */ --shadow-xs: 0 1px 2px rgba(27, 31, 41, 0.06); --shadow-sm: 0 2px 6px rgba(27, 31, 41, 0.06); --shadow-md: 0 8px 24px rgba(215, 213, 228, 0.6); /* the Holi "soft violet" lift */ --shadow-lg: 0 24px 56px rgba(27, 31, 41, 0.10); /* ── Transitions ── */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; } /* ======================================================================= Semantic element styles — apply by class to get correct Holi tone. ======================================================================= */ .holi-h1, .holi-h2, .holi-h3, .holi-h4, .holi-h5, .holi-h6 { font-family: var(--font-serif); font-weight: var(--weight-regular); color: var(--fg-accent-strong); /* deep plum violet by default */ line-height: var(--leading-tight); letter-spacing: -0.01em; margin: 0; text-wrap: pretty; } .holi-h1 { font-size: var(--text-6xl); line-height: 1.04; } .holi-h2 { font-size: var(--text-5xl); line-height: 0.83; } /* matches Figma 48 / 40 */ .holi-h3 { font-size: var(--text-4xl); line-height: 1.1; } .holi-h4 { font-size: var(--text-3xl); line-height: 1.15; } .holi-h5 { font-size: var(--text-2xl); line-height: 1.2; } .holi-h6 { font-size: var(--text-xl); line-height: 1.25; } /* DM Sans variant for marketing display + presentation titles */ .holi-display { font-family: var(--font-display); font-weight: var(--weight-regular); color: var(--fg-primary); line-height: var(--leading-snug); letter-spacing: -0.02em; margin: 0; } /* Eyebrow / kicker — small label above a heading */ .holi-eyebrow { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-accent); } .holi-lead { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-primary); text-wrap: pretty; } .holi-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-primary); } .holi-caption, .holi-small { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-muted); } .holi-meta { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-xs); line-height: 1.4; letter-spacing: 0.02em; color: var(--fg-on-warm); } /* Stat — big violet number paired with prose */ .holi-stat { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-base); color: var(--fg-accent); } /* Link */ .holi-link { color: var(--fg-accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duration-normal) var(--ease-standard); } .holi-link:hover { color: var(--fg-accent); } /* Page-default helpers */ .holi-page { background: var(--bg-page); color: var(--fg-primary); font-family: var(--font-body); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; } /* Reset button chrome so Holi's purple / dark fills render correctly */ button { appearance: none; -webkit-appearance: none; } /* When sitting on dark / violet surfaces, flip text to white */ .on-dark, .on-dark .holi-h1, .on-dark .holi-h2, .on-dark .holi-h3, .on-dark .holi-h4, .on-dark .holi-h5, .on-dark .holi-h6, .on-dark .holi-display, .on-dark .holi-lead, .on-dark .holi-body, .on-dark .holi-caption, .on-dark .holi-eyebrow { color: var(--fg-on-dark); }