/* =========================================================================
Proper Sky — Core Design Tokens
Source of truth: Brand Guidelines 2024 (V.01 | April 24).
Color palette confirmed via Proper-Sky_Color_RGB.svg.
Type: Plus Jakarta Sans (4 weights — Light / Regular / Medium / Bold).
========================================================================= */
/* ---------- @font-face ----------
Primary: variable fonts (full 200–800 axis, italic + roman as separate files).
Static cuts in /fonts remain available as a fallback chain — older renderers
without variable-font support will pick the nearest static weight. */
@font-face {
font-family: "Plus Jakarta Sans";
src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations"),
url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype-variations"),
url("fonts/PlusJakartaSans-Italic.ttf") format("truetype");
font-weight: 200 800;
font-style: italic;
font-display: swap;
}
/* =========================================================================
TOKENS
Reconciled against propersky.com computed CSS (Design Extractor capture
in /reference). Where the live site refines the 2024 PDF, the site wins
for visual fidelity — V/TO still wins for voice/positioning.
========================================================================= */
:root {
/* ---------- Brand palette (canonical) ----------
Brand Guidelines 2024 §02 named these "Dark Blue / Light Blue /
Greenish Blue / Aqua (the Ink) / White". The live site (and the
Design Extractor capture) refine the palette: the deep navy used for
primary text and dark surfaces is #0c0e16, with #1a1c30 retained as
a depth accent. We honor the site's split. */
--ps-primary-blue: #257CA8; /* "Trust Blue" / "Primary Blue" — primary brand */
--ps-secondary-teal: #40CAC3; /* "Innovation Teal" — accent / gradient overlay */
--ps-navy: #0C0E16; /* "Professional Navy" — primary text + dark grounds */
--ps-cloud-gray: #EDF4F8; /* "Cloud Gray" — light bg sections, subtle contrast */
--ps-tertiary-dark: #1A1C30; /* depth accent (PDF's "Aqua" cell) */
--ps-white: #FFFFFF;
/* ---------- PDF-named aliases (kept for back-compat) ---------- */
--ps-dark-blue: var(--ps-primary-blue);
--ps-light-blue: #4C8BC3; /* PDF "Light Blue" — supporting / not in site palette */
--ps-aqua: var(--ps-secondary-teal);
--ps-ink: var(--ps-navy);
/* ---------- Tints + shades (derived; use sparingly) ---------- */
--ps-dark-blue-700: #1B5E80;
--ps-dark-blue-500: #257CA8;
--ps-dark-blue-300: #6BAACD;
--ps-dark-blue-100: #D4E5EF;
--ps-dark-blue-50: var(--ps-cloud-gray);
--ps-aqua-700: #2EA39D;
--ps-aqua-300: #84DCD7;
--ps-aqua-100: #D9F4F2;
/* ---------- Icon ramp — "Airy" (SOURCE OF TRUTH for multi-tone icons) ----------
The 4 tones every illustrative icon is normalized to. This REPLACES the
retired Flaticon ramp (#2590C3 / #67C0EA / #87F5ED) — treat that ramp as
if it no longer exists. Every value sits on the brand hue axis: the blues
on Trust Blue's hue (200deg), the lights on Innovation Teal's (177deg), so
the whole set derives from just the two core brand colors.
Recipe: sort an icon's distinct fills dark->light, map onto deep/mid/teal/light. */
--ps-icon-deep: #257CA8; /* darkest plane — = Trust Blue (--ps-primary-blue) */
--ps-icon-mid: #3B9DCE; /* mid plane — tint of Trust Blue, kept tight to deep */
--ps-icon-teal: #40CAC3; /* = Innovation Teal (--ps-secondary-teal) */
--ps-icon-light: #93F6F1; /* highlight — bright tint of Innovation Teal */
--ps-ink-900: var(--ps-navy);
--ps-ink-800: #1A1C30;
--ps-ink-700: #2A2C44;
--ps-ink-500: #4A4C66;
--ps-ink-300: #8688A0;
/* ---------- Callout / high-energy accent ----------
Not a brand color — a deliberate attention flag for counts, urgent
badges, "new" markers, hot CTAs. Use sparingly; never as decoration. */
--ps-flag: #C0463A; /* "Flag Red" — high-energy callout */
--ps-flag-soft: #F8E6E3; /* soft ground for flag-tinted badges */
--ps-flag-ink: #9A352B; /* readable text on flag-soft ground */
--ps-ok-soft: #D9F4F2; /* soft ground for "good / after" badges */
/* ---------- Neutrals ---------- */
--ps-paper: #FFFFFF;
--ps-paper-soft: var(--ps-cloud-gray); /* canonical: #EDF4F8 */
--ps-paper-band: #DCE7F1;
--ps-line: #DCE3EC;
--ps-line-strong: #C9D1DD;
/* ---------- Semantic foreground ---------- */
--fg-1: var(--ps-navy); /* primary text — never pure black */
--fg-2: var(--ps-ink-500); /* secondary text */
--fg-3: var(--ps-ink-300); /* muted / captions */
--fg-on-dark: var(--ps-white);
--fg-on-brand: var(--ps-white);
--fg-link: var(--ps-primary-blue);
--fg-link-hover: var(--ps-dark-blue-700);
/* ---------- Semantic backgrounds ---------- */
--bg-app: var(--ps-paper);
--bg-surface: var(--ps-paper);
--bg-surface-soft: var(--ps-paper-soft);
--bg-band: var(--ps-paper-band);
--bg-dark: var(--ps-navy);
--bg-brand: var(--ps-primary-blue);
--bg-accent: var(--ps-secondary-teal);
/* ---------- Gradient text (signature headline treatment) ----------
Axis = 45deg (SW→NE), matching the hero image's bottom-left→top-right wash.
Two palettes, each with a forward (→, deep→bright) and reverse (←, bright→deep):
• Vivid (for dark grounds): dark-light (→) / light-dark (←)
• On-light (legible on white/cloud-gray): on-light (→) / on-light-reverse (←) */
--grad-text-dark-light: linear-gradient(45deg, #2A86B5 0%, #3DAAcB 42%, #5FE0DA 100%);
--grad-text-light-dark: linear-gradient(45deg, #5FE0DA 0%, #3DAACB 58%, #2A86B5 100%);
--grad-text-on-light: linear-gradient(45deg, #1B5E80 0%, #2F88B6 55%, #4FB4C9 100%);
--grad-text-on-light-reverse: linear-gradient(45deg, #4FB4C9 0%, #2F88B6 45%, #1B5E80 100%);
/* ====================================================================
IMAGE OVERLAY GRADIENT SYSTEM
Every hero/feature photo on the site is built as a STACK, not a single
wash. Compose bottom→top:
1. the photograph
2. --duotone-* brand color-grade (shadows→navy, lights→teal)
3. --scrim-* navy darkening for white-text legibility
4. --glow-teal-* optional signature teal light-leak (one corner)
Stops below are sampled from the live site (hero captures).
==================================================================== */
/* 1 · DUOTONE color-grade — drops any photo into the brand range.
Apply as a tri-tone map, or approximate live with two stacked layers:
a navy multiply + a teal screen. Keep photos cool, never full-color. */
--duotone-shadow: #0C0E16; /* darkest tones → Professional Navy */
--duotone-mid: #1B5E80; /* midtones → deep Trust Blue */
--duotone-light: #5FE0DA; /* highlights → Innovation Teal */
/* 2 · SCRIMS — navy (12,14,22) ramps that protect text. Pick by text side. */
--scrim-left: linear-gradient(to right, rgba(12,14,22,.96) 0%, rgba(12,14,22,.85) 30%, rgba(12,14,22,.18) 68%, rgba(12,14,22,0) 100%);
--scrim-bottom: linear-gradient(to top, rgba(12,14,22,.92) 0%, rgba(12,14,22,.45) 38%, rgba(12,14,22,0) 75%);
--scrim-veil: radial-gradient(135% 115% at 50% 42%, rgba(12,14,22,.30) 0%, rgba(12,14,22,.82) 100%); /* full-bleed: even darken, weighted to edges */
/* 3 · TEAL ACCENT GLOW — signature light-leak. One corner only, never centered. */
--glow-teal-tr: radial-gradient(120% 130% at 100% 0%, rgba(64,202,195,.50) 0%, rgba(64,202,195,.14) 32%, rgba(64,202,195,0) 58%);
--glow-teal-br: radial-gradient(120% 130% at 100% 100%, rgba(64,202,195,.45) 0%, rgba(64,202,195,.12) 32%, rgba(64,202,195,0) 58%);
/* ====================================================================
HERO WASH FAMILY ← the real mechanism behind every hero photo.
The photo KEEPS its color (skin, shirts, warm lights all survive) —
it's only lightly cooled, then ONE translucent wash is laid on top.
This is NOT a duotone; the duotone block above is an optional extreme.
All stops sampled from live propersky.com hero captures.
Three shared ingredients, recombined into named geometries:
· indigo deep-corner (the navy pushes toward violet in its darkest pool)
· navy text-scrim (heavy on the text side, fades across the photo)
· teal glow (the bright top-right signature, in all heroes)
==================================================================== */
/* ====================================================================
HERO WASH FAMILY — PALETTE-PURE. Every wash color is one of the 6
canonical tokens, laid TRANSLUCENT over the photo. The photo blend
darkens the result — which is why live corner-samples read darker &
greener than the raw token (that's the blend, not a different color).
Build from the raw tokens; never hardcode the blended sample.
Ingredients by palette role:
· Tertiary Dark #1A1C30 rgb(26,28,48) depth accent → deepest corner
· Professional Navy #0C0E16 rgb(12,14,22) dark grounds → text scrim
· Trust Blue #257CA8 rgb(37,124,168) primary → mid transition + cool unify
· Innovation Teal #40CAC3 rgb(64,202,195) accent/overlay → glow highlight
==================================================================== */
/* Gentle photo prep — desaturate & lift contrast; the cool cast comes
from the Trust-Blue unify layer in each wash, not a hue-rotate. */
--cool-grade: saturate(.72) brightness(.95) contrast(1.06);
/* A · NAVY DIAGONAL — primary hero wash (Proper Way, Managed IT heroes).
Tertiary-Dark corner → Navy text column → Trust-Blue mid → Innovation-Teal glow TR. */
--wash-navy-diagonal:
radial-gradient(78% 105% at 100% 0%, rgba(64,202,195,.44) 0%, rgba(64,202,195,.12) 40%, rgba(64,202,195,0) 68%), /* Innovation Teal glow */
radial-gradient(90% 100% at 0% 100%, rgba(26,28,48,.92) 0%, rgba(26,28,48,.30) 46%, rgba(26,28,48,0) 72%), /* Tertiary Dark depth */
linear-gradient(100deg, rgba(12,14,22,.92) 0%, rgba(12,14,22,.68) 26%, rgba(37,124,168,.16) 64%, rgba(37,124,168,0) 100%), /* Navy scrim → Trust Blue mid */
linear-gradient(0deg, rgba(37,124,168,.10), rgba(37,124,168,.10)); /* Trust Blue cool-unify */
/* B · TEAL FRAME — people/lifestyle hero wash (Careers hero).
Innovation-Teal pooled lower-left & top-right, minimal navy, bright warm center. */
--wash-teal-frame:
radial-gradient(82% 118% at 100% 0%, rgba(64,202,195,.54) 0%, rgba(64,202,195,.16) 36%, rgba(64,202,195,0) 64%), /* Innovation Teal glow TR */
radial-gradient(80% 118% at 0% 100%, rgba(64,202,195,.50) 0%, rgba(64,202,195,.14) 42%, rgba(64,202,195,0) 70%), /* Innovation Teal glow BL (darkens over photo → deep teal) */
linear-gradient(180deg, rgba(12,14,22,.22) 0%, rgba(12,14,22,0) 40%, rgba(12,14,22,.12) 100%), /* Navy legibility veil */
linear-gradient(0deg, rgba(37,124,168,.08), rgba(37,124,168,.08)); /* Trust Blue cool-unify */
/* ---------- State (utility) ---------- */
--st-success: #2E9E6E;
--st-warning: #C9881C;
--st-danger: #C0463A;
--st-info: var(--ps-light-blue);
/* ---------- Type family ---------- */
--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* ---------- Type scale ----------
Canonical site sizes from Design Extractor: 52 / 46 / 30 / 22 / 18 / 17 / 13.
We expose a responsive ladder for marketing surfaces and the exact
site-canonical sizes as --t-* tokens for product UI parity. */
--t-display: clamp(48px, 6vw, 84px);
--t-h1: clamp(40px, 4.6vw, 52px); /* canonical max = 52px (--t-site-h1) */
--t-h2: clamp(30px, 3.2vw, 46px); /* canonical max = 46px (--t-site-h2) */
--t-h3: clamp(22px, 2.2vw, 30px); /* canonical max = 30px (--t-site-h3) */
--t-h4: 18px;
--t-body-lg: 18px; /* canonical body-large */
--t-body: 17px; /* canonical body-medium ≈ 17.1px */
--t-body-sm: 14px;
--t-caption: 13.5px; /* canonical label-small */
--t-eyebrow: 15px;
--t-button: 22px; /* canonical button */
/* Site-canonical (use when matching propersky.com pixel-exact) */
--t-site-h1: 52px;
--t-site-h2: 46px;
--t-site-h3: 30px;
--t-site-body: 18px;
--t-site-body-sm: 17.1px;
/* ---------- Weights (PDF: Light/Regular/Medium/Bold) ---------- */
--w-light: 300;
--w-regular: 400;
--w-medium: 500; /* headlines default per Brand Guidelines */
--w-bold: 700; /* highlights + site Heading-Medium */
/* ---------- Line heights ----------
Site uses generous 1.8 body line-height for readability. */
--lh-tight: 1.0;
--lh-snug: 1.1;
--lh-normal: 1.35;
--lh-body: 1.8; /* canonical body */
--lh-relaxed: 1.9;
/* ---------- Letter spacing ---------- */
--ls-tight: -0.02em;
--ls-snug: -0.01em;
--ls-normal: 0;
--ls-h3: 0.01em; /* canonical h3 letter-spacing (~0.30188px @ 30px) */
--ls-eyebrow: 0.08em;
/* ---------- Spacing ----------
Site-canonical scale (Design Extractor): xs/sm/md/lg/xl/2xl/3xl/4xl/5xl
= 8 / 12 / 16 / 18 / 30 / 36 / 40 / 63 / 64. We also keep the legacy
numeric --s-* scale for back-compat with existing components. */
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 18px;
--space-xl: 30px;
--space-2xl: 36px;
--space-3xl: 40px;
--space-4xl: 63px;
--space-5xl: 64px;
--s-0: 0;
--s-1: 4px;
--s-2: var(--space-xs);
--s-3: var(--space-sm);
--s-4: var(--space-md);
--s-5: var(--space-xl);
--s-6: var(--space-2xl);
--s-7: var(--space-4xl);
--s-8: var(--space-5xl);
--s-9: 96px;
--s-10: 128px;
/* ---------- Radii (canonical: 8 / 15 / 44 / 60) ---------- */
--r-1: 8px; /* canonical small */
--r-2: 8px;
--r-3: 15px; /* canonical medium */
--r-4: 15px;
--r-5: 44px; /* canonical large */
--r-pill: 60px; /* canonical pill */
--radius-small: 8px;
--radius-medium: 15px;
--radius-large: 44px;
--radius-pill: 60px;
/* ---------- Elevation ----------
Canonical site shadow uses a blue-tinted cast, not neutral gray:
rgba(37, 124, 168, 0.25) 0 14px 18px -2px. */
--sh-1: 0 1px 2px rgba(37, 124, 168, 0.10);
--sh-2: 0 6px 12px -2px rgba(37, 124, 168, 0.18);
--sh-3: 0 14px 18px -2px rgba(37, 124, 168, 0.25); /* canonical */
--sh-4: 0 24px 48px -8px rgba(37, 124, 168, 0.30);
/* ---------- Layout (canonical: 1460 container, 20 gutter, 2rem section) ---------- */
--container: 1460px;
--container-narrow: 880px;
--site-width: 1460px;
--site-gutter: 20px;
--gutter: var(--site-gutter);
--section-spacing-y: 2rem; /* canonical site base */
--section-pad: clamp(64px, 8vw, 112px); /* marketing pages still need generous chrome */
/* ---------- Motion ---------- */
--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--d-fast: 120ms;
--d-base: 220ms;
--d-slow: 420ms;
}
/* =========================================================================
SEMANTIC TYPE STYLES
Per Brand Guidelines 2024 §03 "Levels and Combinations":
L1 h1 → Medium
L2 h2 → Medium
L3 highlights → Bold / Medium
L4 links → Medium
L5 paragraph → Regular
Site-canonical refinements (sparingly): tighter tracking on display sizes.
========================================================================= */
html { font-family: var(--font-sans); color: var(--fg-1); }
body { font: var(--w-regular) var(--t-body)/var(--lh-body) var(--font-sans); color: var(--fg-1); -webkit-font-smoothing: antialiased; }
.ps-display {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--t-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--fg-1);
}
h1, .ps-h1 {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--t-h1);
line-height: var(--lh-snug);
letter-spacing: var(--ls-tight);
color: var(--fg-1);
}
h2, .ps-h2 {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--t-h2);
line-height: var(--lh-snug);
letter-spacing: var(--ls-snug);
color: var(--fg-1);
}
h3, .ps-h3 {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--t-h3);
line-height: var(--lh-normal);
color: var(--fg-1);
}
h4, .ps-h4 {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--t-h4);
line-height: var(--lh-normal);
color: var(--fg-1);
}
/* L3 — "highlights": short callouts, stat numbers, accented inline phrases */
.ps-highlight {
font-family: var(--font-sans);
font-weight: var(--w-bold);
color: var(--ps-dark-blue);
}
/* L4 — links + company info */
a, .ps-link {
color: var(--fg-link);
font-weight: var(--w-medium);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--d-fast) var(--ease-standard), border-color var(--d-fast) var(--ease-standard);
}
a:hover, .ps-link:hover {
color: var(--fg-link-hover);
border-bottom-color: currentColor;
}
/* L5 — body */
p, .ps-p {
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--t-body);
line-height: var(--lh-body);
color: var(--fg-1);
text-wrap: pretty;
max-width: 68ch;
}
.ps-p--lg { font-size: var(--t-body-lg); }
.ps-p--sm { font-size: var(--t-body-sm); }
/* Eyebrow / section kicker — small, tracked, brand-blue. Use above section heads. */
.ps-eyebrow {
font-family: var(--font-sans);
font-weight: var(--w-medium);
font-size: var(--t-eyebrow);
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--ps-dark-blue);
}
.ps-caption {
font-size: var(--t-caption);
color: var(--fg-3);
line-height: var(--lh-normal);
}
code, .ps-code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--ps-paper-band);
padding: 0.12em 0.4em;
border-radius: var(--r-1);
color: var(--ps-ink-700);
}
/* =========================================================================
GRADIENT TEXT — signature headline treatment (display only)
Apply to large headings only (≥28px). Always set a `color` first as a
fallback for browsers without background-clip:text. Never use on body copy.
========================================================================= */
.ps-text-gradient,
.ps-text-gradient--reverse,
.ps-text-gradient--on-light,
.ps-text-gradient--on-light-reverse {
color: var(--ps-primary-blue); /* fallback */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ps-text-gradient { background-image: var(--grad-text-dark-light); }
.ps-text-gradient--reverse { background-image: var(--grad-text-light-dark); }
.ps-text-gradient--on-light { background-image: var(--grad-text-on-light); }
.ps-text-gradient--on-light-reverse { background-image: var(--grad-text-on-light-reverse); }
/* =========================================================================
LIVE DUOTONE (tritone) — grade any full-color photo into the brand range
in-browser, no Photoshop. The brand grade is a THREE-stop ramp:
shadows→navy, midtones→deep blue, highlights→teal. A two-color blend skips
the blue mid, so we use an SVG gradient-map filter (#ps-tritone). Include
the filter SVG once per page (see snippet in the Gradient System page),
then:
Tune punch with --duotone-contrast; edit the filter's tableValues to
re-map the ramp. The conceptual anchors are --duotone-shadow / -mid /
-light below.
========================================================================= */
.ps-duotone {
--duotone-contrast: 1.05;
position: relative;
isolation: isolate;
overflow: hidden;
display: block;
background: var(--duotone-shadow); /* fallback floor if filter unsupported */
}
.ps-duotone > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(var(--duotone-contrast)) url(#ps-tritone);
}
/* Softer variant — fades the graded image back over the raw a touch. */
.ps-duotone--soft > img { opacity: 0.82; }
.ps-duotone--soft::after {
content: "";
position: absolute;
inset: 0;
background: var(--duotone-mid);
mix-blend-mode: soft-light;
opacity: .35;
pointer-events: none;
}
/* =========================================================================
HERO WASH — the everyday photo treatment (NOT duotone).
Wrap a photo, give it a wash variant; the ![]()
keeps its real color
and is only gently cooled. Drop copy in a .ps-hero__copy child.
…
