/* GENERATED by scripts/extract-chrome-css.mjs — do not edit. Source: assets/home/home.css */ :root { --navy: #07182d; --ink: #102642; --blue: #155dfc; /* * ACCESSIBILITY TOKENS (16 Aug 2026 audit). * * Fifteen WCAG AA contrast failures, all near-misses at 3.7-4.3 where 4.5 is required, so small * token moves clear the whole set without touching the palette's character: * --muted #60728a -> #4a5a6e (4.92 -> 7.05 on white; it is used for 11-13px text on tinted * cards where it was measuring 3.93-4.01) * --purple #8b5cf6 -> #6d28d9 (4.23 -> 7.10, and white-on-purple passes too) * --blue-ink NEW. --blue #155dfc is fine as a BACKGROUND with white text * (5.25) but fails as TEXT on yellow (4.23) and on pale blue * (4.28). Rather than darken --blue everywhere and lose the * brand blue, text-on-light uses this darker variant: 7.40 on * #ffe777, 7.48 on #dce9ff. */ --blue-ink: #0b3fa8; --cyan: #00d9ff; --mint: #baffc9; --purple: #6d28d9; --yellow: #ffe777; --coral: #ff745d; --cream: #fff8dc; --foam: #f6fbff; --line: #d8e6f8; --white: #fff; --muted: #4a5a6e; --max: 1280px; --display: "Bricolage Grotesque", Arial, sans-serif; --sans: "Geist", Arial, sans-serif; } @font-face { font-family: "Bricolage Grotesque"; src: url('/fonts/bricolage-grotesque.woff2') format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; } @font-face { font-family: "Geist"; src: url('/fonts/geist.woff2') format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; } h1, h2, h3, .brand { font-family: var(--display); } .offer-bar { min-height: 36px; /* Right padding leaves room for the absolutely-positioned close control. */ padding: 7px 52px 7px 24px; background: var(--yellow); color: var(--navy); display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 14px; position: relative; } .offer-dismiss { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .offer-dismiss:checked ~ .offer-bar { display: none; } .offer-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); /* * ABOVE THE NAV TOGGLE, or the cross does nothing. * * `.nav-toggle` is an invisible 44x44 checkbox at `top: 0; right: 14px` with `z-index: 3`, and * its offset parent is — so it lands on the top-right corner of the PAGE, which is the * offer bar, not the header. It sat directly on top of this 26x26 cross and swallowed every * click: elementFromPoint over the cross returned INPUT.nav-toggle, and the bar never closed. * On desktop that toggle is inert anyway (its .menu-button is display:none), so nothing is lost * by putting the cross in front of it. */ z-index: 4; /* 24x24 minimum target — the footer links were fixed for exactly this reason (audit F-08). */ width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--navy); transition: background 0.15s; } .offer-close:hover { background: #0000001a; } .offer-close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .offer-dismiss:focus-visible ~ .offer-bar .offer-close { outline: 3px solid var(--navy); outline-offset: 2px; } .offer-bar-tag { flex: none; font-size: 11px; font-weight: 700; opacity: 0.7; } .offer-bar strong { padding: 4px 11px; background: var(--navy); color: var(--white); border-radius: 999px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } .offer-bar a { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; } .arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .site-header { height: 72px; max-width: var(--max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; background: var(--white); position: relative; z-index: 30; } .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); font-size: 23px; font-weight: 800; letter-spacing: -0.045em; white-space: nowrap; } .brand-accent { color: var(--blue); } .site-footer .brand-accent { color: var(--mint); } .mark { width: 40px; height: 40px; border-radius: 14px; background: var(--navy); display: inline-grid; place-items: center; flex: none; transform: rotate(-2deg); } .mark svg { width: 30px; height: 30px; fill: none; stroke: var(--mint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .site-header nav { display: flex; align-items: center; gap: 29px; margin-left: auto; } .site-header nav a { position: relative; padding: 26px 0; font-size: 14px; font-weight: 700; color: #31465e; } .site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 18px; height: 2px; background: var(--blue); transition: right 0.15s ease; } .site-header nav a:hover::after { right: 0; } .header-cta, .button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 21px; border-radius: 999px; border: 0; font-size: 14px; font-weight: 800; transition: transform 0.15s ease, box-shadow 0.15s ease; } .header-cta { background: var(--navy); color: var(--white); } .header-cta:hover, .button:hover, .plan-button:hover { transform: translateY(-2px); } .menu-button { display: none; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); padding: 12px; } .menu-button span { display: block; height: 2px; background: var(--navy); margin: 5px 0; } .region-card > .arrow { position: absolute; z-index: 3; right: 17px; bottom: 18px; width: 22px; height: 22px; } .port-card > .arrow { align-self: end; color: var(--mint); } .footer-ocean-band { position: relative; overflow: hidden; /* * F-01. The band held `height: 350px`. The SVG inside is viewBox 1440x340 with * preserveAspectRatio="xMidYMax slice" — `slice` means COVER, so it scales until the artwork * fills both axes and crops the rest. A 350px-tall box is only 4.24:1 at exactly 1,483px wide; * either side of that, something is lost. Measured: at 1,058px the lighthouse lost 108px and the * buoy left the frame entirely; at 1,905px the ship's crown sat 90px above the visible area with * the mast and signal arcs gone. Nobody sees the whole drawing. * * Locking the box to the artwork's own ratio removes the drift — which is exactly what the * mobile rule below already does with `height: 36vw`. This is that fix, generalised. */ aspect-ratio: 1440 / 340; height: auto; /* Full-bleed past .site-footer's 24px side padding, so the sea reaches both edges. */ width: calc(100% + 48px); margin: 0 -24px; background: var(--cream); line-height: 0; } .footer-ocean { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; /* * F-01, second half. Locking the BAND to 1440/340 was necessary and not sufficient: the SVG * itself still carried `height: 350px`, so at 1,058px it rendered 350px tall inside a 250px * band and `slice` cropped exactly as before — the lighthouse measured at left -108px on the * live page, which is the audit's own figure to the pixel. * * Filling the band is what makes the ratio lock actually take effect. */ height: 100%; overflow: visible; } .footer-sun { fill: var(--yellow); } .footer-cloud { fill: var(--white); opacity: 0.9; } .footer-lighthouse { fill: var(--white); stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .footer-lighthouse .light-beam { fill: rgba(255, 231, 119, 0.42); stroke: none; animation: lighthouse-beam 5.5s ease-in-out infinite; transform-origin: 160px 104px; } .footer-cruise { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; animation: footer-ship-bob 4.8s ease-in-out infinite; transform-origin: 850px 180px; } .cruise-hull { fill: var(--white); } .cruise-deck, .cruise-top { fill: var(--mint); } .cruise-windows { stroke-width: 7; } .cruise-signal { stroke: var(--blue); animation: signal-pulse 2.8s ease-out infinite; } .footer-buoy { fill: var(--coral); stroke: var(--navy); stroke-width: 4; } .footer-wave { transform-origin: center bottom; } .wave-a { fill: var(--cyan); animation: wave-drift 12s ease-in-out infinite alternate; } .wave-b { fill: var(--blue); animation: wave-drift-back 14s ease-in-out infinite alternate; } .wave-c { fill: var(--navy); } .site-footer { width: 100%; margin: 0; padding: 0 24px 26px; background: var(--navy); color: var(--white); } .footer-main { max-width: var(--max); margin: 0 auto; padding: 61px 0 48px; display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 48px; } .footer-main .brand { color: var(--white); } .footer-brand p { max-width: 310px; margin: 15px 0 13px; color: #9fb0c1; font-size: 14px; line-height: 1.6; } .footer-checked { color: var(--mint); font-size: 12px; } .footer-main > div:not(.footer-brand) { display: grid; align-content: start; gap: 13px; } .footer-main > div > strong { margin-bottom: 4px; color: var(--mint); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; } .footer-main > div > a:not(.brand) { color: #bac7d3; font-size: 14px; } .footer-main > div > a:hover { color: var(--white); } .guide-card .arrow { position: absolute; bottom: 24px; left: 26px; width: 22px; height: 22px; } .footer-trust { max-width: var(--max); margin: 0 auto; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; } .footer-trust a { color: #b9c9d9; text-decoration: none; /* 44px touch target without a 44px-tall visual band. */ padding: 12px 0; margin: -12px 0; } .footer-trust a:hover, .footer-trust a:focus-visible { color: var(--white); text-decoration: underline; } .offer-bar a, .text-link { display: inline-flex; align-items: center; min-height: 24px; } .footer-main a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px; } .footer-bottom { max-width: var(--max); margin: 0 auto; padding-top: 18px; border-top: 1px solid #2b4057; display: flex; justify-content: space-between; color: #7f93a8; font-size: 13px; } @media (max-width: 1160px) { .footer-main { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 26px; } } @media (max-width: 900px) { /* * The offer bar kept the code but dropped the reason to use it — "Save 10% on selected cruise * plans" was the value proposition and it was the part being hidden. Shortened, not removed. */ .offer-bar span:not(.offer-bar-tag) { font-size: 12px; } .site-header { height: 65px; padding: 0 18px; } .site-header nav { display: none; position: absolute; top: 64px; left: 16px; right: 16px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 18px 45px rgba(7, 24, 45, 0.15); } .site-header nav.nav-open { display: grid; } .site-header nav a { padding: 12px 10px; } .site-header nav a::after { display: none; } /* * The primary CTA used to vanish here, leaving the mobile header as logo + hamburger with no * persistent path into the funnel across a page ~17 phone-screens tall. Kept, compacted. */ .header-cta { padding: 0 13px; font-size: 13px; min-height: 38px; } .header-cta .arrow { display: none; } .menu-button { display: block; } /* * Data and validity were also hidden here. With the price rule above, a phone user comparing two * plans saw the provider name and nothing else — both differentiators gone. * * Reflowed into label-value pairs rather than hidden. Hiding spec data on the narrow layout is * never the right answer on a comparison table; it is the layout most people are using. */ .plan-spec { grid-column: 2 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .footer-main { grid-template-columns: 1.4fr repeat(2, 1fr); } .footer-brand { grid-row: span 2; } } @media (max-width: 640px) { .offer-bar { justify-content: space-between; padding: 6px 14px; gap: 8px; } .offer-bar strong { font-size: 11px; } .offer-bar a { font-size: 13px; } .brand { font-size: 20px; } .mark { width: 36px; height: 36px; border-radius: 12px; } /* * Stack the heading on a phone instead of setting the note beside it. * * The note used to be squeezed into a 110px column next to the h2. At 13px that wrapped to four * lines, which both crushed "Where are you cruising?" into a narrow column and made the pill * taller than the heading it was annotating. Below the heading it reads as one line of context, * which is what it is. */ .finder-heading { flex-direction: column; align-items: flex-start; gap: 10px; } /* * This hid Disney, Virgin Voyages, Cunard and Holland America from phone users with no "view all" * anywhere in the module — two of the highest-intent brands in the niche, invisible on the * layout most people browse on. The list scrolls now instead of truncating. */ .line-list { grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } /* * Mobile framing. * * The full 1440-wide scene shrunk to a phone would be specks, so the band crops in. Getting that * crop to hold still takes care: with preserveAspectRatio="slice" the visible slice depends on * the box's ASPECT RATIO, so a fixed pixel height with a percentage width re-frames the picture * at every screen size — at 375px it sliced the ship in half. * * Sizing the height in vw instead makes height and width scale together, so these three numbers * frame the same window (viewBox x 300-1250: the whole ship, the sun, and the full wave stack) * on every phone from 320px up. The 118%/-15% pair also guarantees the artwork still covers the * right edge, so no cream shows through beneath the waves. */ .footer-ocean-band { height: 36vw; /* .site-footer drops to 18px of side padding at this width, so the bleed has to match. */ width: calc(100% + 36px); margin: 0 -18px; } .footer-ocean { height: 36vw; width: 118%; left: -15%; } .site-footer { padding: 0 18px 24px; } .footer-main { grid-template-columns: 1fr 1fr; gap: 35px 20px; padding-top: 48px; } .footer-brand { grid-column: 1 / -1; grid-row: auto; } .footer-bottom { display: grid; gap: 7px; } } .skip-link { position: fixed; z-index: 9999; top: 10px; left: 10px; padding: 11px 16px; border-radius: 999px; background: #fff; color: #07182d; font-weight: 800; transform: translateY(-150%); transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); } @media (max-width: 640px) { .site-footer a { display: inline-block; padding: 7px 0; } } .nav-toggle { position: absolute; top: 0; right: 14px; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; z-index: 3; } .nav-toggle:focus-visible ~ .site-header .menu-button { outline: 2px solid var(--navy, #07182d); outline-offset: 3px; box-shadow: 0 0 0 5px #00d9ff; } @media (max-width: 1200px) { /* * F-02 — THE HEADER DEAD ZONE. * * The disclosure nav used to take over at 900px, but the full nav needs about 1,183px to sit on * one line: links 768px + gaps, logo 170px, CTA 101px, padding 48px. That left a 283px dead zone * from 901 to 1,183px — iPad landscape, 1152x864 laptops, and any half-screen window on a 1440 * or 1920 display. Measured at 1,073px: the nav box was 106px tall inside a 72px header, with * "Cruise lines" on two lines, "How it works" on three, and two links overflowing the header's * bottom edge by 8px and 17px. * * Only the NAV rules are raised to 1,200px. The rest of the 900px block is phone layout — hero * heights, grid collapses — and lifting all of it would apply phone styling to an iPad. */ .site-header nav { display: none; position: absolute; top: 64px; left: 16px; right: 16px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 18px 45px rgba(7, 24, 45, 0.15); } .site-header nav.nav-open, .nav-toggle:checked ~ .site-header nav { display: grid; } .site-header nav a { padding: 12px 10px; } .site-header nav a::after { display: none; } .menu-button { display: block; } } @media (max-width: 900px) { /* * The band still needs the vw treatment below 900px: `aspect-ratio` handles the desktop drift, * but the mobile rule also reframes the scene (118%/-15% on .footer-ocean) to keep the ship, * sun and lighthouse in view on a narrow screen, which a pure ratio lock would not do. */ .footer-ocean-band { aspect-ratio: auto; } .footer-ocean-band, .footer-ocean { height: 36vw; } /* * grid, not flex — this must match the design's own open state (`nav.nav-open { display: grid } `). * The nav's base rule is `display: flex` with the default row direction, so opening it as a flex * container laid all seven links out in a single row: "Ports" was clipped at the screen edge and * Ferries, Coupons and How it works were off-screen entirely, with no way to reach them. */ .nav-toggle:checked ~ .site-header nav { display: grid; } /* Turn the two bars into a cross while open, so the control reads as "close". */ .nav-toggle:checked ~ .site-header .menu-button span:first-child { transform: translateY(3px) rotate(45deg); } .nav-toggle:checked ~ .site-header .menu-button span:last-child { transform: translateY(-3px) rotate(-45deg); } } @media (max-width: 430px) { .offer-bar { gap: 8px; padding: 6px 12px; font-size: 12px; } .offer-bar strong { padding: 3px 8px; font-size: 11px; letter-spacing: 0.04em; } .offer-bar a { white-space: nowrap; font-size: 12px; } /* The strapline is the first thing to go when there is genuinely no room — the code and the link still carry the offer. */ .offer-bar > span:not(.offer-bar-tag) { display: none; } .site-header { padding: 0 12px; gap: 8px; } .header-cta { padding: 0 11px; font-size: 12px; min-height: 36px; white-space: nowrap; } .brand span:not(.mark) { font-size: 17px; } } @keyframes footer-ship-bob { 50% { transform: translateY(-7px) rotate(-0.7deg); } } @keyframes wave-drift { to { transform: translateX(10px) scaleX(1.01); } } @keyframes wave-drift-back { to { transform: translateX(-11px) scaleX(1.012); } } @keyframes signal-pulse { 50% { opacity: 0.45; } } @keyframes lighthouse-beam { 50% { transform: rotate(9deg); opacity: 0.55; } }