/* ============================================================ BLU3 Design System — Tokens ------------------------------------------------------------ Single source of truth for color, type, spacing, radii, shadows, motion. Every component reads from here. Source: BLU3 House Style sheet (Apr 2026) + blu3.be live site source code (May 2026 capture). ============================================================ */ /* Real licensed Futura PT files supplied by BLU3. Light / Book / Medium correspond to the three weights used across the marketing site, slides and documents. */ @font-face { font-family: "Futura PT"; src: url("../fonts/futura-pt_light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Futura PT"; src: url("../fonts/futura-pt_book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Futura PT"; src: url("../fonts/futura-pt_medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* Brand primitives */ --blu3-black: #000000; --blu3-white: #FFFFFF; --blu3-royal-blue: #4169E1; /* Site greys — exact values from blu3.be source */ --blu3-bg-grey: #FAF9FA; /* page surface */ --blu3-text-grey: #797979; /* secondary body text */ --blu3-footer-bg: #1D1D1F; /* dark footer info bar */ --blu3-footer-text: #9C9C9D; /* Extended neutrals — for UI surfaces, borders, dividers */ --blu3-ink-900: #0A0A0B; --blu3-ink-700: #2A2A2E; --blu3-ink-500: #5A5A62; --blu3-ink-300: #A6A8AE; --blu3-ink-200: #D9DBDF; --blu3-ink-100: #EEEFF1; --blu3-ink-50: #F6F7F9; /* Blue ramp — derived from Royal Blue for hover, surfaces */ --blu3-blue-900: #1E2F73; --blu3-blue-700: #2A47B5; --blu3-blue-500: #4169E1; --blu3-blue-hover: #3857C8; /* btn:hover from real source */ --blu3-blue-300: #8AA1ED; --blu3-blue-100: #DCE3FA; --blu3-blue-50: #F0F3FD; /* Status — used sparingly; never compete with Royal Blue */ --blu3-success: #1F8A4C; --blu3-warning: #C7821B; --blu3-danger: #C83232; /* Semantic foreground */ --fg-1: var(--blu3-black); /* primary headings */ --fg-2: var(--blu3-text-grey); /* body text (real site) */ --fg-3: var(--blu3-ink-500); /* captions, fine print */ --fg-4: var(--blu3-ink-300); /* muted, disabled */ --fg-on-dark: var(--blu3-white); --fg-on-blue: var(--blu3-white); --fg-accent: var(--blu3-royal-blue); /* Semantic background */ --bg-1: var(--blu3-white); /* page (header, hero) */ --bg-2: var(--blu3-bg-grey); /* main content surface */ --bg-3: var(--blu3-ink-100); /* dividers, soft chips */ --bg-inverse: var(--blu3-footer-bg); /* footer info bar */ --bg-accent: var(--blu3-royal-blue); --bg-accent-soft: var(--blu3-blue-50); /* Semantic border */ --border-1: var(--blu3-ink-200); --border-2: var(--blu3-ink-100); --border-strong: var(--blu3-black); --border-accent: var(--blu3-royal-blue); /* Family stacks — house style intent ------------------------------------------------------------ Logo: Futura Condensed Medium (rendered as PNG asset) Headings: Futura PT Light/Book/Medium Body: Helvetica Neue Light ------------------------------------------------------------ */ --font-display: "Futura PT", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --font-title: var(--font-display); --font-heading: var(--font-display); --font-emphasis: var(--font-display); --font-condensed: "Futura PT Condensed", "Futura Condensed Medium", "Futura Std Condensed", "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-body: "Helvetica Neue", "HelveticaNeue", "Helvetica", "Arial", "Liberation Sans", sans-serif; --font-docs: var(--font-body); /* Compatibility shim — older code reads --font-base */ --font-base: var(--font-display); --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Weights — semantic names */ --weight-light: 300; --weight-book: 400; --weight-medium: 500; /* Type scale — values matching the real site ------------------------------------------------------------ hero title: 57px / Light (300) — "a modern blue team" hero sub: 20px / Light (300) section h2: 40px / Book (400) — Security Copilot, About pillar h3: 32px / Light (300) intro / quote: 26px / Light (300) copilot body: 24px / Light (300) pillar body: 20px / Light (300) trusted-by: 20px / Book (400) button: 20px / Book (400) fine print: 14px / Book (400) — footer info ------------------------------------------------------------ */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; /* hero subtitle, pillar body, button */ --text-xl: 24px; /* copilot/about body */ --text-2xl: 26px; /* intro text, contact quote */ --text-3xl: 30px; /* pillar text on slides */ --text-4xl: 32px; /* pillar h3 */ --text-5xl: 40px; /* section h2 */ --text-6xl: 57px; /* hero title */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.4; /* matches real site .copilot-content p */ --leading-body: 1.5; /* matches .pillar-item p */ --leading-loose: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.16em; --tracking-widest: 0.28em; /* ============================================================ 3 · SPACING (4px base) ============================================================ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Layout — matches real site */ --container-text: 700px; /* contact, about-narrow */ --container-narrow: 900px; /* intro, diagrams */ --container-default: 1100px; /* copilot, about */ --container-max: 1680px; /* page max-width (16-inch screen) */ --gutter-mobile: 20px; --gutter-default: 40px; /* Section padding pattern from real site */ --section-pad-y: 50px; /* hero content */ --section-pad-md: 80px; /* about */ --section-pad-lg: 90px; /* intro, contact */ --section-pad-xl: 103px; /* copilot */ --section-pad-xxl: 120px; /* The signature 10px white gap between bg-grey sections */ --section-gap: 10px; /* ============================================================ 4 · RADII ============================================================ */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 25px; /* ============================================================ 5 · BORDERS ============================================================ */ --bw-hair: 1px; --bw-1: 1.5px; --bw-2: 2px; /* ============================================================ 6 · SHADOWS (restrained, black-based) ============================================================ */ --shadow-header: 0 1px 3px rgba(0,0,0,0.05); /* real site */ --shadow-1: 0 1px 2px rgba(0,0,0,0.06); --shadow-2: 0 2px 8px rgba(0,0,0,0.08); --shadow-3: 0 8px 24px rgba(0,0,0,0.10); --shadow-cta: 0 1px 2px rgba(0,0,0,0.06), 0 6px 16px rgba(65,105,225,0.22); --shadow-focus: 0 0 0 3px rgba(65,105,225,0.35); /* ============================================================ 7 · MOTION ============================================================ */ --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1); --dur-1: 120ms; --dur-2: 300ms; /* matches real site button hover */ --dur-3: 320ms; } /* ============================================================ Reset + base ------------------------------------------------------------ Mirrors the real site reset. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); font-weight: 300; /* Helvetica Neue Light */ font-size: var(--text-base); line-height: var(--leading-loose); color: var(--fg-2); background-color: var(--blu3-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } /* ============================================================ Semantic typography classes ------------------------------------------------------------ Use these in markup; never hardcode font-family / weight. ============================================================ */ .blu3-eyebrow { font-family: var(--font-display); font-weight: var(--weight-book); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: lowercase; color: var(--fg-3); } .blu3-display { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-6xl); line-height: var(--leading-tight); color: var(--blu3-black); } .blu3-h1, h1 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-5xl); line-height: var(--leading-snug); color: var(--blu3-black); margin: 0 0 var(--space-5); } .blu3-h2, h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-5xl); line-height: var(--leading-snug); color: var(--blu3-black); margin: 0 0 var(--space-4); } .blu3-h3, h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-4xl); line-height: var(--leading-snug); color: var(--blu3-black); margin: 0 0 var(--space-3); } .blu3-lede { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-2xl); line-height: var(--leading-normal); color: var(--blu3-black); } /* Body uses Helvetica Neue Light — the house style spec */ .blu3-body, p { font-family: var(--font-body); font-weight: 300; font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg-2); } .blu3-small { font-family: var(--font-body); font-weight: 300; font-size: var(--text-sm); color: var(--fg-3); } .blu3-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--fg-3); } .blu3-mono, code { font-family: var(--font-mono); font-size: 0.95em; background: var(--bg-2); padding: 0 4px; border-radius: var(--radius-xs); } /* The signature "BLU3" wordmark — text fallback; prefer the logo PNG (real Futura Condensed Medium) where possible. */ .blu3-wordmark { font-family: var(--font-condensed); font-weight: var(--weight-medium); letter-spacing: 0.01em; text-transform: uppercase; color: var(--blu3-black); } .blu3-wordmark .three { color: var(--blu3-royal-blue); } /* The blue accent — house style: Royal Blue used as in-line emphasis */ .text-blue { color: var(--blu3-royal-blue); } .text-medium { font-weight: var(--weight-medium); } .text-book { font-weight: var(--weight-book); } /* ============================================================ BREAKPOINT REFERENCE (media queries can't read custom props, so these are documented here for consistency — use these values) ------------------------------------------------------------ Primary / structural 980px wide grids → narrower (trust marquee, AI ref-diagram, composer 4-col → 2-col) 880px main content collapse: 2-col sections → 1-col, AND nav → burger (nav.css) — kept in sync so there's no band of desktop-nav-over-single-column content 760px hero/banner tweaks, blueprint art trims, 6-grid → 1 600px iOS input-zoom guard (float fields to 16px) Component-level (used intentionally where a single module needs it) 720 · 640 · 560 · 520 · 480 · 460 · 430 · 420 · 380 ============================================================ */ /* ============================================================ 8 · CROSS-PLATFORM / MOBILE HARDENING ------------------------------------------------------------ Site-wide guards. This sheet is loaded first on the home page and every subpage, so these apply everywhere. Purely additive: each rule sets only properties no component defines, so it alters no existing layout — it just makes rendering consistent across iOS Safari, Android Chrome, and desktop. ============================================================ */ html { /* iOS: stop Safari inflating body text when the phone rotates to landscape */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* No grey flash box when tapping links/buttons on touch devices */ -webkit-tap-highlight-color: transparent; /* In-page anchors (#security, #ai, #invite, …) must clear the sticky nav (64px desktop / 58px mobile) instead of hiding beneath it */ scroll-padding-top: 76px; } /* Belt-and-braces against horizontal scroll on phones. `clip` (unlike `hidden`) does not create a scroll container, so the sticky nav keeps working. The home body sets its own overflow-x; this covers the subpages. */ body { overflow-x: clip; } /* Media never forces a container wider than the viewport */ img, svg, video, canvas { max-width: 100%; } /* Honour reduced-motion globally for anchor scrolling */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* iOS Safari auto-zooms the page when a focused field's text is < 16px. Float real text inputs up to 16px on small screens only; custom checkbox / radio / range controls keep their fixed pixel sizing. */ @media (max-width: 600px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 16px; } }