/* --------------------------------------------------------------------------- One black bar for the whole site. Every page loads this file and every state (unscrolled, scrolled, mobile, property detail) reads its colours from the tokens below, so the bar, its dropdowns, its flyouts and the mobile sheet can never fall back to light-theme colours on one page and not another. --------------------------------------------------------------------------- */ .baghban-header { --header-surface: var(--ink); /* the bar itself */ --header-surface-glass: color-mix(in srgb, var(--ink) 92%, transparent); /* blurred mobile bar */ --header-panel: var(--inverse); /* dropdowns, flyouts, sheet */ --header-shadow: 0 18px 45px rgba(0, 0, 0, .45); --header-ink: var(--card); /* primary text */ --header-green: var(--card); /* brand name + the nav item you are on */ --header-accent: var(--primary); /* gold rule under the active nav item */ --header-gold: var(--primary); /* focus ring + logo halo */ /* Brand lockup colours: white lettering, grey-on-black label. */ --wordmark-color: var(--card); --wordmark-label-color: var(--text-muted-inverse); /* The nested header rules read these three globals for quiet text, hairlines and hover washes, and all three are tuned for white pages. Re-pointing them here is what keeps every dropdown, flyout and mobile row consistent with the black bar instead of each one carrying its own light-theme colour. */ --text-muted: var(--text-muted-inverse); --line: color-mix(in srgb, var(--card) 18%, transparent); --surface-soft: color-mix(in srgb, var(--card) 10%, transparent); position: fixed; inset: 0 0 auto; z-index: 100; width: 100%; /* Lift the floating bar off the very top edge of the viewport. */ padding-top: 10px; } .baghban-header__bar { width: 100%; /* The bar is inset from the viewport edges at every width and in every state. It never stretches to full width and scrolling never resizes or moves it, so the header reads as one floating slab sitting above the page instead of a banner bar that jumps between two sizes. 1320px is the cap on very wide screens; the fixed gutters keep enough room for the nav and the two CTAs down to the 901px desktop breakpoint. */ max-width: min(calc(100vw - 2 * clamp(12px, 3vw, 64px)), 1320px); /* One shared height token, so the bar and every page's top offset (calc(var(--header-height) + N)) can never drift apart. The bar is exactly as tall as the logo it frames, and the logo clamp keeps that compact on a tall monitor instead of scaling with the viewport: at 27vh the bar was 517px tall on a 1914px screen. */ height: var(--header-height); /* The logo is the bar: no vertical padding, so the mark touches the top and bottom edges. `--logo-box` leaves exactly the 1px top and bottom borders out of the box, so the mark can never overflow the bar. */ --logo-box: calc(var(--header-height) - 2px); min-width: 0; margin: 0 auto; padding: 0 clamp(16px, 2.2vw, 32px); display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); background: var(--header-surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); 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; } /* Scrolling changes nothing about the bar: no width, height, radius or padding change. .is-scrolled is still set by script.js and left available as a styling hook, but the bar it used to shrink into is now simply the permanent shape. */ /* `flex: 0 0 auto` plus a 170px min-width meant the wordmark could not give up any width, so the nav and the CTAs were pushed past the right edge of the bar and clipped by the page's overflow-x:clip. It can shrink now. */ .baghban-wordmark { --logo-glow: color-mix(in srgb, var(--header-gold) 40%, transparent); --logo-glow-strong: color-mix(in srgb, var(--header-gold) 70%, transparent); flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 9px; color: var(--header-green); text-decoration: none; } /* The logo asset is cropped tight to its artwork (transparent padding removed), so a square contain box is now filled edge to edge. A soft drop shadow plus a gold halo lifts the gold artwork off the pale bar instead of letting it blend in; hovering the lockup lifts it further. */ .baghban-wordmark img { flex: 0 0 auto; width: var(--logo-box, var(--header-logo)); height: var(--logo-box, var(--header-logo)); object-fit: contain; filter: drop-shadow(0 3px 7px var(--overlay-subtle)) drop-shadow(0 0 8px var(--logo-glow)); /* The logo box tracks the bar height, so it has to animate on the bar's own curve (--motion-slow / --motion-ease-out, set on the bar in ui-enhancements.css). Any other duration or easing desyncs the two mid-transition and the mark briefly pokes out of the top and bottom of the bar while the viewport is being resized. */ transition: width var(--motion-slow, .3s) var(--motion-ease-out, ease-out), height var(--motion-slow, .3s) var(--motion-ease-out, ease-out), transform .25s ease, filter .25s ease; } .baghban-wordmark:hover img, .baghban-wordmark:focus-visible img { transform: scale(1.04); filter: drop-shadow(0 4px 10px var(--overlay-medium)) drop-shadow(0 0 14px var(--logo-glow-strong)); } /* 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(--card); font-family: var(--font-subheading); font-weight: 600; font-size: clamp(22px, calc(var(--header-logo) * .32), 32px); line-height: 1; } .baghban-wordmark small { margin-top: .22em; color: var(--card); font-family: var(--font-text); font-weight: 600; font-size: clamp(9px, calc(var(--header-logo) * .12), 13px); letter-spacing: 0.12em; line-height: 1; letter-spacing: 0; text-transform: uppercase; padding: 0.5em 0; } /* Scrolled, detail-page and mobile states now inherit the palette set on .baghban-header above, so no per-state brand override is needed any more. */ .baghban-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; margin: 0 auto; min-width: 0; } .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; flex: 0 0 auto; 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: transparent; border-color: var(--line); } .baghban-action--secondary.is-active { background: var(--surface-soft); border-color: var(--text-muted); } /* Inverted CTA. Site buttons stay monochrome, so on the black bar the primary action is a white pill with black text rather than a second black-on-black shape. */ .baghban-action--primary { color: var(--header-surface); background: var(--card); border-color: var(--card); box-shadow: 0 7px 18px rgba(0, 0, 0, .35); } .baghban-action:hover, .baghban-action:focus-visible { transform: translateY(-2px); } .baghban-action--secondary:hover, .baghban-action--secondary:focus-visible { border-color: var(--card); background: var(--surface-soft); } .baghban-action--primary:hover, .baghban-action--primary:focus-visible { background: var(--card); box-shadow: 0 12px 26px rgba(0, 0, 0, .5); } .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(--header-panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--header-shadow); 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(--card); 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: 42px; padding: 0 12px; display: flex; align-items: center; border-left: 1px solid var(--line); color: var(--text-muted); font: 600 13px/1 var(--font-text); letter-spacing: .01em; 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: var(--header-height); padding: 0 16px; } .baghban-wordmark { min-width: 0; } .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 bar height is the shared token; nothing below may hardcode it again. */ :root { --header-logo: 66px; --header-height: var(--header-logo); } .baghban-header, .baghban-header.is-scrolled { padding: 0; } /* Below the desktop nav the bar goes back to a flush, full-width strip: there is no room to float one at 320px, and the mobile sheet has to line up with its edges. Only the bottom border survives, so the logo box shrinks by 1px, not 2. */ .baghban-header__bar, .baghban-header.is-scrolled .baghban-header__bar { position: relative; z-index: 2; height: var(--header-height); --logo-box: calc(var(--header-height) - 1px); padding: 0 14px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--header-surface-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .baghban-wordmark { min-width: 0; } .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(--surface-soft); color: var(--header-ink); 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: var(--header-height); 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(--header-surface); box-shadow: var(--header-shadow); animation: baghban-menu-in .28s ease both; } .baghban-mobile-menu[hidden] { display: none; } .baghban-mobile-menu__links { display: grid; } /* Direct children only. These panels nest s of their own (the property tree), and a descendant selector here was styling every nested link at 27px as well. */ .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) { /* No height override - the shared clamp already tops out at a compact bar. */ .baghban-header__bar { padding: 0 40px; } } @media (max-width: 620px) { :root { --header-logo: 60px; --header-height: var(--header-logo); } .baghban-header__bar { height: var(--header-height); padding: 0 12px; gap: 12px; } } @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(--header-panel);border:1px solid var(--line);border-radius:6px;box-shadow:var(--header-shadow);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(--card);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(--header-panel);border:1px solid var(--line);border-radius:6px;box-shadow:var(--header-shadow);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:var(--header-shadow)} .baghban-property-dropdown{border-radius:16px;padding:9px;box-shadow:var(--header-shadow)} .baghban-property-dropdown a,.baghban-flat-submenu__links a,.baghban-building-submenu__links a{border-radius:9px} /* Direct child again, or every tower row inside the panel inherits this marker and shows a stray dash next to its own chevron. Closed = chevron-down, open = minus. */ .baghban-mobile-flat-details>summary::after{content:"\f078";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: var(--header-height); } .baghban-wordmark > span { font-size: 20px; display: grid; justify-items: center; } .baghban-wordmark small { margin-top: .22em; font-size: 10px; letter-spacing: 0.14em; } .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(--header-panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--header-shadow); 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(--card); 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:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px}.baghban-mobile-villa-details[open]>summary::after{content:"\f068"}.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)}}