based, no JS needed. Closed by default, opens on click.
Looks like a styled card so it doesn't compete with the AI body. */
.fy-original-desc {
margin-top: 32px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--mist-50);
overflow: hidden;
}
.fy-original-desc__summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
user-select: none;
transition: background 120ms ease;
}
.fy-original-desc__summary::-webkit-details-marker { display: none; }
.fy-original-desc__summary:hover {
background: rgba(13, 36, 54, 0.04);
}
.fy-original-desc__label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ocean-900);
font-weight: 500;
}
.fy-original-desc__hint {
flex: 1;
font-family: var(--sans);
font-size: 13px;
color: var(--ink-mute);
font-style: italic;
}
.fy-original-desc__chev {
color: var(--ocean-700);
transition: transform 200ms ease;
flex-shrink: 0;
}
.fy-original-desc[open] .fy-original-desc__chev {
transform: rotate(180deg);
}
.fy-original-desc__body {
padding: 8px 18px 18px;
font-family: var(--sans);
font-size: 14px;
line-height: 1.7;
color: var(--ink-mute);
border-top: 1px solid var(--line);
background: #fff;
}
.fy-original-desc__body p {
margin: 12px 0;
}
/* === Brokerage attribution (legal) ====================================
Always visible. Above similar yachts. Plus the fine-print disclaimer
at the page bottom. Prominent enough to be unmissable. */
.fy-listing__brokerage-attribution {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
margin: 0 0 32px;
background: var(--mist-50);
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--sans);
font-size: 14px;
color: var(--ocean-900);
line-height: 1.5;
}
.fy-listing__brokerage-attribution svg {
color: var(--ocean-700);
flex-shrink: 0;
}
/* =============================================================
1.0.92 — Mobile fixes ONLY for the cropping bug on single-yacht.
The Our Take callout was rendering at intrinsic content width
(cut off mid-word on the right edge) because the body grid's
`1fr` track had min-width: auto by default. minmax(0, 1fr)
gives it a 0 floor so content wraps within the viewport.
============================================================= */
@media (max-width: 768px) {
.fy-listing__body {
grid-template-columns: minmax(0, 1fr) !important;
min-width: 0;
}
.fy-listing__main,
.fy-listing__body > div,
.fy-listing__body > article {
min-width: 0;
max-width: 100%;
}
.fy-our-take {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-wrap: break-word;
}
.fy-our-take__body {
min-width: 0;
max-width: 100%;
}
.fy-our-take__body p {
overflow-wrap: anywhere;
word-wrap: break-word;
}
.fy-listing__overview {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-wrap: break-word;
}
}
/* =============================================================
1.0.93 — Brokerage disclaimer moved up from bottom of page.
Replaces the old blue "Listing held by..." card with the full
legal-form disclaimer that names the centrally-listing broker.
Same text as the old bottom disclaimer — just one position now.
============================================================= */
.fy-listing__mls-disclaimer--inline {
max-width: 100%;
margin: 8px 0 32px;
padding: 0;
text-align: left;
}
.fy-listing__mls-disclaimer--inline p {
max-width: 720px;
text-align: left;
}
/* Mobile fixes — Our Take cropping + body grid foot-gun fix.
Mobile only. Desktop untouched. */
@media (max-width: 768px) {
.fy-listing__body {
grid-template-columns: minmax(0, 1fr) !important;
min-width: 0;
}
.fy-listing__main,
.fy-listing__body > div,
.fy-listing__body > article {
min-width: 0;
max-width: 100%;
}
.fy-our-take {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-wrap: break-word;
}
.fy-our-take__body {
min-width: 0;
max-width: 100%;
}
.fy-our-take__body p {
overflow-wrap: anywhere;
word-wrap: break-word;
}
.fy-listing__overview {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-wrap: break-word;
}
}
/* =============================================================
1.0.94 — /speak-with-a-broker/ contact page mobile fixes.
Mobile only. Outer split grid uses minmax(0, 1fr) so prose
doesn't crop on the right. Form box capped at viewport width.
Inner Email/Phone row stacks to single column so "Phone
(optional)" placeholder doesn't trail off the edge.
============================================================= */
@media (max-width: 768px) {
.fy-contact-grid {
grid-template-columns: minmax(0, 1fr) !important;
min-width: 0;
}
.fy-contact-grid > div,
.fy-contact-grid > section,
.fy-contact-grid > article {
min-width: 0;
max-width: 100%;
}
#fy-contact-form {
max-width: 100%;
box-sizing: border-box;
}
#fy-contact-form > div {
grid-template-columns: minmax(0, 1fr) !important;
}
#fy-contact-form input,
#fy-contact-form select,
#fy-contact-form textarea {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.fy-contact-grid p,
.fy-contact-grid h1,
.fy-contact-grid h2 {
overflow-wrap: anywhere;
word-wrap: break-word;
max-width: 100%;
}
}
/* =============================================================
1.0.96 — Chip marquee enabling CSS
=============================================================
The JS in fly-yachts-marquee.js drives scrollLeft on the
filter chip strip for a smooth continuous left marquee at
~15 px/sec. Pauses on touch.
Jump To pills are NOT affected — left as native layout.
============================================================= */
@media (max-width: 768px) {
.fy-filterbar__chips {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap !important;
min-width: 0;
width: 100%;
/* Disable scroll-snap so JS-driven scroll isn't fighting it */
scroll-snap-type: none;
}
.fy-filterbar__chips::-webkit-scrollbar { display: none; }
}
/* =============================================================
1.0.98 — Front-page spacing + Sell CTA color refresh
=============================================================
1. Tightens .fy-section vertical padding from 110px to 72px.
The big gap between the listings row and the next section
was 220px of combined padding — felt empty rather than
editorial. 72px each side reads as confident spacing
without empty real estate.
2. Sell CTA section flips from dark navy to cream/sand so it
no longer visually merges with the dark navy footer below.
Black "Get a valuation" button stays as the focal point.
Light → light → dark gives the page a clear rhythm.
3. Mobile already had 64px on .fy-sell-cta — keep that.
============================================================= */
.fy-section { padding: 72px 0; }
.fy-sell-cta {
background: var(--sand-50);
color: var(--ocean-900);
padding: 80px 0;
border-top: 1px solid var(--line);
}
.fy-sell-cta__title {
color: var(--ocean-900);
}
/* The Sell CTA's "Get a valuation" button uses .btn-sun (yellow)
by default, which reads well on dark. On a cream background
it loses contrast — flip it to .btn-primary (dark) styling
so the button becomes the section's focal point. */
.fy-sell-cta .btn-sun {
background: var(--ocean-900);
color: var(--sand-50);
border-color: var(--ocean-900);
}
.fy-sell-cta .btn-sun:hover {
background: #000;
border-color: #000;
}
/* =============================================================
1.0.99 — Tighter section spacing + Sell CTA gets a photo bg
=============================================================
1. .fy-section padding cut from 72px to 32px. The gap between
the listings and "We are the experts" felt empty even at
72px because both sections share the same cream background
— without a color break, vertical padding reads as void.
2. Sell CTA flips back to dark — but as a photo background
(default: an ocean/coastal photo) with a dark navy veil
overlay for legibility. Yellow "Get a valuation" button
pops against it. Photo gives the section visual identity
it lacked when it was just flat color matching the footer.
3. The 1.0.98 cream Sell CTA rules below are explicitly
reverted — needed because they would conflict with the new
dark-photo styling.
============================================================= */
.fy-section { padding: 32px 0; }
.fy-sell-cta {
position: relative;
text-align: center;
padding: 120px 0;
background: var(--ocean-900);
color: var(--sand-50);
border-top: 1px solid var(--line);
overflow: hidden;
isolation: isolate;
}
.fy-sell-cta__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 1;
}
/* Dark navy gradient overlay — top is slightly lighter than bottom
for visual depth. Strong enough that white serif text stays fully
legible against any photo. */
.fy-sell-cta__veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(13, 36, 54, 0.65) 0%,
rgba(13, 36, 54, 0.85) 100%);
z-index: 2;
}
.fy-sell-cta__inner {
position: relative;
z-index: 3;
}
.fy-sell-cta__title {
color: var(--sand-50);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
/* Revert 1.0.98's button override — yellow Sun button reads beautifully
on the dark ocean photo, which is the original design intent. */
.fy-sell-cta .btn-sun {
background: var(--sun-500);
color: var(--ocean-900);
border-color: var(--sun-500);
}
.fy-sell-cta .btn-sun:hover {
background: var(--sun-600);
border-color: var(--sun-600);
}
/* =============================================================
1.0.100 — Save toast + storage hardening
=============================================================
Toast appears bottom-center when user saves/unsaves a yacht.
Confirms the action took effect — also lets us surface a
storage-failure message if localStorage write failed (private
browsing, full quota, etc) so saves don't silently vanish.
============================================================= */
.fy-save-toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%) translateY(20px);
background: var(--ocean-900);
color: var(--sand-50);
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 12px 22px;
border-radius: 999px;
box-shadow: 0 8px 28px rgba(13, 36, 54, 0.25);
opacity: 0;
pointer-events: none;
z-index: 10000;
transition: opacity 200ms ease, transform 200ms ease;
white-space: nowrap;
max-width: 90vw;
}
.fy-save-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* =============================================================
1.0.101 — Fix invisible select placeholder on /speak-with-a-broker/
=============================================================
The "What are you reaching out about?" topic select rendered
nearly invisible — its inline color was set but browsers paint
the empty default option in a system-default color anyway, and
the inline background-color was a near-match for the form's
sand background. Force the displayed text dark, give the select
a visible chevron, and make the option list itself readable.
============================================================= */
#fy-contact-form select[name="topic"] {
color: var(--ink) !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2436' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px 14px;
padding-right: 40px !important;
}
#fy-contact-form select[name="topic"] option {
color: var(--ink);
background: #fff;
}
/* =============================================================
1.0.103 — Fix invisible text on /compare/ page
=============================================================
The compare table's cells had no explicit color in their
inline style, so they inherited whatever the page section's
parent color was — which on the cream background read as
washed-out, nearly invisible. Now both the JS renderer sets
color explicitly AND this CSS rule provides belt-and-suspenders.
============================================================= */
#fy-compare-table-wrap table td {
color: var(--ocean-900);
}
#fy-compare-table-wrap table th {
color: var(--ink-mute);
}
/* =============================================================
1.0.108 — Archived listing slim notice + SEO preservation
=============================================================
Replaces the old full-page takeover with a small banner above
the title. The full yacht listing renders below — photos,
specs, Our Take, body — keeping Google's indexed content
intact. The CTA on the right of the banner + the sidebar
swap-in catch the lead.
============================================================= */
.fy-archived-notice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: var(--sand-100);
border: 1px solid var(--line);
border-left: 3px solid var(--sun-500);
border-radius: var(--r-sm);
padding: 14px 20px;
margin: 18px 0 12px;
flex-wrap: wrap;
}
.fy-archived-notice__text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1 1 320px;
}
.fy-archived-notice__eyebrow {
font-family: var(--mono, ui-monospace, monospace);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--sun-700, #8a6a00);
}
.fy-archived-notice__body {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.45;
}
.fy-archived-notice__cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: var(--ocean-900);
color: var(--sand-50);
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.005em;
border-radius: var(--r-pill, 999px);
text-decoration: none;
white-space: nowrap;
transition: background 160ms ease;
flex-shrink: 0;
}
.fy-archived-notice__cta:hover {
background: #000;
}
/* Mobile: stack the banner vertically. */
@media (max-width: 768px) {
.fy-archived-notice {
padding: 14px 16px;
gap: 14px;
}
.fy-archived-notice__cta {
width: 100%;
justify-content: center;
}
}
/* =============================================================
1.0.110 — Accordion sections on single-yacht page
=============================================================
Replaces the Jump To pills + wall-of-text H2 body. Each section
from the AI long-form body now renders as a accordion
so users can scan all available sections without scrolling
through walls of text.
The first section opens by default so there's always some
body content visible on load.
============================================================= */
.fy-yacht-sections {
margin-top: 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.fy-yacht-section {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: #fff;
overflow: hidden;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.fy-yacht-section:hover {
border-color: var(--ocean-300, #b8c8d6);
}
.fy-yacht-section[open] {
border-color: var(--ocean-700, #1b4060);
box-shadow: 0 2px 10px rgba(13, 36, 54, 0.06);
}
.fy-yacht-section__summary {
list-style: none;
cursor: pointer;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
user-select: none;
font-family: var(--serif, Georgia, serif);
font-size: 19px;
font-weight: 500;
color: var(--ocean-900);
letter-spacing: -0.005em;
line-height: 1.3;
transition: background 140ms ease;
}
/* Hide the default disclosure triangle on all browsers. */
.fy-yacht-section__summary::-webkit-details-marker { display: none; }
.fy-yacht-section__summary::marker { content: ''; }
.fy-yacht-section__summary:hover {
background: var(--sand-50, #faf7f2);
}
.fy-yacht-section[open] > .fy-yacht-section__summary {
background: var(--sand-100, #f5f0e8);
border-bottom: 1px solid var(--line);
}
.fy-yacht-section__title {
flex: 1;
min-width: 0;
}
.fy-yacht-section__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--sand-100, #f5f0e8);
color: var(--ocean-900);
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), background 140ms ease;
}
.fy-yacht-section[open] > .fy-yacht-section__summary .fy-yacht-section__icon {
transform: rotate(180deg);
background: var(--ocean-900);
color: var(--sand-50);
}
.fy-yacht-section__body {
padding: 24px 24px 28px;
font-family: var(--serif, Georgia, serif);
font-size: 16px;
line-height: 1.7;
color: var(--ink-soft, #38454f);
}
.fy-yacht-section__body > p:first-child { margin-top: 0; }
.fy-yacht-section__body > p:last-child { margin-bottom: 0; }
.fy-yacht-section__body p {
margin: 0 0 16px;
}
.fy-yacht-section__body h3 {
font-family: var(--serif, Georgia, serif);
font-size: 17px;
font-weight: 600;
color: var(--ocean-900);
margin: 24px 0 10px;
letter-spacing: -0.005em;
}
.fy-yacht-section__body ul,
.fy-yacht-section__body ol {
margin: 0 0 18px;
padding-left: 22px;
}
.fy-yacht-section__body li {
margin-bottom: 6px;
}
.fy-yacht-section__body a {
color: var(--ocean-700, #1b4060);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
/* Mobile: tighter padding, slightly smaller summary text. */
@media (max-width: 640px) {
.fy-yacht-section__summary {
padding: 16px 18px;
font-size: 17px;
}
.fy-yacht-section__body {
padding: 18px 18px 22px;
font-size: 15px;
}
.fy-yacht-section__icon {
width: 24px;
height: 24px;
}
}
/* Hide the legacy Jump To pills — 1.0.110 replaced them with the
accordion above. Keeping the rule so any stray cached/inline
.fy-listing__toc disappears if it still renders. */
.fy-listing__toc {
display: none !important;
}
/* =============================================================
1.0.111 — "Our Thoughts" byline + label rebrand
=============================================================
The Our Take callout now reads as a signed piece of editorial,
attributed to a real team member. Trust signal for buyers and
E-E-A-T signal for Google's ranking algorithm.
============================================================= */
.fy-our-take__byline {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--line);
font-family: var(--sans);
font-size: 13px;
line-height: 1.4;
color: var(--ink-mute);
}
.fy-our-take__byline-prefix {
font-style: italic;
color: var(--ink-mute);
}
.fy-our-take__byline-name {
font-weight: 600;
font-size: 14px;
color: var(--ocean-900);
letter-spacing: -0.005em;
}
.fy-our-take__byline-sep {
color: var(--sun-500);
font-weight: 700;
}
.fy-our-take__byline-role {
font-size: 12px;
font-family: var(--mono, ui-monospace, monospace);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-mute);
}
@media (max-width: 480px) {
.fy-our-take__byline {
font-size: 12px;
gap: 6px;
}
.fy-our-take__byline-name {
font-size: 13px;
}
}
/* =============================================================
1.0.112 — Byline moves to header next to OUR THOUGHTS eyebrow
=============================================================
Old layout had byline at the bottom of the callout (magazine
sign-off style). New layout: byline sits inline with the
eyebrow label at the top, so attribution is the first thing
the reader sees. Establishes editorial voice upfront.
============================================================= */
.fy-our-take__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
/* Override the bottom-position byline rules from 1.0.111 — the
byline is now in the header, so no top border / no top margin. */
.fy-our-take__header .fy-our-take__byline {
margin-top: 0;
padding-top: 0;
border-top: none;
justify-content: flex-end;
}
@media (max-width: 480px) {
.fy-our-take__header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.fy-our-take__header .fy-our-take__byline {
justify-content: flex-start;
}
}
/* =============================================================
1.0.114 — Hover tooltips on card action buttons
=============================================================
Pure-CSS tooltip using ::after on hover. Shows "Save yacht"
on the heart icon, "Compare yacht" on the bars icon. Doesn't
appear on touch devices (where hover state is awkward) — they
already have the aria-label for screen readers.
Positioned ABOVE the button instead of to the left, because
the photo-count pill ("1/8") also appears on card hover at
top-right and would collide with a left-positioned tooltip.
============================================================= */
.fy-card__action[data-tooltip] {
position: relative;
}
.fy-card__action[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(2px);
margin-bottom: 10px;
padding: 6px 10px;
background: var(--ocean-900, #0d2436);
color: var(--sand-50, #faf7f2);
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.005em;
line-height: 1;
white-space: nowrap;
border-radius: 4px;
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease, transform 140ms ease;
z-index: 50;
}
/* Little triangle arrow pointing DOWN at the button (since tooltip is above). */
.fy-card__action[data-tooltip]::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 4px;
border: 5px solid transparent;
border-top-color: var(--ocean-900, #0d2436);
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease;
z-index: 50;
}
.fy-card__action[data-tooltip]:hover::after,
.fy-card__action[data-tooltip]:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.fy-card__action[data-tooltip]:hover::before,
.fy-card__action[data-tooltip]:focus-visible::before {
opacity: 1;
}
/* When the button is in active state (saved / added to compare),
swap to the active-state tooltip text for clearer feedback. */
.fy-card__action.is-active[data-tooltip-active]::after {
content: attr(data-tooltip-active);
}
/* Suppress tooltips on touch devices — hover is fake on phones
and the tooltip would stick on tap. */
@media (hover: none) {
.fy-card__action[data-tooltip]::after,
.fy-card__action[data-tooltip]::before {
display: none;
}
}
/* =============================================================
1.0.116 — Self-contained compare drawer (v2)
=============================================================
The new compare drawer is built entirely in JS, appended
directly to , and styled inline. This rule just hides
the OLD footer-baked drawer markup so we don't have a stale
empty container sitting in the DOM.
The original #fy-compare-drawer in footer.php is kept in the
markup for backward compatibility (other things might query
it) but it's invisible. Real drawer is #fy-compare-drawer-v2,
created on-the-fly.
============================================================= */
#fy-compare-drawer {
display: none !important;
}
/* =============================================================
1.0.119 — Branded SVG placeholder for missing article images
=============================================================
Articles without a featured image now render a branded inline
SVG instead of an empty blue rectangle. The SVG fills its
container the same way an ![]() would.
============================================================= */
.fy-article-placeholder-svg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Featured-article hero: when in placeholder mode, ensure the
SVG takes up the full hero area. The container already has
aspect-ratio set in 1612, so we just need the SVG to fill. */
.fy-journal-feature__img--placeholder {
background: transparent;
}
.fy-journal-feature__img--placeholder .fy-article-placeholder-svg {
width: 100%;
height: 100%;
}
/* Override the dotted-pattern placeholder from 7030/7034 since
we're now using a real SVG that fills the space. The legacy
::after pattern would sit on top of the SVG. */
.fy-journal-card__img--placeholder::after {
display: none;
}
.fy-journal-card__img--placeholder {
background: transparent;
}
|