:root {
--green: #0F5132;
--green-light: #16A34A;
--bg: #F8FAFC;
--text: #1F2937;
--muted: #6B7280;
--border: #E5E7EB;
--card: #FFFFFF;
--shadow: 0 4px 12px rgba(0,0,0,.06);
--shadow-hover: 0 8px 20px rgba(0,0,0,.10);
}
* { box-sizing: border-box; }
body {
font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
margin: 0; background: var(--bg); color: var(--text);
-webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display: flex; justify-content: space-between; align-items: center; background: white; padding: 14px 28px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
/* ===== GolfSimPass network topbar (venue.html) =====
Sits above the venue's own topbar. Hidden by default; the .on-canonical-host gate on
(set inline in before first paint) reveals it ONLY on golfsimpass.com — so visitors
browsing a venue via the owner's custom domain (e.g. pevyra.online) never see it. */
.gsp-topbar { display: none; }
html.on-canonical-host .gsp-topbar {
display: flex; justify-content: space-between; align-items: center;
background: white; padding: 12px 28px; border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 60;
}
.gsp-topbar .gsp-brand { display: inline-flex; align-items: center; }
.gsp-topbar .gsp-brand img { height: 40px; display: block; }
.gsp-topbar-right { display: flex; align-items: center; gap: 10px; }
/* .gsp-pill core style lives in the unified Sign in pill block above (around line 89). */
@media print { .gsp-topbar { display: none !important; } }
/* ===== Venue topbar override (venue.html only) =====
When the .topbar is nested inside the .venue-page container it should match the page body
width and sit STATIC above the hero banner — not pinned full-bleed at the top. */
.venue-page > .topbar {
position: static;
padding: 16px 0 14px;
background: transparent;
border-bottom: none;
margin: 0 0 6px;
}
/* .venue-signin-btn core style lives in the unified Sign in pill block above. This rule just
sets the spacing between the Sign in pill and the Book Now CTA and hides it on canonical
hosts (where the GSP topbar already serves the sign-in entry point). */
.venue-signin-btn { margin-right: 10px; }
html.on-canonical-host .venue-signin-btn { display: none; }
.brand { font-size: 18px; }
.link-out { color: var(--muted); font-size: 14px; }
/* 2026-06-11: Unified "Sign in" / "My bookings" pill style — matches the venue Book Now CTA
(.venue-book-btn) across the whole site. Solid #0F5132 (var(--green)) pill, same padding /
radius / font as Book Now, subtle lift on hover. Applies to every sign-in surface:
.account-link → Sign in / My bookings on every golfsimpass.com page
.gsp-pill → Sign in / My Bookings inside the GSP topbar on venue.html
.venue-signin-btn → Sign in pill rendered inside the venue topbar (custom-domain only)
The hover-lift + shadow uses the same easing/timing as Book Now's so the pair reads as a
single visual language. */
.account-link, .gsp-pill, .venue-signin-btn {
display: inline-block;
padding: 10px 22px;
background: var(--green); /* #0F5132 */
color: white;
border: 1px solid var(--green);
border-radius: 8px;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
line-height: 1;
cursor: pointer;
text-align: center;
transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.account-link:hover, .gsp-pill:hover, .venue-signin-btn:hover {
background: #0a3d27;
border-color: #0a3d27;
color: white;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15,81,50,.22);
text-decoration: none;
}
/* Both states of the GSP topbar buttons (Sign in / My Bookings) share the same pill — the
distinction is the text content the JS swaps in, not the colour. */
.gsp-pill-primary, .gsp-pill-primary:hover { /* explicit no-op override to neutralise old rule */ }
.container { max-width: 1200px; margin: 0 auto; padding: 28px 22px; box-sizing: border-box; }
/* ===== Home hero (kept from the new design — user wanted to keep this area) ===== */
.hero {
text-align: center;
padding: 56px 16px 36px;
background: radial-gradient(ellipse at top, #F0FDF4 0%, var(--bg) 70%);
}
.hero h1 { font-size: 42px; margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.1; }
.hero p { color: var(--muted); margin: 0 0 28px; font-size: 17px; }
.filter-row {
display: flex; gap: 8px; max-width: 720px; margin: 0 auto;
background: white; border-radius: 999px; padding: 8px;
box-shadow: var(--shadow); border: 1px solid var(--border);
}
.filter-row select, .filter-row input {
flex: 1; padding: 10px 18px; border: 0; background: transparent;
font-size: 15px; font-family: inherit; outline: none; min-width: 0;
color: var(--text);
}
.filter-row select { -webkit-appearance: none; appearance: none; cursor: pointer; }
@media (max-width: 720px) {
.hero { padding: 36px 14px 24px; }
.hero h1 { font-size: 30px; }
.filter-row { flex-direction: column; border-radius: 14px; gap: 4px; }
.filter-row select, .filter-row input { padding: 12px 16px; }
}
.btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--border); background: white; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--text); }
.btn:hover { background: #F1F5F9; }
.btn.primary { background: var(--green); color: white; border-color: var(--green); }
.btn.primary:hover { background: #0a3d27; }
.btn.big { font-size: 16px; padding: 12px 28px; }
.btn:disabled { opacity: .6; cursor: wait; }
/* ===== 2026-07-12: currency switcher + "Venues in your area" controls (page-1 redesign) ===== */
.cur-sel {
appearance: none; -webkit-appearance: none;
border: 1px solid var(--border); background: #fff; color: var(--text);
border-radius: 999px; padding: 9px 30px 9px 14px;
font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
transition: border-color .15s;
}
.cur-sel:hover { border-color: #CBD5E1; }
.cur-sel:focus { outline: none; border-color: var(--green-light); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
/* ===== 2026-07-13: account user-menu dropdown (replaces the Sign in link) ===== */
.userwrap { position: relative; }
.usericon { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; }
.usericon svg { width: 20px; height: 20px; }
.usericon:hover { background: #F1F5F9; }
/* Home topbar: constrain to the page container + label the account button (icon + text). */
.topbar.home-topbar { padding-left: 0; padding-right: 0; }
.topbar-inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 22px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.home-topbar .usericon { width: auto; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 14px; font-size: 14px; font-weight: 700; font-family: inherit; line-height: 1; }
.home-topbar .usericon svg { width: 19px; height: 19px; flex: 0 0 auto; }
.userlbl { white-space: nowrap; max-width: 13ch; overflow: hidden; text-overflow: ellipsis; }
/* The caret is what tells someone the control opens a menu rather than navigating. It rotates on
open so the state is visible, and is hidden when signed out (there the label reads "Sign in",
which is an action, not a menu). */
.usercaret { flex: 0 0 auto; opacity: .55; transition: transform .15s, opacity .15s; display: none; }
.usericon.is-signedin .usercaret { display: block; }
.usericon:hover .usercaret { opacity: .9; }
.userwrap .usermenu.open ~ * .usercaret, .usericon[aria-expanded="true"] .usercaret { transform: rotate(180deg); }
@media (max-width: 420px) { .home-topbar .userlbl { display: none; } .home-topbar .usericon { width: 42px; padding: 0; justify-content: center; } }
.usermenu { position: absolute; right: 0; top: 52px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-hover); min-width: 212px; padding: 6px; display: none; z-index: 60; }
.usermenu.open { display: block; }
.usermenu a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.usermenu a:hover { background: #F1F5F9; text-decoration: none; }
.usermenu .um-div { height: 1px; background: var(--border); margin: 5px 8px; }
.usermenu .um-hd { padding: 8px 14px 4px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.list-head { max-width: 1200px; margin: 6px auto 4px; }
.list-head h2 { font-size: 24px; letter-spacing: -.02em; margin: 0; }
.detected { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; margin: 6px 0 14px; }
.detected b { color: var(--text); font-weight: 700; }
/* Filter pill split into a City segment + a Search segment (province removed). */
.container > .filter-row { margin: 8px 0 6px; }
.filter-row .fseg { display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px 14px; min-width: 0; }
.filter-row .fseg.grow { flex: 1; border-left: 1px solid var(--border); }
.filter-row .fseg .lead { display: flex; flex: 0 0 auto; color: var(--muted); }
.filter-row .fseg select, .filter-row .fseg input { flex: 1; border: 0; background: transparent; font-family: inherit; font-size: 15px; color: var(--text); outline: none; min-width: 0; padding: 10px 4px; }
.filter-row .fseg select { -webkit-appearance: none; appearance: none; cursor: pointer; font-weight: 700; }
.filter-row .fseg input::placeholder { color: #9AA3AF; font-weight: 400; }
.filter-search-note { max-width: 1200px; margin: 8px auto 20px; color: var(--muted); font-size: 13px; }
.filter-search-note b { color: var(--text); font-weight: 600; }
@media (max-width: 720px) {
.filter-row .fseg.grow { border-left: 0; border-top: 1px solid var(--border); }
.topbar-right .cur-sel { padding: 8px 26px 8px 12px; font-size: 12.5px; }
}
/* ===== Franchise card grid ===== */
.franchise-grid { margin-top: 24px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.franchise-card { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.franchise-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.franchise-card .hero { position: relative; height: 180px; background-size: cover; background-position: center; background-color: #DCFCE7; }
.franchise-card .hero.placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--green), #2D6A4F); }
.franchise-card .hero-icon { font-size: 56px; color: rgba(255,255,255,.7); }
.franchise-card .price-badge { position: absolute; bottom: 10px; left: 10px; background: rgba(15,81,50,.95); color: white; padding: 5px 11px; border-radius: 14px; font-size: 12.5px; }
.franchise-card .price-badge b { font-size: 13.5px; }
.franchise-card .body { padding: 14px 16px; }
.franchise-card .card-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 4px; }
.franchise-card h3 { margin: 0; font-size: 17px; }
.franchise-card .bay-count { font-size: 11.5px; color: #065F46; background: #DCFCE7; padding: 4px 11px; border-radius: 999px; white-space: nowrap; font-weight: 700; border: 1px solid #BBF7D0; }
.franchise-card .loc-row-card { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; }
.franchise-card .loc { color: var(--muted); font-size: 13px; }
.franchise-card .rating-row { margin: 2px 0 0; }
.franchise-card .rating-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A; padding: 2px 9px; border-radius: 999px; }
.franchise-card .rating-badge .rating-count { font-weight: 500; color: #B45309; }
.franchise-card .desc { font-size: 13.5px; margin: 6px 0 0; line-height: 1.4; color: var(--muted); }
.amenities-row { display: flex; gap: 4px; justify-content: flex-end; flex-shrink: 0; }
.amenity-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #F1F5F9; border-radius: 7px; color: var(--green); }
.amenity-chip svg { width: 15px; height: 15px; stroke-width: 1.8; }
.loading, .empty { padding: 40px; text-align: center; color: var(--muted); }
.empty a { color: var(--green); }
/* ===== Venue page ===== */
/* venue.html no longer uses .container — the page spans full width with its own side gutters
(removes the big empty margins the 1200px container left on wide screens). */
.venue-page { padding: 0 32px 20px; text-align: left; }
.venue-page section { text-align: left; }
.venue-hero-img { height: 320px; background-size: cover; background-position: center; border-radius: 14px; margin-bottom: 18px; box-shadow: var(--shadow); background-color: #DCFCE7; }
.venue-hero-img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 80px; color: white; background: linear-gradient(135deg, var(--green), #2D6A4F); }
.venue-hero-img.placeholder span { opacity: .65; }
.venue-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; text-align: left; }
.venue-header h1 { margin: 0 0 6px; font-size: 30px; text-align: left; }
.loc-row { color: var(--muted); font-size: 14px; margin-bottom: 6px; text-align: left; }
.contact-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.contact-row a { color: var(--green); }
.from-price { background: var(--green); color: white; padding: 10px 18px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.from-price b { font-size: 22px; }
/* Header CTA: price on top, "Book Now" under it on desktop (right-aligned). */
.venue-header-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.venue-hero-book { padding: 11px 24px; font-size: 14px; font-weight: 700; border-radius: 999px; text-decoration: none; white-space: nowrap; }
/* Two-column layout: main on left, sticky amenity rail on right (desktop only) */
.venue-layout { display: grid; grid-template-columns: 1fr 260px; gap: 36px; align-items: start; }
.venue-main { min-width: 0; text-align: left; }
.venue-main > section { text-align: left; }
.venue-about p { margin: 0 0 22px; line-height: 1.6; color: var(--text); text-align: left; }
/* ===== 2026-06-18: alternating section panels — each logical section is wrapped in a .venue-band
that gets a white / smoke-gray background in turn so every block stands out. Template-agnostic:
the band carries the background + padding, and the inner drops its own card styling so
the band shows through cleanly. ===== */
.venue-main .venue-band { padding: 28px 30px; margin: 0 0 16px; border-radius: 14px; border: 1px solid #ECEEF1; }
.venue-main .venue-band:last-child { margin-bottom: 0; }
.venue-main .venue-band:nth-child(odd) { background: #FFFFFF; }
.venue-main .venue-band:nth-child(even) { background: #F4F6F8; }
.venue-main .venue-band > section { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
@media (max-width: 760px) {
.venue-main .venue-band { padding: 20px 18px; border-radius: 12px; }
}
.amenity-rail { position: sticky; top: 24px; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 14px; box-shadow: var(--shadow); }
.amenity-rail h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.amenity-rail ul { list-style: none; margin: 0; padding: 0; }
.amenity-rail li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--text); border-top: 1px solid #F1F5F9; }
.amenity-rail li:first-child { border-top: 0; padding-top: 4px; }
.amenity-rail li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green); stroke-width: 1.75; }
/* ===== 2026-06-19: sidebar action widgets (gift card / membership / book) ===== */
.venue-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.side-widget { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; box-shadow: var(--shadow); text-align: center; }
.side-widget .sw-emoji { font-size: 28px; line-height: 1; }
.side-widget h3 { margin: 8px 0 6px; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.side-widget p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.side-widget .btn { width: 100%; box-sizing: border-box; }
.side-widget-accent { background: linear-gradient(135deg, #0F5132, #14794A); border-color: transparent; }
.side-widget-accent h3 { color: #fff; }
.side-widget-accent p { color: #D7EFE0; }
.side-widget-accent .btn.primary { background: #fff; color: #0F5132; border-color: #fff; }
@media (max-width: 900px) { .venue-side { position: static; } }
/* Amenities row (moved into the header, under the contact line). Unique class so it doesn't collide
with the icon-only .amenity-chip badge used on the venue list cards (which forces a 28px box). */
.venue-amenities-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.venue-amenity-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; line-height: 1; font-size: 13px; color: var(--text); background: #F1F5F9; border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; }
.venue-amenity-chip svg, .venue-amenity-chip i { width: 15px; height: 15px; flex: 0 0 15px; color: var(--green); stroke-width: 1.9; }
.venue-gallery { margin: 4px 0 28px; }
.venue-gallery h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.gallery-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.gallery-thumb { display: block; height: 150px; background-size: cover; background-position: center; border-radius: 10px; cursor: zoom-in; transition: opacity .15s ease, transform .15s ease; }
.gallery-thumb:hover { opacity: .92; transform: translateY(-1px); }
@media (max-width: 900px) {
.venue-layout { grid-template-columns: 1fr; }
.amenity-rail { position: static; margin-bottom: 22px; }
}
/* ===== Image lightbox ===== */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); user-select: none; }
.lb-btn { position: absolute; background: rgba(255,255,255,.10); color: white; border: 0; font-size: 26px; cursor: pointer; border-radius: 999px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: background .12s ease; backdrop-filter: blur(4px); }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 20px; right: 20px; font-size: 28px; line-height: 1; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
@media (max-width: 720px) {
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-btn { width: 42px; height: 42px; }
}
.venue-book { background: white; border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 22px; }
.venue-book h2 { margin: 0 0 6px; font-size: 22px; }
.venue-book .policy { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.venue-book .policy span { margin-right: 6px; }
.bay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.bay-card { background: white; border: 2px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.bay-card:hover { border-color: var(--green-light); transform: translateY(-1px); }
.bay-card.sel { border-color: var(--green); background: #ECFDF5; }
.bay-img { height: 120px; background-size: cover; background-position: center; background-color: #DCFCE7; }
.bay-img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 36px; color: rgba(255,255,255,.7); background: linear-gradient(135deg, var(--green), #2D6A4F); }
.bay-body { padding: 12px 14px; }
.bay-name { font-weight: 600; margin-bottom: 4px; font-size: 14.5px; }
.bay-desc { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; line-height: 1.4; }
.bay-price { color: var(--text); font-size: 14px; font-weight: 600; }
.booking-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.booking-controls label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.booking-controls input, .booking-controls select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }
.slots-box { margin-bottom: 6px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; align-items: center; }
.slot-btn { padding: 10px 12px; border: 1px solid var(--green); background: white; color: var(--green); border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit; font-size: 13.5px; white-space: nowrap; text-align: center; }
.slot-btn:hover { background: var(--green); color: white; }
.slot-btn.sel { background: var(--green); color: #fff; box-shadow: 0 0 0 3px rgba(15,81,50,.18); }
/* 2026-06-10: booked slot — visible but disabled. Greyed out, no hover lift, no click. */
.slot-btn.slot-booked {
border-color: #CBD5E1; background: #F1F5F9; color: #94A3B8; cursor: not-allowed;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.slot-btn.slot-booked:hover { background: #F1F5F9; color: #94A3B8; }
.slot-btn.slot-booked .slot-booked-tag {
font-size: 10px; font-family: 'Inter', system-ui, sans-serif; text-transform: uppercase;
letter-spacing: .5px; font-weight: 700; color: #DC2626;
}
/* Buffer chip between two consecutive slots. Light-blue pill, hover shows time range. */
.slot-buffer {
background: #E0F2FE; color: #0369A1; border: 1px dashed #7DD3FC; border-radius: 999px;
padding: 4px 10px; font-size: 11px; font-weight: 700; text-align: center;
font-family: 'Inter', system-ui, sans-serif; letter-spacing: .3px; cursor: help;
min-height: 26px; display: flex; align-items: center; justify-content: center;
}
.slot-buffer:hover { background: #BAE6FD; color: #075985; }
#checkoutBox { background: white; border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); }
#checkoutBox h2 { margin-top: 0; }
#checkoutBox .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#checkoutBox label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
#checkoutBox input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }
/* 2026-06-10: checkbox + small number inputs should NOT inherit the 100%-wide form styling.
Applies globally to BOTH the checkout box AND the (now standalone, under-slots) addons box,
so the access-code toggle and the add-on picker checkboxes both render properly. */
#checkoutBox input[type="checkbox"], #addonsBox input[type="checkbox"] {
width: 18px; height: 18px; padding: 0; flex: none; min-width: 18px;
accent-color: var(--green); cursor: pointer; margin: 0;
}
#checkoutBox input[type="number"], #addonsBox input[type="number"] {
width: 72px; padding: 5px 8px; font-size: 13px;
}
/* Package grid — 2 columns on desktop (more breathing room than the old auto-fill 3-up at
220px), single column on mobile. Cards keep their existing styling; the grid just lays
them out. 2026-06-11. */
.package-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 18px;
}
@media (max-width: 700px) {
.package-grid { grid-template-columns: 1fr; gap: 10px; }
}
/* ===== Packages as pricing plans (2026-06-19) ===== */
/* Each package renders as a pricing card: name, big price, feature checklist, full-width CTA.
The outer card bg/border comes from the template's .package-card rule; this controls layout. */
.pricing-card {
display: flex; flex-direction: column; gap: 9px;
padding: 24px 22px 22px; text-align: left; height: 100%; box-sizing: border-box;
}
.pricing-card .pp-name { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #64748B; }
.pricing-card .pp-price { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.pricing-card .pp-amount { font-size: 38px; font-weight: 800; color: #0F172A; line-height: 1; letter-spacing: -.02em; }
.pricing-card .pp-cur { font-size: 13px; font-weight: 700; color: #94A3B8; }
.pricing-card .pp-per { font-size: 13px; color: #64748B; margin-top: -4px; }
.pricing-card .pp-desc { font-size: 13.5px; color: #475569; line-height: 1.5; margin-top: 2px; }
.pricing-card .pp-feats { list-style: none; margin: 6px 0 2px; padding: 14px 0 0; border-top: 1px solid #EEF2F6; display: flex; flex-direction: column; gap: 10px; }
.pricing-card .pp-feats li { font-size: 13.5px; color: #334155; display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.pricing-card .pp-cta { margin-top: auto; width: 100%; padding-top: 11px; padding-bottom: 11px; }
/* Tighten the grid for a pricing-table feel; allow up to 3 across on wide screens. */
.pricing-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
@media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; } }
/* Add-on picker cards — pulled out of the inline-style soup so the visual is consistent. */
.addon-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px; background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 10px;
cursor: pointer; transition: background .12s, border-color .12s;
}
.addon-card:hover { background: #F1F5F9; border-color: #CBD5E1; }
.addon-card.checked { background: #ECFDF5; border-color: #BBF7D0; }
.addon-card .addon-meta { min-width: 0; flex: 1; }
.addon-card .addon-name { font-weight: 600; font-size: 14px; color: #0F172A; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.addon-card .addon-price { color: #64748B; font-weight: 500; font-size: 13px; }
.addon-card .addon-desc { font-size: 12.5px; color: #64748B; margin-top: 3px; }
.addon-card .addon-qty-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #64748B; }
.email-hint { background: #ECFDF5; border: 1px solid #BBF7D0; color: #065F46; padding: 9px 13px; border-radius: 8px; font-size: 13px; margin: -4px 0 12px; }
.gc-redeem { margin: 8px 0 14px; padding: 12px 14px; background: #FEF9C3; border: 1px solid #FDE68A; border-radius: 10px; }
.gc-redeem a { color: #854D0E; font-weight: 600; text-decoration: none; }
.gc-redeem a:hover { text-decoration: underline; }
.email-hint a { color: var(--green); font-weight: 600; }
.price-summary { background: #F1F5F9; border-radius: 10px; padding: 16px 18px; margin: 18px 0; line-height: 1.7; }
.price-summary > div { padding: 1px 0; }
.price-summary .grand { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 18px; }
/* ===== Checkout polish (2026-06-19) — restore the white card inside the alternating band and give
the form room to breathe. ===== */
.venue-main .venue-band > section#checkoutBox {
background: #fff !important; border: 1px solid var(--border) !important; border-radius: 16px !important;
padding: 24px 26px !important; box-shadow: var(--shadow) !important; margin: 0 !important;
}
#checkoutBox h2 { font-size: 22px; margin: 0 0 16px; }
#checkoutBox h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 12px; }
#checkoutBox .row { gap: 16px; margin-bottom: 16px; }
#checkoutBox .row > div { margin-bottom: 0; }
#checkoutBox label { margin-bottom: 6px; }
#checkoutBox input { padding: 11px 13px; }
#bookingSummary { padding: 16px 18px !important; }
.gc-redeem { margin: 6px 0 18px; padding: 16px 18px; border-radius: 12px; }
.gc-redeem input { padding: 10px 12px; }
@media (max-width: 720px) {
.venue-main .venue-band > section#checkoutBox { padding: 18px 16px !important; }
#checkoutBox .row { grid-template-columns: 1fr; gap: 0; }
#checkoutBox .row > div { margin-bottom: 14px; }
}
.err { color: #B91C1C; font-size: 14px; margin-top: 8px; }
/* Confirm + cancel pages */
.confirm-card { background: white; border-radius: 12px; padding: 28px; max-width: 560px; margin: 30px auto; box-shadow: var(--shadow); text-align: center; }
.confirm-card h1 { margin: 0 0 6px; font-size: 26px; }
.confirm-card .venue-name { color: var(--muted); margin: 0 0 4px; }
.confirm-card .when { font-size: 17px; margin: 0 0 18px; }
.code-box { background: #ECFDF5; border-radius: 10px; padding: 18px; margin: 18px 0; }
.code-box .lbl { font-size: 12px; color: var(--muted); }
.code-box .code { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 38px; font-weight: 700; color: var(--green); letter-spacing: 8px; }
.code-box small { color: var(--muted); }
.total { font-size: 15px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.badge.ok { background: #16A34A; color: white; }
.badge.warn { background: #F59E0B; color: white; }
.actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.ok-banner { background: #ECFDF5; border: 1px solid #BBF7D0; color: var(--green); padding: 12px; border-radius: 8px; margin-top: 14px; }
footer { text-align: center; color: var(--muted); padding: 20px; font-size: 12px; }
/* ============================================================================
Mobile polish — tightened paddings, larger touch targets (44px+), iOS-safe
16px input fonts (no auto-zoom), better stacked layouts.
============================================================================ */
@media (max-width: 720px) {
.topbar { padding: 11px 14px; }
.topbar-right { gap: 10px; }
.brand { font-size: 17px; }
.link-out { font-size: 13px; }
.account-link, .gsp-pill, .venue-signin-btn { padding: 8px 16px; font-size: 12.5px; }
.container { padding: 16px 14px; }
.loading, .empty { padding: 0; }
/* Home hero shrinks but stays sharp */
.hero { padding: 28px 14px 22px; background: radial-gradient(ellipse at top, #F0FDF4 0%, var(--bg) 70%); }
.hero h1 { font-size: 26px; line-height: 1.18; letter-spacing: -.015em; }
.hero p { font-size: 14.5px; margin-bottom: 18px; }
/* The filter row keeps the pill on tablet but stacks cleanly on small mobile. */
.filter-row { flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; }
.filter-row select, .filter-row input { padding: 12px 16px; font-size: 16px; min-height: 44px; }
.filter-row .btn.primary { width: 100%; min-height: 46px; font-size: 15px; padding: 12px 16px; border-radius: 10px !important; }
/* Venue card grid: snug gap, taller hero image, name+amenities can wrap */
.franchise-grid { margin-top: 14px; gap: 14px; grid-template-columns: 1fr; }
.franchise-card .hero { height: 200px; }
.franchise-card .body { padding: 14px; }
.franchise-card h3 { font-size: 16.5px; }
.franchise-card .loc-row-card { flex-wrap: wrap; row-gap: 6px; }
.franchise-card .amenities-row { flex-wrap: wrap; justify-content: flex-start; }
.franchise-card .desc { font-size: 13.5px; }
/* ===== Venue page ===== */
.venue-page { padding: 0 16px 40px; }
.venue-hero-img { height: 220px; border-radius: 12px; margin-bottom: 14px; }
.venue-hero-img.placeholder { font-size: 64px; }
.venue-header { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; }
.venue-header h1 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; }
.loc-row { font-size: 13.5px; }
.contact-row { gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.contact-row a {
display: inline-flex; align-items: center; gap: 4px;
background: #F1F5F9; padding: 6px 11px; border-radius: 999px;
font-size: 13px; color: var(--green); text-decoration: none;
min-height: 32px;
}
.from-price { padding: 8px 14px; font-size: 13px; align-self: flex-start; border-radius: 8px; }
.from-price b { font-size: 17px; }
/* Mobile: "Book Now" sits inline next to the From $X/hr price. */
.venue-header-cta { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.venue-hero-book { padding: 9px 18px; font-size: 13px; }
/* About: cap line length */
.venue-about p { font-size: 14.5px; line-height: 1.6; }
/* Amenity rail (now inline above the main on mobile) */
.amenity-rail { padding: 14px 14px 10px; border-radius: 10px; margin-bottom: 18px; }
.amenity-rail h3 { margin-bottom: 8px; font-size: 14.5px; }
.amenity-rail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.amenity-rail li { padding: 7px 0; font-size: 13px; }
.amenity-rail li svg { width: 18px; height: 18px; }
/* Photo gallery: wide thumbs you can swipe through */
.venue-gallery h3 { font-size: 14.5px; }
.gallery-strip { grid-auto-columns: 72vw; gap: 8px; }
.gallery-thumb { height: 180px; border-radius: 10px; }
/* Booking section */
.venue-book { padding: 18px 16px; border-radius: 12px; }
.venue-book h2 { font-size: 19px; }
.venue-book .policy { font-size: 12.5px; margin-bottom: 14px; }
/* Bay cards: horizontal layout (small image left, text right) saves vertical space */
.bay-list { grid-template-columns: 1fr; gap: 10px; }
.bay-card { display: grid; grid-template-columns: 110px 1fr; align-items: stretch; }
.bay-img { height: 100%; min-height: 100px; }
.bay-img.placeholder { font-size: 28px; }
.bay-body { padding: 12px 14px; }
.bay-name { font-size: 14px; margin-bottom: 4px; }
.bay-desc { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
.bay-price { font-size: 13.5px; }
/* Booking controls: date full-width, duration+players half-half */
.booking-controls { grid-template-columns: 1fr 1fr; gap: 10px; }
.booking-controls > div:first-child { grid-column: 1 / -1; }
.booking-controls label { font-size: 11.5px; }
.booking-controls input, .booking-controls select { padding: 12px 14px; font-size: 16px; min-height: 44px; }
/* Slot grid: 2 columns on mobile (range labels need room). Still 44px tall for tap-target. */
.slot-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.slot-btn { padding: 12px 6px; font-size: 12.5px; min-height: 44px; border-radius: 8px; }
/* Checkout block */
#checkoutBox { padding: 18px 16px; border-radius: 12px; }
#checkoutBox h2 { font-size: 19px; }
#checkoutBox .row { grid-template-columns: 1fr; gap: 10px; }
#checkoutBox input { padding: 12px 14px; font-size: 16px; min-height: 44px; }
.price-summary { padding: 14px 16px; }
.price-summary .grand { font-size: 16px; }
/* Generic buttons: minimum 44px tap target */
.btn { min-height: 42px; padding: 11px 18px; }
.btn.big { min-height: 50px; font-size: 16px; }
/* Confirm page */
.confirm-card { padding: 22px 18px; margin: 18px auto; border-radius: 12px; }
.confirm-card h1 { font-size: 22px; }
.code-box .code { font-size: 32px; letter-spacing: 6px; }
/* Lightbox: respect iOS safe areas + give close button more space */
.lb-close { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
.lb-prev, .lb-next { width: 42px; height: 42px; font-size: 22px; }
.lb-counter { bottom: max(18px, env(safe-area-inset-bottom)); }
footer { padding: 16px; font-size: 11.5px; }
}
/* Very small phones (iPhone SE etc.) */
@media (max-width: 380px) {
.hero h1 { font-size: 23px; }
.venue-header h1 { font-size: 20px; }
.amenity-rail ul { grid-template-columns: 1fr; }
.slot-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Touch devices: disable hover lift on cards (otherwise gets stuck after tap) */
@media (hover: none) {
.franchise-card:hover { transform: none; box-shadow: var(--shadow); }
.bay-card:hover { transform: none; border-color: var(--border); }
.bay-card.sel:hover { border-color: var(--green); }
.gallery-thumb:hover { opacity: 1; transform: none; }
}
/* ============================================================================
Venue templates — owner-selectable visual themes for the public venue page.
All 3 share the same DOM structure (set by venue.js renderVenue) and JS handlers;
the body class (set on render) routes which theme block applies.
============================================================================ */
/* ===== Width / container fix =====
Every template uses .container as the centered wrap. Bumped to 1200 so wide screens don't feel
cramped. Per-template overrides (further down) intentionally narrow Editorial to 920 and Studio
to 760 for their typographic feel — Minimal stays at 1200 for the SaaS density. */
.venue-page { width: 100%; box-sizing: border-box; }
/* ===== Owner-branded nav (Phase 10 polish) =====
Top nav for venue pages. Phase 10 changes:
- Logo OR text branding (not both) — venue.js renders only one
- Larger logo (44px tall, up from 32) so it doesn't look cramped on big monitors
- Tighter container padding so wide screens don't sprawl
- Hover transitions on nav links for a more responsive feel
- Book Now button gets a hover lift */
.topbar { display: flex; align-items: center; gap: 20px; padding: 14px 28px; }
.topbar .brand.venue-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; flex-shrink: 0; line-height: 1; }
.topbar .venue-logo { max-height: 50px; width: auto; display: block; }
.topbar .venue-nav { flex: 1; display: flex; gap: 26px; align-items: center; margin-left: 18px; flex-wrap: wrap; }
.topbar .venue-nav.venue-nav-center { justify-content: center; margin-left: 0; }
.topbar .venue-nav-link { color: inherit; text-decoration: none; font-size: 16px; font-weight: 500; opacity: 1; transition: opacity .15s, color .15s; }
.topbar .venue-nav-link:hover { opacity: 1; }
.topbar .venue-nav-right { flex-shrink: 0; display: flex; align-items: center; gap: 14px; }
.topbar .venue-book-btn { padding: 10px 22px; font-size: 13.5px; font-weight: 600; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.topbar .venue-book-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,81,50,.18); }
/* Mobile hamburger (hidden on desktop). The mobile "Sign in" link lives inside the dropdown. */
.venue-hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 9px; background: #fff; cursor: pointer; padding: 0; }
.venue-hamburger span { display: block; width: 18px; height: 2px; background: var(--text); margin: 0 auto; border-radius: 2px; }
.venue-nav-signin-mobile { display: none; }
@media (max-width: 720px) {
.topbar { gap: 12px; padding: 10px 16px; }
.topbar .venue-logo { max-height: 40px; }
.venue-hamburger { display: flex; }
.topbar .venue-nav-right > .venue-signin-btn, .topbar .venue-nav-right > .venue-book-btn { display: none; }
.topbar .venue-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 0; background: #000000; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px rgba(0,0,0,.35); z-index: 60; }
.topbar.nav-open .venue-nav { display: flex; }
.topbar .venue-nav .venue-nav-link { padding: 13px 20px; opacity: 1; font-size: 15px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.10); }
.topbar .venue-nav .venue-nav-link:last-child { border-bottom: 0; }
.venue-nav-signin-mobile { display: block; }
}
/* Action widgets: desktop = right sidebar; mobile = inline block shown after the About section
(1 per row, full text). The two never show at once. */
.venue-widgets-mobile { display: none; }
@media (max-width: 900px) {
.venue-side { display: none; } /* hide the sidebar copy on mobile */
.venue-widgets-mobile { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.venue-widgets-mobile .side-widget { width: 100%; box-sizing: border-box; }
}
/* ===== Shared additions (Contact section, Footer, brand logo) ===== */
.venue-contact-section { margin: 30px 0 14px; padding: 22px 24px; background: var(--card-bg, #ffffff); border-radius: 14px; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.05)); }
.venue-contact-section h2 { margin: 0 0 14px; font-size: 22px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.contact-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.contact-item .contact-icon { font-size: 20px; line-height: 1; padding-top: 2px; }
.contact-item b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #64748B); font-weight: 700; margin-bottom: 2px; }
.contact-item a { color: inherit; text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }
.contact-layout { display: block; }
.contact-layout.has-form { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 720px) { .contact-layout.has-form { grid-template-columns: 1fr; gap: 18px; } }
.contact-form .cf-row { margin-bottom: 14px; }
.contact-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--muted, #64748B); margin-bottom: 6px; }
.contact-form label small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted, #64748B); }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border, #E5E7EB); border-radius: 8px; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.cf-msg { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.cf-msg.ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.cf-msg.err { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.cf-msg.sending { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
/* ===== Feature Boxes (between About and Bays) ===== */
.venue-features { margin: 18px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* Owner-configured columns (desktop). Mobile count from --fb-cols-mobile. */
.feature-grid-cfg { grid-template-columns: repeat(var(--fb-cols, 4), minmax(0, 1fr)); }
@media (max-width: 720px) { .feature-grid-cfg { grid-template-columns: repeat(var(--fb-cols-mobile, 1), minmax(0, 1fr)); } }
.feature-box { padding: 22px 22px 20px; background: var(--card-bg, #FFFFFF); border-radius: 12px; border: 1px solid var(--border, #E5E7EB); }
.feature-box .feature-icon { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.feature-box h3 { margin: 0 0 6px; font-size: 16px; }
.feature-box p { margin: 0; font-size: 13.5px; color: var(--muted, #64748B); line-height: 1.55; }
/* ===== Footer (Phase 10 tighter spacing — was leaving a huge gap below) ===== */
.venue-footer { margin-top: 40px; padding: 28px 22px 18px; border-top: 1px solid var(--border, #E5E7EB); }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; padding-bottom: 20px; }
.footer-block h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted, #64748B); }
.footer-block ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-block li { font-size: 13.5px; }
.footer-block li a { color: inherit; text-decoration: none; opacity: 0.85; }
.footer-block li a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--border, #E5E7EB); }
.footer-copy { font-size: 13px; color: var(--muted, #64748B); }
.footer-right { font-size: 12.5px; color: var(--muted, #64748B); }
.footer-right a { color: inherit; }
.footer-logo { max-height: 32px; width: auto; opacity: 0.85; }
.footer-copy { font-size: 13px; color: var(--muted, #64748B); }
.footer-right { font-size: 13px; color: var(--muted, #64748B); }
.footer-right a { color: inherit; text-decoration: none; }
.footer-right a:hover { color: var(--accent, #2563EB); text-decoration: underline; }
.venue-logo { display: inline-block; }
/* Three modern-minimal templates. All share:
- Generous whitespace (padding/margin)
- Restrained palette (1 accent max, no gradients)
- Thin 1px borders (no offset/colored shadows)
- Clean typography
They differ in: font choice, layout density, accent color, and how content is grouped.
*/
/* ===== Template: EDITORIAL (default) — modern magazine feel ===== */
/* Off-white background, dark text, large display headlines, single-column flow.
(The serif display face was dropped: it was never actually loaded, so it fell back to Georgia
and made these headings the only text on the site in a different typeface.) */
body.tmpl-editorial { background: #FAFAF7; color: #1A1A1A; font-family: 'Inter', system-ui, sans-serif; }
body.tmpl-editorial .topbar { background: rgba(250,250,247,0.92); border-bottom: 1px solid #E7E5DF; backdrop-filter: blur(8px); }
body.tmpl-editorial .topbar .brand { color: #1A1A1A; font-weight: 600; }
body.tmpl-editorial .topbar .brand b { }
body.tmpl-editorial .topbar .link-out, body.tmpl-editorial .topbar .account-link { color: #6B6862; }
body.tmpl-editorial .venue-page, body.tmpl-editorial .container { max-width: 1180px; }
body.tmpl-editorial .venue-hero-img { height: 360px; border-radius: 0; margin-bottom: 36px; }
body.tmpl-editorial .venue-header { padding: 0 0 28px; border-bottom: 1px solid #E7E5DF; margin-bottom: 36px; }
body.tmpl-editorial .venue-header h1 { font-size: 52px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: #1A1A1A; }
body.tmpl-editorial .venue-header .loc-row { color: #6B6862; font-size: 14px; margin-top: 12px; }
body.tmpl-editorial .venue-header .contact-row { margin-top: 14px; }
body.tmpl-editorial .venue-header .contact-row a { color: #1A1A1A; border-bottom: 1px solid #1A1A1A; padding-bottom: 1px; text-decoration: none; }
/* Phase 10: the .from-price pill uses the dark-green base bg (var(--green) = #0F5132).
The previous template overrides set the text to gray, which had near-invisible contrast
on the dark pill. Force white text + bold in every template so it's readable. */
body.tmpl-editorial .from-price { color: #FFFFFF; font-size: 14px; }
body.tmpl-editorial .from-price b { color: #FFFFFF; }
body.tmpl-editorial h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.015em; color: #1A1A1A; margin-bottom: 18px; }
body.tmpl-editorial h3 { font-weight: 500; }
body.tmpl-editorial .venue-about p { font-size: 17px; line-height: 1.75; color: #2A2A2A; }
body.tmpl-editorial .venue-about, body.tmpl-editorial .venue-gallery,
body.tmpl-editorial .venue-book, body.tmpl-editorial .venue-packages,
body.tmpl-editorial .venue-contact-section, body.tmpl-editorial #checkoutBox {
background: transparent; box-shadow: none; border: 0; border-top: 1px solid #E7E5DF; border-radius: 0;
padding: 36px 0 0; margin: 0 0 36px;
}
body.tmpl-editorial .amenity-rail { background: transparent; border-left: 1px solid #E7E5DF; padding-left: 28px; }
body.tmpl-editorial .bay-card { background: #FFFFFF; border: 1px solid #E7E5DF; border-radius: 4px; box-shadow: none; }
body.tmpl-editorial .bay-card.sel { border-color: #1A1A1A; }
body.tmpl-editorial .bay-card .bay-name { font-size: 18px; }
body.tmpl-editorial .package-card { background: #FFFFFF !important; border: 1px solid #E7E5DF !important; border-radius: 4px !important; box-shadow: none !important; }
body.tmpl-editorial .btn { background: #FFFFFF; color: #1A1A1A; border: 1px solid #1A1A1A; border-radius: 4px; font-weight: 500; }
body.tmpl-editorial .btn.primary, body.tmpl-editorial .btn.big { background: #1A1A1A; color: #FAFAF7; border-color: #1A1A1A; }
body.tmpl-editorial .slot-pill { background: #FFFFFF; border: 1px solid #D5D2CB; border-radius: 4px; color: #1A1A1A; }
body.tmpl-editorial .slot-pill:hover { border-color: #1A1A1A; background: #1A1A1A; color: #FAFAF7; }
body.tmpl-editorial .venue-footer { background: transparent; border-top: 1px solid #E7E5DF; color: #6B6862; }
body.tmpl-editorial .footer-copy, body.tmpl-editorial .footer-right { color: #6B6862; }
body.tmpl-editorial .footer-right a:hover { color: #1A1A1A; }
body.tmpl-editorial .venue-contact-section h2 { }
/* ===== Template: MINIMAL — Linear / Stripe-style clean SaaS ===== */
/* Pure white, tight Inter throughout, 1px hairline borders, subtle indigo accent, dense grid. */
body.tmpl-minimal { background: #FFFFFF; color: #0A0A0A; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.tmpl-minimal .topbar { background: rgb(6 15 21); border-bottom: 0px solid #EDEDED; backdrop-filter: blur(10px); padding: 14px 24px; color: #fff; }
body.tmpl-minimal .topbar .brand { color: #0A0A0A; font-weight: 600; letter-spacing: -0.01em; }
body.tmpl-minimal .topbar .link-out, body.tmpl-minimal .topbar .account-link { color: #6E6E6E; font-weight: 500; font-size: 13.5px; }
body.tmpl-minimal .topbar .link-out:hover, body.tmpl-minimal .topbar .account-link:hover { color: #0A0A0A; }
body.tmpl-minimal .venue-hero-img { height: 320px; border-radius: 8px; margin-bottom: 28px; }
body.tmpl-minimal .venue-header { padding: 0 0 20px; border: 0; margin-bottom: 28px; }
body.tmpl-minimal .venue-header h1 { font-size: 42px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: #0A0A0A; }
body.tmpl-minimal .venue-header .loc-row { color: #6E6E6E; font-size: 14px; margin-top: 8px; }
body.tmpl-minimal .venue-header .contact-row a { color: #6E6E6E; text-decoration: none; font-size: 13.5px; }
body.tmpl-minimal .venue-header .contact-row a:hover { color: #0A0A0A; }
body.tmpl-minimal .from-price { font-size: 13.5px; color: #FFFFFF; }
body.tmpl-minimal .from-price b { color: #FFFFFF; }
body.tmpl-minimal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: #0A0A0A; margin-bottom: 14px; }
body.tmpl-minimal h3 { font-weight: 600; letter-spacing: -0.01em; }
body.tmpl-minimal .venue-about, body.tmpl-minimal .venue-gallery,
body.tmpl-minimal .venue-book, body.tmpl-minimal .venue-packages,
body.tmpl-minimal .venue-contact-section, body.tmpl-minimal #checkoutBox {
background: #FFFFFF; border: 1px solid #EDEDED; border-radius: 12px; box-shadow: none;
padding: 24px 26px; margin-bottom: 16px;
}
body.tmpl-minimal .amenity-rail { background: #FAFAFA; border: 1px solid #EDEDED; border-radius: 12px; box-shadow: none; padding: 22px 22px; }
body.tmpl-minimal .bay-card { background: #FFFFFF; border: 1px solid #EDEDED; border-radius: 10px; box-shadow: none; transition: border-color .15s; }
body.tmpl-minimal .bay-card:hover { border-color: #C7C7C7; }
body.tmpl-minimal .bay-card.sel { border-color: #0A0A0A; box-shadow: 0 0 0 1px #0A0A0A; }
body.tmpl-minimal .bay-card .bay-price { color: #0A0A0A; font-weight: 600; }
body.tmpl-minimal .package-card { background: #FFFFFF !important; border: 1px solid #EDEDED !important; border-radius: 10px !important; box-shadow: none !important; }
body.tmpl-minimal .btn { background: #FFFFFF; color: #0A0A0A; border: 1px solid #D4D4D4; border-radius: 8px; font-weight: 500; }
body.tmpl-minimal .btn:hover { border-color: #0A0A0A; }
body.tmpl-minimal .btn.primary, body.tmpl-minimal .btn.big { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
body.tmpl-minimal .btn.primary:hover, body.tmpl-minimal .btn.big:hover { background: #262626; }
body.tmpl-minimal .slot-pill { background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 8px; color: #0A0A0A; font-weight: 500; }
body.tmpl-minimal .slot-pill:hover { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
body.tmpl-minimal label { color: #6E6E6E; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
body.tmpl-minimal input, body.tmpl-minimal select, body.tmpl-minimal textarea { border: 1px solid #E5E5E5; border-radius: 8px; }
body.tmpl-minimal input:focus, body.tmpl-minimal select:focus, body.tmpl-minimal textarea:focus { border-color: #0A0A0A; outline: none; box-shadow: 0 0 0 3px rgba(10,10,10,0.04); }
body.tmpl-minimal .venue-footer { background: transparent; border-top: 0; color: #6E6E6E; }
/* ===== Template: STUDIO — gallery minimalism, image-led, narrow column ===== */
/* Pure white, Inter light weights, lots of whitespace, narrow content column, almost no chrome. */
body.tmpl-studio { background: #FFFFFF; color: #111111; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
body.tmpl-studio .topbar { background: #FFFFFF; border-bottom: 0; padding: 22px 28px; }
body.tmpl-studio .topbar .brand { color: #111111; font-weight: 500; font-size: 15px; letter-spacing: -0.005em; }
body.tmpl-studio .topbar .link-out, body.tmpl-studio .topbar .account-link { color: #767676; font-weight: 400; font-size: 13px; letter-spacing: 0.02em; }
body.tmpl-studio .venue-page, body.tmpl-studio .container { max-width: 1080px; }
body.tmpl-studio .venue-layout { display: block; }
body.tmpl-studio .venue-main { width: 100%; }
body.tmpl-studio .amenity-rail { float: none; width: 100%; max-width: 100%; }
body.tmpl-studio .venue-hero-img { height: 460px; border-radius: 0; margin-bottom: 56px; }
body.tmpl-studio .venue-header { text-align: center; padding: 0 0 24px; border: 0; margin-bottom: 56px; }
body.tmpl-studio .venue-header h1 { font-size: 34px; font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; color: #111111; }
body.tmpl-studio .venue-header .loc-row { color: #767676; font-size: 13.5px; margin-top: 14px; font-weight: 400; }
body.tmpl-studio .venue-header .contact-row { justify-content: center; margin-top: 18px; }
body.tmpl-studio .venue-header .contact-row a { color: #767676; font-size: 13px; }
body.tmpl-studio .from-price { color: #FFFFFF; font-size: 13px; font-weight: 500; }
body.tmpl-studio .from-price b { color: #FFFFFF; font-weight: 700; }
body.tmpl-studio h2 { text-align: center; font-size: 24px; font-weight: 400; letter-spacing: -0.005em; color: #111111; margin: 48px 0 28px; }
body.tmpl-studio h3 { font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: #767676; }
body.tmpl-studio .venue-about p { font-size: 16px; line-height: 1.75; color: #2E2E2E; max-width: 580px; margin: 0 auto; text-align: center; }
body.tmpl-studio .venue-about, body.tmpl-studio .venue-gallery,
body.tmpl-studio .venue-book, body.tmpl-studio .venue-packages,
body.tmpl-studio .venue-contact-section, body.tmpl-studio #checkoutBox,
body.tmpl-studio .amenity-rail {
background: transparent; border: 0; box-shadow: none; border-radius: 0;
padding: 48px 0; margin: 0;
}
body.tmpl-studio .venue-book, body.tmpl-studio .venue-contact-section { border-top: 1px solid #ECECEC; }
body.tmpl-studio .bay-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.tmpl-studio .bay-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.tmpl-studio .bay-card .bay-img { height: 180px; border-radius: 2px; }
body.tmpl-studio .bay-card.sel .bay-img { outline: 2px solid #111111; outline-offset: 4px; }
body.tmpl-studio .bay-card .bay-body { padding: 14px 0 0; }
body.tmpl-studio .bay-card .bay-name { font-weight: 500; font-size: 15px; }
body.tmpl-studio .bay-card .bay-price { color: #767676; font-size: 13px; font-weight: 400; }
body.tmpl-studio .package-card { background: #FFFFFF !important; border: 1px solid #ECECEC !important; border-radius: 0 !important; box-shadow: none !important; padding: 22px !important; }
body.tmpl-studio .btn { background: transparent; color: #111111; border: 1px solid #111111; border-radius: 0; font-weight: 400; letter-spacing: 0.02em; padding: 11px 22px; font-size: 13px; }
body.tmpl-studio .btn:hover { background: #111111; color: #FFFFFF; }
body.tmpl-studio .btn.primary, body.tmpl-studio .btn.big { background: #111111; color: #FFFFFF; }
body.tmpl-studio .btn.primary:hover, body.tmpl-studio .btn.big:hover { background: #2E2E2E; }
body.tmpl-studio .slot-pill { background: transparent; border: 1px solid #D8D8D8; border-radius: 0; color: #111111; font-weight: 400; }
body.tmpl-studio .slot-pill:hover { border-color: #111111; background: #111111; color: #FFFFFF; }
body.tmpl-studio label { color: #767676; font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
body.tmpl-studio input, body.tmpl-studio select, body.tmpl-studio textarea { border: 0; border-bottom: 1px solid #D8D8D8; border-radius: 0; padding-left: 0; background: transparent; }
body.tmpl-studio input:focus, body.tmpl-studio select:focus, body.tmpl-studio textarea:focus { border-bottom-color: #111111; outline: none; box-shadow: none; }
body.tmpl-studio .venue-footer { background: transparent; border-top: 1px solid #ECECEC; color: #767676; margin-top: 72px; padding: 36px 0; }
body.tmpl-studio .footer-inner { font-size: 12.5px; letter-spacing: 0.02em; }
body.tmpl-studio .footer-right a:hover { color: #111111; }
/* ===== Minimal template — mobile overrides (appended last so they win source-order) ===== */
@media (max-width: 720px) {
body.tmpl-minimal .venue-header h1 { font-size: 30px; }
body.tmpl-minimal .btn.primary, body.tmpl-minimal .btn.big {
background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A;
min-height: 21px; line-height: normal; padding: 10px 20px;
}
}
/* ===== Checkout waiver ===== */
.waiver-box { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 16px 0; background: #fff; }
.waiver-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.waiver-text { max-height: 220px; overflow-y: auto; border: 1px solid #EEF2F6; border-radius: 8px; padding: 12px 14px; background: #F8FAFC; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.waiver-text p { margin: 0 0 8px; }
.waiver-text :last-child { margin-bottom: 0; }
.waiver-agree { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 14px; cursor: pointer; }
.waiver-agree input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
/* ===== Top-bar logo: one size on mobile, on every page =====
The height was being set per page as an inline attribute — 48px on home and account, 40px on the
operator pages, 34px on confirm — plus two separate CSS rules for the venue/gift-card headers.
The result was a logo that changed size as you moved through the site on a phone.
!important is deliberate here rather than lazy: an inline style attribute outranks any selector,
so the only alternatives were this or editing the same markup in eight HTML files. height:auto
lets max-height do the clamping without distorting the artwork. */
@media (max-width: 820px) {
.brand img,
#brandLogo,
.gsp-topbar .gsp-brand img,
.gvh-net img,
.home-topbar .brand img {
max-height: 40px !important;
height: auto !important;
width: auto;
display: block;
}
}
/* ===== Venue name: one size on mobile, whatever the template =====
The responsive block sets .venue-header h1 to 22px, but every template then re-states it at
desktop size with a heavier selector (body.tmpl-editorial = 52px, body.tmpl-minimal = 42px, and
so on), so on a phone the venue name was rendering at its full desktop size and swallowing the
screen. The attribute selector below matches ANY tmpl-* body at the same specificity and, coming
last in the file, wins the tie for all of them at once. */
@media (max-width: 720px) {
body[class*="tmpl-"] .venue-header h1,
.venue-header h1 {
font-size: 35px;
line-height: 1.12;
}
}
/* ===== Mobile navigation drawer (2026-08-03) =====
Below 820px the account control is a hamburger labelled "Menu" and its dropdown becomes a
full-height panel that slides in from the LEFT. Desktop keeps the person icon, the player's
name and the small dropdown — none of the rules below apply above the breakpoint. */
.navburger, .navmenulbl { display: none; }
.navscrim { position: fixed; inset: 0; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none;
transition: opacity .2s; z-index: 90; }
.navscrim.on { opacity: 1; pointer-events: auto; }
body.nav-locked { overflow: hidden; }
/* The mobile log-out sits at the foot of the drawer and only appears once signed in. */
.navdrawer-out { display: none; }
.navdrawer.nav-signedin .navdrawer-out { display: block; }
.navdrawer-hd { display: none; }
@media (max-width: 820px) {
/* The button: hamburger + the word "Menu". The avatar glyph, the player's name and the caret
all step aside — on a phone this control is navigation, not an account badge. */
.usericon.nav-has-drawer > svg:not(.navburger), .gvh-usericon.nav-has-drawer > svg:not(.navburger) { display: none; }
.usericon.nav-has-drawer .userlbl, .usericon.nav-has-drawer .usercaret,
.gvh-usericon.nav-has-drawer .gvh-userlbl, .gvh-usericon.nav-has-drawer .gvh-caret { display: none !important; }
.usericon.nav-has-drawer .navburger, .gvh-usericon.nav-has-drawer .navburger { display: block; }
.usericon.nav-has-drawer .navmenulbl, .gvh-usericon.nav-has-drawer .navmenulbl {
display: inline-block; font-size: 14px; font-weight: 600; white-space: nowrap;
/* the label is a NAME now, so cap it rather than let it push the button off-screen */
max-width: 11ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
@media (max-width: 380px) {
.usericon.nav-has-drawer .navmenulbl, .gvh-usericon.nav-has-drawer .navmenulbl { max-width: 7ch; }
}
.usericon.nav-has-drawer, .gvh-usericon.nav-has-drawer {
width: auto !important; padding: 0 14px !important; gap: 8px; justify-content: center; }
/* The drawer itself. Off-canvas to the left, sliding right when opened. */
.navdrawer {
position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0;
width: min(320px, 86vw); max-width: none; min-width: 0;
border: 0; border-radius: 0; /* no drop shadow — operator 2026-08-04 */
padding: 0 0 24px; margin: 0; overflow-y: auto; z-index: 100;
display: block !important; /* the desktop rule hides it; the transform does the hiding here */
transform: translateX(-100%); transition: transform .22s ease;
background: #fff;
}
.navdrawer.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .navdrawer { transition: none; } }
.navdrawer-hd { display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; }
.navdrawer-ttl { font-size: 16px; font-weight: 700; color: var(--text); }
.navdrawer-x { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--muted);
cursor: pointer; padding: 0 4px; }
.navdrawer-x:hover { color: var(--text); }
/* Every row in the drawer is a full-width tap target, whichever block it came from. */
.navdrawer a, .navdrawer-links a {
display: block; padding: 14px 18px; font-size: 15.5px; font-weight: 600;
color: var(--text); text-decoration: none; border-bottom: 1px solid #F1F5F9; border-radius: 0;
}
.navdrawer a:hover { background: #F8FAFC; text-decoration: none; }
.navdrawer .um-hd, .navdrawer .gvh-umhd {
padding: 16px 18px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.navdrawer .um-div, .navdrawer .gvh-umdiv { display: none; }
.navdrawer-links { border-top: 8px solid #F1F5F9; }
.navdrawer-out { padding: 18px; border-top: 8px solid #F1F5F9; }
.navdrawer-logout {
display: block; width: 100%; padding: 13px 16px; font-family: inherit; font-size: 15px; font-weight: 600;
color: #B91C1C; background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 10px; cursor: pointer;
}
.navdrawer-logout:hover { background: #FEE2E2; }
}
/* ===== ONE header for every page =====
header.js renders a single canonical header and replaces whatever each page shipped. Before it
there were three: `.topbar home-topbar` (centred container + real account menu), a bare
`.topbar` (full-bleed, ad-hoc links) and `.gsp-topbar` (full-bleed, static pills, no menu).
The replacement emits the home-topbar shape, so these few rules are all the new CSS needed. */
/* Old ids (#gspSignin, #gvhIn, …) are kept in the DOM but hidden, so venue.js/app.js can keep
poking them without throwing. Remove once those files stop referencing them. */
.gsphdr-compat { display: none !important; }
/* The logo was 34px on confirm, 40px on the operator pages and 48px on home. One size now. */
.gsphdr .gsphdr-logo { height: 44px; width: auto; display: block; }
/* Preserves the white-label gate the old .gsp-topbar had: GolfSimPass branding appears only on
golfsimpass.com, never on a venue's own domain. */
.gsphdr-net { display: none; }
html.on-canonical-host .gsphdr-net { display: flex; }
/* The venue page keeps its Venue/Booking/Offers tabs, but they are now a SECOND ROW under the
shared header instead of a competing header of their own. Two sticky bars both at top:0 would
overlap, so the tabs stick just below the header. */
.gsphdr ~ .gvhead { top: 73px; }
.gsphdr ~ .gvhead .gvh-in { justify-content: center; }
@media (max-width: 820px) {
.gsphdr ~ .gvhead { top: 65px; }
}
/* ===== Drawer hardening =====
The open state relied on `.navdrawer.open { transform: translateX(0) }` beating `.navdrawer`
on specificity alone, and on top/bottom:0 to give it full height. Both are easy to lose to a
page-level rule, an injected