/* ========================================================================== IIFA - modern header layer Additive: loads last and overrides the legacy Bootstrap 3 header without touching the shared markup in top.php (used by 458 pages). Behaviour - transparent, floating over the hero on the homepage - frosted + solid once the page is scrolled (.hdr-scrolled on ) - inner pages get top padding so content clears the fixed bar ========================================================================== */ :root { --hdr-accent: #ff7a2f; --hdr-accent-2: #e8451f; --hdr-ink: #ffffff; --hdr-ink-dim: rgba(255, 255, 255, .72); --hdr-top-h: 38px; --hdr-nav-h: 76px; --hdr-nav-h-sm: 60px; --hdr-ease: cubic-bezier(.4, 0, .2, 1); --hdr-shadow: 0 8px 32px rgba(0, 0, 0, .38); } /* -------------------------------------------------------------------------- 1. Fix both bars to the viewport. They are siblings in the markup, so they are pinned independently rather than wrapped in a new container. -------------------------------------------------------------------------- */ .topbar { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1041; height: var(--hdr-top-h); min-height: var(--hdr-top-h); padding: 0 !important; background: linear-gradient(90deg, rgba(80, 6, 6, .82), rgba(120, 10, 10, .82)) !important; backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .09); transition: background .35s var(--hdr-ease), height .35s var(--hdr-ease); } .navigate { position: fixed !important; top: var(--hdr-top-h); left: 0; right: 0; z-index: 1040; height: var(--hdr-nav-h) !important; background: transparent !important; transition: background .35s var(--hdr-ease), height .35s var(--hdr-ease), box-shadow .35s var(--hdr-ease); } /* Scrim keeps white nav text legible against bright carousel photos while the bar is still transparent. It extends past the bar so the fade is gradual rather than a visible hard edge, and disappears once the solid state wins. */ .navigate::before { content: ""; position: absolute; inset: -38px 0 -34px 0; background: linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .72) 42%, rgba(0, 0, 0, .45) 68%, rgba(0, 0, 0, .16) 86%, transparent 100%); pointer-events: none; transition: opacity .35s var(--hdr-ease); } /* -------------------------------------------------------------------------- 2. Scrolled state - frosted glass, condensed -------------------------------------------------------------------------- */ .hdr-scrolled .navigate { top: 0; height: var(--hdr-nav-h-sm) !important; background: rgba(12, 12, 14, .82) !important; backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: var(--hdr-shadow); } .hdr-scrolled .navigate::before { opacity: 0; } .hdr-scrolled .topbar { height: 0; min-height: 0; overflow: hidden; border-bottom-color: transparent; } /* -------------------------------------------------------------------------- 3. Strip the legacy opaque backgrounds (they are set inline in top.php, so these need !important to win) -------------------------------------------------------------------------- */ .navigate .navbar, .navigate .navbar-default, .navigate .navbar-collapse, .navigate .navbar-nav, .navigate .js-navbar-collapse { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; min-height: 0 !important; } .navigate .navbar { height: 100% !important; } .navigate .navbar-collapse { display: flex !important; align-items: center; height: 100%; padding: 0 clamp(12px, 3vw, 40px) !important; } .navigate .navbar-nav { display: flex !important; align-items: center; width: 100% !important; gap: 2px; float: none !important; } /* -------------------------------------------------------------------------- 4. Logo -------------------------------------------------------------------------- */ .navigate .navbar-nav > li:first-child { margin-right: auto; } .navigate .navbar-nav > li:first-child .col-md-3 { width: auto !important; padding: 0 !important; float: none !important; } .navigate .navbar-nav > li:first-child img { width: auto !important; min-width: 0 !important; height: clamp(38px, 4.4vw, 52px) !important; transition: height .35s var(--hdr-ease); } .hdr-scrolled .navigate .navbar-nav > li:first-child img { height: clamp(32px, 3.6vw, 42px) !important; } /* -------------------------------------------------------------------------- 5. Nav links - spacing, weight, animated underline -------------------------------------------------------------------------- */ .navigate .navbar-nav > li > a { position: relative; display: flex !important; align-items: center; height: auto !important; padding: 10px 13px !important; color: var(--hdr-ink) !important; font-family: Lato, "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px !important; font-weight: 600; letter-spacing: .015em; line-height: 1.2; background: transparent !important; border-radius: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); transition: color .2s var(--hdr-ease), background-color .2s var(--hdr-ease); } .navigate .navbar-nav > li > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--hdr-accent), var(--hdr-accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--hdr-ease); } .navigate .navbar-nav > li > a:hover, .navigate .navbar-nav > li > a:focus, .navigate .navbar-nav > li.open > a { color: #fff !important; background: rgba(255, 255, 255, .1) !important; } .navigate .navbar-nav > li > a:hover::after, .navigate .navbar-nav > li.open > a::after { transform: scaleX(1); } /* Bootstrap 3 renders the caret as a bordered triangle; swap for a chevron */ .navigate .navbar-nav .caret { border: 0 !important; width: 8px; height: 8px; margin-left: 7px; border-right: 1.8px solid currentColor !important; border-bottom: 1.8px solid currentColor !important; transform: rotate(45deg) translate(-2px, -2px); opacity: .75; transition: transform .25s var(--hdr-ease); } .navigate .navbar-nav > li.open .caret { transform: rotate(-135deg) translate(-2px, -2px); } /* -------------------------------------------------------------------------- 6. Dropdowns - dark frosted panels -------------------------------------------------------------------------- */ .navigate .dropdown-menu { margin-top: 6px !important; padding: 14px !important; background: rgba(16, 16, 19, .96) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 14px !important; box-shadow: 0 18px 48px rgba(0, 0, 0, .5) !important; animation: hdrDropIn .22s var(--hdr-ease) both; } @keyframes hdrDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .navigate .dropdown-menu a { color: var(--hdr-ink-dim) !important; border-radius: 7px; padding: 7px 11px !important; font-size: 13.5px; transition: background-color .18s var(--hdr-ease), color .18s var(--hdr-ease); } .navigate .dropdown-menu a:hover, .navigate .dropdown-menu a:focus { background: rgba(255, 122, 47, .16) !important; color: #fff !important; } .navigate .dropdown-menu .divider { background: rgba(255, 255, 255, .1); } /* -------------------------------------------------------------------------- 7. Utility bar -------------------------------------------------------------------------- */ .topbar .container { display: flex; align-items: center; height: var(--hdr-top-h); width: 100% !important; max-width: 1560px; padding: 0 clamp(12px, 3vw, 40px) !important; } .topbar #topheader { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; width: 100%; margin: 0; padding: 0; flex-direction: row-reverse; /* markup lists these items in reverse order */ justify-content: flex-end; } .topbar li { float: none !important; padding: 0 !important; font-size: 12.5px !important; line-height: 1; } .topbar li a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 6px; color: var(--hdr-ink-dim) !important; font-family: Lato, "Segoe UI", system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: color .18s var(--hdr-ease), background-color .18s var(--hdr-ease); } .topbar li a:hover { color: #fff !important; background: rgba(255, 255, 255, .12); } .topbar li a b { font-weight: 600; } .topbar li a font { color: inherit !important; } .topbar .fa { font-size: 12px; opacity: .85; } /* "Download Brochure" reads as the primary action */ .topbar #download_broucher_btn { background: linear-gradient(135deg, var(--hdr-accent), var(--hdr-accent-2)) !important; color: #fff !important; box-shadow: 0 3px 12px rgba(232, 69, 31, .4); margin-right: 4px; } .topbar #download_broucher_btn b { color: #fff !important; } .topbar #download_broucher_btn:hover { filter: brightness(1.08); box-shadow: 0 5px 18px rgba(232, 69, 31, .55); } /* The legacy blink keyframe repaints continuously - swap for a static accent */ .topbar .blink { animation: none !important; color: var(--hdr-accent) !important; } /* -------------------------------------------------------------------------- 8. Layout compensation The homepage hero sits directly beneath the bars and keeps its own full-bleed position. Every other page gets padding to clear them. -------------------------------------------------------------------------- */ html:not(.is-home) body { padding-top: calc(var(--hdr-top-h) + var(--hdr-nav-h)); } /* Transparency only earns its keep where there is a hero behind it. Inner pages have none, so the scrim would just read as a stray grey gradient - they get the frosted-solid treatment from the start instead. */ html.is-inner .navigate { background: rgba(12, 12, 14, .92) !important; backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); } html.is-inner .navigate::before { opacity: 0; } /* -------------------------------------------------------------------------- 9. Mobile -------------------------------------------------------------------------- */ .navigate .navbar-toggle { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); margin: 0 !important; padding: 9px 10px !important; background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 9px !important; z-index: 5; } .navigate .navbar-toggle .icon-bar { width: 20px; height: 2px; background: #fff !important; border-radius: 2px; } .navigate .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } @media (max-width: 991px) { :root { --hdr-nav-h: 62px; --hdr-nav-h-sm: 56px; } .navigate .navbar-header { position: relative; height: var(--hdr-nav-h); } .navigate .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; display: block !important; /* The desktop rule pins this to height:100% of the 62px bar. Left as-is the panel paints only its first 62px and every link below that renders straight over the hero image. */ height: auto !important; max-height: calc(100vh - var(--hdr-nav-h) - var(--hdr-top-h)) !important; overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 10px 14px 18px !important; /* Fully opaque: this sits over photographic slides, and any translucency costs legibility for no real benefit on a small screen. */ background: #0d0d10 !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--hdr-shadow); z-index: 1039; } .navigate .navbar-collapse.collapse:not(.in) { display: none !important; } .navigate .navbar-nav { display: block !important; } .navigate .navbar-nav > li { width: 100%; } .navigate .navbar-nav > li > a { padding: 12px 10px !important; } .navigate .navbar-nav > li > a::after { display: none; } /* The in-menu logo cannot show here: its parent .navbar-collapse is display:none when closed, so .hdr-mobile-brand in .navbar-header is used instead (see top.php). */ .navigate .navbar-nav > li:first-child { display: none !important; } /* Mobile brand: the emblem only. `navlogo.png` bakes the wordmark and the "A Unit of Lancaster Group of Institutions" tagline into the same image, and at this size that text is unreadable — so the mark is cropped out to images/navlogo-mark.webp and used on its own here. */ .hdr-mobile-brand { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: block; z-index: 4; } .hdr-mobile-brand img { display: block; width: auto; height: 40px; min-width: 0 !important; max-width: none; } .navigate .dropdown-menu { position: static !important; float: none !important; width: 100% !important; margin: 0 0 6px !important; background: rgba(255, 255, 255, .05) !important; border: 0 !important; box-shadow: none !important; animation: none; } /* Phone numbers are the primary mobile CTA, so run the row in markup order (phones first) instead of the desktop's reversed order. */ .topbar #topheader { flex-direction: row; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* The two cross-site promo links ("Visit IIFA BSK Branch" / "Visit IIFA Lancaster Degree College") cannot fit beside the numbers at this width and were being cut mid-word. Both sites are still linked from the footer, so they are dropped here rather than left truncated. */ .topbar #topheader li:nth-child(3), .topbar #topheader li:nth-child(4) { display: none; } .topbar #topheader::-webkit-scrollbar { display: none; } .topbar li { flex: 0 0 auto; } .topbar li a { padding: 5px 9px; font-size: 12px; } .topbar #download_broucher_btn { margin-right: 0; } } /* The mobile brand is hidden on desktop, where the in-menu logo is used */ @media (min-width: 992px) { .hdr-mobile-brand { display: none !important; } } /* -------------------------------------------------------------------------- 10. Floating widgets on small screens Three fixed elements compete for the bottom strip of a phone screen: the WhatsApp link (85x70), the Zoho SalesIQ chat tab (73x70) and the callback popup (212x69). On a 375px viewport they overlap each other. Here they are shrunk and pinned to opposite corners, with the popup lifted clear above. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .float { bottom: 10px !important; right: 6px !important; z-index: 998; line-height: 0; } .float img, #whatsapp_icon { width: 44px !important; height: 44px !important; min-width: 0 !important; } /* SalesIQ animates its own `transform` (a 180deg flip on show/hide), so touching transform or transform-origin here moves the pivot and throws the widget off-screen. `zoom` shrinks it without going near that property. */ .zsiq_floatmain, #zsiq_float { zoom: .82; } /* Sit the popup above both corner widgets instead of across them. */ .popup { bottom: 62px !important; } } @media (max-width: 400px) { .float img, #whatsapp_icon { width: 40px !important; height: 40px !important; } .zsiq_floatmain, #zsiq_float { zoom: .78; } } /* -------------------------------------------------------------------------- 11. Accessibility -------------------------------------------------------------------------- */ .navigate .navbar-nav > li > a:focus-visible, .topbar li a:focus-visible { outline: 2px solid var(--hdr-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .topbar, .navigate, .navigate *, .topbar * { transition: none !important; animation: none !important; } }