/* ========================================================================== Portfolio Moguls — Design Tokens -------------------------------------------------------------------------- RECONCILED to the shipped pages in raw/, which supersede raw/tokens/. The original token file described an earlier warm/gold state of the brand (#F7F5F0 bands, #CFC9BA borders, gold primary CTAs). Every shipped page had already moved to a cool blue-grey palette with teal CTAs. Pages win. Palette roles (locked): navy #1B2A4A primary — header, footer, trust bands, headings action #26D2FF filled CTAs, and accents on dark ground link #1D42A6 link hover, and accents that must READ on light ground gold #C5A467 RARE accent — header bottom rule + version stamps ONLY green #1E7A46 verification ticks and Verified badge ONLY The action colour replaced the previous working teal on 2026-07-28. It is a vivid cyan and its pairing rules are not interchangeable with the teal's: · navy ON action 7.9:1 — the only text/icon colour allowed on a fill · white ON action 1.8:1 — fails; never use it · action ON white 1.8:1 — so it is never a text colour on light ground, and never a focus ring there either · action ON navy 7.9:1 — which is exactly where it belongs · link ON white 8.8:1 — the substitute wherever an accent has to be legible against a light surface Two consequences worth stating, because they are not obvious: text links no longer carry the accent at all (they are navy, underlined), and focus rings on light surfaces use --pm-focus, not --pm-action. A 1.8:1 ring would technically be "the brand colour" and practically be invisible. ========================================================================== */ :root { /* ---- Signature ---- */ --pm-navy: #1B2A4A; /* #C5A467 from 2026-08-06, matching the Aventra Portfolio mark. Lighter than the #B58A2E it replaces, which IMPROVES it on navy (4.5:1 → 6.0:1) and weakens it on light grounds — see the note in base.css on .pm-stamp--gold. */ --pm-gold: #C5A467; /* The same gold, darkened, for the ONE case #C5A467 cannot serve: gold set as small text on a pale band. Measured on the Home protocol strip (#EEF1F6), brand gold reads 2.09:1 at 11px — the lightening that improved it on navy cost it exactly here. This variant is 4.8:1 on that band and 5.5:1 on white. Same hue and saturation, lower lightness, so it still reads as the brand colour rather than a second one. Rules, borders and icons keep --pm-gold: they are not text. */ --pm-gold-on-light: #816531; --pm-green: #1E7A46; /* * The WhatsApp button's accents, derived from --pm-green rather than from * WhatsApp's own #25D366. Client instruction 2026-07-28: one green in the * palette, not two that nearly match. The trade-off, recorded because it was * raised and decided: the same green now carries both "passed the Protocol" * and "opens WhatsApp". The mark itself is the flat silhouette in that green * — no disc — which is the treatment the client preferred. */ --pm-whatsapp-wash: #F3F8F5; /* hover ground — a whisper of green */ --pm-whatsapp-edge: rgba(30, 122, 70, 0.4); /* hover border */ /* ---- Action & links ---- */ --pm-action: #26D2FF; /* filled CTAs; accents on navy */ --pm-action-hover: #0FBBEE; /* darkened fill on hover — navy still reads 6.3:1 */ --pm-action-text: #1B2A4A; /* text and icons ON an action fill. Never white. */ --pm-link: #1B2A4A; /* text links on light ground */ --pm-link-hover: #1D42A6; /* link hover; accents-as-text on light ground */ --pm-focus: #1D42A6; /* focus ring on light ground — 8.8:1 */ --pm-focus-on-navy: #26D2FF; /* focus ring on dark ground — 7.9:1 */ /* ---- Surfaces ---- */ --pm-white: #FFFFFF; --pm-surface-alt: #EEF1F6; /* alternate band — replaces the old warm #F7F5F0 */ --pm-surface-deep: #E7ECF3; /* deeper band — Home segment doorways */ --pm-surface-green: #EAF3ED; /* verification tick disc only */ /* ---- Borders & rules ---- */ --pm-border: #DFE5EE; --pm-border-soft: #D9E0EA; --pm-border-faint: #E3E8F0; --pm-hairline: #EDF0F5; --pm-border-crumb: #BDC5D4; /* breadcrumb separators */ --pm-border-green: #cfe6d8; /* yield pill border */ /* ---- Ink ---- */ --pm-text: #1F1F1F; --pm-text-soft: #3a3a3a; --pm-muted: #5A5A5A; --pm-muted-cool: #5A6274; --pm-stamp: #8791A6; /* uppercase tracked captions */ /* ---- On navy ---- */ --pm-on-navy: #FFFFFF; --pm-on-navy-soft: #d9dde6; --pm-on-navy-muted: #9aa3b5; --pm-on-navy-faint: #6f7889; --pm-on-navy-rule: rgba(255, 255, 255, 0.15); --pm-on-navy-border: rgba(255, 255, 255, 0.55); --pm-on-navy-accent: #26D2FF; /* eyebrows, links and accents on navy */ /* ---- Type families — exactly two ---- */ --pm-font-ui: 'PT Sans', system-ui, -apple-system, sans-serif; --pm-font-body: 'PT Serif', Georgia, serif; /* ---- Type scale (mobile-first; scaled up at breakpoints in base.css) ---- */ --pm-h1: 600 30px/1.15 var(--pm-font-ui); --pm-h2: 600 24px/1.2 var(--pm-font-ui); --pm-h3: 700 20px/1.3 var(--pm-font-ui); --pm-stat: 700 22px/1.1 var(--pm-font-ui); --pm-nav: 500 14.5px/1 var(--pm-font-ui); --pm-button-sm: 600 14px/1 var(--pm-font-ui); --pm-chip: 600 13px/1 var(--pm-font-ui); --pm-body: 400 16px/1.65 var(--pm-font-body); /* ---- Eyebrow + date-stamp mechanic ---- */ --pm-eyebrow: 700 11.5px/1 var(--pm-font-ui); --pm-eyebrow-tracking: 0.14em; --pm-stamp-type: 600 11px/1 var(--pm-font-ui); --pm-stamp-tracking: 0.07em; --pm-wordmark-tracking: 0.14em; /* ---- Radii — institutional, not bubbly ---- */ --pm-radius-sm: 4px; /* chips, badges, thumbnails */ --pm-radius: 5px; /* buttons */ --pm-radius-lg: 6px; /* cards, panels */ --pm-pill: 50px; /* floating WhatsApp button only */ /* ---- Spacing ---- */ --pm-space-2: 8px; --pm-space-3: 12px; --pm-space-4: 18px; --pm-space-5: 24px; --pm-space-6: 36px; --pm-space-7: 44px; --pm-space-8: 62px; /* ---- Layout ---- */ --pm-maxw: 1280px; --pm-maxw-prose: 880px; --pm-gutter: 24px; --pm-header-h: 72px; /* ---- Rules, shadows, effects ---- */ /* Header rule: 1px, matching the two newest designs (Home v2, Sell v1). */ --pm-rule-gold: 1px solid var(--pm-gold); --pm-rule-accent: 3px solid var(--pm-action); --pm-shadow-card: 0 1px 2px rgba(27, 42, 74, 0.05); --pm-shadow-cta: 0 2px 8px rgba(0, 0, 0, 0.25); --pm-shadow-float: 0 4px 16px rgba(27, 42, 74, 0.35); --pm-shadow-bar: 0 -2px 12px rgba(0, 0, 0, 0.14); --pm-watermark-opacity: 0.02; /* ---- Card stripe placeholder (used until real photography lands) ---- */ --pm-stripe-cool: repeating-linear-gradient(135deg, #e9edf3 0 14px, #dfe5ee 14px 28px); --pm-stripe-green: repeating-linear-gradient(135deg, #e9ede9 0 14px, #e0e5e0 14px 28px); }