/* * Design tokens — the single source of the app's look. * * Semantic tokens (--c-*, --r-*, --sh-*, --t-*) are the vocabulary new code * uses. The legacy variables further down (--navy, --blue, --doc-*, ...) are * remapped onto them with raised specificity, so the ~11k lines of existing * CSS re-theme without being rewritten. Retire a legacy variable only once * nothing references it. */ :root { /* Surfaces */ --c-canvas: #f3f5fa; --c-surface: #ffffff; --c-surface-2: #f8f9fd; --c-surface-3: #eef1f8; --c-line: #e5e8f0; --c-line-strong: #d2d8e5; /* Ink */ --c-ink: #0e1a36; --c-ink-2: #44506a; --c-ink-3: #596580; --c-ink-inverse: #ffffff; --c-scrim: rgb(14 26 54 / 48%); /* Accent (one blue, used sparingly) */ --c-accent: #2757e6; /* fills: buttons, active tabs, dots */ --c-accent-text: #2757e6; /* links and accent-coloured text */ --c-on-accent: #ffffff; /* text on an accent fill */ --c-accent-hover: #1f48c9; --c-accent-press: #1a3ca8; --c-accent-soft: #eaf0ff; --c-accent-line: #c3d3fb; /* Status */ --c-success: #087850; --c-success-soft: #e5f6ee; --c-warn: #8a5603; --c-warn-soft: #fff4dc; --c-danger: #bf2440; --c-danger-soft: #feeef0; --c-chart-peak: #e0a63c; --c-info: #2757e6; --c-info-soft: #eaf0ff; --c-calendar-ads: #7c3aed; --c-calendar-ads-soft: #f5f3ff; /* Shape */ --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* Depth: layered, low-opacity, cool-tinted */ --sh-xs: 0 1px 2px rgb(16 28 58 / 5%); --sh-sm: 0 1px 2px rgb(16 28 58 / 5%), 0 4px 12px rgb(16 28 58 / 5%); --sh-md: 0 2px 4px rgb(16 28 58 / 4%), 0 12px 28px rgb(16 28 58 / 8%); --sh-lg: 0 4px 8px rgb(16 28 58 / 5%), 0 24px 56px rgb(16 28 58 / 14%); --ring: 0 0 0 3px rgb(39 87 230 / 24%); /* Type */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 26px; --t-kpi: 30px; /* Space (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; /* Motion */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 120ms; --dur: 200ms; /* Chrome */ --header-h: 64px; color-scheme: light; } /* Dark theme: follows the system unless the user chose a theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-canvas: #0a0f1d; --c-surface: #111830; --c-surface-2: #161f3a; --c-surface-3: #1d2848; --c-line: #243153; --c-line-strong: #34436b; --c-ink: #e9edf8; --c-ink-2: #b5bfd8; --c-ink-3: #8f9bb8; --c-ink-inverse: #0a0f1d; --c-scrim: rgb(0 0 0 / 62%); --c-accent: #3965ea; --c-accent-text: #8eaaff; --c-on-accent: #ffffff; --c-accent-hover: #5580f5; --c-accent-press: #6a92f8; --c-accent-soft: #18285a; --c-accent-line: #2f4694; --c-success: #4fd6a0; --c-success-soft: #0f2c24; --c-warn: #f0b64e; --c-warn-soft: #33270f; --c-danger: #f2586f; --c-danger-soft: #3a1620; --c-chart-peak: #f0b64e; --c-info: #8eaaff; --c-info-soft: #18285a; --c-calendar-ads: #c4b5fd; --c-calendar-ads-soft: #2e1065; --sh-xs: 0 1px 2px rgb(0 0 0 / 35%); --sh-sm: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 12px rgb(0 0 0 / 28%); --sh-md: 0 2px 4px rgb(0 0 0 / 30%), 0 12px 28px rgb(0 0 0 / 38%); --sh-lg: 0 4px 8px rgb(0 0 0 / 35%), 0 24px 56px rgb(0 0 0 / 55%); --ring: 0 0 0 3px rgb(142 170 255 / 35%); color-scheme: dark; } } :root[data-theme="dark"] { --c-canvas: #0a0f1d; --c-surface: #111830; --c-surface-2: #161f3a; --c-surface-3: #1d2848; --c-line: #243153; --c-line-strong: #34436b; --c-ink: #e9edf8; --c-ink-2: #b5bfd8; --c-ink-3: #8f9bb8; --c-ink-inverse: #0a0f1d; --c-scrim: rgb(0 0 0 / 62%); --c-accent: #3965ea; --c-accent-text: #8eaaff; --c-on-accent: #ffffff; --c-accent-hover: #5580f5; --c-accent-press: #6a92f8; --c-accent-soft: #18285a; --c-accent-line: #2f4694; --c-success: #4fd6a0; --c-success-soft: #0f2c24; --c-warn: #f0b64e; --c-warn-soft: #33270f; --c-danger: #f2586f; --c-danger-soft: #3a1620; --c-chart-peak: #f0b64e; --c-info: #8eaaff; --c-info-soft: #18285a; --c-calendar-ads: #c4b5fd; --c-calendar-ads-soft: #2e1065; --sh-xs: 0 1px 2px rgb(0 0 0 / 35%); --sh-sm: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 12px rgb(0 0 0 / 28%); --sh-md: 0 2px 4px rgb(0 0 0 / 30%), 0 12px 28px rgb(0 0 0 / 38%); --sh-lg: 0 4px 8px rgb(0 0 0 / 35%), 0 24px 56px rgb(0 0 0 / 55%); --ring: 0 0 0 3px rgb(142 170 255 / 35%); color-scheme: dark; } /* Legacy variables → tokens. Raised specificity so load order never matters. */ :root:root { color: var(--c-ink); background: var(--c-canvas); font-family: var(--font-sans); --navy: var(--c-ink); --navy-2: #1b2b52; --blue: var(--c-accent); --blue-soft: var(--c-accent-soft); --green: var(--c-success); --green-soft: var(--c-success-soft); --red: var(--c-danger); --red-soft: var(--c-danger-soft); --amber: var(--c-warn); --amber-soft: var(--c-warn-soft); --text: var(--c-ink); --muted: var(--c-ink-3); --border: var(--c-line); --panel: var(--c-surface); --shadow: var(--sh-md); --doc-ink: var(--c-ink); --doc-ink-soft: var(--c-ink-2); --doc-wash: var(--c-canvas); --doc-line: var(--c-line); --doc-mute: var(--c-ink-3); --doc-gold: var(--c-warn); --doc-gold-soft: var(--c-warn-soft); /* Names older stylesheets use with a light fallback; undefined, they stayed white in dark mode. */ --doc-paper: var(--c-surface); --doc-red: var(--c-danger); --surface: var(--c-surface); --text-muted: var(--c-ink-3); } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); font-feature-settings: "cv11", "ss01"; background: var(--c-canvas); } :where(table, .num, [class*="kpi"]) { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* Containers focused by script for a11y routing are not interactive; they never draw a ring. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Delivered inside noscript: the interactive page keeps its existing styling. */ body { margin: 0; background: var(--c-canvas); color: var(--c-ink); } .start-fallback { box-sizing: border-box; max-width: 680px; margin: 0 auto; padding: var(--s-6) var(--s-4); font: var(--t-lg)/1.6 var(--font-sans); overflow-wrap: anywhere; } .start-fallback-brand { font-weight: 800; margin: 0 0 var(--s-6); } .start-fallback-card { padding: clamp(24px, 5vw, 40px); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); } .start-fallback-kicker { margin-top: 0; color: var(--c-accent-text); font-size: var(--t-sm); font-weight: 700; } .start-fallback h1 { margin: var(--s-3) 0 var(--s-5); font-size: var(--t-2xl); line-height: 1.25; letter-spacing: -.02em; } .start-fallback-card > p:not(.start-fallback-kicker) { color: var(--c-ink-2); } .start-fallback a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-accent-text); } .start-fallback a:focus-visible { outline: 2px solid var(--c-accent-text); outline-offset: 4px; } .start-fallback a.start-fallback-retry { padding: 0 var(--s-5); background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--r-sm); text-decoration: none; font-weight: 700; } .start-fallback-note { font-size: var(--t-sm); }

FlashCrafter

Your free Growth Brief

Let’s get your Growth Brief started.

Business search needs JavaScript. Enable JavaScript in your browser settings, then retry this page to find and confirm your business.

You can also copy this page’s full address into a browser with JavaScript enabled. Keep the full address so we can remember which page brought you here.

Retry this page

Retrying only reloads this page. It does not submit your details or request a report.

Visit FlashCrafter