/* ========================================================================= HArtfull IQ — Colors & Type ------------------------------------------------------------------------- Warm editorial register. Literary journal, not tech dashboard. NO pure black, NO pure white, NO dark backgrounds. ========================================================================= */ /* ---- Webfonts ---------------------------------------------------------- All three families load from Google Fonts (no local files required). -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;700&display=swap'); :root { /* ---- Color Tokens --------------------------------------------------- Base palette (freely used) --------------------------------------------------------------------- */ --hiq-cream: #FAF7F2; /* Soft Cream — default background */ --hiq-charcoal: #2B2B2B; /* Deep Charcoal — primary text */ --hiq-slate: #7D8B8F; /* Slate Gray — dividers, secondary */ /* Accents — use sparingly, never together in same component */ --hiq-blush: #D9A5A5; /* Dusty Blush — human-impact, quotes */ --hiq-gold: #DCB25D; /* Muted Gold — system/strategy emphasis */ /* Derived tonal steps — still warm, still editorial. Kept to oklch for predictability on print/screen. */ --hiq-cream-deep: #F2EDE4; /* Tinted cream — section bands */ --hiq-cream-warm: #EFE8DB; /* Slightly warmer — callout boxes */ --hiq-slate-soft: #C7CDCF; /* Muted slate — rules, hairlines */ --hiq-slate-faint: #E2E5E6; /* Very faint slate — input borders */ --hiq-blush-soft: #EED5D5; /* Tinted blush — quote grounds */ --hiq-gold-soft: #F1DFB9; /* Tinted gold — system callout ground */ /* ---- Semantic Foreground / Background ------------------------------ */ --hiq-bg: var(--hiq-cream); --hiq-bg-band: var(--hiq-cream-deep); /* alternating section */ --hiq-bg-inverse: var(--hiq-charcoal); /* commitment moments */ --hiq-fg: var(--hiq-charcoal); /* primary body */ --hiq-fg-muted: var(--hiq-slate); /* secondary, meta */ --hiq-fg-inverse: var(--hiq-cream); /* on dark grounds */ --hiq-rule: var(--hiq-slate-soft); /* hairline dividers */ --hiq-border: #D9D4C9; /* card borders */ /* Accents — only use semantic variants in-context */ --hiq-accent-human: var(--hiq-blush); /* quotes / empathy */ --hiq-accent-system: var(--hiq-gold); /* system / metrics */ /* ---- Type families ------------------------------------------------- */ --hiq-font-serif: 'Libre Baskerville', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --hiq-font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --hiq-font-mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', monospace; /* ---- Type scale — editorial, generous ------------------------------ Homepage hero headlines: 56–72px on desktop. Body comfortable at 17–18px (longer-read register). --------------------------------------------------------------------- */ --hiq-size-display: clamp(3rem, 5.5vw, 4.5rem); /* 48–72px — page heroes */ --hiq-size-h1: clamp(2.25rem, 3.6vw, 3rem); /* 36–48px */ --hiq-size-h2: clamp(1.75rem, 2.6vw, 2.25rem);/* 28–36px */ --hiq-size-h3: 1.375rem; /* 22px */ --hiq-size-h4: 1.125rem; /* 18px */ --hiq-size-body-lg: 1.125rem; /* 18px — lede */ --hiq-size-body: 1rem; /* 16px */ --hiq-size-small: 0.9375rem; /* 15px — captions */ --hiq-size-micro: 0.75rem; /* 12px — eyebrows */ /* Line heights, weights, tracking */ --hiq-lh-display: 1.08; --hiq-lh-heading: 1.18; --hiq-lh-body: 1.65; --hiq-lh-tight: 1.35; --hiq-weight-regular: 400; --hiq-weight-medium: 500; --hiq-weight-semibold: 600; --hiq-weight-bold: 700; --hiq-tracking-eyebrow: 0.14em; /* mono caps labels */ --hiq-tracking-tight: -0.01em; /* large display type */ /* ---- Spacing — editorial scale, generous --------------------------- */ --hiq-space-1: 4px; --hiq-space-2: 8px; --hiq-space-3: 12px; --hiq-space-4: 16px; --hiq-space-5: 24px; --hiq-space-6: 32px; --hiq-space-7: 48px; --hiq-space-8: 64px; --hiq-space-9: 96px; --hiq-space-10: 128px; /* hero breathing room */ /* ---- Radius — editorial is largely flat; cards barely round -------- */ --hiq-radius-sm: 2px; --hiq-radius-md: 4px; --hiq-radius-lg: 8px; --hiq-radius-pill: 999px; /* ---- Elevation — shadows are SOFT and RARE. Editorial leans flat. -- */ --hiq-shadow-none: none; --hiq-shadow-soft: 0 1px 2px rgba(43, 43, 43, 0.04), 0 2px 8px rgba(43, 43, 43, 0.04); --hiq-shadow-card: 0 1px 2px rgba(43, 43, 43, 0.05), 0 8px 24px rgba(43, 43, 43, 0.05); --hiq-shadow-lift: 0 4px 12px rgba(43, 43, 43, 0.06), 0 12px 32px rgba(43, 43, 43, 0.08); /* ---- Layout / container -------------------------------------------- */ --hiq-container: 1200px; /* max width of primary content */ --hiq-container-read: 720px; /* long-form reading width */ --hiq-gutter: 24px; /* ---- Motion — measured, not bouncy --------------------------------- */ --hiq-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* calm ease-out */ --hiq-ease-in: cubic-bezier(0.42, 0, 0.58, 1); --hiq-dur-fast: 150ms; --hiq-dur-base: 220ms; --hiq-dur-slow: 420ms; } /* ========================================================================= Semantic element styles These are safe defaults — components can still override. ========================================================================= */ html, body { background: var(--hiq-bg); color: var(--hiq-fg); font-family: var(--hiq-font-sans); font-size: var(--hiq-size-body); line-height: var(--hiq-lh-body); font-weight: var(--hiq-weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headlines ALWAYS Libre Baskerville. Tight leading on display. */ h1, h2, h3, h4, h5, h6, .hiq-display, .hiq-h1, .hiq-h2, .hiq-h3, .hiq-h4 { font-family: var(--hiq-font-serif); color: var(--hiq-fg); font-weight: var(--hiq-weight-bold); line-height: var(--hiq-lh-heading); letter-spacing: var(--hiq-tracking-tight); text-wrap: balance; margin: 0; } .hiq-display { font-size: var(--hiq-size-display); line-height: var(--hiq-lh-display); letter-spacing: -0.015em; } h1, .hiq-h1 { font-size: var(--hiq-size-h1); } h2, .hiq-h2 { font-size: var(--hiq-size-h2); } h3, .hiq-h3 { font-size: var(--hiq-size-h3); font-weight: var(--hiq-weight-bold); } h4, .hiq-h4 { font-size: var(--hiq-size-h4); font-weight: var(--hiq-weight-bold); } /* Italic serif is the editorial subhead register */ .hiq-subhead { font-family: var(--hiq-font-serif); font-style: italic; font-weight: var(--hiq-weight-regular); font-size: var(--hiq-size-h3); color: var(--hiq-fg-muted); line-height: var(--hiq-lh-tight); letter-spacing: normal; } /* Body copy */ p, .hiq-body { font-family: var(--hiq-font-sans); font-size: var(--hiq-size-body); line-height: var(--hiq-lh-body); color: var(--hiq-fg); text-wrap: pretty; margin: 0 0 1em; } .hiq-lede { font-size: var(--hiq-size-body-lg); line-height: 1.6; color: var(--hiq-fg); } .hiq-small { font-size: var(--hiq-size-small); line-height: 1.55; color: var(--hiq-fg-muted); } /* Eyebrow labels — always mono, uppercase, tracked */ .hiq-eyebrow { font-family: var(--hiq-font-mono); font-size: var(--hiq-size-micro); font-weight: var(--hiq-weight-medium); text-transform: uppercase; letter-spacing: var(--hiq-tracking-eyebrow); color: var(--hiq-fg-muted); } /* Mono — metrics, system callouts, numerical tags */ code, kbd, samp, pre, .hiq-mono { font-family: var(--hiq-font-mono); font-size: 0.9375em; } .hiq-metric { font-family: var(--hiq-font-mono); font-weight: var(--hiq-weight-medium); font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -0.02em; color: var(--hiq-fg); line-height: 1; } /* Blockquote — editorial pull-quote */ blockquote, .hiq-quote { font-family: var(--hiq-font-serif); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.35; color: var(--hiq-fg); border-left: 2px solid var(--hiq-accent-human); padding-left: var(--hiq-space-5); margin: var(--hiq-space-7) 0; max-width: 40ch; } /* Links — charcoal underlined, not blue. Underline on rest, offset for grace */ a, .hiq-link { color: var(--hiq-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--hiq-slate); transition: color var(--hiq-dur-base) var(--hiq-ease), text-decoration-color var(--hiq-dur-base) var(--hiq-ease); } a:hover, .hiq-link:hover { color: var(--hiq-charcoal); text-decoration-color: var(--hiq-charcoal); } hr, .hiq-rule { border: none; border-top: 1px solid var(--hiq-rule); margin: var(--hiq-space-7) 0; } /* Selection — warm, on-brand */ ::selection { background: var(--hiq-blush-soft); color: var(--hiq-charcoal); }