wrapper
that hosts a tour-price-extras card inside a price table. Drop the
default table-cell padding so the card sits flush with the row above. */
.tour-price-list__extras-cell {
padding: 0 !important;
border-bottom: none !important;
background: transparent;
}
.tour-price-list__extras-cell .tour-price-extras { margin: 0; border-top: none; border-radius: 0 0 6px 6px; }
/* "Editor mode" pencil affordance — kept above the price block. */
.tour-prices__edit {
text-align: right;
padding-top: 14px;
}
.tour-prices__edit a {
color: var(--kohsanuk-accent);
text-decoration: none;
font-size: 14px;
}
/* ===== Yacht specs / equipment / amenities / service ===== */
/* Specifications: warm-cream rounded card with two-column definition grid.
Replaces the old `table table-sm` striped data table. Always rendered
inside a with an h3.tour-section-heading. */
.tour-specs-grid {
background: var(--kohsanuk-surface);
border: 1px solid var(--tc-rule);
border-radius: var(--tc-radius-lg);
padding: 6px 18px 6px 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 32px;
box-shadow: var(--tc-card-shadow);
position: relative;
overflow: hidden;
}
/* Vertical accent gradient rule along the left edge — the "this is a
tour-data card" signature reused across the Specifications panel. */
.tour-specs-grid::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--kohsanuk-brand) 0%, var(--kohsanuk-brand-soft) 100%);
border-radius: var(--tc-radius-lg) 0 0 var(--tc-radius-lg);
}
.tour-specs-grid__row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 11px 0;
border-bottom: 1px solid var(--kohsanuk-rule);
font-size: 14.5px;
gap: 12px;
}
/* Drop the border on the last row in each column (one-column mode hides
the right column entirely so this still reads as the last row). The
:nth-last-child(-n+2) only matches the final pair when the grid is
complete — for an odd row count the dangling last cell still gets the
border, which is intentional (we want a closing rule there). */
.tour-specs-grid__row:nth-last-child(-n+2) { border-bottom: none; }
.tour-specs-grid__lbl {
color: var(--kohsanuk-text-muted);
font-weight: 500;
flex: 0 0 auto;
}
.tour-specs-grid__val {
color: var(--kohsanuk-text);
font-weight: 600;
text-align: right;
}
@media (max-width: 600px) {
.tour-specs-grid { grid-template-columns: 1fr; gap: 0; padding: 4px 16px; }
.tour-specs-grid__row:nth-last-child(-n+2) { border-bottom: 1px solid var(--kohsanuk-rule); }
.tour-specs-grid__row:last-child { border-bottom: none; }
}
/* ─── Feature disc markers ──────────────────────────────────────────────
Small circular markers used by both the Included list and the boat
feature lists (Equipment / Amenities / Service). Shared component so
every "feature bullet" on the page reads as one visual language. */
.tour-feature-disc {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 3px;
line-height: 1;
}
.tour-feature-disc--yes {
background: var(--kohsanuk-brand);
color: var(--kohsanuk-surface);
}
.tour-feature-disc--yes::before { content: "\2713"; /* ✓ */ }
.tour-feature-disc--no {
background: transparent;
color: var(--kohsanuk-action);
border: 1.5px solid var(--kohsanuk-action);
}
.tour-feature-disc--no::before { content: "\2715"; /* ✕ */ }
/* ─── Package tabs (editorial card grid + horizontal scroll-snap) ──────
Phase 2 re-theme of the existing Bootstrap `nav.nav-tabs-solid`
tab control. The legacy markup (and its `data-toggle="tab"` JS)
stays — we just wrap the `.tabbable` container with a marker class
and override every visual rule. Two parents involved:
- `.tour-package-tabs` on the outer `.tabbable` wrapper
- `.nav.nav-tabs-solid` the existing UL (untouched by us)
The Bootstrap JS still toggles `active` on the LI when a card is
clicked, which is what our `.tour-package-tabs .nav-tabs-solid > li.active`
selectors hook into.
Applied wherever the `.tabbable` wrapper carries the
`.tour-package-tabs` marker class. Any new tour-page block that
needs the editorial card grid just opts in by adding the marker. */
.tour-package-tabs {
background: transparent;
margin: 4px 0 18px;
}
/* Positioning context for the overflow chevrons. tour-package-tabs.js
wraps the .nav in this div on attach() so the chevrons sit on
the tab row only — without the wrap, top: 50% centers the chevrons
on the entire .tour-package-tabs container which also contains the
much-taller .tab-content panels below. */
.tour-package-tabs__nav-wrap {
position: relative;
}
/* Overflow chevrons — injected by tour-package-tabs.js when the row of
cards overflows the container. Hidden when the row fits, hidden at
the start/end of the scroll respectively. Semi-transparent floating
circles that sit just outside the first/last card so they don't
obscure card content. */
.tour-package-tabs__chev {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1.5px solid var(--tc-cream-300);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tc-accent);
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
transition: opacity .2s, transform .15s, border-color .15s, color .15s, background .15s, visibility 0s;
z-index: 3;
font-size: 18px;
line-height: 1;
padding: 0;
font-family: inherit;
}
.tour-package-tabs__chev:hover,
.tour-package-tabs__chev:focus-visible {
background: var(--kohsanuk-surface);
border-color: var(--tc-accent);
color: var(--tc-accent-deep);
transform: translateY(-50%) scale(1.08);
outline: none;
}
/* Sit OUTSIDE the card row — the negative offset uses the parent
container's horizontal padding (Bootstrap col-md-* gives 15 px of
it) so the chevron sits over whitespace, not over a card edge.
If the chevron lands over a card on a very narrow column, the
semi-transparent background + backdrop blur keep card content
legible underneath. */
.tour-package-tabs__chev--left { left: -14px; }
.tour-package-tabs__chev--right { right: -14px; }
/* The `hidden` attribute is the visibility contract — the JS toggles
it. Transition the fade so the chevrons don't pop in/out. */
.tour-package-tabs__chev[hidden] {
display: inline-flex;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media (max-width: 480px) {
.tour-package-tabs__chev { width: 32px; height: 32px; font-size: 16px; }
.tour-package-tabs__chev--left { left: -8px; }
.tour-package-tabs__chev--right { right: -8px; }
}
.tour-package-tabs .nav.nav-tabs-solid {
background: transparent;
border: 0;
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* 6px side padding gives the active card's 2px border + shadow room
inside the scrollport (2px clipped the first card's left edge on
mobile); the -4px margins keep the cards visually aligned exactly
where the old 2px padding placed them. */
padding: 6px 6px 14px;
margin: 0 -4px;
-webkit-overflow-scrolling: touch;
/* Hide the scrollbar in both Firefox and WebKit. Webkit renders the
scrollbar thumb whenever overflow-x: auto is declared, even when
the row of cards fits without scrolling — which looked like a
persistent decorative bar under the tabs (see the post-merge
feedback). Touch swipe + mouse-wheel horizontal scroll still
work without a visible scrollbar. */
scrollbar-width: none;
}
.tour-package-tabs .nav.nav-tabs-solid::-webkit-scrollbar { display: none; }
/* Strip Bootstrap's - float/inline-block and lay them out as
flex items inside the snapping container. */
.tour-package-tabs .nav.nav-tabs-solid > li {
flex: 0 0 240px;
scroll-snap-align: start;
float: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
display: block;
}
.tour-package-tabs .nav.nav-tabs-solid > li > a {
/* V3 gradient card: white surface with cream border, hover lifts, active
state fills with a soft gradient + accent border + accent-tinted shadow,
and a 3 px gradient bar sweeps across the top edge.
display: flex + height: 100% + the flex-column layout below makes
every card fill the height of the tallest sibling. Cards whose
subtitle slot is :empty (a tour without a clean tour-type signal —
e.g. joined = 3 / ANY type) would otherwise collapse to a smaller
height than cards that DO show the subtitle. */
display: flex;
flex-direction: column;
justify-content: flex-start;
background: var(--kohsanuk-surface);
border: 1.5px solid var(--tc-cream-300);
border-radius: 12px;
padding: 16px 18px;
color: var(--tc-text);
text-decoration: none;
transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
width: 100%;
height: 100%;
margin: 0;
position: relative;
overflow: hidden;
}
.tour-package-tabs .nav.nav-tabs-solid > li > a::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--tc-accent), var(--kohsanuk-accent-shadow));
opacity: 0;
transition: opacity .2s;
}
.tour-package-tabs .nav.nav-tabs-solid > li > a > h6 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--tc-text);
line-height: 1.3;
letter-spacing: -.005em;
display: flex;
align-items: center;
gap: 10px;
}
/* Glyphs (icon-users4 / icon-user / icon-users2) become cream disc avatars
inside a flex row with the package name. Disc size scales up from Phase 2
so the card has more presence. */
.tour-package-tabs .nav.nav-tabs-solid > li > a > h6 > i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--tc-cream-100), var(--tc-cream-50));
border: 1px solid var(--tc-cream-300);
border-radius: 50%;
color: var(--tc-accent);
font-size: 15px;
flex-shrink: 0;
margin: 0;
transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
/* Subtitle slot — rendered next to the
, hidden when empty so a
tour without a tour-type string still reads cleanly. */
.tour-package-tabs__sub {
display: block;
font-size: 12px;
color: var(--tc-text-soft);
margin-top: 4px;
margin-left: 46px; /* aligns with the name (36 px disc + 10 px gap) */
font-weight: 400;
letter-spacing: 0;
}
.tour-package-tabs__sub:empty { display: none; }
.tour-package-tabs .nav.nav-tabs-solid > li > a:hover,
.tour-package-tabs .nav.nav-tabs-solid > li > a:focus {
border-color: var(--tc-accent);
background: var(--kohsanuk-surface);
color: var(--tc-text);
transform: translateY(-1px);
}
.tour-package-tabs .nav.nav-tabs-solid > li > a:hover::before,
.tour-package-tabs .nav.nav-tabs-solid > li > a:focus::before {
opacity: 1;
}
/* Bootstrap toggles `active` on the - when the tab is selected. */
.tour-package-tabs .nav.nav-tabs-solid > li.active > a,
.tour-package-tabs .nav.nav-tabs-solid > li.active > a:hover,
.tour-package-tabs .nav.nav-tabs-solid > li.active > a:focus {
background: linear-gradient(135deg, var(--tc-cream-50) 0%, var(--kohsanuk-surface) 50%, var(--tc-cream-200) 100%);
border-color: var(--tc-accent);
border-width: 2px;
/* Compensate the +0.5 px border on each axis so the active card doesn't
jump in size when it transitions in. */
padding: 15.5px 17.5px;
color: var(--tc-text);
box-shadow: 0 8px 24px var(--kohsanuk-accent-soft);
transform: translateY(-2px);
}
.tour-package-tabs .nav.nav-tabs-solid > li.active > a::before {
opacity: 1;
}
.tour-package-tabs .nav.nav-tabs-solid > li.active > a > h6 > i {
background: linear-gradient(135deg, var(--tc-accent-deep, var(--kohsanuk-accent-dark)), var(--tc-accent));
color: var(--kohsanuk-surface);
border-color: var(--tc-accent);
box-shadow: 0 3px 8px var(--kohsanuk-action-shadow);
}
/* "Other / Show more" dropdown — keep it as a card too, no caret
styling required (Bootstrap handles the open state). */
.tour-package-tabs .nav.nav-tabs-solid > li.dropdown { flex: 0 0 auto; min-width: 160px; }
.tour-package-tabs .nav.nav-tabs-solid > li.dropdown > a {
background: var(--tc-cream-100);
border: 1.5px dashed var(--tc-cream-300);
color: var(--tc-accent);
}
.tour-package-tabs .nav.nav-tabs-solid > li.dropdown > a > h6 { color: var(--tc-accent); }
@media (max-width: 480px) {
.tour-package-tabs .nav.nav-tabs-solid > li { flex-basis: 200px; }
.tour-package-tabs .nav.nav-tabs-solid > li > a { padding: 14px 16px; }
.tour-package-tabs .nav.nav-tabs-solid > li.active > a { padding: 13.5px 15.5px; }
}
/* ─── Itinerary timeline overrides (Phase 2 — P2 picked) ──────────────
The Itinerary block uses .list-feed / .list-feed-time from the admin
theme (rendered by app/Library/Itinerary.php — no PHP edits here).
Scoping to .tour-section so the admin-area pages that also use
.list-feed keep their blue-grey palette. */
.tour-section .list-feed > li::before {
/* Filled dot with soft halo — picked P2 polish. Brand teal, not action orange. */
background-color: var(--kohsanuk-brand);
border: none;
box-shadow: 0 0 0 3px var(--kohsanuk-brand-soft);
width: 10px;
height: 10px;
top: 7px;
}
.tour-section .list-feed-time > li .feed-time {
/* 600-weight time labels to balance the heavier dot. */
font-weight: 600;
color: var(--tc-text-soft);
}
/* Admin-theme rule:
.list-feed-time > li { margin-left: 48px; }
.feed-time { position: absolute; left: -88px; width: 80px; }
That 80 px right-aligned label column is sized for time RANGES, but
most entries are single times ("07.15"), leaving ~40 px of dead
space left of the label — and the negative offset made labels clip
in the tour-page context. Rebuild the geometry tighter: no
padding, a 48 px label column flush with the section's left edge
(li margin 56 = 48 label + 8 gap to the dot). Single times fit on
one line; ranges ("15.45 - 17.30") wrap to two — they already
wrapped at 80 px too. Text column lands at 84 px instead of 116. */
.tour-section .list-feed-time {
padding-left: 0;
}
.tour-section .list-feed-time > li {
margin-left: 56px;
}
.tour-section .list-feed-time > li .feed-time {
left: -56px;
width: 48px;
}
/* Lists containing time RANGES (Itinerary.php emits the --wide
modifier when any label exceeds single-time length): a side column
wide enough for "15.45 - 17.30" would push the text ~130 px in, and
a narrow one wraps the range onto 2–3 lines. Stack instead — the
time renders as its own line above the text, so a range always
fits on one line and the timeline hugs the left edge. */
.tour-section .list-feed-time--wide > li {
margin-left: 0;
}
.tour-section .list-feed-time--wide > li .feed-time {
position: static;
display: block;
width: auto;
text-align: left;
margin: 0 0 2px;
}
/* Apply the same flex-row layout to the Included list (.list-icons
from the admin theme that we no longer want owning the layout) so
the disc marker sits inline with the text. The Bootstrap col-md-6
classes on each - still float to make two columns; the inner
contents flex within each floated column. */
.tour-feature-bullets li {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.5;
padding-left: 0;
margin-top: 7px;
}
.tour-feature-bullets li::before { display: none; }
/* Equipment / Amenities / Service tabs render via the same
.tour-specs-grid card as Specifications — see
tours/parts/_feature-list.blade.php. The old chip / two-column
disc rules were dropped when those tabs migrated to the
definition-grid layout. */
/* Narrow-column adjustments — when the price block renders in the right
sidebar or features box, tighten paddings and let the package tabs
wrap to two lines instead of horizontal-scroll. */
@media (max-width: 480px) {
.tour-prices__hdr { gap: 8px; }
.tour-prices__title { font-size: 16px; }
.tour-price-tabs__tab { font-size: 12px; padding: 7px 12px; letter-spacing: .03em; }
.tour-price-list__row > td { padding: 11px 2px; font-size: 14px; }
.tour-price-extras__toggle { padding: 10px 12px; }
}
|