/* ========================================================= BELAIR HILL JUNIOR SCHOOL NAVIGATION COMPONENT DESIGN --------------------------------------------------------- LEFT : Logo MAIN : White TOP : Narrow premium green strip BOTTOM: Premium brown / orange strip BHJS : Centered above navigation buttons INTERACTION --------------------------------------------------------- HOVER : Soft green / warm brown highlight ACTIVE : Stronger green highlight APPLY : Premium brown / orange hover + active state ========================================================= */ /* ========================================================= HEADER ========================================================= */ header { position: sticky; top: 0; z-index: 1000; width: 100%; background: #ffffff; border-bottom: 1px solid rgba(80, 55, 35, 0.16); box-shadow: 0 8px 24px rgba(50, 40, 30, 0.10); } /* ========================================================= MAIN NAVBAR ========================================================= */ .navbar { position: relative; width: 100%; min-height: 210px; display: flex; align-items: stretch; margin: 0; padding: 0; background: #ffffff; } /* ========================================================= NARROW GREEN TOP STRIP ========================================================= */ .navbar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; z-index: 20; background: linear-gradient( 90deg, #174f3c 0%, #2f7259 45%, #174f3c 100% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 5px rgba(20, 60, 45, 0.18); } /* ========================================================= PREMIUM BROWN / ORANGE BOTTOM STRIP ========================================================= */ .navbar::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 10px; z-index: 20; background: linear-gradient( 90deg, #7b432d 0%, #a7613c 30%, #c17b4a 50%, #a7613c 70%, #713b29 100% ); box-shadow: inset 0 1px 0 rgba(255, 235, 210, 0.45), 0 -2px 7px rgba(90, 45, 25, 0.14); } /* ========================================================= LOGO AREA ========================================================= */ .brand-logo { width: 175px; height: 210px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #ffffff; text-decoration: none; overflow: hidden; position: relative; z-index: 5; } /* ========================================================= LOGO ========================================================= */ .logo { width: 175px; height: 210px; display: grid; place-items: center; overflow: hidden; margin: 0; padding: 0; background: transparent; } .logo img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow( 0 3px 5px rgba(45, 30, 20, 0.16) ); } /* ========================================================= NAVIGATION PANEL ========================================================= */ .navigation-panel { position: relative; z-index: 2; flex: 1; min-width: 0; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 18px 30px 19px; overflow: hidden; background: #ffffff; } /* ========================================================= SUBTLE PREMIUM LIGHT ON WHITE ========================================================= */ .navigation-panel::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 70px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) ); pointer-events: none; } /* ========================================================= SUBTLE WARM LOWER GLOW ========================================================= */ .navigation-panel::after { content: ""; position: absolute; bottom: 10px; left: 8%; width: 84%; height: 35px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0), rgba(180, 105, 65, 0.035) ); pointer-events: none; } /* ========================================================= BHJS INITIALS ========================================================= */ .brand-initials { position: relative; z-index: 5; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 82px; padding: 8px 0 7px; } .brand-initials strong { display: block; color: #245b48; font-family: var(--font-heading); font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: 6px; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 5px rgba(45, 65, 55, 0.14); } /* ========================================================= NAVIGATION LINKS ========================================================= */ .nav-links { position: relative; z-index: 5; width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0; font-size: 13px; font-weight: 700; flex-wrap: nowrap; } /* ========================================================= NAVIGATION BUTTONS — NORMAL ========================================================= */ .nav-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 13px; color: #35463f; white-space: nowrap; text-decoration: none; border: 1px solid transparent; border-radius: 5px; background: transparent; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } /* ========================================================= NAVIGATION BUTTON — HOVER ========================================================= */ .nav-links a:not(.apply-btn):hover { color: #174f3c; background: linear-gradient( 180deg, rgba(23, 79, 60, 0.10), rgba(193, 123, 74, 0.06) ); border-color: rgba(23, 79, 60, 0.20); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(40, 50, 45, 0.10); } /* ========================================================= NAVIGATION BUTTON — ACTIVE / CLICKED ========================================================= */ .nav-links a:not(.apply-btn):active { color: #ffffff; background: linear-gradient( 180deg, #2f7259 0%, #245b48 55%, #174f3c 100% ); border-color: #174f3c; transform: translateY(0); box-shadow: inset 0 2px 5px rgba(10, 45, 32, 0.25), 0 2px 5px rgba(40, 50, 45, 0.12); } /* ========================================================= NAVIGATION BUTTON — KEYBOARD FOCUS ========================================================= */ .nav-links a:not(.apply-btn):focus-visible { outline: 3px solid rgba(193, 123, 74, 0.40); outline-offset: 2px; color: #174f3c; background: rgba(23, 79, 60, 0.07); } /* ========================================================= GREEN / BROWN UNDERLINE ========================================================= */ .nav-links a:not(.apply-btn)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px; background: linear-gradient( 90deg, #245b48, #b46e43 ); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } .nav-links a:not(.apply-btn):hover::after { transform: scaleX(1); } /* ========================================================= ACTIVE BUTTON INDICATOR ========================================================= */ .nav-links a.active:not(.apply-btn) { color: #174f3c; background: linear-gradient( 180deg, rgba(23, 79, 60, 0.11), rgba(193, 123, 74, 0.055) ); border-color: rgba(23, 79, 60, 0.18); box-shadow: inset 0 -2px 0 rgba(180, 110, 67, 0.55), 0 4px 10px rgba(40, 50, 45, 0.07); } /* ========================================================= ACTIVE BUTTON UNDERLINE ========================================================= */ .nav-links a.active:not(.apply-btn)::after { transform: scaleX(1); background: linear-gradient( 90deg, #174f3c, #b46e43 ); } /* ========================================================= APPLY NOW ========================================================= */ .nav-links .apply-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 20px; margin-left: 7px; border-radius: 5px; background: linear-gradient( 180deg, #bd7749 0%, #a45e38 50%, #88492f 100% ); color: #ffffff; border: 1px solid rgba(117, 63, 38, 0.28); box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.40), inset 0 -4px 9px rgba(80, 40, 20, 0.10), 0 6px 14px rgba(75, 45, 30, 0.15); transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* ========================================================= APPLY NOW — HOVER ========================================================= */ .nav-links .apply-btn:hover { background: linear-gradient( 180deg, #ce8957 0%, #b36b43 50%, #975335 100% ); color: #ffffff; transform: translateY(-2px); border-color: rgba(117, 63, 38, 0.45); box-shadow: inset 0 1px 0 rgba(255, 245, 230, 0.50), 0 10px 20px rgba(75, 45, 30, 0.20); } /* ========================================================= APPLY NOW — CLICKED ========================================================= */ .nav-links .apply-btn:active, .nav-links .apply-btn.active { background: linear-gradient( 180deg, #8b4a30 0%, #733b27 55%, #5f301f 100% ); color: #ffffff; transform: translateY(0); border-color: #5f301f; box-shadow: inset 0 3px 8px rgba(55, 25, 15, 0.30), 0 2px 5px rgba(55, 30, 20, 0.15); } /* ========================================================= MOBILE MENU BUTTON ========================================================= */ .menu-btn { display: none; width: 50px; height: 50px; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 1px solid rgba(36, 91, 72, 0.20); border-radius: 6px; background: #ffffff; color: #245b48; font-size: 29px; line-height: 1; cursor: pointer; box-shadow: 0 4px 10px rgba(40, 50, 45, 0.08); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } /* ========================================================= MOBILE MENU BUTTON — HOVER ========================================================= */ .menu-btn:hover { background: linear-gradient( 180deg, rgba(23, 79, 60, 0.08), rgba(193, 123, 74, 0.05) ); color: #174f3c; border-color: rgba(23, 79, 60, 0.30); transform: translateY(-1px); } /* ========================================================= MOBILE MENU BUTTON — CLICKED ========================================================= */ .menu-btn:active, .menu-btn[aria-expanded="true"] { background: linear-gradient( 180deg, #245b48, #174f3c ); color: #ffffff; border-color: #174f3c; transform: translateY(0); box-shadow: inset 0 2px 6px rgba(10, 45, 32, 0.25), 0 3px 8px rgba(30, 55, 45, 0.14); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1250px) { .brand-logo, .logo { width: 150px; height: 180px; } .navbar, .navigation-panel { min-height: 180px; } .navigation-panel { padding: 15px 24px 17px; } .brand-initials { min-height: 67px; } .brand-initials strong { font-size: 43px; letter-spacing: 4px; } .nav-links { gap: 3px; font-size: 12px; } .nav-links a { min-height: 41px; padding: 0 8px; } .nav-links .apply-btn { padding: 0 13px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 1020px) { .navbar { min-height: 135px; } .brand-logo, .logo { width: 105px; height: 135px; } .navigation-panel { min-height: 135px; padding: 10px 20px 12px; } .brand-initials { min-height: 47px; padding-top: 6px; } .brand-initials strong { font-size: 34px; letter-spacing: 3px; } .menu-btn { display: flex; position: absolute; top: 24px; right: 20px; } .nav-links { position: absolute; top: 135px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; width: 100%; padding: 15px 5% 20px; background: #ffffff; border-top: 5px solid #245b48; border-bottom: 10px solid #a45e38; box-shadow: 0 15px 35px rgba(50, 40, 30, 0.16); } .nav-links.is-open { display: flex; } .nav-links a { width: 100%; justify-content: flex-start; min-height: 44px; padding: 10px 13px; font-size: 13px; } .nav-links a:not(.apply-btn)::after { display: none; } .nav-links .apply-btn { width: 100%; margin-top: 8px; margin-left: 0; padding: 12px 20px; justify-content: center; } .nav-links a:not(.apply-btn):active { background: linear-gradient( 90deg, #245b48, #2f7259 ); color: #ffffff; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 760px) { .navbar { min-height: 112px; } .brand-logo, .logo { width: 86px; height: 112px; } .navigation-panel { min-height: 112px; padding: 8px 15px 9px; } .brand-initials { min-height: 40px; } .brand-initials strong { font-size: 27px; letter-spacing: 2px; } .menu-btn { width: 44px; height: 44px; top: 18px; right: 15px; font-size: 26px; } .nav-links { top: 112px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .navbar { min-height: 100px; } .brand-logo, .logo { width: 76px; height: 100px; } .navigation-panel { min-height: 100px; padding: 6px 12px 8px; } .brand-initials { min-height: 36px; } .brand-initials strong { font-size: 23px; letter-spacing: 1.5px; } .menu-btn { width: 40px; height: 40px; top: 14px; right: 12px; } .nav-links { top: 100px; } } /* ========================================================= ACCESSIBILITY ========================================================= */ .menu-btn:focus-visible { outline: 3px solid #b46e43; outline-offset: 3px; } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .nav-links a, .nav-links a::after, .nav-links .apply-btn, .menu-btn { transition: none; } }