krz/401k
A 401k projection web app.
clone: git clone https://gitbay.org/krz/401k.git
main: assets/css/app.css · raw
1/* ── Base ─────────────────────────────────────────────────────────────── */
2:root {
3 --color-bg: #f4f6f9;
4 --color-surface: #ffffff;
5 --color-surface-alt: #f8f9fb;
6 --color-border: #e2e6ea;
7 --color-text: #1a1d23;
8 --color-text-muted: #6b7280;
9 --color-accent: #4f6ef7;
10 --color-accent-hover:#3a58e0;
11 --color-green: #22c55e;
12 --color-blue: #3b82f6;
13 --radius: 12px;
14 --radius-sm: 8px;
15 --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
16 --shadow-lg: 0 4px 6px rgba(0,0,0,.07), 0 10px 40px rgba(0,0,0,.1);
17 --transition: 180ms ease;
18}
19
20@media (prefers-color-scheme: dark) {
21 :root {
22 --color-bg: #0f1117;
23 --color-surface: #1a1d27;
24 --color-surface-alt: #21242f;
25 --color-border: #2d3141;
26 --color-text: #e8eaf0;
27 --color-text-muted: #8b92a5;
28 --color-accent: #6c8aff;
29 --color-accent-hover:#849dff;
30 --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
31 --shadow-lg: 0 4px 6px rgba(0,0,0,.3), 0 10px 40px rgba(0,0,0,.4);
32 }
33}
34
35*, *::before, *::after { box-sizing: border-box; }
36
37html { scroll-behavior: smooth; }
38
39body {
40 background: var(--color-bg);
41 color: var(--color-text);
42 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
43 font-size: 1rem;
44 line-height: 1.6;
45 -webkit-font-smoothing: antialiased;
46}
47
48/* ── Layout ──────────────────────────────────────────────────────────── */
49.app-container {
50 max-width: 900px;
51 margin: 0 auto;
52 padding: 2rem 1rem 4rem;
53}
54
55/* ── App header ──────────────────────────────────────────────────────── */
56.app-header {
57 text-align: center;
58 padding: 3rem 1rem 2rem;
59}
60
61.app-header h1 {
62 font-size: clamp(1.8rem, 4vw, 2.8rem);
63 font-weight: 800;
64 letter-spacing: -0.03em;
65 color: var(--color-text);
66 margin: 0 0 0.5rem;
67}
68
69.app-header p {
70 color: var(--color-text-muted);
71 font-size: 1.05rem;
72 margin: 0;
73}
74
75/* ── Cards ───────────────────────────────────────────────────────────── */
76.panel {
77 background: var(--color-surface);
78 border: 1px solid var(--color-border);
79 border-radius: var(--radius);
80 box-shadow: var(--shadow);
81 padding: 2rem;
82 margin-bottom: 1.5rem;
83}
84
85/* ── Section label ───────────────────────────────────────────────────── */
86.section-label {
87 font-size: 0.7rem;
88 font-weight: 700;
89 letter-spacing: 0.1em;
90 text-transform: uppercase;
91 color: var(--color-text-muted);
92 margin: 0 0 1.25rem;
93}
94
95/* ── Form grid ───────────────────────────────────────────────────────── */
96.form-grid {
97 display: grid;
98 grid-template-columns: 1fr 1fr;
99 gap: 1rem;
100}
101
102@media (max-width: 540px) {
103 .form-grid { grid-template-columns: 1fr; }
104}
105
106.field label {
107 display: block;
108 font-size: 0.85rem;
109 font-weight: 600;
110 color: var(--color-text-muted);
111 margin-bottom: 0.4rem;
112}
113
114.field input {
115 width: 100%;
116 padding: 0.65rem 0.9rem;
117 font-size: 1rem;
118 color: var(--color-text);
119 background: var(--color-surface-alt);
120 border: 1.5px solid var(--color-border);
121 border-radius: var(--radius-sm);
122 outline: none;
123 transition: border-color var(--transition), box-shadow var(--transition);
124 -moz-appearance: textfield;
125}
126
127.field input::-webkit-outer-spin-button,
128.field input::-webkit-inner-spin-button {
129 -webkit-appearance: none;
130 margin: 0;
131}
132
133.field input::placeholder { color: var(--color-text-muted); opacity: 0.6; }
134
135.field input:focus {
136 border-color: var(--color-accent);
137 box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
138}
139
140/* ── Divider ─────────────────────────────────────────────────────────── */
141.divider {
142 display: flex;
143 align-items: center;
144 gap: 0.75rem;
145 margin: 1.75rem 0;
146 color: var(--color-text-muted);
147 font-size: 0.8rem;
148 font-weight: 600;
149 letter-spacing: 0.05em;
150 text-transform: uppercase;
151}
152
153.divider::before,
154.divider::after {
155 content: "";
156 flex: 1;
157 height: 1px;
158 background: var(--color-border);
159}
160
161/* ── Submit columns ──────────────────────────────────────────────────── */
162.submit-grid {
163 display: grid;
164 grid-template-columns: 1fr 1fr;
165 gap: 1rem;
166}
167
168@media (max-width: 540px) {
169 .submit-grid { grid-template-columns: 1fr; }
170}
171
172.submit-group label {
173 display: block;
174 font-size: 0.85rem;
175 font-weight: 600;
176 color: var(--color-text-muted);
177 margin-bottom: 0.4rem;
178}
179
180.submit-group input {
181 width: 100%;
182 padding: 0.65rem 0.9rem;
183 font-size: 1rem;
184 color: var(--color-text);
185 background: var(--color-surface-alt);
186 border: 1.5px solid var(--color-border);
187 border-radius: var(--radius-sm);
188 outline: none;
189 transition: border-color var(--transition), box-shadow var(--transition);
190 -moz-appearance: textfield;
191}
192
193.submit-group input::-webkit-outer-spin-button,
194.submit-group input::-webkit-inner-spin-button {
195 -webkit-appearance: none;
196 margin: 0;
197}
198
199.submit-group input::placeholder { color: var(--color-text-muted); opacity: 0.6; }
200
201.submit-group input:focus {
202 border-color: var(--color-accent);
203 box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
204}
205
206/* ── Buttons ─────────────────────────────────────────────────────────── */
207.btn-primary {
208 display: block;
209 width: 100%;
210 margin-top: 0.75rem;
211 padding: 0.7rem 1rem;
212 font-size: 0.95rem;
213 font-weight: 600;
214 color: #fff;
215 background: var(--color-accent);
216 border: none;
217 border-radius: var(--radius-sm);
218 cursor: pointer;
219 transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
220}
221
222.btn-primary:hover {
223 background: var(--color-accent-hover);
224 box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 35%, transparent);
225 transform: translateY(-1px);
226}
227
228.btn-primary:active {
229 transform: translateY(0);
230 box-shadow: none;
231}
232
233.btn-primary:focus-visible {
234 outline: 3px solid var(--color-accent);
235 outline-offset: 2px;
236}
237
238/* ── Charts panel ────────────────────────────────────────────────────── */
239#graphCard {
240 display: none;
241}
242
243.chart-grid {
244 display: grid;
245 grid-template-columns: 1fr 1fr;
246 gap: 1rem;
247}
248
249@media (max-width: 640px) {
250 .chart-grid { grid-template-columns: 1fr; }
251}
252
253.chartContainer {
254 border-radius: var(--radius-sm);
255 overflow: hidden;
256}
257
258/* ── Tables ──────────────────────────────────────────────────────────── */
259.table-section {
260 display: none;
261 margin-top: 1.5rem;
262}
263
264.table-section h2 {
265 font-size: 1rem;
266 font-weight: 700;
267 letter-spacing: -0.01em;
268 color: var(--color-text);
269 margin: 0 0 0.75rem;
270}
271
272.data-table {
273 width: 100%;
274 border-collapse: collapse;
275 font-size: 0.9rem;
276}
277
278.data-table th {
279 padding: 0.6rem 0.9rem;
280 text-align: left;
281 font-size: 0.75rem;
282 font-weight: 700;
283 letter-spacing: 0.06em;
284 text-transform: uppercase;
285 color: var(--color-text-muted);
286 background: var(--color-surface-alt);
287 border-bottom: 1px solid var(--color-border);
288}
289
290.data-table td {
291 padding: 0.55rem 0.9rem;
292 color: var(--color-text);
293 border-bottom: 1px solid var(--color-border);
294}
295
296.data-table tbody tr:last-child td { border-bottom: none; }
297
298.data-table tbody tr:hover { background: var(--color-surface-alt); }