/* ui.css — shared, framework-light UI primitives & components - Keeps existing Tailwind usage, adds consistent tokens and patterns - Honors per-calculator color schemes via data-category on */ /* Tokens */ :root { --radius-card: 16px; --radius-pill: 999px; --elev-1: 0 6px 18px rgba(9, 14, 34, 0.06); --elev-2: 0 12px 32px rgba(76, 29, 149, 0.18); --surface-bg: #F6F7FB; --surface-card: #FFFFFF; --border-subtle: rgba(15, 23, 42, 0.08); --text-strong: #0F172A; --text-muted: #475569; --color-primary: #7C3AED; /* default maps to Financial if no category set */ --color-primary-600: #7C3AED; --color-primary-700: #6D28D9; --color-primary-300: #C4B5FD; --color-success: #16A34A; --color-danger: #DC2626; --color-info: #0EA5E9; } /* Category color mapping (can be overridden per page if needed) */ body[data-category="financial"] { --color-primary: #7C3AED; /* violet-600 */ --color-primary-600: #7C3AED; --color-primary-700: #6D28D9; --color-primary-300: #C4B5FD; } body[data-category="fitness"] { --color-primary: #16A34A; /* green-600 */ --color-primary-600: #16A34A; --color-primary-700: #15803D; --color-primary-300: #86EFAC; } body[data-category="math"] { --color-primary: #0EA5E9; /* sky-500 */ --color-primary-600: #0284C7; --color-primary-700: #0369A1; --color-primary-300: #7DD3FC; } body[data-category="housing"] { --color-primary: #F59E0B; /* amber-500 */ --color-primary-600: #D97706; --color-primary-700: #B45309; --color-primary-300: #FCD34D; } /* Dark mode swaps */ .dark { --surface-bg: #0B1020; --surface-card: #0F1528; --border-subtle: rgba(226, 232, 240, 0.06); --text-strong: #E2E8F0; --text-muted: #94A3B8; } /* Layout helpers */ .container-page { max-width: 1280px; margin-inline: auto; padding-inline: 1rem; } .section { padding-block: 2rem; } /* Back link */ .nav-back { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-primary-700); text-decoration: none; } .nav-back:hover { color: var(--color-primary-600); } /* Cards */ .card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--elev-1); } .card-pad { padding: 1rem; } .card-pad-lg { padding: 1.25rem 1.5rem; } .card--highlight { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 18%, #ffffff 82%), color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%)); border: 0; box-shadow: 0 20px 40px color-mix(in srgb, var(--color-primary) 28%, transparent); } .card--glow { box-shadow: 0 8px 48px color-mix(in srgb, var(--color-primary) 35%, transparent); } /* Metric tiles */ .tile { display: grid; grid-template-columns: 32px 1fr; column-gap: 0.75rem; align-items: center; border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-primary-300) 18%, #ffffff 82%); padding: 0.75rem 1rem; } .tile .icon { font-size: 1.25rem; } .tile .label { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; } .tile .value { color: var(--text-strong); font-weight: 800; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 48px; padding-inline: 1.25rem; border-radius: var(--radius-pill); border: 0; cursor: pointer; font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent); outline-offset: 2px; } .btn:hover { transform: translateY(-1px); } .btn--primary { color: white; background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary)); box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 30%, transparent); } .btn--primary:hover { background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-600)); } .btn--secondary { background: var(--surface-card); color: var(--color-primary-700); border: 1px solid var(--border-subtle); } .btn--ghost { background: transparent; color: var(--color-primary-700); } .btn--ghost:hover { background: color-mix(in srgb, var(--color-primary-300) 16%, transparent); } /* Inputs & Selects */ .input, .select, .textarea { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-strong); padding: 0.5rem 0.75rem; } .textarea { height: auto; min-height: 120px; padding: 0.75rem; resize: vertical; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); } /* Currency input prefix wrapper */ .input-wrap { position: relative; } .input-wrap .prefix { position: absolute; inset-block: 0; left: 0.75rem; display: grid; place-items: center; color: var(--text-muted); } .input-wrap .input { padding-left: 2rem; } /* Range slider */ .range { width: 100%; appearance: none; height: 4px; background: color-mix(in srgb, var(--color-primary-300) 40%, #E5E7EB 60%); border-radius: 999px; } .range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-600); box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 35%, transparent); cursor: pointer; } .range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-600); border: 0; box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 35%, transparent); cursor: pointer; } /* Chips/Badges */ .chip { display: inline-flex; align-items: center; gap: .5rem; height: 28px; padding: 0 .75rem; border-radius: var(--radius-pill); font-weight: 600; font-size: .85rem; } .chip--soft { background: color-mix(in srgb, var(--color-primary-300) 18%, #ffffff 82%); color: var(--color-primary-700); } .chip--outline { border: 1px solid var(--border-subtle); color: var(--text-muted); background: transparent; } /* Chart card helper */ .chart-card { padding: 1rem; border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--elev-1); border: 1px solid var(--border-subtle); } /* Responsive helpers */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } /* Utility spacing for sections */ .stack > * + * { margin-top: 1rem; } .stack-lg > * + * { margin-top: 1.5rem; } /* Accessibility: reduce motion */ @media (prefers-reduced-motion: reduce) { .btn { transition: none; } }