:root { color-scheme: light; --accent-color: #6750a4; --accent-on-color: #ffffff; --md-surface: color-mix(in srgb, var(--accent-color) 6%, #ffffff); --md-surface-variant: color-mix(in srgb, var(--accent-color) 14%, #f5f4fa); --md-card: #ffffff; --md-card-border: color-mix(in srgb, var(--accent-color) 24%, transparent); --md-outline: color-mix(in srgb, var(--accent-color) 18%, #d9d5ea); --md-text-primary: #1c1b20; --md-text-secondary: color-mix(in srgb, var(--accent-color) 30%, #4a4458); --md-muted-bg: color-mix(in srgb, var(--accent-color) 18%, transparent); --md-focus-ring: color-mix(in srgb, var(--accent-color) 45%, transparent); --md-shadow-ambient: 0 12px 32px color-mix(in srgb, rgba(15, 13, 33, 0.2) 70%, var(--accent-color) 10%); } [data-bs-theme='dark'] { color-scheme: dark; --md-surface: color-mix(in srgb, var(--accent-color) 5%, #131217); --md-surface-variant: color-mix(in srgb, var(--accent-color) 14%, #1f1e25); --md-card: color-mix(in srgb, var(--accent-color) 8%, #1f1e25); --md-card-border: color-mix(in srgb, var(--accent-color) 35%, transparent); --md-outline: color-mix(in srgb, var(--accent-color) 35%, #6c6772); --md-text-primary: color-mix(in srgb, var(--accent-color) 6%, #f5f2ff); --md-text-secondary: color-mix(in srgb, var(--accent-color) 24%, #cfc6dc); --md-muted-bg: color-mix(in srgb, var(--accent-color) 22%, transparent); --md-shadow-ambient: 0 16px 40px rgba(0, 0, 0, 0.55); } body { background-color: var(--md-surface); color: var(--md-text-primary); font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } main.container { max-width: 1100px; } h1, h2, h3, h4, h5, h6 { color: var(--md-text-primary); font-weight: 600; } .text-secondary { color: var(--md-text-secondary) !important; } .card { background-color: var(--md-card); border: 1px solid var(--md-card-border); border-radius: 20px; box-shadow: var(--md-shadow-ambient); overflow: hidden; } .navbar.bg-body-tertiary { background-color: color-mix(in srgb, var(--accent-color) 6%, rgba(255, 255, 255, 0.92)) !important; backdrop-filter: blur(16px); border: 1px solid var(--md-card-border); border-radius: 0 0 28px 28px; box-shadow: 0 12px 32px rgba(15, 13, 33, 0.1); margin: 0 auto 2rem auto; max-width: 1100px; width: calc(100% - 2rem); position: relative; z-index: 1040; } @media (max-width: 1199px) { .navbar.bg-body-tertiary { border-radius: 0; width: 100%; margin: 0 0 1.5rem 0; border-left: none; border-right: none; } } [data-bs-theme='dark'] .navbar.bg-body-tertiary { background-color: color-mix(in srgb, var(--accent-color) 8%, rgba(26, 25, 32, 0.96)) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); } .dropdown-menu { border-radius: 16px; border: 1px solid var(--md-card-border); background-color: var(--md-card); } .btn-success, .btn-primary, .btn-accent { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--accent-on-color); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-success:hover, .btn-primary:hover, .btn-accent:hover { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--accent-on-color); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transform: translateY(-1px); } .btn-outline-secondary, .btn-outline-success, .btn-outline-primary { color: var(--accent-color); border-color: var(--accent-color); } .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-primary:hover { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--accent-on-color); } a { color: var(--accent-color); text-decoration: none; } a:hover { color: var(--accent-color); opacity: 0.9; text-decoration: underline; } .form-control, .form-select { border-radius: 14px; border-color: var(--md-outline); background-color: var(--md-card); color: var(--md-text-primary); } .form-control:focus, .form-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.2rem var(--md-focus-ring); } .form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); } .badge.text-bg-primary, .badge.text-bg-secondary { background-color: var(--accent-color) !important; color: var(--accent-on-color) !important; } .landing-search-input { border: 1px solid var(--md-card-border); } .card .btn.btn-outline-primary, .card .btn.btn-outline-success { border-radius: 999px; } .card .btn.btn-success, .card .btn.btn-outline-primary, .card .btn.btn-outline-success { font-weight: 600; } .alert { border-radius: 16px; border: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); }