/** * Instant Search — the floating typeahead panel. * * The panel is appended to and positioned fixed from the search field's * rect (so the nav's overflow can't clip it), which means it styles independently * of the header. Token-driven (--sa-*), so it tracks the active palette. * * @package Shining */ .sa-is-panel { position: fixed; /* Above the base theme's search popup overlay (.tie-popup 99999, .live-search-popup 999999) so our typeahead is never hidden behind the mobile full-screen search popup. */ z-index: 1000001; max-height: min(70vh, 560px); overflow-y: auto; background: var(--sa-surface-1, #20111c); border: 1px solid var(--sa-border-strong, rgba(255, 61, 174, .34)); border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); color: var(--sa-text, #f7ecf4); font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .sa-is-panel[hidden] { display: none; } .sa-is-grp-head { padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-text-dim, #9c819a); } .sa-is-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; text-decoration: none; color: inherit; border-left: 2px solid transparent; } .sa-is-row:hover, .sa-is-row.is-active { background: color-mix(in srgb, var(--sa-violet, #ff3dae) 10%, transparent); border-left-color: var(--sa-violet, #ff3dae); text-decoration: none; } .sa-is-thumb { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-family: "Clash Display", system-ui, sans-serif; font-weight: 700; font-size: 14px; color: var(--sa-on-accent, #fff); background: var(--sa-surface-2, #2a1725); overflow: hidden; background-size: cover; background-position: center 35%; } .sa-is-thumb--vote { border-radius: 9px; background: var(--sa-gradient); } /* A closed vote keeps its heart but wears it quietly — the row itself stays full-contrast (it is still a destination: the final results). */ .sa-is-thumb--vote.sa-is-thumb--closed { background: var(--sa-surface-2, #2a1725); color: var(--sa-text-muted, #C4A9BE); } .sa-is-thumb--idol { border-radius: 50%; } .sa-is-thumb--news { background: var(--sa-surface-2, #2a1725); font-size: 16px; } /* Real idol photo cropped to the FACE using TotalPoll's own read-only focal point (--np-fx/--np-fy/--np-zoom) — the same formula the hero, vote cards and leaderboard use, so only the face shows inside the round frame (no whole-photo, no frame-in-frame). Defaults keep a sensible crop when a nominee has no focal. */ .sa-is-thumb--photo { position: relative; border-radius: 50%; background: var(--sa-surface-2, #2a1725); } .sa-is-thumb--photo img { position: absolute; width: calc(308% * var(--np-zoom, 1)); height: calc(308% * var(--np-zoom, 1)); max-width: none; max-height: none; left: calc(var(--np-fx, .5) * (1 - 3.08 * var(--np-zoom, 1)) * 100%); top: calc(var(--np-fy, .4) * (1 - 3.08 * var(--np-zoom, 1)) * 100%); object-fit: cover; object-position: center 40%; } .sa-is-main { min-width: 0; flex: 1; } .sa-is-t { display: block; font-size: 14px; font-weight: 600; color: var(--sa-text, #f7ecf4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa-is-grp { font-weight: 600; color: var(--sa-violet-light, #ff7ac6); } .sa-is-sub { display: block; font-size: 12px; color: var(--sa-text-muted, #c4a9be); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa-is-count { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--sa-violet-light, #ff7ac6); font-variant-numeric: tabular-nums; white-space: nowrap; } .sa-is-vert { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--v, var(--sa-violet, #ff3dae)); background: color-mix(in srgb, var(--v, #ff3dae) 16%, transparent); border: 1px solid color-mix(in srgb, var(--v, #ff3dae) 45%, transparent); border-radius: 999px; padding: 2px 8px; } .sa-is-empty { padding: 22px 16px; text-align: center; color: var(--sa-text-muted, #c4a9be); font-size: 14px; } .sa-is-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--sa-border, rgba(255, 61, 174, .16)); font-size: 12px; color: var(--sa-text-dim, #9c819a); position: sticky; bottom: 0; background: var(--sa-surface-1, #20111c); } /* On touch devices the whole footer is a tap target that opens the full results page — give it a clear pressable affordance and a branded hint. */ .sa-is-foot.is-tap { cursor: pointer; } .sa-is-foot.is-tap .sa-is-foot-hint { font-weight: 700; color: var(--sa-violet-light, #ff7ac6); } .sa-is-foot.is-tap .sa-is-foot-hint::after { content: " \2192"; } .sa-is-foot.is-tap:active { background: color-mix(in srgb, var(--sa-violet, #ff3dae) 12%, var(--sa-surface-1, #20111c)); } /* The vote/love heart sits crisp and centred inside its gradient chip. */ .sa-is-thumb--vote svg { display: block; } @media (prefers-reduced-motion: reduce) { .sa-is-row { transition: none; } } /* Group-level "See all …" row (idol directory link in the suggestion state). Reads like a quiet action, not a result: no thumb, accent text, arrow that nudges on hover/keyboard focus. */ .sa-is-row--more { justify-content: space-between; padding-top: 7px; padding-bottom: 10px; } .sa-is-row--more .sa-is-more-t { font-size: 12.5px; font-weight: 700; color: var(--sa-violet, #ff3dae); } .sa-is-row--more .sa-is-more-arr { color: var(--sa-violet, #ff3dae); transition: transform .15s ease; } .sa-is-row--more:hover .sa-is-more-arr, .sa-is-row--more.is-active .sa-is-more-arr { transform: translateX(3px); }