elements (wpautop on the embedded form), so every "> span" rule
from 0.12.27/0.12.28 silently missed and GF's size-auto columns shrank
the inputs to the left third. The Email complex has no
wrappers,
which is why it responded and the Name field never did. Fix: grid on
the container, the
wrappers become the grid items, spans fill
them, stray s inside the name complex are hidden. */
.gform_wrapper .ginput_container_name{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; width:100%; }
.gform_wrapper .ginput_container_name > p{ margin:0; min-width:0; }
.gform_wrapper .ginput_container_name > p > span{ display:flex; flex-direction:column; width:100%; min-width:0; }
.gform_wrapper .ginput_container_name label{ order:-1; margin:0 0 .3rem; font-size:.88rem; }
.gform_wrapper .ginput_container_name input{ width:100%; }
.gform_wrapper .ginput_container_name br{ display:none; }
/* --- 0.12.30: Name field, the actual fix ---
Gravity's own rule (.gform_wrapper.gravity-theme .ginput_complex,
specificity 0-3-0) beat the theme's 0-2-0 display:grid in both prior
attempts, leaving GF's flex in charge; flex shrink-wraps the
wrappers around the Name sub-spans, so the inputs sat at intrinsic
width in the left third. These rules match GF's specificity and load
after it. The Email complex (direct-child spans) gets the same grid,
which renders identically to the flex layout it replaces. */
.gform_wrapper.gravity-theme .ginput_complex{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; width:100%; }
.gform_wrapper.gravity-theme .ginput_complex > span{ min-width:0; }
.gform_wrapper.gravity-theme .ginput_complex .ginput_full{ grid-column:1 / -1; }
.gform_wrapper.gravity-theme .ginput_container_name > p{ margin:0; min-width:0; }
.gform_wrapper.gravity-theme .ginput_container_name > p > span{ display:flex; flex-direction:column; width:100%; min-width:0; }
.gform_wrapper.gravity-theme .ginput_container_name label{ order:-1; margin:0 0 .3rem; font-size:.88rem; }
.gform_wrapper.gravity-theme .ginput_container_name input{ width:100%; }
.gform_wrapper.gravity-theme .ginput_container_name br{ display:none; }
/* --- 0.12.32: Boats / About / Contact interior rebuilds ---
The last three simplified pages rebuilt to the preview artifact
(interior-pages parity spec sections 3, 7, 8). assets/hero.jpg copied
into the theme for the Boats hero and the About story photo. */
/* Boats: navy Whaler split panel inside the lake inventory band */
.glm-whaler-panel{ display:grid; grid-template-columns:1.05fr 1fr; border-radius:14px; overflow:hidden; background:linear-gradient(160deg,#0d3055,#061c33); margin-top:44px; box-shadow:0 18px 40px -18px rgba(6,28,51,.35); }
.glm-whaler-photo img{ width:100%; height:100%; object-fit:cover; display:block; min-height:320px; }
.glm-whaler-copy{ padding:2.6rem 2.8rem; color:#dcebf6; align-self:center; }
.glm-whaler-copy h2{ color:#ffffff; margin:.2rem 0 .7rem; }
.glm-whaler-copy .glm-eyebrow{ color:var(--glm-lake-bright); }
.glm-whaler-btn{ display:inline-block; background:var(--glm-lake); color:#ffffff; padding:.8rem 1.5rem; border-radius:999px; font-weight:700; text-decoration:none; }
.glm-whaler-btn:hover{ background:var(--glm-lake-bright); color:#061c33; }
@media (max-width:781px){ .glm-whaler-panel{ grid-template-columns:1fr; } .glm-whaler-photo img{ min-height:220px; } .glm-whaler-copy{ padding:2rem 1.6rem; } }
/* About: navy stats band */
.glm-stats-row{ text-align:center; }
.glm-stat-num{ font-size:2.6rem; font-weight:900; color:#ffffff; line-height:1.05; margin:0 0 .45rem; }
.glm-stat-label{ text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:600; color:#b9d2e4; margin:0; }
/* About: brand plate — cream, 660px, centered between story and timeline
(overrides the white 520px base style, which only the old hero used) */
.glm-brand-plate{ background:#fbf7ec; max-width:660px; margin:64px auto 0; }
/* About: reviews band — score block left, copy right */
.glm-reviews-flex{ display:flex; gap:3.5rem; align-items:center; }
.glm-score{ flex:none; }
.glm-score-big{ font-size:4.2rem; font-weight:900; color:#ffffff; line-height:1; }
.glm-stars{ display:flex; gap:3px; margin:.55rem 0 .4rem; }
.glm-stars svg{ width:22px; height:22px; }
.glm-score-count{ color:#b9d2e4; margin:0; }
.glm-reviews-copy h2{ color:#ffffff; margin:0 0 .6rem; }
.glm-reviews-copy p{ color:#dcebf6; margin:0; max-width:36rem; }
@media (max-width:781px){ .glm-reviews-flex{ flex-direction:column; align-items:flex-start; gap:1.8rem; } }
/* Contact: info cards with lake icons */
.glm-info-card{ background:#fffdf4; border:1px solid #e3d5ae; border-radius:14px; padding:26px 28px; box-shadow:0 14px 30px -18px rgba(6,28,51,.35); }
.glm-info-card svg{ width:30px; height:30px; color:var(--glm-lake); display:block; }
.glm-info-card h3{ margin:.6rem 0 .4rem; }
.glm-info-card p{ margin:0; }
/* Contact: form panel (Gravity form sits inside, per the launch decision) */
.glm-form-panel{ background:#fbf7ec; border:1px solid #e3d5ae; border-radius:14px; padding:28px 30px; box-shadow:0 14px 30px -18px rgba(6,28,51,.35); }
.glm-form-panel h3{ margin:0 0 .4rem; }
.glm-contact-grid .glm-map{ margin-top:0; }
.glm-contact-grid .glm-map iframe{ height:420px; }
/* --- 0.12.33: whole boat card is clickable ---
Owner report: on the Cobalt page the "View this boat" text did nothing
— in the query-loop cards it was a plain paragraph with no link (only
the homepage's hand-coded cards had real anchors). The card title is
already a permalink, so stretch that link over the whole card (the
card is position:relative): every part of the card — photo, name,
blurb, specs, price, and the "View this boat" line — now navigates to
the boat, matching the preview where the whole card is one link. The
detail page's more-boats cards hand-render a single wrapping anchor
with no title link inside, so they are unaffected. */
.glm-boat-card h3 a::after{ content:""; position:absolute; inset:0; z-index:2; }
.glm-boat-card .glm-view-boat{ color:var(--glm-lake); }
.glm-boat-card:hover .glm-view-boat{ text-decoration:underline; }
/* --- 0.12.34: hero Book Service button filled (template change) ---
Owner request: the homepage hero's Book Service button was the outline
style; it now carries the same gold fill as Browse Boats (template
change in front-page.html — gold background, ink text; data-book=
"general" behavior unchanged). No CSS change in this build. */
/* --- 0.12.35: mobile menu overlay styled ---
Owner report (with phone screenshot): the phone navigation overlay was
the WordPress default — plain white, black text, and a bare X close
button. Restyle the open overlay to the site's navy/gold look: deep
navy panel, large light links with hairline dividers, gold for the
current page, a circular outlined close button, and a gold focus ring
instead of the default black focus box. Scoped to .is-menu-open, so
the desktop header is untouched. */
.wp-block-navigation__responsive-container.is-menu-open{
background:linear-gradient(160deg,#0d3055 0%,#061c33 55%,#041222 100%);
color:#eaf3fa;
padding:1.4rem 1.6rem 2.2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
/* 0.12.45: owner phone screenshot showed the close button overlapping
the first menu item ("Home") — the 3.2rem top padding was being
overridden in the cascade, leaving effectively none. Generous
!important top padding guarantees the list starts well clear of
the 46px close button (bottom edge ~3.9rem) at any cascade order. */
padding-top:4.75rem !important;
align-items:stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
width:100%;
gap:0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
border-bottom:1px solid rgba(234,243,250,.14);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child{
border-bottom:none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
color:#eaf3fa;
background:transparent;
border-radius:0;
font-size:1.3rem;
font-weight:700;
letter-spacing:.01em;
padding:.72em .1em;
width:100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{
color:var(--glm-gold);
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"]{
color:var(--glm-gold);
}
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible{
outline:2px solid var(--glm-gold);
outline-offset:3px;
border-radius:4px;
}
/* Close button: circular outlined tap target, gold on hover/focus */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
top:1.1rem;
right:1.2rem;
width:46px;
height:46px;
display:grid;
place-items:center;
color:#eaf3fa;
background:rgba(234,243,250,.06);
border:1.5px solid rgba(234,243,250,.45);
border-radius:50%;
cursor:pointer;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{
width:20px;
height:20px;
display:block;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible{
color:var(--glm-gold);
border-color:var(--glm-gold);
outline:none;
}
/* --- 0.12.36: card pairs aligned; factory-ordering anchor ---
Owner, 2026-10-28: (1) Service page parts pair ("Extensive stock of
genuine OEM parts" / "A word of caution on parts") — top-align them
and make them the same size: .glm-parts-pair now stretches its items
(rule above) and each notice box fills its grid cell. (2) Winterize
page package cards "somewhat random" — the pkg grids now explicitly
stretch and each card fills its cell, so paired cards share a top
edge and a height. (3) The Boats page "How Factory Ordering Works"
button now links to /boston-whaler/#factory-ordering, landing on the
"Factory ordering, step by step" section itself (anchor added to that
section in page-boston-whaler.html); scroll-margin keeps the heading
clear of the top of the viewport. */
.glm-parts-pair .glm-notice-box{ height:100%; box-sizing:border-box; }
.glm-pkg-grid{ align-items:stretch; }
.glm-pkg-grid .glm-pkg{ height:100%; box-sizing:border-box; }
#factory-ordering{ scroll-margin-top:90px; }
/* --- 0.12.37: booking dialog description field (functions.php/glm.js) ---
Owner, 2026-10-28: the Book Service popup should have a free text
field that says "Describe to us what your boat needs". The details
step's generic "Additional information" textarea is now labeled with
exactly that, given a helper placeholder and an extra row; in the
request email it arrives under "What the boat needs:". No CSS change
in this build. */
/* --- 0.12.37 (addendum): Ask form phone tightening ---
Owner's phone screenshot, 2026-10-28: the boat Ask form sprawls on a
phone — the Email field's Enter/Confirm boxes stack with a tall dead
gap between label and input and between the boxes, and the whole form
scrolls forever. On desktop the layout was already verified tight;
this is Gravity's small-screen behavior, which the theme never
overrode. These ID-scoped rules outrank GF's class rules: on phones
the fields' vertical rhythm tightens to 1rem, the email complex
becomes one snug full-width column (Enter Email directly above
Confirm Email, each full width), stray /clear elements inside
the complex are hidden, and complex spans size to their content
instead of stretching. Desktop unchanged. */
@media (max-width:781px){
#glm-ask-form .gform_fields{ row-gap:1rem; }
#glm-ask-form .ginput_container_email{ grid-template-columns:1fr; gap:.55rem; }
#glm-ask-form .ginput_complex > span{ align-self:start; width:100%; }
#glm-ask-form .ginput_container_email br,
#glm-ask-form .ginput_container_email .gf_clear{ display:none; }
#glm-ask-form .ginput_container_email input{ width:100%; }
}
/* --- 0.12.37 (addendum 3): flow-margin guard for grid/flex pairs ---
Root cause of the "uneven cards" reports, proven by measurement on
0.12.36 (2026-10-28): paired cards came out EQUAL in height with
shared bottoms, but every card after the first sat ~15px lower at
the top. WordPress renders these group containers with the flow
layout, whose global styles give every child except the first
margin-block-start: var(--wp--style--block-gap) (1.2rem). Inside a
CSS grid/flex row that margin shoves the later cards down (in a
stretched row it also makes the first card look taller — the
"Winterization card is taller" report). Grid and flex children must
never carry that flow margin: the container's own gap does the
spacing. */
.glm-services > *, .glm-parts-pair > *, .glm-pkg-grid > *,
.glm-contact-grid > *, .glm-reviews-flex > *{ margin-block-start:0 !important; }
/* --- 0.12.38: Ask form, as tight as possible ---
Owner, 2026-10-28: make the boat Ask form as tight as possible to
cut scrolling. Diagnosis (browser DOM pass on 0.12.37): no hidden or
spacer field sits between Email and Phone; the dead space lives
INSIDE the Email field — at desktop its label-to-input gaps measured
60-80px against ~25-35px elsewhere, the signature of the stray
elements inside the email complex acting as flex items (the Name
complex had them hidden in 0.12.30; the Email complex only had them
hidden at phone widths). Companion change in the Gravity editor:
form 3's Email field loses its "Confirm Email" box entirely (the
single biggest height saving, ~a label + input + gaps). CSS here:
stray s hidden in the email complex at ALL widths; the email
container's only grid children are its two spans (anything else —
clear divs, stray paragraphs — is display:none); complex spans go
back to plain block layout with tight sub-labels; the fields grid
gap and GF's own gap variable drop to .85rem; fields align to the
start of their rows; on phones the inquiry pane padding trims too. */
#glm-ask-form .gform_wrapper{ --gf-form-gap-y:.85rem; }
#glm-ask-form .gform_fields{ row-gap:.85rem; }
#glm-ask-form .gfield{ align-self:start; margin-bottom:0; padding-bottom:0; }
#glm-ask-form .ginput_container_email br{ display:none; }
#glm-ask-form .ginput_complex.ginput_container_email > :not(span){ display:none !important; }
#glm-ask-form .ginput_container_email{ gap:.5rem; }
#glm-ask-form .ginput_container_email > span{ display:block; }
#glm-ask-form .ginput_container_email label{ display:block; margin:0 0 .25rem; padding-top:0; }
#glm-ask-form .ginput_container_email input{ margin:0; }
@media (max-width:781px){
.glm-inquiry{ padding-left:1.15rem !important; padding-right:1.15rem !important; }
#glm-ask-form .gform_fields{ row-gap:.85rem; }
}
/* --- 0.12.46: Ask pane intro links never split across lines ---
Owner phone screenshot (2026-10-29): the tightened form looks great,
but the intro paragraph wrapped mid-phone-number ("303-791-" /
"6100") and stranded the email on its own line. Keep the tel and
mailto links whole so the paragraph wraps between words instead;
both strings fit the phone-width pane on one line each. */
#glm-ask-form p a[href^="tel:"],
#glm-ask-form p a[href^="mailto:"]{
white-space:nowrap;
}
/* --- 0.12.39: email input hidden by the 0.12.38 guard — fixed ---
Defect in 0.12.38, caught by its own verification: with "Enable
Email Confirmation" off, Gravity renders the single Email box as a
bare directly inside .ginput_container_email (no complex,
no span) — and the 0.12.38 rule hiding every non-span child of that
container hid the input itself, leaving only the "Email (Required)"
label. The guard now applies only when the container is actually a
complex (.ginput_complex.ginput_container_email), i.e. confirmation
mode; in single-box mode nothing in that rule can touch the input. */
/* Boat photo lightbox (0.12.62): click the main gallery photo for a larger view. */
.glm-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(6,28,51,.95); display:flex; align-items:center; justify-content:center; }
.glm-lightbox[hidden]{ display:none; }
.glm-lb-img{ max-width:92vw; max-height:86vh; object-fit:contain; border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.glm-lb-img.is-sold{ filter:grayscale(1) brightness(.93); }
.glm-lb-close{ position:absolute; top:16px; right:18px; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; z-index:2; }
.glm-lb-prev,.glm-lb-next{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; cursor:pointer; z-index:2; }
.glm-lb-prev{ left:16px; } .glm-lb-next{ right:16px; }
.glm-lb-count{ position:absolute; left:50%; transform:translateX(-50%); bottom:18px; background:rgba(255,255,255,.14); color:#fff; font:600 .85rem 'Libre Franklin',sans-serif; padding:.35em .9em; border-radius:999px; }
.glm-lb-close:hover,.glm-lb-prev:hover,.glm-lb-next:hover{ background:#0f6da8; }
@media (max-width:640px){ .glm-lb-prev{ left:8px; } .glm-lb-next{ right:8px; } .glm-lb-img{ max-width:96vw; max-height:88vh; } }