Updating

client/src/components/AppHeader.jsx

@@ -20,27 +20,17 @@ export default function AppHeader({
 
   return (
     <header className="topbar">
-      <div className="brand-lockup">
+      <button
-        <button
+        className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
-          className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
+        onPointerDown={onLogoPointerDown}
-          onPointerDown={onLogoPointerDown}
+        onPointerUp={onLogoPointerUp}
-          onPointerUp={onLogoPointerUp}
+        onPointerLeave={onLogoPointerLeave}
-          onPointerLeave={onLogoPointerLeave}
+        onPointerCancel={onLogoPointerCancel}
-          onPointerCancel={onLogoPointerCancel}
+        onContextMenu={(event) => event.preventDefault()}
-          onContextMenu={(event) => event.preventDefault()}
+        type="button"
-          type="button"
+      >
-        >
+        <img src={logo} alt="Ranaze Bubble Tea & Slush" />
-          <img src={logo} alt="Ranaze Bubble Tea & Slush" />
+      </button>
-        </button>
-        <div className="brand-copy">
-          <p className="eyebrow">Ranaze Bubble Tea & Slush</p>
-          <h1>Choose your drink</h1>
-          <p className="muted">
-            Fresh drinks.
-            Made your way.
-          </p>
-        </div>
-      </div>
       {adminUnlocked && (
         <nav className="tabs">
           {visibleTabs.map((tab) => (

client/src/styles.css

@@ -98,13 +98,6 @@ button {
   font-weight: 400;
 }
 
-.brand-lockup {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  min-width: 0;
-}
-
 .brand-mark {
   width: 96px;
   height: 96px;
@@ -138,21 +131,6 @@ button {
   object-fit: contain;
 }
 
-.brand-copy {
-  display: grid;
-  gap: 0.2rem;
-}
-
-.brand-copy h1 {
-  font-size: clamp(2rem, 3vw, 3rem);
-  line-height: 0.98;
-}
-
-.brand-copy p:last-child {
-  margin: 0;
-  max-width: 30rem;
-}
-
 .hero-copy-list,
 .mode-card-list {
   display: grid;
@@ -676,8 +654,7 @@ select {
     grid-template-columns: 1fr;
   }
 
-  .topbar,
+  .topbar {
-  .brand-lockup {
     align-items: flex-start;
     flex-direction: column;
   }