Update logo styling

Author: musicog

assets/logos/lets-encode-cream.png

@@ -26,7 +26,7 @@
 <!-- ====================== TOP BAR ====================== -->
 <header class="topbar">
   <div class="wrap">
-    <a class="brand" href="#top" aria-label="Let's Encode! — back to top"><img class="brand-logo" src="assets/logo.svg" alt="" width="188" height="54" title="Let's Encode! Crowd-encoding and validation of music scores"><span class="brand-text" aria-hidden="true">Let's Encode!</span></a>
+    <a class="brand" href="#top" aria-label="Let's Encode! — back to top"><span class="brand-logo" title="Let's Encode! Crowd-encoding and validation of music scores"><img class="brand-logo-img brand-logo-rest" src="assets/logos/lets-encode-nav.png" alt="" width="1120" height="400"><img class="brand-logo-img brand-logo-hover" src="assets/logo.svg" alt="" width="1391" height="400"></span><span class="brand-text" aria-hidden="true">Let's Encode!</span></a>
     <nav class="nav" id="primary-nav" aria-label="Primary">
       <a href="#about">About</a>
       <a href="#goals">Goals</a>
@@ -45,11 +45,11 @@
 
   <!-- ====================== HERO ====================== -->
   <section class="hero" aria-labelledby="hero-heading">
-    <a class="hero-corner hero-corner-left" href="https://iwk.mdw.ac.at" target="_blank" rel="noopener">
-      <img src="assets/logos/IWK-logo2018-P281-short.svg" alt="IWK – Department of Music Acoustics – Wiener Klangstil">
+    <a class="hero-corner hero-corner-left" href="https://iwk.mdw.ac.at" target="_blank" rel="noopener" title="Department of Music Acoustics – Wiener Klangstil">
+      <img src="assets/logos/IWK-logo2018-P281-short.svg" alt="IWK – Department of Music Acoustics – Wiener Klangstil" title="Department of Music Acoustics – Wiener Klangstil">
     </a>
-    <a class="hero-corner hero-corner-right" href="https://mdw.ac.at" target="_blank" rel="noopener">
-      <img src="assets/logos/MDW_Logo_englisch281.svg" alt="mdw – University of Music and Performing Arts Vienna">
+    <a class="hero-corner hero-corner-right" href="https://mdw.ac.at" target="_blank" rel="noopener" title="mdw – University of Music and Performing Arts Vienna">
+      <img src="assets/logos/MDW_Logo_englisch281.svg" alt="mdw – University of Music and Performing Arts Vienna" title="mdw – University of Music and Performing Arts Vienna">
     </a>
     <div class="wrap">
       <h1 id="hero-heading" class="visually-hidden" style="position:absolute;left:-9999px;">Let's Encode!</h1>
@@ -59,7 +59,7 @@ <h1 id="hero-heading" class="visually-hidden" style="position:absolute;left:-999
         Do NOT replace this with <img src="lets-encode-logo.svg"> — that shows the
         static logo only. The static logo also renders fine with JS disabled.
       -->
