/* ============================================================================ FONTS — self-hosted, subset, variable ---------------------------------------------------------------------------- Previously these came from Google Fonts: two extra DNS lookups, a TLS handshake and a render-blocking stylesheet before a single word could be painted. On a 4G connection in India that is the slowest thing on the page. Subset to the characters this site uses and served from our own origin: Space Grotesk 13 KB, Inter 46 KB, both variable so one file covers every weight. font-display:swap so text is never invisible while they load. ========================================================================= */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================================================ mapthis.site — DESIGN TOKENS ---------------------------------------------------------------------------- Variables only. No selectors, no components, nothing that paints. ONE COMMITTED DARK THEME. No toggle, no light variant. Why dark: every asset this site has to show is a dark-field image — the point clouds, the x-ray plates, the Metron Canopy screenshots. On a white page each one sits in its own black box and the page reads as a scrapbook. On a dark field they join up, and the daylight forest photographs become the bright moments instead of the baseline. The product's own interface is dark for the same reason, so the site now matches the thing it is selling. The greys are taken from the Metron Canopy shell (canopy/ui/theme.py as quoted in the customer deck) so the site and the software are visibly the same family. The accent is Metron red, used as branding.py describes it: "attention" or "you are here", never decoration. Contrast is measured against --page, not guessed: heading 16.0:1 · body 8.7:1 · muted 5.3:1 · accent-text 6.3:1 white on --accent fill 4.8:1 — all clear WCAG AA. ========================================================================= */ :root { /* ---- ACCENT ----------------------------------------------------------- Two tints, for a reason rather than for variety: Metron red reaches only 3.94:1 on the field, which is fine behind white text on a solid button but fails for a small link. So fills get the true brand red, and text gets the lighter tint. */ --accent: #E50012; /* solid fills, buttons, the "you are here" tick */ --accent-text: #FF5C4D; /* 6.25:1 — links, small accented text */ --accent-hover: #FF7A6B; /* 6.82:1 */ --on-accent: #FFFFFF; /* 4.84:1 on --accent */ --accent-soft: #2A1113; /* tinted panel behind a badge */ /* ---- TEXT ------------------------------------------------------------- */ --heading: #E6ECF4; /* 16.03:1 — the deck's ink */ --body: #A5AFBE; /* 8.70:1 */ --muted: #7F8899; /* 5.30:1 */ --faint: #5C6472; /* 3.19:1 — hairline labels only, never prose */ /* ---- SURFACES --------------------------------------------------------- Four steps, dark to slightly less dark. On a dark UI, elevation reads as lightness rather than shadow, so these do the work drop-shadows do on a light page. */ --page: #0E1013; /* the field */ --surface: #16181D; /* panel */ --surface-2: #1E2128; /* raised panel */ --border: #2A2F38; /* rule */ --border-strong: #414957; /* rule, emphasised */ /* ---- STATE — never red. Red is the brand. ----------------------------- */ --warning: #FBBF24; /* 11.5:1 — form errors, alerts */ --success: #3DDC84; /* 10.7:1 — the canopy green, kept for this only */ /* ---- SCRIM — for type over photography -------------------------------- */ --scrim: linear-gradient(90deg, rgba(8,10,12,.94) 0%, rgba(8,10,12,.72) 42%, rgba(8,10,12,.15) 82%); --scrim-v: linear-gradient(180deg, rgba(8,10,12,.10) 0%, rgba(8,10,12,.55) 55%, rgba(8,10,12,.95) 100%); /* Point-cloud plates are already black at the edges; this blends them into the page instead of ending them on a hard rectangle. */ --fade-edges: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); /* ---- ELEVATION -------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45); --shadow-3: 0 2px 6px rgba(0,0,0,.55), 0 24px 60px rgba(0,0,0,.55); /* ---- TYPE ------------------------------------------------------------- */ --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; --text-display: clamp(34px, 5.2vw, 62px); --text-h2: clamp(25px, 2.9vw, 34px); --text-h3: 20px; --text-h4: 17px; --text-lead: 19px; --text-body: 16.5px; --text-small: 14px; --text-tiny: 12.5px; --text-eyebrow: 12px; --lh-tight: 1.04; --lh-head: 1.18; --lh-lead: 1.6; --lh-body: 1.72; --measure: 68ch; --measure-lead: 58ch; --measure-h1: 15ch; /* ---- SPACING ---------------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10:128px; /* ---- RADIUS ----------------------------------------------------------- */ --r1: 6px; --r2: 9px; --r3: 12px; --r4: 18px; --rf: 999px; /* ---- LAYOUT ----------------------------------------------------------- */ --container: 1180px; --container-wide: 1480px; --gutter: var(--s5); --header-h: 68px; /* ---- MOTION ----------------------------------------------------------- */ --ease: cubic-bezier(.22,.61,.36,1); --t-fast: .14s; --t-base: .22s; --t-slow: .5s; --z-header: 100; --z-menu: 200; /* Tells the browser to paint form controls and scrollbars dark to match. */ color-scheme: dark; }