/* ==========================================================================
SSK Business Services — THEME CONSTANTS
==========================================================================
THIS IS THE ONE FILE TO EDIT TO RE-THEME THE WHOLE WEBSITE.
Every colour, tint, radius, font, spacing step and motion curve used by the
site is declared here as a custom property. style.css, animations.css and
responsive.css only ever reference these names — they never hard-code a
colour. The inline SVG artwork on the article and service cards also reads
these variables, so changing a tint here restyles the illustrations too.
Quick recipes
-------------
Change the brand colour ................ --brand (and --brand-deep/--brand-bright)
Change the signal/accent colour ......... --accent (and --accent-deep/-bright)
Go from light to dark ................... --paper, --surface, --ink, --muted, --line
Change the accent card tints ............ the --tint-* block
Change typography ....................... --font-display, --font-body
(also swap the Google Fonts )
Loosen or tighten the layout ............ --container, --gutter, --section-space
Change corner roundness ................. the --r-* block
Speed animation up or down .............. the --t-* block
Load order matters: theme.css must come before style.css.
========================================================================== */
:root {
/* ================================================================= BRAND
A two-colour system.
--brand deep petrol. Brand, structure, links, focus, hovers, fills.
--accent the SSK logo green. Kept deliberately so the palette still
reads as SSK: it marks affirmative, live and progress states
(status dots, ticks, counters, the process timeline, the
scroll progress bar, list markers, the button hover wipe).
Contrast rule: green TEXT uses --accent-deep (6.0:1 on white).
Green ICONS, DOTS, BARS and FILLS use --accent (3.8:1 — fine for
non-text UI, not for small text). Do not swap the two.
==================================================================== */
--brand: #003349;
--brand-deep: #00222f;
--brand-bright: #01506f;
--brand-rgb: 0, 51, 73;
/* SSK logo green, sampled from assets/images/brand/ssk-mark.png */
--accent: #129820;
--accent-deep: #0d7318;
--accent-bright: #17b528;
--accent-rgb: 18, 152, 32;
/* Primary button fill. Green, and it stays green on hover — hover feedback
is a lift and a deeper shadow, never a colour change.
Uses --accent-deep because white on #129820 is only 3.8:1, under the 4.5:1
minimum for button text, while white on #0d7318 is 6.0:1. */
--btn-primary: var(--accent-deep);
/* ------------------------------------------------------------- INK / TEXT
Neutrals carry a trace of the petrol so text and hairlines sit in the
same family as the brand rather than reading as flat grey. */
--ink: #0d1c24; /* 15.6:1 on --paper */
--ink-soft: #24343c; /* 11.6:1 */
--muted: #4c5b63; /* 6.2:1 — body secondary */
--muted-2: #616f77; /* 4.6:1 — eyebrows and small labels.
Do not lighten past this: these are real text and
a paler grey drops below the 4.5:1 minimum. */
/* -------------------------------------------------------------- SURFACES */
--paper: #f1f3f4; /* page background */
--paper-rgb: 241, 243, 244; /* for scrims over the hero video */
--surface: #ffffff; /* cards, panels, header */
--surface-2: #e7ebec; /* alternate band */
--ink-surface: #003349; /* dark sections — the brand petrol */
/* ----------------------------------------------------------------- TINTS
Each tint has a base (card background), a mid (illustration fill) and
an ink (illustration line + icon). Keep the three in the same family.
Mint stays in the logo-green family; blue is pulled toward the petrol. */
--tint-mint: #e5f0e3;
--tint-mint-mid: #cee3ca;
--tint-mint-ink: #0d7318;
--tint-blue: #d9e5ea;
--tint-blue-mid: #bfd3db;
--tint-blue-ink: #17566e;
--tint-cream: #f5eee0;
--tint-cream-mid: #e8dcc4;
--tint-cream-ink: #9c8557;
--tint-blush: #f7e7e9;
--tint-blush-mid: #eecdd2;
--tint-blush-ink: #b87b88;
--tint-lilac: #e8e7f1;
--tint-lilac-mid: #d3d1e6;
--tint-lilac-ink: #6b66a0;
--tint-stone: #eaecec;
--tint-stone-mid: #d6dadb;
--tint-stone-ink: #77828a;
/* ----------------------------------------------------------------- LINES */
--line: rgba(0, 51, 73, 0.11);
--line-2: rgba(0, 51, 73, 0.20);
--line-inv: rgba(255, 255, 255, 0.14);
/* -------------------------------------------------- ON-DARK (inverse ink)
Used for text and hairlines sitting on --ink-surface or over imagery. */
--on-ink: #ffffff;
--on-ink-82: rgba(255, 255, 255, 0.82);
--on-ink-78: rgba(255, 255, 255, 0.78);
--on-ink-62: rgba(255, 255, 255, 0.62);
--on-ink-60: rgba(255, 255, 255, 0.6);
--on-ink-55: rgba(255, 255, 255, 0.55);
--on-ink-48: rgba(255, 255, 255, 0.48);
--on-ink-35: rgba(255, 255, 255, 0.35);
--on-ink-20: rgba(255, 255, 255, 0.2);
--hairline-inv: rgba(255, 255, 255, 0.08);
--hairline-inv-2: rgba(255, 255, 255, 0.06);
--hairline-inv-3: rgba(255, 255, 255, 0.05);
/* --------------------------------------------------------- GLASS / BLUR
Backgrounds for the sticky header, dropdowns and floating chips. */
--glass: rgba(255, 255, 255, 0.86);
--glass-strong: rgba(255, 255, 255, 0.96);
--glass-90: rgba(255, 255, 255, 0.9);
--glass-92: rgba(255, 255, 255, 0.92);
--float-glass: rgba(255, 255, 255, 0.94);
/* ------------------------------------------------------- SUBTLE INK WASHES
Faint neutral overlays: grid lines, icon chips, decorative arcs. */
--wash-0: rgba(0, 51, 73, 0.02);
--wash-1: rgba(0, 51, 73, 0.05);
--wash-2: rgba(0, 51, 73, 0.08);
--wash-3: rgba(0, 51, 73, 0.06);
--wash-4: rgba(0, 51, 73, 0.14);
/* --------------------------------------------------- IMAGE OVERLAY VEILS */
--veil-strong: rgba(0, 22, 32, 0.88);
--veil-soft: rgba(0, 22, 32, 0.52);
/* ------------------------------------------------------------ FOCUS RING */
--focus-ring: rgba(var(--brand-rgb), 0.16);
/* ---------------------------------------------------------- CUSTOM CURSOR */
--cursor-fill: rgba(0, 51, 73, 0.92);
/* --------------------------------------------------------------- FEEDBACK */
--danger: #c2382b;
--danger-soft: #fbe9e7;
--danger-ink: #a32e22;
--danger-ring: rgba(194, 56, 43, 0.1);
/* --------------------------------------------------------------- SHADOWS
Deliberately restrained — the design is close to shadowless. */
--shadow-sm: 0 1px 2px rgba(0, 51, 73, 0.05);
--shadow-md: 0 18px 40px -24px rgba(0, 51, 73, 0.22);
--shadow-lg: 0 40px 80px -40px rgba(0, 51, 73, 0.32);
--shadow-float: 0 20px 44px -22px rgba(0, 22, 32, 0.5);
/* -------------------------------------------------------------- GEOMETRY */
--container: 1320px;
--gutter: 24px;
--r-xs: 10px;
--r-sm: 14px;
--r-md: 20px;
--r-lg: 28px;
--r-xl: 36px;
--r-pill: 999px;
/* ---------------------------------------------------------------- RHYTHM */
--section-space: clamp(74px, 9vw, 148px);
--section-space-sm: clamp(56px, 6vw, 96px);
--header-h: 76px;
/* ------------------------------------------------------------ TYPOGRAPHY
Swap the Google Fonts in each page's if you change these. */
--font-display: "Inter Tight", "Segoe UI", system-ui, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
/* ---------------------------------------------------------------- MOTION */
--t-fast: 0.22s cubic-bezier(0.33, 1, 0.68, 1);
--t-norm: 0.42s cubic-bezier(0.33, 1, 0.68, 1);
--t-slow: 0.72s cubic-bezier(0.16, 1, 0.3, 1);
/* ------------------------------------------------- DECORATIVE BACKGROUNDS */
--grid-line: rgba(0, 51, 73, 0.055);
--grid-size: 76px;
/* Hero washes: a soft logo-green bloom over a petrol one */
--glow-mint: rgba(var(--accent-rgb), 0.16);
--glow-blue: rgba(var(--brand-rgb), 0.14);
}
/* --------------------------------------------------------------------------
Tint helper classes. Applying one of these sets the three artwork variables
at once, so both the card background and its inline SVG stay in family.
-------------------------------------------------------------------------- */
.t-mint { --art-bg: var(--tint-mint); --art-mid: var(--tint-mint-mid); --art-ink: var(--tint-mint-ink); }
.t-blue { --art-bg: var(--tint-blue); --art-mid: var(--tint-blue-mid); --art-ink: var(--tint-blue-ink); }
.t-cream { --art-bg: var(--tint-cream); --art-mid: var(--tint-cream-mid); --art-ink: var(--tint-cream-ink); }
.t-blush { --art-bg: var(--tint-blush); --art-mid: var(--tint-blush-mid); --art-ink: var(--tint-blush-ink); }
.t-lilac { --art-bg: var(--tint-lilac); --art-mid: var(--tint-lilac-mid); --art-ink: var(--tint-lilac-ink); }
.t-stone { --art-bg: var(--tint-stone); --art-mid: var(--tint-stone-mid); --art-ink: var(--tint-stone-ink); }