Temp Logo Added

assets/css/style.css

@@ -64,6 +64,50 @@ main {
     min-width: 0;
 }
 
+.app-header-logo-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: min(66vw, 240px);
+    border-radius: 0.7rem;
+    padding: 0.22rem 0.45rem;
+    text-decoration: none;
+    transition:
+        background-color var(--fh-duration-fast) var(--fh-ease-out),
+        border-color var(--fh-duration-fast) var(--fh-ease-out),
+        box-shadow var(--fh-duration-med) var(--fh-ease-out);
+}
+
+.app-header-logo {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 62px;
+}
+
+body.header-tone-dark .app-header-logo-link {
+    background: rgba(255, 255, 255, 0.94);
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    box-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.45);
+}
+
+body.header-tone-light .app-header-logo-link {
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid rgba(31, 42, 55, 0.28);
+    box-shadow:
+        0 2px 8px rgba(15, 23, 42, 0.14),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .app-header-logo-link:hover,
+    .app-header-logo-link:focus-visible {
+        box-shadow: var(--fh-shadow-tab-md);
+    }
+}
+
 .app-header-actions {
     grid-column: 2;
     grid-row: 1;
@@ -466,6 +510,15 @@ body.header-tone-light .app-header .tab.active {
         font-size: 1.3rem;
     }
 
+    .app-header-logo-link {
+        max-width: min(72vw, 210px);
+        padding: 0.18rem 0.35rem;
+    }
+
+    .app-header-logo {
+        max-height: 52px;
+    }
+
     .user-balance {
         max-width: 58vw;
     }

includes/header.php

@@ -29,7 +29,17 @@
         }
       ?>
       <div class="app-header-top">
-        <h1 class="h3 mb-0 app-header-brand">Family Hub</h1>
+        <h1 class="h3 mb-0 app-header-brand">
+          <a href="index.php" class="app-header-logo-link" aria-label="Family Hub home">
+            <img
+              src="assets/logo/trans_480x480.svg"
+              alt="Family Hub"
+              class="app-header-logo"
+              width="240"
+              height="80"
+            >
+          </a>
+        </h1>
         <div class="app-header-actions d-flex align-items-center gap-2 flex-wrap justify-content-end">
           <?php if (count($people) === 0): ?>
             <span class="small opacity-75 text-end">Add people in Family settings.</span>