Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch display font from Syne to Plus Jakarta Sans

Browse Source 
Syne was too wide at large sizes. Plus Jakarta Sans is narrower,
geometric, and more refined at hero-scale weights.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Javier Blanco
2026-04-30 22:15:11 +07:00
parent 3ad3b0b497
commit fbe417dcd4
1 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
css/style.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Inter:wght@300;400;500;600&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -38,13 +38,13 @@ ul { list-style: none; }
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; } .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
/* ===== TYPE ===== */ /* ===== TYPE ===== */
h1, h2, h3 { font-family: 'Syne', sans-serif; font-weight: 800; line-height: 1.1; color: var(--text); } h1, h2, h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1.1; color: var(--text); }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); } h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); } h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1rem, 2vw, 1.3rem); } h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
.section-label { .section-label {
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.28em; letter-spacing: 0.28em;
@@ -88,7 +88,7 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
.nav-brand { display: flex; align-items: center; gap: 0.65rem; } .nav-brand { display: flex; align-items: center; gap: 0.65rem; }
.nav-brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .nav-brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.nav-brand-name { .nav-brand-name {
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 800; font-weight: 800;
letter-spacing: 0.12em; letter-spacing: 0.12em;
@@ -99,7 +99,7 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
.nav-links a { .nav-links a {
display: block; display: block;
padding: 0.3rem 0.85rem; padding: 0.3rem 0.85rem;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.14em; letter-spacing: 0.14em;
@@ -142,7 +142,7 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
align-items: center; align-items: center;
gap: 0.55rem; gap: 0.55rem;
padding: 0.8rem 1.75rem; padding: 0.8rem 1.75rem;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.68rem; font-size: 0.68rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.18em; letter-spacing: 0.18em;
@@ -187,7 +187,7 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.65rem; gap: 0.65rem;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.68rem; font-size: 0.68rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.18em; letter-spacing: 0.18em;
@@ -216,7 +216,7 @@ section { padding: 5rem 0; }
} }
.card:hover { border-color: rgba(232,87,42,0.35); } .card:hover { border-color: rgba(232,87,42,0.35); }
.card-body { padding: 1.5rem; } .card-body { padding: 1.5rem; }
.card-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; } .card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.card-text { color: var(--muted); font-size: 0.85rem; line-height: 1.65; } .card-text { color: var(--muted); font-size: 0.85rem; line-height: 1.65; }
/* Loose card grid (studios, classes) */ /* Loose card grid (studios, classes) */
@@ -267,7 +267,7 @@ section { padding: 5rem 0; }
border: 1px solid var(--border); border: 1px solid var(--border);
background: transparent; background: transparent;
color: var(--muted); color: var(--muted);
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem; font-size: 0.62rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.12em; letter-spacing: 0.12em;
@@ -298,7 +298,7 @@ section { padding: 5rem 0; }
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem; font-size: 0.62rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.1em; letter-spacing: 0.1em;
@@ -341,7 +341,7 @@ section { padding: 5rem 0; }
.hero-content { position: relative; z-index: 1; padding: 3rem 2rem; max-width: 720px; } .hero-content { position: relative; z-index: 1; padding: 3rem 2rem; max-width: 720px; }
.hero-eyebrow { .hero-eyebrow {
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.32em; letter-spacing: 0.32em;
@@ -372,7 +372,7 @@ section { padding: 5rem 0; }
} }
.hero-title { .hero-title {
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(4rem, 13vw, 9rem); font-size: clamp(4rem, 13vw, 9rem);
font-weight: 800; font-weight: 800;
letter-spacing: -0.03em; letter-spacing: -0.03em;
@@ -408,7 +408,7 @@ section { padding: 5rem 0; }
.teaser-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .teaser-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.teaser-card { padding: 1.5rem; } .teaser-card { padding: 1.5rem; }
.teaser-day { .teaser-day {
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.58rem; font-size: 0.58rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.22em; letter-spacing: 0.22em;
@@ -416,7 +416,7 @@ section { padding: 5rem 0; }
color: var(--orange); color: var(--orange);
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
.teaser-social { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--text); margin-bottom: 0.2rem; } .teaser-social { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--text); margin-bottom: 0.2rem; }
.teaser-venue { color: var(--muted); font-size: 0.78rem; } .teaser-venue { color: var(--muted); font-size: 0.78rem; }
.teaser-meta { color: var(--muted); font-size: 0.75rem; margin-top: 0.3rem; } .teaser-meta { color: var(--muted); font-size: 0.75rem; margin-top: 0.3rem; }
@@ -470,7 +470,7 @@ section { padding: 5rem 0; }
background: var(--surface); background: var(--surface);
padding: 0.8rem 1.25rem; padding: 0.8rem 1.25rem;
text-align: left; text-align: left;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.58rem; font-size: 0.58rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
@@ -488,7 +488,7 @@ section { padding: 5rem 0; }
display: inline-block; display: inline-block;
padding: 0.12rem 0.5rem; padding: 0.12rem 0.5rem;
border-radius: 2px; border-radius: 2px;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.58rem; font-size: 0.58rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
@@ -503,10 +503,10 @@ section { padding: 5rem 0; }
.day-saturday { background: rgba(240,160,48,0.12); color: var(--gold); } .day-saturday { background: rgba(240,160,48,0.12); color: var(--gold); }
.day-sunday { background: rgba(24,184,184,0.12); color: var(--teal); } .day-sunday { background: rgba(24,184,184,0.12); color: var(--teal); }
.social-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.83rem; color: var(--text); } .social-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.83rem; color: var(--text); }
.venue-name { color: var(--muted); font-size: 0.8rem; } .venue-name { color: var(--muted); font-size: 0.8rem; }
.music-text { color: var(--muted); font-size: 0.78rem; } .music-text { color: var(--muted); font-size: 0.78rem; }
.city-badge { font-family: 'Syne', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; } .city-badge { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; }
.organizer-text { color: var(--muted); font-size: 0.78rem; } .organizer-text { color: var(--muted); font-size: 0.78rem; }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -532,7 +532,7 @@ section { padding: 5rem 0; }
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--muted); color: var(--muted);
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
} }
} }
@@ -555,7 +555,7 @@ section { padding: 5rem 0; }
} }
.ig-profile-card > * { position: relative; z-index: 1; } .ig-profile-card > * { position: relative; z-index: 1; }
.ig-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; border: 1px solid rgba(232,87,42,0.25); } .ig-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; border: 1px solid rgba(232,87,42,0.25); }
.ig-handle { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; letter-spacing: -0.02em; } .ig-handle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.ig-desc { color: var(--muted); margin-bottom: 2rem; font-size: 0.875rem; max-width: 400px; margin-left: auto; margin-right: auto; } .ig-desc { color: var(--muted); margin-bottom: 2rem; font-size: 0.875rem; max-width: 400px; margin-left: auto; margin-right: auto; }
.ig-embeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 3rem; } .ig-embeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 3rem; }
@@ -575,7 +575,7 @@ section { padding: 5rem 0; }
.ig-placeholder:hover { border-color: rgba(232,87,42,0.25); background: var(--surface); } .ig-placeholder:hover { border-color: rgba(232,87,42,0.25); background: var(--surface); }
.ig-placeholder svg { color: var(--muted); opacity: 0.2; } .ig-placeholder svg { color: var(--muted); opacity: 0.2; }
.ig-placeholder p { color: var(--muted); font-size: 0.82rem; } .ig-placeholder p { color: var(--muted); font-size: 0.82rem; }
.ig-placeholder a { color: var(--orange); font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .ig-placeholder a { color: var(--orange); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.contact-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 3.5rem 2rem; text-align: center; } .contact-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 3.5rem 2rem; text-align: center; }
.contact-box h2 { margin-bottom: 0.75rem; } .contact-box h2 { margin-bottom: 0.75rem; }
@@ -632,7 +632,7 @@ section { padding: 5rem 0; }
.festival-poster-content { position: relative; z-index: 1; } .festival-poster-content { position: relative; z-index: 1; }
.festival-poster h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.05; margin-bottom: 0.3rem; letter-spacing: -0.02em; } .festival-poster h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.05; margin-bottom: 0.3rem; letter-spacing: -0.02em; }
.festival-dates { font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: 0.22em; text-transform: uppercase; } .festival-dates { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: 0.22em; text-transform: uppercase; }
.festival-body { padding: 2rem; } .festival-body { padding: 2rem; }
.festival-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .festival-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
@@ -652,12 +652,12 @@ section { padding: 5rem 0; }
.footer-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; } .footer-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
.footer-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .footer-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.footer-brand-name { font-family: 'Syne', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text); } .footer-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text); }
.footer-tagline { color: var(--muted); font-size: 0.72rem; } .footer-tagline { color: var(--muted); font-size: 0.72rem; }
.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.footer-nav a { .footer-nav a {
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem; font-size: 0.62rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.14em; letter-spacing: 0.14em;
@@ -672,7 +672,7 @@ section { padding: 5rem 0; }
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-family: 'Syne', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem; font-size: 0.62rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.12em; letter-spacing: 0.12em;