/* ============================================================================ iws-nav.css — desktop mega-panel navigation Added 30 July 2026. Enqueued at priority 1220, after iws-menu.css (1210). SCOPE, deliberately narrow: - Desktop only, min-width 1200px. iws-menu.css owns everything at 1199 and below, and that drawer was rebuilt on 29 Jul with a keyboard path, a focus trap and 44px targets. It is not touched here. - Nothing in this file styles .mfhcta, .mf-enq or .mf-wa. iws-global.css owns those and 29 of 32 GTM triggers key on them. - No parent-theme template is modified. The WordPress menu stays the single source of navigation truth; the panels are progressive enhancement over it. SPECIFICITY NOTE, learned the hard way on 29 Jul: the theme ships `html body #masthead#masthead .navbar-main-menu > li > a`, which carries TWO IDs, so no class-only selector can ever beat it however long. Every override below matches the ID count and adds a class. RADIUS: R4's four steps only. 8px controls, 14px cards, 22px panels, 999px pills. Pills appear nowhere here, because R4 bars them from the header. ========================================================================== */ @media (min-width: 1200px) { /* the panel needs to escape the header box */ html body #masthead#masthead { overflow: visible; } html body #masthead#masthead .navigation.container { position: relative; z-index: 10; } /* --- the trigger --------------------------------------------------------- */ /* Kill the theme's own dropdown for the five enhanced items. GATED ON html.iws-nv-ready, WHICH IS LOAD-BEARING, NOT DECORATION. Until 30 Jul this rule was safe because `.iws-nv-has` was added by JS, so a visitor whose JS never ran kept the theme's working dropdowns. The server now emits `.iws-nv-has` at first paint, which would have removed that safety net and left a no-JS visitor with no way into four levels of navigation. `iws-nv-ready` is set by iws-nav.js at the moment it builds the panels, so the theme dropdown is only suppressed once a replacement genuinely exists. No flash results: a dropdown is only visible on hover, and nobody is hovering during load. */ html.iws-nv-ready body #masthead#masthead .navbar-main-menu > li.iws-nv-has > .thim-ekits-menu__dropdown { display: none !important; } /* The theme's caret span: we draw our own, and THIS one is not JS-gated on purpose. Our caret is server-rendered, so if the theme's caret waited for JS both would paint together for a frame, which is a new flash of exactly the kind this work exists to remove. */ html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > .thim-ekits-menu__icon { display: none !important; } /* No background fill on hover or open. Burak, 30 Jul: "get rid of highlighting them, the underline is enough." This also puts the nav in line with the minimal-nav rule that current state is an underline, never a pill. */ html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a { display: inline-flex !important; align-items: center; gap: 6px; position: relative; background: none !important; } html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a:focus-visible { outline: 2px solid #0067E0; outline-offset: 2px; } .iws-nv-caret { width: 11px; height: 11px; flex: 0 0 auto; opacity: .7; transition: transform 180ms cubic-bezier(.22,.61,.36,1); } html body #masthead#masthead .navbar-main-menu > li.iws-nv-has.iws-nv-is-open .iws-nv-caret { transform: rotate(180deg); } /* THE UNDERLINE. It is the SAME gradient the footer links already use, measured off the live footer on 30 Jul: Sky #0067E0 to Periwinkle #CFE0FF, 2px. Burak asked for the nav to match the footer rather than carry an invented pair, and he is right: one underline treatment across the site, not two. Both stops are named tokens, so R5 holds. Note this is deliberately NOT the theme's own nav default, which starts on #7BA7FF, one of the unnamed near-miss blues R5 exists to stamp out. One gradient in every state. No light-ground variant, no amber. It sits on .iws-nv-label, which the JS points at the element holding exactly the label text, so the rule is exactly as wide as the WORD. Insetting the anchor was not reliable: the anchor also carries the caret and theme padding. */ html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a .iws-nv-label { position: relative; display: inline-block; } /* The !important declarations here are now DEFENSIVE rather than required, and the distinction is worth recording. Until 30 Jul the theme's splitter wrapped the label in `.js_hover`, and iws-global.css line 18 kills `.site-header .js_hover::after` with content:none and display:none, both !important, so the underline could not paint without answering in kind. The splitter is switched off in functions.php as of 30 Jul, the label is now server-rendered as .iws-nv-label, and that rule no longer matches. Kept so the underline still holds if a theme update ever turns the splitter back on. */ html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a .iws-nv-label::after { content: "" !important; display: block !important; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0067E0 0%, #CFE0FF 100%); opacity: 0; transform: scaleX(.6); transform-origin: center; transition: opacity 180ms cubic-bezier(.22,.61,.36,1), transform 180ms cubic-bezier(.22,.61,.36,1); } html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a:hover .iws-nv-label::after, html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a:focus-visible .iws-nv-label::after, html body #masthead#masthead .navbar-main-menu > li.iws-nv-has.iws-nv-is-open > a .iws-nv-label::after { opacity: 1; transform: scaleX(1); } /* KILL THE THEME'S OWN UNDERLINE on the five enhanced items. The theme ships its own `a::after` rule (a 3px bar, gradient #7BA7FF to #CFE0FF, at bottom:-5px, sized to the ANCHOR). Ours sits on the label at bottom:-6px sized to the WORD. Both painted, at different widths and offsets, which is the double underline Burak reported on 30 Jul. Two IDs beat the theme's (0,5,5) selector; !important answers theirs. */ html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after, html body #masthead#masthead .navbar-main-menu > li.iws-nv-has > a::after { content: none !important; display: none !important; background: none !important; } /* --- HEADER AND PANEL ARE ONE SURFACE WHILE A PANEL IS OPEN --------------- Burak, 31 Jul, pointing at minervavirtual.com: "it feels like the nav bar and the buttons when they are opened are 1 whole thing." Their site was measured rather than guessed at. The thing that makes it read as one object is NOT the animation. Their header carries `background-color: rgba(0,0,0,0)` and their panel is `position:fixed; inset:0 0 auto` with `padding-top:140px` on its content: the panel's surface starts at the very top of the viewport and the header is painted ON it. There is no seam because there is only one surface. We reach the same result without moving our panel behind the fixed header. Doing it their way on an IWS page is unsafe: `/term-dates/` and any page without .iws-transparent-hero has a solid white header, so for the ~90ms the surface takes to sweep past it we would be painting white nav text on a white background. Instead the header takes the panel's OWN top colour, Deep Navy #070D2E, and the panel gradient was turned from 165deg to 180deg so its top edge is that exact colour across the full width. Two elements, one continuous surface, no seam and no flash. SUPERSEDES the 30 Jul "the nav bar changes white" treatment, which is what produced the three-band look in Burak's screenshot: blue strip, white bar, navy panel. Driven by our own body class rather than the theme's .iws-solid, because the theme's scroll handler owns that class and could strip it mid-open. */ html body.iws-nv-open #masthead#masthead, html body.iws-nv-open #masthead#masthead .navigation.container { background: #070D2E !important; } /* The colour arrives in 120ms against the panel's 400ms, so the header never lags behind the surface growing out of it and the two read as one movement. Nothing else on this site transitions the masthead background (grepped iws-global.css and iws-header-layout.css, zero hits), so this also softens the theme's own scroll-to-solid swap, which was previously an instant snap. */ html body #masthead#masthead { transition: background-color 120ms cubic-bezier(.22,.61,.36,1); } html body.iws-nv-open #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body.iws-nv-open #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover, html body.iws-nv-open #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span, html body.iws-nv-open #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .iws-nv-label { color: #FFFFFF !important; } /* THE LOGO HAS TO SWAP TOO, and as of 31 Jul it swaps the OTHER WAY. The logo is not an swap: iws-global.css:335 sets `content:url(iws-logo-white-trimmed.png)!important` as the base and only takes the navy artwork under .iws-solid or on a page without .iws-transparent-hero. While the header was white this rule had to force NAVY; now the header is Deep Navy it has to force WHITE, or a solid-header page shows the navy mark on navy. Two IDs beat the (0,4,3) rule that owns it, and !important is required because theirs carries it. Safe to swap mid-interaction: iws-global.css already declares `aspect-ratio: 281/113` on the mark, so the replaced element keeps its box while the new file arrives instead of laying out at width 0. */ html body.iws-nv-open #masthead#masthead .phys-logo.phys-logo img, html body.iws-nv-open #masthead#masthead .width-logo.width-logo img { content: url('/wp-content/uploads/2026/07/iws-logo-white-trimmed.png') !important; } /* --- the panel ----------------------------------------------------------- */ .iws-nv { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; /* R5: three stops, one hue family, every stop a named token. Deep Navy #070D2E, Royal #0A1776, Navy Glow #13266B. 180deg, not the 165deg it carried until 31 Jul: a vertical gradient makes the panel's top edge ONE flat colour across the whole width, which is the only way the header above can sit flush against it with no visible join. On the diagonal the top-right corner drifted off #070D2E and the seam reappeared at the right-hand end of the bar. */ background: linear-gradient(180deg, #070D2E 0%, #0A1776 55%, #13266B 100%); border-radius: 0 0 22px 22px; box-shadow: 0 30px 70px -34px rgba(6, 14, 58, .75); /* THE SURFACE GROWS, it does not arrive. Until 31 Jul this was `transform: translateY(-6px)` over 180ms, which delivers a finished panel and nudges it 6px. That is why it read as a separate card appearing rather than as the header opening: nothing about it was ever attached to the bar above. Measured off minervavirtual.com on 31 Jul: `grid-template-rows` 0fr to 1fr over 400ms with the content in an overflow:hidden child, and nothing else. It is the only technique that animates to a height nobody has measured, which matters here because the four panels are 718px, 511px, 521px and 490px tall. Not one hardcoded number, and no JS measuring pass to go stale when a font loads late. ⚠️ DEPARTURE FROM R6, recorded rather than slipped in. R6 says transform and opacity only, and grid-template-rows is a layout animation. It is taken deliberately, for one container, for 400ms, on a >=1200px pointer device, because it is the only way to get the effect Burak asked for and it is what the reference site ships. The rest of R6 is honoured: one easing, settle not swoop, no per-item stagger, and the reduced-motion branch at the foot of this file still collapses it to 1ms. */ display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; pointer-events: none; /* Exit 260ms, ~65% of entry, keeping this file's existing rule that leaving is quicker than arriving. */ transition: grid-template-rows 260ms cubic-bezier(.4,0,.68,.06), opacity 160ms cubic-bezier(.4,0,.68,.06), visibility 260ms; } /* The clip is what makes 0fr mean zero pixels, and BOTH declarations are load-bearing. A grid item's default `min-height` is auto, which refuses to shrink below its own content, so without min-height:0 the row never collapses and the panel simply sits open at full height. */ .iws-nv__clip { overflow: hidden; min-height: 0; } .iws-nv[data-open="true"] { grid-template-rows: 1fr; opacity: 1; visibility: visible; pointer-events: auto; /* Above the panel it is replacing. show() closes the previous panel and opens the new one in the same tick, so for ~260ms two panels are animating at the same top:100%. Without this the one later in DOM order wins, which is arbitrary: going Programmes -> About painted correctly and About -> Programmes did not. */ z-index: 6; /* 400ms, the reference's own duration. Opacity resolves in 140ms so the surface is solid almost at once and what the eye follows is a solid object growing, not a ghost fading in at the same time. */ transition: grid-template-rows 400ms cubic-bezier(.22,.61,.36,1), opacity 140ms cubic-bezier(.22,.61,.36,1); } /* ---- PANEL INTERNALS ---------------------------------------------------- REBUILT 31 Jul 2026 on Minerva Virtual Academy's structure (Burak): columns of plain text links under one highlighted heading each, plus a right rail carrying a highlights card and a photograph. No icons anywhere. Deleted with the old markup: .iws-nv__ey, __mk, __lede, __stg, __card, __nm, __age, __yr, __note, __tier*, __score, __stars, __acc, __day. Those classes no longer exist in iws-nav.js, so the rules are gone rather than orphaned. R4 radii 8 / 14 / 22 / 999. R7 container 1180px. */ .iws-nv__in { max-width: 1180px; /* R7 */ margin: 0 auto; padding: 30px 24px 28px; } .iws-nv__grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .92fr); align-items: start; } /* Programmes carries ONE link column (Year Groups only). Without this it inherits the three-column track and leaves a dead middle third. The rail goes two-up instead, which is what fills the width. */ .iws-nv__grid[data-cols="1"] { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } .iws-nv__grid[data-cols="1"] .iws-nv__rail { grid-template-columns: 1fr 1fr; } .iws-nv__col { min-width: 0; } /* ⚠️ ONE TEXT COLUMN, MEASURED. Before this, three different left edges were live inside one panel: the heading BLOCK at 147px, its glyphs at 152.2px (pushed in by its own padding) and the link text at 157px (pushed in by the link's hover padding), against the logo at 147px. IWS_DESIGN.md 4.3b: "Align the block's text, not the block's edge... hang the block left by its own padding so the glyphs inside land on the column." The same correction is owed by the link boxes, which carry padding purely so the hover state has a shape. Both now hang by exactly their own padding-left. */ .iws-nv__gh { display: inline-block; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--iws-royal, #0A1776); background-image: linear-gradient(90deg, var(--iws-peri, #CFE0FF) 0%, #EAF1FF 100%); /* px, not em: at 13px the em values resolve to 5.2px and the hang no longer cancels its own padding cleanly once the browser rounds, which left the heading glyphs 1px inside the link column. Whole pixels cancel exactly. */ padding: 2px 6px 3px; margin: 0 0 16px -6px; /* hangs left by exactly its own side padding */ border-radius: 8px; } /* ---- the links: bold name, one short line, nothing else ---- The name is set at 17px to match the nav buttons above it (measured: the header labels are 17px / 600 / Inter), so a panel reads at the same size as the bar that opened it. Burak, 31 Jul. */ .iws-nv__lnk { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .iws-nv__lnk > li { margin: 0; } .iws-nv__lnk a { display: block; padding: 10px; margin-left: -10px; /* hangs left by its own padding, see above */ border-radius: 8px; text-decoration: none; transition: background-color 160ms cubic-bezier(.22,.61,.36,1); } .iws-nv__lnk a:hover { background: rgba(207, 224, 255, .12); } .iws-nv__lnk a:focus-visible { outline: 2px solid #CFE0FF; outline-offset: 1px; } .iws-nv__lnk b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; } .iws-nv__lnk span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--iws-body-light, #C7CEEA); margin-top: 3px; } /* ---- the rail ---- */ .iws-nv__rail { display: grid; gap: 12px; align-content: start; } .iws-nv__rc { background-image: linear-gradient(180deg, var(--iws-navy-glow, #13266B) 0%, var(--iws-royal, #0A1776) 100%); border: 1px solid rgba(207, 224, 255, .16); border-radius: 14px; padding: 18px; } .iws-nv__rt { margin: 0 0 12px; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; color: var(--iws-peri, #CFE0FF); } .iws-nv__rc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .iws-nv__rc li { margin: 0; } .iws-nv__rc li b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff; } .iws-nv__rc li span { display: block; font-size: 13px; line-height: 1.4; color: var(--iws-body-light, #C7CEEA); margin-top: 1px; } .iws-nv__more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--iws-sky-light, #7BA7FF); text-decoration: none; } .iws-nv__more:hover { text-decoration: underline; text-underline-offset: 3px; } .iws-nv__more:focus-visible { outline: 2px solid #CFE0FF; outline-offset: 2px; } /* ---- the feature card, now carrying a photograph ---- */ .iws-nv__cta { background-image: linear-gradient(160deg, #EAF1FF 0%, var(--iws-peri, #CFE0FF) 100%); border-radius: 14px; overflow: hidden; /* so the photograph takes the card's radius */ display: flex; flex-direction: column; } .iws-nv__thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .iws-nv__ctab { padding: 16px 18px 18px; } .iws-nv__cta h3 { margin: 0 0 6px; font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: var(--iws-royal, #0A1776); } .iws-nv__cta p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: #3A4468; } /* Deep amber with white type, the primary CTA fill site-wide since 30 Jul. White is 5.02:1 on #B45309 and 9.37:1 on #7C2D12, so the LIGHTEST stop clears AA, which is the test for a gradient (IWS_DESIGN.md 3.5). */ .iws-nv__cta a { display: inline-block; padding: 9px 16px; border-radius: 8px; background-image: linear-gradient(120deg, #B45309 0%, #7C2D12 100%); color: #fff; font-family: 'Sora', sans-serif; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: transform 160ms cubic-bezier(.22,.61,.36,1); } .iws-nv__cta a:hover { transform: translateY(-1px); } .iws-nv__cta a:focus-visible { outline: 2px solid #0A1776; outline-offset: 3px; } /* Below 1360 the two-up rail on Programmes has no room for a photograph beside a list, so it stacks back to one column like the other panels. */ @media (max-width: 1360px) { .iws-nv__grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .iws-nv__grid[data-cols="1"] .iws-nv__rail { grid-template-columns: 1fr; } } /* scrim, appended to body so it can sit under the fixed header */ .iws-nv-scrim { position: fixed; inset: 0; background: rgba(7,13,46,.34); opacity: 0; pointer-events: none; z-index: 9990; /* header is 9999 */ /* Timings raised 31 Jul from 135/180 to sit inside the panel's 260/400. A scrim that finished dimming 220ms before the surface stopped growing was the second thing making these read as two separate events. */ transition: opacity 200ms cubic-bezier(.4,0,.68,.06); } .iws-nv-scrim[data-on="true"] { opacity: 1; pointer-events: auto; transition: opacity 300ms cubic-bezier(.22,.61,.36,1); } } /* Below the desktop breakpoint nothing above applies, and the panels are never built by the JS either. iws-menu.css owns the drawer. */ @media (max-width: 1199px) { .iws-nv, .iws-nv-scrim { display: none !important; } /* THE CARET MUST BE HIDDEN HERE, and this became necessary only on 30 Jul. Desktop and the mobile drawer share ONE