/* ============================================================================= IWS mobile menu — 29 Jul 2026 Enhances the theme's existing drawer rather than replacing its markup, so no parent-theme template is touched and the WordPress menu stays the single source of navigation truth. What the audit found and this fixes: - drawer opened OVER the logo, 320px of 390, stopping short of the bottom - submenu arrows rendered as broken icon-font glyphs, not chevrons - NO call to action anywhere in the menu: no consultation, no WhatsApp - flat list of five identical rows, no grouping, no brand presence Dark system on purpose: Deep Navy to Navy Glow is the one gradient IWS_DESIGN.md §3.4 sanctions, it matches the footer, and it separates the menu from the page far better than the white-on-white it replaces. ============================================================================= */ @media (max-width: 1199px) { /* ---- the panel ---- */ body .navigation .width-navigation.main-navigation { position: fixed !important; inset: 0 auto 0 0 !important; width: min(88vw, 400px) !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; background: linear-gradient(168deg, #070D2E 0%, #13266B 52%, #070D2E 100%) !important; box-shadow: 0 0 0 100vmax rgba(6, 14, 58, .55), 24px 0 60px -20px rgba(0, 0, 0, .5) !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; z-index: 10000 !important; /* CLOSED IS THE DEFAULT. The first version of this file omitted it and the drawer would have rendered permanently open. Off-canvas rather than display:none so the slide is a compositor transform, and visibility keeps it out of the tab order while closed. */ transform: translateX(-102%) !important; visibility: hidden !important; transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s linear .28s !important; } body.iws-mm-open .navigation .width-navigation.main-navigation { transform: translateX(0) !important; visibility: visible !important; transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s !important; } /* The drawer's own header: the logo is no longer covered by the panel, it is inside it, which is what makes the panel read as a place rather than an overlay. */ body .iws-mm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); flex: 0 0 auto; } body .iws-mm-head img { height: 34px; width: auto; display: block; } body .iws-mm-close { width: 44px; height: 44px; /* WCAG 2.5.5 touch target */ display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; color: #fff; cursor: pointer; flex: 0 0 auto; transition: background .18s ease; } body .iws-mm-close:hover { background: rgba(255, 255, 255, .18); } body .iws-mm-close svg { width: 18px; height: 18px; } /* ---- the list ---- */ body .navigation .main-navigation ul.navbar-main-menu, body .navigation .main-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; background: transparent !important; } body .navigation .main-navigation li { width: 100% !important; border: 0 !important; } body .navigation .main-navigation > ul > li > a, body .navigation .main-navigation ul.navbar-main-menu > li > a { display: flex !important; align-items: center !important; min-height: 56px !important; /* comfortably above the 44px floor */ padding: 14px 20px !important; font-family: var(--iws-font-display, Sora), sans-serif !important; font-size: 17px !important; font-weight: 600 !important; color: #fff !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .10) !important; background: transparent !important; } body .navigation .main-navigation > ul > li > a:active { background: rgba(255,255,255,.06) !important; } /* ---- submenu ---- */ /* The theme's arrow is a broken icon-font glyph. Kill it and draw a real chevron on our own button, which is also what makes the row keyboard-operable. */ body .navigation .main-navigation .menu-item-has-children > a::after, body .navigation .main-navigation .thim-ekits-menu__arrow, body .navigation .main-navigation .fa-angle-right, body .navigation .main-navigation .menu-item-has-children > a > i { display: none !important; content: none !important; } body .iws-mm-toggle { position: absolute; top: 0; right: 0; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #CFE0FF; cursor: pointer; } body .iws-mm-toggle svg { width: 16px; height: 16px; transition: transform .22s ease; } body .iws-mm-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } body .navigation .main-navigation .menu-item-has-children { position: relative !important; } body .navigation .main-navigation .menu-item-has-children > a { padding-right: 60px !important; } /* Collapsed by default. grid-template-rows animates cleanly and needs no measured height, so it survives content changes without JS bookkeeping. */ body .navigation .main-navigation .menu-item-has-children > ul { display: grid !important; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; background: rgba(0, 0, 0, .18) !important; } body .navigation .main-navigation .menu-item-has-children.iws-open > ul { grid-template-rows: 1fr; } body .navigation .main-navigation .menu-item-has-children > ul > li { overflow: hidden; } body .navigation .main-navigation .menu-item-has-children > ul > li > a { display: flex !important; align-items: center !important; min-height: 48px !important; padding: 12px 20px 12px 34px !important; font-family: Inter, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #CFE0FF !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; } /* ---- the actions the old menu simply did not have ---- */ body .iws-mm-cta { margin-top: auto; padding: 20px; flex: 0 0 auto; } body .iws-mm-cta a { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border-radius: 14px; font-family: var(--iws-font-display, Sora), sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; } body .iws-mm-cta .iws-mm-primary { background: linear-gradient(120deg, #0A1776 0%, #0067E0 100%); color: #fff; border: 1px solid rgba(255,255,255,.14); } body .iws-mm-cta .iws-mm-wa { margin-top: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; } body .iws-mm-cta .iws-mm-wa svg { width: 19px; height: 19px; } body .iws-mm-meta { margin: 14px 2px 4px; font-family: Inter, sans-serif; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .62); } body .iws-mm-meta a { color: rgba(255, 255, 255, .82); text-decoration: none; } /* ---- focus, keyboard, motion ---- */ body .navigation .main-navigation a:focus-visible, body .iws-mm-close:focus-visible, body .iws-mm-toggle:focus-visible { outline: 2px solid #CFE0FF !important; outline-offset: -2px !important; } /* Scroll lock, set by the script while the drawer is open. */ body.iws-mm-open { overflow: hidden !important; touch-action: none; } @media (prefers-reduced-motion: reduce) { body .navigation .width-navigation.main-navigation, body.iws-mm-open .navigation .width-navigation.main-navigation, body .navigation .main-navigation .menu-item-has-children > ul, body .iws-mm-toggle svg { transition: none !important; } } } /* ---- corrections after the first render (29 Jul 2026) ---- Four defects the screenshot showed that the DOM assertions had missed. Worth noting: every one of these was invisible to the measurements and obvious in the picture. */ @media (max-width: 1199px) { /* 1. CONTRAST FAILURE. Link text rendered dark navy on the navy panel, close to unreadable. Our #fff was losing to a more specific theme rule, so the colour is restated at a specificity nothing in the theme reaches. This is the one that actually mattered: it was a WCAG 1.4.3 failure, not a nicety. */ html body .navigation .width-navigation.main-navigation ul li a, html body .navigation .width-navigation.main-navigation ul li a span { color: #fff !important; -webkit-text-fill-color: #fff !important; } html body .navigation .width-navigation.main-navigation .menu-item-has-children ul li a, html body .navigation .width-navigation.main-navigation .menu-item-has-children ul li a span { color: #CFE0FF !important; -webkit-text-fill-color: #CFE0FF !important; } /* 2. The 0fr/1fr grid collapse only sizes the FIRST implicit row, so a submenu with several
  • children resolved to 2px. max-height is less elegant and actually works with N children. 600px clears the longest submenu on this site. */ html body .navigation .main-navigation .menu-item-has-children > ul { display: block !important; max-height: 0 !important; overflow: hidden !important; transition: max-height .3s cubic-bezier(.22,.61,.36,1) !important; } html body .navigation .main-navigation .menu-item-has-children.iws-open > ul { max-height: 600px !important; } /* 3. The theme's own close control still floated over the hero, outside the panel, competing with ours. */ html body .navigation .mobile-menu-container.navbar-toggle ~ .close-menu, html body .close-menu, html body .menu-close, html body .navbar-close { display: none !important; } /* 4. The panel starts at viewport top and the fixed announcement bar sits above it, clipping the logo. Clear it by the bar's OWN token, not a copy of its height: .iwsbar is height:var(--iws-bar-h), so a hardcoded 42px was already 2px wrong. */ html body .navigation .width-navigation.main-navigation { padding-top: var(--iws-bar-h, 40px) !important; } /* The drawer head is the header row, restated. #masthead sits at top:var(--iws-bar-h) and .navigation.container is min-height:82px with align-items:center, so a head of the same height, centred, puts the drawer logo on the header's exact centreline at every width. 83px not 82px because border-box makes the 1px divider eat into the height, which would shift the centre up half a pixel. */ html body .iws-mm-head { height: 83px; padding: 0 20px; } } /* ---- second correction pass (29 Jul 2026) ---- 1. THE CONTRAST FIX THAT ACTUALLY WINS. The rule beating us was html body #masthead#masthead .navbar-main-menu > li > a…{color:var(--iws-royal)!important} in iws-global.css. It carries TWO IDs, and an ID outranks any number of classes, so no class-only selector can ever beat it however long. Matching the ID count is the only way. Measured before: Royal Blue on navy at 1.09:1, a WCAG 1.4.3 failure. 2. The burger measured 0x0, so it could not be clicked or tapped. Given an explicit 44px box (WCAG 2.5.5) rather than relying on its inline children for size. */ @media (max-width: 1199px) { html body #masthead#masthead .navigation .width-navigation.main-navigation ul li a, html body #masthead#masthead .navigation .width-navigation.main-navigation ul li a span, html body #masthead#masthead .width-navigation.main-navigation ul li a { color: #fff !important; -webkit-text-fill-color: #fff !important; } html body #masthead#masthead .navigation .width-navigation.main-navigation .menu-item-has-children ul li a, html body #masthead#masthead .navigation .width-navigation.main-navigation .menu-item-has-children ul li a span { color: #CFE0FF !important; -webkit-text-fill-color: #CFE0FF !important; } html body .navigation .mobile-menu-container.navbar-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; cursor: pointer; } html body .navigation .mobile-menu-container.navbar-toggle > span { display: block !important; width: 22px !important; height: 2px !important; border-radius: 2px !important; background: #0A1776 !important; } } /* ---- the "stray close button" was the burger itself (29 Jul 2026) ---- It is not a second control: the theme rotates the burger's three bars into an X while the drawer is open (measured: two spans at 17x17, crossed, at x=340). Sitting outside the 320px panel it read as a second, disconnected close affordance competing with the one inside the panel. Hide it while open so there is exactly ONE close control. Safe because the panel's own X, Escape, and tap-outside all close the drawer, and the burger returns the moment it closes. */ @media (max-width: 1199px) { html body.iws-mm-open .navigation .mobile-menu-container.navbar-toggle { opacity: 0 !important; pointer-events: none !important; transition: opacity .18s ease !important; } } /* ============================================================================ Mobile header fixes, 30 Jul 2026, from Burak's own iPhone screenshots. All three were invisible to desktop testing and to emulator settled-state checks; they only show on a real phone during load. ========================================================================== */ @media (max-width: 1199px) { /* 1. THE BURGER WAS ROYAL BLUE ON A PHOTOGRAPH. Measured rgb(10,23,118) sitting over the hero image: effectively invisible. The inline critical rule was out-specified by a later sheet, so this one carries !important and matches the theme's own selector depth. The Royal bars correctly return once the header goes solid on scroll. */ html body.iws-transparent-hero .site-header:not(.iws-solid) .navigation .mobile-menu-container.navbar-toggle span, html body.iws-transparent-hero .site-header:not(.iws-solid) .mobile-menu-container.navbar-toggle span { background: #FFFFFF !important; } /* 2. LOGO PARITY BETWEEN HEADER AND DRAWER. Burak spotted the mismatch again on 30 Jul. The 41px below was measured off the header on 29 Jul and hardcoded, and the header rule has since become height:clamp(40px,10.5vw,48px) in iws-global.css, so the copy drifted: correct at 390px, 4.1px small at 430px, 7px small at 600px. Copying another element's COMPUTED value is what fails here; carry the same expression instead and it cannot drift. Keep this identical to the header rule in iws-global.css @media (max-width:900px). */ html body .iws-mm-head img, html body .iws-mm-head .phys-logo img, html body .iws-mm-head a img { height: clamp(40px, 10.5vw, 48px) !important; width: auto !important; max-height: none !important; } /* 3. THE THEME'S "Back" ROW LEAKED INTO THE DRAWER ROOT. It belongs to the theme's own submenu navigation and has no meaning at the top level of our drawer, where there is nothing to go back to. It computes to display:none in Chrome emulation but Burak photographed it visible on iOS Safari, so it is suppressed explicitly rather than left to chance. */ html body .thim-ekits-menu__icon-menu-back { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ============================================================================ DRAWER BACKGROUND, restored 30 Jul 2026. Symptom: the open drawer was fully transparent, so the hero photograph and the H1 showed straight through the menu and "For Schools" sat underneath "A British online school". Cause, and it is a regression from our own 29 Jul collision fix. iws-legacy.css carries the transparent-hero header rule: html body.iws-transparent-hero:not(.mobile-menu-open) .site-header:not(.iws-solid) .width-navigation { background:transparent !important; background-color:transparent !important } `.width-navigation` IS the drawer, so that rule was only ever kept off the open drawer by its own `:not(.mobile-menu-open)` guard. On 29 Jul we took the theme's drawer handler out of the loop to stop it fighting ours, and iws-menu.js:201 now actively removes `mobile-menu-open`. The guard therefore never disengages and the rule paints the drawer transparent. Fix by out-specifying, not by adding `mobile-menu-open` back: that class has six other dependents across iws-global.css, iws-global.js and iws-legacy.css, and re-adding it to satisfy one CSS guard would be a change with five unknown side effects. iws-legacy.css is generated by build_legacy.py and is not edited by hand either. The legacy selector is (0,5,2) and carries !important. The selector below is (0,6,2) — html + body, then .site-header .navigation with .width-navigation and .main-navigation each doubled — so it wins on specificity rather than on source order, which a re-ordered enqueue could silently flip. Gradient, not a flat fill, per the 25 Jul rule, and it restates the exact stops already declared for this panel above: Deep Navy #070D2E and Navy Glow #13266B, both named tokens (R5). */ @media (max-width: 1199px) { html body .site-header .navigation .width-navigation.width-navigation.main-navigation.main-navigation { background: linear-gradient(168deg, #070D2E 0%, #13266B 52%, #070D2E 100%) !important; background-color: #070D2E !important; } } /* ========================================================================== THE CHEVRON WAS DEAD, AND IT WAS NOT OUR CHEVRON THAT WAS BEING TAPPED. 30 Jul 2026, Burak: "the arrow buttons are not working, I have to specifically click on the texts to open the menu further." Measured, not guessed. document.elementFromPoint() at the centre of the visible chevron returned span.thim-ekits-menu__icon — the THEME's icon element. It is position:absolute, z-index:2, 52x52, and its innerHTML is EMPTY: it paints nothing at all, because the icon font it used was removed. Our own .iws-mm-toggle button is 56x56 at the same origin with z-index:auto, and the chevron a user actually sees is the SVG inside it, underneath. So an invisible 52px square was swallowing every tap on a 56px button. Only the 2px border around the edge ever reached us, which is why the label worked (its own listener) and the arrow did not. Neither handler was broken; nothing was ever reaching them. pointer-events:none rather than display:none — the span carries no content, so hiding it and letting it through look identical, but letting it through cannot disturb any theme layout that counts on the element existing. Scoped to the drawer so the desktop mega-menu is untouched. Verified in-page before shipping: element at the chevron centre becomes our svg, a real tap yields exactly ONE 'iws-open' toggle from iws-menu.js:85, submenu height 2px -> 315.5px, aria-expanded true, no navigation. AMENDED 30 Jul 2026 -- pointer-events:none was RIGHT ABOUT THE HIT TEST AND WRONG ABOUT THE PAINT. I read the span's innerHTML, saw "", and concluded it drew nothing. It draws a chevron from its ::before: content:"", 9x9, two 2px borders (right + bottom) rotated 45deg, coloured rgb(10,23,118) -- Royal Blue #0A1776. An empty element still paints through a pseudo-element. Against the navy drawer that Royal Blue is nearly invisible on a desktop panel, which is how it survived several screenshot checks, but on Burak's phone it reads clearly as a SECOND chevron sitting behind ours (his 30 Jul screenshot). display:none removes the duplicate glyph AND the hit blocker in one rule, so it supersedes pointer-events:none rather than sitting alongside it. Scoped to the drawer, so the desktop mega-menu keeps its own caret. */ @media (max-width: 1199px) { html body #iws-mobile-drawer .thim-ekits-menu__icon { display: none !important; } } /* ========================================================================== THE SUBMENU LINKS WERE NOT CLICKABLE ON A TOUCH SCREEN. 30 Jul 2026, Burak: "most of the underneath buttons are not clickable most of the time and its super buggy." ROOT CAUSE, traced by walking the ancestor chain from a dead link rather than by guessing: the theme's frontend.css declares .thim-ekits-menu__dropdown { pointer-events: none } as the dropdown's HIDDEN state, and gives it back only here: .thim-ekits-menu__has-dropdown:hover > .thim-ekits-menu__dropdown .thim-ekits-menu__is-hover > .thim-ekits-menu__dropdown { pointer-events: visible } Both are :hover. A touch screen has no hover, so in the drawer that panel NEVER regains pointer events: the links render, they have real boxes, and every tap falls straight through them to the
  • underneath. pointer-events is inherited, so .iws-mm-left, the
  • s and the s were all computing 'none' from that single declaration on the