/* muaadh-frontend.css — public site only (catalog/user/checkout). Loaded by layout-customer. */ /* JS-bound class names — DO NOT rename without coordinated JS update. Authoritative list: docs/js-bound-classes.md (audit #5). This file contains JS-toggled state classes for: search-hub, vehicle-search, vehicle-vin-modal, assistant chat panel, cart-count animation. */ /* .muaadh-image-thumb and .muaadh-image-table — moved to muaadh-core.css. Below cursor:zoom-in rule keeps the other image selectors. */ .muaadh-image-thumbnail, .muaadh-photo img, .muaadh-photo--staging img, .muaadh-offer-summary__thumb, .muaadh-offer-tile__photo, .muaadh-catalog-quickview-main-img, .muaadh-catalog-quickview-thumb, .muaadh-catalog-original-part__photo, .muaadh-category-img img, .muaadh-catalog-item-image img, .muaadh-cart__item-image img, .muaadh-catalog-item-thumbnail img, .muaadh-image-zoomable, .muaadh-img-zoom img { cursor: zoom-in; } /* CHECKOUT component (35 rules) moved to muaadh-checkout.css in Phase 13 Wave 8 (2026-05-13). */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ .muaadh-catalog-item-price del, .muaadh-input { display: block; width: 100%; min-height: 42px; padding: var(--space-2) var(--space-3); font-family: inherit; font-size: var(--text-sm); font-weight: var(--theme-font-normal); line-height: var(--theme-line-height); color: var(--text-body); background-color: var(--surface-card); border: var(--chassis-border-thin) solid var(--border-default); border-radius: var(--radius-md); transition: all var(--transition-fast); appearance: none; } /* FITMENT component (21 rules) moved to muaadh-fitment.css in Phase 13 Wave 11 (2026-05-13). */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* .muaadh-page-wrapper / .muaadh-section / .muaadh-hero rules removed in Phase H11 (2026-05-16). Storefront now uses .muaadh-pageframe + .muaadh-panel — see muaadh-shell.css. */ .muaadh-mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .muaadh-mobile-toggle.active span:nth-child(2) { opacity: 0; } .muaadh-mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .muaadh-mobile-menu.active { left: 0; } .muaadh-mobile-overlay.active { opacity: 1; visibility: visible; } .muaadh-mobile-tab.active { color: var(--theme-primary); border-bottom-color: var(--theme-primary); } .muaadh-mobile-tab-pane.active { display: block; } .muaadh-mobile-nav-item:hover, .muaadh-mobile-nav-item.active { background: var(--theme-bg-light); color: var(--theme-primary); } .muaadh-mobile-nav-item.active i { transform: rotate(180deg); } /* ============================================================================ AUDIT 8 — NEWSLETTER SECTION (was missing the wrapper rules) The .muaadh-newsletter-input-group was already defined for the form row, but the surrounding section/card/content classes were referenced from blade with no CSS. Result: the homepage newsletter rendered as a flat unstyled block. Rules below mirror the visual language of other marketing sections (cards, padding scale, theme tokens). */ /* dead .muaadh-newsletter-section removed (audit #3) — wrapper class never used in markup */ /* NEWSLETTER component (14 rules) moved to muaadh-newsletter.css in Phase 13 Wave 11 (2026-05-13). */ /* === From style.css B32: Home page === */ /* ============================================================================ B32 — MUAADH HOME PAGE ============================================================================ */ /* .muaadh-hero-search-wrap and PRIMITIVE 13 (.muaadh-hero*) removed in Phase H11 (2026-05-16). The home page hero collapsed into a normal + inside a .muaadh-panel. */ /* search-hub + vin-modal moved to PRIMITIVES section (manifesto-compliant) */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ .muaadh-brands-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } /* BRAND family moved (Phase 13 Wave 12, 2026-05-13). */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* ============================================================================ AUDIT 9 — CATALOG QUICKVIEW MODAL Two-column quickview rendered by partials/catalog-item.blade.php inside a modal. Image left, details right. Classes were referenced from blade with no rules — modal opened but content rendered as a flat unstyled block. Rules below provide minimal sensible structure following the existing catalog-* visual language. */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* Generic catalog leaves used inside the quickview (and elsewhere). */ /* .muaadh-view-toggle removed 2026-05-19 with the catalog grid-mode retirement. */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* .muaadh-catalog-part-dialog* — dropped in Phase 5; the callout-modal responsive cards have been replaced with a single unified table (Phase 4.5). The dialog/part-info/header/footer/tags/body/actions variants all went with them. */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* .muaadh-catalog-part-dialog__{header,part-info,number,tags,body, footer,price,actions} + .muaadh-catalog-part-row{,__label,__value} — dropped in Phase 5 (Phase 4.5 replaced the responsive cards with a single unified .muaadh-catalogitem-list table). */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* FITMENT component (21 rules) moved to muaadh-fitment.css in Phase 13 Wave 11 (2026-05-13). */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* .muaadh-catalog-cards — dropped in Phase 5; the callout-modal body uses a single unified table (Phase 4.5), no longer the responsive card grid. */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* VEHICLE-SEARCH component (24 rules) moved to muaadh-vehicle-search.css in Phase 13 Wave 6 (2026-05-13). */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* .muaadh-catalog-preview-scroll REMOVED 2026-05-08 The scrollable 280px preview container caused tall thumbnails to render as a scroll-roll inside cards. Replaced by the unified image taxonomy: level1-nodes/level2-nodes now use .muaadh-image--catalog-vehicle (width 100%, aspect-ratio 4/3, object-fit: contain). data-fit="width" remains on imgs as a fullview hint (see muaadh-fullview.js). */ /* .muaadh-catalog-card__preview removed 2026-05-08 — eye-icon overlay on level3 thumbnails. Removed together with the fullview-disable on /catalogs/* routes (commit 8c6c6243): with no preview to open, the icon was a vestige. Sole consumer was level3-nodes.blade.php. */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* ── Offers display — Phase 11.7 redesign (2026-05-12) ───────────────── Owner directive: replace the nested quality → merchant → branch visual hierarchy with a flat list of self-contained offer cards. Each offer is one card that carries all of its own context: merchant identity, branch + rating, quality tag, stock badge, price block, action buttons. No section headers — quality is a tag on the card, not a heading above a sub-list. This eliminates the heavy nested chrome and lets the user scan offers as peers. Used by: · resources/views/partials/catalog-item-offers.blade.php (the /modal/offers/{key} modal body) · resources/views/frontend/partials/part-result-offers.blade.php (the /result/{part_number} page offers section) Single source of truth for the offer-card look — both surfaces emit the same DOM so any future visual change happens once here. */ /* Summary header — appears above the offer list on both surfaces. */ /* OFFER component (41 rules) moved to muaadh-offer.css in Phase 13 Wave 10 (2026-05-13). */ /* Offers list — flat stack of cards, no section dividers. */ /* OFFER component (41 rules) moved to muaadh-offer.css in Phase 13 Wave 10 (2026-05-13). */ /* Single offer card. Two-region grid: [body — merchant/branch + meta tags] [trailing — price + actions] On narrow viewports the trailing region wraps below the body. The merchant avatar that used to lead the row was dropped 2026-05-12 per owner brief — the merchant name in the body heading is enough identity, and removing the avatar makes the row read denser. */ /* OFFER component (41 rules) moved to muaadh-offer.css in Phase 13 Wave 10 (2026-05-13). */ /* OFFER component (41 rules) moved to muaadh-offer.css in Phase 13 Wave 10 (2026-05-13). */ /* OFFER component (41 rules) moved to muaadh-offer.css in Phase 13 Wave 10 (2026-05-13). */ /* Trailing region — price block + actions. align-self end pins it to the right column even when body content is short. */ /* OFFER component (41 rules) moved to muaadh-offer.css in Phase 13 Wave 10 (2026-05-13). */ /* Narrow viewports — trailing region wraps under the body. */ @media (max-width: 599.98px) { .muaadh-offer-tile { grid-template-columns: 1fr; } .muaadh-offer-tile__trailing { align-items: stretch; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .muaadh-offer-tile__actions { flex: 1 1 auto; justify-content: flex-end; } } /* ── Callout modal body — stable loading state ───────────────────────── The modal body holds every sub-view (part-details, alternatives, offers, fitment). Owner brief 2026-05-12 — the body MUST keep its size stable when content swaps, and the loading state belongs INSIDE the modal as an overlay, not as a content replacement that collapses the dialog. - position:relative anchors the .__loading absolute overlay below. - min-height holds the dialog open at a consistent floor even when a fresh fragment is just a spinner, so the dialog doesn't shrink between fetches. illustrated.js's showBodyLoading() / hideBodyLoading() drive the overlay; innerHTML swaps in response handlers wipe the overlay automatically. */ /* CALLOUT-DIALOG component moved to muaadh-callouts.css (Phase 13 Wave 13, 2026-05-13). */ @media (prefers-color-scheme: dark) { .muaadh-callout-dialog__loading { background: rgba(0, 0, 0, 0.45); } } /* ── Stats bar — neutral header strip ────────────────────────────────── Used by partials/api/part-details + partials/api/fitment-details for their top "summary" rows (count chips). Generic so it can serve any future modal/section header. Was previously borrowing the offers- specific class names; renamed during the Phase 11.7 offers cleanup. */ .muaadh-stats-bar { padding: var(--space-2-5); background: var(--surface-elevated); border-bottom: var(--chassis-border-thin) solid var(--border-light); border-radius: var(--radius-md) var(--radius-md) 0 0; } /* ── Brand summary row — neutral identity strip ───────────────────── Single-brand header in partials/api/fitment-details. Logo + name + small meta. Reusable for any "this section is about X brand" pattern. */ /* BRAND family moved (Phase 13 Wave 12, 2026-05-13). */ /* FITMENT component (21 rules) moved to muaadh-fitment.css in Phase 13 Wave 11 (2026-05-13). */ /* .muaadh-fitment-table* — dropped in Phase 5 cleanup; the fitment-details modal now renders the vehicles table via .muaadh-catalogitem-list--compact (see Phase 4.7). */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* Delete Button (Wishlist Page) */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* CART section wrapper moved to muaadh-cart.css Phase 13 Wave 1 (2026-05-13). */ /* CHECKOUT component (35 rules) moved to muaadh-checkout.css in Phase 13 Wave 8 (2026-05-13). */ /* CART canonical (Phase 11.10 unified redesign) moved to muaadh-cart.css Phase 13 Wave 1 (2026-05-13). 429 lines, 67 rules. */ .muaadh-user-table th.muaadh-catalog-item-name { min-width: 300px; } .muaadh-user-table td.muaadh-catalog-item-name, .muaadh-user-table td .muaadh-catalog-item-name { max-width: 360px; } /* `.muaadh-merchant-table-wrapper .muaadh-user-table td .muaadh-catalog-item-name` and * `.muaadh-merchant-table-wrapper.all-catalogItems-table-wrapper …` rules moved * to muaadh-merchant.css (Phase D 2026-05-10). They were dead here — * `.muaadh-merchant-table-wrapper` only renders on merchant/items/index and * merchant/delivery/index, both of which extend layout-merchant. That * layout does NOT load frontend.css, so these rules silently never * applied. Now they live where the markup actually renders. */ .muaadh-shipping-quote-action { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem var(--space-3); background: var(--bg-secondary); border: var(--chassis-border-thin) solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--chassis-duration-quick); } .muaadh-shipping-quote-action:hover { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-inverse); } .muaadh-shipping-logo { width: var(--size-img-md); height: auto; max-height: var(--size-img-sm); object-fit: contain; flex-shrink: 0; } /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* SMART-SEARCH component (46 rules) moved to muaadh-smart-search.css in Phase 13 Wave 10 (2026-05-13). */ /* ASSISTANT component (63 rules) moved to muaadh-assistant.css in Phase 13 Wave 7 (2026-05-13). */ /* ASSISTANT component (63 rules) moved to muaadh-assistant.css in Phase 13 Wave 7 (2026-05-13). */ /* ASSISTANT component (63 rules) moved to muaadh-assistant.css in Phase 13 Wave 7 (2026-05-13). */ /* .muaadh-category-tile and -img bases — moved to muaadh-core.css (one truth, no layers). */ /* Grid cards stay grid, just smaller */ /* Global mobile font size reduction */ /* * iOS auto-zoom prevention: inputs < 16px trigger zoom on focus. * Force all form controls to 16px on mobile to prevent this. * This is the standard fix used by all major sites. */ /* Tables in modals */ /* Modal cards */ /* Badges */ /* Original part cards (alternatives) */ /* Section headers */ /* Buttons */ /* Part rows */ /* Match badges */ /* Extension badges */ /* Offers header */ /* Fitment modal */ /* Pagination */ /* M-System Buttons */ /* M-System Cards */ /* Cart items */ /* Modal headers */ /* Alerts */ /* ============================================================================ AUDIT 11 — FINAL COMPONENT GAP FILLERS Closes the remaining gaps surfaced by the class-usage audit. Each rule matches a JS-driven widget or a single-page component. */ /* CART add-widget + mini-cart overlay moved to muaadh-cart.css Phase 13 Wave 1 (2026-05-13). */ /* ----- Vehicle VIN modal — closes the action-button group inside the already-defined modal shell (header/dialog/title/etc. exist). */ /* ----- Merchant earning page wrapper */ .muaadh-merchant-earning { padding: var(--space-6); background: var(--surface-page); border-radius: var(--chassis-radius); } /* ----- Catalog item card meta + part-number leaves */ /* CATALOG family (149 rules) moved to muaadh-catalog.css in Phase 13 Wave 9 (2026-05-13). */ /* ----- Smart search item variants */ /* SMART-SEARCH component (46 rules) moved to muaadh-smart-search.css in Phase 13 Wave 10 (2026-05-13). */ /* ----- Fitment brands action button */ /* ----- Mobile nav accordion variant */ .muaadh-mobile-wayfinder { display: block; width: 100%; } /* ============================================================================ * PRIMITIVES — manifesto-compliant (per docs/architecture-manifesto.md) * ============================================================================ * Everything below this line follows the 10 manifesto rules: * #1 zero breakpoints (only print + reduced-motion + dark scheme) * #2 all sizes via tokens * #3 single grid primitive with 5 tiers * #4 all classes namespaced muaadh- * #5 single img primitive with 5 tiers * #6 single modal primitive with 4 tiers * #7 zero Bootstrap residue * #8 zero inline (consumed by blade as classes only) * #9 Playwright guards visual regression * #10 size tokens use clamp scale * * Consumes tokens from muaadh-tokens.css and muaadh-core.css. * Defines its own tokens (cell-min, cell-max, modal-width, shell-max). * * As pages migrate, legacy classes ABOVE this section get deleted when * no longer used. The end-state: only this section remains. * ============================================================================ */ /* ======================================== * V2-SPECIFIC TOKENS * ======================================== */ :root { /* Grid cell MIN widths — clamp so threshold scales gently */ /* xs/xl tiers deleted Phase A batch 1 (2026-05-10). The * .muaadh-fluid-grid--xs and .muaadh-fluid-grid--xl modifier rules were * never written and no blade requested those tiers. Kept sm/md/lg * because .muaadh-fluid-grid (default md), .muaadh-fluid-grid--sm and * .muaadh-fluid-grid--lg actually consume them. */ --cell-min-sm: clamp(140px, 1.5vw + 130px, 160px); /* small cards (brand logos) */ --cell-min-md: clamp(180px, 2.0vw + 160px, 220px); /* default — generic cards */ --cell-min-lg: clamp(240px, 2.5vw + 215px, 300px); /* products, illustrations */ /* Grid cell MAX widths — hard caps so cards don't stretch on large * screens. fixed (not clamp) since these are upper bounds. xs/xl * removed alongside their MIN counterparts. */ --cell-max-sm: 200px; --cell-max-md: 280px; --cell-max-lg: 380px; /* Modal widths (4 tiers) — fluid between min and max */ --size-modal-md: clamp(420px, 35vw + 280px, 520px); /* forms */ /* Shell max-widths — caps, not fluid scaling */ --shell-max-narrow: 800px; --shell-max-wide: 1600px; /* Search-hub component caps */ --search-hub-max: 680px; --suggestions-max-height: clamp(280px, 32vh, 400px); } /* ======================================== * PRIMITIVE 1 — .muaadh-shell * Page container with max-width + padding * ======================================== */ /* .muaadh-shell base — moved to muaadh-core.css (one truth, no layers). Keeping --narrow/--wide modifiers (frontend-unique). */ /* SHELL family consolidated into muaadh-shell.css (Phase 13 Wave 14, 2026-05-13). */ /* PRIMITIVE 2 — .muaadh-stack modifiers REMOVED Phase E (2026-05-10). Zero usage of `muaadh-stack--xs/--sm/--lg/--xl` across blades or JS. The base `.muaadh-stack` lives in core; modifiers were dead overrides. */ /* ======================================== * PRIMITIVE 3 — .muaadh-cluster * Horizontal flex with wrap * ======================================== */ .muaadh-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .muaadh-cluster--center { justify-content: center; } .muaadh-cluster--end { justify-content: flex-end; } .muaadh-cluster--between { justify-content: space-between; } .muaadh-cluster--top { align-items: flex-start; } .muaadh-cluster--bottom { align-items: flex-end; } .muaadh-cluster--xs { gap: var(--space-1); } .muaadh-cluster--sm { gap: var(--space-2); } .muaadh-cluster--lg { gap: var(--space-5); } /* ======================================== * PRIMITIVE 4 — .muaadh-fluid-grid * Auto-fit grid with 5 tiers (rule #3) * * Behavior: cells stay between cell-min (lower bound) and cell-max (upper * bound). On wide screens, cells stop growing at cell-max — leftover space * is distributed via justify-content (default: center). * ======================================== */ .muaadh-fluid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cell-min-md)), var(--cell-max-md))); gap: var(--space-4); justify-content: center; } .muaadh-fluid-grid--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cell-min-sm)), var(--cell-max-sm))); } .muaadh-fluid-grid--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cell-min-lg)), var(--cell-max-lg))); } /* Justify modifiers — override default centering when needed */ .muaadh-fluid-grid--start { justify-content: start; } .muaadh-fluid-grid--end { justify-content: end; } .muaadh-fluid-grid--space-between { justify-content: space-between; } /* PRIMITIVE 5 — .muaadh-img --lg/--xl modifiers REMOVED 2026-05-08. Replaced by the unified image taxonomy in muaadh-core.css: .muaadh-image--brand-tile and .muaadh-image--catalog-vehicle. Sizes now flow through theme tokens (--theme-image-size-*). */ /* ======================================== * PRIMITIVE 6 — .muaadh-tile * Generic card container * ======================================== */ /* TILE family moved (Phase 13 Wave 12, 2026-05-13). */ /* TILE family moved (Phase 13 Wave 12, 2026-05-13). */ /* PRIMITIVE 7 — .muaadh-action and modifiers Removed: customer-only override layer. Canonical is in muaadh-core.css. --ghost (the only frontend-unique modifier) was promoted to core. Per owner directive 2026-05-07: one truth, no layers. */ /* ======================================== * PRIMITIVE 8 — .muaadh-input * Text inputs / select / textarea * ======================================== */ /* .muaadh-input system — entirely moved to muaadh-core.css (one truth). Core has the full input system at L1405+. */ .muaadh-form-row__control { min-width: 0; } .muaadh-form-row--stacked .muaadh-form-row__label { padding-block-start: 0; } .muaadh-form-row--stacked .muaadh-form-row__error, .muaadh-form-row--stacked .muaadh-form-row__hint { grid-column: 1; } /* PRIMITIVE 10 — .muaadh-modal REMOVED Phase E (2026-05-10). Zero usage of `muaadh-modal` (or its --sm/--md/--lg/--xl modifiers, ::backdrop pseudo, or __close descendant) across blades or JS — the project uses `.muaadh-dialog` for modals everywhere. The block was stale from an earlier iteration that never went through. */ /* PRIMITIVE 11 — .muaadh-table REMOVED Phase E (2026-05-10). Zero usage across blades or JS. The project uses `.muaadh-roster` for data tables (component file: muaadh-roster.css). The block was stale from an earlier iteration that never went through. */ /* PRIMITIVE 12 — .muaadh-tag and modifiers Removed: customer-only override layer. Canonical is in muaadh-core.css. Per owner directive 2026-05-07: one truth, no layers. */ /* PRIMITIVES 13 (.muaadh-hero + descendants), 14 (.muaadh-section + descendants), 15 (.muaadh-page + descendants) all removed in Phase H11 (2026-05-16). The storefront collapsed to a single .muaadh-pageframe + .muaadh-panel cards layout, matching admin. Body/.muaadh-shell-content owns the page- level background; .muaadh-panel owns the card-level surface. */ /* ======================================== * COMPONENT — Search Hub (part + VIN search) * Class names preserved — JS depends on them. * Rules rewritten manifesto-compliant: only tokens, no literal px in rules. * ======================================== */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* SEARCH-HUB component (38 rules) moved to muaadh-search-hub.css in Phase 13 Wave 5 (2026-05-13). */ /* ======================================== * COMPONENT — VIN Result Modal * Class names preserved — JS depends on them. * ======================================== */ /* VEHICLE-VIN family moved (Phase 13 Wave 12, 2026-05-13). */ /* VEHICLE-VIN family moved (Phase 13 Wave 12, 2026-05-13). */ .muaadh-is-loading .muaadh-vehicle-vin-dialog__action-spinner { display: inline-block; } /* PRIMITIVE 16 — .muaadh-divider placeholder block REMOVED Phase E (2026-05-10). The block was a comment-only stub with no rules; zero usage of `.muaadh-divider` in blades or JS. */ /* ======================================== * ACCESSIBILITY — reduced motion * ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } } /* ======================================== * PRINT — hide interactive primitives * ======================================== */ /* @media print block moved to muaadh-print.css in Phase 13 Wave 13 (2026-05-13). */ /* ═══════════════════════════════════════════════════════════════ CONTACT PAGE — semantic flex layout (no grid-cell--N dependency) Two cards: contact info (left) + form (right). Self-stacks on narrow viewports via flex-wrap + per-tile flex-basis. ═══════════════════════════════════════════════════════════════ */ /* CONTACT component (14 rules) moved to muaadh-contact.css in Phase 13 Wave 11 (2026-05-13). */ /* Left card — contact info */ /* CONTACT component (14 rules) moved to muaadh-contact.css in Phase 13 Wave 11 (2026-05-13). */ /* CONTACT component (14 rules) moved to muaadh-contact.css in Phase 13 Wave 11 (2026-05-13). */ /* Right card — contact form */ /* CONTACT component (14 rules) moved to muaadh-contact.css in Phase 13 Wave 11 (2026-05-13). */ /* Field group — input wrapper for the contact form */ .muaadh-field-group { display: flex; flex-direction: column; }