/* ==========================================================================
Thai Go Marketplace — listing page body ([thaigo_marketplace])
Header and footer belong to the theme; nothing here touches them.
========================================================================== */
.tg-mk {
--tg-primary: #2652cf;
--tg-ink: #101828;
--tg-muted: #6a7282;
--tg-meta: #888888;
--tg-red: #aa1f23;
--tg-star: #ffb800;
--tg-border: #dbe3f7;
--tg-cat-border: #e8eaed;
--tg-chip-border: #b2c8f5;
--tg-placeholder: #99a1af;
--tg-price-font: "Prompt", "Instrument Sans", sans-serif;
--tg-grid-top: #8ebfff;
--tg-grid-bottom: #d0e7ff;
--tg-card-radius: 20.32px;
/* The theme's header is fixed and overlays the page, while content starts
above its bottom edge. This is the gap the hero needs to clear it —
override on .tg-mk if the header height changes. */
--tg-header-clear: 90px;
--tg-max: 1322px;
--tg-max-filters: 1020px;
width: 100%;
box-sizing: border-box;
color: var(--tg-ink);
font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tg-mk *,
.tg-mk *::before,
.tg-mk *::after {
box-sizing: border-box;
}
.tg-mk img {
display: block;
max-width: 100%;
}
/* --- Hero ---------------------------------------------------------------- */
.tg-mk__hero {
position: relative;
/* Override --tg-hero-bg on .tg-mk to swap the photograph.
Layers, top to bottom: the white fade into the filter bar, the indigo
veil that tints the photo and keeps white text readable, then the photo.
The veil's stops come from sampling the design's vertical profile — it
is lightest around the cards and deepest at the waterline. */
--tg-hero-bg: url('../images/marketplace-hero.jpg');
background-color: #1b1c4a;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, .85) 97%, #fff 100%),
linear-gradient(180deg,
rgba(24, 40, 104, .80) 0%,
rgba(54, 70, 126, .56) 32%,
rgba(48, 62, 118, .58) 48%,
rgba(14, 20, 54, .78) 74%,
rgba(10, 16, 42, .88) 92%),
var(--tg-hero-bg);
background-position: center top, center top, center bottom;
background-size: cover;
background-repeat: no-repeat;
/* The hero holds its height even on short content, so the photograph has
room to read as a backdrop rather than a strip. */
min-height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 24px 56px;
}
.tg-mk__hero::after {
content: "";
position: absolute;
inset: 0;
background: none;
pointer-events: none;
}
.tg-mk__hero-inner {
position: relative;
z-index: 1;
max-width: var(--tg-max);
margin: 0 auto;
/* Flex item of the hero column: without an explicit width it sizes to the
rail's 1053px, so between the mobile breakpoint and a full desktop the
hero overflowed the screen and the focused card was cut off at the
window edge. */
width: 100%;
min-width: 0;
}
/* The heading is left-aligned to the carousel rail, not page-centred, and the
link sits at the rail's right edge. */
.tg-mk__hero-head {
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
max-width: 1000px;
margin: 0 auto 20px;
}
/* "See more" sits at the right edge of the heading block; space-between on the
row handles it, so no absolute positioning is needed. */
.tg-mk__hero-head .tg-mk__seemore {
flex: 0 0 auto;
}
.tg-mk__hero-head h1 {
margin: 0;
color: #fff;
font-size: 40px;
font-weight: 600;
line-height: 48.8px;
letter-spacing: 0;
text-align: left;
}
.tg-mk__seemore {
color: #fff;
font-size: 16px;
font-weight: 400;
text-decoration: underline;
white-space: nowrap;
}
/* Carousel: a real Swiper. Slide widths drive the focused-card treatment
(slidesPerView: 'auto'), so they live here rather than in JS. */
.tg-mk__carousel {
position: relative;
display: flex;
align-items: center;
/* Side padding keeps the cards off the hero's edges; the rail (and its
clipping) sits inside it, so the row still measures 1005px. */
max-width: 1053px;
min-width: 0;
padding: 0 24px;
margin: 0 auto;
}
.tg-mk__swiper {
width: 100%;
min-width: 0;
overflow: hidden;
}
/* Static rail (Elementor editor preview, JS off): Swiper's margins are not
there yet, so space the slides with a gap until it initialises. */
.tg-mk__swiper:not(.swiper-initialized) .tg-mk__track {
gap: 16px;
}
/* With no focused card (after a search) the collapsed row no longer fills the
rail in whole cards, so the one clipped at the right edge fades out instead
of being sliced. */
.tg-mk__swiper:not(:has(.is-focus)) {
-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 99%);
mask-image: linear-gradient(90deg, #000 82%, transparent 99%);
}
/* Auto-width slides: Swiper reads the width off each slide. */
.tg-mk__track > .tg-mk__dest {
width: 192.31px;
}
.tg-mk__track {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.tg-mk__dest {
position: relative;
width: 192.31px;
height: 307.69px;
flex-shrink: 0;
/* The slide's own width never changes — Swiper measures these to build its
snap grid, and a slide that resizes under it leaves every later card,
and the arrows, working off stale positions. The focused card grows by
overflowing its slide (below) and pushing the cards to its right along
by the same amount, so the row looks identical and the maths stays put.
!important because the site zeroes every transition via `html * {}`. */
transition: transform .4s ease !important;
}
/* Elementor Pro's carousel stylesheet (loaded after ours) ships a bare
`.swiper-slide { overflow: hidden }` that sliced the focused card at its
slide's edge; the extra selector weight beats it. */
.tg-mk__track > .tg-mk__dest.swiper-slide {
overflow: visible;
}
.tg-mk__dest.is-focus {
z-index: 1;
}
/* Everything to the right of the focused card steps aside by the width it
gains: 365.38 - 192.31 = 173.07px, which is 90% of a narrow card. */
.tg-mk__dest.is-focus ~ .tg-mk__dest {
transform: translateX(90%);
}
/* Without this, the smallest mouse drift over a card starts a native link or
image drag and the browser never fires the click — cards looked unclickable. */
.tg-mk__dest a,
.tg-mk__dest img {
-webkit-user-drag: none;
user-select: none;
}
.tg-mk__dest a {
position: absolute;
inset: 0;
cursor: pointer;
display: block;
width: 100%;
height: 100%;
transition: width .4s ease !important;
border-radius: 24.62px;
overflow: hidden;
text-decoration: none;
}
.tg-mk__dest img {
width: 100% !important;
/* !important: Elementor's widget stylesheet forces img{height:auto},
which collapsed the cover crop once these sections became widgets. */
height: 100% !important;
object-fit: cover;
}
/* Bottom scrim so the province name stays legible on any photo. */
.tg-mk__dest a::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 60%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
}
.tg-mk__dest-name {
position: absolute;
left: 16px;
bottom: 14px;
z-index: 1;
color: #fff;
/* Figma: Instrument Sans SemiBold 21.54 / 36.92 when focused. */
font-size: 21.54px;
font-weight: 600;
transition: font-size .4s ease, bottom .4s ease, left .4s ease !important;
}
.tg-mk__dest.is-focus .tg-mk__dest-name {
font-size: 36.92px;
/* Two-line names were nearly touching at the font's default leading. */
line-height: 1.2;
}
.tg-mk__arrow {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-top: -20px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: #fff;
cursor: pointer;
}
.tg-mk__arrow svg {
width: 18px;
height: 18px;
}
.tg-mk__arrow--prev { left: -40px; }
.tg-mk__arrow--next { right: -40px; }
.tg-mk__arrow.swiper-button-disabled {
opacity: .35;
cursor: default;
}
.tg-mk__search {
display: flex;
align-items: center;
gap: 10px;
max-width: 1000px;
margin: 36px auto 0;
padding: 14px 16px;
height: 48px;
border-radius: 16px;
background: #fff;
color: var(--tg-placeholder);
}
.tg-mk__search svg {
flex: 0 0 20px;
width: 20px;
height: 20px;
stroke-width: 1.5;
color: var(--tg-placeholder);
}
.tg-mk__search input {
flex: 1;
border: 0;
background: none;
color: var(--tg-ink);
font: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1;
outline: none;
}
/* --- Category tiles ------------------------------------------------------ */
.tg-mk__cats {
background: #fff;
padding: 0 24px 18px;
}
.tg-mk__cat-list {
display: flex;
justify-content: center;
gap: 11.7px;
max-width: var(--tg-max-filters);
margin: 0 auto;
padding: 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.tg-mk__cat-list::-webkit-scrollbar {
display: none;
}
.tg-mk__cat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12.3px;
width: 114.75px;
height: 98.36px;
border: 1px solid var(--tg-cat-border);
border-radius: 11.48px;
color: var(--tg-primary);
font-size: 13.11px;
font-weight: 600;
line-height: 16.39px;
letter-spacing: 0;
text-align: center;
text-decoration: none;
}
.tg-mk__cat svg {
width: 32.8px;
height: 32.8px;
}
.tg-mk__cat.is-active {
border-color: var(--tg-primary);
background: var(--tg-primary);
color: #fff;
}
/* The filter controls are hrefless anchors (clicks only ever fire AJAX), and a
hrefless anchor gets no pointer cursor of its own. */
.tg-mk a[data-tg-href] {
cursor: pointer;
}
/* --- Interest chips ------------------------------------------------------ */
.tg-mk__interests {
background: #fff;
padding: 6px 24px 26px;
}
.tg-mk__interests-inner {
display: flex;
/* The label stays on the first line and the chip list flows beside it;
only chips that do not fit wrap. Wrapping this container instead pushed
the entire chip list to a second line on its own. */
flex-wrap: nowrap;
align-items: center;
gap: 14px;
max-width: var(--tg-max-filters);
margin: 0 auto;
}
.tg-mk__interests-label {
flex: 0 0 auto;
}
.tg-mk__chips {
flex: 1 1 auto;
min-width: 0;
}
.tg-mk__interests-inner::-webkit-scrollbar {
display: none;
}
.tg-mk__interests-label {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--tg-primary);
font-size: 17.19px;
font-weight: 700;
line-height: 19.1px;
white-space: nowrap;
}
/* The divider after the label, as a border rather than an extra element. */
.tg-mk__interests-label::after {
content: "";
width: 1.5px;
height: 24px;
margin-left: 6px;
background: var(--tg-primary);
}
.tg-mk__interests-label svg {
width: 16px;
height: 16px;
margin-left: 4px;
color: #92a8e7;
color: color-mix(in srgb, var(--tg-primary) 50%, #fff);
}
.tg-mk__chips {
display: flex;
/* Thai labels run much longer than English, so the row wraps rather than
pushing chips off the edge. */
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.tg-mk__chip {
display: inline-block;
padding: 7px 15px;
border: 1px solid var(--tg-chip-border);
border-radius: 999px;
color: var(--tg-primary);
font-size: 12px;
font-weight: 600;
line-height: 19.1px;
text-decoration: none;
white-space: nowrap;
}
.tg-mk__chip.is-active {
border-color: var(--tg-primary);
background: var(--tg-primary);
color: #fff;
}
/* --- Card grid ----------------------------------------------------------- */
.tg-mk__grid-wrap {
background: linear-gradient(180deg, var(--tg-grid-top) 0%, var(--tg-grid-bottom) 100%);
/* Breathing room above the first row and below the last, per the design. */
padding: 40px 24px 60px;
}
.tg-mk__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
max-width: var(--tg-max);
margin: 0 auto;
}
.tg-mk__card {
display: flex;
flex-direction: column;
cursor: pointer;
border-radius: var(--tg-card-radius);
background: #fff;
box-shadow: 0 8px 20px rgba(16, 32, 74, .12);
overflow: hidden;
}
.tg-mk__media {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
line-height: 0;
}
.tg-mk__img {
width: 100%;
/* 415 x 253.97 in the design — measured from the Figma node, not eyeballed. */
aspect-ratio: 415 / 254;
height: auto;
object-fit: cover;
}
.tg-mk__img--empty {
display: block;
background: #e7edf8;
}
.tg-mk__count {
position: absolute;
right: 10px;
bottom: 10px;
/* Swiper's own .swiper class carries z-index: 1, which paints the slides
above an auto-stacked sibling — the badge was rendering underneath the
photo. */
z-index: 2;
/* Figma: 38.1 x 19.8 pill, radius 20.32, #000 at 50%, padding 1.9/3.81. */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38.1px;
height: 19.8px;
padding: 1.9px 3.81px;
border-radius: 20.32px;
background: rgba(0, 0, 0, .5);
color: #fff;
font-size: 7.62px;
font-weight: 600;
line-height: 15.39px;
}
.tg-mk__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 14px 16px 16px;
}
.tg-mk__title {
margin: 0 0 6px;
font-size: 17.78px;
font-weight: 500;
line-height: 25.97px;
}
.tg-mk__meta {
display: flex;
align-items: center;
gap: 5px;
margin: 0;
color: var(--tg-meta);
font-size: 11.43px;
line-height: 19.24px;
}
.tg-mk__meta b {
color: var(--tg-muted);
font-weight: 400;
}
.tg-mk__meta i {
font-style: normal;
}
.tg-mk__star {
color: var(--tg-star);
font-size: 13px;
}
.tg-mk__row {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0 auto;
}
/* Two-line clamp: the mockup's blurb never runs past two lines. */
.tg-mk__desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin: 0;
color: var(--tg-muted);
font-size: 11.43px;
line-height: 19.24px;
}
.tg-mk__more {
flex: 0 0 20px;
display: grid;
place-items: center;
width: 20px;
height: 20px;
padding: 0;
border: 0;
background: none;
color: var(--tg-muted);
cursor: pointer;
}
.tg-mk__more svg {
width: 16px;
height: 16px;
}
.tg-mk__usual {
margin: 10px 0 0;
font-family: var(--tg-price-font);
font-size: 12px;
font-weight: 400;
line-height: 25.97px;
}
.tg-mk__usual s {
color: var(--tg-meta);
}
.tg-mk__usual span {
color: var(--tg-red);
font-weight: 400;
}
.tg-mk__price {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 0;
}
.tg-mk__price b {
font-family: var(--tg-price-font);
font-size: 17.78px;
font-weight: 500;
line-height: 25.97px;
}
.tg-mk__via {
font-family: var(--tg-price-font);
color: var(--tg-ink);
font-size: 12.7px;
font-weight: 500;
line-height: 25.97px;
}
.tg-mk__provider {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border: 1px solid var(--tg-border);
border-radius: 8px;
background: #fff;
color: var(--tg-ink);
font-size: 12.51px;
font-weight: 500;
line-height: 17.32px;
white-space: nowrap;
}
.tg-mk__provider-logo {
width: 16px;
height: 16px;
object-fit: contain;
}
/* Dev Mode: fill width x 34.92 high, radius 400, no padding; label
Instrument Sans 600 at 15.24 / 19.2. */
.tg-mk__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 34.92px;
margin-top: 12px;
padding: 0;
border: 0;
border-radius: 400px;
background: var(--tg-primary);
color: #fff;
font-size: 15.24px;
font-weight: 600;
line-height: 19.2px;
text-align: center;
text-decoration: none;
}
.tg-mk__showmore-wrap {
margin: 30px 0 0;
text-align: center;
}
.tg-mk__showmore {
/* Dev Mode: hug 176 x fixed 50, radius 32, 2px inner border, 10/15
padding, 10px gap, label Instrument Sans 600 20/20. The border colour is
bound to the brand token rather than the literal #2652CF. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 50px;
padding: 10px 15px;
border: 2px solid var(--tg-primary);
border-radius: 32px;
background: #fff;
color: var(--tg-primary);
font-size: 20px;
font-weight: 600;
line-height: 20px;
text-decoration: none;
}
.tg-mk .tg-mk__showmore {
border: 2px solid var(--tg-primary) !important;
border-radius: 32px !important;
font-size: 20px !important;
line-height: 20px !important;
}
.tg-mk__showmore svg {
width: 25px;
height: 25px;
}
.tg-mk__empty {
max-width: var(--tg-max);
margin: 0 auto;
padding: 40px 0;
text-align: center;
color: #fff;
font-size: 15px;
}
/* --- Dialog -------------------------------------------------------------- */
.tg-mk__dialog {
width: min(520px, calc(100vw - 32px));
max-height: min(88vh, 780px);
padding: 0;
border: 0;
border-radius: 22px;
background: #fff;
overflow: visible;
}
.tg-mk__dialog::backdrop {
background: rgba(9, 16, 40, .55);
}
.tg-mk__dialog-slot {
max-height: min(88vh, 780px);
border-radius: 22px;
overflow-y: auto;
}
.tg-mk__dialog-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--tg-ink);
cursor: pointer;
}
.tg-mk__dialog-close svg {
width: 17px;
height: 17px;
}
.tg-mk__dialog-media {
position: relative;
line-height: 0;
}
.tg-mk__dialog-media {
border-radius: 22px 22px 0 0;
overflow: hidden;
}
.tg-mk__dialog-media .tg-mk__img {
/* 243px in the reference render, measured 1:1 against a 520px dialog. */
height: 243px;
border-radius: 0;
}
.tg-mk__gallery-arrow {
width: 32px;
height: 32px;
margin-top: -16px;
background: rgba(0, 0, 0, .45);
}
.tg-mk__gallery-arrow svg { width: 14px; height: 14px; }
.tg-mk__gallery-arrow--prev { left: 10px; }
.tg-mk__gallery-arrow--next { right: 10px; }
.tg-mk__gallery-arrow--next svg { transform: scaleX(-1); }
.tg-mk__dialog-media .tg-mk__gallery-arrow {
width: 40px;
height: 40px;
margin-top: -20px;
}
.tg-mk__dialog-media .tg-mk__gallery-arrow svg { width: 18px; height: 18px; }
.tg-mk__dialog-media .tg-mk__gallery-arrow--prev { left: 16px; }
.tg-mk__dialog-media .tg-mk__gallery-arrow--next { right: 16px; }
.tg-mk__dialog-media .tg-mk__count {
right: 16px;
bottom: 14px;
padding: 4px 10px;
border-radius: 8px;
font-size: 14px;
}
.tg-mk__dialog-content {
/* 22px sides put the rows at x=61 in a 520px dialog, matching the
reference; the title sits 33px below the photo. */
padding: 33px 22px 24px;
}
.tg-mk__dialog-title {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
}
.tg-mk__dialog-content .tg-mk__meta {
font-size: 13px;
}
.tg-mk__prices {
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.tg-mk__price-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 21px;
padding: 18px 20px;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 14px rgba(16, 32, 74, .14);
}
.tg-mk__price-row:last-child {
margin-bottom: 0;
}
.tg-mk__price-row b {
font-family: var(--tg-price-font);
font-size: 21px;
font-weight: 500;
}
.tg-mk__row-right {
display: flex;
align-items: center;
gap: 8px;
}
/* Stretched link: the whole row is the booking target, without nesting the
anchor around the markup. */
.tg-mk__row-link {
position: absolute;
inset: 0;
border-radius: 14px;
}
.tg-mk__badge {
position: absolute;
top: -14px;
right: 18px;
padding: 6px 18px;
border-radius: 999px;
background: var(--tg-primary);
color: #fff;
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
}
.tg-mk__dialog-body {
display: none;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
.tg-mk__grid {
gap: 20px;
}
.tg-mk__cat-list,
.tg-mk__interests-inner {
justify-content: flex-start;
}
}
/* --- Theme armour --------------------------------------------------------
The shortcode is dropped into a theme page, and travel-theme styles win on
specificity for a handful of properties: h3 sizing, link underlines and a
#cc3366 border on every button. This site already fights back with
!important elsewhere (see the global transition killer), so the same tool is
used here — kept to the exact properties being stomped, nothing wider.
------------------------------------------------------------------------- */
.tg-mk a {
text-decoration: none !important;
}
.tg-mk .tg-mk__seemore {
text-decoration: underline !important;
}
.tg-mk h1,
.tg-mk h2,
.tg-mk h3 {
margin: 0;
font-family: inherit !important;
letter-spacing: normal !important;
}
.tg-mk .tg-mk__title {
margin: 0 0 6px !important;
color: var(--tg-ink) !important;
font-size: 17.78px !important;
font-weight: 500 !important;
line-height: 25.97px !important;
}
.tg-mk .tg-mk__dialog-title {
font-size: 22px !important;
line-height: 1.25 !important;
}
.tg-mk .tg-mk__hero-head h1 {
font-size: 40px !important;
font-weight: 600 !important;
line-height: 48.8px !important;
letter-spacing: 0 !important;
}
.tg-mk button {
border: 0 !important;
border-radius: 0;
background: none !important;
box-shadow: none !important;
font-family: inherit;
}
.tg-mk .tg-mk__arrow,
.tg-mk .tg-mk__dialog-close {
border-radius: 50% !important;
background: rgba(255, 255, 255, .9) !important;
}
.tg-mk .tg-mk__dialog-close {
background: #fff !important;
}
.tg-mk .tg-mk__more {
width: 20px !important;
min-width: 0 !important;
height: 20px !important;
padding: 0 !important;
}
.tg-mk .tg-mk__media {
width: 100% !important;
padding: 0 !important;
}
.tg-mk img {
border: 0 !important;
box-shadow: none !important;
}
.tg-mk ul {
list-style: none !important;
}
/* Full-bleed: the theme wraps page content in a ~1140px container, but the
hero and grid backgrounds run edge to edge in the design. Self-cancelling —
inside an already-full-width parent, 50% equals 50vw and the margins
collapse to zero. */
.tg-mk__hero,
.tg-mk__cats,
.tg-mk__interests,
.tg-mk__grid-wrap {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
}
/* The theme's page title duplicates the hero heading and collides with the
transparent header, so it is hidden on shortcode pages only. */
body.tg-mk-page .page-content > .entry-title,
body.tg-mk-page .site-main > .entry-title,
body.tg-mk-page .page-header,
body.tg-mk-page h1.entry-title {
display: none !important;
}
/* Infinite scroll: the button doubles as the loading indicator. */
.tg-mk__showmore.is-loading {
opacity: .6;
pointer-events: none;
}
/* --- Active destination card (design frame B) ----------------------------
The focused card is wider, ringed in white and carries its tags. */
.tg-mk__dest.is-focus a {
/* 365.38 / 192.31 — the card overflows its slide to the right. */
width: 190%;
}
.tg-mk__dest.is-focus a::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
padding: .77px;
border-radius: inherit;
background: linear-gradient(180deg, #ffffff 0%, #d6e5ff 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.tg-mk__dest-tags {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
/* Faded rather than display:none — display cannot animate. */
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s !important;
}
.tg-mk__dest.is-focus .tg-mk__dest-tags {
opacity: 1;
visibility: visible;
}
/* With tags present the name lifts to make room for them. The width cap keeps
a long name broken across lines instead of snapping onto one line the moment
the card widens. */
.tg-mk__dest.is-focus .tg-mk__dest-name {
left: 18px;
bottom: 52px;
max-width: 70%;
}
.tg-mk__dest-tags li {
padding: 4px 12px;
border-radius: 999px;
background: #fff;
color: var(--tg-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
/* --- Destination picker --------------------------------------------------
Opened from "See more". Every region panel is rendered up front; the script
only toggles classes.
------------------------------------------------------------------------- */
.tg-mk__picker {
width: min(1355px, calc(100vw - 48px));
max-height: min(88vh, 800px);
padding: 24px;
border: 0;
border-radius: 20px;
background: #fff;
color: var(--tg-ink);
overflow-y: auto;
}
.tg-mk__picker::backdrop {
background: rgba(9, 16, 40, .55);
}
.tg-mk__picker-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.tg-mk .tg-mk__picker-head h2 {
font-size: 24px !important;
font-weight: 700 !important;
}
.tg-mk__picker-close {
display: grid;
place-items: center;
width: 33px;
height: 33px;
padding: 0;
border: 0;
background: none;
color: var(--tg-ink);
cursor: pointer;
}
.tg-mk__picker-close svg {
width: 33px;
height: 33px;
}
.tg-mk__picker-search {
display: flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 16px;
border: 1px solid var(--tg-border);
border-radius: 10px;
color: var(--tg-muted);
}
.tg-mk__picker-search svg {
flex: 0 0 17px;
width: 17px;
height: 17px;
}
.tg-mk__picker-search input {
flex: 1;
border: 0;
background: none;
color: var(--tg-ink);
font: inherit;
font-size: 14px;
outline: none;
}
.tg-mk .tg-mk__popular h3,
.tg-mk .tg-mk__all-dest h3 {
margin: 22px 0 12px !important;
font-size: 17px !important;
font-weight: 600 !important;
}
.tg-mk__popular ul {
display: flex;
flex-wrap: wrap;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.tg-mk__popular li {
width: 226px;
}
.tg-mk__popular a {
position: relative;
display: block;
height: 349px;
border-radius: 14px;
overflow: hidden;
}
.tg-mk__popular img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.tg-mk__popular a::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 55%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
}
.tg-mk__popular span {
position: absolute;
left: 14px;
bottom: 12px;
z-index: 1;
color: #fff;
font-size: 18px;
font-weight: 600;
}
/* Region tabs: underline marks the active one, as in the design. */
.tg-mk__regions {
display: flex;
gap: 26px;
margin: 0 0 20px;
padding: 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.tg-mk__regions::-webkit-scrollbar {
display: none;
}
.tg-mk .tg-mk__region {
padding: 0 0 10px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--tg-muted);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
}
.tg-mk .tg-mk__region.is-active {
border-bottom-color: var(--tg-primary) !important;
color: var(--tg-primary);
font-weight: 600;
}
.tg-mk__provinces {
display: none;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.tg-mk__provinces.is-active {
display: flex;
}
.tg-mk__province {
display: inline-block;
padding: 8px 15px;
border: 1px solid var(--tg-border);
border-radius: 999px;
color: var(--tg-primary);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.tg-mk__picker-empty {
margin: 8px 0 0;
color: var(--tg-muted);
font-size: 14px;
}
/* "See more" is a button now that it opens the picker; keep it looking like
the link the design shows. */
.tg-mk .tg-mk__seemore {
padding: 0;
border: 0;
background: none !important;
color: #fff !important;
font-family: inherit;
font-size: 16px !important;
font-weight: 400 !important;
text-decoration: underline !important;
cursor: pointer;
}
@media (max-width: 1024px) {
.tg-mk__popular ul {
grid-template-columns: repeat(2, 1fr);
}
.tg-mk__picker {
padding: 20px 18px 24px;
}
}
/* Filter swap: dim the grid while the new page is in flight. */
.tg-mk__grid.is-loading {
opacity: .55;
}
/* Inputs: the theme styles raw with its own border, radius and
padding, which renders as a box inside our search field. */
.tg-mk input[type="search"],
.tg-mk input[type="text"] {
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: var(--tg-ink) !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1 !important;
outline: none !important;
-webkit-appearance: none;
appearance: none;
}
.tg-mk input::placeholder {
color: var(--tg-placeholder);
opacity: 1;
}
.tg-mk input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
/* Focus lands on the field, not the bare input. */
.tg-mk__search:focus-within,
.tg-mk__picker-search:focus-within {
box-shadow: 0 0 0 3px rgba(38, 82, 207, .22);
}
/* Carousel arrows: the theme stretches buttons and recolours their strokes,
so size, shape and colour are all re-asserted. Translucent white circle
with a white chevron, as in the design. */
.tg-mk .tg-mk__arrow {
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
margin-top: -20px;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .1) !important;
color: #fff !important;
line-height: 0;
}
.tg-mk .tg-mk__arrow svg {
width: 20px;
height: 20px;
/* Solid glyphs from the design, not stroked chevrons. */
fill: currentColor !important;
stroke: none !important;
}
/* --- Loading states ------------------------------------------------------
Two shapes: a filter swap replaces the whole grid, so the section shows a
centred loader over dimmed cards; infinite scroll appends, so only the
button spins. Animations are declared !important because the site zeroes
durations globally (see the note on the carousel).
------------------------------------------------------------------------- */
.tg-mk__grid-wrap {
position: relative;
}
.tg-mk__loader {
position: absolute;
top: 120px;
left: 50%;
z-index: 3;
display: none;
gap: 8px;
transform: translateX(-50%);
}
.tg-mk__grid-wrap.is-loading .tg-mk__loader {
display: flex;
}
.tg-mk__loader span {
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--tg-primary);
animation: tg-mk-bounce 1s infinite ease-in-out !important;
}
.tg-mk__loader span:nth-child(2) { animation-delay: .15s !important; }
.tg-mk__loader span:nth-child(3) { animation-delay: .3s !important; }
@keyframes tg-mk-bounce {
0%, 80%, 100% { transform: scale(.5); opacity: .45; }
40% { transform: scale(1); opacity: 1; }
}
/* Skeletons carry the loading state now, so the grid is not dimmed. */
.tg-mk__grid-wrap.is-loading .tg-mk__grid {
pointer-events: none;
}
.tg-mk__grid-wrap.is-loading .tg-mk__loader {
display: none;
}
/* Infinite scroll: the button becomes the spinner. */
.tg-mk__spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: tg-mk-spin .7s linear infinite !important;
}
.tg-mk__showmore.is-loading .tg-mk__spinner {
display: block;
}
.tg-mk__showmore.is-loading .tg-mk__showmore-arrow {
display: none;
}
@keyframes tg-mk-spin {
to { transform: rotate(360deg); }
}
@keyframes tg-mk-sheet-up {
from { transform: translateY(45%); opacity: .4; }
to { transform: none; opacity: 1; }
}
@keyframes tg-mk-sheet-down {
to { transform: translateY(70%); opacity: 0; }
}
@keyframes tg-mk-backdrop-in {
from { opacity: 0; }
}
@keyframes tg-mk-backdrop-out {
to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.tg-mk__loader span,
.tg-mk__spinner,
.tg-mk__dialog[open],
.tg-mk__picker[open],
.tg-mk__dialog.is-closing,
.tg-mk__picker.is-closing {
animation: none !important;
}
}
/* The picker's close control: the theme tints bare buttons, so the X keeps
the ink colour explicitly. */
.tg-mk .tg-mk__picker-close {
/* The theme pads and stretches bare buttons (it measured 65px wide),
which shoved the glyph off the head's right edge. */
width: 33px !important;
min-width: 33px !important;
height: 33px !important;
padding: 0 !important;
color: var(--tg-ink) !important;
background: none !important;
}
.tg-mk .tg-mk__picker-close svg {
/* Solid glyph from the design, not a stroked cross. */
fill: currentColor !important;
stroke: none !important;
}
/* --- No hover states -----------------------------------------------------
The theme styles a:hover / button:hover globally — region tabs turned white
on transparent (invisible under the cursor) and chips shifted to #333366.
The design has no hover treatment, so each control restates its own resting
colour here. These rules exist to CANCEL hover, not to add one.
------------------------------------------------------------------------- */
.tg-mk .tg-mk__region:hover {
color: var(--tg-muted) !important;
background: none !important;
}
.tg-mk .tg-mk__region.is-active:hover {
color: var(--tg-primary) !important;
}
.tg-mk .tg-mk__chip:hover,
.tg-mk .tg-mk__province:hover,
.tg-mk .tg-mk__cat:hover,
.tg-mk .tg-mk__showmore:hover {
color: var(--tg-primary) !important;
background: #fff !important;
}
.tg-mk .tg-mk__chip.is-active:hover,
.tg-mk .tg-mk__cat.is-active:hover {
color: #fff !important;
background: var(--tg-primary) !important;
}
.tg-mk .tg-mk__cta:hover {
color: #fff !important;
background: var(--tg-primary) !important;
}
.tg-mk .tg-mk__seemore:hover,
.tg-mk .tg-mk__dest a:hover .tg-mk__dest-name,
.tg-mk .tg-mk__popular a:hover span {
color: #fff !important;
}
.tg-mk .tg-mk__title:hover,
.tg-mk .tg-mk__price:hover b {
color: var(--tg-ink) !important;
}
/* The CTA became a button (it opens the price dialog), so it needs its fill
restored against the blanket button armour above. */
.tg-mk button.tg-mk__cta {
width: 100%;
height: 34.92px;
padding: 0 !important;
border-radius: 400px !important;
background: var(--tg-primary) !important;
color: #fff !important;
font-size: 15.24px !important;
font-weight: 600 !important;
line-height: 19.2px !important;
cursor: pointer;
font-family: inherit;
}
/* The rating and the price sit in , which the browser and theme render at
700. The design uses 400 and 500 respectively. */
.tg-mk .tg-mk__meta b {
font-weight: 400 !important;
}
.tg-mk .tg-mk__price b {
font-weight: 500 !important;
}
/* Card description chevron: #0066CC at 0.74 stroke per Dev Mode. The theme
tints bare buttons, so the colour is restated. */
.tg-mk .tg-mk__more {
color: #0066cc !important;
}
.tg-mk .tg-mk__more svg {
stroke: currentColor !important;
stroke-width: 1.4;
}
/* Nothing to scroll (few destinations): Swiper locks the rail, so the arrows
are hidden rather than left as dead controls. */
.tg-mk__swiper.swiper-lock-hidden ~ .tg-mk__arrow,
.tg-mk__carousel:has(.swiper-lock-hidden) .tg-mk__arrow {
display: none;
}
/* Price dialog close: the theme stretched the bare button into a bordered
oval and swallowed the glyph. Size, shape and colour are all re-asserted. */
.tg-mk .tg-mk__dialog-close,
.tg-mk__dialog .tg-mk__dialog-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
display: grid !important;
place-items: center;
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 2px 8px rgba(8, 14, 36, .25) !important;
color: var(--tg-ink) !important;
cursor: pointer;
line-height: 0;
}
.tg-mk__dialog .tg-mk__dialog-close svg {
width: 17px;
height: 17px;
stroke: currentColor !important;
fill: none !important;
}
/* --- Card gallery slider ------------------------------------------------- */
.tg-mk__gallery {
width: 100%;
overflow: hidden;
}
.tg-mk__gallery .swiper-slide {
width: 100%;
line-height: 0;
}
/* Without this the browser's native image drag starts instead of the swipe,
so the gallery never moves under the pointer. */
.tg-mk__gallery img {
-webkit-user-drag: none;
user-select: none;
}
/* The media box is a slider now, not a button — keep the pointer affordance
and stop the browser drawing a focus ring on the wrapper. */
.tg-mk__media {
position: relative;
display: block;
width: 100%;
cursor: pointer;
line-height: 0;
}
.tg-mk__media:focus {
outline: none;
}
/* Search focus: a border tint rather than a glow, matching the design. */
.tg-mk__search:focus-within,
.tg-mk__picker-search:focus-within {
border-color: var(--tg-primary);
box-shadow: none;
}
/* Skeleton card: 414.7 x 430, radius 20, #EDF0FF — straight from the Figma
"Loading" frame. The pulse is mine: a static block gives no sign that
anything is happening. */
.tg-mk__skeleton {
height: 430px;
border-radius: 20px;
/* Base fill is the Figma value; the lighter band sweeping across it is the
loading cue. Pure CSS — a gradient wider than the card, animated by
background-position, so there is no image and no extra element. */
background-color: rgba(237, 240, 255, .82);
background-image: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, .75) 48%,
rgba(255, 255, 255, 0) 76%
);
background-repeat: no-repeat;
background-size: 220% 100%;
animation: tg-mk-shimmer 1.6s linear infinite !important;
}
@keyframes tg-mk-shimmer {
from { background-position: -120% 0; }
to { background-position: 220% 0; }
}
@media (prefers-reduced-motion: reduce) {
.tg-mk__skeleton {
animation: none !important;
}
}
/* Empty state, per the Figma "Empty" frame. */
.tg-mk__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: var(--tg-max);
margin: 0 auto;
padding: 150px 0;
text-align: center;
}
.tg-mk__empty-art {
width: 240px;
height: 240px;
object-fit: contain;
}
.tg-mk .tg-mk__empty p {
margin: 0;
color: var(--tg-primary);
font-size: 20px;
font-weight: 600;
line-height: 20px;
}
/* Hover zoom on the category tiles. Not from Figma — the file has no hover
variant — so this is deliberately restrained: the icon and label scale, the
colours do not move. */
.tg-mk .tg-mk__cat svg,
.tg-mk .tg-mk__cat span {
transition: transform .22s cubic-bezier(.34, 1.4, .64, 1) !important;
}
.tg-mk .tg-mk__cat:hover svg,
.tg-mk .tg-mk__cat:focus-visible svg {
transform: scale(1.25);
}
.tg-mk .tg-mk__cat:hover span,
.tg-mk .tg-mk__cat:focus-visible span {
transform: scale(1.1);
}
/* The easing runs for everyone, including under prefers-reduced-motion — a
requested exception. Durations are re-asserted !important because the site
zeroes every transition globally; a plain declaration here would snap. */
.tg-mk .tg-mk__cat svg,
.tg-mk .tg-mk__cat span {
transition-property: transform !important;
transition-duration: .22s !important;
transition-timing-function: cubic-bezier(.34, 1.4, .64, 1) !important;
}
.tg-mk .tg-mk__cat {
transition-property: border-color !important;
transition-duration: .22s !important;
transition-timing-function: ease !important;
}
/* Border picks up the brand colour on hover. This sits after the hover-cancel
armour above, which resets colour and background but leaves the border. */
.tg-mk .tg-mk__cat:hover,
.tg-mk .tg-mk__cat:focus-visible {
border-color: var(--tg-primary) !important;
}
/* --- Enter / leave --------------------------------------------------------
Cards and skeletons fade in as they arrive, and the outgoing set fades out
before it is replaced, so a filter change reads as a cross-fade rather than
a flash.
------------------------------------------------------------------------- */
@keyframes tg-mk-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes tg-mk-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
.tg-mk__card {
animation: tg-mk-fade-in .34s ease both !important;
}
.tg-mk__skeleton {
animation:
tg-mk-shimmer 1.6s linear infinite,
tg-mk-fade-in .24s ease both !important;
}
.tg-mk__grid.is-leaving {
animation: tg-mk-fade-out .16s ease both !important;
}
@media (prefers-reduced-motion: reduce) {
.tg-mk__card,
.tg-mk__grid.is-leaving {
animation: none !important;
}
}
/* Slides must stay square; the clipping is the container's job. */
.tg-mk__gallery .tg-mk__img,
.tg-mk__media .tg-mk__img {
border-radius: 0 !important;
}
/* --- Header, on marketplace pages only -----------------------------------
The Elementor header is a site-wide template, so every rule here is scoped
to the body class the shortcode adds. Nothing changes on any other page.
White only applies while the header is transparent over the hero. Once it
sticks it gains .elementor-sticky--effects and a solid background, where
white text would be invisible — hence the :not().
------------------------------------------------------------------------- */
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .elementor-item,
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .wpml-ls-item-toggle .wpml-ls-native,
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .elementor-heading-title {
color: #fff !important;
}
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .elementor-item.elementor-item-active,
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .elementor-item:hover,
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .elementor-item:focus {
color: #fff !important;
}
/* Elementor draws the hover/active underline with a pseudo-element, not a
border — colouring border-color had no effect. */
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .elementor-item::before,
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .elementor-item::after {
background-color: #fff !important;
border-color: #fff !important;
}
/* --- Language switcher ---------------------------------------------------
The toggle sits on the photo, so it goes white; the dropdown is a panel on
its own background and keeps dark text so it stays readable.
------------------------------------------------------------------------- */
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) .wpml-ls-item-toggle .wpml-ls-native {
color: #fff !important;
}
body.tg-mk-page .elementor-location-header .wpml-ls-sub-menu {
min-width: 92px;
margin-top: 6px;
padding: 4px;
border: 0 !important;
border-radius: 10px;
background: #fff;
box-shadow: 0 8px 24px rgba(8, 14, 36, .18);
overflow: hidden;
}
body.tg-mk-page .elementor-location-header .wpml-ls-sub-menu a {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border: 0 !important;
border-radius: 7px;
color: var(--tg-ink, #101828) !important;
font-size: 14px;
line-height: 1.2;
}
body.tg-mk-page .elementor-location-header .wpml-ls-sub-menu a:hover {
background: #f1f4fb;
}
body.tg-mk-page .elementor-location-header .wpml-ls-sub-menu .wpml-ls-native {
color: var(--tg-ink, #101828) !important;
}
body.tg-mk-page .elementor-location-header .wpml-ls-flag {
width: 18px;
height: 12px;
flex: 0 0 18px;
}
/* The logo artwork is dark navy; inverting avoids needing a second asset.
Reverted once the header sticks and turns solid. */
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) img[src*="thaigo-logo" i],
body.tg-mk-page .elementor-location-header .elementor-sticky:not(.elementor-sticky--effects) img[src*="Thai-Go-Logo"] {
filter: brightness(0) invert(1);
}
/* No right-hand CTA in the design. The button itself carries
`display: inline-flex !important` from a 4-class Unlimited Elements rule,
so the widget wrapper is hidden instead — an ancestor at display:none wins
regardless of what the child declares. */
body.tg-mk-page .elementor-location-header .elementor-widget-ucaddon_bokun_booking_button,
body.tg-mk-page .elementor-location-header .elementor-widget[class*="bokun"] {
display: none !important;
}
/* ==========================================================================
Mobile overrides live at the end of the file on purpose: several armour
rules above share their specificity, so anything earlier loses the cascade.
========================================================================== */
@media (max-width: 1024px) {
/* --- Mobile, from the 390px Figma frame ------------------------------
Content column is 350px inside a 390px screen (16 left / 24 right),
so everything below is expressed against that band rather than the
desktop's fixed pixel widths.
-------------------------------------------------------------------- */
.tg-mk {
--tg-max: 100%;
--tg-max-filters: 100%;
/* The theme header is fixed and 100px tall on mobile, overlaying the
hero — without clearance the heading sits under the logo and the
hamburger. */
--tg-header-clear: 74px;
}
/* Figma container padding is 0/24/12/16 — asymmetric, which is what makes
the content band 350 rather than 358. */
.tg-mk__hero {
min-height: 0;
/* No side padding: the head and search pad themselves, so the
carousel bleeds edge to edge. Top keeps the header clearance; the
deep bottom is what the floating category panel overlaps into,
leaving clear air between it and the search pill. */
padding: calc(20px + var(--tg-header-clear)) 0 120px;
/* The white fade starts far earlier than on desktop: the category
panel floats 100px up into the hero, so the photo has to have
melted to white behind it — desktop's last-10% fade left a hard
dark edge cutting across the panel. Veil and photo unchanged. */
/* A long white ramp with ease-curve stops — straight two-stop ramps
left a visible slope-change line. The indigo veil thins across the
same zone so the white never blends over full-strength indigo. */
background-image:
linear-gradient(180deg,
rgba(255, 255, 255, 0) 56%,
rgba(255, 255, 255, .08) 65%,
rgba(255, 255, 255, .24) 72%,
rgba(255, 255, 255, .48) 79%,
rgba(255, 255, 255, .72) 85%,
rgba(255, 255, 255, .90) 90%,
rgba(255, 255, 255, .98) 94%,
#fff 97%),
linear-gradient(180deg,
rgba(24, 40, 104, .80) 0%,
rgba(54, 70, 126, .56) 32%,
rgba(48, 62, 118, .58) 48%,
rgba(14, 20, 54, .78) 62%,
rgba(16, 24, 58, .60) 74%,
rgba(18, 26, 62, .32) 84%,
rgba(20, 28, 66, .12) 91%,
rgba(20, 28, 66, 0) 96%),
var(--tg-hero-bg);
}
/* Figma stacks the hero head on mobile: 350x50 with an 8px gap, heading
above and "See more" beneath, both left-aligned. */
.tg-mk__hero-head {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 8px;
max-width: 100%;
/* The hero has no side padding on mobile; children pad themselves.
Figma's container is 16 left / 24 right. */
padding: 0 24px 0 16px;
margin-bottom: 16px;
}
/* Heading 20/28, "See more" 14/17.1. */
.tg-mk .tg-mk__hero-head h1 {
font-size: 20px !important;
line-height: 28px !important;
}
.tg-mk .tg-mk__seemore {
position: static;
font-size: 14px !important;
}
/* Rail: focused card 200x150, the rest 100x150, 10px gaps, radius 12.
No side padding here — the arrows are hidden on mobile, so the cards
get the full width instead. */
.tg-mk__carousel {
max-width: 100%;
padding: 0;
}
/* Proportional, not fixed: the design's 200/100 cards are 57%/28.6% of the
350px rail. Hard pixels only look right at exactly 390px wide and shrink
away on a 430 or 480 screen. */
.tg-mk__dest,
.tg-mk__track > .tg-mk__dest {
/* Figma: 100x150 — a true 2:3 at every width. Capped at 150 wide so
tablets show more cards instead of blowing two up to fill the rail. */
width: min(28.6%, 150px);
height: auto;
aspect-ratio: 2 / 3;
}
/* 57.1 / 28.6 of the rail: the card is 199.6% of its slide and the cards
to its right step aside by the 99.6% it gains. */
.tg-mk__dest.is-focus a {
width: 199.6%;
}
.tg-mk__dest.is-focus ~ .tg-mk__dest {
transform: translateX(99.6%);
}
.tg-mk__dest a {
border-radius: 12px;
}
.tg-mk__dest-name {
left: 10px;
bottom: 9px;
/* Figma: 12/14.6 at 390, scaling up on tablet. */
font-size: clamp(12px, 3.1vw, 16px);
line-height: 1.22;
}
.tg-mk__dest.is-focus .tg-mk__dest-name {
left: 10px;
bottom: 32px;
/* Figma: 20/24.4 at 390. */
font-size: clamp(20px, 5.1vw, 27px);
line-height: 1.22;
}
.tg-mk__dest-tags {
left: 10px;
right: 10px;
bottom: 9px;
gap: 4px;
}
.tg-mk__dest-tags li {
padding: 2px 7px;
font-size: 9px;
}
/* Arrows have nowhere to sit on a 390px screen. !important because the
armour rules further down the file are more specific, and their
left: -64px was pushing the page 48px wider than the viewport. */
.tg-mk .tg-mk__arrow,
.tg-mk__arrow {
display: none !important;
}
/* Nothing may stick out sideways: the hero rail and the full-bleed
sections are the usual culprits on a narrow screen. */
/* Not on .tg-mk itself: as widgets, each section has its own .tg-mk
wrapper, and overflow there clipped the category panel's -100px pull
up into the hero. Clipping the sections is enough. */
.tg-mk__hero,
.tg-mk__cats,
.tg-mk__interests,
.tg-mk__grid-wrap {
max-width: 100vw;
overflow-x: hidden;
}
.tg-mk {
max-width: 100vw;
}
/* Search: the 390 frame's 350x40 pill, scaled with the viewport up to
the breakpoint. */
.tg-mk__search {
max-width: calc(100% - 40px);
height: clamp(40px, 8.7vw, 46px);
margin: 16px 24px 0 16px;
padding: 8px 12px;
border-radius: 400px;
gap: 14px;
}
/* 16px minimum, not the design's 14 — iOS Safari zooms the page when a
focused input's font is below 16px, and that jolt is worse than the
2px difference. */
.tg-mk .tg-mk__search input,
.tg-mk .tg-mk__picker-search input {
font-size: clamp(16px, 3.6vw, 19px) !important;
}
.tg-mk__search svg {
flex-basis: clamp(18px, 4.6vw, 25px);
width: clamp(18px, 4.6vw, 25px);
height: clamp(18px, 4.6vw, 25px);
}
/* Mobile categories are one white panel floating over the hero, with the
tiles inside it — not eight separately bordered tiles on a white band. */
.tg-mk__cats {
position: relative;
z-index: 2;
margin-top: -100px;
padding: 0 20px 10px;
background: transparent;
}
.tg-mk__cat-list {
justify-content: flex-start;
gap: 6px;
padding: 5px;
border-radius: 8px;
background: #fff;
box-shadow: 0 3px 5px rgba(8, 14, 23, .12);
overflow-x: auto;
scrollbar-width: none;
}
.tg-mk__cat-list::-webkit-scrollbar {
display: none;
}
/* Cards that sit before the focused one (they only ever peek a few px
into the 16px inset) fade out instead of showing a clipped edge. */
.tg-mk__swiper:not(.is-static) .tg-mk__dest:not(.is-focus):not(.is-focus ~ .tg-mk__dest) {
opacity: 0;
transition: opacity .3s ease !important;
}
/* Six tiles fill the panel; the rest scroll in from the right. The list
items are the flex children, so the sizing goes on them. */
.tg-mk__cat-list li {
flex: 0 0 calc((100% - 30px) / 6);
}
.tg-mk .tg-mk__cat {
gap: 6px;
width: 100%;
/* Figma: 52x45 tiles, radius 6, 8px labels. */
height: clamp(45px, 11.5vw, 56px);
border: 0 !important;
border-radius: 6px;
background: transparent !important;
font-size: clamp(8px, 2.05vw, 11px) !important;
line-height: 1.1 !important;
}
.tg-mk .tg-mk__cat.is-active {
background: var(--tg-primary) !important;
color: #fff !important;
}
.tg-mk__cat svg {
width: clamp(18px, 4.6vw, 24px);
height: clamp(18px, 4.6vw, 24px);
}
/* Interests: the heading sits on its own line and the chip row scrolls
beneath it, per the mobile design. */
/* The chip row bleeds edge to edge and scrolls under the screen sides;
its own padding gives the first and last chip their 20px inset.
Positioned like the category panel: the hero above is positioned and
was painting its bottom fade over this static section, which is what
swallowed the heading. */
.tg-mk__interests {
position: relative;
z-index: 2;
padding: 6px 0 12px;
}
.tg-mk__interests-label {
margin-left: 20px;
}
.tg-mk__chips {
padding: 0 20px;
}
.tg-mk__interests-inner {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.tg-mk__interests-label {
/* Figma: 12/19.1 bold at 390. */
font-size: clamp(12px, 3.1vw, 16px);
font-weight: 700;
line-height: 1.6;
}
/* No divider bar or chevron after the label — the design has neither. */
.tg-mk__interests-label::after,
.tg-mk__interests-label svg {
display: none;
}
.tg-mk__chips {
flex-wrap: nowrap;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.tg-mk__chips::-webkit-scrollbar {
display: none;
}
.tg-mk__chip {
flex: 0 0 auto;
/* Figma: 24-tall pills, 12/17 text at 390. */
font-size: clamp(12px, 3.1vw, 15px);
line-height: 1.42;
padding: 3.5px 12px;
}
/* Grid: two columns, 12px gutter, 12px side padding. */
.tg-mk__grid-wrap {
padding: 20px 15px;
}
/* ponytail: 3-up stays until phone width; 2-up only under 640px. */
.tg-mk__grid {
gap: 12px;
}
@media (max-width: 640px) {
.tg-mk__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.tg-mk__card {
border-radius: 12px;
}
.tg-mk__body {
padding: 6.8px;
gap: 4px;
}
/* Figma: 177x100 image crop on the mobile card. */
.tg-mk__card .tg-mk__img {
aspect-ratio: 177 / 100;
}
.tg-mk .tg-mk__title {
font-size: clamp(14px, 3.6vw, 17px) !important;
font-weight: 500 !important;
line-height: 1.43 !important;
margin-bottom: 0 !important;
}
/* One quiet line, like the design — it was wrapping into a cramped
two-column stack. */
.tg-mk__meta {
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Figma: 10px rating row at 390. */
font-size: clamp(10px, 2.6vw, 12px);
line-height: 1.2;
gap: 2px;
}
/* The mobile card shows image, title, rating, usual price, price and the
button — no description paragraph, no chevron. */
.tg-mk__desc,
.tg-mk__row,
.tg-mk__more {
display: none !important;
}
.tg-mk__usual {
margin-top: 6px;
font-size: clamp(11px, 2.8vw, 12px);
line-height: 1.2;
}
/* Price on its own line, the via/provider chip beneath it — inline they
squeezed each other and the provider name clipped mid-word. */
.tg-mk__price {
flex-wrap: wrap;
row-gap: 4px;
margin-top: 8px;
}
.tg-mk__price b {
flex: 0 0 100%;
/* Figma: 16px price at 390. */
font-size: clamp(16px, 4.1vw, 20px);
line-height: 1.15;
}
.tg-mk__via {
font-size: 12px;
}
/* Figma provider chip: 16 tall, r3.5, 12px logo, 8px text. */
.tg-mk__provider {
font-size: 8px;
padding: 2px 3px;
border-radius: 4px;
}
.tg-mk__cta,
.tg-mk .tg-mk__cta {
margin-top: 10px;
}
.tg-mk__provider-logo {
width: 12px;
height: 12px;
border-radius: 2px;
}
/* CTA: 32 tall, radius 20, label 12/19.2. margin-top:auto pins it to the
bottom of the card, so buttons line up across a row even when one title
wraps to two lines. On desktop the description row already does this. */
.tg-mk__cta,
.tg-mk button.tg-mk__cta {
height: 32px;
margin-top: auto;
flex-shrink: 0;
border-radius: 20px !important;
font-size: 12px !important;
line-height: 19.2px !important;
}
/* Show more: 116x30, radius 32, 4/12 padding. */
.tg-mk .tg-mk__showmore {
height: 30px;
padding: 4px 12px;
border-radius: 32px !important;
font-size: 12px !important;
line-height: 19.2px !important;
}
.tg-mk__showmore svg {
width: 16px;
height: 16px;
}
.tg-mk__skeleton {
height: 232px;
}
/* Dialog and picker present as bottom sheets: full width, pinned to the
bottom edge, rounded on top only.