/* ============================================================================ Portmasters v2 — AuthBrandPanel — auth-brand-panel.css (Premium redesign) ---------------------------------------------------------------------------- The branded surface that fills the promo half of every pre-login screen. REDESIGN (2026-07-12, founder brief "auth is bullshit"): the previous version faithfully reproduced the product's stock pre-login art — a flat magenta mesh gradient washing the whole panel, a repeated "Portmasters" watermark, and a div-mock dashboard bleeding in. Applying two design references: · taste-skill — kill the AI-purple gradient bath (THE LILA RULE); off-black base + magenta as ONE restrained light source; no watermark cliché, no fake-div screenshot; one accent, one radius scale. · apple-design — material depth over flat fill; a real top edge-highlight so the surface reads as lit material; optical display tracking; vibrant (not flat-grey) text over the dark material. Still fully inside the Portmasters system: magenta brand, Inter, 8px radius, semantic tokens, no pills (Amir veto), strict BEM (.pm-brandpanel*), airtight in both themes (the panel is theme-invariant — a branded dark surface either way). ============================================================================ */ @import url("../../tokens/tokens.css"); @import url("../../tokens/tokens-semantic.css"); @import url("../../tokens/tokens-type.css"); /* product type ramp — the 14 named Figma text styles (2026-08-01) */ /* Fixed brand primitives — scoped, no dark override (the panel is a dark brand surface in BOTH themes). Base is the deep near-black (magenta reads as an accent pop against it, not a bath); the accent stops drive the single magenta light. */ .pm-brandpanel { --bp-base: var(--deep); /* #0f0715 — the dark PAGE plane; the material body (was #0b0410 before the 2026-07-29 plane move) */ --bp-lift: var(--deep-2); /* #1e1029 — the dark TRAY plane; the lit corner of the material. 2026-08-02: was var(--deep-3), the DEPRECATED alias tokens.css:143 names this file as a remaining reader of. Same value, no visual change — the deprecated read is gone. */ --bp-accent: var(--primary-500); /* #d342f0 — the one magenta accent/light */ } /* ---------------------------------------------------------------------------- ROOT — a lit dark material, not a gradient wash. Layers, back to front: 1. two restrained radial lights (magenta top-right = key, purple bottom-left = fill) that give the surface DIMENSION without bathing it in colour; 2. the near-black base; plus a hairline inner top highlight (light catching the material's top edge, apple §12) and a soft edge vignette for depth. overflow clips the sail + lights. ---------------------------------------------------------------------------- */ .pm-brandpanel { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--bp-height, 0); min-width: 0; overflow: hidden; isolation: isolate; color: var(--text-on-dark); font-family: var(--font-body, "Inter", system-ui, sans-serif); background-color: var(--bp-base); background-image: radial-gradient(120% 90% at 92% 8%, color-mix(in srgb, var(--bp-accent) 26%, transparent) 0%, transparent 46%), radial-gradient(120% 110% at 4% 108%, color-mix(in srgb, var(--primary-800) 40%, transparent) 0%, transparent 50%), linear-gradient(180deg, var(--bp-lift) 0%, var(--bp-base) 60%); /* 2026-07-29 — inner shadows removed file-wide (Figma parity). The lit top edge + edge vignette were the only material inset shadows in components/; every other `inset` here is a focus ring or an accent rail and survives untouched. */ } .pm-brandpanel *, .pm-brandpanel *::before, .pm-brandpanel *::after { box-sizing: border-box; } /* ---------------------------------------------------------------------------- FINE GRID TEXTURE — replaces the repeated-wordmark watermark. A precise, almost- subliminal hairline grid (structural craft, apple "familiarity" — reads like a spec/blueprint under the brand) at very low alpha, radially masked so it fades to nothing before it competes with the content. Pure decoration, non-interactive. ---------------------------------------------------------------------------- */ .pm-brandpanel__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--text-on-dark) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--text-on-dark) 4%, transparent) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(120% 100% at 70% 30%, black 0%, transparent 72%); mask-image: radial-gradient(120% 100% at 70% 30%, black 0%, transparent 72%); } /* ---------------------------------------------------------------------------- SAIL SIGNATURE — the concentric sail brandmark, now a precise LARGE signature anchored bottom-trailing and bleeding off two edges. Faint white body + a crisp magenta hairline ring — a confident geometric mark, not a faded blob. Behind content; logical insets so it mirrors under RTL. ---------------------------------------------------------------------------- */ .pm-brandpanel__sail { position: absolute; z-index: 1; inset-block-end: -14%; inset-inline-end: -12%; width: clamp(22rem, 52%, 40rem); aspect-ratio: 1 / 1; pointer-events: none; opacity: 0.9; } .pm-brandpanel__sail svg { display: block; width: 100%; height: auto; } .pm-brandpanel__sail-fill { fill: color-mix(in srgb, var(--text-on-dark) 5%, transparent); } .pm-brandpanel__sail-stroke { stroke-width: 1.25; stroke-opacity: 0.55; /* crisp but restrained hairline */ } /* ---------------------------------------------------------------------------- CONTENT SLOT — one variant, centred vertically, above the art (z 2). Generous gutter, a real reading measure. Left-aligned by default; the LOGO variant re-centres. NO entrance animation ships here (the reduced-motion block at the foot is a forward-guard only — corrected 2026-08-02; the header used to promise a "spring-flavoured settle" this file has never declared). ---------------------------------------------------------------------------- */ .pm-brandpanel__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 32rem; min-width: 0; /* 2026-08-02 — the gutter ceiling was `var(--space-9)`, a stop that has NEVER existed. An unresolvable var() with no fallback is invalid at computed-value time, so the whole declaration died and padding-inline fell back to its initial 0: the panel copy shipped flush to the edge. Fixed HERE, not in the ramp — tokens.css:497 refused a ninth stop (the layout tier is fixed at eight in foundation-space.md §1.3, and 96px has no provenance: not in the 335-use census, not in PROD, not behind a Figma variable) and recorded --space-8 as the replacement it wants. 64px is the widest gutter the ramp offers, and it is the ceiling this clamp shape already uses twice next door: __proof's gap below, and auth-split-layout.css — the layout that HOSTS this panel — whose own padding reads `clamp(var(--space-6), 6vw, var(--space-8))`. Identical now, so the panel gutter and its frame widen in step. No new token. */ padding-inline: clamp(var(--space-6), 6vw, var(--space-8)); /* 32px → 64px */ color: var(--text-on-dark); } /* MARKETING variant — confident WHITE display heading (the magenta is spent on the light, not the type — one accent), optical tight tracking that grows tighter with size (apple §15). Body is vibrant near-white, never flat grey over the material. */ .pm-brandpanel__heading { margin: 0; color: var(--text-on-dark); /* → display/hero. WAS clamp(2.1rem,3.4vw,3rem) = 33.6-48px, measured live at 43.52px. 30px is the product ramp CEILING; the fluid clamp is marketing voice. */ font-size: var(--type-display-hero-size); font-weight: var(--type-display-hero-weight); line-height: var(--type-display-hero-leading); letter-spacing: var(--type-display-hero-tracking); text-wrap: balance; } /* Optional single-word magenta emphasis inside the heading (same family, not a second font) — the one place the accent touches type. */ .pm-brandpanel__heading em { font-style: normal; color: var(--primary-300); } .pm-brandpanel__body { margin: 0; max-width: 42ch; color: color-mix(in srgb, var(--text-on-dark) 82%, transparent); /* vibrant, not flat grey */ /* → body/default. WAS clamp(0.95rem,1.05vw,1.0625rem) = 15.2-17px. */ font-size: var(--type-body-default-size); font-weight: var(--type-body-default-weight); line-height: var(--type-body-default-leading); letter-spacing: var(--type-body-default-tracking); } .pm-brandpanel__body + .pm-brandpanel__body { margin-top: calc(-1 * var(--space-2)); } /* Optional CTA row (real .pm-btn + optional .pm-status trust line — foreign blocks consumed, never restyled here). Left-aligned at natural width. */ .pm-brandpanel__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-2); } /* PROOF STRIP — replaces the fake-div dashboard. A restrained, real metric row (dot + number + label) that reads as brand proof, not a mock screenshot. Numbers are the accent's second small job. Hairline top rule, generous tracking on labels (apple §15 — small text gets positive tracking). */ .pm-brandpanel__proof { display: flex; gap: clamp(var(--space-5), 4vw, var(--space-8)); margin-top: var(--space-3); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--text-on-dark) 12%, transparent); } .pm-brandpanel__stat { display: flex; flex-direction: column; gap: var(--space-1); } /* 4px. WAS a raw 2px — the scale's smallest rung is 4 (S1-OFFSCALE) */ .pm-brandpanel__stat-num { /* → numeral/figure. WAS clamp(1.4rem,2vw,1.75rem) = 22.4-28px. This is the proof-stat number. */ font-size: var(--type-numeral-figure-size); font-weight: var(--type-numeral-figure-weight); line-height: var(--type-numeral-figure-leading); letter-spacing: var(--type-numeral-figure-tracking); color: var(--text-on-dark); } .pm-brandpanel__stat-label { /* → meta/strong. WAS 12px. The label under the stat figure. */ font-size: var(--type-meta-strong-size); font-weight: var(--type-meta-strong-weight); line-height: var(--type-meta-strong-leading); letter-spacing: var(--type-meta-strong-tracking); color: color-mix(in srgb, var(--text-on-dark) 64%, transparent); } /* LOGO variant — a large, centred lockup on the lit material; the sail becomes the quiet backdrop. No watermark. */ .pm-brandpanel--logo .pm-brandpanel__content { align-items: center; text-align: center; max-width: 34rem; gap: var(--space-6); } .pm-brandpanel__logo { display: flex; align-items: center; justify-content: center; width: min(74%, 26rem); color: var(--text-on-dark); /* 2026-08-02 — the magenta bloom behind the lockup is GONE. It was `filter: drop-shadow(0 8px 40px color-mix(--bp-accent 40%))`: a 40px accent halo the approved design does not draw anywhere. Figma's brandmark is a quiet line-art stamp (docs/2026-08-01-figma-vs-code-diff.md:109) and the panel's own rule is ONE magenta light source — the two radial lights on the root. The bloom was a second accent light spent on the mark, i.e. the "fills/effects added where the design uses none" substitution that accounts for 7 of the audit's 10 blockers. No effect replaces it; the lockup sits on the lit material. */ } .pm-brandpanel__logo svg, .pm-brandpanel__logo img { display: block; width: 100%; height: auto; } .pm-brandpanel--logo .pm-brandpanel__tagline { margin: 0; color: color-mix(in srgb, var(--text-on-dark) 60%, transparent); /* → body/strong. WAS 15px. */ font-size: var(--type-body-strong-size); font-weight: var(--type-body-strong-weight); line-height: var(--type-body-strong-leading); letter-spacing: var(--type-body-strong-tracking); } /* ---------------------------------------------------------------------------- FORCED COLORS — decorative art is colour-only; drop it and map the surface to the OS palette so the CONTENT (heading/body/logo) stays legible. ---------------------------------------------------------------------------- */ @media (forced-colors: active) { .pm-brandpanel { background: Canvas; color: CanvasText; border-inline-start: 1px solid CanvasText; } .pm-brandpanel__grid, .pm-brandpanel__sail { display: none; } .pm-brandpanel__heading em { color: CanvasText; } } /* REDUCED MOTION — forward-guard. This component declares no animation and no transition (house convention, same as logo-upload-tile.css); the rule exists so a future entrance can never ship un-guarded. */ @media (prefers-reduced-motion: reduce) { .pm-brandpanel__content > * { animation: none; } } /* ---------------------------------------------------------------------------- DARK — theme-invariant. The panel is already a dark brand material and must stay branded under [data-theme="dark"]; re-assert base + ink so a global "flip every surface" rule can't grey it out. ---------------------------------------------------------------------------- */ [data-theme="dark"] .pm-brandpanel { color: var(--text-on-dark); background-color: var(--bp-base); } /* ============================================================================ A11y contract (markup set by the consumer/story): root