/* ===================================================================== Kiboko Tours & Travel — Group Safaris ----------------------------------------------------------------- Scoped to .kt-* class names and loaded ONLY on group-safari pages, so nothing here can regress the 542 KB shared assets/css/style.css. Theme-aware: the site owns its theme via [data-bs-theme] on (forced to light in includes/libs_fav.php). We deliberately do NOT react to the OS prefers-color-scheme, which would fight the site's forced-light theme and paint light text on a light background. Contrast note: brand orange #f4732b on white measures ~3.0:1, which fails WCAG AA for small text. It is used here for large text, for borders, and as a background behind white text. --kt-orange-ink (#a8460f) is the darkened variant used for any small text or link. ===================================================================== */ .kt-group { /* Brand */ --kt-orange: #f4732b; --kt-orange-soft: rgba(244, 115, 43, 0.12); --kt-orange-glow: rgba(244, 115, 43, 0.34); --kt-orange-ink: #a8460f; /* AA-safe on light backgrounds */ --kt-navy: #1d3b53; /* Surfaces */ --kt-sand: #f6efe6; --kt-sand-deep: #ece0d1; --kt-surface: #ffffff; --kt-ink: #14181d; --kt-muted: #5d6570; --kt-line: #dfd6ca; /* Vehicle bodywork */ --kt-body-top: #fbf6ef; --kt-body-bottom: #efe4d4; --kt-body-edge: #cbbba4; --kt-glass: #cfe1ec; /* Seat states */ --kt-seat-face: #fffdfa; --kt-seat-edge: var(--kt-orange); --kt-seat-taken: #cfc9c1; --kt-seat-taken-ink: #6c6660; --kt-seat-held: #e2ddd6; --kt-radius: 14px; --kt-shadow: 0 2px 4px rgba(20, 24, 29, .06), 0 8px 24px rgba(20, 24, 29, .07); /* Motion — every duration routes through these so prefers-reduced-motion can neutralise the whole system in one place. */ --kt-fast: 140ms; --kt-base: 260ms; --kt-spring: cubic-bezier(.34, 1.56, .64, 1); --kt-ease: cubic-bezier(.4, 0, .2, 1); color: var(--kt-ink); } [data-bs-theme="dark"] .kt-group, .kt-group[data-kt-theme="dark"] { --kt-sand: #1a1714; --kt-sand-deep: #221d18; --kt-surface: #16191d; --kt-ink: #f2efea; --kt-muted: #a7a29b; --kt-line: #38322b; --kt-body-top: #2a241d; --kt-body-bottom: #201b16; --kt-body-edge: #453b30; --kt-glass: #2c3a44; --kt-seat-face: #2f281f; --kt-seat-taken: #3a352f; --kt-seat-taken-ink: #8a837b; --kt-seat-held: #332e28; /* On dark surfaces the full-strength orange clears AA comfortably, so the darkened ink variant would actually reduce contrast here. */ --kt-orange-ink: #ff9459; } /* NOTE: we intentionally do NOT switch on @media (prefers-color-scheme: dark). This site controls its own theme via [data-bs-theme] on (forced to light in includes/libs_fav.php). Keying off the visitor's OS preference instead would paint light text on the light theme — the faded-heading bug. Dark styling is driven solely by the [data-bs-theme="dark"] rule above. */ .kt-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===================================================================== Seat map shell ===================================================================== */ .kt-seatmap { --kt-seat-size: 74px; max-width: 380px; margin-inline: auto; } /* Legend — persistent above the map. Airline convention; never collapse it behind a toggle, because it is the key to every state below. */ .kt-seatmap__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; margin: 0 0 1.1rem; padding: .7rem .9rem; list-style: none; background: var(--kt-surface); border: 1px solid var(--kt-line); border-radius: var(--kt-radius); font-size: .8rem; color: var(--kt-muted); } .kt-seatmap__legend li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; } .kt-key { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; } .kt-key--available { background: var(--kt-seat-face); border: 2px solid var(--kt-seat-edge); } .kt-key--selected { background: var(--kt-orange); border: 2px solid var(--kt-orange); } .kt-key--held { background: repeating-linear-gradient(45deg, var(--kt-seat-held), var(--kt-seat-held) 3px, transparent 3px, transparent 6px); border: 2px solid var(--kt-seat-taken); } .kt-key--taken { background: var(--kt-seat-taken); border: 2px solid var(--kt-seat-taken); } .kt-seatmap__fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; /* fieldsets otherwise refuse to shrink in flex/grid */ } .kt-seatmap__legend-text { display: block; width: 100%; float: none; text-align: center; font-size: 1rem; font-weight: 600; color: var(--kt-ink); margin-bottom: .85rem; padding: 0; } /* ===================================================================== The vehicle ===================================================================== */ .kt-vehicle { position: relative; padding: 0 26px 34px; /* room for wheel arches and the spare */ } .kt-vehicle__front { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--kt-muted); margin: 0 0 .55rem; } .kt-vehicle__arrow { display: block; font-size: .65rem; line-height: 1; color: var(--kt-orange); } /* Bodywork wraps the grid, so the vehicle is always exactly as tall as the seats inside it — no coordinate syncing with a background image. */ .kt-vehicle__body { position: relative; padding: 58px 14px 22px; border: 2px solid var(--kt-body-edge); border-radius: 34px; background: linear-gradient(180deg, var(--kt-body-top) 0%, var(--kt-body-bottom) 100%); box-shadow: var(--kt-shadow); transition: transform var(--kt-base) var(--kt-spring), box-shadow var(--kt-base) var(--kt-ease); } /* Bull bar */ .kt-vehicle__bullbar { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 74%; height: 12px; border-radius: 6px; background: var(--kt-body-edge); } .kt-vehicle__bullbar::before, .kt-vehicle__bullbar::after { content: ""; position: absolute; top: 10px; width: 3px; height: 12px; background: var(--kt-body-edge); border-radius: 2px; } .kt-vehicle__bullbar::before { left: 26%; } .kt-vehicle__bullbar::after { right: 26%; } /* Windscreen */ .kt-vehicle__screen { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 82%; height: 32px; border-radius: 12px 12px 7px 7px; background: linear-gradient(160deg, var(--kt-glass) 0%, rgba(255,255,255,.35) 130%); border: 1px solid var(--kt-body-edge); opacity: .9; } /* Wheel arches */ .kt-vehicle__wheel { position: absolute; width: 11px; height: 48px; border-radius: 6px; background: var(--kt-body-edge); } .kt-vehicle__wheel--fl { top: 78px; left: -8px; } .kt-vehicle__wheel--fr { top: 78px; right: -8px; } .kt-vehicle__wheel--rl { bottom: 42px; left: -8px; } .kt-vehicle__wheel--rr { bottom: 42px; right: -8px; } /* Spare wheel on the tailgate */ .kt-vehicle__spare { position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--kt-body-bottom); border: 3px solid var(--kt-body-edge); } .kt-vehicle__spare::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 2px solid var(--kt-body-edge); } /* ===================================================================== Seat grid — 2 columns with a centre gap, exactly like a cabin map ===================================================================== */ .kt-vehicle__grid { position: relative; display: flex; flex-direction: column; gap: 14px; } .kt-vehicle__row { position: relative; display: grid; grid-template-columns: 1fr 26px 1fr; /* seat | aisle | seat */ align-items: center; gap: 0; } /* Row separators, as on an aircraft map */ .kt-vehicle__row + .kt-vehicle__row::before { content: ""; position: absolute; top: -7px; left: 4%; right: 4%; height: 1px; background: var(--kt-body-edge); opacity: .5; } /* Row number in the margin */ .kt-vehicle__rownum { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); font-size: .68rem; font-weight: 700; color: var(--kt-muted); opacity: .65; } .kt-vehicle__cell { display: flex; justify-content: center; } .kt-vehicle__aisle { min-height: 1px; } /* ===================================================================== Seats ===================================================================== */ .kt-seat { position: relative; display: flex; align-items: center; justify-content: center; width: var(--kt-seat-size); height: var(--kt-seat-size); border-radius: var(--kt-radius); font-weight: 700; font-size: .95rem; user-select: none; } /* Headrest notch — makes the shape read as a seat, not a button */ .kt-seat::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 46%; height: 8px; border-radius: 5px 5px 0 0; background: currentColor; opacity: .25; } .kt-seat--empty { visibility: hidden; } .kt-seat--empty::before { display: none; } .kt-seat__input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .kt-seat__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--kt-radius); transition: background-color var(--kt-fast) var(--kt-ease), border-color var(--kt-fast) var(--kt-ease), color var(--kt-fast) var(--kt-ease), transform var(--kt-base) var(--kt-spring); } /* --- Available ---------------------------------------------------- */ .kt-seat--available { color: var(--kt-orange-ink); cursor: pointer; } .kt-seat--available .kt-seat__face { background: var(--kt-seat-face); border: 2px solid var(--kt-seat-edge); } .kt-seat--available:hover .kt-seat__face { transform: translateY(-2px); background: var(--kt-orange-soft); } /* --- Premium ------------------------------------------------------ */ .kt-seat__star { position: absolute; top: 5px; right: 7px; font-size: .62rem; color: var(--kt-orange); line-height: 1; } .kt-seat--selected .kt-seat__star { color: #fff; } /* --- Selected ----------------------------------------------------- */ .kt-seat__check { position: absolute; bottom: 6px; font-size: .72rem; opacity: 0; transform: scale(.4); transition: opacity var(--kt-fast) var(--kt-ease), transform var(--kt-base) var(--kt-spring); } .kt-seat__input:checked ~ .kt-seat__face { background: var(--kt-orange); border-color: var(--kt-orange); color: #fff; animation: kt-seat-pop var(--kt-base) var(--kt-spring); } .kt-seat__input:checked ~ .kt-seat__face .kt-seat__check { opacity: 1; transform: scale(1); } .kt-seat__input:checked ~ .kt-seat__face .kt-seat__code { transform: translateY(-5px); } @keyframes kt-seat-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1.06); } } /* Selection ripple */ .kt-seat__ripple { position: absolute; inset: 0; border-radius: var(--kt-radius); pointer-events: none; } .kt-seat__input:checked ~ .kt-seat__ripple { animation: kt-ripple 620ms var(--kt-ease); } @keyframes kt-ripple { 0% { box-shadow: 0 0 0 0 var(--kt-orange-glow); } 100% { box-shadow: 0 0 0 18px rgba(244, 115, 43, 0); } } .kt-seat__code { position: relative; transition: transform var(--kt-base) var(--kt-spring); } /* --- Held by someone else ----------------------------------------- */ .kt-seat--held { color: var(--kt-seat-taken-ink); cursor: not-allowed; background: repeating-linear-gradient( 45deg, var(--kt-seat-held), var(--kt-seat-held) 4px, transparent 4px, transparent 8px); border: 2px solid var(--kt-seat-taken); animation: kt-held-pulse 2.4s var(--kt-ease) infinite; } @keyframes kt-held-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .68; } } /* --- Taken / blocked ---------------------------------------------- */ .kt-seat--taken, .kt-seat--blocked { background: var(--kt-seat-taken); border: 2px solid var(--kt-seat-taken); color: var(--kt-seat-taken-ink); cursor: not-allowed; } .kt-seat--blocked { background: repeating-linear-gradient( -45deg, var(--kt-seat-taken), var(--kt-seat-taken) 5px, var(--kt-seat-held) 5px, var(--kt-seat-held) 10px); } /* Status glyph — colour is never the only signal for a seat's state */ .kt-seat__glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .9rem; opacity: .75; } .kt-seat--taken .kt-seat__code, .kt-seat--held .kt-seat__code, .kt-seat--blocked .kt-seat__code { position: absolute; top: 6px; left: 8px; font-size: .66rem; opacity: .6; } /* Country flag of the traveller already in this seat. Flags only — never a name. Answers "who will I be travelling with?" without exposing anyone. */ .kt-seat__flag { position: absolute; bottom: 5px; right: 6px; font-size: .78rem; line-height: 1; } /* --- Driver ------------------------------------------------------- */ .kt-seat--driver { background: transparent; border: 2px dashed var(--kt-body-edge); color: var(--kt-muted); flex-direction: column; gap: 2px; } .kt-seat--driver::before { display: none; } .kt-seat__driver-label { font-size: .58rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .8; } /* --- Focus -------------------------------------------------------- */ /* The Bootstrap theme's focus ring is weak; strengthen it inside .kt-group so keyboard users can always see where they are on the map. */ .kt-seat__input:focus-visible ~ .kt-seat__face { outline: 3px solid var(--kt-navy); outline-offset: 3px; } [data-bs-theme="dark"] .kt-seat__input:focus-visible ~ .kt-seat__face { outline-color: #fff; } /* ===================================================================== Counter — gates the continue CTA ===================================================================== */ .kt-seatmap__counter { margin-top: 1.1rem; text-align: center; font-size: .92rem; color: var(--kt-muted); } .kt-seatmap__counter strong { color: var(--kt-ink); } .kt-seatmap__counter[data-state="complete"] strong { color: var(--kt-orange-ink); } /* All seats chosen: the vehicle lifts, confirming the step is done. */ .kt-seatmap[data-state="complete"] .kt-vehicle__body { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(20,24,29,.07), 0 18px 40px rgba(244,115,43,.20); } /* Last remaining seat gets a slow halo — real scarcity, live from the DB. */ .kt-seat--last .kt-seat__face { animation: kt-last-seat 2.1s var(--kt-ease) infinite; } @keyframes kt-last-seat { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 195, 46, 0); } 50% { box-shadow: 0 0 0 7px rgba(247, 195, 46, .34); } } /* ===================================================================== Mini seat bar — cards and the sticky rail ===================================================================== */ .kt-seatbar { display: inline-flex; gap: 4px; vertical-align: middle; } .kt-seatbar__pip { width: 13px; height: 15px; border-radius: 3px; display: inline-block; } .kt-seatbar__pip--available { background: var(--kt-seat-face); border: 1.5px solid var(--kt-orange); } .kt-seatbar__pip--selected { background: var(--kt-orange); } .kt-seatbar__pip--held { background: var(--kt-seat-held); border: 1.5px solid var(--kt-seat-taken); } .kt-seatbar__pip--taken, .kt-seatbar__pip--blocked { background: var(--kt-seat-taken); } /* ===================================================================== Entrance choreography ===================================================================== */ .kt-seatmap[data-animate="in"] .kt-vehicle__body { animation: kt-body-in 560ms var(--kt-ease) both; } .kt-seatmap[data-animate="in"] .kt-vehicle__row { animation: kt-seat-in 380ms var(--kt-ease) both; } /* Front-to-back cascade, 60ms apart */ .kt-seatmap[data-animate="in"] .kt-vehicle__row:nth-child(1) { animation-delay: 240ms; } .kt-seatmap[data-animate="in"] .kt-vehicle__row:nth-child(2) { animation-delay: 300ms; } .kt-seatmap[data-animate="in"] .kt-vehicle__row:nth-child(3) { animation-delay: 360ms; } .kt-seatmap[data-animate="in"] .kt-vehicle__row:nth-child(4) { animation-delay: 420ms; } .kt-seatmap[data-animate="in"] .kt-vehicle__row:nth-child(5) { animation-delay: 480ms; } .kt-seatmap[data-animate="in"] .kt-vehicle__row:nth-child(6) { animation-delay: 540ms; } @keyframes kt-body-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes kt-seat-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* A seat lost to another user while you were looking at it. */ @keyframes kt-seat-lost { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } } .kt-seat--just-lost .kt-seat__face, .kt-seat--just-lost { animation: kt-seat-lost 460ms var(--kt-ease); } /* ===================================================================== Mobile — the airline portrait layout IS the mobile layout ===================================================================== */ @media (max-width: 480px) { .kt-seatmap { --kt-seat-size: 64px; max-width: 320px; } .kt-vehicle { padding: 0 20px 30px; } .kt-vehicle__body { padding: 50px 10px 18px; border-radius: 28px; } .kt-vehicle__row { grid-template-columns: 1fr 20px 1fr; } .kt-vehicle__grid { gap: 11px; } .kt-vehicle__rownum { left: -15px; } /* Legend stays visible while the map scrolls — the state key must never be off-screen while a seat is being tapped. */ .kt-seatmap__legend { position: sticky; top: 0; z-index: 5; font-size: .74rem; gap: .4rem .8rem; padding: .6rem .5rem; } /* Idle motion is dropped on mobile: battery and jank cost more than the polish is worth on a small screen. */ .kt-seat--held { animation: none; opacity: .8; } } /* Below 340px the two columns would breach the 48px touch-target floor, so the aisle collapses before the seats do. */ @media (max-width: 339px) { .kt-seatmap { --kt-seat-size: 56px; } .kt-vehicle__row { grid-template-columns: 1fr 12px 1fr; } } /* ===================================================================== Reduced motion — WCAG 2.3.3 ----------------------------------------------------------------- The airline-familiar structure carries the meaning; the motion is only decoration on top of a layout that already works statically. Collapsing every animation to a short fade costs nothing functional. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .kt-group *, .kt-group *::before, .kt-group *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; } .kt-seatmap[data-animate="in"] .kt-vehicle__body, .kt-seatmap[data-animate="in"] .kt-vehicle__row { animation: kt-fade-in 120ms linear both; } @keyframes kt-fade-in { from { opacity: 0; } to { opacity: 1; } } .kt-seat--available:hover .kt-seat__face, .kt-seatmap[data-state="complete"] .kt-vehicle__body { transform: none; } .kt-seat--held { animation: none; } } /* ===================================================================== Hold countdown ===================================================================== */ .kt-hold-timer { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: 0 auto 1.2rem; padding: .6rem 1rem; max-width: 380px; border-radius: 999px; background: var(--kt-orange-soft); border: 1px solid rgba(244, 115, 43, .3); font-size: .87rem; color: var(--kt-orange-ink); } .kt-hold-timer__clock { font-variant-numeric: tabular-nums; font-weight: 700; } .kt-hold-timer[data-warn="true"] { background: rgba(214, 41, 62, .1); border-color: rgba(214, 41, 62, .35); color: #b0212f; } [data-bs-theme="dark"] .kt-hold-timer[data-warn="true"] { color: #ff8a94; } /* WCAG 2.2.1 requires a way to extend a time limit — this button is a requirement, not a nicety. */ .kt-hold-timer__extend { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: .18rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer; } .kt-hold-timer__extend:hover { background: rgba(0, 0, 0, .06); } /* ===================================================================== Hub hero ===================================================================== */ .kt-hero { position: relative; border-radius: 22px; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.2rem, 5vw, 3.5rem); color: #fff; background: linear-gradient(115deg, rgba(20,24,29,.82) 0%, rgba(29,59,83,.6) 55%, rgba(244,115,43,.42) 100%), var(--kt-navy); background-size: cover; background-position: center; } .kt-hero__inner { max-width: 640px; position: relative; z-index: 2; } .kt-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.08; margin: 0 0 1rem; color: #fff; } .kt-hero__lead { font-size: clamp(1rem, 2vw, 1.2rem); opacity: .95; margin: 0 0 1.5rem; } .kt-hero__from { color: #ffd7bf; font-weight: 700; } .kt-trust { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; list-style: none; padding: 0; margin: 1.5rem 0 0; font-size: .9rem; font-weight: 500; } .kt-trust li { display: flex; align-items: center; gap: .5rem; } .kt-trust i { color: #ffb787; } /* Live "next departure" strip */ .kt-nextstrip { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; text-align: center; margin: 1.25rem auto 0; padding: .7rem 1.2rem; background: var(--kt-orange-soft); border: 1px solid rgba(244,115,43,.3); border-radius: 999px; color: var(--kt-orange-ink); font-weight: 600; font-size: .92rem; } /* ===================================================================== Section headers & generic ===================================================================== */ .kt-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .kt-section--sand { background: var(--kt-sand); } .kt-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--kt-orange-ink); margin: 0 0 .5rem; } .kt-h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; margin: 0 0 .6rem; color: var(--kt-ink); } .kt-lead { font-size: 1.05rem; color: var(--kt-muted); max-width: 620px; } /* ===================================================================== Departure card ===================================================================== */ .kt-card { display: flex; flex-direction: column; height: 100%; background: var(--kt-surface); border: 1px solid var(--kt-line); border-radius: var(--kt-radius); overflow: hidden; transition: transform var(--kt-base) var(--kt-ease), box-shadow var(--kt-base) var(--kt-ease); } .kt-card:hover { transform: translateY(-4px); box-shadow: var(--kt-shadow); } .kt-card--soldout { opacity: .78; } .kt-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kt-sand-deep); } .kt-card__media img { width: 100%; height: 100%; object-fit: cover; } .kt-badge { position: absolute; padding: .28rem .6rem; border-radius: 8px; font-size: .72rem; font-weight: 700; backdrop-filter: blur(4px); } .kt-badge--days { bottom: .7rem; left: .7rem; background: rgba(255,255,255,.9); color: var(--kt-ink); } .kt-badge--guaranteed { top: .7rem; right: .7rem; background: var(--kt-warning, #f7c32e); color: #3d2f00; } .kt-card__body { padding: 1.1rem 1.1rem .4rem; flex-grow: 1; } .kt-card__date { font-weight: 700; color: var(--kt-orange-ink); margin: 0 0 .35rem; font-size: 1.02rem; } .kt-card__date i { margin-right: .35rem; } .kt-card__title { font-size: 1.14rem; font-weight: 700; margin: 0 0 .3rem; line-height: 1.25; } .kt-card__title a { color: var(--kt-ink); text-decoration: none; } .kt-card__title a:hover { color: var(--kt-orange-ink); } .kt-card__sub { color: var(--kt-muted); font-size: .88rem; margin: 0 0 .7rem; } .kt-card__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; padding: 0; margin: 0 0 .8rem; font-size: .84rem; color: var(--kt-muted); } .kt-card__meta i { color: var(--kt-orange); margin-right: .3rem; } .kt-card__avail { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; } .kt-pill { padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; } .kt-pill--ok { background: rgba(12,188,135,.14); color: #0a7a58; } .kt-pill--warn { background: rgba(247,195,46,.2); color: #7a5c00; } .kt-pill--danger { background: rgba(214,41,62,.12); color: #b0212f; } .kt-pill--muted { background: var(--kt-sand-deep); color: var(--kt-muted); } [data-bs-theme="dark"] .kt-pill--ok { color: #4ed9ab; } [data-bs-theme="dark"] .kt-pill--warn { color: #ffd766; } [data-bs-theme="dark"] .kt-pill--danger { color: #ff8a94; } .kt-card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.1rem; border-top: 1px solid var(--kt-line); } .kt-card__price small { color: var(--kt-muted); font-size: .78rem; } .kt-card__price strong { color: var(--kt-ink); font-size: 1.25rem; margin: 0 .2rem; } /* ===================================================================== How it works ===================================================================== */ .kt-step { position: relative; padding: 1.5rem 1.1rem; height: 100%; background: var(--kt-surface); border: 1px solid var(--kt-line); border-radius: var(--kt-radius); } .kt-step__num { position: absolute; top: -14px; left: 1.1rem; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kt-orange); color: #fff; font-weight: 700; font-size: .9rem; } .kt-step__icon { font-size: 1.8rem; color: var(--kt-orange); margin: .6rem 0 .8rem; } .kt-step__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; } .kt-step__text { color: var(--kt-muted); font-size: .9rem; margin: 0; } /* ===================================================================== Comparison (group vs private) ===================================================================== */ .kt-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .kt-compare__col { padding: 1.5rem; border-radius: var(--kt-radius); border: 1px solid var(--kt-line); background: var(--kt-surface); } .kt-compare__col--hl { border-color: var(--kt-orange); box-shadow: 0 0 0 1px var(--kt-orange); } .kt-compare h4 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; } .kt-compare ul { list-style: none; padding: 0; margin: 0; } .kt-compare li { padding: .4rem 0 .4rem 1.6rem; position: relative; font-size: .92rem; color: var(--kt-muted); } .kt-compare li::before { content: "✓"; position: absolute; left: 0; color: var(--kt-orange); font-weight: 700; } @media (max-width: 575px) { .kt-compare { grid-template-columns: 1fr; } } /* ===================================================================== Departure page layout ===================================================================== */ .kt-dep-hero { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 21/8; min-height: 240px; background: var(--kt-sand-deep); } .kt-dep-hero img { width: 100%; height: 100%; object-fit: cover; } .kt-dep-hero__overlay { position: absolute; inset: auto 0 0 0; padding: 1.5rem; background: linear-gradient(0deg, rgba(20,24,29,.8), transparent); color: #fff; } .kt-daybox { border: 1px solid var(--kt-line); border-radius: var(--kt-radius); overflow: hidden; } .kt-day { border-bottom: 1px solid var(--kt-line); } .kt-day:last-child { border-bottom: 0; } .kt-day__head { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.2rem; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; } .kt-day__num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--kt-orange-soft); color: var(--kt-orange-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; } .kt-day__title { font-weight: 600; margin: 0; flex-grow: 1; } .kt-day__body { padding: 0 1.2rem 1.2rem 4rem; color: var(--kt-muted); } /* Sticky booking rail */ .kt-rail { position: sticky; top: 1.5rem; border: 1px solid var(--kt-line); border-radius: var(--kt-radius); background: var(--kt-surface); box-shadow: var(--kt-shadow); overflow: hidden; } .kt-rail__head { padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--kt-line); } .kt-rail__price { font-size: 1.9rem; font-weight: 700; color: var(--kt-ink); } .kt-rail__price small { font-size: .95rem; font-weight: 500; color: var(--kt-muted); } .kt-rail__body { padding: 1.2rem 1.3rem; } .kt-rail__line { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .92rem; } .kt-rail__line span:last-child { font-weight: 600; color: var(--kt-ink); } .kt-rail__cta { display: block; width: 100%; text-align: center; padding: .85rem; border-radius: 12px; background: var(--kt-orange); color: #fff; font-weight: 700; text-decoration: none; border: 0; font-size: 1.05rem; transition: filter var(--kt-fast); } .kt-rail__cta:hover { filter: brightness(1.06); color: #fff; } .kt-rail__rea { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; font-size: .84rem; color: var(--kt-muted); } .kt-rail__rea li { list-style: none; display: flex; gap: .5rem; align-items: center; } .kt-rail__rea i { color: var(--kt-success, #0cbc87); } /* Anchor price vs private */ .kt-anchor { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .9rem; background: var(--kt-sand); border-radius: 10px; font-size: .88rem; color: var(--kt-muted); margin-top: .8rem; } .kt-anchor s { opacity: .8; } .kt-anchor strong { color: var(--kt-orange-ink); font-size: 1.05rem; } /* Included / not included */ .kt-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .kt-incl ul { list-style: none; padding: 0; margin: 0; } .kt-incl li { padding: .35rem 0 .35rem 1.7rem; position: relative; font-size: .92rem; } .kt-incl--yes li::before { content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; color: var(--kt-success, #0cbc87); } .kt-incl--no li::before { content: "\f00d"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; color: var(--kt-muted); } @media (max-width: 575px) { .kt-incl { grid-template-columns: 1fr; } } /* Who travels */ .kt-persona { text-align: center; padding: 1.2rem; } .kt-persona i { font-size: 2rem; color: var(--kt-orange); } .kt-persona h4 { font-size: 1rem; font-weight: 700; margin: .6rem 0 .3rem; } .kt-persona p { font-size: .86rem; color: var(--kt-muted); margin: 0; } /* Objection FAQ */ .kt-faq { border: 1px solid var(--kt-line); border-radius: var(--kt-radius); overflow: hidden; } .kt-faq__q { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--kt-line); padding: 1rem 1.2rem; font-weight: 600; color: var(--kt-ink); cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; } .kt-faq__item:last-child .kt-faq__q { border-bottom: 0; } .kt-faq__a { padding: 0 1.2rem 1.1rem; color: var(--kt-muted); font-size: .93rem; } /* Waitlist */ .kt-waitlist { background: var(--kt-sand); border-radius: var(--kt-radius); padding: 1.5rem; } /* Mobile sticky booking bar */ .kt-mobilebar { position: fixed; inset: auto 0 0 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: var(--kt-surface); border-top: 1px solid var(--kt-line); box-shadow: 0 -4px 20px rgba(0,0,0,.1); } .kt-mobilebar__price strong { font-size: 1.15rem; color: var(--kt-ink); } .kt-mobilebar__price small { display: block; font-size: .72rem; color: var(--kt-muted); } .kt-mobilebar .kt-rail__cta { width: auto; padding: .7rem 1.4rem; } @media (max-width: 991px) { .kt-mobilebar { display: flex; } .kt-has-mobilebar { padding-bottom: 80px; } } /* ===================================================================== Booking flow — progress stepper ===================================================================== */ .kt-steps { max-width: 640px; margin: 0 auto; } .kt-steps__list { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 0 0 .6rem; gap: .3rem; } .kt-steps__item { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--kt-muted); white-space: nowrap; } .kt-steps__item span { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--kt-sand-deep); color: var(--kt-muted); font-size: .78rem; } .kt-steps__item.is-active { color: var(--kt-orange-ink); } .kt-steps__item.is-active span { background: var(--kt-orange); color: #fff; } .kt-steps__item.is-done span { background: var(--kt-success, #0cbc87); color: #fff; } .kt-steps__item.is-done span::before { content: "✓"; } .kt-steps__item.is-done span { font-size: 0; } .kt-steps__item.is-done span::before { font-size: .8rem; } @media (max-width: 575px) { .kt-steps__item { font-size: 0; gap: 0; } /* labels collapse, numbers stay */ .kt-steps__item span { font-size: .78rem; } .kt-steps__item.is-done span { font-size: 0; } } .kt-steps__bar { height: 6px; border-radius: 999px; background: var(--kt-sand-deep); overflow: hidden; } .kt-steps__bar span { display: block; height: 100%; background: var(--kt-orange); border-radius: 999px; transition: width var(--kt-base) var(--kt-ease); } /* ===================================================================== Traveller (pax) stepper — big targets, no dropdowns ===================================================================== */ .kt-pax { display: flex; align-items: stretch; border: 1px solid var(--kt-line); border-radius: 12px; overflow: hidden; max-width: 170px; } .kt-pax__btn { width: 48px; min-height: 48px; border: 0; background: var(--kt-sand); font-size: 1.4rem; line-height: 1; color: var(--kt-orange-ink); cursor: pointer; } .kt-pax__btn:disabled { opacity: .4; cursor: not-allowed; } .kt-pax__btn:hover:not(:disabled) { background: var(--kt-orange-soft); } .kt-pax__val { flex: 1; min-width: 0; border: 0; text-align: center; font-weight: 700; font-size: 1.1rem; background: var(--kt-surface); color: var(--kt-ink); } /* ===================================================================== Price panel (rail + review step) ===================================================================== */ .kt-price-panel { border: 1px solid var(--kt-line); border-radius: var(--kt-radius); overflow: hidden; } .kt-price-panel__row { display: flex; justify-content: space-between; padding: .6rem .9rem; font-size: .92rem; border-bottom: 1px solid var(--kt-line); } .kt-price-panel__row:last-child { border-bottom: 0; } .kt-price-panel__row--total { background: var(--kt-sand); font-weight: 700; font-size: 1.05rem; } .kt-price-panel__row--deposit { background: var(--kt-orange-soft); color: var(--kt-orange-ink); font-weight: 700; } .kt-price-panel__row small { color: var(--kt-muted); font-weight: 400; } /* ===================================================================== Passenger manifest — seat number beside each name ===================================================================== */ .kt-manifest { display: flex; flex-direction: column; gap: .8rem; } .kt-manifest__row { display: grid; grid-template-columns: auto minmax(0, 1fr) 210px; gap: .75rem; align-items: center; padding: .8rem; border: 1px solid var(--kt-line); border-radius: var(--kt-radius); background: var(--kt-surface); } .kt-manifest__seat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 54px; padding: .4rem .55rem; border-radius: 10px; background: var(--kt-orange); color: #fff; font-weight: 700; line-height: 1.1; } .kt-manifest__seat small { font-size: .56rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; opacity: .85; } .kt-manifest__type { display: flex; gap: .4rem; align-items: center; } .kt-manifest__type .form-select { flex: 1 1 auto; min-width: 92px; } .kt-manifest__type .kt-age { flex: 0 0 74px; max-width: 74px; } .kt-manifest__type .kt-age[hidden] { display: none; } /* ===================================================================== Departure date picker (calendar) — replaces the long list of dates ===================================================================== */ .kt-datepick { } .kt-datepick__cal { border: 1px solid var(--kt-line); border-radius: var(--kt-radius); padding: .85rem .9rem 1rem; background: var(--kt-surface); } .kt-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .kt-cal__month { font-weight: 700; font-size: 1rem; } .kt-cal__navbtn { border: 1px solid var(--kt-line); background: #fff; color: var(--kt-ink); width: 34px; height: 34px; border-radius: 9px; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s; } .kt-cal__navbtn:hover:not(:disabled) { border-color: var(--kt-orange); color: var(--kt-orange-ink); } .kt-cal__navbtn:disabled { opacity: .35; cursor: not-allowed; } .kt-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .kt-cal__dow { text-align: center; font-size: .68rem; font-weight: 700; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px; } .kt-cal__pad { } .kt-cal__day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: .9rem; border: 1px solid transparent; background: transparent; color: var(--kt-muted); } .kt-cal__day.is-off { color: #c3c9d0; } .kt-cal__day.is-available { color: var(--kt-ink); font-weight: 700; cursor: pointer; background: rgba(244,115,43,.10); border-color: rgba(244,115,43,.30); position: relative; transition: transform .12s, background .15s, box-shadow .15s; } .kt-cal__day.is-available:hover { background: rgba(244,115,43,.22); transform: translateY(-1px); } .kt-cal__day.is-available::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--kt-orange); } .kt-cal__day.is-selected { background: var(--kt-orange); color: #fff; border-color: var(--kt-orange); box-shadow: 0 4px 12px rgba(244,115,43,.4); } .kt-cal__day.is-selected::after { background: #fff; } .kt-cal__day.is-soldout { opacity: .5; text-decoration: line-through; } .kt-cal__legend { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--kt-muted); margin: .7rem 0 0; } .kt-cal__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kt-orange); display: inline-block; } .kt-datepick__summary { margin-top: .9rem; } .kt-datepick__prompt { text-align: center; color: var(--kt-muted); padding: 1rem .5rem; border: 1px dashed var(--kt-line); border-radius: var(--kt-radius); } .kt-datepick__prompt i { font-size: 1.4rem; color: var(--kt-orange); margin-bottom: .4rem; display: block; } .kt-datepick__prompt p { margin: 0; font-size: .9rem; } .kt-datepick__pick { border: 1px solid var(--kt-line); border-radius: var(--kt-radius); padding: 1rem 1.1rem; background: #fff; box-shadow: var(--kt-shadow); } .kt-datepick__pickdate { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; } .kt-datepick__pickmeta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap; } .kt-datepick__price { font-weight: 700; color: var(--kt-orange-ink); font-size: 1.1rem; } .kt-datepick__price small { color: var(--kt-muted); font-weight: 400; } /* Counter shake when an (N+1)th seat is blocked */ .kt-shake { animation: kt-shake .38s var(--kt-ease); } @keyframes kt-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { .kt-shake { animation: none; } } /* Boarding pass (confirmation) */ .kt-pass { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--kt-line); background: var(--kt-surface); box-shadow: var(--kt-shadow); } .kt-pass__head { background: linear-gradient(120deg, var(--kt-navy), #16324a); color: #fff; padding: 1.4rem 1.6rem; } .kt-pass__ref { font-family: monospace; font-size: 1.5rem; letter-spacing: .12em; font-weight: 700; } .kt-pass__body { padding: 1.5rem 1.6rem; } .kt-pass__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem 1.4rem; } .kt-pass__cell small { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; color: var(--kt-muted); margin-bottom: .15rem; } .kt-pass__cell strong { font-size: 1.05rem; } .kt-pass__seats { display: flex; flex-wrap: wrap; gap: .4rem; } .kt-pass__seat { background: var(--kt-orange); color: #fff; font-weight: 700; padding: .3rem .7rem; border-radius: 8px; } .kt-pass__perf { border-top: 2px dashed var(--kt-line); position: relative; } .kt-pass__perf::before, .kt-pass__perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--kt-sand); } .kt-pass__perf::before { left: -10px; } .kt-pass__perf::after { right: -10px; } .kt-paybox { border: 1px solid var(--kt-line); border-radius: var(--kt-radius); padding: 1.2rem 1.4rem; } .kt-countdown-big { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kt-orange-ink); } @media (max-width: 575px) { .kt-manifest__row { grid-template-columns: auto 1fr; } .kt-manifest__row > :last-child { grid-column: 1 / -1; } }