Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/diazdavilajesus16-stack/Sevicheria-Mar-sabroso/llms.txt

Use this file to discover all available pages before exploring further.

The visual appearance of Cevichería El Sabor Marino is driven by a single stylesheet at static/assets/css/estilo.css. The site uses an ocean/marine theme built with dark blues as the background palette, #00e5ff cyan as the primary accent, and green for interactive buttons. Typography is handled by Poppins loaded from Google Fonts at weights 300, 400, 600, and 700. This page explains the key CSS classes, the color scheme, and how to make common visual changes.

​
Color scheme

The site’s accent color and button color appear in several places throughout estilo.css. The main values to look for are:
NameHex valueUsed for
Cyan accent#00e5ffHighlighted text, price labels, link hovers
Button / primary#28a745.btn background on dish and promo cards
Deep ocean background#001a33.ocean-pro base gradient
Mid ocean#002244Secondary gradient layer in ocean background
To change the accent color across the whole site, search estilo.css for #00e5ff and replace every occurrence with your desired hex value. Button colors are defined on the .btn rule — update that selector’s background-color and matching :hover state.

​
Key CSS classes

The .ocean-pro container wraps all animated background elements: bubbles, fish, seaweed, and plants. It is absolutely positioned and covers the full viewport behind page content. Modify its background gradient to change the overall ocean tone.
Cards display dish photos, names, descriptions, prices, and an “Agregar” button. The class sets border-radius, box-shadow, and a white/light background. Adjust border-radius and box-shadow to change the card’s visual weight.
All primary action buttons (add to cart, etc.) use .btn. The default background-color is green (#28a745). The class also sets padding, border-radius, font-weight, and a transition for the hover state.
Applied to the price <span> inside each card. Styled with the #00e5ff cyan accent color and a slightly larger font-weight to make prices stand out.
A fixed-position notification that slides into view when a dish is added to the cart. The CSS animation shifts it from off-screen into the viewport corner and then back out. Adjust the bottom/right offset values to reposition it.

​
Responsive design

The stylesheet follows a mobile-first approach. Base rules target small screens, and @media (min-width: ...) breakpoints layer in larger-screen adjustments. The main breakpoints used are:
BreakpointTarget
480pxLarge mobile / small tablet
768pxTablet portrait
1024pxTablet landscape / small desktop
1200pxFull desktop
When adding new CSS rules, write the default styles for mobile first and wrap desktop overrides in the appropriate @media block to stay consistent with the existing approach.

​
Common customization tasks

1

Change the site accent color

Open static/assets/css/estilo.css and replace all occurrences of #00e5ff with your chosen hex color. Also update any rgba(0, 229, 255, ...) values that reference the same cyan with the equivalent RGBA version of your new color.
estilo.css
/* Before */
color: #00e5ff;

/* After — example with gold accent */
color: #f5a623;
2

Change the button color

Locate the .btn rule in estilo.css and update background-color together with the :hover state:
estilo.css
.btn {
  background-color: #28a745; /* change this */
  /* ... other properties ... */
}

.btn:hover {
  background-color: #218838; /* update hover to match */
}
3

Swap the logo

The logo image is loaded from static/assets/img/logom.png. Replace that file with your new logo, keeping the same filename, or update the src attribute in the <img> tag inside the <nav> block in core/templates/home.html:
home.html
<img src="{% static 'assets/img/logom.png' %}" alt="El Sabor Marino" class="logo-img">
For best results, use a PNG with a transparent background sized at roughly 160×60 px.
4

Change the font

Poppins is imported via a <link> tag in the <head> of core/templates/home.html. Replace it with any Google Fonts URL and update the font-family declaration in estilo.css:
home.html
<!-- Replace the existing Google Fonts link -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
estilo.css
body {
  font-family: 'Nunito', sans-serif; /* was 'Poppins' */
}
After editing estilo.css, run python manage.py collectstatic if you are deploying with STATICFILES_DIRS configured, so Django picks up the updated file.

Build docs developers (and LLMs) love

Get started for freeTalk to us