/* Cap's Catering — Flavor list + custom tooltip ------------------------------------------------------------------ */ .caps-flavors-list { list-style: disc; padding-left: 1.4em; margin: 0; } .caps-flavor-item { margin: 0.25em 0; line-height: 1.6; } .caps-flavor { display: inline; } .caps-flavor--has-tooltip { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: help; outline: none; } .caps-flavor--has-tooltip:focus-visible { box-shadow: 0 0 0 2px var(--caps-tt-border, #5BC4E5); border-radius: 2px; } .caps-flavor-icon-wrap { display: inline-block; vertical-align: middle; margin-left: 4px; line-height: 0; } .caps-flavor-icon { display: inline-block; vertical-align: middle; } /* Tooltip popup (positioned by JS, appended to ) */ .caps-tooltip { position: absolute; z-index: 99999; top: 0; left: 0; background: var(--caps-tt-bg, #ffffff); border: var(--caps-tt-border-w, 1px) solid var(--caps-tt-border, #5BC4E5); color: var(--caps-tt-color, #333333); font-family: var(--caps-tt-font, inherit); font-size: var(--caps-tt-size, 14px); line-height: 1.4; max-width: var(--caps-tt-max, 280px); padding: var(--caps-tt-pad, 12px); border-radius: var(--caps-tt-radius, 8px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; box-sizing: border-box; } /* Animation variants */ .caps-tooltip--anim-fade { transform: none; } .caps-tooltip--anim-slide { transform: translateY(4px); } .caps-tooltip--anim-none { transition: none; transform: none; } .caps-tooltip.is-visible { opacity: 1; transform: none; pointer-events: auto; } /* Arrow */ .caps-tooltip-arrow, .caps-tooltip-arrow::after { position: absolute; width: 0; height: 0; } .caps-tooltip-arrow--top { bottom: calc(-1 * var(--caps-tt-border-w, 1px) - 8px); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--caps-tt-border, #5BC4E5); } .caps-tooltip-arrow--top::after { content: ''; top: -9px; left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--caps-tt-bg, #ffffff); } .caps-tooltip-arrow--bottom { top: calc(-1 * var(--caps-tt-border-w, 1px) - 8px); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--caps-tt-border, #5BC4E5); } .caps-tooltip-arrow--bottom::after { content: ''; bottom: -9px; left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--caps-tt-bg, #ffffff); }