/* =========================================================
Partners marquee
========================================================= */
/* Continuous-scroll partner strip (auto-loops via an animated marquee).
.partners-track is the real content list PLUS one aria-hidden duplicate
of the same list back to back — animating it -50% on the X axis (its own
doubled width) loops seamlessly with no jump/reset. Pause-on-hover so a
name is easy to read; math only works if both halves stay identical, so
add/remove a partner in BOTH copies.
.partners-marquee sits OUTSIDE .container (a sibling, not a child — see
the markup) so it isn't width-limited by default, unlike everything else
on the page. That's fine up to a point, but the "-50%" loop technique
only ever has (list width) of real distance to travel before it must
already be back at a duplicate-content position — i.e. it's only gap-free
as long as the VISIBLE window (.partners-marquee's own width) stays
smaller than half the doubled track. With only 6 real logos (~1300px
list, ~2620px doubled), any viewport/window wider than ~1300px lets the
window outrun the content and show blank space for part of each cycle —
invisible on a normal laptop screen, but visible on a wide monitor.
Capping this to var(--container-width) (max
1200-ish) keeps the window comfortably under that ~1300px ceiling
regardless of how wide the actual screen is. */
.partners-marquee {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners-track {
display: flex;
width: max-content;
gap: 20px;
animation: partners-scroll 32s linear infinite;
}
.partners-marquee:hover .partners-track {
animation-play-state: paused;
}
@keyframes partners-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.partner-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 76px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text-light);
font-weight: 600;
font-size: 0.85rem;
text-align: center;
padding: 0 16px;
background: var(--color-bg);
filter: grayscale(1);
opacity: 0.75;
transition: opacity 0.15s ease, filter 0.15s ease;
}
@media (max-width: 900px) {
.partner-logo {
width: 160px;
}
}
@media (max-width: 782px) {
.partner-logo {
width: 140px;
height: 64px;
font-size: 0.75rem;
}
}
/* Real logo image once a placeholder Name
is
swapped for — box only sets
height above, so without this the image would render at its native pixel
size and overflow the 76px tile. */
.partner-logo img {
max-width: 100%;
max-height: 40px;
object-fit: contain;
}
.partner-logo:hover {
filter: grayscale(0);
opacity: 1;
}
/* A viewer who asks for reduced motion gets a static, scrollable strip
instead of the auto-playing loop. overflow-x:auto belongs on
.partners-marquee (the element that's actually narrower than its
content) rather than .partners-track (whose own width:max-content means
its box always equals its content's size — there's nothing for IT to
scroll). The aria-hidden duplicate tiles (only there to make the animated
loop seamless) are hidden so a manual swipe doesn't show the same 6
logos twice. */
@media (prefers-reduced-motion: reduce) {
.partners-marquee {
overflow-x: auto;
}
.partners-track {
animation: none;
}
@media (max-width: 782px) {
.partners-track {
gap: 12px;
}
}
.partner-logo[aria-hidden="true"] {
display: none;
}
}
/* =========================================================
Home sections
========================================================= */
/* Homepage Cẩm Nang teaser (`[knt_cam_nang_teaser limit="3"]`, section
id="guide" — NOT "guide-latest", a different section on cam-nang.html)
can't rely on the base .post-grid's `auto-fit` above, which picks its
own column count purely from container width, independent of how many
items actually exist. With exactly 3 posts, a mid-width viewport (narrow
enough to fit only 2 of the 260-360px columns, but not yet at the mobile
breakpoint) would auto-fit to 2 columns, orphaning the 3rd card alone on
a new row with an empty gap beside it. Fixed the same way as
`#guide-latest` above: a real fixed-count grid, with its own matching
breakpoints below (900px/480px) instead of leaving it to `auto-fit`. */
#guide .post-grid {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
/* Superseded — #guide .post-grid is now a swipeable
horizontal row instead (see the later @media 900px block, near
.guide-teaser-layout, which sets display:flex + gap etc.; that rule
comes later in the file so it wins the cascade over this one's
grid-template-columns). Left here rather than deleted, same
dead-code convention as elsewhere in this file — do not treat this
1-column rule as what #guide .post-grid actually looks like now. */
#guide .post-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
/* Swipeable horizontal row instead of a single stacked column — same
full-bleed + scroll-padding technique as
ul.products.products-scroll/.discover-grid/.travel-style-grid above,
EXCEPT the card size itself is untouched — one post fills the same
width it always had (the old single-column stack's full container
width), not shrunk to fit 2-up like the product rows, since a
smaller card reads as too cramped for a post card's amount of text.
See ul.products.products-scroll's big comment (main.css, ≤900px
block) for the full reasoning behind full-bleed + scroll-padding. */
#guide .post-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 20px;
padding-bottom: 4px;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
scroll-padding-left: 20px;
scroll-padding-right: 20px;
}
}
/* The shortcode fetches 5 posts, but this grid is a fixed 3-column layout
on desktop — showing all 5 would orphan 2 cards on their own row with an
empty gap beside them. Cap the desktop GRID to the first 3; the 4th/5th
only exist for the ≤900px swipeable row below, which un-hides them again. */
#guide .post-grid .post-card:nth-child(n+4) {
display: none;
}
@media (max-width: 900px) {
/* Un-hides the 4th/5th post again — the desktop-only nth-child(n+4)
cap above (main.css, near #guide .post-grid's own definition) is
what limits the fixed 3-column GRID to 3 cards; this swipeable row
has no such column-count constraint, so all 5 fetched posts should
show here. */
#guide .post-grid .post-card:nth-child(n+4) {
display: block;
}
}
/* =========================================================
Popular destinations grid
========================================================= */
/* =========================================================
Flash sale / deals carousel row
========================================================= */
/* =========================================================
Testimonials
========================================================= */
/* =========================================================
App download banner
========================================================= */
/* =========================================================
Newsletter signup
========================================================= */
/* =========================================================
Hero with photo background (replaces the flat-color .hero
on pages/sections that opt into it via .hero-photo)
========================================================= */
.hero-photo {
position: relative;
min-height: 560px;
color: #fff;
overflow: hidden;
background-color: var(--color-primary-dark);
}
@media (max-width: 782px) {
.hero-photo {
min-height: auto;
}
}
.hero-photo-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 0;
}
/* Multi-image hero carousel — a SEPARATE modifier class, not a
change to the shared .hero-photo-bg rule above, since that class is also
used for plain single-image sections elsewhere (.travel-style/.journey
backgrounds) that must keep rendering at opacity:1 with no JS involved.
Stacks every slide (already absolutely positioned, full-bleed, from the
base rule above) and crossfades via opacity — main.js's hero-carousel
block toggles .is-active every data-hero-interval ms. */
.hero-photo-bg--slide {
opacity: 0;
transition: opacity 1.2s ease;
}
.hero-photo-bg--slide.is-active {
opacity: 1;
z-index: 1;
}
.hero-photo::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(9, 20, 23, 0.8) 0%, rgba(9, 20, 23, 0.4) 55%, rgba(9, 20, 23, 0.1) 100%);
z-index: 1;
}
.hero-photo-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 560px;
width: 100%;
padding-top: 70px;
padding-bottom: 60px;
box-sizing: border-box;
}
@media (max-width: 782px) {
.hero-photo-inner {
min-height: auto;
padding-top: 40px;
padding-bottom: 30px;
}
}
.hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
font-weight: 700;
color: #ffd699;
margin-bottom: 14px;
}
@media (max-width: 782px) {
.hero-eyebrow {
font-size: 0.6875rem;
}
}
.hero-photo-title {
margin: 0 0 8px;
font-size: clamp(2rem, 4.2vw, 3.4rem);
letter-spacing: -0.03em;
color: #fff;
max-width: 700px;
}
@media (max-width: 782px) {
/* Mobile type scale — none of these had any mobile-specific reduction
at all; .hero-photo-title only had a clamp() floor that never
actually got small on a phone (clamp(2rem, 4.2vw, 3.4rem)'s
2rem/32px minimum is bigger than 4.2vw already below ~760px, so the
floor is what phones were always seeing) — a desktop-authored
clamp()/fixed rem doesn't automatically scale down to real mobile
sizes. Covers the homepage hero
+ section headers, the shop listing pages' hero, and the product/
detail pages'