Redesign Matchplay home page — action-first two-column layout

mobile-header-share.css

@@ -0,0 +1,96 @@
+/*
+  Matchplay mobile header styles (shareable)
+  Extracted from src/App.css
+*/
+
+.main-nav,
+.mobile-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  gap: 12px;
+}
+
+.main-nav {
+  border-radius: 20px;
+  padding: 16px 24px;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
+  border-bottom: none;
+  position: relative;
+  z-index: 100;
+  gap: 32px;
+}
+
+.header-left,
+.mobile-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.header-right,
+.mobile-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 600px) {
+  .main-nav:not(.mobile-header) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 768px) {
+  .desktop-nav-links {
+    display: none;
+  }
+
+  .mobile-header {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+  }
+
+  .main-nav,
+  .mobile-header {
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .main-nav.mobile-header {
+    flex-wrap: nowrap !important;
+  }
+
+  .main-nav.mobile-header .desktop-nav-links {
+    display: none !important;
+  }
+
+  .main-nav.mobile-header .header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .main-nav.mobile-header .header-right {
+    display: flex !important;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .main-nav.mobile-header .user-menu {
+    flex-shrink: 0;
+  }
+}