/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.97.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.1_webpack@5.97.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.49.0_webpack@5.97.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../Local Sites/asktravelworld/app/public/wp-content/themes/posturepress3/assets/scss/app.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @import url(https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap); /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.97.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.1_webpack@5.97.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.49.0_webpack@5.97.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../Local Sites/asktravelworld/app/public/wp-content/themes/posturepress3/node_modules/aos/dist/aos.css ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ [data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] { transition-duration: 50ms; } [data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate { transition-delay: 50ms; } [data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] { transition-duration: 0.1s; } [data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate { transition-delay: 0.1s; } [data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] { transition-duration: 0.15s; } [data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate { transition-delay: 0.15s; } [data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] { transition-duration: 0.2s; } [data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate { transition-delay: 0.2s; } [data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] { transition-duration: 0.25s; } [data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate { transition-delay: 0.25s; } [data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] { transition-duration: 0.3s; } [data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate { transition-delay: 0.3s; } [data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] { transition-duration: 0.35s; } [data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate { transition-delay: 0.35s; } [data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] { transition-duration: 0.4s; } [data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate { transition-delay: 0.4s; } [data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] { transition-duration: 0.45s; } [data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="450"].aos-animate, body[data-aos-delay="450"] [data-aos].aos-animate { transition-delay: 0.45s; } [data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] { transition-duration: 0.5s; } [data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate { transition-delay: 0.5s; } [data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] { transition-duration: 0.55s; } [data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate { transition-delay: 0.55s; } [data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] { transition-duration: 0.6s; } [data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="600"].aos-animate, body[data-aos-delay="600"] [data-aos].aos-animate { transition-delay: 0.6s; } [data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] { transition-duration: 0.65s; } [data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="650"].aos-animate, body[data-aos-delay="650"] [data-aos].aos-animate { transition-delay: 0.65s; } [data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] { transition-duration: 0.7s; } [data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="700"].aos-animate, body[data-aos-delay="700"] [data-aos].aos-animate { transition-delay: 0.7s; } [data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] { transition-duration: 0.75s; } [data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="750"].aos-animate, body[data-aos-delay="750"] [data-aos].aos-animate { transition-delay: 0.75s; } [data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] { transition-duration: 0.8s; } [data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="800"].aos-animate, body[data-aos-delay="800"] [data-aos].aos-animate { transition-delay: 0.8s; } [data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] { transition-duration: 0.85s; } [data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate { transition-delay: 0.85s; } [data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] { transition-duration: 0.9s; } [data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="900"].aos-animate, body[data-aos-delay="900"] [data-aos].aos-animate { transition-delay: 0.9s; } [data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] { transition-duration: 0.95s; } [data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="950"].aos-animate, body[data-aos-delay="950"] [data-aos].aos-animate { transition-delay: 0.95s; } [data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { transition-duration: 1s; } [data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate { transition-delay: 1s; } [data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] { transition-duration: 1.05s; } [data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1050"].aos-animate, body[data-aos-delay="1050"] [data-aos].aos-animate { transition-delay: 1.05s; } [data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] { transition-duration: 1.1s; } [data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1100"].aos-animate, body[data-aos-delay="1100"] [data-aos].aos-animate { transition-delay: 1.1s; } [data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] { transition-duration: 1.15s; } [data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1150"].aos-animate, body[data-aos-delay="1150"] [data-aos].aos-animate { transition-delay: 1.15s; } [data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] { transition-duration: 1.2s; } [data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate { transition-delay: 1.2s; } [data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] { transition-duration: 1.25s; } [data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1250"].aos-animate, body[data-aos-delay="1250"] [data-aos].aos-animate { transition-delay: 1.25s; } [data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] { transition-duration: 1.3s; } [data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1300"].aos-animate, body[data-aos-delay="1300"] [data-aos].aos-animate { transition-delay: 1.3s; } [data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] { transition-duration: 1.35s; } [data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1350"].aos-animate, body[data-aos-delay="1350"] [data-aos].aos-animate { transition-delay: 1.35s; } [data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] { transition-duration: 1.4s; } [data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1400"].aos-animate, body[data-aos-delay="1400"] [data-aos].aos-animate { transition-delay: 1.4s; } [data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] { transition-duration: 1.45s; } [data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1450"].aos-animate, body[data-aos-delay="1450"] [data-aos].aos-animate { transition-delay: 1.45s; } [data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] { transition-duration: 1.5s; } [data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate { transition-delay: 1.5s; } [data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] { transition-duration: 1.55s; } [data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1550"].aos-animate, body[data-aos-delay="1550"] [data-aos].aos-animate { transition-delay: 1.55s; } [data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] { transition-duration: 1.6s; } [data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1600"].aos-animate, body[data-aos-delay="1600"] [data-aos].aos-animate { transition-delay: 1.6s; } [data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] { transition-duration: 1.65s; } [data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1650"].aos-animate, body[data-aos-delay="1650"] [data-aos].aos-animate { transition-delay: 1.65s; } [data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] { transition-duration: 1.7s; } [data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1700"].aos-animate, body[data-aos-delay="1700"] [data-aos].aos-animate { transition-delay: 1.7s; } [data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] { transition-duration: 1.75s; } [data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1750"].aos-animate, body[data-aos-delay="1750"] [data-aos].aos-animate { transition-delay: 1.75s; } [data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] { transition-duration: 1.8s; } [data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1800"].aos-animate, body[data-aos-delay="1800"] [data-aos].aos-animate { transition-delay: 1.8s; } [data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] { transition-duration: 1.85s; } [data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1850"].aos-animate, body[data-aos-delay="1850"] [data-aos].aos-animate { transition-delay: 1.85s; } [data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] { transition-duration: 1.9s; } [data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1900"].aos-animate, body[data-aos-delay="1900"] [data-aos].aos-animate { transition-delay: 1.9s; } [data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] { transition-duration: 1.95s; } [data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1950"].aos-animate, body[data-aos-delay="1950"] [data-aos].aos-animate { transition-delay: 1.95s; } [data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] { transition-duration: 2s; } [data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate { transition-delay: 2s; } [data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] { transition-duration: 2.05s; } [data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2050"].aos-animate, body[data-aos-delay="2050"] [data-aos].aos-animate { transition-delay: 2.05s; } [data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] { transition-duration: 2.1s; } [data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2100"].aos-animate, body[data-aos-delay="2100"] [data-aos].aos-animate { transition-delay: 2.1s; } [data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] { transition-duration: 2.15s; } [data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2150"].aos-animate, body[data-aos-delay="2150"] [data-aos].aos-animate { transition-delay: 2.15s; } [data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] { transition-duration: 2.2s; } [data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2200"].aos-animate, body[data-aos-delay="2200"] [data-aos].aos-animate { transition-delay: 2.2s; } [data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] { transition-duration: 2.25s; } [data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2250"].aos-animate, body[data-aos-delay="2250"] [data-aos].aos-animate { transition-delay: 2.25s; } [data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] { transition-duration: 2.3s; } [data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2300"].aos-animate, body[data-aos-delay="2300"] [data-aos].aos-animate { transition-delay: 2.3s; } [data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] { transition-duration: 2.35s; } [data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2350"].aos-animate, body[data-aos-delay="2350"] [data-aos].aos-animate { transition-delay: 2.35s; } [data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] { transition-duration: 2.4s; } [data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2400"].aos-animate, body[data-aos-delay="2400"] [data-aos].aos-animate { transition-delay: 2.4s; } [data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] { transition-duration: 2.45s; } [data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2450"].aos-animate, body[data-aos-delay="2450"] [data-aos].aos-animate { transition-delay: 2.45s; } [data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] { transition-duration: 2.5s; } [data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2500"].aos-animate, body[data-aos-delay="2500"] [data-aos].aos-animate { transition-delay: 2.5s; } [data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] { transition-duration: 2.55s; } [data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2550"].aos-animate, body[data-aos-delay="2550"] [data-aos].aos-animate { transition-delay: 2.55s; } [data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] { transition-duration: 2.6s; } [data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2600"].aos-animate, body[data-aos-delay="2600"] [data-aos].aos-animate { transition-delay: 2.6s; } [data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] { transition-duration: 2.65s; } [data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2650"].aos-animate, body[data-aos-delay="2650"] [data-aos].aos-animate { transition-delay: 2.65s; } [data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] { transition-duration: 2.7s; } [data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2700"].aos-animate, body[data-aos-delay="2700"] [data-aos].aos-animate { transition-delay: 2.7s; } [data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] { transition-duration: 2.75s; } [data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2750"].aos-animate, body[data-aos-delay="2750"] [data-aos].aos-animate { transition-delay: 2.75s; } [data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] { transition-duration: 2.8s; } [data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2800"].aos-animate, body[data-aos-delay="2800"] [data-aos].aos-animate { transition-delay: 2.8s; } [data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] { transition-duration: 2.85s; } [data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2850"].aos-animate, body[data-aos-delay="2850"] [data-aos].aos-animate { transition-delay: 2.85s; } [data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] { transition-duration: 2.9s; } [data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2900"].aos-animate, body[data-aos-delay="2900"] [data-aos].aos-animate { transition-delay: 2.9s; } [data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] { transition-duration: 2.95s; } [data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2950"].aos-animate, body[data-aos-delay="2950"] [data-aos].aos-animate { transition-delay: 2.95s; } [data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] { transition-duration: 3s; } [data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] { transition-delay: 0; } [data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate { transition-delay: 3s; } [data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] { transition-timing-function: ease; } [data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] { transition-timing-function: ease-in; } [data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] { transition-timing-function: ease-out; } [data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] { transition-timing-function: ease-in-out; } [data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } [data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } [data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } [data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] { transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } [data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } [data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] { transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } [data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos^=fade][data-aos^=fade] { opacity: 0; transition-property: opacity, transform; } [data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1; transform: translateZ(0); } [data-aos=fade-up] { transform: translate3d(0, 100px, 0); } [data-aos=fade-down] { transform: translate3d(0, -100px, 0); } [data-aos=fade-right] { transform: translate3d(-100px, 0, 0); } [data-aos=fade-left] { transform: translate3d(100px, 0, 0); } [data-aos=fade-up-right] { transform: translate3d(-100px, 100px, 0); } [data-aos=fade-up-left] { transform: translate3d(100px, 100px, 0); } [data-aos=fade-down-right] { transform: translate3d(-100px, -100px, 0); } [data-aos=fade-down-left] { transform: translate3d(100px, -100px, 0); } [data-aos^=zoom][data-aos^=zoom] { opacity: 0; transition-property: opacity, transform; } [data-aos^=zoom][data-aos^=zoom].aos-animate { opacity: 1; transform: translateZ(0) scale(1); } [data-aos=zoom-in] { transform: scale(0.6); } [data-aos=zoom-in-up] { transform: translate3d(0, 100px, 0) scale(0.6); } [data-aos=zoom-in-down] { transform: translate3d(0, -100px, 0) scale(0.6); } [data-aos=zoom-in-right] { transform: translate3d(-100px, 0, 0) scale(0.6); } [data-aos=zoom-in-left] { transform: translate3d(100px, 0, 0) scale(0.6); } [data-aos=zoom-out] { transform: scale(1.2); } [data-aos=zoom-out-up] { transform: translate3d(0, 100px, 0) scale(1.2); } [data-aos=zoom-out-down] { transform: translate3d(0, -100px, 0) scale(1.2); } [data-aos=zoom-out-right] { transform: translate3d(-100px, 0, 0) scale(1.2); } [data-aos=zoom-out-left] { transform: translate3d(100px, 0, 0) scale(1.2); } [data-aos^=slide][data-aos^=slide] { transition-property: transform; } [data-aos^=slide][data-aos^=slide].aos-animate { transform: translateZ(0); } [data-aos=slide-up] { transform: translate3d(0, 100%, 0); } [data-aos=slide-down] { transform: translate3d(0, -100%, 0); } [data-aos=slide-right] { transform: translate3d(-100%, 0, 0); } [data-aos=slide-left] { transform: translate3d(100%, 0, 0); } [data-aos^=flip][data-aos^=flip] { backface-visibility: hidden; transition-property: transform; } [data-aos=flip-left] { transform: perspective(2500px) rotateY(-100deg); } [data-aos=flip-left].aos-animate { transform: perspective(2500px) rotateY(0); } [data-aos=flip-right] { transform: perspective(2500px) rotateY(100deg); } [data-aos=flip-right].aos-animate { transform: perspective(2500px) rotateY(0); } [data-aos=flip-up] { transform: perspective(2500px) rotateX(-100deg); } [data-aos=flip-up].aos-animate { transform: perspective(2500px) rotateX(0); } [data-aos=flip-down] { transform: perspective(2500px) rotateX(100deg); } [data-aos=flip-down].aos-animate { transform: perspective(2500px) rotateX(0); } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.97.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.1_webpack@5.97.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.49.0_webpack@5.97.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../Local Sites/asktravelworld/app/public/wp-content/themes/posturepress3/assets/scss/app.scss (1) ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /** * Locally Load the typekit/google fonts instead of having to load them from the CDN. * Make sure to adjust the preload in header.php if needed **/ /* Document * ========================================================================== */ /** * 1. Add border box sizing in all browsers (opinionated). * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { box-sizing: border-box; /* 1 */ background-repeat: no-repeat; /* 2 */ } /** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritance in all browsers (opinionated). */ ::before, ::after { text-decoration: inherit; /* 1 */ vertical-align: inherit; /* 2 */ } /** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). * 3. Breaks words to prevent overflow in all browsers (opinionated). * 4. Use a 4-space tab width in all browsers (opinionated). * 5. Remove the grey highlight on links in iOS (opinionated). * 6. Prevent adjustments of font size after orientation changes in iOS. */ :where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ overflow-wrap: break-word; /* 3 */ -moz-tab-size: 4; /* 4 */ -o-tab-size: 4; tab-size: 4; /* 4 */ -webkit-tap-highlight-color: transparent; /* 5 */ -webkit-text-size-adjust: 100%; /* 6 */ -moz-text-size-adjust: 100%; text-size-adjust: 100%; /* 6 */ } /* Sections * ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ :where(body) { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ :where(h1) { font-size: 2em; margin: 0.67em 0; } /* Grouping content * ========================================================================== */ /** * Remove the margin on nested lists in Chrome, Edge, and Safari. */ :where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; } /** * 1. Correct the inheritance of border color in Firefox. * 2. Add the correct box sizing in Firefox. */ :where(hr) { color: inherit; /* 1 */ height: 0; /* 2 */ } /** * Remove the list style on navigation lists in all browsers (opinionated). */ :where(nav) :where(ol, ul) { list-style-type: none; padding: 0; } /** * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. * 3. Prevent overflow of the container in all browsers (opinionated). */ :where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ overflow: auto; /* 3 */ } /* Text-level semantics * ========================================================================== */ /** * Add the correct text decoration in Safari. */ :where(abbr[title]) { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ :where(b, strong) { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ :where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ :where(small) { font-size: 80%; } /* Embedded content * ========================================================================== */ /* * Change the alignment on media elements in all browsers (opinionated). */ :where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; } /** * Restrict sizing to the page width in all browsers (opinionated). */ :where(iframe, img, input, video, select, textarea) { height: auto; max-width: 100%; } /** * Remove the border on iframes in all browsers (opinionated). */ :where(iframe) { border-style: none; } /** * Change the fill color to match the text color in all browsers (opinionated). */ :where(svg:not([fill])) { fill: currentColor; } /* Tabular data * ========================================================================== */ /** * 1. Collapse border spacing in all browsers (opinionated). * 2. Correct table border color in Chrome, Edge, and Safari. * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. */ :where(table) { border-collapse: collapse; /* 1 */ border-color: currentColor; /* 2 */ text-indent: 0; /* 3 */ } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ :where(button, input, select) { margin: 0; } /** * Correct the inability to style buttons in iOS and Safari. */ :where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; } /** * Change the inconsistent appearance in all browsers (opinionated). */ :where(fieldset) { border: 1px solid #a0a0a0; } /** * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ :where(progress) { vertical-align: baseline; } /** * 1. Remove the margin in Firefox and Safari. * 3. Change the resize direction in all browsers (opinionated). */ :where(textarea) { margin: 0; /* 1 */ resize: vertical; /* 3 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ :where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive * ========================================================================== */ /* * Add the correct styles in Safari. */ :where(dialog) { background-color: white; border: solid; color: black; height: -moz-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: fit-content; } :where(dialog:not([open])) { display: none; } /* * Add the correct display in Safari. */ :where(details > summary:first-of-type) { display: list-item; } /* Accessibility * ========================================================================== */ /** * Change the cursor on busy elements in all browsers (opinionated). */ :where([aria-busy="true" i]) { cursor: progress; } /* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ :where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; } /* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ :where([aria-hidden="false" i][hidden]) { display: initial; } :where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; } /* * Form section */ /** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ :where(button, input, select, textarea) { background-color: transparent; /* 1 */ border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ font: inherit; /* 2 */ letter-spacing: inherit; /* 2 */ padding: 0.25em 0.375em; /* 1 */ } /** * Change the inconsistent appearance in all browsers (opinionated). */ :where(select) { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%274%27%3E%3Cpath d=%27M4 0h6L7 4%27/%3E%3C/svg%3E") no-repeat right center/1em; border-radius: 0; padding-right: 1em; } /** * Don't show the arrow for multiple choice selects */ :where(select[multiple]) { background-image: none; } /** * Remove the border and padding in all browsers (opinionated). */ :where([type="color" i], [type="range" i]) { border-width: 0; padding: 0; } /** * Reduce Motion section */ /* * 1. Remove animations when motion is reduced (opinionated). * 2. Remove fixed background attachments when motion is reduced (opinionated). * 3. Remove timed scrolling behaviors when motion is reduced (opinionated). * 4. Remove transitions when motion is reduced (opinionated). */ /** * Simplified Breakpoint mixin * Is mobile-first but includes the modifier key to go up/down * **/ /** Fluid typography mixin * ONLY ACCEPTS PIXEL UNITS * * @param {number} $min-px: The minimum size in pixels of this fluid variable * @param {number} $max-px: The maximum size in pixels of this fluid variable * @param {number} $min-bp: The minimum viewport size in pixels of this fluid variable * @param {number} $max-bp: The maximum viewport size in pixels of this fluid variable * @return {property} The fluid typography clamp property **/ :root { --fluid-jumbo: calc(var(--fluid-h1) * 1.3); --fluid-h1: clamp(2.25rem, 1.5vw + 1.88rem, 3rem); --fluid-h2: clamp(2rem, 0.75vw + 1.81rem, 2.38rem); --fluid-h3: clamp(1.75rem, 0.75vw + 1.56rem, 2.13rem); --fluid-h4: clamp(1.5rem, 0.75vw + 1.31rem, 1.88rem); --fluid-h5: clamp(1.38rem, 0.5vw + 1.25rem, 1.63rem); --fluid-h6: clamp(1.13rem, 0.5vw + 1rem, 1.38rem); --fluid-body: clamp(1rem, 0.25vw + 0.94rem, 1.13rem); --fluid-body-sm: clamp(0.88rem, 0.25vw + 0.81rem, 1rem); --fluid-body-xs: clamp(0.5rem, 0.25vw + 0.44rem, 0.63rem); } /** * For any sass variables that may be used in multiple places, * in the settings folder. * List them here. * * With sass @use rules there is no longer a "global" scope. * For example trying to @use "sizing" in fluid-typography will result in an error. * Because it is already @forwarded in the settings.scss file. This will cause a looping error in the compiler. * When a global value is needed in multiple places list it here or prefer to use a css custom attribute **/ /** * Basic Sizing variables! * @important: rem has been modified to 10px * **/ :root { --global-width: 1200px; --global-width-wide: 1400px; --global-content-width: 800px; --global-gutter: 1.3rem; --global-block-gap: 1.5rem; --global-section-padding: 4rem; --global-fluid-section-padding: clamp(2.5rem, 1.25vw + 2.19rem, 3.13rem); --sizing-base: 1rem; --size-xs: calc(var(--sizing-base) * 0.5); --size-sm: calc(var(--sizing-base) * 1); --size-md: calc(var(--sizing-base) * 1.5); --size-lg: calc(var(--sizing-base) * 2); --size-xl: calc(var(--sizing-base) * 3); --logo-height: 40px; --icon-size: 1.2rem; --button-padding: 10px 32px; --button-border-radius: 4px; --card-padding: var(--spacing-md); --hero-min-height: 742px; --avatar-size: 200px; --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius-xl: 16px; --fluid-sizing-min-view: var(--breakpoint-sm, 40rem); --fluid-sizing-max-view: var(--global-width, 120rem); --fluid-sizer: clamp(0rem, 1.25vw + -0.31rem, 0.63rem); --size-fluid-xs: calc(var(--size-xs) + var(--fluid-sizer)); --fluid-size-xs: calc(var(--size-xs) + var(--fluid-sizer)); --fluid-size-sm: calc(var(--size-sm) + var(--fluid-sizer)); --fluid-size-md: calc(var(--size-md) + var(--fluid-sizer)); --fluid-size-lg: calc(var(--size-lg) + var(--fluid-sizer)); --fluid-size-xl: calc(var(--size-xl) + var(--fluid-sizer)); } :root { --color-blue-100: #1d475a; --color-blue-200: #477990; --color-blue-300: #c2dbe7; --color-yellow-100: #efaf1f; --color-yellow-200: #fcd06d; --color-yellow-300: #fff2d5; --color-primary: #1d475a; --color-secondary: #efaf1f; --color-accent: #efaf1f; --color-text: #000000; --color-text-muted: #707070; --color-white: #ffffff; --color-cream: #fff2d5; --color-background: #ffffff; --color-background-light: #f5f5f5; --color-black: #000000; --color-gray: #707070; --color-dark-gray: #333333; --color-light-gray: #f5f5f5; --color-warning: maroon; --color-success: #28a745; --color-primary-light: #296581; --color-secondary-light: #f2c04f; --color-primary-dark: #112933; --color-secondary-dark: #cc920f; } :root { --font-primary: Lexend Deca, sans-serif; --font-secondary: Montserrat, sans-serif; --h1-font-size: 3.75rem; --h2-font-size: 3.125rem; --h3-font-size: 1.875rem; --h4-font-size: 1.625rem; --h5-font-size: 1.375rem; --h6-font-size: 1.125rem; --p-font-size: 1rem; --body-font-family: var(--font-secondary); --body-font-weight: 400; --body-line-height: 1.6; --body-font-size: 1rem; --color-body-font: var(--color-text); --header-font-family: var(--font-primary); --header-font-weight: 600; --header-line-height: 1.2; --color-header: var(--color-primary); --color-sub-header: var(--color-secondary); --nav-font-family: var(--font-secondary); --nav-font-weight: 700; --nav-font-size: 1rem; --button-font-family: var(--font-secondary); --button-font-weight: 700; --button-font-size: 1rem; --tour-card-title-font-family: var(--font-primary); --tour-card-title-font-weight: 700; --tour-card-title-font-size: 1.375rem; --tour-card-title-font-size-mobile: 0.75875rem; --tour-card-date-font-family: var(--font-secondary); --tour-card-date-font-weight: 700; --tour-card-date-font-size: 1rem; --tour-card-date-font-size-mobile: 0.55188rem; --tour-card-price-font-family: var(--font-primary); --tour-card-price-font-weight: 700; --tour-card-price-font-size: 1.875rem; --tour-card-price-font-size-mobile: 1.03438rem; --price-suffix-font-family: var(--font-secondary); --price-suffix-font-weight: 700; --price-suffix-font-size: 1rem; --price-suffix-font-size-mobile: 0.55188rem; --tour-card-title-group-font-family: var(--font-primary); --tour-card-title-group-font-weight: 700; --tour-card-title-group-font-size: 1.875rem; --tour-card-title-group-font-size-mobile: 0.835rem; --tour-card-cta-group-font-family: var(--font-secondary); --tour-card-cta-group-font-weight: 700; --tour-card-cta-group-font-size: 1rem; --tour-card-cta-group-font-size-mobile: 0.44563rem; --default-typography-gap: 1rem; } h1, h2, h3, h4, h5, h6, p, ul, ol { margin: var(--default-typography-gap, 1rem) 0; } h1 { font-size: var(--h1-font-size); } h2 { font-size: var(--h2-font-size); } h3 { font-size: var(--h3-font-size); } h4 { font-size: var(--h4-font-size); } h5 { font-size: var(--h5-font-size); } h6 { font-size: var(--h6-font-size); } body, p { font-size: var(--p-font-size); } ul { list-style: none; padding: 0; } body { color: var(--color-body-font); font-family: var(--body-font-family); font-weight: var(--body-font-weight); line-height: var(--body-line-height); } a { text-decoration: none; color: var(--color-primary); transition: all 0.3s ease; } a:hover { color: var(--color-secondary); } .nav-link { font-family: var(--nav-font-family); font-weight: var(--nav-font-weight); font-size: var(--nav-font-size); color: var(--color-white); } .nav-link:hover { color: var(--color-secondary); } .button { font-family: var(--button-font-family); font-weight: var(--button-font-weight); font-size: var(--button-font-size); transition: all 0.3s ease; } h1, h2, h3, h4, h5, h6, .is-header { font-family: var(--header-font-family); font-weight: var(--header-font-weight); line-height: var(--header-line-height); color: var(--color-header); margin-bottom: calc(var(--default-typography-gap, 1rem) * 2); } h4, h5, h6, .is-sub-header { font-weight: calc(var(--header-font-weight) - 100); color: var(--color-sub-header); } :root { --container-width: 1200px; --container-wide-width: 1440px; --container-extra-wide-width: 1600px; --container-padding: 1rem; --container-padding-md: 1.5rem; --container-padding-lg: 2rem; --spacing-none: 0; --spacing-xxs: 0.25rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2.1rem; --spacing-xlt: 2.25rem; --spacing-2xl: 2.5rem; --spacing-3xl: 3rem; --spacing-4xl: 4rem; --spacing-5xl: 6rem; --spacing-6xl: 8rem; --spacing-7xl: 10rem; --spacing-8xl: 12rem; } .m-none { margin: var(--spacing-none); } .mt-none { margin-top: var(--spacing-none); } .mr-none { margin-right: var(--spacing-none); } .mb-none { margin-bottom: var(--spacing-none); } .ml-none { margin-left: var(--spacing-none); } .mx-none { margin-left: var(--spacing-none); margin-right: var(--spacing-none); } .my-none { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); } .p-none { padding: var(--spacing-none); } .pt-none { padding-top: var(--spacing-none); } .pr-none { padding-right: var(--spacing-none); } .pb-none { padding-bottom: var(--spacing-none); } .pl-none { padding-left: var(--spacing-none); } .px-none { padding-left: var(--spacing-none); padding-right: var(--spacing-none); } .py-none { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); } .m-xxs { margin: var(--spacing-xxs); } .mt-xxs { margin-top: var(--spacing-xxs); } .mr-xxs { margin-right: var(--spacing-xxs); } .mb-xxs { margin-bottom: var(--spacing-xxs); } .ml-xxs { margin-left: var(--spacing-xxs); } .mx-xxs { margin-left: var(--spacing-xxs); margin-right: var(--spacing-xxs); } .my-xxs { margin-top: var(--spacing-xxs); margin-bottom: var(--spacing-xxs); } .p-xxs { padding: var(--spacing-xxs); } .pt-xxs { padding-top: var(--spacing-xxs); } .pr-xxs { padding-right: var(--spacing-xxs); } .pb-xxs { padding-bottom: var(--spacing-xxs); } .pl-xxs { padding-left: var(--spacing-xxs); } .px-xxs { padding-left: var(--spacing-xxs); padding-right: var(--spacing-xxs); } .py-xxs { padding-top: var(--spacing-xxs); padding-bottom: var(--spacing-xxs); } .m-xs { margin: var(--spacing-xs); } .mt-xs { margin-top: var(--spacing-xs); } .mr-xs { margin-right: var(--spacing-xs); } .mb-xs { margin-bottom: var(--spacing-xs); } .ml-xs { margin-left: var(--spacing-xs); } .mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); } .my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .p-xs { padding: var(--spacing-xs); } .pt-xs { padding-top: var(--spacing-xs); } .pr-xs { padding-right: var(--spacing-xs); } .pb-xs { padding-bottom: var(--spacing-xs); } .pl-xs { padding-left: var(--spacing-xs); } .px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } .py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); } .m-sm { margin: var(--spacing-sm); } .mt-sm { margin-top: var(--spacing-sm); } .mr-sm { margin-right: var(--spacing-sm); } .mb-sm { margin-bottom: var(--spacing-sm); } .ml-sm { margin-left: var(--spacing-sm); } .mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); } .my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .p-sm { padding: var(--spacing-sm); } .pt-sm { padding-top: var(--spacing-sm); } .pr-sm { padding-right: var(--spacing-sm); } .pb-sm { padding-bottom: var(--spacing-sm); } .pl-sm { padding-left: var(--spacing-sm); } .px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .m-md { margin: var(--spacing-md); } .mt-md { margin-top: var(--spacing-md); } .mr-md { margin-right: var(--spacing-md); } .mb-md { margin-bottom: var(--spacing-md); } .ml-md { margin-left: var(--spacing-md); } .mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); } .my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); } .p-md { padding: var(--spacing-md); } .pt-md { padding-top: var(--spacing-md); } .pr-md { padding-right: var(--spacing-md); } .pb-md { padding-bottom: var(--spacing-md); } .pl-md { padding-left: var(--spacing-md); } .px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .m-lg { margin: var(--spacing-lg); } .mt-lg { margin-top: var(--spacing-lg); } .mr-lg { margin-right: var(--spacing-lg); } .mb-lg { margin-bottom: var(--spacing-lg); } .ml-lg { margin-left: var(--spacing-lg); } .mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); } .my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .p-lg { padding: var(--spacing-lg); } .pt-lg { padding-top: var(--spacing-lg); } .pr-lg { padding-right: var(--spacing-lg); } .pb-lg { padding-bottom: var(--spacing-lg); } .pl-lg { padding-left: var(--spacing-lg); } .px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } .py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .m-xl { margin: var(--spacing-xl); } .mt-xl { margin-top: var(--spacing-xl); } .mr-xl { margin-right: var(--spacing-xl); } .mb-xl { margin-bottom: var(--spacing-xl); } .ml-xl { margin-left: var(--spacing-xl); } .mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); } .my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .p-xl { padding: var(--spacing-xl); } .pt-xl { padding-top: var(--spacing-xl); } .pr-xl { padding-right: var(--spacing-xl); } .pb-xl { padding-bottom: var(--spacing-xl); } .pl-xl { padding-left: var(--spacing-xl); } .px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } .py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); } .m-xlt { margin: var(--spacing-xlt); } .mt-xlt { margin-top: var(--spacing-xlt); } .mr-xlt { margin-right: var(--spacing-xlt); } .mb-xlt { margin-bottom: var(--spacing-xlt); } .ml-xlt { margin-left: var(--spacing-xlt); } .mx-xlt { margin-left: var(--spacing-xlt); margin-right: var(--spacing-xlt); } .my-xlt { margin-top: var(--spacing-xlt); margin-bottom: var(--spacing-xlt); } .p-xlt { padding: var(--spacing-xlt); } .pt-xlt { padding-top: var(--spacing-xlt); } .pr-xlt { padding-right: var(--spacing-xlt); } .pb-xlt { padding-bottom: var(--spacing-xlt); } .pl-xlt { padding-left: var(--spacing-xlt); } .px-xlt { padding-left: var(--spacing-xlt); padding-right: var(--spacing-xlt); } .py-xlt { padding-top: var(--spacing-xlt); padding-bottom: var(--spacing-xlt); } .m-2xl { margin: var(--spacing-2xl); } .mt-2xl { margin-top: var(--spacing-2xl); } .mr-2xl { margin-right: var(--spacing-2xl); } .mb-2xl { margin-bottom: var(--spacing-2xl); } .ml-2xl { margin-left: var(--spacing-2xl); } .mx-2xl { margin-left: var(--spacing-2xl); margin-right: var(--spacing-2xl); } .my-2xl { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); } .p-2xl { padding: var(--spacing-2xl); } .pt-2xl { padding-top: var(--spacing-2xl); } .pr-2xl { padding-right: var(--spacing-2xl); } .pb-2xl { padding-bottom: var(--spacing-2xl); } .pl-2xl { padding-left: var(--spacing-2xl); } .px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); } .py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); } .m-3xl { margin: var(--spacing-3xl); } .mt-3xl { margin-top: var(--spacing-3xl); } .mr-3xl { margin-right: var(--spacing-3xl); } .mb-3xl { margin-bottom: var(--spacing-3xl); } .ml-3xl { margin-left: var(--spacing-3xl); } .mx-3xl { margin-left: var(--spacing-3xl); margin-right: var(--spacing-3xl); } .my-3xl { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); } .p-3xl { padding: var(--spacing-3xl); } .pt-3xl { padding-top: var(--spacing-3xl); } .pr-3xl { padding-right: var(--spacing-3xl); } .pb-3xl { padding-bottom: var(--spacing-3xl); } .pl-3xl { padding-left: var(--spacing-3xl); } .px-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); } .py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); } .m-4xl { margin: var(--spacing-4xl); } .mt-4xl { margin-top: var(--spacing-4xl); } .mr-4xl { margin-right: var(--spacing-4xl); } .mb-4xl { margin-bottom: var(--spacing-4xl); } .ml-4xl { margin-left: var(--spacing-4xl); } .mx-4xl { margin-left: var(--spacing-4xl); margin-right: var(--spacing-4xl); } .my-4xl { margin-top: var(--spacing-4xl); margin-bottom: var(--spacing-4xl); } .p-4xl { padding: var(--spacing-4xl); } .pt-4xl { padding-top: var(--spacing-4xl); } .pr-4xl { padding-right: var(--spacing-4xl); } .pb-4xl { padding-bottom: var(--spacing-4xl); } .pl-4xl { padding-left: var(--spacing-4xl); } .px-4xl { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); } .py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); } .m-5xl { margin: var(--spacing-5xl); } .mt-5xl { margin-top: var(--spacing-5xl); } .mr-5xl { margin-right: var(--spacing-5xl); } .mb-5xl { margin-bottom: var(--spacing-5xl); } .ml-5xl { margin-left: var(--spacing-5xl); } .mx-5xl { margin-left: var(--spacing-5xl); margin-right: var(--spacing-5xl); } .my-5xl { margin-top: var(--spacing-5xl); margin-bottom: var(--spacing-5xl); } .p-5xl { padding: var(--spacing-5xl); } .pt-5xl { padding-top: var(--spacing-5xl); } .pr-5xl { padding-right: var(--spacing-5xl); } .pb-5xl { padding-bottom: var(--spacing-5xl); } .pl-5xl { padding-left: var(--spacing-5xl); } .px-5xl { padding-left: var(--spacing-5xl); padding-right: var(--spacing-5xl); } .py-5xl { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-5xl); } .m-6xl { margin: var(--spacing-6xl); } .mt-6xl { margin-top: var(--spacing-6xl); } .mr-6xl { margin-right: var(--spacing-6xl); } .mb-6xl { margin-bottom: var(--spacing-6xl); } .ml-6xl { margin-left: var(--spacing-6xl); } .mx-6xl { margin-left: var(--spacing-6xl); margin-right: var(--spacing-6xl); } .my-6xl { margin-top: var(--spacing-6xl); margin-bottom: var(--spacing-6xl); } .p-6xl { padding: var(--spacing-6xl); } .pt-6xl { padding-top: var(--spacing-6xl); } .pr-6xl { padding-right: var(--spacing-6xl); } .pb-6xl { padding-bottom: var(--spacing-6xl); } .pl-6xl { padding-left: var(--spacing-6xl); } .px-6xl { padding-left: var(--spacing-6xl); padding-right: var(--spacing-6xl); } .py-6xl { padding-top: var(--spacing-6xl); padding-bottom: var(--spacing-6xl); } .m-7xl { margin: var(--spacing-7xl); } .mt-7xl { margin-top: var(--spacing-7xl); } .mr-7xl { margin-right: var(--spacing-7xl); } .mb-7xl { margin-bottom: var(--spacing-7xl); } .ml-7xl { margin-left: var(--spacing-7xl); } .mx-7xl { margin-left: var(--spacing-7xl); margin-right: var(--spacing-7xl); } .my-7xl { margin-top: var(--spacing-7xl); margin-bottom: var(--spacing-7xl); } .p-7xl { padding: var(--spacing-7xl); } .pt-7xl { padding-top: var(--spacing-7xl); } .pr-7xl { padding-right: var(--spacing-7xl); } .pb-7xl { padding-bottom: var(--spacing-7xl); } .pl-7xl { padding-left: var(--spacing-7xl); } .px-7xl { padding-left: var(--spacing-7xl); padding-right: var(--spacing-7xl); } .py-7xl { padding-top: var(--spacing-7xl); padding-bottom: var(--spacing-7xl); } .m-8xl { margin: var(--spacing-8xl); } .mt-8xl { margin-top: var(--spacing-8xl); } .mr-8xl { margin-right: var(--spacing-8xl); } .mb-8xl { margin-bottom: var(--spacing-8xl); } .ml-8xl { margin-left: var(--spacing-8xl); } .mx-8xl { margin-left: var(--spacing-8xl); margin-right: var(--spacing-8xl); } .my-8xl { margin-top: var(--spacing-8xl); margin-bottom: var(--spacing-8xl); } .p-8xl { padding: var(--spacing-8xl); } .pt-8xl { padding-top: var(--spacing-8xl); } .pr-8xl { padding-right: var(--spacing-8xl); } .pb-8xl { padding-bottom: var(--spacing-8xl); } .pl-8xl { padding-left: var(--spacing-8xl); } .px-8xl { padding-left: var(--spacing-8xl); padding-right: var(--spacing-8xl); } .py-8xl { padding-top: var(--spacing-8xl); padding-bottom: var(--spacing-8xl); } .body-controller { position: relative; overflow-x: hidden; display: flex; flex-flow: column nowrap; min-height: 100vh; } .body-controller footer { margin-top: auto; } html { --scroll-behavior: smooth; scroll-behavior: smooth; } body { display: flex; flex-flow: column nowrap; /*&:not([data-s-loaded]) { * { transition: none !important; } }*/ } .fancy-btn:where(*, > *), form input[type=submit]:where(*, > *), form button:where(*, > *), .callout-btn:where(*, > *), .wp-block-buttons:where(*, > *) { --button-color: var(--color-white, white); --button-background-color: var(--color-quinary, lightred); --button-border-color: var(--button-background-color, lightred); --button-border-radius: 50px; --button-border-width: 2px; --button-font-size: var(--fluid-body, 1em); --button-font-weight: 700; --button-padding-vertical: 0.5em; --button-padding-horizontal: 2em; } .fancy-btn:is(*, > *):not(div, section, mark, strong, b, i, li), form input[type=submit]:is(*, > *):not(div, section, mark, strong, b, i, li), form button:is(*, > *):not(div, section, mark, strong, b, i, li), .callout-btn:is(*, > *):not(div, section, mark, strong, b, i, li), .wp-block-buttons:is(*, > *):not(div, section, mark, strong, b, i, li), .fancy-btn *:not(div, section, mark, strong, b, i), form input[type=submit] *:not(div, section, mark, strong, b, i), form button *:not(div, section, mark, strong, b, i), .callout-btn *:not(div, section, mark, strong, b, i), .wp-block-buttons *:not(div, section, mark, strong, b, i) { border: var(--button-border-width) solid var(--button-border-color); border-radius: var(--button-border-radius); padding: var(--button-padding-vertical) var(--button-padding-horizontal); background-color: var(--button-background-color); color: var(--button-color); font-size: var(--button-font-size); font-weight: var(--button-font-weight); transition: all 0.3s ease; } .fancy-btn:is(*, > *):not(div, section, mark, strong, b, i, li):hover, form input[type=submit]:is(*, > *):not(div, section, mark, strong, b, i, li):hover, form button:is(*, > *):not(div, section, mark, strong, b, i, li):hover, .callout-btn:is(*, > *):not(div, section, mark, strong, b, i, li):hover, .wp-block-buttons:is(*, > *):not(div, section, mark, strong, b, i, li):hover, .fancy-btn:is(*, > *):not(div, section, mark, strong, b, i, li):focus, form input[type=submit]:is(*, > *):not(div, section, mark, strong, b, i, li):focus, form button:is(*, > *):not(div, section, mark, strong, b, i, li):focus, .callout-btn:is(*, > *):not(div, section, mark, strong, b, i, li):focus, .wp-block-buttons:is(*, > *):not(div, section, mark, strong, b, i, li):focus, .fancy-btn:is(*, > *):not(div, section, mark, strong, b, i, li):active, form input[type=submit]:is(*, > *):not(div, section, mark, strong, b, i, li):active, form button:is(*, > *):not(div, section, mark, strong, b, i, li):active, .callout-btn:is(*, > *):not(div, section, mark, strong, b, i, li):active, .wp-block-buttons:is(*, > *):not(div, section, mark, strong, b, i, li):active, .fancy-btn *:not(div, section, mark, strong, b, i):hover, form input[type=submit] *:not(div, section, mark, strong, b, i):hover, form button *:not(div, section, mark, strong, b, i):hover, .callout-btn *:not(div, section, mark, strong, b, i):hover, .wp-block-buttons *:not(div, section, mark, strong, b, i):hover, .fancy-btn *:not(div, section, mark, strong, b, i):focus, form input[type=submit] *:not(div, section, mark, strong, b, i):focus, form button *:not(div, section, mark, strong, b, i):focus, .callout-btn *:not(div, section, mark, strong, b, i):focus, .wp-block-buttons *:not(div, section, mark, strong, b, i):focus, .fancy-btn *:not(div, section, mark, strong, b, i):active, form input[type=submit] *:not(div, section, mark, strong, b, i):active, form button *:not(div, section, mark, strong, b, i):active, .callout-btn *:not(div, section, mark, strong, b, i):active, .wp-block-buttons *:not(div, section, mark, strong, b, i):active { --button-color: var(--color-white, white); --button-background-color: var(--color-quinary-dark); --button-border-color: var(--button-background-color, lightred); } .fancy-btn:is(*, > *):not(div, section, mark, strong, b, i, li):active, form input[type=submit]:is(*, > *):not(div, section, mark, strong, b, i, li):active, form button:is(*, > *):not(div, section, mark, strong, b, i, li):active, .callout-btn:is(*, > *):not(div, section, mark, strong, b, i, li):active, .wp-block-buttons:is(*, > *):not(div, section, mark, strong, b, i, li):active, .fancy-btn *:not(div, section, mark, strong, b, i):active, form input[type=submit] *:not(div, section, mark, strong, b, i):active, form button *:not(div, section, mark, strong, b, i):active, .callout-btn *:not(div, section, mark, strong, b, i):active, .wp-block-buttons *:not(div, section, mark, strong, b, i):active { --button-background-color: var(--color-quinary-light); --button-border-color: var(--button-background-color, lightred); } .fancy-btn :is(.is-style-outline), form input[type=submit] :is(.is-style-outline), form button :is(.is-style-outline), .callout-btn :is(.is-style-outline), .wp-block-buttons :is(.is-style-outline) { --button-background-color: transparent; --button-border-color: currentColor; --button-color: var(--color-quinary, lightred); } .fancy-btn :is(.is-style-outline):hover, form input[type=submit] :is(.is-style-outline):hover, form button :is(.is-style-outline):hover, .callout-btn :is(.is-style-outline):hover, .wp-block-buttons :is(.is-style-outline):hover, .fancy-btn :is(.is-style-outline):focus, form input[type=submit] :is(.is-style-outline):focus, form button :is(.is-style-outline):focus, .callout-btn :is(.is-style-outline):focus, .wp-block-buttons :is(.is-style-outline):focus, .fancy-btn :is(.is-style-outline):active, form input[type=submit] :is(.is-style-outline):active, form button :is(.is-style-outline):active, .callout-btn :is(.is-style-outline):active, .wp-block-buttons :is(.is-style-outline):active { --button-color: var(--color-quaternary-dark); } .callout-btn a { --button-padding-vertical: 0.5em; --button-padding-horizontal: 1em; --button-background-color: transparent; --button-border-color: currentColor; --button-color: var(--color-quinary, lightred); } .course-button { cursor: help; } button:not([disabled]):not([aria-disabled=true]) { cursor: pointer; } form input, form textarea { font-size: var(--fluid-body); font-family: var(--body-font-family); border-radius: 0; } /** * CSS grid * * Ideal for layouts that do not require centering * A bonus compared to the `f-grid` is items will never mangle themselves sizing wise * CSS grid is very strong about making sure elements do not cause unseen side effects * When possible CSS grid > flexbox **/ .c-grid { --grid-col-sm: 1fr; --grid-col-md: 1fr 1fr; --grid-col-lg: 1fr 1fr 1fr; --grid-gap: var(--global-gutter, 10px); display: grid; grid-template-columns: var(--grid-col-sm); grid-gap: var(--grid-gap); } .c-grid .cell { display: flex; flex-flow: column nowrap; height: auto; } /** * Basic Flex Grid * * Ideal for layouts that need to center anything * Purposely basic as most layouts are never the same. * This just gives a sane default to get started * With some responsiveness builtin. **/ .f-grid { display: flex; flex-flow: row wrap; --cell-size-sm: 100%; --cell-size-md: 50%; --cell-size-lg: 33.33%; --grid-gap: var(--global-gutter, 10px); gap: var(--grid-gap); } .f-grid .cell { display: flex; flex-flow: column nowrap; height: auto; flex-basis: calc(var(--cell-size-sm) - var(--grid-gap)); } .has-text-color { color: var(--custom-color, var(--color-primary)); } .has-border-color { border-color: var(--custom-color, var(--color-primary)); } .has-background-color { background-color: var(--custom-color, var(--color-primary)); } .has-inline-color { color: var(--custom-color, var(--color-primary)); } .has-color-primary-color { --custom-color: var(--color-primary); } .has-color-secondary-color { --custom-color: var(--color-secondary); } .has-color-tertiary-color { --custom-color: var(--color-tertiary); } .has-color-quaternary-color { --custom-color: var(--color-quaternary); } .has-color-quinary-color { --custom-color: var(--color-quinary); } .has-color-white-color { --custom-color: var(--color-white); } .has-color-black-color { --custom-color: var(--color-black); } .has-color-gray-color { --custom-color: var(--color-gray); } .has-color-light-gray-color { --custom-color: var(--color-light-gray); } :where(a) { --link-color: var(--color-primary); --link-hover-color: var(--color-primary-dark); --link-active-color: var(--color-primary-light); --link-font-weight: 500; color: var(--color-primary); transition: all 0.3s ease; text-decoration: none; font-weight: --link-font-weight; } :where(a):hover, :where(a):active, :where(a):focus { color: var(--color-primary-dark); } :where(a):active { color: var(--color-primary-light); } :where(a).ghost-link { color: var(--color-white); } :where(a).ghost-link:hover, :where(a).ghost-link:active, :where(a).ghost-link:focus { color: var(--color-light-gray); } :where(a).ghost-link:active { color: var(--color-gray); } .site-footer { --footer-bg-color: var(--color-blue-100); --footer-text-color: var(--color-white); --footer-heading-size: 1.125rem; --footer-text-size: 1rem; --footer-small-text-size: 0.875rem; --footer-padding-desktop: 3.75rem 5rem; --footer-padding-tablet: 2.5rem 2.5rem; --footer-padding-mobile: 2.5rem 1.5rem; --footer-column-gap: 2.5rem; --footer-row-gap: 2rem; --footer-section-gap: 3rem; --footer-divider-color: rgba(71, 121, 144, 0.3); background-color: var(--footer-bg-color); color: var(--footer-text-color); width: 100%; } .site-footer .footer-container { width: 100%; max-width: var(--global-width-wide, 1440px); margin: 0 auto; } .site-footer h3 { color: var(--color-white); font-size: var(--footer-heading-size); font-weight: 700; margin-top: 0; margin-bottom: 1rem; } .site-footer p { margin-top: 0; margin-bottom: 1rem; font-size: var(--footer-text-size); } .site-footer a { color: var(--footer-text-color); text-decoration: none; transition: color 0.2s ease; } .site-footer a:hover { color: var(--color-yellow-100); } .site-footer .footer-logo { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: flex-start; } .site-footer .footer-logo .footer-logo-img { max-width: 202px; height: auto; /* Mustard yellow filter for SVG logo */ filter: brightness(0) saturate(100%) invert(64%) sepia(71%) saturate(407%) hue-rotate(1deg) brightness(101%) contrast(101%); } .site-footer .footer-badge { display: flex; align-items: center; justify-content: flex-start; margin-left: 2rem; } .site-footer .footer-badge .footer-badge-image { max-width: 120px; margin-top: 0; } .site-footer .footer-badge .footer-badge-image img { width: 100%; height: auto; display: block; } .footer-desktop .site-footer .footer-badge { align-items: flex-start; justify-content: center; margin-left: 0; } .footer-desktop .site-footer .footer-badge .footer-badge-image { max-width: 140px; min-width: 120px; margin-top: -10px; } .footer-desktop .site-footer .footer-badge .footer-badge-image img { width: 100%; height: auto; max-width: none; } .site-footer address { font-style: normal; margin-bottom: 1.5rem; font-size: var(--footer-text-size); line-height: 1.5; } .site-footer .footer-menu { list-style: none; padding: 0; margin: 0; margin-top: -18px; } .site-footer .footer-menu li { margin-bottom: 0.75rem; } .site-footer .footer-newsletter { display: flex; flex-direction: column; width: 100%; } .site-footer .footer-newsletter .gform_wrapper .gform_heading .gform_description { font-weight: 500; } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_fields { -moz-column-gap: initial; column-gap: initial; display: flex; flex-flow: row nowrap; width: 100%; } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_fields .gfield { width: 100%; min-width: 175px; } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_fields .gfield label { display: none; visibility: hidden; } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input, .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea { width: 100%; border: none; border-top-left-radius: 50px; border-bottom-left-radius: 50px; background-color: var(--color-blue-100); color: var(--color-blue-300); font-size: 0.9rem; font-family: var(--body-font-family); transition: all 0.3s ease; box-sizing: border-box; } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:focus, .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea:focus { outline: none; background-color: var(--color-white); color: var(--color-blue-100); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_button, .site-footer .footer-newsletter .gform_wrapper .gform_body input[type=submit], .site-footer .footer-newsletter .gform_wrapper .gform_body #gform_submit_button_6 { width: 100%; max-width: 140px; background-color: var(--color-blue-200); color: var(--color-white); border: none; border-top-right-radius: 50px; border-bottom-right-radius: 50px; max-width: 210px; padding: 0; font-size: 16px; font-weight: 600; font-family: var(--body-font-family); cursor: pointer; transition: all 0.3s ease; text-transform: none; letter-spacing: normal; display: flex; align-items: center; justify-content: center; } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_button:hover, .site-footer .footer-newsletter .gform_wrapper .gform_body input[type=submit]:hover, .site-footer .footer-newsletter .gform_wrapper .gform_body #gform_submit_button_6:hover { background-color: var(--color-blue-200); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(29, 71, 90, 0.25); } .site-footer .footer-newsletter .gform_wrapper .gform_body .gform_button:active, .site-footer .footer-newsletter .gform_wrapper .gform_body input[type=submit]:active, .site-footer .footer-newsletter .gform_wrapper .gform_body #gform_submit_button_6:active { transform: translateY(0); background-color: var(--color-primary-dark); } .footer-desktop .site-footer .footer-newsletter { margin-left: auto; } .site-footer .footer-actions { display: flex; gap: 1rem; margin-top: 1rem; margin-bottom: 1.5rem; justify-content: flex-start; width: 100%; } .footer-newsletter .site-footer .footer-actions { margin-top: 1.5rem; } .site-footer .footer-actions .btn-action { padding: 0.35rem 1rem; background-color: var(--color-blue-200); color: var(--footer-text-color); border-radius: 999px; font-size: 14px; font-weight: 700; text-align: center; transition: background-color 0.2s ease; border: none; flex: 1; min-width: 140px; max-width: 200px; } .site-footer .footer-actions .btn-action:hover { background-color: var(--color-blue-300); color: var(--color-blue-100); text-decoration: none; } .site-footer .footer-social { display: flex; gap: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; justify-content: flex-start; } .footer-mobile .site-footer .footer-social { justify-content: center; } .site-footer .footer-social a { display: inline-block; transition: opacity 0.2s ease; } .site-footer .footer-social a:hover { opacity: 0.8; } .site-footer .footer-social .social-icon { width: 45px; height: 45px; display: block; filter: brightness(0) saturate(100%) invert(100%); transition: filter 0.2s ease; } .site-footer .footer-social .social-icon:hover { filter: brightness(0) saturate(100%) invert(64%) sepia(71%) saturate(407%) hue-rotate(1deg) brightness(101%) contrast(101%); } .site-footer .footer-copyright { font-size: var(--footer-small-text-size); display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .site-footer .footer-copyright p { margin-bottom: 0; margin-right: 0; font-size: inherit; flex-shrink: 0; } .site-footer .footer-legal-links { font-size: var(--footer-small-text-size); display: flex; align-items: center; gap: 0.75rem; flex-shrink: 1; } .site-footer .footer-legal-links a { white-space: nowrap; } .site-footer .footer-legal-links a:hover { color: var(--color-yellow-100); } .site-footer .footer-legal-links .separator { color: var(--footer-text-color); opacity: 0.7; flex-shrink: 0; margin: 0 0.25rem; } .site-footer .footer-desktop { display: none; padding: var(--footer-padding-desktop); } .site-footer .footer-desktop .footer-top { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2rem; margin-bottom: var(--footer-section-gap); } .site-footer .footer-desktop .footer-top .footer-column { flex: 0 1 auto; } .site-footer .footer-desktop .footer-top .footer-branding { flex: 0 0 auto; margin-right: 0.5rem; } .site-footer .footer-desktop .footer-top .footer-badge { flex: 0 1 150px; margin-right: 1rem; display: flex; align-items: flex-start; justify-content: center; min-width: 120px; } .site-footer .footer-desktop .footer-top .footer-navigation { flex: 0 1 200px; margin-right: 1rem; } .site-footer .footer-desktop .footer-top .footer-menu-links { flex: 0 1 200px; margin-right: 1rem; } .site-footer .footer-desktop .footer-top .footer-newsletter { flex: 1 1 300px; max-width: 400px; margin-left: auto; } .site-footer .footer-desktop .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--footer-divider-color); } .site-footer .footer-desktop .footer-bottom .footer-social { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; } .site-footer .footer-desktop .footer-bottom .footer-social .social-icon { width: 32px; height: 32px; } .site-footer .footer-desktop .footer-bottom .footer-copyright { flex: 1; max-width: 70%; text-align: left; justify-content: flex-start; } .site-footer .footer-desktop .footer-bottom .footer-copyright p { margin-bottom: 0; } .site-footer .footer-desktop .footer-bottom .footer-copyright .footer-legal-links { margin-top: 0; } .site-footer .footer-mobile { padding: var(--footer-padding-mobile); display: flex; flex-direction: column; } .site-footer .footer-mobile .footer-column { width: 100%; } .site-footer .footer-mobile .footer-navigation-container { display: flex; flex-direction: row; justify-content: center; gap: 2rem; width: 100%; margin-bottom: 2rem; padding-top: 26px; } .site-footer .footer-mobile .footer-navigation-container .footer-column { flex: 0 0 auto; width: auto; max-width: 200px; padding-top: 26px; } .site-footer .footer-mobile .footer-branding { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 2rem; flex-wrap: wrap; } .site-footer .footer-mobile .footer-branding .footer-logo { margin-bottom: 0; flex: 0 0 auto; } .site-footer .footer-mobile .footer-branding .footer-logo img.footer-logo-img { max-width: 150px; height: auto; } .site-footer .footer-mobile .footer-branding .footer-badge-image { flex: 0 0 auto; } .site-footer .footer-mobile .footer-branding .footer-badge-image img.footer-badge-img { max-width: 100px; height: auto; } .site-footer .footer-mobile .footer-branding .footer-social { margin-top: 1rem; margin-bottom: 0; justify-content: center; flex: 1 1 100%; } .site-footer .footer-mobile .footer-branding .footer-social .social-icon { width: 28px; height: 28px; } .site-footer .footer-mobile .footer-badge { display: none; } .site-footer .footer-mobile .footer-newsletter { display: flex; flex-direction: column; align-items: center; text-align: center; } .site-footer .footer-mobile .footer-newsletter .newsletter-content { max-width: 500px; text-align: center; } .site-footer .footer-mobile .footer-newsletter .newsletter-content p { margin-left: auto; margin-right: auto; } .site-footer .footer-mobile .footer-actions { justify-content: center; max-width: 500px; margin-left: auto; margin-right: auto; } .site-footer .footer-mobile .footer-copyright { text-align: center; justify-content: center; flex-direction: column; gap: 1rem; } #footer { display: none; } /* * Header Styles for Travel World * Based on Figma design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=199-1269 */ #menu-main-menu { display: flex; justify-content: space-evenly; gap: 1rem; width: auto; max-width: none; } .site-header { --header-gap: 0; --header-max-width: 1280px; --header-background-color: var(--color-blue-100); --header-text-color: var(--color-white); --header-border-color: transparent; --header-logo-filter: none; --logo-height: 45px; position: absolute; width: 100%; top: 0px; left: 0; right: 0; z-index: 100; padding: var(--header-padding-top) 0 var(--header-padding-bottom); background-color: var(--header-background-color); color: var(--header-text-color); border-bottom: 1px solid var(--header-border-color); transition: all 0.3s ease; display: flex; align-items: center; } .site-header.is-sticky { position: fixed; width: 100%; max-width: 100%; left: 0; right: 0; animation: slideDown 0.3s ease; } .site-header.is-sticky .container { max-width: var(--header-max-width); width: 100%; margin-left: auto; margin-right: auto; } .site-header .container { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-left: auto; margin-right: auto; } .site-header .logo { display: flex; align-items: center; min-width: 0; flex: 0 0 auto; } .site-header .logo img, .site-header .logo svg { width: 100%; max-width: 224px; height: auto; -o-object-fit: contain; object-fit: contain; filter: var(--header-logo-filter); transition: filter 0.3s ease; } .site-header .main-nav { display: none; width: auto; overflow: visible; } .site-header .main-nav ul, .site-header .main-nav .primary-menu { list-style: none; margin: 0; padding: 0; width: auto; } .site-header .main-nav ul:not(.flex), .site-header .main-nav .primary-menu:not(.flex) { display: flex; justify-content: center; gap: 3.5rem; } .site-header .main-nav a { font-weight: 700; color: var(--header-text-color); text-decoration: none; transition: color 0.3s ease; padding: 0.5rem 0.25rem; } .primary-menu:not([class*=text-]) .site-header .main-nav a { font-size: 16px; } .site-header .main-nav a:hover { color: var(--color-secondary); } .site-header .header-actions { display: flex; align-items: center; gap: 1.5rem; } .site-header .header-actions .search-icon { font-size: 1.2rem; color: var(--header-text-color); transition: color 0.3s ease; } .site-header .header-actions .search-icon:hover { color: var(--color-secondary); } .site-header .header-actions .book-trip-btn { position: relative; display: inline-block; text-decoration: none; transition: transform 0.3s ease; width: 146px; height: 48px; background: none; border: none; padding: 0; } .site-header .header-actions .book-trip-btn .ticket-button-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: none; } .site-header .header-actions .book-trip-btn .ticket-button-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .site-header .header-actions .book-trip-btn .ticket-button-text { position: relative; z-index: 1; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; color: var(--color-blue-100); text-align: center; line-height: 1.5em; padding: 0 10px; } .site-header .header-actions .book-trip-btn:hover { transform: scale(1.05); } .site-header .header-actions .mobile-menu-toggle { display: block; margin-left: 1rem; background: none; border: none; cursor: pointer; padding: 0.5rem; } .site-header .header-actions .mobile-menu-toggle .menu-toggle-icon { display: block; width: 29px; height: 2px; background-color: var(--header-text-color); position: relative; } .site-header .header-actions .mobile-menu-toggle .menu-toggle-icon::before, .site-header .header-actions .mobile-menu-toggle .menu-toggle-icon::after { content: ""; position: absolute; width: 100%; height: 2px; background-color: var(--header-text-color); left: 0; transition: transform 0.3s ease; } .site-header .header-actions .mobile-menu-toggle .menu-toggle-icon::before { top: -8px; } .site-header .header-actions .mobile-menu-toggle .menu-toggle-icon::after { bottom: -8px; } .site-header .header-row { display: grid; justify-content: space-between; grid-template-columns: minmax(var(--global-gutter), 1fr) minmax(0, var(--global-width)) minmax(var(--global-gutter), 1fr); padding-top: var(--header-padding-top); padding-bottom: var(--header-padding-bottom); grid-template-areas: "start content end"; width: 100%; } .site-header .header-row > * { grid-column: content/span 1; } .site-header .header-cell { display: flex; flex-flow: column nowrap; } .site-header .logo-cell { max-width: 100%; } .site-header .logo-cell .logo img, .site-header .logo-cell .logo svg { height: var(--logo-height); width: auto; max-width: 100%; } .home .site-header, .site-header.home-header { --header-background-color: transparent; --header-text-color: var(--color-white); --header-border-color: transparent; background-color: transparent !important; height: 120px !important; } .home .site-header.scrolled, .home .site-header[data-scrolled=true], .site-header.home-header.scrolled, .site-header.home-header[data-scrolled=true] { top: 0px; background-color: var(--color-blue-100) !important; transition: background-color 0.3s ease; } .home .site-header.scrolled.is-sticky, .home .site-header[data-scrolled=true].is-sticky, .site-header.home-header.scrolled.is-sticky, .site-header.home-header[data-scrolled=true].is-sticky { width: 100%; max-width: 100%; overflow-x: hidden; } .home .site-header.scrolled.is-sticky .container, .home .site-header[data-scrolled=true].is-sticky .container, .site-header.home-header.scrolled.is-sticky .container, .site-header.home-header[data-scrolled=true].is-sticky .container { max-width: var(--header-max-width); width: 100%; overflow-x: visible; } .internal-header { --header-background-color: var(--color-blue-100); --header-text-color: var(--color-white); --header-border-color: transparent; position: relative; } .internal-header .container { max-width: var(--header-max-width); width: 100%; margin: 0 auto; box-sizing: border-box; overflow-x: visible; } .site-header.is-sticky.scrolled, .site-header.home-header.is-sticky.scrolled, .site-header.internal-header.is-sticky { width: 100vw; max-width: 100vw; left: 0; right: 0; overflow-x: hidden; box-sizing: border-box; } .site-header.is-sticky.scrolled .container, .site-header.home-header.is-sticky.scrolled .container, .site-header.internal-header.is-sticky .container { max-width: var(--header-max-width); width: 100%; margin: 0 auto; box-sizing: border-box; overflow-x: visible; } .site-header.is-sticky.scrolled .container .main-nav, .site-header.home-header.is-sticky.scrolled .container .main-nav, .site-header.internal-header.is-sticky .container .main-nav { flex-shrink: 0; min-width: 0; } .site-header.is-sticky.scrolled .container .main-nav ul, .site-header.is-sticky.scrolled .container .main-nav .primary-menu, .site-header.home-header.is-sticky.scrolled .container .main-nav ul, .site-header.home-header.is-sticky.scrolled .container .main-nav .primary-menu, .site-header.internal-header.is-sticky .container .main-nav ul, .site-header.internal-header.is-sticky .container .main-nav .primary-menu { flex-wrap: nowrap; overflow: visible; } .site-header.is-sticky.scrolled .container .header-actions, .site-header.home-header.is-sticky.scrolled .container .header-actions, .site-header.internal-header.is-sticky .container .header-actions { flex-shrink: 0; min-width: -moz-fit-content; min-width: fit-content; } .mobile-menu-panel { position: fixed; top: 0; right: -320px; width: 320px; height: 100%; background-color: var(--color-blue-100); z-index: 1000; transition: right 0.3s ease; overflow-y: auto; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); } .mobile-menu-panel.is-active { right: 0; } .mobile-menu-panel .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-menu-panel .mobile-menu-header .mobile-logo { max-width: 180px; } .mobile-menu-panel .mobile-menu-header .mobile-logo img { max-height: 40px; width: auto; } .mobile-menu-panel .mobile-menu-header .mobile-menu-close { width: 44px; height: 44px; background-color: transparent; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } .mobile-menu-panel .mobile-menu-header .mobile-menu-close .close-icon { position: relative; width: 24px; height: 24px; } .mobile-menu-panel .mobile-menu-header .mobile-menu-close .close-icon::before, .mobile-menu-panel .mobile-menu-header .mobile-menu-close .close-icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: var(--color-white); } .mobile-menu-panel .mobile-menu-header .mobile-menu-close .close-icon::before { transform: rotate(45deg); } .mobile-menu-panel .mobile-menu-header .mobile-menu-close .close-icon::after { transform: rotate(-45deg); } .mobile-menu-panel .mobile-menu-content { padding: 1.5rem 1rem; } .mobile-menu-panel .mobile-menu-content .mobile-navigation { margin-bottom: 0.5rem; } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu { list-style: none; padding: 0; margin: 0; } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li { margin-bottom: 0.5rem; } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li:last-child { margin-bottom: 0; } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li a { display: block; padding: 0.75rem 1rem; color: var(--color-white); font-size: 1.125rem; font-weight: 600; text-decoration: none; border-radius: 4px; transition: background-color 0.2s ease; } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li a:hover, .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li a:focus { background-color: rgba(255, 255, 255, 0.1); } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li .sub-menu { list-style: none; padding: 0 0 0 1.5rem; margin: 0.5rem 0 0; } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li .sub-menu li { margin-bottom: 0.5rem; } .mobile-menu-panel .mobile-menu-content .mobile-navigation .mobile-menu li .sub-menu li a { padding: 0.5rem 1rem; font-size: 1rem; font-weight: 400; } .mobile-menu-panel .mobile-menu-content .mobile-search { margin-bottom: 2rem; } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form { display: flex; position: relative; } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form label { flex: 1; } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form .mobile-search-field { width: 100%; padding: 0.75rem 1rem; padding-right: 3rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; background-color: rgba(255, 255, 255, 0.1); color: var(--color-white); font-size: 1rem; } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form .mobile-search-field::-moz-placeholder { color: rgba(255, 255, 255, 0.7); } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form .mobile-search-field::placeholder { color: rgba(255, 255, 255, 0.7); } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form .mobile-search-field:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form .mobile-search-submit { position: absolute; right: 0; top: 0; height: 100%; width: 3rem; background-color: transparent; border: none; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-menu-panel .mobile-menu-content .mobile-search .mobile-search-form .mobile-search-submit:hover { color: var(--color-amber-500); } .mobile-menu-panel .mobile-menu-content .mobile-book-container, .mobile-menu-panel .mobile-menu-content .mobile-contact-container { text-align: left; padding-left: 15px; margin-bottom: 1rem; } .mobile-menu-panel .mobile-menu-content .mobile-book-container .ticket-button, .mobile-menu-panel .mobile-menu-content .mobile-contact-container .ticket-button { display: inline-block; text-decoration: none; transition: transform 0.3s ease; width: 146px; height: 48px; background: none; border: none; padding: 0; } .mobile-menu-panel .mobile-menu-content .mobile-book-container .ticket-button .ticket-button-wrapper, .mobile-menu-panel .mobile-menu-content .mobile-contact-container .ticket-button .ticket-button-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: none; } .mobile-menu-panel .mobile-menu-content .mobile-book-container .ticket-button .ticket-button-bg, .mobile-menu-panel .mobile-menu-content .mobile-contact-container .ticket-button .ticket-button-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .mobile-menu-panel .mobile-menu-content .mobile-book-container .ticket-button .ticket-button-text, .mobile-menu-panel .mobile-menu-content .mobile-contact-container .ticket-button .ticket-button-text { position: relative; z-index: 1; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px; color: var(--color-blue-100); text-align: center; line-height: 1.2em; padding: 0 8px; } .mobile-menu-panel .mobile-menu-content .mobile-book-container .ticket-button:hover, .mobile-menu-panel .mobile-menu-content .mobile-contact-container .ticket-button:hover { transform: scale(1.05); } .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .mobile-menu-overlay.is-active { opacity: 1; visibility: visible; } .top-row { background: var(--color-primary); color: var(--color-white); --header-padding-top: 5px; --header-padding-bottom: 5px; display: none !important; } .top-row a { color: var(--color-white); } .top-row a:hover, .top-row a:active, .top-row a:focus { color: var(--color-light-gray); } .top-row a:active { color: var(--color-tertiary-light); } .top-row .info-cell { display: flex; gap: 10px; justify-self: flex-end; align-items: center; } .top-row .info-cell address, .top-row .info-cell a { font-style: normal; font-size: var(--fluid-body-sm); } .main-row { --header-padding-top: 0.8em; --header-padding-bottom: 0.8em; } .row-wrap { display: flex; justify-content: space-between; align-items: center; } #primary-navigation ul { align-items: center; } #primary-navigation ul a { font-weight: 600; font-size: 0.85rem; } #mobile-nav { flex: 1; align-self: center; margin: 0 auto; /*.callout-link { margin-top: auto; margin-bottom: 40px; a { @extend .fancy-btn; background-color: $secondary-color; font-size: var(--fluid-body); color: white !important; } }*/ } #mobile-nav ul { height: 100%; } #mobile-nav li { margin-bottom: 0.8em; } #mobile-nav li a { align-self: center; font-size: var(--fluid-h6); } #mobile-nav li > ul { padding-top: 0; } #mobile-nav li > ul a { font-size: calc(var(--fluid-body-sm) * 1.2); font-weight: 900; padding-top: 0.4em; padding-bottom: 0.4em; padding-left: 1em; } #navigation-modal [data-bm-card] { height: 100%; background-color: var(--color-primary); } #navigation-modal [data-bm-close] { color: var(--color-white); } #navigation-modal .card-header { width: 100%; display: flex; justify-content: space-between; padding: 20px; } #navigation-modal .logo-container { display: flex; } #navigation-modal .logo-container img { width: 100%; height: 70px; } #navigation-modal [data-bm-card] { display: flex; flex-flow: column nowrap; } #navigation-modal .bm-card-inner { display: flex; flex-flow: column nowrap; padding-top: 50px; flex-grow: 1; } #navigation-modal a { font-size: var(--fluid-body); --bm-dropdown-arrow-color: var(--color-primary); } #navigation-modal .logo-container { margin-top: 0.5rem; } #navigation-modal .logo-container img { height: 100px; margin: 0 auto; filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.2)); align-self: stretch; } #navigation-modal .soc-grid { margin-top: auto; margin-left: auto; margin-right: auto; --icon-color: white; display: flex; align-self: flex-end; align-items: center; align-content: center; justify-content: center; } .bm-card-inner { max-width: 100%; margin: 0 auto; width: 375px; } #mobile-nav-button { display: flex; } /* Better Menu Integration for Travel World Navigation */ .main-nav [data-better-menu=horizontal] ul li { position: relative; /* Better Menu dropdown arrow styling - subtle and clean */ /* Sub-menu styling with Better Menu data-bm-active support */ /* Fallback hover states for CSS-only hover */ /* Better Menu active state support */ } .main-nav [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow] { display: inline-flex; align-items: center; margin-left: 0.25rem; color: currentColor; opacity: 0.7; transition: all 0.3s ease; } .main-nav [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow] svg { width: 8px; height: 8px; color: currentColor; } .main-nav [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow]:hover { opacity: 1; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #c2dbe7; /* Light blue background */ border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0; /* Clean rectangular design like reference */ min-width: -moz-max-content; min-width: max-content; /* Dynamic width based on content */ width: auto; /* Let content determine width */ height: auto; /* Let content determine height */ padding: 0; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: 1000; /* Show when Better Menu activates it */ } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu[data-bm-active] { display: flex; flex-direction: column; opacity: 1; visibility: visible; transform: translateY(0); } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li { margin: 0; border: none !important; outline: none !important; flex-shrink: 0; /* Prevent items from shrinking */ } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #1d475a; /* Dark blue text */ background-color: transparent; padding: 16px 24px; /* More generous padding like reference */ display: block; font-weight: 600; font-size: 16px; /* Slightly larger font */ line-height: 1.2; transition: all 0.2s ease; border: none !important; outline: none !important; text-decoration: none; white-space: nowrap; /* Prevent text wrapping */ } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #477990; /* Medium blue hover */ color: #ffffff; /* White text on hover */ } .main-nav [data-better-menu=horizontal] ul li:hover ul.sub-menu, .main-nav [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor]:hover ~ ul.sub-menu, .main-nav [data-better-menu=horizontal] ul li ul.sub-menu:hover { display: block; opacity: 1; visibility: visible; transform: translateY(0); } .main-nav [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor][data-bm-active] ~ ul.sub-menu { display: block; opacity: 1; visibility: visible; transform: translateY(0); } .sidebar.trip-finder { border: 1px solid var(--color-blue-300); } /** * Main content styles * Handles spacing and adjustments for the fixed header */ .site-main { display: flex; flex-direction: column; min-height: 100vh; } .accordion { border: 1px solid #e0e0e0; } .accordion .header { cursor: pointer; padding: 12px 16px; transition: box-shadow 0.2s; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 4px 4px 0 0; font-weight: 500; display: flex; align-items: center; position: relative; box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1); } .accordion .header.active { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.1); } .accordion .header h3 { margin: 0; font-size: 1.1em; } .accordion .header .accordion-caret { display: inline-block; margin-left: auto; width: 0.75em; height: 0.75em; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: none; border: none; pointer-events: none; /* SVG caret as background */ -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/contain; mask: url("data:image/svg+xml;utf8,") no-repeat center/contain; background-color: #888; } .accordion .header.active .accordion-caret { transform: rotate(180deg); } .accordion .body { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; padding: 0 16px; border-radius: 0 0 4px 4px; } .accordion:last-child { margin-bottom: 0; } #sb-reviews-container-1 .sb-feed-posts { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 1em; } #sb-reviews-container-1 .sb-feed-posts .section-title { width: 340px; margin-top: 3.25em; color: var(--color-blue-100); } #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap { display: flex; width: 400px; max-width: 100%; } #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap .sb-post-item { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; } #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap .sb-post-item .sb-item-author-date-ctn { width: 70%; } #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap .sb-post-item .sb-item-author-date-ctn .sb-item-author-name { font-size: var(--h4-font-size); color: var(--color-blue-100); margin-bottom: 0; } #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap .sb-post-item .sb-item-author-date-ctn .sb-item-author-date { font-weight: 600; color: var(--color-blue-200); margin-bottom: 1em; } #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap .sb-post-item .sb-item-rating { display: flex; width: 30%; justify-content: flex-end; align-items: flex-start; margin-top: 0.5em; } #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap .sb-post-item .sb-item-provider-icon { display: none; } /** * Post Navigation Component * Used for navigating between posts in single post view */ .post-navigation { width: 100%; } .post-navigation .nav-links { display: flex; justify-content: space-between; } .post-navigation .nav-previous, .post-navigation .nav-next { max-width: 45%; } .post-navigation .nav-previous a, .post-navigation .nav-next a { text-decoration: none; display: block; transition: color 0.3s ease; } .post-navigation .nav-previous a:hover .nav-title, .post-navigation .nav-next a:hover .nav-title { color: var(--color-blue-200); text-decoration: underline; } .post-navigation .nav-subtitle { display: block; font-size: var(--small-font-size); color: var(--color-gray); margin-bottom: var(--spacing-xs); font-weight: normal; } .post-navigation .nav-title { font-weight: 600; color: var(--color-primary); font-size: var(--p-font-size); transition: color 0.3s ease; } .post-navigation .nav-previous .nav-subtitle::before { content: "←"; margin-right: var(--spacing-xs); } .post-navigation .nav-next { text-align: right; } .post-navigation .nav-next .nav-subtitle::after { content: "→"; margin-left: var(--spacing-xs); } .trip-finder.quick { display: flex; flex-direction: column; background-color: var(--color-yellow-100); } .trip-finder.quick h2 { font-size: var(--h3-font-size); } .trip-finder.quick .facet-row { display: flex; } /** * Functional better menu styles * Better off not touching this stuff **/ [data-better-menu] { --bm-a-pad-top: 0.5rem; --bm-a-pad-left: 0.25rem; --bm-a-pad-right: 0.25rem; --bm-a-pad-bottom: 0.5rem; --bm-a-color: var(--color-white); --bm-a-color-hover: var(--color-yellow-100); --bm-a-color-active: var(--color-yellow-100); --bm-a-transition: all 0.3s ease; --bm-submenu-width: 225px; --bm-submenu-text-alignment: left; --bm-submenu-item-alignment: flex-start; --bm-vert-submenu-pad: 0.4rem; --bm-dropdown-arrow-height: 10px; --bm-dropdown-arrow-width: 15px; --bm-dropdown-arrow-padding: 6px; --bm-dropdown-arrow-color: var(--color-black); } [data-better-modal] { --bm-transition-duration: 0.4s; --bm-transition-function: ease; --bm-overlay-color: rgba(0, 0, 0, 0.4); } [data-bm-button] { --bm-button-padding-tb: 10px; --bm-button-padding-lr: 10px; --bm-button-background-color: transparent; --bm-button-border: unset; --bm-button-border-radius: 0; --bm-toggle-line-width: 35px; --bm-toggle-line-height: 5px; --bm-toggle-line-gap: 5px; --bm-toggle-line-border-radius: 10px; --bm-toggle-line-color: var(--color-primary); } [data-better-menu] { display: flex; } [data-better-menu] ul, [data-better-menu] li, [data-better-menu] a, [data-better-menu] div { margin: unset; padding: unset; } [data-better-menu] ul { display: flex; list-style: none; } [data-better-menu] ul li { position: relative; display: flex; flex-flow: column nowrap; } [data-better-menu] ul a { width: auto; align-self: var(--bm-submenu-item-alignment); } [data-better-menu] ul ul { visibility: hidden; flex-flow: column nowrap; height: 0; } [data-better-menu] ul [data-bm-dropdown-anchor] { position: relative; display: flex; flex-flow: row nowrap; align-items: center; } [data-better-menu] ul [data-bm-dropdown-anchor] [data-bm-dropdown-arrow] { pointer-events: all; padding: var(--bm-dropdown-arrow-padding); transition: var(--bm-a-transition); transform: scaleY(1); } [data-better-menu] ul [data-bm-dropdown-anchor] [data-bm-dropdown-arrow] svg { height: var(--bm-dropdown-arrow-height); width: var(--bm-dropdown-arrow-width); color: var(--bm-dropdown-arrow-color); pointer-events: none; } [data-better-menu] ul [data-bm-dropdown-anchor][data-bm-active] [data-bm-dropdown-arrow] { transform: scaleY(-1); } [data-better-menu=vertical] ul { flex-flow: column nowrap; } [data-better-menu=vertical] ul li ul { height: 0; } [data-better-menu=vertical] ul li ul[data-bm-active] { visibility: visible; } [data-better-menu=horizontal] ul { flex-flow: row nowrap; align-items: center; } [data-better-menu=horizontal] ul li ul { position: absolute; top: 100%; right: 0; padding: 10px; align-items: var(--bm-submenu-item-alignment); } [data-better-menu=horizontal] ul li ul[data-bm-active] { visibility: visible; } /** * Better Menu Theme file! * Travel World Custom Styling */ [data-better-menu] a { padding: var(--bm-a-pad-top) var(--bm-a-pad-right) var(--bm-a-pad-bottom) var(--bm-a-pad-left); color: var(--bm-a-color); transition: var(--bm-a-transition); text-decoration: none; } [data-better-menu] a:hover, [data-better-menu] a:focus { color: var(--bm-a-color-hover); } [data-better-menu] a:active, [data-better-menu] a[data-bm-active-anchor] { color: var(--bm-a-color-active); } [data-better-menu=vertical] ul li ul { position: relative; height: -moz-max-content; height: max-content; max-height: 0; padding: 0; overflow: hidden; transition: max-height 0.5s ease, visibility 0.5s ease, padding 0.5s ease, transform 0.5s ease; } [data-better-menu=vertical] ul li ul[data-bm-active] { padding: var(--bm-vert-submenu-pad); max-height: 300px; visibility: visible; } [data-better-menu=horizontal] ul li ul { position: absolute; top: 100%; height: auto; width: var(--bm-submenu-width); transition: transform 0.3s ease, visibility 0.3s ease; transform-origin: top; transform: scaleY(0); background: white; box-shadow: 2px 2px 10px rgba(var(--color-black), 0.3); z-index: 100; } [data-better-menu=horizontal] ul li ul[data-bm-active] { transform: scaleY(1); visibility: visible; } /* Travel World Custom Dropdown Styling - Better Menu Integration */ [data-better-menu=horizontal] ul li { position: relative; /* Better Menu dropdown arrow styling - subtle and clean */ /* Sub-menu styling with Better Menu data-bm-active support */ /* Fallback hover states for CSS-only hover */ /* Better Menu active state support */ } [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow] { display: inline-flex; align-items: center; margin-left: 0.25rem; color: currentColor; opacity: 0.7; transition: all 0.3s ease; } [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow] svg { width: 8px; height: 8px; color: currentColor; } [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow]:hover { opacity: 1; } [data-better-menu=horizontal] ul li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #c2dbe7; /* Light blue background */ border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0; /* Clean rectangular design like reference */ min-width: -moz-max-content; min-width: max-content; /* Dynamic width based on content */ width: auto; /* Let content determine width */ height: auto; /* Let content determine height */ padding: 0; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: 1001; /* Higher than sticky header z-index (100) */ /* Show when Better Menu activates it */ } [data-better-menu=horizontal] ul li ul.sub-menu[data-bm-active] { display: flex; flex-direction: column; opacity: 1; visibility: visible; transform: translateY(0); } [data-better-menu=horizontal] ul li ul.sub-menu li { margin: 0 !important; padding: 16px 0px 0px !important; height: auto !important; border: none !important; outline: none !important; flex-shrink: 0; /* Prevent items from shrinking */ width: 100%; /* Ensure full width for consistent hover */ } [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #1d475a; /* Dark blue text */ background-color: transparent; padding: 12px 62px; /* More generous padding like reference */ display: block; font-weight: 600; font-size: 16px; /* Slightly larger font */ transition: all 0.2s ease; border: none !important; outline: none !important; text-decoration: none; white-space: nowrap; /* Prevent text wrapping */ width: 100%; /* Ensure full width */ box-sizing: border-box; /* Include padding in width calculation */ margin: 0 !important; /* Remove any inherited margins */ } [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #477990 !important; /* Medium blue hover */ color: #ffffff !important; /* White text on hover */ } [data-better-menu=horizontal] ul li:hover ul.sub-menu, [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor]:hover ~ ul.sub-menu, [data-better-menu=horizontal] ul li ul.sub-menu:hover { display: block; opacity: 1; visibility: visible; transform: translateY(0); } [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor][data-bm-active] ~ ul.sub-menu { display: block; opacity: 1; visibility: visible; transform: translateY(0); } /* Screen reader text should be hidden */ [data-better-menu] .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Ensure sub-menus are visible when header is sticky */ .site-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu { z-index: 1001 !important; /* Higher than sticky header */ position: absolute !important; top: 100% !important; left: 0 !important; } /* Additional z-index fix for sticky menu dropdowns */ .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li ul.sub-menu { z-index: 1001 !important; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li ul.sub-menu[data-bm-active] { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; } /* Hover states for sticky menu */ .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li:hover ul.sub-menu, .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor]:hover ~ ul.sub-menu, .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li ul.sub-menu:hover { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; } /* Additional override to ensure no conflicting styles */ .main-nav [data-better-menu=horizontal] ul li ul.sub-menu { background-color: #c2dbe7 !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; min-width: -moz-max-content !important; min-width: max-content !important; width: auto !important; height: auto !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu[data-bm-active] { display: flex !important; flex-direction: column !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li { border: none !important; outline: none !important; box-shadow: none !important; flex-shrink: 0 !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #1d475a !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 8px 24px !important; font-size: 16px !important; white-space: nowrap !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #477990 !important; color: #ffffff !important; } /* Override the ::before pseudo element causing spacing issues */ [data-better-menu=horizontal] ul li ul.sub-menu li::before { content: none !important; float: none !important; } /* Override the ::before pseudo element causing spacing issues */ .main-nav a::after { content: none !important; } /* Fix sticky header overflow to prevent dropdown clipping */ .site-header.is-sticky, .site-header.is-sticky.scrolled, .site-header.home-header.is-sticky.scrolled { overflow: visible !important; } .site-header.is-sticky .container, .site-header.is-sticky.scrolled .container, .site-header.home-header.is-sticky.scrolled .container { overflow: visible !important; } .site-header.is-sticky .main-nav, .site-header.is-sticky #primary-navigation, .site-header.is-sticky.scrolled .main-nav, .site-header.is-sticky.scrolled #primary-navigation, .site-header.home-header.is-sticky.scrolled .main-nav, .site-header.home-header.is-sticky.scrolled #primary-navigation { overflow: visible !important; } /* Internal header dropdown color scheme - reversed colors for better contrast */ .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu { background-color: #1d475a !important; } .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #ffffff !important; } .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #477990 !important; color: #ffffff !important; } /* Internal header sticky dropdown color scheme */ .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu { background-color: #1d475a !important; } .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu li a, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #ffffff !important; } .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu li a:focus, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #c2dbe7 !important; color: #1d475a !important; } /** * Better Menu Theme file! * Travel World Custom Styling */ [data-better-menu] a { padding: var(--bm-a-pad-top) var(--bm-a-pad-right) var(--bm-a-pad-bottom) var(--bm-a-pad-left); color: var(--bm-a-color); transition: var(--bm-a-transition); text-decoration: none; } [data-better-menu] a:hover, [data-better-menu] a:focus { color: var(--bm-a-color-hover); } [data-better-menu] a:active, [data-better-menu] a[data-bm-active-anchor] { color: var(--bm-a-color-active); } [data-better-menu=vertical] ul li ul { position: relative; height: -moz-max-content; height: max-content; max-height: 0; padding: 0; overflow: hidden; transition: max-height 0.5s ease, visibility 0.5s ease, padding 0.5s ease, transform 0.5s ease; } [data-better-menu=vertical] ul li ul[data-bm-active] { padding: var(--bm-vert-submenu-pad); max-height: 300px; visibility: visible; } [data-better-menu=horizontal] ul li ul { position: absolute; top: 100%; height: auto; width: var(--bm-submenu-width); transition: transform 0.3s ease, visibility 0.3s ease; transform-origin: top; transform: scaleY(0); background: white; box-shadow: 2px 2px 10px rgba(var(--color-black), 0.3); z-index: 100; } [data-better-menu=horizontal] ul li ul[data-bm-active] { transform: scaleY(1); visibility: visible; } /* Travel World Custom Dropdown Styling - Better Menu Integration */ [data-better-menu=horizontal] ul li { position: relative; /* Better Menu dropdown arrow styling - subtle and clean */ /* Sub-menu styling with Better Menu data-bm-active support */ /* Fallback hover states for CSS-only hover */ /* Better Menu active state support */ } [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow] { display: inline-flex; align-items: center; margin-left: 0.25rem; color: currentColor; opacity: 0.7; transition: all 0.3s ease; } [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow] svg { width: 8px; height: 8px; color: currentColor; } [data-better-menu=horizontal] ul li [data-bm-dropdown-arrow]:hover { opacity: 1; } [data-better-menu=horizontal] ul li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #c2dbe7; /* Light blue background */ border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0; /* Clean rectangular design like reference */ min-width: -moz-max-content; min-width: max-content; /* Dynamic width based on content */ width: auto; /* Let content determine width */ height: auto; /* Let content determine height */ padding: 0; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: 1001; /* Higher than sticky header z-index (100) */ /* Show when Better Menu activates it */ } [data-better-menu=horizontal] ul li ul.sub-menu[data-bm-active] { display: flex; flex-direction: column; opacity: 1; visibility: visible; transform: translateY(0); } [data-better-menu=horizontal] ul li ul.sub-menu li { margin: 0 !important; padding: 16px 0px 0px !important; height: auto !important; border: none !important; outline: none !important; flex-shrink: 0; /* Prevent items from shrinking */ width: 100%; /* Ensure full width for consistent hover */ } [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #1d475a; /* Dark blue text */ background-color: transparent; padding: 12px 62px; /* More generous padding like reference */ display: block; font-weight: 600; font-size: 16px; /* Slightly larger font */ transition: all 0.2s ease; border: none !important; outline: none !important; text-decoration: none; white-space: nowrap; /* Prevent text wrapping */ width: 100%; /* Ensure full width */ box-sizing: border-box; /* Include padding in width calculation */ margin: 0 !important; /* Remove any inherited margins */ } [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #477990 !important; /* Medium blue hover */ color: #ffffff !important; /* White text on hover */ } [data-better-menu=horizontal] ul li:hover ul.sub-menu, [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor]:hover ~ ul.sub-menu, [data-better-menu=horizontal] ul li ul.sub-menu:hover { display: block; opacity: 1; visibility: visible; transform: translateY(0); } [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor][data-bm-active] ~ ul.sub-menu { display: block; opacity: 1; visibility: visible; transform: translateY(0); } /* Screen reader text should be hidden */ [data-better-menu] .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Ensure sub-menus are visible when header is sticky */ .site-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu { z-index: 1001 !important; /* Higher than sticky header */ position: absolute !important; top: 100% !important; left: 0 !important; } /* Additional z-index fix for sticky menu dropdowns */ .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li ul.sub-menu { z-index: 1001 !important; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li ul.sub-menu[data-bm-active] { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; } /* Hover states for sticky menu */ .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li:hover ul.sub-menu, .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li [data-bm-dropdown-anchor]:hover ~ ul.sub-menu, .site-header.is-sticky .main-nav [data-better-menu=horizontal] ul li ul.sub-menu:hover { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; } /* Additional override to ensure no conflicting styles */ .main-nav [data-better-menu=horizontal] ul li ul.sub-menu { background-color: #c2dbe7 !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; min-width: -moz-max-content !important; min-width: max-content !important; width: auto !important; height: auto !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu[data-bm-active] { display: flex !important; flex-direction: column !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li { border: none !important; outline: none !important; box-shadow: none !important; flex-shrink: 0 !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #1d475a !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 8px 24px !important; font-size: 16px !important; white-space: nowrap !important; } .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .main-nav [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #477990 !important; color: #ffffff !important; } /* Override the ::before pseudo element causing spacing issues */ [data-better-menu=horizontal] ul li ul.sub-menu li::before { content: none !important; float: none !important; } /* Override the ::before pseudo element causing spacing issues */ .main-nav a::after { content: none !important; } /* Fix sticky header overflow to prevent dropdown clipping */ .site-header.is-sticky, .site-header.is-sticky.scrolled, .site-header.home-header.is-sticky.scrolled { overflow: visible !important; } .site-header.is-sticky .container, .site-header.is-sticky.scrolled .container, .site-header.home-header.is-sticky.scrolled .container { overflow: visible !important; } .site-header.is-sticky .main-nav, .site-header.is-sticky #primary-navigation, .site-header.is-sticky.scrolled .main-nav, .site-header.is-sticky.scrolled #primary-navigation, .site-header.home-header.is-sticky.scrolled .main-nav, .site-header.home-header.is-sticky.scrolled #primary-navigation { overflow: visible !important; } /* Internal header dropdown color scheme - reversed colors for better contrast */ .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu { background-color: #1d475a !important; } .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #ffffff !important; } .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .site-header.internal-header [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #477990 !important; color: #ffffff !important; } /* Internal header sticky dropdown color scheme */ .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu { background-color: #1d475a !important; } .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu li a, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu li a { color: #ffffff !important; } .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .site-header.internal-header.is-sticky [data-better-menu=horizontal] ul li ul.sub-menu li a:focus, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu li a:hover, .site-header.internal-header.is-sticky.scrolled [data-better-menu=horizontal] ul li ul.sub-menu li a:focus { background-color: #c2dbe7 !important; color: #1d475a !important; } [data-bm-button] { position: relative; cursor: pointer; background: unset; border: unset; } [data-better-modal] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; visibility: hidden; z-index: 1000; } [data-better-modal][data-bm-is-open] { visibility: visible; } [data-better-modal] [data-bm-overlay] { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; } [data-better-modal] [data-bm-card] { max-width: 100vw; max-height: 100vh; overflow: auto; z-index: 2; } [data-better-modal][data-bm-position=top] { justify-content: center; align-items: flex-start; } [data-better-modal][data-bm-position=left] { justify-content: flex-start; align-items: center; } [data-better-modal][data-bm-position=right] { justify-content: flex-end; align-items: center; } [data-better-modal][data-bm-position=bottom] { justify-content: center; align-items: flex-end; } [data-better-modal][data-bm-position=center] { justify-content: center; align-items: center; } body[data-bm-offcanvas] { position: relative; } body { margin: 0; } body:not([data-s-loaded]) * { transition: none !important; } [data-bm-button] { display: flex; flex-flow: column nowrap; text-align: center; justify-content: center; align-items: center; position: relative; padding: var(--bm-button-padding-tb) var(--bm-button-padding-lr); background: var(--bm-button-background-color); border: var(--bm-button-border); } [data-bm-button][data-bm-close] .close-icon { width: var(--bm-toggle-line-width); } .toggle-line { display: flex; width: var(--bm-toggle-line-width); height: var(--bm-toggle-line-height); margin-bottom: var(--bm-toggle-line-gap); border-radius: var(--bm-toggle-line-border-radius); background: var(--bm-toggle-line-color); } [data-bm-animation] { transition-duration: var(--bm-transition-duration); transition-timing-function: var(--bm-transition-duration); } [data-bm-animation~=slide-top] { transform: translateY(-100%); } [data-bm-animation~=slide-top][data-bm-active] { transform: translateY(0%); } [data-bm-animation~=slide-left] { transform: translate(-100%); } [data-bm-animation~=slide-left][data-bm-active] { transform: translate(0%); } [data-bm-animation~=slide-right] { transform: translate(100%); } [data-bm-animation~=slide-right][data-bm-active] { transform: translate(0%); } [data-bm-animation~=slide-bottom] { transform: translateY(100%); } [data-bm-animation~=slide-bottom][data-bm-active] { transform: translateY(0%); } [data-bm-animation~=fade] { opacity: 0; } [data-bm-animation~=fade][data-bm-active] { opacity: 1; } [data-better-modal] [data-bm-overlay] { transition: background var(--bm-transition-duration) var(--bm-transition-timing-function); background: transparent; } [data-better-modal] [data-bm-overlay][data-bm-active] { background: var(--bm-overlay-color); } [data-better-modal] [data-better-modal][data-bm-animation=bottom] { transform-origin: top center; bottom: 0; left: 50%; transform: translate(-50%, 100%); } [data-better-modal] [data-better-modal][data-bm-animation=bottom][data-bm-is-open] { transform: translate(-50%, 0%); } [data-better-modal][data-bm-animation=center] { transform-origin: center center; width: 80%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } [data-better-modal][data-bm-animation=center][data-bm-is-open] { transform: translate(-50%, -50%); opacity: 1; } [data-bm-button] { display: flex; flex-flow: column nowrap; text-align: center; justify-content: center; align-items: center; position: relative; padding: var(--bm-button-padding-tb) var(--bm-button-padding-lr); background: var(--bm-button-background-color); border: var(--bm-button-border); } [data-bm-button][data-bm-close] .close-icon { width: var(--bm-toggle-line-width); } .toggle-line { display: flex; width: var(--bm-toggle-line-width); height: var(--bm-toggle-line-height); margin-bottom: var(--bm-toggle-line-gap); border-radius: var(--bm-toggle-line-border-radius); background: var(--bm-toggle-line-color); } [data-bm-animation] { transition-duration: var(--bm-transition-duration); transition-timing-function: var(--bm-transition-duration); } [data-bm-animation~=slide-top] { transform: translateY(-100%); } [data-bm-animation~=slide-top][data-bm-active] { transform: translateY(0%); } [data-bm-animation~=slide-left] { transform: translate(-100%); } [data-bm-animation~=slide-left][data-bm-active] { transform: translate(0%); } [data-bm-animation~=slide-right] { transform: translate(100%); } [data-bm-animation~=slide-right][data-bm-active] { transform: translate(0%); } [data-bm-animation~=slide-bottom] { transform: translateY(100%); } [data-bm-animation~=slide-bottom][data-bm-active] { transform: translateY(0%); } [data-bm-animation~=fade] { opacity: 0; } [data-bm-animation~=fade][data-bm-active] { opacity: 1; } [data-better-modal] [data-bm-overlay] { transition: background var(--bm-transition-duration) var(--bm-transition-timing-function); background: transparent; } [data-better-modal] [data-bm-overlay][data-bm-active] { background: var(--bm-overlay-color); } [data-better-modal] [data-better-modal][data-bm-animation=bottom] { transform-origin: top center; bottom: 0; left: 50%; transform: translate(-50%, 100%); } [data-better-modal] [data-better-modal][data-bm-animation=bottom][data-bm-is-open] { transform: translate(-50%, 0%); } [data-better-modal][data-bm-animation=center] { transform-origin: center center; width: 80%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } [data-better-modal][data-bm-animation=center][data-bm-is-open] { transform: translate(-50%, -50%); opacity: 1; } .oceanic-wave-divider-container { line-height: 0; position: relative; z-index: 0; } .oceanic-wave-divider-container svg.oceanic-wave-divider-svg { display: block; width: 100%; height: auto; color: var(--color-blue-100); position: relative; top: 1px; } .oceanic-blue-mid-divider-container { line-height: 0; position: relative; z-index: 0; } .oceanic-blue-mid-divider-container svg.oceanic-blue-mid-divider-svg { display: block; width: 100%; height: auto; color: var(--color-blue-200); position: relative; top: 1px; } .testimonials-top-wave-divider-container { position: relative; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; margin-top: 67px; margin-left: calc(-50vw + 50%); margin-bottom: -1px; z-index: 1; display: block; } .testimonials-top-wave-divider-svg { display: block; width: 100%; height: auto; position: relative; top: 59px; } .testimonials-top-wave-divider-svg path { display: block; width: 100%; height: 100%; } .testimonials-bottom-wave-divider-container { position: relative; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; margin-left: calc(-50vw + 50%); margin-top: -1px; margin-bottom: -1px; z-index: 1; display: block; } .testimonials-bottom-wave-divider-svg { display: block; width: 100%; height: auto; position: relative; top: -65px; } .testimonials-bottom-wave-divider-svg path { display: block; width: 100%; height: 100%; } .white-wave-divider-container { position: relative; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; margin-left: calc(-50vw + 50%); margin-bottom: -1px; z-index: 1; display: block; } .white-wave-divider-svg { display: block; width: 100%; height: auto; color: var(--color-white); } .white-wave-divider-svg path { display: block; width: 100%; height: 100%; } .white-mid-wave-bottom-divider-container { position: relative; line-height: 0; margin: 0; margin-bottom: -145px; padding: 0; width: 100%; overflow: hidden; } .white-wave-divider-contact-container { position: relative; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; margin-top: 67px; margin-left: calc(-50vw + 50%); margin-bottom: -1px; z-index: 1; display: block; } .ocenaic-lite-wave-divider-svg { display: block; width: 100%; height: auto; color: var(--color-blue-100); } .ocenaic-lite-wave-divider-svg path { display: block; width: 100%; height: 100%; } .white-contact-wave-divider-container { position: relative; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; margin-top: -227px; margin-left: calc(-50vw + 50%); margin-bottom: -1px; z-index: 1; display: block; } .white-contact-wave-divider-svg { display: block; width: 100%; height: auto; color: var(--color-white); } .white-contact-wave-divider-svg path { display: block; width: 100%; height: 100%; } .white-mid-wave-divider-svg { display: block; width: 100%; height: auto; color: var(--color-white); } .white-mid-wave-divider-svg path { display: block; width: 100%; height: 100%; } .bottom-wave-divider-container { position: relative; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; z-index: 1; display: block; margin-top: -1px; } .bottom-wave-divider-svg { display: block; width: 100%; height: auto; } .bottom-wave-divider-svg path { display: block; width: 100%; height: 100%; } .bottom-oceanic-mid-wave-divider-container { position: relative; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; margin-left: calc(-50vw + 50%); margin-top: 0px; margin-bottom: -3px; z-index: 2; display: block; } .bottom-oceanic-mid-wave-divider-svg { display: block; width: 100%; height: auto; } .bottom-oceanic-mid-wave-divider-svg path { display: block; width: 100%; height: 100%; } .trip-wave-divider-container { position: absolute; line-height: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; top: 0; left: 0; z-index: 1; display: block; } .trip-wave-divider-svg { display: block; width: 100%; height: auto; transform: scale(-1, -1); color: var(--color-blue-100); } .trip-wave-divider-svg path { display: block; width: 100%; height: 100%; fill: currentColor; } .search-section { margin-left: auto; margin-right: auto; position: relative; z-index: 10; margin-top: -113px; /* FacetWP Integration Styles */ /* Style FacetWP dropdowns to match the original design */ /* Hide the results div */ /* FacetWP Native Slider Input Styling for Price Field */ } .search-section .search-title { position: relative; top: 20px; color: var(--color-primary); font-family: var(--font-primary, sans-serif); font-weight: 700; padding-left: 32px; padding-right: 32px; } .search-section .search-form { margin: auto; padding-left: 37px; padding-right: 37px; width: 100%; max-width: 100%; } .search-section .search-form .departure-field { display: none; } .search-section .search-form .date-field { display: block; } .search-section .form-group { position: relative; width: 100%; } .search-section .form-control { width: 100%; height: 68px; padding: 10px 28px; border: none; border-radius: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--color-primary); font-family: var(--font-primary, sans-serif); font-weight: 700; font-size: 18px; background-color: var(--color-cream); cursor: pointer; background-image: none; /* Ensure no background image is applied */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Additional selectors to ensure arrows are hidden across browsers */ /* Firefox-specific styling */ } .search-section .form-control::-ms-expand { display: none; } .search-section .form-control::-webkit-calendar-picker-indicator, .search-section .form-control::-webkit-inner-spin-button, .search-section .form-control::-webkit-outer-spin-button { display: none; -webkit-appearance: none; } @-moz-document url-prefix() { .search-section .form-control { background-image: none !important; text-indent: 0.01px; text-overflow: ""; padding-right: 40px; /* Extra padding to ensure text doesn't overlap with custom arrow */ } } .search-section .select-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 24px; height: 24px; color: var(--color-primary); z-index: 2; /* Ensure icon appears above both the select element and the ::after pseudo-element */ font-size: 16px; /* Standardize icon size */ display: flex; align-items: center; justify-content: center; } .search-section .search-button { background-color: var(--color-blue-200); color: var(--color-white); border: none; padding: 10px 40px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; font-family: var(--font-primary, sans-serif); font-size: 17px; height: 44px; white-space: nowrap; margin-top: -48px; width: 190px; text-align: center; justify-self: end; } .search-section .search-button:hover { background-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .search-section .search-button:active { transform: translateY(0); box-shadow: none; } .search-section .form-group.has-value .select-icon { color: var(--color-blue-200); } .search-section .search-error-message { color: var(--color-primary); font-size: 14px; margin-top: 8px; padding: 8px 12px; background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; text-align: center; font-weight: 500; grid-column: 1/-1; } .search-section .search-form { /* More aggressive targeting for FacetWP selects */ /* Date input styling for aggressive targeting */ } .search-section .search-form .facetwp-facet, .search-section .search-form .facetwp-facet-type_of_trip, .search-section .search-form .facetwp-facet-destination, .search-section .search-form .facetwp-facet-earliest_departure, .search-section .search-form .facetwp-facet-latest_return, .search-section .search-form .facetwp-facet-max_price { /* Date input styling for date range facets */ } .search-section .search-form .facetwp-facet select, .search-section .search-form .facetwp-facet-type_of_trip select, .search-section .search-form .facetwp-facet-destination select, .search-section .search-form .facetwp-facet-earliest_departure select, .search-section .search-form .facetwp-facet-latest_return select, .search-section .search-form .facetwp-facet-max_price select { width: 100%; height: 68px; padding: 10px 28px; border: none; border-radius: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--color-primary); font-family: var(--font-primary, sans-serif); font-weight: 700; font-size: 18px; background-color: var(--color-cream); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23003366%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276,9 12,15 18,9%27%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 20px center; background-size: 24px; } .search-section .search-form .facetwp-facet input[type=date], .search-section .search-form .facetwp-facet input[type=text].flatpickr-input, .search-section .search-form .facetwp-facet-type_of_trip input[type=date], .search-section .search-form .facetwp-facet-type_of_trip input[type=text].flatpickr-input, .search-section .search-form .facetwp-facet-destination input[type=date], .search-section .search-form .facetwp-facet-destination input[type=text].flatpickr-input, .search-section .search-form .facetwp-facet-earliest_departure input[type=date], .search-section .search-form .facetwp-facet-earliest_departure input[type=text].flatpickr-input, .search-section .search-form .facetwp-facet-latest_return input[type=date], .search-section .search-form .facetwp-facet-latest_return input[type=text].flatpickr-input, .search-section .search-form .facetwp-facet-max_price input[type=date], .search-section .search-form .facetwp-facet-max_price input[type=text].flatpickr-input { width: 100%; height: 68px; padding: 10px 28px; border: none; border-radius: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--color-primary); font-family: var(--font-primary, sans-serif); font-weight: 700; font-size: 18px; background-color: var(--color-cream); cursor: pointer; } .search-section .search-form .facetwp-facet input[type=date]::-moz-placeholder, .search-section .search-form .facetwp-facet input[type=text].flatpickr-input::-moz-placeholder, .search-section .search-form .facetwp-facet-type_of_trip input[type=date]::-moz-placeholder, .search-section .search-form .facetwp-facet-type_of_trip input[type=text].flatpickr-input::-moz-placeholder, .search-section .search-form .facetwp-facet-destination input[type=date]::-moz-placeholder, .search-section .search-form .facetwp-facet-destination input[type=text].flatpickr-input::-moz-placeholder, .search-section .search-form .facetwp-facet-earliest_departure input[type=date]::-moz-placeholder, .search-section .search-form .facetwp-facet-earliest_departure input[type=text].flatpickr-input::-moz-placeholder, .search-section .search-form .facetwp-facet-latest_return input[type=date]::-moz-placeholder, .search-section .search-form .facetwp-facet-latest_return input[type=text].flatpickr-input::-moz-placeholder, .search-section .search-form .facetwp-facet-max_price input[type=date]::-moz-placeholder, .search-section .search-form .facetwp-facet-max_price input[type=text].flatpickr-input::-moz-placeholder { color: var(--color-primary); opacity: 0.8; } .search-section .search-form .facetwp-facet input[type=date]::placeholder, .search-section .search-form .facetwp-facet input[type=text].flatpickr-input::placeholder, .search-section .search-form .facetwp-facet-type_of_trip input[type=date]::placeholder, .search-section .search-form .facetwp-facet-type_of_trip input[type=text].flatpickr-input::placeholder, .search-section .search-form .facetwp-facet-destination input[type=date]::placeholder, .search-section .search-form .facetwp-facet-destination input[type=text].flatpickr-input::placeholder, .search-section .search-form .facetwp-facet-earliest_departure input[type=date]::placeholder, .search-section .search-form .facetwp-facet-earliest_departure input[type=text].flatpickr-input::placeholder, .search-section .search-form .facetwp-facet-latest_return input[type=date]::placeholder, .search-section .search-form .facetwp-facet-latest_return input[type=text].flatpickr-input::placeholder, .search-section .search-form .facetwp-facet-max_price input[type=date]::placeholder, .search-section .search-form .facetwp-facet-max_price input[type=text].flatpickr-input::placeholder { color: var(--color-primary); opacity: 0.8; } .search-section .search-form select[data-name=type_of_trip], .search-section .search-form select[data-name=destination], .search-section .search-form select[data-name=earliest_departure], .search-section .search-form select[data-name=latest_return], .search-section .search-form select[data-name=max_price], .search-section .search-form .form-group select { width: 100%; height: 68px; padding: 10px 18px; border: none; border-radius: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--color-primary); font-family: var(--font-primary, sans-serif); font-weight: 700; font-size: 18px; background-color: var(--color-cream); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23003366%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276,9 12,15 18,9%27%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 20px center; background-size: 24px; } .search-section .search-form input[data-name=earliest_departure], .search-section .search-form input[data-name=latest_return], .search-section .search-form .form-group.date-field input, .search-section .search-form .facetwp-date, .search-section .search-form .facetwp-date-min, .search-section .search-form .facetwp-date-max, .search-section .search-form input.facetwp-date { width: 100%; height: 68px; padding: 10px 18px; border: none; border-radius: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--color-primary) !important; font-family: var(--font-primary, sans-serif) !important; font-weight: 700 !important; font-size: 18px !important; background-color: var(--color-cream) !important; cursor: pointer; box-shadow: none !important; } .search-section .search-form input[data-name=earliest_departure]::-moz-placeholder, .search-section .search-form input[data-name=latest_return]::-moz-placeholder, .search-section .search-form .form-group.date-field input::-moz-placeholder, .search-section .search-form .facetwp-date::-moz-placeholder, .search-section .search-form .facetwp-date-min::-moz-placeholder, .search-section .search-form .facetwp-date-max::-moz-placeholder, .search-section .search-form input.facetwp-date::-moz-placeholder { color: var(--color-primary) !important; opacity: 1 !important; font-weight: 700 !important; } .search-section .search-form input[data-name=earliest_departure]::placeholder, .search-section .search-form input[data-name=latest_return]::placeholder, .search-section .search-form .form-group.date-field input::placeholder, .search-section .search-form .facetwp-date::placeholder, .search-section .search-form .facetwp-date-min::placeholder, .search-section .search-form .facetwp-date-max::placeholder, .search-section .search-form input.facetwp-date::placeholder { color: var(--color-primary) !important; opacity: 1 !important; font-weight: 700 !important; } .search-section .hidden.results { display: none !important; } .search-section .search-section .facetwp-type-slider { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; height: 68px !important; background-color: var(--color-cream) !important; border-radius: 10px !important; padding: 0 20px !important; } .search-section .search-section .facetwp-type-slider .facetwp-number { border: none !important; background: transparent !important; color: var(--color-primary) !important; font-family: var(--font-primary, sans-serif) !important; font-weight: 700 !important; font-size: 18px !important; flex: 1 !important; height: 100% !important; padding: 0 !important; outline: none !important; } .search-section .search-section .facetwp-type-slider .facetwp-number::-moz-placeholder { color: var(--color-primary) !important; opacity: 0.7 !important; } .search-section .search-section .facetwp-type-slider .facetwp-number::placeholder { color: var(--color-primary) !important; opacity: 0.7 !important; } .search-section .search-section .facetwp-type-slider .facetwp-submit { background: none !important; border: none !important; color: var(--color-primary) !important; font-family: var(--font-primary, sans-serif) !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; padding: 5px 10px !important; border-radius: 5px !important; transition: background-color 0.3s ease !important; } .search-section .search-section .facetwp-type-slider .facetwp-submit:hover { background-color: rgba(0, 51, 102, 0.1) !important; } /** * Search Overlay Styles * Styling for the search popup that appears when clicking the search icon * Uses dedicated classes to avoid conflicts with existing search-section styles */ .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--color-blue-100-rgb, 29, 71, 90), 0.8); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .search-overlay.active { opacity: 1; visibility: visible; } .search-overlay.closing .search-overlay-content { transform: scale(0.9); opacity: 0; } .search-overlay-content { width: 90%; max-width: 800px; background-color: var(--color-yellow-100); border-radius: 10px; padding: 2rem; position: relative; transform: scale(0.9); opacity: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .search-overlay-content.animated { transform: scale(1); opacity: 1; } .search-overlay-close { position: absolute; top: 1rem; right: 1rem; background: rgba(0, 0, 0, 0.05); border: none; cursor: pointer; color: var(--color-blue-100, #1d475a); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s ease, transform 0.2s ease; z-index: 10; } .search-overlay-close:before, .search-overlay-close:after { content: ""; position: absolute; width: 24px; height: 3px; background-color: currentColor; top: 50%; left: 50%; border-radius: 2px; } .search-overlay-close:before { transform: translate(-50%, -50%) rotate(45deg); } .search-overlay-close:after { transform: translate(-50%, -50%) rotate(-45deg); } .search-overlay-close:hover { background-color: rgba(0, 0, 0, 0.1); transform: scale(1.05); } .search-overlay-close:active { transform: scale(0.95); } .search-loading { display: flex; justify-content: center; align-items: center; min-height: 200px; } .search-loading i { font-size: 2rem; color: var(--color-blue-100, #1d475a); } .search-overlay-section { background: none; margin: 0; padding: 0; width: 100%; height: auto; display: block; position: relative; } .search-overlay-container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 1rem; display: flex; flex-direction: column; align-items: center; } .search-overlay-title { color: var(--color-primary); font-family: var(--font-primary, sans-serif); font-weight: 700; font-size: 32px; margin-bottom: 36px; text-align: left; width: 100%; } .search-overlay-form { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; align-items: center; } .search-overlay-form-group { position: relative; width: 100%; flex: 1 1 100%; min-width: 0; } .search-overlay-form-group .facetwp-facet { display: block !important; width: 100% !important; max-width: 100% !important; visibility: visible !important; } .search-overlay-form-group .facetwp-dropdown { width: 100% !important; height: 68px !important; padding: 10px 12px !important; border: none !important; border-radius: 10px !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; color: var(--color-primary) !important; font-family: var(--font-primary, sans-serif) !important; font-weight: 700 !important; font-size: 18px !important; background-color: var(--color-cream) !important; cursor: pointer !important; background-image: none !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } .search-overlay-form-group .facetwp-dropdown::-ms-expand { display: none; } .search-overlay-form-group .facetwp-dropdown::-webkit-calendar-picker-indicator, .search-overlay-form-group .facetwp-dropdown::-webkit-inner-spin-button, .search-overlay-form-group .facetwp-dropdown::-webkit-outer-spin-button { display: none; -webkit-appearance: none; } .search-overlay-form-group .facetwp-dropdown:focus { outline: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } .search-overlay-form-group select, .search-overlay-form-group input { width: 100% !important; height: 68px !important; padding: 10px 28px !important; border: none !important; border-radius: 10px !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; color: var(--color-primary) !important; font-family: var(--font-primary, sans-serif) !important; font-weight: 700 !important; font-size: 18px !important; background-color: var(--color-cream) !important; cursor: pointer !important; background-image: none !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } .search-overlay-form-group select:focus, .search-overlay-form-group input:focus { outline: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } .search-overlay-form-group select::-moz-placeholder, .search-overlay-form-group input::-moz-placeholder { color: var(--color-primary) !important; opacity: 1 !important; font-weight: 700 !important; } .search-overlay-form-group select::placeholder, .search-overlay-form-group input::placeholder { color: var(--color-primary) !important; opacity: 1 !important; font-weight: 700 !important; } .search-overlay-form-group .facetwp-date, .search-overlay-form-group .facetwp-date-min, .search-overlay-form-group .facetwp-date-max, .search-overlay-form-group input.facetwp-date { width: 100% !important; height: 68px !important; padding: 10px 12px !important; border: none !important; border-radius: 10px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; color: var(--color-primary) !important; font-family: var(--font-primary, sans-serif) !important; font-weight: 700 !important; font-size: 18px !important; background-color: var(--color-cream) !important; cursor: pointer !important; box-shadow: none !important; } .search-overlay-form-group .facetwp-date::-moz-placeholder, .search-overlay-form-group .facetwp-date-min::-moz-placeholder, .search-overlay-form-group .facetwp-date-max::-moz-placeholder, .search-overlay-form-group input.facetwp-date::-moz-placeholder { color: var(--color-primary) !important; opacity: 1 !important; font-weight: 700 !important; } .search-overlay-form-group .facetwp-date::placeholder, .search-overlay-form-group .facetwp-date-min::placeholder, .search-overlay-form-group .facetwp-date-max::placeholder, .search-overlay-form-group input.facetwp-date::placeholder { color: var(--color-primary) !important; opacity: 1 !important; font-weight: 700 !important; } .search-overlay-form-group .facetwp-date:focus, .search-overlay-form-group .facetwp-date-min:focus, .search-overlay-form-group .facetwp-date-max:focus, .search-overlay-form-group input.facetwp-date:focus { outline: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } .search-overlay-button.fwp-submit { background-color: var(--color-blue-200); color: var(--color-white); border: none; margin-top: -39px; padding: 8px 40px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; font-family: var(--font-primary, sans-serif); font-size: 17px; height: 44px; white-space: nowrap; text-align: center; width: 100%; margin-top: 1rem; } .search-overlay-button.fwp-submit:hover { background-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .search-overlay-button.fwp-submit:active { transform: translateY(0); box-shadow: none; } .search-overlay-results-hidden { display: none !important; visibility: hidden !important; } body.search-overlay-open { overflow: hidden; } .accessibility-widget { position: fixed; bottom: 20px; left: 20px; z-index: 1000; } .accessibility-button { background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.3s ease; } .accessibility-button:hover { transform: scale(1.1); } .accessibility-button:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .accessibility-icon { display: block; width: 37.47px; height: 37.47px; } .accessibility-icon svg { width: 100%; height: 100%; } /** * Inner CTA Component * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=411-2378&m=dev */ .trip-inner-cta { position: relative; padding: var(--spacing-xl) 0; margin: var(--spacing-4xl) 0; background-color: #ffffff !important; } .trip-inner-cta .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--container-padding); } .trip-inner-cta__flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; } .trip-inner-cta__content { flex: 1 1 60%; max-width: 705px; padding-right: var(--spacing-xl); } .trip-inner-cta__heading { font-family: var(--heading-font-family); font-weight: 700; font-size: 30px; line-height: 1.25; color: var(--color-blue-100); margin: 0; } .trip-inner-cta__button-wrapper { flex: 0 0 auto; } .trip-inner-cta__button { display: inline-block; text-decoration: none; position: relative; width: 324px; height: 48px; } .trip-inner-cta__button .ticket-button-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; shape-rendering: crispEdges; } .trip-inner-cta__button .ticket-button-svg path:first-child { fill: #EFAF1F; stroke: none; stroke-width: 0; } .trip-inner-cta__button .ticket-button-svg path:not(:first-child) { stroke: none; stroke-width: 0; } .trip-inner-cta__button .ticket-button-wrapper { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .trip-inner-cta__button .ticket-button-text { position: relative; z-index: 2; font-family: var(--body-font-family); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--color-blue-100); text-align: center; padding: 0 var(--spacing-md); } .trip-inner-cta__button:hover .ticket-button-svg path:first-child { fill: #e4a310; transition: fill 0.3s ease; } .trip-inner-cta__button:focus { outline: none; } .trip-inner-cta__button:focus .ticket-button-svg { box-shadow: 0 0 0 2px var(--color-blue-100); } .inner-cta { position: relative; padding: var(--spacing-4xl) 0; background-color: var(--color-blue-300); } .inner-cta .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--container-padding); } .inner-cta__flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; } .inner-cta__content { flex: 1 1 60%; max-width: 705px; padding-right: var(--spacing-xl); padding-bottom: var(--spacing-xl); } .inner-cta__heading { font-family: var(--heading-font-family); font-weight: 700; font-size: 30px; line-height: 1.25; color: var(--color-blue-100); margin: 0; } .inner-cta__button-wrapper { flex: 0 0 auto; } .inner-cta__button { display: inline-block; text-decoration: none; position: relative; width: 324px; height: 48px; } .inner-cta__button .ticket-button-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; shape-rendering: crispEdges; } .inner-cta__button .ticket-button-svg path:first-child { fill: #EFAF1F; stroke: none; stroke-width: 0; } .inner-cta__button .ticket-button-svg path:not(:first-child) { stroke: none; stroke-width: 0; } .inner-cta__button .ticket-button-wrapper { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .inner-cta__button .ticket-button-text { position: relative; z-index: 2; font-family: var(--body-font-family); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--color-blue-100); text-align: center; padding: 0 var(--spacing-md); } .inner-cta__button:hover .ticket-button-svg path:first-child { fill: #e4a310; transition: fill 0.3s ease; } .inner-cta__button:focus { outline: none; } .inner-cta__button:focus .ticket-button-svg { box-shadow: 0 0 0 2px var(--color-blue-100); } /** * For any sass variables that may be used in multiple places, * in the settings folder. * List them here. * * With sass @use rules there is no longer a "global" scope. * For example trying to @use "sizing" in fluid-typography will result in an error. * Because it is already @forwarded in the settings.scss file. This will cause a looping error in the compiler. * When a global value is needed in multiple places list it here or prefer to use a css custom attribute **/ .contact-hero { position: relative; height: 399px; overflow: hidden; display: flex; align-items: center; background-color: var(--color-blue-100); } .contact-hero__content { position: relative; z-index: 2; width: 100%; } .contact-hero__title { font-size: 48px; font-weight: 700; color: var(--color-white); margin-bottom: 20px; } .contact-hero__subtitle { font-size: 20px; font-weight: 400; color: var(--color-white); max-width: 600px; margin: 0 auto; } /** * For any sass variables that may be used in multiple places, * in the settings folder. * List them here. * * With sass @use rules there is no longer a "global" scope. * For example trying to @use "sizing" in fluid-typography will result in an error. * Because it is already @forwarded in the settings.scss file. This will cause a looping error in the compiler. * When a global value is needed in multiple places list it here or prefer to use a css custom attribute **/ .contact-form { background-color: var(--color-yellow-100); border-radius: 8px; padding: 30px; position: relative; width: 100%; } .contact-form .accessibility-icon { position: absolute; top: 30px; left: 30px; width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-blue-200); display: flex; align-items: center; justify-content: center; } .contact-form .accessibility-icon span { color: var(--color-white); font-weight: bold; font-size: 18px; } .contact-form__form { width: 100%; display: flex; flex-direction: column; gap: 20px; } .contact-form__field { margin-bottom: 0; } .contact-form__field input, .contact-form__field textarea { width: 100%; padding: 15px; border: none; border-radius: 0; font-size: 16px; background-color: var(--color-yellow-300); } .contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; } .contact-form__field input::-moz-placeholder, .contact-form__field textarea::-moz-placeholder { color: var(--color-gray-600); } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: var(--color-gray-600); } .contact-form__field textarea { resize: vertical; min-height: 120px; } .contact-form__submit { margin-top: 10px; } .contact-form__submit button { background-color: var(--color-blue-200); color: var(--color-white); font-size: 16px; font-weight: 600; padding: 12px 30px; border: none; border-radius: 50px; cursor: pointer; transition: background-color 0.3s ease; width: auto; display: inline-block; } .contact-form__submit button:hover { background-color: var(--color-blue-100); } .contact-form__notice { padding: 20px; background-color: var(--color-yellow-300); text-align: center; } .contact-form__notice p { margin: 0; color: var(--color-gray-700); } .contact-form .gform_wrapper { width: 100%; } .contact-form .gform_wrapper .gform_heading { margin-bottom: 20px; } .contact-form .gform_wrapper .gform_heading .gform_title { display: none; font-size: 24px; font-weight: 600; color: var(--color-blue-200); margin-bottom: 10px; } .contact-form .gform_wrapper .gform_heading .gform_description { font-size: 16px; color: var(--color-gray-700); } .contact-form .gform_wrapper .gform_body { width: 100%; } .contact-form .gform_wrapper .gform_body .gform_fields { display: flex; flex-direction: column; gap: 20px; list-style: none; padding: 0; margin: 0; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield { margin: 0; padding: 0; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .gfield_label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--color-gray-800); } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input, .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea, .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select { width: 100%; padding: 15px; border: none; border-radius: 0; font-size: 16px; background-color: var(--color-yellow-300); } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:focus, .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea:focus, .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select:focus { outline: none; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea { resize: vertical; min-height: 120px; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select { height: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 12px auto; padding-right: 30px; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .validation_message { color: var(--color-red-500); font-size: 14px; margin-top: 5px; } .contact-form .gform_wrapper .gform_footer { margin-top: 20px; text-align: center; padding: 0 !important; margin-bottom: 0 !important; clear: both; } .contact-form .gform_wrapper .gform_footer input[type=submit], .contact-form .gform_wrapper .gform_footer button, .contact-form .gform_wrapper .gform_footer .gform_button, .contact-form .gform_wrapper .gform_footer .button { display: inline-block !important; background-color: #1d475a !important; color: white !important; font-size: 16px !important; font-weight: 500 !important; padding: 12px 40px !important; border-radius: 50px !important; text-decoration: none !important; transition: all 0.3s ease !important; border: none !important; cursor: pointer !important; min-width: 160px !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; line-height: 1.5 !important; height: auto !important; margin: 0 !important; } .contact-form .gform_wrapper .gform_footer input[type=submit]:hover, .contact-form .gform_wrapper .gform_footer input[type=submit]:focus, .contact-form .gform_wrapper .gform_footer button:hover, .contact-form .gform_wrapper .gform_footer button:focus, .contact-form .gform_wrapper .gform_footer .gform_button:hover, .contact-form .gform_wrapper .gform_footer .gform_button:focus, .contact-form .gform_wrapper .gform_footer .button:hover, .contact-form .gform_wrapper .gform_footer .button:focus { background-color: #1d475a !important; color: white !important; } .contact-form .gform_wrapper .validation_error { background-color: var(--color-red-100); color: var(--color-red-500); padding: 15px; margin-bottom: 20px; border-radius: 4px; font-size: 14px; } .contact-form-wrapper .gform_wrapper .gform_button, .contact-form-wrapper .gform_wrapper .button, .contact-form-wrapper .gform_wrapper .submit-button, .contact-form-wrapper .gform_wrapper input[type=submit], .contact-form-wrapper .gform_wrapper button[type=submit], .contact-form-wrapper .home-contact-form .gform_button, .contact-form-wrapper .home-contact-form .button, .contact-form-wrapper .home-contact-form .submit-button, .contact-form-wrapper .home-contact-form input[type=submit], .contact-form-wrapper .home-contact-form button[type=submit] { background-color: var(--color-blue-100); color: var(--color-white); border: none; border-radius: 50px; width: 206px; height: 42px; padding: 0; font-size: 16px; font-weight: 600; font-family: var(--body-font-family); cursor: pointer; transition: all 0.3s ease; text-transform: none; letter-spacing: normal; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .contact-form-wrapper .gform_wrapper .gform_button:hover, .contact-form-wrapper .gform_wrapper .button:hover, .contact-form-wrapper .gform_wrapper .submit-button:hover, .contact-form-wrapper .gform_wrapper input[type=submit]:hover, .contact-form-wrapper .gform_wrapper button[type=submit]:hover, .contact-form-wrapper .home-contact-form .gform_button:hover, .contact-form-wrapper .home-contact-form .button:hover, .contact-form-wrapper .home-contact-form .submit-button:hover, .contact-form-wrapper .home-contact-form input[type=submit]:hover, .contact-form-wrapper .home-contact-form button[type=submit]:hover { background-color: var(--color-blue-200); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(29, 71, 90, 0.25); } .contact-form-wrapper .gform_wrapper .gform_button:active, .contact-form-wrapper .gform_wrapper .button:active, .contact-form-wrapper .gform_wrapper .submit-button:active, .contact-form-wrapper .gform_wrapper input[type=submit]:active, .contact-form-wrapper .gform_wrapper button[type=submit]:active, .contact-form-wrapper .home-contact-form .gform_button:active, .contact-form-wrapper .home-contact-form .button:active, .contact-form-wrapper .home-contact-form .submit-button:active, .contact-form-wrapper .home-contact-form input[type=submit]:active, .contact-form-wrapper .home-contact-form button[type=submit]:active { transform: translateY(0); background-color: var(--color-primary-dark); } /* Home Page Contact Form Section */ .home-contact-section { margin-top: calc(95px + 2.5em); background-color: var(--color-blue-600); position: relative; z-index: 1; } .home-contact-section h2 { color: var(--color-white); font-family: var(--body-font-family); font-weight: 400; line-height: 1.2; margin-bottom: var(--spacing-md); text-align: center; } .home-contact-section p { color: var(--color-white); font-size: 1rem; font-weight: 700; line-height: 1.6; text-align: center; } .home-contact-section .gform_wrapper .gfield .gfield_label, .home-contact-section .gform_wrapper .gfield .gfield_description { display: none; visibility: hidden; } .home-contact-section .gform_wrapper .gfield input, .home-contact-section .gform_wrapper .gfield textarea { width: 100%; padding: 1.5rem 1.25rem; border: none; border-radius: 8px; background-color: var(--color-blue-300); color: var(--color-blue-600); font-size: 1rem; font-family: var(--body-font-family); transition: all 0.3s ease; box-sizing: border-box; } .home-contact-section .gform_wrapper .gfield input:focus, .home-contact-section .gform_wrapper .gfield textarea:focus { outline: none; background-color: var(--color-white); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } .home-contact-section .gform_wrapper .gform_footer .gform_button, .home-contact-section .gform_wrapper .gform_footer input[type=submit], .home-contact-section .gform_wrapper .gform_footer #gform_submit_button_4 { background-color: var(--color-blue-100); color: var(--color-white); border: none; border-radius: 50px; width: 206px; height: 42px; padding: 0; font-size: 16px; font-weight: 600; font-family: var(--body-font-family); cursor: pointer; transition: all 0.3s ease; text-transform: none; letter-spacing: normal; display: flex; align-items: center; justify-content: center; } .home-contact-section .gform_wrapper .gform_footer .gform_button:hover, .home-contact-section .gform_wrapper .gform_footer input[type=submit]:hover, .home-contact-section .gform_wrapper .gform_footer #gform_submit_button_4:hover { background-color: var(--color-blue-200); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(29, 71, 90, 0.25); } .home-contact-section .gform_wrapper .gform_footer .gform_button:active, .home-contact-section .gform_wrapper .gform_footer input[type=submit]:active, .home-contact-section .gform_wrapper .gform_footer #gform_submit_button_4:active { transform: translateY(0); background-color: var(--color-primary-dark); } .home-contact-section .gform_wrapper .form-success-message, .home-contact-section .gform_wrapper .form-error-message { padding: 1rem 1.25rem; border-radius: 8px; margin: var(--spacing-md) 0; font-family: var(--body-font-family); font-size: 1rem; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; } .home-contact-section .gform_wrapper .form-success-message { background-color: rgba(239, 175, 31, 0.15); color: #efaf1f; border: 1px solid rgba(239, 175, 31, 0.4); } .home-contact-section .gform_wrapper .form-error-message { background-color: rgba(239, 68, 68, 0.1); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.3); } /** * For any sass variables that may be used in multiple places, * in the settings folder. * List them here. * * With sass @use rules there is no longer a "global" scope. * For example trying to @use "sizing" in fluid-typography will result in an error. * Because it is already @forwarded in the settings.scss file. This will cause a looping error in the compiler. * When a global value is needed in multiple places list it here or prefer to use a css custom attribute **/ .location-cards { padding: 0; width: 100%; } .location-cards__title { font-size: 32px; font-weight: 700; color: var(--color-white); margin-top: -12px; margin-bottom: 20px; } .location-cards__container { position: relative; display: flex; flex-direction: column; gap: 20px; } .location-card { background-color: var(--color-yellow-300); border-radius: 8px; padding: 15px; position: relative; } .location-card__content { display: flex; justify-content: space-between; align-items: center; } .location-card__info { flex: 1; padding-right: 15px; } .location-card__title { font-size: 18px; font-weight: 700; color: var(--color-blue-100); margin-bottom: 5px; } .location-card__address { font-size: 14px; line-height: 1.5; color: var(--color-gray-700); margin: 0 0 5px 0; } .location-card__phone { font-size: 14px; color: var(--color-gray-700); margin: 0; } .location-card__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .location-card .globe-icon { width: 101px; height: 72px; position: relative; display: flex; align-items: center; justify-content: center; } .location-card .globe-icon::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95px; height: 95px; z-index: 1; } .location-card .globe-icon img, .location-card .globe-icon svg { width: 75px; height: auto; -o-object-fit: contain; object-fit: contain; position: relative; z-index: 2; filter: brightness(0.95) saturate(1.2); } /** * Promotional Banner Component Styles */ /* Page wrapper to ensure consistent alignment */ .page-wrapper { width: 100%; max-width: 1400px; /* Using the 1400px wide global width for desktop */ margin: 0 auto; padding: 0 var(--container-padding); /* Custom Media Query for Mobile */ } .promotional-banner { position: relative; height: 245px; /* Fixed height as per Figma */ width: 100%; /* Full width to match the image */ margin-top: 48px !important; margin: 0 0 var(--spacing-3xl); background-color: var(--color-light-blue, #E1F1F9); background-size: cover; background-position: 90% 50%; background-repeat: no-repeat; display: flex; align-items: center; overflow: hidden; /* Content wrapper for the promotional banner */ /* Ticket button styling specific to promotional banner */ } .promotional-banner::after { content: ""; background-color: #ffffff; opacity: 44%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .promotional-banner .promo-content-wrapper { width: 100%; padding: 0; z-index: 1; } .promotional-banner .promo-content { text-align: left; width: 100%; max-width: 400px; margin: 0 auto; position: relative; padding: 8px; } .promotional-banner .promo-content::after { content: ""; background-color: #ffffff; opacity: 85%; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .promotional-banner .promo-heading { font-family: "Lexend Deca", sans-serif; font-size: 30px; font-weight: 700; color: var(--color-blue-100); line-height: 100%; text-align: center; /* Center the text within the heading */ } .promotional-banner .promo-description { margin-bottom: var(--spacing-md); color: var(--color-text); padding: 5px; /* 5 is better, the ticket space is to close to the edge at 10px */ text-align: left; font-weight: 500; } .promotional-banner .ticket-button { position: relative; display: inline-block; text-decoration: none; height: 42px; /* Center the button horizontally */ display: block; } .promotional-banner .ticket-button .ticket-button-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/wp-content/themes/posturepress3/dist/images/ticket-button-bg.svg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .promotional-banner .ticket-button .ticket-button-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .promotional-banner .ticket-button .ticket-button-text { font-family: var(--font-secondary); font-weight: 700; font-size: 14px; color: #2D4B5C; /* Match the exact color from the image */ text-transform: uppercase; text-align: center; letter-spacing: 0.5px; /* Add slight letter spacing for better readability */ } .promotional-banner .ticket-button:hover { transform: scale(1.05); transition: transform 0.3s ease; } .promotional-banner .ticket-button:focus { outline: 2px solid var(--color-white); outline-offset: 2px; } /** * Trip Card Component Styles * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=254-263&m=dev */ .trip-card { background: var(--color-white); border-radius: 2px; overflow: hidden; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; border: 1px solid #E5E7EB; width: 100%; max-width: none; margin: 0; } .trip-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .trip-card .trip-card-image { position: relative; width: 100%; height: 218px; overflow: hidden; } .trip-card .trip-card-image .trip-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.3s ease; } .trip-card .trip-card-image:hover .trip-img { transform: scale(1.05); } .trip-card .trip-card-image .trip-type-badge { position: absolute; top: 12px; left: 12px; background: rgba(0, 0, 0, 0.6); color: var(--color-white); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; z-index: 2; } .trip-card .trip-card-content { padding: 16px; flex: 1; display: flex; flex-direction: column; } .trip-card .trip-card-content .trip-location { font-size: 12px; font-weight: 500; color: #6B7280; margin-bottom: 4px; text-transform: uppercase; } .trip-card .trip-card-content .trip-title { font-size: 18px; font-weight: 600; color: #1F2937; margin-bottom: 8px; line-height: 1.3; } .trip-card .trip-card-content .trip-date { font-size: 14px; color: #4B5563; margin-bottom: 12px; } .trip-card .trip-card-content .trip-details { display: flex; flex-direction: column; margin-bottom: 16px; } .trip-card .trip-card-content .trip-features { list-style: none; padding: 0; margin: 0 0 16px 0; flex: 1; } .trip-card .trip-card-content .trip-features li { position: relative; padding-left: 16px; margin-bottom: 6px; color: #4B5563; font-size: 14px; line-height: 1.4; } .trip-card .trip-card-content .trip-features li::before { content: "✓"; position: absolute; left: 0; color: #10B981; font-weight: 600; } .trip-card .trip-card-content .trip-card-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; } .trip-card .trip-card-content .trip-card-footer .trip-price { display: flex; flex-direction: column; } .trip-card .trip-card-content .trip-card-footer .trip-price .price-value { font-size: 20px; font-weight: 700; color: #1F2937; display: flex; align-items: baseline; } .trip-card .trip-card-content .trip-card-footer .trip-price .price-value .price-pp { font-size: 14px; font-weight: 400; color: #6B7280; margin-left: 2px; } .trip-card .trip-card-content .trip-card-footer .trip-button { text-transform: uppercase; color: #2563EB; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s ease; } .trip-card .trip-card-content .trip-card-footer .trip-button:hover { color: #1D4ED8; text-decoration: underline; } .trip-card .trip-card-content .trip-card-footer .trip-button:focus { outline: 2px solid #2563EB; outline-offset: 2px; } .trip-card.dynamic-trip { width: 313.92px !important; height: 485.37px !important; border: 1px solid var(--color-blue-100) !important; border-radius: 10px !important; color: var(--color-blue-100); max-width: 316.92px; min-height: 368.37px; padding: 16px; } .trip-card.dynamic-trip .trip-card-image { margin: 0px 0px 0px 0px; border-radius: 15px; overflow: hidden; padding: 0px; padding-bottom: 10px; } .trip-card.dynamic-trip .trip-card-image .trip-img { border-radius: 15px; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .trip-card.dynamic-trip .trip-card-content { padding: 0; } .trip-card.dynamic-trip .trip-card-content .trip-blurb { font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: 0; color: var(--color-blue-100); margin-bottom: 8px; } .trip-card.dynamic-trip .trip-card-content .trip-title { font-family: "Lexend Deca", sans-serif; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 0; color: var(--color-blue-100); margin-bottom: 8px; } .trip-card.dynamic-trip .trip-card-content .trip-date { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--color-blue-100); margin-bottom: 12px; } .trip-card.dynamic-trip .trip-card-content .trip-dates { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--color-blue-100); } .trip-card.dynamic-trip .trip-card-content .trip-card-footer { margin-bottom: var(--spacing-sm); } .trip-card.dynamic-trip .trip-card-content .trip-card-footer .trip-price { margin-bottom: var(--spacing-md); } .trip-card.dynamic-trip .trip-card-content .trip-card-footer .trip-price .price-value { font-family: "Lexend Deca", sans-serif; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: 0; color: var(--color-blue-100); } .trip-card.dynamic-trip .trip-card-content .trip-card-footer .trip-price .price-value .price-pp { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--color-blue-100); margin-left: 4px; } .trip-card.dynamic-trip .trip-card-content .trip-card-button-wrapper { display: flex; justify-content: flex-start; } .trip-card.dynamic-trip .trip-card-content .trip-card-button-wrapper .trip-button { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0; text-transform: uppercase; color: var(--color-blue-100); text-decoration: none; } .trip-card.dynamic-trip .trip-card-content .trip-card-button-wrapper .trip-button:hover { color: var(--color-blue-200); text-decoration: underline; } .trip-card[data-trip-type=cruise] .trip-type-badge { background: rgba(0, 102, 204, 0.8); } .trip-card[data-trip-type=tour] .trip-type-badge { background: rgba(255, 107, 53, 0.8); } /** * Filtering Sidebar Component Styles */ .filtering-sidebar { background: var(--color-white); border: 1px solid #1D475A; border-radius: 2px; overflow: hidden; } .filtering-sidebar .filter-header { display: flex; justify-content: space-between; align-items: center; color: var(--color-blue-200); padding: var(--spacing-lg); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .filtering-sidebar .filter-header .filter-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0; color: var(--color-primary); } .filtering-sidebar .filter-header .header-caret { font-size: 12px; color: var(--color-blue-200); transition: transform 0.3s ease; transform-origin: center; display: inline-block; } .filtering-sidebar .filter-header:hover { background: rgba(29, 71, 90, 0.05); } .filtering-sidebar.header-collapsed .filter-content { display: none; } .filtering-sidebar.header-collapsed .header-caret { transform: rotate(0deg) !important; } .filtering-sidebar .filter-content { padding: 0; } .filtering-sidebar .filter-content .filter-accordion-item { border-bottom: 1px solid #1D475A; } .filtering-sidebar .filter-content .filter-accordion-item:last-child { border-bottom: none; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-header { padding: 33px 20px; background: var(--color-white); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-header:hover { background: rgba(29, 71, 90, 0.05); } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-header:active { background: rgba(29, 71, 90, 0.1); } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-header .filter-title { font-size: 16px; font-weight: 700; color: #1D475A; margin: 0; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-header .accordion-arrow { font-size: 12px; color: var(--color-blue-200); transition: transform 0.3s ease; transform-origin: center; display: inline-block; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content { background: var(--color-white); overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: all 0.4s ease; border-top: none; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet { margin: 0; border: none; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .facetwp-facet-label, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .facet-label { display: none !important; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet h3:empty, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet h4:empty, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet h3:not(:has(*)), .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet h4:not(:has(*)) { display: none !important; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .fs-label-wrap .fs-label-text { display: none !important; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .fs-label-wrap, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet select.facetwp-dropdown { border: none !important; border-radius: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 50px; padding: 15px 25px; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .fs-label-wrap .fs-label, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet select.facetwp-dropdown .fs-label { padding: 0; font-size: 14px; font-weight: 400; color: var(--color-blue-200); } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet select.facetwp-dropdown { width: 100% !important; max-width: none !important; margin-left: 0 !important; padding: 15px 25px; font-weight: 400; color: var(--color-blue-200); } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet select.facetwp-dropdown option:first-child { color: #999; font-style: italic; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .facetwp-checkbox { padding: 8px 25px; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .facetwp-checkbox label { font-size: 14px; font-weight: 600; color: #1D475A; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .facetwp-slider, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .facetwp-type-slider, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .noUi-target, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .noUi-base, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .noUi-connects, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .noUi-connect, .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .noUi-handle { display: block !important; visibility: visible !important; opacity: 1 !important; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .facetwp-slider { margin: 25px 4px; width: 100% !important; } .filtering-sidebar .filter-content .filter-accordion-item .filter-accordion-content .facetwp-facet .flatpickr-input { width: 100%; padding: 15px 25px; border: none; font-size: 14px; } .filtering-sidebar .filter-content .filter-accordion-item.expanded .accordion-arrow { transform: rotate(180deg); } .filtering-sidebar .filter-content .filter-accordion-item.expanded .filter-accordion-content { max-height: 500px; opacity: 1; visibility: visible; border-top: 1px solid rgba(29, 71, 90, 0.1); padding-bottom: 10px; } .filtering-sidebar .filter-content .filter-accordion-item.expanded .filter-accordion-content:has(.flatpickr-calendar), .filtering-sidebar .filter-content .filter-accordion-item.expanded .filter-accordion-content:has(.facetwp-type-date_range) { max-height: 400px; } .filtering-sidebar .filter-content .filter-accordion-item.expanded .filter-accordion-content:has(.facetwp-type-checkboxes) { max-height: 300px; } .filtering-sidebar .filter-content .filter-accordion-item.expanded .filter-accordion-content:has(.facetwp-type-slider) { max-height: 200px; } .filtering-sidebar .filter-content .filter-accordion-item.expanded .filter-accordion-content:has(.facetwp-facet) { max-height: 350px; } .filtering-sidebar .filter-content .filter-accordion-item:not(.expanded) .filter-accordion-content { max-height: 0; opacity: 0; visibility: hidden; border-top: none; padding-bottom: 0; } .filtering-sidebar .filter-content .filter-accordion-item:not(.expanded) .accordion-arrow { transform: rotate(0deg); } .filtering-sidebar .filter-content .filter-accordion-item * { transition-timing-function: ease; } .filtering-sidebar .filter-content .filter-actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border-light); } .filtering-sidebar .filter-content .filter-actions .apply-filters, .filtering-sidebar .filter-content .filter-actions .reset-filters { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all 0.3s ease; } .filtering-sidebar .filter-content .filter-actions .apply-filters:focus, .filtering-sidebar .filter-content .filter-actions .reset-filters:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .filtering-sidebar .filter-content .filter-actions .apply-filters { background-color: var(--color-primary); color: var(--color-white); } .filtering-sidebar .filter-content .filter-actions .apply-filters:hover { background-color: var(--color-primary-dark); } .filtering-sidebar .filter-content .filter-actions .reset-filters { background-color: var(--color-background-light); color: var(--color-text); border: 1px solid var(--color-border); } .filtering-sidebar .filter-content .filter-actions .reset-filters:hover { background-color: var(--color-background); } .filtering-sidebar .filter-content .filter-reset { margin-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); text-align: center; } .filtering-sidebar .filter-content .filter-reset .reset-filters { width: auto; padding: var(--spacing-sm) var(--spacing-xl); background-color: transparent; color: var(--color-text); border: none; font-size: var(--font-size-md); font-weight: var(--font-weight-regular); cursor: pointer; transition: all 0.3s ease; text-decoration: underline; } .filtering-sidebar .filter-content .filter-reset .reset-filters:hover { color: var(--color-primary); } .filtering-sidebar .filter-content .filter-reset .reset-filters:focus { outline: none; } .filtering-sidebar .facetwp-facet { margin-bottom: -1px; } .filtering-sidebar .facetwp-facet:not(:first-child) .fs-label-wrap, .filtering-sidebar .facetwp-facet:not(:first-child) select.facetwp-dropdown { border-radius: 0; } .filtering-sidebar .facetwp-facet:not(:last-child) .fs-label-wrap, .filtering-sidebar .facetwp-facet:not(:last-child) select.facetwp-dropdown { border-radius: 0; } .filtering-sidebar .facetwp-facet:first-child .fs-label-wrap, .filtering-sidebar .facetwp-facet:first-child select.facetwp-dropdown { border-radius: 2px 2px 0 0; } .filtering-sidebar .facetwp-facet:last-child .fs-label-wrap, .filtering-sidebar .facetwp-facet:last-child select.facetwp-dropdown { border-radius: 0 0 2px 2px; } .filtering-sidebar .facetwp-facet select.facetwp-dropdown { height: 75px; width: 120%; max-width: 200%; margin-left: -25px; padding: 15px 45px 15px 20px; border: 1px solid #1D475A; background: var(--color-white); font-size: 16px; font-weight: 400; color: var(--color-blue-200); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; } .filtering-sidebar .facetwp-facet select.facetwp-dropdown:focus { outline: none; border-color: #1D475A; } .filtering-sidebar .facetwp-facet .fs-wrap { width: 120%; max-width: 200%; margin-left: -25px; } .filtering-sidebar .facetwp-facet .fs-wrap .fs-label-wrap { border: 1px solid #1D475A; background-color: var(--color-white); position: relative; cursor: pointer; height: 75px; display: flex; align-items: center; } .filtering-sidebar .facetwp-facet .fs-wrap .fs-label-wrap .fs-label { padding: 0 45px 0 20px; font-size: 16px; font-weight: 400; color: var(--color-blue-200); width: 100%; display: flex; align-items: center; } .filtering-sidebar .facetwp-facet .fs-wrap .fs-arrow { display: none; } .filtering-sidebar .facetwp-facet .fs-wrap .fs-label-wrap:after { content: ""; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 12px; height: 8px; background-image: url("data:image/svg+xml;charset=UTF-8,"); background-repeat: no-repeat; background-size: contain; transition: transform 0.3s ease; } .filtering-sidebar .facetwp-facet .fs-wrap.fs-open .fs-label-wrap:after { transform: translateY(-50%) rotate(180deg); } .filtering-sidebar .facetwp-facet .fs-wrap .fs-dropdown { border: 1px solid #1D475A; border-top: none; border-radius: 0 0 2px 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .filtering-sidebar .facetwp-type-date_range { padding: 15px; } .filtering-sidebar .facetwp-type-date_range .flatpickr-input { display: none !important; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar { position: static !important; display: block !important; width: 100%; margin: 0; box-shadow: none; border: none; border-radius: 0; opacity: 1 !important; visibility: visible !important; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-months { background: #1D475A; border-radius: 4px 4px 0 0; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-months .flatpickr-month { color: white; fill: white; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-months .flatpickr-next-month, .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-months .flatpickr-prev-month { color: white; fill: white; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover, .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover { color: rgba(255, 255, 255, 0.8); } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-days { width: 100%; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-day { color: #1D475A; border-radius: 50%; margin: 2px; width: 32px; height: 32px; line-height: 32px; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-day.selected { background: #20D489; border-color: #20D489; color: white; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-day:hover:not(.selected) { background: rgba(32, 212, 137, 0.1); color: #1D475A; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-day.today { border-color: #20D489; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-day.today:hover { border-color: #20D489; background: rgba(32, 212, 137, 0.1); } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-day.flatpickr-disabled { color: #ccc; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover { background: transparent; cursor: not-allowed; } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-weekdays { background: rgba(29, 71, 90, 0.1); } .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday { color: #1D475A; font-weight: 600; font-size: 12px; } .filter-accordion-item.expanded .filtering-sidebar .facetwp-type-date_range .flatpickr-calendar { max-height: none !important; transition: none !important; } .filtering-sidebar .facetwp-type-slider { padding: 20px 25px; } .filtering-sidebar .facetwp-type-slider .facetwp-slider-label, .filtering-sidebar .facetwp-type-slider .facetwp-values, .filtering-sidebar .facetwp-type-slider .facetwp-value, .filtering-sidebar .facetwp-type-slider .noUi-tooltip, .filtering-sidebar .facetwp-type-slider .facetwp-slider-wrap .facetwp-slider-label, .filtering-sidebar .facetwp-type-slider .facetwp-number-range, .filtering-sidebar .facetwp-type-slider .facetwp-number-range-value { display: none !important; } .filtering-sidebar .facetwp-type-slider .facetwp-slider::after, .filtering-sidebar .facetwp-type-slider .facetwp-slider::before { display: none !important; } .filtering-sidebar .facetwp-type-slider .custom-slider-title { font-weight: 700; color: var(--color-blue-100); text-align: center; margin-bottom: 20px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; } .filtering-sidebar .facetwp-type-slider .facetwp-slider { margin: 25px 4px; position: relative; } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-base { width: 100%; height: 6px; border-radius: 3px; position: relative; background: var(--color-light-gray); border: none; box-shadow: none; } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; border-radius: 3px; overflow: hidden; } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-connect { background: var(--color-blue-200); border-radius: 3px; } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-handle { width: 20px; height: 20px; background: var(--color-white); border: 3px solid var(--color-blue-200); border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); cursor: grab; position: absolute; top: -7px; outline: none; } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-handle:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); transform: scale(1.05); border-color: var(--color-blue-100); } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-handle:active { cursor: grabbing; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transform: scale(0.95); background: var(--color-blue-200); } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-handle:before, .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-handle:after { display: none; } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-touch-area { width: 100%; height: 100%; } .filtering-sidebar .facetwp-type-slider .facetwp-slider .noUi-tooltip { display: none !important; } .filtering-sidebar .facetwp-type-slider .facetwp-slider-values { font-weight: 700; color: var(--color-blue-100); text-align: center; margin-top: 15px; font-size: 18px; padding: 12px 16px; background: rgba(29, 71, 90, 0.05); border-radius: 6px; border: 1px solid rgba(29, 71, 90, 0.1); letter-spacing: 0.5px; } .filtering-sidebar .facetwp-type-slider .facetwp-slider-values.price-range-label { font-size: 20px; } .filtering-sidebar .facetwp-type-slider .facetwp-slider-values.price-range-label::before { content: "PRICE RANGE"; display: block; font-size: 12px; font-weight: 500; color: var(--color-gray); margin-bottom: 4px; letter-spacing: 1px; } .filtering-sidebar .facetwp-type-slider .facetwp-slider-values.duration-range-label::before { content: "TRIP DURATION"; display: block; font-size: 12px; font-weight: 500; color: var(--color-gray); margin-bottom: 4px; letter-spacing: 1px; } .filtering-sidebar .facetwp-type-checkboxes { padding: 15px 25px; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox { margin-bottom: 12px; display: flex; align-items: center; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox:last-child { margin-bottom: 0; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; border: 2px solid #1D475A; border-radius: 4px; margin-right: 12px; position: relative; cursor: pointer; transition: all 0.2s ease; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox input[type=checkbox]:checked { background: #1D475A; border-color: #1D475A; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox input[type=checkbox]:checked::after { content: "✓"; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; line-height: 1; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox input[type=checkbox]:hover { border-color: rgba(29, 71, 90, 0.7); } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox input[type=checkbox]:focus { outline: 2px solid rgba(29, 71, 90, 0.3); outline-offset: 2px; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox label { font-weight: 600; color: #1D475A; cursor: pointer; font-size: 14px; line-height: 1.4; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .filtering-sidebar .facetwp-type-checkboxes .facetwp-checkbox label:hover { color: rgba(29, 71, 90, 0.8); } .flatpickr-calendar { border: 1px solid #1D475A; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-family: var(--body-font-family); } .flatpickr-calendar .flatpickr-months { background: #1D475A; } .flatpickr-calendar .flatpickr-months .flatpickr-month { color: white; fill: white; } .flatpickr-calendar .flatpickr-months .flatpickr-next-month, .flatpickr-calendar .flatpickr-months .flatpickr-prev-month { color: white; fill: white; } .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover, .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover { color: rgba(255, 255, 255, 0.8); } .flatpickr-calendar .flatpickr-day { color: #1D475A; border-radius: 4px; } .flatpickr-calendar .flatpickr-day.selected { background: #1D475A; border-color: #1D475A; color: white; } .flatpickr-calendar .flatpickr-day:hover:not(.selected) { background: rgba(29, 71, 90, 0.1); } .flatpickr-calendar .flatpickr-day.today { border-color: #1D475A; } .flatpickr-calendar .flatpickr-day.today:hover { border-color: #1D475A; background: rgba(29, 71, 90, 0.1); } .filtering-sidebar.filtering-in-progress { opacity: 0.8; position: relative; } .filtering-sidebar.filtering-in-progress::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; border: 2px solid rgba(29, 71, 90, 0.3); border-top-color: #1D475A; border-radius: 50%; animation: spin 1s linear infinite; transform: translate(-50%, -50%); z-index: 10; } .filtering-sidebar .facetwp-type-date_range { position: relative; } .filtering-sidebar .facetwp-type-date_range .calendar-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; z-index: 2; } .filtering-sidebar .facetwp-type-date_range .flatpickr-input { padding-right: 50px; } .filtering-sidebar .facetwp-type-date_range .flatpickr-input::-moz-placeholder { color: rgba(29, 71, 90, 0.6); font-weight: 400; } .filtering-sidebar .facetwp-type-date_range .flatpickr-input::placeholder { color: rgba(29, 71, 90, 0.6); font-weight: 400; } .filtering-sidebar .facetwp-type-checkboxes .family-friendly-filter { padding: 12px 0; border-bottom: 1px solid rgba(29, 71, 90, 0.1); } .filtering-sidebar .facetwp-type-checkboxes .family-friendly-filter:last-child { border-bottom: none; } .filtering-sidebar .facetwp-type-checkboxes .family-friendly-filter label { display: flex; align-items: center; } .filtering-sidebar .facetwp-type-checkboxes .family-friendly-filter input[type=checkbox]:checked + label { color: #1D475A; font-weight: 700; } .filtering-sidebar .facetwp-type-number_range .custom-slider-label { font-size: 12px; color: rgba(29, 71, 90, 0.7); text-align: center; font-style: italic; margin-top: 8px; } .filtering-sidebar .facetwp-type-number_range .custom-slider-label.trip-duration-label::before { content: ""; } .filtering-sidebar .facetwp-type-number_range .custom-slider-label.price-range-label::before { content: ""; } .filtering-sidebar .facetwp-type-number_range .facetwp-slider-label { background: linear-gradient(135deg, rgba(29, 71, 90, 0.05), rgba(29, 71, 90, 0.1)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .filtering-sidebar .facetwp-type-number_range .facetwp-slider-label:hover { background: linear-gradient(135deg, rgba(29, 71, 90, 0.1), rgba(29, 71, 90, 0.15)); transform: translateY(-1px); } .facetwp-template.filtering-loading { position: relative; } .facetwp-template.filtering-loading::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); z-index: 5; transition: opacity 0.3s ease; } .facetwp-template.filtering-loading::after { content: "Filtering trips..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1D475A; color: white; padding: 12px 20px; border-radius: 4px; font-size: 14px; font-weight: 600; z-index: 6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .filtering-sidebar .facetwp-facet.has-selections .fs-label-wrap, .filtering-sidebar .facetwp-facet.has-selections select.facetwp-dropdown { border-color: #1D475A; box-shadow: 0 0 0 2px rgba(29, 71, 90, 0.1); } .filtering-sidebar .facetwp-facet:hover .fs-label-wrap, .filtering-sidebar .facetwp-facet:hover select.facetwp-dropdown { border-color: rgba(29, 71, 90, 0.8); transition: border-color 0.2s ease; } .filtering-sidebar .filter-group { margin-bottom: var(--spacing-lg); border-bottom: 1px solid rgba(29, 71, 90, 0.1); padding-bottom: var(--spacing-lg); } .filtering-sidebar .filter-group:last-child { border-bottom: none; margin-bottom: 0; } .filtering-sidebar .filter-group .filter-group-title { font-size: 14px; font-weight: 700; color: #1D475A; margin-bottom: var(--spacing-md); text-transform: uppercase; letter-spacing: 0.5px; } .filtering-sidebar .facetwp-facet { transition: all 0.4s ease; } .filtering-sidebar .facetwp-facet.conditionally-hidden { display: none !important; opacity: 0; max-height: 0; overflow: hidden; margin: 0; padding: 0; pointer-events: none; transform: translateY(-10px); } .filtering-sidebar .facetwp-facet.conditionally-visible { display: block !important; opacity: 1; max-height: 500px; overflow: visible; transform: translateY(0); } .filtering-sidebar.cruise-mode .cruise-filters .filter-group-title { color: #0066cc; } .filtering-sidebar.tour-mode .cruise-filters .filter-group-title { color: rgba(29, 71, 90, 0.4); } .filtering-sidebar.tour-mode .universal-filters .filter-group-title { color: #cc6600; } .filtering-sidebar.all-mode .filter-group-title { color: #1D475A; } .filtering-sidebar .filter-group[data-trip-type] { transition: all 0.4s ease; } .filtering-sidebar .filter-group[data-trip-type].conditionally-hidden { transform: translateY(-10px); opacity: 0; } .filtering-sidebar .filter-group[data-trip-type].conditionally-visible { transform: translateY(0); opacity: 1; } .filtering-sidebar .filter-group.conditionally-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .filtering-sidebar .filter-group.conditionally-visible { display: block !important; visibility: visible !important; opacity: 1 !important; } .filtering-sidebar .filtering-sidebar .filter-group.cruise-filters.conditionally-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .filtering-sidebar .filtering-sidebar .filter-group.special-filters.conditionally-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .filter-state-indicator { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; } .cruise-mode .filter-state-indicator { background: #0066cc; } .tour-mode .filter-state-indicator { background: #cc6600; } .all-mode .filter-state-indicator { background: #1D475A; } /** * Tour Guides Carousel Component Styles */ .tour-guides-section { display: none; position: relative; width: 100%; max-width: 100%; height: 485px; margin: 0 auto; margin-top: 130px; background-color: #477990; color: var(--color-white); overflow: hidden; padding-top: 80px; padding-bottom: 60px; } .tour-guides-section .container { position: relative; z-index: 2; max-width: 2000px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; } .tour-guides-section .section-title { color: var(--color-white); text-align: center; margin-top: -76px; margin-bottom: 67px; font-size: 36px; font-weight: 700; } .tour-guides-carousel { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: -40px; } .tour-guides-carousel .guides-container { overflow: hidden; width: 124%; /* * CAROUSEL WIDTH CONFIGURATION * * How this works: * - Each guide card is 580px wide with 20px gap * - Container width determines how much of adjacent cards are visible * - Formula: Container width = Main card (580px) + Visible portions of adjacent cards * * Current settings show: * Desktop (1200px): Main card + ~310px of adjacent cards on each side * Medium (800px): Main card + ~110px of adjacent cards on each side * Small (650px): Main card + ~35px of adjacent cards on each side * * TO MAKE WIDER: Increase max-width values below * Examples: * - 1400px = shows almost 2 full cards on each side * - 1600px = shows 2+ full cards on each side * - 2000px = shows 3+ cards on each side (very wide) */ max-width: 1800px; margin: 0 auto; } .tour-guides-carousel .guides-wrapper { display: flex; gap: 30px; justify-content: flex-start; align-items: center; } .tour-guides-carousel .guides-wrapper.sliding-transition { transition: transform 0.6s ease-in-out; } .tour-guides-carousel .guide-card { flex: 0 0 580px; display: flex; flex-direction: row; align-items: flex-start; background: var(--color-blue-100); border-radius: 16px; padding: 24px; color: white; text-align: left; } .tour-guides-carousel .guide-card .guide-image { width: 285px; height: 173px; min-width: 130px; border-radius: 50%; overflow: hidden; margin-right: 24px; } .tour-guides-carousel .guide-card .guide-image .guide-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .tour-guides-carousel .guide-card .guide-content { width: 100%; } .tour-guides-carousel .guide-card .guide-content .guide-name { font-size: 28px; font-weight: bold; color: white; margin-bottom: 4px; line-height: 1.2; } .tour-guides-carousel .guide-card .guide-content .guide-years { font-size: 16px; color: #FFC107; font-weight: 500; margin-bottom: 12px; } .tour-guides-carousel .guide-card .guide-content .guide-bio { font-size: 14px; color: white; line-height: 1.4; margin-bottom: 15px; } .tour-guides-carousel .guide-card .guide-content .guide-booking { margin-top: 10px; } .tour-guides-carousel .guide-card .guide-content .guide-booking .booking-cta-button { display: inline-block; background-color: #3A7D9F; color: white; font-size: 14px; font-weight: 500; padding: 8px 20px; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; } .tour-guides-carousel .guide-card .guide-content .guide-booking .booking-cta-button:hover { background-color: #2A6A8F; } .tour-guides-carousel .carousel-navigation { display: flex; justify-content: center; gap: 20px; margin-top: 40px; } .tour-guides-carousel .carousel-navigation .carousel-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: #FFC107; color: #2A5A70; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .tour-guides-carousel .carousel-navigation .carousel-btn:hover { background: #E0A800; transform: scale(1.05); } .tour-guides-carousel .carousel-navigation .carousel-btn:focus { outline: none; outline-offset: 2px; } .tour-guides-carousel .carousel-navigation .carousel-btn:disabled { background: var(--color-background); color: var(--color-text-muted); outline: none; } .tour-guides-carousel .carousel-navigation .carousel-btn svg { width: 20px; height: 20px; stroke-width: 3px; } .tour-guides-carousel .carousel-dots { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-lg); } .tour-guides-carousel .carousel-dots .dot { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--color-background); cursor: pointer; transition: all 0.3s ease; } .tour-guides-carousel .carousel-dots .dot:hover { background: var(--color-primary-light); } .tour-guides-carousel .carousel-dots .dot.active { background: var(--color-primary); transform: scale(1.2); } .tour-guides-carousel .carousel-dots .dot:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .tour-guides-carousel[data-single-guide=true] .carousel-navigation, .tour-guides-carousel[data-single-guide=true] .carousel-dots { display: none; } /** * Partners Section Component Styles */ .partners-container.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-xl); } .partners-container.carousel { position: relative; } .partners-container.carousel .partners-wrapper { display: flex; overflow: hidden; gap: var(--spacing-xl); transition: transform 0.5s ease; } .partners-container.carousel .partners-navigation { display: flex; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-xl); } .partners-container.carousel .partners-navigation .carousel-btn { width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--color-primary); color: var(--color-white); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .partners-container.carousel .partners-navigation .carousel-btn:hover { background: var(--color-primary-dark); transform: scale(1.1); } .partners-container.carousel .partners-navigation .carousel-btn:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .partners-container.carousel .partners-navigation .carousel-btn:disabled { background: var(--color-background); color: var(--color-text-muted); cursor: not-allowed; transform: none; } .partners-container.carousel .partners-navigation .carousel-btn .arrow-left::before { content: "‹"; font-size: 24px; font-weight: bold; } .partners-container.carousel .partners-navigation .carousel-btn .arrow-right::before { content: "›"; font-size: 24px; font-weight: bold; } .partner-item { background: var(--color-white); border-radius: var(--border-radius-lg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; text-align: center; } .carousel .partner-item { flex: 0 0 250px; } .partner-item:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .partner-item .partner-link { display: block; text-decoration: none; color: inherit; height: 100%; padding: var(--spacing-lg); } .partner-item .partner-link:hover { color: inherit; } .partner-item .partner-link:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .partner-item .partner-logo { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); border-radius: var(--border-radius-md); } .partner-item .partner-logo .partner-img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; transition: filter 0.3s ease; } .partner-item .partner-logo:hover .partner-img { filter: grayscale(0%); } .partner-item .partner-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-xs); line-height: 1.3; } .partner-item .partner-type { font-size: var(--font-size-sm); color: var(--color-accent); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); text-transform: uppercase; letter-spacing: 0.5px; } .partner-item .partner-description { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.5; margin: 0; } .partner-item[data-partner-type=cruise_line] .partner-type { color: #0066cc; } .partner-item[data-partner-type=tour_operator] .partner-type { color: #ff6b35; } .partner-item[data-partner-type=airline] .partner-type { color: #28a745; } .partner-item[data-partner-type=hotel] .partner-type { color: #6f42c1; } .partner-item[data-partner-type=transport] .partner-type { color: #17a2b8; } .partner-item[data-partner-type=activity] .partner-type { color: #ffc107; } .partner-item:not(:has(.partner-logo)) .partner-name { margin-top: var(--spacing-lg); font-size: var(--font-size-xl); } @keyframes partnerSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .partners-container.carousel.auto-play .partners-wrapper { animation: partnerSlide 20s linear infinite; } .partners-container.carousel.auto-play .partners-wrapper:hover { animation-play-state: paused; } /** * Secondary Hero Component - Tailwind Enhanced * Used across multiple templates for internal pages * THE IMAGE ITSELF overlaps wave divider, not containers */ .secondary-hero { position: relative; } .secondary-hero .secondary-hero-image-wrapper { position: relative; } .secondary-hero .secondary-hero .secondary-hero__img, .secondary-hero .secondary-hero img.secondary-hero__img { position: relative !important; z-index: 50 !important; isolation: isolate !important; } .secondary-hero__subtitle { font-family: var(--body-font-family); font-size: 14px; font-weight: 400; color: var(--color-blue-100); margin-left: 7px; margin-bottom: var(--spacing-sm); } .secondary-hero__date { font-family: var(--heading-font-family); font-size: 24px; font-weight: 400; color: var(--color-blue-100); margin-bottom: var(--spacing-md); } .secondary-hero__pricing { display: flex; align-items: baseline; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); justify-content: center; } .secondary-hero__price { font-family: var(--heading-font-family); font-size: 36px; font-weight: 700; color: var(--color-blue-100); line-height: 1; } .secondary-hero__price-suffix { font-family: var(--body-font-family); font-size: 16px; font-weight: 600; color: var(--color-blue-100); } .secondary-hero__cta { margin-top: var(--spacing-md); position: relative; z-index: 100; clear: both; } .secondary-hero__button { display: inline-block; background-color: var(--color-blue-100); color: var(--color-white); padding: 12px 24px; border-radius: 50px; text-decoration: none; font-family: var(--body-font-family); font-size: 14px; font-weight: 600; transition: all 0.3s ease; border: 2px solid var(--color-blue-100); position: relative; z-index: 100; min-height: 44px; min-width: 120px; line-height: 1.4; text-align: center; vertical-align: top; cursor: pointer; pointer-events: auto; } .secondary-hero__button:hover { background-color: var(--color-white); color: var(--color-blue-100); transform: translateY(-1px); } .secondary-hero__button:active { transform: translateY(0); } .secondary-hero__button::before, .secondary-hero__button::after { display: none; } body.single-trip .secondary-hero { position: relative; } body.single-trip .secondary-hero .secondary-hero-image-wrapper { position: relative; } body.single-trip .secondary-hero__content { text-align: left; z-index: 10; } body.single-trip .secondary-hero__img { position: relative; z-index: 50; isolation: isolate; flex-shrink: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 50%; max-width: none; width: 24rem; height: 24rem; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2)); transition: transform 0.3s ease, filter 0.3s ease; } body.single-trip .secondary-hero__img::before{ float: left; padding-top: 100%; content: ''; } body.single-trip .secondary-hero__img::after{ display: block; content: ''; clear: both; } body.single-trip .secondary-hero__img:hover { transform: translateY(3rem) scale(1.02); filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.25)); } body.single-trip .secondary-hero .hero-carousel-image { cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease, opacity 0.5s ease; } body.single-trip .secondary-hero .hero-carousel-image:hover { opacity: 0.9; } body.single-trip .secondary-hero .secondary-hero__img, body.single-trip .secondary-hero img.secondary-hero__img { position: relative !important; z-index: 50 !important; isolation: isolate !important; } body.single-trip .secondary-hero__subtitle { font-family: var(--body-font-family); font-size: 14px; font-weight: 400; color: var(--color-blue-100); margin-left: 7px; margin-bottom: var(--spacing-sm); } body.single-trip .secondary-hero__date { font-family: var(--heading-font-family); font-size: 24px; font-weight: 400; color: var(--color-blue-100); margin-bottom: var(--spacing-md); } body.single-trip .secondary-hero__pricing { display: flex; align-items: baseline; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); justify-content: center; } body.single-trip .secondary-hero__price { font-family: var(--heading-font-family); font-size: 36px; font-weight: 700; color: var(--color-blue-100); line-height: 1; } body.single-trip .secondary-hero__price-suffix { font-family: var(--body-font-family); font-size: 16px; font-weight: 600; color: var(--color-blue-100); } body.single-trip .secondary-hero__cta { margin-top: var(--spacing-md); position: relative; z-index: 100; clear: both; } body.single-trip .secondary-hero__button { display: inline-block; background-color: var(--color-blue-100); color: var(--color-white); padding: 12px 24px; border-radius: 50px; text-decoration: none; font-family: var(--body-font-family); font-size: 14px; font-weight: 600; transition: all 0.3s ease; border: 2px solid var(--color-blue-100); position: relative; z-index: 100; min-height: 44px; min-width: 120px; line-height: 1.4; text-align: center; vertical-align: top; cursor: pointer; pointer-events: auto; } body.single-trip .secondary-hero__button:hover { background-color: var(--color-white); color: var(--color-blue-100); transform: translateY(-1px); } body.single-trip .secondary-hero__button:active { transform: translateY(0); } body.single-trip .secondary-hero__button::before, body.single-trip .secondary-hero__button::after { display: none; } /* Home Page Specific Styles */ .home-page.site-main { padding-top: 0; } .hero { position: relative; height: 100vh; display: flex; flex-direction: column; justify-content: center; background-position: center; background-size: cover; background-repeat: no-repeat; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 1; } .hero .hero-content { position: relative; z-index: 2; } .main-nav ul { padding: 0; } .main-nav a { color: var(--color-white); font-family: var(--font-secondary); font-size: 1rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.5rem 0; position: relative; transition: color 0.3s ease; } .main-nav a:hover, .main-nav a:focus, .main-nav a.current-menu-item { color: var(--color-yellow); } .main-nav a:hover::after, .main-nav a:focus::after, .main-nav a.current-menu-item::after { transform: scaleX(1); opacity: 1; } .main-nav a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-yellow); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; } .header-actions { display: flex; align-items: center; gap: var(--spacing-lg); } .search-icon { font-size: var(--icon-size); color: var(--color-white); color: var(--color-white); } /* Hero Section */ .hero { background-size: cover; background-position: center; color: var(--color-white); padding: 0; height: 100vh; max-height: 900px; position: relative; display: flex; align-items: center; overflow: hidden; } .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1; } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; margin-left: auto; margin-right: auto; } .hero-content .hero-flex-container { display: flex; flex-direction: row; align-items: center; } .hero-content .badge-img { width: 200px; height: auto; display: block; } .hero-content .hero-text-container { max-width: 650px; } .hero-content .hero-text-container h1 { font-size: 4rem; line-height: 1.1; font-weight: 700; margin-bottom: 0; color: var(--color-white); } .hero-content .hero-subtitle { display: flex; justify-content: flex-start; margin-top: var(--spacing-lg); padding-top: 2%; padding-left: 2%; } .hero-content .hero-subtitle p { font-size: 1.5rem; line-height: 1.4; color: var(--color-white); max-width: 600px; margin: 0; } /* History Section Centering for Tablet and Mobile */ .history-flex-container { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; display: flex; flex-wrap: wrap; gap: var(--spacing-2xl); } /* Hero text styles - these are home-specific */ .hero-text h1 { font-family: var(--font-secondary); font-weight: 700; font-size: 60px; margin-bottom: var(--spacing-md); line-height: 1.2; } .hero-text p { font-family: var(--font-primary); font-weight: 500; font-size: 30px; margin-bottom: var(--spacing-lg); max-width: 550px; line-height: 1.25; } .section-title { font-family: "Lexend Deca", sans-serif; font-size: 50px; font-weight: 400; line-height: 1; letter-spacing: 0%; color: var(--color-blue); text-align: center; } /* Tours Grid Layout */ .tours-grid-wrapper { width: 100%; } .tours-grid { display: flex; flex-direction: column; gap: 24px; margin-left: 0px; margin-top: 30px; width: 100.5%; /* Ensure full width of parent */ /* RESPONSIVE: Adjust gap and margin for smaller screens */ } /* Tour Cards Row */ .tour-cards-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; width: 100%; /* Ensure full width of parent */ justify-content: center; /* Center grid items */ /* RESPONSIVE: Enhanced grid layout for better mobile experience */ } /* Individual Tour Card */ .tour-card { background-color: #ffffff; border-radius: 8px; border: 1px solid var(--color-primary); overflow: hidden; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; /* RESPONSIVE: Adjust border radius for mobile */ } .tour-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* RESPONSIVE: Reduce hover effect on mobile */ } .tour-card-featured { grid-column: 1/-1; margin-bottom: 24px; /* RESPONSIVE: Adjust margin for smaller screens */ } .tour-card-inner { height: 100%; display: flex; flex-direction: column; padding: 16px; /* RESPONSIVE: Adjust padding for smaller screens */ } .tour-card-featured .tour-card-inner { flex-direction: row; /* RESPONSIVE: Stack featured card content on mobile */ } .tour-card-featured .tour-card-image { flex: 1 1 60%; /* RESPONSIVE: Full width on mobile when stacked */ } .tour-card-featured .tour-card-content { flex: 1 1 40%; padding: 16px 0 16px 24px; display: flex; flex-direction: column; justify-content: center; /* RESPONSIVE: Adjust padding when stacked on mobile */ } /* Image container */ .tour-card-image { position: relative; overflow: hidden; border-radius: 4px; margin-bottom: 12px; /* RESPONSIVE: Adjust margin for smaller screens */ } .tour-card-image img { width: 100%; height: 240px; -o-object-fit: cover; object-fit: cover; display: block; /* RESPONSIVE: Adjust image height for smaller screens */ } /* Make featured card image taller */ .tour-card-featured .tour-card-image img { height: 340px; /* RESPONSIVE: Adjust featured image height for smaller screens */ } /* Tour tag (floating label over image) */ .tour-card-tag { position: absolute; top: 12px; right: 12px; background-color: rgba(255, 255, 255, 0.9); color: var(--color-primary); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 4px; /* RESPONSIVE: Adjust tag positioning and size for mobile */ } /* Card content area */ .tour-card-content { padding: 0; flex-grow: 1; display: flex; flex-direction: column; gap: 10px; /* Add some spacing between elements */ } /* Card title */ .tour-card-title { color: var(--color-primary); font-family: var(--tour-card-title-font-family); font-size: 30px; font-weight: var(--tour-card-title-font-weight); margin-top: 5px; margin-bottom: -3px; /* RESPONSIVE: Adjust title size for smaller screens */ } .tour-card-featured .tour-card-title { font-family: var(--tour-card-title-font-family); font-weight: var(--tour-card-title-font-weight); font-size: 22px; margin-top: 55px; /* RESPONSIVE: Adjust featured title size for smaller screens */ } /* Tour Card Subtitle (Featured) - appears below the title */ .tour-card-subtitle { color: var(--color-primary); font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin-top: 8px; margin-bottom: 0; /* RESPONSIVE: Adjust subtitle for smaller screens */ } /* Tour Card Title Group (Featured) */ .tour-card-title-group { font-family: var(--tour-card-title-group-font-family); font-size: var(--tour-card-title-group-font-size); font-weight: var(--tour-card-title-group-font-weight); /* RESPONSIVE: Adjust title group size for smaller screens */ } /* Tour card tagline - positioned at the top */ .tour-card-tagline { color: var(--color-primary); font-size: 14px; font-weight: 600; margin-bottom: -3px; /* RESPONSIVE: Adjust tagline for smaller screens */ } /* Tour date */ .tour-card-date { color: var(--color-primary); font-family: var(--tour-card-date-font-family); font-size: var(--tour-card-date-font-size); font-weight: var(--tour-card-date-font-weight); margin-bottom: -3px; /* RESPONSIVE: Adjust date text for smaller screens */ } /* Price Group - positioned at the bottom */ .tour-card-price-group { margin-top: auto; /* Push to bottom of flex container */ display: flex; align-items: center; justify-content: space-between; margin-bottom: 0px; /* RESPONSIVE: Adjust price group for smaller screens */ } /* Price */ .tour-card-price { color: var(--color-primary); font-family: var(--tour-card-price-font-family); font-size: var(--tour-card-price-font-size); font-weight: var(--tour-card-price-font-weight); margin-bottom: 0; /* Remove bottom margin since parent has margin */ /* RESPONSIVE: Adjust price size for smaller screens */ } .price-suffix { color: var(--color-primary); font-family: var(--price-suffix-font-family); font-size: var(--price-suffix-font-size); font-weight: var(--price-suffix-font-weight); margin-left: 2px; /* RESPONSIVE: Adjust suffix size for smaller screens */ } /* CTA Group - contains the text link */ .tour-card-cta-group { display: flex; justify-content: flex-start; font-family: var(--tour-card-cta-group-font-family); font-size: var(--tour-card-cta-group-font-size); font-weight: var(--tour-card-cta-group-font-weight); margin-top: auto; /* Push CTA to bottom of flex container */ /* RESPONSIVE: Adjust text size for smaller screens */ } /* CTA Text Link */ .tour-card-cta { color: var(--color-primary); font-family: var(--tour-card-cta-group-font-family); font-size: var(--tour-card-cta-group-font-size); font-weight: var(--tour-card-cta-group-font-weight); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s ease, -webkit-text-decoration 0.2s ease; transition: color 0.2s ease, text-decoration 0.2s ease; transition: color 0.2s ease, text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease; /* RESPONSIVE: Adjust text for smaller screens */ } /* For regular tour cards (non-featured) that don't use grouped structure */ .tour-cards-row .tour-card .tour-card-content .tour-card-cta { margin-top: auto; /* Push CTA to bottom for regular cards */ align-self: flex-start; /* Align to start of flex container */ } .tour-card-cta:hover { color: var(--color-secondary); text-decoration: underline; } /* NOTE: Responsive adjustments have been moved to the individual components above using @include breakpoint() mixins */ /* View All Trips Button */ .view-all-trips-wrapper { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-lg); } .view-all-trips-wrapper .view-all-trips-button:hover { transform: translateY(-2px); transition: transform 0.3s ease; } /* Service Categories Section */ .service-categories { /* Wave Settings * * Ensure the oceanic wave above connects properly * * Margin Top: Pull up to overlap with the wave * * Position: relative; * Z-Index: will make sure the service category section * and content stayes above the wave and wont show any distortion * */ margin-top: -1px; position: relative; /* Create a new stacking context */ z-index: 1; /* Ensure content stays above the wave */ padding: calc(var(--spacing-2xl) * 1.5) 0 0; margin: 0; background-color: var(--color-navy-900); color: var(--color-white); /* Wave container */ /* Section title styling */ } .service-categories .container { position: relative; z-index: 2; padding-bottom: 195px; max-width: 1200px; margin: 0 auto; width: 100%; padding-left: 1rem; padding-right: 1rem; /* Target the flex container with bottom padding */ } .service-categories .container > .flex.flex-wrap.justify-center.gap-24 { padding-bottom: 3rem; /* Add bottom padding */ align-items: stretch; /* Ensure all flex items have equal height */ /* Force single column layout at tablet breakpoints */ } .service-categories .white-wave-divider-container { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; line-height: 0; } .service-categories .white-wave-divider-container svg { display: block; width: 100%; height: auto; transform: translateY(1px); } .service-categories .section-title { text-align: center; margin-bottom: 2.5rem; } .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-lg); justify-content: center; } .service-category { background-color: var(--color-white); border-radius: 8px; padding: var(--spacing-lg); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); text-align: center; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; /* Center the w-64 div inside the service category */ } .service-category > div.w-64 { width: 16rem; /* w-64 in Tailwind is 16rem or 256px */ margin: 0 auto; } /* Service category cards - ensure equal height and button alignment */ .service-categories .w-64 { min-height: 400px; /* Ensure minimum height for consistency */ /* Responsive minimum heights */ } .service-category:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .category-icon { font-size: 2.5rem; color: var(--color-secondary); margin-bottom: var(--spacing-md); } .category-title { font-size: 1.5rem; color: var(--color-primary); margin-bottom: var(--spacing-md); } /* Ensure text-white class works properly */ .text-white { color: var(--color-white) !important; } /* Ensure text-center class works properly */ .text-center { text-align: center !important; } /* Ensure text-left class works properly */ .text-left { text-align: left !important; } .category-features { margin-bottom: var(--spacing-lg); text-align: left; padding-left: var(--spacing-lg); width: 100%; } .category-features li { margin-bottom: var(--spacing-sm); position: relative; color: var(--color-text); font-size: 0.95rem; } .category-features li::before { content: "✓"; color: var(--color-secondary); position: absolute; left: -20px; } /* Pill Button for Service Categories */ /* History Section Styles */ .history-section { position: relative; background-color: var(--color-white); z-index: 1; margin-top: -187px; margin-bottom: -136px; padding: var(--spacing-xl) 0; /* Responsive adjustments for the negative margin */ /* Container padding for all screen sizes */ /* Content column specific styling */ /* Specific tablet breakpoint adjustments */ /* Ensure proper spacing between columns */ /* Circular image container */ /* Content styling */ /* Wrapper for all history content elements */ /* Ticket button styling */ /* Improve flex layout for better alignment */ } .history-section .container { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } .history-section .history-content-column { /* Base styles */ width: 100%; box-sizing: border-box; /* Extra small phones (under 400px) */ /* Small phones (400px to 576px) */ /* Small tablets (577px to 767px) */ /* Medium tablets (768px to 880px) */ /* Large tablets (881px to 991px) */ /* Small desktops (992px to 1099px) */ /* Medium desktops (1100px to 1199px) */ /* Content styling */ } .history-section .history-content-column .history-content { max-width: 100%; } .history-section > .container > .flex { /* No custom gap overrides - let Tailwind handle it */ } .history-section .history-image-container { /* Base styles for the circular image */ position: relative; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 30px rgba(29, 71, 90, 0.15); margin: 0 auto; /* Default centering */ /* Responsive sizing using clamp for smoother transitions */ width: clamp(280px, 40vw, 457px); height: clamp(280px, 40vw, 457px); /* Desktop styles */ /* Tablet styles */ /* Mobile styles */ /* Small mobile styles */ } .history-section .history-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; /* Add smooth zoom effect on hover */ } .history-section .history-image-container img:hover { transform: scale(1.05); /* Subtle zoom on hover */ } .history-section .history-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; /* Add smooth zoom effect on hover */ } .history-section .history-image-container img:hover { transform: scale(1.05); /* Subtle zoom on hover */ } .history-section .history-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; /* Add smooth zoom effect on hover */ } .history-section .history-image-container img:hover { transform: scale(1.05); /* Subtle zoom on hover */ } .history-section h2 { color: var(--color-blue-200); font-size: clamp(2rem, 5vw, 2.5rem); /* Responsive font size */ font-weight: 600; margin-bottom: var(--spacing-md); text-align: left; padding-top: 0; margin-top: 0; width: 100%; /* Tablet and mobile styles */ } .history-section .history-content-wrapper { /* Base styles */ width: 100%; max-width: 600px; /* Control maximum width for readability */ text-align: left; /* Force left alignment for all screen sizes */ /* Desktop styles */ /* Tablet styles */ /* Mobile styles */ } .history-section .history-content { color: var(--color-text); margin-bottom: var(--spacing-xl); /* Reduced spacing */ line-height: 1.5; /* Slightly tighter line height */ font-size: clamp(1rem, 2vw, 1.125rem); /* Responsive font size */ text-align: left; /* Force left alignment for all screen sizes */ max-width: 100%; /* Ensure content doesn't overflow */ /* Responsive text adjustments */ } .history-section .history-content p { margin-bottom: 1rem; } .history-section .history-btn { display: inline-flex; position: relative; align-items: center; justify-content: center; background-color: transparent; color: var(--color-blue-100); font-weight: 700; padding: 0; transition: transform 0.3s ease; text-align: center; width: 146px; height: 65px; /* Adjusted height to match Figma */ margin-top: 10px; margin-left: 0; /* Ensure left alignment */ margin-right: auto; /* Ticket SVG background */ } .history-section .history-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/wp-content/themes/posturepress3/dist/images/ticket-button-bg.svg); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 0; } .history-section .history-btn .ticket-button-wrapper { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .history-section .history-btn .ticket-button-text { position: relative; z-index: 2; font-size: 1rem; font-weight: 700; } .history-section .history-btn:hover { transform: scale(1.05); } .history-section .flex { display: flex; flex-wrap: wrap; } .pill-btn { display: inline-block; background-color: var(--color-blue-200); /* Oceanic Blue Mid */ color: var(--color-white); padding: 6px 50px; border-radius: 50px; /* Rounded corners for pill shape */ font-weight: 600; text-decoration: none; text-align: center; transition: all 0.3s ease; margin-top: 15px; } .pill-btn:hover, .pill-btn:focus { background-color: #3a6275; /* Slightly darker shade of oceanic blue mid */ color: var(--color-white); transform: translateY(-2px); } .btn-category { display: inline-block; background-color: var(--color-primary); color: var(--color-white); padding: 10px 25px; border-radius: 4px; font-weight: 600; transition: all 0.3s ease; } .btn-category:hover { background-color: #163d4e; } .btn-primary:hover { background-color: #163d4e; transform: translateY(-2px); } .rounded-image { width: var(--avatar-size); height: var(--avatar-size); -o-object-fit: cover; object-fit: cover; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } /* Testimonials Section */ .testimonials-section { padding: var(--spacing-xl) 0; /* RESPONSIVE: Adjust section padding for different screen sizes */ } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--spacing-lg); /* RESPONSIVE: Enhanced grid layout for testimonials */ } .testimonial-card { background-color: var(--color-white); border-radius: 8px; padding: var(--spacing-lg); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; /* RESPONSIVE: Adjust card padding for smaller screens */ } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* RESPONSIVE: Reduce hover effect on mobile */ } .testimonial-rating { color: var(--color-secondary); margin-bottom: var(--spacing-md); font-size: 1.1rem; /* RESPONSIVE: Adjust rating size for smaller screens */ } .testimonial-text { margin-bottom: var(--spacing-md); font-style: italic; line-height: 1.6; /* RESPONSIVE: Adjust text spacing for smaller screens */ } .testimonial-author { font-weight: 700; color: var(--color-primary); /* RESPONSIVE: Adjust author text for smaller screens */ } /* Tradition Section */ .tradition-section { position: relative; background-color: var(--color-white); z-index: 1; padding: var(--spacing-xl) 0; /* Add top margin to account for the wave divider */ margin-top: -149px; /* Tradition flex container styling */ /* Container styling */ /* Content wrapper styling */ /* Section padding adjustments */ /* Circular image container */ /* Heading styling */ /* Content styling */ /* Ticket button styling */ /* Responsive layout adjustments */ } .tradition-section .tradition-flex-container { /* Mobile layout adjustments */ /* RESPONSIVE: Adjust margin-top for smaller screens */ /* RESPONSIVE: Adjust margin-top for smaller screens */ } .tradition-section .container { max-width: var(--container-width); margin: 0 auto; padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .tradition-section .tradition-content-wrapper { width: 100%; max-width: 540px; } .tradition-section .tradition-image-container { width: 300px; height: 300px; position: relative; border-radius: 50%; margin: 0 auto; box-shadow: 0 10px 30px rgba(29, 71, 90, 0.15); overflow: hidden; /* Large desktop */ /* Standard desktop */ /* Tablet landscape */ /* Mobile */ } .tradition-section .tradition-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; } .tradition-section .tradition-image-container img:hover { transform: scale(1.05); } .tradition-section .tradition-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; } .tradition-section .tradition-image-container img:hover { transform: scale(1.05); } .tradition-section .tradition-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; } .tradition-section .tradition-image-container img:hover { transform: scale(1.05); } .tradition-section .tradition-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; } .tradition-section .tradition-image-container img:hover { transform: scale(1.05); } .tradition-section .tradition-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; } .tradition-section .tradition-image-container img:hover { transform: scale(1.05); } .tradition-section .tradition-image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.5s ease; } .tradition-section .tradition-image-container img:hover { transform: scale(1.05); } .tradition-section h2 { color: var(--color-blue-200); font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 600; margin-bottom: var(--spacing-md); text-align: left; } .tradition-section .tradition-content { color: var(--color-text); margin-bottom: var(--spacing-lg); line-height: 1.6; font-size: 1rem; text-align: left; } .tradition-section .tradition-content p { margin-bottom: 1rem; } .tradition-section .tradition-btn { display: inline-flex; position: relative; align-items: center; justify-content: center; background-color: transparent; color: var(--color-blue-100); font-weight: 700; padding: 0; transition: transform 0.3s ease; text-align: center; width: 146px; height: 65px; /* Adjusted height to match Figma */ margin-top: 10px; margin-left: 0; /* Ensure left alignment */ margin-right: auto; /* Ticket SVG background */ } .tradition-section .tradition-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/wp-content/themes/posturepress3/dist/images/ticket-button-bg.svg); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 0; } .tradition-section .tradition-btn .ticket-button-wrapper { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .tradition-section .tradition-btn .ticket-button-text { position: relative; z-index: 2; font-size: 1rem; font-weight: 700; } .tradition-section .tradition-btn:hover { transform: scale(1.05); } .tradition-section .flex { display: flex; flex-wrap: wrap; } /* Newsletter Section */ .newsletter-section { padding: var(--spacing-xl) 0; background-color: var(--color-primary); color: var(--color-white); text-align: center; /* RESPONSIVE: Adjust section padding for different screen sizes */ } .newsletter-title { font-size: 2.5rem; margin-bottom: var(--spacing-md); /* RESPONSIVE: Scale down title for smaller screens */ } .newsletter-text { font-size: 1.1rem; max-width: 600px; margin: 0 auto var(--spacing-lg); /* RESPONSIVE: Adjust text for smaller screens */ } .newsletter-form { max-width: 500px; margin: 0 auto; display: flex; /* RESPONSIVE: Stack form elements on mobile */ } .newsletter-input { flex: 1; padding: 12px 20px; border: none; border-radius: 4px 0 0 4px; font-size: 1rem; /* RESPONSIVE: Adjust input for mobile */ } .newsletter-button { background-color: var(--color-secondary); color: var(--color-primary); font-weight: 700; border: none; border-radius: 0 4px 4px 0; padding: 0 20px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; /* RESPONSIVE: Adjust button for mobile */ } .newsletter-button:hover { background-color: #d89c1b; } /* Footer Styles */ .site-footer { background-color: var(--color-primary); color: var(--color-white); padding: var(--spacing-xl) 0 var(--spacing-lg); /* RESPONSIVE: Adjust footer padding for different screen sizes */ } .footer-top { display: flex; justify-content: space-between; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); flex-wrap: wrap; /* RESPONSIVE: Stack footer content on smaller screens */ } .footer-logo-img { height: 50px; width: auto; margin-bottom: var(--spacing-lg); filter: brightness(0) invert(1); /* Make the logo white in the footer */ /* RESPONSIVE: Adjust logo size for smaller screens */ } .footer-nav { display: flex; gap: var(--spacing-xl); flex-wrap: wrap; /* RESPONSIVE: Adjust navigation layout for smaller screens */ } .footer-nav-column h4 { color: var(--color-blue); margin-bottom: var(--spacing-md); font-size: 16px; font-weight: 700; /* RESPONSIVE: Adjust heading size for smaller screens */ } .footer-nav-column ul { display: flex; flex-direction: column; gap: var(--spacing-sm); /* RESPONSIVE: Adjust list spacing for smaller screens */ } .footer-nav-column a { color: rgba(255, 255, 255, 0.8); transition: color 0.3s ease; font-weight: 700; /* RESPONSIVE: Adjust link size for smaller screens */ } .footer-nav-column a:hover { color: var(--color-secondary); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-lg); border-top: 1px solid rgba(255, 255, 255, 0.1); /* RESPONSIVE: Stack footer bottom content on smaller screens */ } .copyright { font-size: 0.9rem; color: var(--color-blue); /* RESPONSIVE: Adjust copyright text for smaller screens */ } .social-links { display: flex; gap: var(--spacing-md); /* RESPONSIVE: Adjust social links spacing for smaller screens */ } .social-links a { color: var(--color-white); font-size: 1.2rem; transition: color 0.3s ease; /* RESPONSIVE: Adjust social icon size for smaller screens */ } .social-links a:hover { color: var(--color-secondary); } #home-hero { --section-padding-vertical: calc(var(--global-fluid-section-padding) * 2); --section-padding-horizontal: var(--global-gutter); } /* Testimonials Wave Dividers */ .testimonials-wave-divider-container, .bottom-testimonials-wave-divider-container { position: relative; width: 100%; line-height: 0; } .testimonials-wave-divider-container svg, .bottom-testimonials-wave-divider-container svg { display: block; width: 100%; height: auto; } /* History Section */ .section-title-container { margin-top: -69px; } /* Ticket button styles */ .history-btn .ticket-button-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: none; } .history-btn .ticket-button-text { position: relative; z-index: 1; font-family: var(--font-secondary); font-weight: 700; font-size: 16px; color: var(--color-blue-100); text-align: center; line-height: 1.5em; padding: 0 10px; } .history-btn::before { z-index: 0; } /* Tradition ticket button styling */ .tradition-btn { display: inline-flex; position: relative; align-items: center; justify-content: center; background-color: transparent; color: var(--color-blue-100); font-weight: 700; padding: 0; transition: transform 0.3s ease; text-align: center; width: 146px; height: 65px; /* Adjusted height to match Figma */ margin-top: 0px; margin-left: 0; /* Ensure left alignment */ margin-right: auto; border: none; cursor: pointer; /* Responsive adjustments for tradition-btn */ /* Ticket SVG background */ } .tradition-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/wp-content/themes/posturepress3/dist/images/ticket-button-bg.svg); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 0; } .tradition-btn .ticket-button-wrapper { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .tradition-btn .ticket-button-text { position: relative; color: var(--color-blue-100); z-index: 2; font-size: 1rem; font-weight: 700; /* Responsive text size */ } .tradition-btn:hover { transform: scale(1.05); } /** * Internal Pages Shared Styles * Used across various internal page templates */ .internal-page__section { padding: var(--spacing-2xl) 0; } .internal-page__container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--spacing-md); } /** * Trip Page Styles * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=254-263&m=dev1 */ .page-template-trip { /* Reserved for future page-specific overrides */ background-color: inherit; } .trip-page-title { text-align: center; margin-bottom: 32px; } .trip-page-title h1 { font-size: 32px; font-weight: 700; color: #1F2937; margin-bottom: 12px; } .trip-page-title p { font-size: 16px; color: #6B7280; max-width: 600px; margin: 0 auto; } .trip-grid-heading-wrapper { padding: var(--spacing-xl) 0; background-color: var(--color-white); } .trip-grid-heading-wrapper .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-md); /* RESPONSIVE: Add responsive padding for better mobile spacing */ } .trip-grid-heading { font-family: var(--header-font-family); font-weight: 700; font-size: 42px; line-height: 1; text-align: center; color: var(--color-blue-200); margin: 0; margin-top: -21px; margin-left: 350px; margin-bottom: -90px; min-height: 75px; display: flex; align-items: center; justify-content: center; max-width: 830px; /* RESPONSIVE: Improved responsive adjustments for heading */ } .trips-content { padding: 48px 0 64px; background-color: var(--color-white); /* RESPONSIVE: Adjust padding for different screen sizes */ } .trips-content .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--container-padding); /* RESPONSIVE: Enhanced container padding for different breakpoints */ } .trips-content .trips-content-inner { display: flex; flex-direction: column; /* RESPONSIVE: Switch to row layout on medium screens and up */ /* RESPONSIVE: Adjust gap for larger screens */ } .trips-content .trips-sidebar { width: 100%; margin-bottom: 32px; /* RESPONSIVE: Adjust sidebar for tablet and desktop - INCREASED WIDTH */ /* RESPONSIVE: Reduce margin on mobile */ } .trips-content .trips-packages { width: 100%; /* RESPONSIVE: Adjust packages area for desktop layout */ } .trips-content .trip-packages-grid { display: grid; grid-template-columns: 1fr; gap: 16px; /* RESPONSIVE: Enhanced grid layout for better mobile experience */ /* RESPONSIVE: Tablet layout - 2 columns */ /* RESPONSIVE: Desktop layout - 2 columns with better spacing */ /* RESPONSIVE: Large desktop - maintain 3 columns but with more space */ } .trips-content .trip-packages-grid.cruise-grid { grid-template-columns: 1fr; /* RESPONSIVE: Cruise grid tablet layout */ /* RESPONSIVE: Cruise grid desktop layout */ } .trips-content .no-trips-message { text-align: center; padding: var(--spacing-3xl); color: var(--color-text-muted); font-size: var(--font-size-lg); } .filtering-sidebar { background: var(--color-white); width: 100%; border: 0.5px solid #1D475A; border-radius: 2px; overflow: hidden; /* RESPONSIVE: Mobile-first approach for sidebar */ /* RESPONSIVE: Tablet and desktop sticky positioning */ /* RESPONSIVE: Adjust sticky top position for larger screens */ } .filtering-sidebar .filter-header { margin-bottom: 20px; /* RESPONSIVE: Adjust header spacing on mobile */ } .filtering-sidebar .filter-header .filter-title { font-size: 28px; font-weight: 700; color: #1D475A; margin: 0; /* RESPONSIVE: Scale down title on smaller screens */ } .filtering-sidebar .filter-dropdown { display: flex; align-items: center; padding: 10px 20px; border-bottom: 0.5px solid #1D475A; position: relative; cursor: pointer; /* RESPONSIVE: Improve touch targets on mobile */ } .filtering-sidebar .filter-dropdown h4 { font-family: "Lexend", sans-serif; font-size: 16px; font-weight: 700; color: #1D475A; margin: 0; flex: 1; /* RESPONSIVE: Adjust font size for mobile */ } .filtering-sidebar .filter-dropdown .dropdown-icon { width: 8px; height: 3px; position: relative; } .filtering-sidebar .filter-dropdown .dropdown-icon::before { content: ""; position: absolute; width: 100%; height: 1px; background-color: #1D475A; transform: rotate(45deg); top: 50%; left: 0; } .filtering-sidebar .filter-dropdown .dropdown-icon::after { content: ""; position: absolute; width: 100%; height: 1px; background-color: #1D475A; transform: rotate(-45deg); top: 50%; left: 0; } .filtering-sidebar .filter-group { margin-bottom: 16px; padding: 0 20px; /* RESPONSIVE: Adjust padding for mobile */ } .filtering-sidebar .filter-group h4 { font-size: 14px; font-weight: 600; color: #1D475A; margin-bottom: 8px; /* RESPONSIVE: Slightly larger text on mobile for readability */ } .filtering-sidebar .filter-group select, .filtering-sidebar .filter-group .facetwp-dropdown { width: 100%; padding: 10px 20px; border: 0.5px solid #1D475A; border-radius: 2px; font-size: 16px; font-weight: 700; color: #1D475A; background: var(--color-white); transition: border-color 0.3s ease; /* RESPONSIVE: Better mobile touch targets and spacing */ } .filtering-sidebar .filter-group select:focus, .filtering-sidebar .filter-group .facetwp-dropdown:focus { outline: none; border-color: #1D475A; /* RESPONSIVE: Enhanced focus state for mobile */ } .filtering-sidebar .filter-group .facetwp-checkbox { margin-bottom: var(--spacing-xs); } .filtering-sidebar .filter-group .facetwp-checkbox input[type=checkbox] { margin-right: var(--spacing-xs); } .filtering-sidebar .filter-group .facetwp-checkbox label { font-size: var(--font-size-sm); color: #1D475A; cursor: pointer; } .filtering-sidebar .filter-reset { margin-top: 24px; } .filtering-sidebar .filter-reset .reset-filters { width: 100%; padding: 8px 12px; background: #2563EB; color: white; border: none; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.3s ease; } .filtering-sidebar .filter-reset .reset-filters:hover { background: var(--color-blue-100); color: white !important; } .filtering-sidebar .facetwp-facet { transition: all 0.4s ease; } .filtering-sidebar .facetwp-facet.conditionally-hidden { display: none !important; opacity: 0; max-height: 0; overflow: hidden; margin: 0; padding: 0; pointer-events: none; transform: translateY(-10px); } .filtering-sidebar .facetwp-facet.conditionally-visible { display: block !important; opacity: 1; max-height: 500px; overflow: visible; transform: translateY(0); } .filtering-sidebar .filter-group.conditionally-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .filtering-sidebar .filter-group.conditionally-visible { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; } .filtering-sidebar .filter-accordion-item.conditionally-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .filtering-sidebar .filter-accordion-item.conditionally-visible { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; } .filtering-sidebar.cruise-mode .cruise-filters .filter-group-title, .filtering-sidebar.cruise-mode .cruise-filters .filter-accordion-header h4 { color: #0066cc; } .filtering-sidebar.cruise-mode .cruise-filters .filter-group-title .filter-icon, .filtering-sidebar.cruise-mode .cruise-filters .filter-accordion-header h4 .filter-icon { animation: bounce 0.5s ease; } .filtering-sidebar.tour-mode .cruise-filters .filter-group-title, .filtering-sidebar.tour-mode .cruise-filters .filter-accordion-header h4 { color: rgba(29, 71, 90, 0.4); } .filtering-sidebar.tour-mode .universal-filters .filter-group-title, .filtering-sidebar.tour-mode .universal-filters .filter-accordion-header h4, .filtering-sidebar.tour-mode .tour-filters .filter-group-title, .filtering-sidebar.tour-mode .tour-filters .filter-accordion-header h4 { color: #cc6600; } .filtering-sidebar.universal-mode .filter-group-title, .filtering-sidebar.universal-mode .filter-accordion-header h4 { color: #999; } .filtering-sidebar.all-mode .filter-group-title, .filtering-sidebar.all-mode .filter-accordion-header h4 { color: #1D475A; } @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .trip-card { background: var(--color-white); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border-light); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; } .trip-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .trip-card .trip-card-image { position: relative; height: 200px; overflow: hidden; } .trip-card .trip-card-image .trip-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } .trip-card .trip-card-image:hover .trip-img { transform: scale(1.05); } .trip-card .trip-card-image .trip-type-badge { position: absolute; top: var(--spacing-md); right: var(--spacing-md); background: rgba(52, 152, 219, 0.9); color: var(--color-white); padding: var(--spacing-xs) var(--spacing-sm); border-radius: 20px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; } .trip-card .trip-card-content { padding: var(--spacing-lg); display: flex; flex-direction: column; height: 100%; } .trip-card .trip-card-content .trip-blurb { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--spacing-xs); font-weight: 500; } .trip-card .trip-card-content .trip-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); color: var(--color-text-dark); line-height: 1.3; } .trip-card .trip-card-content .trip-date { font-size: var(--font-size-sm); color: var(--color-text); margin-bottom: auto; font-weight: 500; } .trip-card .trip-card-content .trip-excerpt { margin-bottom: var(--spacing-md); } .trip-card .trip-card-content .trip-excerpt p { font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text); margin: 0; } .trip-card .trip-card-content .trip-features { list-style: none; padding: 0; margin: 0 0 var(--spacing-lg) 0; } .trip-card .trip-card-content .trip-features li { font-size: var(--font-size-xs); color: var(--color-text); padding: var(--spacing-xs) 0; position: relative; padding-left: var(--spacing-md); } .trip-card .trip-card-content .trip-features li:before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: bold; } .trip-card .trip-card-content .trip-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-md); border-top: 1px solid var(--color-border-light); } .trip-card .trip-card-content .trip-card-footer .trip-price .price-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-accent); } .trip-card .trip-card-content .trip-card-footer .trip-price .price-value .price-pp { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-muted); margin-left: 4px; text-transform: uppercase; } .trip-card .trip-card-content .trip-card-footer .trip-button { color: var(--color-white); padding: var(--spacing-sm) var(--spacing-lg); border-radius: 8px; text-decoration: none; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .trip-card .trip-card-content .trip-card-footer .trip-button:hover { background: var(--color-primary-dark); text-decoration: none; color: var(--color-white); transform: translateY(-1px); } .facetwp-facet { margin-bottom: var(--spacing-md); } .facetwp-dropdown .fs-dropdown { width: 100%; } .facetwp-dropdown .fs-dropdown .fs-label { padding: var(--spacing-sm); border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-white); } .facetwp-template { position: relative; } .facetwp-template.facetwp-loading { opacity: 0.6; pointer-events: none; } .facetwp-template.facetwp-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid var(--color-blue-100); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; z-index: 10; } @keyframes spin { to { transform: rotate(360deg); } } .facetwp-pagination { margin-top: var(--spacing-xl); text-align: center; } .facetwp-pagination .facetwp-page { display: inline-block; padding: 8px 12px; margin: 0 4px; background: var(--color-bg); border: 1px solid var(--color-blue-100); color: var(--color-blue-100); text-decoration: none; border-radius: 4px; transition: all 0.3s ease; } .facetwp-pagination .facetwp-page:hover, .facetwp-pagination .facetwp-page.active { background: var(--color-blue-100); color: white; text-decoration: none; } .no-trips-message { text-align: center; padding: var(--spacing-xl); background: var(--color-bg); border-radius: 8px; margin: var(--spacing-lg) 0; border: 1px solid var(--color-border-light); } .no-trips-message p { color: var(--color-text); font-size: var(--p-font-size); margin: 0; line-height: 1.5; } .facetwp-loading { opacity: 0.6; pointer-events: none; } .tour-guides-section { padding: var(--spacing-5xl) 0; background-color: var(--color-blue-200); /* RESPONSIVE: Adjust section padding for different screen sizes */ } .tour-guides-section .container { max-width: 1500px; margin: 0 auto; padding: 0 var(--container-padding); /* RESPONSIVE: Enhanced container padding for different breakpoints */ } .tour-guides-section .section-header { text-align: center; margin-bottom: var(--spacing-4xl); /* RESPONSIVE: Adjust header spacing for mobile */ } .tour-guides-section .section-header .section-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-md); /* RESPONSIVE: Scale down title for smaller screens */ } .tour-guides-section .section-header .section-subtitle { font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 600px; margin: 0 auto; /* RESPONSIVE: Adjust subtitle for mobile */ } .trip-partners-section { padding: var(--spacing-5xl) 0; background-color: var(--color-white); /* RESPONSIVE: Adjust section padding for different screen sizes */ } .trip-partners-section .container { max-width: 1400px !important; margin: 0 auto; padding: 0 var(--container-padding); /* RESPONSIVE: Enhanced container padding for different breakpoints */ } .trip-partners-section .section-header { text-align: center; margin-bottom: var(--spacing-4xl); /* RESPONSIVE: Adjust header spacing for mobile */ } .trip-partners-section .section-header .section-title { font-size: 48px; font-weight: var(--font-weight-bold); color: var(--color-blue-200); margin-bottom: -36px; /* RESPONSIVE: Scale down title for smaller screens */ } .trip-partners-section .section-header .section-subtitle { font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 600px; margin: 0 auto; /* RESPONSIVE: Adjust subtitle for mobile */ } .trip-partners-section .partners-container.grid { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); justify-content: center; /* RESPONSIVE: Enhanced flex layout for partners */ } .trip-partners-section .partners-container.grid .partner-item { flex: 1 1 250px; min-width: 200px; max-width: 350px; /* RESPONSIVE: Adjust partner item sizing */ } .trip-partners-section .partners-container.carousel { position: relative; /* RESPONSIVE: Adjust carousel for mobile */ } .trip-partners-section .partner-item { background: var(--color-white); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; text-align: center; } .trip-partners-section .partner-item:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .trip-partners-section .partner-item .partner-link { display: block; text-decoration: none; color: inherit; height: 100%; padding: var(--spacing-lg); } .trip-partners-section .partner-item .partner-link:hover { color: inherit; } .trip-partners-section .partner-item .partner-logo { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); border-radius: 4px; /* RESPONSIVE: Adjust logo height for mobile */ } .trip-partners-section .partner-item .partner-logo .partner-img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; transition: filter 0.3s ease; } /* =================================== Trip Sort Controls =================================== */ .trips-sort-section { width: 100%; padding: var(--spacing-lg) 0; background: transparent; margin-top: var(--spacing-md); } .trips-sort-section .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-md); } .trips-sort-controls { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } .sort-control-wrapper { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-xs); } .sort-label { font-family: var(--header-font-family); font-weight: 700; font-size: var(--body-font-size); color: #1d475a; margin-bottom: var(--spacing-xs); text-align: left; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .sort-facet-wrapper { position: relative; width: 100%; } .sort-facet-wrapper select.trip-sort-select { width: 100%; height: 48px; padding: var(--spacing-sm) var(--spacing-md); padding-right: 40px; border: none; border-radius: 10px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: var(--header-font-family); font-weight: 700; font-size: var(--body-font-size); background-color: #1d475a; color: #ffffff; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276,9 12,15 18,9%27%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right var(--spacing-sm) center; background-size: 20px; min-height: 44px; } .sort-facet-wrapper select.trip-sort-select:focus { outline: 2px solid #efaf1f; outline-offset: 2px; } .sort-facet-wrapper select.trip-sort-select:focus-visible { outline: 3px solid #efaf1f; outline-offset: 2px; } .sort-facet-wrapper select.trip-sort-select:disabled { opacity: 0.6; cursor: not-allowed; } .sort-facet-wrapper select.trip-sort-select:disabled:hover { background-color: #1d475a; transform: none; box-shadow: none; } .sort-facet-wrapper.loading select { opacity: 0.7; cursor: wait; } .sort-facet-wrapper .sort-loading { position: absolute; top: 50%; right: 40px; transform: translateY(-50%); display: flex; align-items: center; gap: var(--spacing-xs); } .sort-facet-wrapper .sort-loading span { font-size: var(--sm-font-size); color: #1d475a; font-weight: 500; } .sort-facet-wrapper .sort-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid #1d475a; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* High contrast mode support */ /* Reduced motion support */ /** * Single Trip Page Styles * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=256-2734&m=dev */ .single-trip .page-wrapper { overflow-x: hidden; } .single-trip-wrapper { background-color: var(--color-white); min-height: 100vh; } .trip-hero { padding: var(--spacing-6xl) 0; padding-top: 240px; min-height: 544px; background-color: #C2DBE7; display: flex; align-items: center; position: relative; } .trip-hero .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); display: flex; align-items: center; position: relative; z-index: 2; } .trip-hero__content { flex: 0 0 59%; margin-top: -100px; margin-left: -81px; max-width: 521px; } .trip-hero__badge { margin-bottom: var(--spacing-lg); } .trip-hero__badge .trip-type-badge { background-color: #477990; color: var(--color-white); padding: 10px 20px; border-radius: 50px; font-family: "Roboto", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; text-align: center; display: inline-block; width: 238px; height: 42px; display: flex; align-items: center; justify-content: center; } .trip-hero__subtitle { font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 12px; line-height: 1.25; color: #1D475A; margin-bottom: var(--spacing-md); margin-left: 11px; } .trip-hero__title { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 60px; line-height: 1.218; color: #1D475A; margin-bottom: var(--spacing-lg); margin-left: 8px; width: 471px; height: 139px; } .trip-hero__date { font-family: "Lexend Deca", sans-serif; font-weight: 400; font-size: 30px; line-height: 1.25; color: #1D475A; margin-bottom: var(--spacing-xl); margin-left: 9px; width: 512px; height: 45px; } .trip-hero__pricing { margin-bottom: var(--spacing-xl); margin-left: 9px; display: flex; align-items: baseline; gap: var(--spacing-xs); } .trip-hero__price { font-family: "Lexend Deca", sans-serif; font-weight: 700; font-size: 50px; line-height: 1.25; color: #1D475A; } .trip-hero__price-suffix { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; color: #1D475A; margin-left: var(--spacing-xs); } .trip-hero__cta { margin-left: 0; } .trip-hero__button { background-color: #477990; color: var(--color-white); padding: 10px 20px; border-radius: 50px; font-family: "Roboto", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; text-decoration: none; display: inline-block; width: 238px; height: 42px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, transform 0.2s ease; } .trip-hero__button:hover { background-color: #3A6680; transform: translateY(-2px); } .trip-hero__button:active { transform: translateY(0); } .trip-hero .trip-hero__additional-info { margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid rgba(255, 255, 255, 0.2); } .trip-hero .trip-hero__additional-info .trip-price-highlight, .trip-hero .trip-hero__additional-info .trip-date-highlight { margin-bottom: var(--spacing-md); } .trip-hero .trip-hero__additional-info .trip-price-highlight .price-label, .trip-hero .trip-hero__additional-info .trip-price-highlight .date-label, .trip-hero .trip-hero__additional-info .trip-date-highlight .price-label, .trip-hero .trip-hero__additional-info .trip-date-highlight .date-label { display: block; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.8); margin-bottom: var(--spacing-xs); } .trip-hero .trip-hero__additional-info .trip-price-highlight .price-value, .trip-hero .trip-hero__additional-info .trip-price-highlight .date-value, .trip-hero .trip-hero__additional-info .trip-date-highlight .price-value, .trip-hero .trip-hero__additional-info .trip-date-highlight .date-value { display: block; font-family: "Lexend Deca", sans-serif; font-size: 18px; font-weight: 600; color: var(--color-white); } .trip-hero .trip-hero__additional-info .trip-price-highlight .price-suffix, .trip-hero .trip-hero__additional-info .trip-date-highlight .price-suffix { font-size: 14px; font-weight: 400; margin-left: var(--spacing-xs); } .trip-hero .trip-tabs-section { padding: var(--spacing-4xl) 0; background-color: var(--color-white); } .trip-hero .trip-tabs-section .container { max-width: 800px; margin: 0 auto; padding: 0 var(--container-padding); } .trip-hero .trip-tabs-section .desktop-only { display: block; } .trip-hero .trip-tabs-section .mobile-only { display: none; } .trip-hero .trip-tabs-section .trip-tabs-nav { margin-bottom: 2px !important; } .trip-hero .trip-tabs-section .trip-tabs-nav .tabs-list { display: flex; list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--color-border); } .trip-hero .trip-tabs-section .trip-tabs-nav .tabs-list .tab-item { margin: 0; } .trip-hero .trip-tabs-section .trip-tabs-nav .tabs-list .tab-item .tab-button { background: none; border: none; padding: var(--spacing-lg) var(--spacing-xl); cursor: pointer; display: flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text-light); font-weight: 500; transition: all 0.3s ease; border-radius: 8px 8px 0 0; position: relative; } .trip-hero .trip-tabs-section .trip-tabs-nav .tabs-list .tab-item .tab-button:hover { color: var(--color-primary); background-color: var(--color-light-gray); } .trip-hero .trip-tabs-section .trip-tabs-nav .tabs-list .tab-item .tab-button.active { color: var(--color-primary); background-color: var(--color-white); border: 2px solid var(--color-border); border-bottom: 2px solid var(--color-white); margin-bottom: -2px; } .trip-hero .trip-tabs-section .trip-tabs-nav .tabs-list .tab-item .tab-button .tab-icon { font-size: var(--font-size-md); } .trip-hero .trip-tabs-section .trip-tabs-nav .tabs-list .tab-item .tab-button .tab-title { font-size: var(--font-size-md); } .trip-hero .trip-tabs-section .tab-panel { background-color: var(--color-white); border: 2px solid var(--color-border); border-radius: 0 12px 12px 12px; padding: var(--spacing-2xl); min-height: 300px; } .trip-hero .trip-tabs-section .tab-panel:not(.active) { display: none; } .trip-hero .trip-tabs-section .tab-panel.active { display: block; } .trip-hero .trip-tabs-section .tab-panel .tab-placeholder { text-align: center; padding: var(--spacing-3xl); color: var(--color-text-light); } .trip-hero .trip-tabs-section .mobile-accordion { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--container-padding); box-sizing: border-box; /* Responsive sizing */ } .trip-hero .trip-tabs-section .mobile-accordion .accordion-item { margin-bottom: var(--spacing-md); border: 2px solid var(--color-border); border-radius: 12px; overflow: hidden; } .trip-hero .trip-tabs-section .mobile-accordion .accordion-item:last-child { margin-bottom: 0; } .trip-hero .trip-tabs-section .mobile-accordion .accordion-item.active .accordion-header { background-color: var(--color-primary); color: var(--color-white); } .trip-hero .trip-tabs-section .mobile-accordion .accordion-item.active .accordion-header .accordion-icon { transform: rotate(180deg); } .trip-hero .trip-tabs-section .mobile-accordion .accordion-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-lg) var(--spacing-xl); background-color: var(--color-light-gray); cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .trip-hero .trip-tabs-section .mobile-accordion .accordion-header:hover { background-color: var(--color-blue-300); color: var(--color-white); } .trip-hero .trip-tabs-section .mobile-accordion .accordion-header .accordion-icon { transition: transform 0.3s ease; } .trip-hero .trip-tabs-section .mobile-accordion .accordion-header[aria-expanded=true] { background-color: var(--color-blue-100); color: var(--color-white); } .trip-hero .trip-tabs-section .mobile-accordion .accordion-header[aria-expanded=true] .accordion-icon { transform: rotate(180deg); } .trip-hero .trip-tabs-section .mobile-accordion .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; background-color: var(--color-white); } .trip-hero .trip-tabs-section .mobile-accordion .accordion-content.expanded { max-height: 1500px; padding: var(--spacing-xl); } .trip-hero .trip-tabs-section .tab-placeholder { text-align: center; padding: var(--spacing-3xl); color: var(--color-text-light); } .trip-hero .trip-tabs-section .tab-placeholder h3 { margin-bottom: var(--spacing-md); color: var(--color-text); font-size: var(--h3-font-size); } .trip-hero .trip-tabs-section .tab-placeholder p { margin-bottom: var(--spacing-lg); } .trip-hero .trip-tabs-section .tab-placeholder code { background-color: var(--color-light-gray); padding: var(--spacing-xs) var(--spacing-sm); border-radius: 4px; font-family: "Courier New", monospace; font-size: var(--font-size-sm); } .trip-hero .trip-tabs-section .tab-placeholder .debug-trip-data { text-align: left; background-color: #f8f9fa; padding: var(--spacing-lg); border-radius: 8px; margin-top: var(--spacing-lg); border-left: 4px solid var(--color-primary); } .trip-hero .trip-tabs-section .tab-placeholder .debug-trip-data p { margin-bottom: var(--spacing-sm); font-size: var(--font-size-sm); } .trip-hero .trip-tabs-section .tab-placeholder .debug-trip-data p strong { color: var(--color-text); } .trip-hero .accordion-item { border: 2px solid var(--color-border); border-radius: 12px; margin-bottom: var(--spacing-md); overflow: hidden; } .trip-hero .accordion-item .accordion-header { width: 100%; background-color: var(--color-light-gray); border: none; padding: var(--spacing-lg); display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; color: var(--color-text); } .trip-hero .accordion-item .accordion-header .accordion-title { font-size: var(--font-size-lg); } .trip-hero .accordion-item .accordion-header .accordion-toggle::after { content: "+"; font-size: var(--font-size-xl); font-weight: 300; transition: transform 0.3s ease; } .trip-hero .accordion-item .accordion-header[aria-expanded=true] .accordion-toggle::after { content: "−"; } .trip-hero .accordion-item .accordion-content { background-color: var(--color-white); padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .trip-hero .accordion-item .accordion-content.expanded { padding: var(--spacing-lg); max-height: 1000px; } .trip-hero .accordion-item.active .accordion-header { background-color: var(--color-primary); color: var(--color-white); } .trip-tabs-section { padding: var(--spacing-4xl) 0; } .trip-tabs-section .container { max-width: 1200px; max-width: 1800px; margin: 0 auto; padding: 0 var(--container-padding); } .trip-tabs-section .desktop-only { display: block; } .trip-tabs-section .mobile-only { display: none; } .trip-tabs-section .tab-panel { background-color: var(--color-white); border: 2px solid var(--color-border); border-radius: 0 12px 12px 12px; padding: var(--spacing-2xl); } .trip-tabs-section .tab-panel:not(.active) { display: none; } .trip-tabs-section .tab-panel.active { display: block; } .trip-tabs-section .mobile-accordion-wrapper { margin-top: 24px; } .trip-tabs-section .accordion-item { border: 2px solid var(--color-border); border-radius: 12px; margin-bottom: var(--spacing-md); overflow: hidden; } .trip-tabs-section .accordion-item .accordion-header { width: 100%; background-color: var(--color-blue-300); border: none; padding: var(--spacing-lg); display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; color: var(--color-text); } .trip-tabs-section .accordion-item .accordion-header .accordion-title { font-size: var(--font-size-lg); } .trip-tabs-section .accordion-item .accordion-header .accordion-toggle::after { content: "+"; font-size: var(--font-size-xl); font-weight: 300; transition: transform 0.3s ease; } .trip-tabs-section .accordion-item .accordion-header[aria-expanded=true] .accordion-toggle::after { content: "−"; } .trip-tabs-section .accordion-item .accordion-content { background-color: var(--color-white); padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .trip-tabs-section .accordion-item .accordion-content.expanded { padding: var(--spacing-lg); height: 100%; max-height: 200%; } .trip-tabs-section .accordion-item.active .accordion-header { background-color: var(--color-primary); color: var(--color-white); } .trip-details-tab-content, .trip-itinerary-tab-content, .trip-pricing-tab-content, .trip-terms-tab-content { font-family: "Montserrat", sans-serif; line-height: 1.6; color: var(--color-text); } .trip-details-tab-content .trip-details-layout { display: flex; flex-direction: column; gap: var(--spacing-2xl); margin-bottom: 25px; } .trip-details-tab-content .trip-includes-section { width: 100%; } .trip-details-tab-content .trip-includes-section .includes-heading { font-size: var(--h3-font-size); font-weight: 700; color: var(--color-text); margin-bottom: var(--spacing-lg); } .trip-details-tab-content .trip-includes-section .trip-includes-list { list-style: none; margin: 0; padding: 0; margin-bottom: var(--spacing-xl); } .trip-details-tab-content .trip-includes-section .trip-includes-list .inclusion-item { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .trip-details-tab-content .trip-includes-section .trip-includes-list .inclusion-item .inclusion-bullet { color: var(--color-primary); font-weight: 700; font-size: var(--font-size-lg); line-height: 1; margin-top: 2px; } .trip-details-tab-content .trip-includes-section .trip-includes-list .inclusion-item .inclusion-text { color: var(--color-text); line-height: 1.5; } .trip-details-tab-content .trip-includes-section .trip-quote-section .get-quote-button { display: inline-block; background-color: #E6A91F; color: var(--color-white); padding: var(--spacing-md) var(--spacing-xl); border-radius: 6px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; } .trip-details-tab-content .trip-includes-section .trip-quote-section .get-quote-button:hover { background-color: #D49A1A; } .trip-details-tab-content .trip-visual-section { width: 147px; max-width: 586px; height: auto; max-height: 700px; margin-top: auto; margin-right: auto; margin-bottom: auto; background-color: #C2DBE7; border-radius: 0 12px 12px 0; position: relative; } .trip-details-tab-content .trip-visual-section .travel-guide-pill-desktop { position: absolute; top: 41px; right: 0; background-color: #2C5F7A; color: var(--color-white); padding: 14px 78px; border-radius: 20px 0 0 20px; font-weight: 600; font-size: 22px; box-shadow: 0 4px 12px rgba(44, 95, 122, 0.3); display: flex; align-items: center; z-index: 10; } .trip-details-tab-content .trip-visual-section .travel-guide-pill-desktop .guide-label { margin-right: var(--spacing-xs); } .trip-details-tab-content .trip-visual-section .travel-guide-pill-desktop .guide-name { font-weight: 700; } .trip-details-tab-content .trip-visual-section .travel-guide-pill { position: absolute; top: 41px; right: 0; background-color: #2C5F7A; color: var(--color-white); padding: 14px 78px; border-radius: 20px 0 0 20px; font-weight: 600; font-size: 22px; box-shadow: 0 4px 12px rgba(44, 95, 122, 0.3); display: flex; align-items: center; z-index: 10; } .trip-details-tab-content .trip-visual-section .travel-guide-pill .guide-label { margin-right: var(--spacing-xs); } .trip-details-tab-content .trip-visual-section .travel-guide-pill .guide-name { font-weight: 700; } .trip-details-tab-content .trip-visual-section .trip-details-image-container { position: relative; width: 100%; height: 75%; top: 95px; padding: var(--spacing-lg); display: flex; flex-direction: column; justify-content: center; } .trip-details-tab-content .trip-visual-section .trip-details-image-container .trip-details-img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; display: block; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .trip-details-tab-content .travel-guide-pill-mobile { display: none; } .tab-placeholder { text-align: center; padding: var(--spacing-3xl); color: var(--color-text-light); } .tab-placeholder h3 { margin-bottom: var(--spacing-md); color: var(--color-text); } .trip-itinerary-tab-content .itinerary-days-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } .trip-itinerary-tab-content .itinerary-day { margin-bottom: var(--spacing-lg); } .trip-itinerary-tab-content .itinerary-day .day-heading { font-size: var(--h4-font-size); font-weight: 700; color: var(--color-text); margin-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-border); padding-bottom: var(--spacing-sm); } .trip-itinerary-tab-content .itinerary-day .day-activities-list { list-style: none; margin: 0; padding: 0; } .trip-itinerary-tab-content .itinerary-day .day-activities-list .activity-item { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); } .trip-itinerary-tab-content .itinerary-day .day-activities-list .activity-item .activity-bullet { color: var(--color-primary); font-weight: 700; font-size: var(--font-size-lg); line-height: 1; margin-top: 2px; } .trip-itinerary-tab-content .itinerary-day .day-activities-list .activity-item .activity-text { color: var(--color-text); line-height: 1.5; font-size: var(--font-size-md); } .trip-pricing-tab-content .pricing-layout { display: flex; flex-direction: column; width: 46%; margin-top: 10px; gap: var(--spacing-2xl); } .trip-pricing-tab-content .pricing-details-section { width: 100%; } .trip-pricing-tab-content .pricing-details-section .pricing-section-title { font-size: var(--h3-font-size); font-weight: 700; color: var(--color-text); margin-bottom: var(--spacing-lg); } .trip-pricing-tab-content .pricing-details-section .pricing-details-list { list-style: none; margin: 0; padding: 0; margin-bottom: var(--spacing-xl); } .trip-pricing-tab-content .pricing-details-section .pricing-details-list .pricing-detail-item { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .trip-pricing-tab-content .pricing-details-section .pricing-details-list .pricing-detail-item .detail-bullet { color: var(--color-primary); font-weight: 700; font-size: var(--font-size-lg); line-height: 1; margin-top: 2px; } .trip-pricing-tab-content .pricing-details-section .pricing-details-list .pricing-detail-item .detail-text { color: var(--color-text); line-height: 1.5; font-size: var(--font-size-md); } .trip-pricing-tab-content .pricing-details-section .pricing-extras { border-top: 1px solid var(--color-border); padding-top: var(--spacing-lg); } .trip-pricing-tab-content .pricing-details-section .pricing-extras .extras-title { font-size: var(--h4-font-size); font-weight: 700; margin-bottom: var(--spacing-md); } .trip-pricing-tab-content .pricing-details-section .pricing-extras .extras-content .extras-note { font-style: italic; margin-bottom: var(--spacing-sm); } .trip-pricing-tab-content .pricing-details-section .pricing-extras .extras-content .extras-price { font-weight: 600; color: var(--color-primary); } .trip-pricing-tab-content .upgrade-details { margin-left: -10px; margin-top: -12px; } .trip-pricing-tab-content .upgrade-package-section { width: 100%; color: var(--color-white); padding: var(--spacing-xl); border-radius: 12px; margin-left: 193px; margin-top: -36px; } .trip-pricing-tab-content .upgrade-package-section .upgrade-header { margin-bottom: var(--spacing-lg); } .trip-pricing-tab-content .upgrade-package-section .upgrade-header .upgrade-title { font-size: var(--h4-font-size); font-weight: 700; color: var(--color-white); margin: 0; } .trip-pricing-tab-content .upgrade-package-section .upgrade-features-list { list-style: none; margin: 0; padding: 0; } .trip-pricing-tab-content .upgrade-package-section .upgrade-features-list .upgrade-feature-item { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .trip-pricing-tab-content .upgrade-package-section .upgrade-features-list .upgrade-feature-item .feature-bullet { color: #E6A91F; font-weight: 700; font-size: var(--font-size-lg); line-height: 1; margin-top: 2px; } .trip-pricing-tab-content .upgrade-package-section .upgrade-features-list .upgrade-feature-item .feature-text { color: var(--color-white); line-height: 1.5; font-size: var(--font-size-md); } .trip-pricing-tab-content .pricing-upgrade-pill-mobile { display: none; } .trip-terms-tab-content .terms-content-section { max-width: 800px; } .trip-terms-tab-content .terms-content-section .terms-main-title { font-size: var(--h3-font-size); font-weight: 700; color: var(--color-text); margin-bottom: var(--spacing-lg); } .trip-terms-tab-content .terms-content-section .terms-text-content { font-size: var(--font-size-md); line-height: 1.6; color: var(--color-text); } .trip-terms-tab-content .terms-content-section .terms-text-content p { margin-bottom: var(--spacing-md); } .oceanic-lite-wave-divider-container { margin-bottom: -5px; } /** * About Page Styles */ .about-page-content-section { padding: var(--spacing-4xl) 0; background-color: var(--color-white); } .about-page-content-section .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); } .about-page-content-section .about-page-content h1, .about-page-content-section .about-page-content h2, .about-page-content-section .about-page-content h3, .about-page-content-section .about-page-content h4, .about-page-content-section .about-page-content h5, .about-page-content-section .about-page-content h6 { font-family: var(--header-font-family); font-weight: var(--header-font-weight); color: var(--color-primary); margin-bottom: var(--spacing-md); } .about-page-content-section .about-page-content h1 { font-size: var(--h1-font-size); } .about-page-content-section .about-page-content h2 { font-size: var(--h2-font-size); } .about-page-content-section .about-page-content h3 { font-size: var(--h3-font-size); } .about-page-content-section .about-page-content h4 { font-size: var(--h4-font-size); } .about-page-content-section .about-page-content h5 { font-size: var(--h5-font-size); } .about-page-content-section .about-page-content h6 { font-size: var(--h6-font-size); } .about-page-content-section .about-page-content p { font-family: var(--body-font-family); font-size: var(--p-font-size); line-height: 1.6; margin-bottom: var(--spacing-md); } .about-page-content-section .about-page-content ul, .about-page-content-section .about-page-content ol { margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); } .about-page-content-section .about-page-content ul li, .about-page-content-section .about-page-content ol li { font-family: var(--body-font-family); font-size: var(--p-font-size); line-height: 1.6; color: var(--color-text); margin-bottom: var(--spacing-xs); } .about-page-content-section .about-page-content img { max-width: 100%; height: auto; border-radius: 8px; } .about-page-content-section .about-page-content .wp-block-image { margin-bottom: var(--spacing-lg); } .about-page-content-section .about-page-content .wp-block-image.aligncenter { text-align: center; } .about-page-content-section .about-page-content .wp-block-columns { margin-bottom: var(--spacing-lg); } .about-page-content-section .about-page-content .wp-block-button { margin-bottom: var(--spacing-md); } .about-page-content-section .about-page-content .wp-block-button .wp-block-button__link { background-color: var(--color-secondary); color: var(--color-white); padding: var(--spacing-sm) var(--spacing-lg); border-radius: 5px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; } .about-page-content-section .about-page-content .wp-block-button .wp-block-button__link:hover { background-color: var(--color-primary); } .about-page-content-section .about-page-content .wp-block-quote { border-left: 4px solid var(--color-secondary); padding-left: var(--spacing-lg); margin: var(--spacing-lg) 0; font-style: italic; color: var(--color-gray); } .about-page-content-section .about-page-content .wp-block-media-text { display: flex !important; align-items: center; gap: var(--spacing-2xl); margin: var(--spacing-3xl) 0; grid-template-columns: unset !important; grid-template-areas: unset !important; } .about-page-content-section .about-page-content .wp-block-media-text .wp-block-media-text__media { flex: 0 0 31%; margin: 0; } .about-page-content-section .about-page-content .wp-block-media-text .wp-block-media-text__media img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 8px; } .about-page-content-section .about-page-content .wp-block-media-text .wp-block-media-text__content { flex: 1; padding: 0; } .about-page-content-section .about-page-content .wp-block-media-text .wp-block-media-text__content h2 { margin-top: 0; margin-bottom: var(--spacing-lg); } .about-page-content-section .about-page-content .wp-block-media-text .wp-block-media-text__content p { margin-bottom: var(--spacing-md); } .about-page-content-section .about-page-content .wp-block-media-text .wp-block-media-text__content p:last-child { margin-bottom: 0; } .about-page-content-section .about-page-content .wp-block-media-text.has-media-on-the-right { flex-direction: row-reverse; } .team-section { display: none; padding: var(--spacing-6xl) 0; background-color: var(--color-white); } .team-section .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); text-align: center; } .team-section .section-title { font-family: var(--header-font-family); font-size: var(--h2-font-size); font-weight: var(--header-font-weight); color: var(--color-primary); margin-bottom: var(--spacing-3xl); text-align: center; } .team-section .team-members-grid { display: flex; flex-wrap: wrap; margin: 0 calc(var(--spacing-2xl) / -2); } .team-section .team-members-grid .team-member { flex: 0 0 calc(33.333% - var(--spacing-2xl)); margin: 0 calc(var(--spacing-2xl) / 2) var(--spacing-2xl); } .team-section .team-member { display: flex; flex-direction: column; align-items: center; } .team-section .team-member-photo-wrapper { width: 206px; height: 206px; border-radius: 50%; padding: 9px; background-color: var(--color-white); border: 6px solid var(--color-blue-200); margin-bottom: var(--spacing-md); } .team-section .team-member-photo { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .team-section .team-member-photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.5s ease; } .team-section .team-member-photo img:hover { transform: scale(1.05); } .team-section .team-member-info { text-align: center; padding: var(--spacing-lg); } .team-section .member-name { font-family: var(--header-font-family); font-size: var(--h4-font-size); font-weight: var(--header-font-weight); color: var(--color-primary); margin-bottom: var(--spacing-xs); } .team-section .member-position { font-family: var(--body-font-family); font-size: var(--small-font-size); color: var(--color-gray); margin-bottom: var(--spacing-md); font-size: 0.95rem; } .team-section .member-bio { font-size: 0.9rem; line-height: 1.5; color: var(--color-text); } .news-section { padding-top: var(--spacing-2xl) 0; padding-bottom: var(--spacing-8xl); background-color: var(--color-blue-200); position: relative; z-index: 2; } .news-section .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); } .news-section .section-title { font-family: var(--header-font-family); font-size: var(--h2-font-size); font-weight: var(--header-font-weight); color: var(--color-white); margin-bottom: var(--spacing-3xl); text-align: left; } .news-section .news-grid { display: flex; flex-wrap: wrap; margin: 0 calc(var(--spacing-xl) / -2); } .news-section .news-grid .news-card { flex: 0 0 calc(25% - var(--spacing-xl)); margin: 0 calc(var(--spacing-xl) / 2) var(--spacing-xl); } .news-section .news-card { background-color: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .news-section .news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); } .news-section .news-image { height: 180px; overflow: hidden; } .news-section .news-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } .news-section .news-image:hover img { transform: scale(1.05); } .news-section .news-content { padding: var(--spacing-md); } .news-section .news-meta { margin-bottom: var(--spacing-xs); } .news-section .news-date { font-size: var(--small-font-size); color: var(--color-gray); } .news-section .news-title { font-family: var(--header-font-family); font-size: var(--h5-font-size); font-weight: var(--header-font-weight); margin-bottom: var(--spacing-sm); } .news-section .news-title a { color: var(--color-primary); text-decoration: none; } .news-section .news-title a:hover { color: var(--color-blue-200); } .news-section .news-excerpt { font-size: var(--small-font-size); color: var(--color-text); margin-bottom: var(--spacing-md); line-height: 1.5; } .news-section .read-more-link { display: inline-block; font-size: var(--small-font-size); font-weight: 600; color: var(--color-secondary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; position: relative; } .news-section .read-more-link:after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background-color: var(--color-secondary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .news-section .read-more-link:hover { color: var(--color-primary); } .news-section .read-more-link:hover:after { transform: scaleX(1); transform-origin: left; background-color: var(--color-primary); } .newsletter-section { background-color: var(--color-white); padding: 0; } .newsletter-section .container { max-width: var(--container-width); margin: 0 auto; margin-left: -19px; margin-bottom: -1px; } .newsletter-section .newsletter-wrapper { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2xl); } .newsletter-section .newsletter-image { flex: 0 0 46%; margin-left: -1px; } .newsletter-section .newsletter-image img { width: 100%; height: auto; border-radius: 8px; -o-object-fit: cover; object-fit: cover; } .newsletter-section .newsletter-content { flex: 0 0 51%; } .newsletter-section .newsletter-heading { font-family: var(--header-font-family); font-size: var(--h3-font-size); font-weight: var(--header-font-weight); margin-bottom: var(--spacing-md); color: var(--color-blue-100); padding-bottom: 33px; } .newsletter-section .newsletter-text { margin-bottom: var(--spacing-lg); font-size: var(--p-font-size); line-height: 1.6; color: var(--color-text); } .newsletter-section .newsletter-form .form-group { display: flex; max-width: 450px; align-items: center; gap: 10px; /* Add spacing between input and button */ } .newsletter-section .newsletter-form input[type=email] { flex: 1 0 94%; padding: 10px 20px; /* Match Figma padding */ border: none; border-radius: 10px; /* Match Figma border radius */ font-size: 16px; /* Match Figma font size */ background-color: #C2DBE7; /* Match Figma background color */ height: 45px; /* Match Figma height */ font-family: "Roboto", sans-serif; /* Match Figma font */ } .newsletter-section .newsletter-form input[type=email]::-moz-placeholder { color: #477990; /* Match Figma placeholder color */ font-weight: 700; /* Match Figma font weight */ opacity: 1; /* Full opacity for better visibility */ } .newsletter-section .newsletter-form input[type=email]::placeholder { color: #477990; /* Match Figma placeholder color */ font-weight: 700; /* Match Figma font weight */ opacity: 1; /* Full opacity for better visibility */ } .newsletter-section .newsletter-form .btn-subscribe { position: relative; display: flex; align-items: center; justify-content: center; padding: 12px 25px; background-color: var(--color-yellow-100); color: var(--color-white); border: none; border-radius: 0; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%); } .newsletter-section .newsletter-form .btn-subscribe .ticket-text { position: relative; z-index: 2; font-weight: 700; font-size: 16px; color: var(--color-white); } .newsletter-section .newsletter-form .btn-subscribe:hover { background-color: var(--color-yellow-200); } /** * News Page Styles * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=485-2271&m=dev */ .news-content-section { padding: var(--spacing-6xl) 0; background-color: var(--color-white); } .news-content-section .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--container-padding); } .news-content-block { margin-bottom: var(--spacing-4xl); } .news-content-block:last-child { margin-bottom: 0; } .news-content-headline { font-family: var(--header-font-family); font-size: var(--h3-font-size); font-weight: var(--header-font-weight); color: var(--color-secondary); margin-bottom: var(--spacing-lg); line-height: 1.25; } .news-content-text { font-family: var(--body-font-family); font-size: var(--p-font-size); line-height: 1.5; color: var(--color-text); } .news-content-text p { margin-bottom: var(--spacing-lg); } .news-content-text p:last-child { margin-bottom: 0; } .news-content-text strong { font-weight: 700; } .news-content-text em { font-style: italic; } .news-content-text a { color: var(--color-primary); text-decoration: underline; transition: color 0.3s ease; } .news-content-text a:hover { color: var(--color-blue-200); } .news-content-text ul, .news-content-text ol { margin-bottom: var(--spacing-lg); padding-left: var(--spacing-lg); } .news-content-text ul li, .news-content-text ol li { margin-bottom: var(--spacing-sm); } .news-content-text ul li:last-child, .news-content-text ol li:last-child { margin-bottom: 0; } .news-content-text blockquote { margin: var(--spacing-xl) 0; padding: var(--spacing-lg) var(--spacing-xl); border-left: 4px solid var(--color-secondary); background-color: var(--color-gray-100); font-style: italic; } .news-content-text blockquote p:last-child { margin-bottom: 0; } .news-content-text img { max-width: 100%; height: auto; margin: var(--spacing-lg) 0; border-radius: var(--border-radius); } .news-articles-section { padding: var(--spacing-6xl) 0 var(--spacing-8xl); background-color: var(--color-white); position: relative; } .news-articles-section .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--container-padding); } .news-section-title { font-family: var(--header-font-family); font-size: var(--h2-font-size); font-weight: var(--header-font-weight); color: var(--color-blue-200); text-align: left; margin-bottom: var(--spacing-4xl); } .news-articles-grid { display: flex; flex-wrap: wrap; gap: var(--spacing-2xl); justify-content: flex-start; } .news-articles-grid .news-article-card { flex: 0 0 calc(33.333% - var(--spacing-xl)); max-width: 400px; min-height: 480px; } .news-article-card { background-color: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; } .news-article-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); } .news-article-card:hover .news-article-image img { transform: scale(1.05); } .news-article-card:hover .news-image-overlay { opacity: 0.3; } .news-article-image { position: relative; height: 250px; overflow: hidden; border-radius: 8px 8px 0 0; } .news-article-image a { display: block; height: 100%; position: relative; } .news-article-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; transition: transform 0.3s ease; } .news-article-image .news-image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); opacity: 0; transition: opacity 0.3s ease; } .news-article-content { padding: var(--spacing-lg); display: flex; flex-direction: column; flex: 1; justify-content: space-between; } .news-article-meta { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); font-size: var(--small-font-size); } .news-article-date { color: var(--color-gray); font-weight: 500; font-size: var(--small-font-size); } .news-article-category { color: var(--color-primary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .news-article-category::before { content: "•"; margin-right: var(--spacing-xs); color: var(--color-gray); } .news-article-title { font-family: var(--header-font-family); font-size: var(--h5-font-size); font-weight: var(--header-font-weight); margin-bottom: var(--spacing-sm); line-height: 1.3; } .news-article-title a { color: var(--color-primary); text-decoration: none; transition: color 0.3s ease; display: block; } .news-article-title a:hover { color: var(--color-blue-200); } .news-article-excerpt { font-size: var(--small-font-size); color: var(--color-text); line-height: 1.5; margin-bottom: var(--spacing-md); flex: 1; } .news-read-more { display: inline-flex; align-items: center; font-size: var(--small-font-size); font-weight: 600; color: var(--color-secondary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; position: relative; align-self: flex-start; } .news-read-more:after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--color-secondary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .news-read-more:hover { color: var(--color-primary); } .news-read-more:hover:after { transform: scaleX(1); transform-origin: left; background-color: var(--color-primary); } .news-pagination { margin: var(--spacing-5xl) auto 0; max-width: 100%; display: flex; justify-content: center; padding: 0 var(--spacing-lg); } .news-pagination ul.page-numbers { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: var(--spacing-sm); list-style: none; margin: 0 auto; padding: 0; max-width: 100%; overflow-x: auto; } .news-pagination ul.page-numbers li { flex-shrink: 0; display: flex; } .news-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: 6px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; font-size: var(--small-font-size); color: var(--color-primary); background: transparent; } .news-pagination .page-numbers:hover { color: var(--color-primary); transform: translateY(-2px); } .news-pagination .page-numbers.current { background-color: var(--color-primary); color: var(--color-white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .news-pagination .page-numbers.dots { background: transparent; color: var(--color-gray); cursor: default; } .news-pagination .page-numbers.dots:hover { background: transparent; color: var(--color-gray); transform: none; box-shadow: none; } .news-pagination .page-numbers.prev, .news-pagination .page-numbers.next { font-size: 16px; } .no-posts-found { text-align: center; padding: var(--spacing-6xl) 0; } .no-posts-found h2 { font-family: var(--header-font-family); font-size: var(--h3-font-size); color: var(--color-primary); margin-bottom: var(--spacing-lg); } .no-posts-found p { font-size: var(--p-font-size); color: var(--color-text); } /** * Single Post Styles * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=485-2271&m=dev */ .news-article { padding: var(--spacing-6xl) 0; background-color: var(--color-white); } .news-article .container { max-width: 800px; margin: 0 auto; padding: 0 var(--container-padding); } .news-article-header { margin-bottom: var(--spacing-3xl); } .news-article-title { font-family: var(--header-font-family); font-size: var(--h3-font-size); font-weight: var(--header-font-weight); color: var(--color-blue-200); line-height: 1.2; margin-bottom: 30px; } .news-article-body { font-family: var(--body-font-family); font-size: var(--p-font-size); line-height: 1.6; color: var(--color-text); } .news-article-body p { margin-bottom: var(--spacing-lg); } .news-article-body p:last-child { margin-bottom: 0; } .news-article-body h2, .news-article-body h3, .news-article-body h4, .news-article-body h5, .news-article-body h6 { font-family: var(--header-font-family); font-weight: var(--header-font-weight); color: var(--color-secondary); margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-md); } .news-article-body h2 { font-size: var(--h3-font-size); } .news-article-body h3 { font-size: var(--h4-font-size); } .news-article-body h4 { font-size: var(--h5-font-size); } .news-article-body ul, .news-article-body ol { margin-bottom: var(--spacing-lg); padding-left: var(--spacing-xl); } .news-article-body ul li, .news-article-body ol li { margin-bottom: var(--spacing-sm); } .news-article-body img { max-width: 100%; height: auto; margin: var(--spacing-xl) 0; border-radius: var(--border-radius); } .news-article-body a { color: var(--color-primary); text-decoration: underline; } .news-article-body a:hover { color: var(--color-blue-200); } .news-article-body blockquote { margin: var(--spacing-xl) 0; padding: var(--spacing-lg) var(--spacing-xl); border-left: 4px solid var(--color-secondary); background-color: var(--color-gray-100); font-style: italic; } .news-article-footer { margin-top: var(--spacing-4xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-gray-200); } .news-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); } .tags-label { font-weight: 600; color: var(--color-secondary); } .news-tag { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); background-color: var(--color-gray-100); border-radius: 4px; font-size: var(--small-font-size); color: var(--color-text); text-decoration: none; transition: background-color 0.3s ease; } .news-tag:hover { background-color: var(--color-gray-200); color: var(--color-text); } .news-article-navigation { margin-top: var(--spacing-xl); } .news-article-navigation .post-navigation { display: flex; justify-content: space-between; } .news-article-navigation .nav-previous, .news-article-navigation .nav-next { max-width: 45%; } .news-article-navigation .nav-subtitle { display: block; font-size: var(--small-font-size); color: var(--color-gray); margin-bottom: var(--spacing-xs); } .news-article-navigation .nav-title { font-weight: 600; color: var(--color-primary); } .news-article-navigation .nav-title:hover { text-decoration: underline; } .white-mid-wave-divider-container { margin-bottom: -1px; margin-top: -104px; z-index: 1; } /** * General Page Styles * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=411-1878&m=dev */ .page-template-general { background-color: var(--color-white); } .general-content { padding: var(--spacing-xl) 0; background-color: var(--color-white); } .general-content .container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--spacing-md); } .general-content .general-content-inner { width: 100%; } .general-content .general-content-inner .content-wrapper { width: 100%; margin: 0 auto; } .general-content .general-content-inner h1, .general-content .general-content-inner h2, .general-content .general-content-inner h3, .general-content .general-content-inner h4, .general-content .general-content-inner h5, .general-content .general-content-inner h6 { font-family: var(--heading-font-family); color: var(--color-blue-200); margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); } .general-content .general-content-inner h1:first-child, .general-content .general-content-inner h2:first-child, .general-content .general-content-inner h3:first-child, .general-content .general-content-inner h4:first-child, .general-content .general-content-inner h5:first-child, .general-content .general-content-inner h6:first-child { margin-top: 0; } .general-content .general-content-inner h1 { font-size: calc(var(--h1-font-size) * 0.7); line-height: 1.2; } .general-content .general-content-inner h2 { font-size: calc(var(--h3-font-size) * 0.8); line-height: 1.3; } .general-content .general-content-inner h3 { font-size: calc(var(--h3-font-size) * 0.8); line-height: 1.3; } .general-content .general-content-inner h4 { font-size: calc(var(--h4-font-size) * 0.85); line-height: 1.3; } .general-content .general-content-inner h5 { font-size: calc(var(--h5-font-size) * 0.9); line-height: 1.3; } .general-content .general-content-inner h6 { font-size: calc(var(--h6-font-size) * 0.9); line-height: 1.3; } .general-content .general-content-inner p { font-family: var(--body-font-family); font-size: calc(var(--p-font-size) * 0.9); line-height: 1.6; color: var(--color-text); margin-bottom: var(--spacing-md); } .general-content .general-content-inner ul, .general-content .general-content-inner ol { margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); } .general-content .general-content-inner ul li, .general-content .general-content-inner ol li { font-family: var(--body-font-family); font-size: calc(var(--p-font-size) * 0.9); line-height: 1.6; color: var(--color-text); margin-bottom: var(--spacing-xs); } .general-content .general-content-inner a { color: var(--color-blue-100); text-decoration: underline; transition: color 0.3s ease; } .general-content .general-content-inner a:hover, .general-content .general-content-inner a:focus { color: var(--color-blue-200); } .general-content .general-content-inner img, .general-content .general-content-inner figure { max-width: 100%; height: auto; margin-bottom: var(--spacing-md); } .general-content .general-content-inner img.alignleft, .general-content .general-content-inner figure.alignleft { float: none; margin-right: 0; margin-bottom: var(--spacing-md); width: 100%; } .general-content .general-content-inner img.alignright, .general-content .general-content-inner figure.alignright { float: none; margin-left: 0; margin-bottom: var(--spacing-md); width: 100%; } .general-content .general-content-inner img.aligncenter, .general-content .general-content-inner figure.aligncenter { display: block; margin-left: auto; margin-right: auto; } .general-content .general-content-inner blockquote { border-left: 3px solid var(--color-blue-100); padding-left: var(--spacing-md); margin-left: 0; margin-right: 0; margin-bottom: var(--spacing-md); font-style: italic; } .general-content .general-content-inner blockquote p { font-size: var(--p-font-size); } .general-content .general-content-inner table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-md); overflow-x: auto; display: block; } .general-content .general-content-inner table th, .general-content .general-content-inner table td { border: 1px solid var(--color-gray-200); padding: var(--spacing-sm); text-align: left; min-width: 100px; } .general-content .general-content-inner table th { background-color: var(--color-gray-100); font-weight: bold; } /** * For any sass variables that may be used in multiple places, * in the settings folder. * List them here. * * With sass @use rules there is no longer a "global" scope. * For example trying to @use "sizing" in fluid-typography will result in an error. * Because it is already @forwarded in the settings.scss file. This will cause a looping error in the compiler. * When a global value is needed in multiple places list it here or prefer to use a css custom attribute **/ .contact-page { position: relative; overflow: hidden; } .contact-background-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: repeat-y; background-size: 100% auto; background-position: center top; z-index: -1; opacity: 1; } .contact-hero { position: relative; background-color: var(--color-blue-100); z-index: 2; } .contact-hero__content { text-align: left; } .contact-hero__title { color: var(--color-white); font-size: 48px; font-weight: 700; margin: 0; } .contact-content { padding: 0; position: relative; z-index: 2; } .contact-content .container { position: relative; z-index: 2; width: 100%; max-width: 100%; } .contact-content .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .contact-wave-divider-container { min-height: 750px; } /** * 404 Page Styles * Based on Figma Design: https://www.figma.com/design/lNoSZMf1JTExSU1apALbON/Travelworld?node-id=411-2169&m=dev */ body.error404 { margin: 0; padding: 0; overflow-x: hidden; } .error-404-page { position: relative; min-height: 70vh; width: 100%; overflow: hidden; } .error-404-wave-container { position: relative; width: 100%; z-index: 10; margin-top: 62px; background: transparent; } .error-404-wave-divider-container { position: relative; width: 100%; margin-bottom: 0; display: flex; justify-content: center; overflow: hidden; } .error-404-wave-divider-container .error-404-wave-divider-svg { width: 100%; height: auto; min-width: 1440px; } .error-404-content { position: relative; min-height: 790px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: flex-start; padding: 64px 48px; margin-top: -117px; } .error-404-message { position: relative; z-index: 2; max-width: 600px; } .error-404-headline { font-family: var(--heading-font-family); font-size: 3.5rem; line-height: 1.2; color: var(--color-white); margin: 0 0 var(--spacing-md); font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .error-404-subheading { font-family: var(--body-font-family); font-size: 1.25rem; line-height: 1.5; color: var(--color-white); margin: 0 0 var(--spacing-2xl); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .error-404-buttons { display: flex; gap: 16px; margin-top: 24px; } .error-404-buttons button, .error-404-buttons a { display: inline-block; padding: 3px 26px; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; text-align: center; transition: all 0.3s ease; border: 2px solid transparent; cursor: pointer; min-width: 150px; } .error-404-buttons button { background-color: #477990; color: white; margin-right: 10px; } .error-404-buttons button:hover { background-color: #112933; } .error-404-buttons a { background-color: #efaf1f; color: #1D475A; } .error-404-buttons a:hover { background-color: #d98a07; } .accessibility-icon { position: absolute; bottom: var(--spacing-xl); left: var(--spacing-xl); z-index: 10; } /** * Layout code that should effect all Gutenberg **/ .custom-layout, .wp-block-cover .wp-block-cover__inner-container, .wp-block-group, .wp-block-cover, .is-root-container, .s-section, .gutenberg-content { --section-width: var(--global-width, 1200px); --section-padding-horizontal: var(--global-gutter, 20px); --section-padding-vertical: var(--global-section-padding, 40px); --section-gap: var(--global-block-gap, 20px); display: grid; grid-template-columns: minmax(var(--section-padding-horizontal), 1fr) minmax(0, var(--section-width)) minmax(var(--section-padding-horizontal), 1fr); grid-template-areas: "start content end"; row-gap: var(--section-gap); padding-top: var(--section-padding-vertical); padding-bottom: var(--section-padding-vertical); width: 100%; /** * Forces all first level children * to align to the center column and expand to take up the full width **/ } .custom-layout > *, .wp-block-cover .wp-block-cover__inner-container > *, .wp-block-group > *, .wp-block-cover > *, .is-root-container > *, .s-section > *, .gutenberg-content > * { grid-column: content/span 1; justify-self: stretch; max-width: 100%; } .is-root-container > * + * { margin-block-start: unset !important; } .is-root-container .alignfull { max-width: 100%; width: 100%; grid-column: start/end; } .is-root-container .alignwide { max-width: var(--global-width-wide); grid-column: start/end; } .is-root-container .alignleft { float: left; margin-right: auto; } .is-root-container .alignright { float: right; margin-left: auto; } .is-root-container .aligncenter { margin-left: auto; margin-right: auto; } .alignfull { max-width: 100%; width: 100%; grid-column: start/end; } .alignwide { max-width: var(--global-width-wide); grid-column: start/end; } .alignleft { float: left; margin-right: auto; } .alignright { float: right; margin-left: auto; } .aligncenter { margin-left: auto; margin-right: auto; } .wp-block-group, .wp-block-cover { --section-width: var(--global-width, 1200px); --section-padding-horizontal: 0; } .gutenberg-content, .is-root-container { padding-top: 0; padding-bottom: 0; } .wp-block-cover { padding-left: 0; padding-right: 0; } .wp-block-cover .wp-block-cover__inner-container { --section-gap: 0; } .wp-block-cover.alignfull { grid-column: start/end; width: 100%; } .wp-block-cover.alignfull > *:not(.wp-block-cover__inner-container) { grid-column: start/end; } .wp-block-cover .wp-block-cover__inner > * { align-content: center; justify-items: center; } .has-custom-content-position { display: grid; } .has-custom-content-position.is-position-center-right { justify-items: flex-end; align-content: center; } .has-custom-content-position.is-position-center-left { justify-items: flex-start; align-content: center; } .has-custom-content-position.is-position-center-center { justify-items: center; align-content: center; } .has-custom-content-position.is-position-bottom-center { justify-items: center; align-content: flex-end; } .has-custom-content-position.is-position-bottom-right { justify-items: flex-end; align-content: flex-end; } .has-custom-content-position.is-position-bottom-left { justify-items: flex-start; align-content: flex-end; } .has-custom-content-position.is-position-top-center { justify-items: center; align-content: flex-start; } .has-custom-content-position.is-position-top-left { justify-items: flex-start; align-content: flex-start; } .has-custom-content-position.is-position-top-right { justify-items: flex-end; align-content: flex-start; } .remove-block-gap { margin-top: calc(var(--global-block-gap) * -1); margin-bottom: calc(var(--global-block-gap) * -1); } .remove-block-gap-top { margin-top: calc(var(--global-block-gap) * -1); } .remove-block-gap-bottom { margin-bottom: calc(var(--global-block-gap) * -1); } .is-root-container .remove-block-gap { margin-top: calc(var(--global-block-gap) * -1) !important; margin-bottom: calc(var(--global-block-gap) * -1) !important; } .is-root-container .remove-block-gap-top { margin-top: calc(var(--global-block-gap) * -1) !important; } .is-root-container .remove-block-gap-bottom { margin-bottom: calc(var(--global-block-gap) * -1) !important; } .is-root-container.remove-block-gap-top:first-child { margin-top: 0; } .is-root-container.remove-block-gap-bottom:last-child { margin-bottom: 0; } .is-root-container.remove-block-gap:first-child { margin-top: 0; } .is-root-container.remove-block-gap:last-child { margin-bottom: 0; } .block-list-appender { width: 100%; } .block-editor-rich-text__editable { width: 100%; } .layout-type-default > *:not(.alignleft):not(.alignright), .layout-type-default .layout-type-inherit > *:not(.alignleft):not(.alignright) { margin-left: auto; margin-right: auto; } .layout-type-default > .alignleft, .layout-type-default .layout-type-inherit > .alignleft { float: left; margin-left: 0px; margin-right: var(--wp--custom--gap--large); } .layout-type-default > .alignright, .layout-type-default .layout-type-inherit > .alignright { float: right; margin-left: var(--wp--custom--gap--large); margin-right: 0px; } .layout-type-flex { display: flex; } .layout-type-flex.is-wrap { flex-wrap: wrap; } .layout-type-flex.justify-left { justify-content: flex-start; } .layout-type-flex.justify-right { justify-content: flex-end; } .layout-type-flex.justify-center { justify-content: center; } .layout-type-flex.orientation-horizontal { align-items: center; } .layout-type-flex.orientation-horizontal.justify-space-between { justify-content: space-between; } .layout-type-flex.orientation-vertical { flex-direction: column; } .layout-type-flex > * { margin: 0px; } .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright)) { margin-left: unset !important; margin-right: unset !important; } .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright)) { max-width: 100% !important; width: var(--global-width) !important; margin-left: unset !important; margin-right: unset !important; } .wp-block-image { display: flex; flex-flow: column nowrap; align-items: center; } /** * Styles that modify the default behavior of Gutenberg * It is highly recommended not to modify the core files * Any needed changes should be made from other files **/ /** * Forces the React styles injected by Gutenberg to follow the PP3 Layout system. * TODO: Catch additional edge case issues. **/ .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright)) { margin-left: unset !important; margin-right: unset !important; } .block-editor-block-list__layout.is-root-container > :is(.alignwide) { width: 100% !important; max-width: var(--global-width-wide) !important; } .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignwide):not(.aligncenter)) { max-width: 100% !important; width: 100% !important; margin-left: unset !important; margin-right: unset !important; } @media (min-width: 300px){ .secondary-hero__pricing { justify-content: flex-start; } body.single-trip .secondary-hero__pricing { justify-content: flex-start; } } @media (min-width: 300px) and (max-width: 1024px){ .site-footer .footer-social { justify-content: center; } } @media (min-width: 300px) and (max-width: 399px){ .trip-card.dynamic-trip { width: 350px !important; margin-top: -20px !important; margin-bottom: 44px !important; height: 485.37px !important; } } @media (min-width: 320px){ .secondary-hero__pricing { justify-content: flex-start; margin-bottom: var(--spacing-xl); } body.single-trip .secondary-hero__pricing { justify-content: flex-start; margin-bottom: var(--spacing-xl); } } @media (min-width: 400px){ .site-footer .footer-actions { justify-content: center; } .site-footer .footer-actions .btn-action { flex: 0 1 auto; } .site-footer .footer-mobile .footer-copyright { flex-direction: row; gap: 2rem; } .site-footer .footer-mobile { padding: var(--footer-padding-tablet); } .site-footer .footer-mobile .footer-branding { gap: 2rem; } .site-footer .footer-mobile .footer-branding .footer-logo img.footer-logo-img { max-width: 160px; } .site-footer .footer-mobile .footer-branding .footer-badge-image img.footer-badge-img { max-width: 110px; } .site-footer .footer-mobile .footer-navigation-container { gap: 2.5rem; } .site-footer .footer-mobile .footer-navigation-container .footer-column { max-width: 220px; } .site-footer .footer-mobile .footer-actions { justify-content: center; } .trips-content .trip-packages-grid { gap: 18px; } .trip-partners-section .partners-container.grid { gap: var(--spacing-lg); } .general-content .container { padding: 0 var(--spacing-lg); } } @media (min-width: 400px) and (max-width: 420px){ .trip-card.dynamic-trip { margin-top: -38px !important; margin-bottom: 44px !important; width: 345px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 400px) and (max-width: 576px){ .history-section .history-content-column { padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } } @media (min-width: 421px) and (max-width: 440px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 360px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 423px){ .internal-page__container { padding: 0 var(--spacing-lg); } } @media (min-width: 441px) and (max-width: 460px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 378px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 461px) and (max-width: 470px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 400px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 471px) and (max-width: 489px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 409px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 480px){ .secondary-hero__pricing { justify-content: flex-start; margin-bottom: var(--spacing-xl); } body.single-trip .secondary-hero__pricing { justify-content: flex-start; margin-bottom: var(--spacing-xl); } } @media (min-width: lg) and (max-width: 480px){ .site-header .logo img, .site-header .logo svg, .site-header.home-header .logo img, .site-header.home-header .logo svg, .site-header.internal-header .logo img, .site-header.internal-header .logo svg { height: 35px; } } @media (min-width: 490px) and (max-width: 499px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 428px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 500px) and (max-width: 520px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 438px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 521px) and (max-width: 529px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 476px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 530px) and (max-width: 539px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 468px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 540px) and (max-width: 549px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 476px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 550px) and (max-width: 570px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 486px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 570px) and (max-width: 579px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 508px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 577px) and (max-width: 767px){ .history-section .history-content-column { padding-left: 62px; padding-right: 49px; margin-left: auto; margin-right: auto; } } @media (min-width: 580px) and (max-width: 589px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 513px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 590px) and (max-width: 599px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 529px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 600px) and (max-width: 612px){ .trip-card.dynamic-trip { margin-top: -20px !important; margin-bottom: 44px !important; width: 537px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 613px) and (max-width: 620px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 549px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 621px) and (max-width: 630px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 558px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 631px) and (max-width: 640px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 558px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 640px) and (max-width: 767px){ body.single-trip .secondary-hero__img:hover { transform: translateY(4rem) scale(1.02); } } @media (min-width: 641px) and (max-width: 649px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 579px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 650px) and (max-width: 659px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 589px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 660px) and (max-width: 669px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 597px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 670px) and (max-width: 679px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 606px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 680px) and (max-width: 689px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 617px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 690px) and (max-width: 699px){ .trip-card.dynamic-trip { margin-top: 18px !important; width: 680px !important; max-width: 800px !important; height: 485.37px !important; } } @media (min-width: 700px) and (max-width: 712px){ .trip-card.dynamic-trip { margin-top: -35px !important; margin-left: -9px !important; margin-bottom: 50px !important; width: 656px !important; max-width: 800px !important; height: 485.37px !important; } .filtering-sidebar { position: sticky; top: 2rem; width: 656px; margin-left: -10px; } } @media (min-width: 700px) and (max-width: 767px){ .trips-content .trip-packages-grid { grid-template-columns: repeat(1, 1fr); } } @media (min-width: 713px) and (max-width: 720px){ .trip-card.dynamic-trip { margin-top: -35px !important; margin-left: -9px !important; margin-bottom: 50px !important; width: 667px !important; max-width: 800px !important; height: 485.37px !important; } .filtering-sidebar { position: sticky; top: 2rem; width: 667px; margin-left: -10px; } } @media (min-width: 721px) and (max-width: 729px){ .trip-card.dynamic-trip { margin-top: -35px !important; margin-left: -9px !important; margin-bottom: 50px !important; width: 676px !important; max-width: 800px !important; height: 485.37px !important; } .filtering-sidebar { position: sticky; top: 2rem; width: 676px; margin-left: -10px; } } @media (min-width: 730px) and (max-width: 739px){ .trip-card.dynamic-trip { margin-top: -35px !important; margin-left: -9px !important; margin-bottom: 50px !important; width: 686px !important; max-width: 800px !important; height: 485.37px !important; } .filtering-sidebar { position: sticky; top: 2rem; width: 687px; margin-left: -10px; } } @media (min-width: 740px) and (max-width: 749px){ .trip-card.dynamic-trip { margin-top: -35px !important; margin-left: -9px !important; margin-bottom: 50px !important; width: 696px !important; max-width: 800px !important; height: 485.37px !important; } .filtering-sidebar { position: sticky; top: 2rem; width: 697px; margin-left: -10px; } } @media (min-width: 750px) and (max-width: 759px){ .trip-card.dynamic-trip { margin-top: -35px !important; margin-left: -9px !important; margin-bottom: 50px !important; width: 706px !important; max-width: 800px !important; height: 478.37px !important; } .filtering-sidebar { position: sticky; top: 2rem; width: 707px; margin-left: -10px; } } @media (min-width: 760px) and (max-width: 767px){ .trip-card.dynamic-trip { margin-top: -35px !important; margin-left: -9px !important; margin-bottom: 50px !important; width: 716px !important; max-width: 800px !important; height: 485.37px !important; } .filtering-sidebar { position: sticky; top: 2rem; width: 716px; margin-left: -10px; } } @media screen and (min-width: 767px){ .newsletter-section .newsletter-form .form-group { max-width: 50%; } } @media (min-width: 768px){ .c-grid { grid-template-columns: var(--grid-col-md); } .f-grid .cell { flex-basis: calc(var(--cell-size-md) - var(--grid-gap)); } .site-footer .footer-badge .footer-badge-image { max-width: 100px; } .footer-desktop .site-footer .footer-badge .footer-badge-image { max-width: 120px; } .site-footer .footer-mobile .footer-branding { gap: 2.5rem; } .site-footer .footer-mobile .footer-branding .footer-logo img.footer-logo-img { max-width: 180px; } .site-footer .footer-mobile .footer-branding .footer-badge-image img.footer-badge-img { max-width: 120px; } .site-footer .footer-mobile .footer-navigation-container { gap: 3rem; } .site-footer .footer-mobile .footer-navigation-container .footer-column { max-width: 250px; } .top-row { display: grid !important; } #navigation-modal [data-bm-card] { width: 350px; } .search-overlay-container { max-width: 800px; padding: 0 1.5rem; } .search-overlay-form { flex-direction: row; flex-wrap: wrap; gap: 3.4rem; justify-content: center; } .search-overlay-form-group { flex: 1 1 250px; max-width: 300px; } .search-overlay-button.fwp-submit { width: auto; min-width: 190px; margin-top: 0; flex: 0 0 auto; } .promotional-banner .promo-content { margin-left: 15%; } .promotional-banner .promo-content::after { background-color: initial; padding: initial; } .filtering-sidebar .filter-header .header-caret { transform: rotate(180deg); } .md\:w-1\/2 { width: 45% !important; } .history-section .container { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } .trips-content .trips-content-inner { flex-direction: row; gap: 32px; } .trips-content .trips-sidebar { width: 380px; min-width: 380px; margin-bottom: 0; } .trips-content .trips-packages { width: calc(100% - 350px - 32px); flex: 1; } .trips-content .trip-packages-grid.cruise-grid { grid-template-columns: repeat(2, 1fr); } .trip-card .trip-card-image { height: 400px; } .trip-partners-section .partners-container.grid { gap: var(--spacing-xl); } .trip-partners-section .partners-container.grid .partner-item { flex: 1 1 280px; min-width: 250px; max-width: 400px; } .general-content .container { padding: 0 var(--spacing-xl); max-width: 95%; } .general-content { padding: var(--spacing-2xl) 0; } .general-content .general-content-inner .content-wrapper { width: 100%; } .general-content .general-content-inner h1, .general-content .general-content-inner h2, .general-content .general-content-inner h3, .general-content .general-content-inner h4, .general-content .general-content-inner h5, .general-content .general-content-inner h6 { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-lg); } .general-content .general-content-inner h1 { font-size: calc(var(--h1-font-size) * 0.85); line-height: var(--h1-line-height); } .general-content .general-content-inner h2 { font-size: var(--h3-font-size); line-height: var(--h2-line-height); } .general-content .general-content-inner h3 { font-size: var(--h3-font-size); line-height: var(--h3-line-height); } .general-content .general-content-inner h4 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); } .general-content .general-content-inner h5 { font-size: var(--h5-font-size); line-height: var(--h5-line-height); } .general-content .general-content-inner h6 { font-size: var(--h6-font-size); line-height: var(--h6-line-height); } .general-content .general-content-inner p { font-size: var(--p-font-size); line-height: var(--p-line-height); margin-bottom: var(--spacing-lg); } .general-content .general-content-inner ul, .general-content .general-content-inner ol { margin-bottom: var(--spacing-lg); padding-left: var(--spacing-xl); } .general-content .general-content-inner ul li, .general-content .general-content-inner ol li { font-size: var(--p-font-size); line-height: var(--p-line-height); margin-bottom: var(--spacing-sm); } .general-content .general-content-inner img, .general-content .general-content-inner figure { margin-bottom: var(--spacing-lg); } .general-content .general-content-inner img.alignleft, .general-content .general-content-inner figure.alignleft { float: left; margin-right: var(--spacing-lg); margin-bottom: var(--spacing-lg); width: auto; max-width: 50%; } .general-content .general-content-inner img.alignright, .general-content .general-content-inner figure.alignright { float: right; margin-left: var(--spacing-lg); margin-bottom: var(--spacing-lg); width: auto; max-width: 50%; } .general-content .general-content-inner blockquote { border-left: 4px solid var(--color-blue-100); padding-left: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .general-content .general-content-inner blockquote p { font-size: calc(var(--p-font-size) * 1.1); } .general-content .general-content-inner table { margin-bottom: var(--spacing-lg); display: table; } .general-content .general-content-inner table th, .general-content .general-content-inner table td { padding: var(--spacing-md); } } @media (min-width: 768px) and (max-width: 1023px){ body.single-trip .secondary-hero__img:hover { transform: translateY(5rem) scale(1.02); } } @media (min-width: 768px) and (max-width: 1099px){ .history-section .flex { gap: var(--spacing-md) !important; } } @media (min-width: 768px) and (max-width: 1199px){ .filtering-sidebar .filter-accordion-header { padding: 25px 18px; } .filtering-sidebar .filter-accordion-header .filter-title { font-size: 15px; } .filtering-sidebar .filter-accordion-header .accordion-arrow { font-size: 13px; } .filtering-sidebar .filter-accordion-item.expanded .filter-accordion-content { max-height: 450px; } .filtering-sidebar .filter-accordion-item.expanded .filter-accordion-content:has(.flatpickr-calendar) { max-height: 380px; } .filtering-sidebar .filter-accordion-item.expanded .filter-accordion-content:has(.facetwp-type-checkboxes) { max-height: 280px; } } @media (min-width: 768px) and (max-width: 799px){ .trip-card.dynamic-trip { width: 416.92px !important; height: 485.37px !important; max-width: 420.92px; } .trips-content .trip-packages-grid { margin-left: -114px; grid-template-columns: repeat(1, 1fr); gap: 20px; } .filtering-sidebar { position: sticky; top: 2rem; width: 284px; margin-left: -7px; } } @media (min-width: 768px) and (max-width: 880px){ .history-section .history-content-column { padding-left: 25px; padding-right: 20px; } } @media (min-width: 768px) and (max-width: 991px){ .tradition-section .tradition-image-container { width: 361px; height: 339px; } } @media (min-width: 769px) and (max-width: 999px){ .trip-hero .trip-tabs-section .mobile-accordion { max-width: 800px; padding: 0 var(--spacing-lg); } } @media (min-width: 776px){ .secondary-hero__subtitle { font-size: 16px; } .secondary-hero__date { font-size: 28px; margin-bottom: var(--spacing-lg); } .secondary-hero__pricing { justify-content: flex-start; margin-bottom: var(--spacing-xl); } .secondary-hero__price { font-size: 42px; } .secondary-hero__price-suffix { font-size: 18px; } .secondary-hero__cta { margin-top: var(--spacing-lg); } .secondary-hero__button { padding: 12px 24px; font-size: 16px; } body.single-trip .secondary-hero__subtitle { font-size: 16px; } body.single-trip .secondary-hero__date { font-size: 28px; margin-bottom: var(--spacing-lg); } body.single-trip .secondary-hero__pricing { justify-content: flex-start; margin-bottom: var(--spacing-xl); } body.single-trip .secondary-hero__price { font-size: 42px; } body.single-trip .secondary-hero__price-suffix { font-size: 18px; } body.single-trip .secondary-hero__cta { margin-top: var(--spacing-lg); } body.single-trip .secondary-hero__button { padding: 12px 24px; font-size: 16px; } .internal-page__section { padding: var(--spacing-3xl) 0; } .internal-page__container { padding: 0 var(--spacing-xl); max-width: 95%; } } @media (min-width: 800px) and (max-width: 800px){ .trips-content .trips-packages { margin-left: -173px; width: calc(100% - 350px - 32px); flex: 1; } .filtering-sidebar { width: 240px; margin-left: -15px; } } @media (min-width: 800px) and (max-width: 899px){ .trip-card.dynamic-trip { width: 240.92px !important; height: 485.37px !important; max-width: 342.92px; } } @media (min-width: 881px) and (max-width: 991px){ .history-section .history-content-column { padding-left: 30px; padding-right: 25px; } } @media (min-width: 900px) and (max-width: 999px){ .trip-card.dynamic-trip { width: 272.92px !important; height: 485.37px !important; max-width: 342.92px; } } @media screen and (min-width: 900px) and (max-width: 999px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } } @media (min-width: 992px){ .site-footer .footer-desktop { display: block; } .site-footer .footer-mobile { display: none; } .secondary-hero__date { font-size: 33px; } .secondary-hero__price { font-size: 48px; } body.single-trip .secondary-hero__date { font-size: 33px; } body.single-trip .secondary-hero__price { font-size: 48px; } .history-section .container { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); } .history-section { padding: var(--spacing-2xl) 0; } .tradition-section { padding: var(--spacing-2xl) 0; } .internal-page__section { padding: var(--spacing-4xl) 0; } .internal-page__container { max-width: 90%; padding: 0 var(--spacing-2xl); } .general-content .container { max-width: 90%; padding: 0 var(--spacing-2xl); } .general-content { padding: var(--spacing-3xl) 0; } .general-content .general-content-inner .content-wrapper { width: 100%; } .general-content .general-content-inner h1 { font-size: var(--h1-font-size); } } @media (min-width: 992px) and (max-width: 1099px){ .history-section .history-content-column { padding-left: 35px; padding-right: 20px; } } @media (min-width: 992px) and (max-width: 1199px){ .tradition-section .tradition-image-container { width: 400px; height: 400px; } } @media (min-width: 992px) and (max-width: 1399px){ .site-footer .footer-desktop .footer-top { gap: 1.8rem; } .site-footer .footer-desktop .footer-top .footer-branding { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; position: relative; } .site-footer .footer-desktop .footer-top .footer-branding .footer-logo { margin-bottom: var(--footer-row-gap); } .site-footer .footer-desktop .footer-top .footer-branding .footer-social { margin-top: calc(var(--footer-row-gap) * 3); margin-bottom: 0; margin-left: 12px; } .site-footer .footer-desktop .footer-top .footer-branding .footer-social .social-icon { filter: brightness(0) saturate(100%) invert(100%) !important; } .site-footer .footer-desktop .footer-top .footer-branding::after { content: ""; position: absolute; top: calc(var(--footer-row-gap) + 60px); left: 0; width: 100px; height: 100px; background-image: url(/wp-content/themes/posturepress3/dist/images/ask-travel-world-fifty-years-badge.png); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1; margin: var(--footer-row-gap) 0; } .site-footer .footer-desktop .footer-top .footer-badge { display: none !important; } .site-footer .footer-desktop .footer-top .footer-navigation { flex: 1 1 260px; margin-right: 1.5rem; min-width: 187px; } .site-footer .footer-desktop .footer-top .footer-menu-links { flex: 1 1 115px; margin-right: 1.5rem; min-width: 113px; } .site-footer .footer-desktop .footer-top .footer-newsletter { flex: 1 1 300px; max-width: 380px; } } @media screen and (min-width: 992px){ .newsletter-section .newsletter-form .form-group { max-width: 76%; } } @media screen and (min-width: 992px) and (max-width: 999px){ .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } } @media (min-width: 1000px) and (max-width: 1099px){ .trip-card.dynamic-trip { width: 272.92px !important; height: 485.37px !important; max-width: 342.92px; } } @media screen and (min-width: 1000px) and (max-width: 1099px){ .white-wave-divider-contact-container { margin-top: -98px; margin-bottom: 500px; } .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } } @media (min-width: 1024px){ .c-grid { grid-template-columns: var(--grid-col-lg); } .f-grid .cell { flex-basis: calc(var(--cell-size-lg) - var(--grid-gap)); } .site-footer .footer-badge .footer-badge-image { max-width: 120px; } .footer-desktop .site-footer .footer-badge .footer-badge-image { max-width: 160px; min-width: 140px; margin-top: -15px; } .footer-desktop .site-footer .footer-badge .footer-badge-image img { width: 100%; height: auto; max-width: none; } .site-footer .footer-desktop .footer-top { flex-wrap: nowrap; gap: 3rem; } .site-footer .footer-desktop .footer-top .footer-branding { flex: 0 1 auto; margin-right: -2rem; padding-right: 54px; } .site-footer .footer-desktop .footer-top .footer-badge { flex: 0 1 62px; justify-content: flex-start; } .site-footer .footer-desktop .footer-top .footer-newsletter { flex: 1 1 300px; margin-top: 0; margin-left: auto; max-width: 400px; } .site-footer .footer-desktop .footer-bottom { flex-direction: row; align-items: center; gap: 0; } .site-footer .footer-desktop .footer-bottom .footer-social { order: 2; align-self: auto; } .site-footer .footer-desktop .footer-bottom .footer-social .social-icon { width: 32px; height: 32px; } .site-footer .footer-desktop .footer-bottom .footer-copyright { order: 1; max-width: 70%; text-align: left; justify-content: flex-start; flex-direction: row; gap: 2rem; } .site-header .main-nav { display: block; margin: 0 1.5rem; } .site-header .header-actions .mobile-menu-toggle { display: none; } #mobile-nav-button { display: none; } .search-overlay-form { flex-wrap: nowrap; gap: 3.9rem; } .search-overlay-form-group { flex: 1 1 280px; max-width: 320px; } .search-overlay-button.fwp-submit { min-width: 220px; height: 51px; margin-top: -43px; padding: 7px 40px; font-size: 21px; } .filtering-sidebar { position: sticky; top: var(--spacing-xl); } .trips-content .trips-content-inner { gap: 40px; } .trips-content .trips-packages { width: calc(100% - 350px - 40px); } .trips-content .trip-packages-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .trips-content .trip-packages-grid.cruise-grid { grid-template-columns: repeat(3, 1fr); } .filtering-sidebar { top: 3rem; } .trip-partners-section .partners-container.grid { gap: var(--spacing-2xl); } .trip-partners-section .partners-container.grid .partner-item { flex: 1 1 300px; min-width: 280px; max-width: 350px; } .trip-hero { height: 544px; min-height: 350px; } } @media (min-width: 1024px) and (max-width: 1130px){ .site-footer .footer-desktop .footer-top { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; gap: 1.8rem; align-items: start; } .site-footer .footer-desktop .footer-top .footer-branding { grid-column: 1; grid-row: 1/span 2; } .site-footer .footer-desktop .footer-top .footer-navigation { grid-column: 2; grid-row: 1; } .site-footer .footer-desktop .footer-top .footer-menu-links { grid-column: 2; grid-row: 2; } .site-footer .footer-desktop .footer-top .footer-newsletter { grid-column: 3; grid-row: 1/span 2; } } @media (min-width: 1024px) and (max-width: 1279px){ body.single-trip .secondary-hero__img:hover { transform: translateY(4rem) scale(1.02); } } @media (min-width: 1025px){ .history-section .history-content-wrapper { margin-left: 0; margin-right: auto; } } @media (min-width: 1092px) and (max-width: 1200px){ .site-header.is-sticky.scrolled .container, .site-header.home-header.is-sticky.scrolled .container, .site-header.internal-header.is-sticky .container { gap: 0.5rem; } .site-header.is-sticky.scrolled .container > .logo, .site-header.home-header.is-sticky.scrolled .container > .logo, .site-header.internal-header.is-sticky .container > .logo { flex-shrink: 0; margin-right: 0.25rem; } .site-header.is-sticky.scrolled .container > .main-nav, .site-header.home-header.is-sticky.scrolled .container > .main-nav, .site-header.internal-header.is-sticky .container > .main-nav { flex-grow: 4; min-width: 0; margin: 0 0.25rem; } .site-header.is-sticky.scrolled .container > .header-actions, .site-header.home-header.is-sticky.scrolled .container > .header-actions, .site-header.internal-header.is-sticky .container > .header-actions { flex-shrink: 0; gap: 1rem !important; margin-left: 0.25rem; } .site-header.is-sticky.scrolled .container > .header-actions .book-trip-btn, .site-header.home-header.is-sticky.scrolled .container > .header-actions .book-trip-btn, .site-header.internal-header.is-sticky .container > .header-actions .book-trip-btn { min-width: 120px; flex-shrink: 0; } } @media (min-width: 1100px) and (max-width: 1149px){ .trip-card.dynamic-trip { width: 303.92px !important; height: 485.37px !important; max-width: 342.92px; } } @media (min-width: 1100px) and (max-width: 1199px){ .history-section .history-content-column { padding-left: 40px; padding-right: 20px; } } @media screen and (min-width: 1100px) and (max-width: 1199px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } } @media (min-width: 1150px) and (max-width: 1199px){ .trip-card.dynamic-trip { width: 334.92px !important; height: 485.37px !important; max-width: 342.92px; } } @media (min-width: 1200px){ .search-overlay-content { max-width: 1200px; } .search-overlay-container { max-width: 1200px; padding: 0 2rem; } .history-section .container { padding-left: 0; padding-right: 0; } .tradition-section .tradition-image-container { width: 450px; height: 450px; } .internal-page__container { max-width: var(--container-width); padding: 0 var(--spacing-xl); } .trips-content .trip-packages-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .trips-sort-section { margin-top: -35px; } .general-content .container { max-width: 800px; padding: 0; } .general-content { padding: var(--spacing-4xl) 0; } .general-content .general-content-inner .content-wrapper { width: 100%; max-width: 800px; } } @media (min-width: 1200px) and (max-width: 1299px){ .trip-card.dynamic-trip { width: 334.92px !important; height: 485.37px !important; max-width: 342.92px; } } @media (min-width: 1200px) and (max-width: 1400px){ .site-header.is-sticky.scrolled .container > .main-nav, .site-header.home-header.is-sticky.scrolled .container > .main-nav, .site-header.internal-header.is-sticky .container > .main-nav { flex-grow: 2; min-width: 0; } .site-header.is-sticky.scrolled .container > .main-nav .primary-menu, .site-header.home-header.is-sticky.scrolled .container > .main-nav .primary-menu, .site-header.internal-header.is-sticky .container > .main-nav .primary-menu { width: 100%; justify-content: center; flex-wrap: nowrap; } .site-header.is-sticky.scrolled .container > .header-actions, .site-header.home-header.is-sticky.scrolled .container > .header-actions, .site-header.internal-header.is-sticky .container > .header-actions { gap: 2rem !important; } } @media screen and (min-width: 1200px) and (max-width: 1299px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } } @media (min-width: 1201px) and (max-width: 1276px){ .site-header.is-sticky.scrolled .container, .site-header.home-header.is-sticky.scrolled .container, .site-header.internal-header.is-sticky .container { gap: 0.75rem; } .site-header.is-sticky.scrolled .container > .logo, .site-header.home-header.is-sticky.scrolled .container > .logo, .site-header.internal-header.is-sticky .container > .logo { flex-shrink: 0; margin-right: 0.5rem; } .site-header.is-sticky.scrolled .container > .main-nav, .site-header.home-header.is-sticky.scrolled .container > .main-nav, .site-header.internal-header.is-sticky .container > .main-nav { flex-grow: 3; min-width: 0; margin: 0 0.5rem; } .site-header.is-sticky.scrolled .container > .header-actions, .site-header.home-header.is-sticky.scrolled .container > .header-actions, .site-header.internal-header.is-sticky .container > .header-actions { flex-shrink: 0; gap: 1.25rem !important; margin-left: 0.5rem; } } @media (min-width: 1280px) and (max-width: 1535px){ body.single-trip .secondary-hero__img:hover { transform: translateY(5rem) scale(1.02); } } @media (min-width: 1300px) and (max-width: 1339px){ .trip-card.dynamic-trip { width: 403.92px !important; height: 485.37px !important; max-width: 500.92px; } } @media screen and (min-width: 1300px) and (max-width: 1399px){ .oceanic-blue-mid-divider-container { margin-top: -227px; } .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } .white-contact-wave-divider-container { margin-top: -227px; } .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } } @media (min-width: 1340px) and (max-width: 1399px){ .trip-card.dynamic-trip { width: 417.92px !important; height: 485.37px !important; max-width: 500.92px; } } @media (min-width: 1400px){ .search-overlay-content { max-width: 1400px; } .search-overlay-container { max-width: 1400px; } .internal-page__container { max-width: var(--container-width); padding: 0; } .trips-content .trip-packages-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } .general-content .container { max-width: 800px; } .general-content .general-content-inner { max-width: 850px; margin: 0 auto; } } @media (min-width: 1400px) and (max-width: 1699px){ .trip-card.dynamic-trip { width: 293.92px !important; height: 485.37px !important; max-width: 500.92px; } } @media screen and (min-width: 1400px) and (max-width: 1499px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } } @media screen and (min-width: 1440px) and (max-width: 1499px){ .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } } @media screen and (min-width: 1500px) and (max-width: 1599px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } } @media (min-width: 1536px){ body.single-trip .secondary-hero__img:hover { transform: translateY(6rem) scale(1.02); } } @media screen and (min-width: 1600px) and (max-width: 1699px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } } @media (min-width: 1700px) and (max-width: 1799px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media (min-width: 1800px) and (max-width: 1899px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media screen and (min-width: 1800px) and (max-width: 1899px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } } @media (min-width: 1900px) and (max-width: 1999px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media screen and (min-width: 1900px) and (max-width: 1999px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } } @media (min-width: 2000px) and (max-width: 2099px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media screen and (min-width: 2000px) and (max-width: 2099px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } } @media (min-width: 2100px) and (max-width: 2199px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 368.37px !important; max-width: 316.92px; } } @media screen and (min-width: 2100px) and (max-width: 2599px){ .white-wave-divider-contact-container { margin-top: -127px; margin-bottom: 500px; } } @media (min-width: 2200px) and (max-width: 2299px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media (min-width: 2300px) and (max-width: 2399px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media (min-width: 2400px) and (max-width: 2499px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media (min-width: 2500px) and (max-width: 2599px){ .trip-card.dynamic-trip { width: 292.92px !important; height: 485.37px !important; max-width: 316.92px; } } @media (min-width: lg){ .desktop-only, .search-icon, .book-trip-btn, .main-nav { display: none !important; } .site-header .container, .site-header.home-header .container, .site-header.internal-header .container { grid-template-columns: 1fr auto; padding: 0 1rem; gap: 1rem; } .site-header .logo img, .site-header .logo svg, .site-header.home-header .logo img, .site-header.home-header .logo svg, .site-header.internal-header .logo img, .site-header.internal-header .logo svg { height: 40px; } .hamburger-toggle { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background-color: transparent; border: none; cursor: pointer; padding: 0.5rem; z-index: 101; } .hamburger-toggle .menu-toggle-icon { display: block; position: relative; width: 24px; height: 2px; background-color: var(--header-text-color); transition: background-color 0.3s ease; } .hamburger-toggle .menu-toggle-icon::before, .hamburger-toggle .menu-toggle-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--header-text-color); transition: transform 0.3s ease; } .hamburger-toggle .menu-toggle-icon::before { top: -8px; } .hamburger-toggle .menu-toggle-icon::after { bottom: -8px; } .hamburger-toggle.is-active .menu-toggle-icon { background-color: transparent; } .hamburger-toggle.is-active .menu-toggle-icon::before { transform: translateY(8px) rotate(45deg); } .hamburger-toggle.is-active .menu-toggle-icon::after { transform: translateY(-8px) rotate(-45deg); } .trip-inner-cta .container { padding: 0 var(--container-padding-lg); } .inner-cta .container { padding: 0 var(--container-padding-lg); } .page-wrapper { padding: 0 var(--container-padding-lg); } .partners-container.grid { grid-template-columns: repeat(4, 1fr); } .view-all-trips-wrapper { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-xl); } .sort-facet-wrapper { min-width: 240px; } .sort-facet-wrapper select.trip-sort-select { min-width: 240px; height: 52px; font-size: var(--lg-font-size); transition: all 0.2s ease-in-out; } .sort-facet-wrapper select.trip-sort-select:hover { background-color: #0a1920; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .trip-hero .trip-tabs-section .container { padding: 0 var(--container-padding-lg); } .trip-tabs-section .container { padding: 0 var(--container-padding-lg); } .trip-details-tab-content .trip-details-layout { flex-direction: row; gap: var(--spacing-3xl); } .trip-details-tab-content .trip-includes-section { width: 60%; } .trip-details-tab-content .trip-visual-section { width: 50%; display: flex; align-items: stretch; border-left: 1px solid #D1D1D1; } .trip-details-tab-content .trip-visual-section .trip-details-image-container { min-height: 400px; } .trip-pricing-tab-content .pricing-layout { flex-direction: row; gap: var(--spacing-3xl); } .trip-pricing-tab-content .pricing-details-section { width: 60%; } .trip-pricing-tab-content .upgrade-package-section { width: 40%; } } @media (min-width: md-down){ .tour-guides-carousel .guide-card { flex: 0 0 500px; padding: 20px; } .tour-guides-carousel .guide-card .guide-image { width: 120px; height: 120px; min-width: 120px; margin-right: 16px; } } @media (min-width: md){ .trip-inner-cta .container { padding: 0 var(--container-padding-md); } .inner-cta .container { padding: 0 var(--container-padding-md); } .page-wrapper { padding: 0 var(--container-padding-md); } .trip-card .trip-card-image { height: 218px; } .tour-guides-carousel .guides-wrapper .guide-card:only-child { flex: 0 0 100%; max-width: 600px; margin: 0 auto; } .partners-container.grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .carousel .partner-item { flex: 0 0 280px; } .partners-container.grid { grid-template-columns: repeat(3, 1fr); } .trip-page-title h1 { font-size: 36px; } .trip-page-title p { font-size: 18px; } .trips-sort-section { padding: var(--spacing-xl) 0; margin-top: var(--spacing-lg); } .trips-sort-section .container { padding: 0 var(--spacing-lg); } .trips-sort-controls { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); } .sort-control-wrapper { flex-direction: row; align-items: center; gap: var(--spacing-sm); margin-left: auto; width: auto; } .sort-label { margin-bottom: 0; margin-right: var(--spacing-sm); white-space: nowrap; } .sort-facet-wrapper { width: auto; min-width: 220px; } .sort-facet-wrapper select.trip-sort-select { width: 100%; min-width: 220px; } .trip-hero .trip-tabs-section .container { padding: 0 var(--container-padding-md); } .trip-tabs-section .container { padding: 0 var(--container-padding-md); } } @media (min-width: sm-down){ .tour-guides-carousel .guide-card { flex: 0 0 350px; flex-direction: column; text-align: center; padding: 16px; } .tour-guides-carousel .guide-card .guide-image { width: 100px; height: 100px; min-width: 100px; margin-right: 0; margin-bottom: 16px; } } @media (min-width: sm){ .page-wrapper { margin-bottom: -153px; /* Adjusted for the promotional banner */ } .trip-card .trip-card-content .trip-details { flex-direction: row; justify-content: space-between; } .partners-container.grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .partners-container.grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: xlarge){ .trip-hero { min-height: 600px; } .error-404-content { background-size: 100% auto; background-position: center top; } } @media (min-width: xs){ .trip-card .trip-card-content { padding: var(--spacing-md); } .trip-card .trip-card-content .trip-card-footer { flex-direction: column; gap: var(--spacing-md); align-items: stretch; } .trip-card .trip-card-content .trip-card-footer .trip-button { text-align: center; } .partners-container.grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } .partner-item .partner-link { padding: var(--spacing-md); } .partner-item .partner-logo { height: 100px; } } @media (max-width: 2800px){ .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -15px; } .page-wrapper { margin-bottom: -115px; /* Adjusted for the promotional banner */ } } @media (max-width: 2559px){ .white-mid-wave-divider-container { margin-top: -180px; } } @media (max-width: 2500px){ .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } .trip-details-tab-content .trip-visual-section { height: 434px; max-height: 705px; } } @media (max-width: 2047px){ .white-mid-wave-divider-container { margin-top: -180px; } } @media (max-width: 1920px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 2480px; left: -492px; } .testimonials-bottom-wave-divider-svg { top: -54px; } } @media (max-width: 1919px){ .white-mid-wave-divider-container { margin-top: -164px; } } @media screen and (max-width: 1800px){ .trip-hero__content { margin-left: -83px; } } @media (max-width: 1700px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 2247px; left: -492px; } .testimonials-bottom-wave-divider-svg { top: -44px; } } @media (max-width: 1699px){ .white-mid-wave-divider-container { margin-top: -124px; } } @media (max-width: 1600px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 2106px; left: -492px; } .white-wave-divider-container { margin-top: 77px; } .white-contact-wave-divider-svg { margin-top: 77px; } } @media screen and (max-width: 1600px){ .trip-hero__content { margin-left: -84px; } } @media (max-width: 1500px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1990px; left: -492px; } .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } .white-mid-wave-divider-container { margin-top: -124px; } } @media screen and (max-width: 1500px){ .trip-hero__content { margin-left: -77px; } } @media (max-width: 1499px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1990px; left: -492px; } } @media (max-width: 1440px){ .testimonials-bottom-wave-divider-svg { top: -30px; } .white-wave-divider-container { margin-top: 67px; } .white-contact-wave-divider-svg { margin-top: 67px; } .trip-inner-cta__button { width: 300px; } .inner-cta__button { width: 300px; } } @media (max-width: 1420px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1925px; left: -492px; } } @media (max-width: 1400px){ .page-wrapper { margin-bottom: -111px; /* Adjusted for the promotional banner */ } .tradition-section .container { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } } @media screen and (max-width: 1400px){ .hero-content .hero-subtitle { padding-top: 2%; padding-left: 2%; } .trip-hero__content { margin-left: -43px; } } @media (max-width: 1399px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1900px; left: -492px; } .tradition-section .container { padding-left: var(--spacing-5xl); padding-right: var(--spacing-5xl); } } @media (max-width: 1324px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1820px; left: -492px; } } @media (max-width: 1300px){ .white-mid-wave-divider-container { margin-top: -105px; } } @media screen and (max-width: 1300px){ .trip-hero__content { margin-left: 37px; } } @media (max-width: 1299px){ .tradition-section .container { padding-left: var(--spacing-5xl); padding-right: var(--spacing-5xl); } } @media (max-width: 1280px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1779px; left: -492px; } .white-wave-divider-container { margin-top: 57px; } .white-contact-wave-divider-container { margin-top: 66px; } .white-contact-wave-divider-svg { margin-top: 57px; } .trip-tabs-section .desktop-only { margin-left: -142px !important; } } @media (max-width: 1250px){ .primary-menu:not([class*=text-]) .site-header .main-nav a { font-size: 14px !important; padding: 0.4rem 0.2rem; } } @media (max-width: 1240px){ .service-categories .container { max-width: 95%; } } @media (max-width: 1200px){ .trip-inner-cta__button { width: 280px; } .inner-cta__button { width: 280px; } .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } .history-section { margin-top: -140px; /* Slightly less negative margin for smaller desktops */ } .history-section .history-image-container { width: 450px; height: 391px; margin: 0; /* Reset to left alignment on desktop */ } .white-mid-wave-divider-container { margin-top: -105px; } } @media all and (max-width: 1200px){ #sb-reviews-container-1 .sb-feed-posts { justify-content: center; } #sb-reviews-container-1 .sb-feed-posts .review-card-container, #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap { display: none; height: auto; } #sb-reviews-container-1 .sb-feed-posts .review-card-container:nth-of-type(1), #sb-reviews-container-1 .sb-feed-posts .review-card-container:nth-of-type(2), #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap:nth-of-type(1), #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap:nth-of-type(2) { display: flex; } } @media screen and (max-width: 1200px){ .trip-hero__content { margin-left: 37px; } } @media (max-width: 1199px){ .hero { height: 90vh; } .hero-content .hero-flex-container { gap: var(--spacing-lg); } .hero-content .hero-text-container h1 { font-size: 3.5rem; } .hero-content .hero-subtitle p { font-size: 1.4rem; } .tradition-section .container { padding-left: var(--spacing-5xl); padding-right: var(--spacing-3xl); } } @media (max-width: 1170px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1662px; left: -492px; } .white-wave-divider-container { margin-top: 69px; } .white-contact-wave-divider-svg { margin-top: 69px; } } @media (max-width: 1145px){ .tradition-section .container { padding-left: var(--spacing-5xl); padding-right: var(--spacing-3xl); } } @media (max-width: 1100px){ .primary-menu:not([class*=text-]) .site-header .main-nav a { font-size: 13px !important; padding: 0.3rem 0.15rem; } .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } .white-mid-wave-divider-container { margin-top: -105px; } } @media (max-width: 1099px){ .testimonials-top-wave-divider-container { margin-top: 72px; width: 1591px; left: -492px; } .hero { height: 85vh; } .hero-content .hero-text-container h1 { font-size: 3rem; } .hero-content .hero-subtitle p { font-size: 1.3rem; } .service-categories .container > .flex.flex-wrap.justify-center.gap-24 { flex-direction: column; align-items: center; gap: 3rem; /* Increase vertical gap between stacked items */ /* Direct styling for the w-64 divs when stacked */ } .service-categories .container > .flex.flex-wrap.justify-center.gap-24 > div.w-64 { width: 100%; max-width: 500px; /* Limit width when stacked */ } .service-category > div.w-64 { width: 20rem; /* Slightly wider on tablet for better proportions when stacked */ max-width: 90%; /* Ensure it doesn't overflow on smaller tablets */ } .service-categories .w-64 { min-height: 350px; /* Slightly shorter on tablet when stacked */ } .history-section { margin-top: -120px; /* Reduced negative margin for tablets */ } .white-mid-wave-divider-container { margin-top: -74px; } } @media (max-width: 1025px){ .testimonials-top-wave-divider-container { margin-top: 64px; width: 1515px; left: -474px; } } @media (max-width: 1024px){ .white-wave-divider-container { margin-top: 66px; } .white-contact-wave-divider-container { margin-top: 66px; } .white-contact-wave-divider-svg { margin-top: 66px; } .tour-cards-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .history-section .history-image-container { width: 361px; height: 339px; margin: 0 auto 30px auto; /* Center with bottom margin */ } .history-section h2 { text-align: left; margin-left: auto; margin-right: auto; } .history-section .history-content-wrapper { margin-left: auto; margin-right: auto; margin-bottom: 60px; } .testimonials-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-md); } .newsletter-title { font-size: 2.2rem; } .trip-grid-heading { margin-left: 0; max-width: 100%; margin-bottom: -60px; } .trips-content .container { padding: 0 var(--spacing-lg); } .trips-content .trips-content-inner { gap: var(--spacing-xl); } .filtering-sidebar { position: static; margin-bottom: var(--spacing-xl); } .trip-card .trip-card-content .trip-details { flex-direction: column; gap: var(--spacing-xs); } .trip-card .trip-card-content .trip-card-footer { flex-direction: column; gap: var(--spacing-md); align-items: stretch; } .trip-card .trip-card-content .trip-card-footer .trip-button { text-align: center; } .tour-guides-section .container { padding: 0 var(--spacing-lg); } .trip-partners-section .container { padding: 0 var(--spacing-lg); } .trip-tabs-section .desktop-only { margin-left: -142px !important; } .trip-tabs-section .mobile-accordion-wrapper { margin-top: 71px; } .team-section .team-members-grid .team-member { flex: 0 0 calc(50% - var(--spacing-2xl)); } .news-section .news-grid .news-card { flex: 0 0 calc(50% - var(--spacing-xl)); } .news-articles-section .container { max-width: calc(100% - 4rem); padding: 0 2rem; } .news-articles-grid { gap: var(--spacing-xl); } .news-articles-grid .news-article-card { flex: 0 0 calc(50% - var(--spacing-lg)); max-width: 380px; min-height: 460px; } .news-article-image { height: 220px; } .contact-wave-divider-container { min-height: 1020px; } } @media (max-width: 1020px){ .site-header .header-actions .search-icon { display: none; } .site-header .header-actions .book-trip-btn { display: none; } } @media (max-width: 1000px){ .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } } @media (max-width: 999px){ .location-cards__title { color: var(--color-white); } .page-wrapper { margin-bottom: -137px; /* Adjusted for the promotional banner */ } .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } .trip-tabs-section .desktop-only { display: none !important; } .trip-details-tab-content .trip-includes-section { margin-top: -124px; width: 41%; } .trip-details-tab-content .trip-visual-section { height: 309px; max-height: 705px; } .trip-details-tab-content .trip-visual-section .trip-details-image-container { top: 2px; height: 100%; } .trip-pricing-tab-content .pricing-layout { margin-top: -27px !important; } } @media (max-width: 992px){ .primary-menu:not([class*=text-]) .site-header .main-nav a { font-size: 12px !important; padding: 0.2rem 0.1rem; letter-spacing: -0.02em; } .testimonials-top-wave-divider-container { margin-top: 28px; width: 1493px; left: -500px; } .testimonials-bottom-wave-divider-svg { top: -20px; } .white-wave-divider-container { margin-top: 68px; } .white-contact-wave-divider-svg { margin-top: 68px; } .trip-inner-cta__button { width: 260px; } .inner-cta__button { width: 260px; } .tour-guides-section .section-title { margin-top: -32px; margin-bottom: 61px; } .hero { height: auto; min-height: 80vh; padding: var(--spacing-5xl) 0 var(--spacing-4xl); } .hero::before { background: rgba(0, 0, 0, 0.8); } .hero-content .hero-flex-container { padding-left: 0; gap: var(--spacing-md); } .hero-content .badge-img { width: 150px; } .hero-content .hero-text-container { max-width: 100%; } .hero-content .hero-text-container h1 { font-size: 2.5rem; } .hero-content .hero-subtitle { padding-left: 0; margin-top: var(--spacing-md); } .hero-content .hero-subtitle p { font-size: 1.2rem; max-width: 100%; } .service-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .history-section { margin-top: -87px; /* Reduced negative margin for tablets */ padding-top: var(--spacing-lg); /* Slightly less top padding */ } .tradition-section .tradition-flex-container { margin-top: 106px; } .tradition-section .container { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); } .tradition-btn { width: 130px; height: 58px; } .tradition-btn .ticket-button-text { font-size: 0.95rem; } .white-mid-wave-divider-container { margin-top: -78px; } } @media (max-width: 991px){ .location-cards__title { color: var(--color-blue-100); } } @media (max-width: 899px){ .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } .trip-tabs-section .mobile-accordion-wrapper { margin-top: 85px; } } @media (max-width: 867px){ .page-wrapper { margin-bottom: -150px; /* Adjusted for the promotional banner */ } } @media (max-width: 800px){ .trip-tabs-section .mobile-accordion-wrapper { margin-top: 71px; } } @media (max-width: 799px){ .tour-guides-carousel .guides-container { width: 124%; margin-left: -161px; } .history-section .history-image-container { width: 445px; height: 439px; margin: 0 auto 30px auto; /* Center with bottom margin */ } } @media (max-width: 776px){ .tradition-section .tradition-flex-container { margin-top: 122px; } .trip-details-tab-content .trip-visual-section .trip-details-image-container { top: 2px; height: 100%; } } @media (max-width: 775px){ .secondary-hero__button { padding: 14px 28px; min-height: 48px; } body.single-trip .secondary-hero__button { padding: 14px 28px; min-height: 48px; } } @media (max-width: 769px){ .trip-details-tab-content .trip-visual-section { height: 434px; max-height: 705px; } .newsletter-section .container { margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 768px){ .testimonials-top-wave-divider-container { margin-top: 28px; width: 1258px; left: -500px; } .testimonials-bottom-wave-divider-svg { top: -20px; bottom: 24px; } .white-wave-divider-container { margin-top: 104px; } .white-contact-wave-divider-container { margin-top: 35px; } .white-contact-wave-divider-svg { margin-top: 35px; } .bottom-oceanic-mid-wave-divider-container { margin-top: 0px; width: 174%; } .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } .search-section .search-form .departure-field, .search-section .search-form .date-field { display: block; } .search-overlay-content { padding: 1.5rem; width: 95%; margin: 0 auto; } .search-overlay-container { padding: 0 1rem; } .search-overlay-form { gap: 1.25rem; } .search-overlay-form-group .facetwp-facet { width: 100% !important; max-width: 100% !important; } .trip-inner-cta__button { width: 100%; max-width: 324px; } .inner-cta__button { width: 100%; max-width: 324px; } .contact-form { padding: 20px; } .location-cards__title { font-size: 28px; margin-bottom: 16px; } .location-card .globe-icon { width: 85px; height: 60px; } .location-card .globe-icon::before { width: 80px; height: 80px; } .location-card .globe-icon img, .location-card .globe-icon svg { width: 60px; } .flatpickr-calendar { font-size: 14px; } .flatpickr-calendar .flatpickr-day { height: 32px; line-height: 32px; } .hero-content .hero-flex-container { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); } .hero-content .hero-text-container h1 { font-size: 2.2rem; } .hero-content .hero-subtitle { margin-top: var(--spacing-sm); } .hero-content .hero-subtitle p { font-size: 1.1rem; } .tours-grid { gap: 20px; margin-top: 24px; } .tour-cards-row { grid-template-columns: repeat(2, 1fr); gap: 16px; } .tour-card-featured { margin-bottom: 20px; } .tour-card-featured .tour-card-inner { flex-direction: column; } .tour-card-featured .tour-card-image { flex: 1 1 100%; } .tour-card-featured .tour-card-content { flex: 1 1 100%; padding: 16px 0 0 0; } .tour-card-image img { height: 200px; } .tour-card-featured .tour-card-image img { height: 240px; } .tour-card-title { font-size: var(--tour-card-title-font-size-mobile); } .tour-card-featured .tour-card-title { font-size: 20px; } .tour-card-subtitle { font-size: 12px; } .tour-card-title-group { font-size: var(--tour-card-title-group-font-size-mobile); } .tour-card-price { font-size: var(--tour-card-price-font-size-mobile); margin-bottom: 12px; } .price-suffix { font-size: var(--price-suffix-font-size-mobile); } .service-categories .container > .flex.flex-wrap.justify-center.gap-24 { padding-bottom: 2rem; /* Less padding on mobile */ gap: 2rem; /* Slightly smaller gap on mobile */ } .service-categories .container { padding-bottom: 150px; } .service-categories .section-title { margin-bottom: 2rem; } .service-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; } .service-categories .w-64 { min-height: 300px; /* Shorter on mobile */ } .category-title { font-size: 1.35rem; } .category-description { font-size: 0.95rem; } .category-features { padding-left: calc(var(--spacing-lg) - 5px); } .category-features li { font-size: 0.9rem; } .history-section { margin-top: -58px; /* Further reduced for small tablets */ } .history-section .history-btn { margin-left: 0; /* Keep left alignment on mobile */ margin-right: auto; } .pill-btn { padding: 8px 20px; font-size: 0.95rem; margin-bottom: 73px; } .testimonials-section { padding: var(--spacing-lg) 0; } .testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .tradition-section .container { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } .tradition-section .tradition-btn { margin-left: 0; /* Keep left alignment on mobile */ margin-right: auto; } .newsletter-section { padding: var(--spacing-lg) 0; } .newsletter-title { font-size: 2rem; } .newsletter-text { font-size: 1rem; max-width: 500px; margin: 0 auto var(--spacing-md); } .site-footer { padding: var(--spacing-lg) 0 var(--spacing-md); } .footer-top { flex-direction: column; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .footer-nav { justify-content: space-between; gap: var(--spacing-lg); } .footer-bottom { flex-direction: column; gap: var(--spacing-md); padding-top: var(--spacing-md); } .main-nav { order: 3; width: 100%; margin-top: var(--spacing-md); } .main-nav ul { justify-content: center; gap: var(--spacing-lg); } .tradition-btn { width: 120px; height: 55px; } .tradition-btn .ticket-button-text { font-size: 0.9rem; } .trip-grid-heading { font-size: 36px; margin-bottom: -40px; } .trips-content { padding: 32px 0 48px; } .trips-content .container { padding: 0 var(--spacing-md); } .filtering-sidebar .filter-header .filter-title { font-size: 24px; } .tour-guides-section { padding: var(--spacing-4xl) 0; } .tour-guides-section .container { padding: 0 var(--spacing-md); } .tour-guides-section .section-header { margin-bottom: var(--spacing-3xl); } .tour-guides-section .section-header .section-title { font-size: var(--font-size-2xl); } .tour-guides-section .section-header .section-subtitle { font-size: var(--font-size-md); max-width: 500px; } .trip-partners-section { padding: var(--spacing-6xl) 0; } .trip-partners-section .container { padding: 0 var(--spacing-md); } .trip-partners-section .section-header { margin-bottom: var(--spacing-5xl); } .trip-partners-section .section-header .section-title { font-size: 36px; margin-bottom: -40px; } .trip-partners-section .section-header .section-subtitle { font-size: var(--font-size-md); max-width: 500px; } .trips-sort-section { margin-top: -76px; margin-bottom: -1px; padding: var(--spacing-md) 0; } .trips-sort-controls { margin-bottom: var(--spacing-sm); } .trip-hero .container { flex-direction: column; text-align: center; } .trip-hero__content { margin-bottom: var(--spacing-xl); max-width: 100%; margin-left: 0; margin-top: 0; } .trip-hero__title { font-size: 42px; width: 100%; height: auto; margin-left: 0; } .trip-hero__date { font-size: 24px; width: 100%; height: auto; margin-left: 0; } .trip-hero__pricing { margin-left: 0; justify-content: center; } .trip-hero__price { font-size: 42px; } .trip-hero__cta { text-align: center; } .trip-hero .trip-hero__additional-info { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); text-align: center; } .trip-hero .trip-tabs-section .desktop-only { display: none; } .trip-hero .trip-tabs-section .mobile-only { display: block; } .trip-hero .trip-tabs-section .mobile-accordion { max-width: 100%; padding: 0 var(--spacing-md); } .trip-details-tab-content .trip-includes-section { margin-top: -64px; } .trip-details-tab-content .trip-visual-section { width: 100%; max-width: 100%; height: auto; min-height: 300px; margin: var(--spacing-xl) 0 0 0; border-radius: 12px; border-left: none; display: block; position: relative; background-color: #C2DBE7; padding: var(--spacing-lg); } .trip-details-tab-content .trip-visual-section .travel-guide-pill-desktop { display: none; } .trip-details-tab-content .trip-visual-section .travel-guide-pill { display: none; } .trip-details-tab-content .trip-visual-section .trip-details-image-container { position: relative; top: 0; height: auto; min-height: 200px; padding: 0; display: flex; align-items: center; justify-content: center; } .trip-details-tab-content .trip-visual-section .trip-details-image-container .trip-details-img { max-width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; border-radius: 8px; } .trip-details-tab-content .travel-guide-pill-mobile { display: block; background-color: #2C5F7A; color: var(--color-white); padding: var(--spacing-md) var(--spacing-lg); border-radius: 25px; font-weight: 600; font-size: 16px; text-align: center; margin-bottom: var(--spacing-xl); box-shadow: 0 4px 12px rgba(44, 95, 122, 0.3); } .trip-details-tab-content .travel-guide-pill-mobile .guide-label { margin-right: var(--spacing-xs); font-weight: 400; } .trip-details-tab-content .travel-guide-pill-mobile .guide-name { font-weight: 700; } .trip-details-tab-content .trip-details-layout { flex-direction: column; gap: var(--spacing-lg); margin-top: -43px; } .trip-details-tab-content .trip-includes-section { width: 100%; margin-top: 0; order: 2; } .trip-details-tab-content .trip-visual-section { order: 1; } .trip-itinerary-tab-content .itinerary-days-container { grid-template-columns: 1fr; gap: var(--spacing-lg); } .trip-pricing-tab-content .pricing-layout { width: 100%; margin-top: 0; flex-direction: column; gap: var(--spacing-lg); } .trip-pricing-tab-content .pricing-details-section { width: 100%; order: 1; margin-bottom: var(--spacing-lg); } .trip-pricing-tab-content .upgrade-details { margin-left: 0; margin-top: 0; } .trip-pricing-tab-content .upgrade-package-section { width: 100%; margin-left: 0; margin-top: 0; order: 3; padding: var(--spacing-lg); background-color: transparent; color: var(--color-text); border-radius: 8px; border: 1px solid var(--color-border); background-color: var(--color-white); } .trip-pricing-tab-content .upgrade-package-section .upgrade-header .upgrade-title { color: var(--color-text); } .trip-pricing-tab-content .upgrade-package-section .upgrade-header .travel-guide-pill-desktop { display: none; } .trip-pricing-tab-content .upgrade-package-section .upgrade-features-list .upgrade-feature-item .feature-text { color: var(--color-text); } .trip-pricing-tab-content .pricing-upgrade-pill-mobile { display: block; background-color: var(--color-primary); color: var(--color-white); padding: var(--spacing-md) var(--spacing-lg); border-radius: 25px; font-weight: 600; font-size: 16px; text-align: center; box-shadow: 0 4px 12px rgba(230, 169, 31, 0.3); order: 2; } .trip-pricing-tab-content .pricing-upgrade-pill-mobile .upgrade-label { margin-right: var(--spacing-xs); font-weight: 400; } .trip-pricing-tab-content .pricing-upgrade-pill-mobile .upgrade-name { font-weight: 700; } .trip-pricing-tab-content .travel-guide-pill-mobile { background-color: #E6A91F; box-shadow: 0 4px 12px rgba(230, 169, 31, 0.3); order: 2; } .trip-pricing-tab-content { padding-top: var(--spacing-lg); } .trip-pricing-tab-content .pricing-layout { display: flex; flex-direction: column; gap: var(--spacing-lg); } .about-page-content-section .about-page-content .wp-block-media-text.is-stacked-on-mobile { flex-direction: column; text-align: center; } .about-page-content-section .about-page-content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { flex: none; width: 100%; margin-bottom: var(--spacing-lg); } .about-page-content-section .about-page-content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { text-align: left; } .team-section .team-member-photo-wrapper { width: 130px; height: 130px; margin-left: -39px; } .newsletter-section .newsletter-wrapper { flex-direction: column; text-align: center; } .newsletter-section .newsletter-form .form-group { margin: 0 auto; margin-left: 4px; width: 82%; padding-bottom: 20px !important; } .news-content-section .container { padding: 0 var(--spacing-lg); } .news-content-section { padding: var(--spacing-4xl) 0; } .news-content-block { margin-bottom: var(--spacing-3xl); } .news-content-headline { font-size: var(--h4-font-size); margin-bottom: var(--spacing-md); } .news-content-text { font-size: var(--p-font-size-mobile); } .news-articles-section .container { max-width: calc(100% - 2rem); padding: 0 1rem; } .news-articles-section { padding: var(--spacing-4xl) 0 var(--spacing-6xl); } .news-section-title { font-size: var(--h3-font-size); margin-bottom: var(--spacing-3xl); } .news-articles-grid { gap: var(--spacing-lg); justify-content: center; } .news-articles-grid .news-article-card { flex: 0 0 calc(50% - var(--spacing-md)); max-width: 350px; min-height: 440px; } .news-article-image { height: 200px; } .news-article-content { padding: var(--spacing-md); } .news-article-title { font-size: var(--h6-font-size); } .news-article-excerpt { font-size: 14px; margin-bottom: var(--spacing-sm); } .news-read-more { font-size: 13px; } .news-pagination { margin: var(--spacing-4xl) auto 0; padding: 0 var(--spacing-md); } .news-pagination .page-numbers { min-width: 44px; height: 44px; padding: var(--spacing-sm); font-size: 14px; } .news-article .container { padding: 0 var(--spacing-lg); } .news-article { padding: var(--spacing-4xl) 0; } .news-article-header { margin-bottom: var(--spacing-2xl); } .news-article-title { font-size: var(--h3-font-size); } .news-article-body { font-size: var(--p-font-size-mobile); } .news-article-footer { margin-top: var(--spacing-2xl); } .white-mid-wave-divider-container { margin-top: -55px; } .contact-wave-divider-container { min-height: 1100px; } .error-404-content { min-height: 500px; margin-top: -97px; padding: 48px 32px; background-position: 70% center; background-size: cover; } .error-404-message { max-width: 450px; } .error-404-headline { font-size: 2rem; padding-bottom: 12px; } .error-404-subheading { font-size: 1.125rem; } } @media all and (max-width: 768px){ #sb-reviews-container-1 .sb-feed-posts .review-card-container:nth-of-type(2), #sb-reviews-container-1 .sb-feed-posts .sb-post-item-wrap:nth-of-type(2) { display: none; } } @media screen and (max-width: 768px){ .trip-hero__content { margin-left: 0; } } @media (max-width: 767px){ .page-wrapper { margin-bottom: -160px; /* Adjusted for the promotional banner */ } .filtering-sidebar .filter-header .header-caret { transform: rotate(0deg); } .filtering-sidebar .filter-group { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); } .filtering-sidebar .filter-group .filter-group-title { font-size: 13px; margin-bottom: var(--spacing-sm); } .filtering-sidebar .facetwp-facet { transition: all 0.3s ease; } .filtering-sidebar .filter-accordion-item:not(.expanded) .filter-accordion-content { max-height: 0; opacity: 0; visibility: hidden; border-top: none; padding-bottom: 0; } .filtering-sidebar .filter-accordion-item:not(.expanded) .accordion-arrow { transform: rotate(0deg); } .filtering-sidebar .filter-accordion-header { padding: 20px 15px; min-height: 60px; } .filtering-sidebar .filter-accordion-header .filter-title { font-size: 15px; } .filtering-sidebar .filter-accordion-header .accordion-arrow { font-size: 14px; } .filtering-sidebar .filter-accordion-item.expanded .filter-accordion-content { max-height: 400px; } .filtering-sidebar .filter-accordion-item.expanded .filter-accordion-content:has(.flatpickr-calendar) { max-height: 350px; } .filtering-sidebar .filter-accordion-item.expanded .filter-accordion-content:has(.facetwp-type-checkboxes) { max-height: 250px; } .history-flex-container { gap: var(--spacing-md); } .history-flex-container > div { width: 100% !important; } .history-flex-container > div:nth-child(1) { /* Content column */ order: 1; } .history-flex-container > div:nth-child(2) { /* Image column */ order: 2; margin-bottom: var(--spacing-lg); } .history-section .flex { flex-direction: column; /* Stack normally without reversing order */ } .tradition-section .tradition-flex-container { /* Reorder columns on mobile - image first, then content */ } .tradition-section .tradition-flex-container > div:nth-child(1) { /* Content column */ order: 2; } .tradition-section .tradition-flex-container > div:nth-child(2) { /* Image column */ order: 1; margin-bottom: var(--spacing-lg); } .tradition-section .tradition-content-wrapper { max-width: 100%; padding: 0 0px; } .tradition-section .tradition-image-container { margin-top: -93px; width: 445px; height: 439px; margin-bottom: 30px; } .tradition-section h2 { margin-top: 20px; } .tradition-section .tradition-content { font-size: 0.95rem; } } @media (max-width: 699px){ .page-wrapper { margin-bottom: -122px; /* Further adjustment for smaller screens */ } .tour-guides-carousel .guides-container { width: 124%; margin-left: -3px; } .tradition-section .tradition-image-container { margin-top: -93px; width: 420px; height: 420px; margin-bottom: 30px; } .news-section .container { padding: 0 var(--container-padding-md); } } @media (max-width: 667px){ .testimonials-top-wave-divider-container { margin-top: 62px; width: 1229px; left: -557px; } .testimonials-bottom-wave-divider-svg { top: -10px; bottom: 16px; } } @media screen and (max-width: 662px){ .error-404-content { min-height: 500px; margin-top: -97px; padding: 48px 32px; background-position: 70% center; background-size: cover; } } @media (max-width: 650px){ .trip-tabs-section .mobile-accordion-wrapper { margin-top: 62px; } } @media (max-width: 640px){ .search-section { margin-bottom: -75px !important; } .search-section.search-section .container { padding-bottom: 40px !important; } .search-section .search-button { margin-top: -20px; } } @media (max-width: 599px){ .tour-guides-carousel .guides-container { width: 124%; margin-left: -7px; } .tradition-section .tradition-image-container { margin-top: -93px; width: 380px; height: 380px; margin-bottom: 30px; } .news-section .container { padding: 0 var(--container-padding-md); } .news-section .news-grid { display: block; margin: 0; } .news-section .news-grid .news-card { flex: none; margin: 0 0 var(--spacing-xl) 0; } .contact-wave-divider-container { min-height: 1100px; } } @media (max-width: 576px){ .location-cards__title { font-size: 24px; margin-bottom: 15px; } .hero-content .badge-img { width: 120px; } .hero-content .hero-text-container h1 { font-size: 2rem; } .hero-content .hero-subtitle p { font-size: 1rem; } .history-flex-container { padding: 0 var(--spacing-md); } .history-flex-container .w-full:first-child { margin-bottom: var(--spacing-md); } .service-categories .container { padding-bottom: 0px; } .history-section { margin-top: -80px; /* Minimal negative margin for mobile */ padding-top: var(--spacing-md); /* Less top padding on mobile */ } .history-section .history-content-column .history-content { max-width: calc(100% - 10px); } .history-section .history-image-container { width: 380px; height: 380px; margin: 0 auto 20px auto; /* Center with smaller bottom margin */ } .history-section .history-content-wrapper { width: 100%; padding: 0 0px; margin-bottom: 40px; } .history-section .history-content { font-size: 0.95rem; line-height: 1.6; /* Slightly increased line height for readability */ padding: 0; } .tradition-section .tradition-content-wrapper { max-width: 100%; padding: 0 0px; } .tradition-btn { width: 115px; height: 52px; } } @media (max-width: 567px){ .white-mid-wave-divider-container { margin-top: -41px; } } @media (max-width: 499px){ .tour-guides-carousel .guides-container { width: 124%; margin-left: -81px; } .service-categories .container { padding-bottom: 2rem; /* Minimal padding on mobile */ } .tradition-section .tradition-image-container { margin-top: -15px; width: 410px; height: 410px; margin-bottom: 30px; } } @media (max-width: 480px){ .site-footer .footer-mobile .footer-navigation-container { flex-direction: column; gap: 1.5rem; } .site-footer .footer-mobile .footer-navigation-container .footer-column { flex: 1 1 auto; width: 100%; max-width: none; padding-top: 0; } .site-footer .footer-mobile .footer-branding { flex-direction: column; gap: 1.5rem; } .site-footer .footer-mobile .footer-branding .footer-social { margin-top: 0.5rem; flex: 0 0 auto; } .contact-form { padding: 16px; } .contact-form .accessibility-icon { top: 16px; left: 16px; width: 32px; height: 32px; } .contact-form .accessibility-icon span { font-size: 16px; } .contact-form__form { gap: 16px; } .contact-form__field input, .contact-form__field textarea { padding: 12px; font-size: 16px; } .contact-form__field textarea { min-height: 100px; } .contact-form__submit button { padding: 10px 24px; font-size: 15px; } .contact-form__notice { padding: 16px; } .contact-form .gform_wrapper .gform_heading { margin-bottom: 16px; } .contact-form .gform_wrapper .gform_heading .gform_description { font-size: 15px; } .contact-form .gform_wrapper .gform_body .gform_fields { gap: 16px; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .gfield_label { margin-bottom: 6px; font-size: 15px; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input, .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea, .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select { padding: 12px; font-size: 16px; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea { min-height: 100px; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select { height: 44px; padding-right: 26px; } .contact-form .gform_wrapper .gform_body .gform_fields .gfield .validation_message { font-size: 13px; } .contact-form .gform_wrapper .gform_footer { margin-top: 16px; } .contact-form .gform_wrapper .gform_footer input[type=submit], .contact-form .gform_wrapper .gform_footer button, .contact-form .gform_wrapper .gform_footer .gform_button, .contact-form .gform_wrapper .gform_footer .button { padding: 10px 32px !important; font-size: 15px !important; min-width: 140px !important; } .contact-form .gform_wrapper .validation_error { padding: 12px; margin-bottom: 16px; font-size: 13px; } .location-cards__title { font-size: 22px; margin-bottom: 12px; } .location-cards__container { gap: 16px; } .location-card { padding: 12px; } .location-card__content { align-items: flex-start; } .location-card__info { padding-right: 10px; } .location-card__title { font-size: 16px; margin-bottom: 4px; } .location-card__address { font-size: 13px; margin-bottom: 4px; } .location-card__phone { font-size: 13px; } .location-card .globe-icon { width: 70px; height: 50px; } .location-card .globe-icon::before { width: 65px; height: 65px; } .location-card .globe-icon img, .location-card .globe-icon svg { width: 50px; } .trip-details-tab-content .trip-visual-section { min-height: 250px; margin: var(--spacing-lg) 0 0 0; padding: var(--spacing-md); } .trip-details-tab-content .trip-visual-section .trip-details-image-container { min-height: 150px; } .trip-details-tab-content .travel-guide-pill-mobile { font-size: 14px; padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-lg); } .trip-pricing-tab-content .upgrade-package-section { padding: var(--spacing-md); } .trip-pricing-tab-content .pricing-upgrade-pill-mobile { font-size: 14px; padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-lg); } .contact-wave-divider-container { min-height: 990px; } } @media (max-width: 476px){ .tradition-section .tradition-flex-container { margin-top: 44px; } .tradition-section { margin-top: -127px; } .white-mid-wave-divider-container { margin-top: -41px; } } @media (max-width: 467px){ .tradition-section .tradition-content-wrapper { max-width: 100%; padding: 0 0px; } .trip-details-tab-content .trip-includes-section { margin-top: 0px; } } @media screen and (max-width: 442px){ .error-404-content { min-height: 500px; margin-top: -97px; padding: 48px 32px; background-position: 70% center; background-size: cover; } } @media (max-width: 425px){ .testimonials-top-wave-divider-container { margin-top: 64px; width: 1111px; left: -527px; } .white-wave-divider-container { margin-top: 125px; } .white-contact-wave-divider-container { margin-top: 25px; } .white-contact-wave-divider-svg { margin-top: 25px; } .bottom-oceanic-mid-wave-divider-container { width: 186%; margin-bottom: -1px; } .bottom-oceanic-mid-wave-divider-svg { margin-bottom: -39px; } .history-section .history-image-container { width: 338px; height: 331px; } .white-mid-wave-divider-container { margin-top: -39px; } } @media (max-width: 423px){ .general-content .general-content-inner h1 { font-size: calc(var(--h1-font-size) * 0.6); } .general-content .general-content-inner h2, .general-content .general-content-inner h3 { font-size: calc(var(--h3-font-size) * 0.7); } } @media (max-width: 400px){ .post-navigation .nav-links { flex-direction: column; gap: var(--spacing-lg); } .post-navigation .nav-previous, .post-navigation .nav-next { max-width: 100%; } .post-navigation .nav-next { text-align: left; } .search-overlay-content { padding: 1rem; width: 95%; margin: 0 auto; } .search-overlay-container { padding: 0 1rem; } .search-overlay-title { font-size: 28px; margin-bottom: 28px; } .search-overlay-form-group .facetwp-dropdown, .search-overlay-form-group select, .search-overlay-form-group input, .search-overlay-form-group .facetwp-date, .search-overlay-form-group .facetwp-date-min, .search-overlay-form-group .facetwp-date-max, .search-overlay-form-group input.facetwp-date { height: 60px !important; font-size: 17px !important; } .search-overlay-button { height: 60px; font-size: 17px; } .tours-grid { gap: 16px; margin-top: 20px; } .tour-cards-row { grid-template-columns: 1fr; gap: 16px; } .tour-card { border-radius: 6px; } .tour-card:hover { transform: translateY(-2px); } .tour-card-featured { margin-bottom: 16px; } .tour-card-inner { padding: 12px; } .tour-card-featured .tour-card-content { padding: 12px 0 0 0; } .tour-card-image { margin-bottom: 8px; border-radius: 3px; } .tour-card-image img { height: 180px; } .tour-card-featured .tour-card-image img { height: 200px; } .tour-card-tag { top: 8px; right: 8px; font-size: 11px; padding: 3px 6px; } .tour-card-title { font-size: var(--tour-card-title-font-size-mobile); margin-bottom: 6px; } .tour-card-featured .tour-card-title { font-size: 18px; } .tour-card-subtitle { font-size: 6.62px; margin-top: 6px; } .tour-card-title-group { font-size: var(--tour-card-title-group-font-size-mobile); } .tour-card-tagline { font-size: 13px; margin-bottom: 6px; } .tour-card-date { font-size: var(--tour-card-date-font-size-mobile); margin-bottom: 8px; } .tour-card-price-group { margin-bottom: 8px; } .tour-card-price { font-size: var(--tour-card-price-font-size-mobile); margin-bottom: 10px; } .price-suffix { font-size: var(--price-suffix-font-size-mobile); } .tour-card-cta-group { font-size: var(--tour-card-cta-group-font-size-mobile); } .tour-card-cta { font-size: var(--tour-card-cta-group-font-size-mobile); letter-spacing: 0.3px; } .service-category > div.w-64 { width: 100%; /* Full width on very small screens */ } .service-categories .w-64 { min-height: 280px; /* Even shorter on very small screens */ } .history-section .history-image-container { width: 320px; height: 320px; } .pill-btn { width: 80%; margin-left: auto; margin-right: auto; } .testimonials-section { padding: var(--spacing-md) 0; } .testimonials-grid { grid-template-columns: 1fr; gap: var(--spacing-sm); } .testimonial-card { padding: var(--spacing-md); border-radius: 6px; } .testimonial-card:hover { transform: translateY(-2px); } .testimonial-rating { font-size: 1rem; margin-bottom: var(--spacing-sm); } .testimonial-text { margin-bottom: var(--spacing-sm); font-size: 0.95rem; } .testimonial-author { font-size: 0.95rem; } .newsletter-section { padding: var(--spacing-md) 0; } .newsletter-title { font-size: 1.8rem; margin-bottom: var(--spacing-sm); } .newsletter-text { font-size: 0.95rem; max-width: 100%; padding: 0 var(--spacing-sm); } .newsletter-form { flex-direction: column; gap: var(--spacing-sm); max-width: 100%; padding: 0 var(--spacing-sm); } .newsletter-input { border-radius: 4px; padding: 14px 16px; font-size: 16px; } .newsletter-button { border-radius: 4px; padding: 14px 20px; font-size: 16px; } .site-footer { padding: var(--spacing-md) 0 var(--spacing-sm); } .footer-top { gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .footer-logo-img { height: 40px; margin-bottom: var(--spacing-md); } .footer-nav { flex-direction: column; gap: var(--spacing-md); } .footer-nav-column h4 { font-size: 15px; margin-bottom: var(--spacing-sm); } .footer-nav-column ul { gap: var(--spacing-xs); } .footer-nav-column a { font-size: 0.95rem; } .footer-bottom { gap: var(--spacing-sm); padding-top: var(--spacing-sm); } .copyright { font-size: 0.85rem; text-align: center; } .social-links { gap: var(--spacing-sm); justify-content: center; } .social-links a { font-size: 1.1rem; } .tradition-btn { width: 110px; height: 50px; } .tradition-btn .ticket-button-text { font-size: 0.85rem; } .trip-grid-heading-wrapper .container { padding: 0 var(--spacing-sm); } .trip-grid-heading { font-size: 28px; min-height: 50px; margin-bottom: -20px; margin-top: 0; } .trips-content { padding: 24px 0 32px; } .trips-content .container { padding: 0 var(--spacing-sm); } .trips-content .trips-sidebar { margin-bottom: 24px; } .filtering-sidebar { margin-bottom: var(--spacing-lg); border-radius: 4px; } .filtering-sidebar .filter-header { margin-bottom: 16px; padding: var(--spacing-md); } .filtering-sidebar .filter-header .filter-title { font-size: 20px; } .filtering-sidebar .filter-dropdown { padding: 12px 16px; min-height: 48px; } .filtering-sidebar .filter-dropdown h4 { font-size: 15px; } .filtering-sidebar .filter-group { padding: 0 16px; margin-bottom: 14px; } .filtering-sidebar .filter-group h4 { font-size: 15px; margin-bottom: 10px; } .filtering-sidebar .filter-group select, .filtering-sidebar .filter-group .facetwp-dropdown { padding: 12px 16px; font-size: 15px; min-height: 44px; border-radius: 4px; } .filtering-sidebar .filter-group select:focus, .filtering-sidebar .filter-group .facetwp-dropdown:focus { box-shadow: 0 0 0 2px rgba(29, 71, 90, 0.2); } .tour-guides-section { padding: var(--spacing-3xl) 0; } .tour-guides-section .container { padding: 0 var(--spacing-sm); } .tour-guides-section .section-header { margin-bottom: var(--spacing-2xl); } .tour-guides-section .section-header .section-title { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); } .tour-guides-section .section-header .section-subtitle { font-size: var(--font-size-sm); max-width: 100%; padding: 0 var(--spacing-sm); } .trip-partners-section { padding: var(--spacing-3xl) 0; } .trip-partners-section .container { padding: 0 var(--spacing-sm); } .trip-partners-section .section-header { margin-bottom: var(--spacing-2xl); } .trip-partners-section .section-header .section-title { font-size: 28px; margin-bottom: -20px; } .trip-partners-section .section-header .section-subtitle { font-size: var(--font-size-sm); max-width: 100%; padding: 0 var(--spacing-sm); } .trip-partners-section .partners-container.grid .partner-item { flex: 1 1 100%; max-width: 100%; min-width: 100%; } .trip-partners-section .partners-container.carousel { overflow: hidden; } .trip-partners-section .partner-item .partner-logo { height: 100px; } .trips-sort-section { padding: var(--spacing-sm) 0; } .trip-hero__title { font-size: 36px; } .trip-hero__date { font-size: 20px; } .trip-hero__price { font-size: 36px; } .trip-details-tab-content .trip-includes-section { margin-top: -11px; } .about-page-content-section .about-page-content { padding: 0 var(--spacing-sm); } .team-section .team-members-grid .team-member { flex: 0 0 100%; } .team-section .team-member-photo { height: 200px; } .news-section .news-grid .news-card { flex: 0 0 100%; } .newsletter-section .newsletter-form .form-group { flex-direction: column; align-items: flex-start; } .newsletter-section .newsletter-form input[type=email] { border-radius: 10px; width: 100%; margin-bottom: var(--spacing-2xl); } .newsletter-section .newsletter-form .btn-subscribe { width: 100%; margin-top: var(--spacing-sm); border-radius: 0; } .news-articles-section .container { max-width: calc(100% - 1rem); padding: 0 0.5rem; } .news-articles-section { padding: var(--spacing-3xl) 0 var(--spacing-5xl); } .news-articles-grid { gap: var(--spacing-md); justify-content: center; } .news-articles-grid .news-article-card { flex: 0 0 100%; max-width: 100%; min-height: 400px; } .news-article-image { height: 180px; } .news-article-content { padding: var(--spacing-md) var(--spacing-sm); } .news-article-title { font-size: 16px; } .news-pagination { margin: var(--spacing-3xl) auto 0; padding: 0 var(--spacing-sm); } .news-pagination ul.page-numbers { gap: var(--spacing-xs); justify-content: flex-start; padding: 0 var(--spacing-sm); } .news-pagination .page-numbers { min-width: 40px; height: 40px; padding: var(--spacing-xs) var(--spacing-sm); font-size: 13px; } .news-article-navigation .post-navigation { flex-direction: column; gap: var(--spacing-lg); } .news-article-navigation .nav-previous, .news-article-navigation .nav-next { max-width: 100%; } .error-404-content { min-height: 400px; padding: 40px 24px; background-position: 80% center; background-size: cover; } .error-404-message { max-width: 100%; } .error-404-headline { font-size: 2.25rem; } .error-404-subheading { font-size: 1rem; } .error-404-buttons { flex-direction: column; gap: 12px; } .accessibility-icon { bottom: var(--spacing-lg); left: var(--spacing-lg); } } @media (max-width: 399px){ .tour-guides-carousel .guides-container { width: 124%; margin-left: -61px; } .history-section .history-content-column { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } .history-section .history-image-container { width: 270px; height: 269px; } .tradition-section .tradition-content-wrapper { max-width: 100%; padding: 0 0px; } .tradition-section .tradition-image-container { margin-top: -15px; width: 320px; height: 320px; margin-bottom: 30px; } .tour-guides-section { padding: var(--spacing-2xl) 0; } .trip-details-tab-content .trip-visual-section { min-height: 250px; margin: var(--spacing-lg) 0 0 0; padding: var(--spacing-md); } .white-mid-wave-divider-container { margin-top: -29px; } } @media (max-width: 375px){ .bottom-oceanic-mid-wave-divider-container { width: 222%; margin-bottom: 0px; } .trip-details-tab-content .trip-includes-section { margin-top: -11px; } .team-section .section-title { margin-top: -73px; } .team-section .team-members-grid { margin-bottom: -143px; } .team-section .team-member-photo { width: 100%; height: 100%; } .team-section .team-member-info { margin-left: -39px; } .news-section .container { padding: 0 var(--container-padding-md); } .news-section .news-grid { width: 100%; margin-bottom: -163px; } } @media (max-width: 350px){ .testimonials-bottom-wave-divider-svg { top: -10px !important; } .history-section .history-image-container { width: 234px; height: 234px; } .tradition-section .tradition-image-container { margin-top: -15px; width: 310px; height: 290px; margin-bottom: 30px; } .trip-pricing-tab-content .pricing-layout { margin-top: -212px; width: 179px; } .white-mid-wave-divider-container { margin-top: -29px; } } @media (max-width: 320px){ .trip-details-tab-content .trip-includes-section { margin-top: -11px; } .trip-details-tab-content .trip-visual-section { min-height: 250px; margin: var(--spacing-lg) 0 0 0; padding: var(--spacing-md); } .white-mid-wave-divider-container { margin-top: -29px; } } @media (hover: hover){ .sort-facet-wrapper select.trip-sort-select:hover { background-color: #112933; cursor: pointer; } } @media (max-width: md){ .trip-inner-cta__flex-container { flex-direction: column; } .trip-inner-cta__content { flex: 1 1 100%; margin-bottom: var(--spacing-xl); text-align: center; padding-right: 0; } .trip-inner-cta__button-wrapper { width: 100%; display: flex; justify-content: center; } .trip-inner-cta__button { width: 100%; max-width: 324px; } .inner-cta__flex-container { flex-direction: column; } .inner-cta__content { flex: 1 1 100%; margin-bottom: var(--spacing-xl); text-align: center; padding-right: 0; } .inner-cta__button-wrapper { width: 100%; display: flex; justify-content: center; } .inner-cta__button { width: 100%; max-width: 324px; } } @media (max-width: sm){ .inner-cta { padding: var(--spacing-2xl) 0; margin: var(--spacing-2xl) 0; } .inner-cta__heading { font-size: 24px; } .inner-cta { padding: var(--spacing-2xl) 0; margin: var(--spacing-2xl) 0; } .inner-cta__heading { font-size: 24px; } } @media (max-width: xsmall){ .error-404-content { min-height: 350px; padding: 32px 16px; background-position: 85% center; background-size: cover; } } @media (prefers-contrast: high){ .sort-facet-wrapper select { border: 2px solid #1d475a; background-color: #ffffff; } } @media (prefers-reduced-motion: reduce){ *, ::before, ::after { animation-delay: -1ms !important; /* 1 */ animation-duration: 1ms !important; /* 1 */ animation-iteration-count: 1 !important; /* 1 */ background-attachment: initial !important; /* 2 */ scroll-behavior: auto !important; /* 3 */ transition-delay: 0s !important; /* 4 */ transition-duration: 0s !important; /* 4 */ } .sort-facet-wrapper select { transition: none; } .sort-facet-wrapper select:hover { transform: none; } .sort-loading::after { animation: none; } } /*# sourceMappingURL=app.css.map*/