:root { --color-background: #0F3C0F; /* color menu backgrnd*/ /* ORIGINAL 5MAY 2026 --color-surface: #f8f9fa;*/ --color-surface: #0F3C0F; --color-text-primary: #ffffff; --color-text-secondary: #495057; --color-primary: #ffffff; --color-border: #e9ecef; --font-family-sans-serif: "Niagara Solid", "Segoe UI", -apple-system, sans-serif; --navbar-height: 85px; --container-width: 1200px; --border-radius: 1px; --transition-speed: 0.3s; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family-sans-serif); background-color: #f9fafb; line-height: 1.6; } .content { min-height: 150vh; max-width: var(--container-width); margin: 0 auto; padding: calc(var(--navbar-height) + 2rem) 1.5rem; } ul { list-style: none; margin: 0; padding: 0; } a, .mega-menu-toggle { text-decoration: none; color: var(--color-text-secondary); background: none; border: none; font-family: inherit; cursor: pointer; } a:hover, .mega-menu-toggle:hover { color: var(--color-primary); } .navbar { position: sticky; top: 0; z-index: 1001; height: var(--navbar-height); display: flex; align-items: center; background-color: var(--color-background); border-bottom: 1px solid var(--color-border); } /* LAST PADDING IS TO MOVE LOGO SCHOOL NAME AND MENU BAR TOWARDS LEFT ORIGINAL PADDING IS 1.5 REM */ .navbar__container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 0.5rem; } .navbar__brand { font-size: 1.5rem; font-weight: 400; color: var(--color-text-primary); font-family:"Niagara Solid"; font-stretch:wider;letter-spacing:2px; } .nav-item { position: relative; border-color:#FFFFFF; } /* added on 29april2026 */.nav-item a{ font-weight: 500; font-size: 0.85rem; color: var(--color-text-primary); position: relative; } /* THIS FONT SIZE 0.91 REM IS FOR MENU FONT SIZE */ .nav-link, .mega-menu-toggle { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.5rem; font-weight: 500; font-size: 0.85rem; color: var(--color-text-primary); } /* THE CODE BELOW IS FOR TRANSPARENT COLOR OF MENU */ .mega-menu { display: none; background-color: none; color: white; box-shadow: 10px 18px 16px 0px rgba(0,0,0,0.2); } .nav-item.is-open > .mega-menu { display: block; border: 1px black; /**/border-bottom: 1px solid black; opacity: 0.80; } /* ======================================== MOBILE-FIRST STYLES (DEFAULT) ======================================== */ /* The main navigation container (mobile menu panel) */ .navbar__nav { display: none; /* Hidden by default */ position: fixed; top: var(--navbar-height); left: 0; width: 100%; /* ORIGINAL 5 MAY 2026 background-color: var(--color-background);*/ background-color:#0F3C0F; height: calc(100vh - var(--navbar-height)); overflow-y: auto; } .navbar__nav.is-open { display: block; } /* Show when toggled */ .nav-list > .nav-item { border-bottom: 1px solid var(--color-border); } .nav-link, .mega-menu-toggle { justify-content: space-between; width: 100%; } /* Sub-menu panel (accordion style) */ .mega-menu { max-height: 0; overflow: hidden; /* ORIGINAL 5MAY 2026 background-color: var(--color-surface);background-color:#307E4A;*/ transition: max-height var(--transition-speed) ease; border: 1px black; border-bottom: 1px solid black; } .nav-item.is-open > .mega-menu { max-height: 1000px; /* Animate to open */ border-top: 1px solid black; border-left: 1px solid black; border-right:1px solid black; } .mega-menu__content { padding: 0.1rem 0.5rem; } .mega-menu__column{ width:85%} /* Sub-menu grid (stacks vertically) */ .mega-menu__grid { display: block;} .mega-menu__column:not(:first-child) { margin-top: 1.5rem; } .mega-menu__heading { font-size: .9rem; font-weight: 600; text-transform: uppercase; margin: 0 0 1rem; } .mega-menu__link-list li { margin-bottom: 0.75rem; color:white; } .mega-menu__link-list li a:hover{ /**/background-color: none; color: black; box-shadow: 10px 18px 16px 0px rgba(0,0,0,0.2); opacity: 0.5; } /* The hamburger button */ .navbar__mobile-toggle { display: block; border: 1px solid var(--color-border); background: white; padding: 0.5rem; cursor: pointer; } /* ======================================== DESKTOP OVERRIDES ======================================== */ @media (min-width: 992px) { .navbar__mobile-toggle { display: none; } /* Hide hamburger */ /* Restore nav to a horizontal layout */ .navbar__nav { display: flex; position: static; height: auto; width: auto; background-color: transparent; overflow: visible; } .nav-list { display: flex; align-items: center; gap: .5rem; } .nav-list > .nav-item { border-bottom: none; } .nav-link, .mega-menu-toggle { padding: .175rem 0.01rem; border-radius: var(--border-radius); /* THIS PADDING IS FOR REDUCING THE GAP BETWEEN MENU INKS */ transition: background-color 0.2s, color 0.2s; } .nav-link:hover, .mega-menu-toggle:hover { background-color: var(--color-surface); } /* Restore desktop mega menu styles */ .mega-menu { position: absolute; top: calc(100% + 5px); left: 0;/**/ /*width: 600px; */ width: 350px; /* background: var(--color-background);*/ background-color:#307E4A; /* border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: 0 10px 20px rgba(0,0,0,0.1);*/ max-height: none; /* Remove accordion behavior */ } .mega-menu__grid { width:350px;display: grid; grid-template-columns: 13fr 1fr; gap: 0.05rem; } .mega-menu__column:not(:first-child) { margin-top: 0; box-shadow: 10px 18px 16px 0px rgba(0,0,0,0.2); } .mega-menu__link-list li a:hover{ /*background-color: light yellow;*/ color: white; } }