/* Dealer Portal skin — Vinyasa Automotive "bold performance" brand. Dark Void (#0A0A0B) + Molten Orange (#FF3D00), mirroring theme/assets/base.css so a dealer logging in is in the SAME brand as the storefront (vinyasa-automotive.com). Loaded ONLY by templates/reseller_portal/_base.html, AFTER tailwind.css — so it never touches the operator "Stitch console". It does two things: (a) sets the dark canvas + brand fonts (Space Grotesk headings, Inter body), and (b) RE-SKINS the small, closed set of Tailwind color utilities the portal templates already use (bg-white, bg-background, text-primary, border-outline, the red/green flash colors, …) to the store palette. Because no template gains a NEW Tailwind class, the compiled tailwind.css (and `make css`) is untouched. Every rule is scoped under `.portal` (set on ) so it is inert everywhere else. */ :root { --p-bg: #0A0A0B; --p-surface: #141417; --p-surface-2: #1D1D22; --p-elevated: #26262C; --p-outline: #2E2E36; --p-outline-strong: #3C3C46; --p-accent: #FF3D00; --p-accent-hover: #FF5A2B; --p-accent-press: #E23100; --p-on-bg: #F5F5F7; --p-on-muted: #A0A0AB; --p-on-faint: #6C6C78; --p-in-stock: #22D3A6; --p-danger: #FF8A80; --p-focus-ring: rgba(255, 61, 0, 0.28); --p-glow: 0 8px 24px rgba(255, 61, 0, 0.14); --p-font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --p-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; } /* ---- Canvas ------------------------------------------------------------ */ body.portal { background: var(--p-bg); color: var(--p-on-bg); font-family: var(--p-font-body); -webkit-font-smoothing: antialiased; } body.portal h1, body.portal h2, body.portal h3, body.portal h4 { font-family: var(--p-font-head); letter-spacing: -0.01em; } /* ---- Logo lockup (mirrors the storefront header) ----------------------- */ .portal .p-logo { font-family: var(--p-font-head); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--p-on-bg); white-space: nowrap; } .portal .p-logo .mark { color: var(--p-accent); margin-right: 7px; } /* ---- Tailwind color-utility re-skin (portal-scoped) -------------------- */ .portal .bg-white { background-color: var(--p-surface) !important; } .portal .bg-background { background-color: var(--p-surface-2) !important; } .portal .bg-primary { background-color: var(--p-accent) !important; } .portal .text-primary { color: var(--p-accent) !important; } .portal .text-white { color: var(--p-bg) !important; } /* label on orange = near-black, 5.6:1 */ .portal .text-on-surface { color: var(--p-on-bg) !important; } .portal .text-on-surface-variant { color: var(--p-on-muted) !important; } .portal .border-outline { border-color: var(--p-outline) !important; } .portal .border-outline\/60 { border-color: rgba(245, 245, 247, 0.07) !important; } .portal .hover\:bg-background:hover { background-color: var(--p-surface-2) !important; } .portal .hover\:bg-\[\#0066D6\]:hover { background-color: var(--p-accent-hover) !important; } .portal .hover\:text-primary:hover { color: var(--p-accent) !important; } /* Cards get a subtle lift instead of the light-mode drop shadow. */ .portal .shadow-sm { box-shadow: 0 1px 0 rgba(245, 245, 247, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.45) !important; } /* ---- Crisp store corners (this app's Tailwind config maps rounded-xl → 24px, which reads as a pill; the storefront uses 8px controls / 12px cards). Retune the portal only. --------- */ .portal .rounded-xl { border-radius: 8px !important; } /* inputs, buttons, banners */ .portal .rounded-2xl { border-radius: 12px !important; } /* cards */ .portal .rounded-lg { border-radius: 8px !important; } /* image tiles */ /* ---- Inputs: dark field, ≥16px text, subtle border, orange focus ring --- */ .portal input, .portal textarea, .portal select { color: var(--p-on-bg); } .portal input::placeholder, .portal textarea::placeholder { color: var(--p-on-faint); } .portal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .portal textarea, .portal select { min-height: 44px; } .portal .focus\:border-primary:focus { border-color: var(--p-accent) !important; box-shadow: 0 0 0 3px var(--p-focus-ring); } /* ---- Primary buttons: brand font, ≥44px tap target, hover glow --------- */ .portal .bg-primary { font-family: var(--p-font-head); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .portal .bg-primary:hover { box-shadow: var(--p-glow); } .portal .bg-primary:active { background-color: var(--p-accent-press) !important; transform: translateY(1px); } .portal button { min-height: 44px; } /* ---- Flash / banner colors --------------------------------------------- */ .portal .bg-red-50 { background-color: rgba(255, 90, 77, 0.12) !important; } .portal .border-red-200 { border-color: rgba(255, 90, 77, 0.40) !important; } .portal .text-red-800 { color: var(--p-danger) !important; } .portal .bg-green-50 { background-color: rgba(34, 211, 166, 0.12) !important; } .portal .border-green-200 { border-color: rgba(34, 211, 166, 0.40) !important; } .portal .text-green-800 { color: var(--p-in-stock) !important; } .portal .text-green-700 { color: var(--p-in-stock) !important; } /* ---- Visible keyboard focus (a11y) ------------------------------------- */ .portal a:focus-visible, .portal button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; border-radius: 6px; } /* ---- Catalog grid: whole-card link, lift on hover/focus ---------------- */ .portal .p-card { display: flex; flex-direction: column; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .portal a.p-card:hover, .portal a.p-card:focus-visible { transform: translateY(-2px); border-color: var(--p-outline-strong) !important; box-shadow: var(--p-glow); } .portal a.p-card:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; } /* Fixed-aspect image tile so the grid never jumps as images lazy-load; graceful branded placeholder (the "//" wordmark) when a product has no image or the image 404s. */ .portal .p-images { position: relative; background: var(--p-surface-2); } .portal .p-images img { max-width: 100%; } .portal .p-ph-mark { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-family: var(--p-font-head); font-weight: 700; letter-spacing: -0.04em; color: var(--p-accent); opacity: 0.55; } .portal .p-images.p-ph-on .p-ph-mark { display: flex; } .portal .p-card .p-images .p-ph-mark { font-size: 2.25rem; } .portal .p-images.aspect-square .p-ph-mark { font-size: 4rem; } /* Thumbnail rail: hide the scrollbar (mirrors _base.html's mobile nav helper). */ .portal .no-scrollbar { scrollbar-width: none; } .portal .no-scrollbar::-webkit-scrollbar { display: none; } /* Sanitized SEO/marketing HTML description (allowlisted

/