/* ============================================================ Paulmar — design tokens (drop-in) ------------------------------------------------------------ Source of truth: the live paulmar WordPress theme web/wp-content/themes/paulmar/theme.json (palette, type, spacing) web/wp-content/themes/paulmar/assets/css/bespoke.css (:root + component literals) Variable names match bespoke.css exactly, so a project that adopts this file can paste component CSS from the theme unchanged. Usage: body { font: 16.5px/1.62 var(--pm-font-sans); color: var(--pm-ink); } Fonts: the @font-face block expects the eleven IBM Plex .woff2 files in ./assets/fonts/ (shipped alongside this file). ============================================================ */ /* ---------- self-hosted IBM Plex (OFL 1.1) ---------- */ @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-sans-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-sans-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-serif-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-serif-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 500; font-style: italic; font-display: swap; src: url("assets/fonts/ibm-plex-serif-500-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-serif-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-serif-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); } :root { /* ---------- core palette (identical to bespoke.css:10-24 and theme.json palette) ---------- */ --pm-navy: #0a2845; /* brand base: bands, footer, headings, hero panels */ --pm-blue-800: #0e4c8a; /* primary button, links, active nav, outline-button border */ --pm-blue-600: #1565ad; /* eyebrow text, logo core */ --pm-blue-500: #2c7bc4; /* focus ring, card hover border, secondary ring */ --pm-blue-300: #9cc4e6; /* serif numerals, mobile-menu email/tagline */ --pm-blue-050: #eef4fb; /* tinted panels (CTA band, testimonial), outline hover */ --pm-ink: #16222e; /* body text, nav links */ --pm-slate: #5b6770; /* prose paragraphs, secondary copy, wordmark */ --pm-mist: #8a98a4; /* captions, muted markers */ --pm-line: #dbe3ea; /* every hairline border / divider */ --pm-cloud: #f3f6f9; /* light section backdrop, dropdown hover */ --pm-paper: #ffffff; /* page background, cards */ --pm-gold: #f2b50a; /* THE accent: CTAs, 4px top rules, active underline */ --pm-gold-d: #d99a00; /* gold hover, .pm-kick text, resource-card tags */ /* ---------- extended palette (literals the live theme relies on; promoted to tokens here) ---------- */ --pm-navy-deep: #081f38; /* hero control bar, navy-button hover, deep footnotes */ --pm-page: #e7edf4; /* field behind the hero panel / growth CTA panel */ --pm-gold-2: #ffd34d; /* gold gradient end (progress bar, shield highlight) */ --pm-gold-3: #ffce46; /* gold gradient end (tagline strip, announcement pill) */ --pm-gold-tint: #fffaf0; /* highlighted "trust ledger" table column */ /* text-on-navy ladder, brightest → dimmest */ --pm-on-navy-100: #ffffff; /* headings, primary links */ --pm-on-navy-90: #e6eef7; /* hero italic hook */ --pm-on-navy-80: #d7e4f0; /* band body text (compliance, page hero default) */ --pm-on-navy-70: #cbd9e7; /* utility-bar text */ --pm-on-navy-60: #c3d6ea; /* hero slide body */ --pm-on-navy-50: #a9c2da; /* band paragraphs, page-hero excerpt, process desc */ --pm-on-navy-40: #9fb6cc; /* footer text + links */ --pm-on-navy-30: #88a4bf; /* breadcrumb, micro-labels on navy */ --pm-on-navy-20: #6f88a0; /* footer legal line (template); rarely used */ --pm-numeral-navy:#6fa8d6; /* 40px serif step numbers on the navy process band */ /* light band tints (interchangeable; pick one per project) */ --pm-tint-1: #f4f7fa; --pm-tint-2: #eef2f7; --pm-tint-3: #f2f7fc; --pm-tint-4: #f3f6fa; /* growth-rail active background */ --pm-zebra: #f9fbfd; /* table zebra rows */ /* semantic (solvency verdicts on landing pages) */ --pm-ok: #2c6e49; --pm-ok-bg: #eef7f1; --pm-ok-line: #bfe0cd; --pm-bad: #b0433a; --pm-bad-deep: #9a2b2b; /* gradients */ --pm-grad-gold: linear-gradient(90deg, var(--pm-gold), var(--pm-gold-3)); --pm-grad-gold-bar: linear-gradient(90deg, var(--pm-gold), var(--pm-gold-2)); --pm-grad-hero-scrim: linear-gradient(90deg, rgba(9,26,48,.97) 0%, rgba(9,26,48,.9) 32%, rgba(9,26,48,.55) 60%, rgba(9,26,48,.12) 86%, rgba(9,26,48,0) 100%); --pm-hatch: repeating-linear-gradient(135deg, rgba(21,101,173,.10) 0 2px, transparent 2px 11px); /* ---------- typography ---------- */ --pm-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --pm-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --pm-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --pm-fs-x-small: 12.5px; /* eyebrow / kicker / announcement pill */ --pm-fs-small: 14.5px; /* nav, buttons, footer links, labels */ --pm-fs-medium: 16.5px; /* body */ --pm-fs-large: 18.5px; /* lead paragraph */ --pm-fs-x-large: 21px; /* h3 */ --pm-fs-xx-large: clamp(27px, 3.2vw, 38px); /* h2 */ --pm-fs-huge: clamp(32px, 4vw, 48px); /* h1 */ --pm-lh-body: 1.62; --pm-lh-heading: 1.15; --pm-ls-heading: -0.01em; --pm-ls-eyebrow: 0.1em; /* ---------- spacing scale (theme.json spacingSizes 20…90) ---------- */ --pm-space-20: 14px; --pm-space-30: 18px; --pm-space-40: 24px; --pm-space-50: 30px; --pm-space-60: 38px; --pm-space-70: 52px; --pm-space-80: 60px; --pm-space-90: 76px; --pm-section-pad: 76px; /* default band rhythm */ --pm-section-pad-navy: 60px; /* compliance band */ --pm-section-pad-sm: 56px; /* ≤640 step-down */ --pm-sticky-top: 102px; /* header (84) + tagline strip (≈18 visible) */ /* ---------- layout ---------- */ --pm-container: 1180px; --pm-gutter: 24px; --pm-wrap: min(var(--pm-container), 100% - 2 * var(--pm-gutter)); --pm-header-h: 84px; --pm-utility-h: 38px; --pm-strip-h: 40px; /* ---------- radii ---------- */ --pm-radius-0: 0; /* heritage square: value columns, carousel card, tables */ --pm-radius-btn: 4px; /* buttons, inputs, hero panel, stat tiles */ --pm-radius-card: 6px; /* cards, dropdown, modal panel */ --pm-radius-pill: 999px; /* announcement pill, placeholder pill, dots */ /* ---------- shadow ladder (all navy-tinted) ---------- */ --pm-shadow-card: 0 10px 30px rgba(10,40,69,.07); --pm-shadow-card-hover: 0 8px 20px rgba(10,40,69,.10); --pm-shadow-pop: 0 8px 24px rgba(10,40,69,.12); /* dropdown */ --pm-shadow-frame: 0 20px 44px rgba(10,40,69,.12); /* framed hero visual */ --pm-shadow-control: 0 10px 26px rgba(10,40,69,.16); /* carousel arrows */ --pm-shadow-stage: 0 26px 58px rgba(10,40,69,.34); /* active carousel card */ --pm-shadow-modal: 0 24px 60px rgba(10,40,69,.35); --pm-shadow-panel: 0 2px 6px rgba(10,40,69,.18), 0 40px 90px -34px rgba(10,40,69,.6); /* hero panel */ --pm-shadow-lift: 0 18px 40px -24px rgba(10,40,69,.45); /* benefit card hover */ --pm-overlay: rgba(10,40,69,.6); /* modal backdrop */ /* ---------- rules & accents ---------- */ --pm-rule-top: 4px solid var(--pm-gold); /* signature card top edge */ --pm-rule-side: 3px solid var(--pm-gold); /* quote / hook left rule */ --pm-hairline: 1px solid var(--pm-line); --pm-hairline-on-navy: 1px solid rgba(255,255,255,.14); /* ---------- motion ---------- */ --pm-ease: .15s ease; /* house default for color/bg/border/shadow/transform */ --pm-ease-slow: .4s ease; /* hero dots */ --pm-focus: 2px solid var(--pm-gold); /* + outline-offset: 2px; white on navy */ }