/* ═══════════════════════════════════════════════════════════════════════════ Geo Insights — Colors & Type Source of truth for typography & color tokens. Imported by all design artefacts (UI kits, slides, prototypes). Brand: teal → navy gradient. Authoritative but accessible. Dutch climate adaptation tooling for municipalities. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Webfonts ──────────────────────────────────────────────────────────── */ /* Webfonts are loaded via in each HTML so the browser can fetch them in parallel with this stylesheet rather than blocking on @import. See README. */ :root { /* ── Brand colors (from styleguide PNG) ──────────────────────────────── */ --gi-teal: #55B3A5; /* Primary teal — Logo top-left, primary actions */ --gi-teal-mid: #438DA2; /* Mid-tone teal — secondary fills, links */ --gi-teal-deep: #3A6F87; /* Deeper teal — derived hover */ --gi-navy: #294589; /* Brand navy — accents, headlines on light */ --gi-navy-deep: #1E3367; /* Derived darker navy */ --gi-ink: #282828; /* Near-black — body text */ --gi-grey: #A9A9A9; /* Mid grey — disabled, dividers */ --gi-paper: #FFFFFF; /* White — backgrounds */ /* Brand gradient (logo). Use sparingly: hero blocks, brand moments. */ --gi-gradient: linear-gradient(135deg, #55B3A5 0%, #438DA2 45%, #294589 100%); --gi-gradient-30: linear-gradient(135deg, rgba(85,179,165,0.30) 0%, rgba(67,141,162,0.30) 45%, rgba(41,69,137,0.30) 100%); /* ── Neutral scale (warm-cool grey, biased toward navy) ──────────────── */ --gi-n0: #FFFFFF; --gi-n50: #F7F8FA; --gi-n100:#EEF1F5; --gi-n200:#E1E6EE; --gi-n300:#C9D1DD; --gi-n400:#9AA4B4; --gi-n500:#6B7689; --gi-n600:#4A5468; --gi-n700:#323A4B; --gi-n800:#1F2533; --gi-n900:#0E1320; /* ── Semantic colors ─────────────────────────────────────────────────── */ --gi-fg-1: var(--gi-ink); /* Primary text */ --gi-fg-2: var(--gi-n600); /* Secondary / muted text */ --gi-fg-3: var(--gi-n500); /* Tertiary, captions */ --gi-fg-on-dark: var(--gi-paper); --gi-fg-on-brand: var(--gi-paper); --gi-bg-page: var(--gi-paper); --gi-bg-soft: var(--gi-n50); --gi-bg-muted: var(--gi-n100); --gi-bg-card: var(--gi-paper); --gi-bg-dark: var(--gi-navy-deep); --gi-border: var(--gi-n200); --gi-border-strong: var(--gi-n300); --gi-divider: var(--gi-n100); --gi-ring: rgba(67,141,162,0.35); /* focus ring */ --gi-action: var(--gi-teal-mid); /* primary CTA fill */ --gi-action-hover: var(--gi-teal-deep); --gi-action-press: #2D5A6E; --gi-action-soft: rgba(67,141,162,0.10); --gi-accent: var(--gi-navy); /* secondary accent */ --gi-accent-soft: rgba(41,69,137,0.10); /* Risk / status (climate-domain semantic) */ --gi-flood: #2E7BBF; /* blue — water risk */ --gi-heat: #C8533C; /* warm earthy red — heat stress */ --gi-drought: #C99544; /* ochre — drought */ --gi-bgi: #4F9C7A; /* green — Blue-Green Infrastructure */ --gi-success: #2E8B6A; --gi-warning: #D49327; --gi-danger: #C0392B; --gi-info: var(--gi-teal-mid); /* ── Type tokens ─────────────────────────────────────────────────────── */ --gi-font-display: 'Roboto', 'Roboto Black', system-ui, sans-serif; --gi-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --gi-font-product: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* in-app UI per codebase */ --gi-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Display sizes (per styleguide, scaled up for web) */ --gi-fs-h1: 32px; /* Heading 1 — Roboto Black 32pt */ --gi-fs-h2: 24px; /* Heading 2 — Roboto Black 24pt */ --gi-fs-h3: 19px; /* Heading 3 — Roboto Black 19pt */ --gi-fs-h4: 17px; /* Heading 4 — Roboto Italic 17pt */ --gi-fs-body: 16px; /* Paragraph — Roboto Regular 16pt */ --gi-fs-small: 14px; --gi-fs-micro: 12px; /* Hero / marketing scale (built ON TOP of styleguide for web hero blocks) */ --gi-fs-hero: 56px; --gi-fs-display: 72px; /* Line heights */ --gi-lh-tight: 1.05; --gi-lh-snug: 1.2; --gi-lh-body: 1.55; --gi-lh-loose: 1.7; /* Letter spacing — Roboto Black does well with subtle negative tracking on big sizes */ --gi-ls-display: -0.02em; --gi-ls-h1: -0.015em; --gi-ls-h2: -0.01em; --gi-ls-eyebrow: 0.14em; /* uppercase eyebrow labels */ --gi-ls-insights: 0.32em; /* mimics the spaced "INSIGHTS" wordmark */ /* ── Spacing (4px base) ──────────────────────────────────────────────── */ --gi-sp-1: 4px; --gi-sp-2: 8px; --gi-sp-3: 12px; --gi-sp-4: 16px; --gi-sp-5: 24px; --gi-sp-6: 32px; --gi-sp-7: 48px; --gi-sp-8: 64px; --gi-sp-9: 96px; /* ── Radii — slightly rounded; codebase uses 0.5rem default ─────────── */ --gi-radius-xs: 4px; --gi-radius-sm: 6px; --gi-radius-md: 8px; /* default — matches shadcn 0.5rem */ --gi-radius-lg: 12px; --gi-radius-xl: 16px; --gi-radius-pill: 999px; /* ── Elevation — soft, low-contrast; not flashy ─────────────────────── */ --gi-shadow-xs: 0 1px 2px rgba(14,19,32,0.04); --gi-shadow-sm: 0 1px 3px rgba(14,19,32,0.06), 0 1px 2px rgba(14,19,32,0.04); --gi-shadow-md: 0 4px 12px rgba(14,19,32,0.08), 0 2px 4px rgba(14,19,32,0.04); --gi-shadow-lg: 0 12px 28px rgba(14,19,32,0.10), 0 4px 8px rgba(14,19,32,0.05); --gi-shadow-brand: 0 8px 24px rgba(67,141,162,0.22); /* ── Motion ──────────────────────────────────────────────────────────── */ --gi-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --gi-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --gi-dur-fast: 120ms; --gi-dur: 200ms; --gi-dur-slow: 360ms; } /* ═══════════════════════════════════════════════════════════════════════════ Semantic element styles. Apply by class or use directly on tags. ═══════════════════════════════════════════════════════════════════════════ */ .gi-h1, h1.gi { font-family: var(--gi-font-display); font-weight: 900; font-size: var(--gi-fs-h1); line-height: var(--gi-lh-snug); letter-spacing: var(--gi-ls-h1); color: var(--gi-fg-1); } .gi-h2, h2.gi { font-family: var(--gi-font-display); font-weight: 900; font-size: var(--gi-fs-h2); line-height: var(--gi-lh-snug); letter-spacing: var(--gi-ls-h2); color: var(--gi-fg-1); } .gi-h3, h3.gi { font-family: var(--gi-font-display); font-weight: 900; font-size: var(--gi-fs-h3); line-height: var(--gi-lh-snug); color: var(--gi-fg-1); } .gi-h4, h4.gi { font-family: var(--gi-font-display); font-style: italic; font-weight: 500; font-size: var(--gi-fs-h4); line-height: var(--gi-lh-snug); color: var(--gi-fg-1); } .gi-display { font-family: var(--gi-font-display); font-weight: 900; font-size: var(--gi-fs-display); line-height: var(--gi-lh-tight); letter-spacing: var(--gi-ls-display); color: var(--gi-fg-1); } .gi-hero { font-family: var(--gi-font-display); font-weight: 900; font-size: var(--gi-fs-hero); line-height: var(--gi-lh-tight); letter-spacing: var(--gi-ls-display); color: var(--gi-fg-1); } .gi-p, p.gi { font-family: var(--gi-font-body); font-weight: 400; font-size: var(--gi-fs-body); line-height: var(--gi-lh-body); color: var(--gi-fg-1); text-wrap: pretty; } .gi-small { font-size: var(--gi-fs-small); } .gi-micro { font-size: var(--gi-fs-micro); } .gi-muted { color: var(--gi-fg-2); } .gi-eyebrow { font-family: var(--gi-font-body); font-weight: 700; font-size: var(--gi-fs-micro); letter-spacing: var(--gi-ls-eyebrow); text-transform: uppercase; color: var(--gi-teal-mid); } .gi-mono { font-family: var(--gi-font-mono); font-size: var(--gi-fs-small); color: var(--gi-fg-1); } /* The wide-tracked "I N S I G H T S" wordmark treatment */ .gi-wordmark-spaced { font-family: var(--gi-font-display); font-weight: 900; letter-spacing: var(--gi-ls-insights); text-transform: uppercase; } /* Body reset for design artefacts */ .gi-body { font-family: var(--gi-font-body); color: var(--gi-fg-1); background: var(--gi-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }