/* FILE: float-nav.css PURPOSE: Styles for the shared floating nav bar (float-nav.html). Extracted from the About Me page (it was originally built there as page-local ".about-float-nav*" classes) once a second consumer (the v2 "-v3" suffixed project pages) needed the exact same bar. Fixed near the top of the viewport at all times, no scroll animation -- sizing/position values match Landing V3's own scroll-morphed nav end state exactly (800px wide, 50px from the top desktop, 20px margins/ 40px from the top mobile, 10px radius), for visual consistency between every page that floats its nav instead of using the sidebar (nav.css). Uses only colours/fonts/sizes already defined in tokens.css - link that file before this one in the page . Consuming pages are responsible for their own top clearance (padding so this fixed bar doesn't overlap page content) -- that value differs per page depending on what sits right below it, so it isn't part of this shared file. See .about-header in about.css and .project-header--v2 in project.css for the two current examples. */ .float-nav { position: fixed; top: 50px; /* desktop: matches Landing V3's stuck-nav END_TOP */ left: 50%; transform: translateX(-50%); width: min(800px, calc(100% - 120px)); /* matches Landing V3's 800px nav width */ height: 69px; /* matches Landing V3's END_HEIGHT */ z-index: 10; box-sizing: border-box; display: flex; align-items: center; /* Was space-between (fine with only 2 children); .float-nav__links below now supplies its own margin-left: auto instead, so the new divider element in between can sit right next to the logo rather than getting pushed to its own evenly-spaced slot. */ padding: 20px 30px; background: var(--color-bg-nav); /* per Lucrecia's request, was --color-bg-default */ border-radius: 10px; /* matches Landing V3's hero card radius */ box-shadow: var(--shadow-image); transition: transform 0.25s ease; /* see float-nav.js for what toggles --hidden below */ } /* Slides the bar up out of the viewport while scrolling down (see float-nav.js), all the way back at the very next scroll-up tick, per Lucrecia's request. -150px comfortably clears the bar's own 69px height plus its 50px top offset (39px above/mobile's own 20px) at both breakpoints, no separate mobile value needed. Combined with the existing translateX(-50%) here rather than replacing it, since that half is still what horizontally centres the bar on desktop. */ .float-nav--hidden { transform: translateX(-50%) translateY(-150px); } /* A keyboard user tabbing through a link inside the (offscreen) bar would otherwise land focus on something invisible -- brings it back into view for as long as a descendant has focus, same as scrolling up would. */ .float-nav--hidden:focus-within { transform: translateX(-50%); } @media (prefers-reduced-motion: reduce) { .float-nav { transition: none; } } /* Font styles only here -- inherited down by both the full-name and initials spans below, whichever one is actually showing, same pattern as Landing V3's own .landing-v3-hero__name. */ .float-nav__logo { /* Melodrama per Lucrecia's request, matches Landing V3's own name -- this bar is the "nav" on every other page (About + every project page), so it gets the same treatment now, not just the homepage. Falls back to the site's own heading font if it somehow fails to load. Only the -Variable file was uploaded (see assets/fonts/melodrama.css), which covers this element's own --weight-semibold (600) within its declared 300-700 range, no separate static weight needed. */ font-family: 'Melodrama-Variable', var(--font-heading); font-size: 20px; /* matches Landing V3's name size once fully morphed into its nav */ font-weight: var(--weight-semibold); color: var(--color-text-dark); text-decoration: none; white-space: nowrap; } .float-nav__logo-initials { display: none; /* shown only on mobile, see below */ } /* Matches Landing V3's own accent-blue line, once fully settled into its nav state beside the name (see portfolio.js's line morph, nameRect.height/LINE_OFFSET) -- that one is JS-positioned every frame since it animates from a horizontal rule under the name, this bar has no such animation to hand off from, so it's just a plain static element at the same settled size (22px, matching the name's own rendered line-height at this 20px font-size) and gap (15px). */ .float-nav__divider { width: 1px; height: 22px; margin-left: 15px; background: var(--color-accent); flex-shrink: 0; } .float-nav__links { display: flex; align-items: center; gap: 30px; margin-left: auto; /* pushes the links to the far right now .float-nav itself isn't space-between any more */ } .float-nav__link { font-family: var(--font-body); font-size: var(--font-size-small); font-weight: var(--weight-regular); color: var(--color-text-dark); text-decoration: none; } .float-nav__link:hover, .float-nav__link:focus-visible { text-decoration: underline; } /* Current-page link: bold + the accent colour, not colour alone, matches Landing V3's own active-link treatment. */ .float-nav__link--active { font-weight: var(--weight-bold); color: var(--color-accent); } @media (max-width: 768px) { .float-nav { top: 20px; /* matches Landing V3's mobile MOBILE_END_TOP */ left: 20px; right: 20px; transform: none; width: auto; /* left/right above already give the "20px margins" width */ } /* Mobile doesn't use transform to position the bar (left/right insets above do that instead), so the hidden state here is just the translateY on its own, not combined with translateX like desktop's version above. */ .float-nav--hidden { transform: translateY(-150px); } .float-nav--hidden:focus-within { transform: none; } .float-nav__logo-full { display: none; } .float-nav__logo-initials { display: inline; font-size: 20px; } }