🎨 Style Guide

Design System & Component Library

Typography - Design System Classes

Headings (New Unified Classes)
.ivv-heading-1
Il Volto di Velluto
clamp(2.5rem, 5vw, 3rem), font-weight: 300
.ivv-heading-2
I Nostri Corsi
clamp(2rem, 4vw, 2.5rem), font-weight: 300
.ivv-heading-3
Teatro per Bambini
clamp(1.5rem, 3vw, 2rem), font-weight: 300
.ivv-section-title
ORARI E DETTAGLI
1.25rem, font-weight: 600, uppercase
Body Text (New Unified Classes)
.ivv-text-lg
Testo grande per descrizioni importanti
1.125rem, line-height: 1.6
.ivv-text-base
Testo normale per paragrafi standard
1rem, line-height: 1.6
.ivv-text-sm
Testo piccolo per note e descrizioni
0.875rem, line-height: 1.5
.ivv-text-xs
Testo molto piccolo per labels
0.75rem, line-height: 1.4

Colors

Primary
var(--ivv-primary)
Accent Lime
var(--ivv-accent-lime)
Accent Yellow
var(--ivv-accent-yellow)
Accent Purple
var(--ivv-accent-purple)
Background
var(--ivv-background)
Muted
var(--ivv-muted)

Buttons - New Unified System

Button Variants
.ivv-btn .ivv-btn-primary
Richiedi informazioni Background: lime, hover: yellow
.ivv-btn .ivv-btn-outline
Contatta su WhatsApp Border: primary, hover: purple bg
.ivv-btn .ivv-btn-ghost
Link secondario Transparent, hover: muted bg
Button Sizes
.ivv-btn-sm
Small Button
.ivv-btn (default)
Default Button
.ivv-btn-lg
Large Button
Text Link Buttons
.ivv-text-link
Vedi profilo completo → Used for text links with underline accent
Old vs New Comparison
❌ OLD: .ivv-button .ivv-button-primary
Old Primary Inconsistent padding/sizing
✅ NEW: .ivv-btn .ivv-btn-primary
New Primary Unified design tokens

Badges - New Unified System

New Badge Classes
.ivv-badge .ivv-badge-primary
Teatro Primary category badge
.ivv-badge .ivv-badge-outline
6-10 anni Outlined age badge
Category Badge Variants
.ivv-badge-teatro
Teatro
.ivv-badge-danza
Danza
.ivv-badge-wellness
Wellness
.ivv-badge-creativita
Creatività
Badge Group Example
.ivv-badge-group
Teatro 6-10 anni
Consistent spacing and alignment
⚠️ Issues with Current Badges
❌ CURRENT: Mixed heights
Teatro 6-10 anni
Height/alignment inconsistencies
✅ PROPOSED: Unified badges
Teatro 6-10 anni
Perfect alignment & consistency

Cards

Course Card (from existing pages)
📸 Course Image
6-10 anni

Teatro per Bambini

Corso introduttivo al mondo del teatro per i più piccoli.

Spacing & Layout

Container Sizes
Container Large
.ivv-container-large { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
Section Spacing
Section
.ivv-section { padding: 6rem 0; }

Navigation Components

Back Navigation
.ivv-back-navigation .ivv-back-link
← Torna ai corsi
Used in course and teacher pages
Prev/Next Navigation
.ivv-navigation .ivv-nav-wrapper
Unified navigation for courses, teachers, and productions

Section Headers - Unified Format

Standard Section Header (CORRECTED)
Homepage & Archive Format

Eventi e Saggi

Scopri tutti i nostri saggi, eventi speciali e attività collaterali. Momenti unici per condividere l'arte e celebrare i nostri talenti.

<div class="text-center ivv-mb-4xl">
  <h2>Titolo</h2>
  <p class="section-description">Descrizione...</p>
</div>
Section Classes - UNIFIED
Homepage Sections
.ivv-events-section
.ivv-productions-section
.ivv-courses-section
Archive Pages
Same classes as homepage
for consistent spacing

✅ Recent Fixes & Improvements

Typography Unification
  • ✅ Section Headers: All pages now use identical format: h2 + .section-description
  • ✅ Text Width: Added .section-description class for consistent 600px max-width
  • ✅ Title Classes: Removed ivv-heading-2 from section titles to match homepage
  • ✅ Spacing: Unified section padding across homepage and archives
Event System Implementation
  • ✅ Backend: Complete meta boxes system for Eventi post type
  • ✅ Event Type Selector: Dynamic badge with custom input option
  • ✅ Ingresso Fields: Conditional pricing for both events and productions
  • ✅ Template Structure: Eventi template identical to Produzioni
Navigation & UX
  • ✅ Back Navigation: Added to all single pages (events, productions)
  • ✅ Archive URLs: Fixed broken archive links
  • ✅ Teacher Page: Fixed button styling and bio text weight
  • ✅ Navigation Fix: Removed fixed positioning that caused floating elements
Design System Consistency
  • ✅ Section Classes: Homepage and archives use same section wrapper classes
  • ✅ CSS Variables: Added .section-description to design system
  • ✅ Template Structure: Unified div.text-center.ivv-mb-4xl pattern
  • ✅ Content Formatting: Consistent text constraints across all sections

⚠️ Remaining Tasks

Medium Priority
  • Card Layouts: Unify event cards vs production cards styling
  • Archive Pages: Consider dedicated archive page templates
Low Priority
  • CSS Cleanup: Remove unused classes and consolidate similar ones
  • Badge System: Consider migrating to fully unified badge classes