/* * gp-public.css — the PUBLIC SURFACE token home. * * WHAT THIS IS * The Tier-1 + Tier-2 token layer for the public marketing surface (homepage, Contact Us, * Blog+, and the pages that join gp_public_surface_templates() later). It is the public * world's equivalent of assets/css/gp-base.css, which stays APP-WORLD ONLY. * * WHY IT EXISTS AS ITS OWN FILE * Option A, ruled by the orchestrator 2026-08-07 in * docs/plans/2026-08-07-public-surface-token-layer.md §3. The public surface is a genuinely * separate design world (its own palette and its own three typefaces), and the mockup's greys * are cool/slate where the app's gray-50..900 ramp is pure neutral: measured nearest-neighbour * distances of 42.5, 34.7 and 25.5 mean the public palette CANNOT be expressed in the app's * ramp without repainting the page. So it gets a file, not a guest room inside gp-base. * * THE THREE BINDING CONDITIONS OF THAT GRANT * 1. Enqueued ONLY on the public surfaces, never site-wide. Enforced by the * gp_is_public_surface() gate in inc/gp-homepage-functions.php. * 2. It carries gp-base's internal discipline: documented Tier-1 primitives, Tier-2 semantics * that map to them, components consuming semantics only. * 3. Public-page CSS consumes these semantics. The no-raw-hex guard keeps enforcing everywhere * outside the two Tier-1 homes. Two homes, not an amnesty. This file is the ONE authorized * basename addition to $EXEMPT_BASENAMES in .github/scripts/css-hex-guard.php. * * THE RULE FOR ANYONE EDITING A PUBLIC PAGE * Never write a raw hex in public-page CSS. Consume a Tier-2 semantic. If an intent is missing, * add a Tier-2 semantic here that maps to an existing primitive. Add a Tier-1 primitive only for * a genuinely new brand colour, and say why in its comment. */ :root { /* ========================================================================= TIER 1 — PRIMITIVES. Raw hex lives HERE AND NOWHERE ELSE on this surface. Values are the owner-approved mockup's own, after the Phase 0 dedup that collapsed its indistinguishable duplicates (see css/gp-homepage.css header). ========================================================================= */ /* --- Cool/slate neutral ramp ------------------------------------------- The mockup's greys are deliberately cool. Do not substitute the app's pure-neutral gray-*; the nearest neighbours are 25 to 42 units away and the shift is visible. Ordered light to dark. */ --gpp-white: #ffffff; --gpp-slate-50: #d6d7da; /* table text, quote copy, footer links on dark */ --gpp-slate-100: #c9cacf; /* mock row labels */ --gpp-slate-200: #b9bac0; /* nav links at rest */ --gpp-slate-300: #aeb0b6; /* hero lede */ --gpp-slate-400: #9a9ca3; /* mission body, comparison cell text */ --gpp-slate-500: #83858c; /* secondary/meta text on dark surfaces */ --gpp-slate-600: #6b6f76; /* muted text on light surfaces */ --gpp-slate-700: #3b3d42; /* list copy on light surfaces */ /* --- Near-black ramp ---------------------------------------------------- Five distinct values with distinct jobs; the Phase 0 dedup already merged everything mergeable. The two ends are 24 apart, so this is a ramp, not a set of duplicates: ink-650/800/900 exist to build the gradients. */ --gpp-ink-600: #1d1f23; /* .btn-dark hover state */ --gpp-ink-650: #1a1b1f; /* gradient stop (top of the hero scorecard) */ --gpp-ink-700: #17181b; /* body ink, and the dark chip surface */ --gpp-ink-800: #111215; /* flat dark card surface, gradient stop */ --gpp-ink-900: #0a0a0c; /* deepest gradient stop */ --gpp-black: #000000; /* the surface's true black: header, hero, footer */ /* --- Warm neutrals ------------------------------------------------------ */ --gpp-cream: #f7f5f0; /* the page's default canvas */ --gpp-cream-2: #efebe2; /* alternate warm band */ /* --- Brand ------------------------------------------------------------- ONE gold intent. --gpp-gold is the canonical --gp-gold; the mockup wrote #e1b658, which is 3.0 away and imperceptible, so it consolidates per the orchestrator ruling. The two further golds do NOT consolidate, and the measurement is why: #c9a830 is 49.2 from canonical and #8a6a17 is 132.9. Both are visible, and 8a6a17 is a GRADIENT ENDPOINT, so collapsing it would flatten the gradient into a solid. They are kept as construction shades, used only to build tints and gradients, never as a second accent. See §2 of the plan, which allows exactly this exception where a before/after shows visible damage. */ --gpp-gold: #DFB859; /* canonical brand gold = --gp-gold */ --gpp-gold-deep: #c9a830; /* tint/glow source + logo mark; 49.2 from gold */ --gpp-gold-shade: #8a6a17; /* gradient endpoint only; 132.9 from gold */ --gpp-crimson: #b91c3c; /* the eyebrow dot and hero bloom */ /* --- Signal ------------------------------------------------------------ Status only, never decoration, matching the app world's discipline. */ --gpp-success: #3ccb7f; --gpp-danger: #e5484d; /* ========================================================================= TIER 2 — SEMANTICS. Every value maps to a Tier-1 primitive above. Components consume THESE. This is the seam a rebrand or a dark mode moves. ========================================================================= */ /* Surfaces */ --gpp-color-bg: var(--gpp-cream); /* default page canvas */ --gpp-color-bg-alt: var(--gpp-cream-2); /* alternate warm band */ --gpp-color-bg-invert: var(--gpp-black); /* dark sections */ --gpp-color-surface: var(--gpp-white); /* cards on light */ --gpp-color-surface-dark: var(--gpp-ink-800); /* cards on dark */ --gpp-color-surface-chip: var(--gpp-ink-700); /* chips/rows inside dark cards */ --gpp-color-surface-hover: var(--gpp-ink-600); /* dark button hover */ /* Text */ --gpp-color-text: var(--gpp-ink-700); /* body ink on light */ --gpp-color-text-invert: var(--gpp-white); /* body on dark */ --gpp-color-text-muted: var(--gpp-slate-600); /* muted on light */ --gpp-color-text-muted-dark: var(--gpp-slate-500); /* muted on dark */ --gpp-color-text-body-dark: var(--gpp-slate-400); /* long copy on dark */ --gpp-color-text-lede: var(--gpp-slate-300); /* hero lede */ --gpp-color-text-nav: var(--gpp-slate-200); /* nav links at rest */ --gpp-color-text-table: var(--gpp-slate-50); /* table + quote copy on dark */ --gpp-color-text-list: var(--gpp-slate-700); /* list copy on light */ /* Brand + intent. Gold is a CTA/accent intent, never a wash or a tint fill. */ --gpp-color-accent: var(--gpp-gold); --gpp-color-accent-mark: var(--gpp-gold-deep); /* the logo's plus */ --gpp-color-brand-dot: var(--gpp-crimson); --gpp-color-cta: var(--gpp-gold); --gpp-color-cta-ink: var(--gpp-black); --gpp-color-success: var(--gpp-success); --gpp-color-danger: var(--gpp-danger); /* Hairlines */ --gpp-line: rgba(255,255,255,0.09); --gpp-line-dark: rgba(0,0,0,0.08); /* Accent tints. Built from --gpp-gold-deep (201,168,48) and the crimson, which is why those primitives survive: an rgba() cannot be derived from a hex var without relative-colour syntax, which is not safe to rely on yet. */ --gpp-tint-accent-06: rgba(201,168,48,0.06); --gpp-tint-accent-10: rgba(201,168,48,0.10); --gpp-tint-accent-14: rgba(201,168,48,0.14); --gpp-tint-accent-30: rgba(201,168,48,0.30); --gpp-tint-accent-35: rgba(201,168,48,0.35); --gpp-tint-accent-40: rgba(201,168,48,0.40); --gpp-tint-accent-glow: rgba(201,168,48,0.16); --gpp-tint-crimson-glow: rgba(185,28,60,0.14); --gpp-tint-success-16: rgba(60,203,127,0.16); --gpp-tint-success-35: rgba(60,203,127,0.35); --gpp-tint-white-05: rgba(255,255,255,0.05); --gpp-tint-white-06: rgba(255,255,255,0.06); --gpp-tint-white-07: rgba(255,255,255,0.07); --gpp-tint-white-20: rgba(255,255,255,0.20); --gpp-tint-white-28: rgba(255,255,255,0.28); --gpp-tint-white-30: rgba(255,255,255,0.30); --gpp-tint-white-70: rgba(255,255,255,0.70); /* Media. The public surface's video frame, added 2026-08-16 with the homepage hero film. Radius tiers are the reference player's, measured in docs/research/2026-08-08-clean-video-container.md §1: 12px below 1025px, 24px above. The mat is the card sitting flush behind a video, and it exists for one moment only: the beat before the poster paints, when a rounded corner would otherwise show the page through it. So it has to match the FILM's own edge colour, and ink-700 is that colour. MEASURED on the shipped poster's four corners: rgb(25,25,25), rgb(22,24,21), rgb(27,27,25), rgb(22,19,22). --gpp-ink-700 is #17181b, under 3 units away. The last three carry the play/pause control. Owner direction 2026-08-16 is that the control is a bare white glyph with no plate behind it, so the glyph has to hold its own edge over footage that changes: the keyline traces it as a hairline, the shadow seats it, and the plate appears for keyboard focus only. Gold is deliberately absent from all of them: this is a utility control, not a call to action. */ --gpp-media-radius: .75rem; --gpp-media-radius-lg: 1.5rem; --gpp-color-media-mat: var(--gpp-ink-700); --gpp-glyph-keyline: rgba(0,0,0,0.85); --gpp-glyph-shadow: rgba(0,0,0,0.45); --gpp-scrim-control-strong: rgba(0,0,0,0.68); }