/* ==========================================================================
Selene Yachts Europe — design system
========================================================================== */
:root{
--navy:#0e1a3c;
--navy-900:#08122c;
--navy-700:#16264f;
--navy-500:#2b3f70;
--gold:#b08d4f;
--gold-light:#c9ab74;
/* The gold above is tuned for dark grounds, where it measures ~6:1. On
sand it only reaches 2.75:1, under the 3.0 that a meaningful graphic
needs, so line icons on a light ground use this darker one (3.4:1) and
still read as gold. */
--gold-deep:#a07d3a;
/* A third gold, one step down, so white type can sit on gold at all: --gold
carries black at 6.8:1 but white at only 3.1:1 — enough for a graphic, not
for type. This one takes white to 5.8:1 and black to 3.6:1, so the two are
a pair: whichever ink a block uses picks its ground. The specification
panel uses both — black masthead on --gold, white rows on this. */
--gold-dark:#7d6129;
--sand:#f4f1ec;
--sand-2:#e9e4db;
/* The only red on the site, and it has exactly one job: the pin on the
contact map. Deep rather than pillar-box, so it sits on a greyscale map
without shouting over the navy and gold everything else is made of. */
--pin:#d0342c;
--ink:#1b1f2a;
--muted:#5d6474;
--line:rgba(14,26,60,.14);
--white:#fff;
/* Bodoni Moda for headings, Inter for everything else. The fallbacks are
chosen to fail gracefully rather than to pad the list: DIDOT is a real didone
and ships on macOS/iOS, so an Apple visitor whose font request is blocked
still gets high-contrast serif rather than Times. Playfair Display is in the
stack as asked — it only applies to someone who has it installed locally,
which is rare, but it costs nothing and it is the right next choice.
A didone is a high-contrast face: its hairlines thin out at small sizes, so
every place this site sets SERIF below about 1.4rem was re-weighted with it
(see the notes at .spec-group dd, .spec-hero__n and .quote-card p). */
--serif:"Bodoni Moda","Playfair Display",Didot,"Times New Roman",Georgia,serif;
--sans:"Inter","Poppins","Helvetica Neue",Arial,sans-serif;
--wrap:1240px;
/* The vertical rhythm between stacked blocks, in one place — asked for as
"make the windows of content a bit closer one to another". It was
clamp(64px,9vw,120px) top and bottom, so two stacked sections put up to
240px between the last line of one and the first of the next; on a 900px
window that is a quarter of the screen of nothing. Down about 30%, which
still reads as deliberate white space rather than a cramped page. Both
.section and .cta-band read it, so they cannot drift apart — change the
rhythm here, never in a component. */
--sec-y:clamp(44px,6.2vw,84px);
--nav-h:96px;
--nav-h-solid:78px;
/* offset used for #anchor jumps so the fixed header never covers the target */
--anchor-offset:102px;
/* the model page's jump bar sticks under the header, so its own height has to
be added to that offset or every jump lands with the bar over the heading */
--jump-h:54px;
/* Entrance and exit: decelerating, no overshoot. Calm. */
--ease:cubic-bezier(.22,.61,.36,1);
/* Micro-interactions: a spring with a deliberately small overshoot (~4%).
A pronounced bounce reads playful, which is wrong for this brand — this is
just enough to feel physical rather than mechanical. */
--spring:cubic-bezier(.34,1.46,.64,1);
/* Press down: fast and flat, so the button feels like it meets your finger. */
--press:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--anchor-offset);-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);
font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* every anchor target clears the fixed header */
main [id],section[id],[id].anchor{scroll-margin-top:var(--anchor-offset)}
/* ---------- accessibility ---------- */
.skip-link{
position:absolute;left:16px;top:-100px;z-index:300;background:var(--gold);color:#fff;
padding:12px 20px;font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
transition:top .2s var(--ease)
}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.site-header :focus-visible,.mobile-nav :focus-visible{outline-color:var(--gold-light)}
.visually-hidden{
position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}
/* brief highlight so you can see which section an #anchor landed on */
@keyframes anchor-flash{
0%{box-shadow:inset 3px 0 0 var(--gold)}
70%{box-shadow:inset 3px 0 0 var(--gold)}
100%{box-shadow:inset 3px 0 0 rgba(176,141,79,0)}
}
.anchor-flash{animation:anchor-flash 1.9s var(--ease) 1}
/* HEADINGS. h5 and h6 join the rule: they were inheriting the body sans, which
is not what "apply these globally" means, and the pre-owned and article pages
both use an h5.
font-optical-sizing:auto is free insurance — where the browser gets Bodoni
Moda's variable font it picks the optical size for the rendered size, which is
exactly what a didone needs to stop the hairlines disappearing on a heading and
fattening on a caption. It does nothing at all when the face is static.
letter-spacing drops from .005em to 0: Bodoni Moda is already a wide-set face,
and the extra tracking that suited Cormorant's tight old-style caps read as
loose on this one. line-height nudges up from 1.12 to 1.14 for the same reason —
a taller x-height needs a hair more room. */
h1,h2,h3,h4,h5,h6{
font-family:var(--serif);font-weight:400;line-height:1.14;margin:0 0 .5em;
letter-spacing:0;font-optical-sizing:auto
}
/* THE FLOOR CAME DOWN FOR BODONI MODA, and it is a measurement, not a taste.
The home page's H1 contains "CRAFTSMANSHIP." — fourteen characters of wide-set
didone caps and the longest unbreakable word on the site. At the old
clamp(2.6rem,...) floor it renders 370px wide; a 360px phone has 320px of
content width, so the word was being CUT — silently, because body{overflow-x:
hidden} clips it rather than showing a scrollbar. Measured across 360/390/414:
2.35rem still overflows at 360, 2.2rem fits with 8px to spare, 2.1rem with 22.
Taking 2.1rem and raising the vw term from 6 to 8.2 so the size climbs back to
the old scale by about 560px instead of crawling there.
NOTE FOR NEXT TIME: no suite can catch this. They all abort **fonts.g**, so
they measure the fallback stack, and the fallback is narrower than Bodoni. This
was found by rendering the real face from a local copy — see the note in
build.py's FONTS. */
h1{font-size:clamp(2.1rem,8.2vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.4rem,2.2vw,2rem)}
p{margin:0 0 1.15em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:28px}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:28px}
.eyebrow{
font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);font-weight:600;margin:0 0 1.1em;display:block
}
.eyebrow--light{color:var(--gold-light);text-shadow:0 1px 12px rgba(8,18,44,.75)}
.lead{font-size:1.18rem;color:var(--muted)}
.italic{font-style:italic}
.center{text-align:center}
.section{padding:var(--sec-y) 0}
.section--sand{background:var(--sand)}
.section--navy{background:var(--navy);color:#e8ecf6}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy .lead{color:#b9c3da}
.rule{width:56px;height:1px;background:var(--gold);border:0;margin:0 0 28px}
.rule.center{margin-inline:auto}
/* ---------- buttons ---------- */
.btn{
display:inline-block;font-family:var(--sans);font-size:.76rem;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;padding:16px 34px;border:1px solid var(--navy);
color:var(--navy);background:transparent;cursor:pointer;
/* explicit rather than `all`: transitioning everything animates properties we
never intended to and costs more per frame */
transition:background .35s var(--ease),color .35s var(--ease),
border-color .35s var(--ease),transform .4s var(--spring),
box-shadow .4s var(--ease)
}
.btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.978);transition-duration:.09s;transition-timing-function:var(--press)}
.btn--gold{border-color:var(--gold);color:#fff;background:var(--gold)}
.btn--gold:hover{background:transparent;color:var(--gold);box-shadow:0 8px 22px rgba(176,141,79,.28)}
/* Sits on photographs, so it carries its own backdrop: over blown-out spray or
a white hull an outline-only button disappears entirely. */
.btn--light{
border-color:rgba(255,255,255,.8);color:#fff;
/* 0.62 is the alpha at which white text still clears WCAG AA (4.5:1) even
when the photograph behind is blown out to pure white — measured, not
eyeballed. Below about 0.58 it fails over spray and white hulls. */
background:rgba(8,18,44,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)
}
.btn--light:hover{background:#fff;color:var(--navy);backdrop-filter:none;box-shadow:0 10px 28px rgba(8,18,44,.3)}
.btn--sm{padding:12px 26px;font-size:.7rem}
.link-arrow{
font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
display:inline-flex;align-items:center;gap:.6em
}
.link-arrow{transition:color .25s var(--ease)}
.link-arrow::after{content:"→";transition:transform .42s var(--spring)}
.link-arrow:hover::after,a:hover .link-arrow::after{transform:translateX(6px)}
.link-arrow:active::after{transform:translateX(3px);transition-duration:.09s}
/* ---------- header ---------- */
.site-header{
position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
display:flex;align-items:center;transition:background .4s var(--ease),height .4s var(--ease),box-shadow .4s var(--ease);
background:linear-gradient(to bottom,rgba(8,18,44,.55),transparent)
}
.site-header.solid{background:#fff;box-shadow:0 1px 0 var(--line);height:78px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.logo{display:block;flex:0 0 auto}
.logo img{height:52px;width:auto;transition:height .4s var(--ease)}
.site-header.solid .logo img{height:44px}
.logo .l-dark{display:none}
.site-header.solid .logo .l-dark{display:block}
.site-header.solid .logo .l-light{display:none}
.nav{display:flex;align-items:center;gap:26px;margin:0;padding:0}
.nav > li{position:relative;list-style:none;display:flex;align-items:center;gap:2px}
.nav a.top{
position:relative;
display:flex;align-items:center;gap:.45em;font-size:.76rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:#fff;padding:12px 0;white-space:nowrap;
transition:color .3s var(--ease)
}
/* the underline wipes in rather than snapping on as a border */
.nav a.top::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
transform:scaleX(0);transform-origin:left center;transition:transform .34s var(--ease)
}
.nav a.top:hover::after,.nav li.current > a.top::after,.nav > li.open > a.top::after{transform:scaleX(1)}
.site-header.solid .nav a.top{color:var(--navy)}
.nav a.top:hover,.nav li.current > a.top,.nav > li.open > a.top{color:var(--gold)}
.site-header.solid .nav a.top:hover,.site-header.solid .nav li.current > a.top,
.site-header.solid .nav > li.open > a.top{color:var(--gold)}
/* the caret is its own button so the parent link still navigates to its page */
.nav-toggle{
display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
color:#fff;padding:12px 4px;line-height:1;transition:color .3s
}
.site-header.solid .nav-toggle{color:var(--navy)}
.nav-toggle:hover,.nav > li.open > .nav-toggle,
.site-header.solid .nav-toggle:hover,.site-header.solid .nav > li.open > .nav-toggle{color:var(--gold)}
.caret{
display:block;width:9px;height:9px;
/* 3px reads as a deliberate chevron rather than a hairline; at the old 1.5px
it disappeared against the photography behind the transparent header. Note
2.5px is no good: the browser reports it back as 2px at a device ratio of
1, so half-pixel borders are not something to rely on. */
border-right:3px solid currentColor;border-bottom:3px solid currentColor;
border-radius:0 0 1px 0;
transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease);opacity:1
}
.nav > li.open > .nav-toggle .caret{transform:rotate(225deg) translate(-1px,-1px)}
.submenu{
position:absolute;top:100%;left:-24px;min-width:264px;background:#fff;border-top:2px solid var(--gold);
box-shadow:0 24px 48px rgba(8,18,44,.16);padding:14px 0;margin:0;list-style:none;
opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);transform-origin:top left;
/* visibility flips instantly on open (so items are focusable straight away)
and is delayed on close (so the fade-out is still visible) */
transition:opacity .28s var(--ease),transform .34s var(--spring),visibility 0s linear .34s
}
/* invisible bridge: keeps hover alive while the pointer travels into the panel */
.nav > li.has-sub::after{
content:"";position:absolute;top:100%;left:-24px;right:-24px;height:14px;display:none
}
.nav > li.has-sub:hover::after{display:block}
/* no-JS fallback — pure CSS hover/focus */
html:not(.js) .nav > li:hover > .submenu,
html:not(.js) .nav > li:focus-within > .submenu,
.nav > li.open > .submenu{
opacity:1;visibility:visible;transform:none;
transition:opacity .28s var(--ease),transform .34s var(--spring),visibility 0s
}
.submenu li{list-style:none}
.submenu a{
display:block;padding:9px 26px;font-size:.86rem;color:var(--navy);
border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s
}
.submenu a{transition:background .2s var(--ease),color .2s var(--ease),
border-color .2s var(--ease),padding-left .28s var(--spring)}
.submenu a:hover,.submenu a:focus-visible{background:var(--sand);color:var(--gold);padding-left:32px}
.submenu a[aria-current]{background:var(--sand);color:var(--gold);border-left-color:var(--gold);font-weight:500}
.submenu .group{
padding:14px 26px 6px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600
}
.submenu .group:first-child{padding-top:2px}
.submenu .group a{color:inherit;display:inline;padding:0;border:0;background:none}
.submenu .group a:hover{color:var(--gold)}
/* keep the panel on screen for the right-hand menus */
.nav > li:nth-last-child(-n+2) > .submenu{left:auto;right:-24px}
/* ---------- the yachts panel: one column per range ---------- */
/* Fifteen models stacked in a single column would run off the bottom of the
screen, so the ranges sit side by side. */
.submenu--mega{
display:grid;grid-template-columns:repeat(4,minmax(172px,1fr));
gap:0 8px;padding:22px 26px 20px;min-width:0;width:max-content;max-width:min(94vw,940px);
/* opens rightwards from the Yachts item, which sits at the left of the bar —
anchoring it to the right edge pushes 800px of panel off screen */
left:-24px;right:auto
}
.submenu--mega .sm-col{display:block}
.submenu--mega .sm-col > ul{list-style:none;margin:0;padding:0}
.submenu--mega .group{padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.submenu--mega .group:first-child{padding-top:0}
.submenu--mega a{padding:7px 10px 7px 8px;font-size:.84rem;white-space:nowrap}
.submenu--mega .sm-all a{
margin-top:6px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold);font-weight:600
}
/* ================= the model page's head, and its jump bar =================
Asked for after the Selene Americas 78 page: the ship's name at the top, the
photograph below it, and a row of links that jump straight to a part of the
page. It replaces the .hero--short the model pages opened with, where the name
sat over the photograph — that markup is still there for the article pages.
Two things follow from the change and both are improvements. The type is on a
solid ground, so no scrim has to be tuned for the brightest picture any of
nineteen boats might have — the fight that produced 1.88:1 breadcrumbs the
first time a pale photograph arrived. And the lead photograph becomes an
with alt text instead of a CSS background, which is what it always
should have been for the one picture the page is about. */
/* No header clearance here any more: the jump bar sits above this block and
carries it (.jump--top below). This is the gap under the bar. */
.modelhead{background:var(--white);padding-top:clamp(22px,2.6vw,34px)}
.modelhead__inner{padding-bottom:clamp(20px,2.6vw,32px)}
/* The breadcrumb was written for dark grounds — its links are
rgba(255,255,255,.7) and its current item --gold-light — so on this white band
the first three items were invisible and the fourth measured 3.5:1. Both are
re-picked for the ground, which is the rule this project keeps relearning:
when a component moves ground, every colour pitched at the old one has to be
chosen again. Navy links at 15:1, the current item --muted at 5.9:1, and the
separators the same hairline the rest of the light pages use. */
.modelhead .crumbs{margin-bottom:16px;color:var(--muted)}
.modelhead .crumbs a{color:var(--navy)}
.modelhead .crumbs a:hover{color:var(--gold-deep)}
.modelhead .crumbs span{color:var(--navy);opacity:.32}
/* Centred, asked for as "center align the boat names when you click on one". The
whole head block goes with the name, not the name alone: an
centred over a
left-aligned breadcrumb and a left-aligned strapline reads as a mistake rather
than a decision. The two width caps stay — a 24ch name and a 58ch strapline are
still the readable measure — so each needs margin-inline:auto to sit in the
middle of the wrap instead of at its left edge. */
.modelhead__inner{text-align:center}
.modelhead h1{margin:0 auto .28em;max-width:24ch}
.modelhead__tag{color:var(--muted);font-size:1.1rem;line-height:1.6;
max-width:58ch;margin:0 auto}
/* The breadcrumb needs nothing of its own: .crumbs is not a flex row, so a
justify-content here would be a dead rule that looks like it is doing the
work — the inherited text-align does it. */
/* The width of the text, and never cropped — both asked for, in that order.
It started full-bleed with a max-height and object-fit:cover, which meant a
wide window got a letterboxed 2.5:1 slice of a 3:2 photograph. Now it sits in
the same .wrap the copy uses, and the only thing declared is the width: no
aspect-ratio, no max-height, no object-fit, so the box takes the picture's own
proportions whatever they are. That matters beyond the local sets — most of
the fleet still hotlinks, and those frames are not all 3:2.
height:auto is load-bearing, not tidiness: the carries width/height
attributes so the browser can reserve a box before the file lands, and those
attributes arrive as a presentational height:1067px. Without height:auto the
picture is sized by that number instead of by its own shape. */
/* Smaller, on instruction: at the full width of the wrap a 3:2 photograph came
out 790px tall on a 1440px window, and the head took two scrolls to get past.
Capped and centred under the (centred) name, so the name and the picture are
one screen.
Smaller again, on instruction — "it becomes blurry that big". That was not a
taste note, it was a resolution note, and it is right: most of the fleet's
lead photographs are hotlinked from the builder at 980px wide, so an 820px box
on a 2x screen was asking for 1640px of picture from a 980px file and the
browser was upscaling it. 680px is inside the source's own resolution at 1.44x
and comfortably sharp; it also happens to be about 453px tall on a 3:2 file,
which keeps the one-screen head. Raising this cap again means localising and
re-exporting the sources first, not just changing the number.
The cap is on the WIDTH and there is still no object-fit: the standing
instruction is that a landing photograph is never cropped, only resized, so the
box keeps the file's own proportions whatever they are. */
.modelhead__photo{
display:block;width:100%;max-width:680px;height:auto;
background:var(--sand-2)
}
/* PHOTOGRAPH LEFT, FIGURES RIGHT, on instruction: "the hero photo would be on the
left and the 5 random specs below each hero would be on the right". The figures
were a full-width band under the photograph and are now the second column of
one row, so the head reads as a single block.
The left track is minmax(0,680px): it may SHRINK but never grow, because 680 is
a resolution cap rather than a taste — the smallest hero on the site is the
yard's 980px frame for the 42 Europa, and 680 x 1.4 is 952. The right track
takes whatever is left, which at the wrap's 1184px of content is about 470.
align-items:stretch is what makes the panel exactly as tall as the photograph;
the figures then spread inside it (see .spec-hero below), so the two columns end
level without either being given a height. */
.modelhead__row{
display:grid;
grid-template-columns:minmax(0,680px) minmax(0,1fr);
gap:clamp(22px,2.6vw,38px);
align-items:stretch;
padding-bottom:clamp(26px,3vw,44px)
}
.modelhead__media{display:flex;align-items:flex-start}
/* If the head photograph fails to load, main.js swaps it for a .ph placeholder —
and a bare div is a flex child with no intrinsic size, so it would collapse to
nothing and leave the panel beside an empty column. It gets the shape the
photograph would have had. (In the gallery the FRAME is exempt from that swap
for a different reason; see .gal--failed.) */
.modelhead__media .ph{width:100%;max-width:680px;aspect-ratio:3/2}
/* The photograph's own margin-bottom is gone — the row's padding does that job
now, and a margin under a grid item would push its own column out of line with
the panel beside it. */
@media (max-width:900px){
/* Stacked, and the photograph goes back to centred under the centred name. */
.modelhead__row{grid-template-columns:1fr;gap:clamp(20px,3vw,30px)}
.modelhead__media{justify-content:center}
.modelhead__photo{margin-inline:auto}
}
/* The bar is the first thing on the page now, so it — not .modelhead — clears
the fixed header. margin, not padding: the bar is sticky, and padding here
would travel with it and leave a gap under the header on the way down. */
.jump--top{margin-top:var(--nav-h)}
.jump{
position:sticky;top:var(--nav-h-solid);z-index:60;
background:var(--sand);border-bottom:1px solid var(--line)
}
/* One row, scrollable sideways on a narrow screen rather than wrapping into two
rows that change the bar's height as you scroll past it. */
.jump__list{
display:flex;gap:clamp(4px,1.6vw,26px);align-items:stretch;
margin:0;padding:0;list-style:none;
overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none
}
.jump__list::-webkit-scrollbar{display:none}
.jump__list a{
display:flex;align-items:center;height:var(--jump-h);white-space:nowrap;
font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--navy);text-decoration:none;
border-bottom:3px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)
}
/* The link text stays navy at 15:1 in every state. Gold is the sand-ground
--gold-deep, which is 3.4:1 — fine for a 3px rule, which is a graphic needing
3:1, and a fail for 12px text, which needs 4.5:1. So the state lives in the
underline, not the colour: a hairline on hover, the gold rule plus a heavier
weight for the section you are in. */
.jump__list a:hover{border-bottom-color:var(--line)}
.jump__list a[aria-current="true"]{font-weight:700;border-bottom-color:var(--gold-deep)}
.jump__list a:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
/* Landing a jump below the bar, on both paths.
Two things scroll to an #anchor on this site and they do the arithmetic
differently. `html{scroll-padding-top}` (102px) is what the browser uses on a
fragment navigation, and it adds the target's own scroll-margin-top on top of
that. main.js intercepts same-page anchor clicks and does its own sum instead,
from the live header height — where scroll-margin plays no part at all.
So the bar's height is added in both places: here as a scroll-margin that
REPLACES the site-wide 102px (or the two would stack to 258), and in
scrollToTarget() as the height of whatever sticky bar the page has.
Measured both ways, script on and script off, in spec.js section 7. */
main .jump-target{scroll-margin-top:calc(var(--jump-h) + 2px)}
/* a zero-height hook for an anchor that has no element of its own to sit on —
the CTA band is a shared component and cannot carry the id itself */
.jump-point{display:block;height:0;overflow:hidden}
@media (max-width:820px){
.modelhead{padding-top:calc(var(--nav-h) + 18px)}
.jump{top:var(--nav-h-solid)}
.jump__list{gap:2px}
.jump__list a{font-size:.7rem;padding:0 10px}
.jump__list a:first-child{padding-left:0}
}
@media (max-width:1260px){
.submenu--mega{grid-template-columns:repeat(4,minmax(150px,1fr));max-width:min(94vw,820px)}
.submenu--mega a{font-size:.8rem;padding-inline:6px}
}
.nav-cta{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{
display:block;width:26px;height:2px;background:#fff;margin:5px 0;
transition:transform .4s var(--spring),opacity .2s var(--ease),background .3s
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* the drawer is navy, so the bars must stay light while it is open */
.burger[aria-expanded="true"] span,.site-header.solid .burger[aria-expanded="true"] span{background:#fff}
.burger:active{transform:scale(.92);transition:transform .09s var(--press)}
.site-header.solid .burger span{background:var(--navy)}
/* ---------- mobile nav ---------- */
.mobile-nav{
position:fixed;inset:0;z-index:99;background:var(--navy);padding:110px 28px 40px;overflow-y:auto;
transform:translateX(100%);transition:transform .4s var(--ease);visibility:hidden
}
.mobile-nav.open{transform:translateX(0);visibility:visible}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav li{list-style:none}
.mobile-nav > ul > li{border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-nav a{display:block;padding:16px 0;color:#fff;font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
/* parent row: link on the left, expand button on the right */
.mobile-nav .mrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mobile-nav .mrow > a{flex:1 1 auto}
.msub-toggle{
/* No border and no background: the arrow is the affordance, the box was just
noise. The 44px box is still there as a touch target, it is simply not
drawn — which is why the focus ring is defined explicitly below. */
flex:0 0 auto;background:none;border:0;color:#fff;cursor:pointer;
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
transition:color .25s var(--ease)
}
.msub-toggle:hover,.mobile-nav li.open > .mrow > .msub-toggle{color:var(--gold-light)}
.msub-toggle:focus-visible{outline:2px solid var(--gold-light);outline-offset:-4px}
.msub-toggle .caret{width:10px;height:10px;border-width:0 3px 3px 0}
.mobile-nav li.open > .mrow > .msub-toggle .caret{transform:rotate(225deg) translate(-1px,-1px)}
/* Sub-lists slide open. display:none cannot be animated, so they stay in the
layout and are clipped by max-height, which main.js sets from scrollHeight so
the distance is always exactly right. */
.mobile-nav .sub{
overflow:hidden;max-height:0;opacity:0;padding-bottom:0;
transition:max-height .42s var(--ease),opacity .3s var(--ease),padding-bottom .42s var(--ease)
}
.mobile-nav li.open > .sub{opacity:1;padding-bottom:10px}
.mobile-nav .sub a{
padding:10px 0 10px 18px;font-size:.9rem;text-transform:none;letter-spacing:.02em;color:#b9c3da;
transition:color .25s var(--ease),padding-left .28s var(--spring)
}
.mobile-nav .sub a:hover,.mobile-nav .sub a:active{padding-left:24px}
.mobile-nav .sub a:hover,.mobile-nav .sub a[aria-current]{color:var(--gold-light)}
.mobile-nav .sub a[aria-current]{box-shadow:inset 2px 0 0 var(--gold)}
.mobile-nav .group{padding:14px 0 4px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light)}
.mobile-nav > ul > li > a[aria-current],.mobile-nav .mrow > a[aria-current]{color:var(--gold-light)}
html:not(.js) .mobile-nav .sub{max-height:none;opacity:1;padding-bottom:10px}
html:not(.js) .msub-toggle{display:none}
/* ---------- hero ---------- */
.hero{
position:relative;min-height:min(94vh,900px);display:flex;align-items:flex-end;
background:var(--navy-900);overflow:hidden
}
.hero--short{min-height:min(62vh,620px)}
.hero__bg{
position:absolute;left:0;right:0;top:-5%;height:110%;
background-size:cover;background-position:center;transform:scale(1.03)
}
.hero__bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(8,18,44,.82) 0%,rgba(8,18,44,.35) 45%,rgba(8,18,44,.5) 100%)
}
/* The model hero carries a taller block of type than the home page does — a
two-line name, a line of copy AND the breadcrumbs, spanning roughly 30% to 70%
of a 62vh hero — and the gradient above is at its thinnest exactly across that
middle band.
That was survivable while every model photograph was a dark hotlinked frame.
The Selene 45's are ours and one of them is a pale boat under a white sky, and
measured on the real pixels the breadcrumbs came out at 1.88:1 and the
sub-headline at 4.25:1. Both failed.
So the middle of the scrim is lifted, for the short hero only: the home page's
was deliberately lightened for its darker clip and is left exactly as tuned. */
/* LIFTED A SECOND TIME, for the same reason and by a brighter picture. The 52's
sixteen renders replaced its three hotlinked frames, and two article heroes
borrow them: a sunset sky and a white hull on flat calm are brighter through
the middle of the frame than anything this scrim had been shown, and the
sub-headline measured 4.38:1 against the 4.5 it needs. 48%/100% go .62/.66 ->
.70/.72. The 0% stop is untouched — the bottom was never the problem.
This is the third time the same lesson has been paid for: A SCRIM IS ONLY
TUNED FOR THE PHOTOGRAPHS IT HAS BEEN SHOWN, and the thinnest part of a
bottom-anchored gradient is its middle, which is exactly where a sub-headline
sits. spec.js measures it on the painted pixels of every article hero whose
photograph is ours, so the next bright frame fails here rather than shipping. */
.hero--short .hero__bg::after{
background:linear-gradient(to top,rgba(8,18,44,.88) 0%,rgba(8,18,44,.70) 48%,rgba(8,18,44,.72) 100%)
}
/* The home photograph is bright right where the headline sits — the boat's white
superstructure runs through the middle of the frame. A scrim from the left
gives the type a dark base while leaving the bow and the spray clear. */
.hero__bg--home{background-position:center 45%}
/* Decorative background clip. Sits inside .hero__bg so the parallax transform
carries the video and its poster together, and the ::after scrim — which comes
later in the DOM — still paints over the top. object-position matches the
poster's background-position so nothing shifts as the video fades in. */
.hero__video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 45%;
opacity:0;transition:opacity 1s var(--ease);pointer-events:none
}
.hero__video.ready{opacity:1}
.hero__bg--home::after{
background:
/* top band: the sky above the horizon is bright, and the eyebrow sits in it */
linear-gradient(to bottom,rgba(8,18,44,.62) 0%,rgba(8,18,44,.34) 22%,rgba(8,18,44,.06) 40%,transparent 52%),
/* Left band, behind the headline. Solved against decoded video frames rather
than the still, because the still is not what a visitor sees: the first
clip's brightest frame took the headline to 2.86:1, under the 3.0 that AA
wants for large text, while every screenshot of it looked fine.
Re-solved for the current clip, which is darker on the left — open water
rather than white spray — so the scrim could be lightened and still clear.
Worst case is now 3.70:1 for the headline, checked at eight viewport sizes
from 390px to 1920px, because the cover crop shifts with aspect ratio and
a value solved at one size is not automatically safe at another. The
far-right stop stays barely touched so the bow is not muddied.
If you swap the clip again, re-measure. Do not eyeball it. */
linear-gradient(to right,rgba(8,18,44,.82) 0%,rgba(8,18,44,.72) 30%,rgba(8,18,44,.35) 60%,rgba(8,18,44,.09) 100%),
linear-gradient(to top,rgba(8,18,44,.86) 0%,rgba(8,18,44,.20) 55%,rgba(8,18,44,.42) 100%)
}
@media (max-width:820px){
/* narrow viewports crop to the middle of the boat, where it is brightest, so
use an even wash rather than a side scrim */
.hero__bg--home::after{
background:linear-gradient(to top,rgba(8,18,44,.9) 0%,rgba(8,18,44,.62) 55%,rgba(8,18,44,.66) 100%)
}
}
.hero__inner{
position:relative;z-index:2;width:100%;color:#fff;
/* Reserve the fixed header's height. The hero bottom-aligns its content, so
on a window shorter than the content the block used to overflow upward and
the eyebrow ended up printed across the logo. Padding here makes the hero
grow instead of overlapping — on tall windows it changes nothing, because
the content is still pinned to the bottom. */
padding-top:calc(var(--nav-h) + 28px);
padding-bottom:clamp(56px,8vw,110px)
}
.hero h1{color:#fff;max-width:16ch;margin-bottom:.35em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero p{max-width:56ch;color:#dfe5f2;font-size:1.1rem;text-shadow:0 1px 14px rgba(8,18,44,.7)}
/* The hero's opening sentence, promoted from
to
so the page's first
heading after the H1 carries a term someone would actually search for. Styled
to match the body text it came from, because it is the same sentence — this is
a markup change, not a copy change. */
.hero__sub{
font-family:var(--sans);font-weight:400;font-size:1.1rem;line-height:1.7;
max-width:56ch;color:#dfe5f2;margin:0 0 1.15em;letter-spacing:0;
text-shadow:0 1px 14px rgba(8,18,44,.7)
}
.hero .btn{margin-top:14px}
/* ---------- page head (interior pages) ---------- */
.pagehead{
background:var(--navy);color:#fff;padding:calc(var(--nav-h) + 70px) 0 70px;position:relative;overflow:hidden
}
.pagehead__bg{
position:absolute;left:0;right:0;top:-5%;height:110%;
background-size:cover;background-position:center;opacity:.4
}
.pagehead__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(8,18,44,.9),rgba(8,18,44,.55))}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{color:#fff;margin-bottom:.2em}
.pagehead p{color:#c3cce0;max-width:60ch;margin:0}
.crumbs{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin-bottom:22px}
/* White in a hero, not gold. --gold-light's own luminance caps it near 4.6:1
over anything but near-solid navy, and at 11.5px these need 4.5 — over the
45's pale exterior the gold measured 2.83:1 even with the lifted scrim above,
against 7.48:1 for white. The film-strip tags learned this first and the hero
tag before them; this is the third time the answer has been "white over a
photograph". */
.hero__inner .crumbs,.hero__inner .crumbs a{color:#fff}
.hero__inner .crumbs a:hover{color:var(--gold-light)}
.crumbs a{color:rgba(255,255,255,.7)}
.crumbs a:hover{color:var(--gold-light)}
.crumbs span{opacity:.5;margin:0 .5em}
/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split--rev .split__media{order:2}
.split__media{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#12224a 0%,#1d3163 45%,#2b3f70 100%)}
.split__media img,.split__media .ph{aspect-ratio:4/3;object-fit:cover;width:100%;height:100%}
/* THE SALES SPLIT'S RIGHT COLUMN IS THE FINISH SLIDER, not a photograph, and it
has to give up BOTH of the things .split__media does for a photograph:
* the 4:3 — the pair is 5:3 and cropping a COMPARISON to a different ratio is
the one thing that would stop its two halves agreeing, which is all it is
for;
* the navy gradient — that is the branded ground a failed photograph shows
through (the same device as .ph). With a 5:3 figure in a 4:3 box it showed
as a navy band UNDER the frame with the caption sitting on it in --muted:
grey on navy, unreadable. Caught by looking at the rendered page; no check
would have said anything, because every element was present and correct.
The figure brings its own frame, its own ratio and its own caption, so the
container is just a grid cell here. */
.split__media--cmp{
aspect-ratio:auto;background:none;overflow:visible;align-self:start
}
.split__media--cmp .cmp__img{aspect-ratio:auto}
.stat-row{display:flex;gap:44px;flex-wrap:wrap;margin:34px 0 0;padding:0;list-style:none}
.stat-row li{list-style:none}
.stat-row .n{font-family:var(--serif);font-size:2.8rem;line-height:1;color:var(--gold);display:block}
.stat-row .t{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.section--navy .stat-row .t{color:#9aa7c4}
/* ---------- range cards ---------- */
.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,42px)}
/* four ranges on the fleet page: two up, then one up on a phone */
.range-grid--four{grid-template-columns:repeat(2,1fr)}
.range-grid--four .range-card{min-height:400px}
@media (min-width:1100px){
.range-grid--four{grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,24px)}
.range-grid--four .range-card{min-height:440px}
.range-grid--four .range-card__body h3{font-size:1.5rem}
.range-grid--four .range-card__body p{font-size:.9rem}
}
.range-card{position:relative;overflow:hidden;background:var(--navy-900);color:#fff;min-height:520px;display:flex;align-items:flex-end}
.range-card .ph,.range-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.range-card{transition:transform .5s var(--spring),box-shadow .45s var(--ease)}
.range-card:hover{--hov:translateY(-5px);box-shadow:0 28px 54px rgba(8,18,44,.22)}
.range-card:hover img{transform:scale(1.06)}
.range-card:active{
--hov:translateY(-1px) scale(.995);
transition-duration:.1s;transition-timing-function:var(--press)
}
/* The scrim, re-solved when the owner's own photographs arrived for three of
these cards. It was .92 at 5% falling to .15 at 65%, tuned for the dark
hotlinked frames it had been shown; over a sunset sky and two bright aerials
the gold eyebrow measured 1.06–1.10:1 — invisible. Two changes, and both were
needed: the eyebrow is white here (gold-light tops out around 4.6:1 over
anything but near-solid navy, and no scrim that keeps a photograph readable
gets there), and the wash is heavier across the band the type actually
occupies. The thinnest part of a bottom-anchored gradient is its middle, which
is exactly where this card's eyebrow sits. Measured on painted pixels. */
.range-card::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,
rgba(8,18,44,.95) 0%, rgba(8,18,44,.90) 30%, rgba(8,18,44,.78) 46%,
rgba(8,18,44,.28) 66%, rgba(8,18,44,0) 90%)
}
.range-card .eyebrow,.range-card .eyebrow--light{color:#fff;text-shadow:0 1px 12px rgba(8,18,44,.8)}
/* The eyebrow is "N models" now — the lengths came out on instruction — so it
fits on one line at the normal scale and needs nothing of its own. */
.range-card__body{position:relative;z-index:2;padding:clamp(28px,3vw,44px)}
.range-card h3{color:#fff;letter-spacing:.06em;text-transform:uppercase;font-size:1.7rem}
.range-card p{color:#cfd6e8;font-size:.98rem;max-width:44ch}
/* ---------- model grid ---------- */
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
.model-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.model-card{
transition:box-shadow .45s var(--ease),transform .5s var(--spring),border-color .35s var(--ease)
}
.model-card:hover{
box-shadow:0 26px 50px rgba(8,18,44,.13);border-color:rgba(176,141,79,.5);
--hov:translateY(-6px)
}
/* pressing anywhere in the card settles it back down */
.model-card:active{
--hov:translateY(-1px) scale(.994);
transition-duration:.1s;transition-timing-function:var(--press)
}
.model-card__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--navy-900)}
.model-card__media img,.model-card__media .ph{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.model-card:hover .model-card__media img{transform:scale(1.06)}
/* "New" pill. Gold ground with navy ink: white on --gold is 3.1:1 and navy is
5.5:1, which is the same pairing the buttons' hover state uses. It reads on the
navy menu panel, on a white card and over a photograph, because it brings its
own ground. */
.pill-new{
display:inline-block;vertical-align:middle;margin-left:.5em;
background:var(--gold);color:var(--navy-900);
font-family:var(--sans);font-size:.58rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;padding:3px 7px;border-radius:2px;line-height:1.2;
position:relative;top:-.08em
}
.model-card__body h3 .pill-new{font-size:.5rem}
.model-card__badge{
position:absolute;top:16px;left:16px;z-index:2;background:rgba(14,26,60,.86);color:#fff;
font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px
}
.model-card__body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.model-card__body h3{margin-bottom:.15em;font-size:1.75rem}
.model-card__len{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.model-card__body p{color:var(--muted);font-size:.95rem;flex:1}
.model-card__body .link-arrow{margin-top:14px}
/* ---------- the film strip: text over photograph ---------- */
/* The range pages list their boats as full-bleed panels rather than as a grid of
cards: one photograph per boat, its name and a line about it set over the
bottom-left corner, editorial rather than catalogue. It replaced the
.model-card grid on those four pages — two listings of the same boats on one
page would have been redundant, and would have broken the rule that no page
repeats a photograph.
Written in this stylesheet, with the site's own tokens, rather than in the
Tailwind that yachts.html's hero uses: Tailwind here is a scoped exception
that needs node to recompile, and this section wants nothing the tokens do not
already give it. */
.filmstrip{display:block}
.filmcard{
position:relative;display:flex;align-items:flex-end;overflow:hidden;
/* tall enough to be the only thing on screen, capped so a large monitor does
not turn one boat into two screenfuls */
min-height:clamp(420px,66vh,700px);
background:var(--navy-900);color:#fff;text-decoration:none;
transition:box-shadow .5s var(--ease)
}
.filmcard + .filmcard{border-top:1px solid rgba(255,255,255,.10)}
.filmcard__media{position:absolute;inset:0;overflow:hidden}
.filmcard__media img,.filmcard__media .ph{
width:100%;height:100%;object-fit:cover;
/* the waterline, not the sky: these are wide photographs in a tall box */
object-position:50% 56%;
transition:transform 1.2s var(--ease)
}
/* THE HOVER ZOOM ON THE PHOTOGRAPH IS GONE, and this is the note rather than the
rules, because deleting them is the fix.
They were `.filmcard:hover .filmcard__media img{transform:scale(1.045)}` and an
:active twin, written for the LARGE view — a full-width cinematic panel, where
a slow 4.5% push made sense. That view was removed on instruction and the
listings have been grid-only since: `