/* Shared desktop header treatment based on the homepage. */ header{height:84px!important;background:rgba(255,253,248,.97)!important;border-bottom:1px solid rgba(13,74,47,.08)!important;position:sticky!important;top:0!important;z-index:190!important} header .head{height:100%;min-height:0!important;display:flex;align-items:center;justify-content:space-between;gap:22px} /* events.css gives .head min-height:92px, taller than the fixed header, which pushed the logo block down on event pages. */ header .logo{display:flex;align-items:center;flex:none} header .logo img,header .logo .mark img{display:block;width:250px!important;height:71px!important;object-fit:contain!important;object-position:left center!important} header .head>nav,header .desktop-nav{display:flex;align-items:center;justify-content:center;gap:2px!important} header .navlink{display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 12px!important;border-radius:12px;color:#33453b;font-family:var(--fb,var(--sans,"Plus Jakarta Sans",sans-serif));font-size:13px!important;font-weight:800;line-height:1.2;white-space:nowrap;transition:.22s} header .navlink:hover,header .navlink.current,header .navlink.active{background:var(--gp,var(--mint,#e8f3ed));color:var(--gd,var(--green,#0d4a2f))} header .nav-special{background:#fff2c9!important;border:1px solid rgba(244,182,36,.48)!important;padding-inline:16px!important} header .drop{position:relative} header .dropmenu{position:absolute;left:50%;top:calc(100% + 13px);width:250px;padding:9px;background:#fff;border:1px solid rgba(13,74,47,.09);border-radius:17px;box-shadow:0 22px 60px rgba(7,51,31,.16);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:.22s;z-index:80} header .drop:hover .dropmenu,header .drop:focus-within .dropmenu{opacity:1;visibility:visible;transform:translate(-50%,0)} header .dropmenu:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} header .dropmenu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:11px;color:#53645b;font-family:var(--fb,var(--sans,"Plus Jakarta Sans",sans-serif));font-size:12px;font-weight:700;transition:.18s} header .dropmenu a:hover{background:var(--gp,var(--mint,#e8f3ed));color:var(--gd,var(--green,#0d4a2f))} header .dropmenu a span{color:var(--gold,#f4b624);font-size:15px} header .nav-caret{display:inline-grid;place-items:center;margin-left:1px;color:currentColor;font-family:inherit;font-size:10px!important;font-weight:800;line-height:1;transform:translateY(1px)} header .dropmenu a>span{width:20px;height:20px;flex:none;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:0!important;font-weight:700;line-height:1} header .dropmenu a>span:before{content:"→";font-size:17px} header .head>.btn,header .head>.enquire-btn{flex:none;min-width:132px;justify-content:center} @media(max-width:1100px){header .logo img,header .logo .mark img{width:218px!important}header .navlink{padding-inline:9px!important;font-size:12px!important}header .head{gap:12px}} @media(max-width:980px){header .head>nav,header .desktop-nav,header .head>.btn,header .head>.enquire-btn{display:none!important}header .mob-toggle{display:flex!important}} @media(max-width:640px){header{height:72px!important}header .logo img,header .logo .mark img{width:215px!important;height:60px!important}} @media(max-width:430px){header{height:68px!important}header .logo img,header .logo .mark img{width:190px!important;height:55px!important}} /* ── Sitewide sticky header (same behaviour as the Academics page) ── Several pages set overflow-x:hidden on BOTH html and body. That turns into its own scroll container and silently disables position:sticky. Keeping visible lets body's overflow propagate to the viewport (horizontal overflow stays hidden, menu scroll-lock still works). */ :root{--sticky-header-h:84px} html:root{overflow:visible!important;scroll-padding-top:calc(var(--sticky-header-h) + 16px)} html:root:has(.anchor-nav){scroll-padding-top:calc(var(--sticky-header-h) + 72px)} body{overflow-x:hidden} /* WordPress (Jupiter) wrappers must not clip or scroll either, or sticky breaks on the live site. */ #theme-page,#theme-page .theme-page-wrapper,#theme-page .theme-content,.mk-main-wrapper-holder,.mk-page-section,.vc_row,.vc_column_container,.wpb_wrapper,.jupiter-donut-height-full,.master-holder{overflow:visible!important} /* The announcement bar scrolls away; only the header stays pinned. */ .sticky-shell{display:contents!important} /* In-page section navs sit directly under the pinned header instead of behind it. */ .anchor-nav{top:var(--sticky-header-h)!important} .admin-bar header{top:32px!important} @media(max-width:782px){.admin-bar header{top:46px!important}} @media(max-width:600px){.admin-bar header{top:0!important}} @media(max-width:640px){:root{--sticky-header-h:72px}} @media(max-width:430px){:root{--sticky-header-h:68px}} /* ── CBSE | Cambridge curriculum badge beside the logo (added by shared-footer.js on every page) ── */ header .logo.has-curriculum img,header .logo.has-curriculum .mark img{width:auto!important} header .logo.has-curriculum .mark{width:auto!important} header .curriculum-badge{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:none;margin-left:14px;padding-left:14px;border-left:1px solid rgba(13,74,47,.14);font-family:var(--fb,var(--sans,"Plus Jakarta Sans",system-ui,sans-serif));line-height:1;white-space:nowrap} header .curriculum-badge .cb-boards{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:#fff3c7;border:1px solid rgba(240,180,41,.6);color:#0d4a2f;font-size:12px;font-weight:800;letter-spacing:.04em} header .curriculum-badge .cb-sep{width:1px;height:11px;background:rgba(13,74,47,.35)} @media(max-width:1100px){header .curriculum-badge{margin-left:10px;padding-left:10px}header .curriculum-badge .cb-boards{padding:5px 9px;font-size:11px;gap:6px}} @media(max-width:430px){header .curriculum-badge{margin-left:8px;padding-left:8px;gap:3px}header .curriculum-badge .cb-boards{padding:4px 8px;font-size:10px;gap:5px}} /* Badge + "Apply for Admissions": keep every header on one line (some pages cap header content at 1120px). */ @media(min-width:981px){header .logo.has-curriculum img,header .logo.has-curriculum .mark img{height:56px!important}header .head{gap:16px!important}header .navlink{padding-inline:10px!important}header .curriculum-badge{margin-left:12px;padding-left:12px}header .head>.header-apply{padding-inline:18px!important}} @media(min-width:981px) and (max-width:1180px){header .logo.has-curriculum img,header .logo.has-curriculum .mark img{height:52px!important}header .navlink{padding-inline:8px!important}header .head>.header-apply{padding:10px 14px!important;font-size:12px!important;min-width:0!important}} @media(max-width:380px){header .logo.has-curriculum img,header .logo.has-curriculum .mark img{height:51px!important}header .curriculum-badge{margin-left:6px;padding-left:6px}header .curriculum-badge .cb-boards{padding:4px 7px;font-size:9.5px;gap:4px;letter-spacing:.02em}} header .head>.header-apply{white-space:nowrap} /* ── Always-visible actions (added by shared-footer.js) ── Desktop: WhatsApp chat button bottom right. Mobile: bottom bar with Apply for Admissions + WhatsApp. */ .site-dock{position:fixed;right:24px;bottom:24px;z-index:180;display:flex;align-items:center;gap:10px;font-family:var(--fb,var(--sans,"Plus Jakarta Sans",system-ui,sans-serif))} .site-dock-apply{display:none} .site-dock-wa{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 14px 34px rgba(7,51,31,.28);transition:transform .25s,box-shadow .25s} .site-dock-wa:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 40px rgba(7,51,31,.34)} .site-dock-wa svg{width:30px;height:30px;fill:currentColor} .float-cta{right:96px!important} @media(max-width:980px){ .site-dock{left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,248,.97);border-top:1px solid rgba(13,74,47,.1);box-shadow:0 -10px 30px rgba(7,51,31,.12);backdrop-filter:blur(10px)} .site-dock-apply{flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;background:#f0b429;color:#0d4a2f;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 10px 26px rgba(240,180,41,.32)} .site-dock-wa{width:50px;height:50px;box-shadow:none} .site-dock-wa svg{width:26px;height:26px} .float-cta{display:none!important} .shared-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important} } /* Desktop: CBSE | Cambridge badge sits directly below the logo (mobile keeps it beside the logo). */ @media(min-width:981px){ header .logo.has-curriculum{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;align-self:center;margin:0!important;padding:0!important;height:auto!important} header .logo.has-curriculum .mark{margin:0!important;padding:0!important;height:auto!important;line-height:0} header .logo.has-curriculum img,header .logo.has-curriculum .mark img{height:53px!important} :root{--sticky-header-h:92px} header{height:92px!important} header .curriculum-badge{margin-left:0;padding-left:0;border-left:0} header .curriculum-badge .cb-boards{padding:3px 9px;font-size:10.5px;gap:6px;letter-spacing:.04em} header .curriculum-badge .cb-sep{height:9px} } /* Nav dropdown caret: a small CSS triangle, vertically centred on the link text (the ▾ glyph sat on the baseline). */ header .nav-caret{display:inline-block!important;width:0!important;height:0!important;margin-left:4px!important;font-size:0!important;line-height:0!important;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transform:none!important;align-self:center} /* Phones: keep logo + badge + menu button on one row with the larger logo. */ @media(max-width:430px){header .head{gap:10px!important}header .curriculum-badge{margin-left:5px;padding-left:5px}header .curriculum-badge .cb-boards{padding:4px 7px;font-size:9.5px;gap:4px;letter-spacing:.02em}} @media(max-width:340px){header .logo.has-curriculum img,header .logo.has-curriculum .mark img{height:44px!important}header .head{gap:8px!important}header .curriculum-badge{margin-left:4px;padding-left:4px}header .curriculum-badge .cb-boards{padding:3px 6px;font-size:9px}} /* ── Same header container on every page (pages set different .wrap widths and paddings) ── */ header .head,.topbar .announcement{box-sizing:border-box!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;width:calc(100% - 36px)!important} @media(min-width:641px){header .head,.topbar .announcement{width:calc(100% - 48px)!important}} @media(min-width:981px){header .head,.topbar .announcement{width:min(1120px,calc(100% - 80px))!important}} /* ── Announcement bar: identical on every page, homepage style without the label (structure normalised by shared-footer.js) ── */ .topbar{display:flex!important;align-items:center!important;min-height:46px!important;padding:0!important;background:#0d4a2f!important;color:rgba(255,255,255,.9)!important;font-family:var(--fb,var(--sans,"Plus Jakarta Sans",system-ui,sans-serif))!important;font-size:13px!important;font-weight:800!important;line-height:1.5!important;overflow:hidden!important;border:0!important} .topbar .announcement{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:center!important;gap:0!important;white-space:nowrap} .topbar .announcement-label{display:none!important} .topbar .ticker-window{min-width:0;overflow:hidden} .topbar .ticker{display:flex!important;width:max-content!important;white-space:nowrap;font-size:13px!important;animation:dpsTickerRoll 30s linear infinite!important} .topbar .ticker span{padding:0 24px!important;font-size:13px!important;text-transform:none!important} .topbar .ticker span:before{content:"•"!important;color:#f0b429!important;margin-right:12px!important} .topbar:hover .ticker{animation-play-state:paused!important} @keyframes dpsTickerRoll{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.topbar .ticker{animation-duration:90s!important}} /* ── Header button: same size and colours on every page ── */ header .head>.header-apply{align-items:center!important;justify-content:center!important;min-height:46px!important;border:0!important;border-radius:999px!important;background:#f0b429!important;color:#0d4a2f!important;font-family:var(--fb,var(--sans,"Plus Jakarta Sans",system-ui,sans-serif))!important;font-weight:800!important;line-height:1.2!important;letter-spacing:.01em!important;text-transform:none!important;box-shadow:0 12px 30px rgba(240,180,41,.3)!important} @media(min-width:981px){header .head>.header-apply{display:inline-flex!important}} @media(max-width:980px){header .head>.header-apply{display:none!important}} @media(min-width:1181px){header .head>.header-apply{font-size:13px!important;padding:12px 20px!important}} /* ── Nav spacing: room between items so the selected (green) and Boarding (gold) pills don't touch ── */ @media(min-width:981px){header .head>nav,header .desktop-nav{gap:6px!important}header .nav-special{margin-inline:6px!important}} /* Phones/tablets: every page's header row uses the full container (some pages add their own side padding and margins). */ @media(max-width:980px){ html body header .head{padding-left:0!important;padding-right:0!important} html body header .head>.logo{margin:0!important;flex:0 1 auto!important;min-width:0!important} html body header .head>.mob-toggle{margin:0!important;flex:none!important} } /* Very small phones: the badge sits under the logo so logo, badge and menu button fit on one row. */ @media(max-width:340px){ header .logo.has-curriculum{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px} header .logo.has-curriculum img,header .logo.has-curriculum .mark img{height:42px!important} header .curriculum-badge{margin-left:0!important;padding-left:0!important;border-left:0!important} header .curriculum-badge .cb-boards{padding:2px 7px;font-size:9px;gap:4px} header .curriculum-badge .cb-sep{height:8px} } /* Some pages' own mobile CSS (header .wrap.head padding, .head .mark height) out-rank the shared reset; these selectors win. */ @media(max-width:980px){ html body header .wrap.head.head,html body header .head.head.head{padding-left:0!important;padding-right:0!important} html body header .logo.has-curriculum .mark.mark{height:auto!important;min-height:0!important;line-height:0} }