Use this file to discover all available pages before exploring further.
The Nav component is the persistent top bar of the Pikanté landing page. It stays anchored to the viewport at all times, provides quick-scroll anchor links to every major section, and lights up the correct link as the user scrolls — all without any JavaScript framework dependency.
Rendered with position: fixed; top: 0 and a backdrop-filter: blur(8px) so content scrolls beneath it without visual noise.
Gradient fade
A linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0)) background dissolves into the page, keeping the bar visible against both dark and light content.
Scroll-spy
An IntersectionObserver in index.astro watches the four page sections and toggles an .active class on the matching anchor link.
Responsive
.nav-links is hidden below 760 px via a media query; only the logo and social icons remain on mobile.
The logo is rendered with Astro’s built-in <Image> component, which optimises and generates the correct srcset at build time. Clicking it smoothly scrolls back to the very top of the page.
The scroll-spy logic lives in the <script> block of src/pages/index.astro. It creates a single IntersectionObserver that watches each of the four sections and toggles the .active CSS class on whichever nav link matches the currently visible section.
// Nav scroll-spyconst sections = ['sabores', 'preparar', 'vida', 'faq'];const navLinks = document.querySelectorAll('.nav-links a');const sectionIO = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { const id = e.target.id; navLinks.forEach(a => { a.classList.toggle('active', a.getAttribute('href') === `#${id}`); }); } });}, { rootMargin: '-40% 0px -55% 0px' });sections.forEach(id => { const el = document.getElementById(id); if (el) sectionIO.observe(el);});
The rootMargin: '-40% 0px -55% 0px' shrinks the effective intersection zone to a horizontal band in the middle of the viewport, so only the section the user is most “inside” becomes active.
/* ============ NAV ============ */nav.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0)); backdrop-filter: blur(8px);}.nav-logo { display: flex; align-items: center; gap: 10px; }.nav-logo img { height: 60px; width: auto; }.nav-links { display: flex; gap: 32px; }.nav-links a { font-size: 13px; letter-spacing: .06em; color: var(--text-2); transition: color var(--t-fast);}.nav-links a:hover { color: var(--white); }.nav-socials { display: flex; align-items: center; gap: 18px; }.nav-socials a { color: white; display: flex; align-items: center; transition: color var(--t-fast);}.nav-socials a:hover { color: var(--white); }@media (max-width: 760px) { .nav-links { display: none; } /* hidden on mobile */}/* defined at end of global.css, after all other nav rules */.nav-links a.active { color: var(--accent); } /* scroll-spy highlight */
--accent resolves to var(--fire) — oklch(65% 0.21 35deg), a vibrant fire orange-red. Active links inherit this colour automatically without any JavaScript DOM manipulation beyond the class toggle.
