/* cltho-tokens.css CLTHO — Co-Living To HOmeownership Shared brand tokens. Every coded embed imports this file. Source of truth for color/type/spacing lives in CLAUDE.md. Fonts: load Inter + JetBrains Mono via cltho-fonts.html in the host . */ :root { /* ---------- Color (extracted from ASRE logo — do not substitute) ---------- */ --cltho-navy: #0D5288; /* headlines, primary text, dark sections */ --cltho-brand-blue: #276BA1; /* buttons, links, accents */ --cltho-leaf-green: #8EC445; /* RESERVED — graduation / Launch moments only */ --cltho-green-deep: #76AE36; /* green hover / shadow */ --cltho-sky-tint: #6D95C0; /* secondary fills, dividers */ --cltho-sky-light: #AAD3ED; /* soft section backgrounds */ --cltho-paper: #F5F8F3; /* page background */ --cltho-ink: #14202E; /* body copy on light */ --cltho-ink-soft: #3A4A5C; /* secondary body copy */ --cltho-line: rgba(13, 32, 46, 0.12); /* Semantic aliases */ --cltho-bg: var(--cltho-paper); --cltho-bg-dark: var(--cltho-navy); --cltho-text: var(--cltho-ink); --cltho-text-on-dark: var(--cltho-paper); --cltho-link: var(--cltho-brand-blue); --cltho-accent-graduate: var(--cltho-leaf-green); /* ---------- Type ---------- */ --cltho-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --cltho-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --cltho-font-display: 'Inter', system-ui, sans-serif; /* Inter 800 carries display until a real display face is licensed */ /* Fluid type scale */ --cltho-text-xs: 0.75rem; /* 12 */ --cltho-text-sm: 0.875rem; /* 14 */ --cltho-text-base: 1rem; /* 16 */ --cltho-text-lg: 1.125rem; /* 18 */ --cltho-text-xl: clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem); /* 20→24 */ --cltho-text-2xl: clamp(1.5rem, 1rem + 2vw, 2rem); /* 24→32 */ --cltho-text-3xl: clamp(1.75rem, 1rem + 3vw, 2.75rem); /* 28→44 */ --cltho-text-4xl: clamp(2.25rem, 1rem + 5vw, 4rem); /* 36→64 */ --cltho-text-5xl: clamp(2.75rem, 1rem + 7vw, 5.5rem); /* 44→88 */ --cltho-leading-tight: 1.1; --cltho-leading-snug: 1.25; --cltho-leading-normal: 1.5; --cltho-leading-loose: 1.7; --cltho-tracking-tight: -0.02em; --cltho-tracking-base: 0; --cltho-tracking-wide: 0.04em; --cltho-tracking-eyebrow: 0.14em; /* ---------- Spacing (4pt base) ---------- */ --cltho-space-1: 0.25rem; --cltho-space-2: 0.5rem; --cltho-space-3: 0.75rem; --cltho-space-4: 1rem; --cltho-space-5: 1.5rem; --cltho-space-6: 2rem; --cltho-space-7: 3rem; --cltho-space-8: 4rem; --cltho-space-9: 6rem; --cltho-space-10: 8rem; /* ---------- Radii ---------- */ --cltho-radius-sm: 4px; --cltho-radius-md: 8px; --cltho-radius-lg: 14px; --cltho-radius-pill: 999px; /* ---------- Shadows (navy-tinted, not gray) ---------- */ --cltho-shadow-sm: 0 1px 2px rgba(13, 82, 136, 0.08); --cltho-shadow-md: 0 4px 12px rgba(13, 82, 136, 0.10); --cltho-shadow-lg: 0 12px 32px rgba(13, 82, 136, 0.14); --cltho-shadow-graduate: 0 6px 18px rgba(142, 196, 69, 0.30); /* green — Launch moments only */ /* ---------- Motion ---------- */ --cltho-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --cltho-duration-fast: 140ms; --cltho-duration-base: 240ms; --cltho-duration-slow: 420ms; /* ---------- Layout ---------- */ --cltho-container: 1120px; --cltho-container-narrow: 720px; /* ---------- Step motif (door-with-upward-step from the logo) ---------- */ --cltho-step-color: var(--cltho-sky-tint); } @media (prefers-reduced-motion: reduce) { :root { --cltho-duration-fast: 0ms; --cltho-duration-base: 0ms; --cltho-duration-slow: 0ms; } } /* ---------- Base ---------- */ .cltho, .cltho * { box-sizing: border-box; } .cltho { font-family: var(--cltho-font-body); color: var(--cltho-text); background: var(--cltho-bg); line-height: var(--cltho-leading-normal); font-size: var(--cltho-text-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .cltho a { color: var(--cltho-link); text-underline-offset: 0.2em; } .cltho :focus-visible { outline: 2px solid var(--cltho-brand-blue); outline-offset: 3px; border-radius: 2px; } /* ---------- Typography ---------- */ .cltho-display { font-family: var(--cltho-font-display); font-weight: 800; font-size: var(--cltho-text-5xl); line-height: var(--cltho-leading-tight); letter-spacing: var(--cltho-tracking-tight); color: var(--cltho-navy); margin: 0; } .cltho-h1 { font-family: var(--cltho-font-display); font-weight: 800; font-size: var(--cltho-text-4xl); line-height: var(--cltho-leading-tight); letter-spacing: var(--cltho-tracking-tight); color: var(--cltho-navy); margin: 0; } .cltho-h2 { font-family: var(--cltho-font-display); font-weight: 700; font-size: var(--cltho-text-3xl); line-height: var(--cltho-leading-snug); letter-spacing: var(--cltho-tracking-tight); color: var(--cltho-navy); margin: 0; } .cltho-h3 { font-family: var(--cltho-font-body); font-weight: 700; font-size: var(--cltho-text-2xl); line-height: var(--cltho-leading-snug); color: var(--cltho-navy); margin: 0; } .cltho-eyebrow { font-family: var(--cltho-font-mono); font-weight: 500; font-size: var(--cltho-text-xs); text-transform: uppercase; letter-spacing: var(--cltho-tracking-eyebrow); color: var(--cltho-brand-blue); margin: 0; } .cltho-lede { font-size: var(--cltho-text-lg); line-height: var(--cltho-leading-loose); color: var(--cltho-ink-soft); max-width: 60ch; margin: 0; } /* The mono face does the heavy lifting on numbers — that's the design point. */ .cltho-data { font-family: var(--cltho-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cltho-navy); } .cltho-data--lg { font-family: var(--cltho-font-mono); font-weight: 700; font-size: var(--cltho-text-3xl); font-variant-numeric: tabular-nums; color: var(--cltho-navy); line-height: 1; } .cltho-data--xl { font-family: var(--cltho-font-mono); font-weight: 700; font-size: var(--cltho-text-4xl); font-variant-numeric: tabular-nums; color: var(--cltho-navy); line-height: 1; } /* Estimate badge — required by CLAUDE.md hard rule 1 (no invented numbers, every projection labeled). */ .cltho-estimate { display: inline-block; font-family: var(--cltho-font-mono); font-size: var(--cltho-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--cltho-tracking-eyebrow); color: var(--cltho-brand-blue); background: var(--cltho-sky-light); padding: 2px 8px; border-radius: var(--cltho-radius-sm); vertical-align: middle; } /* ---------- Buttons ---------- */ .cltho-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cltho-space-2); padding: var(--cltho-space-3) var(--cltho-space-5); font-family: var(--cltho-font-body); font-weight: 600; font-size: var(--cltho-text-base); line-height: 1; border-radius: var(--cltho-radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; background: var(--cltho-brand-blue); color: var(--cltho-paper); box-shadow: var(--cltho-shadow-sm); transition: transform var(--cltho-duration-fast) var(--cltho-ease), background var(--cltho-duration-fast) var(--cltho-ease), box-shadow var(--cltho-duration-fast) var(--cltho-ease), color var(--cltho-duration-fast) var(--cltho-ease); } .cltho-btn:hover { background: var(--cltho-navy); transform: translateY(-1px); box-shadow: var(--cltho-shadow-md); } .cltho-btn:active { transform: translateY(0); } /* Graduation CTA — RESERVED. Only on Launch / closing-table moments. */ .cltho-btn--graduate { background: var(--cltho-leaf-green); color: var(--cltho-navy); box-shadow: var(--cltho-shadow-graduate); } .cltho-btn--graduate:hover { background: var(--cltho-green-deep); color: var(--cltho-paper); } .cltho-btn--ghost { background: transparent; color: var(--cltho-navy); border-color: var(--cltho-navy); box-shadow: none; } .cltho-btn--ghost:hover { background: var(--cltho-navy); color: var(--cltho-paper); } .cltho-btn--lg { padding: var(--cltho-space-4) var(--cltho-space-6); font-size: var(--cltho-text-lg); } .cltho-btn--sm { padding: var(--cltho-space-2) var(--cltho-space-4); font-size: var(--cltho-text-sm); } /* ---------- Cards ---------- */ .cltho-card { background: var(--cltho-paper); border: 1px solid var(--cltho-line); border-radius: var(--cltho-radius-lg); padding: var(--cltho-space-6); box-shadow: var(--cltho-shadow-sm); } .cltho-card--soft { background: var(--cltho-sky-light); border: none; } /* ---------- Honest-realism band (SIGNATURE — required by CLAUDE.md rule 2) ---------- */ .cltho-realism { position: relative; background: var(--cltho-navy); color: var(--cltho-paper); padding: var(--cltho-space-7) var(--cltho-space-6) var(--cltho-space-7) var(--cltho-space-7); border-radius: var(--cltho-radius-lg); overflow: hidden; } .cltho-realism::before { content: ""; position: absolute; top: 0; left: 0; width: var(--cltho-space-3); height: 100%; background: var(--cltho-leaf-green); } .cltho-realism::after { content: "Real talk"; position: absolute; top: var(--cltho-space-4); right: var(--cltho-space-5); font-family: var(--cltho-font-mono); font-size: var(--cltho-text-xs); font-weight: 500; letter-spacing: var(--cltho-tracking-eyebrow); text-transform: uppercase; color: var(--cltho-leaf-green); } .cltho-realism .cltho-h3 { color: var(--cltho-paper); margin: 0 0 var(--cltho-space-3) 0; max-width: 50ch; } .cltho-realism p { color: var(--cltho-sky-light); margin: 0; max-width: 56ch; line-height: var(--cltho-leading-loose); } /* ---------- Step motif (Match → Land → Build → Launch, encoded as a stair) ---------- */ .cltho-step { display: flex; align-items: flex-end; gap: var(--cltho-space-1); height: 96px; } .cltho-step__riser { flex: 0 0 44px; background: var(--cltho-step-color); border-radius: 4px 4px 0 0; position: relative; } .cltho-step__riser--1 { height: 25%; } .cltho-step__riser--2 { height: 50%; } .cltho-step__riser--3 { height: 75%; } .cltho-step__riser--4 { height: 100%; background: var(--cltho-leaf-green); box-shadow: var(--cltho-shadow-graduate); } /* ---------- Layout ---------- */ .cltho-container { width: 100%; max-width: var(--cltho-container); margin: 0 auto; padding-inline: var(--cltho-space-5); } .cltho-container--narrow { max-width: var(--cltho-container-narrow); } .cltho-section { padding-block: var(--cltho-space-9); } .cltho-section--dark { background: var(--cltho-navy); color: var(--cltho-paper); } .cltho-section--soft { background: var(--cltho-sky-light); } .cltho-section--dark .cltho-h1, .cltho-section--dark .cltho-h2, .cltho-section--dark .cltho-h3, .cltho-section--dark .cltho-display { color: var(--cltho-paper); } .cltho-section--dark .cltho-lede { color: var(--cltho-sky-light); } /* ---------- Utilities ---------- */ .cltho-stack > * + * { margin-top: var(--cltho-space-4); } .cltho-stack--lg > * + * { margin-top: var(--cltho-space-6); } .cltho-row { display: flex; flex-wrap: wrap; gap: var(--cltho-space-4); align-items: center; } .cltho-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }