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; }
@@ -38,13 +38,13 @@ ul { list-style: none; }
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
/* ===== 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); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
.section-label {
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.6rem;
font-weight: 700;
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 img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.nav-brand-name {
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.12em;
@@ -99,7 +99,7 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
.nav-links a {
display: block;
padding: 0.3rem 0.85rem;
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
@@ -142,7 +142,7 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
align-items: center;
gap: 0.55rem;
padding: 0.8rem 1.75rem;
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
@@ -187,7 +187,7 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
@@ -216,7 +216,7 @@ section { padding: 5rem 0; }
}
.card:hover { border-color: rgba(232,87,42,0.35); }
.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; }
/* Loose card grid (studios, classes) */
@@ -267,7 +267,7 @@ section { padding: 5rem 0; }
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
@@ -298,7 +298,7 @@ section { padding: 5rem 0; }
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem;
font-weight: 700;
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-eyebrow {
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.32em;
@@ -372,7 +372,7 @@ section { padding: 5rem 0; }
}
.hero-title {
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(4rem, 13vw, 9rem);
font-weight: 800;
letter-spacing: -0.03em;
@@ -408,7 +408,7 @@ section { padding: 5rem 0; }
.teaser-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.teaser-card { padding: 1.5rem; }
.teaser-day {
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.22em;
@@ -416,7 +416,7 @@ section { padding: 5rem 0; }
color: var(--orange);
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-meta { color: var(--muted); font-size: 0.75rem; margin-top: 0.3rem; }
@@ -470,7 +470,7 @@ section { padding: 5rem 0; }
background: var(--surface);
padding: 0.8rem 1.25rem;
text-align: left;
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
@@ -488,7 +488,7 @@ section { padding: 5rem 0; }
display: inline-block;
padding: 0.12rem 0.5rem;
border-radius: 2px;
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
@@ -503,10 +503,10 @@ section { padding: 5rem 0; }
.day-saturday { background: rgba(240,160,48,0.12); color: var(--gold); }
.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; }
.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; }
@media (max-width: 768px) {
@@ -532,7 +532,7 @@ section { padding: 5rem 0; }
letter-spacing: 0.1em;
color: var(--muted);
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-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-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 svg { color: var(--muted); opacity: 0.2; }
.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 h2 { margin-bottom: 0.75rem; }
@@ -632,7 +632,7 @@ section { padding: 5rem 0; }
.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-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-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 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-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.footer-nav a {
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
@@ -672,7 +672,7 @@ section { padding: 5rem 0; }
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'Syne', sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;