/* * Seabound Journeys — shore-excursion guide interaction layer * ================================================================== * Sits on top of sx-atmos (the per-port hero scene + section nav) and * adds the parts of the page a reader operates rather than reads: a * filter deck over the ranked excursions, a shortlist they can build and * compare, animated disclosure on the FAQ, and scroll choreography. * * Everything here is additive and namespaced .sxi-*. With this file * missing the page is exactly what it was before: every filter control * is injected by script, every reveal starts from the visible state, and * the FAQ falls back to the browser's own
behaviour. * * Colour comes from each page's own --px-* port tokens, with literal * fallbacks so nothing depends on sx-atmos.css having loaded. */ /* ================================================================== 1. Scroll choreography ================================================================== */ /* The .sxi-on class is added to by script before first paint. Without it every rule below is inert and content renders visible — so a JS failure can never leave the page blank. */ .sxi-on .sxi-rise{ opacity:0; transform:translateY(14px); transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } .sxi-on .sxi-rise.is-in{opacity:1;transform:none} /* Staggered children — index set inline as --i by script. */ .sxi-on .sxi-stagger.is-in>*{animation:sxiRise .58s cubic-bezier(.22,.61,.36,1) backwards} @keyframes sxiRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ================================================================== 2. Filter deck over the ranked excursions ================================================================== */ .sxi-filters{ --fx-nav: var(--px-nav, #0C5C69); --fx-ink: var(--px-accent-ink, #AC4426); background:#fff; border:1px solid var(--paper-2,#DEDBD3); border-radius:14px; box-shadow:var(--shadow, 0 8px 26px -20px rgba(10,40,46,.5)); padding:1.05rem 1.15rem .95rem; margin:0 0 26px; } .sxi-filters-head{ display:flex;align-items:baseline;justify-content:space-between; gap:.7rem;flex-wrap:wrap;margin-bottom:.75rem; } .sxi-filters-k{ font-family:"Space Mono",monospace; font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--fx-nav);margin:0; } .sxi-count{ font-family:"Space Mono",monospace;font-size:.72rem; color:var(--muted,#5b6b6b);margin:0; } .sxi-count b{color:var(--ink,#12262A);font-weight:700} .sxi-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.5rem} .sxi-row:last-of-type{margin-bottom:0} .sxi-row-k{ font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted,#5b6b6b); flex:0 0 auto;margin:0 .3rem 0 0;min-width:5.4em; } .sxi-chip{ font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.01em; color:var(--ink,#12262A);background:var(--paper,#F7F3EC); border:1px solid var(--paper-2,#DEDBD3); border-radius:999px;padding:.36rem .78rem;cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease; } .sxi-chip:hover{border-color:var(--fx-nav);transform:translateY(-1px)} .sxi-chip:focus-visible{outline:2px solid var(--fx-nav);outline-offset:2px} .sxi-chip[aria-pressed="true"]{ background:var(--fx-nav);border-color:var(--fx-nav);color:#fff;font-weight:700; } .sxi-clear{ font-family:"Space Mono",monospace;font-size:.66rem; background:none;border:0;cursor:pointer; color:var(--fx-ink);text-decoration:underline;text-underline-offset:3px; padding:.3rem .2rem; } .sxi-clear:focus-visible{outline:2px solid var(--fx-ink);outline-offset:2px;border-radius:4px} .sxi-clear[hidden]{display:none} .sx-rec.sxi-hidden{display:none} .sxi-empty{ font-family:"Newsreader",Georgia,serif;font-size:1rem;line-height:1.6; color:var(--muted,#5b6b6b); background:#fff;border:1px dashed var(--paper-2,#DEDBD3); border-radius:12px;padding:1.2rem 1.3rem;margin-bottom:26px; } .sxi-empty[hidden]{display:none} .sxi-empty b{color:var(--ink,#12262A)} /* ================================================================== 3. Shortlist + compare ================================================================== */ .sxi-star{ position:absolute;top:.9rem;right:.9rem; width:2.1rem;height:2.1rem;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--paper,#F7F3EC); border:1px solid var(--paper-2,#DEDBD3); color:var(--muted,#5b6b6b);cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; } .sxi-star svg{width:1rem;height:1rem;display:block} .sxi-star:hover{border-color:var(--px-accent-ink,#AC4426);color:var(--px-accent-ink,#AC4426);transform:scale(1.06)} .sxi-star:focus-visible{outline:2px solid var(--px-accent-ink,#AC4426);outline-offset:2px} .sxi-star[aria-pressed="true"]{ background:var(--px-accent-ink,#AC4426);border-color:var(--px-accent-ink,#AC4426);color:#fff; } .sxi-star[aria-pressed="true"] svg{fill:currentColor} .sx-rec{position:relative} .sx-rec .sx-rec-head{padding-right:2.8rem} .sxi-tray{ position:fixed;right:16px;bottom:16px;z-index:58; display:flex;align-items:center;gap:.55rem; background:var(--px-nav,#0C5C69);color:#fff; border:0;border-radius:999px;cursor:pointer; font-family:"Space Mono",monospace;font-size:.72rem;font-weight:700; padding:.7rem 1.05rem; box-shadow:0 12px 28px -14px rgba(6,40,47,.72); transform:translateY(140%);opacity:0; transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .2s ease; } .sxi-tray.is-in{transform:translateY(0);opacity:1} .sxi-tray:focus-visible{outline:2px solid #fff;outline-offset:3px} .sxi-tray-n{ background:rgba(255,255,255,.22);border-radius:999px; min-width:1.5rem;padding:.05rem .4rem;text-align:center; } /* Lift clear of the sticky booking bar when that is on screen. */ body.sj-bar-in .sxi-tray{bottom:76px} .sxi-modal{ position:fixed;inset:0;z-index:120; display:flex;align-items:flex-end;justify-content:center; background:rgba(6,28,34,.62); opacity:0;pointer-events:none; transition:opacity .24s ease; padding:0; } .sxi-modal.is-open{opacity:1;pointer-events:auto} .sxi-modal-card{ background:var(--paper,#F7F3EC); width:100%;max-width:980px;max-height:86vh; border-radius:16px 16px 0 0; display:flex;flex-direction:column; transform:translateY(18px); transition:transform .28s cubic-bezier(.22,.61,.36,1); box-shadow:0 -20px 50px -30px rgba(0,0,0,.6); } .sxi-modal.is-open .sxi-modal-card{transform:none} .sxi-modal-head{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.15rem 1.4rem .9rem; border-bottom:1px solid var(--paper-2,#DEDBD3); } .sxi-modal-head h3{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.12rem;font-weight:600;margin:0;color:var(--ink,#12262A); } .sxi-modal-x{ background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1; color:var(--muted,#5b6b6b);padding:.2rem .4rem;border-radius:6px; } .sxi-modal-x:hover{color:var(--ink,#12262A)} .sxi-modal-x:focus-visible{outline:2px solid var(--px-nav,#0C5C69);outline-offset:2px} .sxi-modal-body{overflow:auto;padding:1.1rem 1.4rem 1.5rem;-webkit-overflow-scrolling:touch} .sxi-cmp{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .sxi-cmp-card{ background:#fff;border:1px solid var(--paper-2,#DEDBD3); border-radius:12px;padding:.95rem 1rem;position:relative; } .sxi-cmp-card h4{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:.95rem;line-height:1.3;font-weight:600;margin:0 1.6rem .55rem 0; color:var(--ink,#12262A); } .sxi-cmp-card h4 a{color:inherit;text-decoration:none} .sxi-cmp-card h4 a:hover{text-decoration:underline} .sxi-cmp-drop{ position:absolute;top:.6rem;right:.6rem; background:none;border:0;cursor:pointer;color:var(--muted,#5b6b6b); font-size:1.05rem;line-height:1;padding:.2rem .3rem;border-radius:5px; } .sxi-cmp-drop:hover{color:var(--px-accent-ink,#AC4426)} .sxi-cmp-drop:focus-visible{outline:2px solid var(--px-accent-ink,#AC4426);outline-offset:1px} .sxi-cmp-card dl{margin:0;display:flex;flex-direction:column;gap:.5rem} .sxi-cmp-card dt{ font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.11em; text-transform:uppercase;color:var(--muted,#5b6b6b);margin:0 0 .1rem; } .sxi-cmp-card dd{ font-family:"Newsreader",Georgia,serif;font-size:.88rem;line-height:1.45; margin:0;color:var(--ink,#12262A); } .sxi-cmp-empty{ font-family:"Newsreader",Georgia,serif;color:var(--muted,#5b6b6b); font-size:.98rem;line-height:1.6;margin:0; } .sxi-modal-foot{ border-top:1px solid var(--paper-2,#DEDBD3); padding:.85rem 1.4rem 1.1rem; display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between; } .sxi-modal-foot p{ font-family:"Space Mono",monospace;font-size:.64rem;line-height:1.5; color:var(--muted,#5b6b6b);margin:0;flex:1 1 18ch; } .sxi-modal-foot button{ font-family:"Space Mono",monospace;font-size:.68rem; background:none;border:1px solid var(--paper-2,#DEDBD3);border-radius:7px; padding:.45rem .8rem;cursor:pointer;color:var(--ink,#12262A); } .sxi-modal-foot button:hover{border-color:var(--px-nav,#0C5C69)} .sxi-modal-foot button:focus-visible{outline:2px solid var(--px-nav,#0C5C69);outline-offset:2px} @media (min-width:720px){ .sxi-modal{align-items:center;padding:24px} .sxi-modal-card{border-radius:16px} } /* ================================================================== 4. FAQ disclosure animation ================================================================== */ .sxi-on .sx-faq-item{overflow:hidden} .sxi-on .sx-faq-item>summary{cursor:pointer;list-style:none;position:relative} .sxi-on .sx-faq-item>summary::-webkit-details-marker{display:none} .sxi-on .sx-faq-item>summary::after{ content:"";position:absolute;right:.1rem;top:50%; width:.58rem;height:.58rem;margin-top:-.42rem; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);opacity:.5; transition:transform .28s cubic-bezier(.22,.61,.36,1); } .sxi-on .sx-faq-item[open]>summary::after{transform:rotate(-135deg)} .sxi-on .sx-faq-item .sx-faq-a{ overflow:hidden; transition:height .3s cubic-bezier(.22,.61,.36,1), opacity .24s ease; } /* ================================================================== 5. Micro-interactions on the ranked cards + table ================================================================== */ .sx-rec{transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease} @media (hover:hover){ .sx-rec:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -26px rgba(10,40,46,.55); } } .sx-rec.sxi-starred{ box-shadow:0 0 0 2px color-mix(in srgb, var(--px-accent-ink,#AC4426) 42%, transparent), 0 14px 32px -26px rgba(10,40,46,.5); } @supports not (color: color-mix(in srgb, red 50%, blue)){ .sx-rec.sxi-starred{box-shadow:0 0 0 2px rgba(172,68,38,.42), 0 14px 32px -26px rgba(10,40,46,.5)} } .sxi-on .sx-table-wrap tbody tr{ opacity:0;transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; } .sxi-on .sx-table-wrap.is-in tbody tr{opacity:1;transform:none} .sxi-on .sx-table-wrap.is-in tbody tr:nth-child(1){transition-delay:.04s} .sxi-on .sx-table-wrap.is-in tbody tr:nth-child(2){transition-delay:.1s} .sxi-on .sx-table-wrap.is-in tbody tr:nth-child(3){transition-delay:.16s} .sxi-on .sx-table-wrap.is-in tbody tr:nth-child(4){transition-delay:.22s} .sxi-on .sx-table-wrap.is-in tbody tr:nth-child(5){transition-delay:.28s} .sxi-on .sx-table-wrap.is-in tbody tr:nth-child(n+6){transition-delay:.34s} /* Hero stat odometer — script swaps the text, this just keeps the width stable so the layout doesn't jump while counting. */ .sxi-num{font-variant-numeric:tabular-nums} /* ================================================================== 6. Motion and print ================================================================== */ @media (prefers-reduced-motion:reduce){ .sxi-on .sxi-rise{opacity:1;transform:none;transition:none} .sxi-on .sxi-stagger.is-in>*{animation:none} .sxi-on .sx-table-wrap tbody tr{opacity:1;transform:none;transition:none} .sxi-on .sx-faq-item .sx-faq-a{transition:none} .sxi-on .sx-faq-item>summary::after{transition:none} .sxi-tray,.sxi-modal,.sxi-modal-card{transition:none} .sx-rec,.sxi-chip,.sxi-star{transition:none} .sx-rec:hover{transform:none} } @media print{ .sxi-filters,.sxi-tray,.sxi-modal,.sxi-star,.sj-sticky{display:none !important} .sx-rec.sxi-hidden{display:block !important} .sxi-on .sxi-rise{opacity:1 !important;transform:none !important} }