/* ========================================================================== StayHub Pakistan — Global Design System Palette: Ink Navy / Warm Paper / Marigold / Pine / Muted Gold Type: Fraunces (display) + Work Sans (body) + IBM Plex Mono (utility/data) Supports light (default) and dark themes via [data-theme="dark"] on . ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"); :root { /* ---- Color tokens (light theme, default) ---- */ --ink: #0f2a3d; /* headings / primary dark color */ --ink-2: #17415c; --paper: #faf6ef; /* page background */ --paper-2: #f1eada; /* section banding */ --marigold: #e08d3c; --marigold-2: #c96f26; --pine: #2f5233; --gold-line: #c9a227; --charcoal: #1c1c1c; /* body text */ --charcoal-60: rgba(28, 28, 28, 0.62); --white: #ffffff; /* card surfaces */ --line: rgba(15, 42, 61, 0.12); --header-scrolled-bg: rgba(250, 246, 239, 0.92); --shadow-soft: 0 18px 40px rgba(15, 42, 61, 0.06); --shadow-strong: 0 24px 48px rgba(15, 42, 61, 0.14); --ph-bg: linear-gradient(135deg, #f1eada, #e7dcc4); --mobile-nav-bg: rgba(250, 246, 239, 0.94); /* mobile nav panel surface */ --font-display: "Fraunces", serif; --font-body: "Work Sans", sans-serif; --font-mono: "IBM Plex Mono", monospace; --maxw: 1240px; --gutter: clamp(20px, 3vw, 64px); --radius: 4px; --radius-lg: 10px; --ease: cubic-bezier(0.22, 0.68, 0, 1); --ease-2: cubic-bezier(0.16, 1, 0.3, 1); --fast: 0.25s; --slow: 0.6s; } [data-theme="dark"] { --ink: #f4efe4; --ink-2: #e7dcc4; --paper: #0e1620; --paper-2: #141f2b; --marigold: #efa05c; --marigold-2: #e08d3c; --pine: #6fa579; --gold-line: #d9b94a; --charcoal: #e9e4d8; --charcoal-60: rgba(233, 228, 216, 0.62); --white: #172230; --line: rgba(244, 239, 228, 0.12); --header-scrolled-bg: rgba(14, 22, 32, 0.88); --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.28); --shadow-strong: 0 24px 56px rgba(0, 0, 0, 0.4); --ph-bg: linear-gradient(135deg, #141f2b, #1c2a3a); --mobile-nav-bg: rgba(23, 34, 48, 0.94); /* mobile nav panel surface */ } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; max-width: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--paper); color: var(--charcoal); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background var(--slow) var(--ease), color var(--slow) var(--ease); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.12; font-weight: 600; color: var(--ink); } p { margin: 0; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: 1rem; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* ========================================================= LARGE DESKTOP CONTAINER SYSTEM Keeps content balanced on wide monitors ========================================================= */ @media (min-width: 1400px) { .container { max-width: 1320px; } } @media (min-width: 1600px) { .container { max-width: 1440px; } } @media (min-width: 1920px) { .container { max-width: 1600px; } } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marigold-2); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--marigold-2); display: inline-block; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-size: 0.95rem; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #f3d11b, #f3d11b); color: #0f2a3d !important; } .btn-primary:hover { background: #017282 !important; color: goldenrod !important; } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px); } .btn-whatsapp { background: #25d366; color: #fff; } .btn-whatsapp:hover { background: #1ebe5a; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(37, 211, 102, 0.35); } .btn-ghost-light { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); } .btn-ghost-light:hover { background: #fff; color: black; transform: translateY(-3px); } .btn-block { width: 100%; } .hero-booking { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; min-width: 125px; background: linear-gradient(135deg, #f3d11b, #f3d11b); color: #0f2a3d !important; font-family: var(--font-body, "Poppins", sans-serif); font-size: 18px; font-weight: 900; letter-spacing: 0.3px; border: none; border-radius: 8px; box-shadow: 0 6px 18px rgba(217, 154, 36, 0.28); text-decoration: none; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } /* Subtle shine effect */ .hero-booking::before { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent ); transform: skewX(-20deg); transition: left 0.6s ease; } /* Hover */ .hero-booking:hover { color: #0f2a3d !important; transform: translateY(-2px); background: linear-gradient(135deg, #c98612, #e5a52c); box-shadow: 0 10px 25px rgba(217, 154, 36, 0.42); } .hero-booking:hover::before { left: 140%; } /* Click */ .hero-booking:active { transform: translateY(0) scale(0.97); } .hero-booking { display: none; } @media (max-width: 980px) { .hero-booking { display: inline-flex; /* left: 30%; */ } .hideable { display: none; } } /* ---- Placeholder image system (works with or without real photos) ---- */ .ph-image { position: relative; overflow: hidden; background: var(--ph-bg); display: block; } .ph-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-2); } .ph-image.ph-empty::after { content: attr(data-label); position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--charcoal-60); border: 1.5px dashed var(--line); border-radius: 8px; padding: 10px; } .ph-image.ph-empty::before { content: "🖼"; position: absolute; top: 16px; left: 16px; font-size: 1.3rem; opacity: 0.5; z-index: 1; } /* .nav-booking { padding: 12px 15px; line-height: 17px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2rem; } */ /* ================================ Attractive Navbar Booking Button ================================ */ .nav-booking { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; min-width: 125px; background: linear-gradient(135deg, #d99a24, #f0b83f); color: #0f2a3d !important; font-family: var(--font-body, "Poppins", sans-serif); font-size: 18px; font-weight: 900; letter-spacing: 0.3px; border: none; border-radius: 8px; box-shadow: 0 6px 18px rgba(217, 154, 36, 0.28); text-decoration: none; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } /* Subtle shine effect */ .nav-booking::before { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent ); transform: skewX(-20deg); transition: left 0.6s ease; } /* Hover */ .nav-booking:hover { color: #0f2a3d !important; transform: translateY(-2px); background: linear-gradient(135deg, #c98612, #e5a52c); box-shadow: 0 10px 25px rgba(217, 154, 36, 0.42); } .nav-booking:hover::before { left: 140%; } /* Click */ .nav-booking:active { transform: translateY(0) scale(0.97); } /* ========================================================================== Theme toggle ========================================================================== */ .theme-toggle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); flex-shrink: 0; } .site-header.is-scrolled .theme-toggle { color: var(--ink); border-color: var(--line); background: transparent; } .theme-toggle:hover { transform: rotate(18deg); border-color: var(--marigold); } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* ========================================================================== Site Header / Navigation ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 0; transition: background var(--fast) var(--ease), padding var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-header.is-scrolled { background: var(--header-scrolled-bg); backdrop-filter: blur(10px); padding: 12px 0; box-shadow: 0 1px 0 var(--line); } /* While the mobile nav is open, the header must NOT have a backdrop-filter. backdrop-filter (like transform/filter) creates a new containing block for position:fixed descendants — since .nav-links/.nav-overlay live inside .site-header, that containing block would shrink them down to the header's own box instead of the full viewport, cutting the panel off after a few scrolled pixels. Turning it off only while open keeps the header untouched the rest of the time. */ .site-header.nav-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; } .brand img { display: block; width: 42px; height: 42px; object-fit: contain; } .brand span { display: inline-block; font-family: "Poppins", "Segoe UI", sans-serif; font-size: 20px; font-weight: 700; line-height: 1; color: #ffffff; letter-spacing: -0.3px; white-space: nowrap; } #siteHeader.is-scrolled .brand span { color: #017282; } /* Tablet */ @media (max-width: 991px) { .brand img { width: 110px; height: 62px; transform: scale(1.1); } } /* Mobile */ @media (max-width: 767px) { .brand img { width: 70px; height: 55px; transform: scale(1.08); } } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-link { font-size: 0.2rem; font-weight: 500; color: var(--ink); position: relative; padding: 4px 0; transition: color var(--fast) var(--ease); } /* Laptop / Desktop only */ @media (min-width: 981px) { .nav-links > li { list-style: none; } .nav-links > li::marker { content: ""; } } .nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--marigold); transition: right var(--fast) var(--ease); } .nav-link:not(.dropdown-toggle):hover::after, .nav-link.active:not(.dropdown-toggle)::after { right: 0; } .nav-link.active { font-weight: 600; } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; background: none; border: none; width: 34px; height: 26px; position: relative; z-index: 1100; } .nav-toggle span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: all var(--fast) var(--ease); } .site-header:not(.is-scrolled) .nav-toggle { color: #fff; } .site-header.is-scrolled .nav-toggle { color: var(--ink); } .nav-toggle span:nth-child(1) { top: 2px; } .nav-toggle span:nth-child(2) { top: 12px; } .nav-toggle span:nth-child(3) { top: 22px; } /* .nav-toggle.is-open span:nth-child(1) { top: 12px; transform: rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { top: 12px; transform: rotate(-45deg); } */ /* ---- Mobile-only nav elements: inert/hidden at desktop widths ---- These rules must stay ABOVE the max-width:980px block below so the media-query overrides win once the viewport actually goes mobile. ---- */ .mobile-nav-close, .mobile-nav-brand-block, .mobile-nav-footer, .nav-overlay { display: none; } @media (max-width: 1400px) { .nav-links .nav-link { order: 2; color: #e08d3c !important; font-size: 1.25rem; font-weight: 800; padding: 3px 0; } /* Dark Mode */ [data-theme="dark"] .nav-links .nav-link { color: #fff !important; } } /* ========================================================= LARGE SCREENS FIX (1401px aur upar — 24"/27" monitors) Base .nav-link ka font-size sirf 0.2rem hai jo ke upar wale max-width:1400px block mein override hota hai. Us block ke bahar (yani >1400px) links wapis tiny reh jaate the — isliye ye naya block wahi visual (color/size/weight) yahan bhi laga raha hai taake large screens pe bhi nav sahi tareeqe se dikhe, sath hi bade screens ke liye container ko thora aram-dah margin/padding diya gaya hai taake stretched na lage. ========================================================= */ @media (min-width: 1401px) { .nav-links .nav-link { color: #e08d3c !important; font-size: 1.25rem; font-weight: 800; padding: 3px 0; } [data-theme="dark"] .nav-links .nav-link { color: #fff !important; } .site-header .container { max-width: 1320px; margin: 0 auto; padding: 0 32px; } .nav-links { gap: 34px; } } /* Wide desktop / large monitors (~1600px+) */ @media (min-width: 1600px) { .site-header .container { max-width: 1480px; padding: 0 40px; } .nav-links { gap: 40px; } .nav-cta { gap: 18px; } } /* 24"-27" screens (~1920px - 2560px) */ @media (min-width: 1921px) { .site-header .container { max-width: 1680px; padding: 0 48px; } .nav-links { gap: 46px; } .nav-link { font-size: 1.35rem; } .nav-cta { gap: 22px; } } @media (max-width: 980px) { /* ---- Backdrop overlay behind the sliding panel ---- */ .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(8, 14, 20, 0.5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease); z-index: 1050; } .nav-overlay.is-open { opacity: 1; visibility: visible; } /* ---- Sliding panel ---- */ .nav-links { position: fixed; top: 0; right: 0; height: 100%; width: min(320px, 84vw); max-width: 320px; background: var(--mobile-nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0, 0, 0, 0.3); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0 24px 24px; gap: 18px; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); z-index: 1100; overflow-y: auto; } .nav-links.is-open { transform: translateX(0); } .nav-links .nav-link { order: 2; color: var(--ink) !important; font-size: 1.05rem; font-weight: 600; padding: 3px 0; } /* Flex order asal mein
  • par lagna chahiye, par nahi — ye Home/About/Services/Cities/Contact/Blog sab ko wapis ek hi group mein, logo ke neeche, sahi tarteeb mein le aata hai */ .nav-links > li { order: 2; } .nav-links .nav-link::after { background: var(--marigold); } /* Theme toggle: pinned top-left corner of the panel */ .nav-links .theme-toggle-mobile { position: absolute; top: 18px; left: 24px; margin-top: 0; color: var(--ink); border-color: var(--line); background: var(--paper-2); } .site-header:not(.is-scrolled) .nav-links .theme-toggle-mobile { color: var(--ink); } .nav-links .theme-toggle-mobile:hover { background: var(--marigold); border-color: var(--marigold); color: #fff; transform: rotate(90deg); } /* ========================================================= SERVICES DROPDOWN ========================================================= */ .nav-dropdown { position: relative; height: 100%; } /* Services link */ .nav-dropdown-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; } /* Small arrow */ .dropdown-arrow { display: inline-block; font-size: 15px; line-height: 1; transition: transform 0.45s ease; } /* Rotate arrow on hover */ .nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); } /* ========================================================= DROPDOWN BOX ========================================================= */ .services-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-22px); min-width: 210px; padding: 10px 0; background: #ffffff; border-radius: 8px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; pointer-events: none; /* Top to bottom opening */ clip-path: inset(0 0 100% 0); transition: opacity 0.45s ease, transform 0.55s ease, clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.65s; } /* ========================================================= OPEN DROPDOWN ========================================================= */ .nav-dropdown:hover .services-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); clip-path: inset(0 0 0 0); transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } /* ========================================================= DROPDOWN ITEMS ========================================================= */ .services-dropdown a { position: relative; display: flex; align-items: center; padding: 12px 22px; color: #001a57; text-decoration: none; font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(-10px); transition: color 0.25s ease, background 0.25s ease, opacity 0.45s ease, transform 0.45s ease; } /* Items appear one by one */ .nav-dropdown:hover .services-dropdown a { opacity: 1; transform: translateY(0); } .nav-dropdown:hover .services-dropdown a:nth-child(1) { transition-delay: 0.08s; } .nav-dropdown:hover .services-dropdown a:nth-child(2) { transition-delay: 0.14s; } .nav-dropdown:hover .services-dropdown a:nth-child(3) { transition-delay: 0.2s; } .nav-dropdown:hover .services-dropdown a:nth-child(4) { transition-delay: 0.26s; } /* Hover item */ .services-dropdown a:hover { color: #c2850a; background: rgba(194, 133, 10, 0.07); } /* Small animated line */ .services-dropdown a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 0; height: 2px; background: #c2850a; transform: translateY(-50%); transition: width 0.3s ease; } .services-dropdown a:hover::before { width: 5px; } /* Close button: pinned top-right corner of the panel */ .mobile-nav-close { display: flex; position: absolute; top: 18px; right: 24px; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); padding: 0; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), color var(--fast) var(--ease); } .mobile-nav-close:hover { background: var(--marigold); border-color: var(--marigold); color: #fff; transform: rotate(90deg); } .mobile-nav-close svg { width: 16px; height: 16px; } /* Logo + brand name block, centered at the top of the panel */ .mobile-nav-brand-block { display: flex; flex-direction: column; align-items: center; gap: 10px; order: 1; padding-top: 38px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .mobile-nav-logo { width: 50px; height: 50px; border-radius: 50%; background: var(--marigold); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; } .mobile-nav-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); } /* Location + phone, pinned to the bottom of the panel */ .mobile-nav-footer { display: flex; flex-direction: column; gap: 14px; order: 3; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); } .mobile-nav-info-row { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; font-weight: 500; color: var(--charcoal-60); } .mni-icon { font-size: 1rem; flex-shrink: 0; } .nav-cta { display: none; } .nav-toggle { display: block; } .nav-toggle.is-open { display: none; } } /* ========================================================= 981px - 1400px FIX (hamburger band ho chuka, lekin screen abhi utni chori nahi ke sab kuch full desktop size mein fit ho). Is range mein logo (110x62 se), bold 1.25rem nav-links, aur booking button — teeno apni "full" size mein the, jo tang container mein overlap kar rahe the. Yahan sab ko thora chota kiya gaya hai taake logo, nav-links aur booking button aik dosray par na chaden aur clean single-line mein rahein. ========================================================= */ @media (min-width: 981px) and (max-width: 1199px) { .site-header .container { gap: 12px; } .brand img { width: 42px; height: 42px; transform: none; } .brand span { font-size: 16px; } .nav-links { gap: 30px; } .nav-links .nav-link { font-size: 0.92rem !important; padding: 2px 0; } .nav-booking { padding: 8px 14px; min-width: 100px; font-size: 14px; } .theme-toggle { width: 36px; height: 36px; } } @media (min-width: 1200px) and (max-width: 1400px) { .site-header .container { gap: 18px; } .nav-links { gap: 20px; } .nav-links .nav-link { font-size: 1.05rem !important; } .nav-booking { padding: 9px 16px; font-size: 16px; min-width: 115px; } } /* ===== NAV ITEM WRAPPER ===== */ .nav-item.dropdown { position: relative; } .dropdown-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; } .dropdown-arrow { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nav-item.dropdown:hover .dropdown-arrow { transform: rotate(180deg); } /* Invisible bridge: mouse ko link se menu tak jaate waqt "gap" mein hover kabhi nahi tootega — yehi flicker/early-close fix karta hai */ .nav-item.dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } /* ===== DROPDOWN MENU (Desktop / Laptop) ===== */ .dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-10px); min-width: 200px; background: var(--white); border-radius: 12px; box-shadow: var(--shadow-strong); padding: 10px; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s; z-index: 999; } .dropdown-menu::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--white); border-radius: 2px; } .nav-item.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .dropdown-menu li { opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease; } .nav-item.dropdown:hover .dropdown-menu li, .nav-item.dropdown.active .dropdown-menu li { opacity: 1; transform: translateY(0); } .nav-item.dropdown:hover .dropdown-menu li:nth-child(1), .nav-item.dropdown.active .dropdown-menu li:nth-child(1) { transition-delay: 0.05s; } .nav-item.dropdown:hover .dropdown-menu li:nth-child(2), .nav-item.dropdown.active .dropdown-menu li:nth-child(2) { transition-delay: 0.1s; } .nav-item.dropdown:hover .dropdown-menu li:nth-child(3), .nav-item.dropdown.active .dropdown-menu li:nth-child(3) { transition-delay: 0.15s; } .nav-item.dropdown:hover .dropdown-menu li:nth-child(4), .nav-item.dropdown.active .dropdown-menu li:nth-child(4) { transition-delay: 0.2s; } .dropdown-link { display: block; padding: 10px 16px; border-radius: 8px; color: var(--charcoal); font-size: 14px; font-weight: 500; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .dropdown-link:hover { background: color-mix(in srgb, var(--marigold) 12%, transparent); color: var(--marigold-2); padding-left: 22px; } /* ===== MOBILE — same 980px breakpoint jahan aapka slide-out hamburger panel khulta hai, taake dono hamesha match karein ===== */ @media (max-width: 980px) { .nav-item.dropdown::after { display: none; /* bridge sirf desktop hover ke liye hai */ } .nav-item.dropdown { order: 2; } .dropdown-toggle { justify-content: space-between; width: 100%; } .nav-item.dropdown.active .dropdown-arrow { transform: rotate(180deg); } .dropdown-menu { position: static; transform: none; opacity: 1; visibility: hidden; pointer-events: none; box-shadow: none; border-radius: 8px; background: #e08d3c; max-height: 0; padding: 0; margin-top: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s ease, margin 0.3s ease; } .dropdown-menu::before { display: none; } .nav-item.dropdown.active .dropdown-menu { visibility: visible; pointer-events: auto; max-height: 300px; padding: 8px; margin-top: 10px; transform: none; } .dropdown-menu li { opacity: 1; transform: none; } .dropdown-link { color: var(--ink); } } .dropdown-menu::before { display: none; } .nav-item.dropdown.active .dropdown-menu { visibility: visible; pointer-events: auto; max-height: 300px; padding: 8px; } .dropdown-menu li { opacity: 1; transform: none; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--ink); color: rgba(250, 246, 239, 0.72); padding: 72px 0 28px; transition: background var(--slow) var(--ease); } [data-theme="dark"] .site-footer { background: #090f16; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 28px; padding-bottom: 48px; border-bottom: 1px solid rgba(250, 246, 239, 0.12); } .footer-brand .brand { color: #fff; top: -10rem; height: 10px; } .footer-brand .brand img { margin-top: 100%; } .footer-brand p { position: relative; max-width: 320px; display: flex; font-size: 0.92rem; color: rgba(250, 246, 239, 0.6); top: 5rem !important; } .footer-grid .footer-col { /* background: red; */ padding: 10px; display: flex; gap: 2rem; flex-direction: column; text-align: center; } /* Footer Explore heading - Dark/Light mode */ .footer-col h4 { color: var(--text-primary); transition: color 0.3s ease; font-size: 22px; } /* Light mode */ body.light-mode .footer-col h4 { color: #0f2a3d; } /* Dark mode */ body.dark-mode .footer-col h4 { color: #ffffff; } .footer-brand .footer-col h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; margin-bottom: 18px; } .footer-col li { margin-bottom: 12px; } .footer-content .footer-col ul { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .footer-col a { font-size: 0.92rem; color: rgba(250, 246, 239, 0.62); transition: color var(--fast); } .footer-col a:hover { color: var(--marigold); } .footer-bottom { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 24px; font-size: 0.82rem; color: rgba(250, 246, 239, 0.45); } .footer-social { display: flex; gap: 14px; } .footer-social a { width: 36px; height: 36px; border: 1px solid rgba(250, 246, 239, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color var(--fast), background var(--fast), transform var(--fast); } .footer-social a:hover { border-color: var(--marigold); background: var(--marigold); transform: translateY(-3px); } .footer-brand .brand img { /* background: red; */ width: 150px; height: 200px; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .footer-content { display: flex; align-items: center; justify-content: center; flex-direction: column; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } /* ========================================================================== Floating WhatsApp button ========================================================================== */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); transition: transform var(--fast) var(--ease); animation: pulseWa 2.6s infinite; } .whatsapp-float:hover { transform: scale(1.1); animation-play-state: paused; } .whatsapp-float svg { width: 28px; height: 28px; } @keyframes pulseWa { 0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); } 50% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0.12); } } /* ========================================================================== Scroll reveal utility ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-2), transform 0.8s var(--ease-2); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal="left"] { transform: translateX(-36px); } [data-reveal="left"].is-visible { transform: translateX(0); } [data-reveal="right"] { transform: translateX(36px); } [data-reveal="right"].is-visible { transform: translateX(0); } [data-reveal="scale"] { transform: scale(0.92); } [data-reveal="scale"].is-visible { transform: scale(1); } [data-reveal-delay="1"] { transition-delay: 0.1s; } [data-reveal-delay="2"] { transition-delay: 0.2s; } [data-reveal-delay="3"] { transition-delay: 0.3s; } [data-reveal-delay="4"] { transition-delay: 0.4s; } [data-reveal-delay="5"] { transition-delay: 0.5s; } [data-reveal-delay="6"] { transition-delay: 0.6s; } /* ========================================================================== Shared section rhythm ========================================================================== */ .section { padding: 108px 0; } @media (min-width: 1600px) { .section { padding: 120px 0; } } @media (min-width: 1920px) { .section { padding: 132px 0; } } .section-alt { background: var(--paper-2); } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-top: 14px; } .section-head p { margin-top: 16px; color: var(--charcoal-60); font-size: 1.05rem; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .eyebrow::before { display: none; }