/* ============================================================ TEMPE HIGH BUFFALOES FOOTBALL — NAVIGATION STYLES nav.css · v1.0 Load order in : 1. global.css ← design tokens & reset (required first) 2. nav.css ← this file Covers: Utility bar · Primary nav · Logo · Menu items · Dropdown menus · CTA buttons · Mobile hamburger · Responsive breakpoints ============================================================ */ /* ── UTILITY BAR ─────────────────────────────────────────── */ .util-bar { background: var(--color-black); height: var(--utility-height); /* 36px from global.css tokens */ display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; } .util-bar__left { display: flex; align-items: center; gap: 20px; } .util-link { font-family: var(--font-condensed); font-size: var(--text-xs); /* 10px */ font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); text-decoration: none; transition: var(--transition-fast); } .util-link:hover { color: var(--color-accent); } .util-bar__social { display: flex; align-items: center; gap: 16px; } .util-bar__social a { color: rgba(255, 255, 255, 0.38); font-size: 15px; line-height: 1; text-decoration: none; transition: var(--transition-fast); } .util-bar__social a:hover { color: var(--color-accent); } /* ── PRIMARY NAV SHELL ───────────────────────────────────── */ .site-nav { background: var(--color-navy); height: var(--nav-height); /* 70px from global.css tokens */ display: flex; align-items: center; padding: 0 1.5rem; gap: 0; position: sticky; top: 0; z-index: 200; border-bottom: 3px solid var(--color-accent); } /* ── LOGO ─────────────────────────────────────────────────── */ .site-nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; padding-right: 22px; margin-right: 8px; border-right: 1px solid rgba(255, 255, 255, 0.1); } .site-nav__logo-img { height: 50px; width: auto; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); display: block; } /* Text fallback — hidden by default, shown via JS onerror */ .site-nav__logo-text { display: none; flex-direction: column; line-height: 1.15; } .site-nav__school { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--color-white); letter-spacing: 1px; text-transform: uppercase; } .site-nav__mascot { font-family: var(--font-condensed); font-size: 10px; color: var(--color-accent); letter-spacing: 2.5px; text-transform: uppercase; } /* ── MENU LIST ────────────────────────────────────────────── */ .site-nav__menu { display: flex; flex: 1; height: var(--nav-height); list-style: none; margin: 0; padding: 0; } /* ── NAV ITEM ─────────────────────────────────────────────── */ .nav-item { position: relative; height: var(--nav-height); display: flex; align-items: center; } /* ── NAV LINK ─────────────────────────────────────────────── */ .nav-link { font-family: var(--font-condensed); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); text-decoration: none; padding: 0 15px; height: 100%; display: flex; align-items: center; gap: 5px; white-space: nowrap; /* Bottom-border used as active/hover indicator */ border-bottom: 3px solid transparent; margin-bottom: -3px; /* Aligns with nav border-bottom */ transition: var(--transition-fast); } .nav-link:hover, .nav-link.active { color: var(--color-white); border-bottom-color: var(--color-accent); } /* Chevron icon inside nav links */ .nav-link .ti { font-size: 11px; opacity: 0.6; transition: transform var(--transition-fast); } .nav-item--dropdown:hover .nav-link .ti { transform: rotate(180deg); opacity: 1; } /* ── DROPDOWN MENU ────────────────────────────────────────── */ .nav-dropdown { position: absolute; top: var(--nav-height); left: 0; min-width: 210px; list-style: none; padding: 0; margin: 0; background: var(--color-navy-deep); border-top: 2px solid var(--color-accent); /* Hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--transition-base); z-index: 300; } /* Revealed on parent hover */ .nav-item--dropdown:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown__link { display: block; font-family: var(--font-condensed); font-size: var(--text-sm); /* 12px */ font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); text-decoration: none; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: var(--transition-fast); } .nav-dropdown__link:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.05); padding-left: 20px; /* Slide-in effect */ } .nav-dropdown__link:last-child { border-bottom: none; } /* ── RIGHT-SIDE CTA BUTTONS ───────────────────────────────── */ .site-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ── MOBILE HAMBURGER (hidden on desktop) ─────────────────── */ .site-nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-sm); } .site-nav__hamburger span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, 0.8); border-radius: 1px; transition: var(--transition-base); } /* Animated X state when menu is open */ .site-nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .site-nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── RESPONSIVE — TABLET / MOBILE (≤ 960px) ─────────────── */ @media (max-width: 960px) { /* Hide utility quick links on mobile */ .util-bar__left { display: none; } /* Allow nav to wrap for mobile menu */ .site-nav { flex-wrap: wrap; height: auto; padding: 0 1rem; } /* Logo row */ .site-nav__logo { border-right: none; margin-right: 0; padding-right: 0; padding: 12px 0; } /* Show hamburger */ .site-nav__hamburger { display: flex; } /* Hide desktop CTAs */ .site-nav__actions { display: none; } /* Menu hidden until toggled */ .site-nav__menu { display: none; flex-direction: column; width: 100%; height: auto; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 12px; } .site-nav__menu.is-open { display: flex; } /* Nav items stack full-width */ .nav-item { height: auto; width: 100%; } /* Vertical nav links with left-border active indicator */ .nav-link { padding: 12px 16px; border-bottom: none; border-left: 3px solid transparent; width: 100%; margin-bottom: 0; } .nav-link:hover, .nav-link.active { border-left-color: var(--color-accent); border-bottom-color: transparent; background: rgba(255, 255, 255, 0.04); } /* Dropdowns become static accordion panels */ .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; border-top: none; border-left: 3px solid rgba(216, 199, 193, 0.2); margin-left: 16px; display: none; /* toggled by JS .is-open class */ background: transparent; } .nav-item--dropdown:hover .nav-dropdown { display: none; /* Disable hover trigger on mobile */ } .nav-item--dropdown.is-open .nav-dropdown { display: block; } .nav-dropdown__link { padding: 9px 14px; font-size: var(--text-xs); } .nav-dropdown__link:hover { padding-left: 18px; } } /* ── RESPONSIVE — SMALL MOBILE (≤ 480px) ─────────────────── */ @media (max-width: 480px) { .util-bar { padding: 0 1rem; } .util-bar__social { gap: 12px; } }