/* ========================================================= Rapid Global — Colors & Typography tokens Source of truth for every other file in this design system. ========================================================= */ /* ---------- FONTS ---------- Cerebri Sans is Rapid Global's marketing/UI typeface. Paths point at /public/fonts, where the .ttf files live. */ @font-face { font-family: "Cerebri Sans"; src: url("/fonts/CerebriSans-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Cerebri Sans"; src: url("/fonts/CerebriSans-Book.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cerebri Sans"; src: url("/fonts/CerebriSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cerebri Sans"; src: url("/fonts/CerebriSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Cerebri Sans"; src: url("/fonts/CerebriSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* ======================================================= COLOR — BRAND PRIMARIES Navy is the dominant brand color; Blue is the accent/arrow. ======================================================= */ --rapid-navy: #23248B; --rapid-navy-900: #15165a; --rapid-navy-800: #1b1c72; --rapid-navy-700: #23248B; --rapid-navy-600: #3132a3; --rapid-navy-500: #5253bd; --rapid-navy-400: #7e7fd1; --rapid-navy-300: #aaabe0; --rapid-navy-200: #cfd0ec; --rapid-navy-100: #e6e7f5; --rapid-navy-50: #f2f3fb; --rapid-blue: #3D87F2; --rapid-blue-900: #1a56b8; --rapid-blue-800: #2468d1; --rapid-blue-700: #2f78e3; --rapid-blue-600: #3D87F2; --rapid-blue-500: #5e9bf5; --rapid-blue-400: #82b3f8; --rapid-blue-300: #aac9fa; --rapid-blue-200: #cddffc; --rapid-blue-100: #e5eefe; --rapid-blue-50: #f2f7ff; --rapid-purple: #7B2FBE; /* ======================================================= COLOR — PRODUCT ACCENTS Per-product brand colours. Used for the product icon/accent only (e.g. the Products overview section); card surfaces stay light so body text keeps its AA contrast. ======================================================= */ --contractor: #299946; --induct: #FAB524; --access: #9C45C4; --ptw: #8ecd65; --aware-light: #0087FA; --incident: #E53956; --auditor: #4EA9F4; /* ======================================================= COLOR — NEUTRALS ======================================================= */ --rapid-ink: #0c1033; --rapid-grey-900: #1a1f3d; --rapid-grey-800: #2c3252; --rapid-grey-700: #444a6b; --rapid-grey-600: #5c6385; --rapid-grey-500: #7b82a0; --rapid-grey-400: #a0a6bd; --rapid-grey-300: #c7cbd8; --rapid-grey-200: #e2e4ec; --rapid-grey-100: #eef0f5; --rapid-grey-50: #f6f7fa; --rapid-white: #ffffff; /* ======================================================= COLOR — SEMANTIC (status / safety) ======================================================= */ --rapid-success: #1ea97c; --rapid-success-bg: #e4f6ef; --rapid-warning: #f0a830; --rapid-warning-bg: #fdf3e0; --rapid-danger: #d64545; --rapid-danger-bg: #fbeaea; --rapid-info: var(--rapid-blue); --rapid-info-bg: var(--rapid-blue-50); /* ======================================================= SEMANTIC TOKENS — FG / BG / BORDER ======================================================= */ --fg-1: var(--rapid-ink); --fg-2: var(--rapid-grey-700); --fg-3: var(--rapid-grey-500); --fg-4: var(--rapid-grey-400); --fg-brand: var(--rapid-navy); --fg-accent: var(--rapid-blue); --fg-on-brand: var(--rapid-white); --bg-1: var(--rapid-white); --bg-2: var(--rapid-grey-50); --bg-3: var(--rapid-grey-100); --bg-brand: var(--rapid-navy); --bg-brand-soft: var(--rapid-navy-50); --bg-accent-soft: var(--rapid-blue-50); --border-1: var(--rapid-grey-200); --border-2: var(--rapid-grey-300); --border-focus: var(--rapid-blue); /* ======================================================= ADDITIVE — DARK NEUTRAL SURFACE Scoped, opt-in tokens for bespoke near-black sections (e.g. the homepage "AI built in" band). These do not redefine any existing semantic value; sections opt in by shadowing their local --surface/--border/--text variables. ======================================================= */ --surface-neutral-dark: #0E102B; --border-hairline-dark: rgba(255, 255, 255, 0.08); --text-on-dark-muted: rgba(255, 255, 255, 0.66); /* ======================================================= ADDITIVE — HOMEPAGE PLATFORM BENTO Generous minimum height for the full-width feature tiles (Rapid One, Monitor) so their 40/60 copy-image split never collapses to a thin strip. Image areas otherwise use aspect-ratio; this is the one genuine floor value needed. Used only by ProductsOverview.astro's bento section. ======================================================= */ --po-feature-min-h: 360px; /* ======================================================= TYPOGRAPHY ======================================================= */ --font-sans: "Cerebri Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-display-lg: clamp(3.5rem, 6vw, 5rem); --fs-display: clamp(2.75rem, 5vw, 4rem); --fs-h1: clamp(2rem, 3.2vw, 2.75rem); --fs-h2: clamp(1.5rem, 2.4vw, 2rem); --fs-h3: 1.375rem; --fs-h4: 1.125rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-body-sm: 0.875rem; --fs-caption: 0.75rem; --fs-eyebrow: 0.75rem; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-xbold: 800; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; /* ======================================================= SPACING / RADIUS / SHADOW / MOTION ======================================================= */ --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; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Shared radius for CTA buttons (.btn). Rounded rectangle, not pill. */ --radius-button: var(--radius-md); --shadow-xs: 0 1px 2px rgba(35, 36, 139, 0.06); --shadow-sm: 0 2px 6px rgba(35, 36, 139, 0.08); --shadow-md: 0 8px 24px rgba(35, 36, 139, 0.10); --shadow-lg: 0 20px 48px rgba(35, 36, 139, 0.14); --shadow-focus: 0 0 0 3px rgba(61, 135, 242, 0.35); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; }