/* ============================================================================ tokens.css — theTailorCV design tokens (SINGLE SOURCE OF TRUTH) Loaded site-wide via _seo_head.html. Defining variables is inert until used, so this file changes nothing on its own — components opt in by switching a hard-coded value to the matching var(). Roll out incrementally & verified. Deliverable #1 (both briefs): one documented color + status + type system. ========================================================================== */ :root { /* ── Surface / background ─────────────────────────────────────────────── */ --tc-bg-1: #030014; /* darkest — use on to kill white flash */ --tc-bg-2: #06002a; --tc-bg-3: #0a0a2e; --tc-bg-4: #001830; --tc-bg-gradient: linear-gradient(135deg, #030014, #06002a, #0a0a2e, #001830); /* ── Accent gradients ─────────────────────────────────────────────────── */ --tc-accent-from: #3b82f6; /* blue */ --tc-accent-to: #22d3ee; /* cyan */ --tc-accent-gradient: linear-gradient(135deg, #3b82f6, #22d3ee); /* PRIMARY intent */ --tc-secondary: #7c3aed; /* violet — SECONDARY / brand CTA intent */ --tc-secondary-gradient: linear-gradient(135deg, #6d28d9, #8b5cf6); /* ── Status color map (ONE source for ATS pills + My-Resumes badges) ───── */ --tc-pass: #22c55e; --tc-pass-bg: rgba(34,197,94,.14); --tc-pass-border: rgba(34,197,94,.45); /* pass / OK / saved-ok */ --tc-fail: #ef4444; --tc-fail-bg: rgba(239,68,68,.14); --tc-fail-border: rgba(239,68,68,.45); /* fail / fix / rejected */ --tc-warn: #f59e0b; --tc-warn-bg: rgba(245,158,11,.14); --tc-warn-border: rgba(245,158,11,.45); /* gap / warning */ --tc-info: #38bdf8; --tc-info-bg: rgba(56,189,248,.14); --tc-info-border: rgba(56,189,248,.45); /* applied / interview / neutral */ --tc-success: var(--tc-pass); /* checkmarks */ /* ── Text tiers (all WCAG AA on the dark background) ──────────────────── */ --tc-text-1: #eef4ff; /* primary headings (~16:1) */ --tc-text-2: #cdd9f0; /* body (~11:1) */ --tc-text-3: #9db4de; /* muted (AA-safe floor) (~7:1) */ /* ── Type ─────────────────────────────────────────────────────────────── */ --tc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tc-font-serif: Georgia, 'Times New Roman', 'DM Serif Display', serif; /* editorial — final face TBD */ /* RULE (owner-approved): serif = editorial/brand (home section titles, About, blog, legal, auth headings); sans = product landing heroes AND the whole logged-in app surface. Applied via .tc-editorial (serif) opt-in class. */ /* ── Motion ───────────────────────────────────────────────────────────── */ --tc-ease: cubic-bezier(.22, .61, .36, 1); /* one house entrance curve */ --tc-dur-micro: .15s; /* hover / press (brief: 150ms) */ --tc-dur-ui: .3s; /* UI transitions (brief: 250–350ms) */ --tc-dur-entrance: .5s; /* view/content entrances */ --tc-dur-hero: .65s; /* hero moments (brief: 500–700ms) */ /* ── Brand gradient (brief spec) — canonical for ALL primary CTAs ──────── */ --tc-brand-from: #3b82f6; /* blue */ --tc-brand-to: #8b5cf6; /* violet */ --tc-brand-gradient: linear-gradient(135deg, var(--tc-brand-from), var(--tc-brand-to)); --tc-link: #60a5fa; /* single accent-blue for links/highlights */ /* ── Surface elevation (brief: base → elevated card) ──────────────────── */ --tc-surface-base: #0a0e1a; --tc-surface-card: #141a2e; --tc-card-border: rgba(255, 255, 255, .08); /* 1px hairline */ --tc-card-glow: inset 0 1px 0 rgba(255, 255, 255, .05); /* subtle inner glow */ --tc-card-shadow: 0 8px 30px rgba(0, 0, 0, .35); --tc-card-shadow-lift: 0 16px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(96, 165, 250, .25); /* hover glow */ /* ── Radius scale ─────────────────────────────────────────────────────── */ --tc-r-sm: 8px; --tc-r-md: 12px; --tc-r-lg: 16px; --tc-r-xl: 20px; --tc-r-pill: 999px; /* ── Spacing — 8px grid ───────────────────────────────────────────────── */ --tc-s-1: 4px; --tc-s-2: 8px; --tc-s-3: 12px; --tc-s-4: 16px; --tc-s-5: 24px; --tc-s-6: 32px; --tc-s-8: 48px; --tc-s-10: 64px; /* ── Type scale (keep bold heroes; standardize weight + line-height) ───── */ --tc-fs-hero: clamp(2.4rem, 5vw, 3.6rem); --tc-fs-h1: 2rem; --tc-fs-h2: 1.5rem; --tc-fs-h3: 1.25rem; --tc-fs-body: 1rem; --tc-fs-sm: .875rem; --tc-lh-tight: 1.12; --tc-lh-snug: 1.3; --tc-lh-normal: 1.6; --tc-fw-hero: 800; --tc-fw-head: 700; --tc-fw-body: 400; } /* Editorial heading opt-in (serif). Add class="tc-editorial" to a heading to apply the editorial face once the rule is rolled out per page. */ .tc-editorial { font-family: var(--tc-font-serif); } /* ============================================================================ REUSABLE PRIMITIVES (build once — brief priority #1) All opt-in classes: inert until a component adds the class, so adding this block changes nothing on its own. Animated bits sit under a no-preference media query, so reduced-motion users get the instant/static state. ========================================================================== */ /* ── Gradient button: hover lift + sheen sweep ─────────────────────────────*/ .tc-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border: 0; border-radius: var(--tc-r-md); font-weight: 600; color: #fff; text-decoration: none; cursor: pointer; background: var(--tc-brand-gradient); box-shadow: 0 6px 20px rgba(59, 130, 246, .28); } .tc-btn--lg { padding: 15px 34px; font-size: 1.05rem; border-radius: var(--tc-r-lg); } @media (prefers-reduced-motion: no-preference) { .tc-btn { transition: transform var(--tc-dur-micro) var(--tc-ease), box-shadow var(--tc-dur-ui) var(--tc-ease); } .tc-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(59, 130, 246, .42); } .tc-btn:active { transform: translateY(0); } /* diagonal sheen that sweeps across on hover */ .tc-btn::after { content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); transition: left .55s var(--tc-ease); pointer-events: none; } .tc-btn:hover::after { left: 160%; } } /* ── Card: 1px border + inner glow, hover lift + glow ──────────────────────*/ .tc-card { background: var(--tc-surface-card); border: 1px solid var(--tc-card-border); border-radius: var(--tc-r-lg); box-shadow: var(--tc-card-glow), var(--tc-card-shadow); } @media (prefers-reduced-motion: no-preference) { .tc-card { transition: transform var(--tc-dur-ui) var(--tc-ease), box-shadow var(--tc-dur-ui) var(--tc-ease); } .tc-card--hover:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--tc-card-glow), var(--tc-card-shadow-lift); } } /* ── Skeleton loader (shimmer) ─────────────────────────────────────────────*/ .tc-skeleton { background: linear-gradient(100deg, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .05) 70%); background-size: 200% 100%; border-radius: var(--tc-r-sm); } @media (prefers-reduced-motion: no-preference) { .tc-skeleton { animation: tcSkeleton 1.3s ease-in-out infinite; } @keyframes tcSkeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } }