/* ========================================================================== Braifi International School — Site Header (fresh build) Scoped under .bis-site-header to avoid leaking into the rest of the app. ========================================================================== */ /* Brand tokens are defined in buttons.css (load it before this file). */ /* ---------- Global resets ---------- Defensive: ensure the body has no top margin/padding so the topbar sits flush with the viewport edge. Some legacy stylesheets / browser defaults can otherwise leave 6–8px of white above the topbar. Marked !important because the legacy admin/template stylesheets are loaded after this in a few places and have been seen to reintroduce a top margin on . */ html, body { margin: 0 !important; padding: 0 !important; } body > .bis-site-header:first-of-type, body > .bis-skip + .bis-site-header { margin-top: 0 !important; } /* ---------- Layout reset for header ---------- */ .bis-site-header, .bis-site-header * { box-sizing: border-box; } .bis-site-header { margin-top: 0; } .bis-site-header { position: sticky; top: 0; z-index: 1100; font-family: var(--bis-header-font); background: #ffffff; box-shadow: var(--bis-shadow); /* Prevent sub-pixel reflows from the underlying page from triggering "vibration" while the sticky header is engaged. */ transform: translateZ(0); will-change: box-shadow; contain: layout style; } .bis-site-header a { color: inherit; text-decoration: none; } /* =============================================================== 1. Admission Banner (slim promo strip) =============================================================== */ .bis-banner { background: linear-gradient(90deg, var(--bis-orange) 0%, var(--bis-orange-light) 100%); color: var(--bis-navy); text-align: center; padding: 0.6rem 3rem 0.6rem 1rem; font-size: 0.85rem; font-weight: 600; position: relative; } .bis-banner a { color: var(--bis-red); text-decoration: underline; font-weight: 700; margin-left: 0.35rem; } .bis-banner a:hover { color: var(--bis-navy); } .bis-banner__close { position: absolute; top: 50%; right: 0.85rem; transform: translateY(-50%); background: transparent; border: 0; color: var(--bis-navy); font-size: 1rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .bis-banner__close:hover { opacity: 1; } /* =============================================================== 2. Topbar (utility info row) =============================================================== */ .bis-topbar { background: var(--bis-navy); color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; } .bis-topbar__inner { max-width: calc(100% - 2.5rem); margin: 0 auto; padding: 0.5rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .bis-topbar__left, .bis-topbar__right { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } /* Shift the left-hand topbar items so they don't sit underneath the absolutely-positioned logo. The padding equals the logo's left offset (1.25rem) + width (104px) + a small visual gap. */ .bis-topbar__left { padding-left: 144px; } .bis-topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; color: rgba(255, 255, 255, 0.85); transition: color 0.2s ease; } .bis-topbar__item i { color: var(--bis-gold); font-size: 0.85rem; } .bis-topbar__item:hover { color: var(--bis-gold); } .bis-topbar__portals { display: inline-flex; align-items: center; gap: 0.35rem; } .bis-topbar__portals a { padding: 0.25rem 0.65rem; border-radius: 20px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; transition: background 0.2s ease, color 0.2s ease; } .bis-topbar__portals a:hover { background: var(--bis-gold); color: var(--bis-navy); } .bis-topbar__social { display: inline-flex; align-items: center; gap: 0.4rem; padding-left: 0.75rem; border-left: 1px solid rgba(255, 255, 255, 0.15); } .bis-topbar__social a { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.78rem; transition: all 0.2s ease; } .bis-topbar__social a:hover { background: var(--bis-orange); color: #ffffff; transform: translateY(-2px); } .bis-topbar__admin { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; transition: color 0.2s ease; } .bis-topbar__admin:hover { color: var(--bis-gold); } /* Mobile / tablet: keep the topbar visible but compact so the oversized logo still has a coloured surface to bleed into. */ @media (max-width: 991px) { .bis-topbar { font-size: 0.72rem; } .bis-topbar__inner { padding: 0.4rem 0.85rem; gap: 0.5rem; flex-wrap: nowrap; justify-content: space-between; } .bis-topbar__left { gap: 0.8rem; flex-wrap: nowrap; min-width: 0; overflow: hidden; padding-left: 104px; } .bis-topbar__left .bis-topbar__item { font-size: 0.72rem; } /* Hide the long address on tablet/mobile to save space. */ .bis-topbar__left > a[href*="maps.app.goo.gl"] { display: none; } .bis-topbar__right { gap: 0.5rem; } } @media (max-width: 575px) { .bis-topbar__inner { padding: 0.35rem 0.7rem; } .bis-topbar__left { padding-left: 86px; } /* On the smallest screens collapse to a single visible item (phone) on the left. Email and address are already hidden above. */ .bis-topbar__left .bis-topbar__item:not(:first-child) { display: none; } .bis-topbar__left .bis-topbar__item:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Compact social icons so all 5 fit alongside the phone number. */ .bis-topbar__social { gap: 0.3rem; padding-left: 0.5rem; } .bis-topbar__social a { width: 22px; height: 22px; font-size: 0.65rem; } /* Drop the lock-icon admin link on phones — it lives in the footer anyway. */ .bis-topbar__admin { display: none; } /* Hide the Fees Portal pill text and shrink it to an icon-only button so we have room for the social row. */ .bis-topbar__portals a { padding: 0.25rem 0.4rem; font-size: 0.7rem; } } @media (max-width: 420px) { /* On very narrow phones, drop the Fees Portal pill from the topbar entirely — it's repeated in the mobile drawer and footer. */ .bis-topbar__portals { display: none; } /* Tighter social icons on the smallest devices. */ .bis-topbar__social { gap: 0.25rem; padding-left: 0.4rem; } .bis-topbar__social a { width: 20px; height: 20px; font-size: 0.6rem; } } /* =============================================================== 3. Mainbar (logo + nav + actions) =============================================================== */ .bis-mainbar { background: #ffffff; border-bottom: 1px solid var(--bis-border); transition: box-shadow 0.2s ease; } .bis-mainbar__inner { max-width: calc(100% - 2.5rem); margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; /* Lock the row height so the header NEVER reflows on scroll — the earlier height-shrink on scroll was the source of the "vibration" feedback loop between sticky header and page reflow. */ min-height: 80px; } .bis-site-header.is-scrolled { box-shadow: var(--bis-shadow-lg); } /* ---- Brand / Logo ---- The logo IMG is absolutely positioned inside the brand wrapper so it can sit consistently next to the nav content while remaining visually aligned with the header row. The brand link gets a left padding equal to the logo width so the textual part of the brand renders to the right of the logo without overlapping it. */ .bis-brand { position: relative; display: inline-flex; align-items: center; gap: 0.9rem; flex-shrink: 0; color: var(--bis-navy) !important; overflow: visible; padding-left: 120px; /* matches logo width (104) + 16 gap */ min-height: 80px; } .bis-brand img { position: absolute; top: 50%; left: 1.25rem; /* matches .bis-topbar__inner padding-left */ transform: translateY(-50%); width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(31, 31, 31, 0.22)); display: block; z-index: 10; pointer-events: auto; } .bis-brand__text { display: flex; flex-direction: column; line-height: 1.1; } .bis-brand__text strong { font-size: 1.45rem; font-weight: 800; color: var(--bis-gray-900); letter-spacing: -0.01em; } .bis-brand__text span { font-size: 0.72rem; font-weight: 700; color: var(--bis-orange); text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; } /* Keep the header itself non-clipping so the oversized logo can render above the mainbar without being cut off. */ .bis-site-header, .bis-mainbar, .bis-mainbar__inner { overflow: visible; } /* ---- Primary navigation ---- */ .bis-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .bis-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; } .bis-nav__item { position: relative; } .bis-nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.9rem; color: var(--bis-text) !important; font-size: 0.92rem; font-weight: 600; border-radius: 8px; transition: color 0.2s ease, background 0.2s ease; cursor: pointer; } .bis-nav__link i { font-size: 0.7rem; opacity: 0.6; transition: transform 0.2s ease; } .bis-nav__link:hover, .bis-nav__link.is-active { color: var(--bis-red) !important; background: var(--bis-orange-tint); } .bis-nav__item.has-dropdown:hover .bis-nav__link i { transform: rotate(180deg); } /* ---- Dropdown panels (standard) ---- */ .bis-dropdown { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 240px; background: #fff; border-radius: 12px; box-shadow: var(--bis-shadow-lg); border: 1px solid var(--bis-border); padding: 0.5rem; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 200; } .bis-nav__item.has-dropdown:hover > .bis-dropdown, .bis-nav__item.is-open > .bis-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 4px); } .bis-dropdown a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--bis-text) !important; font-size: 0.88rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .bis-dropdown a i { color: var(--bis-red); width: 18px; font-size: 0.85rem; text-align: center; } .bis-dropdown a:hover { background: var(--bis-cream); color: var(--bis-red) !important; } /* ---- Mega menu (wide multi-column) ---- */ .bis-dropdown--mega { width: min(960px, calc(100vw - 2rem)); padding: 1.5rem; left: 50%; } .bis-dropdown--mega .bis-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; } .bis-mega__col h6 { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bis-muted); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--bis-border); display: flex; align-items: center; gap: 0.4rem; } .bis-mega__col h6 i { color: var(--bis-red); } .bis-mega__col ul { list-style: none; margin: 0; padding: 0; } .bis-mega__col li a { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: 6px; font-size: 0.85rem; color: var(--bis-text) !important; font-weight: 500; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .bis-mega__col li a i { color: var(--bis-red); width: 16px; font-size: 0.78rem; text-align: center; opacity: 0.85; } .bis-mega__col li a:hover { background: var(--bis-cream); color: var(--bis-red) !important; transform: translateX(3px); } .bis-mega__feature { background: linear-gradient(135deg, var(--bis-navy) 0%, var(--bis-navy-deep) 100%); color: #fff; border-radius: 10px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; } .bis-mega__feature h5 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; } .bis-mega__feature p { color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; line-height: 1.55; margin: 0 0 1rem; } .bis-mega__feature .bis-mega__btn { align-self: flex-start; padding: 0.5rem 1rem; background: var(--bis-gold); color: var(--bis-navy) !important; border-radius: 6px; font-size: 0.8rem; font-weight: 700; transition: background 0.2s ease, transform 0.2s ease; } .bis-mega__feature .bis-mega__btn:hover { background: #fff; color: var(--bis-red) !important; transform: translateY(-2px); } /* ---- Actions area (search + CTA + hamburger) ---- */ .bis-mainbar__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .bis-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--bis-border); background: #fff; color: var(--bis-navy) !important; cursor: pointer; transition: all 0.2s ease; } .bis-icon-btn:hover { background: var(--bis-navy); color: #fff !important; border-color: var(--bis-navy); } /* Header's Apply button uses the unified .bis-btn classes — see buttons.css. */ /* ---- Hamburger toggle ---- */ .bis-nav__toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--bis-border); border-radius: 8px; background: #fff; cursor: pointer; align-items: center; justify-content: center; gap: 4px; flex-direction: column; padding: 0; } .bis-nav__toggle span { width: 18px; height: 2px; background: var(--bis-navy); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .bis-nav.is-open ~ .bis-mainbar__actions .bis-nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bis-nav.is-open ~ .bis-mainbar__actions .bis-nav__toggle span:nth-child(2) { opacity: 0; } .bis-nav.is-open ~ .bis-mainbar__actions .bis-nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .bis-nav__close { display: none; position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bis-border); background: #fff; color: var(--bis-navy); font-size: 1rem; cursor: pointer; z-index: 5; } /* Mobile-only CTA block inside the drawer — hidden by default */ .bis-nav__cta { display: none; } /* ---- Mobile backdrop ---- */ .bis-nav__backdrop { display: none; position: fixed; inset: 0; background: rgba(6, 29, 51, 0.55); z-index: 1090; opacity: 0; transition: opacity 0.25s ease; } .bis-nav__backdrop.is-visible { display: block; opacity: 1; } /* =============================================================== 4. Search overlay =============================================================== */ .bis-search-overlay { display: none; position: fixed; inset: 0; background: rgba(6, 29, 51, 0.92); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; } .bis-search-overlay.is-active { display: flex; } .bis-search-overlay__panel { width: 100%; max-width: 640px; text-align: center; } .bis-search-overlay h3 { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0 0 1.5rem; } .bis-search-overlay__form { position: relative; } .bis-search-overlay__form input { width: 100%; padding: 1.1rem 3.25rem 1.1rem 1.5rem; font-size: 1.1rem; border: 0; border-radius: 50px; outline: none; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } .bis-search-overlay__form button { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bis-red); color: #fff; cursor: pointer; } .bis-search-overlay__suggestions { margin-top: 1.5rem; display: inline-flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .bis-search-overlay__suggestions a { padding: 0.4rem 0.9rem; border-radius: 30px; background: rgba(255, 255, 255, 0.1); color: #fff !important; font-size: 0.82rem; font-weight: 600; transition: all 0.2s ease; } .bis-search-overlay__suggestions a:hover { background: var(--bis-gold); color: var(--bis-navy) !important; } .bis-search-overlay__close { position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease; } .bis-search-overlay__close:hover { background: var(--bis-red); border-color: var(--bis-red); } /* =============================================================== 5. Skip link (accessibility) =============================================================== */ .bis-skip { position: absolute; top: -60px; left: 1rem; z-index: 99999; background: var(--bis-red); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 8px 8px; font-weight: 600; transition: top 0.25s ease; } .bis-skip:focus { top: 0; } /* =============================================================== 6. Admin preview notice =============================================================== */ .bis-admin-notice { background: #dc3545; color: #fff; text-align: center; padding: 0.4rem 1rem; font-size: 0.78rem; font-weight: 600; } .bis-admin-notice a { color: #fff !important; text-decoration: underline; } /* =============================================================== 7. Responsive — Tablet & mobile =============================================================== */ @media (max-width: 1199px) { .bis-nav__link { padding: 0.55rem 0.65rem; font-size: 0.85rem; } .bis-brand__text strong { font-size: 1.1rem; } } @media (max-width: 991px) { .bis-mainbar__inner { padding: 0.6rem 0.9rem; gap: 0.5rem; min-height: 68px; } /* Brand on the LEFT, action cluster on the RIGHT. Inside the actions cluster the order is [Search] [Menu]. */ .bis-brand { gap: 0.65rem; min-width: 0; margin-right: auto; } .bis-mainbar__actions { gap: 0.4rem; } /* On tablet/mobile the logo is still absolutely positioned at the top-left of the header but is sized smaller to suit the slimmer topbar/mainbar. */ .bis-brand { padding-left: 96px; min-height: 68px; } .bis-brand img { width: 84px; height: 84px; top: 50%; left: 0.85rem; transform: translateY(-50%); } .bis-brand__text strong { font-size: 1.05rem; } .bis-brand__text span { font-size: 0.58rem; letter-spacing: 0.14em; } .bis-mainbar__actions .bis-btn { display: none; } .bis-icon-btn { width: 42px; height: 42px; border-radius: 10px; background: #fff; border: 1px solid var(--bis-gray-200); color: var(--bis-gray-800); } .bis-nav__toggle { display: inline-flex; width: 42px; height: 42px; border-radius: 10px; background: var(--bis-orange-soft); border-color: var(--bis-orange-light); } .bis-nav__toggle span { background: var(--bis-orange-darker); } /* ===================================================== Defensive: nuke any red/orange "bar" that may appear directly under the header on mobile. Covers the optional admission banner, the white mainbar's bottom border, and any rogue pseudo-element painted below the header. ===================================================== */ .bis-banner { display: none !important; } .bis-mainbar { border-bottom: 0 !important; } .bis-site-header::after, .bis-site-header::before, .bis-mainbar::after, .bis-mainbar::before { display: none !important; content: none !important; } .bis-nav { position: fixed; top: 0; right: 0; height: 100dvh; width: min(380px, 92vw); background: #fff; padding: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; z-index: 1100; transform: translateX(110%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -16px 0 50px rgba(31, 31, 31, 0.25); } .bis-nav.is-open { transform: translateX(0); } /* Mobile drawer header — branded strip at the top */ .bis-nav::before { content: ""; display: block; height: 96px; background: linear-gradient(135deg, var(--bis-orange) 0%, var(--bis-orange-dark) 100%); flex-shrink: 0; } .bis-nav__close { display: inline-flex; top: 1.1rem; right: 1.1rem; background: rgba(255, 255, 255, 0.95); color: var(--bis-orange-darker); border-color: transparent; box-shadow: 0 6px 14px rgba(31, 31, 31, 0.2); } .bis-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; flex: 1; overflow-y: auto; padding: 0.5rem 1rem 8rem; -webkit-overflow-scrolling: touch; } .bis-nav__item { border-bottom: 1px solid var(--bis-gray-100); } .bis-nav__item:last-child { border-bottom: 0; } .bis-nav__link { width: 100%; padding: 1.05rem 0.5rem; font-size: 1rem; border-radius: 0; justify-content: space-between; color: var(--bis-gray-800) !important; } .bis-nav__link.is-active { color: var(--bis-orange) !important; } .bis-nav__link:hover { background: transparent; color: var(--bis-orange) !important; } /* Animated chevron when section is open */ .bis-nav__item.has-dropdown.is-open > .bis-nav__link i { transform: rotate(180deg); color: var(--bis-orange); } .bis-dropdown { position: static; transform: none !important; width: 100% !important; min-width: 0; max-width: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0.75rem; background: var(--bis-orange-soft); opacity: 1; visibility: visible; display: none; margin: 0 -0.5rem; } .bis-nav__item.is-open > .bis-dropdown { display: block; } .bis-dropdown a { padding: 0.7rem 1rem; font-size: 0.92rem; } .bis-dropdown--mega { padding: 0.75rem 0.5rem; } .bis-dropdown--mega .bis-mega__grid { grid-template-columns: 1fr; gap: 0.75rem; } .bis-mega__col h6 { margin-bottom: 0.4rem; padding-bottom: 0.35rem; } /* Persistent CTA strip pinned at drawer bottom */ .bis-nav__cta { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.85rem 1rem 1.1rem; background: #fff; border-top: 1px solid var(--bis-gray-100); display: flex; gap: 0.5rem; box-shadow: 0 -8px 20px rgba(31, 31, 31, 0.08); } .bis-nav__cta .bis-btn { flex: 1; display: inline-flex; } .bis-mega__feature { order: 99; } } @media (max-width: 575px) { .bis-mainbar__inner { padding: 0.65rem 0.85rem; } .bis-brand { padding-left: 82px; } .bis-brand img { width: 72px; height: 72px; top: 50%; left: 0.7rem; transform: translateY(-50%); } .bis-brand__text strong { font-size: 0.98rem; } /* Keep the "International School" subtitle visible — the user wants the full school name shown on every breakpoint. */ .bis-brand__text span { display: block; font-size: 0.55rem; letter-spacing: 0.12em; } }