merge: align hero headers and normalize clan description

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

@@ -1,29 +1,39 @@
 @media (min-width: 1121px) {
   .hero:not(.historical-hero) .hero__content {
     padding-block: 54px 60px;
-    padding-inline: clamp(48px, 5vw, 88px);
+    padding-inline: clamp(64px, 5.5vw, 104px);
   }
 
   .hero:not(.historical-hero) .hero__brand {
-    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
+    width: 100%;
-    column-gap: clamp(150px, 14vw, 260px);
     max-width: 1420px;
     margin: 0 auto;
+    display: grid;
+    grid-template-columns: minmax(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px);
+    column-gap: clamp(28px, 3vw, 56px);
+    align-items: center;
   }
 
   .hero:not(.historical-hero) .logo-frame {
-    width: min(370px, 100%);
+    grid-column: 1;
-    min-height: 300px;
+    justify-self: start;
-    padding: 26px 30px;
+    width: min(470px, 100%);
+    min-height: 360px;
+    padding: 30px 34px;
   }
 
   .hero:not(.historical-hero) .logo-frame__image {
-    max-height: 292px;
+    max-height: 340px;
   }
 
   .hero:not(.historical-hero) .hero__copy {
-    max-width: 980px;
+    grid-column: 3;
+    justify-self: end;
+    width: 100%;
+    max-width: 820px;
     align-content: center;
+    justify-items: start;
+    text-align: left;
     transform: none;
   }
 
@@ -43,16 +53,40 @@
 }
 
 @media (min-width: 1121px) and (max-width: 1380px) {
+  .hero:not(.historical-hero) .hero__content {
+    padding-inline: clamp(44px, 4vw, 64px);
+  }
+
   .hero:not(.historical-hero) .hero__brand {
-    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
+    grid-template-columns: minmax(320px, 390px) minmax(28px, 1fr) minmax(560px, 720px);
-    column-gap: clamp(112px, 9vw, 150px);
+    column-gap: clamp(20px, 2.5vw, 40px);
+  }
+
+  .hero:not(.historical-hero) .logo-frame {
+    width: min(390px, 100%);
+    min-height: 316px;
+  }
+
+  .hero:not(.historical-hero) .logo-frame__image {
+    max-height: 298px;
   }
 
   .hero:not(.historical-hero) .hero__copy {
+    grid-column: 3;
+    justify-self: end;
+    width: 100%;
+    max-width: 720px;
     transform: none;
   }
 
   .hero:not(.historical-hero) .hero__title {
-    font-size: clamp(3.6rem, 5.5vw, 5.1rem);
+    font-size: clamp(3.7rem, 5.35vw, 5.15rem);
+  }
+}
+
+@media (max-width: 1120px) {
+  .hero:not(.historical-hero) .hero__copy {
+    grid-column: auto;
+    transform: none;
   }
 }

frontend/assets/css/historico.css

@@ -32,6 +32,11 @@
   gap: 32px;
 }
 
+.historical-hero__layout--registry {
+  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
+  column-gap: clamp(72px, 7vw, 140px);
+}
+
 .historical-hero__layout > * {
   min-width: 0;
 }
@@ -45,11 +50,110 @@
   max-width: 12ch;
 }
 
+.historical-hero__layout--registry .historical-hero__copy {
+  max-width: min(100%, 760px);
+}
+
+.historical-hero__layout--registry .historical-hero__title {
+  max-width: 18ch;
+}
+
 .historical-hero__text {
   max-width: 60ch;
   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(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px);
+    column-gap: clamp(28px, 3vw, 56px);
+    align-items: center;
+  }
+
+  .historical-hero__layout--registry .historical-logo-frame {
+    grid-column: 1;
+    justify-self: start;
+    width: min(470px, 100%);
+    min-height: 360px;
+    padding: 30px 34px;
+  }
+
+  .historical-hero__layout--registry .logo-frame__image {
+    max-height: 340px;
+  }
+
+  .historical-hero__layout--registry .historical-hero__copy {
+    grid-column: 3;
+    justify-self: end;
+    width: 100%;
+    max-width: 820px;
+    align-content: center;
+    justify-items: start;
+    text-align: left;
+  }
+
+  .historical-hero__layout--registry .historical-hero__title {
+    max-width: none;
+    font-size: clamp(4.2rem, 5.2vw, 6.35rem);
+    line-height: 1.02;
+  }
+
+  .historical-hero__layout--registry .historical-hero__text {
+    max-width: 68ch;
+  }
+
+  .historical-hero__layout--registry .historical-selector {
+    max-width: 760px;
+  }
+}
+
+@media (min-width: 1121px) and (max-width: 1380px) {
+  .historical-hero__layout--registry {
+    grid-template-columns: minmax(320px, 390px) minmax(28px, 1fr) minmax(560px, 720px);
+    column-gap: clamp(20px, 2.5vw, 40px);
+  }
+
+  .historical-hero__layout--registry .historical-logo-frame {
+    grid-column: 1;
+    width: min(390px, 100%);
+    min-height: 316px;
+  }
+
+  .historical-hero__layout--registry .logo-frame__image {
+    max-height: 298px;
+  }
+
+  .historical-hero__layout--registry .historical-hero__copy {
+    grid-column: 3;
+    width: 100%;
+    max-width: 720px;
+    justify-self: end;
+  }
+
+  .historical-hero__layout--registry .historical-hero__title {
+    font-size: clamp(3.7rem, 5.35vw, 5.15rem);
+  }
+}
+
+@media (max-width: 1120px) {
+  .historical-hero__layout--registry {
+    max-width: none;
+  }
+
+  .historical-hero__layout--registry .historical-hero__copy,
+  .historical-hero__layout--registry .historical-hero__title,
+  .historical-hero__layout--registry .historical-hero__text {
+    width: auto;
+    max-width: none;
+    justify-self: stretch;
+  }
+}
+
 .historical-map-hero {
   position: relative;
   overflow: hidden;
@@ -1051,6 +1155,11 @@
     max-width: 100%;
   }
 
+  .historical-hero__layout--registry .historical-hero__copy,
+  .historical-hero__layout--registry .historical-hero__title {
+    max-width: 100%;
+  }
+
   .historical-map-hero {
     width: 100%;
     min-height: 190px;

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: "",

frontend/historico.html

@@ -22,7 +22,7 @@
             </a>
             <p class="eyebrow">Historico propio</p>
           </div>
-          <div class="historical-hero__layout">
+          <div class="historical-hero__layout historical-hero__layout--registry">
             <div class="logo-frame historical-logo-frame">
               <img
                 src="./assets/img/logo.png"