/* ai-first-css-brand.css — generated by Blueprint */ /* Import after the-point/index.css. No mood file. */ /* Vocabulary resolution: Density: compact → --space-unit: 0.825rem, --font-size-base: 15px Weight: medium → --font-weight-heading: 500 (body stays default 400) Tracking: closed → already satisfied by The Point's own default (-0.025em is tighter than "closed"'s -0.02em) — no override written Motion: surgical → --duration-fast: 0.05s, --duration-base: 0.1s, --duration-slow: 0.15s, --easing-bounce: ease, --easing-smooth: ease; no data-bp-motion attribute on Shape: precise → --radius: var(--bp-radius-sm) Depth: subtle → default, omitted Theme: dark → data-bp-theme="dark" on Type family: geometric-sans → default (Inter), omitted — the framework's own default type IS the brand's type; see color rationale below Layout: data-dense → multi-column comparisons, stat rows, tables over full-bleed imagery Image: mockup → implemented as literal, live bp- components — the page dogfoods the real system, not a CSS approximation of one Compositional mode: functional → labels and facts over atmosphere; hero is headline + subtitle + CTA, visual proof is secondary and informational Format Ref: spec-sheet → data-dense, reference-first; CTA is a Quick Start block, not a lead-gen form Tone: technical → @copy: precise, no-nonsense, show the thing — blended with the brief's "punchy, benefit-forward framing, precise on technical claims" requirement (see @copy handoff) ── The one deliberate non-choice: color ────────────────────────────────── --color-primary, --color-bg, and every other color token are INTENTIONALLY left unset. This page's entire argument is "The Point ships a genuine, deliberate design by default — an AI's first pass doesn't need a brand layer to look considered." The other two Point marketing pages (the-point.html, the-point-system.html) each picked a divergent accent (amber, cyan) to look like "a brand." Doing that here would visually contradict the sentence this page is making with its own mouth. The stock dark-theme blueprint blue (#3b82f6 on #0a1628) you see below is not a fallback — it's the chosen color, chosen by not touching it. The grid tint is left unmodified for the same reason. */ @layer brand-state { :root { /* density: compact — this is a reference/comparison-table page (spec-sheet format); information density reads as credibility here, the way a datasheet's tight rows do */ --space-unit: 0.825rem; --font-size-base: 15px; /* weight: medium — one step below The Point's own semibold (600) default. Enough to feel considered and restrained (the "research lab" reading of the interview) without going all the way to the shouting weight most AI-generated dev-tool pages default to */ --font-weight-heading: 500; /* shape: precise — a whisper of rounding, not zero. Sharp (0px) reads "legal/industrial"; this is a technical product, not a compliance product */ --radius: var(--bp-radius-sm); /* motion: surgical — this is a page for engineers evaluating a tool quickly ("$50 energy," Linear-not-Airbnb). No entrance choreography, no bounce. Interactions snap, they don't perform */ --duration-fast: 0.05s; --duration-base: 0.1s; --duration-slow: 0.15s; --easing-bounce: ease; --easing-smooth: ease; } /* ── Component CSS ─────────────────────────────────────────────────────── Custom classes for this build's bespoke sections. Prefixed `aic-` (ai-first-css) to avoid collision with other Point example builds. ──────────────────────────────────────────────────────────────────────── */ /* Fix Round 1 — route the actual heading-bearing classes used on this page through --font-weight-heading (500). Without this, Weight = medium never reaches the rendered page because these classes hardcode bold/semibold from assets/core/components.css and no bare

-

exists in the HTML. */ .bp-hero-title, .bp-section-title, .bp-card-title, .bp-stat-value, .bp-step-title, .bp-footer-brand-name, .bp-alert-title { font-weight: var(--font-weight-heading); } /* Hero install snippet — the "one import" proof, right under the fold */ .aic-install-snippet { display: inline-flex; align-items: center; gap: var(--bp-space-3); padding: var(--bp-space-3) var(--bp-space-4); background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--bp-text-sm); color: var(--color-text-secondary); max-width: 100%; overflow-x: auto; } .aic-install-snippet code { color: var(--color-text-accent); white-space: nowrap; } /* The Problem — drift demo: two "raw utility" buttons that look almost identical but are built from two unrelated class recipes. These are deliberately NOT bp- classes — they represent the world The Point replaces. */ .aic-drift-row { display: flex; flex-wrap: wrap; gap: var(--bp-space-6); align-items: flex-start; } .aic-drift-item { display: flex; flex-direction: column; gap: var(--bp-space-3); flex: 1; min-width: 220px; } .aic-drift-recipe { display: block; background: var(--color-surface-inset, var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--bp-radius-sm); padding: var(--bp-space-3); font-family: var(--font-mono); font-size: var(--bp-text-xs); line-height: 1.6; color: var(--color-text-muted); word-break: break-word; } /* The Mechanism — cascade layer stack diagram */ .aic-layer-stack { display: flex; flex-direction: column; gap: 2px; } .aic-layer-band { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-space-4); padding: var(--bp-space-4) var(--bp-space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); transition: var(--bp-transition-base); } .aic-layer-band-name { font-family: var(--font-mono); font-size: var(--bp-text-sm); color: var(--color-text-secondary); } .aic-layer-band-note { font-size: var(--bp-text-sm); color: var(--color-text-muted); text-align: right; } .aic-layer-band--wins { background: var(--color-primary-subtle); border-left-color: var(--color-primary); } .aic-layer-band--wins .aic-layer-band-name { color: var(--color-text-accent); font-weight: var(--font-weight-medium); } /* Before / After — the marquee comparison */ .aic-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bp-space-6); align-items: stretch; } @media (max-width: 767.98px) { .aic-compare-grid { grid-template-columns: 1fr; } } .aic-compare-panel { display: flex; flex-direction: column; gap: var(--bp-space-5); padding: var(--bp-space-6); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .aic-compare-panel--after { border-color: var(--color-primary); } .aic-compare-head { display: flex; align-items: center; justify-content: space-between; } .aic-compare-stage { display: flex; align-items: center; justify-content: center; padding: var(--bp-space-8) var(--bp-space-4); background: var(--color-bg); border-radius: var(--bp-radius-sm); border: 1px solid var(--color-border-subtle, var(--color-border)); } .aic-compare-code { display: block; font-family: var(--font-mono); font-size: var(--bp-text-xs); line-height: 1.7; color: var(--color-text-muted); background: var(--color-surface-inset, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--bp-radius-sm); padding: var(--bp-space-4); white-space: pre-wrap; word-break: break-word; margin: 0; } .aic-compare-panel--after .aic-compare-code { color: var(--color-text-accent); } /* Simulated raw-utility button — represents the "before" world; intentionally not a bp-btn */ .aic-raw-btn { display: inline-block; padding: 10px 18px; background: #2563eb; color: #ffffff; font-family: system-ui, sans-serif; font-size: 14px; font-weight: 600; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); border: none; } /* Simulated raw-utility feature card — Before/After section. Renders what a generic utility-class stack (Tailwind-style defaults) produces, so the comparison is a real visual, not a description of one. Deliberately not bp-card — that's the point being made. */ .aic-raw-card { border-radius: 12px; border: 1px solid #e5e7eb; background: #ffffff; padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } .aic-raw-card-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0 0 8px; font-family: system-ui, sans-serif; } .aic-raw-card-desc { font-size: 14px; color: #4b5563; line-height: 1.6; margin: 0 0 16px; font-family: system-ui, sans-serif; } /* Default Blueprint Aesthetic — proof strip framing */ .aic-proof-frame { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: var(--bp-space-8); position: relative; } .aic-proof-frame-label { position: absolute; top: -0.65em; left: var(--bp-space-5); background: var(--color-bg); padding: 0 var(--bp-space-2); font-family: var(--font-mono); font-size: var(--bp-text-xs); letter-spacing: var(--letter-spacing-wide, 0.05em); text-transform: uppercase; color: var(--color-text-muted); } /* Quick Start — the spec-sheet CTA, a real install panel not a lead-gen form */ .aic-quickstart { display: flex; flex-direction: column; gap: var(--bp-space-4); max-width: 620px; } .aic-quickstart-cmd { display: block; font-family: var(--font-mono); font-size: var(--bp-text-sm); color: var(--color-text-accent); background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--bp-space-4) var(--bp-space-5); overflow-x: auto; margin: 0; } }