around card body text, leaving
a bare text node that `.syn-optioncard p` cannot reach. Styling the
wrapper keeps the card correct either way. */
font-size: .9rem;
line-height: 1.65;
color: #0B4A72;
}
/* the row itself needs to clear the section's bottom edge */
.syn-page .syn-options-row { margin-bottom: .5rem; }
@media (max-width: 767px) {
.syn-page .syn-options-row > .wpb_column.syn-optioncard > .vc_column-inner {
padding: 0 0 .8rem;
}
}
/* =============================================================
v2.7.10 — Split-row heading panel (.syn-panel)
A deep-water panel behind the heading column, so a split row can
carry weight without a photograph. Follows the proven .syn-highlights
mechanism (background + padding on .vc_column-inner, height:100%)
rather than a row background — Design Options backgrounds sit outside
the stylesheet and are lost when a shortcode is regenerated.
Requires equal_height="yes" on the row so the panel matches the
height of the copy beside it.
Usage: add syn-panel to the heading column's Extra class name.
============================================================= */
.syn-page .wpb_column.syn-panel > .vc_column-inner {
background: var(--syn-deepwater);
padding: clamp(2rem, 3.5vw, 3.2rem);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.syn-page .syn-panel .wpb_text_column { margin-bottom: 0; }
.syn-page .syn-panel .syn-eyebrow { color: var(--syn-sand-lt); }
.syn-page .syn-panel .syn-eyebrow::before { background: currentColor; }
.syn-page .syn-panel h2,
.syn-page .syn-panel .syn-h2 { color: var(--syn-ivory); margin: 1.1rem 0 0; }
.syn-page .syn-panel h2 em,
.syn-page .syn-panel .syn-h2 em { color: var(--syn-sand-lt); }
.syn-page .syn-panel p { color: rgba(247, 245, 240, .85); }
@media (max-width: 767px) {
.syn-page .wpb_column.syn-panel > .vc_column-inner { padding: 1.8rem 1.5rem; }
}
/* Meta line: guarantee separation even if the wrapping div is lost to
the visual editor, and tolerate
injected by wpautop. */
.syn-page .syn-meta-line br { display: none; }
.syn-page .syn-meta-line span + span { margin-left: 0; }
.syn-page .syn-meta-line span:not(:last-child)::after {
content: "\00B7"; /* v2.7.17: visible divider, survives a lost flex container */
display: inline-block;
margin: 0 1.4rem;
color: var(--syn-gold-dp);
opacity: .6;
}
/* =============================================================
v2.7.11 — Self-closing dark sections (.syn-section--closed)
`.syn-section--dark.syn-section` sets padding-bottom:0 so the fleet
register's dark heading can sit flush against the register row that
follows it. A dark section that ends on its own content — Endless
Blue on Home, and the brand pages to come — needs that bottom back.
Usage: add syn-section--closed alongside syn-section syn-section--dark.
Specificity 5 beats the 4-class rule it corrects, so it resolves
deterministically rather than by source order.
============================================================= */
.syn-page .vc_row.syn-section.syn-section--dark.syn-section--closed {
padding-bottom: clamp(4rem, 8vw, 7rem);
}
/* =============================================================
v2.7.13 — SITE FOOTER, styling The7's native markup
Path B: structure comes from Theme Options + widgets, so the team
edits links via Appearance > Menus and socials via Theme Options.
This only supplies typography, colour and spacing.
The7 emits: footer.footer.solid-bg
.widget.wf-cell.wf-1-4 (equal quarter columns)
.widget-title (column label)
ul.contact-info (contact-info widget)
NOT scoped under .syn-page — the footer renders on every page,
including ones without the syn_page flag, so it declares its own
tokens rather than inheriting them.
============================================================= */
.footer.solid-bg {
--syn-f-midnight: #021E38;
--syn-f-ivory: #F7F5F0;
--syn-f-sand: #DCC49A;
--syn-f-sand-lt: #E8D5AB;
--syn-f-gold: #C2A05C;
--syn-f-serif: 'Instrument Serif', Georgia, serif;
--syn-f-ui: 'Inter Tight', system-ui, sans-serif;
--syn-f-mono: 'IBM Plex Mono', ui-monospace, monospace;
background: var(--syn-f-midnight) !important;
color: rgba(247, 245, 240, .82);
font-family: var(--syn-f-ui);
font-weight: 300;
}
.footer.solid-bg a { color: rgba(247,245,240,.82); transition: color .25s ease; }
.footer.solid-bg a:hover { color: var(--syn-f-sand-lt); }
/* column labels */
.footer.solid-bg .widget-title {
margin: 0 0 1.1rem;
font-family: var(--syn-f-mono); font-weight: 400;
font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--syn-f-gold);
}
.footer.solid-bg .widget { font-size: .95rem; line-height: 1.7; }
.footer.solid-bg .widget p { line-height: 1.7; }
/* menus + contact-info lists share one treatment */
.footer.solid-bg .widget ul.menu,
.footer.solid-bg .widget ul.contact-info,
.footer.solid-bg .widget ul {
margin: 0; padding: 0; list-style: none;
}
.footer.solid-bg .widget ul li {
margin: 0 0 .7rem; padding: 0; border: 0; font-size: .95rem;
}
.footer.solid-bg .widget ul li::before { display: none; }
/* social icons */
.footer.solid-bg .soc-ico a { background: none !important; }
.footer.solid-bg .soc-ico a .soc-font-icon,
.footer.solid-bg .soc-ico a::before { color: rgba(247,245,240,.75) !important; }
.footer.solid-bg .soc-ico a:hover .soc-font-icon,
.footer.solid-bg .soc-ico a:hover::before { color: var(--syn-f-sand-lt) !important; }
/* bottom bar */
.bottom-bar, .bottom-bar.solid-bg {
background: var(--syn-f-midnight, #021E38) !important;
border-top: 1px solid rgba(247,245,240,.14);
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
color: rgba(247,245,240,.55);
}
.bottom-bar a { color: rgba(247,245,240,.55); }
.bottom-bar a:hover { color: #E8D5AB; }
/* ---- CTA band: a Custom HTML widget forced to full width ----
:has() lets one widget break out of The7's quarter-column grid
without touching the theme's own markup. */
.footer.solid-bg .widget:has(.syn-foot-cta) {
width: 100%; max-width: 100%; flex-basis: 100%;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
border-bottom: 1px solid rgba(247,245,240,.16);
}
.footer.solid-bg .widget:has(.syn-foot-cta) .widget-title { display: none; }
.syn-foot-cta {
display: flex; flex-wrap: wrap; align-items: flex-end;
justify-content: space-between; gap: 2rem 3rem;
}
.syn-foot-cta h2 {
margin: 0; font-family: var(--syn-f-serif, 'Instrument Serif', Georgia, serif);
font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.05;
color: #F7F5F0; letter-spacing: -0.01em; max-width: 16ch;
}
.syn-foot-cta h2 em { font-style: italic; color: #E8D5AB; }
.syn-foot-cta__btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.syn-foot-cta__btns a {
display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
padding: 1.05rem 1.9rem; border: 1px solid transparent; text-decoration: none;
}
.syn-foot-cta__btns .is-solid { background: #DCC49A; color: #021E38 !important; }
.syn-foot-cta__btns .is-solid:hover { background: #E8D5AB; color: #021E38 !important; }
.syn-foot-cta__btns .is-ghost { border-color: rgba(247,245,240,.45); color: #F7F5F0 !important; }
.syn-foot-cta__btns .is-ghost:hover { background: #F7F5F0; color: #021E38 !important; }
/* brand lockup in the first column */
.syn-foot-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; }
.syn-foot-brand img { max-height: 46px; width: auto; }
.syn-foot-brand__txt { border-left: 1px solid rgba(247,245,240,.3); padding-left: 1rem; }
.syn-foot-brand__name {
margin: 0; font-weight: 500; font-size: 1.05rem; letter-spacing: .22em;
text-transform: uppercase; color: #F7F5F0;
}
.syn-foot-brand__tag {
margin: .3rem 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: #DCC49A;
}
.syn-foot-hours {
margin: .9rem 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
color: rgba(247,245,240,.6);
}
@media (max-width: 600px) {
.syn-foot-cta h2 { max-width: none; }
}
/* =============================================================
v2.7.14 — Footer link + social polish
The7 underlines widget links by default; nothing else in the
design system is underlined. Social row rendered as mono labels
to match the eyebrow language used site-wide.
============================================================= */
.footer.solid-bg .widget a,
.footer.solid-bg .widget ul.contact-info a { text-decoration: none; }
.footer.solid-bg .widget a:hover,
.footer.solid-bg .widget ul.contact-info a:hover {
text-decoration: none; color: #E8D5AB;
}
.syn-foot-social { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.4rem; }
.syn-foot-social a {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
color: rgba(247, 245, 240, .75) !important;
text-decoration: none !important;
}
.syn-foot-social a:hover { color: #E8D5AB !important; }
/* a .widget-title written inside a Custom HTML widget must match the
titles The7 renders for the other columns */
.footer.solid-bg .widget p.widget-title {
margin: 0 0 1.1rem;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-weight: 400; font-size: .62rem; letter-spacing: .2em;
text-transform: uppercase; color: #C2A05C;
}
/* =============================================================
v2.7.16 — YACHT STORE
.syn-brandstrip — the filmstrip mechanic (flex-expand on hover)
applied to brand tiles that are links rather than photographs
with captions. Images are WPBakery Single Image elements inside
each tile, so they stay builder-editable per the images rule.
.syn-store-note — the small print under a listings ledger.
============================================================= */
.syn-page .syn-brandstrip {
display: flex; gap: .8rem; flex-wrap: wrap;
margin-top: clamp(2rem, 4vw, 3rem);
height: clamp(300px, 42vh, 460px);
}
.syn-page .syn-brandstrip > .wpb_column {
position: relative; overflow: hidden; isolation: isolate;
flex: 1 1 0; min-width: 0; width: auto;
background: var(--syn-midnight);
transition: flex 1.1s cubic-bezier(.22,.9,.3,1);
}
.syn-page .syn-brandstrip > .wpb_column:hover,
.syn-page .syn-brandstrip > .wpb_column:focus-within { flex: 2.6; }
.syn-page .syn-brandstrip > .wpb_column > .vc_column-inner { height: 100%; padding: 0; }
.syn-page .syn-brandstrip > .wpb_column > .vc_column-inner > .wpb_wrapper { height: 100%; }
.syn-page .syn-brandstrip .wpb_single_image,
.syn-page .syn-brandstrip .wpb_single_image .vc_figure,
.syn-page .syn-brandstrip .wpb_single_image .vc_single_image-wrapper {
position: absolute; inset: 0; margin: 0; width: 100%; height: 100%;
}
.syn-page .syn-brandstrip .wpb_single_image img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(.9) brightness(.82); transition: filter 1s, transform 1.4s;
}
.syn-page .syn-brandstrip > .wpb_column:hover .wpb_single_image img {
filter: saturate(1) brightness(.92); transform: scale(1.04);
}
.syn-page .syn-brandstrip .wpb_text_column {
position: absolute; inset: auto 0 0 0; z-index: 2; margin: 0;
padding: 2.8rem 1.2rem 1.2rem;
background: linear-gradient(180deg, transparent, rgba(2,30,56,.86));
pointer-events: none;
}
.syn-page .syn-brandstrip .syn-brandstrip__name {
margin: 0; font-family: var(--syn-serif); font-weight: 400;
font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.1; color: var(--syn-ivory);
}
.syn-page .syn-brandstrip .syn-brandstrip__meta {
margin: .45rem 0 0; font-family: var(--syn-mono); font-size: .58rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--syn-sand-lt);
}
.syn-page .syn-brandstrip a.syn-brandstrip__link {
position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden;
}
.syn-page .syn-brandstrip a.syn-brandstrip__link:focus-visible {
outline: 2px solid var(--syn-gold); outline-offset: -4px;
}
@media (max-width: 900px) {
.syn-page .syn-brandstrip { height: auto; }
.syn-page .syn-brandstrip > .wpb_column { flex: 1 1 46%; height: 240px; }
.syn-page .syn-brandstrip > .wpb_column:hover { flex: 1 1 46%; }
}
@media (max-width: 560px) {
.syn-page .syn-brandstrip > .wpb_column { flex: 1 1 100%; }
}
.syn-page .syn-store-note {
margin: 1.4rem 0 0; font-family: var(--syn-mono); font-size: .62rem;
letter-spacing: .14em; text-transform: uppercase; color: rgba(1,51,92,.55);
}
.syn-page .syn-section--dark .syn-store-note { color: rgba(247,245,240,.55); }
/* =============================================================
v2.7.17 — Dark-section text contrast
`.syn-body p`, `.syn-lede`, `.syn-ledger__sub` and `.syn-meta-line`
are all coloured for ivory backgrounds (deep water / ocean). On a
midnight section they sit at roughly 2:1 contrast — legible on a
good monitor, invisible on a laptop in daylight.
The dark variants below mirror the ivory ones: body copy at 85%
ivory, supporting labels in champagne. Applies wherever a dark
section carries body copy — Yacht Store pre-owned, Endless Blue on
Home, About's purpose-driven section, and the model-page specs band.
============================================================= */
.syn-page .syn-section--dark .syn-body p,
.syn-page .syn-section--dark p.syn-body,
.syn-page .syn-enquire .syn-body p {
color: rgba(247, 245, 240, .85);
}
.syn-page .syn-section--dark .syn-lede,
.syn-page .syn-enquire .syn-lede {
color: rgba(247, 245, 240, .82);
}
.syn-page .syn-section--dark .syn-ledger__sub {
color: var(--syn-sand-lt);
opacity: .75;
}
.syn-page .syn-section--dark .syn-meta-line span {
color: var(--syn-sand-lt);
}
.syn-page .syn-section--dark .syn-store-note,
.syn-page .syn-section--dark .syn-glance__title {
color: rgba(247, 245, 240, .6);
}
.syn-page .syn-section--dark strong { color: var(--syn-sand-lt); }
/* Brand strip: even breathing room above the next section */
.syn-page .syn-brandstrip { margin-bottom: .5rem; }
/* =============================================================
v2.7.18 — ABOUT PAGE PATTERNS (from the Claude Design export)
Every selector below uses a class name that appears nowhere else
in this stylesheet, so nothing already published can change.
Verified against v2.7.17 before adding.
.syn-statcards white bordered figure cards on ivory
.syn-splitpanel photo one side, dark numbered list the other
.syn-methodlist numbered rows inside that dark panel
.syn-people portrait cards with initials watermark
.syn-partners bordered dealer cards on midnight
============================================================= */
/* ---- Stat cards ---------------------------------------------------- */
.syn-page .syn-statcards { margin-top: clamp(2rem, 4vw, 3rem); }
.syn-page .syn-statcards > .wpb_column > .vc_column-inner { padding: 0 .5rem; }
.syn-page .syn-statcards > .wpb_column:first-child > .vc_column-inner { padding-left: 0; }
.syn-page .syn-statcards > .wpb_column:last-child > .vc_column-inner { padding-right: 0; }
.syn-page .syn-statcard > .vc_column-inner > .wpb_wrapper {
background: #FFFFFF;
border: 1px solid rgba(2, 30, 56, .10);
padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.2vw, 1.8rem);
height: 100%;
}
.syn-page .syn-statcard__val {
margin: 0; font-family: var(--syn-serif); font-weight: 400;
font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1;
color: var(--syn-deepwater);
}
.syn-page .syn-statcard__label {
margin: 1.1rem 0 0; font-family: var(--syn-mono); font-size: .62rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--syn-gold-dp);
}
/* ---- Split panel: media one side, dark method list the other -------- */
.syn-page .vc_row.syn-splitpanel { margin-top: clamp(2.5rem, 5vw, 4rem); }
.syn-page .syn-splitpanel > .wpb_column > .vc_column-inner { padding: 0; }
.syn-page .syn-splitpanel .wpb_single_image,
.syn-page .syn-splitpanel .wpb_single_image .vc_figure,
.syn-page .syn-splitpanel .wpb_single_image .vc_single_image-wrapper,
.syn-page .syn-splitpanel .wpb_single_image img { display: block; width: 100%; margin: 0; }
.syn-page .syn-splitpanel .wpb_single_image img { height: 100%; object-fit: cover; min-height: 340px; }
.syn-page .syn-splitpanel__dark > .vc_column-inner > .wpb_wrapper {
background: var(--syn-midnight);
padding: clamp(2rem, 3.4vw, 3rem);
height: 100%;
}
.syn-page .syn-splitpanel__dark .syn-eyebrow { color: var(--syn-sand-lt); }
.syn-page .syn-splitpanel__dark .syn-eyebrow::before { background: currentColor; }
/* ---- Method list (inside the dark panel) --------------------------- */
.syn-page .syn-methodlist { margin: 1.6rem 0 0; }
.syn-page .syn-methodlist__row {
display: grid; grid-template-columns: 44px minmax(0, 1fr);
gap: .2rem 1rem; padding: 1.15rem 0;
border-bottom: 1px solid rgba(247, 245, 240, .14);
}
.syn-page .syn-methodlist__row:last-child { border-bottom: 0; padding-bottom: 0; }
.syn-page .syn-methodlist__num {
grid-row: span 2; font-family: var(--syn-mono); font-size: .66rem;
letter-spacing: .16em; color: var(--syn-sand-lt); padding-top: .25rem;
}
.syn-page .syn-methodlist__title {
font-family: var(--syn-ui); font-weight: 400; font-size: 1.02rem;
color: var(--syn-ivory); line-height: 1.3;
}
.syn-page .syn-methodlist__body {
font-size: .9rem; line-height: 1.6; color: rgba(247, 245, 240, .7);
}
/* ---- People cards -------------------------------------------------- */
.syn-page .syn-people { margin-top: clamp(2rem, 4vw, 3rem); }
.syn-page .syn-people > .wpb_column > .vc_column-inner { padding: 0 .5rem; }
.syn-page .syn-people > .wpb_column:first-child > .vc_column-inner { padding-left: 0; }
.syn-page .syn-people > .wpb_column:last-child > .vc_column-inner { padding-right: 0; }
.syn-page .syn-person > .vc_column-inner > .wpb_wrapper {
background: var(--syn-shell); height: 100%; position: relative;
}
.syn-page .syn-person .wpb_single_image,
.syn-page .syn-person .wpb_single_image img { display: block; width: 100%; margin: 0; }
.syn-page .syn-person .wpb_single_image img { aspect-ratio: 3/4; object-fit: cover; }
.syn-page .syn-person__meta { padding: 1.1rem 1.2rem 1.3rem; }
.syn-page .syn-person__name {
margin: 0; font-family: var(--syn-ui); font-weight: 400; font-size: 1rem;
color: var(--syn-deepwater);
}
.syn-page .syn-person__role {
margin: .5rem 0 0; font-family: var(--syn-mono); font-size: .58rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--syn-gold-dp);
}
.syn-page .syn-person__cred {
margin: .45rem 0 0; font-family: var(--syn-mono); font-size: .62rem;
color: rgba(1, 51, 92, .6);
}
/* ---- Shipyard partner cards (on midnight) -------------------------- */
.syn-page .syn-partners { margin-top: 0; }
/* v2.7.19: syn-partner sits on a Text Block, not a column, so the card
surface is .wpb_text_column itself. The earlier column-scoped selector
matched nothing — no border, no padding, cards running together. */
.syn-page .wpb_text_column.syn-partner {
border: 1px solid rgba(247, 245, 240, .22);
padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2.1rem);
margin-bottom: 1.1rem;
}
.syn-page .wpb_text_column.syn-partner:last-of-type { margin-bottom: 1.4rem; }
.syn-page .syn-partner__top {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: .6rem 1.5rem;
}
.syn-page .syn-partner__name {
margin: 0; font-family: var(--syn-serif); font-weight: 400;
font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--syn-ivory); line-height: 1.1;
}
.syn-page .syn-partner__badge {
margin: 0; font-family: var(--syn-mono); font-size: .58rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--syn-sand-lt);
}
.syn-page .syn-partner__meta {
margin: .7rem 0 0; font-size: .95rem; color: rgba(247, 245, 240, .78);
}
@media (max-width: 900px) {
.syn-page .syn-statcards > .wpb_column > .vc_column-inner,
.syn-page .syn-people > .wpb_column > .vc_column-inner { padding: 0 0 1rem; }
.syn-page .syn-splitpanel .wpb_single_image img { min-height: 260px; }
}
/* =============================================================
v2.7.22 — YACHT STORE FLEET GRID (from the Fleet Store design)
All selectors use class names absent from v2.7.21, so nothing
already published can change.
.syn-filtertabs brand filter pills (JS-driven, see syn.js)
.syn-fleethead active title + result count
.syn-fleetgrid card grid of listings
.syn-fleetcard one listing: image, badge, brand, name, price, particulars
.syn-yardcard shipyard cards on midnight
============================================================= */
/* ---- Filter tabs ---- */
.syn-page .syn-filtertabs {
display: flex; flex-wrap: wrap; gap: .6rem;
margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
}
.syn-page .syn-filtertabs button {
font-family: var(--syn-mono); font-size: .62rem; letter-spacing: .16em;
text-transform: uppercase; padding: .7rem 1.3rem; cursor: pointer;
background: transparent; color: var(--syn-deepwater);
border: 1px solid rgba(2, 30, 56, .18);
transition: background .25s, color .25s, border-color .25s;
}
.syn-page .syn-filtertabs button:hover { border-color: var(--syn-gold-dp); color: var(--syn-gold-dp); }
.syn-page .syn-filtertabs button[aria-selected="true"] {
background: var(--syn-midnight); color: var(--syn-ivory); border-color: var(--syn-midnight);
}
/* over a dark section the pills invert */
.syn-page .syn-section--dark .syn-filtertabs button {
background: rgba(2, 30, 56, .4); color: var(--syn-ivory);
border-color: rgba(247, 245, 240, .35);
}
.syn-page .syn-section--dark .syn-filtertabs button[aria-selected="true"] {
background: var(--syn-sand); color: var(--syn-midnight); border-color: var(--syn-sand);
}
/* ---- Fleet head ---- */
.syn-page .syn-fleethead {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: 1rem 2rem;
padding-bottom: 1.4rem; border-bottom: 1px solid rgba(2, 30, 56, .14);
}
.syn-page .syn-fleethead__title {
margin: 0; font-family: var(--syn-serif); font-weight: 400;
font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: var(--syn-midnight); line-height: 1.1;
}
.syn-page .syn-fleethead__count {
margin: 0; font-family: var(--syn-mono); font-size: .62rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--syn-gold-dp);
}
/* ---- Fleet grid + cards ---- */
.syn-page .syn-fleetgrid { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.syn-page .syn-fleetgrid > .wpb_column > .vc_column-inner { padding: 0 .6rem 1.6rem; }
.syn-page .syn-fleetcard.is-hidden { display: none; }
.syn-page .syn-fleetcard > .vc_column-inner > .wpb_wrapper {
background: var(--syn-shell); height: 100%;
display: flex; flex-direction: column;
}
.syn-page .syn-fleetcard .wpb_single_image,
.syn-page .syn-fleetcard .wpb_single_image .vc_figure,
.syn-page .syn-fleetcard .wpb_single_image .vc_single_image-wrapper { display: block; margin: 0; width: 100%; }
.syn-page .syn-fleetcard .wpb_single_image img {
width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
transition: transform 1.2s cubic-bezier(.22,.9,.3,1);
}
.syn-page .syn-fleetcard:hover .wpb_single_image img { transform: scale(1.04); }
.syn-page .syn-fleetcard .wpb_single_image { overflow: hidden; position: relative; }
.syn-page .syn-fleetcard__body { padding: 1.3rem 1.4rem 1.5rem; flex: 1 1 auto; }
.syn-page .syn-fleetcard__badge {
display: inline-block; margin: 0 0 .9rem;
font-family: var(--syn-mono); font-size: .56rem; letter-spacing: .18em;
text-transform: uppercase; padding: .4rem .8rem;
background: var(--syn-sand); color: var(--syn-midnight);
}
.syn-page .syn-fleetcard__badge--used { background: var(--syn-deepwater); color: var(--syn-ivory); }
.syn-page .syn-fleetcard__brand {
margin: 0 0 .35rem; font-family: var(--syn-mono); font-size: .58rem;
letter-spacing: .2em; text-transform: uppercase; color: var(--syn-gold-dp);
}
.syn-page .syn-fleetcard__name {
margin: 0; font-family: var(--syn-serif); font-weight: 400;
font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--syn-midnight); line-height: 1.15;
}
.syn-page .syn-fleetcard__price {
margin: .5rem 0 0; font-family: var(--syn-mono); font-size: .72rem;
letter-spacing: .1em; color: var(--syn-deepwater);
}
.syn-page .syn-fleetcard__specs {
display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.1rem 0 0;
padding-top: .9rem; border-top: 1px solid rgba(2, 30, 56, .12);
font-family: var(--syn-mono); font-size: .6rem; letter-spacing: .12em;
text-transform: uppercase; color: rgba(1, 51, 92, .65);
}
.syn-page .syn-fleetcard__link {
display: inline-block; margin: 1.1rem 0 0; text-decoration: none;
font-family: var(--syn-mono); font-size: .62rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--syn-gold-dp);
transition: padding-left .25s;
}
.syn-page .syn-fleetcard__link:hover { padding-left: .4rem; }
/* ---- Shipyard cards on midnight ---- */
.syn-page .syn-yardcard > .vc_column-inner > .wpb_wrapper {
border: 1px solid rgba(247, 245, 240, .22);
padding: clamp(1.4rem, 2.2vw, 1.9rem); height: 100%;
}
.syn-page .syn-yardcard__name {
margin: 0; font-family: var(--syn-serif); font-weight: 400;
font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--syn-ivory); line-height: 1.1;
}
.syn-page .syn-yardcard__desc {
margin: .7rem 0 1.1rem; font-size: .92rem; line-height: 1.6;
color: rgba(247, 245, 240, .75);
}
.syn-page .syn-yardcard__status {
margin: 0; font-family: var(--syn-mono); font-size: .56rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--syn-sand-lt);
}
@media (max-width: 900px) {
.syn-page .syn-fleetgrid > .wpb_column > .vc_column-inner { padding: 0 0 1.4rem; }
}
/* =============================================================
v2.7.24 — HERO LEGIBILITY MODIFIERS
Ivory hero copy disappears over pale photographs (white hulls,
bright sky, sun-bleached water). These are opt-in per page —
add the class in Row settings > Extra class name. All names are
new, so no existing page changes.
syn-hero--scrim strengthen the whole scrim (try this first)
syn-hero--deep deep-water wash over the lower half
syn-keystats--panel glass band behind the stat rail only
syn-keystats--sand champagne band, midnight text
============================================================= */
/* --- 1. Stronger scrim: same gradient, more weight at the base --- */
.syn-page .vc_row.syn-hero--scrim::after,
.syn-page .vc_row.syn-model-hero.syn-hero--scrim::after {
background: linear-gradient(180deg,
rgba(2, 30, 56, .42) 0%,
rgba(2, 30, 56, .18) 38%,
rgba(2, 30, 56, .94) 100%);
}
/* --- 2. Deep-water wash: for images that are pale throughout --- */
.syn-page .vc_row.syn-hero--deep::after,
.syn-page .vc_row.syn-model-hero.syn-hero--deep::after {
background: linear-gradient(180deg,
rgba(1, 51, 92, .30) 0%,
rgba(1, 51, 92, .55) 45%,
rgba(2, 30, 56, .96) 100%);
}
/* --- 3. Glass band behind the stat rail only ---
Keeps the photograph visible while guaranteeing the numbers read.
Matches the header's over-hero glass, so it looks intentional. */
.syn-page .syn-keystats--panel {
background: rgba(2, 30, 56, .55);
-webkit-backdrop-filter: saturate(140%) blur(10px);
backdrop-filter: saturate(140%) blur(10px);
border-top: 1px solid rgba(247, 245, 240, .28);
padding: .2rem clamp(1rem, 2vw, 1.6rem) 1rem;
margin-left: calc(clamp(1rem, 2vw, 1.6rem) * -1);
margin-right: calc(clamp(1rem, 2vw, 1.6rem) * -1);
}
/* --- 4. Champagne band: for dark images where a light block reads better --- */
.syn-page .syn-keystats--sand {
background: rgba(220, 196, 154, .93);
border-top: 1px solid rgba(2, 30, 56, .18);
padding: .2rem clamp(1rem, 2vw, 1.6rem) 1rem;
margin-left: calc(clamp(1rem, 2vw, 1.6rem) * -1);
margin-right: calc(clamp(1rem, 2vw, 1.6rem) * -1);
}
.syn-page .syn-keystats--sand > div { border-right-color: rgba(2, 30, 56, .18); }
.syn-page .syn-keystats--sand .syn-keystats__label { color: rgba(2, 30, 56, .68); }
.syn-page .syn-keystats--sand .syn-keystats__value { color: var(--syn-midnight); }
/* --- 5. Text shadow fallback: cheapest possible insurance ---
Add syn-hero--shadow when a band would be too heavy but the copy
still needs lifting off a busy image. */
.syn-page .syn-hero--shadow .syn-keystats__value,
.syn-page .syn-hero--shadow .syn-keystats__label,
.syn-page .syn-hero--shadow .syn-lede,
.syn-page .syn-hero--shadow .syn-eyebrow {
text-shadow: 0 1px 18px rgba(2, 30, 56, .85);
}
/* =============================================================
v2.7.25 — GALLERY FILMSTRIP, BUILDER-NATIVE (.syn-photostrip)
Same behaviour as .syn-strip (flex-expand on hover, caption over
a gradient) but built from WPBakery Single Image elements, so the
team picks photographs from the Media Library instead of pasting
URLs into Raw HTML. .syn-strip is left untouched for the pages
already using it.
Markup: inner row carries class="vc_row vc_inner" — NOT vc_row_inner.
Qualifying on vc_row_inner silently matches nothing.
inner row.syn-photostrip > vc_column_inner.syn-photocell
> vc_single_image + vc_column_text (tag, caption, index)
============================================================= */
.syn-page .syn-photostrip {
display: flex; flex-wrap: nowrap; gap: .8rem;
margin-top: clamp(2rem, 4vw, 3rem);
height: clamp(380px, 52vh, 580px);
}
.syn-page .syn-photostrip > .wpb_column {
position: relative; overflow: hidden; isolation: isolate;
flex: 1 1 0; min-width: 0; width: auto;
background: var(--syn-midnight); cursor: pointer;
transition: flex 1.1s cubic-bezier(.22,.9,.3,1);
}
.syn-page .syn-photostrip > .wpb_column:hover,
.syn-page .syn-photostrip > .wpb_column:focus-within,
.syn-page .syn-photostrip > .wpb_column.is-open { flex: 3.4; }
.syn-page .syn-photostrip > .wpb_column > .vc_column-inner { height: 100%; padding: 0; }
.syn-page .syn-photostrip > .wpb_column > .vc_column-inner > .wpb_wrapper { height: 100%; }
.syn-page .syn-photostrip .wpb_single_image,
.syn-page .syn-photostrip .wpb_single_image .vc_figure,
.syn-page .syn-photostrip .wpb_single_image .vc_single_image-wrapper {
position: absolute; inset: 0; margin: 0; width: 100%; height: 100%;
}
.syn-page .syn-photostrip .wpb_single_image img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(.92); transition: filter 1s;
}
.syn-page .syn-photostrip > .wpb_column:hover .wpb_single_image img { filter: saturate(1); }
/* caption block: same visual contract as .syn-strip figcaption */
.syn-page .syn-photostrip .wpb_text_column {
position: absolute; inset: auto 0 0 0; z-index: 2; margin: 0;
padding: 2.6rem 1.2rem 1.1rem; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(2,30,56,.82));
}
.syn-page .syn-photostrip .syn-photocell__cap {
display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
margin: 0; font-family: var(--syn-mono); font-size: .62rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--syn-ivory);
}
.syn-page .syn-photostrip .syn-photocell__idx { color: var(--syn-sand-lt); flex: none; }
.syn-page .syn-photostrip .syn-photocell__tag {
position: absolute; top: 1rem; left: 1.2rem; z-index: 2; margin: 0;
font-family: var(--syn-mono); font-size: .6rem; letter-spacing: .2em;
text-transform: uppercase; color: var(--syn-sand-lt); pointer-events: none;
}
@media (max-width: 900px) {
.syn-page .syn-photostrip { flex-wrap: wrap; height: auto; }
.syn-page .syn-photostrip > .wpb_column { flex: 1 1 46%; height: 240px; }
.syn-page .syn-photostrip > .wpb_column:hover { flex: 1 1 46%; }
.syn-page .syn-photostrip > .wpb_column.is-open { flex: 1 1 100%; height: 320px; }
}
/* =============================================================
v2.7.28 — SERVICES PAGE (from the Claude Design export)
Five new class names, absent from v2.7.27, so nothing already
published can change. Everything else on the page reuses existing
patterns: syn-ledger for the index, syn-marquee for the ticker,
syn-section/--dark for the chapter bands, syn-btn for the CTAs.
.syn-chapter a service band, positioning context for the ghost number
.syn-ghostnum oversized serif numeral bleeding behind the content
.syn-svctags the mono keyword line under a chapter heading
.syn-svcgrid 2x2 tile grid of key points
.syn-svctile one tile: mono label + body line
============================================================= */
.syn-page .vc_row.syn-chapter { overflow: hidden; }
.syn-page .syn-chapter > .wpb_column { position: relative; isolation: isolate; }
.syn-page .syn-ghostnum {
position: absolute; top: clamp(.5rem, 2vw, 1.5rem); right: clamp(1.25rem, 5vw, 5.5rem);
z-index: 0; margin: 0; pointer-events: none; user-select: none;
font-family: var(--syn-serif); font-weight: 400;
font-size: clamp(8rem, 18vw, 17rem); line-height: 1;
color: rgba(1, 51, 92, .06);
}
.syn-page .syn-section--dark .syn-ghostnum { color: rgba(247, 245, 240, .05); }
.syn-page .syn-chapter .wpb_text_column { position: relative; z-index: 1; }
.syn-page .syn-svctags {
margin: 1.6rem 0 0; font-family: var(--syn-mono); font-size: .68rem;
letter-spacing: .18em; text-transform: uppercase; line-height: 2.1;
color: var(--syn-gold-dp);
}
.syn-page .syn-section--dark .syn-svctags { color: var(--syn-sand-lt); }
.syn-page .syn-svcgrid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: rgba(1, 51, 92, .16); border: 1px solid rgba(1, 51, 92, .16);
margin-top: 2rem;
}
.syn-page .syn-section--dark .syn-svcgrid {
background: rgba(247, 245, 240, .16); border-color: rgba(247, 245, 240, .16);
}
.syn-page .syn-svctile {
background: var(--syn-ivory); padding: 1.3rem 1.4rem;
transition: background .35s ease;
}
.syn-page .syn-svctile:hover { background: var(--syn-shell); }
.syn-page .syn-section--dark .syn-svctile { background: var(--syn-midnight); }
.syn-page .syn-section--dark .syn-svctile:hover { background: var(--syn-deepwater); }
.syn-page .syn-svctile b {
display: block; margin-bottom: .5rem; font-weight: 400;
font-family: var(--syn-mono); font-size: .6rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--syn-gold);
}
.syn-page .syn-svctile span { font-size: .9rem; line-height: 1.6; color: #0B4A72; }
.syn-page .syn-section--dark .syn-svctile span { color: rgba(247, 245, 240, .78); }
@media (max-width: 767px) {
.syn-page .syn-svcgrid { grid-template-columns: 1fr; }
.syn-page .syn-ghostnum { font-size: clamp(5rem, 22vw, 8rem); opacity: .7; }
}
/* =============================================================
v2.7.30 — CONTACT PAGE (from the Claude Design export)
Base CF7 field styling already exists (v2.x, ~line 958). This adds
only the reason chips and the field grid. New class names, so
nothing already published changes.
.syn-reasons the "what brings you here?" radio row, as chips
.syn-fieldrow two fields side by side
.syn-formnote the routing / response note under the form
============================================================= */
.syn-page .syn-reasons .wpcf7-radio { display: flex; flex-wrap: wrap; gap: .6rem; }
.syn-page .syn-reasons .wpcf7-list-item { margin: 0; }
.syn-page .syn-reasons .wpcf7-list-item input[type="radio"] {
position: absolute; opacity: 0; width: 0; height: 0;
}
.syn-page .syn-reasons .wpcf7-list-item label { margin: 0; cursor: pointer; }
.syn-page .syn-reasons .wpcf7-list-item-label {
display: inline-block;
font-family: var(--syn-mono); font-size: .62rem; letter-spacing: .16em;
text-transform: uppercase; padding: .75rem 1.3rem;
color: var(--syn-deepwater); background: transparent;
border: 1px solid rgba(1, 30, 56, .28);
transition: background .25s, color .25s, border-color .25s;
}
.syn-page .syn-reasons .wpcf7-list-item-label:hover {
border-color: var(--syn-gold-dp); color: var(--syn-gold-dp);
}
.syn-page .syn-reasons input[type="radio"]:checked + .wpcf7-list-item-label {
background: var(--syn-deepwater); color: var(--syn-ivory);
border-color: var(--syn-deepwater);
}
.syn-page .syn-reasons input[type="radio"]:focus-visible + .wpcf7-list-item-label {
outline: 2px solid var(--syn-gold); outline-offset: 2px;
}
.syn-page .syn-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
@media (max-width: 600px) { .syn-page .syn-fieldrow { grid-template-columns: 1fr; } }
.syn-page .syn-formnote {
margin: 1.2rem 0 0; font-family: var(--syn-mono); font-size: .62rem;
letter-spacing: .14em; text-transform: uppercase; color: rgba(1, 51, 92, .55);
}
.syn-page .syn-section--dark .syn-formnote { color: rgba(247, 245, 240, .55); }
/* CF7 submit button adopts the design-system solid button */
/* v2.7.34: The7 paints its own accent gradient on buttons via
background-image. A background-color alone never displaces it — hence
the teal/green wash on hover. background-image:none is the fix; the
!important flags are needed because The7's rules carry them too. */
.syn-page .wpcf7 input[type="submit"],
.syn-page .wpcf7 button[type="submit"] {
font-family: var(--syn-mono); font-size: .68rem; letter-spacing: .18em;
text-transform: uppercase; padding: 1.05rem 1.9rem; cursor: pointer;
background-image: none !important;
background-color: var(--syn-deepwater) !important;
color: var(--syn-ivory) !important;
border: 1px solid var(--syn-deepwater) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.syn-page .wpcf7 input[type="submit"]:hover,
.syn-page .wpcf7 button[type="submit"]:hover {
background-image: none !important;
background-color: var(--syn-gold) !important;
border-color: var(--syn-gold) !important;
color: var(--syn-midnight) !important;
}
/* =============================================================
v2.7.31 — CONTACT PAGE, matched to the design export
.syn-officecard dark card, labelled rows with hairlines
.syn-yachtfields submission-only fields, hidden until chosen
.syn-routenote "Routed to …" line under the reason chips
Also: field labels are visually hidden — the design carries all
guidance in the placeholders — and placeholders keep sentence case
rather than inheriting the uppercase treatment.
============================================================= */
/* ---- Office card ---- */
/* v2.7.32: syn-officecard sits on the COLUMN and each row is its own Text
Block, so the card is assembled from builder elements rather than one
block of markup. The card surface is therefore the column's wrapper —
the same lesson as the partner cards: match the element the class is
actually on, or the rule matches nothing. */
.syn-page .wpb_column.syn-officecard > .vc_column-inner > .wpb_wrapper {
background: var(--syn-midnight);
padding: clamp(2rem, 3.4vw, 3rem);
height: 100%;
}
.syn-page .syn-officecard .syn-eyebrow { color: var(--syn-sand-lt); margin-bottom: 1.8rem; }
.syn-page .wpb_text_column.syn-officecard__row {
padding: 0 0 1.3rem; margin: 0 0 1.3rem;
border-bottom: 1px solid rgba(247, 245, 240, .16);
}
.syn-page .wpb_text_column.syn-officecard__row:last-of-type { border-bottom: 0; margin-bottom: 0; }
.syn-page .syn-officecard__label {
display: block; margin: 0 0 .6rem;
font-family: var(--syn-mono); font-size: .6rem; letter-spacing: .2em;
text-transform: uppercase; color: rgba(247, 245, 240, .55);
}
.syn-page .syn-officecard__val {
margin: 0; font-size: .98rem; line-height: 1.7; color: var(--syn-ivory);
}
.syn-page .syn-officecard__val a { color: var(--syn-ivory); text-decoration: none; }
.syn-page .syn-officecard__val a:hover { color: var(--syn-sand-lt); }
.syn-page .syn-officecard__val--mono {
font-family: var(--syn-mono); font-size: .8rem; letter-spacing: .06em;
}
.syn-page .syn-officecard__val--coords { color: var(--syn-sand-lt); }
.syn-page .syn-officecard__link {
display: inline-block; margin-top: 1.6rem; padding-bottom: .5rem;
font-family: var(--syn-mono); font-size: .64rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--syn-ivory); text-decoration: none;
border-bottom: 1px solid var(--syn-gold);
transition: color .25s, border-color .25s;
}
.syn-page .syn-officecard__link:hover { color: var(--syn-sand-lt); border-color: var(--syn-sand-lt); }
/* ---- Form: placeholders carry the guidance, labels are for screen readers ---- */
.syn-page .syn-form .wpcf7 label > span:first-child,
.syn-page .syn-form label.syn-sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.syn-page .syn-form .wpcf7 input::placeholder,
.syn-page .syn-form .wpcf7 textarea::placeholder {
text-transform: none; letter-spacing: 0;
font-family: var(--syn-ui); font-size: .95rem; color: rgba(1, 51, 92, .45);
}
.syn-page .syn-form .wpcf7 p { margin: 0 0 1rem; }
/* ---- Routing note ---- */
.syn-page .syn-routenote {
margin: 1rem 0 1.6rem; font-family: var(--syn-mono); font-size: .68rem;
letter-spacing: .06em; color: rgba(1, 51, 92, .55); text-transform: none;
}
/* ---- Submission-only fields: hidden until the reason is chosen ---- */
.syn-page .syn-yachtfields { display: none; }
.syn-page .syn-yachtfields.is-open { display: block; }
/* =============================================================
v2.7.33 — MOBILE FIXES (iPhone, reported 9 Aug)
Three faults, all narrow-viewport only:
1. STAT RAIL used float:left in a 2-up grid. Floats do not clear
when cells differ in height, so "25 / Years on the water" wrapping
to two lines pushed the next cell into a staircase with large
voids. Replaced with grid, which needs no clearing.
2. HERO COPY was clipped at the top. The column is pinned to the
bottom of the box and the row has overflow:hidden; when the copy
is taller than the box on a phone, the top is cut off. On narrow
viewports the column returns to normal flow and the hero grows
with its content.
3. LOGO rendered far larger than the 40px cap. The existing rule is
out-specified by The7's mobile header CSS, so the cap is restated
at the mobile-header selectors it actually uses.
============================================================= */
/* ---- 1. Stat rail: grid, not floats ---- */
@media (max-width: 767px) {
/* v2.7.37: grid displaced the cells — WPBakery injects helper elements
inside the row and each became a grid item, pushing "25" into slot 2
and leaving slot 1 empty. Flex ignores empty helpers (they collapse to
zero width) while still giving a clean 2-up with no float clearing. */
.syn-page .vc_row.syn-hero-stats {
display: flex; flex-wrap: wrap; gap: 0;
}
/* v2.7.44: a stray flex item kept taking the first 50% slot, pushing "25"
into the second cell and leaving a gap. Rather than identify which
builder helper it is, exclude everything that is not a real column —
clearfix pseudo-elements included. */
.syn-page .vc_row.syn-hero-stats::before,
.syn-page .vc_row.syn-hero-stats::after { display: none !important; }
.syn-page .vc_row.syn-hero-stats > *:not(.wpb_column) { display: none !important; }
.syn-page .vc_row.syn-hero-stats > .wpb_column {
flex: 0 0 50%; max-width: 50%; width: 50%; float: none; margin: 0;
}
.syn-page .vc_row.syn-hero-stats > .wpb_column > .vc_column-inner {
height: 100%; padding: 1rem 1rem 1.1rem;
}
.syn-page .vc_row.syn-hero-stats > .wpb_column:nth-child(odd) > .vc_column-inner { border-left: 0; }
.syn-page .syn-hero-stats .syn-stats__label { line-height: 1.5; }
}
/* ---- 2. Hero: let the copy flow rather than be clipped ---- */
@media (max-width: 767px) {
.syn-page .vc_row.syn-hero,
.syn-page .vc_row.syn-model-hero {
/* v2.7.38: display:block + min-height:0 lets the box grow to fit its
content, so nothing is clipped — but overflow stays HIDDEN. v2.7.37
set it visible, which let the parallax layer (130% tall, -15% offset)
spill out of the hero and collide with the section beneath it. */
/* v2.7.52: min-height is a FLOOR, not a fixed height — the hero fills
the phone screen, and still grows if the copy needs more room. */
min-height: 100svh; height: auto;
display: block;
overflow: hidden;
padding-top: calc(var(--syn-header-h, 90px) + clamp(1.5rem, 5vh, 3rem));
padding-bottom: clamp(1.5rem, 5vh, 2.5rem);
}
.syn-page .vc_row.syn-hero > .wpb_column,
.syn-page .vc_row.syn-model-hero > .wpb_column {
position: static;
padding: 0 var(--syn-side) clamp(1.6rem, 5vw, 2.4rem);
/* v2.7.52: the COLUMN (not the row) anchors the copy to the bottom of
the fold. Flex is safe here — a column's only child is
.vc_column-inner, whereas the ROW carries WPBakery helper elements
that would become stray flex items (the v2.7.44 stat-rail fault). */
min-height: calc(100svh - var(--syn-header-h, 90px) - clamp(3rem, 10vh, 5.5rem));
display: flex; flex-direction: column; justify-content: flex-end;
}
.syn-page .syn-hero .syn-h1,
.syn-page .syn-model-hero .syn-h1 { text-wrap: balance; }
}
/* ---- 3. Logo cap, restated at The7's mobile-header selectors ---- */
@media (max-width: 991px) {
.masthead .branding img,
#phantom .branding img,
.masthead.mobile-header-view .branding img,
.dt-mobile-header .branding img,
.masthead .branding .h-logo img,
.masthead .branding a img {
max-height: 38px !important;
width: auto !important;
height: auto !important;
}
.masthead .branding, #phantom .branding { max-width: 62%; }
}
/* =============================================================
v2.7.35 — MOBILE LEGIBILITY & TAP TARGETS
Measured on the live site: several mono micro-labels render at
9–11px. Those are fixed rem sizes, so they do not shrink on a
phone — they are simply hard to read at arm's length. Raised to a
~11px floor below 768px only; desktop keeps the finer setting.
Tap targets: social icons render 26px and the header contact line
17px, against the 44px accessibility guideline. Padding is added
rather than font-size, so nothing visibly changes except the
clickable area.
============================================================= */
@media (max-width: 767px) {
/* --- legibility floor --- */
.syn-page .syn-row__tag { font-size: .68rem; }
.syn-page .syn-row__specs { font-size: .7rem; letter-spacing: .1em; }
.syn-page .syn-brands__label { font-size: .68rem; }
.syn-page .syn-marquee__run { font-size: .72rem; }
.syn-page .syn-sec-note { font-size: .7rem; }
.syn-page .syn-news__date { font-size: .7rem; }
.syn-page .syn-list__note { font-size: .78rem; }
.syn-page .syn-eyebrow { font-size: .72rem; }
.syn-page .syn-keystats__label { font-size: .68rem; }
.syn-page .syn-stats__label { font-size: .68rem; }
.syn-page .syn-fleetcard__specs,
.syn-page .syn-fleetcard__brand,
.syn-page .syn-photocell__cap,
.syn-page .syn-photocell__tag { font-size: .68rem; }
.syn-page .syn-svctile b,
.syn-page .syn-officecard__label { font-size: .66rem; }
.syn-page .syn-glance-table td,
.syn-page .syn-spec td { font-size: .82rem; }
/* --- tap targets: 44px minimum, no visual change --- */
.masthead .soc-ico a,
#phantom .soc-ico a,
.footer .soc-ico a {
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
.masthead .mini-contacts a,
#phantom .mini-contacts a { display: inline-block; padding: .7rem 0; }
.syn-page .syn-btn,
.syn-page .wpcf7 input[type="submit"] { min-height: 48px; width: 100%; text-align: center; }
.syn-page .syn-btn-row { display: flex; flex-direction: column; gap: .7rem; }
.syn-page .syn-reasons .wpcf7-list-item-label { min-height: 44px; display: inline-flex; align-items: center; }
.syn-page .syn-filtertabs button { min-height: 44px; }
.syn-page .syn-ledger__row,
.syn-page a.syn-row { min-height: 56px; }
/* long unbreakable strings (email, coordinates) must not force width */
.syn-page .syn-glance-table td,
.syn-page .syn-officecard__val { word-break: break-word; overflow-wrap: anywhere; }
}
/* =============================================================
v2.7.36 — CONTACT: align the two columns
The office card is shorter than the form beside it, and its eyebrow
sits ~48px lower because the card's own padding pushes it down while
the form column has none. Stretching the card and matching that
inset on the form puts "01 — Write to us" and "02 — The office" on
the same line and squares the two columns off at the bottom.
Requires equal_height="yes" on the row.
============================================================= */
@media (min-width: 768px) {
.syn-page .wpb_column.syn-form > .vc_column-inner {
padding-top: clamp(2rem, 3.4vw, 3rem);
}
.syn-page .wpb_column.syn-officecard,
.syn-page .wpb_column.syn-officecard > .vc_column-inner { height: 100%; }
.syn-page .wpb_column.syn-officecard > .vc_column-inner > .wpb_wrapper {
display: flex; flex-direction: column; height: 100%;
}
/* the map link settles at the foot of the card rather than floating
mid-way when the form column is tall */
.syn-page .syn-officecard > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child {
margin-top: auto; padding-top: 1.4rem;
}
}
/* =============================================================
v2.7.38 — iPhone corrections
1. Hero overflow restored to hidden (see the note above) so the
parallax layer cannot bleed into the next section.
2. Buttons rendered several times taller than intended: .syn-btn-row
is a flex container and the buttons were stretching on the cross
axis. Height is now pinned to content plus padding.
3. The stat rail sits over the photograph by design. On a phone the
hairline alone is not enough separation once the rail wraps to two
rows, so it takes a translucent midnight band — legible over any
image without becoming a solid block.
4. The hero eyebrow wrapped mid-phrase and left its rule stranded.
Tightened so it holds one line, or breaks cleanly if it cannot.
============================================================= */
@media (max-width: 767px) {
/* --- buttons: content height, not stretched --- */
.syn-page .syn-btn-row {
display: flex; flex-direction: column; align-items: stretch; gap: .7rem;
margin: 1.6rem 0 0;
}
.syn-page .syn-btn {
height: auto; min-height: 0;
padding: 1.05rem 1.4rem;
line-height: 1.2;
align-self: stretch;
box-sizing: border-box;
}
/* --- stat rail: readable band over the photograph --- */
.syn-page .syn-hero .syn-hero-stats {
background: rgba(2, 30, 56, .55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
margin-top: clamp(1.4rem, 4vw, 2rem);
padding: .4rem .8rem .8rem;
}
.syn-page .syn-hero .syn-hero-stats > .wpb_column > .vc_column-inner {
padding: .9rem .6rem .5rem;
}
/* --- eyebrow: keep the rule with its text --- */
.syn-page .syn-hero .syn-eyebrow,
.syn-page .syn-model-hero .syn-eyebrow {
font-size: .64rem; letter-spacing: .12em; line-height: 1.6;
align-items: flex-start;
}
.syn-page .syn-hero .syn-eyebrow::before,
.syn-page .syn-model-hero .syn-eyebrow::before {
width: 22px; margin-top: .55em; flex: none;
}
}
/* =============================================================
v2.7.39 — SEA GLASS PANE (.syn-glass)
Hero copy over bright photography, without darkening the picture.
backdrop-filter blurs and saturates whatever is behind the pane, so
the water stays visible but the text always has something to sit on.
A hairline border and a diagonal light streak give it the read of
glass catching sun rather than a flat overlay.
Preferred over strengthening the scrim: the scrim dims the entire
photograph to solve a problem that only exists where the text is.
Usage — add syn-glass to the hero COLUMN's Extra class name
(not the row, not the Text Block).
Fallback: where backdrop-filter is unsupported (Safari < 15.4,
Firefox with it disabled) the @supports block below supplies a
solid-enough tint so the copy never sits unreadable on bare photo.
============================================================= */
.syn-page .wpb_column.syn-glass > .vc_column-inner > .wpb_wrapper {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 3.4vw, 2.8rem);
background: rgba(247, 245, 240, .10);
border: 1px solid rgba(247, 245, 240, .26);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
transition: background .5s ease, border-color .5s ease;
}
/* diagonal light streak — the "catching sun" pass across the pane */
.syn-page .syn-glass > .vc_column-inner > .wpb_wrapper::before {
content: "";
display: block;
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(115deg,
transparent 28%,
rgba(255, 255, 255, .16) 44%,
rgba(255, 255, 255, .04) 52%,
transparent 66%);
}
.syn-page .wpb_column.syn-glass:hover > .vc_column-inner > .wpb_wrapper {
background: rgba(247, 245, 240, .15);
border-color: rgba(247, 245, 240, .38);
}
/* copy sits above the streak */
.syn-page .syn-glass .wpb_text_column,
.syn-page .syn-glass .vc_row_inner { position: relative; z-index: 1; }
/* the pane already separates the copy, so the stat rail inside it needs
no band of its own */
.syn-page .syn-glass .syn-hero-stats {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-top-color: rgba(247, 245, 240, .3);
}
/* no backdrop-filter support: tint harder so the text is never stranded */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.syn-page .wpb_column.syn-glass > .vc_column-inner > .wpb_wrapper {
background: rgba(2, 30, 56, .58);
}
}
@media (max-width: 767px) {
.syn-page .wpb_column.syn-glass > .vc_column-inner > .wpb_wrapper {
padding: 1.4rem 1.2rem 1.6rem;
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}
}
/* =============================================================
v2.7.42 — Charter band: turning the scrim off
The band's gradient lives on a pseudo-element, so no builder
setting can disable it. Two opt-in classes on the ROW:
syn-band--noscrim remove the gradient entirely
syn-glass (on the COLUMN) — the glass pane replaces it,
and the gradient steps aside automatically so
the two never stack
Note: with the gradient off, ivory copy on a bright photograph will
not read. Use syn-glass, or switch the copy to dark via
syn-band--dark-copy below.
============================================================= */
.syn-page .vc_row.syn-band.syn-band--noscrim > .wpb_column > .vc_column-inner::before,
.syn-page .vc_row.syn-band > .wpb_column.syn-glass > .vc_column-inner::before {
display: none;
}
/* dark copy, for a pale image with no scrim behind it */
.syn-page .syn-band--dark-copy .syn-band__copy .syn-h2,
.syn-page .syn-band--dark-copy .syn-band__copy h2 { color: var(--syn-midnight); }
.syn-page .syn-band--dark-copy .syn-band__copy .syn-eyebrow { color: var(--syn-gold-dp); }
.syn-page .syn-band--dark-copy .syn-band__copy .syn-body,
.syn-page .syn-band--dark-copy .syn-band__copy p { color: #0B4A72; }
.syn-page .syn-band--dark-copy .syn-btn--ghost {
color: var(--syn-midnight); border-color: rgba(2,30,56,.45);
}
.syn-page .syn-band--dark-copy .syn-btn--ghost:hover {
background: var(--syn-midnight); color: var(--syn-ivory);
}
/* =============================================================
v2.7.45 — BUILDER-NATIVE GENERAL ARRANGEMENT (.syn-gaplans)
The GA switcher needed data-deck / data-variant attributes, which
WPBakery cannot set — so the plans had to be Raw HTML with pasted
URLs. This reads the same information from a CSS class instead, so
each plan becomes an ordinary Single Image element picked from the
Media Library.
Markup:
vc_row_inner.syn-gaplans
vc_column_inner.syn-plan--{deck}--{variant}
vc_single_image ← builder-picked
The deck tabs and variant chips stay as markup in a Text Block:
they are