/* PeakData Solutions — Design tokens ------------------------------------------------------------------ Brand foundations defined by the team: Navy #2A2556 — primary, headers, dark sections Green #A1CD8C — accent, used sparingly: underlines, highlights White #FFFFFF — text on dark Navy #2A2556 — text on light Sans-serif only. Manrope (display + UI) + Inter (long-form body). These are loaded from Google Fonts in the page ; see also index.html. ------------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---- Brand --------------------------------------------------- */ --pd-navy: #2A2556; /* primary */ --pd-navy-700: #211D45; /* hover / pressed dark */ --pd-navy-300: #6F6A95; /* muted navy for low-emphasis text on light */ --pd-green: #A1CD8C; /* accent */ --pd-green-600: #7FB36A; /* darker green, for foreground use on light */ --pd-green-100: #E8F2E1; /* tinted green wash, for chips/badges */ /* ---- Neutrals ------------------------------------------------ */ --pd-white: #FFFFFF; --pd-paper: #FAFAF7; /* default page bg, ever-so-slightly warm */ --pd-fog: #F2F2EE; /* card / section alt bg */ --pd-line: #E6E5E0; /* hairline borders */ --pd-line-strong: #CFCEC8; /* stronger divider */ --pd-ink-900: #14122A; /* deepest ink, near-black with navy bias */ --pd-ink-700: #2A2556; /* same as brand navy — body text on light */ --pd-ink-500: #5A5772; /* secondary text on light */ --pd-ink-400: #807D94; /* tertiary / captions */ /* ---- Foreground / background semantic ------------------------ */ --bg-page: var(--pd-paper); --bg-section-alt: var(--pd-fog); --bg-card: var(--pd-white); --bg-dark: var(--pd-navy); --bg-dark-deeper: var(--pd-navy-700); --fg-on-light: var(--pd-ink-700); --fg-on-light-muted: var(--pd-ink-500); --fg-on-light-faint: var(--pd-ink-400); --fg-on-dark: var(--pd-white); --fg-on-dark-muted: rgba(255,255,255,0.72); --fg-on-dark-faint: rgba(255,255,255,0.52); --accent: var(--pd-green); --accent-strong: var(--pd-green-600); --accent-wash: var(--pd-green-100); /* ---- State --------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(161, 205, 140, 0.55); /* green halo */ --error: #B3261E; --success: #2E7D32; /* ---- Type ---------------------------------------------------- */ --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Scale — ramp tuned for clean editorial layout. Use clamp() in marketing pages so headlines breathe on wide screens. */ --fs-display: clamp(56px, 7.5vw, 96px); /* hero only */ --fs-h1: clamp(40px, 4.5vw, 64px); --fs-h2: clamp(28px, 2.8vw, 40px); --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-eyebrow: 12px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.08em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Spacing (8pt grid) ------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---- Radii --------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; /* default for cards */ --r-xl: 20px; --r-pill: 9999px; /* ---- Shadow / elevation ------------------------------------- */ /* Restrained, mostly hairline + soft drop. Avoid heavy or coloured glows. */ --shadow-1: 0 1px 0 rgba(20,18,42,0.04), 0 1px 2px rgba(20,18,42,0.04); --shadow-2: 0 1px 0 rgba(20,18,42,0.04), 0 8px 20px rgba(20,18,42,0.06); --shadow-3: 0 2px 4px rgba(20,18,42,0.06), 0 24px 48px rgba(20,18,42,0.10); --shadow-inset: inset 0 0 0 1px var(--pd-line); /* ---- Layout -------------------------------------------------- */ --container-max: 1240px; --container-pad: clamp(20px, 4vw, 48px); } /* ------------------------------------------------------------------ */ /* Base / element defaults */ /* ------------------------------------------------------------------ */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-on-light); background: var(--bg-page); } h1, h2, h3, h4, h5, .pd-display, .pd-headline { font-family: var(--font-display); color: var(--fg-on-light); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); font-weight: var(--fw-black); text-wrap: balance; } h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-5); } h2 { font-size: var(--fs-h2); margin: 0 0 var(--sp-4); } h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-3); font-weight: var(--fw-bold); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); margin: 0 0 var(--sp-3); font-weight: var(--fw-bold); line-height: var(--lh-snug); } p { margin: 0 0 var(--sp-4); max-width: 68ch; text-wrap: pretty; } small, .pd-caption { font-size: var(--fs-caption); color: var(--fg-on-light-muted); } /* Eyebrow / kicker — small uppercase label above titles */ .pd-eyebrow { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-strong); } /* Display — only for hero or single big statement */ .pd-display { font-size: var(--fs-display); font-weight: var(--fw-black); letter-spacing: -0.035em; } /* Green underline accent — the core brand visual on titles. Apply by adding class .pd-underline. Native text-decoration so the bar sits exactly below the word, riding the baseline. */ .pd-underline { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.10em; text-underline-offset: 0.04em; text-decoration-skip-ink: none; } /* On-dark surfaces */ .pd-on-dark, .pd-on-dark h1, .pd-on-dark h2, .pd-on-dark h3, .pd-on-dark h4 { color: var(--fg-on-dark); } .pd-on-dark p, .pd-on-dark .pd-muted { color: var(--fg-on-dark-muted); } /* Links */ a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } a:hover { text-decoration-color: var(--accent-strong); } /* Selection */ ::selection { background: var(--accent); color: var(--pd-navy); }