/** * AAN Recently Viewed Floater Widget -- LAYOUT CHROME ONLY. * * Colors, typography, button skin, badge skin and letter-spacing all come from the * theme kit's COMPILED classes used in the markup (.btn-1, .eyebrow, .caption, * .card-badge) and from font inheritance -- change aan-theme-kit.scss + `npm run * build` and this widget re-skins itself; nothing chromatic is hard-coded here. * * The only kit-shaped values below are FALLBACKS inside var() that mirror the kit * defaults ($surface-card #fff, $radius-md 8px, $shadow-pop, $color-border) so the * widget still looks native if a custom property is never set. Every layout knob is * an --aan-rvf-* custom property a dealer/theme can override from any stylesheet. */ .aan-rvf { position: fixed; bottom: var(--aan-rvf-bottom, 120px); z-index: var(--aan-rvf-z, 1040); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: inherit; /* kit body stack via */ } .aan-rvf--right { right: var(--aan-rvf-edge, 16px); } .aan-rvf--left { left: var(--aan-rvf-edge, 16px); align-items: flex-start; } /* Visibility modes (mirrors the call bar's 992px breakpoint) */ @media (max-width: 991.98px) { .aan-rvf--vis-desktop { display: none; } } @media (min-width: 992px) { .aan-rvf--vis-mobile { display: none; } } /* ---- Tab (a real kit .btn-1 -- only geometry adjusted here) ---- */ .aan-rvf__tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; /* slimmer than the kit's default button padding */ cursor: pointer; box-shadow: var(--aan-rvf-shadow, 0 16px 40px -12px rgba(17, 20, 24, .28)); } .aan-rvf__tab svg { width: 20px; height: 20px; fill: currentColor; /* takes the kit button's text color */ flex: 0 0 auto; } .aan-rvf__count { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; /* translucent chip over whatever the kit button background is; digit inherits the kit button's text color -> readable on any kit skin, light or dark */ background: var(--aan-rvf-count-bg, rgba(255, 255, 255, .22)); color: inherit; font-size: 12px; font-weight: 600; line-height: 1; } @media (max-width: 575.98px) { .aan-rvf__tab-label { display: none; } /* icon + count only on small phones */ } /* ---- Panel ---- */ .aan-rvf__panel { width: var(--aan-rvf-width, 340px); max-width: calc(100vw - 32px); max-height: var(--aan-rvf-max-h, 62vh); display: flex; flex-direction: column; overflow: hidden; background: var(--aan-rvf-surface, #fff); /* kit $surface-card */ border: 1px solid var(--aan-rvf-border, #E2E5E9); /* kit $color-border */ border-radius: var(--aan-rvf-radius, 8px); /* kit $radius-md */ box-shadow: var(--aan-rvf-shadow, 0 16px 40px -12px rgba(17, 20, 24, .28)); /* kit $shadow-pop */ } .aan-rvf__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; } .aan-rvf__close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; } .aan-rvf__close:hover { opacity: 1; } .aan-rvf__list { overflow-y: auto; padding: 0 8px 8px; } .aan-rvf__loading { padding: 8px 8px 12px; } /* ---- Rows ---- */ .aan-rvf__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--aan-rvf-radius-sm, 4px); /* kit $radius-sm */ text-decoration: none; color: inherit; /* kit body/link colors via theme */ } .aan-rvf__item:hover { background: var(--aan-rvf-hover, #F5F6F7); } /* kit $bg-row */ .aan-rvf__thumb { flex: 0 0 88px; width: 88px; display: flex; flex-direction: column; border-radius: var(--aan-rvf-radius-sm, 4px); overflow: hidden; /* clips the bar to the rounded corners */ background: var(--aan-rvf-hover, #F5F6F7); } .aan-rvf__thumb img { width: 100%; aspect-ratio: 3 / 2; /* kit $srp-card-image-ratio default */ object-fit: cover; display: block; } /* Sold / Sale-Pending status: a slim bar BENEATH the photo (never covering it). Colors still come from the kit's compiled .card-badge class; only the geometry is reshaped into a full-width strip here. */ .aan-rvf__badge { position: static; display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 3px 4px; border-radius: 0; text-align: center; font-size: 9px; letter-spacing: 0; /* the kit badge's tracking overflows an 88px strip */ line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aan-rvf__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .aan-rvf__name { font-weight: 600; /* kit $fw-semibold */ font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aan-rvf__meta { display: block; } /* Collapse animation-free open/close (respect reduced motion by default) */ .aan-rvf__panel { transform-origin: bottom; } @media (prefers-reduced-motion: no-preference) { .aan-rvf__panel { animation: aan-rvf-in .16s ease-out; } @keyframes aan-rvf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } }