/* ============================================================ WALLAROE DESIGN SYSTEM — Colors & Type (v2 · light-first) Dutch digital marketing & AI automation agency. ------------------------------------------------------------ 2026 REFRESH: the system is now LIGHT-FIRST. Research on readability + B2B trust shows a light canvas is easier to read for long-form/marketing content and reads as more professional & approachable than a dark-first techy look. Navy is now INK (text) + a single signature dark band (footer). The blue->turquoise gradient is kept as a focused accent, not a whole-page treatment. Brand colours unchanged. ------------------------------------------------------------ FONT: "Montserrat" (geometric sans, free via Google Fonts — SIL OFL). License-free stand-in for Nexa. Swap back to self-hosted Nexa @font-face here if a license is purchased. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap'); :root { /* ---- BRAND CORE PALETTE (use exclusively) ---- */ --wal-navy: #1A1235; /* ink / dark accent surface */ --wal-dark-blue: #1A1235; /* legacy alias */ --wal-blue: #4368FF; /* primary accent, CTAs, links */ --wal-turquoise: #12C3FF; /* secondary accent, highlights */ --wal-white: #FFFFFF; /* ---- LIGHT-FIRST SURFACES (the canvas) ---- */ --wal-bg: #F5F7FC; /* page canvas — airy, faintly cool off-white */ --wal-bg-2: #ECEFF8; /* alternating section / wells */ --wal-card: #FFFFFF; /* cards, raised surfaces */ --wal-tint-blue: #EDF1FF; /* soft blue accent block */ --wal-tint-cyan: #E4F7FF; /* soft turquoise accent block */ /* ---- DARK ACCENT SURFACES (signature band / footer / modals) ---- */ --wal-ink-0: #120C26; /* deepest */ --wal-ink-1: #1A1235; /* base navy */ --wal-ink-2: #241A47; /* raised on dark */ /* ---- legacy surface aliases (kept so older refs resolve) ---- */ --wal-surface-0: var(--wal-bg); --wal-surface-1: var(--wal-card); --wal-surface-2: var(--wal-card); --wal-surface-3: var(--wal-bg-2); --wal-light-0: #FFFFFF; --wal-light-1: var(--wal-bg); --wal-light-2: var(--wal-bg-2); /* ---- FOREGROUND (text) — on LIGHT (default) ---- */ --wal-text: #1A1235; /* primary ink */ --wal-text-2: rgba(26,18,53,.64); /* secondary */ --wal-text-3: rgba(26,18,53,.44); /* muted / labels */ /* ---- on DARK (for the navy band / modals) ---- */ --wal-text-on-dark: #FFFFFF; --wal-text-on-dark-2: rgba(255,255,255,.74); --wal-text-on-dark-3: rgba(255,255,255,.50); /* ---- legacy fg aliases ---- */ --wal-fg-on-dark-1: var(--wal-text-on-dark); --wal-fg-on-dark-2: var(--wal-text-on-dark-2); --wal-fg-on-dark-3: var(--wal-text-on-dark-3); --wal-fg-on-light-1: var(--wal-text); --wal-fg-on-light-2: var(--wal-text-2); --wal-fg-on-light-3: var(--wal-text-3); /* ---- BORDERS / HAIRLINES ---- */ --wal-border: rgba(26,18,53,.10); /* default hairline on light */ --wal-border-strong: rgba(26,18,53,.16); /* card edge / dividers */ --wal-border-blue: rgba(67,104,255,.22); /* subtle brand-blue edge */ --wal-border-on-dark:rgba(255,255,255,.12); /* hairline on the navy band */ /* legacy */ --wal-border-soft: var(--wal-border); --wal-border-light: var(--wal-border); /* ---- SIGNATURE GRADIENT (Blue -> Turquoise) ---- */ /* Only left->right or bottom->top (plus shallow diagonal) */ --wal-gradient: linear-gradient(90deg, #4368FF 0%, #12C3FF 100%); --wal-gradient-vert: linear-gradient(0deg, #4368FF 0%, #12C3FF 100%); --wal-gradient-135: linear-gradient(120deg, #4368FF 0%, #12C3FF 100%); /* ---- ELEVATION / SHADOW — soft, airy, navy-tinted ---- */ --wal-shadow-sm: 0 1px 2px rgba(20,16,48,.05), 0 1px 1px rgba(20,16,48,.04); --wal-shadow-md: 0 2px 8px rgba(20,16,48,.05), 0 14px 30px rgba(20,16,48,.08); --wal-shadow-lg: 0 10px 26px rgba(20,16,48,.09), 0 30px 64px rgba(20,16,48,.12); --wal-glow-blue: 0 10px 26px rgba(67,104,255,.30); /* lift under primary CTA */ /* ---- RADII — softer & friendlier (de-techs the brand) ---- */ --wal-radius-sm: 10px; /* buttons, inputs */ --wal-radius-md: 16px; /* cards */ --wal-radius-lg: 22px; /* large panels */ --wal-radius-xl: 28px; /* CTA banner */ --wal-radius-pill: 999px; /* ---- SPACING SCALE (4px base) ---- */ --wal-space-1: 4px; --wal-space-2: 8px; --wal-space-3: 12px; --wal-space-4: 16px; --wal-space-5: 24px; --wal-space-6: 32px; --wal-space-7: 48px; --wal-space-8: 64px; --wal-space-9: 96px; --wal-space-10: 128px; /* ---- TYPE FAMILIES ---- */ --wal-font-display: 'Montserrat', system-ui, sans-serif; --wal-font-body: 'Montserrat', system-ui, sans-serif; --wal-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* ---- TYPE WEIGHTS ---- */ --wal-weight-light: 300; --wal-weight-regular: 400; --wal-weight-medium: 500; --wal-weight-semibold: 600; --wal-weight-bold: 700; --wal-weight-heavy: 800; --wal-weight-black: 900; /* ---- TRACKING ---- Modern confident display = TIGHT. Wide tracking is reserved for small uppercase labels only (the dated brandbook tracked everything wide; we keep that energy only at label size). */ --wal-track-display: -0.025em; /* big headlines */ --wal-track-tight: -0.015em; /* h1 / h2 */ --wal-track-normal: 0; --wal-track-wide: 0.02em; --wal-track-label: 0.14em; /* uppercase nav/labels/eyebrows */ /* ---- MOTION (fast, purposeful) ---- */ --wal-ease: cubic-bezier(.16,.84,.44,1); --wal-dur-fast: 160ms; --wal-dur: 240ms; } /* ============================================================ SEMANTIC TYPE CLASSES Display/headings: heavy & TIGHT-tracked (modern, confident). Labels/eyebrows: small uppercase, wide-tracked. Colour is NOT set here — callers pick text colour per surface. ============================================================ */ .wal-display { font-family: var(--wal-font-display); font-weight: var(--wal-weight-heavy); font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: var(--wal-track-display); } .wal-h1 { font-family: var(--wal-font-display); font-weight: var(--wal-weight-heavy); font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: var(--wal-track-tight); } .wal-h2 { font-family: var(--wal-font-display); font-weight: var(--wal-weight-bold); font-size: clamp(27px, 3vw, 40px); line-height: 1.12; letter-spacing: var(--wal-track-tight); } .wal-h3 { font-family: var(--wal-font-display); font-weight: var(--wal-weight-bold); font-size: 22px; line-height: 1.25; letter-spacing: var(--wal-track-normal); } .wal-h4 { font-family: var(--wal-font-display); font-weight: var(--wal-weight-semibold); font-size: 18px; line-height: 1.3; letter-spacing: var(--wal-track-normal); } .wal-body-lg { font-family: var(--wal-font-body); font-weight: var(--wal-weight-regular); font-size: 19px; line-height: 1.6; } .wal-body { font-family: var(--wal-font-body); font-weight: var(--wal-weight-regular); font-size: 16px; line-height: 1.6; } .wal-body-sm { font-family: var(--wal-font-body); font-weight: var(--wal-weight-regular); font-size: 14px; line-height: 1.55; } .wal-label { font-family: var(--wal-font-display); font-weight: var(--wal-weight-bold); font-size: 12.5px; line-height: 1; letter-spacing: var(--wal-track-label); text-transform: uppercase; } .wal-eyebrow { font-family: var(--wal-font-display); font-weight: var(--wal-weight-bold); font-size: 13px; line-height: 1; letter-spacing: var(--wal-track-label); text-transform: uppercase; color: var(--wal-blue); /* brand-blue eyebrow reads well on light */ } .wal-mono { font-family: var(--wal-font-mono); font-size: 13px; letter-spacing: 0; } /* Gradient text utility (Blue -> Turquoise) */ .wal-gradient-text { background: var(--wal-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }