/* ===================================================================== VD PUBLIC THEME — premium/enterprise polish for the public & vendor facing pages (registration, status, thank-you, edit). Mirrors the admin theme's design language (Inter font + navy/slate palette) on top of Bootstrap 4. Loaded LAST in each page so it layers over the page's own inline styles. PRESENTATION ONLY — colours, radii, shadows, spacing, typography. No layout/positioning/display changes, no markup or script changes. Reuses each page's existing --vms-* variables where present, with navy fallbacks so it is consistent even if a variable is missing. ===================================================================== */ :root { --vmsx-primary: #1B3A6B; --vmsx-primary-dk: #0F1E3D; --vmsx-ink: #1E293B; --vmsx-slate: #334155; --vmsx-muted: #64748B; --vmsx-line: #E2E8F0; --vmsx-line-2: #CBD5E1; --vmsx-bg: #F4F6FA; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--vmsx-ink); } /* ── Buttons ──────────────────────────────────────────────────────── */ .btn { border-radius: .6rem; font-weight: 600; letter-spacing: .1px; padding: .55rem 1.15rem; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease; } .btn:active { transform: translateY(1px); } .btn-sm { border-radius: .5rem; padding: .35rem .75rem; } .btn-primary { background-color: var(--vms-primary, var(--vmsx-primary)) !important; border-color: var(--vms-primary, var(--vmsx-primary)) !important; box-shadow: 0 8px 20px rgba(27,58,107,.22); } .btn-primary:hover, .btn-primary:focus { background-color: var(--vms-primary-dk, var(--vmsx-primary-dk)) !important; border-color: var(--vms-primary-dk, var(--vmsx-primary-dk)) !important; } .btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(27,58,107,.3) !important; } .btn-outline-primary { color: var(--vms-primary, var(--vmsx-primary)) !important; border-color: var(--vms-primary, var(--vmsx-primary)) !important; } .btn-outline-primary:hover { background-color: var(--vms-primary, var(--vmsx-primary)) !important; color:#fff !important; } /* ── Cards & surfaces ─────────────────────────────────────────────── */ .card { border: 1px solid var(--vmsx-line); border-radius: .85rem; box-shadow: 0 1px 2px rgba(15,30,61,.04), 0 10px 28px rgba(15,30,61,.06); } .card .card-header { background: #fff; border-bottom: 1px solid var(--vmsx-line); font-weight: 700; color: var(--vmsx-ink); } .shadow, .shadow-sm { box-shadow: 0 1px 2px rgba(15,30,61,.04), 0 10px 28px rgba(15,30,61,.06) !important; } /* ── Forms ────────────────────────────────────────────────────────── */ label { color: var(--vmsx-slate); font-weight: 600; } .form-control, .custom-select { border-radius: .6rem; border: 1px solid var(--vmsx-line-2); padding: .6rem .9rem; color: var(--vmsx-ink); transition: border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder { color: #94a3b8; } .form-control:focus, .custom-select:focus { border-color: var(--vms-primary, var(--vmsx-primary)); box-shadow: 0 0 0 .2rem rgba(27,58,107,.15); } .input-group-text { background: #f1f5f9; border-color: var(--vmsx-line-2); color: var(--vmsx-slate); } /* ── Headings & text ──────────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6 { color: var(--vmsx-ink); font-weight: 700; letter-spacing: -.01em; } .text-primary { color: var(--vms-primary, var(--vmsx-primary)) !important; } a { color: var(--vms-primary, var(--vmsx-primary)); } a:hover { color: var(--vms-primary-dk, var(--vmsx-primary-dk)); } /* ── Tables ───────────────────────────────────────────────────────── */ .table thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .5px; font-weight: 700; color: var(--vmsx-muted); border-top: none; border-bottom: 2px solid var(--vmsx-line); background: #f8fafc; } .table td { vertical-align: middle; border-color: var(--vmsx-line); } .table-hover tbody tr:hover { background: #f8fafc; } /* ── Badges ───────────────────────────────────────────────────────── */ .badge { font-weight: 600; padding: .4em .65em; border-radius: 999px; } .badge-success { background:#dcfce7 !important; color:#166534 !important; } .badge-danger { background:#fee2e2 !important; color:#991b1b !important; } .badge-warning { background:#fef3c7 !important; color:#92400e !important; } .badge-info { background:#e0f2fe !important; color:#075985 !important; } /* ── Alerts ───────────────────────────────────────────────────────── */ .alert { border: 1px solid transparent; border-left-width: 4px; border-radius: .6rem; } .alert-success { background:#f0fdf4; border-color:#bbf7d0; border-left-color:#16a34a; color:#166534; } .alert-danger { background:#fef2f2; border-color:#fecaca; border-left-color:#dc2626; color:#991b1b; } .alert-warning { background:#fffbeb; border-color:#fde68a; border-left-color:#f59e0b; color:#92400e; } .alert-info { background:#f0f9ff; border-color:#bae6fd; border-left-color:#0ea5e9; color:#075985; } /* ── Modals ───────────────────────────────────────────────────────── */ .modal-content { border:0; border-radius:.9rem; overflow:hidden; box-shadow:0 24px 60px rgba(15,30,61,.22); } .modal-header { border-bottom:1px solid var(--vmsx-line); } .modal-header .modal-title { font-weight:700; } /* ── Scrollbars ───────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover { background:#94a3b8; background-clip:content-box; } /* ── Responsiveness ───────────────────────────────────────────────── */ @media (max-width: 575px) { .btn { padding: .5rem 1rem; } .card { border-radius: .7rem; } .card-body { padding: 1rem; } }