/* ========================================================================== CB NOVA TECH — DESIGN TOKENS The single source of truth for colour, type, space, motion and elevation. Nothing below this file should hard-code a colour or a pixel type size. Contrast notes (WCAG 2.1 AA verified): --cb-ink on --cb-white = 15.8:1 (AAA) --cb-ink-muted on --cb-white = 7.4:1 (AAA) --cb-blue-link on --cb-white = 5.4:1 (AA, AA-large) --cb-white on --cb-navy = 16.3:1 (AAA) --cb-cyan-300 on --cb-navy = 9.1:1 (AAA) WARNING: --cb-cyan-500 fails contrast as text on white. It is a GRAPHIC accent only (rules, glows, chart strokes, icon fills on dark). ========================================================================== */ :root { /* --- Brand core ------------------------------------------------------- Sampled from the CB Nova Tech logo and brand collateral. Deep navy = authority. Professional blue = the brand. Cyan = intelligence. */ --cb-navy-900: #04122b; /* deepest — footer, overlays */ --cb-navy-800: #061a3a; /* primary dark surface */ --cb-navy-700: #0a2350; /* raised dark surface */ --cb-navy-600: #123166; /* dark surface hover / borders on dark */ --cb-blue-700: #0a4aa8; /* pressed state */ --cb-blue-600: #0b5fd0; /* PRIMARY BRAND BLUE — buttons, links */ --cb-blue-500: #1c78ee; /* hover */ --cb-blue-400: #4d9bff; /* light-on-dark blue */ --cb-cyan-500: #17b8e0; /* graphic accent only — never body text on light */ --cb-cyan-400: #38c9ee; --cb-cyan-300: #6fdcff; /* accessible accent text ON DARK surfaces */ /* --- Neutrals --------------------------------------------------------- */ --cb-white: #ffffff; --cb-mist: #f6f9fd; /* very light blue — alternating section bg */ --cb-mist-deep: #eaf1fa; /* light blue — cards on mist, table stripes */ --cb-line: #dce6f3; /* hairline borders on light */ --cb-line-soft: #edf3fa; --cb-ink: #0a1b33; /* headings + body on light — 15.8:1 */ --cb-ink-muted: #4a5b75; /* secondary copy, captions — 7.4:1 */ /* Meta and label text. Measured at 5.0:1 on white, so it passes AA at any size — including the 12–13px used in the trust bar and card meta rows. The previous value (#6b7c96) measured 4.24:1 and failed at those sizes. */ --cb-ink-faint: #5f7089; /* --- Semantic (state) -------------------------------------------------- */ --cb-success: #0f8a5f; --cb-warning: #b26a00; --cb-danger: #c02525; --cb-focus: #17b8e0; /* focus ring — high visibility on both themes */ /* --- Semantic surface aliases ----------------------------------------- Sections reference THESE, not raw brand values, so a rebrand is a one-file change. */ --cb-surface: var(--cb-white); --cb-surface-alt: var(--cb-mist); --cb-surface-dark: var(--cb-navy-800); --cb-surface-darkest: var(--cb-navy-900); --cb-on-dark: rgba(255, 255, 255, 0.92); --cb-on-dark-muted: rgba(214, 228, 247, 0.74); --cb-border: var(--cb-line); --cb-border-dark: rgba(111, 220, 255, 0.16); /* --- Typography -------------------------------------------------------- Two families maximum, per brief. Plus Jakarta Sans carries headings (geometric, confident, distinctly not-Bootstrap); Inter carries body (unmatched screen legibility at small sizes). */ --cb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cb-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid type scale — clamp() removes the need for type breakpoints and guarantees no overflow between 320px and 1920px. Ratio: 1.200 (minor third) on mobile → 1.250 (major third) on desktop. */ --cb-fs-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); /* 12 → 13 */ --cb-fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 14 → 15 */ --cb-fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); /* 16 → 18 */ --cb-fs-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem); /* 18 → 21 */ --cb-fs-xl: clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem); /* 20 → 24 */ --cb-fs-h4: clamp(1.1875rem,1.10rem + 0.44vw, 1.4375rem); /* 19 → 23 */ --cb-fs-h3: clamp(1.375rem, 1.24rem + 0.68vw, 1.75rem); /* 22 → 28 */ --cb-fs-h2: clamp(1.75rem, 1.46rem + 1.44vw, 2.75rem); /* 28 → 44 */ --cb-fs-h1: clamp(2.125rem, 1.62rem + 2.52vw, 3.75rem); /* 34 → 60 */ --cb-fs-hero: clamp(2.375rem, 1.70rem + 3.36vw, 4.375rem); /* 38 → 70 */ --cb-lh-tight: 1.08; /* hero */ --cb-lh-heading: 1.18; /* h1–h3 */ --cb-lh-snug: 1.4; /* h4, leads */ --cb-lh-body: 1.68; /* paragraphs — generous for scanning */ --cb-ls-hero: -0.03em; --cb-ls-heading: -0.02em; --cb-ls-body: -0.005em; --cb-ls-label: 0.12em; /* eyebrow / kicker uppercase */ --cb-fw-regular: 400; --cb-fw-medium: 500; --cb-fw-semibold: 600; --cb-fw-bold: 700; --cb-fw-extra: 800; /* --- Spacing — 4px base, geometric-ish for rhythm ---------------------- */ --cb-sp-1: 0.25rem; /* 4 */ --cb-sp-2: 0.5rem; /* 8 */ --cb-sp-3: 0.75rem; /* 12 */ --cb-sp-4: 1rem; /* 16 */ --cb-sp-5: 1.5rem; /* 24 */ --cb-sp-6: 2rem; /* 32 */ --cb-sp-7: 2.5rem; /* 40 */ --cb-sp-8: 3rem; /* 48 */ --cb-sp-9: 4rem; /* 64 */ --cb-sp-10: 5rem; /* 80 */ --cb-sp-11: 6rem; /* 96 */ --cb-sp-12: 8rem; /* 128 */ /* Fluid section rhythm — the single biggest driver of "premium" feel. Tight enough on mobile to avoid endless scrolling, expansive on desktop. */ --cb-section-y: clamp(3.5rem, 2.2rem + 6.4vw, 7.5rem); --cb-section-y-lg: clamp(4.5rem, 2.8rem + 8.5vw, 9.5rem); --cb-section-y-tight:clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem); /* --- Layout ------------------------------------------------------------ */ --cb-container: 1240px; /* standard content width */ --cb-container-wide: 1440px; /* hero, full-bleed feature bands */ --cb-container-text: 760px; /* prose — ~70ch, optimal reading measure */ --cb-gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem); --cb-grid-gap: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); /* --- Radii — restrained. Big radii read "consumer app", not consultancy. */ --cb-r-sm: 6px; --cb-r-md: 10px; --cb-r-lg: 14px; --cb-r-xl: 20px; --cb-r-pill: 999px; /* --- Elevation --------------------------------------------------------- Layered, low-opacity, blue-tinted shadows. A single flat black shadow is the fastest way to make a site look like a template. */ --cb-shadow-xs: 0 1px 2px rgba(10, 27, 51, 0.05); --cb-shadow-sm: 0 1px 2px rgba(10, 27, 51, 0.05), 0 2px 6px rgba(10, 27, 51, 0.05); --cb-shadow-md: 0 2px 4px rgba(10, 27, 51, 0.04), 0 8px 20px rgba(10, 27, 51, 0.07); --cb-shadow-lg: 0 4px 10px rgba(10, 27, 51, 0.05), 0 18px 44px rgba(10, 27, 51, 0.10); --cb-shadow-xl: 0 8px 20px rgba(10, 27, 51, 0.07), 0 32px 72px rgba(10, 27, 51, 0.14); /* Coloured lift for primary interactive elements */ --cb-shadow-blue: 0 4px 14px rgba(11, 95, 208, 0.26), 0 10px 30px rgba(11, 95, 208, 0.16); /* --- Gradients — used sparingly, per brief ----------------------------- */ --cb-grad-brand: linear-gradient(135deg, var(--cb-blue-600) 0%, var(--cb-cyan-500) 100%); --cb-grad-navy: linear-gradient(165deg, var(--cb-navy-800) 0%, var(--cb-navy-900) 100%); --cb-grad-hero: radial-gradient(120% 90% at 78% 12%, #10336e 0%, rgba(6,26,58,0) 62%), radial-gradient(90% 70% at 6% 96%, #0a3f8a 0%, rgba(6,26,58,0) 58%), linear-gradient(168deg, #061a3a 0%, #04122b 100%); --cb-grad-fade: linear-gradient(180deg, var(--cb-white) 0%, var(--cb-mist) 100%); /* --- Motion ------------------------------------------------------------ Short, eased, intentional. Nothing over 600ms; nothing that blocks input. */ --cb-ease: cubic-bezier(0.4, 0, 0.2, 1); --cb-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* decisive settle */ --cb-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --cb-dur-fast: 140ms; --cb-dur-base: 240ms; --cb-dur-slow: 420ms; --cb-dur-reveal: 620ms; /* --- Chrome ------------------------------------------------------------ */ --cb-header-h: 76px; --cb-header-h-scroll: 64px; --cb-announce-h: 40px; --cb-z-announce: 40; --cb-z-header: 50; --cb-z-drawer: 60; --cb-z-overlay: 70; --cb-z-skiplink: 100; /* Minimum tap target (WCAG 2.5.5 / Apple HIG) */ --cb-tap: 44px; } /* -------------------------------------------------------------------------- Reduced motion. Honoured globally rather than per-component so that no future section can accidentally opt out of it. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --cb-dur-fast: 0.01ms; --cb-dur-base: 0.01ms; --cb-dur-slow: 0.01ms; --cb-dur-reveal: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Forced-colors / Windows High Contrast. Ensure structure survives when the OS discards our palette. -------------------------------------------------------------------------- */ @media (forced-colors: active) { :root { --cb-shadow-md: none; --cb-shadow-lg: none; --cb-shadow-xl: none; } .cb-card, .cb-btn { border: 1px solid CanvasText; } }