/* MyRegularTrip — trip page, built on the landing page's design system. */ :root{ --red:#e10600; --red-deep:#b30500; --red-ink:#8f0400; --yellow:#ffd53b; --yellow-deep:#f0b400; --ink:#1c1917; --ink-2:#3d3733; --ink-3:#6b625c; --tint:#fdf4f3; --tint-2:#fbeceb; --paper:#fff; --line:#e9dedc; --shadow-sticker:4px 4px 0 var(--ink); --shadow-lift:0 18px 40px -18px rgba(140,20,10,.45),0 2px 0 rgba(28,25,23,.06); --ease:cubic-bezier(.16,1,.3,1); --strip:38px; --pad:clamp(20px,4.5vw,44px); --maxw:1280px; } *{box-sizing:border-box} /* Contain sideways overflow on , using clip rather than hidden. overflow-x:hidden on forces its overflow-y to compute as auto, which makes the body a scroll container instead of the document -- that costs the browser's fast scrolling path on a phone, and it is what stopped the lightbox from being able to lock the page. clip contains the same overflow without creating a scroll container at all. */ html{overflow-x:clip} @supports not (overflow:clip){html{overflow-x:hidden}} /* offset anchor jumps past the fixed ticker + sticky header */ html{scroll-padding-top:calc(var(--strip) + 84px);scroll-behavior:smooth} body{ margin:0;padding-top:var(--strip); font-family:"Outfit",-apple-system,"Segoe UI",sans-serif; color:var(--ink);background:var(--paper);line-height:1.55; font-synthesis-weight:none; } h1,h2,h3,h4,.dsp{font-family:"Bricolage Grotesque","Outfit",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.95rem; border-radius:999px;padding:.72em 1.25em;background:var(--red);color:#fff;border:1.5px solid var(--ink); box-shadow:var(--shadow-sticker);text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .btn-sm{font-size:.85rem;padding:.6em 1em;box-shadow:3px 3px 0 var(--ink)} .btn-sm:hover{box-shadow:5px 5px 0 var(--ink)} .btn-sm:active{box-shadow:1px 1px 0 var(--ink)} .btn-y{background:var(--yellow);color:var(--ink)} .btn-o{background:#fff;color:var(--ink)} .eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:.72rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--red);margin-bottom:.6rem} .eyebrow::before{content:"";width:26px;height:3px;background:var(--red);border-radius:2px} /* ── ticker ── */ #mrt-strip{position:fixed;top:0;left:0;right:0;height:var(--strip);z-index:60;background:var(--ink);color:#fff; overflow:hidden;display:flex;align-items:center} #mrt-strip ul{display:flex;gap:0;margin:0;padding:0;list-style:none;white-space:nowrap;animation:tick 38s linear infinite} #mrt-strip li{padding:0 1.1rem;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500} #mrt-strip li b{color:var(--yellow)} #mrt-strip li.dot{color:var(--red);padding:0} @keyframes tick{to{transform:translateX(-50%)}} /* ── header ── */ /* Opaque, and no backdrop-filter. A sticky element that blurs what is behind it makes the compositor re-blur the backdrop on every scroll frame, which is what made scrolling feel heavy on a phone. At 94% white the blur was barely visible anyway, so this costs nothing to look at. */ .hdr{position:sticky;top:var(--strip);z-index:50;background:#fff; border-bottom:1.5px solid var(--ink)} .hdr .in{display:flex;align-items:center;gap:1.2rem;height:66px} .hdr .btn{flex:none;white-space:nowrap;margin-left:auto} /* the sticker shadow sits outside the box, so it needs room inside the bar or it prints over the border and the content below it */ @media(max-width:900px){.hdr .in{gap:.7rem}.hdr .btn{margin-left:auto;margin-right:3px}} @media(max-width:420px){.hdr .btn{font-size:.8rem;padding:.55em .85em}} /* below this the full label cannot fit beside the lockup; the short one does */ .hdr .btn .brief{display:none} @media(max-width:480px){ .hdr .btn .full{display:none} .hdr .btn .brief{display:inline} } /* The badge is the mark; the name is live text. Baking both into one bitmap is what made the old logo look muddy at 38px. */ .brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink); min-width:0;flex:0 1 auto} .brand img{height:48px;width:48px;flex:none} .brand span{font-family:"Bricolage Grotesque","Outfit",system-ui,sans-serif;font-weight:800; font-size:1.18rem;letter-spacing:-.03em;line-height:1;white-space:nowrap} .brand i{font-style:normal;color:var(--red)} @media(max-width:420px){.brand img{height:42px;width:42px}.brand span{font-size:1.04rem}} /* ── hero ── */ .thero{position:relative;background:var(--ink);color:#fff;overflow:hidden} .thero .ph{position:absolute;inset:0} .thero .ph img{width:100%;height:100%;object-fit:cover;opacity:.55} .thero .ph::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(28,25,23,.45),rgba(28,25,23,.92))} .thero .in{position:relative;padding:clamp(2.4rem,7vw,5rem) var(--pad) clamp(1.6rem,4vw,2.6rem)} .thero h1{font-size:clamp(1.9rem,5vw,3.4rem);max-width:20ch;color:#fff} .crumbs{font-size:.83rem;color:#cfc6c2;margin-bottom:1rem} .crumbs a{text-decoration:none;color:#cfc6c2} .crumbs a:hover{color:var(--yellow)} .tbadge{display:inline-flex;align-items:center;gap:.4em;margin-bottom:.7rem; background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink); border-radius:999px;padding:.3em .85em;font-size:.74rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase} .facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem} .fact{display:inline-flex;align-items:center;gap:.45em;background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.3);border-radius:999px;padding:.42em .95em;font-size:.85rem} .fact b{color:var(--yellow);font-weight:700} /* ── layout ── */ .tmain{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:clamp(1.5rem,3vw,2.8rem); padding:clamp(1.8rem,4vw,3rem) var(--pad) 3rem} @media(max-width:1000px){.tmain{grid-template-columns:1fr}} .sec{margin-bottom:clamp(1.8rem,3.6vw,2.8rem)} .sec h2{font-size:clamp(1.3rem,2.6vw,1.75rem);margin-bottom:.9rem} .prose{color:var(--ink-2);font-size:1rem} .prose h2{font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--ink);margin:0 0 .7rem} .prose p{margin:0 0 .85rem} .prose ul{margin:0 0 .9rem;padding-left:1.15rem} .prose li{margin-bottom:.42rem} /* ── itinerary ── */ .itin{border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sticker);background:#fff} .day+.day{border-top:1.5px solid var(--ink)} .day>summary{list-style:none;cursor:pointer;display:flex;gap:.9rem;align-items:flex-start; padding:1rem 1.15rem;font-weight:600;background:#fff;transition:background .16s} .day>summary::-webkit-details-marker{display:none} .day>summary:hover{background:var(--tint)} .day[open]>summary{background:var(--tint-2)} .dnum{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--yellow); display:grid;place-items:center;font-size:.78rem;font-weight:700;font-family:"Bricolage Grotesque",sans-serif} .dttl{flex:1;font-size:.99rem;line-height:1.4} .chev{flex:0 0 auto;transition:transform .2s var(--ease);color:var(--ink-3);margin-top:.35rem} .day[open] .chev{transform:rotate(180deg)} .dbody{padding:0 1.15rem 1.1rem 4rem;color:var(--ink-2);font-size:.95rem} .dbody ul{margin:0;padding-left:1.1rem} .dbody li{margin-bottom:.45rem} @media(max-width:560px){.dbody{padding-left:1.15rem}} /* ── two-col lists ── */ .cols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} @media(max-width:760px){.cols{grid-template-columns:1fr}} .card{border:1.5px solid var(--ink);border-radius:18px;box-shadow:var(--shadow-sticker);background:#fff;padding:1.15rem 1.25rem} .card h3{font-size:1.02rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.5em} .card ul{margin:0;padding-left:1.1rem;color:var(--ink-2);font-size:.93rem} .card li{margin-bottom:.42rem} .tick{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;color:#fff;background:var(--red)} .tick.no{background:var(--ink-3)} /* ── gallery ── */ /* Justified rows. gallery.js solves each row's height from the aspect ratios it actually contains and writes the width/height inline -- CSS cannot, because how many photos fit per row depends on their shapes. These rules are the pre-script fallback: sensible, never distorted, just not flush. */ .gal{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start} .gal a{flex:0 1 auto;height:230px;min-width:0; border:1.5px solid var(--ink);border-radius:14px;overflow:hidden; box-shadow:2px 2px 0 var(--ink); transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .gal a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)} .gal img{display:block;width:100%;height:100%;object-fit:cover} @media(max-width:560px){.gal{gap:8px}} /* ── booking rail ── */ .rail{position:sticky;top:calc(var(--strip) + 82px);align-self:start} .bk{border:1.5px solid var(--ink);border-radius:20px;box-shadow:var(--shadow-sticker);background:#fff;overflow:hidden} .bk .top{background:var(--tint);padding:1.15rem 1.25rem;border-bottom:1.5px solid var(--ink)} .price{display:flex;align-items:baseline;gap:.5rem} .price .now{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.03em} .price .was{text-decoration:line-through;color:var(--ink-3);font-size:1rem} .price .per{font-size:.82rem;color:var(--ink-3)} /* The quoted departures carry words where the others carry a figure. At the price's 2rem "Contact for prices" would run to two lines in the rail and overhang it, so each of these steps down to a size the phrase fits on one line, and keeps the red the price already used. */ .price .now.ask{font-size:1.28rem;color:var(--red)} .bk .body{padding:1.15rem 1.25rem} .bk label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--ink-3);margin:.75rem 0 .3rem} .bk input,.bk select,.bk textarea{width:100%;font:inherit;font-size:.94rem;padding:.62em .8em; border:1.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)} .bk input:focus,.bk select:focus,.bk textarea:focus{outline:3px solid var(--yellow);outline-offset:1px} .bk .btn{width:100%;margin-top:1rem} .bk .note{font-size:.78rem;color:var(--ink-3);margin-top:.7rem;text-align:center} .trust{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;font-size:.85rem;color:var(--ink-2)} .trust div{display:flex;gap:.5em;align-items:flex-start} .trust span{color:var(--red);font-weight:700} /* ── related ── */ /* grid rows size independently, so a row of four and a row of three came out different heights; 1fr rows keep every card the same */ .rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); grid-auto-rows:1fr;gap:1rem} .rcard{border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sticker); background:#fff;text-decoration:none;display:flex;flex-direction:column; transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .rcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .rcard img{aspect-ratio:16/9;object-fit:cover;border-bottom:1.5px solid var(--ink)} .rcard .t{padding:.8rem .9rem;font-weight:600;font-size:.95rem;flex:1} .rcard .m{padding:0 .9rem .85rem;display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-3)} .rcard .m b{color:var(--red);font-family:"Bricolage Grotesque",sans-serif} /* Overseas departures are quoted, not listed, so this cell carries words instead of a number. "Contact for prices" is roughly twice the width of a price and .m is a space-between row on cards that start at 230px, so it is allowed to drop to its own line rather than break mid-phrase -- and it never breaks mid-phrase, because it does not wrap internally. */ .rcard .m{flex-wrap:wrap;gap:.15rem .6rem} .rcard .m b.ask{font-size:.8rem;white-space:nowrap;letter-spacing:0} /* ── mobile CTA ── */ .tbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:.6rem;align-items:center; padding:.7rem var(--pad);background:#fff;border-top:1.5px solid var(--ink)} .tbar .p{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.1rem;line-height:1.1} .tbar .p span{display:block;font-family:"Outfit";font-weight:400;font-size:.72rem;color:var(--ink-3)} .tbar .p b.ask{font-size:.92rem;font-weight:700;color:var(--red);white-space:nowrap} .tbar .btn{flex:1} @media(max-width:1000px){.tbar{display:flex}body{padding-bottom:74px}} /* ── footer ── */ .ftr{background:var(--ink);color:#cfc6c2;padding:2.6rem 0 1.4rem;margin-top:2rem} .ftr .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.6rem} .ftr h4{color:#fff;font-size:.98rem;margin-bottom:.7rem} .ftr a{display:block;text-decoration:none;font-size:.9rem;padding:.2rem 0;color:#cfc6c2} .ftr a:hover{color:var(--yellow)} .ftr .bot{border-top:1px solid #3d3733;margin-top:1.8rem;padding-top:1rem;font-size:.82rem; display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* ── gallery lightbox ── */ .mrt-lb{position:fixed;inset:0;z-index:300;display:none;place-items:center; background:rgba(12,10,9,.94);backdrop-filter:blur(6px);padding:clamp(12px,4vw,44px)} .mrt-lb.on{display:grid} .mrt-lb-fig{margin:0;display:grid;place-items:center;gap:.7rem;max-width:100%;max-height:100%} .mrt-lb-fig img{max-width:min(100%,1300px);max-height:78vh;width:auto;height:auto;display:block; border:1.5px solid rgba(255,255,255,.22);border-radius:14px;background:#1c1917} .mrt-lb-fig figcaption{color:#cfc6c2;font-size:.9rem;text-align:center;max-width:60ch} .mrt-lb-x{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px); width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);color:#fff;font-size:1.1rem;cursor:pointer;z-index:2} .mrt-lb-x:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)} .mrt-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px; border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1); color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2} .mrt-lb-nav:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)} .mrt-lb-nav.prev{left:clamp(6px,2vw,26px)} .mrt-lb-nav.next{right:clamp(6px,2vw,26px)} .mrt-lb-count{position:absolute;bottom:clamp(10px,2.5vw,26px);left:50%;transform:translateX(-50%); color:#cfc6c2;font-size:.84rem;letter-spacing:.08em;background:rgba(0,0,0,.4); border-radius:999px;padding:.3em .9em} .gal a{cursor:zoom-in} @media(max-width:640px){ /* On a phone the photo is nearly the full width, so side arrows sat on top of it. Stack instead: photo, then a control row underneath. dvh keeps the image inside the viewport when the browser chrome hides and shows. */ .mrt-lb{padding:10px;grid-template-rows:1fr auto;align-content:center;gap:.8rem} .mrt-lb-fig{align-self:center} .mrt-lb-fig img{max-height:62vh;max-height:62dvh;max-width:100%} .mrt-lb-fig figcaption{font-size:.82rem} .mrt-lb-nav{position:static;transform:none;width:46px;height:46px;font-size:1.5rem} .mrt-lb-nav.prev,.mrt-lb-nav.next{left:auto;right:auto} .mrt-lb-count{position:static;transform:none;min-width:5.5em;text-align:center} .mrt-lb::after{content:"";display:none} .mrt-lb-bar{display:flex;align-items:center;justify-content:center;gap:1rem; align-self:end;padding-bottom:.4rem} } @media(min-width:641px){.mrt-lb-bar{display:contents}} @media(prefers-reduced-motion:reduce){.mrt-lb{backdrop-filter:none}} /* ── Trip page on a phone ─────────────────────────────────────────────── The hero photo sat at .55 opacity under a gradient reaching .92, which is readable across a wide desktop hero but leaves a 390px screen looking like a black box. Lift the photo and lighten the top of the gradient; the text still has plenty of contrast because the copy sits over the darker half. */ @media(max-width:640px){ .thero .ph img{opacity:.72} /* clear at the top so the photo shows, deep from the eyebrow down so the red eyebrow and white title keep their contrast */ .thero .ph::after{background:linear-gradient(180deg, rgba(28,25,23,.16) 0%,rgba(28,25,23,.42) 30%, rgba(28,25,23,.82) 58%,rgba(28,25,23,.93) 100%)} .thero .in{padding-top:clamp(1.8rem,6vw,2.6rem)} .thero h1{font-size:clamp(1.75rem,7.4vw,2.3rem);max-width:none} /* three ragged one-per-line pills read as clutter; smaller chips pair up */ .facts{gap:.4rem;margin-top:.9rem} .fact{padding:.34em .7em;font-size:.78rem;gap:.35em} .crumbs{font-size:.78rem;margin-bottom:.7rem} /* 20px tall is under the 24px WCAG 2.5.8 floor, and these sit right below a sticky header where a mis-tap goes somewhere unintended */ .crumbs a{display:inline-block;padding-block:.42em} } /* The eyebrow sits over the hero photo, where brand red on a mid-tone sky is close to illegible. Yellow is what the hero already uses for emphasis in the fact chips, and it holds up against the photo at every size. */ .thero .eyebrow{color:var(--yellow)} .thero .eyebrow::before{background:var(--yellow)} /* ── Standing pages: legal documents ──────────────────────────────────── Terms runs to 3,300 words. As a single column it is unreadable and unlinkable, so the document gets a contents rail that sticks beside it on a wide screen and collapses above it on a phone. */ .legal-wrap{ padding-block:clamp(1.8rem,4vw,3rem); display:grid;gap:clamp(1.6rem,3vw,2.8rem); grid-template-columns:minmax(0,1fr); } @media(min-width:960px){ .legal-wrap{grid-template-columns:250px minmax(0,1fr);align-items:start} .legal-toc{position:sticky;top:calc(var(--strip) + 84px);max-height:calc(100vh - 150px); overflow-y:auto;overscroll-behavior:contain} } .legal-toc{ border:1.5px solid var(--line);border-radius:16px; padding:1rem 1.1rem;background:var(--tint); } .legal-toc-h{ margin:0 0 .6rem;font-size:.7rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3); } .legal-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc} .legal-toc li{counter-increment:toc;margin:0 0 .32rem;font-size:.86rem;line-height:1.35} .legal-toc a{ color:var(--ink-2);text-decoration:none;display:block;padding:.12rem 0; border-left:2px solid transparent;padding-left:.6rem;margin-left:-.6rem; } .legal-toc a:hover{color:var(--red);border-left-color:var(--red)} .legal-toc::-webkit-scrollbar{width:6px} .legal-toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .legal-body{max-width:74ch} .legal-body h2,.legal-body h3{ font-size:clamp(1.05rem,2.1vw,1.28rem);margin:2rem 0 .6rem; scroll-margin-top:calc(var(--strip) + 96px); } .legal-body h2:first-of-type,.legal-body h3:first-of-type{margin-top:.4rem} .legal-body p{margin:0 0 .9rem} .legal-body ul{margin:0 0 1rem;padding-left:1.15rem} .legal-body li{margin-bottom:.4rem} .legal-stamp{ display:inline-block;margin:0 0 1.4rem;padding:.34em .8em; background:var(--tint-2);border:1.5px solid var(--line);border-radius:999px; font-size:.78rem;color:var(--ink-3); } .thero-sub{color:#b9afaa;margin:.8rem 0 0;max-width:56ch} @media(max-width:640px){ .legal-toc{padding:.85rem .95rem} .legal-toc li{font-size:.84rem} } /* ── Standing pages: facts row and numbered steps ───────────────────────── */ .statgrid{ display:grid;gap:1px;background:var(--line); border:1.5px solid var(--line);border-radius:18px;overflow:hidden; grid-template-columns:repeat(2,minmax(0,1fr)); } @media(min-width:760px){.statgrid{grid-template-columns:repeat(4,minmax(0,1fr))}} .statcell{background:var(--paper);padding:1.1rem 1rem;text-align:center} .statcell b{ display:block;font-family:"Bricolage Grotesque","Outfit",sans-serif;font-weight:800; font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.02em;color:var(--red);line-height:1; } .statcell span{display:block;margin-top:.35rem;font-size:.84rem;color:var(--ink-3);line-height:1.3} .steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:.7rem} @media(min-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}} .steps li{ counter-increment:step;position:relative; border:1.5px solid var(--line);border-radius:16px; padding:1rem 1.1rem 1rem 3.2rem;background:var(--paper); } .steps li::before{ content:counter(step,decimal-leading-zero); position:absolute;left:1rem;top:1rem; width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--ink);color:var(--yellow); font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.72rem; } .steps b{display:block;font-size:1rem;margin-bottom:.2rem} .steps span{display:block;color:var(--ink-2);font-size:.92rem;line-height:1.5} .lede-lg{font-size:clamp(1.05rem,2.1vw,1.2rem);line-height:1.55;color:var(--ink)} /* ── /package : browse and filter ─────────────────────────────────────── */ /* Grid, not flex: select.js swaps each , for the moment before select.js upgrades it */ .pk-tools select{font:inherit;font-size:.92rem;padding:.55em .8em;background:#fff; border:1.5px solid var(--line);border-radius:11px;color:var(--ink);width:100%} .pk-tools .mrt-sel-btn{font-size:.92rem;padding:.55em .7em} .pk-tools .btn{padding:.55em 1em;font-size:.9rem;box-shadow:2px 2px 0 var(--ink)} .pk-tools .btn:hover{box-shadow:4px 4px 0 var(--ink)} @media(max-width:1080px){ /* search gets its own row; the four filters and Clear share the next */ .pk-tools{grid-template-columns:repeat(4,minmax(0,1fr)) auto} .pk-tools > input[type=search]{grid-column:1/-1} } @media(max-width:760px){ .pk-tools{grid-template-columns:1fr 1fr} .pk-tools > input[type=search]{grid-column:1/-1} .pk-tools > .btn{grid-column:1/-1} } .pk-count{margin:0 0 1rem;font-size:.86rem;font-weight:600;color:var(--ink-3)} .pk-none{padding:2.6rem 1rem;text-align:center;border:1.5px dashed var(--line);border-radius:16px} .pk-none b{display:block;font-size:1.1rem;margin-bottom:.3rem} .pk-none p{margin:0 0 1rem;color:var(--ink-3)} .rc-note{display:block;padding:0 .9rem .8rem;font-size:.78rem;font-weight:600;color:var(--ink-3)} .rcard s{color:var(--ink-3);font-weight:500} @media(max-width:560px){ .pk-tools{gap:.45rem} .pk-tools input[type=search]{font-size:16px;min-height:46px} } /* ── /booking-details : ask for a seat ────────────────────────────────── */ .bk-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1rem;align-items:start} @media(max-width:820px){.bk-grid{grid-template-columns:1fr}} .bk-form .field{display:block;margin-bottom:.7rem} .bk-form .field > span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem} .bk-form input,.bk-form select,.bk-form textarea{ width:100%;font:inherit;font-size:.95rem;padding:.62em .8em;background:#fff; border:1.5px solid var(--ink);border-radius:12px;color:var(--ink); } .bk-form textarea{resize:vertical} .bk-form input:focus,.bk-form select:focus,.bk-form textarea:focus{ outline:0;box-shadow:0 0 0 3px rgba(225,6,0,.16)} .bk-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .bk-sum{position:sticky;top:calc(var(--strip) + 84px);background:var(--tint)} @media(max-width:820px){.bk-sum{position:static}} .bk-price{margin:0;line-height:1.1} .bk-price b{font-family:"Bricolage Grotesque","Outfit",sans-serif;font-size:1.9rem; font-weight:800;letter-spacing:-.03em} .bk-price span{font-size:.86rem;color:var(--ink-3);font-weight:600} .bk-price b.ask{font-size:1.2rem;color:var(--red)} .bk-dur{margin:.35rem 0 1rem;font-size:.88rem;color:var(--ink-3)} .bk-calc{display:grid;grid-template-columns:1fr auto;gap:.45rem .8rem;margin:0 0 1rem; padding:.9rem 0;border-block:1.5px solid var(--line);font-size:.92rem} .bk-calc dt{color:var(--ink-2)} .bk-calc dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .bk-fine{margin:0 0 1rem;font-size:.8rem;line-height:1.5;color:var(--ink-3)} @media(max-width:560px){ .bk-form input,.bk-form select,.bk-form textarea{font-size:16px;min-height:46px} .bk-row{grid-template-columns:1fr} } /* ── where we are ──────────────────────────────────────────────────────── Address beside a map. The map is an iframe, so it gets a fixed aspect ratio rather than a height -- an iframe with no intrinsic size collapses to 150px and then jumps when it loads, which shifts everything under it. */ .office{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:1rem;align-items:stretch;margin-top:1rem} @media(max-width:860px){.office{grid-template-columns:1fr}} .office-card{ background:var(--tint);border:1.5px solid var(--ink);border-radius:16px; box-shadow:var(--shadow-sticker);padding:clamp(1.1rem,2.6vw,1.5rem); display:flex;flex-direction:column; } .office-addr{display:flex;flex-direction:column;gap:.15rem;font-style:normal; font-size:1.02rem;line-height:1.5} .office-addr span:first-child{font-family:"Bricolage Grotesque","Outfit",sans-serif; font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:.25rem} .office-act{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.1rem 0 1.2rem} .office-act .btn{font-size:.9rem;padding:.6em 1em;box-shadow:3px 3px 0 var(--ink)} .office-act .btn:hover{box-shadow:5px 5px 0 var(--ink)} /* pushed to the bottom so the card fills its column beside the taller map instead of leaving a pool of empty pink under the address */ .office-meta{display:grid;grid-template-columns:auto;gap:.15rem;margin:1.2rem 0 0; padding-top:1rem;border-top:1.5px solid var(--line);font-size:.88rem;margin-top:auto} .office-meta dt{font-size:.7rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);margin-top:.6rem} .office-meta dt:first-child{margin-top:0} .office-meta dd{margin:0;color:var(--ink-2);line-height:1.5} .office-map{ border:1.5px solid var(--ink);border-radius:16px;overflow:hidden; box-shadow:var(--shadow-sticker);background:var(--line-2,#f2eae9); aspect-ratio:16/11;min-height:260px; } .office-map iframe{width:100%;height:100%;border:0;display:block} @media(max-width:860px){.office-map{aspect-ratio:4/3;min-height:0}} @media(max-width:560px){ .office-card{box-shadow:4px 4px 0 var(--ink)} .office-map{box-shadow:4px 4px 0 var(--ink);aspect-ratio:1/1} .office-act .btn{flex:1 1 100%} } /* ── about page ────────────────────────────────────────────────────────── Destination chips, the "who we plan for" grid and the sign-off. Kept to the same ink border / sticker shadow vocabulary as the trip cards. */ .sec-h{font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:1rem} .chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:0} .chip-l{ display:inline-block;padding:.32em .8em;border-radius:999px; border:1.5px solid var(--line);background:#fff; font-size:.86rem;font-weight:600;color:var(--ink-2);text-decoration:none; transition:border-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease); } a.chip-l:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)} .who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:.85rem} .who{ background:var(--paper);border:1.5px solid var(--line);border-radius:14px; padding:1rem 1.1rem;transition:border-color .16s var(--ease),transform .16s var(--ease); } .who:hover{border-color:var(--ink);transform:translateY(-2px)} .who h3{font-size:1.02rem;margin:0 0 .35rem} .who h3 a{color:inherit;text-decoration:none} .who h3 a:hover{color:var(--red)} /* the ones that link get a quiet arrow, so it is obvious which are clickable */ .who h3 a::after{content:" \2192";color:var(--red);font-weight:600} .who p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-2)} .sign{ margin-top:1.6rem;padding:1rem 1.2rem;border-left:4px solid var(--yellow); background:var(--tint);border-radius:0 12px 12px 0; font-family:"Bricolage Grotesque","Outfit",sans-serif;font-weight:800; font-size:1.08rem;letter-spacing:-.01em;line-height:1.35; } .sign span{display:block;margin-top:.4rem;font-family:"Outfit",sans-serif; font-weight:500;font-size:.86rem;letter-spacing:0;color:var(--ink-3)} /* the HTML sitemap: many short links, so columns rather than a long ribbon */ .sm-cols{columns:2;gap:2rem;margin:0;padding-left:1.1rem} @media(min-width:760px){.sm-cols{columns:3}} @media(min-width:1100px){.sm-cols{columns:4}} .sm-cols li{break-inside:avoid;margin-bottom:.3rem;font-size:.92rem} /* ── blog post ─────────────────────────────────────────────────────────── Long-form reading: a takeaways block above the fold, a contents rail on longer posts, and tables that scroll rather than push the page sideways. */ .tldr{ margin:0 0 1.6rem;padding:1rem 1.2rem; background:var(--tint);border:1.5px solid var(--ink);border-radius:14px; box-shadow:var(--shadow-sticker); } .tldr > b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--red);margin-bottom:.5rem} .tldr ul{margin:0;padding-left:1.1rem} .tldr li{margin-bottom:.4rem;font-size:.96rem;line-height:1.55} .tldr li:last-child{margin-bottom:0} .post-toc{margin:0 0 1.8rem;padding:.9rem 1.1rem;border-left:3px solid var(--yellow); background:var(--bg,#f7f4f3);border-radius:0 12px 12px 0} .post-toc > b{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem} .post-toc ul{margin:0;padding-left:1.05rem;columns:2;gap:1.4rem} @media(max-width:620px){.post-toc ul{columns:1}} .post-toc li{margin-bottom:.25rem;font-size:.9rem;break-inside:avoid} .post-toc a{color:var(--ink-2);text-decoration:none} .post-toc a:hover{color:var(--red);text-decoration:underline} .post h2{margin-top:2.2rem;scroll-margin-top:calc(var(--strip) + 90px)} .post h3{margin-top:1.4rem} .post-note{ display:block;margin:1.2rem 0;padding:.85rem 1rem; background:#fff8e6;border:1.5px solid #f0d48a;border-radius:12px; font-size:.94rem;line-height:1.6; } .post-note b{color:var(--ink)} .post-table{overflow-x:auto;margin:1.2rem 0; border:1.5px solid var(--line);border-radius:12px} .post-table table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:460px} .post-table th{text-align:left;padding:.6rem .8rem;background:var(--tint); border-bottom:1.5px solid var(--line);font-size:.74rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .post-table td{padding:.6rem .8rem;border-bottom:1px solid var(--line); vertical-align:top;line-height:1.5} .post-table tr:last-child td{border-bottom:0} .post-trips{margin:1.4rem 0} .faq details{border:1.5px solid var(--line);border-radius:12px;margin-bottom:.55rem; background:var(--paper);overflow:hidden} .faq summary{padding:.85rem 1rem;font-weight:600;cursor:pointer;list-style:none; display:flex;align-items:center;gap:.6rem;font-size:.98rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;font-size:1.2rem;color:var(--red); font-weight:700;transition:transform .2s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{background:var(--tint)} .faq details > div{padding:0 1rem 1rem;font-size:.94rem;line-height:1.65;color:var(--ink-2)} /* ── actions in prose ──────────────────────────────────────────────────── A phone number, an email address and a WhatsApp link are not reading material, they are the thing the visitor came to tap -- and on the contact page they rendered 19px tall, under the 24px WCAG 2.5.8 floor and well under a thumb. Targeted by what the link does rather than where it sits -- the first attempt scoped this to .prose and missed, because the contact card is a .card, not prose. The footer's own rule is two classes deep and still wins there. Inline links in a sentence are left alone: padding them would break the line rhythm for no gain. */ @media(max-width:820px){ li > a[href^="tel:"], li > a[href^="mailto:"], li > a[href*="wa.me"]{ display:inline-block;padding-block:.32em; } } /* ── Christmas & New Year departures ────────────────────────────────────── Same design as every other trip page. What changes is the hero: a deep red ground instead of the photo wash, the landing page's snowfall drifting over the whole page, and a festive eyebrow. Everything below the hero -- the rail, the day-by-day, the cards -- is untouched, because the point is that this is our trip page wearing a coat, not a different site. Scoped to body.fest-trip, so it can only ever reach the event departures. The snow CSS below is lifted verbatim from the landing page's festive section so the two cannot drift apart. */ body.fest-trip .thero{position:relative;background:var(--red-ink)} body.fest-trip .thero .ph::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(143,4,0,.55) 0%,rgba(143,4,0,.82) 62%,var(--red-ink) 100%)} body.fest-trip .thero .wrap{position:relative;z-index:3} body.fest-trip .thero h1, body.fest-trip .thero .crumbs, body.fest-trip .thero .crumbs a{color:#fff} body.fest-trip .thero .eyebrow{color:var(--yellow)} body.fest-trip .thero .eyebrow::before{background:var(--yellow)} body.fest-trip .thero .fact{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff} body.fest-trip .thero .fact b{color:#fff} /* The snow falls inside the hero, not over the whole page. A body-level sheet reached every section, and the event is the hero -- everything below it is the ordinary trip page. It also has to sit above the hero's colour wash (z-index 2) and below .wrap (3), or it would fall in front of the heading. */ body.fest-trip .thero{position:relative} body.fest-trip .thero .fest-snow{position:absolute;inset:0;z-index:2; pointer-events:none;overflow:hidden} .fest-snow i{ position:absolute;left:-320px;right:-320px;top:-360px;height:calc(100% + 720px); background-repeat:repeat;animation-timing-function:linear; animation-iteration-count:infinite;will-change:transform; } .fest-snow i:nth-child(1){ background-size:200px 300px;animation-name:snowNear;animation-duration:13s;opacity:.85; background-image: radial-gradient(4px 4px at 30px 40px,#fff 0 40%,rgba(28,25,23,.20) 58%,transparent 76%), radial-gradient(3px 3px at 122px 108px,#fff 0 40%,rgba(28,25,23,.18) 58%,transparent 76%), radial-gradient(4.5px 4.5px at 68px 198px,#fff 0 40%,rgba(28,25,23,.20) 58%,transparent 76%), radial-gradient(3px 3px at 164px 262px,#fff 0 40%,rgba(28,25,23,.16) 58%,transparent 76%); } .fest-snow i:nth-child(2){ background-size:150px 220px;animation-name:snowMid;animation-duration:19s;opacity:.6; background-image: radial-gradient(3px 3px at 26px 52px,#fff 0 40%,rgba(28,25,23,.18) 58%,transparent 76%), radial-gradient(2.5px 2.5px at 104px 18px,#fff 0 40%,rgba(28,25,23,.15) 58%,transparent 76%), radial-gradient(3px 3px at 62px 152px,#fff 0 40%,rgba(28,25,23,.18) 58%,transparent 76%); } .fest-snow i:nth-child(3){ background-size:110px 170px;animation-name:snowFar;animation-duration:28s;opacity:.4; background-image: radial-gradient(2px 2px at 44px 30px,#fff 0 40%,rgba(28,25,23,.16) 58%,transparent 76%), radial-gradient(2px 2px at 14px 106px,#fff 0 40%,rgba(28,25,23,.14) 58%,transparent 76%); } @media(prefers-reduced-motion:reduce){.fest-snow i{animation:none}} .fest-snow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .fest-snow i{ position:absolute;left:-320px;right:-320px;top:-360px;height:calc(100% + 720px); background-repeat:repeat; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform; } /* near: biggest, brightest, quickest */ .fest-snow i:nth-child(1){ background-size:200px 300px;animation-name:snowNear;animation-duration:13s;opacity:.9; background-image: radial-gradient(4px 4px at 30px 40px,#fff 0 45%,transparent 72%), radial-gradient(3px 3px at 122px 108px,rgba(255,255,255,.92) 0 45%,transparent 72%), radial-gradient(4.5px 4.5px at 68px 198px,#fff 0 45%,transparent 72%), radial-gradient(3px 3px at 164px 262px,rgba(255,255,255,.88) 0 45%,transparent 72%); } /* mid */ .fest-snow i:nth-child(2){ background-size:150px 220px;animation-name:snowMid;animation-duration:19s;opacity:.62; background-image: radial-gradient(3px 3px at 26px 52px,#fff 0 45%,transparent 72%), radial-gradient(2.5px 2.5px at 104px 18px,rgba(255,255,255,.85) 0 45%,transparent 72%), radial-gradient(3px 3px at 62px 152px,#fff 0 45%,transparent 72%); } /* far: smallest, faintest, slowest */ .fest-snow i:nth-child(3){ background-size:110px 170px;animation-name:snowFar;animation-duration:28s;opacity:.42; background-image: radial-gradient(2px 2px at 44px 30px,#fff 0 45%,transparent 72%), radial-gradient(2px 2px at 14px 106px,rgba(255,255,255,.8) 0 45%,transparent 72%), radial-gradient(2.5px 2.5px at 88px 70px,#fff 0 45%,transparent 72%); } /* one tile across and one tile down per cycle -- the only pair of numbers that wraps without a visible jump */ @keyframes snowNear{to{transform:translate3d(200px,300px,0)}} @keyframes snowMid {to{transform:translate3d(150px,220px,0)}} @keyframes snowFar {to{transform:translate3d(110px,170px,0)}} @media(prefers-reduced-motion:reduce){ .fest-snow i{animation:none} } /* Journal posts that discuss this departure. Plain list, same card border and sticker shadow as everything else, so it reads as part of the page rather than an ad for the blog. */ .guides{list-style:none;margin:0;padding:0;display:grid;gap:10px} .guides li{border:1.5px solid var(--ink);border-radius:14px;padding:.8rem .95rem; box-shadow:var(--shadow-sticker);background:#fff} .guides li:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .guides li{transition:transform .16s ease, box-shadow .16s ease} .guides a{font-weight:650;color:var(--ink);text-decoration:none;display:block} .guides a:hover{color:var(--red)} .guides span{display:block;margin-top:.25rem;font-size:.86rem;color:var(--ink-3);line-height:1.45}