.baghban-header { --header-ink: var(--foreground); --header-green: var(--foreground); --header-accent: var(--primary); --header-gold: var(--primary); /* Brand lockup colours: keep the wordmark aligned with the light header surface. */ --wordmark-color: var(--foreground); --wordmark-label-color: var(--text-muted); position: fixed; inset: 0 0 auto; z-index: 100; width: 100%; } .baghban-header__bar { width: 100%; max-width: 100vw; height: 27vh; margin: 0 auto; padding: 20px 20px; display: flex; align-items: center; gap: 28px; background: var(--card); border: 1px solid transparent; border-top: 0; color: var(--header-ink); transition: max-width .3s ease, height .3s ease, border-color .3s ease, box-shadow .3s ease, border-radius .3s ease, background .3s ease; } .baghban-header.is-scrolled { padding-top: 10px; } .baghban-header.is-scrolled .baghban-header__bar { max-width: 80vw; height: 88.56px; background: var(--card); border-color: var(--overlay-subtle); border-radius: 6px; box-shadow: 0 14px 40px var(--overlay-subtle); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .baghban-wordmark { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-width: 170px; color: var(--header-green); text-decoration: none; } .baghban-wordmark img { width: 18%; height: 2%; object-fit: contain; } /* Wordmark lockup: grid-stacked name + label. Sizes are fluid so the mark scales with the bar instead of stepping between fixed 18/17/15px steps at breakpoints. */ .baghban-wordmark > span { display: grid; justify-content: center; align-items: center; justify-items: center; color: var(--wordmark-color, var(--foreground)); font: 600 clamp(14px, .31vw + 13.5px, 19px)/1 var(--font-subheading); } .baghban-wordmark small { margin-top: .22em; color: var(--wordmark-label-color, var(--text-muted)); font: 600 clamp(6.5px, .14vw + 6px, 8.5px) / 1 var(--font-text); letter-spacing: 0; text-transform: uppercase; padding: 0.5em 0; } /* Scrolled, detail-page, and mobile states retain the same readable brand palette. */ .baghban-header.is-scrolled, body.flat-detail-document .baghban-header, body.property-detail-page .baghban-header { --wordmark-color: var(--ink); --wordmark-label-color: var(--text-muted); } .baghban-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 auto; } .baghban-nav > a, .baghban-property-trigger { position: relative; min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; color: var(--text-muted); border-radius: 5px; font-size: 12px; font-weight: 600; text-decoration: none; transition: color .2s ease, background .2s ease; } .baghban-nav > a::after, .baghban-property-trigger::after { content: ''; position: absolute; right: 13px; bottom: 5px; left: 13px; height: 2px; background: var(--header-accent); transform: scaleX(0); transform-origin: center; transition: transform .2s ease; } .baghban-nav > a:hover, .baghban-nav > a:focus-visible, .baghban-nav > a.is-active, .baghban-property-trigger:hover, .baghban-property-trigger:focus-visible, .baghban-property-trigger.is-active { color: var(--header-green); background: var(--surface-soft); } .baghban-nav > a:hover::after, .baghban-nav > a:focus-visible::after, .baghban-nav > a.is-active::after, .baghban-property-trigger:hover::after, .baghban-property-trigger:focus-visible::after, .baghban-property-trigger.is-active::after { transform: scaleX(1); } .baghban-header__actions { display: flex; align-items: center; gap: 8px; } .baghban-action { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .baghban-action .fa-icon { font-size: 13px; } .baghban-action--secondary { color: var(--header-ink); background: var(--card); border-color: var(--line); } .baghban-action--secondary.is-active { background: var(--surface-soft); border-color: var(--text-muted); } .baghban-action--primary { color: var(--card); background: var(--header-green); border-color: var(--header-green); box-shadow: 0 7px 18px var(--overlay-subtle); } .baghban-action:hover, .baghban-action:focus-visible { transform: translateY(-2px); } .baghban-action--secondary:hover, .baghban-action--secondary:focus-visible { border-color: var(--text-muted); background: var(--surface); } .baghban-action--primary:hover, .baghban-action--primary:focus-visible { background: var(--foreground); box-shadow: 0 10px 24px var(--overlay-medium); } .baghban-wordmark:focus-visible, .baghban-nav a:focus-visible, .baghban-property-trigger:focus-visible, .baghban-mobile-property-trigger:focus-visible, .baghban-action:focus-visible, .baghban-menu-button:focus-visible, .baghban-mobile-menu a:focus-visible { outline: 2px solid var(--header-gold); outline-offset: 3px; } .baghban-menu-button, .baghban-mobile-menu { display: none; } body.baghban-menu-open { overflow: hidden; } .baghban-property-menu { position: relative; display: flex; align-items: center; } .baghban-property-trigger { font-family: var(--font-text); border: 0; background: transparent; cursor: pointer; } .baghban-property-trigger .fa-icon, .baghban-mobile-property-trigger .fa-icon { font-size: 12px; margin-left: 5px; transition: transform .2s ease; } .baghban-property-menu.is-open .baghban-property-trigger .fa-icon, .baghban-property-menu:focus-within .baghban-property-trigger .fa-icon, .baghban-property-menu:hover .baghban-property-trigger .fa-icon { transform: rotate(180deg); } .baghban-property-dropdown { position: absolute; top: calc(100% + 7px); left: 50%; width: 178px; padding: 7px; display: grid; background: var(--surface-glass); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 45px var(--overlay-subtle); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .baghban-property-menu.is-open .baghban-property-dropdown, .baghban-property-menu:focus-within .baghban-property-dropdown, .baghban-property-menu:hover .baghban-property-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,0); } .baghban-property-dropdown a { min-height: 40px; padding: 0 11px; display: flex; align-items: center; border-radius: 4px; color: var(--text-muted); font-size: 11px; font-weight: 600; text-decoration: none; } .baghban-property-dropdown a:hover, .baghban-property-dropdown a:focus-visible, .baghban-property-dropdown a.is-active { color: var(--foreground); background: var(--surface-soft); } .baghban-mobile-property { display: grid; border-bottom: 1px solid var(--line); } .baghban-mobile-property-trigger { width: 100%; min-height: 59px; padding: 0; display: flex; align-items: center; gap: 18px; border: 0; background: transparent; color: var(--header-ink); font: 500 27px/1 var(--font-subheading); text-align: left; cursor: pointer; } .baghban-mobile-property-trigger > span { color: var(--text-muted); font: 700 9px/1 var(--font-text); } .baghban-mobile-property-trigger b { font: inherit; } .baghban-mobile-property-trigger .fa-icon { margin-left: auto; } .baghban-mobile-property-trigger.is-active { color: var(--header-accent); } .baghban-mobile-property-trigger[aria-expanded="true"] .fa-icon { transform: rotate(180deg); } .baghban-mobile-property-links { padding: 0 0 13px 34px; display: grid; } .baghban-mobile-property-links[hidden] { display: none; } .baghban-mobile-property-links a { min-height: 40px; padding: 0 12px; display: flex; align-items: center; border-left: 1px solid var(--line); color: var(--text-muted); font: 600 12px/1 var(--font-text); text-decoration: none; } .baghban-mobile-property-links a:hover, .baghban-mobile-property-links a:focus-visible, .baghban-mobile-property-links a.is-active { color: var(--header-accent); background: var(--surface-soft); } @media (max-width: 980px) { .baghban-header__bar { gap: 14px; height: 18vh; padding: 14px 16px; } .baghban-wordmark { min-width: 152px; } .baghban-nav > a, .baghban-property-trigger { padding-right: 9px; padding-left: 9px; } .baghban-header__actions .baghban-action--secondary { display: none; } } @media (max-width: 900px) { /* The mobile header bar is 70px tall - keep the shared offset variable in sync so page padding matches it. */ :root { --header-height: 70px; } .baghban-header, .baghban-header.is-scrolled { padding: 0; } .baghban-header__bar, .baghban-header.is-scrolled .baghban-header__bar { position: relative; z-index: 2; height: 70px; padding: 0 14px 0 10px; border: 0; border-bottom: 1px solid var(--overlay-subtle); border-radius: 0; box-shadow: none; background: var(--surface-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .baghban-wordmark { min-width: 0; } .baghban-header { --wordmark-color: var(--ink); --wordmark-label-color: var(--text-muted); } .baghban-nav, .baghban-header__actions { display: none; } .baghban-menu-button { width: 44px; height: 44px; margin-left: auto; padding: 0; display: grid; place-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--header-green); cursor: pointer; } .baghban-menu-button span { width: 19px; height: 1.5px; background: currentColor; transition: transform .3s ease; } .baghban-menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); } .baghban-menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); } .baghban-mobile-menu { position: fixed; z-index: 1; top: 70px; left: 0; right: 0; bottom: 0; padding: 26px clamp(20px, 6vw, 34px) max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; overflow-y: auto; background: var(--surface-glass); animation: baghban-menu-in .28s ease both; } .baghban-mobile-menu[hidden] { display: none; } .baghban-mobile-menu__links { display: grid; } .baghban-mobile-menu__links a { min-height: 59px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); color: var(--header-ink); font: 500 27px/1 var(--font-subheading); text-decoration: none; } .baghban-mobile-menu__links a span { color: var(--text-muted); font: 700 9px/1 var(--font-text); } .baghban-mobile-menu__links a.is-active { color: var(--header-accent); } .baghban-mobile-menu__footer { display: grid; gap: 12px; } .baghban-mobile-menu__footer p { margin: 0 0 7px; color: var(--text-muted); font: 500 14px/1.5 var(--font-subheading); } .baghban-mobile-menu__footer .baghban-action { width: 100%; min-height: 50px; } .baghban-mobile-contact { min-height: 44px; display: grid; place-items: center; color: var(--header-ink); font-size: 11px; font-weight: 700; text-decoration: none; } } @media (min-width: 1400px) { .baghban-header__bar { height: 10vh; padding: 20px 40px; } } @media (max-width: 620px) { :root { --header-height: 60px; } .baghban-header__bar { height: 60px; padding: 0 12px; gap: 12px; } .baghban-wordmark img { width: 36px; height: 36px; } } @keyframes baghban-menu-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .baghban-header, .baghban-header *, .baghban-mobile-menu { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Nested Flats navigation */ .baghban-flat-submenu{position:relative}.baghban-flat-submenu>a{justify-content:space-between;gap:12px}.baghban-flat-submenu>a::after{content:'\00203A';font-size:17px;line-height:1;color:var(--text-muted);transition:transform .2s ease}.baghban-flat-submenu__links{position:absolute;top:-7px;left:calc(100% + 7px);width:218px;padding:7px;display:grid;background:var(--surface-glass);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 45px var(--overlay-subtle);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}.baghban-flat-submenu:hover>a::after,.baghban-flat-submenu:focus-within>a::after{transform:translateX(3px)}.baghban-flat-submenu:hover .baghban-flat-submenu__links,.baghban-flat-submenu:focus-within .baghban-flat-submenu__links{opacity:1;visibility:visible;pointer-events:auto;transform:none}.baghban-flat-submenu__links a{min-height:38px;padding:0 11px;display:flex;align-items:center;border-radius:4px;color:var(--text-muted);font-size:11px;font-weight:600;text-decoration:none}.baghban-flat-submenu__links a:hover,.baghban-flat-submenu__links a:focus-visible,.baghban-flat-submenu__links a.is-active{color:var(--foreground);background:var(--surface-soft)}.baghban-mobile-flat-details{border-left:1px solid var(--line);margin-left:0}.baghban-mobile-flat-details summary{min-height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:var(--text-muted);font:600 12px/1 var(--font-text);cursor:pointer;list-style:none}.baghban-mobile-flat-details summary::-webkit-details-marker{display:none}.baghban-mobile-flat-details summary::after{content:'+';font-size:18px;color:var(--text-muted)}.baghban-mobile-flat-details[open] summary::after{content:'\002212'}.baghban-mobile-flat-details__links{display:grid;padding:0 0 7px 14px}.baghban-mobile-flat-details__links a{min-height:36px;border-left:0;font-size:11px}.baghban-mobile-flat-details__links a:hover,.baghban-mobile-flat-details__links a:focus-visible{background:transparent}.baghban-building-submenu{position:relative}.baghban-building-submenu>a{justify-content:space-between;gap:12px}.baghban-building-submenu>a span{display:inline-flex;align-items:baseline;gap:7px}.baghban-building-submenu>a b{color:var(--text-muted);font:700 10px/1 var(--font-text);letter-spacing:.08em}.baghban-building-submenu>a::after{content:'\00203A';font-size:17px;line-height:1;color:var(--text-muted);transition:transform .2s ease}.baghban-building-submenu__links{position:absolute;top:-7px;left:calc(100% + 7px);width:238px;padding:7px;display:grid;background:var(--surface-glass);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 45px var(--overlay-subtle);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}.baghban-building-submenu:hover>a::after,.baghban-building-submenu:focus-within>a::after{transform:translateX(3px)}.baghban-building-submenu.is-flipped .baghban-building-submenu__links{left:auto;right:calc(100% + 7px);transform:translateX(6px)}.baghban-building-submenu.is-flipped>a::after{content:'\002039'}.baghban-building-submenu.is-flipped:hover>a::after,.baghban-building-submenu.is-flipped:focus-within>a::after{transform:translateX(-3px)}.baghban-building-submenu.is-flipped:hover .baghban-building-submenu__links,.baghban-building-submenu.is-flipped:focus-within .baghban-building-submenu__links{transform:none}.baghban-building-submenu:hover .baghban-building-submenu__links,.baghban-building-submenu:focus-within .baghban-building-submenu__links{opacity:1;visibility:visible;pointer-events:auto;transform:none}.baghban-mobile-building-group{display:grid;margin:4px 0 8px}.baghban-mobile-building-group .baghban-mobile-building-link{min-height:38px;padding:0 12px 0 11px;border-left:2px solid var(--header-accent);color:var(--header-green);font:700 11px/1 var(--font-text);letter-spacing:.05em;text-transform:uppercase}.baghban-mobile-building-group .baghban-mobile-building-link span{display:inline-flex;align-items:baseline;gap:7px}.baghban-mobile-building-group .baghban-mobile-building-link b{color:var(--text-muted);font-size:10px;letter-spacing:.08em}.baghban-mobile-building-group>a:not(.baghban-mobile-building-link){padding-left:24px}@media(max-width:900px){.baghban-flat-submenu__links,.baghban-building-submenu__links{display:none}.baghban-mobile-property-links{padding-left:34px}.baghban-mobile-property-links>a[href$="property/flat/"]{display:none}} /* Clean nested navigation indicators and a forgiving hover path. */ .baghban-flat-submenu>a::after,.baghban-building-submenu>a::after{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;line-height:1;color:currentColor;transition:transform .2s ease} .baghban-building-submenu.is-flipped>a::after{content:"\f053"} .baghban-flat-submenu::before,.baghban-building-submenu::before{content:"";position:absolute;top:0;bottom:0;left:100%;width:12px} .baghban-flat-submenu__links,.baghban-building-submenu__links{border-radius:16px;padding:9px;box-shadow:0 20px 48px rgba(20,20,20,.16)} .baghban-property-dropdown{border-radius:16px;padding:9px;box-shadow:0 20px 48px rgba(20,20,20,.16)} .baghban-property-dropdown a,.baghban-flat-submenu__links a,.baghban-building-submenu__links a{border-radius:9px} .baghban-mobile-flat-details summary::after{content:"\f068";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px} .baghban-mobile-flat-details[open] summary::after{content:"\f068"} .baghban-property-menu,.baghban-flat-submenu,.baghban-building-submenu{z-index:2} /* The generated Font Awesome element is the single source of truth for submenu arrows. */ .baghban-flat-submenu>a::after,.baghban-building-submenu>a::after{content:none!important} .baghban-flat-submenu>a>.fa-icon,.baghban-building-submenu>a>.fa-icon{font-size:10px;margin-left:10px;color:currentColor;transition:transform .2s ease} .baghban-flat-submenu:hover>a>.fa-icon,.baghban-flat-submenu:focus-within>a>.fa-icon,.baghban-building-submenu:hover>a>.fa-icon,.baghban-building-submenu:focus-within>a>.fa-icon{transform:translateX(3px)} .baghban-building-submenu.is-flipped>a>.fa-icon{transform:rotate(180deg)} .baghban-building-submenu.is-flipped:hover>a>.fa-icon,.baghban-building-submenu.is-flipped:focus-within>a>.fa-icon{transform:rotate(180deg) translateX(3px)} /* ===================================================================== Properties mega menu - geometry, state and motion --------------------------------------------------------------------- Open/close state is owned by script.js ("Hover-intent mega menu") and reflected as .is-open on the wrapper of each level: .baghban-property-menu level 1 (Properties) .baghban-flat-submenu level 2 (Flats) .baghban-building-submenu level 3 (a tower) Level 1 opens below its trigger; levels 2 and 3 open beside theirs (flipping to the left when they would leave the viewport). The bare :hover rules further up are now only a fallback for the case where script.js never runs - they are scoped out by .nav-ready, which the controller sets. That is deliberate: plain :hover has no hover intent, and the pointer crossing the few pixels between a trigger and its panel used to close the panel before it could be reached, which is exactly why the menu felt click-only. ===================================================================== */ /* Neutralise the instant-hover fallback once the controller is running. */ .baghban-header.nav-ready .baghban-property-menu:not(.is-open) .baghban-property-dropdown, .baghban-header.nav-ready .baghban-flat-submenu:not(.is-open) .baghban-flat-submenu__links, .baghban-header.nav-ready .baghban-building-submenu:not(.is-open) .baghban-building-submenu__links{opacity:0;visibility:hidden;pointer-events:none} .baghban-header.nav-ready .baghban-property-menu:not(.is-open) .baghban-property-dropdown{transform:translate(-50%,-6px)} .baghban-header.nav-ready .baghban-flat-submenu:not(.is-open) .baghban-flat-submenu__links, .baghban-header.nav-ready .baghban-building-submenu:not(.is-open) .baghban-building-submenu__links{transform:translateX(-6px)} .baghban-header.nav-ready .baghban-building-submenu.is-flipped:not(.is-open) .baghban-building-submenu__links, .baghban-header.nav-ready .baghban-flat-submenu.is-flipped:not(.is-open) .baghban-flat-submenu__links{transform:translateX(6px)} /* Open states - the only thing the controller has to toggle. */ .baghban-property-menu.is-open .baghban-property-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .baghban-property-menu.is-open .baghban-property-trigger .fa-icon{transform:rotate(180deg)} .baghban-flat-submenu.is-open .baghban-flat-submenu__links, .baghban-building-submenu.is-open .baghban-building-submenu__links{opacity:1;visibility:visible;pointer-events:auto;transform:none} .baghban-flat-submenu.is-open>a>.fa-icon, .baghban-building-submenu.is-open>a>.fa-icon{transform:translateX(3px)} /* A transparent bridge across the vertical gap under the Properties trigger. Pseudo-elements are hit-tested as part of their element, so this keeps the menu hovered even on the no-JavaScript path. */ .baghban-property-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px} /* Flyouts that would hang off the right edge open to the left instead. */ .baghban-flat-submenu.is-flipped .baghban-flat-submenu__links{left:auto;right:calc(100% + 7px);transform:translateX(6px)} .baghban-flat-submenu.is-flipped.is-open .baghban-flat-submenu__links{transform:none} .baghban-flat-submenu.is-flipped::before,.baghban-building-submenu.is-flipped::before{left:auto;right:100%} /* Level 3 is now a
in the mobile menu: tap a tower to expand its unit list, tap a unit to navigate. */ .baghban-mobile-building-group>summary{min-height:38px;padding:0 12px 0 11px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-left:2px solid var(--header-accent);color:var(--header-green);font:700 11px/1 var(--font-text);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;list-style:none} .baghban-mobile-building-group>summary::-webkit-details-marker{display:none} .baghban-mobile-building-group>summary span{display:inline-flex;align-items:baseline;gap:7px} .baghban-mobile-building-group>summary b{color:var(--text-muted);font-size:10px;letter-spacing:.08em} .baghban-mobile-building-group>summary .fa-icon{font-size:10px;transition:transform .2s ease} .baghban-mobile-building-group[open]>summary .fa-icon{transform:rotate(180deg)} @media (min-width: 901px) { .baghban-property-dropdown, .baghban-flat-submenu__links, .baghban-building-submenu__links { z-index: 1000; overflow: visible; } .baghban-flat-submenu__links, .baghban-building-submenu__links { top: -9px; } /* Level 3 opens forward by default, and every rule that pins it forward excludes .is-flipped. Without that exclusion these !important declarations beat the flip further down, so at a narrow desktop width a tower flyout hangs off the right edge instead of opening left. */ .baghban-building-submenu:not(.is-flipped)>.baghban-building-submenu__links { left: calc(100% + 10px) !important; right: auto !important; transform: translateX(-6px) !important; } /* Flipped: opens to the left of the Flats column, at the same !important weight so the forward rules above cannot override it again. */ .baghban-building-submenu.is-flipped>.baghban-building-submenu__links { left: auto !important; right: calc(100% + 10px) !important; transform: translateX(6px) !important; } .baghban-building-submenu:not(.is-flipped).is-open>.baghban-building-submenu__links, .baghban-building-submenu:not(.is-flipped):hover>.baghban-building-submenu__links, .baghban-building-submenu:not(.is-flipped):focus-within>.baghban-building-submenu__links { transform: translateX(0) !important; } .baghban-building-submenu.is-flipped.is-open>.baghban-building-submenu__links, .baghban-building-submenu.is-flipped:hover>.baghban-building-submenu__links, .baghban-building-submenu.is-flipped:focus-within>.baghban-building-submenu__links { transform: translateX(0) !important; } .baghban-building-submenu.is-flipped>a>.fa-icon { transform: rotate(180deg); } } @media (max-width: 900px) { .baghban-header__bar { min-height: 64px; } .baghban-wordmark img { width: 42px; height: 42px; } .baghban-wordmark > span { font-size: 17px; } .baghban-menu-button { flex: 0 0 42px; } .baghban-mobile-menu__links a, .baghban-mobile-property-trigger { font-size: clamp(22px, 7vw, 28px); } } /* Villa flyout follows the Flats flyout and opens forward from Properties. */ .baghban-villa-submenu { position:relative; } .baghban-villa-parent { justify-content:space-between; gap:12px; } .baghban-villa-parent>.fa-icon { font-size:10px; margin-left:10px; } .baghban-villa-submenu__links { position:absolute; top:-9px; left:calc(100% + 10px); z-index:1000; width:220px; padding:9px; display:grid; background:var(--surface-glass); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 48px rgba(20,20,20,.16); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-6px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease; } .baghban-villa-submenu:hover .baghban-villa-submenu__links,.baghban-villa-submenu:focus-within .baghban-villa-submenu__links { opacity:1; visibility:visible; pointer-events:auto; transform:none; } .baghban-villa-submenu__links a { min-height:38px; padding:0 11px; display:flex; align-items:center; border-radius:9px; color:var(--text-muted); font-size:11px; font-weight:600; text-decoration:none; } .baghban-villa-submenu__links a:hover,.baghban-villa-submenu__links a:focus-visible,.baghban-villa-submenu__links a.is-active { color:var(--foreground); background:var(--surface-soft); } @media(max-width:900px){.baghban-villa-submenu__links{display:none}.baghban-mobile-villa-details{border-left:1px solid var(--line);margin-left:0}.baghban-mobile-villa-details summary{min-height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:var(--text-muted);font:600 12px/1 var(--font-text);cursor:pointer;list-style:none}.baghban-mobile-villa-details summary::-webkit-details-marker{display:none}.baghban-mobile-villa-details summary::after{content:'+';font-size:18px}.baghban-mobile-villa-details[open] summary::after{content:'\2212'}.baghban-mobile-villa-details__links{display:grid;padding:0 0 7px 14px}.baghban-mobile-villa-details__links a{min-height:36px;padding:0 12px;display:flex;align-items:center;color:var(--text-muted);font:600 12px/1 var(--font-text);text-decoration:none}.baghban-mobile-villa-details__links a:hover,.baghban-mobile-villa-details__links a:focus-visible{color:var(--header-accent);background:var(--surface-soft)}}