Stylesheet - Macabro 2025

Typography

Heading 1 - Main Title

h1 { font-size: 30px; font-weight: 700; }

Heading 2 - Section Title

h2 { font-size: 30px; font-weight: 700; }

Heading 3 - Subsection

h3 { font-size: 24px; font-weight: 600; }

Heading 4 - Minor Title

h4 { font-size: 20px; font-weight: 600; }

Body Text - This is the standard paragraph text used throughout the site. It uses Figtree font family with good readability and proper line height for optimal reading experience.

p { font: 400 16px/1.4 'Figtree', sans-serif; }

Page Title Style (H1)

h1.page-title { font-size: 48px; font-weight: 700; color: #121212; }

✅ Accessible: Uses H1 tag for proper heading hierarchy

Macabro Title Style

.macabro-title { font-family: 'Figtree', sans-serif; font-weight: 700; }

Section Title Style

.section-title { font-size: 36px; font-weight: 700; border-bottom: 3px solid #FF0000; }

Red Text - Used for emphasis and highlights

.red { color: #CC0000; font-weight: 700; }

Table Cell - Vertical centered content

.table { display: table; height: 100%; }
.table-cell { display: table-cell; vertical-align: middle; }

Center Aligned Text

Right Aligned Text

.align-center { text-align: center; }
.align-right { text-align: right; }

Buttons & Interactive Elements

Ghost Buttons (Home Page)

Presentaciones Catálogo Calendario

.ghost-btn { background: rgba(255, 0, 0, 0.1); color: #fff; border-radius: 30px; }

Navigation Menu Buttons

Catálogo Eventos Contacto

.nav li a { padding: 8px 16px; border-radius: 8px; transition: all 0.3s; }

Regular Buttons

Primary Button Secondary Button

.regular-btn { background: #FF0000; color: #fff; padding: 12px 24px; }

Color Palette

Primary Red

#FF0000

Dark Red

#CC0000

Black

#121212

White

#FFFFFF

Header Background

#121212

Layout Elements

Container

This is a container element with max-width and centered alignment.

.container { max-width: 1200px; margin: 0 auto; }

Wrapper

Wrapper element with relative positioning

.wrapper { width: 100%; margin: 0 auto; position: relative; }

Grid System

Column 1
Column 2
Column 3

.row { display: flex; } .col { flex: 1; }

Clear Fix

Floated Left
Floated Right
Cleared Content

.clear { *zoom: 1; }
.clear:before, .clear:after { content: ' '; display: table; }
.clear:after { clear: both; }

Background Elements

Background Image

Background Image Link

.bgimg { background: url() no-repeat center center; background-size: cover; }

Glow Separator

.glow-separator { width: 100%; height: 60px; background: url(img/separador-big.png) no-repeat center center; }

Spacing & Margins

Standard Paragraph Spacing

First paragraph with standard margin.

Second paragraph with standard margin.

p { margin: 20px 0; }

Section Spacing

Section with extra spacing

section { margin: 40px 0; }