/* ============================================================= HELMIVI · DESIGN TOKENS Colors + Typography for HELMIVI Medical Centre Load this once on any page that consumes the design system: Source of truth for the palette is the brand guideline sheet. Hex values match the six swatches printed there exactly. Fonts (Cormorant Garamond + Montserrat) are loaded from the Google Fonts CDN via the tags in the page , so no local TTF files are required. ============================================================= */ /* Global box model — width includes padding + border. Without this, elements like .hv-container (width:100% + padding-inline) overflow the viewport by the padding amount on small screens, pushing the page sideways (looks broken on mobile). */ *, *::before, *::after { box-sizing: border-box; } :root { /* ========================================================= COLOR · base palette Six swatches direct from the brand guideline, sorted lightest → deepest. Never use pure black or pure white. ========================================================= */ --cream-50: #F7F4EE; /* page background */ --cream-100: #EAE3D6; /* alt section / cards */ --sand-200: #DCCEB4; /* subtle accents, dividers */ --gold-300: #C8B58C; /* secondary gold (light) */ --gold-500: #B69E6B; /* PRIMARY brand gold */ --gold-700: #8B7A55; /* deep gold / icon stroke */ /* Foreground colors — warm dark browns, never pure black */ --ink-900: #2B2117; /* primary text */ --ink-700: #4A3F30; /* secondary text */ --ink-500: #6E6147; /* muted text / captions */ --ink-300: #A89A7C; /* placeholder, disabled */ /* Hairlines & borders — always warm, never neutral grey */ --line-soft: #E5DCC8; /* default border on cream-50 */ --line-strong: #C8B58C; /* visible divider (rare) */ /* Semantic surface */ --bg-page: var(--cream-50); --bg-alt: var(--cream-100); --bg-card: #FBF9F4; /* slightly lifted from page */ --bg-card-alt: var(--cream-100); --bg-overlay: rgba(43, 33, 23, 0.55); /* warm dark brown @ 55% */ /* Semantic foreground */ --fg-1: var(--ink-900); /* headings, primary body */ --fg-2: var(--ink-700); /* secondary body */ --fg-3: var(--ink-500); /* labels, captions */ --fg-4: var(--ink-300); /* placeholder, disabled */ --fg-gold: var(--gold-500); --fg-gold-deep: var(--gold-700); --fg-on-gold: var(--cream-50); /* text on gold buttons */ /* Borders */ --border-default: var(--line-soft); --border-strong: var(--line-strong); /* Status colors — quiet, never saturated */ --status-positive: #6E8A5E; /* sage */ --status-warning: #B58A3A; /* amber-gold */ --status-critical: #9B5A4A; /* dusty terracotta */ /* ========================================================= TYPE · base Two families only. Headings = Cormorant Garamond (serif display, airy/thin). Body + UI = Montserrat (light to medium). Buttons and nav are UPPERCASE with extra tracking. ========================================================= */ --font-serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif; --font-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Weights — keep palette small */ --w-serif-light: 300; --w-serif-regular: 400; --w-serif-medium: 500; --w-serif-semibold: 600; --w-sans-light: 300; --w-sans-regular: 400; --w-sans-medium: 500; --w-sans-semibold: 600; /* Size scale — display sizes are LARGE and AIRY */ --fs-display-xl: 88px; /* hero h1 desktop */ --fs-display-l: 64px; /* section opener */ --fs-display-m: 48px; /* h1 inside content */ --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-l: 18px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 13px; --fs-eyebrow: 12px; /* uppercase eyebrow labels */ --fs-button: 13px; /* uppercase button text */ /* Line heights — generous, breathing */ --lh-display: 1.08; --lh-heading: 1.18; --lh-body: 1.6; --lh-tight: 1.3; /* Letter spacing — tight for serif display, wide for sans UPPERCASE */ --ls-display: -0.01em; --ls-heading: -0.005em; --ls-body: 0em; --ls-eyebrow: 0.22em; /* uppercase eyebrows: very wide */ --ls-button: 0.18em; /* uppercase buttons */ --ls-nav: 0.16em; /* uppercase nav links */ /* ========================================================= SPACING (4-pt scale, generous step-ups for luxury feel) ========================================================= */ --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; --space-11: 160px; /* section padding desktop */ /* Layout */ --container-max: 1280px; --gutter: var(--space-6); --section-y-desk: var(--space-11); /* 160px */ --section-y-mob: var(--space-9); /* 96px */ /* ========================================================= RADII — almost square. Buttons and inputs ~2px, cards ~4px. Photos can be larger (12-20px) for a softened editorial feel. ========================================================= */ --r-button: 2px; --r-input: 2px; --r-card: 4px; --r-photo: 16px; --r-pill: 999px; /* ========================================================= SHADOWS — used VERY sparingly. Cards usually rely on a hairline border + background lift, not shadow. ========================================================= */ --shadow-none: none; --shadow-card: 0 1px 2px rgba(43, 33, 23, 0.04), 0 8px 24px rgba(43, 33, 23, 0.04); --shadow-lift: 0 2px 4px rgba(43, 33, 23, 0.05), 0 18px 40px rgba(43, 33, 23, 0.07); /* ========================================================= MOTION — slow, calm, never bouncy. ========================================================= */ --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 180ms; --t-base: 260ms; --t-slow: 480ms; } /* ---------- Base reset ---------- */ html { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); font-weight: var(--w-sans-regular); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--bg-page); color: var(--fg-1); } /* ============================================================= SEMANTIC TYPE CLASSES Use these instead of styling bare tags so the same look can be applied to

on a hero,

in a card label, or in an eyebrow with zero ambiguity. ============================================================= */ .t-display-xl, .t-display-l, .t-display-m, .t-h1, .t-h2, .t-h3, .t-h4 { font-family: var(--font-serif); font-weight: var(--w-serif-light); /* H1 thinnest */ line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--fg-1); margin: 0; text-wrap: pretty; } .t-display-xl { font-size: var(--fs-display-xl); font-weight: var(--w-serif-light); line-height: var(--lh-display); letter-spacing: var(--ls-display); } .t-display-l { font-size: var(--fs-display-l); font-weight: var(--w-serif-light); line-height: var(--lh-display); } .t-display-m { font-size: var(--fs-display-m); font-weight: var(--w-serif-regular); } .t-h1 { font-size: var(--fs-h1); font-weight: var(--w-serif-regular); } .t-h2 { font-size: var(--fs-h2); font-weight: var(--w-serif-regular); } .t-h3 { font-size: var(--fs-h3); font-weight: var(--w-serif-medium); } .t-h4 { font-size: var(--fs-h4); font-weight: var(--w-serif-medium); line-height: var(--lh-tight); } /* Body + UI — Montserrat */ .t-body-l, .t-body, .t-body-s, .t-caption { font-family: var(--font-sans); font-weight: var(--w-sans-regular); color: var(--fg-2); margin: 0; text-wrap: pretty; } .t-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); } .t-body { font-size: var(--fs-body); line-height: var(--lh-body); } .t-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body); } .t-caption { font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--fg-3); } /* Eyebrow — small uppercase label above a heading */ .t-eyebrow { font-family: var(--font-sans); font-weight: var(--w-sans-medium); font-size: var(--fs-eyebrow); line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--fg-gold-deep); margin: 0; } /* Nav link / breadcrumb / pill text — uppercase Montserrat */ .t-nav { font-family: var(--font-sans); font-weight: var(--w-sans-medium); font-size: var(--fs-button); line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-nav); color: var(--fg-1); } /* Button label */ .t-button { font-family: var(--font-sans); font-weight: var(--w-sans-medium); font-size: var(--fs-button); line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-button); } /* Quote / pull-quote */ .t-quote { font-family: var(--font-serif); font-style: italic; font-weight: var(--w-serif-regular); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--fg-1); } /* ---------- Bare-tag mapping (sensible defaults) ---------- */ h1 { font: var(--w-serif-light) var(--fs-display-m)/var(--lh-display) var(--font-serif); letter-spacing: var(--ls-display); color: var(--fg-1); margin: 0; } h2 { font: var(--w-serif-regular) var(--fs-h1)/var(--lh-heading) var(--font-serif); letter-spacing: var(--ls-heading); color: var(--fg-1); margin: 0; } h3 { font: var(--w-serif-regular) var(--fs-h2)/var(--lh-heading) var(--font-serif); color: var(--fg-1); margin: 0; } h4 { font: var(--w-serif-medium) var(--fs-h3)/var(--lh-tight) var(--font-serif); color: var(--fg-1); margin: 0; } p { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; } small { font-size: var(--fs-body-s); color: var(--fg-3); } a { color: var(--fg-gold-deep); text-decoration: none; transition: color var(--t-fast) var(--ease-quiet); } a:hover { color: var(--gold-500); } /* ---------- Utility ---------- */ .section { padding: var(--section-y-desk) 0; } .section--alt { background: var(--bg-alt); } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } @media (max-width: 720px) { .section { padding: var(--section-y-mob) 0; } :root { --fs-display-xl: 48px; --fs-display-l: 40px; --fs-display-m: 36px; --fs-h1: 28px; --fs-h2: 24px; } }