/* ===================================================================== SEALED — Storefront Design System (FINAL, consolidated) Direction: "Apple-grade trust commerce" with grafts from quantro-faithful ("what you get back" card, mode legend), conversion-minimal (result preview, cost-fused CTA, cross-sell band, first-fund states), developer-pro (typed schema table, latency). SINGLE SOURCE OF TRUTH. Both catalog.html and skill-detail.html link THIS file (no inlined :root copies). Production component layers (React/Tailwind) map 1:1 onto these tokens. The palette is deliberately quieter than the old carbon/red treatment: Apple-like system surfaces, graphite text, restrained blue action color, and green only for verified/success states. ── ACCESSIBILITY NOTE (WCAG-AA posture) ──────────────────────────── Load-bearing text uses Apple system graphite on light surfaces. Accent blue is used for actions/links; green is reserved for verified/success states. Decorative faint gray is never used for essential text. ===================================================================== */ :root { /* ---- CORE SURFACES (Apple-like glass + system gray) -------------- */ --bg: #f5f5f7; /* page base */ --bg2: #fbfbfd; /* recessed wells, table stripes */ --panel: #ffffff; /* cards, primary panels */ --panel2: #f5f5f7; /* raised within a panel (inputs, code) */ --panel3: #ececf0; /* highest elevation / hover */ --overlay: rgba(255,255,255,.74); /* modal & sticky scrims */ --page-depth: linear-gradient(180deg,#ffffff 0%,#fbfbfd 34%,#f5f5f7 72%,#ffffff 100%); --page-texture: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); --material: linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)); --material-strong: linear-gradient(180deg,rgba(255,255,255,.98),rgba(251,251,253,.88)); --material-nav: rgba(251,251,253,.78); /* ---- HAIRLINES & DIVIDERS --------------------------------------- */ --line: rgba(0,0,0,.07); --line2: rgba(0,0,0,.11); --line3: rgba(0,0,0,.18); /* focused / active edges */ /* ---- INK (text) — all AA on the surfaces they appear on --------- */ --ink: #1d1d1f; /* primary text */ --ink2: #3a3a3c; /* strong secondary */ --mut: #6e6e73; /* muted BODY text — AA on every surface */ --dim: #86868b; /* small mono meta/labels — AA on white */ --faint: #a1a1a6; /* DECORATIVE only */ /* ---- BRAND: SEAL (the sealed-core accent) ----------------------- */ --seal: #0071e3; /* primary action blue */ --seal-cta: #0071e3; /* SOLID button fill — #fff text clears AA */ --seal2: #2997ff; /* bright blue highlight */ --seal-ink: #d9ecff; /* cool highlight */ --seal-bg: rgba(0,113,227,.09); --seal-bg2: rgba(0,113,227,.14); --seal-line: rgba(0,113,227,.24); /* ---- TRUST / VALUE / STATE -------------------------------------- */ /* Green carries "verified / contained / settled" — the money-safe cue. Reserved exclusively for that meaning. */ --ok: #248a3d; /* verified, value-in, success */ --ok2: #1d7f35; --ok-bg: rgba(36,138,61,.10); --ok-line: rgba(36,138,61,.24); --warn: #b26a00; /* attention, balance-low, ratings star */ --warn-bg: rgba(178,106,0,.10); --warn-line: rgba(178,106,0,.24); --danger: #b42318; /* error / insufficient funds */ --danger-bg: rgba(180,35,24,.10); --danger-line: rgba(180,35,24,.24); /* Mode A advisory tone — amber for attention, distinct from action blue and verified green. */ --modeA-fg: var(--warn); --modeA-bg: var(--warn-bg); --modeA-ln: var(--warn-line); /* ---- TYPE FAMILIES (identical to live identity) ----------------- */ --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; /* ---- TYPE SCALE -------------------------------------------------- */ --t-display: clamp(34px, 4.2vw, 52px); --t-h1: clamp(28px, 3vw, 38px); --t-h2: 24px; --t-h3: 19px; --t-lg: 17px; --t-md: 15px; --t-sm: 13.5px; --t-xs: 12px; --t-2xs: 11px; --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.6; --ls-label: 0; --ls-tight: 0; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ---- SPACING (8pt rhythm) --------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --gutter: 32px; --maxw: 1200px; --maxw-read: 1120px; /* ---- RADII ------------------------------------------------------- */ --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ---- SHADOWS ----------------------------------------------------- */ --shadow-sm: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px -14px rgba(0,0,0,.32); --shadow: 0 1px 0 rgba(255,255,255,.92) inset, 0 16px 42px -34px rgba(0,0,0,.30); --shadow-lg: 0 1px 0 rgba(255,255,255,.94) inset, 0 34px 90px -58px rgba(0,0,0,.34); --shadow-seal: 0 10px 30px -18px rgba(0,113,227,.42); --glow-ok: 0 0 0 1px var(--ok-line), 0 10px 24px -18px rgba(36,138,61,.45); /* ---- FOCUS RING (brand-tinted, white inner ring) ---------------- */ --focus: 0 0 0 2px var(--panel), 0 0 0 4px var(--seal2); /* ---- MOTION ------------------------------------------------------ */ --ease: cubic-bezier(.4,0,.2,1); --dur-1: .12s; --dur-2: .18s; --dur-3: .28s; --t-fast: var(--dur-1) var(--ease); --t-norm: var(--dur-2) var(--ease); /* ---- Z-INDEX ----------------------------------------------------- */ --z-nav: 50; --z-sticky: 40; --z-overlay: 80; --z-modal: 90; --z-toast: 100; } /* --------------------------------------------------------------------- GLOBAL PRIMITIVES — shared across both reference pages. --------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{max-width:100%;overflow-x:hidden} a{color:inherit;text-decoration:none} /* mono micro-label — the fintech "data tag" used everywhere */ .label{ font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dim); } /* skip link */ .skip{ position:absolute; left:-9999px; top:0; background:var(--seal-cta); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:200; font-weight:600; font-size:13px; } .skip:focus{left:0} /* one focus ring on every interactive element */ :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-xs); } #view:focus{outline:none; box-shadow:none} /* primary action — solid seal fill (AA-safe white text) */ .btn-primary{ font-family:var(--sans); font-weight:var(--fw-semi); font-size:var(--t-md); color:#fff; background:var(--seal-cta); border:1px solid var(--seal); border-radius:var(--r-sm); padding:11px 18px; cursor:pointer; box-shadow:var(--shadow-seal); transition:filter var(--t-norm), transform var(--t-fast); display:inline-flex; align-items:center; justify-content:center; gap:8px; } .btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px)} .btn-ghost{ font-family:var(--sans); font-weight:var(--fw-semi); font-size:var(--t-md); color:var(--ink); background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r-sm); padding:11px 18px; cursor:pointer; transition:background var(--t-norm), border-color var(--t-norm); } .btn-ghost:hover{background:var(--panel3); border-color:var(--line3)} @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }