/* ============================================================================================ MYKISH SHIP TEMPLATE — ship-only overrides, loaded AFTER the resort stylesheet. A ship IS a resort page (mykish-ship-template.php → render-single.php); this sheet carries only the two things a resort has no need for: 1. the COMPOSED EMPTY-HERO SOCKET for the eight photograph-less Hurtigruten ships and the four Havila ships (TEMPLATES §5 · CRUISE_TEMPLATES_PLAN.md); 2. small spec-strip breathing room for the ship-fact row. Everything else is inherited from mykish-resort-template/style.css. Traceability: docs/design/CRUISE_TEMPLATES_PLAN.md (PO-approved 2026-08-07). ============================================================================================ */ /* --- THE EMPTY-HERO SOCKET ------------------------------------------------------------------- NOT a blank frame and NOT a placeholder box. A calm ink field with a SINGLE soft light source and a gold hairline — composed, so it reads as a deliberate treatment rather than a broken image (the exact test in TEMPLATES §5.2). The ship name, overline and enquiry panel render over it exactly as they would over a photograph, so the fold is never empty. When the imagery session sets a featured image the `--socket` class simply drops and the photograph takes over — identical markup, no layout shift. */ .mk-hero-media--socket { background-color: var(--mk-ink-canvas, #0e1214); /* one soft light source, upper-centre, falling to deep ink at the base — like a ship at night */ background-image: radial-gradient(120% 90% at 50% -10%, rgba(212, 168, 83, 0.10) 0%, rgba(212, 168, 83, 0) 42%), radial-gradient(140% 120% at 50% 0%, rgba(70, 96, 112, 0.28) 0%, rgba(14, 18, 20, 0) 60%), linear-gradient(180deg, #16202a 0%, #0e1214 78%); position: relative; overflow: hidden; } /* A single gold hairline low in the frame — the accent used once, quiet, the way the rest of the system uses it (home-v2 §gold hairline). */ .mk-hero-media--socket::after { content: ''; position: absolute; left: 50%; bottom: clamp(48px, 12vh, 120px); transform: translateX(-50%); width: min(320px, 46%); height: 1px; background: linear-gradient(90deg, rgba(212, 168, 83, 0) 0%, var(--mk-gold, #d4a853) 50%, rgba(212, 168, 83, 0) 100%); opacity: 0.7; } /* The ship's own name, set large, wide and VERY quiet — a watermark, not a label (the visible

in the hero column carries the readable name). aria-hidden in the markup; kept faint enough that it reads as texture and never competes with the title. Sits low-right, clear of the hero column's left-aligned text block. */ .mk-hero-socket-mark { position: absolute; right: clamp(16px, 4vw, 64px); bottom: clamp(56px, 14vh, 140px); max-width: 60%; text-align: right; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.6rem); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.08; color: rgba(255, 255, 255, 0.06); pointer-events: none; user-select: none; } @media (max-width: 767px) { /* On mobile the panel and title occupy most of the frame; drop the watermark to avoid crowding and keep the hairline as the single quiet accent. */ .mk-hero-socket-mark { display: none; } .mk-hero-media--socket::after { bottom: clamp(32px, 9vh, 72px); width: min(220px, 60%); } } /* --- SPEC STRIP: the ship-fact row -------------------------------------------------------------- The strip itself is the resort component (.mk-spec-strip). Ship facts (Built / Capacity / Cabins / Gross tonnage / Length) flow through the same item markup, so no structural CSS is needed. This only guarantees the longer ship values ("2021-2023 (fleet) · refit 2023") wrap gracefully rather than forcing the strip wider than the hero. */ .single-ship .mk-strip-value { overflow-wrap: anywhere; } /* --- THE LAYER 4 OFFER BAND ---------------------------------------------------------------- Replaces the resort "Similar resorts" band on a ship page (PO ruling 2026-08-08). It is our ACTUAL PRODUCT, not a fallback for a thin grid, so it renders on every ship page whether or not sibling ships were found. DELIBERATELY LIGHT, NOT A SECOND DARK SLAB. The consultant band (.mk-ctapanel) a few sections above is already the page's one dark moment; stacking a second ink panel under it would make the foot of the page heavier than its hero. This band stays on the white ground and earns its weight from the gold hairline and the type alone — the accent used once, quietly, the way home-v2 uses it. No photograph sits behind it, so GLASS-PANEL LAW's solid-ink allowance is not needed here. Not .mk-ctapanel and not .mk-similar: it is neither a consultant block nor a card grid, and borrowing either class would inherit padding and colour decisions made for a different job. */ .mk-shipoffer { background: var(--mk-white); } .mk-shipoffer .mk-band-inner { max-width: 46rem; } .mk-shipoffer .mk-h2 { margin-top: 6px; } /* The single gold hairline — same gesture as the hero socket's, so the top and the foot of a photograph-less ship page rhyme rather than each inventing an accent. */ .mk-shipoffer .mk-h2::after { content: ''; display: block; width: 72px; height: 1px; margin-top: 20px; background: linear-gradient(90deg, var(--mk-gold, #d4a853) 0%, rgba(212, 168, 83, 0) 100%); } .mk-shipoffer-copy { margin: 20px 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--mk-ink-muted, #4a5560); } .mk-shipoffer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; } .mk-shipoffer-link { font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--mk-teal-text, #0d7f85); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; } .mk-shipoffer-link:hover, .mk-shipoffer-link:focus-visible { border-bottom-color: currentColor; } /* --- THE COMPACT SHIP ROW (1–2 siblings) --------------------------------------------------- An empty grid slot reads as a card that FAILED TO LOAD, not as a portfolio of one — found at G-2 on the fix itself, where MS Trollfjord's single sibling sat in a 3-column grid with two holes beside it. With ten of thirteen ships still drafts, one or two siblings is the NORMAL case, so the small count gets its own composition rather than a grid with gaps. The row is a LIST OF LINKS, not a shrunken card: at this count the useful thing is the ship's name and the two facts that let a customer tell it apart, and a card's photographic frame with no photograph in it is exactly the emptiness being avoided. Each item sizes to its content, so a row of one is as composed as a row of two. */ .mk-shiprow { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; padding: 0; } .mk-shiprow-link { display: block; padding: 18px 26px 18px 22px; border: 1px solid var(--mk-border); border-left: 3px solid var(--mk-gold, #d4a853); border-radius: var(--mk-r-card, 10px); background: var(--mk-white); text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease; } .mk-shiprow-link:hover, .mk-shiprow-link:focus-visible { border-color: var(--mk-teal, #00c2cb); border-left-color: var(--mk-gold, #d4a853); transform: translateY(-1px); } .mk-shiprow-name { display: block; font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--mk-ink); } .mk-shiprow-meta { display: block; margin-top: 5px; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--mk-ink-muted, #4a5560); } /* A band holding one short row needs less vertical room than one holding a grid of four. */ .mk-similar--compact { padding-top: var(--mk-sec-sm); padding-bottom: var(--mk-sec-sm); } /* --- SHORT-PAGE BAND COLLAPSE (PO ruling 2026-08-08) ---------------------------------------- THE DEFECT. On MS Nordkapp — a three-section page — the gap between §About and the consultant band read as a hole. Two band paddings meeting: `.mk-about` bottom (--mk-sec-sm) plus `.mk-ctaband` top (--mk-sec-lg), ~192px at 1440 with nothing in it. Invisible on a long page where sections separate every pair; conspicuous on a short one. **AND SHORT PAGES ARE THE NORMAL CASE HERE, NOT THE EXCEPTION** (PO): eight of nine Hurtigruten ships carry empty Universal Core, so they render §About and nothing else between the strip and the CTA. Tuning a value for the long page and living with it on the short one has the ratio backwards. COLLAPSE, DO NOT TUNE (PO's instruction, and it is the difference between a fix and a nudge). The band system alternates white/tint via `$mk_band()`, so a *correctly alternating* page never places two same-ground bands together — MEASURED: all three resort pages checked have ZERO same-ground adjacencies, and every ship page has two. **The adjacency IS the signal that a section degraded away.** So the rule fires on exactly the condition it is meant to fix and is inert everywhere else, rather than trading one page's rhythm against another's. Standard margin-collapse semantics: keep the FIRST band's bottom padding, drop the second's top. One band's worth of air, not two. SCOPED TO `.single-ship` DELIBERATELY. It happens to fire nowhere on today's resort pages — which is precisely the "unscoped but silent" shape this session has been removing all day. A rule that is safe only because of today's data is not safe. If the resort pages later want the same behaviour that is a separate, reviewed change to the shared band rhythm. */ .single-ship .mk-band:not(.mk-band--tint) + .mk-band:not(.mk-band--tint) { padding-top: 0; } /* A ruled band draws a hairline across the page — its border needs air above it or the rule collides with the previous band's content. Ruled bands keep their top padding. */ .single-ship .mk-band:not(.mk-band--tint) + .mk-band--ruled:not(.mk-band--tint) { padding-top: var(--mk-sec-md); } /* Ship cards in the "More ships" grid reuse .mk-portrait-card wholesale. The only difference a ship needs: with no photograph on any of the thirteen ships this session, a full 4-up row of --nomedia cards reads as a list of empty boxes. Give the socket card the same quiet ink field the hero socket uses, so an image-less ship card is composed rather than absent. */ .single-ship .mk-portrait-card--nomedia { background-image: linear-gradient(180deg, rgba(22, 32, 42, 0.045) 0%, rgba(14, 18, 20, 0.02) 100%); } /* --- SAILINGS: duration band -> itinerary -> departures board ------------------------------ PO G-2: the first version was "one small tile with dates underneath" and it looked bad. The standard is the DEPARTURES BOARD already proven on the Icebreaker group-departure page — a real row-per-date table with a per-row enquiry CTA — so this reuses `.mk-departures` / `.mk-departure-row` rather than inventing a second component. THREE LEVELS THAT COLLAPSE. Duration bands are CARNIVAL'S OWN grouping (its `Cruise Length` filter). A ship with a single band suppresses the band heading entirely, so Hurtigruten's one itinerary never renders three levels of nesting for one product. */ .single-ship .mk-sail-note { margin: 14px 0 0; max-width: 46rem; font-size: 0.9375rem; line-height: 1.6; color: var(--mk-ink-muted, #4a5560); } .single-ship .mk-sail-band { display: flex; align-items: baseline; gap: 14px; margin: 40px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--mk-border); font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--mk-ink); } .single-ship .mk-sail-band span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-ink-muted, #4a5560); } /* ONE CLOSED TILE PER ITINERARY. The closed state is the USEFUL state — name, nights, departure count and ports are all in the summary, so a reader chooses without opening anything. Native
, the same mechanism as the deal template's tier ladder; no second accordion. */ .single-ship .mk-sail-ladder { margin: 18px 0 0; display: grid; gap: 10px; } .single-ship .mk-sail-it { border: 1px solid var(--mk-border); border-left: 3px solid var(--mk-teal, #00c2cb); border-radius: var(--mk-r-card, 10px); background: var(--mk-white); overflow: hidden; } /* ⛔ RETIRED 2026-08-10 (AUD BILLING LAW). `.mk-sail-it--marked`, `.mk-sail-badge` and `.mk-sail-alert` drew a gold "different terms" treatment on every departure with a USD onboard account. Mykish bills in AUD whatever the supplier quotes, so the onboard currency is never the customer's problem and the warning answered a question they do not have. The rules are removed rather than left orphaned — a dead selector is a defect waiting for someone to re-add the markup and find it mysteriously styled. The FACTS stay in `_mk_sailings`; only the caveat is gone. */ .single-ship .mk-sail-summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 46px 16px 22px; position: relative; } .single-ship .mk-sail-summary::-webkit-details-marker { display: none; } .single-ship .mk-sail-summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--mk-teal, #00c2cb); border-bottom: 2px solid var(--mk-teal, #00c2cb); transform: translateY(-70%) rotate(45deg); transition: transform 0.18s ease; } .single-ship .mk-sail-it[open] .mk-sail-summary::after { transform: translateY(-30%) rotate(-135deg); } .single-ship .mk-sail-it[open] .mk-sail-summary { border-bottom: 1px solid var(--mk-border); } .single-ship .mk-sail-summary:hover { background: var(--mk-surface, #f7f9fa); } .single-ship .mk-sail-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .single-ship .mk-sail-body { padding: 18px 22px 20px; } .single-ship .mk-sail-name { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 1.0625rem; color: var(--mk-ink); } .single-ship .mk-sail-meta { font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--mk-ink-muted, #4a5560); } /* THE ROUTE — a cruise is a shape through places, not a date. Rendered only where the supplier states the ports: four itineraries of thirty-eight. The other 34 show dates and claim no route, which is the honest-emptiness pattern rather than 34 identical blanks. */ .single-ship .mk-sail-route { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 14px 0 0; padding: 0; } .single-ship .mk-sail-route li { position: relative; font-size: 0.875rem; color: var(--mk-ink); padding: 4px 20px 4px 0; } .single-ship .mk-sail-route li::after { content: '→'; position: absolute; right: 5px; color: var(--mk-teal, #00c2cb); } .single-ship .mk-sail-route li:last-child { padding-right: 0; } .single-ship .mk-sail-route li:last-child::after { content: ''; } .single-ship .mk-sail-route--end { font-weight: 700; } /* The ^ alert: styled to be SEEN, not to be polite — three material facts bundled behind one supplier mark, read by someone scanning dates for a price. A muted footnote is what that reader skips. */ /* INTERNAL, STAFF-ONLY. Deliberately looks like a system note and NOT like site copy — dashed border, mono-ish label, no brand colour — so nobody reviewing a screenshot mistakes it for something a customer sees. It only renders for signed-in editors (`edit_posts`). */ .single-ship .mk-sail-internal { margin: 12px 0 0; padding: 10px 13px; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f4f4f4 10px, #f4f4f4 20px); border: 1px dashed #9aa3a8; border-radius: 6px; font-size: 0.8125rem; line-height: 1.5; color: #444; } .single-ship .mk-sail-body .mk-departures { margin-top: 16px; } .single-ship .mk-departure-port, .single-ship .mk-departure-nights { font-size: 0.875rem; color: var(--mk-ink-muted, #4a5560); } /* --- THE DEPARTURES BOARD — a DELIBERATE copy of the deal template's component --------------- `.mk-departures*` is defined in `mykish-deal-template/style.css`, which does NOT load on a ship page. Reusing the component's MARKUP without its CSS renders an unstyled stack — which is what "when it sails looks bad" would have become a second time. ⚠ THIS IS THE GLASS-PANEL LAW ROOT CAUSE FOR THE THIRD TIME THIS BUILD: a shared value living in a private file. First the glass recipe (resort template), then `mkc_img()` (cruises hub), now the departures board (deal template). **Copied here rather than promoted because promoting it would change the cascade on six live deal pages** — the same belt-and-braces call the resort stylesheet makes for the glass recipe, and recorded so it is a decision rather than an accident. **If a fourth consumer appears, promote it to `mykish-core-pages/style.css` instead of copying again** — three copies is where this stops being belt-and-braces and starts being drift. Copied verbatim from the deal sheet; grid columns adapted to this board's four columns (Departs · From · Nights · CTA). */ .mk-departures-intro { margin: -8px 0 24px; } .mk-departures { border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden; background: var(--mk-white); box-shadow: var(--mk-shadow); } .mk-departures-head, .mk-departure-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,0.9fr) minmax(0,1.2fr) auto; gap: 16px 20px; align-items: center; padding: 16px 22px; } .mk-departures-head { background: var(--mk-surface); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: var(--mk-grey); } .mk-departure-row + .mk-departure-row, .mk-departures-head + .mk-departure-row { border-top: 1px solid var(--mk-border); } .mk-departure-date { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; display: flex; flex-direction: column; gap: 3px; } /* `.mk-departure-note` retired here with the same ruling — the per-row "USD · gratuities · age limits differ" line. The DEAL template keeps its own `.mk-departure-note` for a different purpose and is untouched. */ .mk-departure-confirm { color: var(--mk-grey); font-size: 0.92rem; } .mk-departure-confirm-label { display: none; } .mk-status { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--mk-r-pill); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .mk-status--open { background: #e6f4ea; color: #1a7a3c; } .mk-status--filling { background: #fdf0dd; color: #9a5b00; } .mk-status--guaranteed { background: var(--mk-teal); color: var(--mk-ink); } .mk-status--on_request { background: var(--mk-surface); color: var(--mk-grey); } .mk-status--closed, .mk-status--did_not_reach_min { background: var(--mk-surface); color: var(--mk-grey); opacity: 0.75; } .mk-departures-provisional { margin: 14px 0 0; font-size: 0.82rem; color: var(--mk-grey); font-style: italic; } .mk-departures-notproceed { margin: 18px 0 0; max-width: var(--mk-measure); } .single-ship .mk-departures { border: 1px solid var(--mk-border); border-radius: var(--mk-r-card, 10px); overflow: hidden; } .single-ship .mk-departures-head, .single-ship .mk-departure-row { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,0.5fr) auto; } @media (max-width: 719px) { .single-ship .mk-departures-head { display: none; } .single-ship .mk-departure-row { grid-template-columns: 1fr auto; row-gap: 4px; } .single-ship .mk-departure-nights { display: none; } } /* --- REPRESENTATIVE-IMAGE CAPTION (PO ruling 2026-08-10) ------------------------------------ NOT SMALL PRINT — "it sits where someone reads it." The image asserts "this is what a balcony looks like"; this caption is the only thing stopping that reading as "this is grade 8M". It is set at reading size, in the body colour, directly under the frame it bounds — not a footnote, not grey 11px, not behind a toggle. It renders on representative frames ONLY. A grade with its own photograph carries no caption, because there is nothing to bound. */ .single-ship .mk-stay-repcap { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--mk-ink); border-left: 2px solid var(--mk-teal, #00c2cb); padding-left: 10px; } /* ============================================================================================ * DECISION-FIRST HERO (PO ruling 2026-08-10, G-2 round 3) * -------------------------------------------------------------------------------------------- * The full-bleed hero answers "is this beautiful?" — the right question for a resort, where the * photograph IS the product. A cruise buyer's first questions are which port, how long, how big, * how many rooms, and the old hero answered none of them above the fold: the facts were in a strip * BELOW, so the reader had to scroll to learn anything at all. * * So on a ship the fold splits: photograph left, and on the right the name, four icon-led facts and * the CTA. Everything needed to decide, on one screen, scannable in about three seconds. * * ⛔ THE RIGHT COLUMN IS SOLID INK AND THAT IS LAWFUL — GLASS-PANEL LAW governs panels rendered * OVER photography, and this one is rendered BESIDE it. There is no photograph behind the column to * keep alive, so there is nothing for the glass recipe to do; applying it here would blur the page * background and read as a rendering fault. The law's own carve-out, used as written. * * BELOW 1024 THE SPLIT COLLAPSES to photograph-over-panel, which is the same shape the resort hero * already takes at that width — one column, photograph on top, facts under it. No new mobile * pattern is introduced. * ========================================================================================== */ /* ⛔ EVERY LAYOUT OVERRIDE BELOW IS SCOPED TO >=1024, DELIBERATELY. The first cut applied `position: relative; inset: auto` to `.mk-hero-media` at ALL widths. Below 1024 the hero is still `display:flex`, so a relatively-positioned media div becomes a flex ITEM with no intrinsic width — it collapsed to zero and THE PHOTOGRAPH DISAPPEARED FROM EVERY SHIP PAGE ON MOBILE. The comment said the split collapses below 1024; the code split at every width. A stated intent is not an implementation, and the only place that difference shows is the rendered page. Below 1024 nothing is overridden: the hero renders exactly as it always has, photograph full-bleed behind a scrim, facts and CTA over it. No new mobile pattern is introduced. */ @media (min-width: 1024px) { .mk-hero--decision { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: stretch; min-height: 0; /* The base hero reserves 88px of bottom padding for the spec card to overlap into. On a full-bleed hero that padding sits inside the photograph; here it is inside NEITHER column, so it painted as a bare ink shelf under the fold. Removed — the card overlaps the two columns directly, which is what the -40px was always for. */ padding-bottom: 0; } .mk-hero--decision .mk-hero-media { position: relative; inset: auto; grid-column: 1; min-height: 100%; } .mk-hero--decision .mk-hero-scrim { display: none; } /* no photograph behind the text now */ /* The panel is hidden and EVERYTHING IT CARRIED IS RE-HOMED into the column — trust stack, CTA and the personal-reply line. Hiding it without moving them deleted our IATA/CLIA accreditations from the fold on every ship page at >=1024. */ .mk-hero--decision .mk-hero-panel { display: none; } .mk-hero--decision .mk-hero-inner { grid-column: 2; display: flex; align-items: center; background: var(--mk-ink-canvas, #0e1214); max-width: none; margin: 0; padding: clamp(40px, 4vw, 64px) clamp(32px, 4vw, 64px); } /* The column is the reading measure, so this is what keeps the copy off the browser edge on a wide monitor now that the container's own max-width no longer applies. */ .mk-hero--decision .mk-hero-col { max-width: 34rem; } /* The CTA is hidden at >=1024 on the ordinary hero because the panel carries it. The panel is gone here, so it comes back — the decision and the way to act on it on one screen is the entire point of the band. */ .mk-hero--decision .mk-hero-actions { display: block; margin-top: 24px; } } .mk-hero-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8125rem; color: rgba(255,255,255,0.72); } .mk-hero-trust li { position: relative; padding-left: 15px; } .mk-hero-trust li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 5px; height: 5px; border-radius: 50%; background: var(--mk-teal, #00c2cb); } .mk-hero--decision .mk-panel-note { margin: 10px 0 0; font-size: 0.8125rem; color: rgba(255,255,255,0.72); } /* ---- the four facts ------------------------------------------------------------------------ * 2×2 at every width. A 1×4 stack pushes the CTA below the fold on a phone, which loses the one * property the whole band exists for. */ .mk-hero-facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 22px; } .mk-hero-fact { display: flex; gap: 11px; align-items: flex-start; min-width: 0; } .mk-fact-icon { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 2px; color: var(--mk-teal, #00c2cb); } .mk-fact-text { display: block; min-width: 0; } .mk-fact-k { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide, 0.12em); color: rgba(255,255,255,0.62); margin-bottom: 3px; } .mk-fact-v { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--mk-white, #fff); } /* The capacity BASIS and the itinerary count ride with their number rather than sitting in a * footnote — four Carnival surfaces state four different capacities for the same hull, so a bare * figure silently picks one. */ .mk-fact-sub { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.35; color: rgba(255,255,255,0.6); } @media (max-width: 719px) { .mk-hero-facts { gap: 14px 16px; margin-top: 20px; padding-top: 18px; } .mk-fact-v { font-size: 0.9375rem; } } /* ---- basis note under the spec strip ------------------------------------------------------- The supplier's own words about WHAT the numbers count. Sits under the strip in the reading column, at reading size — the same rule as the representative-image caption: a qualifier that is present but unreadable is not present. */ .single-ship .mk-strip-basis { max-width: var(--mk-measure); margin: 16px auto 0; padding: 0 var(--mk-pad-x); font-size: 0.8125rem; line-height: 1.6; color: var(--mk-grey); } @media (min-width: 1024px) { .single-ship .mk-strip-basis { padding: 0; } } /* ============================================================================================ * COMPACT HERO — a ship with NO PHOTOGRAPH (PO ruling 2026-08-10, after the eleven-line audit) * -------------------------------------------------------------------------------------------- * 12 of our 17 ships have no photograph, and the audit says that is the DIRECTION of travel, not a * temporary state: Hurtigruten has eight hulls with no imagery and Havila four, and neither line * has a picture coming without a supplier ask. The photograph-less hero was a ~700px near-black * VOID — name floating at the bottom left, enquiry panel adrift top right, the line name printed * twice and the shipyard line printed twice within 300px. * * THE FALLBACK RAN MORE OFTEN THAN THE THING IT FELL BACK FROM, which means it was the design. * So it is designed: one ink column sized to its content, carrying the facts, the basis note, the * CTA and the trust stack — and ABSORBING the spec strip rather than sitting above a second band * that repeats it. No reserved space for a photograph that does not exist. * ========================================================================================== */ .mk-hero--compact { min-height: 0; padding-bottom: 0; display: block; background: var(--mk-ink-canvas, #0e1214); } .mk-hero--compact .mk-hero-media { display: none; } /* no socket, no reserved frame, no void */ .mk-hero--compact .mk-hero-scrim { display: none; } .mk-hero--compact .mk-hero-panel { display: none; } /* removes BOTH duplications as a side effect */ .mk-hero--compact .mk-hero-inner { background: none; max-width: var(--mk-container); margin: 0 auto; display: block; padding: clamp(36px, 5vw, 60px) var(--mk-pad-x) clamp(40px, 5vw, 64px); } .mk-hero--compact .mk-hero-col { max-width: none; } .mk-hero--compact .mk-hero-actions { display: block; } /* Up to six facts here rather than four, because with the strip absorbed these ARE the page's * facts. Three across on desktop keeps two tidy rows at six and one at three. */ @media (min-width: 720px) { .mk-hero--compact .mk-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .mk-hero--compact .mk-hero-facts { max-width: 52rem; } } .mk-hero-basis { margin: 20px 0 0; max-width: var(--mk-measure); font-size: 0.8125rem; line-height: 1.6; color: rgba(255,255,255,0.62); }