/* input(6597,1): run-time error CSS1019: Unexpected token, found '}' */ /* ============================================================================ listing-experience.css (wwwroot/css/listing-experience.css) NEW ---------------------------------------------------------------------------- THE PREMIUM LISTING EXPERIENCE — the make-or-break, first-impression surface. Pairs with listing-experience.js. Loaded LAST in Home/Index @section Styles (after search-live.css + landing-search-results.css are dropped), so every rule here wins the cascade cleanly. ARCHITECTURE The landing is a FIXED app-shell: html, body.app-body, .main-content are all height:100dvh / overflow:hidden — nothing scrolls the window. So when live listings exist we do NOT try to scroll a section into view. Instead we mount a FULL-SURFACE OVERLAY (#ikx) at level that: • covers the viewport, escaping #leftPanel's 66% width and .main-content's overflow:hidden clip — giving the grid true full width + height (R2.2.6); • owns its OWN internal scroll (#ikx-scroll), so the search controls can be docked at the top and turn sticky on scroll (R2.2.3); • forms a clean stacking context for the detail overlay + full-screen (R2.2.7) and the media viewer (R2.2.9); • reads like a native mobile app on small screens (R2.2.10). The "no listings at a place" state keeps using the existing #lpsr peek panel (screenshot 2.1) — this engine only takes over the screen when results exist. DESIGN LANGUAGE (benchmarks): ogroup editorial calm + oversized imagery; property24 sticky search (twisted: desktop = LEFT filter rail → drawer; mobile = sticky top); cobourg hover image-swap; verityandco media controls + SOLD tag + heart; pellmell dotted rail; UXCO vertical spotlight strip; freshman/oddritual transitions. Brand: charcoal #1A1D20, sunset #F58220, sky #56C4F8. ============================================================================ */ :root { --ikx-ink: #0E0E11; --ikx-ink-2: #1A1D20; --ikx-paper: #F6F8FB; --ikx-paper-2: #FFFFFF; --ikx-orange: #F58220; --ikx-orange-2: #ffb347; --ikx-cyan: #56C4F8; --ikx-muted: #64748B; --ikx-muted-2: #94A3B8; --ikx-line: rgba(15, 23, 42, 0.08); --ikx-line-2: rgba(15, 23, 42, 0.14); --ikx-sold: #E23744; --ikx-shadow-card: 0 18px 48px -24px rgba(14, 14, 17, 0.45); --ikx-shadow-pop: 0 40px 120px -30px rgba(14, 14, 17, 0.55); --ikx-radius: 22px; --ikx-radius-sm: 14px; --ikx-ease: cubic-bezier(.22, 1, .36, 1); --ikx-rail-w: 348px; /* desktop left search rail (collapsed bar) */ --ikx-drawer-w: clamp(360px, 34vw, 520px); /* opened filter drawer width */ --ikx-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --ikx-font-head: 'Playfair Display', 'Outfit', Georgia, serif; } /* Fix a token typo guard: some browsers tolerate the cyrillic char above; use safe fallbacks anywhere --ikx-orange-2 is consumed. */ :root { --ikx-orange-2: #ffb347; } /* ───────────────────────────────────────────────────────────────────────── 0. FULL-SURFACE OVERLAY SHELL ───────────────────────────────────────────────────────────────────────── */ .ikx { position: fixed; inset: 0; z-index: 1200; /* over hero + floating rail; under sign-in modal (z 3000+) */ display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 88% -12%, rgba(245, 130, 32, 0.14), transparent 56%), radial-gradient(1100px 620px at -8% 8%, rgba(86, 196, 248, 0.12), transparent 55%), radial-gradient(900px 500px at 50% 120%, rgba(245, 130, 32, 0.06), transparent 60%), linear-gradient(180deg, #eef1f6 0%, var(--ikx-paper) 60%); font-family: var(--ikx-font); color: var(--ikx-ink-2); -webkit-font-smoothing: antialiased; opacity: 0; visibility: hidden; transition: opacity .42s var(--ikx-ease), visibility 0s linear .42s; } .ikx.is-open { opacity: 1; visibility: visible; transition: opacity .42s var(--ikx-ease), visibility 0s; } .ikx[hidden] { display: none; } /* When the experience is open, hide the floating MEDIA rail (AI-Location/Email/ YouTube) so the grid claims full width + height (R2.2.6). Utility FABs (a11y / settings trio) are intentionally left visible. */ body.ikx-active .floating-engagement { opacity: 0 !important; pointer-events: none !important; transform: translateX(-12px); transition: opacity .3s var(--ikx-ease), transform .3s var(--ikx-ease); } /* The shell is a column: [top bar] then [scroll body]. */ .ikx-scroll { flex: 1 1 auto; min-height: 0; /* One-viewport mode: the overlay no longer scrolls vertically. Cards scroll horizontally and the rail scrolls internally if needed, so everything fits within a single viewport height. */ overflow: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Body fills the available height so the results column can flex internally. */ .ikx-scroll > .ikx-body { height: 100%; min-height: 0; } .ikx-scroll::-webkit-scrollbar { width: 10px; } .ikx-scroll::-webkit-scrollbar-thumb { background: var(--ikx-line-2); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } .ikx-scroll::-webkit-scrollbar-thumb:hover { background: var(--ikx-muted-2); background-clip: content-box; } /* ───────────────────────────────────────────────────────────────────────── 1. TOP BAR — title + count + sort + close, turns sticky/condensed on scroll ───────────────────────────────────────────────────────────────────────── */ .ikx-topbar { position: relative; z-index: 6; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: clamp(16px, 2.4vw, 26px) clamp(18px, 3.4vw, 46px); background: #ffffff; border-bottom: none; transition: padding .35s var(--ikx-ease), box-shadow .35s var(--ikx-ease); } /* Animated gradient border-bottom — mirrors the main site header */ .ikx-topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--ikx-orange) 0%, var(--ikx-cyan) 33%, var(--ikx-orange) 66%, var(--ikx-cyan) 100%); background-size: 200% 100%; animation: ikx-topbar-grad 4s linear infinite; pointer-events: none; } @keyframes ikx-topbar-grad { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } .ikx.is-condensed .ikx-topbar { padding-top: clamp(10px, 1.4vw, 14px); padding-bottom: clamp(10px, 1.4vw, 14px); box-shadow: 0 10px 30px -22px rgba(14,14,17,0.5); } /* Brandmark — logo sits directly in the white topbar, no separate tile */ .ikx-brandmark { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 4px; border-radius: 0; background: transparent; flex: 0 0 auto; overflow: visible; z-index: 2; } .ikx-brandmark-img { /* BRAND CONSISTENCY (2026-07-10): match the landing header's logo exactly (site.css .brand-logo img — 58px desktop). The brandmark box stays 52px (fixed height, overflow visible) and remains the tallest header element, so the logo is the ONLY thing that grows — the ~3px of overspill paints harmlessly into the topbar's clamp(16–26px) paddings and the header's height is unaffected. */ height: 58px; width: auto; display: block; } .ikx-brandmark-fallback { display: none; place-items: center; width: 26px; height: 26px; color: var(--ikx-orange); } .ikx-brandmark-fallback svg { width: 24px; height: 24px; } /* ikx-brandmark-line is kept in HTML for back-compat but hidden — the gradient border now lives on .ikx-topbar::after */ .ikx-brandmark-line { display: none; } .ikx-titlewrap { display: flex; flex-direction: column; align-items: center; min-width: 0; /* Centered in the header regardless of the side elements' widths. */ position: absolute; left: 50%; transform: translateX(-50%); text-align: center; max-width: 56%; pointer-events: none; } .ikx-title { margin: 0; /* Outfit (the site's primary sans) per request — not the Playfair serif. */ font-family: var(--ikx-font); font-weight: 700; /* Reduced ~20% from the previous clamp(1.15rem, 2.3vw, 1.7rem). */ font-size: clamp(0.92rem, 1.84vw, 1.36rem); letter-spacing: -0.01em; line-height: 1.1; color: var(--ikx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ikx-count { margin-top: 3px; font-size: 0.86rem; font-weight: 600; color: var(--ikx-muted); display: inline-flex; align-items: center; gap: 7px; } .ikx-count .ikx-count-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ikx-orange); box-shadow: 0 0 0 4px rgba(245,130,32,0.14); animation: ikx-livepulse 2.4s var(--ikx-ease) infinite; } @keyframes ikx-livepulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.35); opacity: .65 } } .ikx-count strong { color: var(--ikx-ink-2); font-weight: 800; } /* ── Sort — premium segmented dropdown (R2.2.4) ── */ .ikx-sort { position: relative; flex: 0 0 auto; margin-left: auto; } .ikx-sort-btn { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--ikx-line-2); border-radius: 12px; background: var(--ikx-paper-2); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: border-color .2s var(--ikx-ease), box-shadow .2s var(--ikx-ease), transform .12s var(--ikx-ease); -webkit-tap-highlight-color: transparent; } .ikx-sort-btn:hover { border-color: var(--ikx-orange); outline: none; box-shadow: 0 8px 22px -16px rgba(245,130,32,0.7); } .ikx-sort-btn:active { transform: translateY(1px); } .ikx-sort-btn svg { width: 16px; height: 16px; opacity: .8; } .ikx-sort-btn .ikx-sort-caret { margin-left: 2px; transition: transform .26s var(--ikx-ease); } .ikx-sort.is-open .ikx-sort-caret { transform: rotate(180deg); } .ikx-sort-btn .ikx-sort-label-pre { color: var(--ikx-muted); font-weight: 600; } .ikx-sort-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 248px; background: var(--ikx-paper-2); border: 1px solid var(--ikx-line); border-radius: var(--ikx-radius-sm); box-shadow: var(--ikx-shadow-pop); padding: 7px; z-index: 20; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity .22s var(--ikx-ease), transform .22s var(--ikx-ease); } .ikx-sort.is-open .ikx-sort-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ikx-sort-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 600; font-size: 0.9rem; text-align: left; cursor: pointer; transition: background .16s var(--ikx-ease); } .ikx-sort-opt svg { width: 17px; height: 17px; opacity: .7; flex: 0 0 auto; } .ikx-sort-opt:hover { background: rgba(245,130,32,0.08); } .ikx-sort-opt.is-on { background: rgba(86,196,248,0.12); color: var(--ikx-ink); } .ikx-sort-opt.is-on::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ikx-orange); margin-left: auto; } /* ── Close ── */ .ikx-close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--ikx-line-2); border-radius: 12px; background: var(--ikx-paper-2); color: var(--ikx-ink-2); display: grid; place-items: center; cursor: pointer; transition: transform .14s var(--ikx-ease), border-color .2s var(--ikx-ease), background .2s var(--ikx-ease); -webkit-tap-highlight-color: transparent; } .ikx-close:hover { border-color: var(--ikx-sold); color: var(--ikx-sold); transform: rotate(90deg); } .ikx-close svg { width: 20px; height: 20px; } /* ───────────────────────────────────────────────────────────────────────── 2. BODY LAYOUT — left search rail (desktop) + results column ───────────────────────────────────────────────────────────────────────── */ .ikx-body { display: grid; grid-template-columns: var(--ikx-rail-w) 1fr; gap: 0; align-items: stretch; width: 100%; max-width: 1680px; margin: 0 auto; padding: 0; position: relative; } /* ── LEFT SEARCH RAIL (property24 twist: filters live on the left; opening an item reveals a drawer) ── */ .ikx-rail { position: sticky; top: 0; align-self: stretch; /* Fill the viewport height and scroll internally if the filter list is long, so the page itself never scrolls (one-viewport mode). */ height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: clamp(18px, 2vw, 26px) clamp(16px, 1.6vw, 22px) 24px; border-right: 1px solid var(--ikx-line); display: flex; flex-direction: column; gap: 12px; z-index: 5; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent 60%); } .ikx-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 4px 6px; } .ikx-rail-h { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ikx-muted-2); } .ikx-rail-collapse { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ikx-line); background: var(--ikx-paper-2); color: var(--ikx-ink-2); cursor: pointer; border-radius: 0; transition: border-color .16s var(--ikx-ease), color .16s var(--ikx-ease); } .ikx-rail-collapse:hover { border-color: var(--ikx-orange); color: var(--ikx-orange); } .ikx-rail-collapse svg { width: 16px; height: 16px; } /* Reopen tab — hidden by default, shown flush at the left when collapsed. */ .ikx-rail-reopen { position: sticky; top: 0; align-self: start; display: none; align-items: center; gap: 7px; padding: 12px 14px; border: 1px solid var(--ikx-line); border-left: 0; background: var(--ikx-paper-2); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 700; font-size: 0.82rem; cursor: pointer; writing-mode: vertical-rl; z-index: 5; } .ikx-rail-reopen svg { width: 16px; height: 16px; transform: rotate(90deg); } .ikx-rail-reopen:hover { border-color: var(--ikx-orange); color: var(--ikx-orange); } /* ── COLLAPSED STATE ── rail folds away; reopen tab appears; grid widens to 4 columns to use the reclaimed width (more cards per row). */ .ikx-body.ikx-rail-is-collapsed { grid-template-columns: 0 1fr; } .ikx-body.ikx-rail-is-collapsed .ikx-rail { display: none; } .ikx-body.ikx-rail-is-collapsed .ikx-rail-reopen { display: flex; } @media (min-width: 1101px) { .ikx-body.ikx-rail-is-collapsed .ikx-grid { grid-template-columns: repeat(4, 1fr); } } /* A rail item = a tappable bar that, when opened, slides a drawer out to the right over the results (desktop). */ .ikx-railitem { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 14px; border: 1px solid rgba(255,255,255,0.5); border-radius: var(--ikx-radius-sm); background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.4)); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px -14px rgba(14,14,17,0.3); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 600; font-size: 0.92rem; cursor: pointer; text-align: left; transition: border-color .2s var(--ikx-ease), box-shadow .2s var(--ikx-ease), transform .12s var(--ikx-ease); -webkit-tap-highlight-color: transparent; } .ikx-railitem:hover { border-color: var(--ikx-orange); box-shadow: 0 10px 26px -20px rgba(245,130,32,0.6); } .ikx-railitem.is-active { border-color: var(--ikx-orange); box-shadow: 0 0 0 3px rgba(245,130,32,0.12); } .ikx-railitem .ikx-railicon { width: 20px; height: 20px; flex: 0 0 auto; opacity: .8; } .ikx-railitem .ikx-raillabel { flex: 1 1 auto; min-width: 0; } .ikx-railitem .ikx-railval { font-size: 0.78rem; font-weight: 700; color: var(--ikx-orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .ikx-railitem .ikx-railcaret { width: 16px; height: 16px; flex: 0 0 auto; opacity: .5; transition: transform .26s var(--ikx-ease); } .ikx-railitem.is-active .ikx-railcaret { transform: rotate(90deg); color: var(--ikx-orange); opacity: 1; } .ikx-railitem .ikx-raildot { position: absolute; top: 10px; right: 36px; width: 8px; height: 8px; border-radius: 50%; background: var(--ikx-cyan); display: none; } .ikx-railitem.has-value .ikx-raildot { display: block; } /* Reset / apply buttons in the rail footer */ .ikx-rail-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; } .ikx-rail-reset, .ikx-rail-apply { flex: 1 1 auto; padding: 12px; border-radius: 12px; font-family: var(--ikx-font); font-weight: 700; font-size: 0.88rem; cursor: pointer; border: 1px solid var(--ikx-line-2); transition: all .18s var(--ikx-ease); } .ikx-rail-reset { background: var(--ikx-paper-2); color: var(--ikx-muted); } .ikx-rail-reset:hover { color: var(--ikx-ink-2); border-color: var(--ikx-ink-2); } .ikx-rail-apply { background: linear-gradient(135deg, var(--ikx-orange), var(--ikx-orange-2)); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -12px rgba(245,130,32,0.8); } .ikx-rail-apply:hover { transform: translateY(-1px); } /* ── The DRAWER that an opened rail item reveals (desktop) ── */ .ikx-drawer { position: absolute; top: 0; left: var(--ikx-rail-w); width: var(--ikx-drawer-w); max-width: calc(100% - var(--ikx-rail-w)); height: 100%; background: var(--ikx-paper-2); border-right: 1px solid var(--ikx-line); box-shadow: 30px 0 60px -40px rgba(14,14,17,0.4); z-index: 8; padding: clamp(22px, 2.4vw, 34px); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-18px); opacity: 0; pointer-events: none; transition: transform .34s var(--ikx-ease), opacity .28s var(--ikx-ease); } .ikx-drawer.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; } .ikx-drawer-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .ikx-drawer-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ikx-ink); margin: 0; } .ikx-drawer-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ikx-line-2); background: transparent; color: var(--ikx-muted); display: grid; place-items: center; cursor: pointer; transition: all .16s var(--ikx-ease); } .ikx-drawer-x:hover { color: var(--ikx-sold); border-color: var(--ikx-sold); } .ikx-drawer-x svg { width: 18px; height: 18px; } /* Backdrop that dims the results while a drawer is open (desktop) */ .ikx-drawer-scrim { position: absolute; inset: 0; left: var(--ikx-rail-w); background: rgba(14,14,17,0.18); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); z-index: 7; opacity: 0; pointer-events: none; transition: opacity .3s var(--ikx-ease); } .ikx-drawer-scrim.is-on { opacity: 1; pointer-events: auto; } /* ───────────────────────────────────────────────────────────────────────── 3. RESULTS COLUMN ───────────────────────────────────────────────────────────────────────── */ .ikx-results { position: relative; padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2.6vw, 44px) clamp(14px, 1.6vw, 22px); /* Fill the body height and lay children out vertically so the card track can take the remaining space and the thumbnail strip sits just beneath it — everything inside one viewport (no page scroll). */ display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; } /* The track wrapper takes the remaining vertical space; cards fill its height. */ .ikx-results .ikx-track-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: stretch; } .ikx-results .ikx-grid { width: 100%; min-width: 0; align-items: stretch; } .ikx-results .ikx-grid .ikx-card { height: 100%; display: flex; flex-direction: column; } .ikx-results .ikx-card .ikx-card-cover { flex: 1 1 auto; min-height: 120px; aspect-ratio: auto; } .ikx-results .ikx-card .ikx-card-body { flex: 0 0 auto; } /* Pager is compact in one-viewport mode. */ .ikx-results .ikx-pager { flex: 0 0 auto; margin: 8px 0 0; } /* Thumbnail strip pinned at the bottom of the results column. */ .ikx-results .ikx-thumbstrip { flex: 0 0 auto; margin-top: 12px; } /* Optional UXCO-style vertical SPOTLIGHT STRIP for a featured / just-published listing — stacked colour panels, the active one expands. Sits at the top of the results column when a spotlight ref is present. */ .ikx-spotlight { display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.1fr; gap: clamp(18px, 2vw, 30px); margin-bottom: clamp(26px, 3vw, 44px); align-items: stretch; } .ikx-spotlight[hidden] { display: none; } .ikx-spot-strip { display: flex; flex-direction: column; gap: 10px; } .ikx-spot-panel { position: relative; border-radius: var(--ikx-radius); overflow: hidden; cursor: pointer; color: #fff; min-height: 64px; display: flex; align-items: flex-start; padding: 18px 22px; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; flex: 0 0 auto; transition: flex-grow .5s var(--ikx-ease), min-height .5s var(--ikx-ease), box-shadow .3s var(--ikx-ease); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .ikx-spot-panel.is-active { flex: 1 1 auto; min-height: 220px; box-shadow: var(--ikx-shadow-card); } .ikx-spot-panel .ikx-spot-panel-meta { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ikx-ease) .1s, transform .4s var(--ikx-ease) .1s; margin-top: auto; } .ikx-spot-panel.is-active .ikx-spot-panel-meta { opacity: 1; transform: translateY(0); } .ikx-spot-card { position: relative; border-radius: var(--ikx-radius); overflow: hidden; background: var(--ikx-paper-2); box-shadow: var(--ikx-shadow-card); } .ikx-results-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(16px, 2vw, 24px); } .ikx-results-h .ikx-results-eyebrow { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ikx-orange); } /* ── THE GRID ── */ .ikx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 36px); } /* SCALE (2026-07, revised): content-visibility:auto was applied here with a 380×520 intrinsic-size placeholder. In THIS grid it is unsafe: the cards start life translated (reveal animation: opacity 0 + translateY) inside a horizontally scrolled track, and the browser's relevancy check misses cards that are actually on screen. Skipped cards then keep the 520px placeholder height while the real card is taller, and .ikx-card's overflow:hidden clips the "Listed by" footer strip — it only snapped back once a hover transition forced a repaint. The rule is intentionally removed: images are already lazy, the reveal observer staggers paint, and correctness of the identity footer outranks the render-skip micro-win. Do not reintroduce content-visibility on .ikx-card. */ /* ───────────────────────────────────────────────────────────────────────── 4. PROPERTY CARD — oversized cover, hover image-swap, media chips, tags, love, SOLD ribbon, reveal transition ───────────────────────────────────────────────────────────────────────── */ /* CARD — sharp-edged, image-dominant, editorial (ref: verityandco / Hawcliffe). Flat white surface, no rounding, restrained shadow; the image does the work. */ .ikx-card { position: relative; background: var(--ikx-paper-2); overflow: hidden; cursor: pointer; border: 0; box-shadow: 0 1px 2px rgba(14,14,17,0.04); transition: transform .5s var(--ikx-ease), box-shadow .5s var(--ikx-ease); /* Staggered reveal-on-scroll: start state. JS sets --ikx-i (0..5) per card and toggles .is-in via IntersectionObserver. */ opacity: 0; transform: translateY(28px); transition-delay: 0s; will-change: transform, opacity; } .ikx-card.is-in { opacity: 1; transform: translateY(0); transition: transform .7s var(--ikx-ease), opacity .7s var(--ikx-ease); transition-delay: calc(var(--ikx-i, 0) * 90ms); } .ikx-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -26px rgba(14,14,17,0.4); } .ikx-card:focus-visible { outline: 2px solid var(--ikx-orange); outline-offset: 2px; } /* Cover — image-DOMINANT (tall), sharp corners. */ .ikx-card-cover { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: #e9eef4; } .ikx-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ikx-ease); backface-visibility: hidden; } .ikx-card-img--hover { opacity: 0; } /* No image animation on hover (matches the reference site — images are static). The 2nd image simply cross-fades in; no scale/zoom. */ .ikx-card:hover .ikx-card-img--base { opacity: 0; } .ikx-card:hover .ikx-card-img--hover { opacity: 1; } .ikx-card.no-hover-swap:hover .ikx-card-img--base { opacity: 1; } .ikx-card-cover--empty { background: linear-gradient(180deg, #d9dfe8, #c3ccd8); } .ikx-card-cover-empty-art { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.7); } .ikx-card-cover-empty-art svg { width: 54px; height: 54px; opacity: .85; } /* Gradient scrim so chips/price read on any image. */ .ikx-card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,17,0.28) 0%, transparent 26%, transparent 58%, rgba(14,14,17,0.55) 100%); pointer-events: none; } /* Purpose + SOLD ribbon (top-left) */ .ikx-card-tags-tl { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 7px; flex-wrap: wrap; max-width: calc(100% - 64px); } .ikx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ikx-tag svg { width: 12px; height: 12px; } .ikx-tag--purpose { background: rgba(255,255,255,0.95); color: var(--ikx-ink-2); } .ikx-tag--rent { background: rgba(86,196,248,0.95); color: #06354a; } .ikx-tag--sold { background: var(--ikx-sold); color: #fff; letter-spacing: 0.1em; } .ikx-tag--cat { background: rgba(255,255,255,0.95); color: var(--ikx-ink-2); } .ikx-tag--ptype { background: rgba(14,14,17,0.8); color: #fff; } /* Media-type chips (video / slideshow / staging / 360) — top-right cluster */ .ikx-card-media-chips { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; } .ikx-mchip { width: 30px; height: 30px; border-radius: 0; display: grid; place-items: center; background: rgba(14,14,17,0.62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px -6px rgba(0,0,0,0.5); position: relative; } .ikx-mchip svg { width: 15px; height: 15px; } .ikx-mchip[data-n]::after { content: attr(data-n); position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ikx-orange); color: #fff; font-size: 0.6rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .ikx-mchip--360 { background: rgba(245,130,32,0.85); } /* Love heart — bottom-right of cover (ref: Image 1 — clean outlined heart in a soft frosted rounded-square frame). Scoped override of the shared .ikh-love-btn so only the experience cards get this look; the global button is untouched. */ .ikx-card-cover .ikh-love-btn { top: auto; bottom: 0; right: 0; z-index: 4; width: 52px; height: 52px; border-radius: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.42); background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,255,255,.11) 54%, rgba(255,255,255,.04)); -webkit-backdrop-filter: blur(18px) saturate(190%) contrast(108%); backdrop-filter: blur(18px) saturate(190%) contrast(108%); box-shadow: inset 1px 0 0 rgba(255,255,255,.30), inset 0 1px 0 rgba(255,255,255,.55), -8px 0 22px rgba(14,14,17,.05); transition: background .22s var(--ikx-ease), color .2s var(--ikx-ease), box-shadow .22s var(--ikx-ease); } .ikx-card-cover .ikh-love-btn .ikh-heart-glyph { width: 22px; height: 22px; } .ikx-card-cover .ikh-love-btn:hover { background: linear-gradient(145deg, rgba(255,255,255,.50), rgba(255,255,255,.17) 54%, rgba(255,255,255,.07)); transform: none; box-shadow: inset 1px 0 0 rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.68), -9px 0 24px rgba(14,14,17,.07); } /* 👁 Watch eye — 2026-07 (user request): sits on the cover DIRECTLY ABOVE the heart, as its visual twin. Scoped override of the shared .ikh-watch-btn (whose default is a floating round pill top-right) so only the experience cards get the flush frosted-square treatment; the global button and the media studio's inline "Watching" pill are untouched. Together the two form one bottom-right control rail: eye on top, heart below, 1px hairline seam. */ .ikx-card-cover .ikh-watch-btn { top: auto; bottom: 52px; /* exactly one heart-height up — flush stack */ right: 0; z-index: 4; width: 52px; height: 52px; border-radius: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.42); border-bottom: 1px solid rgba(255, 255, 255, 0.34); background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,255,255,.11) 54%, rgba(255,255,255,.04)); -webkit-backdrop-filter: blur(18px) saturate(190%) contrast(108%); backdrop-filter: blur(18px) saturate(190%) contrast(108%); box-shadow: inset 1px 0 0 rgba(255,255,255,.30), inset 0 1px 0 rgba(255,255,255,.55), -8px 0 22px rgba(14,14,17,.05); transition: background .22s var(--ikx-ease), color .2s var(--ikx-ease), box-shadow .22s var(--ikx-ease); } .ikx-card-cover .ikh-watch-btn .ikh-eye-glyph { width: 24px; height: 24px; } .ikx-card-cover .ikh-watch-btn:hover { background: linear-gradient(145deg, rgba(255,255,255,.50), rgba(255,255,255,.17) 54%, rgba(255,255,255,.07)); transform: none; box-shadow: inset 1px 0 0 rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.68), -9px 0 24px rgba(14,14,17,.07); } /* Body — editorial, generous, sharp (ref: verityandco / Hawcliffe). */ .ikx-card-body { padding: 18px 18px 16px; } /* Row 1: address (left) + price (right) on one line (the property name is gone; address is lifted to the top). */ .ikx-card-headrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .ikx-card-addr { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ikx-muted); min-width: 0; } .ikx-card-addr svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--ikx-orange); } .ikx-card-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* PRICE — dominant, right-aligned, in the editorial heading face (matches site). Crypto mark is the SAME size as the amount and pipe-separated. */ .ikx-card-price { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; font-family: var(--ikx-font); font-weight: 800; font-size: 0.8rem; letter-spacing: -0.01em; color: var(--ikx-ink); line-height: 1.05; white-space: nowrap; } .ikx-card-price .ikx-price-period { font-size: 0.74rem; font-weight: 600; color: var(--ikx-muted); font-family: var(--ikx-font); } .ikx-card-price .ikx-price-sep { font-weight: 300; color: var(--ikx-line-2); } .ikx-card-price .ikx-price-crypto { font-size: 1em; font-weight: 700; color: var(--ikx-orange); } /* Divider after the head row. */ .ikx-card-rule { border: 0; border-top: 1px solid var(--ikx-line); margin: 14px 0; } /* Row 2: feature icons in ONE row. */ .ikx-card-feats { display: flex; align-items: center; gap: 22px; min-height: 22px; } .ikx-feat-item { display: inline-flex; align-items: center; gap: 8px; } .ikx-feat-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--ikx-ink-2); } .ikx-feat-ico svg { width: 22px; height: 22px; stroke-width: 1.5; } .ikx-feat-val { font-size: 0.9rem; font-weight: 700; color: var(--ikx-ink); } /* Row 3: title + description. Title in the editorial heading face; description clamped to exactly 2 lines then ellipsis. The card grows to fit. */ .ikx-card-about { margin-top: 16px; } .ikx-card-title { margin: 0 0 6px; font-weight: 700; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ikx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ikx-card-desc { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ikx-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Lister STRIP — the profile photo / agency logo sits FLUSH in the card's bottom-left corner (mirroring the heart in the image's bottom-right). The text clears it via padding; the strip has no own padding on the avatar side. */ .ikx-card-strip { position: relative; display: flex; align-items: center; gap: 12px; margin: 16px -18px -16px; /* bleed to the card edges (cancels body padding) */ padding: 0 18px 0 0; min-height: 56px; border-top: 1px solid var(--ikx-line); } .ikx-strip-avatar { flex: 0 0 auto; align-self: stretch; width: 56px; border-radius: 0; overflow: hidden; background: linear-gradient(135deg, var(--ikx-cyan), var(--ikx-orange)); display: grid; place-items: center; } .ikx-strip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ikx-strip-initials { color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: 0.01em; font-family: var(--ikx-font-head); } .ikx-strip-text { min-width: 0; line-height: 1.25; display: flex; flex-direction: column; padding: 8px 0; } .ikx-strip-name { font-size: 0.9rem; font-weight: 700; color: var(--ikx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ikx-font-head); } .ikx-strip-role { font-size: 0.64rem; color: var(--ikx-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; } .ikx-strip-ref { margin-left: auto; font-size: 0.64rem; font-weight: 700; color: var(--ikx-muted-2); font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; flex: 0 0 auto; } /* ───────────────────────────────────────────────────────────────────────── 5. PAGINATION + DOTTED RAIL (pellmell) ───────────────────────────────────────────────────────────────────────── */ .ikx-pager { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(30px, 4vw, 56px); } .ikx-loadmore { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; border: 1px solid var(--ikx-ink-2); background: transparent; color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all .22s var(--ikx-ease); } .ikx-loadmore:hover { background: var(--ikx-ink-2); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(14,14,17,0.6); } .ikx-loadmore:disabled { opacity: .5; cursor: default; transform: none; } .ikx-loadmore .ikx-loadmore-spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ikx-spin .7s linear infinite; display: none; } .ikx-loadmore.is-busy .ikx-loadmore-spin { display: inline-block; } .ikx-loadmore.is-busy .ikx-loadmore-label { opacity: .7; } @keyframes ikx-spin { to { transform: rotate(360deg); } } .ikx-pager-progress { font-size: 0.82rem; font-weight: 600; color: var(--ikx-muted); } /* Dotted scroll rail — fixed to the right edge of the overlay, tracks how far through the loaded pages you are (pellmell). One dot per page. */ .ikx-dotrail { position: absolute; top: 50%; right: clamp(8px, 1.2vw, 18px); transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 10px; padding: 10px 6px; } .ikx-dotrail[hidden] { display: none; } .ikx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ikx-line-2); border: 0; cursor: pointer; padding: 0; transition: transform .25s var(--ikx-ease), background .25s var(--ikx-ease), height .25s var(--ikx-ease); position: relative; } .ikx-dot::before { content: ''; position: absolute; inset: -7px; } /* hit area */ .ikx-dot:hover { background: var(--ikx-muted); transform: scale(1.3); } .ikx-dot.is-on { background: var(--ikx-orange); height: 22px; border-radius: 999px; } /* ── Empty / error inside the experience (rare; the no-listings case normally uses the #lpsr peek panel, but if a filtered search returns nothing while the overlay is open we show this) ── */ .ikx-empty { text-align: center; padding: clamp(50px, 9vw, 110px) 20px; max-width: 460px; margin: 0 auto; } .ikx-empty-art { width: 96px; height: 96px; margin: 0 auto 18px; } .ikx-empty h3 { font-size: 1.35rem; font-weight: 800; color: var(--ikx-ink); margin: 0 0 8px; letter-spacing: -0.01em; } .ikx-empty p { color: var(--ikx-muted); margin: 0 0 22px; font-size: 0.95rem; line-height: 1.5; } .ikx-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .ikx-empty-btn { padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; cursor: pointer; font-family: var(--ikx-font); transition: all .18s var(--ikx-ease); } .ikx-empty-btn--primary { background: linear-gradient(135deg, var(--ikx-orange), var(--ikx-orange-2)); color: #fff; border: 0; box-shadow: 0 12px 26px -12px rgba(245,130,32,0.8); } .ikx-empty-btn--primary:hover { transform: translateY(-2px); } .ikx-empty-btn--ghost { background: transparent; color: var(--ikx-ink-2); border: 1px solid var(--ikx-line-2); } .ikx-empty-btn--ghost:hover { border-color: var(--ikx-ink-2); } /* Skeleton cards while first page loads */ .ikx-skel { border-radius: var(--ikx-radius); overflow: hidden; border: 1px solid var(--ikx-line); background: var(--ikx-paper-2); } .ikx-skel-cover { aspect-ratio: 4/3; background: linear-gradient(100deg, #eef2f6 30%, #f6f9fc 50%, #eef2f6 70%); background-size: 200% 100%; animation: ikx-shimmer 1.3s linear infinite; } .ikx-skel-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; } .ikx-skel-line { height: 12px; border-radius: 6px; background: linear-gradient(100deg, #eef2f6 30%, #f6f9fc 50%, #eef2f6 70%); background-size: 200% 100%; animation: ikx-shimmer 1.3s linear infinite; } .ikx-skel-line.w70 { width: 70%; } .ikx-skel-line.w40 { width: 40%; } .ikx-skel-line.w90 { width: 90%; } @keyframes ikx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ───────────────────────────────────────────────────────────────────────── 6. RESPONSIVE — tablet + MOBILE (native-app feel; R2.2.10) ───────────────────────────────────────────────────────────────────────── */ /* Tablet: narrower rail */ @media (max-width: 1100px) { :root { --ikx-rail-w: 280px; } .ikx-spotlight { grid-template-columns: 1fr; } .ikx-grid { grid-template-columns: repeat(2, 1fr); } } /* MOBILE: the LEFT rail collapses; filters move to a horizontal chip strip that sticks under the topbar, and tapping one opens a BOTTOM SHEET. The grid goes single/double column with native momentum + snap. (property24 twist: desktop left-drawer → mobile sticky-top + sheet.) */ @media (max-width: 760px) { /* On phones, one-viewport horizontal layout isn't practical — restore normal vertical scrolling so the rail, cards and thumb strip stack and scroll. */ .ikx-scroll { overflow-y: auto; overflow-x: hidden; } .ikx-scroll > .ikx-body { height: auto; } .ikx-rail { height: auto; max-height: none; overflow-y: visible; } .ikx-results { height: auto; overflow: visible; display: block; } .ikx-results .ikx-track-wrap { display: block; } /* Thumbnail strip is a horizontal-track companion; on a vertical mobile stack it's redundant, so hide it. */ .ikx-thumbstrip { display: none !important; } .ikx-results .ikx-card .ikx-card-cover { aspect-ratio: 4 / 3; min-height: 0; flex: none; } .ikx-results .ikx-grid .ikx-card { height: auto; } /* Title flows inline on mobile rather than absolute-centered (avoids overlap with the logo and close button in the narrow header). */ .ikx-titlewrap { position: static; transform: none; left: auto; max-width: none; align-items: flex-start; text-align: left; margin-right: auto; flex: 1 1 auto; min-width: 0; } .ikx-sort { margin-left: 0; } /* Respect the iOS notch / status-bar area: the fixed overlay can extend under it, so pad the topbar by the top + side safe-area insets. */ .ikx-topbar { padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left)); gap: 10px; } .ikx-brandmark { height: 34px; padding: 0; flex: 0 0 auto; } .ikx-brandmark-img { /* Landing header serves 40px at phone widths (site.css ≤576) — mirror it. Box stays 34px; overspill rides the 10px paddings. */ height: 40px; } .ikx-title { font-size: 0.95rem; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .ikx-sort-btn .ikx-sort-label, .ikx-sort-btn .ikx-sort-label-pre { display: none; } .ikx-sort-btn { padding: 9px 11px; } .ikx-body { grid-template-columns: 1fr; } /* Rail styling (collapsible filters + 2-up grid) is handled in the PREMIUM MOBILE CHROME block at the end of this file — single source of truth. */ /* The drawer becomes a BOTTOM SHEET */ .ikx-drawer { position: fixed; inset: auto 0 0 0; left: 0; width: 100%; max-width: 100%; height: auto; max-height: 82vh; border-right: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -30px 60px -30px rgba(14,14,17,0.5); transform: translateY(100%); padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); z-index: 1400; } .ikx-drawer.is-open { transform: translateY(0); } .ikx-drawer::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 999px; background: var(--ikx-line-2); } .ikx-drawer-scrim { position: fixed; inset: 0; left: 0; z-index: 1399; } .ikx-results { padding: 16px 14px 90px; } /* CRITICAL: the desktop grid is a horizontal flex TRACK. On mobile we make it a true vertical stack — override display so cards flow top-to-bottom and the page scrolls vertically. (grid-template-columns alone does nothing while the element is display:flex, which was the bug.) */ .ikx-grid { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 16px; overflow: visible !important; scroll-snap-type: none; } /* Every card spans the full column width; kill the fixed track widths and the zone-seam border that only make sense horizontally. */ .ikx-grid .ikx-card, .ikx-grid .ikx-card.ikx-card--compact { width: 100% !important; max-width: 100% !important; height: auto !important; flex: 0 0 auto !important; scroll-snap-align: none; } .ikx-grid .ikx-card.ikx-zone-seam { margin-left: 0; border-left: 0; padding-left: 0; } .ikx-card-cover { aspect-ratio: 16/11; } /* Hover-swap is pointer-only; on touch the base image stays (no dead hover) */ .ikx-card:hover { transform: none; box-shadow: 0 2px 10px -6px rgba(14,14,17,0.2); } .ikx-card:active { transform: scale(.99); } .ikx-card:hover .ikx-card-img--base { opacity: 1; transform: none; } .ikx-card:hover .ikx-card-img--hover { opacity: 0; } /* Dotted rail hidden on mobile (load-more progress is enough) */ .ikx-dotrail { display: none; } } /* Larger phones / small tablets: a 2-up wrapped grid (works with the flex layout we force on mobile — row + wrap + ~half-width cards). */ @media (min-width: 540px) and (max-width: 760px) { .ikx-grid { flex-direction: row !important; flex-wrap: wrap !important; } .ikx-grid .ikx-card, .ikx-grid .ikx-card.ikx-card--compact { width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; } .ikx-card-cover { aspect-ratio: 4/3; } } /* ───────────────────────────────────────────────────────────────────────── 7. MOTION SAFETY ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ikx, .ikx-card, .ikx-card-img, .ikx-drawer, .ikx-sort-menu, .ikx-spot-panel, .ikx-loadmore, .ikx-close, .ikx-railitem, .ikx-dot, .ikx-topbar, .floating-engagement { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .ikx-card { opacity: 1; transform: none; } .ikx-card.is-in { transition-delay: 0s !important; } .ikx-card:hover { transform: none; } } /* ============================================================================ 8. DETAIL OVERLAY + WORLD-CLASS MEDIA VIEWER (Phase 4 visual layer) ---------------------------------------------------------------------------- A premium, full-takeover detail surface with maximize/restore + true full-screen (R2.2.7). Sticky media column on the left, info scrolls on the right (oddritual). Tabbed media viewer supports image / video / slideshow / staging / 360 (R2.2.9), with verityandco-style video controls + thumbnail toggle. Mounted at level so it sits above the grid overlay. ============================================================================ */ .ikxd { position: fixed; inset: 0; z-index: 2000; /* above the grid overlay (1200), below sign-in (3000) */ display: flex; align-items: center; justify-content: center; padding: clamp(0px, 2vw, 34px); opacity: 0; visibility: hidden; transition: opacity .4s var(--ikx-ease), visibility 0s linear .4s; } .ikxd.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ikx-ease), visibility 0s; } .ikxd[hidden] { display: none; } .ikxd-backdrop { position: absolute; inset: 0; background: rgba(8,9,12,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ikxd-shell { position: relative; width: min(1280px, 100%); height: min(92vh, 920px); background: var(--ikx-paper-2); border-radius: var(--ikx-radius); overflow: hidden; box-shadow: var(--ikx-shadow-pop); display: grid; grid-template-columns: 1.35fr 1fr; transform: translateY(26px) scale(.97); opacity: 0; transition: transform .5s var(--ikx-ease), opacity .4s var(--ikx-ease), width .4s var(--ikx-ease), height .4s var(--ikx-ease), border-radius .4s var(--ikx-ease); } .ikxd.is-open .ikxd-shell { transform: translateY(0) scale(1); opacity: 1; } /* Full-screen (maximize) — fills the viewport edge to edge */ .ikxd.is-max .ikxd-shell { width: 100%; height: 100%; border-radius: 0; } /* Control cluster (top-right of shell): maximize/restore, close */ .ikxd-controls { position: absolute; top: 14px; right: 14px; z-index: 12; display: flex; gap: 8px; } .ikxd-cbtn { width: 42px; height: 42px; border-radius: 12px; border: 0; background: rgba(255,255,255,0.92); color: var(--ikx-ink-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.4); transition: transform .14s var(--ikx-ease), background .18s var(--ikx-ease), color .18s var(--ikx-ease); } .ikxd-cbtn:hover { background: #fff; transform: translateY(-1px); } .ikxd-cbtn--close:hover { color: var(--ikx-sold); } .ikxd-cbtn svg { width: 19px; height: 19px; } /* ── LEFT: sticky media stage ── */ .ikxd-media { position: relative; background: #0b0c0f; display: flex; flex-direction: column; min-height: 0; } .ikxd-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; } .ikxd-stage-pane { grid-area: 1 / 1; position: relative; opacity: 0; pointer-events: none; transition: opacity .45s var(--ikx-ease); display: flex; align-items: center; justify-content: center; } .ikxd-stage-pane.is-on { opacity: 1; pointer-events: auto; } /* Image pane */ .ikxd-img { width: 100%; height: 100%; object-fit: contain; background: #0b0c0f; } .ikxd-img-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .ikxd-imgcounter { position: absolute; left: 16px; bottom: 16px; z-index: 4; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ikxd-imgnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.9); color: var(--ikx-ink-2); display: grid; place-items: center; cursor: pointer; transition: transform .14s var(--ikx-ease), background .18s var(--ikx-ease); box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5); } .ikxd-imgnav:hover { background: #fff; } .ikxd-imgnav--prev { left: 14px; } .ikxd-imgnav--next { right: 14px; } .ikxd-imgnav:active { transform: translateY(-50%) scale(.92); } .ikxd-imgnav svg { width: 20px; height: 20px; } /* Video pane (verityandco-style controls) */ .ikxd-video-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #000; } .ikxd-video { width: 100%; height: 100%; object-fit: contain; background: #000; } .ikxd-vbig { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 18px 40px -16px rgba(0,0,0,0.7); transition: transform .2s var(--ikx-ease), background .2s var(--ikx-ease), opacity .3s var(--ikx-ease); } .ikxd-vbig:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,0.26); } .ikxd-vbig svg { width: 34px; height: 34px; margin-left: 4px; } .ikxd-video-wrap.is-playing .ikxd-vbig { opacity: 0; pointer-events: none; } .ikxd-vbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; background: linear-gradient(0deg, rgba(0,0,0,0.72), transparent); opacity: 0; transform: translateY(8px); transition: opacity .25s var(--ikx-ease), transform .25s var(--ikx-ease); } .ikxd-video-wrap:hover .ikxd-vbar, .ikxd-video-wrap.is-paused .ikxd-vbar, .ikxd-video-wrap.show-bar .ikxd-vbar { opacity: 1; transform: translateY(0); } .ikxd-vbtn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.12); color: #fff; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: background .16s var(--ikx-ease); } .ikxd-vbtn:hover { background: rgba(255,255,255,0.24); } .ikxd-vbtn svg { width: 17px; height: 17px; } .ikxd-vtime { color: #fff; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; opacity: .9; } .ikxd-vseek { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.22); cursor: pointer; position: relative; } .ikxd-vseek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--ikx-orange); } .ikxd-vseek-knob { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.5); left: 0; } /* Slideshow pane (Ken Burns) */ .ikxd-slideshow { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0b0c0f; } .ikxd-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s var(--ikx-ease); animation: ikxd-kenburns 7s ease-in-out infinite alternate; } .ikxd-slide.is-on { opacity: 1; } @keyframes ikxd-kenburns { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.12) translate(-1.5%, -1.5%); } } /* Slideshow title overlay (lower-third style) */ .ikxd-ss-title { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; padding: 0 6%; font-family: 'Outfit', sans-serif; font-size: clamp(1.35rem, 4vw, 2.7rem); font-weight: 800; line-height: 1.12; color: #fff; letter-spacing: 0.01em; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.72), 0 1px 3px rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 3; } .ikxd-ss-meta { position: absolute; left: 16px; bottom: 16px; z-index: 4; display: flex; gap: 8px; align-items: center; color: #fff; } .ikxd-ss-chip { background: rgba(0,0,0,0.55); padding: 6px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; } .ikxd-ss-chip svg { width: 13px; height: 13px; } /* Staging pane (before/after compare slider) */ .ikxd-compare { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0b0c0f; } .ikxd-compare-after, .ikxd-compare-before { position: absolute; inset: 0; background-size: cover; background-position: center; } .ikxd-compare-before { clip-path: inset(0 50% 0 0); } .ikxd-compare-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); z-index: 3; transform: translateX(-50%); } .ikxd-compare-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6); cursor: ew-resize; z-index: 4; } .ikxd-compare-handle svg { width: 22px; height: 22px; color: var(--ikx-ink-2); } .ikxd-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 5; } .ikxd-compare-tag { position: absolute; top: 14px; z-index: 4; background: rgba(0,0,0,0.6); color: #fff; padding: 5px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .ikxd-compare-tag--before { left: 14px; } .ikxd-compare-tag--after { right: 14px; background: rgba(245,130,32,0.85); } /* 360 pane (pannable drag) */ .ikxd-360 { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0b0c0f; cursor: grab; } .ikxd-360.is-grabbing { cursor: grabbing; } .ikxd-360-img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; will-change: transform; user-select: none; -webkit-user-drag: none; } .ikxd-360-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; background: rgba(0,0,0,0.55); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; display: inline-flex; gap: 7px; align-items: center; pointer-events: none; transition: opacity .4s var(--ikx-ease); } .ikxd-360-hint svg { width: 15px; height: 15px; } /* ── Media type TABS (bottom of stage) + THUMBNAIL TOGGLE (verityandco) ── */ .ikxd-mediabar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0e0f12; border-top: 1px solid rgba(255,255,255,0.06); } .ikxd-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; } .ikxd-tabs::-webkit-scrollbar { display: none; } .ikxd-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(255,255,255,0.72); font-family: var(--ikx-font); font-weight: 700; font-size: 0.8rem; cursor: pointer; white-space: nowrap; transition: all .18s var(--ikx-ease); flex: 0 0 auto; } .ikxd-tab svg { width: 15px; height: 15px; } .ikxd-tab:hover { color: #fff; border-color: rgba(255,255,255,0.28); } .ikxd-tab.is-on { background: #fff; color: var(--ikx-ink); border-color: #fff; } .ikxd-tab .ikxd-tab-n { font-size: 0.68rem; opacity: .7; } .ikxd-thumbtoggle { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: transparent; color: rgba(255,255,255,0.8); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; transition: all .16s var(--ikx-ease); } .ikxd-thumbtoggle:hover { color: #fff; border-color: rgba(255,255,255,0.32); } .ikxd-thumbtoggle.is-on { background: rgba(245,130,32,0.9); border-color: transparent; color: #fff; } .ikxd-thumbtoggle svg { width: 17px; height: 17px; } /* Thumbnail strip (toggleable) */ .ikxd-thumbs { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 14px; background: #0b0c0f; overflow-x: auto; max-height: 96px; transition: max-height .3s var(--ikx-ease), padding .3s var(--ikx-ease), opacity .3s var(--ikx-ease); scrollbar-width: thin; } .ikxd-thumbs.is-hidden { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; } .ikxd-thumb { flex: 0 0 auto; width: 96px; height: 66px; border-radius: 9px; overflow: hidden; cursor: pointer; position: relative; border: 2px solid transparent; opacity: .65; transition: opacity .18s var(--ikx-ease), border-color .18s var(--ikx-ease); } .ikxd-thumb:hover { opacity: 1; } .ikxd-thumb.is-on { opacity: 1; border-color: var(--ikx-orange); } .ikxd-thumb img { width: 100%; height: 100%; object-fit: cover; } .ikxd-thumb .ikxd-thumb-badge { position: absolute; bottom: 4px; right: 4px; width: 18px; height: 18px; border-radius: 5px; background: rgba(0,0,0,0.7); color: #fff; display: grid; place-items: center; } .ikxd-thumb .ikxd-thumb-badge svg { width: 11px; height: 11px; } /* ── RIGHT: scrolling info column (oddritual: media sticky, info scrolls) ── */ .ikxd-info { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 2.4vw, 38px); scrollbar-width: thin; } .ikxd-info-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .ikxd-itag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; padding: 6px 11px; border-radius: 999px; letter-spacing: 0.02em; } .ikxd-itag svg { width: 12px; height: 12px; } .ikxd-itag--purpose { background: rgba(245,130,32,0.12); color: var(--ikx-orange); } .ikxd-itag--cat { background: rgba(86,196,248,0.14); color: #0b6a8f; } .ikxd-itag--sold { background: var(--ikx-sold); color: #fff; text-transform: uppercase; } .ikxd-price { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ikx-ink); line-height: 1; margin-bottom: 6px; } .ikxd-price .ikxd-price-period { font-size: 1rem; font-weight: 600; color: var(--ikx-muted); } .ikxd-name { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ikx-ink-2); margin: 8px 0 6px; } .ikxd-loc { display: flex; align-items: center; gap: 7px; color: var(--ikx-muted); font-size: 0.92rem; margin-bottom: 18px; } .ikxd-loc svg { width: 16px; height: 16px; color: var(--ikx-orange); } /* Spec cells — editorial bordered row (ref: feature-icon strip). Connected cells with hairline dividers, monochrome icon on top, count, label below. */ .ikxd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 0; margin-bottom: 24px; border: 1px solid var(--ikx-line); border-radius: 14px; overflow: hidden; background: var(--ikx-paper-2); } .ikxd-speccell { padding: 15px 10px 13px; text-align: center; border-right: 1px solid var(--ikx-line); } .ikxd-speccell:last-child { border-right: 0; } .ikxd-speccell svg { width: 22px; height: 22px; color: var(--ikx-ink-2); margin-bottom: 8px; stroke-width: 1.6; } .ikxd-speccell b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ikx-ink); line-height: 1; margin-bottom: 3px; } .ikxd-speccell span { font-size: 0.66rem; color: var(--ikx-muted); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .ikxd-section-h { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ikx-muted-2); margin: 20px 0 10px; } .ikxd-desc { color: #3a4250; font-size: 0.95rem; line-height: 1.65; } /* Feature presentation (cobourg-style within a property) */ .ikxd-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .ikxd-feat { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px; background: var(--ikx-paper-2); border: 1px solid var(--ikx-line); font-size: 0.85rem; font-weight: 600; color: var(--ikx-ink-2); } .ikxd-feat svg { width: 16px; height: 16px; color: var(--ikx-ink-2); flex: 0 0 auto; opacity: .55; stroke-width: 1.7; } /* Lister card */ .ikxd-lister { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(245,130,32,0.06), rgba(86,196,248,0.06)); border: 1px solid var(--ikx-line); } .ikxd-lister-avatar { width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: linear-gradient(135deg, var(--ikx-cyan), var(--ikx-orange)); color: #fff; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); } .ikxd-lister-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ikxd-lister-meta { min-width: 0; } .ikxd-lister-name { font-weight: 700; color: var(--ikx-ink); font-size: 0.96rem; } .ikxd-lister-role { font-size: 0.78rem; color: var(--ikx-muted); font-weight: 600; } .ikxd-lister-ref { margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; color: var(--ikx-muted-2); font-weight: 700; } /* Action row (love + share) */ .ikxd-actions { display: flex; gap: 10px; margin-top: 22px; position: sticky; bottom: 0; padding-top: 14px; background: linear-gradient(0deg, var(--ikx-paper-2) 70%, transparent); } .ikxd-act { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border-radius: 14px; font-family: var(--ikx-font); font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: all .18s var(--ikx-ease); } .ikxd-act svg { width: 18px; height: 18px; } .ikxd-act--share { background: var(--ikx-ink-2); color: #fff; border: 0; } .ikxd-act--share:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(14,14,17,0.6); } /* The love button in the detail uses the shared .ikh-love-btn.is-static, themed to fill the row */ .ikxd-actions .ikh-love-btn.is-static { flex: 0 0 auto; padding: 14px 18px; border-radius: 14px; } /* 👁 + ♥ track stack (2026-07) — the eye sits directly ABOVE the heart at the head of the action row. The two pills split the row's height between them; higher-specificity overrides trim the standalone pill padding so the stacked pair keeps the bar compact. */ .ikxd-track-stack { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; justify-content: center; } .ikxd-actions .ikxd-track-stack .ikh-watch-btn.is-static, .ikxd-actions .ikxd-track-stack .ikh-love-btn.is-static { flex: 1 1 auto; padding: 9px 16px; border-radius: 12px; justify-content: center; } .ikxd-loading { display: grid; place-items: center; height: 100%; width: 100%; color: var(--ikx-muted); } .ikxd-spin { width: 40px; height: 40px; border: 3px solid var(--ikx-line-2); border-top-color: var(--ikx-orange); border-radius: 50%; animation: ikx-spin .8s linear infinite; } /* ── Detail: MOBILE (stacked, bottom-sheet feel) ── */ @media (max-width: 860px) { .ikxd { padding: 0; } .ikxd-shell { grid-template-columns: 1fr; width: 100%; height: 100%; border-radius: 0; max-height: 100%; } .ikxd.is-max .ikxd-shell { border-radius: 0; } .ikxd-media { min-height: 46vh; max-height: 56vh; } .ikxd-info { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); } .ikxd-features { grid-template-columns: 1fr; } .ikxd-thumbs { max-height: 80px; } .ikxd-thumb { width: 80px; height: 56px; } /* Controls sit clear of the iOS notch when the overlay is edge-to-edge. */ .ikxd-controls { top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); } /* Comfortable touch targets in the media bar. */ .ikxd-vbtn { width: 42px; height: 42px; } .ikxd-thumbtoggle { width: 42px; height: 42px; } .ikxd-tab { padding: 11px 14px; } } /* Short landscape phones: cap the media so the scrolling info stays reachable (otherwise 46–56vh of media leaves almost nothing for the text). */ @media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) { .ikxd-shell { grid-template-columns: 1.2fr 1fr; } .ikxd-media { min-height: 0; max-height: none; } } @media (prefers-reduced-motion: reduce) { .ikxd, .ikxd-shell, .ikxd-stage-pane, .ikxd-slide, .ikxd-vbar, .ikxd-thumbs { transition-duration: .01ms !important; animation: none !important; } } /* ───────────────────────────────────────────────────────────────────────── 9. DRAWER FORM CONTROLS (filter fields inside the rail drawer / bottom sheet) ───────────────────────────────────────────────────────────────────────── */ .ikx-fld-l { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ikx-muted); margin: 0 0 7px; } .ikx-fld { width: 100%; padding: 13px 15px; border: 1px solid var(--ikx-line-2); border-radius: 12px; font-family: var(--ikx-font); font-size: 0.95rem; color: var(--ikx-ink-2); background: var(--ikx-paper); transition: border-color .18s var(--ikx-ease), box-shadow .18s var(--ikx-ease); } .ikx-fld:focus { outline: none; border-color: var(--ikx-orange); box-shadow: 0 0 0 3px rgba(245,130,32,0.12); background: #fff; } .ikx-fld-hint { font-size: 0.78rem; color: var(--ikx-muted-2); margin: 8px 2px 0; } .ikx-pillrow { display: flex; flex-wrap: wrap; gap: 8px; } .ikx-pill { padding: 10px 16px; border: 1px solid var(--ikx-line-2); border-radius: 999px; background: var(--ikx-paper); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: all .16s var(--ikx-ease); } .ikx-pill:hover { border-color: var(--ikx-orange); } .ikx-pill.is-on { background: var(--ikx-ink-2); color: #fff; border-color: var(--ikx-ink-2); } /* ============================================================================ LIQUID-GLASS FALLBACK Browsers without backdrop-filter would render the translucent surfaces washed out (page showing straight through). Give them a solid, still-premium surface instead. Covers the SA long-tail device/browser base. ============================================================================ */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .ikx-card { background: var(--ikx-paper-2); } .ikx-railitem { background: var(--ikx-paper-2); } .ikx-card-cover .ikh-love-btn, .ikx-card-cover .ikh-watch-btn { background: rgba(255,255,255,.84); } .ikx-topbar { background: rgba(246,248,251,0.98); } } /* ════════════════════════════════════════════════════════════════════════════ HORIZONTAL TRACK + DUAL-ZONE CARDS + ARROWS + THUMBNAIL STRIP + CUSTOMIZABLE FILTERS + DYNAMIC SEARCH (feature drop) The results grid becomes a horizontal scroller: zone 1 = a few large cards, zone 2 = a denser block of compact cards. Arrows + wheel-to-horizontal + a synchronized thumbnail strip below. All transforms are GPU-friendly. ════════════════════════════════════════════════════════════════════════════ */ /* Track wrapper holds the scroller + the flanking arrows. */ .ikx-track-wrap { position: relative; } /* The grid is now a single horizontal row that scrolls on X. */ .ikx-grid { display: flex; flex-wrap: nowrap; gap: clamp(16px, 1.8vw, 28px); align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 6px; /* Contain horizontal overscroll so it doesn't bounce the page. */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .ikx-grid:focus-visible { outline: 2px solid var(--ikx-orange); outline-offset: 3px; } /* Slim custom scrollbar on the track — kept visible so horizontal overflow is discoverable (the wheel + arrows also scroll it). */ .ikx-grid { scrollbar-width: thin; scrollbar-color: var(--ikx-muted-2) var(--ikx-line); } .ikx-grid::-webkit-scrollbar { height: 10px; } .ikx-grid::-webkit-scrollbar-track { background: var(--ikx-line); } .ikx-grid::-webkit-scrollbar-thumb { background: var(--ikx-muted-2); border-radius: 0; } .ikx-grid::-webkit-scrollbar-thumb:hover { background: var(--ikx-ink-2); } /* ZONE 1 — large cards (first few). Fixed, image-dominant. */ .ikx-grid .ikx-card { flex: 0 0 auto; width: clamp(300px, 30vw, 420px); scroll-snap-align: start; } /* ZONE 2 — compact cards (denser block further along the track). */ .ikx-grid .ikx-card.ikx-card--compact { width: clamp(210px, 20vw, 280px); } .ikx-card--compact .ikx-card-cover { aspect-ratio: 4 / 3; } .ikx-card--compact .ikx-card-body { padding: 12px 13px 12px; } .ikx-card--compact .ikx-card-price { font-size: clamp(1rem, 1.3vw, 1.18rem); } .ikx-card--compact .ikx-card-about { margin-top: 10px; } .ikx-card--compact .ikx-card-title { font-size: 0.96rem; } .ikx-card--compact .ikx-card-desc { -webkit-line-clamp: 1; line-clamp: 1; } .ikx-card--compact .ikx-card-feats { gap: 14px; } .ikx-card--compact .ikx-strip-avatar { width: 44px; } .ikx-card--compact .ikx-card-tags-tl { gap: 5px; } .ikx-card--compact .ikx-tag { padding: 4px 8px; font-size: 0.6rem; } /* Visual seam between zone 1 (large) and zone 2 (compact) so the size change reads as intentional. The first compact card gets .ikx-zone-seam in JS. */ .ikx-grid .ikx-card.ikx-zone-seam { margin-left: clamp(10px, 1.4vw, 22px); border: 1px solid var(--ikx-line); padding-left: clamp(10px, 1.4vw, 22px); } /* Briefly emphasise a card scrolled-to via a thumbnail. */ .ikx-card.is-target { box-shadow: 0 0 0 3px var(--ikx-orange), 0 22px 48px -26px rgba(14,14,17,0.4); } /* Flanking scroll arrows. */ .ikx-trackarrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; display: grid; place-items: center; background: #fff; color: var(--ikx-ink); border: 1px solid var(--ikx-line); border-radius: 0; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(14,14,17,0.4); transition: background .16s var(--ikx-ease), color .16s var(--ikx-ease), transform .16s var(--ikx-ease); } .ikx-trackarrow:hover { background: var(--ikx-ink); color: #fff; } .ikx-trackarrow:active { transform: translateY(-50%) scale(.94); } .ikx-trackarrow svg { width: 22px; height: 22px; } .ikx-trackarrow--left { left: -10px; } .ikx-trackarrow--right { right: -10px; } /* ── Thumbnail strip (every result, active highlighted) ── */ /* Fold header — the strip is now collapsible (state persists per browser). */ .ikx-thumbfold { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 22px; padding: 10px 14px; border: 1px solid var(--ikx-line); border-radius: 14px; background: linear-gradient(135deg, rgba(245,130,32,0.05), rgba(86,196,248,0.04)); font-family: var(--ikx-font); cursor: pointer; text-align: left; transition: border-color .16s var(--ikx-ease), background .16s var(--ikx-ease); } .ikx-thumbfold:hover { border-color: rgba(245,130,32,0.4); } .ikx-thumbfold-main { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.84rem; color: var(--ikx-ink-2); } .ikx-thumbfold-main svg { width: 16px; height: 16px; color: var(--ikx-orange); } .ikx-thumbfold-count { font-size: 0.68rem; font-weight: 800; color: var(--ikx-orange); background: rgba(245,130,32,0.1); border: 1px solid rgba(245,130,32,0.28); border-radius: 999px; padding: 1px 8px; } .ikx-thumbfold-hint { margin-left: auto; font-size: 0.7rem; font-weight: 600; color: var(--ikx-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ikx-thumbfold-chev { display: inline-flex; } .ikx-thumbfold-chev svg { width: 15px; height: 15px; color: var(--ikx-muted); transition: transform .2s var(--ikx-ease); } .ikx-thumbfold.is-open .ikx-thumbfold-chev svg { transform: rotate(90deg); } @media (max-width: 760px) { .ikx-thumbfold-hint { display: none; } } .ikx-thumbstrip { display: flex; gap: 10px; margin-top: 10px; padding: 12px 2px 14px; border-top: 1px solid var(--ikx-line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; max-height: 140px; opacity: 1; transition: max-height .28s var(--ikx-ease), opacity .22s var(--ikx-ease), padding .28s var(--ikx-ease), margin .28s var(--ikx-ease); } /* Collapsed: the strip folds flat but stays in the DOM so sync survives. */ .ikx-thumbstrip.is-collapsed { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; overflow: hidden; pointer-events: none; } /* The card the filmstrip currently points at — a persistent premium ring that moves with the strip in BOTH directions (thumb click and track scroll). */ .ikx-card.is-thumb-active { outline: 2px solid var(--ikx-orange); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(245,130,32,0.10), var(--ikx-shadow-card); } .ikx-thumbstrip::-webkit-scrollbar { height: 6px; } .ikx-thumbstrip::-webkit-scrollbar-thumb { background: var(--ikx-line-2); } .ikx-thumb { position: relative; flex: 0 0 auto; width: 104px; height: 70px; border: 2px solid transparent; border-radius: 0; overflow: hidden; cursor: pointer; background: #e9eef4; padding: 0; opacity: 0.65; transition: opacity .16s var(--ikx-ease), border-color .16s var(--ikx-ease), transform .16s var(--ikx-ease); } .ikx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ikx-thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.7); background: linear-gradient(180deg, #d9dfe8, #c3ccd8); } .ikx-thumb-empty svg { width: 26px; height: 26px; } .ikx-thumb-price { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px; font-size: 0.6rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.72)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ikx-thumb:hover { opacity: 1; transform: translateY(-2px); } .ikx-thumb.is-active { opacity: 1; border-color: var(--ikx-orange); } /* ════════════════════════════════════════════════════════════════════════════ DYNAMIC SEARCH + CUSTOM FILTER UI (rail) ════════════════════════════════════════════════════════════════════════════ */ .ikx-railsearch { position: relative; display: flex; align-items: center; margin-bottom: 12px; } .ikx-railsearch-ico { position: absolute; left: 12px; display: grid; place-items: center; color: var(--ikx-muted-2); pointer-events: none; } .ikx-railsearch-ico svg { width: 17px; height: 17px; } .ikx-railsearch-input { width: 100%; padding: 11px 36px 11px 38px; border: 1px solid var(--ikx-line); border-radius: 0; background: var(--ikx-paper-2); font-family: var(--ikx-font); font-size: 0.9rem; color: var(--ikx-ink); transition: border-color .16s var(--ikx-ease), box-shadow .16s var(--ikx-ease); } .ikx-railsearch-input:focus { outline: none; border-color: var(--ikx-orange); box-shadow: 0 0 0 3px rgba(245,130,32,0.14); } .ikx-railsearch-clear { position: absolute; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ikx-muted-2); cursor: pointer; } .ikx-railsearch-clear:hover { color: var(--ikx-ink); } .ikx-railsearch-clear svg { width: 14px; height: 14px; } .ikx-rail-list { display: flex; flex-direction: column; gap: 9px; } /* Remove (×) affordance on optional rail items. */ .ikx-railremove { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--ikx-muted-2); border-radius: 0; transition: color .14s var(--ikx-ease), background .14s var(--ikx-ease); } .ikx-railremove:hover { color: #fff; background: var(--ikx-sold); } .ikx-railremove svg { width: 13px; height: 13px; } /* Add-filter button + actions. */ .ikx-rail-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; } .ikx-rail-addfilter { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 1px dashed var(--ikx-line-2); border-radius: 0; background: transparent; color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 700; font-size: 0.86rem; cursor: pointer; transition: border-color .16s var(--ikx-ease), color .16s var(--ikx-ease), background .16s var(--ikx-ease); } .ikx-rail-addfilter:hover { border-color: var(--ikx-orange); color: var(--ikx-orange); } .ikx-rail-addfilter svg { width: 16px; height: 16px; } .ikx-rail-addfilter.is-full { opacity: 0.5; cursor: not-allowed; border-style: solid; } .ikx-rail-actrow { display: flex; gap: 10px; } /* Add-filter picker sheet. */ .ikx-addsheet { margin-top: 10px; border: 1px solid var(--ikx-line); background: #fff; box-shadow: 0 18px 44px -22px rgba(14,14,17,0.4); animation: ikx-addsheet-in .18s var(--ikx-ease); } @keyframes ikx-addsheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .ikx-addsheet-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ikx-muted-2); border-bottom: 1px solid var(--ikx-line); } .ikx-addsheet-h span { color: var(--ikx-orange); } .ikx-addsheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ikx-line); } .ikx-addsheet-item { display: flex; align-items: center; gap: 9px; padding: 12px 12px; border: 0; background: #fff; color: var(--ikx-ink-2); font-family: var(--ikx-font); font-weight: 600; font-size: 0.82rem; cursor: pointer; text-align: left; transition: background .14s var(--ikx-ease), color .14s var(--ikx-ease); } .ikx-addsheet-item:hover { background: var(--ikx-paper); color: var(--ikx-orange); } .ikx-addsheet-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--ikx-muted-2); } .ikx-addsheet-item:hover .ikx-addsheet-ico { color: var(--ikx-orange); } .ikx-addsheet-ico svg { width: 17px; height: 17px; } /* With up to ~9 filter items, tighten the rail item sizing a touch. */ .ikx-railitem { padding: 11px 12px; font-size: 0.88rem; } .ikx-railicon svg { width: 18px; height: 18px; } .ikx-pillrow-wrap { flex-wrap: wrap; } /* ── Responsive ── */ @media (max-width: 1100px) { .ikx-grid .ikx-card { width: clamp(260px, 42vw, 340px); } .ikx-grid .ikx-card.ikx-card--compact { width: clamp(190px, 30vw, 240px); } } @media (max-width: 760px) { /* Arrows are pointer-affordances; on touch we use vertical scrolling instead. */ .ikx-trackarrow { display: none !important; } } /* Reduced-motion: no smooth-scroll easing, no target pulse animation. */ @media (prefers-reduced-motion: reduce) { .ikx-grid { scroll-behavior: auto; } .ikx-card.is-target { box-shadow: 0 0 0 3px var(--ikx-orange); } } /* backdrop-filter fallback already covered globally; the new surfaces are solid. */ /* ── Intelligent search: summary line + AI badge ── */ .ikx-railsearch-wrap { margin-bottom: 12px; } .ikx-search-ai { position: absolute; right: 36px; font-size: 0.64rem; font-weight: 700; color: var(--ikx-orange); background: rgba(245,130,32,0.1); padding: 3px 7px; letter-spacing: 0.04em; text-transform: uppercase; animation: ikx-ai-pulse 1.2s ease-in-out infinite; } @keyframes ikx-ai-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } } .ikx-search-summary { margin-top: 8px; padding: 9px 11px; background: var(--ikx-paper); border: 1px solid var(--ikx-orange); font-size: 0.76rem; line-height: 1.4; color: var(--ikx-ink-2); display: flex; flex-direction: column; gap: 3px; } .ikx-ss-text { font-weight: 600; } .ikx-ss-count { font-size: 0.68rem; font-weight: 800; color: var(--ikx-orange); text-transform: uppercase; letter-spacing: 0.05em; } /* ════════════════════════════════════════════════════════════════════════════ ON-PAGE PAGE HEAD + RESULTS TOOLBAR A proper page title and a results toolbar (count · Sort · Filters) that lives ON THE PAGE, the way premium property sites do it — not crammed into the header. Desktop keeps sort in the header and filters in the left rail, so the on-page toolbar is mobile-only; the desktop header title is unchanged. ════════════════════════════════════════════════════════════════════════════ */ /* The on-page head is mobile-only (desktop already has header title + rail). */ .ikx-pagehead { display: none; } @media (max-width: 760px) { /* Header → a slim brand + close strip. Title and sort LEAVE the header. */ .ikx-topbar .ikx-titlewrap { display: none; } .ikx-topbar .ikx-sort { display: none; } .ikx-topbar { gap: 8px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; } .ikx-close { margin-left: auto; } /* ── On-page head: title + toolbar ── */ .ikx-pagehead { display: block; padding: 16px 16px 0; } .ikx-pagetitle { margin: 0 0 12px; font-family: var(--ikx-font-head); font-weight: 900; font-size: 1.5rem; line-height: 1.18; letter-spacing: -0.02em; color: var(--ikx-ink); } /* Toolbar row: count on the left, Sort + Filters on the right. Sticky so the controls stay reachable as the user scrolls the results. */ .ikx-toolbar { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; gap: 10px; padding: 10px 0; margin-bottom: 4px; background: linear-gradient(180deg, var(--ikx-paper) 70%, transparent); } .ikx-toolbar-count { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 700; color: var(--ikx-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ikx-toolbar-count .ikx-count-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ikx-orange); flex: 0 0 auto; } .ikx-toolbar-actions { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; } .ikx-tbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--ikx-line-2); border-radius: 999px; background: #fff; color: var(--ikx-ink); font-family: var(--ikx-font); font-weight: 700; font-size: 0.82rem; cursor: pointer; box-shadow: 0 4px 14px -10px rgba(14,14,17,0.4); transition: border-color .16s var(--ikx-ease), background .16s var(--ikx-ease), transform .12s var(--ikx-ease); } .ikx-tbtn:active { transform: scale(.96); } .ikx-tbtn svg { width: 16px; height: 16px; flex: 0 0 auto; } .ikx-tbtn-caret { width: 12px !important; height: 12px !important; color: var(--ikx-muted-2); transition: transform .2s var(--ikx-ease); } .ikx-tbtn[aria-expanded="true"] .ikx-tbtn-caret { transform: rotate(180deg); } .ikx-tbtn--filter.is-on { border-color: var(--ikx-orange); background: rgba(245,130,32,0.07); color: var(--ikx-orange); } .ikx-tbtn-badge { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; background: var(--ikx-orange); color: #fff; border-radius: 999px; font-size: 0.66rem; font-weight: 800; } /* ── On-page sort menu (drops under the Sort button) ── */ .ikx-sortwrap { position: relative; } .ikx-sortmenu-m { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--ikx-line); border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(14,14,17,0.45); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity .18s var(--ikx-ease), transform .18s var(--ikx-ease); } .ikx-sortmenu-m.is-open { opacity: 1; transform: none; pointer-events: auto; } .ikx-sortopt-m { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; background: transparent; cursor: pointer; border-radius: 9px; font-family: var(--ikx-font); font-size: 0.88rem; font-weight: 600; color: var(--ikx-ink-2); text-align: left; transition: background .14s var(--ikx-ease), color .14s var(--ikx-ease); } .ikx-sortopt-m svg { width: 17px; height: 17px; color: var(--ikx-muted-2); } .ikx-sortopt-m:hover { background: var(--ikx-paper); color: var(--ikx-ink); } .ikx-sortopt-m.is-on { background: rgba(245,130,32,0.08); color: var(--ikx-orange); } .ikx-sortopt-m.is-on svg { color: var(--ikx-orange); } /* ── Collapsible filters (triggered by the toolbar's Filters button) ── Search stays visible; the filter list + actions collapse. ── */ .ikx-rail { display: block; position: relative; padding: 0 16px; border-bottom: 0; max-height: none; overflow: visible; background: transparent; } .ikx-railsearch-wrap { margin: 0 0 12px; } .ikx-rail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height .34s var(--ikx-ease), opacity .26s var(--ikx-ease), margin .26s var(--ikx-ease); } .ikx-rail-actions { display: flex; flex-direction: column; gap: 10px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .34s var(--ikx-ease), opacity .26s var(--ikx-ease), margin .26s var(--ikx-ease); } .ikx-body.ikx-mfilters-open .ikx-rail-list { max-height: 560px; opacity: 1; margin: 0 0 12px; } .ikx-body.ikx-mfilters-open .ikx-rail-actions { max-height: 200px; opacity: 1; margin: 0 0 16px; } .ikx-rail-addfilter { width: 100%; } .ikx-railitem { width: auto; padding: 12px 14px; border-radius: 12px; font-size: 0.85rem; justify-content: flex-start; } .ikx-railitem .ikx-railcaret { display: none; } .ikx-railitem .ikx-raildot { top: 8px; right: 10px; } .ikx-rail-h, .ikx-rail-collapse, .ikx-rail-reopen { display: none !important; } /* Rail sits BELOW the toolbar in DOM order already; ensure it has no leftover sticky/scroll behaviour from desktop. */ .ikx-rail { z-index: auto; } /* Results: comfortable bottom space (no floating bar now). */ .ikx-results { padding: 0 0 40px; } .ikx-results .ikx-grid { padding: 0 16px; } } /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v3 — MEDIA-STUDIO LAYER ──────────────────────────────────────────────────────────────────────────── Everything below styles the v3 upgrade only: • auto-rotating card covers (stacked crossfade + dotted rail + count chip) • the hover action cluster (4-up / 8-up mosaic + maximize) docked left of the love heart • intelligent cover mosaics (two flex rows — always fully filled) • co-lister avatar stack on the card strip • rail: open-all control, hover slide-out drawer, price ladder fields • detail: full-screen-by-default, image expand pill, all-photos grid, LIGHTBOX, video buffering, magazine info, crew showcase, contact reveal, enquiry form, share sheet Brand tokens only (--ikx-*), Outfit via --ikx-font. Appended last on purpose: at equal specificity this layer wins the cascade. NOTE the legacy hover-swap rules above (.ikx-card-img--base/--hover) are inert in v3 — those classes are no longer emitted; the stack below owns card imagery now. ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. CARD COVER — rotating photo stack ─────────────────────────────────── */ .ikx-card-cover[data-photos] .ikx-card-img { opacity: 0; transform: scale(1.035); transition: opacity .72s var(--ikx-ease), transform 1.6s var(--ikx-ease); will-change: opacity; } .ikx-card-cover[data-photos] .ikx-card-img.is-on { opacity: 1; transform: scale(1); } /* Dotted rail — bottom centre, quiet until the card is noticed */ .ikx-card-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; padding: 5px 9px; border-radius: 999px; background: rgba(14, 14, 17, 0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: 70%; overflow: hidden; } .ikx-card-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: transform .3s var(--ikx-ease), background .3s var(--ikx-ease), width .3s var(--ikx-ease); } .ikx-card-dot.is-on { background: var(--ikx-orange); width: 16px; border-radius: 999px; } .ikx-card-dot:hover { transform: scale(1.35); } /* Photo-count chip — bottom-left, mirrors the dot rail's frosted language */ .ikx-card-photocount { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(14, 14, 17, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-family: var(--ikx-font); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; pointer-events: none; } .ikx-card-photocount svg { width: 13px; height: 13px; } /* ── 2. HOVER ACTION CLUSTER — docked flush LEFT of the love heart ────────── */ .ikx-cardacts { position: absolute; right: 52px; /* heart is the 52px corner tab — we sit beside it */ bottom: 0; z-index: 4; display: flex; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .28s var(--ikx-ease), transform .28s var(--ikx-ease); } .ikx-card-cover:hover .ikx-cardacts, .ikx-card-cover.is-mosaic .ikx-cardacts { opacity: 1; transform: translateY(0); pointer-events: auto; } .ikx-cardact { width: 46px; height: 52px; display: grid; place-items: center; border: 0; cursor: pointer; color: var(--ikx-ink); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%); border-right: 1px solid rgba(15, 23, 42, 0.08); transition: background .2s var(--ikx-ease), color .2s var(--ikx-ease); } .ikx-cardact svg { width: 19px; height: 19px; } .ikx-cardact:hover { background: #fff; color: var(--ikx-orange); } .ikx-cardact.is-on { background: var(--ikx-ink-2); color: var(--ikx-orange); } /* ── 3. COVER MOSAIC — two flex rows, always fully filled, tiles grow ─────── */ .ikx-mosaic { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 3px; background: var(--ikx-ink); animation: ikxMosaicIn .34s var(--ikx-ease); } @keyframes ikxMosaicIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } } .ikx-mosaic-row { display: flex; flex: 1; gap: 3px; min-height: 0; } .ikx-mtile { position: relative; flex: 1; min-width: 0; border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center; transition: flex-grow .45s var(--ikx-ease), filter .3s var(--ikx-ease); filter: brightness(.94); } /* The hovered tile draws closer — it grows past its siblings and brightens, and its own maximize glyph fades up. */ .ikx-mtile:hover { flex-grow: 2.3; filter: brightness(1.04); } .ikx-mtile-max { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.9); color: var(--ikx-ink); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ikx-ease), transform .25s var(--ikx-ease); pointer-events: none; } .ikx-mtile-max svg { width: 15px; height: 15px; } .ikx-mtile:hover .ikx-mtile-max { opacity: 1; transform: translateY(0); } /* While a mosaic is up, the base layers + chrome step back */ .ikx-card-cover.is-mosaic .ikx-card-dots, .ikx-card-cover.is-mosaic .ikx-card-photocount { opacity: 0; pointer-events: none; } .ikx-card-dots, .ikx-card-photocount { transition: opacity .25s var(--ikx-ease); } /* ── 4. CARD STRIP — co-lister avatar stack + hover tooltips ──────────────── */ .ikx-strip-costack { display: inline-flex; align-items: center; margin-left: -6px; margin-right: 2px; isolation: isolate; } .ikx-strip-co { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: visible; margin-left: -9px; z-index: calc(8 - var(--co-i, 0)); transition: transform .25s var(--ikx-ease); } .ikx-strip-co img, .ikx-strip-co .ikx-strip-initials { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(14, 14, 17, 0.18); background: var(--ikx-ink-2); color: #fff; font-size: 9.5px; font-weight: 700; font-family: var(--ikx-font); } .ikx-strip-co:hover { transform: translateY(-3px) scale(1.12); z-index: 20; } /* Tooltip: the person behind the avatar */ .ikx-strip-co::after { content: attr(data-co-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); padding: 6px 10px; border-radius: 10px; background: var(--ikx-ink); color: #fff; font-family: var(--ikx-font); font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .22s var(--ikx-ease), transform .22s var(--ikx-ease); box-shadow: var(--ikx-shadow-card); z-index: 30; } .ikx-strip-co:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── 5. RAIL — open-all control ───────────────────────────────────────────── */ .ikx-rail-expandall { width: 34px; height: 34px; display: grid; place-items: center; margin-left: auto; margin-right: 6px; border: 1px solid var(--ikx-line); border-radius: 12px; background: var(--ikx-paper-2); color: var(--ikx-muted); cursor: pointer; transition: color .2s var(--ikx-ease), border-color .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikx-rail-expandall svg { width: 16px; height: 16px; } .ikx-rail-expandall:hover { color: var(--ikx-orange); border-color: var(--ikx-orange); transform: translateY(-1px); } /* When the expand-all button exists, the collapse button no longer needs the auto margin (the expand-all takes it). */ .ikx-rail-expandall + .ikx-rail-collapse { margin-left: 0; } /* ── 6. DRAWER 'ALL FILTERS' — stacked labelled sections ──────────────────── */ .ikx-drawer.is-all .ikx-drawer-body { padding-top: 6px; } .ikx-drawer-sect { padding: 16px 0 18px; border-bottom: 1px solid var(--ikx-line); } .ikx-drawer-sect:last-child { border-bottom: 0; } .ikx-drawer-sect-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-family: var(--ikx-font); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ikx-ink-2); } .ikx-drawer-sect-h svg { width: 15px; height: 15px; color: var(--ikx-orange); } /* ── 7. PRICE LADDER FIELDS ───────────────────────────────────────────────── */ .ikx-pricefield { display: flex; gap: 8px; align-items: stretch; } .ikx-pricefield .ikx-fld--select { flex: 1; cursor: pointer; } .ikx-pricefield .ikx-fld--custom { flex: 1; min-width: 0; } /* ── 8. DETAIL — image expand pill + counter glyph ────────────────────────── */ .ikxd-img { cursor: zoom-in; } .ikxd-imgexpand { position: absolute; top: 14px; left: 14px; z-index: 6; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 13px; cursor: pointer; background: rgba(14, 14, 17, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; transition: background .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikxd-imgexpand svg { width: 18px; height: 18px; } .ikxd-imgexpand:hover { background: var(--ikx-orange); transform: scale(1.06); } .ikxd-imgcounter { display: inline-flex; align-items: center; gap: 6px; } .ikxd-imgcounter svg { width: 13px; height: 13px; opacity: .9; } /* ── 9. DETAIL — all-photos grid pane (the FIXED boxes button) ────────────── */ .ikxd-gridpane { position: absolute; inset: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding: 6px; background: var(--ikx-ink); scrollbar-width: thin; } .ikxd-gtile { position: relative; aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background-size: cover; background-position: center; filter: brightness(.92); transition: filter .25s var(--ikx-ease), transform .25s var(--ikx-ease); } .ikxd-gtile:hover { filter: brightness(1.05); transform: scale(1.015); z-index: 2; } .ikxd-gtile-n { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 8px; background: rgba(14, 14, 17, 0.55); color: #fff; font-family: var(--ikx-font); font-size: 11.5px; font-weight: 700; } .ikxd-gtile-max { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.9); color: var(--ikx-ink); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ikx-ease), transform .25s var(--ikx-ease); } .ikxd-gtile-max svg { width: 15px; height: 15px; } .ikxd-gtile:hover .ikxd-gtile-max { opacity: 1; transform: translateY(0); } /* ── 10. LIGHTBOX — the photo's own full-maximize, above everything ───────── */ .ikxlb { position: fixed; inset: 0; z-index: 12000; /* above .ikxd */ display: grid; place-items: center; opacity: 0; transition: opacity .26s var(--ikx-ease); } .ikxlb.is-open { opacity: 1; } .ikxlb-scrim { position: absolute; inset: 0; background: rgba(8, 8, 10, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ikxlb-img { position: relative; z-index: 1; max-width: 94vw; max-height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: var(--ikx-shadow-pop); transform: scale(.97); transition: transform .3s var(--ikx-ease); } .ikxlb.is-open .ikxlb-img { transform: scale(1); } .ikxlb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; transition: background .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikxlb-nav svg { width: 22px; height: 22px; } .ikxlb-nav:hover { background: var(--ikx-orange); transform: translateY(-50%) scale(1.07); } .ikxlb-nav--prev { left: 22px; } .ikxlb-nav--next { right: 22px; } .ikxlb-x { position: absolute; top: 18px; right: 18px; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; transition: background .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikxlb-x svg { width: 19px; height: 19px; } .ikxlb-x:hover { background: var(--ikx-sold); transform: rotate(90deg); } .ikxlb-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: var(--ikx-font); font-size: 13px; font-weight: 700; letter-spacing: .04em; } /* ── 11. VIDEO — buffering indicator ──────────────────────────────────────── */ .ikxd-vbuffer { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(14, 14, 17, 0.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: #fff; font-family: var(--ikx-font); font-size: 13px; font-weight: 600; letter-spacing: .03em; pointer-events: none; } .ikxd-vbuffer .ikxd-spin { border-top-color: var(--ikx-orange); } /* ── 12. MAGAZINE INFO — kicker, editorial headings, drop cap, fold ───────── */ .ikxd-mag-kicker { margin-top: 26px; font-family: var(--ikx-font); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ikx-orange); } .ikxd-section-h--mag { margin-top: 2px !important; font-size: 21px; letter-spacing: -0.01em; } .ikxd-name--mag { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em; } .ikxd-loc-photos { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 3px 10px; border-radius: 999px; background: var(--ikx-paper); border: 1px solid var(--ikx-line); color: var(--ikx-muted); font-size: 12px; font-weight: 700; } .ikxd-loc-photos svg { width: 12px; height: 12px; } .ikxd-desc--mag { position: relative; font-size: 15.5px; line-height: 1.75; color: #3b4453; } /* Editorial drop cap on the opening letter */ .ikxd-desc--mag::first-letter { font-family: var(--ikx-font); font-size: 3.1em; font-weight: 800; float: left; line-height: .82; padding: 4px 10px 0 0; color: var(--ikx-ink-2); } .ikxd-desc-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ikx-paper-2)); pointer-events: none; } .ikxd-desc--mag.is-open .ikxd-desc-fade { display: none; } .ikxd-readmore { margin-top: 4px; padding: 9px 18px; border: 1px solid var(--ikx-line-2); border-radius: 999px; background: var(--ikx-paper-2); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .2s var(--ikx-ease), color .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikxd-readmore:hover { border-color: var(--ikx-orange); color: var(--ikx-orange); transform: translateY(-1px); } /* ── 13. CREW — social-card lister showcase + co-lister grid ──────────────── */ .ikxd-crew { margin-top: 14px; } .ikxd-crew-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ava meta ref" "reveal reveal reveal"; align-items: center; gap: 6px 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--ikx-line); background: linear-gradient(140deg, var(--ikx-paper-2), var(--ikx-paper)); box-shadow: 0 10px 34px -22px rgba(14, 14, 17, 0.35); transition: transform .25s var(--ikx-ease), box-shadow .25s var(--ikx-ease), border-color .25s var(--ikx-ease); } .ikxd-crew-card--primary { border-color: rgba(245, 130, 32, 0.35); background: radial-gradient(120% 130% at 100% 0%, rgba(245, 130, 32, 0.07), transparent 55%), linear-gradient(140deg, var(--ikx-paper-2), var(--ikx-paper)); } .ikxd-crew-card:hover { transform: translateY(-2px); box-shadow: var(--ikx-shadow-card); border-color: rgba(245, 130, 32, 0.45); } .ikxd-crew-ava { grid-area: ava; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--ikx-paper-2), 0 0 0 5px rgba(245, 130, 32, 0.5); } .ikxd-crew-ava img, .ikxd-crew-ava > span { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; background: var(--ikx-ink-2); color: #fff; font-family: var(--ikx-font); font-weight: 800; font-size: 17px; } .ikxd-crew-meta { grid-area: meta; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ikxd-crew-name { font-family: var(--ikx-font); font-size: 16.5px; font-weight: 800; color: var(--ikx-ink); letter-spacing: -0.01em; } .ikxd-crew-role { font-size: 12.5px; color: var(--ikx-muted); font-weight: 600; } .ikxd-crew-role i { font-style: normal; color: var(--ikx-orange); font-weight: 800; } .ikxd-crew-ref { grid-area: ref; align-self: start; padding: 5px 11px; border-radius: 999px; background: var(--ikx-ink-2); color: #fff; font-family: var(--ikx-font); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; } .ikxd-crew-cos-h { margin: 16px 0 8px; font-family: var(--ikx-font); font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ikx-muted); } .ikxd-crew-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .ikxd-crew-card--co { padding: 13px; } .ikxd-crew-card--co .ikxd-crew-ava { width: 46px; height: 46px; } .ikxd-crew-card--co .ikxd-crew-name { font-size: 14.5px; } /* ── 14. CONTACT REVEAL — "Unlock direct line" / "Unlock inbox" ───────────── */ .ikxd-revealrow { grid-area: reveal; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .ikxd-reveal { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px dashed rgba(245, 130, 32, 0.55); border-radius: 999px; background: rgba(245, 130, 32, 0.06); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .22s var(--ikx-ease), border-color .22s var(--ikx-ease), transform .22s var(--ikx-ease); } .ikxd-reveal svg { width: 14px; height: 14px; } .ikxd-reveal svg:first-child { color: var(--ikx-orange); } .ikxd-reveal:hover { background: rgba(245, 130, 32, 0.13); border-style: solid; transform: translateY(-1px); } .ikxd-reveal.is-busy { opacity: .55; pointer-events: none; } .ikxd-reveal.is-none { border-color: var(--ikx-line-2); background: var(--ikx-paper); color: var(--ikx-muted); cursor: default; } .ikxd-revealed { display: inline-flex; align-items: center; gap: 6px; } .ikxd-revealed-val { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--ikx-ink-2); color: #fff; font-family: var(--ikx-font); font-size: 13px; font-weight: 800; text-decoration: none; letter-spacing: .02em; transition: background .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikxd-revealed-val svg { width: 14px; height: 14px; color: var(--ikx-orange); } .ikxd-revealed-val:hover { background: var(--ikx-orange); transform: translateY(-1px); } .ikxd-revealed-val:hover svg { color: #fff; } .ikxd-revealed-copy { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ikx-line-2); border-radius: 50%; background: var(--ikx-paper-2); color: var(--ikx-muted); cursor: pointer; transition: color .2s var(--ikx-ease), border-color .2s var(--ikx-ease); } .ikxd-revealed-copy svg { width: 14px; height: 14px; } .ikxd-revealed-copy:hover { color: var(--ikx-orange); border-color: var(--ikx-orange); } /* ── 15. ENQUIRY FORM ─────────────────────────────────────────────────────── */ .ikxd-enquire { margin-top: 14px; padding: 18px; border-radius: 18px; border: 1px solid var(--ikx-line); background: var(--ikx-paper); display: flex; flex-direction: column; gap: 4px; } .ikxd-enq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ikxd-enq-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ikxd-enq-l { margin-top: 10px; font-family: var(--ikx-font); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ikx-muted); } .ikxd-enq-l b { color: var(--ikx-orange); } .ikxd-enq-fld { width: 100%; padding: 12px 14px; border: 1px solid var(--ikx-line-2); border-radius: 13px; background: var(--ikx-paper-2); font-family: var(--ikx-font); font-size: 14px; color: var(--ikx-ink); transition: border-color .2s var(--ikx-ease), box-shadow .2s var(--ikx-ease); } .ikxd-enq-fld:focus { outline: none; border-color: var(--ikx-orange); box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.14); } .ikxd-enq-fld--ta { resize: vertical; min-height: 104px; line-height: 1.55; } /* Honeypot — removed from sight AND from the tab order, still in the DOM */ .ikxd-enq-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; } .ikxd-enq-err { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(226, 55, 68, 0.08); border: 1px solid rgba(226, 55, 68, 0.3); color: var(--ikx-sold); font-size: 13px; font-weight: 600; } .ikxd-enq-send { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 22px; border: 0; border-radius: 999px; background: linear-gradient(120deg, var(--ikx-orange), var(--ikx-orange-2)); color: #fff; font-family: var(--ikx-font); font-size: 15px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(245, 130, 32, 0.65); transition: transform .2s var(--ikx-ease), box-shadow .2s var(--ikx-ease), opacity .2s var(--ikx-ease); } .ikxd-enq-send svg { width: 16px; height: 16px; } .ikxd-enq-send:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(245, 130, 32, 0.75); } .ikxd-enq-send:disabled, .ikxd-enq-send.is-busy { opacity: .6; pointer-events: none; } .ikxd-enq-done { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; text-align: center; font-family: var(--ikx-font); } .ikxd-enq-done svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(34, 197, 94, 0.12); color: #16a34a; } .ikxd-enq-done b { font-size: 17px; color: var(--ikx-ink); } .ikxd-enq-done span { font-size: 13.5px; color: var(--ikx-muted); max-width: 340px; } /* ── 16. SHARE SHEET ──────────────────────────────────────────────────────── */ /* v9.1 — the share sheet is a CHAT BUBBLE floating above the Share button. Absolutely positioned inside the (position:relative) actions row: it takes no space in the flow, so opening it never grows the pane or nudges the scrollbar. The grid/icons inside keep their existing design untouched. */ .ikxd-actions--anchor { position: relative; } .ikxd-sharesheet { position: absolute; right: 0; bottom: calc(100% + 16px); width: min(520px, calc(100vw - 48px)); max-width: 100%; z-index: 6; border: 1px solid var(--ikx-line); border-radius: 18px; background: var(--ikx-paper-2); box-shadow: 0 18px 44px -18px rgba(14, 14, 17, 0.4), var(--ikx-shadow-card); opacity: 0; transform: translateY(8px); transition: opacity .24s var(--ikx-ease), transform .24s var(--ikx-ease); pointer-events: none; } /* The bubble tail — pointing down at the Share button (rightmost action). Two stacked triangles fake the 1px border around the notch. */ .ikxd-sharesheet::before, .ikxd-sharesheet::after { content: ""; position: absolute; top: 100%; right: 64px; border: 11px solid transparent; border-bottom: 0; } .ikxd-sharesheet::before { border-top-color: var(--ikx-line); } .ikxd-sharesheet::after { margin-top: -1.5px; border-top-color: var(--ikx-paper-2); } .ikxd-sharesheet.is-open { pointer-events: auto; } .ikxd-sharesheet.is-open { opacity: 1; transform: translateY(0); } .ikxd-sharesheet-h { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 0; font-family: var(--ikx-font); font-size: 13px; font-weight: 800; color: var(--ikx-ink-2); } .ikxd-sharesheet-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ikx-muted); cursor: pointer; transition: background .2s var(--ikx-ease), color .2s var(--ikx-ease); } .ikxd-sharesheet-x svg { width: 14px; height: 14px; } .ikxd-sharesheet-x:hover { background: var(--ikx-paper); color: var(--ikx-ink); } .ikxd-sharesheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 16px 16px; } .ikxd-sharech { display: grid; justify-items: center; gap: 7px; padding: 13px 6px 11px; border: 1px solid var(--ikx-line); border-radius: 14px; background: var(--ikx-paper); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s var(--ikx-ease), border-color .2s var(--ikx-ease), box-shadow .2s var(--ikx-ease); } .ikxd-sharech svg { width: 21px; height: 21px; } .ikxd-sharech:hover { transform: translateY(-2px); box-shadow: var(--ikx-shadow-card); } /* Channel-true accents on hover */ .ikxd-sharech.is-wa:hover { border-color: #25d366; color: #128c4b; } .ikxd-sharech.is-fb:hover { border-color: #1877f2; color: #1877f2; } .ikxd-sharech.is-x:hover { border-color: var(--ikx-ink); color: var(--ikx-ink); } .ikxd-sharech.is-li:hover { border-color: #0a66c2; color: #0a66c2; } .ikxd-sharech.is-ig:hover { border-color: #d6249f; color: #d6249f; } .ikxd-sharech.is-mail:hover { border-color: var(--ikx-cyan); color: #0284c7; } .ikxd-sharech.is-copy:hover, .ikxd-sharech.is-native:hover { border-color: var(--ikx-orange); color: var(--ikx-orange); } .ikxd-sharesheet-note { padding: 0 16px 14px; font-size: 12.5px; font-weight: 600; color: var(--ikx-orange); } /* ── 17. RESPONSIVE + MOTION SAFETY ───────────────────────────────────────── */ @media (hover: none) { /* Touch: the hover cluster can't hover — mosaics live in the detail grid instead. Dots + count remain (tap a dot to page). */ .ikx-cardacts { display: none; } .ikx-strip-co::after { display: none; } } @media (max-width: 760px) { .ikxd-enq-row { grid-template-columns: 1fr; } .ikxd-sharesheet-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } .ikxd-crew-cos { grid-template-columns: 1fr; } .ikxd-gridpane { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .ikxlb-nav { width: 44px; height: 44px; } .ikxlb-nav--prev { left: 8px; } .ikxlb-nav--next { right: 8px; } .ikxd-name--mag { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .ikx-card-cover[data-photos] .ikx-card-img { transition: opacity .3s ease; transform: none; } .ikx-mosaic { animation: none; } .ikx-mtile { transition: none; } .ikxlb, .ikxlb-img, .ikxd-sharesheet { transition: opacity .2s ease; transform: none; } } /* ═══ END LISTING EXPERIENCE v3 ═══════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v4 — ICON RAIL, CHEST DRAWERS, TRUE-FULLSCREEN DETAIL, COMPACT MEDIA-STUDIO INFO PANE ──────────────────────────────────────────────────────────────────────────── Appended last on purpose: at equal specificity this layer supersedes the v1–v3 rules above. Mobile (≤760px) keeps its chip-strip + bottom-sheet presentation — every rail/drawer rule here is scoped to (min-width: 761px). ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. TRUE FULL-SCREEN DETAIL ───────────────────────────────────────────── ROOT CAUSE of "maximize doesn't fill the view": .ikxd keeps its clamp(0,2vw,34px) padding in is-max, so the 100%-sized shell filled a PADDED box. Kill the padding (and the radius) the moment is-max is on. */ .ikxd.is-max { padding: 0; } .ikxd.is-max .ikxd-shell { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; border-radius: 0; } /* ── 2. ICON RAIL (desktop + tablet) ──────────────────────────────────────── */ @media (min-width: 761px) { :root { --ikx-rail-w: 86px; /* v4: icon column — the results track gains ~260px */ } .ikx-rail { padding: 14px 10px 18px; gap: 8px; align-items: center; overflow: visible; /* tooltips + drawers must escape the column */ } .ikx-rail-head { flex-direction: column; gap: 8px; align-items: center; width: 100%; } .ikx-rail-head .ikx-rail-h { display: none; /* icon-only: the heading is the tooltip's job now */ } .ikx-rail-expandall { margin: 0; } .ikx-rail-list { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } /* An item is a 48px icon square. Label / inline value / caret are hidden — the hover tooltip carries "Label · applied value" instead. */ .ikx-railitem { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 14px; flex: 0 0 auto; } .ikx-railitem .ikx-raillabel, .ikx-railitem .ikx-railval, .ikx-railitem .ikx-railcaret { display: none; } .ikx-railitem .ikx-railicon { margin: 0; } /* Applied-value dot: a firm orange badge on the icon's corner. */ .ikx-railitem .ikx-raildot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ikx-paper-2); } /* Optional-filter remove chip: appears on hover, top-left so it never fights the value dot. */ .ikx-railitem .ikx-railremove { position: absolute; top: -5px; left: -5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--ikx-ink-2); color: #fff; opacity: 0; transform: scale(.7); transition: opacity .18s var(--ikx-ease), transform .18s var(--ikx-ease); } .ikx-railitem .ikx-railremove svg { width: 9px; height: 9px; } .ikx-railitem:hover .ikx-railremove { opacity: 1; transform: scale(1); } .ikx-railitem .ikx-railremove:hover { background: var(--ikx-sold); } .ikx-railitem.is-active { background: var(--ikx-ink-2); border-color: var(--ikx-ink-2); } .ikx-railitem.is-active .ikx-railicon { color: var(--ikx-orange); } /* Rail actions: icon-only add-filter + reset, stacked, same tooltip. */ .ikx-rail-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ikx-line); width: 100%; } .ikx-rail-addfilter, .ikx-rail-reset { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px dashed var(--ikx-line-2); border-radius: 14px; background: var(--ikx-paper-2); color: var(--ikx-muted); cursor: pointer; transition: color .2s var(--ikx-ease), border-color .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikx-rail-addfilter svg, .ikx-rail-reset svg { width: 18px; height: 18px; } .ikx-rail-addfilter span, .ikx-rail-reset span { display: none; } .ikx-rail-addfilter:hover:not(:disabled) { color: var(--ikx-orange); border-color: var(--ikx-orange); transform: translateY(-1px); } .ikx-rail-reset { border-style: solid; } .ikx-rail-reset:hover { color: var(--ikx-sold); border-color: var(--ikx-sold); transform: translateY(-1px) rotate(-30deg); } /* ── Tooltips — pure CSS off data-tip, floating right of the icon ── */ .ikx-rail [data-tip] { position: relative; } .ikx-rail [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 7px 12px; border-radius: 10px; background: var(--ikx-ink); color: #fff; font-family: var(--ikx-font); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .18s var(--ikx-ease), transform .18s var(--ikx-ease); box-shadow: var(--ikx-shadow-card); z-index: 60; } .ikx-rail [data-tip]::before { content: ""; position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: var(--ikx-ink); opacity: 0; transition: opacity .18s var(--ikx-ease); z-index: 60; } .ikx-rail [data-tip]:hover::after, .ikx-rail [data-tip]:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } .ikx-rail [data-tip]:hover::before, .ikx-rail [data-tip]:focus-visible::before { opacity: 1; } /* ── 3. CHEST-OF-DRAWERS — the drawer is a floating panel anchored to its icon (top set inline by positionDrawer), sliding out HORIZONTALLY like a drawer pulled from a chest. ── */ .ikx-drawer { position: fixed; left: calc(var(--ikx-rail-w) + 10px); top: 84px; /* JS refines per icon */ bottom: auto; right: auto; width: min(400px, 46vw); height: auto; max-height: min(74vh, 660px); display: flex; flex-direction: column; border: 1px solid var(--ikx-line); border-radius: 18px; box-shadow: var(--ikx-shadow-pop); background: var(--ikx-paper-2); transform: translateX(-16px); transform-origin: left center; opacity: 0; visibility: hidden; pointer-events: none; transition: transform .32s var(--ikx-ease), opacity .26s var(--ikx-ease), visibility 0s linear .32s; z-index: 55; } .ikx-drawer.is-open { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .32s var(--ikx-ease), opacity .26s var(--ikx-ease), visibility 0s; } .ikx-drawer.is-all { width: min(460px, 52vw); } .ikx-drawer .ikx-drawer-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Click-away layer: functional but INVISIBLE — a floating drawer beside an icon column shouldn't dim the whole studio. */ .ikx-drawer-scrim { /* v6: a WHISPER of frost — enough to focus the open drawer, light enough that the results stay readable behind it. */ background: rgba(14, 14, 17, 0.14) !important; -webkit-backdrop-filter: blur(2.5px) saturate(96%) !important; backdrop-filter: blur(2.5px) saturate(96%) !important; z-index: 54; } } /* Per-drawer header actions (all breakpoints — the mobile sheet gets them too, replacing its long reach to a global Apply). */ .ikx-drawer-apply, .ikx-drawer-clear { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; flex: 0 0 auto; transition: transform .18s var(--ikx-ease), background .18s var(--ikx-ease), color .18s var(--ikx-ease), border-color .18s var(--ikx-ease); } .ikx-drawer-apply { border: 0; background: #16a34a; color: #fff; box-shadow: 0 8px 18px -8px rgba(22, 163, 74, 0.55); } .ikx-drawer-apply svg { width: 16px; height: 16px; } .ikx-drawer-apply:hover { transform: translateY(-1px) scale(1.05); background: #15803d; } .ikx-drawer-clear { border: 1px solid rgba(226, 55, 68, 0.35); background: rgba(226, 55, 68, 0.07); color: var(--ikx-sold); margin-left: auto; } .ikx-drawer-clear svg { width: 13px; height: 13px; } .ikx-drawer-clear:hover { background: var(--ikx-sold); color: #fff; transform: translateY(-1px); } /* Header layout: title | (spacer) | clear ✕ | apply ✓ | close */ .ikx-drawer-h { display: flex; align-items: center; gap: 8px; } .ikx-drawer-h .ikx-drawer-title { margin-right: auto; } /* When the clear button is hidden the apply tick takes the auto margin. */ .ikx-drawer-clear[hidden] + .ikx-drawer-apply { margin-left: auto; } /* The relocated AI search inside its drawer. */ .ikx-railsearch-wrap--drawer { padding: 2px 0 4px; } .ikx-railsearch-wrap--drawer .ikx-railsearch { width: 100%; } /* ── 4. RESULTS TRACK — with the 86px icon rail, size cards so 3+ ride the first viewport; arrows + pager already own the horizontal journey. ── */ @media (min-width: 761px) { .ikx-grid .ikx-card { width: clamp(280px, 26vw, 380px); } .ikx-grid .ikx-card.ikx-card--compact { width: clamp(200px, 18vw, 260px); } } /* ── 5. INFO PANE v4 — compact media-studio hierarchy ─────────────────────── */ .ikxd-info { padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 28px) 26px; } /* Crew strip — the people lead the pane (CRM-card inspiration). */ .ikxd-crew2 { margin: 12px 0 4px; } .ikxd-crew2-k { font-family: var(--ikx-font); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ikx-orange); margin-bottom: 7px; } .ikxd-crew2-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x proximity; } .ikxd-p { position: relative; flex: 0 0 auto; min-width: 210px; max-width: 260px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ava meta" "acts acts" "val val"; align-items: center; gap: 4px 10px; padding: 11px 12px; border: 1px solid var(--ikx-line); border-radius: 16px; background: linear-gradient(140deg, var(--ikx-paper-2), var(--ikx-paper)); scroll-snap-align: start; transition: transform .22s var(--ikx-ease), box-shadow .22s var(--ikx-ease), border-color .22s var(--ikx-ease); } .ikxd-p:hover { transform: translateY(-2px); box-shadow: var(--ikx-shadow-card); border-color: rgba(245, 130, 32, 0.4); } .ikxd-p--primary { border-color: rgba(245, 130, 32, 0.4); background: radial-gradient(130% 140% at 100% 0%, rgba(245, 130, 32, 0.07), transparent 55%), linear-gradient(140deg, var(--ikx-paper-2), var(--ikx-paper)); } .ikxd-p-ava { grid-area: ava; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--ikx-paper-2), 0 0 0 3.5px rgba(245, 130, 32, 0.45); } .ikxd-p-ava img, .ikxd-p-ava > span { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; background: var(--ikx-ink-2); color: #fff; font-family: var(--ikx-font); font-weight: 800; font-size: 13px; } .ikxd-p-meta { grid-area: meta; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ikxd-p-meta b { font-family: var(--ikx-font); font-size: 13.5px; font-weight: 800; color: var(--ikx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ikxd-p-meta i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ikx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The in-card icon cluster (phone / inbox / message) */ .ikxd-p-acts { grid-area: acts; display: flex; gap: 6px; margin-top: 6px; } .ikxd-pico { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(245, 130, 32, 0.4); border-radius: 50%; background: rgba(245, 130, 32, 0.06); color: var(--ikx-ink-2); cursor: pointer; transition: background .2s var(--ikx-ease), color .2s var(--ikx-ease), transform .2s var(--ikx-ease), border-color .2s var(--ikx-ease); } .ikxd-pico svg { width: 13.5px; height: 13.5px; } .ikxd-pico:hover { background: var(--ikx-orange); border-color: var(--ikx-orange); color: #fff; transform: translateY(-1px); } .ikxd-pico--msg { border-color: rgba(26, 29, 32, 0.25); background: var(--ikx-ink-2); color: #fff; } .ikxd-pico--msg:hover { background: var(--ikx-orange); } .ikxd-pico.is-busy { opacity: .5; pointer-events: none; } .ikxd-pico.is-done { background: var(--ikx-orange); border-color: var(--ikx-orange); color: #fff; } .ikxd-pico.is-none { border-color: var(--ikx-line-2); background: var(--ikx-paper); color: var(--ikx-muted-2); cursor: default; } /* Revealed value pill inside the card */ .ikxd-p-val { grid-area: val; display: flex; align-items: center; gap: 6px; margin-top: 7px; min-width: 0; } .ikxd-p-val-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 11px; border-radius: 999px; background: var(--ikx-ink-2); color: #fff; font-family: var(--ikx-font); font-size: 11.5px; font-weight: 800; text-decoration: none; transition: background .2s var(--ikx-ease); } .ikxd-p-val-link svg { width: 12px; height: 12px; color: var(--ikx-orange); flex: 0 0 auto; } .ikxd-p-val-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ikxd-p-val-link:hover { background: var(--ikx-orange); } .ikxd-p-val-link:hover svg { color: #fff; } .ikxd-p-val .ikxd-revealed-copy { width: 28px; height: 28px; } /* Identity block — the price steps down from a shout to a confident line. */ .ikxd-pricerow { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .ikxd-price.ikxd-price--v4 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); margin-bottom: 0; } .ikxd-refchip { margin-left: auto; padding: 4px 11px; border-radius: 999px; background: var(--ikx-ink-2); color: #fff; font-family: var(--ikx-font); font-size: 10px; font-weight: 800; letter-spacing: .08em; } .ikxd-name.ikxd-name--v4 { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.25; letter-spacing: -0.01em; margin: 6px 0 4px; } /* Compact story: same editorial voice, half the air; the drop cap retires (it inflated one-word titles into a broken glyph — see QA screenshot). */ .ikxd-mag-kicker { margin-top: 18px; font-size: 10.5px; } .ikxd-section-h--mag { font-size: 15px; } .ikxd-desc--mag { font-size: 14px; line-height: 1.65; margin-top: 6px; } .ikxd-desc--mag::first-letter { float: none; font-size: inherit; font-weight: inherit; line-height: inherit; padding: 0; color: inherit; } .ikxd-desc-fade { height: 44px; } .ikxd-readmore { padding: 7px 15px; font-size: 12px; } /* Specs: same information, tighter cells. */ .ikxd-specs { margin-top: 12px; gap: 8px; } .ikxd-speccell { padding: 9px 8px; } /* Action row */ .ikxd-act--enquire { background: linear-gradient(120deg, var(--ikx-orange), var(--ikx-orange-2)); border: 0; color: #fff; box-shadow: 0 12px 26px -12px rgba(245, 130, 32, 0.6); } .ikxd-act--enquire:hover { transform: translateY(-1px); } /* ── 6. ENQUIRY MODAL ─────────────────────────────────────────────────────── */ .ikxd-enqmodal { position: fixed; inset: 0; z-index: 12500; /* above the lightbox (12000) */ display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity .24s var(--ikx-ease); pointer-events: none; } .ikxd-enqmodal.is-open { opacity: 1; pointer-events: auto; } .ikxd-enqmodal-scrim { position: absolute; inset: 0; background: rgba(8, 8, 10, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ikxd-enqmodal-card { position: relative; z-index: 1; width: min(540px, 100%); max-height: min(86vh, 720px); overflow-y: auto; border-radius: 20px; background: var(--ikx-paper-2); box-shadow: var(--ikx-shadow-pop); padding: 18px 20px 20px; transform: translateY(14px) scale(.98); transition: transform .3s var(--ikx-ease); scrollbar-width: thin; } .ikxd-enqmodal.is-open .ikxd-enqmodal-card { transform: translateY(0) scale(1); } .ikxd-enqmodal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ikxd-enqmodal-t { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ikx-font); font-size: 16px; font-weight: 800; color: var(--ikx-ink); } .ikxd-enqmodal-t svg { width: 18px; height: 18px; color: var(--ikx-orange); } .ikxd-enqmodal-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--ikx-paper); color: var(--ikx-muted); cursor: pointer; transition: background .2s var(--ikx-ease), color .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikxd-enqmodal-x svg { width: 14px; height: 14px; } .ikxd-enqmodal-x:hover { background: var(--ikx-sold); color: #fff; transform: rotate(90deg); } .ikxd-enqmodal-sub { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ikx-muted); } /* The modal reuses the enquiry form language, minus the card chrome. */ .ikxd-enquire--modal { margin-top: 10px; padding: 0; border: 0; background: transparent; } .ikxd-enq-donebtn { margin-top: 12px; padding: 10px 26px; border: 0; border-radius: 999px; background: var(--ikx-ink-2); color: #fff; font-family: var(--ikx-font); font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikxd-enq-donebtn:hover { background: var(--ikx-orange); transform: translateY(-1px); } /* ── 7. MOTION SAFETY ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ikx-drawer, .ikxd-enqmodal-card, .ikx-rail [data-tip]::after { transition: opacity .2s ease; transform: none; } } /* ═══ END LISTING EXPERIENCE v4 ═══════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v5 — QA ROUND 1 tooltip yields to the drawer 2 one-row chest drawers, flush to icon 3 dots never show through mosaics 5 add-filter popover 6 agency mark beside the avatar 7 aligned card bodies 8 single-row centred header Appended last; supersedes v3/v4 at equal specificity. ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. TOOLTIP DISCIPLINE ────────────────────────────────────────────────── The instant an icon's drawer is out (.is-active is applied synchronously in the same click), its tooltip vanishes — no label ghosting under the drawer. */ .ikx-rail .ikx-railitem.is-active[data-tip]::after, .ikx-rail .ikx-railitem.is-active[data-tip]::before { opacity: 0 !important; transition: none !important; } /* ── 2. ONE-ROW CHEST DRAWERS (desktop/tablet) ────────────────────────────── */ @media (min-width: 761px) { /* The drawer becomes a single 48px-tall row — the icon's own height — FLUSH against the rail (no detached float): [content][✕][✓][close]. display:contents folds the header's buttons into the same flex row as the body, and `order` puts the content first, exactly the brief. */ .ikx-drawer:not(.is-all) { flex-direction: row; align-items: center; gap: 8px; height: 48px; min-height: 48px; overflow: hidden; /* the base drawer's overflow-y:auto painted a compressed scrollbar in this 48px row */ padding: 0 8px 0 12px; left: var(--ikx-rail-w); /* flush: attached to the rail edge */ width: max-content; max-width: min(720px, calc(100vw - var(--ikx-rail-w) - 24px)); border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; /* reads as sliding OUT of the rail */ border-radius: 0 14px 14px 0; } .ikx-drawer:not(.is-all) .ikx-drawer-h { display: contents; } .ikx-drawer:not(.is-all) .ikx-drawer-title { display: none; /* label-free: the icon + tooltip already name it */ } .ikx-drawer:not(.is-all) .ikx-drawer-body { order: 1; display: flex; align-items: center; gap: 8px; padding: 0; overflow: visible; flex: 0 1 auto; } .ikx-drawer:not(.is-all) .ikx-drawer-clear { order: 2; } .ikx-drawer:not(.is-all) .ikx-drawer-apply { order: 3; } .ikx-drawer:not(.is-all) .ikx-drawer-x { order: 4; } /* Row-sized controls inside the drawer */ .ikx-drawer:not(.is-all) .ikx-fld--row, .ikx-drawer:not(.is-all) .ikx-fldsel, .ikx-drawer:not(.is-all) .ikx-pricefield .ikx-fld { height: 36px; padding: 0 12px; margin: 0; font-size: 13.5px; } .ikx-drawer:not(.is-all) #ikxFWhere { width: clamp(220px, 24vw, 320px); } /* The relocated AI search — retrained to the row's language: a single 36px pill input (icon inside, clear + "Thinking…" chip contained), no margins, no summary. It now sits exactly like the other drawers' controls: [input][✓][✕]. */ .ikx-drawer:not(.is-all) .ikx-railsearch-wrap--drawer { padding: 0; display: flex; align-items: center; } .ikx-drawer:not(.is-all) .ikx-railsearch { margin: 0; /* kills the wide-rail margin-bottom:12px */ height: 36px; width: clamp(240px, 28vw, 340px); } .ikx-drawer:not(.is-all) .ikx-railsearch-input { height: 36px; padding: 0 30px 0 34px; /* row-sized (was 11px vertical ≈ 46px) */ border-radius: 12px; font-size: 13.5px; } .ikx-drawer:not(.is-all) .ikx-railsearch-ico { left: 10px; } .ikx-drawer:not(.is-all) .ikx-railsearch-ico svg { width: 15px; height: 15px; } .ikx-drawer:not(.is-all) .ikx-railsearch-clear { right: 6px; } .ikx-drawer:not(.is-all) .ikx-search-ai { right: 30px; font-size: 0.56rem; padding: 2px 6px; border-radius: 8px; } .ikx-drawer:not(.is-all) .ikx-search-summary { display: none; } } /* Row primitives (all breakpoints — the mobile sheet benefits too) */ .ikx-fldrow { display: flex; align-items: center; gap: 8px; } .ikx-fldrow .ikx-pricefield { display: flex; gap: 6px; align-items: center; } .ikx-fldrow .ikx-fld--row { width: clamp(110px, 12vw, 160px); } .ikx-fldrow-sep { color: var(--ikx-muted-2); font-weight: 700; flex: 0 0 auto; } .ikx-fldsel { cursor: pointer; min-width: 150px; } /* ── 3. MOSAIC vs DOT RAIL — hard guarantee ───────────────────────────────── Belt and braces: the mosaic now stacks ABOVE the dots/count (z-6 vs z-4) AND the chrome is visibility-hidden (not just opacity-faded) while a mosaic is up, so nothing can bleed through mid-transition. The action cluster rides above the mosaic so the grid toggles stay reachable. */ .ikx-mosaic { z-index: 6; } .ikx-cardacts { z-index: 7; } .ikx-card-cover.is-mosaic .ikx-card-dots, .ikx-card-cover.is-mosaic .ikx-card-photocount { display: none; /* v6: gone entirely while a mosaic is up — no bleed-through, ever */ } /* Async-decode mosaic/grid tiles are now — cover the tile exactly. */ .ikx-mtile { overflow: hidden; background: var(--ikx-ink-2); } .ikx-mtile-img, .ikxd-gtile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ikxd-gtile { overflow: hidden; background: var(--ikx-ink-2); } .ikxd-gtile .ikxd-gtile-n, .ikxd-gtile .ikxd-gtile-max { z-index: 1; } .ikx-mtile .ikx-mtile-max { z-index: 1; } /* ── 5. ADD-FILTER POPOVER (now body-mounted, fixed beside the ＋) ─────────── */ @media (min-width: 761px) { .ikx-addsheet { position: fixed; /* inline styles set left/top; this is the fallback */ width: 320px; max-height: min(70vh, 560px); overflow-y: auto; border: 1px solid var(--ikx-line); border-radius: 0 16px 16px 0; border-left: 0; background: var(--ikx-paper-2); box-shadow: var(--ikx-shadow-pop); padding: 14px; z-index: 2400; /* FIX: was 56 — below the .ikx overlay (z 1200), so the sheet opened invisibly behind it */ animation: ikxSheetIn .26s var(--ikx-ease); scrollbar-width: thin; } @keyframes ikxSheetIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } .ikx-addsheet .ikx-addsheet-grid { grid-template-columns: 1fr 1fr; } } /* ── 6. AGENCY MARK — the agency logo docks beside the lister ────────────── */ /* Detail crew card: avatar + logo as one stack */ .ikxd-p-avastack { grid-area: ava; position: relative; display: inline-flex; align-items: center; } .ikxd-p-avastack.has-logo { padding-right: 20px; /* room for the docked mark */ } .ikxd-p-agencylogo { position: absolute; right: 0; bottom: -3px; width: 24px; height: 24px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--ikx-paper-2), 0 3px 10px rgba(14, 14, 17, 0.18); } .ikxd-p-agencylogo img { width: 100%; height: 100%; object-fit: contain; } /* Agency identity tile — a proper horizontal logo rectangle beside the agent portrait, not a tiny badge. `contain` preserves full wordmarks and transparent agency marks without cropping. */ .ikx-strip-agencylogo { flex: 0 0 74px; align-self: stretch; min-height: 56px; margin-left: -12px; overflow: hidden; background: #fff; border: 1px solid var(--ikx-line); border-right: 1px solid var(--ikx-line); display: grid; place-items: center; padding: 6px 8px; } .ikx-strip-agencylogo img { width: 100%; height: 100%; max-height: 44px; object-fit: contain; display: block; } @media (max-width: 720px) { .ikx-strip-agencylogo { flex-basis: 62px; padding-inline: 6px; } } /* ── 7. ALIGNED CARDS ─────────────────────────────────────────────────────── ROOT CAUSE of the misalignment: card bodies have variable content (title wraps 1–2 lines, desc 0–2 lines), so the divider rows and lister strips drifted between neighbours. The card is now a column whose STRIP is pinned to the bottom (margin-top:auto) and whose title/desc reserve a fixed number of lines — every card's rows land on the same baselines. */ .ikx-grid { /* Natural card heights — the stretch was inflating every card to the track's full height (the "huge white gap"). Content is deterministic now (fixed cover ratio, 1-line title, 2 reserved desc lines), so the cards align WITHOUT stretching. */ align-items: flex-start; } .ikx-grid .ikx-card { display: flex; flex-direction: column; } .ikx-grid .ikx-card .ikx-card-body { flex: 0 0 auto; /* size to content — never grow into empty space */ display: flex; flex-direction: column; } .ikx-grid .ikx-card .ikx-card-strip { margin-top: auto; /* no-op at natural height; keeps the strip last */ } .ikx-card-title { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Reserve exactly two description lines whether the copy is one word or a paragraph — the ellipsis (already clamped at 2) now always lands on the same baseline. The full story lives in the maximized experience. */ .ikx-card-desc { min-height: calc(2 * 1.5em); } /* ── 8. HEADER — one centred row: title — count ───────────────────────────── */ .ikx-titlewrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 12px; text-align: center; } .ikx-titlewrap .ikx-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ikx-titlewrap .ikx-count { margin: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } /* The dash he asked for: "… — National — 2 live listings" */ .ikx-titlewrap .ikx-count::before { /* \2014 = em dash. NEVER a raw "—" here: generated content with raw multi-byte glyphs mojibakes ("â€\u009d") when the stylesheet is decoded as Windows-1252 (charset-less response + no BOM / @charset). The escape is ASCII-only and immune. */ content: "\2014"; color: var(--ikx-muted-2); font-weight: 600; margin-right: 4px; } @media (max-width: 760px) { /* Phones: let the pair wrap rather than crush the title */ .ikx-titlewrap { flex-wrap: wrap; row-gap: 2px; } } /* ═══ END LISTING EXPERIENCE v5 ═══════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v6 — MAP PANEL, AUTOSUGGEST, LOADER, AVATAR SIZING ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. PREMIUM LOADER — card-shaped shimmer, not bare rectangles ─────────── */ .ikx-skel { width: clamp(280px, 26vw, 380px); flex: 0 0 auto; border-radius: 4px; overflow: hidden; background: var(--ikx-paper-2); box-shadow: 0 10px 30px -22px rgba(14, 14, 17, 0.35); } .ikx-skel-cover { aspect-ratio: 4 / 3.4; background: linear-gradient(100deg, #e8edf3 40%, #f4f7fa 50%, #e8edf3 60%); background-size: 220% 100%; animation: ikxShimmer 1.4s ease-in-out infinite; position: relative; } /* A quiet brand pulse at the heart of the cover — "we're curating". */ .ikx-skel-cover::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ikx-orange); opacity: .55; animation: ikxSkelPulse 1.4s ease-in-out infinite; } .ikx-skel-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; } .ikx-skel-line { height: 12px; border-radius: 999px; background: linear-gradient(100deg, #e8edf3 40%, #f4f7fa 50%, #e8edf3 60%); background-size: 220% 100%; animation: ikxShimmer 1.4s ease-in-out infinite; } .ikx-skel-line.w40 { width: 40%; } .ikx-skel-line.w90 { width: 90%; } .ikx-skel-line.w70 { width: 70%; } @keyframes ikxShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @keyframes ikxSkelPulse { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.5); opacity: .8; } } /* ── 2. LISTED-BY SIZING — 20% bigger square whenever an image is present ── */ .ikx-strip-avatar.has-photo { width: 67px; /* 56 × 1.2 — the photo gets room to read as a photo */ } .ikxd-p-avastack.has-photo .ikxd-p-ava { width: 48px; /* 40 × 1.2 on the detail crew card */ height: 48px; } /* ── 3. WHERE AUTOSUGGEST — fixed dropdown (the compact drawer clips) ─────── */ .ikx-wsug { position: fixed; z-index: 70; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--ikx-line); border-radius: 14px; background: var(--ikx-paper-2); box-shadow: var(--ikx-shadow-pop); animation: ikxSheetIn .2s var(--ikx-ease); } .ikx-wsug-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font-family: var(--ikx-font); transition: background .16s var(--ikx-ease); } .ikx-wsug-item svg { width: 15px; height: 15px; color: var(--ikx-orange); flex: 0 0 auto; } .ikx-wsug-item span { display: flex; flex-direction: column; min-width: 0; } .ikx-wsug-item b { font-size: 13.5px; font-weight: 700; color: var(--ikx-ink); } .ikx-wsug-item i { font-style: normal; font-size: 11.5px; color: var(--ikx-muted); } .ikx-wsug-item:hover { background: rgba(245, 130, 32, 0.08); } /* ── 4. TOPBAR MAP TOGGLE ─────────────────────────────────────────────────── */ .ikx-maptoggle { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; margin-right: 10px; border: 1px solid var(--ikx-line-2); border-radius: 999px; background: var(--ikx-paper-2); color: var(--ikx-ink-2); font-family: var(--ikx-font); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color .2s var(--ikx-ease), color .2s var(--ikx-ease), background .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikx-maptoggle svg { width: 16px; height: 16px; } .ikx-maptoggle:hover { border-color: var(--ikx-orange); color: var(--ikx-orange); transform: translateY(-1px); } .ikx-maptoggle.is-on { background: var(--ikx-ink-2); border-color: var(--ikx-ink-2); color: #fff; } .ikx-maptoggle.is-on svg { color: var(--ikx-orange); } /* ── 5. MAP PANEL — right-docked, drag-scalable, collapsible ──────────────── */ @media (min-width: 761px) { #ikx.has-map .ikx-results { margin-right: var(--ikx-map-w, 380px); transition: margin-right .3s var(--ikx-ease); } #ikx.has-map.map-collapsed .ikx-results { margin-right: 44px; } .ikx-mappanel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--ikx-map-w, 380px); z-index: 7; /* below the drawer (55) + detail; above the results */ background: #eaf0f3; border: 1px solid var(--ikx-line); box-shadow: -26px 0 50px -40px rgba(14, 14, 17, 0.4); display: flex; transition: width .3s var(--ikx-ease); } .ikx-mappanel.is-collapsed { width: 44px; } .ikx-mappanel.is-collapsed .ikx-mappanel-canvas, .ikx-mappanel.is-collapsed .ikx-mappanel-grip { display: none; } .ikx-mappanel.is-collapsed .ikx-mappanel-collapse svg { transform: rotate(180deg); } .ikx-mappanel-grip { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 3; touch-action: none; } .ikx-mappanel-grip::after { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 46px; border-radius: 999px; background: var(--ikx-line-2); transition: background .2s var(--ikx-ease); } .ikx-mappanel-grip:hover::after { background: var(--ikx-orange); } .ikx-mappanel-collapse { position: absolute; left: 8px; top: 12px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ikx-line); border-radius: 10px; background: var(--ikx-paper-2); color: var(--ikx-muted); cursor: pointer; box-shadow: var(--ikx-shadow-card); transition: color .2s var(--ikx-ease), transform .2s var(--ikx-ease); } .ikx-mappanel-collapse svg { width: 14px; height: 14px; transition: transform .3s var(--ikx-ease); } .ikx-mappanel-collapse:hover { color: var(--ikx-orange); } .ikx-mappanel-canvas { flex: 1; min-width: 0; } .ikx-mappanel-note { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center; font-family: var(--ikx-font); font-size: 13px; font-weight: 600; color: var(--ikx-muted); } } @media (max-width: 760px) { /* Phones: the map takes the whole results area when toggled */ .ikx-mappanel { position: absolute; inset: 0; z-index: 7; background: #eaf0f3; } .ikx-mappanel-grip { display: none; } .ikx-maptoggle span { display: none; } } /* ── 6. PRICE PILLS — the Stay map language in ikx clothing ──────────────── */ .ikxm-pill { position: absolute; transform: translate(-50%, -100%); padding: 6px 13px; border: 0; border-radius: 999px; background: #ffffff; color: var(--ikx-ink); font-family: var(--ikx-font); font-size: 12.5px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 3px 14px rgba(14, 14, 17, 0.22), 0 0 0 1.5px rgba(15, 23, 42, 0.06); white-space: nowrap; transition: transform .16s var(--ikx-ease), background .16s var(--ikx-ease), color .16s var(--ikx-ease); } .ikxm-pill::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: inherit; box-shadow: 2px 2px 3px rgba(14, 14, 17, 0.08); } .ikxm-pill:hover { transform: translate(-50%, -100%) scale(1.08); background: var(--ikx-ink-2); color: #fff; z-index: 5; } /* City-level (address hidden): dashed brand ring signals "approximate". */ .ikxm-pill.is-approx { box-shadow: 0 3px 14px rgba(14, 14, 17, 0.18), 0 0 0 1.5px rgba(245, 130, 32, 0.65); } /* ═══ END LISTING EXPERIENCE v6 ═══════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v7 — FULL-BLEED CREW CARDS (the "Lora" inspiration) ---------------------------------------------------------------------------- The person's photo IS the card: full-bleed portrait, identity on a bottom scrim, frosted contact icons over the image, agency mark docked top-right. Slightly larger footprint than the inspiration (176×216; primary 190×232). These rules deliberately RESET the v4 grid-card layout for `.ikxd-p--v7` (higher specificity, appended later) — the v4 rules stay for nothing else. ════════════════════════════════════════════════════════════════════════════ */ .ikxd-p.ikxd-p--v7 { position: relative; display: block; /* resets the v4 grid template */ padding: 0; width: 176px; min-width: 176px; max-width: 176px; height: 216px; border: 0; border-radius: 20px; overflow: hidden; background: var(--ikx-ink-2); box-shadow: 0 14px 34px -20px rgba(14, 14, 17, 0.5); transition: transform .24s var(--ikx-ease), box-shadow .24s var(--ikx-ease); } .ikxd-p.ikxd-p--v7:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -20px rgba(14, 14, 17, 0.6); border-color: transparent; } /* The primary lister reads slightly LARGER + carries the brand ring. */ .ikxd-p.ikxd-p--v7.ikxd-p--primary { width: 190px; min-width: 190px; max-width: 190px; height: 232px; box-shadow: 0 0 0 2.5px rgba(245, 130, 32, 0.75), 0 16px 38px -20px rgba(14, 14, 17, 0.55); } /* The portrait — all over the card */ .ikxd-p2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; /* faces live in the upper half */ transition: transform .5s var(--ikx-ease); } .ikxd-p.ikxd-p--v7:hover .ikxd-p2-img { transform: scale(1.045); } /* No photo → premium brand gradient + big initials. Never a placeholder. */ .ikxd-p2-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 120% at 85% 10%, rgba(86, 196, 248, 0.35), transparent 55%), linear-gradient(150deg, #2a2f35, var(--ikx-ink)); color: rgba(255, 255, 255, 0.9); font-family: var(--ikx-font); font-size: 44px; font-weight: 800; letter-spacing: .04em; padding-bottom: 52px; /* optically centre above the meta scrim */ } /* Readability scrim — identity + icons sit on this */ .ikxd-p2-scrim { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(10, 11, 13, 0.88) 0%, rgba(10, 11, 13, 0.55) 42%, transparent 100%); pointer-events: none; } /* Identity overlay (name + role · agency) */ .ikxd-p--v7 .ikxd-p-meta { position: absolute; left: 14px; right: 12px; bottom: 52px; display: flex; flex-direction: column; gap: 2px; min-width: 0; pointer-events: none; } .ikxd-p--v7 .ikxd-p-meta b { font-family: var(--ikx-font); font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ikxd-p--v7 .ikxd-p-meta i { font-style: normal; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Contact icons — frosted over the image, bottom row */ .ikxd-p--v7 .ikxd-p-acts { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 7px; margin: 0; z-index: 3; transition: opacity .18s var(--ikx-ease); } /* While a contact is revealed (bar docked at the bottom), fade the trigger icons and lift the identity so the bar reads cleanly. :has() is supported across current evergreen browsers; the fallback is simply no lift. */ .ikxd-p--v7:has(.ikxd-p-val:not([hidden])) .ikxd-p-acts { opacity: 0; pointer-events: none; } .ikxd-p--v7:has(.ikxd-p-val:not([hidden])) .ikxd-p-meta { bottom: 62px; } /* The copy button sits inline at the end of the reveal bar. */ .ikxd-p--v7 .ikxd-p-val .ikxd-revealed-copy { flex: 0 0 auto; width: 30px; height: 30px; align-self: flex-start; } .ikxd-p--v7 .ikxd-pico { width: 32px; height: 32px; border: 0; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ikx-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); } .ikxd-p--v7 .ikxd-pico:hover { background: var(--ikx-orange); color: #fff; } .ikxd-p--v7 .ikxd-pico--msg { background: var(--ikx-ink-2); color: #fff; } .ikxd-p--v7 .ikxd-pico--msg:hover { background: var(--ikx-orange); } .ikxd-p--v7 .ikxd-pico.is-done { background: var(--ikx-orange); color: #fff; } .ikxd-p--v7 .ikxd-pico.is-none { background: rgba(255, 255, 255, 0.4); color: rgba(26, 29, 32, 0.55); } /* Agency mark — docked top-right ON the photo (only when it exists) */ .ikxd-p--v7 .ikxd-p-agencylogo { position: absolute; top: 10px; right: 10px; bottom: auto; left: auto; width: 30px; height: 30px; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28); z-index: 2; } /* Revealed value — frosted dark pill floating above the icon row */ .ikxd-p--v7 .ikxd-p-val { /* Revealed contact = a bar docked to the card's bottom edge. Full width, its own scrim, value on its own line — a long email/address wraps to two lines instead of truncating. Overlays the photo (no layout push, so nothing shifts), and rides with the card on scroll. */ position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(8, 9, 11, 0.96) 72%, rgba(8, 9, 11, 0.72) 100%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: ikxRevealIn .2s var(--ikx-ease); } @keyframes ikxRevealIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ikxd-p--v7 .ikxd-p-val .ikxd-p-val-link { flex: 1 1 auto; min-width: 0; background: transparent; padding: 0; border-radius: 0; /* full value visible: wrap long emails/addresses to a second line rather than truncating with an ellipsis */ white-space: normal; word-break: break-word; line-height: 1.3; text-align: left; font-size: 12px; } .ikxd-p--v7 .ikxd-p-val .ikxd-p-val-link span { white-space: normal; overflow: visible; text-overflow: clip; } .ikxd-p--v7 .ikxd-p-val .ikxd-p-val-link svg { flex: 0 0 auto; } .ikxd-p--v7 .ikxd-p-val .ikxd-revealed-copy { background: rgba(255, 255, 255, 0.92); border: 0; } /* The strip breathes a little more around the taller cards */ .ikxd-crew2-strip { gap: 12px; padding: 4px 2px 8px; align-items: flex-end; /* primary is taller — baselines align at the bottom */ } @media (max-width: 760px) { .ikxd-p.ikxd-p--v7, .ikxd-p.ikxd-p--v7.ikxd-p--primary { width: 160px; min-width: 160px; height: 200px; } } /* ═══ END LISTING EXPERIENCE v7 ═══════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v8 — INFO-PANE CRUSH FIX, MELIKHAYA, DOCKED MAP RAIL ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. THE CRUSH FIX ─────────────────────────────────────────────────────── ROOT CAUSE of "features not viewable" + "Share shows something but you can't see anything": .ikxd-info is a flex COLUMN with overflow-y:auto, and flex children default to flex-shrink:1. Children whose overflow isn't visible (.ikxd-specs, the share sheet) resolve min-height to 0 — so once content grew past the viewport (the taller v7 crew card), the browser COMPRESSED them to slivers instead of scrolling. Children must never shrink; the pane scrolls. */ .ikxd-info > * { flex-shrink: 0; } /* ── 2. MELIKHAYA — out of the way while the listing experience owns the screen. Every fixed piece of the widget (trigger, greeting bubble, hover label, chat window, minimised pill, backdrop, recaptcha modal) — and a multi-property knockout so a later-loading melikhaya stylesheet with !important on display can't win the tie: visibility/opacity/pointer-events carry no !important on their side. */ body.ikx-active [id^="melikhaya"], body.ikx-active [id^="mel-"], body.ikx-active #melRecaptchaModal, body.ikx-active .mel-trigger-btn, body.ikx-active .mel-greet-bubble, body.ikx-active .mel-hover-label, body.ikx-active .mel-window, body.ikx-active .mel-minimised-pill, body.ikx-active .mel-backdrop { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ── 3. MAP RAIL — always docked, chevron expands (platform-capabilities pattern). The panel's top offset is measured inline (below the header). */ @media (min-width: 761px) { /* Collapsed: a slim tactile rail with a vertical MAP tab + chevron. */ .ikx-mappanel.is-collapsed { cursor: pointer; background: var(--ikx-paper-2); border: 1px solid var(--ikx-line); box-shadow: -14px 0 30px -26px rgba(14, 14, 17, 0.35); } .ikx-mappanel.is-collapsed:hover { background: var(--ikx-paper); } .ikx-mappanel-tab { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-direction: column; align-items: center; gap: 10px; color: var(--ikx-muted); pointer-events: none; } .ikx-mappanel-tab svg { width: 17px; height: 17px; color: var(--ikx-orange); } .ikx-mappanel-tab i { font-style: normal; font-family: var(--ikx-font); font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; writing-mode: vertical-rl; } .ikx-mappanel.is-collapsed .ikx-mappanel-tab { display: flex; } } @media (max-width: 760px) { /* Phones: expanded = the whole results area (as before); collapsed = a floating round tab bottom-left, NOT a full-screen sheet. */ .ikx-mappanel.is-collapsed { position: absolute; inset: auto auto 96px 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ikx-line); background: var(--ikx-paper-2); box-shadow: var(--ikx-shadow-card); overflow: hidden; } .ikx-mappanel.is-collapsed .ikx-mappanel-canvas, .ikx-mappanel.is-collapsed .ikx-mappanel-collapse { display: none; } .ikx-mappanel.is-collapsed .ikx-mappanel-tab { display: grid; place-items: center; position: absolute; inset: 0; transform: none; left: auto; top: auto; } .ikx-mappanel.is-collapsed .ikx-mappanel-tab i { display: none; } .ikx-mappanel.is-collapsed .ikx-mappanel-tab svg { width: 20px; height: 20px; } #ikx.has-map.map-collapsed .ikx-results { margin-right: 0; } } /* Empty-geo notice floating on the canvas */ .ikxm-overlaynote { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 4; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--ikx-shadow-card); font-family: var(--ikx-font); font-size: 12.5px; font-weight: 700; color: var(--ikx-muted); white-space: nowrap; } .ikx-mappanel-canvas { position: relative; } /* ═══ END LISTING EXPERIENCE v8 ═══════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v8.1 — MAP PILL HOVER MINI-CARD Two stacked rectangles above the pill — the LISTER first, the HOUSE below — with the full price beneath both, exactly per the brief. ════════════════════════════════════════════════════════════════════════════ */ .ikxm-marker { position: absolute; transform: translate(-50%, -100%); } /* The pill inside the marker anchors normally; the marker owns placement */ .ikxm-marker .ikxm-pill { position: relative; transform: none; display: block; } .ikxm-marker .ikxm-pill:hover { transform: scale(1.06); } .ikxm-pop { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px); display: flex; flex-direction: column; gap: 7px; width: 178px; padding: 9px; border-radius: 18px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 34px rgba(14, 14, 17, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.06); opacity: 0; pointer-events: none; transition: opacity .18s var(--ikx-ease), transform .18s var(--ikx-ease); z-index: 6; } .ikxm-marker:hover .ikxm-pop { opacity: 1; transform: translateX(-50%) translateY(0); } .ikxm-marker:hover { z-index: 20; } /* Rectangle 1: the lister · Rectangle 2: the house */ .ikxm-pop-rect { position: relative; display: block; height: 79px; border-radius: 13px; overflow: hidden; background: var(--ikx-ink-2); } .ikxm-pop-rect img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .ikxm-pop-rect i { position: absolute; left: 8px; bottom: 6px; font-style: normal; font-family: var(--ikx-font); font-size: 10.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ikxm-pop-rect--ini { display: grid; place-items: center; background: radial-gradient(120% 120% at 85% 10%, rgba(86, 196, 248, 0.35), transparent 55%), linear-gradient(150deg, #2a2f35, var(--ikx-ink)); } .ikxm-pop-rect--ini b { color: rgba(255, 255, 255, 0.92); font-family: var(--ikx-font); font-size: 26px; font-weight: 800; padding-bottom: 12px; } /* The price beneath the two rectangles */ .ikxm-pop em { font-style: normal; text-align: center; font-family: var(--ikx-font); font-size: 15.5px; font-weight: 800; color: var(--ikx-ink); padding: 2px 0 1px; } /* Pop tail */ .ikxm-pop::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: rgba(255, 255, 255, 0.97); } @media (hover: none) { .ikxm-pop { display: none; } /* touch: tap opens the detail instead */ } /* ── Zoom-adaptive markers: at wide zoom the price pills become slim classic pins (a teardrop dot), decluttering a national view. Hover still opens the full mini-card. Toggled by .ikxm-zoomed-out on the canvas (set in JS at zoom < 11). ──────────────────────────────────────────────────────────── */ .ikxm-zoomed-out .ikxm-pill { width: 15px; height: 15px; min-width: 0; padding: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ikx-orange); box-shadow: 0 2px 8px rgba(14, 14, 17, 0.35), 0 0 0 2px #fff; overflow: hidden; } /* Hide the price text inside the dot; keep it in the DOM for hover/reveal. */ .ikxm-zoomed-out .ikxm-pill span { opacity: 0; } /* The tail is redundant on a teardrop — suppress it in dot mode. */ .ikxm-zoomed-out .ikxm-pill::after { display: none; } /* Approximate (hidden-address) markers keep the brand ring cue as a dot. */ .ikxm-zoomed-out .ikxm-pill.is-approx { background: #fff; box-shadow: 0 2px 8px rgba(14, 14, 17, 0.3), 0 0 0 2px var(--ikx-orange); } /* Hover still enlarges slightly so the dot is grabbable, and the mini-card (unrotated, via its own transform) appears exactly as before. */ .ikxm-zoomed-out .ikxm-marker:hover .ikxm-pill { transform: rotate(-45deg) scale(1.15); } /* ═══ END LISTING EXPERIENCE v8.1 ═════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ LISTING EXPERIENCE v9 — DRAWER GEOMETRY ARMOR + SELF-CONTAINED SEARCH ---------------------------------------------------------------------------- Three review rounds showed drawer inputs rendering at base sizes on the live site while this file's override rules are verifiably correct — the signature of deploy/caching skew, not cascade logic. This block is the armor: it sits at the ABSOLUTE end of the file, outside every media query, and pins the critical geometry with !important so no stale fragment, bundler reorder, or later-loading sheet can reintroduce the bug. Scoped tightly to drawer descendants — nothing outside the drawer is touched. ════════════════════════════════════════════════════════════════════════════ */ /* The compact drawer itself: one 48px row, clipped, flush to the rail. */ @media (min-width: 761px) { .ikx-drawer:not(.is-all) { height: 48px !important; min-height: 48px !important; max-height: 48px !important; overflow: hidden !important; align-items: center !important; } } /* Every control inside ANY drawer is row-sized. Belt-and-braces geometry. */ .ikx-drawer .ikx-fld, .ikx-drawer .ikx-fldsel, .ikx-drawer select, .ikx-drawer input[type="text"], .ikx-drawer input[type="number"] { height: 36px !important; min-height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; font-size: 13.5px !important; line-height: 34px !important; box-sizing: border-box !important; } /* ── Self-contained drawer search (ikx-dsearch has ONE styling source) ──── */ .ikx-dsearch { position: relative; display: inline-flex; align-items: center; height: 36px; width: clamp(240px, 28vw, 340px); border: 1px solid var(--ikx-line-2); border-radius: 12px; background: var(--ikx-paper); transition: border-color .18s var(--ikx-ease), box-shadow .18s var(--ikx-ease); } .ikx-dsearch:focus-within { border-color: var(--ikx-orange); box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.15); } .ikx-dsearch-ico { display: grid; place-items: center; padding: 0 4px 0 10px; color: var(--ikx-muted); flex: 0 0 auto; } .ikx-dsearch-ico svg { width: 15px; height: 15px; } .ikx-dsearch-input { flex: 1; min-width: 0; height: 100% !important; border: 0 !important; background: transparent !important; padding: 0 54px 0 4px !important; margin: 0 !important; font-family: var(--ikx-font); font-size: 13.5px !important; color: var(--ikx-ink); outline: none !important; box-shadow: none !important; } .ikx-dsearch-ai { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); padding: 2px 7px; border-radius: 8px; background: rgba(245, 130, 32, 0.12); color: var(--ikx-orange); font-family: var(--ikx-font); font-size: 0.56rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; pointer-events: none; } .ikx-dsearch-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--ikx-paper-2); color: var(--ikx-muted); cursor: pointer; transition: color .16s var(--ikx-ease), background .16s var(--ikx-ease); } .ikx-dsearch-clear svg { width: 11px; height: 11px; } .ikx-dsearch-clear:hover { background: var(--ikx-sold); color: #fff; } /* The relocated summary node stays for renderSearchSummary's contract but never occupies the one-row drawer. */ .ikx-drawer #ikxSearchSummary { display: none !important; } /* ═══ END LISTING EXPERIENCE v9 ═══════════════════════════════════════════ */ /* ── Value-feature chips on the detail viewer ───────────────────────── Scene-4 persona chips + Scene-3 extras, rendered between the specs row and the description. Quiet, tag-like — reads as facts, not UI. */ .ikxd-featchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; } .ikxd-featchip { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--ikx-line, #e7e3dd); border-radius: 999px; background: var(--ikx-paper-2, #faf8f5); color: var(--ikx-ink, #1A1D20); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } /* ════════════════════════════════════════════════════════════════════════════ v7 · MOBILE HEADER TITLE + TOOLBAR ICON TIDY-UP (owner-reported fixes) ──────────────────────────────────────────────────────────────────────────── 1 · THE TITLE RETURNS TO THE HEADER, done right: small, ONE line, ellipsized, vertically aligned with the logo — never bigger than the brand mark. The live-count sits under it in tiny type. (The earlier attempt dropped the full headline into the header at desktop size; it clipped and wrapped.) The on-page duplicate title hides; the on-page TOOLBAR (count · Sort · Filters) stays — that row works and stays sticky. 2 · STRAY ICON BLOBS KILLED: the rail HEAD (its label + expand-all sliders circle + collapse chevron) is desktop chrome — on mobile the Filters button in the toolbar owns that job, so the whole head hides. This is what was floating as the unexplained sliders/pin circles. 3 · The rail's intelligent-search can never collapse into a round blob: explicit full-width + touch-height guards. Loads last in this file, so it wins over the PAGE-HEAD block above. ════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* ── 1 · compact header title ── */ .ikx-topbar .ikx-titlewrap { display: flex; /* the page-head block hid it — restore */ flex-direction: column; justify-content: center; gap: 1px; flex: 1 1 auto; min-width: 0; /* lets the title ellipsize, not overflow */ position: static; transform: none; text-align: left; align-items: flex-start; max-width: none; } .ikx-topbar .ikx-title { display: block; /* kill the 2-line clamp variant */ -webkit-line-clamp: initial; line-clamp: initial; -webkit-box-orient: initial; font-size: 0.92rem; /* never taller than the 26px logo */ font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin: 0; } .ikx-topbar .ikx-count { font-size: 0.66rem; line-height: 1.2; } /* The on-page title would now duplicate the header — hide the H2 only; the toolbar row beneath it stays exactly as designed. */ .ikx-pagehead .ikx-pagetitle { display: none; } .ikx-pagehead { padding-top: 6px; } /* ── 2 · no stray chrome: the ENTIRE rail head is desktop-only ── */ .ikx-rail-head, .ikx-rail-expandall, .ikx-rail-collapse, .ikx-rail-reopen { display: none !important; } /* ── 3 · the rail search is always a full-width touch field ── */ .ikx-rail .ikx-railsearch, .ikx-rail .ikx-railsearch-wrap { display: flex; width: 100%; min-width: 0; } .ikx-rail .ikx-railsearch-input { width: 100%; min-height: 44px; /* comfortable thumb target */ border-radius: 12px; } } /* ════════════════════════════════════════════════════════════════════════════ MOBILE POLISH (≤760px) — appended last so it wins by source order over every earlier phone layer. Four scoped fixes, each mapped to a reported symptom: A · Header title — a touch smaller, centred in the header space (moved off the logo, toward centre), nudged down a hair; count line kept compact. B · "Searching…" toolbar count removed. The header already shows the live count; the .ikx-toolbar-count mirror is a duplicate that also never resolves (renderChrome() updates #ikxCountText only, not the toolbar mirror — see JS note), so it sits on "Searching…" forever. C · Collapsed map panel / reopen FAB (#ikxMapPanel) removed on phones. Its inline top:166px (set by positionMapPanel) overrode the intended bottom-left dock, so it leaked into the results area; there is no mobile map-toggle to reach it anyway, so the whole panel is hidden here. D · Reset button's , so it must own a fixed positioning context rather than inherit the historic absolutely-positioned action bubble. */ .ikxd-shareportal { position: fixed; inset: 0; z-index: 14650; display: grid; place-items: center; padding: 18px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .ikxd-shareportal.is-open { opacity: 1; pointer-events: auto; } .ikxd-sharebackdrop { position: absolute; inset: 0; background: rgba(8,10,14,.52); -webkit-backdrop-filter: blur(14px) saturate(88%); backdrop-filter: blur(14px) saturate(88%); } .ikxd-shareportal .ikxd-sharesheet { position: relative; right: auto; bottom: auto; z-index: 1; width: min(560px, calc(100vw - 36px)); max-width: none; max-height: min(86dvh, 720px); overflow-y: auto; border-radius: 22px; background: #fff; box-shadow: 0 38px 90px -28px rgba(0,0,0,.72); opacity: 0; transform: translateY(18px) scale(.98); } .ikxd-shareportal .ikxd-sharesheet::before, .ikxd-shareportal .ikxd-sharesheet::after { display: none; } .ikxd-shareportal .ikxd-sharesheet.is-open { opacity: 1; transform: translateY(0) scale(1); } .ikxd-shareportal .ikxd-sharesheet-h { padding: 18px 20px 10px; } .ikxd-share-kicker { display: block; margin-bottom: 3px; color: var(--ikx-orange); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .ikxd-sharesheet-h h3 { margin: 0; font: inherit; font-size: 19px; font-weight: 850; color: var(--ikx-ink); } .ikxd-share-preview { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 13px; align-items: center; margin: 2px 20px 6px; padding: 10px; border: 1px solid var(--ikx-line); border-radius: 16px; background: var(--ikx-paper); } .ikxd-share-preview-img { width: 78px; height: 62px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #eef1f4; } .ikxd-share-preview-img img { width: 100%; height: 100%; object-fit: cover; } .ikxd-share-preview-img svg { width: 26px; height: 26px; color: var(--ikx-muted); } .ikxd-share-preview-copy, .ikxd-share-preview-copy b, .ikxd-share-preview-copy span, .ikxd-share-preview-copy small { display: block; min-width: 0; } .ikxd-share-preview-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ikx-ink); } .ikxd-share-preview-copy span { margin-top: 3px; color: var(--ikx-orange); font-size: 12px; font-weight: 800; } .ikxd-share-preview-copy small { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ikx-muted); font-size: 10px; } .ikxd-shareportal .ikxd-sharesheet-grid { padding: 12px 20px 14px; } .ikxd-sharech-copy b, .ikxd-sharech-copy small { display: block; } .ikxd-sharech-copy small { display: none; } .ikxd-share-caption { margin: 0 20px 18px; padding: 12px 14px; border: 1px solid var(--ikx-line); border-radius: 14px; background: #fafbfc; } .ikxd-share-caption > span { display: block; margin-bottom: 5px; color: var(--ikx-muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .ikxd-share-caption p { margin: 0; color: #404857; font-size: 11px; line-height: 1.45; } @media (max-width: 560px) { .ikxd-shareportal { align-items: end; padding: 8px; } .ikxd-shareportal .ikxd-sharesheet { width: 100%; max-height: 88dvh; border-radius: 22px 22px 12px 12px; } .ikxd-shareportal .ikxd-sharesheet-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .ikxd-sharech { grid-template-columns: auto minmax(0,1fr); justify-items: start; align-items: center; text-align: left; padding-inline: 12px; } } @media (prefers-reduced-motion: reduce) { .ikxpd-visual img.is-tab-rotating { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ 2026-07-19 STABLE PROPERTY-CARD HOVER HIT AREA --------------------------------------------------------------------------- Moving/scaling the article itself changes the browser hit-test boundary. When the pointer sits on an outer edge, that can repeatedly toggle :hover as the card rises and falls (the visible "rattle"). Keep the article's geometry fixed and express elevation through border/shadow plus the existing two-plane inner treatment. No JavaScript or pointer timers are involved. ════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 761px) and (hover: hover) and (pointer: fine) { .ikx-results .ikx-grid .ikx-card.is-in, .ikx-results .ikx-grid .ikx-card.is-in:hover, .ikx-results .ikx-grid .ikx-card.is-in:focus-within, .ikx-results .ikx-grid .ikx-card.is-in:active, .ikx-results .ikx-grid .ikx-card.is-in.is-thumb-active, .ikx-results .ikx-grid .ikx-card.is-in.is-thumb-active:hover, .ikx-results .ikx-grid .ikx-card.is-in.is-thumb-active:focus-within { transform: translate3d(0, 0, 0) !important; } .ikx-results .ikx-grid .ikx-card.is-in:hover, .ikx-results .ikx-grid .ikx-card.is-in:focus-within { border-color: var(--ikx-orange); box-shadow: 0 0 0 2px rgba(245, 130, 32, .13), 0 24px 46px -24px rgba(14, 14, 17, .46); z-index: 5; } .ikx-results .ikx-grid .ikx-card.is-in:active { box-shadow: 0 0 0 1px rgba(245, 130, 32, .16), 0 16px 34px -25px rgba(14, 14, 17, .4); } } @media (prefers-reduced-motion: reduce) { .ikx-results .ikx-grid .ikx-card.is-in, .ikx-results .ikx-grid .ikx-card.is-in:hover, .ikx-results .ikx-grid .ikx-card.is-in:focus-within, .ikx-results .ikx-grid .ikx-card.is-in:active { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ JULY 2026 — PROFILE CONTACT DOCK · HIGH-CONTRAST + GEOMETRY LOCK --------------------------------------------------------------------------- Makes the phone, email and message controls immediately legible while preserving their original containment inside the full-bleed lister card. This is presentation-only: no handlers, reveal logic or timers change. ═══════════════════════════════════════════════════════════════════════════ */ /* The portrait card is the sole containing block and clipping boundary. */ .ikxd-p.ikxd-p--v7 { position: relative !important; overflow: hidden !important; isolation: isolate; contain: paint; } /* One stable segmented dock, permanently attached to the card's bottom-left. Its dimensions never change on hover/focus, preventing detachment or jitter. */ .ikxd-p.ikxd-p--v7 .ikxd-p-acts, .ikxd-p.ikxd-p--v7:hover .ikxd-p-acts, .ikxd-p.ikxd-p--v7:focus-within .ikxd-p-acts { position: absolute !important; left: 12px !important; right: auto !important; top: auto !important; bottom: 12px !important; z-index: 14 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; width: max-content !important; max-width: calc(100% - 24px) !important; min-height: 40px; margin: 0 !important; padding: 4px !important; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 999px; background: rgba(247, 249, 251, 0.96); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(15, 23, 42, 0.12); -webkit-backdrop-filter: blur(12px) saturate(1.18); backdrop-filter: blur(12px) saturate(1.18); opacity: 1 !important; transform: none !important; pointer-events: auto !important; } /* Keep the identity clear of the slightly more legible dock in every state. */ .ikxd-p.ikxd-p--v7 .ikxd-p-meta, .ikxd-p.ikxd-p--v7:has(.ikxd-p-val:not([hidden])) .ikxd-p-meta { bottom: 61px !important; } /* High-contrast buttons with fixed geometry. */ .ikxd-p.ikxd-p--v7 .ikxd-pico, .ikxd-p.ikxd-p--v7 .ikxd-pico:hover, .ikxd-p.ikxd-p--v7 .ikxd-pico:active, .ikxd-p.ikxd-p--v7 .ikxd-pico:focus-visible { position: relative !important; inset: auto !important; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 1px solid rgba(17, 24, 39, 0.18) !important; border-radius: 50% !important; background: #ffffff !important; color: #111820 !important; box-shadow: 0 3px 9px rgba(15, 23, 42, 0.18) !important; transform: none !important; opacity: 1 !important; } .ikxd-p.ikxd-p--v7 .ikxd-pico svg { width: 16px !important; height: 16px !important; display: block; color: currentColor; stroke: currentColor; stroke-width: 2.15; filter: none !important; } /* Message is the primary contact route, distinguished without losing clarity. */ .ikxd-p.ikxd-p--v7 .ikxd-pico--msg, .ikxd-p.ikxd-p--v7 .ikxd-pico--msg:hover, .ikxd-p.ikxd-p--v7 .ikxd-pico--msg:active, .ikxd-p.ikxd-p--v7 .ikxd-pico--msg:focus-visible { border-color: var(--ikx-orange) !important; background: var(--ikx-orange) !important; color: #ffffff !important; box-shadow: 0 4px 11px rgba(245, 130, 32, 0.32) !important; } /* Focus is visible but does not alter dimensions or position. */ .ikxd-p.ikxd-p--v7 .ikxd-pico:focus-visible { outline: 2px solid rgba(245, 130, 32, 0.92) !important; outline-offset: 1px !important; } .ikxd-p.ikxd-p--v7 .ikxd-pico.is-done { border-color: var(--ikx-orange) !important; background: var(--ikx-orange) !important; color: #ffffff !important; } .ikxd-p.ikxd-p--v7 .ikxd-pico.is-none { border-color: rgba(17, 24, 39, 0.1) !important; background: rgba(255, 255, 255, 0.82) !important; color: rgba(17, 24, 39, 0.44) !important; box-shadow: none !important; } /* Existing reveal remains inside the card and replaces the dock in place. */ .ikxd-p.ikxd-p--v7:has(.ikxd-p-val:not([hidden])) .ikxd-p-acts { visibility: hidden !important; pointer-events: none !important; } .ikxd-p.ikxd-p--v7 .ikxd-p-val { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 16 !important; max-width: 100% !important; } @media (max-width: 760px) { .ikxd-p.ikxd-p--v7 .ikxd-p-acts, .ikxd-p.ikxd-p--v7:hover .ikxd-p-acts, .ikxd-p.ikxd-p--v7:focus-within .ikxd-p-acts { left: 10px !important; bottom: 10px !important; max-width: calc(100% - 20px) !important; } .ikxd-p.ikxd-p--v7 .ikxd-p-meta, .ikxd-p.ikxd-p--v7:has(.ikxd-p-val:not([hidden])) .ikxd-p-meta { bottom: 59px !important; } } /* ═══ END PROFILE CONTACT DOCK · HIGH-CONTRAST + GEOMETRY LOCK ═══════════ */ /* ════════════════════════════════════════════════════════════════════════════ 2026-07-19 PROPERTY-DRILL HEART CELEBRATION ANCHOR ---------------------------------------------------------------------------- The shared love engine appends its celebration particles inside the clicked button. The static detail variant previously remained `position: static`, so those absolutely-positioned particles could resolve against a much larger ancestor and appear over the specifications or media pane. Make the Save button itself the stable positioning root while leaving its grid dimensions, click target and shared engagement behaviour untouched. ════════════════════════════════════════════════════════════════════════════ */ .ikxd-actions .ikh-love-btn.is-static { position: relative !important; overflow: visible !important; isolation: isolate; z-index: 4; } .ikxd-actions .ikh-love-btn.is-static .ikh-heart-glyph { position: relative; z-index: 2; } .ikxd-actions .ikh-love-btn.is-static .ikh-love-particle { left: 50% !important; top: 16% !important; z-index: 80 !important; pointer-events: none !important; } /* Ensure the celebration may rise above the action dock without being clipped, while keeping the dock's dimensions and placement completely unchanged. */ .ikxd-actions, .ikxd-track-stack { overflow: visible !important; } /* ════════════════════════════════════════════════════════════════════════════ 2026-07-19 PROPERTY-DRILL WATCH ALIGNMENT RESTORE ---------------------------------------------------------------------------- Keep the Watch and Save controls as independent, explicit grid items. The heart celebration remains positioned by the Save button only; none of its positioning rules may create a wrapper box or displace the Watch control. ════════════════════════════════════════════════════════════════════════════ */ .ikxd-actions > .ikxd-track-stack { display: contents !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; } .ikxd-actions .ikh-watch-btn.is-static { position: relative !important; inset: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; justify-self: stretch !important; box-sizing: border-box !important; margin: 0 !important; transform: none !important; vertical-align: middle !important; } .ikxd-actions .ikh-watch-btn.is-static svg { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; flex: 0 0 auto !important; } /* Lock the desktop row into deterministic columns. This removes any chance of the historic stacked Watch/Save wrapper re-entering flex layout after a state change or stylesheet race. */ @media (min-width: 861px) { .ikxd-actions .ikh-watch-btn.is-static { grid-column: 1 !important; grid-row: 1 !important; } .ikxd-actions .ikh-love-btn.is-static { grid-column: 2 !important; grid-row: 1 !important; } .ikxd-actions .ikxd-act--enquire { grid-column: 3 !important; grid-row: 1 !important; } .ikxd-actions .ikxd-act--alert { grid-column: 4 !important; grid-row: 1 !important; } .ikxd-actions .ikxd-act--share { grid-column: 5 !important; grid-row: 1 !important; } } /* Preserve the intentionally stacked mobile sequence without inheriting the explicit desktop grid coordinates. */ @media (max-width: 860px) { .ikxd-actions .ikh-watch-btn.is-static, .ikxd-actions .ikh-love-btn.is-static, .ikxd-actions .ikxd-act { grid-row: auto !important; } .ikxd-actions .ikh-watch-btn.is-static { grid-column: auto !important; order: 1 !important; } .ikxd-actions .ikh-love-btn.is-static { grid-column: auto !important; order: 2 !important; } } /* ═══ END PROPERTY-DRILL WATCH ALIGNMENT RESTORE ═══════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ 2026-07-19 PROFILE CONTACT DOCK · ALWAYS-VISIBLE PHONE + HOVER FEEDBACK --------------------------------------------------------------------------- The primary lister now always receives the phone reveal control. All contact controls remain visible at rest; hover/focus changes only their finish, not the dock's dimensions or anchoring inside the portrait card. ════════════════════════════════════════════════════════════════════════════ */ .ikxd-p.ikxd-p--v7 .ikxd-p-acts { visibility: visible !important; opacity: 1 !important; } /* Keep every control visible before interaction. */ .ikxd-p.ikxd-p--v7 .ikxd-pico:not(.is-none) { visibility: visible !important; opacity: 1 !important; } /* Premium feedback without changing layout measurements or dock placement. */ @media (hover: hover) and (pointer: fine) { .ikxd-p.ikxd-p--v7 .ikxd-pico:hover { border-color: rgba(245, 130, 32, .72) !important; background: #fff8f1 !important; color: #111820 !important; box-shadow: 0 7px 16px rgba(15, 23, 42, .24), 0 0 0 3px rgba(245, 130, 32, .13) !important; transform: translateY(-2px) scale(1.045) !important; } .ikxd-p.ikxd-p--v7 .ikxd-pico--msg:hover { border-color: #e86f0c !important; background: #e86f0c !important; color: #fff !important; box-shadow: 0 8px 18px rgba(245, 130, 32, .38), 0 0 0 3px rgba(245, 130, 32, .16) !important; } } .ikxd-p.ikxd-p--v7 .ikxd-pico:active { transform: translateY(0) scale(.96) !important; } /* The reveal result still replaces the dock in exactly the same anchored slot. */ .ikxd-p.ikxd-p--v7:has(.ikxd-p-val:not([hidden])) .ikxd-p-acts { visibility: hidden !important; opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { .ikxd-p.ikxd-p--v7 .ikxd-pico, .ikxd-p.ikxd-p--v7 .ikxd-pico:hover, .ikxd-p.ikxd-p--v7 .ikxd-pico:active { transform: none !important; transition: none !important; } } /* ═══ END PROFILE CONTACT DOCK · PHONE + HOVER FEEDBACK ═══════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ 2026-07-19 ACCESSIBLE ACTION-ROW ALIGNMENT + CONTACT ICON RESTING CONTRAST ---------------------------------------------------------------------------- 1. Watch/Watching and Save/Saved remain identical grid controls in every state. State-label changes cannot alter height, padding or baseline. 2. The lister contact controls use their high-contrast orange treatment at rest; hover adds only elevation, so visibility never depends on hover. ════════════════════════════════════════════════════════════════════════════ */ /* A deterministic row box prevents the shared engagement styles from producing different baselines after their labels change to Watching or Saved. */ .ikxd-actions { align-items: stretch !important; grid-auto-flow: row !important; } .ikxd-actions .ikh-watch-btn.is-static, .ikxd-actions .ikh-love-btn.is-static, .ikxd-actions .ikxd-act { box-sizing: border-box !important; align-self: stretch !important; justify-self: stretch !important; width: 100% !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; margin: 0 !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; line-height: 1 !important; vertical-align: middle !important; } /* The Save button is still the particle coordinate root, but it is not allowed to acquire a top/bottom offset or a different alignment box. */ .ikxd-actions .ikh-watch-btn.is-static, .ikxd-actions .ikh-love-btn.is-static { inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } .ikxd-actions .ikh-watch-btn.is-static::after, .ikxd-actions .ikh-love-btn.is-static::after { display: inline-flex !important; align-items: center !important; min-width: 0 !important; min-height: 18px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; white-space: nowrap !important; } .ikxd-actions .ikh-watch-btn.is-static svg, .ikxd-actions .ikh-love-btn.is-static svg, .ikxd-actions .ikxd-act svg { position: static !important; inset: auto !important; flex: 0 0 17px !important; width: 17px !important; height: 17px !important; margin: 0 !important; transform: none !important; } /* Keep the two shared controls in their own columns even after async state updates replace their labels. */ @media (min-width: 861px) { .ikxd-actions { grid-template-rows: 54px !important; } .ikxd-actions .ikh-watch-btn.is-static, .ikxd-actions .ikh-love-btn.is-static, .ikxd-actions .ikxd-act { grid-row: 1 !important; } } @media (max-width: 860px) { .ikxd-actions .ikh-watch-btn.is-static, .ikxd-actions .ikh-love-btn.is-static, .ikxd-actions .ikxd-act { height: 52px !important; min-height: 52px !important; max-height: 52px !important; } .ikxd-actions .ikxd-act--enquire { height: 60px !important; min-height: 60px !important; max-height: 60px !important; } } /* High-visibility resting state. This is deliberately the same colour finish that was previously reserved for hover, so users never need pointer hover to discover or distinguish the contact controls. */ .ikxd-p.ikxd-p--v7 .ikxd-p-acts, .ikxd-p.ikxd-p--v7:hover .ikxd-p-acts, .ikxd-p.ikxd-p--v7:focus-within .ikxd-p-acts { border: 1.5px solid rgba(245, 130, 32, .72) !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .40), 0 0 0 2px rgba(245, 130, 32, .13) !important; } .ikxd-p.ikxd-p--v7 .ikxd-pico, .ikxd-p.ikxd-p--v7 .ikxd-pico:not(.is-none), .ikxd-p.ikxd-p--v7 .ikxd-pico:hover, .ikxd-p.ikxd-p--v7 .ikxd-pico:focus-visible { visibility: visible !important; opacity: 1 !important; border: 1.5px solid rgba(245, 130, 32, .82) !important; background: #fff8f1 !important; color: #111820 !important; box-shadow: 0 5px 13px rgba(15, 23, 42, .26), 0 0 0 2px rgba(245, 130, 32, .12) !important; } /* Force all SVG primitives to inherit the accessible foreground colour rather than retaining lower-contrast inline strokes from older icon definitions. */ .ikxd-p.ikxd-p--v7 .ikxd-pico svg, .ikxd-p.ikxd-p--v7 .ikxd-pico svg * { color: currentColor !important; stroke: currentColor !important; opacity: 1 !important; filter: none !important; } /* Message remains the primary route and is solid orange before hover. */ .ikxd-p.ikxd-p--v7 .ikxd-pico--msg, .ikxd-p.ikxd-p--v7 .ikxd-pico--msg:hover, .ikxd-p.ikxd-p--v7 .ikxd-pico--msg:focus-visible { border-color: #e86f0c !important; background: var(--ikx-orange) !important; color: #ffffff !important; box-shadow: 0 6px 15px rgba(245, 130, 32, .40), 0 0 0 2px rgba(255, 255, 255, .26) !important; } /* Unavailable contact methods remain visible and recognisable, but clearly disabled. They are never faded into the photograph. */ .ikxd-p.ikxd-p--v7 .ikxd-pico.is-none { visibility: visible !important; opacity: 1 !important; border-color: rgba(245, 130, 32, .42) !important; background: rgba(255, 248, 241, .94) !important; color: rgba(17, 24, 32, .62) !important; box-shadow: 0 3px 9px rgba(15, 23, 42, .17) !important; } /* Hover communicates interactivity through motion/depth only; the colour does not need to change for the icon to become visible. */ @media (hover: hover) and (pointer: fine) { .ikxd-p.ikxd-p--v7 .ikxd-pico:hover { border-color: #e86f0c !important; background: #fff8f1 !important; color: #111820 !important; box-shadow: 0 9px 20px rgba(15, 23, 42, .32), 0 0 0 3px rgba(245, 130, 32, .18) !important; transform: translateY(-2px) scale(1.05) !important; } .ikxd-p.ikxd-p--v7 .ikxd-pico--msg:hover { background: #e86f0c !important; color: #ffffff !important; box-shadow: 0 10px 22px rgba(245, 130, 32, .46), 0 0 0 3px rgba(245, 130, 32, .20) !important; } } /* ═══ END ACCESSIBLE ALIGNMENT + CONTACT ICON RESTING CONTRAST ═════════════ */ /* ════════════════════════════════════════════════════════════════════════════ 2026-07-19 MULTI-LISTING EXTERNAL FILE-TAB RESTORE ---------------------------------------------------------------------------- Recent card virtualisation introduced paint containment through content-visibility:auto. Paint containment clips a direct-child tab that is deliberately translated above the card border. Multi-listed cards therefore opt out of paint containment only, while ordinary catalogue cards retain the performance optimisation. The legacy in-image/detail chips are retired. ════════════════════════════════════════════════════════════════════════════ */ .ikx-results .ikx-grid .ikx-card.has-multi-filetag { content-visibility: visible !important; contain: none !important; overflow: visible !important; } .ikx-results .ikx-grid .ikx-card.has-multi-filetag > .ikx-multi-filetag { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; top: 0 !important; right: 14px !important; transform: translate3d(0, -100%, 0) !important; pointer-events: auto !important; } /* Never show the retired dark/avatar badge inside an ikx media image, nor the old multi chip inside the drilled-in identity row. */ .ikx-card .mla-tag, .ikxd-itag--multi, #ikxdMultiTag { display: none !important; } @media (min-width: 761px) { .ikx-results .ikx-grid { padding-top: 40px !important; overflow-y: visible !important; } .ikx-results .ikx-track-wrap { overflow: visible !important; } } @media (max-width: 760px) { .ikx-results .ikx-grid { padding-top: 0 !important; } .ikx-results .ikx-grid .ikx-card.has-multi-filetag { margin-top: 37px; } .ikx-results .ikx-grid .ikx-card.has-multi-filetag:first-child { margin-top: 37px; } .ikx-results .ikx-grid .ikx-card.has-multi-filetag > .ikx-multi-filetag { right: 10px !important; } } /* ═══ END MULTI-LISTING EXTERNAL FILE-TAB RESTORE ═════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ 2026-07-20 PUBLIC FLOOR PLAN FILE Dedicated image/PDF viewer inside the public property-detail experience. ════════════════════════════════════════════════════════════════════════════ */ .ikxpd-floorplan{ min-height:0; display:grid; grid-template-columns:210px minmax(0,1fr); gap:14px; height:100%; } .ikxpd-floorplan>aside{ min-width:0; display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid #e1e6ec; border-radius:16px; background:#f7f9fb; overflow:auto; } .ikxpd-floorplan-label{ display:block; margin:1px 3px 4px; color:#e97312; font-size:.58rem; font-weight:750; letter-spacing:.1em; } .ikxpd-floorplan-choice{ width:100%; min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:2px 9px; padding:9px; border:1px solid transparent; border-radius:12px; background:transparent; color:#5a687d; text-align:left; cursor:pointer; font-family:inherit; } .ikxpd-floorplan-choice:hover{border-color:#dce4ec;background:#fff} .ikxpd-floorplan-choice.is-on{border-color:#d5dee8;background:#fff;box-shadow:0 7px 18px rgba(25,40,61,.06)} .ikxpd-floorplan-choice>span{ grid-row:1/3; width:34px;height:34px;display:grid;place-items:center; border:1px solid #dfe6ed;border-radius:10px;background:#fff;color:#e97312; font-size:.61rem;font-weight:700; } .ikxpd-floorplan-choice b,.ikxpd-floorplan-choice small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ikxpd-floorplan-choice b{color:#243047;font-size:.65rem;font-weight:650} .ikxpd-floorplan-choice small{color:#8792a3;font-size:.55rem} .ikxpd-floorplan-view{min-width:0;min-height:0;overflow:hidden;border:1px solid #dfe5ec;border-radius:17px;background:#fff} .ikxpd-floorplan-stage{height:100%;min-height:420px;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#f2f5f8} .ikxpd-floorplan-stage[hidden]{display:none!important} .ikxpd-floorplan-image,.ikxpd-floorplan-pdf{min-width:0;min-height:0;display:grid;place-items:center;overflow:auto;background:#eef2f5} .ikxpd-floorplan-image img{display:block;max-width:100%;height:auto;max-height:64vh;object-fit:contain;background:#fff} .ikxpd-floorplan-pdf iframe{width:100%;height:min(64vh,680px);min-height:430px;border:0;background:#fff} .ikxpd-floorplan-stage footer{ min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; border-top:1px solid #e1e6ec; background:#fff; } .ikxpd-floorplan-stage footer div{min-width:0} .ikxpd-floorplan-stage footer span,.ikxpd-floorplan-stage footer b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ikxpd-floorplan-stage footer span{color:#e97312;font-size:.54rem;font-weight:750;letter-spacing:.08em} .ikxpd-floorplan-stage footer b{margin-top:3px;color:#253148;font-size:.67rem;font-weight:650} .ikxpd-floorplan-stage footer a{ flex:0 0 auto; display:inline-flex;align-items:center;gap:7px; min-height:34px;padding:0 11px;border:1px solid #dce4ec;border-radius:10px; background:#fff;color:#344258;text-decoration:none;font-size:.61rem;font-weight:600; } .ikxpd-floorplan-stage footer a:hover{border-color:#f3aa69;color:#d96b0d;background:#fffaf5} @media(max-width:900px){ .ikxpd-floorplan{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:auto} .ikxpd-floorplan>aside{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px;scroll-snap-type:x proximity} .ikxpd-floorplan-choice{flex:0 0 190px;scroll-snap-align:start} .ikxpd-floorplan-stage{min-height:390px} .ikxpd-floorplan-pdf iframe{height:58vh;min-height:380px} } @media(max-width:620px){ .ikxpd-floorplan{gap:9px} .ikxpd-floorplan-choice{flex-basis:170px} .ikxpd-floorplan-stage{min-height:350px} .ikxpd-floorplan-image img{max-height:52vh} .ikxpd-floorplan-pdf iframe{height:52vh;min-height:340px} .ikxpd-floorplan-stage footer{align-items:flex-start;flex-direction:column} .ikxpd-floorplan-stage footer a{width:100%;justify-content:center} } /* ═══ END PUBLIC FLOOR PLAN FILE ══════════════════════════════════════════ */ .ikxd-media { z-index: 1; isolation: isolate; contain: paint; } .ikxd-info { position: relative; z-index: 2; isolation: isolate; pointer-events: auto; } .ikxd-stage, .ikxd-thumbs { contain: layout paint; } .ikxd-loading { pointer-events: none; } .ikxd-info button, .ikxd-info a { pointer-events: auto; touch-action: manipulation; } .ikxd-img-ambient { transition: opacity .12s ease; } .ikxd-img-ambient.is-loading { opacity: 0; } .ikxd-thumb { background: #262a31; contain: layout paint; } .ikxd-thumb img { display: block; opacity: 0; transition: opacity .16s ease; } .ikxd-thumb.is-loaded img { opacity: 1; } .ikxd-thumb.is-error { background: #1d2026; } /* ── 2026-07-24 v5: property-details tab switch is SYNCHRONOUS ───────────── The curtain no longer gates tab content — the new tab renders on the same click frame. This purely decorative slide-in (140ms, never blocking input) replaces the close/open choreography as the transition cue. */ .ikxpd-swap-in { animation: ikxpdSwapIn .14s ease-out both; } @keyframes ikxpdSwapIn { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ikxpd-swap-in { animation: none !important; } } /* ── 2026-07-24 v6: THE CURTAIN RETURNS — as a one-shot sweep ────────────── The panels fly edge -> centre -> edge in ONE 200ms animation while the tab content swaps on the very next frame underneath (covered at the meeting point, ~40-60% of the sweep). Full theatre, zero gating: nothing ever waits on the curtain. */ .ikxpd.is-curtain-sweep .ikxpd-curtain-left { animation: ikxpdSweepL .36s cubic-bezier(.77, 0, .18, 1) both; } .ikxpd.is-curtain-sweep .ikxpd-curtain-right { animation: ikxpdSweepR .36s cubic-bezier(.77, 0, .18, 1) both; } .ikxpd.is-curtain-sweep .ikxpd-curtain span { animation: ikxpdSweepBadge .36s ease both; } @keyframes ikxpdSweepL { 0% { transform: translate3d(-101%, 0, 0); } 38% { transform: translate3d(0, 0, 0); } 62% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-101%, 0, 0); } } @keyframes ikxpdSweepR { 0% { transform: translate3d(101%, 0, 0); } 38% { transform: translate3d(0, 0, 0); } 62% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(101%, 0, 0); } } @keyframes ikxpdSweepBadge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } } @media (prefers-reduced-motion: reduce) { .ikxpd.is-curtain-sweep .ikxpd-curtain-left, .ikxpd.is-curtain-sweep .ikxpd-curtain-right, .ikxpd.is-curtain-sweep .ikxpd-curtain span { animation: none !important; } } /* ── 2026-07-24 v9: EVENT-DRIVEN CURTAIN ─────────────────────────────────── Two chained animations replace the single sweep. JS listens for the close animation's end, renders the new tab while fully covered, then starts the open — so the reveal and the new tab are the same moment BY CONSTRUCTION, on every device, at any speed, regardless of stylesheet caching. */ .ikxpd.is-curtain-sweep-close .ikxpd-curtain-left { animation: ikxpdCloseL .16s cubic-bezier(.77, 0, .18, 1) forwards; } .ikxpd.is-curtain-sweep-close .ikxpd-curtain-right { animation: ikxpdCloseR .16s cubic-bezier(.77, 0, .18, 1) forwards; } .ikxpd.is-curtain-sweep-open .ikxpd-curtain-left { animation: ikxpdOpenL .24s cubic-bezier(.16, 1, .3, 1) forwards; } .ikxpd.is-curtain-sweep-open .ikxpd-curtain-right { animation: ikxpdOpenR .24s cubic-bezier(.16, 1, .3, 1) forwards; } .ikxpd.is-curtain-sweep-close .ikxpd-curtain span { animation: ikxpdBadgeIn .16s ease forwards; } .ikxpd.is-curtain-sweep-open .ikxpd-curtain span { animation: ikxpdBadgeOut .24s ease forwards; } @keyframes ikxpdCloseL { from { transform: translate3d(-101%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes ikxpdCloseR { from { transform: translate3d(101%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes ikxpdOpenL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-101%, 0, 0); } } @keyframes ikxpdOpenR { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(101%, 0, 0); } } @keyframes ikxpdBadgeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes ikxpdBadgeOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(.85); } } @media (prefers-reduced-motion: reduce) { .ikxpd.is-curtain-sweep-close .ikxpd-curtain-left, .ikxpd.is-curtain-sweep-close .ikxpd-curtain-right, .ikxpd.is-curtain-sweep-open .ikxpd-curtain-left, .ikxpd.is-curtain-sweep-open .ikxpd-curtain-right, .ikxpd.is-curtain-sweep-close .ikxpd-curtain span, .ikxpd.is-curtain-sweep-open .ikxpd-curtain span { animation: none !important; } }