/* BARAMA_POPULAR_LOCATION_MARQUEE_V1125 */ /* Theme-aware premium location cards. Keeps the accepted v1.1.24 marquee geometry/motion. */ .homepage-location-marquee { overflow: hidden; } .homepage-location-marquee .section-heading-row { margin-bottom: 1.5rem; } .popular-location-marquee { --barama-location-card-width: clamp(9.5rem, 12vw, 11.75rem); --barama-location-card-height: clamp(10rem, 13vw, 11.75rem); --barama-location-gap: clamp(.75rem, 1.25vw, 1rem); display: grid; gap: var(--barama-location-gap); width: 100%; overflow: hidden; } .popular-location-marquee__row { min-width: 0; } .popular-location-marquee__viewport { position: relative; width: 100%; overflow: hidden; padding: .15rem 0 .35rem; mask-image: linear-gradient(to right, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%); } .popular-location-marquee__track { display: flex; align-items: stretch; gap: var(--barama-location-gap); width: max-content; will-change: transform; animation: barama-location-marquee-left 42s linear infinite; } .popular-location-marquee__row--reverse .popular-location-marquee__track { animation-name: barama-location-marquee-right; } .popular-location-marquee__row:hover .popular-location-marquee__track, .popular-location-marquee__row:focus-within .popular-location-marquee__track { animation-play-state: paused; } .popular-location-marquee__set { display: flex; gap: var(--barama-location-gap); flex: 0 0 auto; } .popular-location-card { position: relative; display: flex; flex: 0 0 var(--barama-location-card-width); width: var(--barama-location-card-width); height: var(--barama-location-card-height); flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.15rem 1rem; border: 1px solid color-mix(in srgb, var(--barama-border) 88%, transparent); border-radius: 1.35rem; background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--barama-primary) 10%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--barama-surface) 98%, #ffffff 2%), color-mix(in srgb, var(--barama-surface) 94%, var(--barama-surface-soft) 6%)); box-shadow: 0 .9rem 2.4rem color-mix(in srgb, #0f172a 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent); color: var(--barama-text); text-align: center; text-decoration: none; transform: translateY(0); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; } .popular-location-card:hover, .popular-location-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--barama-primary) 42%, var(--barama-border)); box-shadow: 0 1.15rem 2.7rem color-mix(in srgb, #0f172a 13%, transparent), 0 0 0 1px color-mix(in srgb, var(--barama-primary) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent); outline: none; } .popular-location-card__flag { display: grid; width: 5.25rem; height: 4rem; place-items: center; border: 1px solid color-mix(in srgb, var(--barama-border) 70%, transparent); border-radius: 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--barama-surface) 98%, #ffffff 2%), color-mix(in srgb, var(--barama-surface-soft) 84%, var(--barama-surface) 16%)); box-shadow: 0 .55rem 1.25rem color-mix(in srgb, #0f172a 8%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent); font-size: 3.25rem; line-height: 1; } .popular-location-card strong { display: -webkit-box; max-width: 100%; overflow: hidden; color: var(--barama-text); font-size: clamp(.95rem, 1.1vw, 1.08rem); font-weight: 800; line-height: 1.18; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* Explicit dark-mode polish: the old v1.1.24 card had a hard-coded white surface. */ html[data-bs-theme="dark"] .popular-location-card { border-color: color-mix(in srgb, var(--barama-border) 92%, var(--barama-primary) 8%); background: radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--barama-primary) 18%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--barama-surface-soft) 72%, var(--barama-surface) 28%), color-mix(in srgb, var(--barama-surface) 96%, #060b13 4%)); box-shadow: 0 1rem 2.7rem rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035); color: var(--barama-text); } html[data-bs-theme="dark"] .popular-location-card:hover, html[data-bs-theme="dark"] .popular-location-card:focus-visible { border-color: color-mix(in srgb, var(--barama-primary) 52%, var(--barama-border)); background: radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--barama-primary) 24%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--barama-surface-soft) 84%, var(--barama-surface) 16%), var(--barama-surface)); box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .34), 0 0 0 1px color-mix(in srgb, var(--barama-primary) 10%, transparent), 0 0 1.6rem color-mix(in srgb, var(--barama-primary) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, .045); } html[data-bs-theme="dark"] .popular-location-card__flag { border-color: color-mix(in srgb, var(--barama-border) 86%, var(--barama-primary) 14%); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--barama-primary) 10%, transparent), transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--barama-surface-soft) 90%, #ffffff 10%), color-mix(in srgb, var(--barama-surface) 94%, #050a12 6%)); box-shadow: 0 .6rem 1.35rem rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .045); } html[data-bs-theme="dark"] .popular-location-card strong { color: var(--barama-text); } @keyframes barama-location-marquee-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - (var(--barama-location-gap) / 2))); } } @keyframes barama-location-marquee-right { from { transform: translateX(calc(-50% - (var(--barama-location-gap) / 2))); } to { transform: translateX(0); } } @media (max-width: 767px) { .popular-location-marquee { --barama-location-card-width: 8.5rem; --barama-location-card-height: 9.4rem; --barama-location-gap: .7rem; } .popular-location-marquee__viewport { mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); } .popular-location-card { border-radius: 1.1rem; padding: .9rem .8rem; } .popular-location-card__flag { width: 4.5rem; height: 3.45rem; font-size: 2.75rem; } } @media (prefers-reduced-motion: reduce) { .popular-location-marquee__viewport { overflow-x: auto; scrollbar-width: thin; mask-image: none; -webkit-mask-image: none; } .popular-location-marquee__track { animation: none; transform: none !important; } .popular-location-marquee__set[aria-hidden="true"] { display: none; } }