feat(header): update brand logo with SVG and enhance styling for better presentation

Author: Don-Damiano

public/assets/rd-logo.svg

@@ -23,8 +23,59 @@ const nav = lang === "pl"
 <nav class="nav">
   <div class="nav-header">
     <a href={homeHref} class="brand" aria-label="Go to homepage">
-      <b>rocketdeploy</b>
-      <small>systems · delivery · ops</small>
+      <span class="brand-logo" aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 510 464"
+          preserveAspectRatio="xMidYMid meet"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <g
+            transform="translate(0,464) scale(0.1,-0.1)"
+            fill="currentColor"
+            stroke="none"
+          >
+            <path
+              d="M2432 4584 c-63 -17 -38 -4 -1887 -940 -200 -101 -379 -198 -402
+              -218 -23 -20 -54 -62 -70 -94 l-28 -57 0 -1000 0 -1000 23 -48 c30 -59 95
+              -125 153 -154 24 -11 172 -81 329 -153 157 -73 350 -163 430 -200 80 -37 197
+              -91 259 -120 63 -29 171 -79 240 -112 70 -33 164 -77 211 -98 47 -21 216 -100
+              375 -175 337 -159 380 -175 478 -175 91 1 106 6 462 172 160 75 310 145 335
+              156 25 11 86 39 135 62 139 65 770 354 1229 563 204 93 267 140 307 229 l24
+              53 3 982 2 981 -21 59 c-43 113 -63 126 -655 427 -291 148 -578 295 -639 326
+              -369 192 -1059 531 -1096 539 -60 14 -134 12 -197 -5z m1391 -1294 c-1 -19
+              -25 -143 -53 -275 -29 -132 -74 -346 -101 -475 -28 -129 -61 -289 -75 -355
+              -14 -66 -45 -214 -69 -329 -24 -114 -47 -212 -52 -216 -12 -12 -263 -19 -398
+              -12 -135 8 -130 3 -111 95 l7 38 -47 -36 c-62 -48 -102 -67 -204 -100 -72 -24
+              -107 -29 -226 -33 -158 -5 -221 5 -310 47 -167 79 -245 250 -216 477 25 195
+              107 359 252 504 144 143 299 221 500 251 131 19 332 3 461 -37 18 -5 16 -15
+              80 296 17 85 38 165 46 178 l14 22 252 -2 252 -3 -2 -35z m-1773 -411 c36 -5
+              69 -14 73 -19 10 -9 -73 -223 -141 -360 l-47 -95 -111 -6 c-224 -13 -383 -83
+              -479 -212 -67 -88 -72 -104 -131 -397 -15 -74 -32 -141 -37 -147 -7 -10 -73
+              -13 -268 -13 l-259 0 0 30 c0 16 13 89 29 162 31 137 96 433 176 802 25 115
+              50 216 56 223 9 10 66 13 260 13 l249 0 0 -26 c0 -14 -11 -75 -25 -136 -14
+              -61 -25 -115 -25 -120 0 -5 18 13 40 41 45 57 139 138 204 176 139 81 282 109
+              436 84z m2318 -83 c17 -9 44 -33 59 -53 26 -34 28 -43 27 -122 0 -98 -12 -129
+              -73 -190 -50 -50 -124 -76 -217 -75 -157 2 -237 104 -205 262 28 140 163 222
+              327 201 28 -4 65 -14 82 -23z m-191 -707 c30 -11 102 -77 117 -108 35 -70 25
+              -207 -24 -306 -83 -170 -249 -320 -442 -401 -70 -29 -76 -27 -118 51 -21 40
+              -23 47 -10 55 83 48 250 215 250 250 0 4 -15 11 -32 14 -91 17 -131 76 -131
+              191 0 108 52 192 151 244 54 29 176 34 239 10z"
+            />
+            <path
+              d="M2815 2542 c-145 -50 -245 -159 -296 -322 -45 -144 -20 -255 68 -307
+              42 -25 58 -28 128 -27 103 1 194 36 267 103 l51 47 48 235 c27 129 48 239 49
+              246 1 39 -224 57 -315 25z"
+            />
+          </g>
+        </svg>
+      </span>
+
+      <span class="brand-text">
+        <b>rocketdeploy</b>
+        <small>systems · delivery · ops</small>
+      </span>
     </a>
 
     <button

public/favicon.ico

@@ -1,12 +1,12 @@
 :root{
-  --bg: #05070e;          /* soft dark (nie czarny) */
+  --bg: #05070e;
   --panel: rgba(255,255,255,.03);
   --border: rgba(255,255,255,.08);
   --text: rgba(255,255,255,.86);
   --muted: rgba(255,255,255,.62);
   --faint: rgba(255,255,255,.42);
-  --accent: #7aa2ff;      /* chłodny niebieski */
-  --accent2: #5eead4;     /* delikatny teal do “glow” (mega oszczędnie) */
+  --accent: #7aa2ff;
+  --accent2: #5eead4;
   --shadow: 0 12px 40px rgba(0,0,0,.45);
   --radius: 18px;
   --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -65,17 +65,49 @@ a:hover{ border-bottom-color: rgba(122,162,255,.85); }
 
 .brand{
   display:flex;
-  gap: 10px;
-  align-items: baseline;
+  gap: 12px;
+  align-items: center;
   border-bottom: none;
+  text-decoration: none;
+  color: inherit;
 }
+
 .brand b{ letter-spacing: .2px; }
+
+.brand-logo{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: none;
+  transform: translateY(0);
+  transition: transform 120ms ease;
+}
+
+.brand-logo img,
+.brand-logo svg{
+  width: 34px;
+  height: 34px;
+  display: block;
+}
+
+.brand-text{
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 1.15;
+}
+
 .brand small{
   color: var(--muted);
   font-family: var(--mono);
   font-size: 12px;
 }
 
+/* Subtelny hover */
+.brand:hover .brand-logo{
+  transform: translateY(-1px);
+}
+
 .navlinks{
   display:flex;
   gap: 18px;
@@ -146,6 +178,17 @@ a:hover{ border-bottom-color: rgba(122,162,255,.85); }
   .navlinks[data-open="true"]{
     display:flex;
   }
+
+  /* logo trochę mniejsze na mobile */
+  .brand-logo img,
+  .brand-logo svg{
+    width: 28px;
+    height: 28px;
+  }
+
+  .brand small{
+    font-size: 11px;
+  }
 }
 
 main{ padding: 10px 0 70px; }
@@ -268,6 +311,8 @@ h1{
 @media (prefers-reduced-motion: reduce){
   .btn, .card{ transition: none; }
   .btn:hover, .card:hover{ transform: none; }
+  .brand-logo{ transition: none; }
+  .brand:hover .brand-logo{ transform: none; }
 }
 
 /* Hero kicker (index) — monospace + subtelny vibe */
@@ -455,4 +500,4 @@ h1{
 }
 .grid.problem-snap::-webkit-scrollbar{
   display: none; /* Chromium/Safari */
-}
+}