/* This one rule has to be inside `@layer base`, and the reason is a trap worth writing down. Tailwind's preflight ships `[hidden]:where(:not([hidden="until-found"])) { display: none !important }` in that layer, and the cascade ranks *important* declarations by layer in REVERSE order — which makes an un-layered `!important` the weakest author declaration there is. The obvious version of this rule therefore lost to preflight, and a visitor without JavaScript got a nav that could not be opened. Declaring it in the same layer puts the contest back on specificity, where an id beats an attribute selector. */ @layer base { #mobile-nav, #services-menu { display: block !important; } } /* Without JS both disclosures render inline, in normal flow. A pane of glass only reads as glass when it is floating over something — in the flow it is just a grey box, so the treatment comes off. These stay un-layered on purpose: they are normal declarations, and an un-layered normal declaration outranks every Tailwind layer, which is exactly what they need to do. */ #services-menu, #mobile-nav { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } /* Without JS the sheet must sit in flow, not overlay the page. */ #mobile-nav { position: static; max-height: none; overflow: visible; } #services-menu { position: static; width: auto; border: 0; } #nav-toggle { display: none !important; } /* The capsule is a fixed `--aq-pill-h` tall, which is right for a bar holding one row and wrong for a bar that has just had a five-item service list poured into it in normal flow. Without JS it grows instead, and keeps the pill height as a floor. And the hero must stop sliding up behind it. The pull-under is `-1 * --aq-header-h`, a figure that assumes a header of exactly one capsule; with both disclosures open the header is several hundred pixels tall and that same margin would drag the hero up over the whole menu. Zeroing the margin (and only the margin — the padding stays, so nothing else about the hero moves) lets the page simply start below whatever height the header has ended up with. */ .site-bar { height: auto; min-height: var(--aq-pill-h); border-radius: 1.75rem; padding-block: 0.5rem; } .hero { margin-top: 0; }

Site Map

Every page on aqvantiq.com. Search engines use the machine-readable XML sitemap; this page is for people.

Services — Malaysia

Thailand

Company

Legal

Case Studies

Articles