/* WorkM8 design system — canonical tokens ─────────────────────────────────────────────────────────────────────── Brand typefaces: Inter (body) + Inter Display (headings). Self-hosted as woff2 from /fonts. Variable font preferred; static weight files (200/400/500/600/700/800/900) provided as fallback for browsers without variable-font support. */ /* ── Inter Variable — body / UI ─────────────────────────────────── */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2-variations"), url("fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable-Italic.woff2") format("woff2-variations"), url("fonts/InterVariable-Italic.woff2") format("woff2"); } /* ── Inter Display — headings (display-optimised static cuts) ───── */ @font-face { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/InterDisplay-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/InterDisplay-Italic.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/InterDisplay-Medium.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/InterDisplay-MediumItalic.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/InterDisplay-SemiBoldItalic.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/InterDisplay-Bold.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/InterDisplay-BoldItalic.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/InterDisplay-ExtraBold.woff2") format("woff2"); } @font-face { font-family: "Inter Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/InterDisplay-Black.woff2") format("woff2"); } /* Apply stylistic alternates globally. */ html { font-feature-settings: "cv02","cv03","cv04","cv11","ss01"; } /* WorkM8 design system — canonical tokens (cont.) ─────────────────────────────────────────────────────────────────────── Source of truth for colour, type, spacing, radius, shadow used across: • workm8s.com / workm8consulting.com (corporate site) • jobtimereview.com (Job Time Review marketing site) • app.jobtimereview.com (Job Time Review product UI) Mirrors values used in jtr-website/site.css and the JTR app screens. Edit here, propagate everywhere. */ :root { /* ─── Brand blue (the lego-block blue) ────────────────────── */ --jtr-blue: #2E75B6; /* primary action, hyperlinks, brand */ --jtr-blue-dk: #1E5A8E; /* hover / pressed / heavier surfaces */ --jtr-blue-darker: #1F4E79; /* deep panel ground (e.g. funnel-step summary, JTR sign-in mid-stop) */ --jtr-blue-deepest: #163C61; /* deepest stop — hover on deep-blue panels; matches JTR sign-in radial gradient's outermost stop */ --jtr-blue-lt: #9CC2E2; /* secondary tint, chart fill */ --jtr-blue-lt-2: #9DC3E6; /* dark-mode link tint (product) */ --jtr-blue-bg: #EBF3FA; /* tinted callout backgrounds */ /* ─── Ink (text on light) ─────────────────────────────────── */ --ink: #0F172A; /* primary headings + body strong */ --ink-2: #334155; /* body copy */ --ink-3: #64748B; /* secondary / labels / muted */ --ink-4: #94A3B8; /* tertiary / hints / dividers' twin */ /* ─── Text on dark — counterparts to --ink / --ink-2 / --ink-3 for any element sitting on a dark panel (deep-blue summary, testimonial strip, CTA strip, etc.) ─────────────────── */ --ink-on-dark: #FFFFFF; /* primary on dark */ --ink-on-dark-2: rgba(255, 255, 255, 0.85); /* secondary on dark */ --ink-on-dark-3: rgba(255, 255, 255, 0.7); /* muted on dark */ /* ─── Frosted-glass surfaces — for elements layered on a dark background (icon containers, hairline borders, soft pills) */ --frost-surface: rgba(255, 255, 255, 0.12); --frost-border: rgba(255, 255, 255, 0.18); /* ─── Lines + surfaces ────────────────────────────────────── */ --line: #E2E8F0; --line-2: #CBD5E1; --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #F1F5F9; --surface-app: #F7F7F5; /* warm grey used as JTR app canvas */ --surface-dark: #0F172A; /* deep-navy panel surface — stays dark in both light and dark themes (cta strip, funnel summary, image overlays etc. always read as a dark slab) */ /* ─── Status / semantic ───────────────────────────────────── */ --emerald: #10B981; /* on-track, success */ --emerald-dk: #059669; --emerald-bg: #ECFDF5; --amber: #F59E0B; /* attention, partial */ --amber-dk: #B45309; --amber-bg: #FEF3C7; --rose: #EF4444; /* error, missing, destructive */ --rose-dk: #B91C1C; --rose-bg: #FEE2E2; --orange-warn: #EA580C; /* used for "unrecorded hours" hint */ /* ─── Gold (Certified Gold Partner badge) ─────────────────── */ --gold: #B45309; --gold-bg: #FEF3C7; /* ─── Radii (8-up scale) ──────────────────────────────────── */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; /* product cards (mobile JTR) */ --radius-pill: 999px; /* ─── Spacing (4-up scale; use multiples of 4) ────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ─── Shadows (restrained, layered) ───────────────────────── */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 30px -10px rgba(15, 23, 42, 0.15), 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-xl: 0 20px 60px -20px rgba(15, 23, 42, 0.25), 0 8px 24px rgba(15, 23, 42, 0.08); /* product cards (JTR app uses a slightly softer two-stop card shadow) */ --shadow-card: 0 1px 2px rgba(15,23,42,0.03), 0 8px 24px rgba(15,23,42,0.04); /* primary button glow */ --shadow-primary: 0 1px 2px rgba(46, 117, 182, 0.20), inset 0 1px 0 rgba(255,255,255,0.15); /* ─── Type ────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace; /* Scale — use the named class `.h-display` / `.h-section` / `.h-card` / `.lede` / `.body` defined below. Raw font sizes are for reference in custom layouts. */ --fs-display: clamp(40px, 6vw, 72px); --fs-section: clamp(28px, 3.5vw, 40px); --fs-page-h1: 40px; /* docs h1 (fixed) */ --fs-card-h: 20px; --fs-lede: clamp(17px, 1.6vw, 20px); --fs-body: 15px; --fs-meta: 13px; --fs-eyebrow: 12px; --fs-micro: 11px; --lh-tight: 1.04; --lh-snug: 1.15; --lh-base: 1.5; --lh-loose: 1.7; --ls-tightest: -0.035em; /* display */ --ls-tighter: -0.025em; --ls-tight: -0.02em; --ls-card: -0.015em; --ls-eyebrow: 0.06em; /* uppercase eyebrows */ --ls-allcaps-sm: 0.08em; } /* ─── Dark theme overrides ──────────────────────────────────────────── Activated when an inline bootstrap script in sets based on either a user override stored in localStorage('workm8.theme') or, absent that, the user's local hour (night = 19:00–07:00). Brand blue, --ink-on-dark*, --frost-*, and --surface-dark are intentionally left alone — they describe an always-dark context that should keep reading the same in both modes (e.g. the deep-blue funnel summary, the dark CTA strip, frosted overlays on hero imagery). */ :root[data-theme="dark"] { /* Text — chosen so each step lightens by one slate stop. Crucially, --ink-4 must stay light enough to read on the always-dark slabs (.footer, .cta-strip, .testimonial-strip, .case-back, .funnel-step- summary) where it labels footer regions, captions and meta text. */ --ink: #F8FAFC; --ink-2: #E2E8F0; --ink-3: #CBD5E1; --ink-4: #94A3B8; /* Lines + surfaces */ --line: #1E293B; --line-2: #334155; --surface: #0B1220; /* page canvas */ --surface-2: #0F172A; --surface-3: #142036; --surface-app: #0F172A; /* Tinted callout backgrounds — translucent so the dark canvas shows through; otherwise they read as bright bricks. */ --jtr-blue-bg: rgba(46, 117, 182, 0.16); --emerald-bg: rgba(16, 185, 129, 0.14); --amber-bg: rgba(245, 158, 11, 0.16); --rose-bg: rgba(239, 68, 68, 0.16); --gold-bg: rgba(180, 83, 9, 0.18); /* Status pill text colours — light enough to clear AA on the dark canvas. Override the light-mode values which are too low-contrast for inverted backgrounds. */ --gold: #FCD34D; --emerald: #6EE7B7; --gold-border: rgba(252, 211, 77, 0.30); --emerald-border: rgba(110, 231, 183, 0.30); /* Shadows — push opacity up since soft slate-tinted shadows disappear on a near-black canvas. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 60px -20px rgba(0, 0, 0, 0.75), 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35); } /* ─── Convenience helper classes ──────────────────────────────── */ .eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-allcaps-sm); text-transform: uppercase; color: var(--jtr-blue-dk); } .h-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); color: var(--ink); text-wrap: balance; margin: 0; } .h-section { font-family: var(--font-display); font-size: var(--fs-section); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); text-wrap: balance; margin: 0; } .h-card { font-size: var(--fs-card-h); font-weight: 600; line-height: 1.3; letter-spacing: var(--ls-card); color: var(--ink); margin: 0; } .lede { font-size: var(--fs-lede); line-height: var(--lh-base); color: var(--ink-2); font-weight: 400; text-wrap: pretty; max-width: 60ch; } .body { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); } .mono { font-family: var(--font-mono); } /* Tabular numerals for hours / job IDs / counts in product UI. */ .tabular { font-variant-numeric: tabular-nums; } /* Em-accent inside section headings — used as a "punchline" colour for the second clause of a two-clause headline (e.g. "Implementation, not advice. You leave with the thing built."). */ em.accent { font-style: normal; color: var(--jtr-blue-dk); } /* In dark mode the deep brand blue (#1E5A8E) muddies against a near- black canvas. Lift the accent colour to the lighter tint that's already in the palette, used here purely for legibility. */ :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] em.accent { color: var(--jtr-blue-lt-2); }