From 05852d6a61bad63b092b2e7e8d50cdca8e6384dd Mon Sep 17 00:00:00 2001
From: Javier Blanco <javierblancodetorres@gmail.com>
Date: Thu, 30 Apr 2026 22:25:45 +0700
Subject: [PATCH] Hero and brand name visual hierarchy

- Hero: "Sabor Flow" large + "Da Nang" inline, smaller and muted
- Nav/footer brand: "SABOR FLOW" bold + "Da Nang" smaller and muted
- No line break between the two parts in either context

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 classes.html   |  4 ++--
 connect.html   |  4 ++--
 css/style.css  | 17 +++++++++++++++++
 festivals.html |  4 ++--
 index.html     |  6 +++---
 schedule.html  |  4 ++--
 studios.html   |  4 ++--
 7 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/classes.html b/classes.html
index dba2177..820b57b 100644
--- a/classes.html
+++ b/classes.html
@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -222,7 +222,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>
diff --git a/connect.html b/connect.html
index 5ef6479..e19fab6 100644
--- a/connect.html
+++ b/connect.html
@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -107,7 +107,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>
diff --git a/css/style.css b/css/style.css
index 5977eb8..934b0e1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -94,6 +94,13 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
   letter-spacing: 0.12em;
   color: var(--text);
 }
+.nav-brand-city {
+  font-size: 0.75em;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  margin-left: 0.3em;
+}
 
 .nav-links { display: flex; align-items: center; }
 .nav-links a {
@@ -380,6 +387,15 @@ section { padding: 5rem 0; }
   color: var(--text);
   margin-bottom: 0.35rem;
 }
+.hero-title-city {
+  display: inline;
+  font-size: 0.28em;
+  font-weight: 400;
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-left: 0.5em;
+}
 
 .hero-rule { width: 36px; height: 1px; background: var(--orange); margin: 1.5rem auto; }
 
@@ -653,6 +669,7 @@ 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: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text); }
+.footer-brand-city { font-size: 0.75em; font-weight: 400; letter-spacing: 0.08em; color: var(--muted); margin-left: 0.3em; }
 .footer-tagline { color: var(--muted); font-size: 0.72rem; }
 
 .footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
diff --git a/festivals.html b/festivals.html
index b6e8966..dd7631f 100644
--- a/festivals.html
+++ b/festivals.html
@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -150,7 +150,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>
diff --git a/index.html b/index.html
index a44fbf6..ad5ff37 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -35,7 +35,7 @@
     <div class="hero-content">
       <p class="hero-eyebrow">Da Nang &middot; Vietnam</p>
       <img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="hero-logo">
-      <h1 class="hero-title">Sabor Flow Da Nang</h1>
+      <h1 class="hero-title">Sabor Flow<span class="hero-title-city">Da Nang</span></h1>
       <div class="hero-rule"></div>
       <p class="hero-subtitle">Latin Dance Community</p>
       <div class="hero-ctas">
@@ -143,7 +143,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>
diff --git a/schedule.html b/schedule.html
index 9367402..01edcd9 100644
--- a/schedule.html
+++ b/schedule.html
@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -67,7 +67,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>
diff --git a/studios.html b/studios.html
index 800e6b6..5d6efc3 100644
--- a/studios.html
+++ b/studios.html
@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -159,7 +159,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>