/* ============================================================================ responsive.css — the responsive layer for the NUSRL revamp Loaded LAST, after style.css, so it wins the cascade at equal specificity. Kept as its own file on purpose: style.css has grown as an append-log of patches (the .mega-intro rule alone is set three separate times, and one ~2.4KB block is duplicated), so editing in place risks re-opening old conflicts. Everything responsive now lives in one reviewable place, and every block below records WHY, not just what. ========================================================================= */ /* -- 1. Layout tokens ------------------------------------------------------ --header-h is re-measured from the live DOM by js/main.js on load and on resize, so the fixed drawer always starts exactly at the bottom edge of the header even if the brand lockup rewraps. The value here is only a fallback for the first paint (and for JS-off). */ :root{--header-h:72px;--gutter:clamp(20px,5vw,32px)} /* -- 2. Stacking order ----------------------------------------------------- The header becomes sticky below, so it needs a layer. The two overlays must still sit above it, which they would not have at their old z-indexes. */ .site-header{z-index:40} .lightbox{z-index:60} .inner-modal{z-index:70} /* -- 3. Sticky header ------------------------------------------------------ This site is a directory: the mega menu is the primary way to reach ~250 pages. Losing the nav the moment you scroll makes every deep page a dead end that costs a scroll-to-top. The thin utility bar is allowed to scroll away - only the nav row is pinned. */ .site-header{position:sticky;top:0} /* Two consequences of pinning the header, both easy to miss: 1. In-page anchors (#about, #academics, #apply, and the "Skip to content" link) would land with the target's first lines hidden underneath it. scroll-margin-top offsets the landing by the live header height. 2. The skip link is painted before the header in source order, so it needs a layer above it or it appears *behind* the header when focused - which makes the one control keyboard users rely on invisible. */ :target,#main,main>section[id],main{scroll-margin-top:calc(var(--header-h) + 12px)} .skip-link{z-index:80} /* Long unbreakable strings (the email address, "Organisational") must never push a horizontal scrollbar on a 320px phone. */ .footer-cols a,.footer-meta a,.brand span,.notice-list span{overflow-wrap:anywhere} /* The drawer's rescued utility links exist in the DOM at every width; they are only ever shown inside the drawer (see §4g). */ .drawer-utility{display:none} /* ========================================================================== 4. THE BREAKPOINT: 1024px -------------------------------------------------------------------------- Measured, not guessed. At the design's own type scale the horizontal nav needs 909px of viewport before it wraps (brand 255 + nav items 566 + 40px separation + 48px gutter). The old breakpoint was 800px, which left a 109px-wide band - 801-909, i.e. exactly the small-laptop / split-screen range - where the desktop nav was shown but could not fit, so it broke into two ragged rows with "Apply" split across lines. 1024 is chosen over ~950 for two reasons: it leaves 115px of slack so the row still breathes rather than merely fitting, and it is the iPad-landscape width, so the tablet a reviewer is most likely to hold gets the full desktop nav while everything narrower gets a drawer built for touch. ======================================================================== */ @media (max-width:1023px){ /* 4a. Utility bar: 10px uppercase text is unreadable on a phone and costs 35px of a ~780px viewport. It is hidden here, but its three links are NOT lost - js/main.js clones them into the bottom of the drawer, so Gallery keeps an entry point on mobile. Previously hiding the bar was the only handling, and Gallery appeared nowhere in the drawer. */ .utility{display:none} /* 4b. Header row */ .nav-wrap{min-height:var(--header-h)} .brand img{width:44px;max-height:52px} .brand span{font-size:9px} .brand strong{font-size:11px} /* 4c. Hamburger - a square 44x44 target that morphs into an X, so the open/closed state is readable at a glance. Icon only: the three-bar glyph is the most recognised control on the web and the "MENU" caption beside it only competed with the brand lockup for the narrow strip of header width a phone has. The label moves to aria-label, so screen readers still announce it. */ .menu-button{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;margin-right:-10px;padding:0; border:0;background:none;color:var(--teal);cursor:pointer; } .menu-button i{display:none} .menu-button .bars{display:grid;gap:5px;width:22px} .menu-button .bars span{display:block;height:2px;width:22px;background:var(--teal);transition:transform .22s ease,opacity .18s ease} .menu-button[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-button[aria-expanded="true"] .bars span:nth-child(2){opacity:0} .menu-button[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .menu-button i{font-style:normal} /* 4d. THE DRAWER Was: position:absolute, no height cap, no scroll container. With Explore open it measured 1664px inside a 780px viewport - it stretched the document, scrolled the page behind it, and once you were 800px down the list the header and its close control were gone. Now: a fixed sheet that owns its own scroll. dvh (with a vh fallback) so iOS/Android URL-bar collapse does not clip the last row. overscroll-behavior:contain stops scroll chaining to the page. Animated via visibility+opacity rather than display, so open/close reads as a transition and the drawer stays untabbable when closed. */ .main-nav{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:fixed;top:var(--header-h);left:0;right:0; height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h)); margin:0;padding:0 0 40px; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 24px 44px rgba(5,30,38,.16); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; opacity:0;transform:translateY(-6px);visibility:hidden; transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s; } .main-nav.open{opacity:1;transform:none;visibility:visible;transition-delay:0s} /* 4e. Row rhythm. Every top-level row is >=52px, comfortably past the 44px Apple / 48px Material guidance and the 24px WCAG 2.5.8 floor; the old rows measured 17-20px, which is not a thumb target at all. Hairline separators give the list structure without extra chrome. */ .main-nav>a:not(.nav-cta), .main-nav .nav-dropdown-toggle, .main-nav .explore-toggle{ display:flex;align-items:center;justify-content:space-between;gap:14px; width:100%;min-height:52px;padding:0 var(--gutter); border-bottom:1px solid var(--line); font:700 14px var(--sans);letter-spacing:.01em;text-transform:none; color:var(--ink);text-align:left; } /* The gold underline sweep is a hover affordance; there is no hover on a phone and it renders as a stray 1px line, so it is switched off. */ .main-nav>a:not(.nav-cta):after{display:none} .main-nav .nav-dropdown-item{width:100%;position:static} .main-nav .nav-dropdown-toggle .lucide, .main-nav .explore-toggle .lucide{width:18px;height:18px;margin:0;flex:0 0 auto} /* 4f. Source order vs. reading order. In the markup the CTA sits between the Explore toggle and the panel it opens, so a stacked drawer would show the directory *below* "Apply". Flex `order` puts the panel back under its own trigger and parks the CTA at the bottom of the sheet - which is also the easiest place to reach with a thumb. */ .main-nav>.mega-menu{order:1} .main-nav>.nav-cta{order:2} .main-nav>.drawer-utility{order:3} .main-nav .nav-cta{ display:flex;align-items:center;justify-content:center;gap:8px; margin:22px var(--gutter) 0;min-height:52px;padding:0 20px; background:var(--teal);color:#fff;font:700 13px var(--sans); letter-spacing:.08em;text-transform:uppercase; } /* 4g. The Notices / Gallery / Contact links rescued from the utility bar. */ .drawer-utility{display:flex;flex-direction:column;margin:26px var(--gutter) 0;padding-top:18px;border-top:1px solid var(--line)} .drawer-utility a{display:flex;align-items:center;min-height:44px;color:var(--muted);font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase} /* 4h. PANELS INSIDE THE DRAWER The desktop panels are centred overlays (position:absolute, translated to the viewport centre, capped at 76vh with their own scrollbar). None of that applies in a stacked sheet - an overlay inside an overlay gives you two nested scroll areas. They become plain in-flow blocks and the drawer is the single scroll container. */ .main-nav .nav-dropdown, .main-nav .nav-dropdown-wide, .main-nav .mega-menu{ position:static;transform:none;inset:auto; width:100%;max-height:none;overflow:visible; display:block;margin:0;padding:0; background:#f4f1ea;border-top:0;box-shadow:none; } .main-nav .nav-dropdown[hidden], .main-nav .mega-menu[hidden]{display:none} /* 4i. The decorative intro panel is DESKTOP-ONLY. It is a teal poster - headline, paragraph and photo - whose job is to give the wide overlay visual weight and balance the link grid. Stacked on a phone it measured 404px, so a tap on "Explore NUSRL" showed a picture and zero links until you scrolled most of a screen. style.css originally hid it below 800px; three later patches turned it back on. Navigation on a phone is a list, not a poster. */ .main-nav .mega-intro{display:none} .main-nav .menu-about-container, .main-nav .menu-academics-container, .main-nav .menu-explore-container{ max-height:none;overflow:visible;padding:0;width:100%; display:block;grid-template-columns:none; } /* Desktop deals the directory into 2-3 balanced columns; one column here. */ .main-nav .menu, .main-nav .menu-about, .main-nav .menu-academics, .main-nav .menu-explore{display:block;grid-template-columns:none;column-count:1;gap:0} /* Every section gets a separator. The rule cannot key off :last-child alone: the Explore directory is dealt into three balanced