/* ========================================================================== Rover UI layer — loaded after style.css. Part 1: layout fixes (alignment, overflow, equal-height cards). Part 2: motion & interaction (scroll reveal, hover, click ripple, header, progress bar). All motion is disabled under prefers-reduced-motion, and reveal only hides content once rover-ui.js has marked , so nothing is lost if JS fails. ========================================================================== */ :root { --rv-navy: #17234c; --rv-blue: #2d6799; --rv-accent: #037fff; --rv-gold: #eec100; --rv-bg: #f6fafd; --rv-ease: cubic-bezier(.22, .61, .36, 1); --rv-shadow: 0 10px 30px -14px rgba(23, 35, 76, .28); --rv-shadow-lg: 0 24px 48px -20px rgba(23, 35, 76, .38); --rv-radius: 12px; } /* NB no `html { scroll-behavior: smooth }`: it fights the theme's jQuery scrollTop animations (back-to-top, tab jumps) and stalls them. rover-ui.js smooth-scrolls in-page anchors itself. */ body { overflow-x: clip; } /* belt-and-braces; the real overflow causes are fixed below */ /* ---------- 1. Layout fixes ---------- */ /* footer skyline: a .row (negative margins) inside a padding-less container overflowed by 15px */ .footer-img .row { margin-left: 0; margin-right: 0; } .footer-img img { max-width: 100%; } /* footer payment logos: wrap instead of pushing past the viewport on phones */ .footer .footer-images .col:first-child { flex-wrap: wrap; row-gap: 1rem; } @media (max-width: 767px) { .footer .footer-images .col:first-child img { margin: 0 .8rem; } } /* Why Rover centre disc: centre the (now two-line) label instead of a fixed padding-top */ .section-whyus .whyrover .whyrover-text h3 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; line-height: 1.15; letter-spacing: .04em; } /* Home "Most popular Packages": consistent image frame + titles clamped to 2 lines so rows align */ .section-package .col3 > a, .section-package .col3 > a > figure { display: flex; flex-direction: column; height: 100%; } .section-package .col3 figure { border-radius: var(--rv-radius); background: #fff; } .section-package .col3 figure img { aspect-ratio: 282 / 321; min-height: 0; height: auto; } .section-package .col3 figure h5 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 5rem; margin-bottom: .6rem; padding: 0 1.2rem; } .section-package .col3 figure .package-text { margin-top: auto; padding: 0 1.2rem 1.4rem; } /* Travel Blog carousel: equal-height cards whatever the title length */ .section-blog .blog-carousel .owl-stage { display: flex; } .section-blog .blog-carousel .owl-item { display: flex; height: auto; } .section-blog .blog-carousel .owl-item > .item, .section-blog .blog-carousel .owl-item > .item > a { display: flex; width: 100%; } .section-blog .blog-carousel .item .blog-wrapper { display: flex; align-items: center; width: 100%; height: 100%; border-radius: var(--rv-radius); } .section-blog .blog-carousel .item .blog-wrapper .blog-image { flex: 0 0 auto; border-radius: 10px; overflow: hidden; } .section-blog .blog-carousel .item .blog-wrapper img { object-fit: cover; width: 100%; } .section-blog .blog-carousel .item .blog-wrapper .blog-text h5 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 991px) { .section-blog .blog-carousel .item .blog-wrapper { flex-direction: column; justify-content: flex-start; } } /* Travel Style carousel: every card the same frame, image always covers it */ .section-travel .travel-carousel .item figure img:not(.overlay-img) { width: 100%; object-fit: cover; } .section-travel .travel-carousel .item figure .travel-text { right: 1.125rem; } /* generic: images never overflow their column */ .section-blogdetail img, .package-list img, .section-bloglist img { max-width: 100%; height: auto; } /* ---------- 2. Motion & interaction ---------- */ /* scroll progress bar */ .rv-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 10000; background: linear-gradient(90deg, var(--rv-gold), var(--rv-accent)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } /* sticky header gets a soft glass look once the page scrolls */ .header.rv-scrolled .navigation-top, .navigation-top.sticky { box-shadow: 0 8px 24px -16px rgba(23, 35, 76, .45); } .navigation-top.sticky { backdrop-filter: saturate(160%) blur(8px); background-color: rgba(246, 250, 253, .92) !important; } /* scroll reveal (only when JS is running) */ .rv-js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s var(--rv-ease), transform .7s var(--rv-ease); transition-delay: var(--rv-delay, 0ms); } .rv-js .rv.rv-left { transform: translate3d(-32px, 0, 0); } .rv-js .rv.rv-right { transform: translate3d(32px, 0, 0); } .rv-js .rv.rv-zoom { transform: scale(.94); } .rv-js .rv.rv-in { opacity: 1; transform: none; } /* images fade in as they load */ .rv-js img.rv-img { opacity: 0; transition: opacity .6s var(--rv-ease); } .rv-js img.rv-img.rv-loaded { opacity: 1; } /* cards: lift + deeper shadow on hover, image zooms inside its frame */ .rv-card { transition: transform .45s var(--rv-ease), box-shadow .45s var(--rv-ease); will-change: transform; } .rv-card:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-lg); } .rv-card img { transition: transform .9s var(--rv-ease); } .rv-card:hover img:not(.overlay-img) { transform: scale(1.06); } .rv-card { position: relative; overflow: hidden; } .section-package .col3 figure { box-shadow: var(--rv-shadow); } /* theme zooms package images OUT on hover (1.05 -> 1); make it consistent with the other cards */ .section-package .col3 figure img { transform: scale(1); transition: transform .9s var(--rv-ease); } .section-package .col3 figure:hover img { transform: scale(1.06); } .section-package .col3 figure:hover h5 { color: var(--rv-blue); } .section-package .col3 figure h5 { transition: color .3s; } /* "view" chip that slides up on package cards */ .rv-chip { position: absolute; left: 1.2rem; top: 1.2rem; z-index: 3; background: rgba(23, 35, 76, .85); color: #fff; font: 600 1.3rem/1 "Inter", sans-serif; padding: .8rem 1.2rem; border-radius: 999px; letter-spacing: .02em; opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--rv-ease), transform .35s var(--rv-ease); pointer-events: none; } .rv-card:hover .rv-chip, .rv-card:focus-within .rv-chip { opacity: 1; transform: none; } /* travel style cards: text block rises on hover */ .section-travel .travel-carousel .item figure .travel-text { transition: transform .45s var(--rv-ease); } .section-travel .travel-carousel .item figure:hover .travel-text { transform: translateY(-10px); } .section-travel .travel-carousel .item figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(23,35,76,0) 45%, rgba(23,35,76,.45) 100%); opacity: 0; transition: opacity .45s var(--rv-ease); } .section-travel .travel-carousel .item figure:hover::after { opacity: 1; } /* blog cards: arrow glides, title turns accent */ .section-blog .blog-carousel .item .blog-wrapper h5 { transition: color .3s; } .section-blog .blog-carousel .item .blog-wrapper:hover h5 { color: var(--rv-accent); } .section-blog .blog-carousel .item .blog-wrapper i { transition: margin .35s var(--rv-ease); } /* why-us circles: gentle float + ring on hover */ .section-whyus .circle .inside { transition: transform .4s var(--rv-ease), box-shadow .4s var(--rv-ease); } .section-whyus .circle:hover .inside { transform: translateY(-6px) scale(1.04); box-shadow: 0 16px 30px -14px rgba(23,35,76,.45); } /* buttons */ .btn, .view-btn, .book-btn, .inquiry-btn, button[type="submit"] { position: relative; overflow: hidden; transition: transform .25s var(--rv-ease), box-shadow .3s var(--rv-ease), background-color .3s, color .3s; } .btn:hover, .view-btn:hover, .book-btn:hover, .inquiry-btn:hover, button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(23, 35, 76, .55); } .btn:active, .view-btn:active, button[type="submit"]:active { transform: translateY(0) scale(.98); } /* nav links: animated underline */ .header .navbar-nav > li > a, .header .navbar-nav > .nav-item > .nav-link { position: relative; } .header .navbar-nav > li > a::after, .header .navbar-nav > .nav-item > .nav-link::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: .2rem; height: 2px; background: var(--rv-gold); transition: left .3s var(--rv-ease), right .3s var(--rv-ease); } .header .navbar-nav > li > a:hover::after, .header .navbar-nav > .nav-item > .nav-link:hover::after { left: 1rem; right: 1rem; } /* dropdowns fade/slide in instead of popping (animation only — hidden menus keep display:none, so the mega-menu never widens the page) */ @keyframes rv-drop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (min-width: 992px) { .header .dropdown-menu.show, .header .dropdown:hover > .dropdown-menu { animation: rv-drop .25s var(--rv-ease); } } /* owl nav + back-to-top */ .owl-nav button { transition: transform .25s var(--rv-ease), box-shadow .25s, background-color .25s !important; } .owl-nav button:hover { transform: translateY(-2px) scale(1.06) !important; box-shadow: 0 10px 22px -10px rgba(23,35,76,.45) !important; } #return-to-top { transition: opacity .3s, transform .3s var(--rv-ease), background-color .3s; } #return-to-top:hover { transform: translateY(-4px); } /* social + footer links */ .social-links a, .company-links__media a, .social-media a { display: inline-block; transition: transform .25s var(--rv-ease); } .social-links a:hover, .company-links__media a:hover, .social-media a:hover { transform: translateY(-3px) scale(1.1); } .footer a { transition: color .25s, padding-left .25s var(--rv-ease); } .footer ul li a:hover { color: var(--rv-gold) !important; padding-left: 4px; } /* click ripple */ .rv-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 5; background: rgba(255, 255, 255, .45); transform: scale(0); animation: rv-ripple .6s var(--rv-ease) forwards; } .rv-ripple.rv-ripple-dark { background: rgba(23, 35, 76, .14); } @keyframes rv-ripple { to { transform: scale(2.6); opacity: 0; } } /* keyboard focus */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--rv-accent); outline-offset: 3px; border-radius: 4px; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .rv-js .rv, .rv-js img.rv-img { opacity: 1 !important; transform: none !important; transition: none !important; } .rv-card, .rv-card img, .btn, .owl-nav button, .section-whyus .circle .inside { transition: none !important; } .rv-card:hover, .rv-card:hover img:not(.overlay-img), .btn:hover { transform: none !important; } .rv-ripple, .rv-progress { display: none !important; } } /* contact page: decorative trekkers peek in from the edges without widening the page */ .contact-sec { overflow-x: clip; } /* why-us: the giant "NEPAL" watermark is wider than small phones — keep it inside its section */ .section-whyus { overflow-x: clip; } /* search page: select2 boxes have an inline fixed width */ .select2-container { width: 100% !important; max-width: 100%; } /* ---------- Region page (template rewritten, see region-detail.blade.php) ---------- */ .rv-region { padding: 3rem 0 10rem; background: var(--rv-bg); } .rv-hero { position: relative; min-height: 32rem; border-radius: 16px; overflow: hidden; background: var(--rv-navy) center / cover no-repeat; display: flex; align-items: flex-end; padding: 3rem 3.5rem; margin-bottom: 3.5rem; box-shadow: var(--rv-shadow); } .rv-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,35,76,0) 30%, rgba(23,35,76,.75)); } .rv-hero h1 { position: relative; color: #fff; font: 700 clamp(3rem, 5vw, 5.2rem)/1.1 "Inter", sans-serif; margin: 0; } .rv-region-overview { font-family: "Frank Ruhl Libre", serif; font-size: 1.8rem; line-height: 1.75; color: #3d4856; max-width: 90rem; } .rv-region-heading { font: 700 3rem/1.2 "Inter", sans-serif; color: var(--rv-navy); margin: 4rem 0 2.5rem; } .rv-trip-grid { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); } .rv-trip-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--rv-radius); overflow: hidden; box-shadow: var(--rv-shadow); color: inherit; text-decoration: none !important; transition: transform .45s var(--rv-ease), box-shadow .45s var(--rv-ease); } .rv-trip-card:hover { transform: translateY(-6px); box-shadow: var(--rv-shadow-lg); } .rv-trip-card figure { margin: 0; aspect-ratio: 270 / 190; overflow: hidden; } .rv-trip-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--rv-ease); } .rv-trip-card:hover figure img { transform: scale(1.06); } .rv-trip-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.8rem 2rem 2.2rem; flex: 1; } .rv-trip-body h3 { font: 700 2rem/1.3 "Inter", sans-serif; color: #3d4856; margin: 0; min-height: 5.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; } .rv-trip-card:hover h3 { color: var(--rv-blue); } .rv-trip-meta { display: flex; justify-content: space-between; align-items: center; font: 400 1.5rem "Frank Ruhl Libre", serif; color: #70787f; } .rv-stars { color: var(--rv-gold); letter-spacing: .1em; } .rv-trip-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: auto; } .rv-price { font-family: "Inter", sans-serif; } .rv-price del { color: #8c959c; font-size: 1.4rem; margin-right: .4rem; } .rv-price strong { color: var(--rv-navy); font-size: 1.9rem; } .rv-difficulty { min-width: 11rem; text-align: right; } .rv-difficulty span { display: block; font: 600 1.2rem "Inter", sans-serif; color: #70787f; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .05em; } .rv-difficulty i { display: block; height: .7rem; border-radius: 99px; background: #e3e8ef; position: relative; overflow: hidden; } .rv-difficulty i::after { content: ""; position: absolute; inset: 0; width: calc(var(--lvl) / 7 * 100%); border-radius: inherit; background: linear-gradient(90deg, #5cc27a, var(--rv-gold) 55%, #e2573b); background-size: calc(700% / var(--lvl)) 100%; } .rv-trip-cta { font: 600 1.5rem "Inter", sans-serif; color: var(--rv-accent); } .rv-trip-cta i { display: inline-block; transition: transform .3s var(--rv-ease); } .rv-trip-card:hover .rv-trip-cta i { transform: translateX(6px); } /* long unbroken strings (emails, URLs, hyphen-less words) must wrap instead of widening the page */ .section-bottom-note h4, .section-bottom-note p, .content, .rv-region-overview, .section-blogdetail, .section-description, .address-info__list, .contact-sec { overflow-wrap: anywhere; } /* search page: the two sort boxes are flex children; let them shrink below select2 min-content */ .package-list .col6 { min-width: 0; flex: 1 1 0; } /* destination "call our experts" number: the yellow highlight had no left offset, so it started mid-text and ran past the viewport on phones */ .section-bottom-note h4::before { left: 0; }