/* ========================================================================== Athenian Site Search UI — SAFE (panel hidden via [hidden], hovercard via data-open) - Panel visibility: ONLY [hidden] - Hovercard visibility: ONLY [data-open="1"] using visibility/opacity (never display:none) - Hovercard is portal-safe (moved to #ath-popover-layer in ) ========================================================================== */ /* -------------------------------------------------------------------------- Root / Tokens -------------------------------------------------------------------------- */ :where(.ath-search) { --ath-c1: var(--ctl-c1, #ec8639); --ath-c2: var(--ctl-c2, #60a5fa); --ath-fg: var(--text-high, #f5f5f5); --ath-fg-mid: var(--text-mid, #c0c4cf); --ath-fg-low: var(--text-low, #94a3b8); --ath-s0: var(--surface-0, #0b0b12); --ath-s1: var(--surface-1, #111827); --ath-s2: var(--surface-2, #151a24); --ath-border: var(--border, rgba(255,255,255,.12)); --ath-ring: color-mix(in oklch, var(--ath-c2) 70%, transparent); --ath-radius: var(--radius, 12px); --ath-radius-lg: var(--radius-lg, 16px); --ath-panel-left: 12px; --ath-panel-right: 12px; --ath-panel-top: 60px; position: relative; color: var(--ath-fg); isolation: isolate; } /* Token modes - default: uses Athenian Site Tokens if present (ctl/text/surface vars) with fallbacks - data-ath-style="plain": ignore site tokens; use plugin fallbacks only - data-ath-style="custom": use whatever inline --ath-* vars are provided (admin UI later) */ :where(.ath-search[data-ath-style="plain"]) { --ath-c1: #ec8639; --ath-c2: #60a5fa; --ath-fg: #f5f5f5; --ath-fg-mid: #c0c4cf; --ath-fg-low: #94a3b8; --ath-s0: #0b0b12; --ath-s1: #111827; --ath-s2: #151a24; --ath-border: rgba(255,255,255,.12); --ath-ring: color-mix(in oklch, var(--ath-c2) 70%, transparent); --ath-radius: 12px; --ath-radius-lg: 16px; } /* -------------------------------------------------------------------------- Search Bar -------------------------------------------------------------------------- */ :where(.ath-search__bar) { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--ath-radius); border: 1px solid var(--ath-border); background: linear-gradient( to bottom, color-mix(in oklch, var(--ath-s1) 92%, #000 8%), color-mix(in oklch, var(--ath-s1) 86%, #000 14%) ); min-width: 0; } :where(.ath-search__bar:focus-within) { border-color: color-mix(in oklch, var(--ath-c2) 55%, var(--ath-border)); box-shadow: 0 0 0 4px var(--ath-ring); } :where(.ath-search__icon) { width: 18px; height: 18px; opacity: .9; color: var(--ath-fg-mid); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m11.707 2.293-5.387-5.387A9.95 9.95 0 0 0 20 10a10 10 0 1 0-10 10 9.95 9.95 0 0 0 4.906-1.68l5.387 5.387z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m11.707 2.293-5.387-5.387A9.95 9.95 0 0 0 20 10a10 10 0 1 0-10 10 9.95 9.95 0 0 0 4.906-1.68l5.387 5.387z'/%3E%3C/svg%3E") center / contain no-repeat; } :where(.ath-search__input) { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--ath-fg); } :where(.ath-search__hint) { color: var(--ath-fg-low); font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ath-border); background: color-mix(in oklch, var(--ath-s2) 88%, #000 12%); user-select: none; } /* -------------------------------------------------------------------------- Results Panel (visibility ONLY by [hidden]) -------------------------------------------------------------------------- */ :where(.ath-search__panel) { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1000000; border-radius: var(--ath-radius-lg); border: 1px solid var(--ath-border); background: linear-gradient( to bottom, color-mix(in oklch, var(--ath-s0) 94%, #000 6%), color-mix(in oklch, var(--ath-s1) 88%, #000 12%) ); box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); overflow: hidden; } :where(.ath-search__panel:not([hidden])) { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } :where(.ath-search.is-fixedPanel .ath-search__panel) { position: fixed; left: var(--ath-panel-left); right: var(--ath-panel-right); top: var(--ath-panel-top); } /* -------------------------------------------------------------------------- Panel Header -------------------------------------------------------------------------- */ :where(.ath-search__panelHeader) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ath-border); } :where(.ath-search__meta) { font-size: 12px; color: var(--ath-fg-mid); } :where(.ath-search__close) { border: 1px solid var(--ath-border); background: transparent; color: var(--ath-fg); border-radius: 999px; padding: 6px 10px; cursor: pointer; } /* -------------------------------------------------------------------------- Chips -------------------------------------------------------------------------- */ :where(.ath-search__chips) { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; } :where(.ath-chip) { border: 1px solid var(--ath-border); background: color-mix(in oklch, var(--ath-s2) 88%, #000 12%); color: var(--ath-fg); border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer; } :where(.ath-chip.is-active) { border-color: color-mix(in oklch, var(--ath-c1) 60%, var(--ath-border)); background: color-mix(in oklch, var(--ath-c1) 18%, var(--ath-s2) 82%); } /* -------------------------------------------------------------------------- Results List -------------------------------------------------------------------------- */ :where(.ath-search__list) { display: grid; gap: 6px; padding: 12px 14px 14px; } :where(.ath-search__empty) { color: var(--ath-fg-mid); padding: 10px 2px; } /* Result Row */ :where(.ath-srow) { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--ath-radius); border: 1px solid transparent; background: linear-gradient( to bottom, color-mix(in oklch, var(--ath-s1) 92%, #000 8%), color-mix(in oklch, var(--ath-s1) 86%, #000 14%) ); color: inherit; text-decoration: none; position: relative; } :where(.ath-srow:hover) { border-color: color-mix(in oklch, var(--ath-c2) 45%, var(--ath-border)); background: linear-gradient( to bottom, color-mix(in oklch, var(--ath-c2) 10%, var(--ath-s1) 90%), color-mix(in oklch, var(--ath-c2) 6%, var(--ath-s1) 94%) ); } :where(.ath-srow.is-active), :where(.ath-srow:focus-visible) { border-color: color-mix(in oklch, var(--ath-c2) 55%, var(--ath-border)); background: linear-gradient( to bottom, color-mix(in oklch, var(--ath-c2) 12%, var(--ath-s1) 88%), color-mix(in oklch, var(--ath-c2) 8%, var(--ath-s1) 92%) ); outline: none; } :where(.ath-srow__img) { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ath-border); background: color-mix(in oklch, var(--ath-s2) 88%, #000 12%); display: grid; place-items: center; overflow: hidden; } :where(.ath-srow__img img) { width: 100%; height: 100%; object-fit: cover; display: block; } :where(.ath-srow__title) { font-weight: 750; line-height: 1.2; } :where(.ath-srow__sub) { margin-top: 2px; font-size: 12px; color: var(--ath-fg-mid); } :where(.ath-srow__price) { font-weight: 800; color: color-mix(in oklch, var(--ath-c1) 75%, var(--ath-fg)); } /* -------------------------------------------------------------------------- Hovercard Portal Layer -------------------------------------------------------------------------- */ #ath-popover-layer { position: fixed !important; left: 0 !important; top: 0 !important; width: 0 !important; height: 0 !important; z-index: 2147483647 !important; pointer-events: none !important; } /* ====================================================================== ATH Hovercard — SAFE VISIBILITY (NO display:none) - Keep measurable at all times - Hide via visibility/opacity; show via [data-open="1"] ====================================================================== */ :where(.ath-hovercard){ /* IMPORTANT: never allow display:none */ display: block !important; position: fixed; left: 0; top: 0; z-index: 2147483647; width: min(380px, calc(100vw - 24px)); max-width: 380px; border-radius: var(--ath-radius-lg, 16px); border: 1px solid var(--ath-border, rgba(255,255,255,.12)); background: color-mix(in oklch, var(--ath-s0, #0b0b12) 92%, #000 8%); box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 12px; /* hidden by default but measurable */ visibility: hidden; opacity: 0; pointer-events: none; transform: translate3d(0,0,0) scale(.98); transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms; } :where(.ath-hovercard[data-open="1"]){ visibility: visible; opacity: 1; pointer-events: auto; transform: translate3d(0,0,0) scale(1); transition: opacity 120ms ease, transform 120ms ease; } /* -------------------------------------------------------------------------- Hovercard inner layout -------------------------------------------------------------------------- */ :where(.ath-hovercard__grid) { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; } :where(.ath-hovercard__thumb) { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--ath-border); background: color-mix(in oklch, var(--ath-s2) 88%, #000 12%); overflow: hidden; } :where(.ath-hovercard__thumb img) { width: 100%; height: 100%; object-fit: cover; display: block; } :where(.ath-hovercard__kicker) { font-size: 11px; color: var(--ath-fg-low); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; } :where(.ath-hovercard__title) { font-weight: 800; line-height: 1.2; } :where(.ath-hovercard__price) { margin-top: 4px; font-weight: 900; color: color-mix(in oklch, var(--ath-c1) 75%, var(--ath-fg)); } :where(.ath-hovercard__desc) { margin-top: 6px; font-size: 12px; color: var(--ath-fg-mid); line-height: 1.35; } :where(.ath-hovercard__cta) { display: flex; gap: 10px; margin-top: 10px; } /* Buttons */ :where(.ath-cta) { border: 1px solid var(--ath-border); background: color-mix(in oklch, var(--ath-s2) 88%, #000 12%); color: var(--ath-fg); border-radius: 999px; padding: 7px 12px; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } :where(.ath-cta:hover) { border-color: color-mix(in oklch, var(--ath-c2) 45%, var(--ath-border)); } :where(.ath-cta--primary) { border-color: color-mix(in oklch, var(--ath-c1) 55%, var(--ath-border)); background: color-mix(in oklch, var(--ath-c1) 18%, var(--ath-s2) 82%); } /* -------------------------------------------------------------------------- Loading -------------------------------------------------------------------------- */ :where(.ath-search.is-loading .ath-search__hint) { opacity: .65; }