/** * Sugar Shane's Locations Popup — deliberately minimal so it inherits the theme. * - Text/headings use `font: inherit` / `color: inherit` (theme fonts + colors) * - Buttons + accent come from one variable set on .shanes-wrap: --shanes-accent * - The panel background uses --shanes-bg * These variables are set from the plugin's Settings page. You can also override * site-wide from Appearance > Customize > Additional CSS: * :root { --shanes-accent:#D6446E; --shanes-bg:#ffffff; } */ .shanes-wrap { display: inline-block; --shanes-accent: #D6446E; --shanes-accent-ink: #ffffff; --shanes-bg: #ffffff; --shanes-radius: 14px; } /* ---- Buttons (inherit the theme font) ---- */ .shanes-btn { font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .72em 1.4em; border: 2px solid transparent; border-radius: 10px; background: var(--shanes-accent); color: var(--shanes-accent-ink); text-decoration: none; transition: filter .15s ease, transform .12s ease; -webkit-appearance: none; appearance: none; max-width: 100%; } .shanes-btn:hover { filter: brightness(.94); } .shanes-btn:active { transform: translateY(1px); } .shanes-btn:focus-visible { outline: 3px solid var(--shanes-accent); outline-offset: 2px; } /* ---- Modal shell ---- */ .shanes-modal { /* defaults repeated here so the modal keeps them after being portaled to */ --shanes-accent: #D6446E; --shanes-accent-ink: #ffffff; --shanes-bg: #ffffff; --shanes-radius: 14px; position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; } .shanes-modal[hidden] { display: none; } .shanes-overlay { position: absolute; inset: 0; background: rgba(20, 12, 10, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: shanes-fade .18s ease both; } .shanes-box { position: relative; z-index: 1; font: inherit; color: inherit; background: var(--shanes-bg); width: min(420px, calc(100% - 2rem)); padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--shanes-radius); box-shadow: 0 24px 70px rgba(20, 12, 10, .35); max-height: min(86vh, 640px); overflow: auto; -webkit-overflow-scrolling: touch; animation: shanes-pop .22s cubic-bezier(.2, .8, .25, 1) both; } .shanes-close { position: absolute; top: .5rem; right: .7rem; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 1.6rem; line-height: 1; color: inherit; background: none; border: 0; border-radius: 50%; cursor: pointer; opacity: .55; } .shanes-close:hover { opacity: 1; } .shanes-close:focus-visible { outline: 3px solid var(--shanes-accent); outline-offset: 2px; } /* ---- Typography (inherits theme) ---- */ .shanes-title { font: inherit; font-size: 1.45em; font-weight: 700; margin: 0 0 .1em; padding-right: 1.5rem; text-wrap: balance; } .shanes-sub { font: inherit; margin: 0 0 1.1em; opacity: .7; } .shanes-address { font: inherit; margin: -.6em 0 1.1em; opacity: .7; } /* ---- Step 1: location choices ---- */ .shanes-choices { display: flex; flex-direction: column; gap: .55rem; } .shanes-choice { flex-direction: column; align-items: stretch; text-align: left; padding: .85em 1.1em; width: 100%; } .shanes-choice-row { display: flex; align-items: center; gap: .5em; } .shanes-choice-name { font-size: 1.05em; } .shanes-choice-chev { margin-left: auto; opacity: .8; } .shanes-choice-area { font-size: .8em; font-weight: 400; opacity: .85; } /* ---- Step 2: back link + hours ---- */ .shanes-back { font: inherit; font-size: .9em; color: inherit; background: none; border: 0; padding: 0; margin: 0 0 .8rem; cursor: pointer; opacity: .65; } .shanes-back:hover { opacity: 1; } .shanes-back:focus-visible { outline: 3px solid var(--shanes-accent); outline-offset: 2px; border-radius: 4px; } .shanes-hours { width: 100%; border-collapse: collapse; margin: .1rem 0 1.3rem; font: inherit; } .shanes-hours caption { text-align: left; font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .55; padding-bottom: .5em; } .shanes-hours th { text-align: left; font-weight: 600; padding: .45em 0; padding-right: .75em; } .shanes-hours td { text-align: right; padding: .45em 0; opacity: .85; font-variant-numeric: tabular-nums; } .shanes-hours tr + tr th, .shanes-hours tr + tr td { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); } /* ---- Action buttons ---- */ .shanes-actions { display: flex; flex-direction: column; gap: .55rem; } .shanes-ic { width: 1.05em; height: 1.05em; flex: none; } .shanes-btn-primary { background: var(--shanes-accent); color: var(--shanes-accent-ink); } .shanes-btn-ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); } .shanes-btn-ghost:hover { filter: none; border-color: var(--shanes-accent); color: var(--shanes-accent); } @media (min-width: 460px) { .shanes-actions { flex-direction: row; flex-wrap: wrap; } .shanes-actions .shanes-btn { flex: 1 1 calc(50% - .3rem); } } /* ---- Content / embed popups ---- */ .shanes-box-wide { width: min(580px, calc(100% - 2rem)); } .shanes-content .shanes-title { margin-bottom: .9rem; } .shanes-embed { width: 100%; } .shanes-embed iframe { width: 100% !important; max-width: 100%; height: var(--shanes-embed-h, 480px); border: 0; display: block; } .shanes-embed > *:not(iframe) { max-width: 100%; } /* ---- Mobile: bottom sheet ---- */ @media (max-width: 480px) { .shanes-embed iframe { height: min(var(--shanes-embed-h, 480px), 78vh); } .shanes-modal { align-items: flex-end; } .shanes-box { width: 100%; max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 1.6rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); animation: shanes-slideup .26s cubic-bezier(.2, .8, .25, 1) both; } } @keyframes shanes-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes shanes-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes shanes-slideup { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .shanes-overlay, .shanes-box { animation: none; } .shanes-btn, .shanes-choice { transition: none; } }