/* ═══════════════════════════════════════════════════════════════════════════ marketing.css — the public-surface palette. Design pack v3.3, Sadu Light (standards.md §4هـ). WO-UI-17. WHY THIS FILE EXISTS Every page that opens WITHOUT an account is a public surface, and §4د gives public surfaces their own green: --g #1F5145. The tenant app's green is --brand #17453A, and tokens.css aliases `--g: var(--brand)` — so a public page that reads --g from tokens.css silently gets the TENANT colour. Four live pages were doing exactly that (30 call sites) before this file landed. TWO FAMILIES, NOT ONE PALETTE — this is the part that is easy to get wrong. The pack's six marketing prototypes do NOT share one token set. They split: .mkt Family A — docs/design/marketing/{index,about,contact}.html Standalone. Loads fonts.css only. Carries the full 24-property Sadu Light palette below, copied VERBATIM from index.html. .mkt-token Family B — docs/design/marketing/{pricing,privacy,terms}.html Loads tokens.css, then overrides EXACTLY TWO properties. It deliberately keeps tokens.css's --paper/--ink/--rule/--card. Both families land on the same public green by different routes. Applying Family A's full palette to a Family B page would silently restyle paper, ink and rules away from what the pack specifies for those pages — so the two are kept apart here and opted into per page with a body class, never globally. Measured: only 6 selectors appear on 4+ of the six prototypes, and all six differ between pages; 434 of 565 are page-unique. There is no shared COMPONENT layer in the pack to extract — the shared layer is the palette and the reset, and that is what this file is. Page CSS stays with its page. See docs/ui/MARKETING-ADOPTION-INVENTORY.md for the full measurement. Colours are copied, never chosen. Do not add a value that is not in the pack. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Family A · full Sadu Light palette ──────────────────────────────────── Verbatim from docs/design/marketing/index.html. Byte-identical to the block that shipped inline in accounts/login.html, which now loads this instead. */ .mkt{ --g:#1F5145; --g-deep:#0F2A24; --g-ink:#08201A; --g-soft:#2D6F5E; --mint:#7FCBB0; --mint-soft:#CFE9DF; --brass:#C8923C; --brass-lite:#E8B95A; --brass-soft:#F0C26B; --wash:#0F2A24; --wash-line:#17453A; --paper:#F5F3EC; --paper-2:#EFECE2; --card:#FFFFFF; --ink:#0B1F1A; --ink-2:#46554E; --ink-3:#7C8A83; --rule:#E4E0D4; --clay:#B5563C; --disp:'El Messiri',system-ui,sans-serif; --body:'Readex Pro',system-ui,sans-serif; --num:'Space Grotesk',system-ui,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); } /* Login card only — from system/Login.dc.html. These five have no marketing equivalent; they are the sign-in form's error and hint inks. Kept here so the login template carries no hex of its own. */ .mkt{ --err-bg:#F7E4DE; --err-line:#E3BCAF; --err-ink:#8A3F2A; --hint:#9AA79F; --on-dark:#E8F0EC; } /* ── Family B · token-file override ──────────────────────────────────────── For pages that load tokens.css. Two properties, exactly as the pack's pricing/privacy/terms prototypes declare them. Everything else on those pages keeps coming from tokens.css, which is what the pack specifies. This must load AFTER tokens.css to win the cascade. */ .mkt-token{ --brand:#1F5145; --brand-text:#1F5145; } /* ── Shared reset ────────────────────────────────────────────────────────── Verbatim from index.html. Only the rules that are genuinely identical across the prototypes live here; anything that differs per page stays on its page. `a` is deliberately absent — marketing sets `color:inherit`, login sets `color:var(--g)`, so it is not shared. */ /* The class sits on , so the reset must name the element itself as well as its descendants — `.mkt *` alone would leave its default margin. */ .mkt, .mkt *, .mkt-token, .mkt-token *{box-sizing:border-box;margin:0;padding:0} .mkt h1, .mkt h2, .mkt h3, .mkt .disp{ font-family:var(--disp);line-height:1.12;letter-spacing:-.01em} .mkt .num{font-family:var(--num);font-variant-numeric:tabular-nums} .mkt svg.ic{width:1em;height:1em;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* The Sadu ground — the woven paper the whole light surface sits on. index.html body rule, verbatim. */ .mkt{ font-family:var(--body); background-color:var(--paper); background-image: radial-gradient(circle at 1px 1px,rgba(31,81,69,.05) 1.1px,transparent 0), repeating-linear-gradient(45deg,rgba(31,81,69,.02) 0 1.5px,transparent 1.5px 27px), repeating-linear-gradient(-45deg,rgba(200,146,60,.018) 0 1.5px,transparent 1.5px 27px); background-size:32px 32px,auto,auto; color:var(--ink);font-weight:400;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:clip; }