fix: single-line tagline on desktop, wrap on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-17 00:52:14 +00:00
parent 88a373da80
commit 8dfb9444f4

View File

@@ -150,18 +150,18 @@ onMounted(() => {
/* --- Tagline --- */
.tagline-block {
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
justify-content: center;
gap: 0 0.4em;
width: 90vw;
max-width: 900px;
gap: 0 0.3em;
width: 92vw;
max-width: 1100px;
text-align: center;
line-height: 1.05;
}
.word {
font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
font-size: clamp(2.5rem, 10vw, 7rem);
font-size: clamp(2rem, 5.5vw, 5rem);
font-weight: 900;
color: var(--text-primary);
text-transform: uppercase;
@@ -235,18 +235,19 @@ onMounted(() => {
}
}
/* Mobile: 4-line layout */
/* Mobile: wrap to multiple lines */
@media (max-width: 600px) {
.tagline-block {
flex-wrap: wrap;
width: 95vw;
}
.word {
font-size: clamp(2rem, 14vw, 4rem);
font-size: clamp(2rem, 12vw, 3.5rem);
}
.psyop {
font-size: clamp(3rem, 20vw, 5.5rem);
}
.tagline-block {
width: 95vw;
font-size: clamp(3rem, 22vw, 5.5rem);
}
}