/* ===================================================================== CUHK Business School header — faithful to the 2026 style guide. Tokens, sizing, dropdown behaviour and SVG icons taken from the compiled style-guide CSS. ===================================================================== */ /* Myriad Pro (self-hosted to match the style guide typography) */ @font-face { font-family: "Myriad Pro"; src: url("fonts/MyriadPro-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Myriad Pro"; src: url("fonts/MYRIADPRO-REGULAR.OTF") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Myriad Pro"; src: url("fonts/MYRIADPRO-SEMIBOLD.OTF") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Myriad Pro"; src: url("fonts/MYRIADPRO-BOLD.OTF") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* --util-700/500, --heading-purple, --shadow, --cuhk-gutter come from wp-content/mu-plugins/cuhk-shared/variables.css (:root, loaded first — inherited everywhere, so no more need to duplicate them onto .header__overlay just because it's a sibling rather than a descendant). Only genuinely header-specific tokens live here. */ .cuhk-header, .header__overlay { --menu-foreground: #222; --menu-purple: #f0ecf7; --divider: rgba(46, 26, 76, 0.15); --font: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* Hide the block theme's own header template part — we replace it. */ .wp-site-blocks header.wp-block-template-part { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- shell */ /* Fixed from the very top (matches bschool.cuhk.edu.hk's ".header.fixed"), not just after the data-scroll threshold. Deliberately position:fixed, not sticky — cuhk-shared/reset.css sets `html, body { overflow-x:hidden !important }` site-wide (prevents horizontal scroll), and that rule silently disables position:sticky on every descendant, which is why the header never actually stuck before. Fixed positioning isn't subject to that limitation. Removing the header from flow this way means the page content needs a compensating top offset — see `padding-top: var(--cuhk-header-h)` added to .wp-site-blocks below, using the same live-measured height variable cuhk-header.js already maintains for the mobile drawer. */ .cuhk-header { position: fixed; z-index: 50; inset-inline: 0; top: 0; background: #fff; font-family: var(--font); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* always-on, per style guide .header */ } /* WP's admin bar is also position:fixed at top:0 with a much higher z-index (99999) — when logged in it would otherwise render on top of our now-fixed header. Push the header down below it, mirroring WordPress core's own admin-bar breakpoint (782px) for the bar's height change from 32px to 46px. */ body.admin-bar .cuhk-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .cuhk-header { top: 46px; } } .cuhk-header * { box-sizing: border-box; } /* Compensates for the header now being position:fixed (out of flow) — without this, page content would render underneath it. Reuses the same --cuhk-header-h variable cuhk-header.js already keeps in sync with the header's live (including shrink-on-scroll) height. */ .wp-site-blocks { padding-top: var(--cuhk-header-h, 105px); } /* Force Myriad Pro onto the header text. Twenty Twenty-Five sets font-family directly on (:where(a){font-family:noto-sans}) and on , which would otherwise win over an inherited value — so we declare it directly here. */ .cuhk-header, .cuhk-header a, .cuhk-header button, .cuhk-header input, .cuhk-header .header__nav .nav > .menu-item > a, .cuhk-header .header__nav .nav .sub-menu a, .header__overlay, .header__overlay a, .header__overlay button, .header__overlay input { font-family: "Myriad Pro", "Noto Sans TC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* Header content matches the theme's content width (TT5 wideSize 1340px) with the same side gutters (root padding spacing-50 = clamp(30px,5vw,50px)). */ .cuhk-header .header__wrapper { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-inline: auto; max-width: var(--wp--style--global--wide-size, 1340px); /* = .alignwide content width */ padding-block: 14px 18px; padding-inline: var(--wp--preset--spacing--30, 20px); /* inner inset, like the content div */ transition: padding 0.2s; } @media (min-width: 64rem) { .cuhk-header .header__wrapper { padding-block: 16px 20px; } } @media (min-width: 80rem) { .cuhk-header .header__wrapper { padding-block: 20px 26px; } } /* logo */ .cuhk-header .header__logo { display: flex; height: 60px; /* internal comments #7.3: reduced from 74px so the header content fits within its fixed width */ flex: none; transition: all 0.2s; } .cuhk-header .header__logo img, .cuhk-header .header__logo .header__logo-img { width: auto; height: 100%; max-width: none; } .cuhk-header .header__logo-text { font-weight: 700; font-size: 1.25rem; color: var(--heading-purple); align-self: center; } @media (min-width: 48rem) { .cuhk-header .header__logo { height: 78px; } } /* internal comments #7.3: reduced from 97px - was missed in the first pass, only the base/mobile height got reduced then */ @media (min-width: 80rem) { .cuhk-header .header__logo { height: 94px; } } /* was 117px */ /* internal comments #7.2: 2nd (Executive Education) logo sits beside the Site Logo - reuses .header__logo's own responsive height scaling above (same class). No flex gap here: the Chinese asset (6344) carries its own internal whitespace, so a gap on top of that read as too much separation. The English asset needs one though - see the margin-left below. */ .cuhk-header .header__logos { display: flex; align-items: center; } /* English only: restores the 16px separation the flex gap above used to provide for every language. Needed here and not for Chinese because the English state is also the one carrying the crop below - cropping its 56px of baked-in transparent padding away leaves its text with no whitespace of its own, so with no gap it would butt straight up against the Site Logo (Chinese keeps its own padding and doesn't). Applied as a margin on the element rather than a :has() gap on the parent, so it composes with that crop (which is a negative margin on the child img, not on this element) instead of fighting it. */ .cuhk-header .header__logo--secondary-trim { margin-left: 16px; } /* Client feedback: the English text should sit at the same left offset as the Chinese text. Root cause: the English PNG (5745) itself bakes in 56px of transparent padding before the "Executive Education" text starts (confirmed via a bounding-box scan: content spans x=56..234 of a 234px-wide canvas), while the Chinese PNG's content starts at x=0. Pulling the image left by that same proportion (56/283 of its own rendered height, since width scales from height:100% - see .header__logo img above) crops the visible dead space away; because .header__logo--secondary-trim is itself a flex container (inherits .header__logo's display:flex), a negative margin on its flex-item child also shrinks the container's own auto width by the same amount, so this doesn't leave dead space on the right either. One value per breakpoint, mirroring .header__logo's own height rules above (and their scroll-state variants) 1:1 - not expressible as a single CSS value since px margins can't reference another element's scaled height. NOTE: this deliberately does NOT draw a divider line. An earlier revision added one here (border-left) to match a line baked into the CN asset's own left edge - client clarified 2026-09-08 (internal comments #1.1) that the line is unwanted and is being removed from the CN artwork itself, so replicating it in CSS was backwards. */ .cuhk-header .header__logo--secondary-trim .header__logo-img { margin-left: -12px; } @media (min-width: 48rem) { .cuhk-header .header__logo--secondary-trim .header__logo-img { margin-left: -15px; } } @media (min-width: 80rem) { .cuhk-header .header__logo--secondary-trim .header__logo-img { margin-left: -19px; } } body[data-scroll="true"] .cuhk-header .header__logo--secondary-trim .header__logo-img { margin-left: -10px; } @media (min-width: 48rem) { body[data-scroll="true"] .cuhk-header .header__logo--secondary-trim .header__logo-img { margin-left: -11px; } } @media (min-width: 80rem) { body[data-scroll="true"] .cuhk-header .header__logo--secondary-trim .header__logo-img { margin-left: -14px; } } /* shrink on scroll */ body[data-scroll="true"] .cuhk-header .header__logo { height: 50px; } @media (min-width: 48rem) { body[data-scroll="true"] .cuhk-header .header__logo { height: 57px; } } @media (min-width: 80rem) { body[data-scroll="true"] .cuhk-header .header__logo { height: 73px; } } body[data-scroll="true"] .cuhk-header .header__wrapper { padding-block: 8px 10px; } @media (min-width: 64rem) { body[data-scroll="true"] .cuhk-header .header__wrapper { padding-block: 8px 8px; } } @media (min-width: 80rem) { body[data-scroll="true"] .cuhk-header .header__wrapper { padding-block: 12px 14px; } } body[data-scroll="true"] .cuhk-header .header__nav { transform: translateY(-10px); } /* deeper shadow once scrolled (position:sticky itself is unconditional now, see .cuhk-header above) */ body[data-scroll="true"] .cuhk-header { box-shadow: var(--shadow); } /* ------------------------------------------------------------ desktop nav */ .cuhk-header .header__nav { flex: 1 1 auto; transition: transform 0.2s; } .cuhk-header .header__nav .nav { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 12px; /* style guide base inter-item spacing */ margin-inline-end: 40px; position: relative; list-style: none; margin-block: 0; padding: 0; } .cuhk-header .header__nav .nav > .menu-item { display: flex; align-items: center; gap: 6px; /* internal comments #7.3: reduced from 12px - spacing between item text and its dropdown arrow */ position: relative; } .cuhk-header .header__nav .nav > .menu-item > a { color: var(--menu-foreground); text-decoration: none !important; font-size: 1.125rem; font-weight: 400; /* normal */ cursor: pointer; white-space: nowrap; } @media (hover: hover) { .cuhk-header .header__nav .nav > .menu-item > a:hover { color: var(--util-700); opacity: 0.75; } } /* caret on parents */ .cuhk-header .header__nav .nav > .menu-item:has(ul)::after { content: ""; display: inline-block; width: 12.446px; height: 6.223px; transform: translateY(35%); background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTQgOCIgZmlsbD0ibm9uZSI+CiAgPHBhdGggb3BhY2l0eT0iMC45IiBkPSJNMC42NzUwNDkgMC44Mjg3MzRMNi44OTgxOSA3LjA1MTc2TDEzLjEyMTEgMC44Mjg3MzUiIHN0cm9rZT0iI0FDQUNBQyIgc3Ryb2tlLW9wYWNpdHk9IjAuOSIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=') 50% / contain no-repeat; } /* sub-menu (desktop) */ .cuhk-header .header__nav .nav .sub-menu { display: none; flex-direction: column; width: max-content; min-width: fit-content; max-width: calc(100vw - 2rem); margin-inline: -16px; list-style: none; padding: 0; box-shadow: var(--shadow); } .cuhk-header .header__nav .nav .sub-menu > .menu-item { position: relative; background: #fff; } .cuhk-header .header__nav .nav .sub-menu > .menu-item:not(:last-child) { border-bottom: 1px solid var(--divider); } @media (hover: hover) { .cuhk-header .header__nav .nav .sub-menu > .menu-item:hover { background: var(--menu-purple); } } .cuhk-header .header__nav .nav .sub-menu a { display: flex; min-width: 20ch; max-width: 30ch; font-size: 1.375rem; line-height: 30px; font-weight: 300; color: var(--heading-purple); text-decoration: none !important; } /* open on hover / keyboard focus */ .cuhk-header .header__nav .nav > .menu-item:hover > .sub-menu, .cuhk-header .header__nav .nav > .menu-item:focus-within > .sub-menu { display: flex; position: absolute; bottom: 0; transform: translateY(100%); } .cuhk-header .header__nav .nav > .menu-item:hover > .sub-menu > .menu-item, .cuhk-header .header__nav .nav > .menu-item:focus-within > .sub-menu > .menu-item { padding: 12px 24px; } /* 3rd level: the rule above only opens a top-level item's OWN sub-menu (".nav > .menu-item" = direct child of .nav = top level only) — a 2nd- level item that itself has children (e.g. "CII Insight") never got a matching hover/focus rule to reveal ITS sub-menu, so it stayed display:none forever even though the markup was correct. Flies out to the side rather than below, to avoid overlapping the 2nd-level column. */ .cuhk-header .header__nav .nav .sub-menu > .menu-item:hover > .sub-menu, .cuhk-header .header__nav .nav .sub-menu > .menu-item:focus-within > .sub-menu { display: flex; position: absolute; left: 100%; top: 0; /* Match the 2nd-level item row's width exactly, rather than sizing to this submenu's own (often shorter) text — the 2nd-level item is this submenu's containing block (it got position:relative above), so 100% resolves against it directly. */ width: 100%; } /* Flip to the left when cuhk-header.js's overflow check (on hover/focus) finds the right-opening flyout above would run off the viewport edge — e.g. a 2nd-level item under a top-level item that sits near the end of the nav bar. */ .cuhk-header .header__nav .nav .sub-menu > .menu-item.flip-left > .sub-menu { left: auto; right: 100%; } /* Same row padding as the 2nd-level items above, so 3rd-level rows match their height instead of shrinking to fit their own shorter text. */ .cuhk-header .header__nav .nav .sub-menu > .menu-item:hover > .sub-menu > .menu-item, .cuhk-header .header__nav .nav .sub-menu > .menu-item:focus-within > .sub-menu > .menu-item { padding: 12px 24px; z-index: 1; } /* ----------------------------------------------------------- icon buttons */ .cuhk-header .header__btns { flex: none; position: relative; z-index: 1; } @media (min-width: 48rem) { .cuhk-header .header__btns { margin-top: 10px; } } @media (min-width: 80rem) { .cuhk-header .header__btns { margin-top: 0; } } @media (min-width: 48rem) { body[data-scroll="true"] .cuhk-header .header__btns { padding-bottom: 8px; } } @media (min-width: 80rem) { body[data-scroll="true"] .cuhk-header .header__btns { padding-bottom: 12px; } } .cuhk-header .header__icons { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; } @media (min-width: 80rem) { .cuhk-header .header__icons { gap: 34px; } } .cuhk-header .header__icons > li { position: relative; } .cuhk-header .header__icons button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--util-500); } .cuhk-header .header__icon { width: 16px; height: auto; } /* internal comments #7.3: reduced from 20px */ @media (min-width: 48rem) { .cuhk-header .header__icon { width: 22px; } } /* was 28px */ @media (min-width: 80rem) { .cuhk-header .header__icon { width: 28px; } } /* was 36px */ .cuhk-header .header__icons button:hover { opacity: 0.75; } /* language switcher */ .cuhk-header .header__lang { position: relative; } .cuhk-header .header__lang-dropdown { display: none; position: absolute; top: 100%; right: -20px; padding-top: 12px; z-index: 10; } .cuhk-header .header__lang:hover .header__lang-dropdown, .cuhk-header .header__lang:focus-within .header__lang-dropdown { display: block; } .cuhk-header .languages { display: flex; align-items: center; gap: 4px; background: #fff; padding-inline: 8px; text-transform: uppercase; box-shadow: var(--shadow); } .cuhk-header .languages a { padding: 8px 12px; font-weight: 300; font-size: 1.375rem; line-height: 2rem; color: var(--menu-foreground); text-decoration: none !important; } .cuhk-header .languages a:hover, .cuhk-header .languages a:focus-visible { font-weight: 700; } .cuhk-header .languages a.current-language { font-weight: 600; color: var(--heading-purple); } /* search dropdown */ .cuhk-header .header__searchbar { display: none; position: absolute; top: 100%; right: -8px; margin-top: 12px; background: #fff; padding: 12px 20px; box-shadow: var(--shadow); } .cuhk-header .header__searchbar.is-open { display: block; } .cuhk-header .header__searchbar form { position: relative; } .cuhk-header .header__searchbar input[type="search"], .cuhk-header .header__searchbar .search-field { min-width: max(40vw, 20rem); border: 0; border-bottom: 1px solid #a6a6a6; font-weight: 300; outline: none; padding: 8px 30px 8px 0; } /* keep the search dropdown inside the viewport on small screens */ @media (max-width: 48rem) { .cuhk-header .header__searchbar input[type="search"], .cuhk-header .header__searchbar .search-field { min-width: min(72vw, 20rem); } } .cuhk-header .header__searchbar button[type="submit"], .cuhk-header .header__searchbar .search-submit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; font-size: 0; border: 0; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIzNyIgdmlld0JveD0iMCAwIDQwIDM3IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTQuODc1OCAyOC41MjdDMjIuNDQyMSAyOC41MjcgMjguNTc1OCAyMi4zOTMzIDI4LjU3NTggMTQuODI3QzI4LjU3NTggNy4yNjA2NSAyMi40NDIxIDEuMTI2OTUgMTQuODc1OCAxLjEyNjk1QzcuMzA5NDggMS4xMjY5NSAxLjE3NTc4IDcuMjYwNjUgMS4xNzU3OCAxNC44MjdDMS4xNzU3OCAyMi4zOTMzIDcuMzA5NDggMjguNTI3IDE0Ljg3NTggMjguNTI3WiIgc3Ryb2tlPSIjNTk1OTU5IiBzdHJva2Utd2lkdGg9IjEuMzgyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMjYuMzgyOCAyMy44NDM4TDM4LjgzNzggMzYuMjk4NyIgc3Ryb2tlPSIjNTk1OTU5IiBzdHJva2Utd2lkdGg9IjEuMzgyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') 50% / contain no-repeat; cursor: pointer; } /* show the mobile toggle only on small screens */ .cuhk-header .header__toggle { display: block; } .cuhk-header .header__nav { display: none; } @media (min-width: 80rem) { .cuhk-header .header__toggle { display: none; } .cuhk-header .header__nav { display: block; } } /* --------------------------------------------------------- mobile drawer */ .header__overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; transition: opacity 0.25s, visibility 0.25s; } .header__overlay.active { visibility: visible; opacity: 1; } /* Panel slides in from the right, starting just below the header bar (--cuhk-header-h is set in JS to the live header height). Full-width on mobile, 3/5 width on tablet (>=lg), like the style guide. */ .header__overlay .header__menu { position: absolute; top: var(--cuhk-header-h, 105px); right: 0; height: calc(100% - var(--cuhk-header-h, 105px)); width: 100%; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s; font-family: var(--font); } @media (min-width: 64rem) { .header__overlay .header__menu { width: 60%; } } .header__overlay.active .header__menu { transform: translateX(0); } .header__overlay .mobile__nav { padding: 15px 23px 117px; } @media (min-width: 64rem) { .header__overlay .mobile__nav { padding: 25px 62px 80px; } } .header__overlay .mobile__nav .nav, .header__overlay .mobile__nav .sub-menu { list-style: none; margin: 0; padding: 0; } .header__overlay .mobile__nav .nav > .menu-item { padding-block: 8px; } /* All links/toggles in the drawer */ .header__overlay .mobile__nav a { display: flex; width: 100%; margin-block: 8px; font-size: 1rem; font-weight: 400; color: var(--util-500); text-decoration: none !important; } /* No hover/focus colour change on the drawer items — they keep util-500. */ /* top-level labels are bold and a touch larger */ .header__overlay .mobile__nav .nav > .menu-item > a { font-weight: 700; position: relative; width: 100%; padding: 0; } @media (min-width: 48rem) { .header__overlay .mobile__nav .nav > .menu-item > a { font-size: 1.125rem; } } @media (min-width: 64rem) { .header__overlay .mobile__nav .nav > .menu-item > a { width: fit-content; padding-right: calc(.25em * 6); } } /* Accordion at EVERY level: any item containing a sub-menu collapses via a grid-rows trick and expands when its own toggle has aria-expanded="true". */ .header__overlay .mobile__nav .menu-item:has(> .sub-menu) { position: relative; display: grid; grid-template-rows: auto 0fr; overflow: hidden; } .header__overlay .mobile__nav .menu-item:has(> a[aria-expanded="true"]) { grid-template-rows: auto 1fr; } .header__overlay .mobile__nav .sub-menu { min-height: 0; overflow: hidden; } /* sub-menu links: 1rem / normal (400), light (300) on tablet — per style guide */ .header__overlay .mobile__nav .sub-menu a { padding-block: 4px; font-size: 1rem; font-weight: 400; } @media (min-width: 64rem) { .header__overlay .mobile__nav .sub-menu a { font-weight: 300; } } /* Expand/collapse chevron on every toggle (any depth) */ .header__overlay .mobile__nav a[data-item-has-children] { position: relative; padding-right: 24px; cursor: pointer; } .header__overlay .mobile__nav a[data-item-has-children]::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 15px; height: 7.5px; transition: transform 0.2s; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE3IDEwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTYgMC41OTYxNDVMOC41MDAxNSA4LjA5NTdMMSAwLjU5NjE0NSIgc3Ryb2tlPSIjNTk1OTU5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPg==') 50% / contain no-repeat; } .header__overlay .mobile__nav .menu-item:has(> a[aria-expanded="true"]) > a[data-item-has-children]::after { transform: translateY(-50%) rotate(180deg); }