/* * v2 design system — small custom CSS layered on top of Tailwind. * * Colours resolve to the CSS variables defined in theme-tokens.css (loaded * first in every v2 layout), so light/dark flips with the * attribute. DARK values are byte-identical to the pre-theme hardcoded ones. * * Anything that's a Tailwind utility class lives in the markup. * Anything that needs a CSS feature Tailwind doesn't ship by default * (font tabular-nums, animated dot, custom hairline ring) lives here. */ /* color-scheme is set per-theme in theme-tokens.css */ html, body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: hsl(var(--c-bg)); color: rgb(var(--z-100)); } /* Tabular numerics for amounts — keeps columns aligned */ .num { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-feature-settings: 'tnum' 1, 'cv11' 1; } /* Hairline border that survives both dark/light bg via inset shadow */ .ring-line { box-shadow: inset 0 0 0 1px hsl(var(--c-line)); } /* Pulsing earning indicator */ .pulse-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: rgb(var(--c-brand)); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 4px rgb(var(--c-brand) / 0.18); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* * Brand button — used a lot, so a small CSS class keeps markup tidy. * Tailwind equivalent would need ~6 utility classes per button. */ .btn-brand { background: rgb(var(--c-brand)); color: rgb(9 9 11); font-weight: 500; border-radius: 0.5rem; padding: 0.625rem 1rem; font-size: 0.8125rem; transition: background 150ms; white-space: nowrap; /* prevent CTA text wrapping on narrow viewports */ } /* :target highlight — applied to any element with .anchor-target whose id matches the URL hash. Gives the user visual feedback when they land on a deep-linked row (e.g. the "Review →" link from the withdrawal list page to the focused review queue). */ .anchor-target:target { background: rgb(var(--c-brand) / 0.06) !important; box-shadow: inset 0 0 0 2px rgb(var(--c-brand) / 0.4); animation: anchor-target-pulse 1.2s ease-out; } @keyframes anchor-target-pulse { 0% { background: rgb(var(--c-brand) / 0.18); } 100% { background: rgb(var(--c-brand) / 0.06); } } .btn-brand:hover { background: rgb(var(--c-brand-dark)); } .btn-brand:disabled { background: rgb(var(--z-700)); color: rgb(var(--z-400)); cursor: not-allowed; } .btn-ghost { background: hsl(var(--c-card)); box-shadow: inset 0 0 0 1px hsl(var(--c-line)); color: rgb(var(--z-100)); font-weight: 500; border-radius: 0.5rem; padding: 0.625rem 1rem; font-size: 0.8125rem; transition: box-shadow 150ms; white-space: nowrap; /* same — keep ghost CTAs on a single line */ } .btn-ghost:hover { box-shadow: inset 0 0 0 2px hsl(240 4% 30%); } /* Form inputs — minimum-friction style for the redesign */ .input-v2 { background: hsl(var(--c-card)); box-shadow: inset 0 0 0 1px hsl(var(--c-line)); color: rgb(var(--z-100)); border-radius: 0.5rem; padding: 0.625rem 0.875rem; /* 16px on mobile to prevent iOS Safari from auto-zooming the page when a field is focused (any input < 16px triggers the zoom-and-don't-restore behavior). 14px above sm so desktop forms keep their compact look. */ font-size: 16px; width: 100%; outline: none; transition: box-shadow 150ms; } @media (min-width: 640px) { .input-v2 { font-size: 0.875rem; } } .input-v2:focus { box-shadow: inset 0 0 0 2px rgb(var(--c-brand)); } .input-v2::placeholder { color: rgb(var(--z-600)); } /*