/* =========================================================================== Talentverse — Design Tokens (TOKEN CONTRACT) · V2 "Bold Contemporary Studio" --------------------------------------------------------------------------- Source of truth for the Talentverse landing page. US-03 consumes these tokens exclusively via var(). V2 replaces the V1 bronze/serif direction with the Bold Contemporary Studio palette Kaya approved (continuation of #4). Binding constraints (V2): - Midnight navy #233450 + near-black + off-white #FAFAFA + warm GOLD #e3b04a. - Gold is the SINGLE accent (from the real logo). NOT electric blue. - Headlines: Montserrat (oversized, confident). Body/UI: Inter. - WCAG AA: gold fails AA as small text on light — body text uses navy/slate; gold is reserved for large display accents, rules, eyebrows and icons. A deepened gold (--tv-gold-deep) is available for gold-as-text on light. Plain static site — no build step. Custom properties only; no preprocessor. Naming convention: --tv--. Stable names are part of the contract; downstream code should not hardcode raw hex values. =========================================================================== */ :root { /* ------------------------------------------------------------------------- 1. Brand color primitives (V2 — the only brand colors) ------------------------------------------------------------------------- */ --tv-navy: #233450; /* primary brand navy: dark sections, logo ground */ --tv-navy-deep: #182540; /* deepest navy: hero + footer ground */ --tv-navy-soft: #2b3d5e; /* lifted navy: cards on dark */ --tv-off-white: #fafafa; /* page ground (light sections) */ --tv-white: #ffffff; /* raised cards on the off-white ground */ --tv-gold: #e3b04a; /* single accent: CTAs, rules, eyebrows, icons. V2.3 #4: warmer/richer gold matching the real LinkedIn logo (was the cooler #d4af37). */ --tv-gold-soft: #efc874; /* hover wash / glow on dark (warm, lifted) */ --tv-gold-deep: #8c6a20; /* gold-as-text on light: warm deepened gold, 4.79:1 on #fafafa — clears WCAG AA (the prior #a8842a was only 3.35:1 and failed AA). */ /* ------------------------------------------------------------------------- 2. Derived neutral greys (cool slate, harmonized with navy — no new hues) Use for secondary text, borders, dividers, muted surfaces. ------------------------------------------------------------------------- */ --tv-slate: #64748b; /* secondary text on light (AA on off-white) */ --tv-slate-strong: #475569; /* stronger secondary text on light */ --tv-slate-light: #94a3b8; /* meta / muted text on dark */ --tv-line: #e7e9ee; /* hairline borders / dividers on light */ --tv-line-strong: #d4d8e0; /* stronger dividers on light */ --tv-placeholder: #aab2bf; /* input placeholder text */ /* On-dark hairlines derived from gold + white (low alpha) */ --tv-line-gold: rgba(227, 176, 74, 0.18); --tv-line-on-dark: rgba(255, 255, 255, 0.12); --tv-line-on-dark-strong: rgba(255, 255, 255, 0.24); /* ------------------------------------------------------------------------- 3. Semantic surface & text roles (theme-mapped; flip for dark sections) Default mapping = light/off-white ground (the page default). ------------------------------------------------------------------------- */ --tv-bg: var(--tv-off-white); --tv-bg-raised: var(--tv-white); /* cards lifted off the off-white ground */ --tv-bg-sunken: var(--tv-white); /* services band sits on white */ --tv-surface-dark: var(--tv-navy); /* inverted hero / why / footer */ --tv-text: var(--tv-navy); /* primary text on light */ --tv-text-muted: var(--tv-slate); /* secondary text on light */ --tv-text-subtle: var(--tv-slate-light);/* captions, meta */ --tv-text-on-dark: var(--tv-white); /* primary text on navy sections */ --tv-text-muted-on-dark: rgba(255, 255, 255, 0.74); --tv-accent: var(--tv-gold); --tv-accent-text: var(--tv-gold-deep); /* gold used as text on light (AA) */ --tv-border: var(--tv-line); --tv-border-strong: var(--tv-line-strong); --tv-rule: var(--tv-gold); /* editorial hairline rules */ --tv-focus-ring: var(--tv-gold-deep); /* visible focus on light (WCAG) */ /* ------------------------------------------------------------------------- 4. Typography — families (V2) Display: Montserrat (oversized, confident headlines). Body/UI: Inter. Self-hosted WOFF2 via assets/fonts.css (KVKK: zero Google runtime calls); stacks degrade to capable system fonts so the page still works offline. ------------------------------------------------------------------------- */ --tv-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", "Arial", sans-serif; --tv-font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Arial", sans-serif; /* Weights */ --tv-weight-light: 300; --tv-weight-regular: 400; --tv-weight-medium: 500; --tv-weight-semibold: 600; --tv-weight-bold: 700; --tv-weight-black: 800; /* Line heights & tracking (editorial: tight display, open body) */ --tv-leading-tight: 1.04; /* large display headlines */ --tv-leading-snug: 1.2; /* sub-headlines */ --tv-leading-normal: 1.65; /* body copy */ --tv-leading-relaxed: 1.75; /* long-form paragraphs */ --tv-tracking-tight: -0.015em; --tv-tracking-tighter: -0.03em; /* oversized display */ --tv-tracking-normal: 0; --tv-tracking-wide: 0.04em; --tv-tracking-caps: 0.16em; /* small-caps eyebrows / labels */ --tv-tracking-caps-wide: 0.22em; /* ------------------------------------------------------------------------- 5. Type scale — fluid display pairs for the oversized V2 headlines ------------------------------------------------------------------------- */ --tv-text-xs: 0.75rem; /* 12px — meta, legal, eyebrows */ --tv-text-sm: 0.875rem; /* 14px — captions, labels */ --tv-text-base: 1rem; /* 16px — body */ --tv-text-md: 1.125rem; /* 18px — lead paragraph */ --tv-text-lg: 1.25rem; /* 20px — small heading */ --tv-text-xl: 1.5rem; /* 24px — card heading */ /* Fluid display pairs (min / preferred / max) */ --tv-display-hero: clamp(2.3rem, 1.47rem + 4.05vw, 4.5rem); /* 37 → 72px (~8% smaller) */ --tv-display-section: clamp(1.875rem, 1.2rem + 2.6vw, 2.875rem); /* 30 → 46px */ --tv-display-card: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* ------------------------------------------------------------------------- 6. Spacing scale — base 0.25rem (4px) ------------------------------------------------------------------------- */ --tv-space-0: 0; --tv-space-1: 0.25rem; /* 4px */ --tv-space-2: 0.5rem; /* 8px */ --tv-space-3: 0.75rem; /* 12px */ --tv-space-4: 1rem; /* 16px */ --tv-space-5: 1.5rem; /* 24px */ --tv-space-6: 2rem; /* 32px */ --tv-space-7: 3rem; /* 48px */ --tv-space-8: 4rem; /* 64px */ --tv-space-9: 6rem; /* 96px */ --tv-space-10: 9rem; /* 144px */ /* Fluid section padding-block + horizontal gutter. V2.1 (continuation #4): section-y tightened ~30% from the original 88→144px so sections read breathable but less empty. */ --tv-section-y: clamp(3.75rem, 7.5vw, 6.25rem); /* 60 → 100px */ --tv-gutter: clamp(1.5rem, 5vw, 5rem); /* 24 → 80px */ /* ------------------------------------------------------------------------- 7. Layout, radii, borders, shadows, motion ------------------------------------------------------------------------- */ --tv-content-max: 77.5rem; /* 1240px — main content width */ --tv-measure: 38rem; /* readable paragraph max-width */ --tv-radius-sm: 2px; /* V2 is architectural — minimal radii */ --tv-radius-md: 4px; --tv-radius-lg: 6px; --tv-radius-pill: 999px; --tv-border-width: 1px; --tv-border-width-strong: 2px; /* Shadows (tinted toward navy, not neutral black — premium depth) */ --tv-shadow-sm: 0 1px 2px rgba(35, 52, 80, 0.06); --tv-shadow-md: 0 6px 20px -6px rgba(35, 52, 80, 0.14); --tv-shadow-lg: 0 40px 90px -50px rgba(35, 52, 80, 0.3); --tv-shadow-gold: 0 14px 34px -12px rgba(227, 176, 74, 0.55); /* Motion (respect prefers-reduced-motion below) */ --tv-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --tv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --tv-duration-fast: 200ms; --tv-duration-base: 350ms; --tv-duration-slow: 800ms; /* Z-index scale */ --tv-z-base: 0; --tv-z-raised: 10; --tv-z-sticky: 100; --tv-z-overlay: 1000; } /* --------------------------------------------------------------------------- Dark-section helper: opt in with class="tv-on-dark" (hero, why, footer). Flips semantic text/surface roles to the inverted navy ground without touching the brand primitives. --------------------------------------------------------------------------- */ .tv-on-dark { --tv-bg: var(--tv-navy); --tv-bg-raised: var(--tv-navy-soft); --tv-bg-sunken: var(--tv-navy-deep); --tv-text: var(--tv-white); --tv-text-muted: var(--tv-text-muted-on-dark); --tv-text-subtle: var(--tv-slate-light); --tv-accent-text: var(--tv-gold); /* gold IS legible as text on navy */ --tv-border: var(--tv-line-on-dark); --tv-border-strong: var(--tv-line-on-dark-strong); --tv-focus-ring: var(--tv-gold-soft); } /* Reduced-motion: zero out durations so token consumers inherit safe defaults */ @media (prefers-reduced-motion: reduce) { :root { --tv-duration-fast: 0ms; --tv-duration-base: 0ms; --tv-duration-slow: 0ms; } }