/* ============================================================== FORT JADHAVGADH — SHARED NAVBAR Fixed navbar: mobile hamburger + desktop dropdowns Extracted from index.html so it can be reused on every page. Requires 'Montserrat' font (and 'Tiro Devanagari Sanskrit' for the Hindi text swap) to already be loaded on the page, e.g. in : ============================================================== */ /* ---- wrapper: positions both nav and panel ---- */ .fjnav-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 120; } /* ---- main nav bar ---- */ .fjnav { display: flex; align-items: center; gap: 18px; padding: 22px 40px; background: transparent; position: relative; /* so the panel can be positioned against it */ } .fjnav .logolink { flex: none; line-height: 0; } .fjnav .logo { height: 48px; width: auto; display: block; } /* ---- desktop capsule (unchanged look) ---- */ .navcapsule { position: relative; display: flex; align-items: center; gap: 11px; margin: 0 auto; padding: 13px 22px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(180deg, rgba(34, 14, 4, .92), rgba(14, 5, 0, .94)) padding-box, linear-gradient(90deg, #5c3c1e, #a9823f, #4a2f16, #a9823f, #5c3c1e) border-box; background-size: auto, 320% 100%; backdrop-filter: blur(12px); font: 500 11.5px 'Montserrat', sans-serif; letter-spacing: .02em; color: #eaddc6; white-space: nowrap; animation: navborder 18s linear infinite; box-shadow: 0 14px 34px rgba(20, 6, 0, .45); } .navcapsule::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .25; background: repeating-linear-gradient(135deg, rgba(230, 199, 141, .035) 0 1px, transparent 1px 12px); animation: navdrift 26s linear infinite; } .navcapsule::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 160% at 50% -30%, rgba(230, 199, 141, .06), transparent 60%); } .navcapsule>* { position: relative; z-index: 1; } @keyframes navborder { 0% { background-position: 0 0, 0% 0; } 100% { background-position: 0 0, 320% 0; } } @keyframes navdrift { from { background-position: 0 0; } to { background-position: 64px 0; } } .navcapsule a { color: #eaddc6; text-decoration: none; transition: color .2s; cursor: pointer; } .navcapsule a:hover { color: #fff; } /* ---- diamond separators ---- */ .navsep { width: 4px; height: 4px; background: #aa8453; transform: rotate(45deg); flex: none; } /* ---- desktop dropdowns (Gallery, Royal Accommodation) ---- */ .nvtab { position: relative; } .nvtab>a { cursor: default; } /* invisible bridge that fills the gap between the tab and the dropdown so the cursor never leaves .nvtab's hover area while travelling down to the dropdown (no visual change) */ .nvtab::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max(100%, 260px); height: 16px; background: transparent; z-index: 5; } .nvdd { position: absolute; left: 50%; transform: translateX(-50%) translateY(8px); top: calc(100% + 16px); min-width: 216px; background: rgba(255, 250, 242, .98); backdrop-filter: blur(8px); border: 1px solid rgba(170, 132, 83, .4); box-shadow: 0 26px 54px rgba(20, 6, 0, .42); border-radius: 12px; padding: 9px; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease; z-index: 6; pointer-events: none; /* prevents accidental clicks while hidden */ } .nvtab:hover .nvdd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .nvdd::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fffaf2; border-left: 1px solid rgba(170, 132, 83, .4); border-top: 1px solid rgba(170, 132, 83, .4); } .nvdd a { display: flex; align-items: center; gap: 11px; padding: 11px 16px; font: 500 13px 'Montserrat', sans-serif; color: #3a2418; border-radius: 8px; letter-spacing: .01em; text-decoration: none; } .nvdd a:hover { background: rgba(170, 132, 83, .14); color: #310D00; } .nvdd a i { width: 5px; height: 5px; background: #aa8453; transform: rotate(45deg); flex: none; } /* ---- English/Hindi fade (Offers, Orchid Rewards) ---- */ .swap { display: inline-grid; vertical-align: bottom; /* navbar.js sets an inline `width` on this element equal to the measured TEXT width only (no padding). That math assumes content-box sizing. If the site's global CSS resets everything to border-box, that same inline width gets treated as the element's TOTAL box width instead, so .offpill's own 13px+13px padding gets eaten out of the text's space instead of added around it — which is exactly why "OFFERS" was spilling past the golden pill. Pinning content-box here keeps the JS math correct regardless of any global reset. */ box-sizing: content-box; } /* Chat 07 - Claude start Hover-stability hardening: the host site's global stylesheet has `span, a, a:hover { display: inline-block; ... }`. Because `a:hover` counts as one pseudo-class + one element in specificity, it actually OUTRANKS our plain `.swap { display: inline-grid }` class rule the moment the item is hovered — so the browser silently swapped this element from inline-grid back to inline-block on hover, which broke the `grid-area: 1/1` stacking of the EN/HI spans (they popped apart side-by-side instead of overlapping), pushing every item after it in the capsule left/right. Pinning display (and box-sizing, for the same reason) with !important across every interaction state closes that off regardless of what the host page's global CSS does. */ .navcapsule a.swap, .navcapsule a.swap:hover, .navcapsule a.swap:focus, .navcapsule a.swap:active { display: inline-grid !important; box-sizing: content-box !important; } /* The same specificity trap lets `.navcapsule a:hover { color: #fff }` below win over `.offpill`'s own black text on hover (a:hover there is more specific than the plain .offpill class). Offers should always stay black on its gold pill, hovered or not. */ .navcapsule a.offpill, .navcapsule a.offpill:hover, .navcapsule a.offpill:focus, .navcapsule a.offpill:active { color: #3a1405 !important; } /* Chat 07 - Claude end */ .swap>span { grid-area: 1/1; white-space: nowrap; } .swap .en { animation: sw1 6s infinite; } .swap .hi { animation: sw2 6s infinite; } @keyframes sw1 { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } } @keyframes sw2 { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } } /* ---- Offers pill ---- */ .offpill { background: linear-gradient(90deg, #e6c78d, #aa8453); color: #3a1405; padding: 6px 13px; border-radius: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } /* ---- Orchid Rewards badge ---- */ .rew { position: relative; } .rewbadge { position: absolute; top: -15px; right: -14px; background: linear-gradient(90deg, #d94b3a, #b02a1e); color: #fff; font: 700 8px 'Montserrat', sans-serif; letter-spacing: .04em; padding: 3px 6px; border-radius: 9px; white-space: nowrap; box-shadow: 0 4px 10px rgba(176, 42, 30, .5); } /* ---- hamburger (mobile/tablet) ---- */ .navburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; margin-left: auto; padding: 6px; background: none; border: none; } .navburger span { width: 26px; height: 2px; background: #f4dcae; transition: .3s; display: block; } /* ---- mobile panel (child of .fjnav, positioned absolutely) ---- */ .navpanel { display: none; position: absolute; top: 100%; left: 12px; right: 12px; background: linear-gradient(180deg, #2a1206, #160700); border: 1px solid rgba(230, 199, 141, .3); border-radius: 14px; padding: 8px 0; z-index: 119; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); max-height: 78vh; overflow: auto; margin-top: 6px; } .navpanel a { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; color: #eaddc6; text-decoration: none; font: 500 15px 'Montserrat', sans-serif; border-bottom: 1px solid rgba(230, 199, 141, .1); } .navpanel a .sub { font-size: 13px; color: #c9b48f; } .navpanel details summary { list-style: none; cursor: pointer; padding: 14px 22px; color: #eaddc6; font: 500 15px 'Montserrat', sans-serif; border-bottom: 1px solid rgba(230, 199, 141, .1); display: flex; justify-content: space-between; align-items: center; } .navpanel details summary::-webkit-details-marker { display: none; } .navpanel details a { padding-left: 40px; font-size: 14px; background: rgba(0, 0, 0, .2); } /* ---- hide checkbox visually, use it only as a toggle ---- */ .navtoggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } /* ---- show/hide panel via checkbox ---- */ #navtoggle:checked~.navpanel { display: block; } /* ---- hamburger animation when checked ---- */ #navtoggle:checked~.navburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #navtoggle:checked~.navburger span:nth-child(2) { opacity: 0; } #navtoggle:checked~.navburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- responsive: hide capsule, show burger + panel ---- */ @media(max-width:1080px) { .navcapsule { display: none !important; } .navburger { display: flex; } .fjnav { padding: 16px 20px; } /* ensure panel stays within the nav's width */ .fjnav-wrap { padding-top: 32px; position: absolute; /* keep it above hero */; } .fjnav { position: relative; } .navpanel { left: 12px; right: 12px; top: 100%; margin-top: 6px; } } @media(max-width:480px) { .fjnav { padding: 12px 14px; } .fjnav .logo { height: 38px; } .navpanel { left: 8px; right: 8px; top: 100%; } .navpanel a, .navpanel details summary { font-size: 14px; padding: 12px 16px; } }