/* Portal identity themes — Operator / Driver / Shipper / Carrier Applied via [data-portal] on . Keeps shared shell; swaps tokens + auth chrome. */ /* ─── Operator (admin): dense data, indigo + amber ─── */ html[data-portal="operator"] { --color-primary: #1e3a8a; --color-secondary: #334155; --color-cta: #1e40af; --color-accent: #f59e0b; --color-teal: #0d9488; --color-background: #f1f5f9; --color-text: #0f172a; --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-500: #3b82f6; --brand-600: #1e40af; --brand-700: #1e3a8a; --brand-800: #0f172a; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 0.875rem; --admin-bg: #f1f5f9; --admin-surface: #ffffff; --admin-surface-muted: #f8fafc; --admin-surface-variant: #e2e8f0; --admin-primary: #1e40af; --admin-primary-soft: #eff6ff; --admin-text: #0f172a; --admin-muted: #64748b; --admin-border: #e2e8f0; --admin-accent: #f59e0b; --admin-accent-soft: #fffbeb; --admin-radius: 0.75rem; --admin-radius-lg: 1rem; --admin-table-head-bg: #eff6ff; --admin-shadow: 0 2px 12px rgba(30, 64, 175, 0.08); --admin-shadow-card: 0 1px 8px rgba(15, 23, 42, 0.05); } html[data-portal="operator"] .admin-app .admin-content { padding: 1rem 1.25rem 1.75rem; } html[data-portal="operator"] .admin-stat-card { border-radius: var(--admin-radius); border-inline-start: 3px solid var(--admin-accent); } html[data-portal="operator"] .admin-nav-link.is-active { background: var(--admin-primary-soft); color: var(--admin-primary); box-shadow: inset -3px 0 0 var(--admin-accent); } /* ─── Driver: bold field ops, orange primary + warm surface ─── */ html[data-portal="driver"] { --color-primary: #9a3412; --color-secondary: #57534e; --color-cta: #ea580c; --color-accent: #1d4ed8; --color-teal: #0d9488; --color-background: #fff7ed; --color-text: #431407; --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-500: #fb923c; --brand-600: #ea580c; --brand-700: #c2410c; --brand-800: #7c2d12; --radius-md: 1rem; --radius-lg: 1.25rem; --radius-xl: 1.5rem; --admin-bg: #fff7ed; --admin-surface: #ffffff; --admin-surface-muted: #fffbeb; --admin-surface-variant: #ffedd5; --admin-primary: #ea580c; --admin-primary-soft: #ffedd5; --admin-text: #431407; --admin-muted: #78716c; --admin-border: #fed7aa; --admin-accent: #1d4ed8; --admin-accent-soft: #dbeafe; --admin-radius: 1.35rem; --admin-radius-lg: 1.6rem; --admin-table-head-bg: #ffedd5; --admin-table-head-text: #9a3412; --admin-shadow: 0 8px 28px rgba(234, 88, 12, 0.12); --admin-shadow-card: 0 4px 18px rgba(154, 52, 18, 0.08); } html[data-portal="driver"] .admin-sidebar { border-left-color: #fdba74; background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%); } html[data-portal="driver"] .admin-nav-link.is-active { background: linear-gradient(90deg, #ffedd5, #fff7ed); color: #c2410c; font-weight: 700; } html[data-portal="driver"] .admin-stat-card { border-radius: var(--admin-radius-lg); box-shadow: var(--admin-shadow-card); } html[data-portal="driver"] .admin-btn-primary { border-radius: 999px; } html[data-portal="operator"] .admin-btn-primary, html[data-portal="carrier"] .admin-btn-primary { border-radius: var(--admin-radius); } html[data-portal="driver"] .btn-brand, html[data-portal="driver"] .btn-cta, html[data-portal="driver"] .admin-app .btn-primary { background: var(--admin-primary); border-radius: 9999px; } html[data-portal="driver"] .btn-brand:hover, html[data-portal="driver"] .btn-cta:hover { box-shadow: 0 10px 24px rgba(234, 88, 12, 0.32); } /* ─── Shipper: calm commerce, teal + soft mint ─── */ html[data-portal="shipper"] { --color-primary: #115e59; --color-secondary: #475569; --color-cta: #0f766e; --color-accent: #0369a1; --color-teal: #14b8a6; --color-background: #f0fdfa; --color-text: #042f2e; --brand-50: #f0fdfa; --brand-100: #ccfbf1; --brand-500: #2dd4bf; --brand-600: #0f766e; --brand-700: #115e59; --brand-800: #134e4a; --radius-md: 0.875rem; --radius-lg: 1.125rem; --radius-xl: 1.375rem; --admin-bg: #f0fdfa; --admin-surface: #ffffff; --admin-surface-muted: #f8fffc; --admin-surface-variant: #ccfbf1; --admin-primary: #0f766e; --admin-primary-soft: #ccfbf1; --admin-text: #042f2e; --admin-muted: #5b716e; --admin-border: #99f6e4; --admin-accent: #0369a1; --admin-accent-soft: #e0f2fe; --admin-radius: 1.125rem; --admin-radius-lg: 1.375rem; --admin-table-head-bg: #ccfbf1; --admin-table-head-text: #115e59; --admin-shadow: 0 6px 22px rgba(15, 118, 110, 0.1); --admin-shadow-card: 0 3px 14px rgba(4, 47, 46, 0.06); } html[data-portal="shipper"] .admin-sidebar { background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 70%, #ccfbf1 140%); border-left-color: #99f6e4; } html[data-portal="shipper"] .admin-nav-link.is-active { background: #ccfbf1; color: #0f766e; } html[data-portal="shipper"] .admin-stat-card { border: 1px solid #99f6e4; border-radius: var(--admin-radius); } html[data-portal="shipper"] .btn-brand, html[data-portal="shipper"] .btn-cta { background: linear-gradient(135deg, #0f766e, #0d9488); border-radius: var(--radius-lg); } /* ─── Carrier: enterprise navy, dark sidebar, teal CTA ─── */ html[data-portal="carrier"] { --color-primary: #0b1d4b; --color-secondary: #334155; --color-cta: #0d9488; --color-accent: #64748b; --color-teal: #14b8a6; --color-background: #eef2f7; --color-text: #07122e; --brand-50: #eef4ff; --brand-100: #dbe7ff; --brand-500: #0d9488; --brand-600: #0b1d4b; --brand-700: #07122e; --brand-800: #020617; --radius-md: 0.4rem; --radius-lg: 0.6rem; --radius-xl: 0.75rem; --admin-bg: #e8edf5; --admin-surface: #ffffff; --admin-surface-muted: #f1f5f9; --admin-surface-variant: #dbe3f0; --admin-primary: #0d9488; --admin-primary-soft: #ccfbf1; --admin-text: #07122e; --admin-muted: #64748b; --admin-border: #cbd5e1; --admin-accent: #0b1d4b; --admin-accent-soft: #e2e8f0; --admin-radius: 0.6rem; --admin-radius-lg: 0.85rem; --admin-table-head-bg: #0b1d4b; --admin-table-head-text: #f8fafc; --admin-shadow: 0 4px 18px rgba(7, 18, 46, 0.12); --admin-shadow-card: 0 2px 10px rgba(7, 18, 46, 0.08); --admin-sidebar-w: 16.5rem; } html[data-portal="carrier"] .admin-sidebar { background: linear-gradient(180deg, #0b1d4b 0%, #07122e 100%); border-left: none; box-shadow: -6px 0 24px rgba(7, 18, 46, 0.25); color: #e2e8f0; } html[data-portal="carrier"] .admin-sidebar__brand { border-bottom-color: rgba(148, 163, 184, 0.25); } html[data-portal="carrier"] .admin-sidebar__brand h2, html[data-portal="carrier"] .admin-sidebar__brand p { color: #f8fafc; } html[data-portal="carrier"] .admin-sidebar__brand p { color: #94a3b8; } html[data-portal="carrier"] .admin-nav-link { color: #cbd5e1; } html[data-portal="carrier"] .admin-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } html[data-portal="carrier"] .admin-nav-link.is-active { background: rgba(13, 148, 136, 0.22); color: #5eead4; font-weight: 700; } html[data-portal="carrier"] .admin-sidebar__close { color: #e2e8f0; } html[data-portal="carrier"] .admin-sidebar__section-title { color: #94a3b8; } html[data-portal="carrier"] .admin-nav-group__toggle { color: #94a3b8; } html[data-portal="carrier"] .admin-nav-group__toggle:hover, html[data-portal="carrier"] .admin-nav-group.is-active > .admin-nav-group__toggle { background: rgba(255, 255, 255, 0.08); color: #5eead4; } html[data-portal="carrier"] .admin-stat-card { border-radius: var(--admin-radius); border-top: 3px solid var(--admin-primary); } html[data-portal="carrier"] .btn-brand, html[data-portal="carrier"] .btn-cta { background: var(--admin-primary); border-radius: var(--radius-md); } /* ─── Auth shells per portal ─── */ html[data-portal="operator"] .auth-shell { background: radial-gradient(circle at 12% 18%, rgba(245, 158, 11, 0.16), transparent 38%), radial-gradient(circle at 88% 78%, rgba(30, 64, 175, 0.14), transparent 42%), linear-gradient(155deg, #f8fafc 0%, #e2e8f0 100%); } html[data-portal="operator"] .auth-shell__brand { background: linear-gradient(150deg, #0f172a 0%, #1e3a8a 48%, #1e40af 100%); } html[data-portal="operator"] .auth-trust-list li::before { background: #f59e0b; } html[data-portal="operator"] .auth-shell__frame { border-radius: 0.75rem; } html[data-portal="driver"] .auth-shell { background: radial-gradient(circle at 80% 10%, rgba(249, 115, 22, 0.22), transparent 36%), radial-gradient(circle at 10% 90%, rgba(29, 78, 216, 0.12), transparent 40%), linear-gradient(165deg, #fff7ed 0%, #ffedd5 55%, #fed7aa 100%); } html[data-portal="driver"] .auth-shell__brand { background: linear-gradient(145deg, #9a3412 0%, #ea580c 52%, #fb923c 100%); } html[data-portal="driver"] .auth-trust-list li::before { background: #1d4ed8; } html[data-portal="driver"] .auth-shell__frame { border-radius: 1.75rem; border-color: #fdba74; } html[data-portal="driver"] .auth-shell__form { background: #fffdfb; } html[data-portal="driver"] .auth-shell__frame--swap { direction: rtl; } @media (min-width: 768px) { html[data-portal="driver"] .auth-shell__frame--swap { grid-template-columns: 1fr 1.05fr; } html[data-portal="driver"] .auth-shell__frame--swap .auth-shell__form { order: -1; } } html[data-portal="shipper"] .auth-shell { background: radial-gradient(circle at 20% 30%, rgba(45, 212, 191, 0.2), transparent 40%), radial-gradient(circle at 90% 70%, rgba(3, 105, 161, 0.12), transparent 38%), linear-gradient(160deg, #f0fdfa 0%, #ccfbf1 100%); } html[data-portal="shipper"] .auth-shell__brand { background: linear-gradient(155deg, #134e4a 0%, #0f766e 50%, #14b8a6 100%); } html[data-portal="shipper"] .auth-trust-list li::before { background: #67e8f9; } html[data-portal="shipper"] .auth-shell__frame { border-radius: 1.25rem; border-color: #99f6e4; } html[data-portal="carrier"] .auth-shell { background: radial-gradient(circle at 15% 20%, rgba(13, 148, 136, 0.14), transparent 40%), linear-gradient(160deg, #0b1d4b 0%, #1e293b 45%, #334155 100%); } html[data-portal="carrier"] .auth-shell__brand { background: linear-gradient(160deg, #020617 0%, #0b1d4b 60%, #134e4a 100%); } html[data-portal="carrier"] .auth-trust-list li::before { background: #2dd4bf; } html[data-portal="carrier"] .auth-shell__frame { border-radius: 0.5rem; border-color: rgba(148, 163, 184, 0.35); box-shadow: 0 20px 50px rgba(2, 6, 23, 0.45); } html[data-portal="carrier"] .auth-shell__form { background: #f8fafc; } html[data-portal="carrier"] .auth-shell__form-title { color: #0b1d4b; } /* Portal badge on auth form */ .auth-portal-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 9999px; margin-bottom: 1rem; letter-spacing: 0.01em; } .auth-portal-badge--operator { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } .auth-portal-badge--driver { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; } .auth-portal-badge--shipper { background: #ccfbf1; color: #0f766e; border: 1px solid #5eead4; } .auth-portal-badge--carrier { background: #e2e8f0; color: #0b1d4b; border: 1px solid #94a3b8; } /* Registration identity */ html[data-portal="driver"] .registration-page__title, html[data-portal="driver"] body.landing-page .registration-page__title { color: #c2410c; } .registration-page[data-portal="driver"] .registration-page__title, html[data-portal="driver"] .registration-page__title { color: #c2410c; } html[data-portal="shipper"] .registration-page__title { color: #0f766e; } html[data-portal="carrier"] .registration-page__title { color: #0b1d4b; } html[data-portal="driver"] .registration-form__section-title { color: #c2410c; border-inline-start: 3px solid #ea580c; padding-inline-start: 0.75rem; } html[data-portal="shipper"] .registration-form__section-title { color: #0f766e; border-inline-start: 3px solid #0f766e; padding-inline-start: 0.75rem; } html[data-portal="carrier"] .registration-form__section-title { color: #0b1d4b; border-inline-start: 3px solid #0d9488; padding-inline-start: 0.75rem; } .registration-card__icon--shipper { background: #ccfbf1; color: #0f766e; } .registration-card__icon--driver { background: #ffedd5; color: #c2410c; } .registration-card__icon--carrier { background: #e2e8f0; color: #0b1d4b; } .registration-card--shipper:hover { border-color: #5eead4; } .registration-card--driver:hover { border-color: #fb923c; } .registration-card--carrier:hover { border-color: #64748b; } /* Dark mode — keep portal accent identity */ html[data-theme="dark"][data-portal="operator"] { --admin-primary: #60a5fa; --admin-primary-soft: #1e3a5f; --admin-accent: #fbbf24; --admin-accent-soft: #422006; } html[data-theme="dark"][data-portal="driver"] { --admin-bg: #1c1010; --admin-surface: #2a1810; --admin-primary: #fb923c; --admin-primary-soft: #431407; --admin-text: #fff7ed; --admin-muted: #a8a29e; --admin-border: #7c2d12; --admin-accent: #93c5fd; } html[data-theme="dark"][data-portal="shipper"] { --admin-bg: #042f2e; --admin-surface: #0f3d3a; --admin-primary: #2dd4bf; --admin-primary-soft: #134e4a; --admin-text: #f0fdfa; --admin-muted: #99f6e4; --admin-border: #115e59; --admin-accent: #7dd3fc; } html[data-theme="dark"][data-portal="carrier"] { --admin-bg: #020617; --admin-surface: #0f172a; --admin-primary: #2dd4bf; --admin-primary-soft: #134e4a; --admin-text: #f1f5f9; --admin-muted: #94a3b8; --admin-border: #1e293b; } html[data-theme="dark"][data-portal="carrier"] .admin-sidebar { background: linear-gradient(180deg, #020617 0%, #0b1d4b 100%); } @media (prefers-reduced-motion: reduce) { html[data-portal] .btn-brand, html[data-portal] .btn-cta, html[data-portal] .admin-stat-card, html[data-portal] .registration-card { transition: none; } }