/* Vendored from phd-wp-core brand/pd-tokens.css at 30c091b2 (7 Oct 2026). Do not edit here: change it in phd-wp-core and copy it over. */ /* ========================================================================== PorthouseDean design tokens Source of truth for colour, type, spacing and radius across PD, Calcs-Online and every internal tool. Decisions behind these values: brand/DESIGN.md. Do not hardcode a hex anywhere. If a value is missing, add it here. Written 22 Sep 2026 from the Design Decisions answers. ========================================================================== */ :root { /* --- brand ------------------------------------------------------------ */ --pd-navy: #272262; /* the brand navy. Headings, buttons, icons. */ --pd-navy-deep: #1a1845; /* hero and footer grounds */ --pd-navy-deeper: #0f0d2e; /* gradient endpoint only */ --pd-blue-mark: #354BA0; /* SECOND BLUE - logo mark only. Never in UI. */ --pd-mint: #10b981; /* ticks and success. Never a large fill. */ --pd-mint-deep: #0d7a58; /* mint on white, where contrast requires it */ /* RETIRED - present so a grep finds them, never to be used: #282561 and its hover #1e1d4d were a near-duplicate navy. Migrate to --pd-navy. See DESIGN.md "Known defects". */ /* --- neutrals (cool, navy-biased - deliberate, not inherited) ---------- */ --pd-ink: #1a1845; /* body text */ --pd-muted: #4a5570; /* secondary text */ --pd-soft: #64748b; /* labels, captions, axis text */ --pd-line: #e2e8f0; /* borders and dividers */ --pd-line-2: #cdd1e4; /* input borders, stronger rules */ --pd-tint: #f8f9fc; /* alternating band background */ --pd-surface: #ffffff; --pd-bg: #ffffff; /* --- semantic (separate from the accent; never used decoratively) ------ */ --pd-ok: #0d7a58; --pd-warn: #9a6b2f; --pd-bad: #a32f3f; /* --- charts: five hues derived from navy (DESIGN.md "Charts") ---------- */ --pd-cat-1: #272262; --pd-cat-2: #0d7a58; --pd-cat-3: #354BA0; /* the only place the second blue leaves the mark */ --pd-cat-4: #9a6b2f; --pd-cat-5: #7a3f6d; --pd-grid: #eceef6; /* gridlines */ /* --- type: ONE family. Weights do the work. --------------------------- */ --pd-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --pd-w-body: 400; --pd-w-med: 500; --pd-w-semi: 600; --pd-w-bold: 700; --pd-w-head: 800; /* headings. NOT 900. */ --pd-fs-display: clamp(26px, 3.1vw, 42px); --pd-fs-h2: clamp(22px, 2.2vw, 28px); --pd-fs-h3: 20px; --pd-fs-lede: 17px; --pd-fs-body: 15px; --pd-fs-small: 13px; --pd-fs-micro: 11.5px; /* uppercase eyebrows and captions only */ --pd-lh-head: 1.14; --pd-lh-body: 1.6; --pd-ls-head: -0.015em; --pd-ls-caps: 0.11em; /* --- radius: ONE value. Deliberate - see DESIGN.md "Radius". ---------- */ --pd-radius: 12px; /* --- spacing: 4px ladder. Nothing off the ladder. --------------------- */ --pd-1: 4px; --pd-2: 8px; --pd-3: 12px; --pd-4: 16px; --pd-5: 24px; --pd-6: 32px; --pd-7: 48px; --pd-8: 64px; --pd-band: 900px; /* inner container cap on every full-bleed band */ --pd-measure: 64ch; /* running text never wider than this */ /* --- elevation: shadow means "you can click this". Nothing else. ------ */ --pd-shadow-interactive: 0 2px 8px rgba(26, 24, 69, 0.10); --pd-shadow-raised: 0 8px 24px rgba(26, 24, 69, 0.14); /* modals */ /* --- borders ---------------------------------------------------------- */ --pd-border: 1px; --pd-border-focus: 2px; --pd-rule: 3px; /* the callout left rule */ /* --- motion: hover and state feedback only. Never entrance animation. -- */ --pd-dur-fast: 120ms; /* colour, border, opacity */ --pd-dur-base: 180ms; /* transform, shadow */ --pd-ease: cubic-bezier(0.2, 0, 0.2, 1); /* --- layering: use these, never a bare z-index ------------------------- */ --pd-z-base: 0; --pd-z-sticky: 10; /* sticky table headers, toolbars */ --pd-z-header: 20; /* the page header */ --pd-z-dropdown:30; --pd-z-modal: 40; --pd-z-toast: 50; /* --- hit targets: 44px minimum for anything tappable ------------------- */ --pd-target: 44px; /* --- on navy: the values .pd-on-deep (below) flips the neutrals to. Exposed as plain tokens for a component whose ONE subtree mixes navy and white surfaces (the Calcs-Online header: navy bar, white dropdowns) and so cannot take .pd-on-deep wholesale. Read these; never hand-pick an alpha. Measured on #1a1845, #061551 and #030d3a: .82 >= 11.6, .68 >= 8.2. ------ */ --pd-deep-ink: #ffffff; --pd-deep-muted: rgba(255, 255, 255, 0.82); --pd-deep-soft: rgba(255, 255, 255, 0.68); --pd-deep-line: rgba(255, 255, 255, 0.18); --pd-deep-line-2: rgba(255, 255, 255, 0.30); --pd-deep-wash: rgba(255, 255, 255, 0.08); /* hover wash on navy. A fill, never a text colour */ } /* ========================================================================== CONTRAST GUARD-RAILS - measured, not assumed (WCAG 2.1, 22 Sep 2026). Full table and the reasoning: DESIGN.md section 2. --pd-mint on white ........ 2.54 FAILS. Never text or an icon on light. --pd-mint-deep on white ... 5.33 passes. This is the one to use. --pd-warn on white ........ 4.65 passes --pd-warn on --pd-tint .... 4.41 FAILS. Same token, different ground. On --pd-navy-deep (heroes), ONLY white and --pd-mint pass. Everything else in the palette fails on navy - see .pd-on-deep below. ========================================================================== */ .pd-on-deep { /* put this on any section sitting on --pd-navy-deep */ --pd-ink: var(--pd-deep-ink); --pd-muted: var(--pd-deep-muted); /* 12.6:1 - passes */ --pd-soft: var(--pd-deep-soft); /* 8.4:1 - passes */ --pd-line: var(--pd-deep-line); --pd-line-2: var(--pd-deep-line-2); --pd-mint-deep: var(--pd-mint); /* the deep mint fails on navy */ color: var(--pd-ink); background: var(--pd-navy-deep); } /* ========================================================================== Dense mode - internal tools only (dashboards, KPI board, Commercial Pulse). Same colours, same type, tighter ladder. Put data-density="dense" on or on the tool's root element. Never use it on a customer-facing page. ========================================================================== */ [data-density="dense"] { --pd-fs-body: 13px; --pd-fs-small: 11.5px; --pd-fs-h3: 15px; --pd-lh-body: 1.45; --pd-1: 2px; --pd-2: 4px; --pd-3: 8px; --pd-4: 10px; --pd-5: 14px; --pd-6: 20px; --pd-7: 28px; --pd-8: 40px; --pd-radius: 8px; } /* ========================================================================== Dark mode. Internal tools and anything rendered in a viewer's theme. The marketing sites are light-only and simply never opt in. Tokens are redefined; component rules never are. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pd-bg: #100e2b; --pd-surface: #191742; --pd-tint: #211e52; --pd-ink: #eceefa; --pd-muted: #a9b0d0; --pd-soft: #8b92b6; --pd-line: #2c2a63; --pd-line-2: #3a3780; --pd-navy: #b8b4f0; /* navy as INK flips; the brand hex does not. */ --pd-navy-deep: #0b0a22; --pd-mint: #4ade9f; --pd-mint-deep: #4ade9f; --pd-ok: #4ade9f; --pd-warn: #d9a55e; --pd-bad: #f08a96; --pd-cat-1: #a8a3e8; --pd-cat-2: #4ade9f; --pd-cat-3: #7d92d8; --pd-cat-4: #d9a55e; --pd-cat-5: #c98ab8; --pd-grid: #2c2a63; --pd-shadow-interactive: 0 2px 8px rgba(0, 0, 0, 0.40); --pd-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.50); } } :root[data-theme="dark"] { --pd-bg: #100e2b; --pd-surface: #191742; --pd-tint: #211e52; --pd-ink: #eceefa; --pd-muted: #a9b0d0; --pd-soft: #8b92b6; --pd-line: #2c2a63; --pd-line-2: #3a3780; --pd-navy: #b8b4f0; --pd-navy-deep: #0b0a22; --pd-mint: #4ade9f; --pd-mint-deep: #4ade9f; --pd-ok: #4ade9f; --pd-warn: #d9a55e; --pd-bad: #f08a96; --pd-cat-1: #a8a3e8; --pd-cat-2: #4ade9f; --pd-cat-3: #7d92d8; --pd-cat-4: #d9a55e; --pd-cat-5: #c98ab8; --pd-grid: #2c2a63; --pd-shadow-interactive: 0 2px 8px rgba(0, 0, 0, 0.40); --pd-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.50); } /* ========================================================================== Brand variants. PD is the default above. Calcs-Online is PD's testbed: same bones, its own identity, more licence. LoftNow is a separate brand and does NOT load this file. ========================================================================== */ /* -------------------------------------------------------------------------- CALCS-ONLINE CONTRAST GUARD-RAILS - measured, not assumed (WCAG 2.1, 29 Sep 2026, Ted's day-2 defaults). Reasoning and the same table: DESIGN.md section 11. Only the brand hues and the font change; every neutral, semantic, chart, type-size, spacing and motion token is inherited. --pd-ink #1a1845 on white ................... 16.66 AAA --pd-navy #061551 on white .................. 17.02 AAA --pd-navy on --pd-tint #eef2fd .............. 15.20 AAA white on --pd-navy #061551 .................. 17.02 header bar, primary button white on --pd-navy-deep #030d3a ............. 18.71 heroes, footer white on --pd-navy-deeper #020826 ........... 19.71 gradient endpoint coral #ff6341 on --pd-navy .................. 5.77 passes: ticks and hover ON NAVY coral #ff6341 on --pd-navy-deep ............. 6.34 passes coral #ff6341 on white ...................... 2.95 FAILS. Never text or an icon on white. coral #ff6341 on --pd-tint .................. 2.64 FAILS white on coral #ff6341 ...................... 2.95 FAILS. Coral is never a button fill. coral hover #e04e2c on --pd-navy ............ 4.29 passes as a ring or rule (3:1); FAILS body text (4.5) coral hover #e04e2c on --pd-navy-deep ....... 4.72 passes coral hover #e04e2c on white ................ 3.97 FAILS text. --pd-mint-hover: on navy only. --pd-blue-light #6478c4 on white ............ 4.18 FAILS body text; 3:1 non-text and large text only --pd-blue-light on --pd-navy / -deep ........ 4.07 / 4.48 same: rules, icons, large text, never body copy --pd-blue-light on --pd-tint ................ 3.73 non-text only --pd-tint-edge #d7e0f8 on white / tint ...... 1.32 / 1.18 a border beside a tint, never a divider on its own --pd-navy on --pd-tint-edge ................. 12.89 AAA --pd-ground #f8f9fc: navy 16.17, ink 15.82, --pd-muted 7.06, --pd-soft 4.52, #374ba1 7.43 --pd-mint-deep = #374ba1 on white ........... 7.83 the tick, link hover and button hover on light white on #374ba1 ............................ 7.83 button hover label stays legible #374ba1 on --pd-tint ........................ 6.99 passes #374ba1 on --pd-navy ........................ 2.17 FAILS. The mid blue never sits on navy. --pd-soft #64748b on white .................. 4.76 passes, no margin (as PD) --pd-soft on --pd-tint #eef2fd .............. 4.25 FAILS. Use --pd-muted on a tinted band. --pd-muted #4a5570 on white / tint .......... 7.43 / 6.64 --pd-ok #0d7a58 on white / tint ............. 5.33 / 4.76 success stays green --pd-warn on --pd-tint ...................... 4.15 FAILS (fails on PD's tint too, 4.41) .pd-on-deep white .82 / .68 on #030d3a ...... 12.55 / 8.85 passes; no per-brand rule needed white .82 / .68 on --pd-navy #061551 ........ 11.62 / 8.25 passes on the header bar too On #061551 and #030d3a these FAIL, exactly as on PD's navy: --pd-muted 2.29, --pd-soft 3.58, --pd-ok 3.19, --pd-warn 3.66, --pd-bad 2.46. Use .pd-on-deep. -------------------------------------------------------------------------- */ [data-brand="calcs"] { /* Live values since 29 Sep 2026 (Ted: "happy with all"). The new Calcs-Online logo is still unstarted; until it lands the header carries the existing white lockup on the navy bar. Override the brand hues HERE - never by editing the :root block above. Put data-brand="calcs" on . */ /* --- brand ------------------------------------------------------------ */ --pd-navy: #061551; /* Calcs-Online navy. Headings, buttons, header bar. 17.02 on white */ --pd-navy-deep: #030d3a; /* hero and footer grounds. 18.71 with white; darker than the navy (relative luminance 0.0061 vs 0.0117). Sam's account strip uses it. */ --pd-navy-deeper: #020826; /* gradient endpoint only. 19.71 with white */ --pd-blue-mark: #374ba1; /* the mid blue (Sam's 'blue' / 'primary_mid'). Mark, and the on-white accent below. 7.83 on white */ --pd-blue-light: #6478c4; /* Sam's 'light' (29 Sep list). Rules, icons, large text; never body copy (4.18 on white, 4.07 on navy) */ /* Accent: coral takes mint's role. Ticks and hover ON NAVY only - 5.77 on #061551, 6.34 on #030d3a. On white it is 2.95 and FAILS, so it is never text, an icon or a fill on a light ground. Its hover #e04e2c is --pd-mint-hover: on navy only (4.29; 3.97 on white fails). */ --pd-mint: #ff6341; /* coral: the Calcs-Online accent, on navy only */ --pd-mint-hover: #e04e2c; /* coral hover (Sam's 'coral hover'). On navy only; never on a light ground */ --pd-mint-deep: #374ba1; /* the accent's on-white counterpart: ticks on white, link hover, primary-button hover fill. 7.83 both ways. Coral-deep #e04e2c was rejected here: 3.97 on white fails AA text. */ /* --- tinted ground ----------------------------------------------------- */ --pd-tint: #eef2fd; /* Calcs-Online tint: alternating bands, nav hover, chips. Navy 15.20 and ink 14.88 on it pass; --pd-soft 4.25 FAILS - use --pd-muted. */ --pd-tint-edge: #d7e0f8; /* Sam's 'tint-edge': the border round a tinted chip or panel */ --pd-ground: #f8f9fc; /* Sam's 'ground', the hub's page ground (PD_PHub_Brand 'ground'). Named, not applied: */ /* the marketing pages run white, so --pd-bg and --pd-surface are NOT re-pointed; a page that wants the hub's ground reads --pd-ground. --pd-line #e2e8f0 is inherited: Sam's border hex is PD's already. --pd-cat-3 #354BA0 is inherited: charts are internal tools, not a brand surface. --pd-ok stays green: success is semantic, not accent. */ /* --- type: ONE family, Urbanist (the Calcs-Online exception to DESIGN.md 3). Same weights, same sizes. The header plugin enqueues it from Google Fonts. */ --pd-font: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif; } /* -------------------------------------------------------------------------- CALCS-ONLINE m1 IDENTITY (6 Oct 2026, Ted: "the mockup holds true"). The brand file is brand/calcs-logo/identity-lab/CALCS-ONLINE-BRAND-BETA.md (workspace); the reference is home-mock/m1.html; the build order is brand/CALCS-ONLINE-M1-PLAN-2026-10-06.md. Served ONLY when the mu-plugin calcs-identity-m1.php puts data-identity="m1" on (wp option calcs_identity_m1 = 1; off = delete the option, and this block is inert). The second selector reaches the header and footer roots, which declare data-brand="calcs" on themselves (pdsh_brand_attr) and would otherwise resolve the 29 Sep block above. It sits BEFORE .pd-on-deep[data-brand="calcs"] so the on-navy flip of --pd-mint-deep still wins on the footer. Measured 6 Oct 2026 (tools/calcs-2026/identity-m1/contrast_m1.py): --pd-ink #1A1F2E on white / tint ............ 16.41 / 15.31 --pd-navy #0B1642 on white / tint ........... 17.39 / 16.22 headings, nav, focus ring white on --pd-navy / -deep / -deeper ........ 17.39 / 18.90 / 19.93 --pd-muted #4B5563 on white / tint .......... 7.56 / 7.05 --pd-soft #6B7280 on white / tint ........... 4.83 / 4.51 passes, no margin: captions only coral #FF6341 on --pd-navy / -deep .......... 5.89 / 6.40 text and icons ON NAVY pass navy on coral #FF6341 ....................... 5.89 the live step's numeral (navy on the coral) white on --pd-btn-accent (navy) ............. 17.39 the action buttons since 7 Oct (Ted: coral with navy text "doesn't work"; white on the coral fails) white on coral #FF6341 ...................... 2.95 FAILS: never a white label on the coral; on navy the end band's button inverts to white instead coral #FF6341 on white ...................... 2.95 under 3:1: on white the coral is the big numerals' units only (beside navy digits); ticks on white are navy coral-deep #B23A1A on white / tint .......... 5.98 / 5.58 hover text and the primary's hover fill (white 5.98) coral-deep on --pd-navy ..................... 2.91 never on navy; .pd-on-deep flips it to the coral coral hover #FF8A70 on --pd-navy ............ 7.55 hover ring and text on navy .pd-on-deep white .82 / .68 on --pd-navy-deep 12.74 / 8.94 --pd-line-2 #CBD0D8 on white ................ 1.55 as PD's (1.5): a border beside a fill, never alone Two radii on purpose (m1): --pd-radius 16px for panels and cards, --pd-btn-radius 999px for buttons, chips and the question bar. Geist 700 for headings (the m1 weight), not 800. -------------------------------------------------------------------------- */ [data-brand="calcs"][data-identity="m1"], [data-identity="m1"] [data-brand="calcs"] { /* --- brand ------------------------------------------------------------ */ --pd-navy: #0B1642; /* the m1 navy: headings, nav, buttons, the end band, the mark's ground */ --pd-navy-deep: #070E2E; /* footer ground, one step under the navy so the end band and footer never merge */ --pd-navy-deeper: #040819; /* gradient endpoint only */ --pd-blue-mark: #FF6341; /* the mark's accent: the seventh tile, the current sign's coral (Ted, 7 Oct 2026) */ --pd-blue-light: #5A6485; /* rules and icons on light grounds; never body copy (4.2 on white) */ /* Accent: the coral the current Calcs-Online sign uses (Ted, 7 Oct 2026: "#FF6341 is the one on the current sign"; #F0500A, the beta's orange, is retired). ON NAVY it is text-safe (5.89); on white it is 2.95, so there it is a fill with a navy label or the numerals' units, never text or a tick. Its deep partner #B23A1A (same hue) is the hover text and hover fill on light grounds. */ --pd-mint: #FF6341; --pd-mint-hover: #FF8A70; /* on navy only (7.55) */ --pd-mint-deep: #B23A1A; /* the coral as text on white (5.98) and the primary's hover fill */ /* --- grounds: m1's (cool grey, not navy-biased) ------------------------ */ --pd-tint: #F6F7F9; /* the mock's --soft: the stage panel, alternating bands, chip hover */ --pd-tint-edge: #E6E8EC; --pd-ground: #F6F7F9; --pd-grid: #ECEEF2; --pd-cat-1: #0B1642; /* --- type: Geist (the beta; decision 3 of the revitalisation assessment) */ --pd-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --pd-w-head: 700; --pd-ls-head: -0.03em; /* --- shape ------------------------------------------------------------ */ --pd-radius: 16px; --pd-btn-radius: 999px; /* read by components.css and header-calcs.css; PD has no such token */ --pd-btn-accent: #0B1642; /* the action on white (header CTA, .c26-btn--accent): navy, white label 17.39 (7 Oct) */ --pd-btn-accent-ink: #FFFFFF; /* the coral is the accent (mark, live step, units), not a button fill: white on it fails */ --pd-shadow-interactive: 0 2px 8px rgba(11, 22, 66, 0.10); --pd-shadow-raised: 0 14px 36px rgba(11, 22, 66, 0.14); } /* The m1 neutrals (text and lines), on light grounds only. NOT on an element that is itself .pd-on-deep: the footer root carries data-brand="calcs" and .pd-on-deep together, and .pd-on-deep (0,1,0) flips --pd-ink, --pd-muted, --pd-soft and the lines to the on-navy values; a (0,2,0) brand block that re-set them there would paint the footer's text ink on navy (caught by the 6 Oct before/after diff: .pdsh-foot-contact white -> #1A1F2E). */ [data-brand="calcs"][data-identity="m1"], [data-identity="m1"] [data-brand="calcs"]:not(.pd-on-deep) { --pd-ink: #1A1F2E; --pd-muted: #4B5563; --pd-soft: #6B7280; --pd-line: #E6E8EC; --pd-line-2: #CBD0D8; } /* An element that carries BOTH data-brand="calcs" and .pd-on-deep (the Calcs-Online footer root declares the brand on itself, so a page's own later :root cannot re-point it) must keep .pd-on-deep's on-navy flip: the block above comes later in this file and would otherwise set --pd-mint-deep back to the on-white #374ba1, which is 2.17 on navy. */ .pd-on-deep[data-brand="calcs"] { --pd-mint-deep: var(--pd-mint); } /* ========================================================================== Base. Opt in by adding class="pd" to , so this file can be loaded next to legacy stylesheets without fighting them. ========================================================================== */ .pd { background: var(--pd-bg); color: var(--pd-ink); font-family: var(--pd-font); font-size: var(--pd-fs-body); font-weight: var(--pd-w-body); line-height: var(--pd-lh-body); -webkit-font-smoothing: antialiased; } .pd h1, .pd h2, .pd h3 { font-weight: var(--pd-w-head); line-height: var(--pd-lh-head); letter-spacing: var(--pd-ls-head); text-wrap: balance; margin: 0; } .pd h1 { font-size: var(--pd-fs-display); } .pd h2 { font-size: var(--pd-fs-h2); } .pd h3 { font-size: var(--pd-fs-h3); letter-spacing: -0.01em; } .pd p { max-width: var(--pd-measure); } .pd :focus-visible { outline: 2px solid var(--pd-navy); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pd *, .pd *::before, .pd *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }