/* ========================================================================== FLEXED — Brand Tokens (co-working space, Cargonomics sister brand) Loaded AFTER css/style.css to override layout-level defaults with brand values. STATUS: APPROVED 2026-05-22 by Marilyn, LOCKED baseline. Values were applied 2026-05-18 from PRD 01 Phase B research (client-comms/reference-sites/reference-sites-2026-05-05.md) as provisional, then accepted when Marilyn reviewed the delivered live one-pager homepage on 2026-05-22. Her feedback was copy, logo, and structure only, with no change to palette, type, or layout. The values below are the approved Flexed brand baseline. Minor refinements may still happen, but they do not re-open the Marilyn signoff gate. This file-level STATUS is authoritative over any older per-token wording. See project-management/decisions-log.md (2026-05-25 approval row) + PRD 05. Remaining PRD 05 engineering (NOT brand-gated): the style.css hardcoded-hex audit + var() cleanup (B-2/B-3). The token VALUES in this file are locked. ARCHITECTURE: Same as Cargonomics token-swap. Layout in style.css; brand in this file. No hardcoded hex/font/spacing values are permitted in style.css. PRIMARY palette: Flexed Blue #000F9F (sampled from logo PDF at 300 DPI) + warm off-white surface #F4EDE4 (NOT flat #FFFFFF). ACCENT palette: Cargonomics Navy #11294B + Gold #D4B468 used SPARINGLY (footer accents, dividers, CTA hover states only). Warmth tone: olive #7A7E47 (locked; terracotta #C97B5C demoted to a Tier 3 mark-only accent). ========================================================================== */ :root { /* ---------------------------------------------------------------------- PRIMARY — Flexed Blue + warm off-white APPROVED — locked 2026-05-22 (Marilyn). Source: client-comms/reference-sites/reference-sites-2026-05-05.md ---------------------------------------------------------------------- */ --color-primary: #000F9F; /* APPROVED: Flexed Blue, sampled from logo PDF at 300 DPI, 58,211 confirmed pixels. Locked 2026-05-22 (Marilyn). */ --color-primary-dark: #000B7A; /* APPROVED: derived darker shade for hover/active states, AA-passable on white. Locked 2026-05-22 (Marilyn). */ --color-primary-light: #E5E7F5; /* APPROVED: derived very light tint for backgrounds and subtle blocks. Locked 2026-05-22 (Marilyn). */ --color-secondary: #F4EDE4; /* APPROVED: warm off-white BODY surface (revised 2026-05-18 from #FAF7F2 per Phase A: cream-shifted for HCMC warmth). NOT used in logo zone (header). Locked 2026-05-22 (Marilyn). */ --color-secondary-dark: #F0EBE0; /* APPROVED: subtle cream for cards and slightly recessed surfaces. Locked 2026-05-22 (Marilyn). */ --color-secondary-light: #FFFEF9; /* APPROVED: barely-off-white for input fields and elevated surfaces. Locked 2026-05-22 (Marilyn). */ /* ---------------------------------------------------------------------- SURFACE ZONING (NEW 2026-05-18 — Vasso direction) ---------------------------------------------------------------------- The palette is split into three zones to keep the logo integratable: Tier 1 LOGO ZONE (header, nav, anywhere the wordmark renders): surface = --color-surface-header (#FFFFFF pure white) text = --color-text primary = --color-primary NO ACCENTS in this zone. Calm. Lets the logo own the visual. Tier 2 BODY ZONE (hero, sections): surface = --color-secondary (#F4EDE4 warm off-white) text = --color-text allowed accents: --color-accent-warmth (olive), --color-accent-navy Tier 3 STRICT ACCENTS (CTA / micro-decoration): --color-accent-gold (never in header, never as text) --color-accent-terracotta (mark-only on CTA, never as surface, never adjacent to logo) Why: deep saturated Flexed Blue clashes with stark complementaries (Vasso's example: "if it's a blue, you can't have yellow as accent"). Surface zoning prevents accents from ending up adjacent to the logo. ---------------------------------------------------------------------- */ --color-surface-header: #FFFFFF; /* APPROVED: Tier 1 logo-zone surface. Pure white so the logo reads cleanly. Locked 2026-05-22 (Marilyn). */ --color-surface-body: var(--color-secondary); /* SEMANTIC ALIAS: Tier 2 body-zone surface. Alias to --color-secondary so PRD 04 can change one value and update both. */ /* ---------------------------------------------------------------------- ACCENTS — Cargonomics Navy + Gold (sparingly), warmth tone APPROVED, locked 2026-05-22 (Marilyn). "Touch of Cargonomics" per Marilyn's 2026-05-05 brief. ---------------------------------------------------------------------- */ --color-accent-navy: #11294B; /* APPROVED: Cargonomics Navy, ACCENT only (footer, deep section anchors, premium-tier signalling). Per Marilyn brief. Locked 2026-05-22 (Marilyn). */ --color-accent-gold: #D4B468; /* APPROVED: Cargonomics Gold, ACCENT only (CTA hover, member-tier callouts, dividers). Per Marilyn brief. Locked 2026-05-22 (Marilyn). */ --color-accent-warmth: #7A7E47; /* APPROVED: OLIVE primary warmth tone (revised 2026-05-18 from terracotta #C97B5C per Phase A: HCMC ambient already saturated-warm, terracotta competes with city; olive matches Hive parent in-market #898e62 reference; reads as locally-legible counterpoint). Locked 2026-05-22 (Marilyn). */ --color-accent-terracotta: #C97B5C; /* APPROVED: secondary mark/CTA accent (demoted from primary 2026-05-18). Used as mark-only on CTAs, NEVER adjacent to logo (complementary collision risk per Vasso "blue + yellow" rule). Locked 2026-05-22 (Marilyn). */ --color-accent: var(--color-primary); /* Default accent = primary blue. Override per-component if a section calls for navy/gold/warmth. */ /* ---------------------------------------------------------------------- NEUTRALS — earthy / warm rather than flat #FFFFFF APPROVED, locked 2026-05-22 (Marilyn). ---------------------------------------------------------------------- */ --color-ivory: var(--color-secondary); /* SEMANTIC ALIAS to --color-secondary (#F4EDE4 warm off-white body surface). Single source of truth — change --color-secondary and ivory follows. Used by style.css body{} from the Cargonomics port. */ --color-stone: var(--color-secondary-dark); /* SEMANTIC ALIAS to --color-secondary-dark (#F0EBE0 subtle cream). Single source of truth. */ --color-text: #2A2826; /* APPROVED: charcoal with slight warm undertone (revised 2026-05-18 from #16161D per Phase A). 14.2:1 vs --color-secondary surface = AAA pass; 17.6:1 vs --color-surface-header. Locked 2026-05-22 (Marilyn). */ --color-text-muted: #5C5C66; /* APPROVED: mid-grey for secondary body, captions. 7.2:1 vs --color-secondary surface = AA pass. Locked 2026-05-22 (Marilyn). */ --color-signal: #DC2626; /* APPROVED: standard error red, AA-passable on warm off-white. Locked 2026-05-22 (Marilyn); contrast verified in docs/tokens.md. */ --color-white: #FFFFFF; /* Literal pure white kept for true-white surfaces (form inputs, modal backdrops). Not provisional. */ /* ---------------------------------------------------------------------- TYPOGRAPHY APPROVED, locked 2026-05-22 (Marilyn). Loaded via Google Fonts in index.html (font-display: swap). ---------------------------------------------------------------------- */ --font-heading: 'Manrope', system-ui, -apple-system, sans-serif; /* APPROVED: Manrope. Geometric sans with warm character; full Vietnamese diacritic support. NOT Orbitron (brief rules out tech feel). Locked 2026-05-22 (Marilyn). */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* APPROVED: Inter. Modern readability-first body face; pairs well with Manrope; full Vietnamese support. Locked 2026-05-22 (Marilyn). */ --font-weight-heading: 700; /* APPROVED: bold for headings. Locked 2026-05-22 (Marilyn). */ --font-weight-body: 400; /* APPROVED: regular for body. Locked 2026-05-22 (Marilyn). */ /* ---------------------------------------------------------------------- THIRD-PARTY BRAND COLOURS — external service brand colours. Same values regardless of brand. Do not rebrand. ---------------------------------------------------------------------- */ --color-whatsapp: #25D366; --color-whatsapp-hover: #1DA851; --color-zalo: #0068FF; --color-facebook: #1877F2; --color-linkedin: #0A66C2; /* ---------------------------------------------------------------------- RGB VARIANTS — for rgba() usage. APPROVED — derived from values above. ---------------------------------------------------------------------- */ --color-primary-rgb: 0, 15, 159; /* APPROVED: matches --color-primary #000F9F. Locked 2026-05-22 (Marilyn). */ --color-secondary-rgb: 244, 237, 228; /* APPROVED: matches --color-secondary #F4EDE4. Locked 2026-05-22 (Marilyn). */ --color-accent-rgb: 0, 15, 159; /* APPROVED: matches --color-accent (=primary). Locked 2026-05-22 (Marilyn). */ --color-accent-gold-rgb: 212, 180, 104; /* APPROVED: matches --color-accent-gold #D4B468, for rgba() gold decorations (e.g. styleguide placeholder dashed border). Locked 2026-05-22 (Marilyn). */ --color-accent-navy-rgb: 17, 41, 75; /* APPROVED: matches --color-accent-navy #11294B, for rgba() navy tints. Locked 2026-05-22 (Marilyn). */ --color-ivory-rgb: 244, 237, 228; /* APPROVED: matches --color-ivory #F4EDE4. Locked 2026-05-22 (Marilyn). */ --color-white-rgb: 255, 255, 255; /* ---------------------------------------------------------------------- SPACING — shared scale (brand-agnostic). 4px-based. ---------------------------------------------------------------------- */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --section-padding-y: 72px; --section-padding-x: 0px; --container-max: 1200px; --container-padding: 20px; /* ---------------------------------------------------------------------- COMPONENT — Buttons APPROVED radius — final shape direction set in PRD 04. ---------------------------------------------------------------------- */ --btn-bg: var(--color-primary); --btn-color: var(--color-white); --btn-hover-bg: var(--color-primary-dark); --btn-radius: 6px; /* APPROVED: subtle soft radius. PRD 04 picks final shape direction (sharp vs soft). */ --btn-padding-y: 14px; --btn-padding-x: 32px; --btn-font-size: 0.95rem; --btn-font-weight: 600; /* ---------------------------------------------------------------------- COMPONENT — Cards APPROVED radius — matches button. ---------------------------------------------------------------------- */ --card-bg: var(--color-white); --card-border-color: var(--color-primary); --card-border-opacity: 0.12; --card-radius: 6px; /* APPROVED: matches --btn-radius. Locked 2026-05-22 (Marilyn). */ --card-padding: 28px 24px; /* ---------------------------------------------------------------------- COMPONENT — Navigation ---------------------------------------------------------------------- */ --nav-bg: var(--color-white); --nav-border-opacity: 0.1; --nav-link-color: var(--color-text); --nav-link-hover: var(--color-primary); /* ---------------------------------------------------------------------- COMPONENT — Footer ---------------------------------------------------------------------- */ --footer-bg: var(--color-primary); --footer-color: var(--color-white); --footer-link-opacity: 0.7; --footer-link-hover: var(--color-secondary-dark); /* ---------------------------------------------------------------------- COMPONENT — Form Inputs APPROVED border — neutral mid-grey. Final tone set in PRD 04. ---------------------------------------------------------------------- */ --input-bg: var(--color-white); --input-border: #D6D2CA; /* APPROVED: warm neutral border tuned to the off-white surface. Locked 2026-05-22 (Marilyn). */ --input-radius: 6px; /* APPROVED: matches --btn-radius. Locked 2026-05-22 (Marilyn). */ --input-padding: 12px 16px; --input-focus-border: var(--color-primary); /* ---------------------------------------------------------------------- COMPONENT — Icon sizing (PRD 15 Social & Messaging Icon Integration) ---------------------------------------------------------------------- */ --icon-size-social: 1.25rem; /* 20px — footer social row glyph size. */ --icon-size-floating: 1.5rem; /* 24px — floating-button glyph size. Outer tap target is sized via padding to meet WCAG 2.2 AA 44x44 minimum. */ /* ---------------------------------------------------------------------- COMPONENT — Misc ---------------------------------------------------------------------- */ --color-accent-dark: var(--color-primary-dark); --transition-base: 0.3s ease; --transition-fast: 0.2s ease; /* ---------------------------------------------------------------------- LOGO Logo is set inline in markup via elements. SVG sources live at public/img/logo-flexed.svg (primary, blue) and public/img/logo-flexed-white.svg (knockout for dark backgrounds). PNG raster fallbacks at 200/400/800 wide sit alongside in public/img/. No CSS token consumes the URL today; the historical --logo-url placeholder has been removed. ---------------------------------------------------------------------- */ --logo-alt-text: 'Flexed'; } /* * APPROVED + LOCKED 2026-05-22 (Marilyn) * * Values were applied 2026-05-18 from PRD 01 Phase B research as provisional, then * accepted when Marilyn reviewed the delivered live one-pager on 2026-05-22. Her * feedback was copy, logo, and structure only, with no palette, type, or layout * change. They are the locked Flexed brand baseline. Minor refinements may still * happen without re-opening the signoff gate. Recorded in * project-management/decisions-log.md (2026-05-25 approval row). * * WCAG AA contrast pairs for these values are enumerated in docs/tokens.md * (13 pairs, computed 2026-05-25; olive + terracotta are large-text / UI only). * * REMAINING (NOT brand-gated, tracked under PRD 05 + docs/deferred-items.md): * 1. style.css hardcoded-hex audit + var() cleanup (B-2/B-3): the :root default * layer still carries Cargonomics-era values and some var() fallbacks use * navy/gold rather than the Flexed palette * * RESOURCES: * - Source values + rationale: client-comms/reference-sites/reference-sites-2026-05-05.md * - Logo PDF: client-comms/assets-from-marilyn/flexed-logo-final-2026-05-05.pdf * - Marilyn brief: client-comms/client-brief.md */