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