/* Featured-designers face bar (social proof). Fixed strip at the bottom; scrolling marquee of faces with a hover/tap preview popup. Hidden until js/facebar.js finds data. */ /* Floats within the stage (its parent .stage-area is position:relative), so it auto-resizes when the left nav collapses/expands, and stops short of the FAB on the right. */ .facebar { position: absolute; left: 16px; right: 96px; /* clear the FAB (bottom-right) */ bottom: 18px; z-index: 40; /* above stage content, below modals/menus */ display: flex; align-items: center; /* Uniform inset gives hover-scaled faces room to grow inside the pill's clip region (they stay within this padding), and keeps faces off the rounded ends. */ padding: 8px; background: var(--panel, #fff); border: 1px solid var(--menu-border, #e6e5e1); border-radius: 40px; /* Clip faces to the pill's own rounded shape, so they curve off at the ends matching the border-radius exactly (both sides) instead of a straight cut or spilling past the corner. The pill's own box-shadow is unaffected. */ overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); } .facebar[hidden] { display: none; } .facebar-viewport { position: relative; flex: 1 1 auto; /* min-width:0 lets this flex item shrink below the (huge) marquee content width — without it, default min-width:auto keeps the viewport as wide as the track, so nothing clips and faces spill out of the pill as they scroll. */ min-width: 0; /* No clipping here — the pill (.facebar overflow:hidden) does it, so the clip follows the pill's rounded corners. overflow stays visible so hover-scaled faces spill into the pill's padding (still inside the pill's clip region). */ overflow: visible; } .facebar-track { display: flex; gap: 12px; width: max-content; animation: facebar-scroll 60s linear infinite; } .facebar-viewport:hover .facebar-track, .facebar-viewport:focus-within .facebar-track { animation-play-state: paused; } @keyframes facebar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .facebar-track { animation: none; } .facebar-viewport { overflow-x: auto; } } .facebar-face { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; outline: none; } .facebar-face > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); transition: transform 0.12s ease, box-shadow 0.12s ease; display: block; } .facebar-face:hover > img, .facebar-face:focus-visible > img, .facebar-face.is-open > img { transform: scale(1.14); box-shadow: 0 0 0 3px rgba(243, 201, 16, 0.35), 0 4px 12px rgba(0, 0, 0, 0.28); } /* preview popup — a single shared element appended to (position: fixed), JS-positioned above the active face so it escapes the marquee viewport's overflow:hidden. */ .facebar-pop { position: fixed; left: 0; bottom: 0; width: 288px; padding: 14px; background: var(--panel, #fff); border: 1px solid var(--menu-border, #e6e5e1); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease; z-index: 200; } .facebar-pop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .facebar-pop::after { content: ""; position: absolute; top: 100%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--panel, #fff); border-right: 1px solid var(--menu-border, #e6e5e1); border-bottom: 1px solid var(--menu-border, #e6e5e1); transform: rotate(45deg); } .facebar-pop-media { width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: var(--surface-2, #f4f3f0); } .facebar-pop-media img { width: 100%; height: auto; display: block; } .facebar-pop-media.is-missing { height: 110px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--border, #d9d8d3); color: var(--muted-2, #a5a4a0); font-size: 11px; font-weight: 600; } .facebar-pop-name { font-size: 15px; font-weight: 800; color: var(--ink, #141414); line-height: 1.15; } .facebar-pop-headline { font-size: 12px; color: var(--muted, #6a6a67); line-height: 1.35; margin-top: 3px; } .facebar-pop-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent-strong, #b8860b); text-decoration: none; } .facebar-pop-link:hover { text-decoration: underline; } @media (max-width: 980px) { /* On mobile, anchor to the viewport like the FAB (position:fixed) — otherwise the bar sits at the bottom of the 100dvh stage and falls below the fold under iOS Safari's URL bar, with page scroll locked so it can't be reached. Fixed keeps it above the URL bar and in line with the FAB. bottom:23px centers the pill on the FAB's centerline (FAB is 56px at bottom:22px → center 50px from bottom). */ .facebar { position: fixed; left: 12px; right: 76px; bottom: 23px; padding: 6px; } .facebar-face { width: 40px; height: 40px; } .facebar-pop { width: 240px; } }