/* ========================================================= UNIVERSAL MOBILE MENU BUTTON (TOGGLE) --------------------------------------------------------- FILE: universal-menu-toggle.css ========================================================= PURPOSE ========================================================= This stylesheet is the CENTRAL / UNIVERSAL styling system for the mobile navigation toggle button. The component is responsible for the button itself. It is NOT responsible for rendering the navigation panel. ========================================================= COMPONENT STRUCTURE ========================================================= .menu-toggle | +-- .menu-toggle__icon | | | +-- span → top icon bar | +-- span → middle icon bar | +-- span → bottom icon bar | +-- .menu-toggle__label | +-- MENU text label ========================================================= COMPONENT OWNERSHIP ========================================================= THIS FILE OWNS: • Menu button appearance • Menu button dimensions • Menu button alignment • Menu icon • Three hamburger bars • Hamburger spacing / geometry • PLUS (+) open-state geometry • MENU label • MENU label animation • Hover state • Responsive visibility • Reduced-motion behavior ========================================================= OTHER CSS FILES SHOULD NOT STYLE: ========================================================= .menu-toggle .menu-toggle__icon .menu-toggle__icon > span .menu-toggle__label This prevents page-specific stylesheets from competing with the universal component. ========================================================= NAVIGATION PANEL OWNERSHIP ========================================================= Page-specific or navigation-specific CSS MAY still own: .site-nav body.menu-open .site-nav These selectors control the navigation PANEL, rather than the menu BUTTON itself. ========================================================= JAVASCRIPT OWNERSHIP ========================================================= JavaScript should control the menu STATE by adding or removing: body.menu-open CSS responds to that state and performs the visual transformation. ========================================================= DESIGN INTENT ========================================================= CLOSED: ───── ───── ───── OPEN: │ ──┼── │ Therefore: HAMBURGER → PLUS (+) NOT: HAMBURGER → X ========================================================= */ /* ========================================================= 01. UNIVERSAL MENU COMPONENT — DESIGN TOKENS --------------------------------------------------------- These variables belong specifically to the menu button. CHANGE THESE VALUES HERE when adjusting the universal menu component. DO NOT duplicate these variables in every page stylesheet. ========================================================= */ .menu-toggle { /* ----------------------------------------------------- PRIMARY WHITE ----------------------------------------------------- Used by the hamburger / PLUS icon bars and the component's primary text color. ----------------------------------------------------- */ --sp-white: #ffffff; /* ----------------------------------------------------- MUTED LABEL COLOR ----------------------------------------------------- Default color of the MENU label before hover. ----------------------------------------------------- */ --sp-text-muted: #9a9aa8; /* ----------------------------------------------------- NORMAL ANIMATION DURATION ----------------------------------------------------- Controls the geometric movement of the icon and the MENU label. Increase: slower / softer transformation Decrease: faster / sharper transformation ----------------------------------------------------- */ --sp-duration-normal: 450ms; /* ----------------------------------------------------- FAST ANIMATION DURATION ----------------------------------------------------- Controls opacity changes such as the disappearance of the middle hamburger bar. ----------------------------------------------------- */ --sp-duration-fast: 200ms; /* ----------------------------------------------------- STANDARD ANIMATION EASING ----------------------------------------------------- Controls acceleration/deceleration of the icon transformation. ----------------------------------------------------- */ --sp-ease-standard: cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================= 02. MENU TOGGLE — BASE BUTTON --------------------------------------------------------- PURPOSE: Establishes the actual clickable menu button. IMPORTANT: The component is HIDDEN by default. WHY: This stylesheet may be loaded by both desktop and mobile pages. Keeping the desktop state hidden here means individual pages do not need to write: .menu-toggle { display: none; } The mobile breakpoint below activates the button. ========================================================= SAFE TO CHANGE: ========================================================= gap min-width min-height padding background border cursor ========================================================= */ .menu-toggle { /* ----------------------------------------------------- DESKTOP DEFAULT ----------------------------------------------------- */ display: none; /* ----------------------------------------------------- FLEX ALIGNMENT ----------------------------------------------------- Places the icon and MENU label on the same horizontal alignment. ----------------------------------------------------- */ align-items: center; justify-content: center; /* ----------------------------------------------------- SPACE BETWEEN ICON AND MENU LABEL ----------------------------------------------------- */ gap: 0.6rem; /* ----------------------------------------------------- NATURAL WIDTH ----------------------------------------------------- Allows the button to size according to its contents. ----------------------------------------------------- */ width: auto; /* ----------------------------------------------------- MINIMUM BUTTON WIDTH ----------------------------------------------------- */ min-width: 2.5rem; /* ----------------------------------------------------- MINIMUM BUTTON HEIGHT ----------------------------------------------------- Helps preserve an adequate mobile touch target. ----------------------------------------------------- */ min-height: 2.5rem; /* ----------------------------------------------------- BUTTON INTERNAL PADDING ----------------------------------------------------- Reset so the component dimensions remain predictable. ----------------------------------------------------- */ padding: 0; /* ----------------------------------------------------- REMOVE DEFAULT BUTTON BORDER ----------------------------------------------------- */ border: 0; /* ----------------------------------------------------- TRANSPARENT BUTTON BACKGROUND ----------------------------------------------------- */ background: transparent; /* ----------------------------------------------------- PRIMARY COMPONENT COLOR ----------------------------------------------------- */ color: var(--sp-white); /* ----------------------------------------------------- POINTER INDICATOR ----------------------------------------------------- */ cursor: pointer; } /* ========================================================= 03. MOBILE MENU ICON — CONTAINER --------------------------------------------------------- PURPOSE: Creates the 24 × 24 pixel icon area. ========================================================= IMPORTANT ARCHITECTURAL CHANGE ========================================================= The original component used: display: flex; flex-direction: column; gap: 5px; That works well for a normal hamburger. However, a perfectly centered PLUS (+) state is easier and more precise when all three bars share one center positioning axis. Therefore the universal component now uses: position: relative; and the individual bars use: position: absolute; ========================================================= */ .menu-toggle__icon { /* ----------------------------------------------------- POSITIONING CONTEXT ----------------------------------------------------- Allows the child bars to be positioned relative to the 24 × 24 icon container. ----------------------------------------------------- */ position: relative; /* ----------------------------------------------------- BLOCK DISPLAY ----------------------------------------------------- The icon itself no longer needs flexbox because the individual bars are absolutely positioned. ----------------------------------------------------- */ display: block; /* ----------------------------------------------------- ICON WIDTH ----------------------------------------------------- */ width: 24px; /* ----------------------------------------------------- ICON HEIGHT ----------------------------------------------------- */ height: 24px; /* ----------------------------------------------------- FLEX SHRINK PROTECTION ----------------------------------------------------- Prevents the icon from becoming compressed by the surrounding header or MENU label. ----------------------------------------------------- */ flex-shrink: 0; } /* ========================================================= 04. HAMBURGER ICON BARS — COMMON FOUNDATION --------------------------------------------------------- TARGET: ONLY the three direct span children of the icon. ========================================================= .menu-toggle__icon | +-- span ← styled +-- span ← styled +-- span ← styled ========================================================= The direct-child selector is intentional: .menu-toggle__icon > span DO NOT casually replace this with: .menu-toggle span because that would potentially style nested spans that are not part of the hamburger icon. ========================================================= */ .menu-toggle__icon > span { /* ----------------------------------------------------- ABSOLUTE POSITIONING ----------------------------------------------------- All three bars can occupy the same central horizontal axis when the menu opens. ----------------------------------------------------- */ position: absolute; /* ----------------------------------------------------- VERTICAL STARTING POINT ----------------------------------------------------- All bars begin at the vertical center of the icon. translateY() below creates the closed hamburger spacing. ----------------------------------------------------- */ top: 50%; /* ----------------------------------------------------- HORIZONTAL STARTING POINT ----------------------------------------------------- */ left: 0; /* ----------------------------------------------------- BAR DISPLAY ----------------------------------------------------- */ display: block; /* ----------------------------------------------------- BAR WIDTH ----------------------------------------------------- */ width: 24px; /* ----------------------------------------------------- BAR THICKNESS ----------------------------------------------------- Current design uses a fine 1px line. ----------------------------------------------------- */ height: 1px; /* ----------------------------------------------------- REMOVE DEFAULT SPAN MARGIN ----------------------------------------------------- */ margin: 0; /* ----------------------------------------------------- BAR COLOR ----------------------------------------------------- */ background: var(--sp-white); /* ----------------------------------------------------- TRANSFORMATION ORIGIN ----------------------------------------------------- Rotations occur around the exact center of each bar. This is essential for the PLUS (+) transformation. ----------------------------------------------------- */ transform-origin: center; /* ----------------------------------------------------- BAR ANIMATION ----------------------------------------------------- transform: Handles movement and rotation. opacity: Handles the middle-bar disappearance. ----------------------------------------------------- */ transition: transform var(--sp-duration-normal) var(--sp-ease-standard), opacity var(--sp-duration-fast) ease; } /* ========================================================= 05. CLOSED STATE — HAMBURGER GEOMETRY --------------------------------------------------------- PURPOSE: Defines the normal three-line hamburger. ========================================================= BAR 1: -6px BAR 2: 0px BAR 3: +6px ========================================================= Because all bars begin at top: 50%, these translations keep the complete hamburger visually centered. ========================================================= CLOSED RESULT: ──────── ──────── ──────── ========================================================= */ /* --------------------------------------------------------- 05A. TOP HAMBURGER BAR --------------------------------------------------------- Moves the first bar 6px upward from the center. --------------------------------------------------------- */ .menu-toggle__icon > span:nth-child(1) { transform: translateY(-6px); } /* --------------------------------------------------------- 05B. MIDDLE HAMBURGER BAR --------------------------------------------------------- Remains exactly at the center. --------------------------------------------------------- */ .menu-toggle__icon > span:nth-child(2) { transform: translateY(0); } /* --------------------------------------------------------- 05C. BOTTOM HAMBURGER BAR --------------------------------------------------------- Moves the third bar 6px downward from the center. --------------------------------------------------------- */ .menu-toggle__icon > span:nth-child(3) { transform: translateY(6px); } /* ========================================================= 06. MOBILE MENU LABEL --------------------------------------------------------- PURPOSE: Styles the MENU text displayed beside the icon. ========================================================= EXAMPLE: [ ☰ ] MENU ========================================================= IMPORTANT: The label does NOT receive hamburger-bar styling. It is an independent text element. However, the original component intentionally gives the label its own OPEN-STATE transformation, which is restored later in this stylesheet. ========================================================= */ .menu-toggle__label { /* ----------------------------------------------------- INLINE TEXT ELEMENT ----------------------------------------------------- */ display: inline-block; /* ----------------------------------------------------- DEFAULT LABEL COLOR ----------------------------------------------------- */ color: var(--sp-text-muted); /* ----------------------------------------------------- LABEL FONT SIZE ----------------------------------------------------- */ font-size: 0.65rem; /* ----------------------------------------------------- LABEL FONT WEIGHT ----------------------------------------------------- */ font-weight: 600; /* ----------------------------------------------------- LETTER SPACING ----------------------------------------------------- */ letter-spacing: 0.1em; /* ----------------------------------------------------- LABEL LINE HEIGHT ----------------------------------------------------- */ line-height: 1; /* ----------------------------------------------------- UPPERCASE DISPLAY ----------------------------------------------------- */ text-transform: uppercase; /* ----------------------------------------------------- LABEL TRANSFORMATION ANIMATION ----------------------------------------------------- This restores the animation behavior of the original universal menu component. Without this transition, the label would instantly jump to its transformed position when body.menu-open is added. The transformation itself is defined in section 08. ----------------------------------------------------- */ transition: transform var(--sp-duration-normal) var(--sp-ease-standard), color var(--sp-duration-fast) ease; } /* ========================================================= 07. OPEN STATE — PLUS (+) ICON --------------------------------------------------------- TRIGGER: body.menu-open ========================================================= IMPORTANT: This section deliberately replaces the old X-shaped animation. ========================================================= OLD BEHAVIOR: rotate(45deg) rotate(-45deg) RESULT: ╲ ╱ ╲ ╱ ╱ ╲ ╱ ╲ = X ========================================================= NEW BEHAVIOR: BAR 1: horizontal center line BAR 2: invisible BAR 3: vertical center line RESULT: │ ──┼── │ = PLUS (+) ========================================================= */ /* --------------------------------------------------------- 07A. FIRST BAR → HORIZONTAL PLUS ARM --------------------------------------------------------- CLOSED: translateY(-6px) OPEN: translateY(0) No diagonal rotation is used. --------------------------------------------------------- */ body.menu-open .menu-toggle__icon > span:nth-child(1) { transform: translateY(0) rotate(0deg); } /* --------------------------------------------------------- 07B. SECOND BAR → HIDDEN --------------------------------------------------------- The middle hamburger bar becomes invisible. It remains structurally present so the component does not change its DOM structure between states. --------------------------------------------------------- */ body.menu-open .menu-toggle__icon > span:nth-child(2) { opacity: 0; } /* --------------------------------------------------------- 07C. THIRD BAR → VERTICAL PLUS ARM --------------------------------------------------------- CLOSED: translateY(6px) OPEN: translateY(0) rotate(90deg) This produces the vertical arm of the PLUS (+). --------------------------------------------------------- */ body.menu-open .menu-toggle__icon > span:nth-child(3) { transform: translateY(0) rotate(90deg); } /* ========================================================= 08. OPEN STATE — MENU LABEL ANIMATION --------------------------------------------------------- PURPOSE: RESTORES THE ORIGINAL MENU LABEL ANIMATION. ========================================================= Original behavior: body.menu-open .menu-toggle__label transforms the label using: rotate(-45deg) translate(2px, -2px) ========================================================= IMPORTANT DISTINCTION ========================================================= The MENU label is NOT being styled as a hamburger bar. The following are completely separate systems: ICON BARS: .menu-toggle__icon > span MENU LABEL: .menu-toggle__label Therefore the label can have its own intentional transformation without violating the icon-bar boundary. ========================================================= */ body.menu-open .menu-toggle__label { /* ----------------------------------------------------- ORIGINAL LABEL OPEN-STATE TRANSFORMATION ----------------------------------------------------- */ transform: rotate(-45deg) translate(2px, -2px); } /* ========================================================= 09. MENU BUTTON — HOVER EFFECT --------------------------------------------------------- PURPOSE: Changes the MENU label from muted gray to white when the pointer enters the menu button. ========================================================= CLOSED: MENU = muted HOVER: MENU = white The icon bars remain white. ========================================================= */ .menu-toggle:hover .menu-toggle__label { color: var(--sp-white); } /* ========================================================= 10. RESPONSIVE VISIBILITY --------------------------------------------------------- PURPOSE: Controls when the universal menu button becomes visible. ========================================================= DESKTOP: .menu-toggle display: none; ========================================================= MOBILE / TABLET: .menu-toggle display: flex; ========================================================= CURRENT BREAKPOINT: max-width: 900px ========================================================= WHY THIS BELONGS IN THE UNIVERSAL FILE ========================================================= Since this is the universal menu component, it should control its own responsive visibility. Individual page stylesheets should NOT need: .menu-toggle { display: none; } or: .menu-toggle { display: flex; } ========================================================= IF THE WEBSITE MOBILE BREAKPOINT CHANGES ========================================================= Change: max-width: 900px here. Do not duplicate the change across every page. ========================================================= */ @media (max-width: 900px) { /* ----------------------------------------------------- 10A. ACTIVATE UNIVERSAL MENU BUTTON ----------------------------------------------------- The button becomes visible on mobile/tablet widths. ----------------------------------------------------- */ .menu-toggle { display: flex; /* ------------------------------------------------- STACKING ORDER ------------------------------------------------- Keeps the menu button above the mobile navigation panel. Current intended layering: MENU BUTTON → 510 NAV PANEL → 490 Page-specific navigation CSS should maintain a lower stacking level for the panel. ------------------------------------------------- */ z-index: 510; } } /* ========================================================= 11. REDUCED MOTION — ACCESSIBILITY --------------------------------------------------------- PURPOSE: Respects the user's operating-system/browser request for reduced animation. ========================================================= IMPORTANT: This does NOT disable the menu. It only removes the visual transitions. ========================================================= */ @media (prefers-reduced-motion: reduce) { /* ----------------------------------------------------- 11A. DISABLE ICON BAR ANIMATION ----------------------------------------------------- */ .menu-toggle__icon > span, /* ----------------------------------------------------- 11B. DISABLE MENU LABEL ANIMATION ----------------------------------------------------- */ .menu-toggle__label { transition: none; } } /* ========================================================= 12. WHAT WAS MOVED OUT OF EXPERIENCE.CSS --------------------------------------------------------- ARCHITECTURAL RECORD --------------------------------------------------------- This section documents the menu-button responsibilities that were previously present inside page-specific CSS such as experience.css. ========================================================= THE FOLLOWING MENU-BUTTON SYSTEMS BELONG HERE: .menu-toggle .menu-toggle__icon .menu-toggle__icon > span .menu-toggle__label body.menu-open .menu-toggle__icon > span:nth-child(1) body.menu-open .menu-toggle__icon > span:nth-child(2) body.menu-open .menu-toggle__icon > span:nth-child(3) body.menu-open .menu-toggle__label ========================================================= THIS INCLUDES: • Button dimensions • Button alignment • Button appearance • Icon dimensions • Icon bars • Bar thickness • Bar positioning • Bar transitions • Menu label • Menu label transition • Menu label open-state animation • Hover state • Responsive visibility • Reduced-motion behavior ========================================================= THESE RESPONSIBILITIES SHOULD NO LONGER BE DUPLICATED IN EXPERIENCE.CSS OR OTHER PAGE STYLESHEETS. ========================================================= */ /* ========================================================= 13. WHAT WAS NOT MOVED OUT OF EXPERIENCE.CSS --------------------------------------------------------- IMPORTANT ARCHITECTURAL BOUNDARY ========================================================= The following systems belong to the NAVIGATION PANEL, not the menu button: .site-nav body.menu-open .site-nav .site-nav a .nav-parent .nav-divider and other navigation-panel layout rules. ========================================================= WHY? ========================================================= The menu BUTTON and the navigation PANEL are related, but they are not the same component. BUTTON: User interaction control. PANEL: Navigation presentation and content. ========================================================= FUTURE ARCHITECTURE ========================================================= A later universal navigation stylesheet could own: • .site-nav • navigation links • dropdowns • mobile panel • desktop navigation • navigation overlay • navigation hierarchy At that point the architecture could become: universal-menu-toggle.css ↓ UNIVERSAL BUTTON universal-navigation.css ↓ UNIVERSAL NAVIGATION PANEL page-specific.css ↓ PAGE-SPECIFIC CONTENT / DESIGN ========================================================= */ /* ========================================================= 14. CRITICAL CSS COLLISION WARNING --------------------------------------------------------- DO NOT REINTRODUCE THE OLD X ANIMATION. ========================================================= Search all other stylesheets for: .menu-toggle .menu-toggle__icon .menu-toggle__icon > span .menu-toggle__label Any duplicate definitions should be reviewed and removed unless there is a deliberate architectural reason for keeping them. ========================================================= ESPECIALLY REMOVE OLD RULES LIKE: ========================================================= body.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); } body.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); } ========================================================= WHY? Those rules belong to the previous X-animation system. They can override or interfere with the PLUS (+) transformation implemented in this stylesheet. ========================================================= */ /* ========================================================= 15. FINAL COMPONENT STATE MAP --------------------------------------------------------- Use this section as a quick reference when debugging. ========================================================= ========================================================= CLOSED STATE ========================================================= body.menu-open NOT PRESENT Icon: ───── ───── ───── Label: MENU ========================================================= OPEN STATE ========================================================= body.menu-open PRESENT Icon: │ ──┼── │ Label: Original animated transformation: rotate(-45deg) translate(2px, -2px) ========================================================= TRANSFORMATION: HAMBURGER ↓ PLUS (+) ========================================================= NOT: HAMBURGER ↓ X ========================================================= */ /* ========================================================= 16. QUICK MAINTENANCE GUIDE --------------------------------------------------------- Use this section when returning to the stylesheet later. ========================================================= WANT TO CHANGE ICON SIZE? Edit: .menu-toggle__icon and: .menu-toggle__icon > span WANT TO CHANGE BAR LENGTH? Edit: width: 24px; WANT TO CHANGE BAR THICKNESS? Edit: height: 1px; WANT TO CHANGE HAMBURGER SPACING? Edit: translateY(-6px) translateY(0) translateY(6px) WANT TO CHANGE PLUS ROTATION? Edit: rotate(90deg) Keep it at 90deg for a conventional PLUS (+). WANT TO CHANGE MENU LABEL SIZE? Edit: font-size: 0.65rem; WANT TO CHANGE MENU LABEL SPACING? Edit: letter-spacing: 0.1em; WANT TO CHANGE MENU LABEL OPEN ANIMATION? Edit: body.menu-open .menu-toggle__label WANT TO CHANGE ANIMATION SPEED? Edit: --sp-duration-normal WANT TO CHANGE THE FADE SPEED? Edit: --sp-duration-fast WANT TO CHANGE MOBILE BREAKPOINT? Edit: @media (max-width: 900px) WANT TO CHANGE ICON COLOR? Edit: --sp-white WANT TO CHANGE LABEL DEFAULT COLOR? Edit: --sp-text-muted ========================================================= */ /* ========================================================= 17. FINAL ARCHITECTURAL RULE --------------------------------------------------------- ONE UNIVERSAL BUTTON. ONE UNIVERSAL BUTTON STYLESHEET. ONE OPEN/CLOSED VISUAL SYSTEM. ========================================================= UNIVERSAL MENU BUTTON: universal-menu-toggle.css STATE: body.menu-open CLOSED: ☰ OPEN: + LABEL: MENU LABEL OPEN ANIMATION: PRESERVED FROM ORIGINAL COMPONENT ========================================================= END OF UNIVERSAL MOBILE MENU BUTTON ========================================================= */