| 1 | @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Mono:wght@300;400;500&display=swap');
|
|---|
| 2 |
|
|---|
| 3 | :root {
|
|---|
| 4 | /* Primary Colors */
|
|---|
| 5 | --color-primary-dark: #2d1b69;
|
|---|
| 6 | --color-primary-accent: #7c3aed;
|
|---|
| 7 | --color-bg-light: #f5f3ff;
|
|---|
| 8 | --color-white: #fff;
|
|---|
| 9 |
|
|---|
| 10 | /* Neutral Colors */
|
|---|
| 11 | --color-neutral-700: #1e1035;
|
|---|
| 12 | --color-neutral-600: #9d8cc4;
|
|---|
| 13 | --color-neutral-500: #b3a8d4;
|
|---|
| 14 | --color-neutral-400: #e5e0fa;
|
|---|
| 15 | --color-neutral-300: #e8e0f8;
|
|---|
| 16 | --color-neutral-200: #faf8ff;
|
|---|
| 17 |
|
|---|
| 18 | /* Status Colors */
|
|---|
| 19 | --color-status-cyan: #0891b2;
|
|---|
| 20 | --color-status-green: #059669;
|
|---|
| 21 | --color-status-green-light: #d1fae5;
|
|---|
| 22 | --color-status-red: #991b1b;
|
|---|
| 23 | --color-status-red-light: #fee2e2;
|
|---|
| 24 | --color-status-orange: #b45309;
|
|---|
| 25 | --color-status-orange-light: #fef3c7;
|
|---|
| 26 | --color-status-purple-light: #ede9fb;
|
|---|
| 27 |
|
|---|
| 28 | /* Typography */
|
|---|
| 29 | --font-serif: 'Cormorant Garamond', serif;
|
|---|
| 30 | --font-mono: 'DM Mono', monospace;
|
|---|
| 31 | }
|
|---|
| 32 |
|
|---|
| 33 | * {
|
|---|
| 34 | box-sizing: border-box;
|
|---|
| 35 | }
|
|---|
| 36 |
|
|---|
| 37 | body {
|
|---|
| 38 | font-family: var(--font-mono);
|
|---|
| 39 | background-color: var(--color-bg-light);
|
|---|
| 40 | color: var(--color-neutral-700);
|
|---|
| 41 | margin: 0;
|
|---|
| 42 | padding: 0;
|
|---|
| 43 | overflow-x: hidden;
|
|---|
| 44 | }
|
|---|
| 45 |
|
|---|
| 46 | /* Navigation Styles */
|
|---|
| 47 | .navbar {
|
|---|
| 48 | background: var(--color-white);
|
|---|
| 49 | border-bottom: 1px solid var(--color-neutral-400);
|
|---|
| 50 | display: flex;
|
|---|
| 51 | align-items: stretch;
|
|---|
| 52 | height: 58px;
|
|---|
| 53 | padding: 0 16px;
|
|---|
| 54 | }
|
|---|
| 55 |
|
|---|
| 56 | .navbar-brand {
|
|---|
| 57 | display: flex;
|
|---|
| 58 | align-items: center;
|
|---|
| 59 | gap: 10px;
|
|---|
| 60 | padding-right: 16px;
|
|---|
| 61 | border-right: 1px solid var(--color-neutral-400);
|
|---|
| 62 | margin-right: 12px;
|
|---|
| 63 | }
|
|---|
| 64 |
|
|---|
| 65 | .navbar-logo {
|
|---|
| 66 | width: 30px;
|
|---|
| 67 | height: 30px;
|
|---|
| 68 | background: var(--color-primary-dark);
|
|---|
| 69 | border-radius: 7px;
|
|---|
| 70 | display: flex;
|
|---|
| 71 | align-items: center;
|
|---|
| 72 | justify-content: center;
|
|---|
| 73 | flex-shrink: 0;
|
|---|
| 74 | position: relative;
|
|---|
| 75 | }
|
|---|
| 76 |
|
|---|
| 77 | .navbar-logo::before {
|
|---|
| 78 | content: '';
|
|---|
| 79 | position: absolute;
|
|---|
| 80 | top: 50%;
|
|---|
| 81 | left: 8px;
|
|---|
| 82 | right: 8px;
|
|---|
| 83 | height: 2.5px;
|
|---|
| 84 | background: var(--color-white);
|
|---|
| 85 | border-radius: 2px;
|
|---|
| 86 | transform: translateY(-50%);
|
|---|
| 87 | }
|
|---|
| 88 |
|
|---|
| 89 | .navbar-logo::after {
|
|---|
| 90 | content: '';
|
|---|
| 91 | position: absolute;
|
|---|
| 92 | left: 50%;
|
|---|
| 93 | top: 8px;
|
|---|
| 94 | bottom: 8px;
|
|---|
| 95 | width: 2.5px;
|
|---|
| 96 | background: var(--color-white);
|
|---|
| 97 | border-radius: 2px;
|
|---|
| 98 | transform: translateX(-50%);
|
|---|
| 99 | }
|
|---|
| 100 |
|
|---|
| 101 | .navbar-brand-name {
|
|---|
| 102 | font-family: var(--font-serif);
|
|---|
| 103 | font-size: 24px;
|
|---|
| 104 | font-weight: 400;
|
|---|
| 105 | font-style: italic;
|
|---|
| 106 | color: var(--color-primary-dark);
|
|---|
| 107 | letter-spacing: -0.01em;
|
|---|
| 108 | line-height: 1;
|
|---|
| 109 | margin: 0;
|
|---|
| 110 | }
|
|---|
| 111 |
|
|---|
| 112 | .navbar-links {
|
|---|
| 113 | display: flex;
|
|---|
| 114 | align-items: stretch;
|
|---|
| 115 | gap: 0;
|
|---|
| 116 | flex: 1;
|
|---|
| 117 | }
|
|---|
| 118 |
|
|---|
| 119 | .navbar-link {
|
|---|
| 120 | display: flex;
|
|---|
| 121 | align-items: center;
|
|---|
| 122 | padding: 0 12px;
|
|---|
| 123 | font-size: 13px;
|
|---|
| 124 | letter-spacing: 0.08em;
|
|---|
| 125 | text-transform: uppercase;
|
|---|
| 126 | color: #5a5a5a;
|
|---|
| 127 | cursor: pointer;
|
|---|
| 128 | position: relative;
|
|---|
| 129 | font-weight: 500;
|
|---|
| 130 | border-bottom: 2px solid transparent;
|
|---|
| 131 | margin-bottom: -1px;
|
|---|
| 132 | white-space: nowrap;
|
|---|
| 133 | text-decoration: none;
|
|---|
| 134 | background: none;
|
|---|
| 135 | border: none;
|
|---|
| 136 | transition: all 0.2s ease;
|
|---|
| 137 | }
|
|---|
| 138 |
|
|---|
| 139 | .navbar-link:hover {
|
|---|
| 140 | color: var(--color-primary-dark);
|
|---|
| 141 | }
|
|---|
| 142 |
|
|---|
| 143 | .navbar-link.active {
|
|---|
| 144 | color: var(--color-primary-dark);
|
|---|
| 145 | border-bottom-color: var(--color-primary-accent);
|
|---|
| 146 | }
|
|---|
| 147 |
|
|---|
| 148 | .navbar-link .badge {
|
|---|
| 149 | margin-left: 6px;
|
|---|
| 150 | background: var(--color-status-purple-light);
|
|---|
| 151 | color: #6d28d9;
|
|---|
| 152 | font-size: 9px;
|
|---|
| 153 | padding: 1px 6px;
|
|---|
| 154 | border-radius: 20px;
|
|---|
| 155 | }
|
|---|
| 156 |
|
|---|
| 157 | .navbar-right {
|
|---|
| 158 | display: flex;
|
|---|
| 159 | align-items: center;
|
|---|
| 160 | gap: 10px;
|
|---|
| 161 | margin-left: auto;
|
|---|
| 162 | }
|
|---|
| 163 |
|
|---|
| 164 | .navbar-search {
|
|---|
| 165 | display: flex;
|
|---|
| 166 | align-items: center;
|
|---|
| 167 | gap: 7px;
|
|---|
| 168 | background: var(--color-neutral-200);
|
|---|
| 169 | border: 1px solid var(--color-neutral-400);
|
|---|
| 170 | border-radius: 6px;
|
|---|
| 171 | padding: 6px 14px;
|
|---|
| 172 | font-size: 11px;
|
|---|
| 173 | color: var(--color-neutral-600);
|
|---|
| 174 | letter-spacing: 0.04em;
|
|---|
| 175 | font-family: var(--font-mono);
|
|---|
| 176 | min-width: 170px;
|
|---|
| 177 | }
|
|---|
| 178 |
|
|---|
| 179 | .navbar-avatar {
|
|---|
| 180 | display: flex;
|
|---|
| 181 | align-items: center;
|
|---|
| 182 | gap: 8px;
|
|---|
| 183 | background: var(--color-neutral-200);
|
|---|
| 184 | border: 1px solid var(--color-neutral-400);
|
|---|
| 185 | border-radius: 6px;
|
|---|
| 186 | padding: 5px 12px 5px 6px;
|
|---|
| 187 | }
|
|---|
| 188 |
|
|---|
| 189 | .navbar-avatar-circle {
|
|---|
| 190 | width: 26px;
|
|---|
| 191 | height: 26px;
|
|---|
| 192 | border-radius: 50%;
|
|---|
| 193 | background: var(--color-primary-dark);
|
|---|
| 194 | color: #c4b5fd;
|
|---|
| 195 | font-size: 9px;
|
|---|
| 196 | font-weight: 500;
|
|---|
| 197 | display: flex;
|
|---|
| 198 | align-items: center;
|
|---|
| 199 | justify-content: center;
|
|---|
| 200 | letter-spacing: 0.05em;
|
|---|
| 201 | }
|
|---|
| 202 |
|
|---|
| 203 | .navbar-avatar-name {
|
|---|
| 204 | font-size: 11px;
|
|---|
| 205 | color: var(--color-primary-dark);
|
|---|
| 206 | letter-spacing: 0.06em;
|
|---|
| 207 | font-weight: 500;
|
|---|
| 208 | }
|
|---|
| 209 |
|
|---|
| 210 | /* Page Layout */
|
|---|
| 211 | .page-wrapper {
|
|---|
| 212 | padding: 32px 36px;
|
|---|
| 213 | display: flex;
|
|---|
| 214 | flex-direction: column;
|
|---|
| 215 | gap: 20px;
|
|---|
| 216 | min-height: calc(100vh - 58px);
|
|---|
| 217 | overflow-x: hidden;
|
|---|
| 218 | }
|
|---|
| 219 |
|
|---|
| 220 | h1, h2, h3, h4, h5, h6 {
|
|---|
| 221 | font-family: var(--font-serif);
|
|---|
| 222 | font-weight: 300;
|
|---|
| 223 | letter-spacing: -0.01em;
|
|---|
| 224 | }
|
|---|
| 225 |
|
|---|
| 226 | h1 {
|
|---|
| 227 | font-size: 36px !important;
|
|---|
| 228 | font-weight: normal !important;
|
|---|
| 229 | }
|
|---|
| 230 |
|
|---|
| 231 | .text-3xl {
|
|---|
| 232 | font-size: 36px !important;
|
|---|
| 233 | font-weight: normal !important;
|
|---|
| 234 | }
|
|---|
| 235 |
|
|---|
| 236 | .page-heading {
|
|---|
| 237 | display: flex;
|
|---|
| 238 | justify-content: space-between;
|
|---|
| 239 | align-items: flex-end;
|
|---|
| 240 | margin-bottom: 4px;
|
|---|
| 241 | }
|
|---|
| 242 |
|
|---|
| 243 | .page-title {
|
|---|
| 244 | font-family: var(--font-serif);
|
|---|
| 245 | font-size: 48px !important;
|
|---|
| 246 | font-weight: 300 !important;
|
|---|
| 247 | color: var(--color-neutral-700);
|
|---|
| 248 | letter-spacing: -0.02em;
|
|---|
| 249 | line-height: 1;
|
|---|
| 250 | margin: 0;
|
|---|
| 251 | }
|
|---|
| 252 |
|
|---|
| 253 | .page-title em {
|
|---|
| 254 | font-style: italic;
|
|---|
| 255 | color: var(--color-primary-accent);
|
|---|
| 256 | }
|
|---|
| 257 |
|
|---|
| 258 | .page-date {
|
|---|
| 259 | font-size: 13px;
|
|---|
| 260 | letter-spacing: 0.12em;
|
|---|
| 261 | text-transform: uppercase;
|
|---|
| 262 | color: var(--color-neutral-500);
|
|---|
| 263 | padding-bottom: 4px;
|
|---|
| 264 | }
|
|---|
| 265 |
|
|---|
| 266 | .divider {
|
|---|
| 267 | height: 1px;
|
|---|
| 268 | background: var(--color-neutral-300);
|
|---|
| 269 | margin: 0 0 4px;
|
|---|
| 270 | }
|
|---|
| 271 |
|
|---|
| 272 | /* Card Styles */
|
|---|
| 273 | .card {
|
|---|
| 274 | background: var(--color-white);
|
|---|
| 275 | border: 1px solid var(--color-neutral-300);
|
|---|
| 276 | border-radius: 10px;
|
|---|
| 277 | padding: 22px 24px;
|
|---|
| 278 | }
|
|---|
| 279 |
|
|---|
| 280 | .card-header {
|
|---|
| 281 | display: flex;
|
|---|
| 282 | justify-content: space-between;
|
|---|
| 283 | align-items: baseline;
|
|---|
| 284 | margin-bottom: 20px;
|
|---|
| 285 | }
|
|---|
| 286 |
|
|---|
| 287 | .card-title {
|
|---|
| 288 | font-family: var(--font-serif);
|
|---|
| 289 | font-size: 20px;
|
|---|
| 290 | font-weight: 400;
|
|---|
| 291 | color: var(--color-primary-dark);
|
|---|
| 292 | letter-spacing: -0.01em;
|
|---|
| 293 | margin: 0;
|
|---|
| 294 | }
|
|---|
| 295 |
|
|---|
| 296 | .card-link {
|
|---|
| 297 | font-size: 10px;
|
|---|
| 298 | letter-spacing: 0.1em;
|
|---|
| 299 | color: var(--color-primary-accent);
|
|---|
| 300 | text-transform: uppercase;
|
|---|
| 301 | cursor: pointer;
|
|---|
| 302 | text-decoration: none;
|
|---|
| 303 | background: none;
|
|---|
| 304 | border: none;
|
|---|
| 305 | }
|
|---|
| 306 |
|
|---|
| 307 | .card-link:hover {
|
|---|
| 308 | text-decoration: underline;
|
|---|
| 309 | }
|
|---|
| 310 |
|
|---|
| 311 | /* Stat Cards */
|
|---|
| 312 | .stat-grid {
|
|---|
| 313 | display: grid;
|
|---|
| 314 | grid-template-columns: repeat(4, 1fr);
|
|---|
| 315 | gap: 12px;
|
|---|
| 316 | }
|
|---|
| 317 |
|
|---|
| 318 | .stat-card {
|
|---|
| 319 | background: var(--color-white);
|
|---|
| 320 | border: 1px solid var(--color-neutral-300);
|
|---|
| 321 | border-radius: 10px;
|
|---|
| 322 | padding: 18px 20px;
|
|---|
| 323 | position: relative;
|
|---|
| 324 | }
|
|---|
| 325 |
|
|---|
| 326 | .stat-accent {
|
|---|
| 327 | position: absolute;
|
|---|
| 328 | top: 0;
|
|---|
| 329 | left: 20px;
|
|---|
| 330 | right: 20px;
|
|---|
| 331 | height: 1px;
|
|---|
| 332 | }
|
|---|
| 333 |
|
|---|
| 334 | .stat-card.s1 .stat-accent { background: var(--color-primary-accent); }
|
|---|
| 335 | .stat-card.s2 .stat-accent { background: var(--color-status-cyan); }
|
|---|
| 336 | .stat-card.s3 .stat-accent { background: var(--color-status-green); }
|
|---|
| 337 | .stat-card.s4 .stat-accent { background: var(--color-status-orange); }
|
|---|
| 338 |
|
|---|
| 339 | .stat-label {
|
|---|
| 340 | font-size: 11px;
|
|---|
| 341 | letter-spacing: 0.12em;
|
|---|
| 342 | text-transform: uppercase;
|
|---|
| 343 | color: #888;
|
|---|
| 344 | margin-bottom: 12px;
|
|---|
| 345 | margin-top: 0;
|
|---|
| 346 | font-weight: 500;
|
|---|
| 347 | }
|
|---|
| 348 |
|
|---|
| 349 | .stat-value {
|
|---|
| 350 | font-family: var(--font-serif);
|
|---|
| 351 | font-size: 56px;
|
|---|
| 352 | font-weight: 300;
|
|---|
| 353 | color: var(--color-neutral-700);
|
|---|
| 354 | letter-spacing: -0.02em;
|
|---|
| 355 | line-height: 1;
|
|---|
| 356 | margin: 0;
|
|---|
| 357 | }
|
|---|
| 358 |
|
|---|
| 359 | .stat-card.s1 .stat-value { color: var(--color-primary-dark); }
|
|---|
| 360 |
|
|---|
| 361 | .stat-delta {
|
|---|
| 362 | font-size: 10px;
|
|---|
| 363 | letter-spacing: 0.05em;
|
|---|
| 364 | color: var(--color-neutral-500);
|
|---|
| 365 | margin-top: 8px;
|
|---|
| 366 | margin-bottom: 0;
|
|---|
| 367 | }
|
|---|
| 368 |
|
|---|
| 369 | .stat-card.s1 .stat-delta { color: var(--color-primary-accent); }
|
|---|
| 370 | .stat-card.s2 .stat-delta { color: var(--color-status-cyan); }
|
|---|
| 371 | .stat-card.s3 .stat-delta { color: var(--color-status-green); }
|
|---|
| 372 | .stat-card.s4 .stat-delta { color: var(--color-status-orange); }
|
|---|
| 373 |
|
|---|
| 374 | /* Table Styles */
|
|---|
| 375 | .table {
|
|---|
| 376 | width: 100%;
|
|---|
| 377 | border-collapse: collapse;
|
|---|
| 378 | }
|
|---|
| 379 |
|
|---|
| 380 | .table th {
|
|---|
| 381 | background: var(--color-neutral-200);
|
|---|
| 382 | padding: 12px;
|
|---|
| 383 | text-align: left;
|
|---|
| 384 | font-size: 13px;
|
|---|
| 385 | letter-spacing: 0.08em;
|
|---|
| 386 | text-transform: uppercase;
|
|---|
| 387 | color: #555;
|
|---|
| 388 | font-weight: 600;
|
|---|
| 389 | border: none;
|
|---|
| 390 | }
|
|---|
| 391 |
|
|---|
| 392 | .table td {
|
|---|
| 393 | padding: 12px;
|
|---|
| 394 | border-bottom: 1px solid var(--color-neutral-300);
|
|---|
| 395 | color: var(--color-neutral-700);
|
|---|
| 396 | font-size: 14px;
|
|---|
| 397 | }
|
|---|
| 398 |
|
|---|
| 399 | .table tbody tr:hover {
|
|---|
| 400 | background: var(--color-neutral-200);
|
|---|
| 401 | }
|
|---|
| 402 |
|
|---|
| 403 | .table tbody tr:last-child td {
|
|---|
| 404 | border-bottom: none;
|
|---|
| 405 | }
|
|---|
| 406 |
|
|---|
| 407 | /* Status Badges */
|
|---|
| 408 | .badge {
|
|---|
| 409 | display: inline-block;
|
|---|
| 410 | padding: 3px 9px;
|
|---|
| 411 | border-radius: 20px;
|
|---|
| 412 | font-size: 9px;
|
|---|
| 413 | letter-spacing: 0.1em;
|
|---|
| 414 | text-transform: uppercase;
|
|---|
| 415 | font-weight: 500;
|
|---|
| 416 | }
|
|---|
| 417 |
|
|---|
| 418 | .badge-stable {
|
|---|
| 419 | background: var(--color-status-green-light);
|
|---|
| 420 | color: var(--color-status-green);
|
|---|
| 421 | }
|
|---|
| 422 |
|
|---|
| 423 | .badge-critical {
|
|---|
| 424 | background: var(--color-status-red-light);
|
|---|
| 425 | color: var(--color-status-red);
|
|---|
| 426 | }
|
|---|
| 427 |
|
|---|
| 428 | .badge-obs {
|
|---|
| 429 | background: var(--color-status-purple-light);
|
|---|
| 430 | color: #4c1d95;
|
|---|
| 431 | }
|
|---|
| 432 |
|
|---|
| 433 | .badge-recovery {
|
|---|
| 434 | background: var(--color-status-orange-light);
|
|---|
| 435 | color: var(--color-status-orange);
|
|---|
| 436 | }
|
|---|
| 437 |
|
|---|
| 438 | .badge-paid {
|
|---|
| 439 | background: var(--color-status-green-light);
|
|---|
| 440 | color: var(--color-status-green);
|
|---|
| 441 | }
|
|---|
| 442 |
|
|---|
| 443 | .badge-pending {
|
|---|
| 444 | background: var(--color-status-orange-light);
|
|---|
| 445 | color: var(--color-status-orange);
|
|---|
| 446 | }
|
|---|
| 447 |
|
|---|
| 448 | .badge-cancelled {
|
|---|
| 449 | background: var(--color-status-red-light);
|
|---|
| 450 | color: var(--color-status-red);
|
|---|
| 451 | }
|
|---|
| 452 |
|
|---|
| 453 | /* Buttons */
|
|---|
| 454 | button, a.btn {
|
|---|
| 455 | font-family: var(--font-mono);
|
|---|
| 456 | border: none;
|
|---|
| 457 | cursor: pointer;
|
|---|
| 458 | border-radius: 6px;
|
|---|
| 459 | padding: 8px 16px;
|
|---|
| 460 | font-size: 12px;
|
|---|
| 461 | font-weight: 500;
|
|---|
| 462 | transition: all 0.2s ease;
|
|---|
| 463 | text-decoration: none;
|
|---|
| 464 | display: inline-block;
|
|---|
| 465 | }
|
|---|
| 466 |
|
|---|
| 467 | .btn-primary {
|
|---|
| 468 | background: var(--color-primary-accent);
|
|---|
| 469 | color: var(--color-white);
|
|---|
| 470 | }
|
|---|
| 471 |
|
|---|
| 472 | .btn-primary:hover {
|
|---|
| 473 | background: #6d28d9;
|
|---|
| 474 | }
|
|---|
| 475 |
|
|---|
| 476 | .btn-secondary {
|
|---|
| 477 | background: var(--color-neutral-200);
|
|---|
| 478 | color: var(--color-primary-dark);
|
|---|
| 479 | }
|
|---|
| 480 |
|
|---|
| 481 | .btn-secondary:hover {
|
|---|
| 482 | background: var(--color-neutral-300);
|
|---|
| 483 | }
|
|---|
| 484 |
|
|---|
| 485 | .btn-danger {
|
|---|
| 486 | background: var(--color-status-red-light);
|
|---|
| 487 | color: var(--color-status-red);
|
|---|
| 488 | }
|
|---|
| 489 |
|
|---|
| 490 | .btn-danger:hover {
|
|---|
| 491 | background: #fecaca;
|
|---|
| 492 | }
|
|---|
| 493 |
|
|---|
| 494 | /* Form Elements */
|
|---|
| 495 | input, textarea, select {
|
|---|
| 496 | font-family: var(--font-mono);
|
|---|
| 497 | border: 1px solid var(--color-neutral-400);
|
|---|
| 498 | border-radius: 6px;
|
|---|
| 499 | padding: 8px 12px;
|
|---|
| 500 | font-size: 12px;
|
|---|
| 501 | color: var(--color-neutral-700);
|
|---|
| 502 | background: var(--color-white);
|
|---|
| 503 | }
|
|---|
| 504 |
|
|---|
| 505 | input:focus, textarea:focus, select:focus {
|
|---|
| 506 | outline: none;
|
|---|
| 507 | border-color: var(--color-primary-accent);
|
|---|
| 508 | box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
|
|---|
| 509 | }
|
|---|
| 510 |
|
|---|
| 511 | input::placeholder {
|
|---|
| 512 | color: var(--color-neutral-600);
|
|---|
| 513 | }
|
|---|
| 514 |
|
|---|
| 515 | /* Links */
|
|---|
| 516 | a {
|
|---|
| 517 | color: var(--color-primary-accent);
|
|---|
| 518 | text-decoration: none;
|
|---|
| 519 | transition: color 0.2s ease;
|
|---|
| 520 | }
|
|---|
| 521 |
|
|---|
| 522 | a:hover {
|
|---|
| 523 | text-decoration: underline;
|
|---|
| 524 | }
|
|---|
| 525 |
|
|---|
| 526 | /* Utility Classes */
|
|---|
| 527 | .text-muted {
|
|---|
| 528 | color: var(--color-neutral-600);
|
|---|
| 529 | }
|
|---|
| 530 |
|
|---|
| 531 | .font-normal {
|
|---|
| 532 | font-weight: normal !important;
|
|---|
| 533 | }
|
|---|
| 534 |
|
|---|
| 535 | .text-accent {
|
|---|
| 536 | color: var(--color-primary-accent);
|
|---|
| 537 | }
|
|---|
| 538 |
|
|---|
| 539 | .bg-light {
|
|---|
| 540 | background: var(--color-neutral-200);
|
|---|
| 541 | }
|
|---|
| 542 |
|
|---|
| 543 | /* Override Tailwind defaults where needed */
|
|---|
| 544 | .bg-white { background-color: var(--color-white) !important; }
|
|---|
| 545 | .bg-gray-50 { background-color: var(--color-neutral-200) !important; }
|
|---|
| 546 | .bg-gray-100 { background-color: var(--color-neutral-200) !important; }
|
|---|
| 547 | .text-gray-600 { color: var(--color-neutral-600) !important; }
|
|---|
| 548 | .text-gray-700 { color: var(--color-neutral-700) !important; }
|
|---|
| 549 | .border-gray-300 { border-color: var(--color-neutral-300) !important; }
|
|---|
| 550 | .border-gray-100 { border-color: var(--color-neutral-400) !important; } |
|---|
