/** * Customer portal — dark theme text & surfaces (Bootstrap 5 + custom layout) * Load after bootstrap.min.css with */ html[data-bs-theme="dark"] { color-scheme: dark; } html[data-bs-theme="dark"] body { --portal-surface: #12121f; --portal-surface-2: #1a1a2e; --portal-border: #2d2d48; --portal-text: #ececf4; --portal-muted: #b4b4c8; --portal-faint: #8b8ba3; color: var(--portal-text); } /* Headings & body copy inside portal */ .portal-main h1, .portal-main h2, .portal-main h3, .portal-main h4, .portal-main h5, .portal-main h6, .portal-main p, .portal-main li, .portal-main .form-label, .portal-main label { color: var(--portal-text); } .portal-main .text-muted, .portal-sidebar .text-muted, .portal-sidebar .small, .portal-offcanvas .text-muted, .portal-offcanvas .small { color: var(--portal-muted) !important; } .portal-main a:not(.btn) { color: #a5b4fc; } .portal-main a:not(.btn):hover { color: #c7d2fe; } /* Login page (same theme file; body.login-page-body) */ .login-page-body { color: #ececf4; } .login-page-body .text-muted, .login-page-body .form-label.text-muted, .login-page-body label.text-muted { color: #b4b4c8 !important; } .login-page-body .brand p.small, .login-page-body .step-hint { color: #b4b4c8 !important; } .login-page-body #phoneMasked { color: #f8f8ff !important; } /* Alerts — readable on dark */ .portal-alert, .login-page-body .alert { border-width: 1px; border-style: solid; } .alert-success.portal-alert, .login-page-body .alert-success { background: rgba(34, 197, 94, 0.18); border-color: rgba(74, 222, 128, 0.45); color: #bbf7d0; } .alert-danger.portal-alert, .login-page-body .alert-danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; } .alert-warning.portal-alert, .login-page-body .alert-warning { background: rgba(234, 179, 8, 0.15); border-color: rgba(250, 204, 21, 0.45); color: #fef08a; } /* Tables */ .table-dark-custom { --bs-table-color: #ececf4; --bs-table-bg: transparent; --bs-table-border-color: var(--portal-border, #2d2d48); color: #ececf4 !important; } .table-dark-custom thead th { color: #d4d4e8 !important; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--portal-border, #2d2d48) !important; background: rgba(0, 0, 0, 0.2); } .table-dark-custom tbody td { color: #ececf4 !important; border-color: var(--portal-border, #2d2d48) !important; } .table-dark-custom code { color: #93c5fd !important; } /* Forms */ .portal-main .form-control, .portal-main .form-select, .modal .form-control, .modal .form-select { background-color: #0f0f1c; border-color: var(--portal-border, #2d2d48); color: #ececf4; } .portal-main .form-control:focus, .portal-main .form-select:focus, .modal .form-control:focus, .modal .form-select:focus { background-color: #141428; border-color: #6366f1; color: #fff; box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); } .portal-main .form-control::placeholder, .modal .form-control::placeholder { color: #6b6b86; } /* Modals */ .modal-content.text-bg-dark, .modal-content.bg-dark { background-color: #15152a !important; color: #ececf4 !important; border-color: var(--portal-border, #2d2d48) !important; } .modal-content .modal-title { color: #fff !important; } .modal-content .form-label { color: #d4d4e8 !important; } /* Cards & dashboard widgets */ .portal-card { color: #ececf4; } .portal-card .text-muted { color: var(--portal-muted) !important; } .portal-stat-card { background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(24, 24, 40, 0.95)); border: 1px solid var(--portal-border, #2d2d48); border-radius: 16px; padding: 1.25rem 1.35rem; height: 100%; } .portal-stat-card .stat-value { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .portal-stat-card .stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--portal-muted); } .portal-stat-card .stat-icon { font-size: 1.35rem; opacity: 0.85; color: #a5b4fc; } /* Dashboard stat cards as links — colour variants + hover */ a.portal-stat-card-link { display: block; height: 100%; text-decoration: none !important; color: inherit !important; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } a.portal-stat-card-link:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } a.portal-stat-card-link:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px; } a.portal-stat-card-link .portal-stat-card { height: 100%; margin: 0; transition: border-color 0.2s ease, background 0.2s ease; } a.portal-stat-card-link:hover .portal-stat-card { border-color: rgba(255, 255, 255, 0.22); } .portal-stat-card--contacts { background: linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(15, 23, 42, 0.92)); border-color: rgba(34, 211, 238, 0.35); } a.portal-stat-card-link:hover .portal-stat-card--contacts { background: linear-gradient(145deg, rgba(34, 211, 238, 0.28), rgba(15, 23, 42, 0.88)); border-color: rgba(103, 232, 249, 0.55); } .portal-stat-card--contacts .stat-icon { color: #67e8f9; } .portal-stat-card--orders { background: linear-gradient(145deg, rgba(99, 102, 241, 0.22), rgba(24, 24, 40, 0.95)); border-color: rgba(129, 140, 248, 0.4); } a.portal-stat-card-link:hover .portal-stat-card--orders { background: linear-gradient(145deg, rgba(99, 102, 241, 0.32), rgba(24, 24, 40, 0.9)); border-color: rgba(165, 180, 252, 0.55); } .portal-stat-card--orders .stat-icon { color: #a5b4fc; } .portal-stat-card--delivered { background: linear-gradient(145deg, rgba(34, 197, 94, 0.2), rgba(15, 30, 24, 0.95)); border-color: rgba(74, 222, 128, 0.38); } a.portal-stat-card-link:hover .portal-stat-card--delivered { background: linear-gradient(145deg, rgba(34, 197, 94, 0.3), rgba(15, 30, 24, 0.9)); border-color: rgba(134, 239, 172, 0.55); } .portal-stat-card--delivered .stat-icon { color: #86efac; } .portal-stat-card--pending { background: linear-gradient(145deg, rgba(245, 158, 11, 0.22), rgba(30, 24, 12, 0.95)); border-color: rgba(251, 191, 36, 0.42); } a.portal-stat-card-link:hover .portal-stat-card--pending { background: linear-gradient(145deg, rgba(245, 158, 11, 0.32), rgba(30, 24, 12, 0.9)); border-color: rgba(253, 224, 71, 0.55); } .portal-stat-card--pending .stat-icon { color: #fcd34d; } .portal-stat-card--spend { background: linear-gradient(145deg, rgba(192, 132, 252, 0.2), rgba(28, 18, 40, 0.95)); border-color: rgba(216, 180, 254, 0.38); } a.portal-stat-card-link:hover .portal-stat-card--spend { background: linear-gradient(145deg, rgba(192, 132, 252, 0.3), rgba(28, 18, 40, 0.9)); border-color: rgba(233, 213, 255, 0.5); } .portal-stat-card--spend .stat-icon { color: #e9d5ff; } .portal-stat-card--spend .stat-value { font-size: 1.35rem; } /* Order history delivery filter pills */ .portal-history-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; } .portal-history-filters a { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: #c4c4d8 !important; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--portal-border, #2d2d48); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; } .portal-history-filters a:hover { color: #fff !important; background: rgba(99, 102, 241, 0.2); border-color: rgba(129, 140, 248, 0.45); transform: translateY(-1px); } .portal-history-filters a.active { color: #fff !important; background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(139, 92, 246, 0.35)); border-color: rgba(165, 180, 252, 0.55); } .portal-hero { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.12) 50%, rgba(15, 15, 28, 0.9) 100%); border: 1px solid var(--portal-border, #2d2d48); border-radius: 20px; padding: 1.75rem 1.5rem; margin-bottom: 1.5rem; } .portal-hero h2 { color: #fff !important; font-weight: 800; } .portal-hero p { color: #c8c8dc !important; max-width: 42rem; } .portal-quick-action { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--portal-border, #2d2d48); background: rgba(255, 255, 255, 0.03); text-decoration: none; color: #ececf4 !important; transition: background 0.2s, border-color 0.2s, transform 0.15s; } .portal-quick-action:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(129, 140, 248, 0.45); color: #fff !important; transform: translateY(-1px); } .portal-quick-action .qa-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(99, 102, 241, 0.25); color: #c7d2fe; font-size: 1.1rem; } .portal-quick-action .qa-title { font-weight: 700; color: #fff; } .portal-quick-action .qa-desc { font-size: 0.85rem; color: var(--portal-muted) !important; } .portal-tip-box { border-radius: 14px; border: 1px solid rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.08); padding: 1rem 1.15rem; } .portal-tip-box h3 { font-size: 0.95rem; font-weight: 700; color: #86efac !important; margin-bottom: 0.5rem; } .portal-tip-box p, .portal-tip-box li { color: #d1fae5 !important; font-size: 0.9rem; margin-bottom: 0.35rem; } /* Badges stay readable */ .portal-main .badge.bg-secondary { background-color: #3f3f5c !important; color: #ececf4 !important; } /* Login card inner */ .login-page-body .login-card { color: #ececf4; } .login-page-body .form-control, .login-page-body .form-control:focus { color: #ececf4; } .login-page-body .benefits, .login-page-body .benefits li { color: #b4b4c8 !important; } .portal-nav-links a.text-danger { color: #fca5a5 !important; } .portal-nav-links a.text-danger:hover { color: #fecaca !important; }