Every visual aspect of the Pikanté landing page — from the fiery accent color to product prices and store locations — lives in clearly scoped source files. This guide covers the most common customization scenarios with exact file paths and code snippets showing the lines to edit.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/luigitemu/pikante-landing/llms.txt
Use this file to discover all available pages before exploring further.
1. Changing brand colors
All colors are declared as CSS custom properties on the:root selector in src/styles/global.css. There are no hard-coded color values elsewhere in the stylesheet — everything references these variables via var().
The four variables with the broadest visual impact are:
| Variable | Current value | Role |
|---|---|---|
--fire | oklch(65% 0.21 35deg) | Primary accent — CTAs, borders, active states |
--chile | oklch(56% 0.23 22deg) | Secondary — Gracias city card, deep reds |
--lime | oklch(76% 0.17 130deg) | Step labels (.mono in HowTo cards) |
--bg | oklch(5% 0.008 260deg) | Page background — near-black with a cool hue |
L (lightness 0–100%), C (chroma 0–0.4), H (hue angle 0–360°).
Example — swapping --fire from orange to a teal accent:
src/styles/global.css
--accent is aliased to --fire, changing --fire immediately updates every button, border highlight, glow, and active nav indicator across the entire page.
2. Changing fonts
Three Google Fonts families are loaded in the<head> of src/pages/index.astro:
src/pages/index.astro
| Family | CSS class / selector | Usage |
|---|---|---|
| Anton | .h-display, .section-head h2, .hero h1 | All display headings, stat numbers, section titles |
| Inter | body | Body copy, descriptions, paragraph text |
| JetBrains Mono | .mono, .eyebrow, .btn | Labels, eyebrow tags, variant pills, nav links, price readouts |
src/pages/index.astro and update the font-family declaration in src/styles/global.css. For example, to replace Anton with Bebas Neue as the display typeface:
In
src/pages/index.astro, change the <link> href to include Bebas+Neue instead of (or in addition to) Anton:<!-- Before -->
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
<!-- After -->
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
/* Before */
.h-display {
font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
font-weight: 400;
letter-spacing: -.01em;
line-height: .86;
text-transform: uppercase;
}
/* After */
.h-display {
font-family: 'Bebas Neue', Impact, sans-serif;
font-weight: 400;
letter-spacing: -.01em;
line-height: .86;
text-transform: uppercase;
}
Section headings (e.g.
.section-head h2, .faq-q, .step-body h3) also hardcode font-family: 'Anton', sans-serif in their own CSS rules. If you swap the display font, search for all 'Anton' occurrences in global.css and update them as well.3. Updating navigation links
The nav links are hardcoded insrc/components/Nav.astro inside a .nav-links div:
src/components/Nav.astro
id. The scroll-spy script in src/pages/index.astro also uses these IDs to apply the .active class to the correct link as the user scrolls.
To add a new nav link:
<div class="nav-links">
<a href="#sabores">Sabores</a>
<a href="#preparar">Preparar</a>
<a href="#vida">Vida PIKANTÉ</a>
<a href="#faq">FAQ</a>
<a href="#proveedores">Tiendas</a> <!-- new link -->
</div>
In the target component (e.g.
src/components/Stores.astro), the <section> must carry the matching id:If you want the new link to receive the
.active class while the section is in view, add its id to the sections array in the <script> block of src/pages/index.astro:4. Adding a product variant size
Each product card insrc/components/Products.astro uses data-v* attributes on the .price element to store the label for each size option. The active variant’s label is rendered by a small inline script.
The existing sizes and their data attributes are:
| Attribute | Label |
|---|---|
data-v250 | L 70 · 250ml |
data-v570 | L 150 · 570ml |
data-v1l | L 260 · 1L |
<!-- Before -->
<span class="price"
data-v250="L 70 · 250ml"
data-v570="L 150 · 570ml"
data-v1l="L 260 · 1L"
>L 150 <span style="color:var(--text-4)">· 570ml</span></span>
<!-- After — add data-v2l -->
<span class="price"
data-v250="L 70 · 250ml"
data-v570="L 150 · 570ml"
data-v1l="L 260 · 1L"
data-v2l="L 480 · 2L"
>L 150 <span style="color:var(--text-4)">· 570ml</span></span>
<div class="prod-variants">
<button class="variant-pill" data-variant="v250">250ml</button>
<button class="variant-pill active" data-variant="v570">570ml</button>
<button class="variant-pill" data-variant="v1l">1 Litro</button>
<button class="variant-pill" data-variant="v2l">2 Litros</button> <!-- new -->
</div>
Products.astro already handles any data-variant key dynamically — no JavaScript changes are needed. When the user clicks the 2 Litros pill, the script reads priceEl.dataset['v2l'] and updates the displayed price automatically.
5. Adding a store location
All store data lives in thecities array at the top of src/components/Stores.astro. Each object in the array represents a city card:
src/components/Stores.astro
Add a new place to an existing city
Find the target city object and append a new{ name, type } entry to its places array:
src/components/Stores.astro
{c.places.length}) and the section header shows the updated total across all cities (totalPlaces).
Add an entirely new city
Append a new city object to thecities array. Pick a CSS modifier class that matches one of the existing gradient skins, or add a new one in global.css:
src/components/Stores.astro