/* cardly-base.css — Cardly Feel design system (Phase 1). Load FIRST, before the face stylesheet (cardly-public/op/admin.css): face rules intentionally win on conflicts so untouched pages don't regress. Tokens + cly-* primitives only. No page layout here. */ /* ---------- Display face ---------- */ @font-face { font-family: 'Fraunces'; src: url('fonts/fraunces-var.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* type */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --text-xs: 12px; --text-sm: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; /* space (4px scale) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* radius + elevation */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; --shadow-1: 0 1px 3px rgba(15, 26, 42, .10); --shadow-2: 0 4px 14px rgba(15, 26, 42, .12); --shadow-3: 0 12px 36px rgba(15, 26, 42, .18); /* motion */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 350ms; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* brand-derived — static navy fallbacks first, color-mix() upgrades after */ --brand: var(--brand-primary, #1f3a5f); --brand-on: #ffffff; /* recomputed by CardlyUI.applyBrandOn() */ --brand-tint-1: #e9eef5; --brand-tint-2: #d3dcea; --brand-hover: #18304f; /* neutrals */ --surface: #ffffff; --surface-2: #f6f7f9; --ink: #17202b; --ink-2: #5b6672; --line: #e3e7ec; --ok: #15803d; --err: #b91c1c; --warn: #b45309; } @supports (color: color-mix(in srgb, red 50%, white)) { :root { --brand-tint-1: color-mix(in srgb, var(--brand) 9%, white); --brand-tint-2: color-mix(in srgb, var(--brand) 18%, white); --brand-hover: color-mix(in srgb, var(--brand) 88%, black); } } /* Dark tokens — OP face only. Two triggers, same values: 1) explicit choice: data-theme="dark" on (header toggle, localStorage cardly.theme) 2) OS preference: prefers-color-scheme dark, unless the user explicitly chose light. Buyer faces stay light-first (card.jsp owns its own independent dark stage). In dark, panels (--surface) are LIGHTER than the page (--surface-2). */ :root[data-theme="dark"][data-face="op"] { --surface: #1d242e; --surface-2: #12161c; --ink: #e7ebf0; --ink-2: #9aa5b1; --line: #2b3441; --brand-tint-1: #222b37; --brand-tint-2: #2b3644; --shadow-1: 0 1px 3px rgba(0, 0, 0, .5); --shadow-2: 0 4px 14px rgba(0, 0, 0, .5); --shadow-3: 0 12px 36px rgba(0, 0, 0, .6); } @media (prefers-color-scheme: dark) { :root[data-face="op"]:not([data-theme="light"]) { --surface: #1d242e; --surface-2: #12161c; --ink: #e7ebf0; --ink-2: #9aa5b1; --line: #2b3441; --brand-tint-1: #222b37; --brand-tint-2: #2b3644; --shadow-1: 0 1px 3px rgba(0, 0, 0, .5); --shadow-2: 0 4px 14px rgba(0, 0, 0, .5); --shadow-3: 0 12px 36px rgba(0, 0, 0, .6); } } /* ---------- Reduced motion: kill it all ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Shared text helpers ---------- .muted was defined ONLY in cardly-op.css, which the PUBLIC pages do not load, so every on the storefront, the thanks page and the card page rendered as full-weight body copy — including the under-field help text the placeholder directive requires to be visibly secondary. Defining it here, in the file every face loads, is what makes the class mean the same thing on all three. cardly-op.css keeps its identical rule and simply wins by load order, with the same value. */ .muted { color: var(--ink-2); } /* Under-field help text. This is the home of the directive that forbids a `placeholder` on a field that already has a