fix: align hero headers and normalize clan description

frontend/assets/css/hero-header-compact.css

@@ -9,26 +9,28 @@
     max-width: 1420px;
     margin: 0 auto;
     display: grid;
-    grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
+    grid-template-columns: minmax(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px);
-    column-gap: clamp(80px, 7vw, 132px);
+    column-gap: clamp(28px, 3vw, 56px);
     align-items: center;
   }
 
   .hero:not(.historical-hero) .logo-frame {
+    grid-column: 1;
     justify-self: start;
-    width: min(440px, 100%);
+    width: min(470px, 100%);
-    min-height: 340px;
+    min-height: 360px;
-    padding: 28px 32px;
+    padding: 30px 34px;
   }
 
   .hero:not(.historical-hero) .logo-frame__image {
-    max-height: 322px;
+    max-height: 340px;
   }
 
   .hero:not(.historical-hero) .hero__copy {
+    grid-column: 3;
     justify-self: end;
-    width: min(860px, 100%);
+    width: 100%;
-    max-width: 860px;
+    max-width: 820px;
     align-content: center;
     justify-items: start;
     text-align: left;
@@ -52,27 +54,28 @@
 
 @media (min-width: 1121px) and (max-width: 1380px) {
   .hero:not(.historical-hero) .hero__content {
-    padding-inline: clamp(48px, 4.5vw, 72px);
+    padding-inline: clamp(44px, 4vw, 64px);
   }
 
   .hero:not(.historical-hero) .hero__brand {
-    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+    grid-template-columns: minmax(320px, 390px) minmax(28px, 1fr) minmax(560px, 720px);
-    column-gap: clamp(54px, 5vw, 86px);
+    column-gap: clamp(20px, 2.5vw, 40px);
   }
 
   .hero:not(.historical-hero) .logo-frame {
-    width: min(380px, 100%);
+    width: min(390px, 100%);
-    min-height: 306px;
+    min-height: 316px;
   }
 
   .hero:not(.historical-hero) .logo-frame__image {
-    max-height: 288px;
+    max-height: 298px;
   }
 
   .hero:not(.historical-hero) .hero__copy {
-    width: min(760px, 100%);
+    grid-column: 3;
-    max-width: 760px;
     justify-self: end;
+    width: 100%;
+    max-width: 720px;
     transform: none;
   }
 
@@ -83,6 +86,7 @@
 
 @media (max-width: 1120px) {
   .hero:not(.historical-hero) .hero__copy {
+    grid-column: auto;
     transform: none;
   }
-}
+}

frontend/assets/css/historico.css

@@ -63,32 +63,35 @@
   overflow-wrap: anywhere;
 }
 
+/* Registry/historico hero: logo left, real flexible spacer, copy anchored right. */
 @media (min-width: 1121px) {
   .historical-hero__layout--registry {
     width: 100%;
     max-width: 1420px;
     margin: 0 auto;
     display: grid;
-    grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
+    grid-template-columns: minmax(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px);
-    column-gap: clamp(80px, 7vw, 132px);
+    column-gap: clamp(28px, 3vw, 56px);
     align-items: center;
   }
 
   .historical-hero__layout--registry .historical-logo-frame {
+    grid-column: 1;
     justify-self: start;
-    width: min(440px, 100%);
+    width: min(470px, 100%);
-    min-height: 340px;
+    min-height: 360px;
-    padding: 28px 32px;
+    padding: 30px 34px;
   }
 
   .historical-hero__layout--registry .logo-frame__image {
-    max-height: 322px;
+    max-height: 340px;
   }
 
   .historical-hero__layout--registry .historical-hero__copy {
+    grid-column: 3;
     justify-self: end;
-    width: min(860px, 100%);
+    width: 100%;
-    max-width: 860px;
+    max-width: 820px;
     align-content: center;
     justify-items: start;
     text-align: left;
@@ -111,22 +114,24 @@
 
 @media (min-width: 1121px) and (max-width: 1380px) {
   .historical-hero__layout--registry {
-    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+    grid-template-columns: minmax(320px, 390px) minmax(28px, 1fr) minmax(560px, 720px);
-    column-gap: clamp(54px, 5vw, 86px);
+    column-gap: clamp(20px, 2.5vw, 40px);
   }
 
   .historical-hero__layout--registry .historical-logo-frame {
-    width: min(380px, 100%);
+    grid-column: 1;
-    min-height: 306px;
+    width: min(390px, 100%);
+    min-height: 316px;
   }
 
   .historical-hero__layout--registry .logo-frame__image {
-    max-height: 288px;
+    max-height: 298px;
   }
 
   .historical-hero__layout--registry .historical-hero__copy {
-    width: min(760px, 100%);
+    grid-column: 3;
-    max-width: 760px;
+    width: 100%;
+    max-width: 720px;
     justify-self: end;
   }
 
@@ -1344,4 +1349,4 @@
    The internal detail page can still show its own scoreboard button. */
 #recent-matches-list .historical-match-card__link--scoreboard {
   display: none;
-}
+}

frontend/assets/js/main.js

@@ -28,7 +28,7 @@ const COMMUNITY_CLANS = Object.freeze([
     name: "La 129",
     badge: "Clan CH",
     description:
-      "Clan activo de la comunidad, con acceso directo a su discord.",
+      "Clan activo de la comunidad.",
     logoSrc: "./assets/img/clans/la129.png",
     logoAlt: "Logo de La 129",
     logoClassName: "clan-card__logo--wide",
@@ -62,7 +62,7 @@ const COMMUNITY_CLANS = Object.freeze([
     name: "BxB",
     badge: "Clan CH",
     description:
-      "Clan activo de la comunidad, son raretes.",
+      "Clan activo de la comunidad.",
     logoSrc: "./assets/img/clans/bxb.png",
     logoAlt: "Logo de BxB",
     logoClassName: "",