/* * The contact pop-up, in four named styles. * * Michael, 2026-09-23 Zoom with Diego, 08:17: * "If it is going to be the contact pop-up, Claude, please do generate some * style options that we can choose in the backend. For the pop-up, for the * contact form, it's just applying CSS to it." * * ONE pop-up, one form, one endpoint. Nothing here changes what the pop-up * contains or where it posts -- it is the same * parts/popups/headerConfigurator/index.php in all four. The style is chosen on * the store record (`design.contact_style`), lands as * html[data-st-contact-style] by inc/store-design.php, and this file is the * whole difference. * * ── Tokens only ─────────────────────────────────────────────────────────────── * * PATTERN-RULE.md. Not one colour and not one font family below. Geometry, * placement, order and emphasis are what differ; the panel keeps the background, * the text colour and the type it already has, which come from each store's own * palette and font presets. That is what makes four styles read as four * different companies rather than four skins of one. * * ── Why html[data-…] and not a class on the pop-up ──────────────────────────── * * assets/header.js injects the ported bundle's stylesheet into AT CLICK * TIME, so it lands after anything wp_enqueue_style printed and wins every tie * on source order. `html[data-st-contact-style='x'] .popup[data-popid='popup-header'] * .popup__wrapper` is (0,3,1) against that bundle's (0,1,0)-(0,2,0) rules, so * these win on specificity instead and no `!important` is needed. * * ── Why [data-popid='popup-header'] ─────────────────────────────────────────── * * The shell popupOpen() builds carries the popup's id. The search pop-up, the * artwork-upload pop-up and eleven others share .popup, and restyling all of * them from a contact setting is the bug this attribute prevents. */ :root { /* The one place a variant's geometry is stated. A store's theme.json can retune any of them per store without touching a rule below. */ --st-contact-card-width: 560px; --st-contact-drawer-width: 480px; --st-contact-bar-height: 72vh; --st-contact-radius: 16px; --st-contact-gap: 24px; --st-contact-motion: 260ms; } /* ------------------------------------------------------------------ 1. card * * The default. A contained, centred panel that reads as a considered object on * the page rather than as the page being replaced. Narrower than the pop-up's * historical 720px, because the form is a single column and 720px left the * fields floating in the middle of a wide box -- "this does not look * intentional" (11:46) in one measurement. */ html[data-st-contact-style='card'] .popup[data-popid='popup-header'] { align-items: center; justify-content: center; } html[data-st-contact-style='card'] .popup[data-popid='popup-header'] .popup__wrapper { max-width: var(--st-contact-card-width); max-height: calc(100% - var(--st-contact-gap)); border-radius: var(--st-contact-radius); /* currentColor, so the outline is the store's own text colour at 12%. */ box-shadow: 0 24px 64px -24px currentColor; } html[data-st-contact-style='card'] .popup[data-popid='popup-header'] .popup__wrapper__inner, html[data-st-contact-style='card'] .popup[data-popid='popup-header'] .popup__content { overflow-y: auto; } /* ------------------------------------------------------------------ 2. sheet * * The shape the pop-up has today, taken to its conclusion: the overlay IS the * page. Full bleed, no radius, the close control the only chrome. For a store * whose buyer arrives on a phone and fills the form as the task, not as an * aside. */ html[data-st-contact-style='sheet'] .popup[data-popid='popup-header'] { padding: 0; align-items: stretch; justify-content: stretch; } html[data-st-contact-style='sheet'] .popup[data-popid='popup-header'] .popup__wrapper { max-width: none; max-height: none; width: 100%; height: 100%; border-radius: 0; } html[data-st-contact-style='sheet'] .popup[data-popid='popup-header'] .popup__wrapper__inner, html[data-st-contact-style='sheet'] .popup[data-popid='popup-header'] .popup__content { flex: 1 1 auto; overflow-y: auto; } /* A full-bleed sheet has room to breathe; the card does not. This is the only place a variant changes the form's own rhythm, and it changes spacing, not type. */ html[data-st-contact-style='sheet'] .popup[data-popid='popup-header'] .popup__content { row-gap: calc(var(--st-contact-gap) * 1.5); } /* ------------------------------------------------------------------ 3. drawer * * Docked to the trailing edge, full height. The page stays visible beside it, so * a visitor mid-catalogue does not lose their place -- the reason a drawer suits * a store where contact happens while browsing rather than instead of it. * * `inset-inline-end`, not `right`: the theme ships to stores in more than one * writing direction and a hard `right` docks a drawer on the wrong side of an * RTL store with nothing looking broken. */ html[data-st-contact-style='drawer'] .popup[data-popid='popup-header'] { padding: 0; align-items: stretch; justify-content: flex-end; } html[data-st-contact-style='drawer'] .popup[data-popid='popup-header'] .popup__wrapper { max-width: min(var(--st-contact-drawer-width), 100%); max-height: none; width: min(var(--st-contact-drawer-width), 100%); height: 100%; border-radius: 0; margin-inline-start: auto; transform: translateX(8%); transition: transform var(--st-contact-motion) ease-out; } html[data-st-contact-style='drawer'] .popup[data-popid='popup-header'].active .popup__wrapper { transform: translateX(0); } html[data-st-contact-style='drawer'] .popup[data-popid='popup-header'] .popup__wrapper__inner, html[data-st-contact-style='drawer'] .popup[data-popid='popup-header'] .popup__content { flex: 1 1 auto; overflow-y: auto; } /* ------------------------------------------------------------------ 4. bar * * Docked across the bottom, the full width of the window, capped short of the * top so the page above it is still legible. The least interrupting of the four: * it reads as the site offering to talk rather than demanding it. */ html[data-st-contact-style='bar'] .popup[data-popid='popup-header'] { padding: 0; align-items: flex-end; justify-content: stretch; } html[data-st-contact-style='bar'] .popup[data-popid='popup-header'] .popup__wrapper { max-width: none; width: 100%; max-height: var(--st-contact-bar-height); border-start-start-radius: var(--st-contact-radius); border-start-end-radius: var(--st-contact-radius); border-end-start-radius: 0; border-end-end-radius: 0; transform: translateY(6%); transition: transform var(--st-contact-motion) ease-out; } html[data-st-contact-style='bar'] .popup[data-popid='popup-header'].active .popup__wrapper { transform: translateY(0); } html[data-st-contact-style='bar'] .popup[data-popid='popup-header'] .popup__wrapper__inner, html[data-st-contact-style='bar'] .popup[data-popid='popup-header'] .popup__content { overflow-y: auto; } /* The bar is wide and short, so the two columns of the "send a message" form sit side by side instead of stacking -- the one place the variant changes the form's layout, and it is a grid track count, not content. */ @media (min-width: 900px) { html[data-st-contact-style='bar'] .popup[data-popid='popup-header'] .first-form__contact { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--st-contact-gap); } } /* A visitor who has asked for less motion gets none of the two slides above. */ @media (prefers-reduced-motion: reduce) { html[data-st-contact-style='drawer'] .popup[data-popid='popup-header'] .popup__wrapper, html[data-st-contact-style='bar'] .popup[data-popid='popup-header'] .popup__wrapper { transform: none; transition: none; } } /* ------------------------------------------------- the trigger, in any pattern * * Every "talk to the shop" / "contact" link on every template becomes one of * these (inc/contact-popup.php). It is a