/* ============================================================================
STARINTEK — design-system.css
Production CSS derived from the Starintek brand guide (WCAG AA verified).
Load order: this file FIRST, then component/page styles that use the tokens.
FONTS — self-hosted (no external CDN). woff2 live in /assets/fonts/, declared in
css/fonts.css (loaded before this file). Preload above-the-fold faces in :
RULE: components must use var(--token) only — never hardcode colors,
sizes, or spacing. Spacing is always a multiple of 8px (4px micro only).
========================================================================== */
/* ===========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* ---- Colors — Brand ---- */
--color-primary: #0162F9;
--color-primary-hover: #0149C9;
--color-primary-active: #0C3FA8;
--color-primary-50: #E9F1FE;
--color-primary-100: #CFE0FD;
--color-primary-200: #A9C7F5; /* disabled */
--color-accent: #068FFB;
--color-navy: #001A5C;
--color-navy-deep: #00103D; /* footer — one shade below the CTA band */
--gradient-brand: linear-gradient(135deg, #001A5C 0%, #0162F9 55%, #068FFB 100%);
/* ---- Colors — Surfaces & Neutrals ---- */
--color-bg: #FFFFFF;
--color-bg-subtle: #F4F7FB;
--color-bg-muted: var(--color-bg-muted); /* hover wash: nav, drawer, ghost btn, disabled input */
--color-surface: #FFFFFF;
--color-border: #E2E8F2;
--color-border-card: #E7EDF6; /* cards (per design guide) */
--color-border-input: #D5DEEC;
--color-divider: #EDF1F7;
/* ---- Colors — Text ---- */
--color-heading: #0B1B3A;
--color-body: #3B4861;
--color-muted: #5E6A82;
--color-placeholder: #6B7689; /* 4.6:1 on white (was #8A95AC = 3.01:1) */
--color-inverse: #FFFFFF;
--color-inverse-muted: #B9C7E6;
/* ---- Colors — Functional ---- */
--color-success: #15875E; --color-success-bg: #E3F4EC; --color-success-text: #13402F;
--color-warning: #F6C657; --color-warning-bg: #FCF1D6; --color-warning-text: #5A4100; --color-warning-on-white: #8A5A00; /* 5.0:1 on warning-bg (was #9A6400 = 4.45:1) */
--color-error: #D32F2C; --color-error-hover: #B4302D; --color-error-bg: #FCEAEA; --color-error-text: #C2302D;
--color-info: #0162F9; --color-info-bg: #E9F1FE;
/* ---- Typography ---- */
--font-display: 'Poppins', sans-serif;
--font-body: 'IBM Plex Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--leading-tight: 1.2;
--leading-snug: 1.3;
--leading-normal: 1.6;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.08em;
/* ---- Spacing (base 8px, 4px micro) ---- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
--space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
--space-16: 64px; --space-20: 80px; --space-24: 96px;
/* ---- Radius ---- */
--radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
/* ---- Shadows (cool navy tint) ---- */
--shadow-xs: 0 1px 2px rgba(11,27,58,0.06);
--shadow-sm: 0 2px 6px rgba(11,27,58,0.07);
--shadow-md: 0 6px 16px rgba(11,27,58,0.10);
--shadow-lg: 0 14px 32px rgba(11,27,58,0.14);
--focus-ring: 0 0 0 3px rgba(1,98,249,0.20);
--focus-ring-danger: 0 0 0 3px rgba(211,47,44,0.25);
/* ---- Layout ---- */
--container-max: 1200px;
--container-wide: 1280px;
--bp-tablet: 768px;
--bp-desktop: 1024px;
--bp-wide: 1280px;
/* ---- Motion ---- */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* refined deceleration — UI default */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* confident, decisive — larger moves */
--transition-fast: 150ms ease; /* hovers, color, small UI */
--transition-base: 250ms ease; /* cards, dropdowns, drawer */
--transition-slow: 400ms ease-in-out; /* section reveal, hero */
}
/* ---- Dark theme (optional overrides) ---- */
[data-theme="dark"] {
--color-bg: #06122E;
--color-bg-subtle: #0B1B3A;
--color-bg-muted: #142A52;
--color-surface: #0E2147;
--color-border: #1C3160;
--color-border-card:#1C3160;
--color-divider: #16284E;
--color-heading: #EAF1FB;
--color-body: #C2CFE6;
--color-muted: #8FA1C4;
--color-primary: #2E84FF;
--color-primary-hover: #4F97FF;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
--shadow-md: 0 8px 20px rgba(0,0,0,0.50);
}
/* ===========================================================================
2. RESET (modern, minimal)
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
/* ===========================================================================
3. BASE ELEMENTS
========================================================================== */
body {
font-family: var(--font-body);
font-weight: var(--weight-regular);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-body);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased; /* crisper type — part of the premium look */
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--color-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: var(--weight-bold);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
/* Display / hero heading — opt-in, larger than H1 */
.display {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-5xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-heading);
}
a:not(.btn) { color: var(--color-primary); transition: color var(--transition-fast); }
a:not(.btn):hover { color: var(--color-primary-hover); }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: var(--text-sm); }
hr { border: none; border-top: 1px solid var(--color-divider); margin-block: var(--space-8); }
::selection { background: var(--color-primary-100); color: var(--color-heading); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* Mobile heading sizes */
@media (max-width: 767px) {
.display { font-size: var(--text-4xl); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
}
/* ===========================================================================
4. LAYOUT — container, grid, section rhythm
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-5);
}
.container--wide { max-width: var(--container-wide); }
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
/* Vertical rhythm for sections (padding-block only — won't clash with inline paddings) */
.section { padding-block: var(--space-16); }
.section--lg{ padding-block: var(--space-20); }
@media (min-width: 1024px) {
.section { padding-block: var(--space-20); }
.section--lg{ padding-block: var(--space-24); }
}
.section--subtle { background-color: var(--color-bg-subtle); }
.section--navy { background-color: var(--color-navy); color: var(--color-inverse-muted); }
.section--navy :is(h1,h2,h3,h4,.display) { color: var(--color-inverse); }
/* ===========================================================================
5. TYPOGRAPHY HELPERS
========================================================================== */
.eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-primary);
}
.lead { font-size: var(--text-lg); color: var(--color-body); }
.text-muted { color: var(--color-muted); }
.text-center{ text-align: center; }
.measure { max-width: 65ch; } /* readable line length for body copy */
/* ===========================================================================
6. BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 40px;
padding-inline: var(--space-5);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
/* Transform/box-shadow on a refined curve (lift + press); colour/filter snap. */
transition:
transform var(--transition-fast) var(--ease-out-quart),
box-shadow var(--transition-fast) var(--ease-out-quart),
background var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
filter var(--transition-fast);
}
.btn--lg { height: 48px; padding-inline: var(--space-6); }
.btn--sm { height: 32px; padding-inline: var(--space-4); font-size: var(--text-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { cursor: not-allowed; }
/* Primary — lift on hover, settle on press */
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-primary-active); transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { background: var(--color-primary-200); }
/* Primary — gradient (hero / 1 accent per screen) — lift + restrained sheen sweep */
.btn-gradient { position: relative; overflow: hidden; z-index: 0; background: var(--gradient-brand); color: #fff; }
.btn-gradient::before {
content: ""; position: absolute; inset: 0; z-index: -1; /* above the gradient, below the label */
background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
transform: translateX(-130%);
transition: transform 600ms var(--ease-out-quart);
pointer-events: none;
}
.btn-gradient:hover { filter: brightness(0.97); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-gradient:hover::before { transform: translateX(130%); }
.btn-gradient:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* Secondary (outline) — gentle lift */
.btn-secondary {
background: var(--color-bg);
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary-50); color: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-secondary:active { background: var(--color-primary-100); color: var(--color-primary-active); border-color: var(--color-primary-active); transform: translateY(0); box-shadow: none; }
.btn-secondary:disabled { color: var(--color-primary-200); border-color: var(--color-primary-200); }
/* Ghost — lowest emphasis: colour shift only, no lift (keeps the visual hierarchy) */
.btn-ghost { background: transparent; color: var(--color-heading); }
.btn-ghost:hover { background: var(--color-bg-muted); color: var(--color-primary); }
.btn-ghost:active { background: var(--color-border); color: var(--color-primary-active); }
.btn-ghost:disabled { color: #9AA4B8; }
/* Danger — lift on hover, settle on press */
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { background: var(--color-error-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-danger:active { background: #9A2825; transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-danger:focus-visible { box-shadow: var(--focus-ring-danger); }
.btn-danger:disabled { background: #EBA6A4; }
/* Disabled never lifts; reduced-motion users get colour/shadow feedback without positional shift */
.btn:disabled, .btn:disabled:hover { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.btn:hover, .btn:active { transform: none; }
.btn-gradient::before { display: none; }
}
/* ===========================================================================
7. FORM ELEMENTS
========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label {
font-family: var(--font-body);
font-weight: var(--weight-medium);
font-size: var(--text-sm);
color: var(--color-heading);
}
.input, .textarea, .select {
width: 100%;
height: 44px;
padding-inline: 14px;
background: var(--color-surface);
color: var(--color-body);
border: 1px solid var(--color-border-input);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-base);
transition: var(--transition-fast);
}
.textarea { height: auto; min-height: 120px; padding-block: 12px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-placeholder); }
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
}
.input--error { border-color: var(--color-error); }
.input--error:focus { box-shadow: var(--focus-ring-danger); }
.input:disabled, .textarea:disabled { background: var(--color-bg-muted); border-color: var(--color-border); color: var(--color-muted); }
.field-error { font-size: var(--text-xs); color: var(--color-error-text); }
/* ===========================================================================
8. CARDS
========================================================================== */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border-card);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.card--interactive { transition: var(--transition-base); }
.card--interactive:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px); /* ≤2px lift per guide */
border-color: var(--color-primary-100);
}
/* ===========================================================================
9. TAGS / BADGES
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
border-radius: var(--radius-full);
padding: 4px 12px;
font-family: var(--font-body);
font-weight: var(--weight-medium);
font-size: var(--text-sm);
line-height: 1.2;
}
.badge--service { background: var(--color-primary-50); color: #003C9E; }
.badge--industry { background: var(--color-bg-muted); color: var(--color-body); }
.badge--region { background: #E6F4FF; color: #0C447C; }
.badge--new { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--note { background: var(--color-warning-bg); color: var(--color-warning-text); }
/* Tech-stack tag (case studies) — rectangular */
.tag-tech {
display: inline-flex;
align-items: center;
border-radius: var(--radius-sm);
padding: 4px 10px;
background: var(--color-bg-muted);
color: var(--color-body);
font-size: var(--text-xs);
}
/* ===========================================================================
10. STATS (count-up row) — [150]+ · [13] · [95]%
========================================================================== */
.stat__value {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-4xl);
line-height: var(--leading-tight);
color: var(--color-primary);
}
.stat__label { font-size: var(--text-sm); color: var(--color-muted); }
/* ===========================================================================
11. REDUCED MOTION (accessibility)
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}