/* Theme Name: HCDSB Base child theme Description: Child theme of HCDSB Base, the starting theme for new HCDSB WordPress installs. Bootstrap 5. Author: HCDSB Creative Services Author URI: https://hcdsb.org Template: hcdsb-base Version: 4.1.1 Requires PHP: 8.0 Text Domain: hcdsb-td */ /* Template above is the parent theme's DIRECTORY name, not a label. It has to match the folder on disk or WordPress reports this theme as broken. */ /* ========================================================================== * CONTENTS * -------------------------------------------------------------------------- * 4. Header & navigation * 8. Footer * 10. Theme skin — the :root colour tokens, and the header, menu and footer * rules that use them * 11. Site palettes * -------------------------------------------------------------------------- * This stylesheet deliberately covers only the header, menu and footer. * Content styling (typography, components, page sections) is to be built * fresh on Bootstrap 5; the section numbers are kept so the palette notes * and comments that refer to "section 4" or "section 10" stay correct. * * CONVENTIONS * - Every colour in section 10 is a var(--sk-*) token; section 11 supplies * per-site values. Do not hardcode a colour in section 10. * - Section 11 must load last so palettes resolve before use. * - Explain WHY in comments, not WHAT. The selector already says what. * ========================================================================== */ /* ========================================================================== * 4. HEADER & NAVIGATION * Top bar, mega menu, mobile toggle, header CTA. * ========================================================================== */ /*------------------------ Header CTA inside the mobile menu ------------------------*/ /* The Logo Bar widget area repeated at the top of the collapsed menu, printed * by partials/header/nav.php (child override). * * The parent hides .logo-sidebar below 992px, which took the New Student * Registration button with it on phones and tablets. Bootstrap collapses this * navbar at the same 992px, so the two swap over exactly — the button is in the * header above that width and in the menu below it, and there is no width where * neither shows. * * display:none rather than visibility or clipping, on purpose: the widget is in * the DOM twice, and display:none takes the inactive copy out of the * accessibility tree, so a screen reader meets the button once. */ .hcdsb-nav-cta { display: none; } @media (max-width: 991px) { .hcdsb-nav-cta { display: block; /* Top margin clears the header edge — the menu opens flush against it and the button read as stuck to the bottom of the navbar without this. */ margin: 1rem 0 0.75rem; padding: 0 15px 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* The wrapper is built to sit at the right-hand end of the logo bar. In the menu it is a full-width block, so its flex alignment and the padding that matched the header container both have to be undone. */ .hcdsb-nav-cta .hcdsb-cta-wrap { display: block; height: auto; padding-right: 0; } /* Full width in the menu: a centred button in a stack of left-aligned menu items reads as unrelated to them, and thumb targets should be generous. min-height rather than more padding alone: it guarantees the tap target whatever the font size resolves to, and the base rule already centres the label with flex, so the extra height is shared evenly above and below. 48px sits just above the 44px most touch guidance asks for and matches the height of the menu rows beneath it — enough to hit reliably, not so much that it looms over the menu. */ .hcdsb-nav-cta .hcdsb-cta { display: flex; justify-content: center; width: 100%; min-height: 48px; padding: 0.85em 1.15em; } /* The parent floats widgets left inside .logo-sidebar; this copy is not in one, but the widget's own styling may still carry over. */ .hcdsb-nav-cta .sidebar-widget { float: none; width: 100%; margin: 0; } } /* Top bar widget area */ .top-bar .top p { margin:0; } /* Desktop hover menus, with hover intent. * * This rule is why Appearance > Customize > Header > Hover Menu has no effect: * that setting only governed the parent theme's old JavaScript, and this opens the menus in * CSS regardless. Set it to Click and menus still open on hover above 1025px, * because of these rules. * * It is also why Hover Menu Delay did nothing. The old version switched * display, which cannot be delayed or transitioned — the menu appeared the * instant the pointer crossed the item, so a mouse travelling across the bar * threw open every menu it passed. * * The fix is to keep the menu displayed at all times and hide it with * visibility and opacity, which CAN be delayed: * * opening 250ms long enough to ignore a pointer passing through, * short enough that a deliberate hover feels immediate * closing 400ms forgives the diagonal drift from a parent item toward * the submenu under it, which is where menus that close * instantly become infuriating * * visibility is what makes the delay real: it steps between hidden and visible * with no in-between, so its transition-delay controls exactly when the menu * starts to exist. Opacity then fades it. On close, visibility waits for the * fade to finish (0.4s delay + 0.2s fade) before flipping back. * * display stays block throughout, which is safe because a dropdown is * absolutely positioned and so takes no space in the layout, and * visibility: hidden also removes it from the tab order and from screen * readers. * * Only in #masthead, the bar across the top. In a side menu (#navbar-slide) * the list is a column, and a dropdown that is always displayed would hold * its space open under its parent; there, Bootstrap's click opens it inline. * * Keyboard and click open with NO delay — a deliberate action should never * wait. :focus-within covers tabbing into a menu, .show covers Bootstrap's * click handler for any site set to Click. */ @media only screen and (min-width: 1025px) { #masthead .menu-item-has-children > .dropdown-menu, #masthead .menu-item-has-children > ul.sub-menu { display: block !important; visibility: hidden; opacity: 0; z-index: 9999; transition: opacity 0.2s ease 0.4s, visibility 0s linear 0.6s; } #masthead .menu-item-has-children:hover > .dropdown-menu, #masthead .menu-item-has-children:hover > ul.sub-menu { visibility: visible; opacity: 1; transition: opacity 0.2s ease 0.25s, visibility 0s linear 0.25s; } /* Deliberate: open at once. */ #masthead .menu-item-has-children:focus-within > .dropdown-menu, #masthead .menu-item-has-children:focus-within > ul.sub-menu, #masthead .menu-item-has-children > .dropdown-menu.show, #masthead .menu-item-has-children > ul.sub-menu.show { visibility: visible; opacity: 1; transition: none; } /* A mega menu's columns are Bootstrap 5 grid columns, which only sit side by side in a flex row; display: block above stacked them. Same always-displayed approach, so the delays above still apply. */ #masthead .menu-item-object-hcdsb_mega_menu > .dropdown-menu { display: flex !important; flex-wrap: wrap; } } @media only screen and (min-width: 1025px) and (prefers-reduced-motion: reduce) { /* The wait stays — it is intent, not decoration. The fade goes. */ #masthead .menu-item-has-children > .dropdown-menu, #masthead .menu-item-has-children > ul.sub-menu, #masthead .menu-item-has-children:hover > .dropdown-menu, #masthead .menu-item-has-children:hover > ul.sub-menu { transition: opacity 0s linear 0.4s, visibility 0s linear 0.4s; } #masthead .menu-item-has-children:hover > .dropdown-menu, #masthead .menu-item-has-children:hover > ul.sub-menu { transition: opacity 0s linear 0.25s, visibility 0s linear 0.25s; } } /* Third-level flyouts open to the right of their parent item, which near the * right-hand end of the bar runs past the edge of the window. That happens * even with every menu closed: display stays block (above), and a hidden, * absolutely positioned menu still counts toward the page's scroll width, so * the whole page scrolled sideways. theme.js measures each flyout on load and * resize and adds .hcdsb-flyout-left where it would cross the edge. */ @media only screen and (min-width: 1025px) { .menu .dropdown-submenu.hcdsb-flyout-left > .dropdown-menu { left: auto; right: 100%; } } /* menu item labels start */ li .menu-label-black-new a:after { content: "NEW"; color: #ffffff; font-size: 11px; margin-left: 8px; background: #000000; padding: 2px 7px; border-radius:10px; } li .menu-label-black-updated a:after { content: "UPDATED"; color: #ffffff; font-size: 11px; margin-left: 8px; background: #000000; padding: 2px 7px; border-radius:10px; } li .menu-label-white-new a:after { content: "NEW"; color: #000000; font-size: 11px; margin-left: 8px; background: #ffffff; padding: 2px 7px; border-radius:10px; } li .menu-label-white-updated a:after { content: "UPDATED"; color: #000000; font-size: 11px; margin-left: 8px; background: #ffffff; padding: 2px 7px; border-radius:10px; } /* menu item labels end */ @media (max-width: 991px) { /* The 10px bottom margin that used to be here is gone: the rows are separated by a hairline now (see "Compact top-level rows on mobile" below), and a gap plus a line is one separator too many. font-size is superseded there too. */ .menu .navbar-nav > li > a { border-radius: 0; font-size: 18px; } } .navbar-nav a.show, .navbar-nav a.show:focus, .navbar-nav a.show:hover { border-color: rgb(255, 255, 255, 0.30); } .menu-item-has-children { font-size: 15px; } .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a { font-size: 15px; line-height: 1.6em; color: #fff; } .navbar-sticky .navbar-collapse { max-height: 500px; } #masthead { box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4) !important; } @media only screen and (min-width: 992px) and (max-width: 1100px) { #masthead.menu, .menu-item-has-children { font-size: 14px !important; } } @media only screen and (min-width: 992px) and (max-width: 1100px) { .menu .navbar-nav > li > a { padding-left:13px; padding-right:13px !important; } } .boxed-shadow { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; margin-bottom: 10px; padding: 20px; } /*------------------------ Mobile menu toggle ------------------------*/ #masthead .navbar-toggler { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); float: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; color: #fff; } /* Below 992px, where the menu collapses, every header style gets the same logo row: logo on the left, toggle on the right, both centred in the row. Each row is a flex container (theme.css section 6) and the collapsed menu is taken out of it (the full-screen panel below), so this only has to put the logo first and push the toggle to the far end. The toggle's absolute placement above is for the drawer style on desktop; here it is in the row, so it cannot slide down into the menu when the header grows. The styles that put the logo on the right on desktop are pulled back to the left here, so the row is the same everywhere. */ @media (max-width: 991.98px) { #masthead .navbar-brand { order: 1; margin-left: 0; margin-right: auto; } #masthead .navbar-toggler { order: 2; position: relative; top: auto; right: auto; left: auto; transform: none; flex-shrink: 0; } #masthead .logo-sidebar { order: 3; } } /* The three sidebar header styles (Logo Left - Menu Sidebar, Fixed Left and Fixed Right - Menu Sidebar) keep their side panel on desktop. Below 992px they open like every other style: the menu drops down under the logo row, full width, aligned to the same container edges, instead of a 270px drawer that overlaps the page or slides it sideways. #navbar-slide sits after #masthead in the markup rather than inside it, so it is put back into the flow here, and its side-padding reproduces Bootstrap's .container widths (540px from 576, 720px from 768) so the menu items line up with the logo exactly as they do in the other styles. */ @media (max-width: 991.98px) { #navbar-slide { position: relative; /* !important: theme.css offsets the fixed panel below the admin bar with .admin-bar #navbar-slide { top: 32px }, which would push the in-flow menu down by the same amount. */ top: auto !important; left: auto; right: auto; height: auto !important; z-index: 1000; box-shadow: none; background-color: var(--sk-nav-bg); padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); } /* body. for specificity: section 10 sets the drawer's 270px width later in the file. */ body #navbar-slide { width: auto; } /* theme.css's admin-bar offset is itself !important; this outranks it. */ body.admin-bar #navbar-slide { top: auto !important; } .slide-menu #navbar-slide.collapse:not(.show) { display: none; } /* The drawer repeats the logo for its own header; the logo row has it. */ #navbar-slide > .navbar-brand { display: none; } /* The same 8px above and below the list as the other styles' menus. */ #navbar-slide .navbar-nav { margin: 8px 0; max-height: none; } /* body. for specificity: section 10's slide rule comes later in the file. */ body.slide-on #masthead, body.slide-on #content, body.slide-on #navbar-slide, body.slide-on .top-bar { transform: none; } } @media (min-width: 576px) and (max-width: 767.98px) { #navbar-slide { padding-left: calc((100% - 540px) / 2 + var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc((100% - 540px) / 2 + var(--bs-gutter-x, 1.5rem) * .5); } } @media (min-width: 768px) and (max-width: 991.98px) { #navbar-slide { padding-left: calc((100% - 720px) / 2 + var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc((100% - 720px) / 2 + var(--bs-gutter-x, 1.5rem) * .5); } } /* Shared, and bar 1 at rest (top, longer); bars 2 and 3 override below */ #masthead .navbar-toggler .toggler-bar { position: absolute; inset: calc(50% - 6px) auto auto 50%; /* top right bottom left */ height: 3px; margin: 0 !important; border-radius: 999px; background-color: currentColor; box-shadow: none; transform-origin: 50% 50%; transition: top 0.25s ease, width 0.25s ease, transform 0.25s ease, opacity 0.15s ease; width: 26px; opacity: 1; transform: translateX(-50%); } /* --- Resting --- */ /* Bar 2 — hidden */ #masthead .navbar-toggler .toggler-bar + .toggler-bar { top: 50%; width: 0; opacity: 0; transform: translateX(-50%); } /* Bar 3 — bottom, shorter */ #masthead .navbar-toggler .toggler-bar + .toggler-bar + .toggler-bar { top: calc(50% + 3px); width: 18px; opacity: 1; transform: translateX(-50%); } /* --- Open --- */ /* Bar 1 → "\" */ #masthead .navbar-toggler:not(.collapsed) .toggler-bar, #masthead .navbar-toggler[aria-expanded="true"] .toggler-bar { top: calc(50% - 1.5px); width: 26px; opacity: 1; transform: translateX(-50%) rotate(45deg); } /* Bar 2 — stays hidden */ #masthead .navbar-toggler:not(.collapsed) .toggler-bar + .toggler-bar, #masthead .navbar-toggler[aria-expanded="true"] .toggler-bar + .toggler-bar { top: 50%; width: 0; opacity: 0; transform: translateX(-50%); } /* Bar 3 → "/" */ #masthead .navbar-toggler:not(.collapsed) .toggler-bar + .toggler-bar + .toggler-bar, #masthead .navbar-toggler[aria-expanded="true"] .toggler-bar + .toggler-bar + .toggler-bar { top: calc(50% - 1.5px); width: 26px; opacity: 1; transform: translateX(-50%) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { #masthead .navbar-toggler .toggler-bar { transition: none; } } /* Fonts come from the parent's pairing tokens (--hcdsb-font-heading, -body, -quote, -ui), set in the Customizer's Typography section. Nothing here names a font or forces one with !important. */ .recent-simple-os-container h4.post-list-title { font-weight:400 !important; } h4.gcp-post-title { font-weight:400 !important; } .h-black { color: #303c40 !important; } .text-light { color:#ffffff; } .h-300 { font-weight: 800; font-size: 17px; text-transform: uppercase; } /*------------------------ Main navigation — external-link icon Class added by inc/nav-external-links.php to main-nav links that leave the current site: other sites, the Hub, the board site, anything off-network. ------------------------*/ /* The same glyph, size and spacing as the footer's Across HCDSB links and the home page link list, so one icon means one thing across the site. currentColor keeps it the nav text colour in the bar, the dropdowns and the collapsed mobile menu without per-context rules. ::after is free on these links: the parent theme only uses it on the active top-level item and on an open dropdown toggle, and an external link is never the current page and dropdown toggles are never marked. */ .navbar-nav a.hcdsb-nav-external::after { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.35em; vertical-align: -0.02em; background-color: currentColor; opacity: 0.65; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3Cpath d='M11 13l9-9'/%3E%3Cpath d='M15 4h5v5'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; } .navbar-nav a.hcdsb-nav-external:hover::after, .navbar-nav a.hcdsb-nav-external:focus-visible::after { opacity: 1; } /*------------------------ Menu readability — long dropdowns ------------------------*/ /* Sites put dozens of links behind a single tab. Three things made that hard * to use, and all three are fixed here in CSS: nothing below changes markup. * * 1. No caret. The menu walker outputs no caret element, so a parent * item looked identical to a plain link — worst on mobile, where there is * no hover to discover it with. * 2. Links ran together. The inherited hover changes the text colour and * nothing else (`background: transparent` on the hover rule), so in a list * of thirty there was no row to aim at and no boundary between rows. * 3. No ceiling on height. A long menu simply ran past the bottom of the * screen with no way to reach the end. * * Tokens: --sk-nav-bg is the menu ground on every site, and it is always * dark, so the separators and hover fills below are white at low alpha rather * than palette colours. That way one set of rules works for every site * without a per-site override. */ /* --- 1. Carets on anything that opens --- */ /* The same chevron as the rest of the site, drawn as a mask so it takes the link's own colour and needs no icon font. Applied to top-level parents and to mega menu column headings that are themselves links. Not applied to .dropdown-submenu, which already has its own indicator from the parent theme. */ .menu .navbar-nav > li.dropdown > a::after, #navbar-slide .navbar-nav > li.dropdown > a::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.4em; vertical-align: -0.05em; background-color: currentColor; opacity: 0.75; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform 0.2s ease, opacity 0.2s ease; } /* Points up while the menu is open — the one cue that says "this closes again", which matters most on mobile where the menu pushes the page down. .show (Bootstrap's open state) is the honest one and is all mobile uses. */ .menu .navbar-nav > li.dropdown > a.show::after, #navbar-slide .navbar-nav > li.dropdown > a.show::after { transform: rotate(180deg); opacity: 1; } /* :hover and :focus-within are DESKTOP ONLY, and that restriction is a fix, * not tidiness. * * A tap on a touch screen leaves both behind: the element keeps :hover until * something else is tapped, and the link keeps focus, so :focus-within keeps * matching its li. With these unscoped, closing a menu on a phone removed * .show and the caret still pointed up — the one cue that says "this is open" * was left saying it about a menu that had closed. * * They belong here anyway: above 1025px hover is what OPENS the menu, so the * caret should answer it. Below that, tapping is, and .show covers it. */ @media only screen and (min-width: 1025px) { .menu .navbar-nav > li.dropdown:hover > a::after, .menu .navbar-nav > li.dropdown:focus-within > a::after { transform: rotate(180deg); opacity: 1; } } /* --- 2. Rows that read as rows --- */ /* A hairline between items and a fill on hover. Both are white at low alpha so they sit on any site's nav colour. The 3px bar on the left is the actual "you are pointing at this one" signal — a fill alone is easy to miss at the speed people scan a menu. */ .menu .dropdown-menu > li + li > a, .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li + li > a { border-top: 1px solid rgba(255, 255, 255, 0.09); } .menu .dropdown-menu > li > a, .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a { position: relative; padding-left: 13px !important; transition: background-color 0.15s ease, padding-left 0.15s ease; } .menu .dropdown-menu > li > a::before, .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; opacity: 0; transition: opacity 0.15s ease; } /* :focus-visible as well as :hover — a keyboard user moving through thirty links needs the same row marked. The parent theme kills the focus outline on these (.menu .dropdown-menu > li > a:focus { outline: none }), so without this there is nothing at all. */ .menu .dropdown-menu > li > a:hover, .menu .dropdown-menu > li > a:focus-visible, .menu .dropdown-menu > li > a.active, .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a:hover, .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a:focus-visible { background-color: rgba(255, 255, 255, 0.10) !important; padding-left: 17px !important; } .menu .dropdown-menu > li > a:hover::before, .menu .dropdown-menu > li > a:focus-visible::before, .menu .dropdown-menu > li > a.active::before, .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a:hover::before, .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a:focus-visible::before { opacity: 1; } /* Mega menu column headings: smaller, spaced, and unmistakably not a link, so the eye can use them to find its way down a wide panel. */ .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > strong { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; padding-top: 14px; padding-bottom: 6px; border-bottom: thin solid; } /* --- 3. More columns when the list is long, and NO scrolling panel --- */ /* An earlier version of this block capped every dropdown at 78vh and let it * scroll. That was wrong twice over, and both faults are worth recording * because they are easy to reintroduce: * * 1. A scroll container gives absolutely positioned DESCENDANTS a scrollable * area. The mega menu's column divider is a pseudo-element 1000px tall * (theme.css: `.menu-item-object-hcdsb_mega_menu .dropdown-menu > li:before`), * which the parent kept out of sight with `overflow: hidden` on the panel. * Replacing that with `overflow-y: auto` did not shorten the divider — it * made it scrollable content, so every mega menu became a 1000px panel with * its links in the top inch and empty space below. It did that whatever the * menu contained, which is the giveaway: the height came from the CSS, not * the links. * 2. It also clipped any third-level flyout, which opens to the side of a panel * that is now clipping its own overflow. * * So there is no ceiling here now, and nothing in the desktop nav scrolls. * Height is controlled by splitting into more columns instead — at four * columns a 48-item menu is about twelve rows tall, which fits any desktop * viewport. A panel that does not scroll cannot clip, cannot trap the pointer, * and cannot invent space it does not need. */ @media only screen and (min-width: 1025px) { /* Thirteen or more items: two columns instead of one very long one. :has() counts for us — there is no other way to know how many links an editor added. Below thirteen nothing changes, so short menus keep the shape they have now. */ .menu .navbar-nav > li > .dropdown-menu:has(> li:nth-child(13)) { width: 34rem; max-width: 90vw; columns: 2; column-gap: 0; } /* A row must not be split down the middle by the column break. */ .menu .navbar-nav > li > .dropdown-menu:has(> li:nth-child(13)) > li { break-inside: avoid; } /* The hairline above the first item of the second column would otherwise be missing, since it is no longer preceded by a sibling on screen. */ .menu .navbar-nav > li > .dropdown-menu:has(> li:nth-child(13)) > li > a { border-top: 1px solid rgba(255, 255, 255, 0.09); } /* Twenty-five or more: a third column. Thirty-seven or more: a fourth. Each column added is what keeps the panel short enough to read without scrolling, which is the whole approach here. 64rem is a little over 1000px — still inside the narrowest desktop this network sees. */ .menu .navbar-nav > li > .dropdown-menu:has(> li:nth-child(25)) { width: 50rem; columns: 3; } .menu .navbar-nav > li > .dropdown-menu:has(> li:nth-child(37)) { width: 64rem; columns: 4; } /* A 64rem panel hanging off a menu item near the right-hand end of the bar would run off the edge of the window. Bootstrap positions these from the left; this flips the four-column one to hang from the right instead when its item is one of the last three in the bar. Deliberately limited to that tier — the two- and three-column panels place correctly as they are, and the narrower fix is the one that cannot regress them. */ .menu .navbar-nav > li:nth-last-child(-n + 3) > .dropdown-menu:has(> li:nth-child(37)) { left: auto; right: 0; } } /* --- Mobile --- */ @media only screen and (max-width: 1024px) { /* 44px minimum, which is the smallest reliable touch target. The parent sets 9px 15px with !important, so this has to answer in kind. */ .menu .dropdown-menu > li > a, #navbar-slide .navbar-nav .dropdown-menu > li > a { min-height: 44px; display: flex; align-items: center; padding: 10px 16px 10px 19px !important; } /* Indented, and on a slightly darker ground, so an open submenu reads as contained by its parent rather than as more top-level items. * * NO max-height and NO overflow here, deliberately. An earlier version * capped this at 60vh and let it scroll, which stacked three scrollable * layers on a phone — page, drawer, submenu — and a flick had to guess which * one you meant. The submenu now expands to its full height inside the * drawer, and the drawer is the only thing that scrolls. */ .menu .navbar-nav > li > .dropdown-menu.show, #navbar-slide .navbar-nav > li > .dropdown-menu.show { background-color: rgba(0, 0, 0, 0.18); box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.14); max-height: none; overflow: visible; } /* Mega menu panels stack; the column headings keep their role as signposts. */ .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a { min-height: 44px; display: flex; align-items: center; padding: 10px 16px 10px 19px !important; } /* The column divider is a 1000px vertical line, which is meaningless once the columns are stacked. */ .menu-item-object-hcdsb_mega_menu .dropdown-menu > li:before { display: none; } } @media (prefers-reduced-motion: reduce) { .menu .navbar-nav > li.dropdown > a::after, #navbar-slide .navbar-nav > li.dropdown > a::after, .menu .dropdown-menu > li > a, .menu .dropdown-menu > li > a::before { transition: none; } } /*------------------------ Menu: panel separation, and a compact mobile list ------------------------*/ /* --- The dropdown is a different surface from the bar it came from --- */ /* .menu .dropdown-menu is --sk-nav-bg, the same colour as the nav bar itself, so an open panel had no edge: it read as the bar getting taller. * * Lifted with a translucent white wash rather than a per-site colour. A * fixed hex would need an override per site and would drift the moment a * palette changed; this lightens whatever the site's nav colour is by the same * amount, and every nav colour on the network is dark enough to take it. * Layering it as a background-image over the inherited background-color means * no colour maths and no color-mix support question. * * The hairline and the shadow do the rest of the work: the panel has a top * edge and sits above the page rather than continuing the bar. (Desktop * replaces both with the deeper, borderless card further down.) */ .menu .dropdown-menu { background-color: var(--sk-nav-bg); background-image: linear-gradient( rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07) ); border-top: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2px 4px var(--sk-dropdown-shadow), 0 3px 0 var(--sk-dropdown-shadow-inset) inset; /* Text in the panel that is not a link (mega menu column headings) inherits this. Bootstrap 5's dropdown defaults it to the body's dark text colour, which put the headings dark on navy. */ --bs-dropdown-color: #fff; --bs-dropdown-link-color: #fff; --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: transparent; --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: transparent; --bs-dropdown-divider-bg: rgba(0, 0, 0, .055); color: #fff; } /* The mega menu spans the full width, so its edge matters more, not less. */ .menu-item-object-hcdsb_mega_menu .dropdown-menu { background-image: linear-gradient( rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07) ); border-top: 1px solid rgba(255, 255, 255, 0.14); } @media only screen and (max-width: 1024px) { /* Mobile goes the other way. There is no floating panel to lift — the submenu opens inline, underneath its parent — so it reads as contained by going DARKER than the bar, which is what the indent rule above already does. Cancel the desktop wash so the two do not fight. */ .menu .dropdown-menu, .menu-item-object-hcdsb_mega_menu .dropdown-menu { background-image: none; box-shadow: none; } } /* --- Compact top-level rows on mobile --- */ @media only screen and (max-width: 991px) { /* The top-level items were set at 15px with generous padding, which is comfortable for eight links and works against you at twenty: the further down the list an item is, the more scrolling it takes to reach. Tightening the row puts noticeably more of the menu on screen at once. !important throughout because every rule being answered here uses it. */ .menu .navbar-nav > li > a, #navbar-slide .navbar-nav > li > a { min-height: 40px; display: flex; align-items: center; padding: 6px 15px !important; font-size: 0.9375rem; line-height: 1.3 !important; } /* 40px, not the 44px used for the submenu links, and deliberately so: these rows are full-width and separated from each other, which is the case where a slightly shorter target is still comfortable. Below 40 it stops being. */ /* THE ONLY SCROLLER ON MOBILE. * * The collapsed menu scrolled inside 500px (340px from the parent theme, * raised once already), with the open submenu scrolling inside that. One * scroll region, using the height actually available, replaces both. * * dvh rather than vh: on a phone, vh is the height with the browser chrome * hidden, so a vh-based menu is cut off by the address bar exactly when the * bar is showing. dvh tracks the real viewport. The vh line before it is the * fallback for anything that does not know dvh. * * 7rem is the header above it. overscroll-behavior stops a flick at the end * of the list from scrolling the page behind the open menu, which is the * other half of what made this feel unpredictable. */ .navbar-collapse, .navbar-sticky .navbar-collapse { max-height: calc(100vh - 7rem) !important; max-height: calc(100dvh - 7rem) !important; overflow-y: auto; overscroll-behavior: contain; } /* The script scrolls an opened item to the top of the drawer; this keeps a little air above it so it does not sit flush against the edge. */ .menu .navbar-nav > li.dropdown, #navbar-slide .navbar-nav > li.dropdown { scroll-margin-top: 0.5rem; } /* A hairline between top-level rows, matching the one already between submenu links. On the li rather than the a, so it spans the full width and sits BELOW an expanded submenu — separating one section of the menu from the next, rather than cutting a section in half. */ .menu .navbar-nav > li, #navbar-slide .navbar-nav > li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .menu .navbar-nav > li:last-child, #navbar-slide .navbar-nav > li:last-child { border-bottom: 0; } /* Caret to the right-hand edge. The row is already a flex line, so auto margin does it — and putting the caret at the far edge is what makes a column of them scannable as "these open". */ .menu .navbar-nav > li.dropdown > a::after, #navbar-slide .navbar-nav > li.dropdown > a::after { margin-left: auto; flex: 0 0 auto; /* Bigger here than on desktop: it is right-justified with the whole row to itself, and it is the mark that has to carry the top level of a menu someone is reading at arm's length. */ width: 1.15em; height: 1.15em; } /* --- Mega menu columns fold behind a + --- */ /* The button is built by assets/js/nav-mobile.js, which also writes aria-expanded; everything here is the look of it. The state lives in one class on the column, so the rules below never have to ask the button what it thinks. A + rather than a second caret, on purpose: the caret already means "this top-level menu opens" and a nested list of identical carets says nothing about which level you are on. Two marks, two depths. */ .hcdsb-col-closed > ul { display: none; } .hcdsb-col-toggle { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; /* Right padding clears the + so a long heading wraps before it. */ padding: 8px 52px 8px 19px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; /* The row above and below it are menu links; without this the column heading floats between them with no edge of its own. */ border-top: 1px solid rgba(255, 255, 255, 0.12); } /* The heading styling has to be restated here, and this is the one trap in the whole feature: every rule for a column heading is written `… .dropdown-menu > li > strong`, and wrapping it in the button makes it a child of the button instead. The DIRECT-CHILD combinator stops matching and the heading silently loses its case, tracking and size. So the look is repeated against the new position — minus the underline, which was there to separate a heading from the links below it and is now the button's own top border. */ .hcdsb-col-toggle > strong { padding: 0 !important; border-bottom: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; } /* The + itself: two bars, and the upright one goes away when the column is open, which turns it into a −. Drawn rather than typed so it lines up with the carets above it and takes the menu's own colour. * * Deliberately smaller than the caret, and the pair of sizes is the point: * the caret marks the top level and the + marks a level inside it, so the * marks are ranked the way the menu is. Both are right-aligned to the same * 15px edge, so they still read as one column of controls. * * The 44px tap target is the BUTTON, which is unchanged — shrinking the * mark does not shrink what a thumb has to hit. */ .hcdsb-col-toggle::before, .hcdsb-col-toggle::after { content: ""; position: absolute; right: 15px; top: calc(50% - 1px); width: 10px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.75; transition: transform 0.2s ease, opacity 0.2s ease; } .hcdsb-col-toggle::after { transform: rotate(90deg); } .hcdsb-col-toggle[aria-expanded="true"]::after { transform: rotate(0deg); opacity: 0; } /* :focus-visible only here. It is defined not to match a tap, so it marks a keyboard user and leaves no fill stuck under a thumb; the hover fill is added separately below, for pointers that really hover. */ .hcdsb-col-toggle:focus-visible { background-color: rgba(255, 255, 255, 0.08); } /* A column whose heading is itself a link: the link stays a link and the toggle is a square at the end of its row, so a tap on the words still goes to the page. */ .hcdsb-col--linked { position: relative; } /* Keep the heading's own text clear of the square. */ .hcdsb-col--linked > a { padding-right: 56px !important; } .hcdsb-col-toggle--beside { position: absolute; top: 0; right: 0; width: 52px; min-height: 44px; padding: 0; border-top: 0; } .hcdsb-col-toggle--beside::before, .hcdsb-col-toggle--beside::after { right: 15px; } } /* A narrow desktop window is still a pointer, and gets the hover fill. A phone reports no hover at all, so it never sticks there. */ @media (hover: hover) and (max-width: 991px) { .hcdsb-col-toggle:hover { background-color: rgba(255, 255, 255, 0.08); } } /* --- Moved here from Theme Options > Advanced > Extra CSS (Sept 2026) --- */ /* This rule was pasted by hand into the Extra CSS box of all eleven sites, * character for character, and was the only thing in any of them. It is * reproduced here unchanged so the rendering does not move, and the option * field it came from has been removed — see inc/option-pages.php. * * It is NOT redundant, which is worth saying because it looks it. Below * 992px, where the navbar collapses, Bootstrap 5 sets * * .navbar-nav .dropdown-menu { position: static; } * * so an open submenu flows inline instead of floating over the drawer. This * rule overrides `static` with `relative`, which keeps the inline flow and * additionally makes the open submenu a containing block and a stacking * context for anything absolutely positioned inside it. * * Whoever added it was almost certainly fixing a third-level flyout or a * z-index overlap, and there is no record of which. Since the difference is * real and the reason is not documented, it moves as-is rather than being * assumed dead. If it is ever tested and found unnecessary, it is one line in * a tracked file now instead of eleven database rows. */ @media (max-width: 991px) { .navbar-nav .dropdown-menu.show, .navbar-nav .dropdown-menu.show .dropdown-menu { position: relative; } } /*------------------------ Header search: a surface of its own ------------------------*/ /* Opening the search slides a form ACROSS the nav bar — it is * position: absolute over the top of it (theme.css, .top-search form) — and * the skin paints it --sk-nav-bg, the nav's own colour. So the search opened * onto a bar the same colour it already was: the links vanished and nothing * took their place, which reads as the menu breaking rather than as a search * box arriving. * * The same translucent wash as the dropdown panels rather than a white box. * White would make a small utility the loudest thing in the header, and it * would need a palette override per site; the wash lightens whatever colour * the site's nav already is, by the same amount, everywhere. The border and the * shadow do most of the work of saying "this is a layer on top", which is the * actual thing that was missing. * * #masthead for specificity: the skin's .top-search rules sit later in this * file (section 10) and would otherwise win the background outright — see the * note in section 11. */ @media (min-width: 992px) { #masthead .top-search form { background-image: linear-gradient( rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09) ); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30); } /* The top bar is the one place this widget can land on a LIGHT surface, and a white wash on a light ground is invisible. Left as the skin has it. */ #masthead .top-bar .top-search form { background-image: none; border: 0; box-shadow: none; } } /*------------------------ Search: the overlay ------------------------*/ /* Everything above this point styles the form where WordPress put it — in the * header widget. That is now the NO-JAVASCRIPT case only. With * assets/js/search-overlay.js running, the form is lifted out of the header * and into the panel below, and the widget keeps only a button. * * Same overlay on every width, which is the answer to "desktop or mobile": * two behaviours would be two things to keep in step, and the phone case is * the one that needed it most — the form used to sit at the bottom of the * open drawer, below every menu link. */ /* --- The button left behind in the widget --- */ .hcdsb-search-open-btn { display: flex; align-items: center; gap: 0.6em; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; } /* It is an icon in a nav bar, so it gets no fill in any state. * * The skin's Bootstrap styling in section 10 targets the BARE ELEMENT — * `.btn-primary, button, input[type="submit"]` — so every