/** * Fetchie floating search — Brand Hub variables only (no hardcoded colours; * Brand Hub prints the --tracksies-* variables inline in ). No * typography sizes: text inherits from the theme. The wrapper carries two * inline custom properties: * --fetchie-floating-offset — distance from the screen edge(s). 0 = flush. * --fetchie-floating-nudge — shift DOWN the side edge from centre, so the * button can sit clear of Helpie's chat bubble * and Trustie's review tab on a site running * all three. */ .fetchie-floating { position: fixed; z-index: 9999; } /* Side positions: vertically centered on the chosen edge. */ .fetchie-floating--right { right: var(--fetchie-floating-offset, 0px); top: 50%; transform: translateY(calc(-50% + var(--fetchie-floating-nudge, 0px))); } .fetchie-floating--left { left: var(--fetchie-floating-offset, 0px); top: 50%; transform: translateY(calc(-50% + var(--fetchie-floating-nudge, 0px))); } /* Corner positions. */ .fetchie-floating--bottom-right { right: var(--fetchie-floating-offset, 0px); bottom: var(--fetchie-floating-offset, 0px); } .fetchie-floating--bottom-left { left: var(--fetchie-floating-offset, 0px); bottom: var(--fetchie-floating-offset, 0px); } .fetchie-floating__button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--tracksies-color-primary); border-radius: var(--tracksies-radius-large); background: var(--tracksies-color-primary); color: var(--tracksies-color-surface); cursor: pointer; box-shadow: var(--tracksies-shadow-elevated); } /* Flush against an edge: square off the corners that touch it, the way Trustie's review tab does. A rounded corner hard against the viewport edge reads as a rendering mistake rather than a design choice. Only applied at offset 0 — once inset, it is a floating pill again and stays fully round. Radius follows the Designer, so "no corners" stays square either way. */ .fetchie-floating--flush.fetchie-floating--right .fetchie-floating__button { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent; } .fetchie-floating--flush.fetchie-floating--left .fetchie-floating__button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; } /* Corner positions touch TWO edges, so both of those corners square off. */ .fetchie-floating--flush.fetchie-floating--bottom-right .fetchie-floating__button { border-bottom-right-radius: 0; } .fetchie-floating--flush.fetchie-floating--bottom-left .fetchie-floating__button { border-bottom-left-radius: 0; } .fetchie-floating__button svg { width: 20px; height: 20px; display: block; } .fetchie-floating__panel { position: absolute; width: 280px; max-width: calc(100vw - 88px); padding: 0.75rem; background: var(--tracksies-color-surface); border: 1px solid var(--tracksies-color-border); border-radius: var(--tracksies-radius-medium); box-shadow: var(--tracksies-shadow-elevated); } .fetchie-floating__panel[hidden] { display: none; } /* Panel opens away from the anchoring edge. */ .fetchie-floating--right .fetchie-floating__panel { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); } .fetchie-floating--left .fetchie-floating__panel { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); } .fetchie-floating--bottom-right .fetchie-floating__panel { right: 0; bottom: calc(100% + 8px); } .fetchie-floating--bottom-left .fetchie-floating__panel { left: 0; bottom: calc(100% + 8px); } .fetchie-floating__form { display: flex; gap: 0.5rem; } .fetchie-floating__input { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--tracksies-color-border); border-radius: var(--tracksies-radius-medium); background: var(--tracksies-color-surface); color: var(--tracksies-color-text); } .fetchie-floating__submit { padding: 0.5rem 1rem; border: 1px solid var(--tracksies-color-primary); border-radius: var(--tracksies-radius-medium); background: var(--tracksies-color-primary); color: var(--tracksies-color-surface); cursor: pointer; }