mikeandpattys_openings

Opening Landing Pages

One self-contained page per new location, reached by scanning the QR code on the printed opening poster.

Making a new one

cp -R openings/_template openings/charlestown

Then open index.html and replace every . Search for	Charlestown
	``	charlestown — used as the GA opening_location param
	``	Opening Soon / Now Open — used in the title and share tags
	``	the gold line above the headline: OPENING SOON / NOW OPEN / OPENING MARCH 3
	``	the single line under the logo. Keep it to one line — the location name lives in the hero artwork, not in HTML
	``	transparent-PNG hero artwork. Must be a hosted URL for the Square build — a relative path won’t resolve inside an embed
	``	same artwork as WebP, served first via <picture>; the PNG is the fallback
	``	describe the sandwich, not the layout
	``	full street address (add a <br> to split it over two lines)
	``	Google/Apple Maps link
	``	e.g. Mon–Fri 7a–2p · Sat–Sun 8a–3p
	``	the page’s own canonical URL, for OG tags
	``	share image, 1200×630
	``	https://www.mikeandpattys.com/loyalty-program
	``	https://www.mikeandpattys.com/s/order
	``	https://www.mikeandpattys.com/hours-and-locations
	``	https://www.workstream.us/j/a6e56262/mike-pattys/positions
	``	https://www.instagram.com/mikeandpattys

The GA measurement ID is hardcoded (G-8YPWVHZ04H) — it’s the same for every page.

Hero artwork

Filenames are lowercase and hyphenated (carolina-caviar-hero.png / .webp) — spaces force %20 escaping in URLs and cause avoidable breakage once the file is hosted.

Requirements for a new location’s artwork:

• Transparent PNG on flat green. No gradient behind it, unlike the site’s treatment of the same shot.
• The location name may be set inside the artwork. If it is, leave the HTML kicker out — see the note in the markup.
• A status callout may also live in the artwork. Charlestown’s ellipse reads COMING SOON, so the HTML eyebrow is deleted on that page. Don’t stack two status messages.
• Keep .hero-shot horizontal margins at 0. They were negative when the hero was full-bleed; left in place against width: 100% they shove the artwork off-centre.
• Keep the name clear of the artwork’s own edges. The hero is not full-bleed for this reason: with the name running to the artwork’s edge, bleeding to the viewport leaves the first and last letter touching the screen.
• Any type on the artwork needs its own background. Dark green type with no pill behind it disappears against this page.

Design notes

Matched to the live site’s own computed styles rather than approximated:

• Colors #074e44 (site footer bg), #c2e6dd (site footer text), #047c6c (site button fill). One exception: the site’s #91aca6 muted grey only hits 3.97:1 on that green, which fails WCAG AA, so muted text here uses #a8c4bd (5.18:1).
• Square corners. The site sets --maker-shape-button-border-radius: 0px. Rounded cards read as off-system.
• Four font faces, not two — the site also uses ExtraComp Black for heavy display and Cond Black for labels, nav, and buttons. All four are declared in the block.
• Hierarchy. The location name is set inside the hero artwork, so only two text lines sit under the logo: a small gold status line and one mint kicker. Three stacked lines competed with each other and with the artwork.
• The <h1> is visually hidden, not deleted. Text baked into an image is invisible to screen readers, search engines and link previews. h1.sr-only carries “Mike & Patty’s ", and the location name is repeated in the image's `alt` so the page still says where it is if the artwork fails to load. If you ever move the location name back into HTML, drop the `sr-only` class — don't end up with it twice.
• Flat green behind the hero shot — deliberately no gradient, unlike the site’s treatment of the same photo.
• One primary action. The mint-filled Join Rewards button is the only filled control; everything else is a lighter outlined row. Equal-weight buttons waste the one thing this page exists to do. Keep exactly one primary per page. It hovers to mustard (--mp-gold); the sub-note darkens to full green at the same time because #2c6a5f on gold is only 3.22:1.
• Touch targets are all ≥44px, every footer link included.
• Footer is a plain text nav — Menu, About, Contact Us, Careers, FAQ, Instagram. Six links fit one line on a wide column but break 5 + 1 on a phone, so a media query caps the nav width below three items’ worth and forces an even 3 + 3. No copyright line.

Delete any secondary row that doesn’t apply. They’re plain <a class="btn btn-secondary"> blocks — removing one needs no other change.

The QR code must not point here directly

Print the QR against a redirect URL you control (a short link, or a Square page that forwards). That link then forwards to wherever the page actually lives. Hosting can move from Square to openings.mikeandpattys.com later without reprinting a single poster.

Put the UTM tags on the redirect target so scans land as attributed pageviews:

?utm_source=poster&utm_medium=qr&utm_campaign=charlestown_opening

Tracking

• Scans — GA4 pageviews, attributed by the UTM params above.
• Outbound clicks — one delegated listener fires opening_link_click for every a[data-mp-link]. To add a tracked link, just give it a data-mp-link value; nothing else to wire up.

The GA4 property is G-8YPWVHZ04H (already hardcoded — same on every page). Full wiring instructions, including the custom dimensions you must register before posters go up and the cross-domain settings, are in GA-SETUP.md.

Fonts

BentonSans is loaded cross-origin from www.mikeandpattys.com. Verified 2026-09-02: those files return access-control-allow-origin: *, so they load fine from GitHub Pages or any other origin. font-display: swap means a font failure degrades to the fallback stack rather than blocking render.

Two builds per location

• index.html — the source of truth. Standalone; includes the GA loader. Host on GitHub Pages.
• square-embed.html — generated, do not hand-edit. GA loader stripped, outer document scaffolding removed, ready to paste into a Square “Embed Code” section.

Regenerate after any edit:

sh openings/make-square-version.sh charlestown

The pennant logomark is inlined as SVG rather than linked, so the block carries its own artwork and needs nothing hosted.

Hosting

Built to be origin-independent — it works as a GitHub Pages page on openings.mikeandpattys.com (CNAME, DNS via Hover) or, in the interim, pasted into a Square Online page. If it goes into Square, note the sitewide injected .custom-code-container { margin-top: -2em; } rule affects every custom embed.