/* YoKurt Frontline Entertainment Travel & Tours — shared styles */ html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: #F7F3EA; color: #211F1A; } .font-serif { font-family: 'Fraunces', serif; } .eyebrow { letter-spacing: 0.18em; } /* image fade-in on load — only enabled once we know JS actually ran (see the tiny inline script in that adds .has-js to immediately). If JS is off, images are just visible immediately with no fade — never hidden. */ img.lazy-fade { opacity: 1; } .has-js img.lazy-fade { opacity: 0; transition: opacity .7s ease; } .has-js img.lazy-fade.loaded { opacity: 1; } /* hero slideshow (index page) — first slide is already opacity:1 via .active in the HTML, so even with zero JS the hero still shows a photo, just without rotation */ .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; } .hero-slide.active { opacity: 1; } /* FAQ accordion — native
/, works with zero JS. `name` attribute on
(native HTML) makes items in the same group mutually exclusive in modern browsers, and degrades harmlessly to independent toggles elsewhere. */ details.faq-item summary { list-style: none; cursor: pointer; } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item .faq-icon { transition: transform 0.25s ease; } details.faq-item[open] .faq-icon { transform: rotate(45deg); } ::selection { background: #C9A876; color: #20291D; } /* horizontal scroll-driven galleries DEFAULT (no JS required): a plain, swipeable horizontal scroll strip — fully usable with just the keyboard, a mouse wheel (shift+scroll), or a touch swipe. */ .hscroll-sticky { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; } .hscroll-track { display: flex; } .hscroll-track > * { scroll-snap-align: start; } /* ENHANCED (JS adds .hscroll-pinned once it has confirmed it can run): pins the section and drives the horizontal motion from vertical scroll position. */ .hscroll-pinned .hscroll-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; scroll-snap-type: none; } .hscroll-pinned .hscroll-track { will-change: transform; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-slide { transition: none; } } .marquee-track { animation: marquee 24s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* mobile nav drawer — pure CSS checkbox toggle, no JS required */ #menu-toggle:checked ~ #mobile-menu { transform: translateX(0); } #mobile-menu { transform: translateX(100%); transition: transform .35s ease; } /* simple form styling (book-a-trip page) */ .field-label { font-size: .8rem; font-weight: 500; color: #211F1A99; margin-bottom: .4rem; display: block; } .field-input { width: 100%; background: #FFFFFF; border: 1px solid #21201a1f; border-radius: 0.9rem; padding: .85rem 1rem; font-size: .95rem; color: #211F1A; transition: border-color .2s ease; } .field-input:focus { outline: none; border-color: #B5592E; } /* prose used on legal / blog article pages */ .prose-yokurt h2 { font-family: 'Fraunces', serif; font-size: 1.6rem; margin-top: 2.2rem; margin-bottom: .8rem; } .prose-yokurt p { color: #211F1A99; line-height: 1.75; margin-bottom: 1rem; } .prose-yokurt ul { list-style: disc; padding-left: 1.4rem; color: #211F1A99; margin-bottom: 1rem; } .prose-yokurt li { margin-bottom: .4rem; }