/* ============================================================ * Alpha FPL — Shared chrome. * * Brand mark, theme toggle, status pills. Loaded by base.html * after tokens-light.css so it can consume the alias tokens. * * Spec: docs/superpowers/specs/2026-05-16-light-mode-default-experience-design.md * * Brand mark (A-arc v2.0, May 2026): * Custom A glyph — straight left leg + arced right leg + crossbar. * 3 strokes on a 64×64 grid. Substitutes for the typeset capital A * in the wordmark, so the lockup spells "{A}lpha FPL". * * Brand-mark don'ts (codified): * - Don't use --coral for the brand mark (--navy / white only). * - Don't recolor the arc — left straight + right curved IS the mark. * - Don't letter-space "FPL" or change its weight relative to "lpha". * - Don't place on gradient/saturated bg — navy-on-paper or * white-on-dark only. * - Don't drop below 11px (tiny) — crossbar starts to compress. * ============================================================ */ /* ---------- Brand mark ---------- */ .brand { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--font-sans); font-size: 17px; /* nav default (lk-nav) */ font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--text-1); text-decoration: none; } .brand svg { width: 18px; height: 17px; display: block; color: var(--navy); /* navy on light surfaces */ flex-shrink: 0; align-self: baseline; transform: translateY(0.04em); margin-right: -0.02em; } :root[data-theme="dark"] .brand svg { color: #FFFFFF; /* white on dark surfaces */ } .brand .alpha { color: var(--text-1); margin-left: -0.04em; } .brand .fpl { color: var(--text-3); margin-left: 0.32em; font-weight: 700; } :root[data-theme="dark"] .brand .fpl { color: rgba(255, 255, 255, 0.55); } .brand:hover { opacity: 0.85; } /* Size variants — used in marketing, auth, modals, hero. Mirror the lockup sizes from logo/system.html: display 56 / heading 32 / subhead 22 / nav 17 (default) / tiny 11. */ .brand--display { font-size: 56px; letter-spacing: -0.03em; } .brand--display svg { width: 60px; height: 56px; } .brand--heading { font-size: 32px; letter-spacing: -0.025em; } .brand--heading svg { width: 36px; height: 34px; } .brand--subhead { font-size: 22px; letter-spacing: -0.022em; } .brand--subhead svg { width: 24px; height: 22px; } .brand--nav { font-size: 17px; letter-spacing: -0.02em; } .brand--nav svg { width: 18px; height: 17px; } .brand--tiny { font-size: 11px; letter-spacing: -0.01em; } .brand--tiny svg { width: 12px; height: 11px; } /* Back-compat: --mini was the old smallest variant; now alias of --tiny. */ .brand--mini { font-size: 11px; letter-spacing: -0.01em; } .brand--mini svg { width: 12px; height: 11px; } /* ---------- Draw-on (first view of a session only) ---------- The three strokes carry pathLength="100" (see _partials/brand.html), so one dash length covers the leg, the arc and the crossbar alike. The leg goes down first, the arc answers it, the crossbar lands last — the order a hand would draw the letter in. .brand-animate is set on by the gate in the partial, before the svg is parsed. Without the class the mark is simply drawn, which is also what happens if the script never runs. */ .brand-animate .brand svg path, .brand-animate .brand svg line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: brand-draw 380ms var(--ease-sport) forwards; } .brand-animate .brand svg .brand-arc { animation-duration: 460ms; animation-delay: 150ms; } .brand-animate .brand svg .brand-bar { animation-duration: 200ms; animation-delay: 480ms; } @keyframes brand-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .brand-animate .brand svg path, .brand-animate .brand svg line { animation: none; stroke-dashoffset: 0; } } /* ---------- Signal triangles (in-product vocabulary) ---------- */ .signal { display: inline-flex; vertical-align: -2px; } .signal svg { width: 12px; height: 11px; display: block; } .signal--up svg { color: var(--pos); } .signal--down svg { color: var(--neg); transform: rotate(180deg); } .signal--hold svg { color: var(--amb); fill: none; stroke: currentColor; stroke-width: 2.4; } /* ---------- Status pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--text-small); font-weight: 600; line-height: 1; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; } .pill--pos { background: var(--pill-pos-bg); color: var(--pill-pos-fg); } .pill--pos::before { background: var(--pill-pos-dot); } .pill--neg { background: var(--pill-neg-bg); color: var(--pill-neg-fg); } .pill--neg::before { background: var(--pill-neg-dot); } .pill--amb { background: var(--pill-amb-bg); color: var(--pill-amb-fg); } .pill--amb::before { background: var(--pill-amb-dot); } .pill--cya { background: var(--pill-cya-bg); color: var(--pill-cya-fg); } .pill--cya::before { background: var(--pill-cya-dot); } /* ---------- Theme toggle (segmented control) ---------- */ .theme-toggle { display: inline-flex; background: var(--app-sunk); border: 1px solid var(--app-hairline); border-radius: 999px; padding: 2px; gap: 0; } .theme-toggle button { appearance: none; background: transparent; border: 0; padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); cursor: pointer; border-radius: 999px; font-family: var(--font-mono); } .theme-toggle button[aria-pressed="true"] { background: var(--app-raised); color: var(--text-1); box-shadow: 0 1px 2px rgba(15, 42, 64, 0.08); } .theme-toggle button:hover:not([aria-pressed="true"]) { color: var(--text-2); }