/* ============================================================ Dr Kunal Patel — Design tokens colors + typography. Drop this on any page after the Google Fonts link in . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500&display=swap'); :root { /* ----------- COLOUR — A warm London garden ----------- */ --cream: #FBF6EE; /* primary background — the default surface */ --forest: #1F3D3A; /* primary text. workhorse. */ --sage: #7BA098; /* calming accent. secondary surfaces. */ --apricot: #E89B6C; /* warm accent. rule, CTA, highlights. */ --wheat: #D9C5A0; /* supporting. borders, dividers. */ /* tints & shades for UI states (used sparingly) */ --forest-90: #2A4B47; /* hover for forest bg */ --forest-12: rgba(31,61,58,0.12); --forest-06: rgba(31,61,58,0.06); --apricot-90: #D88955; /* pressed apricot */ --apricot-12: rgba(232,155,108,0.12); --sage-12: rgba(123,160,152,0.12); --wheat-50: rgba(217,197,160,0.5); /* ----------- SEMANTIC SURFACES ----------- */ --bg: var(--cream); --bg-elevated: #FFFCF6; /* card on cream */ --bg-inverse: var(--forest); --bg-accent: var(--apricot); --bg-quiet: var(--sage); --fg: var(--forest); --fg-muted: #4F6D69; /* forest at ~70% — for secondary copy */ --fg-quiet: #7A8E8B; /* forest at ~50% — for captions */ --fg-inverse: var(--cream); --fg-accent: var(--apricot); --rule: var(--wheat); --rule-accent: var(--apricot); --border: rgba(217,197,160,0.6); /* wheat at 60% */ --border-strong: var(--wheat); /* ----------- TYPE SCALE ----------- */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* sizes (px) */ --fs-display: 56px; --fs-h1: 40px; --fs-h2: 28px; --fs-h3: 18px; --fs-lead: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-eyebrow: 11px; /* line heights */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.65; /* tracking */ --track-eyebrow: 0.18em; --track-tight: -0.01em; /* ----------- SPACING (4px base) ----------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* page margins — "at least 10% of the canvas" */ --page-margin: clamp(24px, 6vw, 96px); --content-max: 1200px; --reading-max: 640px; /* ----------- RADII ----------- */ /* Quiet, modest. The brand has a calm structure, not pillowy chips. */ --r-1: 2px; /* hairline */ --r-2: 4px; /* inputs, small cards */ --r-3: 8px; /* default card */ --r-4: 16px; /* feature card */ --r-pill: 999px; --r-circle: 50%; /* ----------- ELEVATION ----------- */ /* Restrained. Shadows are warm (forest-tinted), never grey-black. */ --shadow-1: 0 1px 2px rgba(31,61,58,0.04), 0 1px 1px rgba(31,61,58,0.03); --shadow-2: 0 4px 14px rgba(31,61,58,0.06), 0 1px 2px rgba(31,61,58,0.04); --shadow-3: 0 12px 32px rgba(31,61,58,0.08), 0 2px 6px rgba(31,61,58,0.04); --shadow-inset: inset 0 0 0 1px var(--border); /* ----------- MOTION ----------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* settle, slow finish */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 140ms; --d-base: 220ms; --d-slow: 420ms; } /* ============================================================ Base ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--apricot); color: var(--cream); } /* ============================================================ Typography — semantic ============================================================ */ .display, h1.display { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 50; font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg); margin: 0; } h1 { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 50; font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg); margin: 0 0 var(--s-4); } h2 { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 50; font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg); margin: 0 0 var(--s-3); } h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg); margin: 0 0 var(--s-2); } p { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--s-4); color: var(--fg); text-wrap: pretty; } .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg); } .serif-lead { font-family: var(--font-serif); font-variation-settings: 'opsz' 36, 'SOFT' 0; font-weight: 400; font-size: var(--fs-lead); line-height: 1.55; } .caption { font-size: var(--fs-caption); font-style: italic; color: var(--fg-muted); line-height: 1.5; } .eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--apricot); display: inline-block; } .small { font-size: var(--fs-small); } a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--apricot); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); } a:hover { text-decoration-color: var(--forest); } hr, .rule { border: 0; height: 1px; background: var(--rule); margin: var(--s-5) 0; } .rule-apricot { border: 0; height: 2px; background: var(--apricot); margin: var(--s-5) 0; } /* the signature opener: eyebrow + headline + wheat rule */ .section-opener { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-7); } .section-opener .rule { width: 56px; margin: var(--s-2) 0 0; }