/* ============================================================================ CHROME — the builder's own controls. Loaded AFTER the active theme's stylesheets (see the load-order block in Public/Page.aspx), which is the whole point: a theme owns the look of the site, but it must not be able to render the language picker, the dark/light switch or the admin link unreadable. Ordering settles that, so nothing in here needs !important or specificity games to win. Colours are stated outright instead of inherited. Inheriting is what broke this before — the block landed on whatever background the theme's header happened to use and came out grey-on-grey. Everything is driven by two variables so a theme CAN still restyle the controls deliberately, by setting --chrome-* on :root, without being able to break them by accident. ============================================================================ */ /* Component tokens — thin aliases over the semantic tokens in tokens.css. There is NO second set of values for dark mode: the semantic tokens already flipped, so these follow automatically. A theme can still restyle the controls on purpose by redefining --chrome-* on :root. */ :root { --chrome-bg: var(--bg-surface); --chrome-bg-hover: var(--bg-hover); --chrome-fg: var(--text-body); --chrome-fg-hover: var(--text-heading); --chrome-border: var(--border); --chrome-border-hover: var(--border-strong); --chrome-accent: var(--accent); --chrome-menu-bg: var(--bg-surface); --chrome-menu-shadow: var(--shadow-menu); --chrome-radius: 999px; --chrome-height: 36px; } /* --------------------------------------------------------------------------- Placement: the trio lives inside the main menu as its last item, so it keeps one fixed home across themes and collapses with the menu on mobile. --------------------------------------------------------------------------- */ .menu-utility { display: flex; align-items: center; list-style: none; position: relative; z-index: 1200; } .utility-menu { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 12px; } /* A dropdown inside a header must not be clipped: theme headers commonly set overflow:hidden on these wrappers, which would cut the language menu off. */ .menu-utility, .utility-menu, .navbar-nav, .navbar-collapse, #main-navigation, #main-navigation #menu, .header .nav-item, .header .menu-wrap, .header .top-header { overflow: visible; } /* --------------------------------------------------------------------------- The three controls share one pill so they read as a single unit. --------------------------------------------------------------------------- */ .lang-dropdown-toggle, .theme-toggle-btn, .admin-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--chrome-height); padding: 0 14px; border: 1px solid var(--chrome-border); border-radius: var(--chrome-radius); background: var(--chrome-bg); color: var(--chrome-fg); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .lang-dropdown-toggle:hover, .theme-toggle-btn:hover, .admin-link:hover, .lang-dropdown-toggle:focus-visible, .theme-toggle-btn:focus-visible, .admin-link:focus-visible { background: var(--chrome-bg-hover); border-color: var(--chrome-border-hover); color: var(--chrome-fg-hover); } .lang-dropdown-toggle:focus-visible, .theme-toggle-btn:focus-visible, .admin-link:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; } /* Square button for the icon-only dark/light switch. */ .theme-toggle-btn { width: var(--chrome-height); padding: 0; } .lang-dropdown-toggle i, .admin-link i { font-size: 12px; opacity: .8; color: currentColor; } /* The icons and labels are spans/i inside links — make sure a theme's "#header a { color: ... }" rule cannot repaint them mid-pill. */ .lang-dropdown-toggle span, .admin-link span { color: currentColor; } /* --------------------------------------------------------------------------- Language menu. A dropdown, not a pipe-separated list, because the builder is meant to take new languages with no layout change. --------------------------------------------------------------------------- */ .lang-dropdown { position: relative; } .lang-dropdown-menu.dropdown-menu { min-width: 190px; padding: 6px; margin-top: 8px; background: var(--chrome-menu-bg); border: 1px solid var(--chrome-border); border-radius: 14px; box-shadow: var(--chrome-menu-shadow); z-index: 1300; } .lang-dropdown-menu .dropdown-item { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--chrome-fg); text-decoration: none; } .lang-dropdown-menu .dropdown-item:hover, .lang-dropdown-menu .dropdown-item:focus { background: var(--chrome-bg-hover); color: var(--chrome-fg-hover); } .lang-dropdown-menu .dropdown-item.active { background: var(--chrome-accent); color: #ffffff; } /* RTL: open toward the start edge instead of off-screen. */ [dir="rtl"] .lang-dropdown-menu.dropdown-menu { right: auto; left: 0; } /* --------------------------------------------------------------------------- Mobile: inside the collapsed menu the trio takes its own full-width row. --------------------------------------------------------------------------- */ @media (max-width: 991px) { .menu-utility { width: 100%; padding: 12px 0; } .utility-menu { margin-inline-start: 0; justify-content: flex-start; flex-wrap: wrap; } } /* ============================================================================ ROW ONE — logo, phone/email, social, dark-mode switch. Deliberately its own line above the menu: identity and contact on one row, navigating the site on the next. Emitted as one unit so a theme places it with {{info_bar}} and cannot scatter the pieces. ============================================================================ */ .info-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 0; } .info-bar-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .info-bar-logo img { height: 44px; width: auto; } .info-bar-contact { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--chrome-fg); } .info-bar-contact span { display: inline-flex; align-items: center; gap: 7px; } .info-bar-contact i { opacity: .7; } /* Every control sits together at the far end of the row, in one run: social icons, then the dark/light switch, the language picker and the admin link. Grouping them means a visitor finds all the controls in a single place. */ .info-bar-actions { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .info-bar-social { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 4px; } /* A theme ancestor may set font-size:0 to kill inline-block gaps (the school theme does exactly that on its contact strip). Restate a real size here or every label in this row silently collapses to nothing. */ .info-bar, .info-bar * { font-size: revert; } .info-bar-contact, .info-bar-contact span { font-size: 14px; } /* ============================================================================ SOCIAL ICONS — each network in its own brand colour. ============================================================================ */ .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff; border: 1px solid rgba(0, 0, 0, .10); font-size: 15px; line-height: 1; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .social-icon i { color: inherit; } .social-icon:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); } .social-icon-facebook { color: #1877F2; } .social-icon-instagram { color: #E1306C; } .social-icon-linkedin { color: #0A66C2; } .social-icon-tiktok { color: #010101; } .social-icon-twitter { color: #000000; } .social-icon-youtube { color: #FF0000; } .social-icon-whatsapp { color: #25D366; } .social-icon-snapchat { color: #FFFC00; text-shadow: 0 0 2px rgba(0,0,0,.35); } .social-icon-telegram { color: #26A5E4; } /* On hover each fills with its own brand colour. Instagram takes the gradient its logo actually uses rather than a flat pink. */ .social-icon-facebook:hover { background: #1877F2; color: #fff; } .social-icon-instagram:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); color: #fff; } .social-icon-linkedin:hover { background: #0A66C2; color: #fff; } .social-icon-tiktok:hover { background: #010101; color: #fff; } .social-icon-twitter:hover { background: #000000; color: #fff; } .social-icon-youtube:hover { background: #FF0000; color: #fff; } .social-icon-whatsapp:hover { background: #25D366; color: #fff; } .social-icon-snapchat:hover { background: #FFFC00; color: #000; text-shadow: none; } .social-icon-telegram:hover { background: #26A5E4; color: #fff; } html.dark-mode .social-icon { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); } /* ============================================================================ Keep the menu visible. Theme stylesheets built for a jQuery mobile-menu plugin hide the real nav below their breakpoint and expect their own script to clone it elsewhere. The builder does not load that script, so the menu — and the language and login controls that live inside it — would simply vanish. Bootstrap's collapse already handles small screens here. ============================================================================ */ #main-navigation, #main-navigation > ul { display: block; } @media (max-width: 991px) { #main-navigation > ul { display: flex; flex-wrap: wrap; gap: 4px; } .info-bar { gap: 12px; } .info-bar-social { margin-inline-start: 0; } } /* ============================================================================ DEFAULT SITE FONT — Calibri. Declared here rather than in css/vendor/fonts.css because this layer loads after the active theme. site.css sets --font-body to Cairo, and theme sheets set their own families outright (the school theme forces Poppins/Rubik), so a declaration earlier in the cascade never survived. Calibri is a Microsoft font and is not redistributable, so it is not shipped: local() picks it up on machines that have it, and Carlito — the metric- compatible open clone vendored under css/webfonts — covers everyone else. The two are metrically identical, so the layout is unchanged either way. Arabic: Calibri and Carlito both carry Arabic glyphs, but Cairo/Tajawal read better at UI sizes, so RTL keeps them right behind Calibri. ============================================================================ */ :root { --font-body: "Calibri Local", "Carlito", "Cairo", "Tajawal", "Segoe UI", sans-serif; --font-heading: "Calibri Local", "Carlito", "Cairo", "Tajawal", "Segoe UI", sans-serif; } [dir="rtl"] { --font-body: "Calibri Local", "Carlito", "Cairo", "Tajawal", "Segoe UI", sans-serif; --font-heading: "Calibri Local", "Carlito", "Cairo", "Tajawal", "Segoe UI", sans-serif; } body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .navbar-brand, .section-title, .uca-menu > li > a { font-family: var(--font-body); } /* The imported UCA theme (style.css) hardcodes Poppins/Rubik/Heebo/Montserrat on class-scoped selectors (`.week-event h6`, `[class*="scaption"]`, `.accordion .a-title`, ...). Their specificity beats the plain-element list above, so those elements kept the theme font and the site read as a mix. This sweep forces the Calibri token on every text-bearing element regardless of the theme's specificity. Icon fonts carry their glyph BY font-family: Font Awesome (.fa/.fas/.far/.fab) and Linearicons (.lnr) set it on the element itself, so they are excluded — forcing Calibri there would blank the icon. Fontello sets it on ::before, so an element-level rule never reaches the glyph and needs no exclusion. Bare is excluded too (it is the icon tag) and simply inherits Calibri. */ body :not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.lnr):not([class*="icon-"]):not([class^="icon-"]):not([class*="lnr"]) { font-family: var(--font-body) !important; } /* Gallery album grid: Bootstrap's g-4 gutter rides on a negative row margin + per-column margin-top, both of which the imported theme's `.row{margin:0}` wipes out — so the album tiles touched top-to-bottom. `.row` stays display:flex, and row-gap on a flex-wrap container spaces the wrapped rows regardless of margins, so it survives the theme. The caption band sits on a token surface so the album name is legible in both themes. */ .row.gallery-db { row-gap: 1.75rem; } .gallery-album-inner { background: var(--bg-surface, #fff); transition: box-shadow .2s, transform .2s; } .gallery-album-card:hover .gallery-album-inner { box-shadow: 0 10px 28px rgba(0, 0, 0, .16) !important; transform: translateY(-3px); } /* Icon fonts are deliberately NOT touched here. Font Awesome picks its glyphs from family AND weight together (.fas needs weight 900, .fab needs 400). Restating only the family — which an earlier version of this file did — drops the weight and the icons come out blank or wrong. Their own stylesheet already sets both, and the font-family rules above list concrete elements rather than "*", so nothing leaks into them. */ /* ============================================================================ LEGACY THEME BRIDGE — the ONLY place that reaches into a theme's own rules. Token-driven components flip with the theme by themselves. Theme stylesheets written before the token system do not: they hardcode colours and target the header through ID selectors (`#header { background:#fff }`, `#main-navigation > ul > li > a { color:... }`). An ID beats any number of classes, so load order alone never wins against them — later CSS only beats an EQUAL-specificity rule. So these selectors carry an ID of their own, and they assign nothing but tokens. Everything stays defined in tokens.css; this block only forwards it into markup the builder does not control. Keep it small — a new component belongs in the token system, not here. ============================================================================ */ #header, #header:before, .uca-header, .top-bar, .navbar { background: var(--header-bg); border-bottom-color: var(--header-border); } #main-navigation > ul > li > a, #menu > li > a, .uca-menu > li > a, .navbar-nav > li > a, .navbar-nav .nav-link { color: var(--header-fg); } #main-navigation > ul > li > a:hover, #menu > li > a:hover, .uca-menu > li > a:hover, .navbar-nav .nav-link:hover { color: var(--header-fg-hover); background: var(--bg-hover); } #main-navigation > ul > li.current > a, #menu > li.active > a, .uca-menu > li.active > a, .uca-menu > li.current > a { color: var(--header-fg-hover); box-shadow: inset 0 -3px 0 var(--accent-warm); } #menu .dropdown-menu, .uca-menu .dropdown-menu, .navbar-nav .dropdown-menu { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-menu); } #menu .dropdown-menu a, .uca-menu .dropdown-menu a, .navbar-nav .dropdown-menu a { color: var(--text-body); } #menu .dropdown-menu a:hover, .uca-menu .dropdown-menu a:hover, .navbar-nav .dropdown-menu a:hover { background: var(--bg-hover); color: var(--text-heading); } /* Row one follows the same tokens. */ .info-bar { border-bottom-color: var(--border-subtle); } .info-bar-contact, .info-bar-contact span, .info-bar-contact a { color: var(--text-body); } /* ---- footer, same bridge, same reason (themes style it via #footer) ---- The variant class matters: a theme writes `#footer.footer-3 .top-footer` (id + class + class), which outranks a plain `#footer .top-footer`. So the variants are matched explicitly here rather than relying on `#footer` alone. */ #footer, #footer[class*="footer"], #footer.footer-1, #footer.footer-2, #footer.footer-3, #footer.footer-1 .top-footer, #footer.footer-2 .top-footer, #footer.footer-3 .top-footer, #footer.footer-1 .copyright-section, #footer.footer-2 .copyright-section, #footer.footer-3 .copyright-section, #footer .top-footer, #footer .copyright-section, .site-footer, .site-footer.footer-dark, .site-footer.footer-light, .site-footer.footer-colored { background: var(--footer-bg); background-image: none; /* some variants paint a photo behind the footer */ color: var(--footer-fg); border-color: var(--footer-border); } /* The overlay a theme lays over that photo has to go with it. */ #footer[class*="footer"]:before, #footer[class*="footer"]:after { background: none; content: none; } #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer .widget-title, .site-footer h4, .site-footer h5, .site-footer.footer-dark h4, .site-footer.footer-dark h5, .site-footer.footer-colored h4, .site-footer.footer-colored h5 { color: var(--footer-heading); } #footer p, #footer span, #footer li, .site-footer p, .site-footer small { color: var(--footer-fg); } #footer a, .site-footer a, .site-footer.footer-dark a, .site-footer.footer-light a, .site-footer.footer-colored a { color: var(--footer-link); text-decoration: none; } #footer a:hover, .site-footer a:hover, .site-footer.footer-dark a:hover, .site-footer.footer-light a:hover, .site-footer.footer-colored a:hover { color: var(--footer-link-hover); } /* The copyright strip is the one genuinely secondary line down there. */ #footer .copyright, .site-footer .text-center small { color: var(--footer-muted); } /* ============================================================================ ROW THREE — the product sub-menu. Appears only while the visitor is inside a product's pages; the markup is emitted once by the master, so a product's pages carry no menu code of their own. Sticky, because these pages are long and the sub-menu is how you move between them. Per-product colours: scope tokens to the group rather than writing a theme or per-page CSS, e.g. body[data-page-group="a1erp"] { --accent: #7c3aed; } Everything token-driven — including this bar — follows automatically. ============================================================================ */ .sub-menu-bar { position: sticky; top: 0; z-index: 1100; background: var(--bg-raised); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 1px 0 var(--border-subtle); } .sub-menu-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; width: min(1200px, 100% - 32px); margin: 0 auto; padding: 0; list-style: none; } .sub-menu-list > li { display: inline-flex; } .sub-menu-list a { display: inline-flex; align-items: center; padding: 12px 16px; color: var(--text-muted); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; } .sub-menu-list a:hover { color: var(--text-heading); background: var(--bg-hover); } .sub-menu-list a.active { color: var(--accent); border-bottom-color: var(--accent); } @media (max-width: 991px) { /* Scroll sideways rather than wrapping into several rows on a phone. */ .sub-menu-list { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .sub-menu-list::-webkit-scrollbar { display: none; } .sub-menu-list a { padding: 10px 12px; white-space: nowrap; } } /* ============================================================================ DROPDOWN CARET. Theme sheets draw this with a glyph from their own icon font (`content:'\e8e7'; font-family:'fontello'`). When that font is not loaded — and it should not have to be, just for one arrow — the browser prints the missing-glyph box instead. Bootstrap's .dropdown-toggle::after has the same problem in reverse: it disappears under a theme's rule. So the caret is drawn here in plain CSS: a rotated square with two borders. No font, no icon file, nothing to fail to load, and it inherits the link's colour automatically. ============================================================================ */ /* Silence whatever the theme was drawing. */ #main-navigation > ul > li.dropdown > a:after, #menu > li.dropdown > a:after, .uca-menu > li.dropdown > a:after, .navbar-nav .dropdown-toggle::after { content: none; } /* One caret, drawn as a rotated corner. */ #main-navigation > ul > li.dropdown > a::before, #menu > li.dropdown > a::before, .uca-menu > li.dropdown > a::before, .navbar-nav .dropdown-toggle::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-inline-start: .55em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg) translateY(-.12em); opacity: .6; transition: transform .15s ease, opacity .15s ease; vertical-align: middle; } /* Point it up while the menu is open. */ #menu > li.dropdown:hover > a::before, .uca-menu > li.dropdown:hover > a::before, .navbar-nav .dropdown-toggle[aria-expanded="true"]::before, .navbar-nav .show > .dropdown-toggle::before { transform: rotate(-135deg) translateY(-.12em); opacity: 1; } /* ============================================================================ DROPDOWN ALIGNMENT — logical, so it follows the writing direction. Bootstrap and most theme sheets hardcode `text-align: left` on dropdown items, which leaves Arabic text hugging the wrong edge. `start` means "the edge the text begins at": left in English, right in Arabic — one rule for both instead of a mirrored RTL override. ============================================================================ */ .dropdown-menu, .dropdown-menu li, .dropdown-menu .dropdown-item, .dropdown-menu a, #menu .sub-menu-wrap, #menu .sub-menu-wrap a, .uca-menu .dropdown-menu a, .sub-menu-list a { text-align: start; } /* Icon then label, in that order from the start edge, whichever side that is. */ .dropdown-menu .dropdown-item, .dropdown-menu a, #menu .sub-menu-wrap a { display: flex; align-items: center; gap: 8px; } /* The menu itself should open from the start edge of its parent item. */ [dir="rtl"] .dropdown-menu { right: 0; left: auto; } [dir="ltr"] .dropdown-menu { left: 0; right: auto; } /* The language menu is the exception: it sits at the end of the row, so it opens toward the end edge to stay on screen. */ [dir="rtl"] .lang-dropdown-menu.dropdown-menu { right: auto; left: 0; } [dir="ltr"] .lang-dropdown-menu.dropdown-menu { left: auto; right: 0; } /* ============================================================================ STICKY HEADER. The chrome stays pinned to the top while the page scrolls — the controls (language, dark/light, admin) and the menu are needed at any scroll position, and a header that scrolls away means scrolling back up to reach them. The theme's HeaderStyle already says "sticky"; until now nothing acted on it. Applied through the same body class the theme sets, so a theme can opt out by choosing a different HeaderStyle. ============================================================================ */ body.header-sticky #header, body.header-sticky .uca-header, body.header-fixed #header, body.header-fixed .uca-header { position: sticky; top: 0; z-index: 1050; } /* The sub-menu row sits directly under the header when both are present. */ body.header-sticky .sub-menu-bar, body.header-fixed .sub-menu-bar { top: 0; z-index: 1040; } /* A sticky ancestor traps position:sticky children, and an overflow other than visible on an ancestor disables it outright — both are common in theme CSS. */ body.header-sticky, body.header-fixed, body.header-sticky #wrapper, body.header-fixed #wrapper { overflow: visible; } /* Anchor links must not land under the pinned header. */ :target { scroll-margin-top: 120px; } /* ============================================================================ PAGE FLOW. Theme sheets from the sticky-footer era pin `html, body { height: 100% }` so a short page could push its footer to the bottom of the viewport. On a page that is LONGER than the viewport that same rule caps the body at one screen, and everything past the first screen — including the footer — stacks on top of the content instead of following it. That is what put the footer in mid-page. min-height gives the short-page behaviour the theme wanted without capping a long one. ============================================================================ */ html, body { height: auto; min-height: 100%; } /* Keep the footer at the bottom on pages too short to fill the screen, without taking it out of the flow. */ body { display: flex; flex-direction: column; } body > main, body > form { flex: 1 0 auto; } /* WebForms wraps everything in one
, so the column has to live there too. */ body > form { display: flex; flex-direction: column; } body > form > main { flex: 1 0 auto; } /* THE header and footer MUST NOT SHRINK. A flex item defaults to flex-shrink:1. Once the page is taller than the container, the browser takes the difference out of whatever may shrink — so the footer's BOX was being squeezed, sometimes to almost nothing, while its text and logo still painted at full size. That is what looked like "the footer is drawn on top of the page": it was not positioned over anything, it had been crushed and its contents spilled out. It got worse the shorter the window, because that is when the container has the biggest shortfall to make up. */ body > form > header, body > form > footer, body > header, body > footer, #footer, .site-footer { flex-shrink: 0; } /* A section must be able to grow with its content. */ .site-section { height: auto; min-height: 0; overflow: visible; } /* ============================================================================ NEWS LIST — the dated headline list used beside a calendar. Cards belong in a full-width row; in a narrow column they become tall boxes with an oversized button, which is what made the school's home page look nothing like its original. ============================================================================ */ .news-list { list-style: none; margin: 0; padding: 0; } .news-list-item { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); } .news-list-item:last-child { border-bottom: none; } .news-date { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-warm); } .news-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--text-heading); text-decoration: none; } .news-title:hover { color: var(--accent); } .news-excerpt { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); /* Two lines is enough to tell the story apart; the rest is on the article. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-more { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-warm); text-decoration: none; } .news-more:hover { color: var(--accent); } /* ============================================================================ COLUMN SECTIONS — a section nested in a column needs its own rhythm. ============================================================================ */ .column-title { margin: 0 0 18px; font-size: 22px; font-weight: 700; color: var(--text-heading); } /* Thumbnails inside a column are small by definition. */ .section-columns .gallery-db .gallery-album-card img { aspect-ratio: 1 / 1; } /* A column must not be allowed to run away with the page height. */ .section-columns > .container > .row > [class*="col-"] { min-width: 0; } /* ============================================================================ MINI CALENDAR — a 7-column CSS grid, no library. The full FullCalendar widget sizes itself with JS and needs a whole section's width; dropped into a narrow column it overflowed and painted over the footer. This is the sidebar shape: a month header, weekday row, the days, and a dot under any day carrying an event. ============================================================================ */ .mini-cal { max-width: 100%; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--bg-surface); } .mini-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--accent-warm); color: #fff; } .mini-cal-title { text-align: center; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; } .mini-cal-title span { display: block; font-size: 12px; font-weight: 500; opacity: .9; letter-spacing: 0; } .mini-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 18px; line-height: 1; text-decoration: none; background: rgba(255, 255, 255, .18); } .mini-cal-nav:hover { background: rgba(255, 255, 255, .32); color: #fff; } .mini-cal-grid { padding: 10px; } /* Seven equal columns — the whole layout, in one line. */ .mini-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .mini-cal-dow span { padding: 6px 0; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); } .mini-cal-day { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 8px; font-size: 13px; color: var(--text-body); } .mini-cal-day.is-empty { visibility: hidden; } .mini-cal-day.is-today { background: var(--accent); color: #fff; font-weight: 700; } /* A dot marks a day with something on it; the day's title is in the tooltip. */ .mini-cal-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent-warm); } .mini-cal-day.is-today .mini-cal-dot { background: #fff; } .mini-cal-more { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-warm); text-decoration: none; } .mini-cal-more:hover { color: var(--accent); } /* ============================================================================ FOOTER must never be painted over. A section whose content overflows used to land on top of it. Giving the footer its own stacking context above the sections settles it regardless of what a section's content does, and clearing floats stops an old float-based theme pulling the footer up beside the content. ============================================================================ */ #footer, .site-footer { position: relative; z-index: 2; clear: both; width: 100%; } /* Sections stay in the flow. NOT overflow-x:clip — when one axis is clipped the other stops being `visible` and computes to `auto`, which turns every section into a scroll container and changes how its height is resolved. */ .site-section { position: relative; z-index: 1; } /* ============================================================================ TABS — styling the markup the renderer actually emits. site.css styles `.tabs-nav` and `.tab-btn`, from an earlier hand-rolled tab widget. The section renderer emits Bootstrap's `.nav.nav-tabs` / `.nav-link`, so none of that styling ever applied and the strip fell back to the browser default. Same editor-vs-renderer drift that hid the panes themselves. Shaped like the school's own tab block: a bordered rounded box with the active tab joined to the panel below it. ============================================================================ */ .section-tabs .nav-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center; border: none; margin-bottom: 0; padding: 6px; border-radius: 14px 14px 0 0; background: var(--bg-raised); } .section-tabs .nav-tabs .nav-link { border: 1px solid transparent; border-radius: 10px; padding: 10px 22px; font-size: 15px; font-weight: 600; color: var(--text-muted); background: transparent; } .section-tabs .nav-tabs .nav-link:hover { color: var(--text-heading); background: var(--bg-hover); } .section-tabs .nav-tabs .nav-link.active { color: var(--accent); background: var(--bg-surface); border-color: var(--border-subtle); box-shadow: 0 -2px 0 var(--accent) inset; } /* The panel reads as one piece with the strip above it. */ .section-tabs .tab-content { max-width: 900px; margin: 0 auto; padding: 26px 28px; border: 1px solid var(--border-subtle); border-radius: 0 14px 14px 14px; background: var(--bg-surface); text-align: start; } .section-tabs .tab-content > .tab-pane { color: var(--text-body); } /* ============================================================================ FOOTER STAYS IN THE FLOW. The school theme's responsive.css carries, inside @media (min-width:1281px): #footer[class*="footer"] { position: fixed; bottom: 0; width: 100%; } — a Bootstrap-3-era "footer glued to the bottom of the window" pattern. Our footer is