/* 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; } } /* ---------- Gentle, additive button feel (face CSS keeps visual ownership) ---------- */ .btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn:active { transform: scale(.97); } .btn.is-loading { position: relative; pointer-events: none; color: transparent !important; } .btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: cly-spin .7s linear infinite; } @keyframes cly-spin { to { transform: rotate(360deg); } } /* ---------- Skeleton ---------- */ .cly-skel { display: block; height: 14px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: cly-shimmer 1.2s ease-in-out infinite; margin: var(--space-2) 0; } @keyframes cly-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---------- Toasts ---------- */ .cly-toast-host { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; pointer-events: none; width: min(92vw, 480px); } .cly-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); background: var(--ink); color: #fff; font-family: var(--font-ui); font-size: var(--text-md); padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); max-width: 100%; } .cly-toast.show { opacity: 1; transform: translateY(0); } .cly-toast.success { background: var(--ok); } .cly-toast.error { background: var(--err); } .cly-toast-close { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 0 0 4px; opacity: .8; } .cly-toast-close:hover { opacity: 1; } /* ---------- Modals ---------- */ .cly-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 24, .55); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .cly-modal-backdrop.show { opacity: 1; } .cly-modal { background: var(--surface); color: var(--ink); font-family: var(--font-ui); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); width: min(92vw, 420px); padding: var(--space-5); transform: scale(.96); transition: transform var(--dur-base) var(--ease-spring); } .cly-modal-backdrop.show .cly-modal { transform: scale(1); } .cly-modal-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; } .cly-modal-message { margin: 0 0 var(--space-4); color: var(--ink-2); font-size: var(--text-md); white-space: pre-line; } .cly-modal-input { width: 100%; box-sizing: border-box; font-size: var(--text-md); font-family: var(--font-ui); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--space-4); background: var(--surface); color: var(--ink); } .cly-modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; } /* ---------- Popover (speaker volume etc.) ---------- */ .cly-popover { position: absolute; z-index: 10002; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: var(--space-4); font-family: var(--font-ui); font-size: var(--text-sm); min-width: 200px; } .cly-popover label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .cly-popover input[type="range"] { width: 100%; accent-color: var(--brand); }