-      <div class="logo" role="img" aria-label="Let's Encode! logo: three cartoon hands interacting with the words, a musical note, and a thumbs-up.">
+      <div class="logo" role="img" aria-label="Let's Encode! logo: three cartoon hands interacting with the words, a musical note, and a thumbs-up." title="Let's Encode! Crowd-encoding and validation of music scores">
 <svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="141.11163mm" height="40.581127mm" viewBox="0 0 141.11163 40.581127" version="1.1" id="svg1" inkscape:version="1.4 (e7c3feb1, 2024-10-09)" sodipodi:docname="lets-encode.svg">
   <sodipodi:namedview id="namedview1" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:zoom="0.82136644" inkscape:cx="118.09589" inkscape:cy="206.97218" inkscape:current-layer="layer1"/>
   <defs id="defs1"><style type="text/css"><![CDATA[
@@ -378,18 +378,18 @@ <h2 id="funding-heading" aria-label="Supported by the Austrian Science Fund">Sup
 
       <ul class="logos" style="margin-top:2.5rem;">
         <li>
-          <a href="https://iwk.mdw.ac.at" target="_blank" rel="noopener">
-            <img src="assets/logos/IWK-logo2018-P281-short.svg" alt="IWK – Department of Music Acoustics – Wiener Klangstil">
+          <a href="https://iwk.mdw.ac.at" target="_blank" rel="noopener" title="Department of Music Acoustics – Wiener Klangstil">
+            <img src="assets/logos/IWK-logo2018-P281-short.svg" alt="IWK – Department of Music Acoustics – Wiener Klangstil" title="Department of Music Acoustics – Wiener Klangstil">
           </a>
         </li>
         <li>
-          <a href="https://mdw.ac.at" target="_blank" rel="noopener">
-            <img src="assets/logos/MDW_Logo_englisch281.svg" alt="mdw – University of Music and Performing Arts Vienna">
+          <a href="https://mdw.ac.at" target="_blank" rel="noopener" title="mdw – University of Music and Performing Arts Vienna">
+            <img src="assets/logos/MDW_Logo_englisch281.svg" alt="mdw – University of Music and Performing Arts Vienna" title="mdw – University of Music and Performing Arts Vienna">
           </a>
         </li>
         <li>
-          <a href="https://www.fwf.ac.at" target="_blank" rel="noopener">
-            <img src="assets/logos/FWF_Logo_Zusatz_Dunkelblau_RGB_EN.svg" alt="FWF – Austrian Science Fund">
+          <a href="https://www.fwf.ac.at" target="_blank" rel="noopener" title="FWF – Austrian Science Fund">
+            <img src="assets/logos/FWF_Logo_Zusatz_Dunkelblau_RGB_EN.svg" alt="FWF – Austrian Science Fund" title="FWF – Austrian Science Fund">
           </a>
         </li>
       </ul>

assets/logos/lets-encode-nav.png

@@ -115,10 +115,53 @@ a:hover {
   text-decoration: none;
 }
 
+/* Logo swap: the monochrome nav artwork (fill-less hands) shows at rest and
+   cross-fades to the full-colour logo on hover. The COLOUR svg is the reference
+   — it sits in flow and sets the box (width + rendered height, 120px wide). The
+   two files are the same artwork but framed differently (the mono png has wider
+   margins + is ~5% smaller at a given width), so the mono png is overlaid
+   absolutely and up-scaled/offset until its ink registers onto the colour ink. */
 .brand-logo {
-  height: 35px;
-  width: auto;
+  position: relative;
   display: block;
+  width: 120px;
+  /* match the rendered width of the IWK hero-corner logo */
+  overflow: hidden;
+  /* same lift as the hero-corner institutional logos on hover */
+  transition: transform .15s ease;
+}
+
+.brand:hover .brand-logo {
+  transform: translateY(-2px);
+}
+
+.brand-logo-img {
+  display: block;
+  transition: opacity .15s ease;
+}
+
+/* colour svg — in flow, defines the slot */
+.brand-logo-hover {
+  width: 120px;
+  height: auto;
+  opacity: 0;
+}
+
+/* mono png — overlay, sized/positioned to match the colour ink */
+.brand-logo-rest {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 126px;
+  height: auto;
+}
+
+.brand:hover .brand-logo-rest {
+  opacity: 0;
+}
+
+.brand:hover .brand-logo-hover {
+  opacity: 1;
 }
 
 /* Plaintext wordmark — shown only on mobile (see the max-width: 560px block),
@@ -584,15 +627,6 @@ section.alt {
     right: 1.45rem;
   }
 
-  /* swap the logo image for a plaintext wordmark on mobile */
-  .brand-logo {
-    display: none;
-  }
-
-  .brand-text {
-    display: inline;
-  }
-
   /* burger button on the right; brand stays on the left */
   .nav-toggle {
     display: inline-flex;