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;
     }

assets/logo/trans_480x480.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
+  <image width="480" height="480" href="data:image/png;base64,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 truncated
+</svg>

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>