/* ─────────────────────────────────────────────────────────────
TIME TO BUILD — colors + type
Source: dist/index.html on tomnoske567/Time-to-Build-Landing-Page
Brand book: evergreen + gold + cream. Blunt, direct, confident.
───────────────────────────────────────────────────────────── */
/* ── Font faces (TTFs live in ./fonts/) ───────────────────── */
@font-face{font-family:'Moderat Mono';src:url('./fonts/Moderat-Mono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Moderat Mono';src:url('./fonts/Moderat-Mono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('./fonts/WorkSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('./fonts/WorkSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('./fonts/WorkSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('./fonts/WorkSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Playfair Display Italic is fetched from Google Fonts in any page
that uses it — add this to :
*/
:root{
/* ── Core palette ─────────────────────────────────────── */
--ttb-bg: #f5f0e7; /* primary background — warm cream */
--ttb-bg-alt: #ede8dd; /* tonal alt section background */
--ttb-evergreen: #173d36; /* primary brand */
--ttb-evergreen-deep:#0f2b26; /* hover + deep sections */
--ttb-evergreen-x: #0b1413; /* 'wall of love' near-black green */
--ttb-gold: #b49678; /* secondary — italics, pills, labels */
--ttb-gold-hover: #c8a88a;
--ttb-gold-light: rgba(180,150,120,0.12);
--ttb-stone-sage: #bac2bc; /* accent — use sparingly. Brandbook Section 03. */
--ttb-sage: #bac2bc; /* alias kept for back-compat with older preview HTML */
--ttb-asphalt: #141414; /* secondary — near-black for contrast buttons (brandbook canonical) */
--ttb-white: #ffffff;
/* ── Text ─────────────────────────────────────────────── */
--ttb-text: #2f3437;
--ttb-text-secondary:#787774;
--ttb-text-muted: rgba(47,52,55,0.4);
/* ── Lines ────────────────────────────────────────────── */
--ttb-border: #ddd8cd;
--ttb-border-hover: #c5bfb3;
/* ── Status ───────────────────────────────────────────── */
--ttb-live: #00df70; /* green 'live' dot */
--ttb-idle: #ff3636; /* red idle dot */
--ttb-error: #9f2f2d; /* "this is not for you" red */
--ttb-star: #f59e0b; /* review stars */
/* ── Type families ────────────────────────────────────── */
--ttb-font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--ttb-font-serif: 'Playfair Display', Georgia, serif;
--ttb-font-sub: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* SAA retired; keep var alias for back-compat */
--ttb-font-mono: 'Moderat Mono', 'Courier New', monospace;
--ttb-font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
/* ── Layout ───────────────────────────────────────────── */
--ttb-max-w: 1200px;
--ttb-radius-sm: 4px;
--ttb-radius: 10px;
--ttb-radius-lg: 16px;
--ttb-radius-pill: 100px;
/* ── Shadows ──────────────────────────────────────────── */
--ttb-shadow-nav: 0 2px 20px rgba(0,0,0,0.06);
--ttb-shadow-card: 0 4px 20px rgba(0,0,0,0.04);
--ttb-shadow-btn: 0 2px 6px rgba(0,0,0,0.22);
--ttb-shadow-glow: 0 0 10px rgba(0,223,112,0.7);
/* ── Transitions ──────────────────────────────────────── */
--ttb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── Semantic type tokens ──────────────────────────────────
How to read: class names match the roles used in the
marketing site's source. Composite headlines stack .h-sans
(Helvetica Neue bold) with .h-serif (Playfair italic gold). */
.ttb-h1,
.ttb-hero-headline{
font-family:var(--ttb-font-display);
font-size:clamp(52px, 7vw, 96px);
font-weight:700;
line-height:1.02;
letter-spacing:-0.04em;
color:var(--ttb-evergreen);
}
.ttb-h2{
font-family:var(--ttb-font-display);
font-size:clamp(36px, 5vw, 56px);
font-weight:700;
line-height:1.08;
letter-spacing:-0.03em;
color:var(--ttb-evergreen);
}
.ttb-h3{
font-family:var(--ttb-font-display);
font-size:clamp(25px, 3.45vw, 32px);
font-weight:700;
line-height:1.15;
letter-spacing:-0.02em;
color:var(--ttb-evergreen);
}
.ttb-h4{
font-family:var(--ttb-font-display);
font-size:18px;
font-weight:700;
letter-spacing:-0.02em;
color:var(--ttb-asphalt);
}
/* Italic serif accent line — ALWAYS pairs with a sans line above
e.g. Build a brand
people actually follow */
.h-sans{
font-family:var(--ttb-font-display);
letter-spacing:-0.04em;
display:block;
}
.h-serif{
font-family:var(--ttb-font-serif);
font-style:italic;
font-weight:400;
letter-spacing:-0.02em;
display:block;
color:var(--ttb-gold);
}
/* Sub-header plates — short uppercase labels used on cards / column heads.
Helvetica Neue bold, tracked out. Replaces retired SAA Series E. */
.ttb-subhead{
font-family:var(--ttb-font-display);
font-size:14px;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--ttb-asphalt);
}
/* Pullquote — serif italic, evergreen. Mirrors the hero accent. */
.ttb-pullquote{
font-family:var(--ttb-font-serif);
font-style:italic;
font-weight:400;
font-size:24px;
letter-spacing:-0.01em;
line-height:1.35;
color:var(--ttb-evergreen);
}
/* Mono labels — section eyebrows, pills, timer units. ALWAYS
uppercase, tracked out, 10–12px. Colour varies: gold on green,
muted-ink on cream. */
.ttb-label-mono,
.label-mono{
font-family:var(--ttb-font-mono);
font-size:11px;
font-weight:500;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--ttb-gold);
}
/* Body */
.ttb-body,
.ttb-p{
font-family:var(--ttb-font-body);
font-size:18px;
line-height:1.65;
color:var(--ttb-text);
}
.ttb-p--lead{
font-size:17px;
line-height:1.75;
}
.ttb-p--sm{
font-size:15px;
line-height:1.65;
color:var(--ttb-text-secondary);
}
.ttb-p--xs{
font-size:13px;
color:var(--ttb-text-muted);
}
/* On dark-green sections, text inverts */
.ttb-on-dark,
.section--green{ color:rgba(245,240,231,0.75); }
.ttb-on-dark .ttb-h1,
.ttb-on-dark .ttb-h2,
.ttb-on-dark .ttb-h3{ color:var(--ttb-bg); }
.ttb-on-dark .h-serif{ color:var(--ttb-gold); } /* gold stays gold */
.ttb-on-dark .ttb-label-mono{ color:var(--ttb-gold); }