/* ============================================================
TELOS COUNSELING — Color & Type Foundations
McKaley Jackson, MS, LPC · Lubbock, TX
------------------------------------------------------------
A warm-but-cool, editorial "soft & serene" system: deep
grounding pine, muted sage, dusty harbor blue, cream/sand,
with a sparing muted-lavender accent. Elegant serif display
(Newsreader) over a clean humanist sans (Hanken Grotesk).
Load the brand fonts before this file:
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
:root {
/* ---------- BRAND & ACCENT ---------- */
--pine: #264C48; /* primary — deep grounding forest/teal green */
--pine-deep: #1C3B38; /* darkest band / pressed states */
--pine-soft: #345B56; /* hover on pine surfaces */
--sage: #779389; /* muted living green — secondary brand */
--sage-soft: #A4B8B1; /* lighter sage for borders/icons on light */
--harbor: #5F7E92; /* dusty serene blue — links & secondary accent */
--harbor-deep: #3F5D6E; /* deeper blue for text-on-light links */
--lavender: #B1ABCB; /* pale, soft dusty lavender — sparing cool editorial accent */
--lavender-soft: #D8D4E8; /* very pale lavender for chip borders / details */
--lavender-deep: #645E8C; /* deeper lavender for accent text on light */
--lavender-wash: #F1EFF8; /* palest lavender chip / detail fill */
--mist: #C0CCCA; /* soft cool grey-green decorative line / pattern tone */
/* ---------- SURFACE & BACKGROUND ---------- */
--canvas: #F7F2EA; /* dominant warm cream page background */
--surface: #FFFFFF; /* cards, forms, raised surfaces */
--sand: #ECE3D4; /* deeper warm neutral block / placeholder */
--sage-wash: #E5EDEB; /* pale green section backdrop */
--harbor-wash: #E7EDF1; /* pale blue section backdrop */
--card-border: #F0E9DC; /* softest card containment line */
/* ---------- TEXT & RULES ---------- */
--ink: #2C2A26; /* default body + headline text on light */
--ink-2: #514D45; /* strong secondary text */
--slate: #6E6A62; /* muted metadata, captions, footer links */
--slate-soft: #908B80; /* de-emphasized / placeholder text */
--hairline: #E3DACA; /* standard warm divider / list rule */
--border-soft: #DCD3C3; /* secondary utility border */
/* ---------- ON-DARK (pine bands) ---------- */
--on-pine: #F4EFE6; /* primary text on pine */
--on-pine-muted: #B5C8C2; /* muted text on pine */
--on-pine-border: rgba(244,239,230,0.18); /* hairline on pine */
--on-pine-fill: rgba(244,239,230,0.06); /* translucent card on pine */
/* ---------- SEMANTIC ---------- */
--success: #4A7A65;
--error: #A8553F; /* muted brick — validation */
--error-bg: #F6E7E0;
--focus: #5F7E92; /* keyboard focus ring (harbor) */
--focus-ring: 0 0 0 3px rgba(95,126,146,0.35);
/* ============================================================
TYPE — families
============================================================ */
--font-display: "Newsreader", "Spectral", Georgia, "Times New Roman", serif;
--font-sans: "Hanken Grotesk", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-label: "Hanken Grotesk", "Mulish", -apple-system, sans-serif; /* used uppercase + tracked */
/* ---------- type scale (px) ---------- */
--fs-display: 72px; /* hero declaration */
--fs-h1: 54px;
--fs-h2: 40px;
--fs-h3: 30px;
--fs-h4: 23px;
--fs-lead: 20px; /* lead paragraph */
--fs-body: 17px; /* default copy */
--fs-sm: 15px;
--fs-label: 13px; /* uppercase tracked label */
--fs-micro: 12px;
/* ---------- weights ---------- */
--w-reg: 400; /* @kind font */
--w-med: 500; /* @kind font */
--w-semi: 600; /* @kind font */
--w-bold: 700; /* @kind font */
/* ============================================================
SPACING — 8px base with editorial one-offs
============================================================ */
--s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px;
--s-10: 10px; --s-12: 12px; --s-16: 16px; --s-20: 20px;
--s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px;
--s-56: 56px; --s-64: 64px; --s-80: 80px; --s-96: 96px;
--s-128: 128px;
/* ---------- radii (soft, generous) ---------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px; /* signature card / media radius */
--r-xl: 32px;
--r-pill: 999px;
/* ---------- elevation (very soft, warm-tinted) ---------- */
--shadow-sm: 0 1px 2px rgba(44,42,38,0.04), 0 1px 3px rgba(44,42,38,0.05);
--shadow-md: 0 6px 18px rgba(44,42,38,0.07), 0 2px 6px rgba(44,42,38,0.05);
--shadow-lg: 0 18px 48px rgba(44,42,38,0.10), 0 6px 16px rgba(44,42,38,0.06);
/* ---------- motion ---------- */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--dur: 280ms; /* @kind other */
--maxw: 1200px; /* content container */
}
/* ============================================================
SEMANTIC ELEMENT STYLES
Apply .telos-type to a wrapper, or copy these rules.
============================================================ */
.telos-type {
font-family: var(--font-sans);
color: var(--ink);
font-size: var(--fs-body);
line-height: 1.6;
font-weight: var(--w-reg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.telos-type h1, .display, .telos-type .display {
font-family: var(--font-display);
font-weight: var(--w-reg);
font-size: var(--fs-display);
line-height: 1.04;
letter-spacing: -0.018em;
color: var(--ink);
text-wrap: balance;
}
.telos-type h2 {
font-family: var(--font-display);
font-weight: var(--w-reg);
font-size: var(--fs-h2);
line-height: 1.1;
letter-spacing: -0.012em;
color: var(--ink);
text-wrap: balance;
}
.telos-type h3 {
font-family: var(--font-display);
font-weight: var(--w-reg);
font-size: var(--fs-h3);
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--ink);
}
.telos-type h4 {
font-family: var(--font-sans);
font-weight: var(--w-semi);
font-size: var(--fs-h4);
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--ink);
}
.telos-type .lead, .telos-type p.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ink-2);
}
.telos-type p {
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink-2);
margin: 0 0 1em;
text-wrap: pretty;
}
.telos-type a { color: var(--harbor-deep); text-underline-offset: 3px; }
/* Display italic — used for emphasis words inside headlines */
.display em, .telos-type h1 em, .telos-type h2 em {
font-style: italic;
font-weight: var(--w-reg);
}
/* Uppercase tracked label / eyebrow */
.label, .eyebrow {
font-family: var(--font-label);
font-weight: var(--w-semi);
font-size: var(--fs-label);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sage);
}
.caption {
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: 1.45;
color: var(--slate);
}