holygrail5 1.0.21 → 1.0.23

package/src/docs-generator/guide-styles.css

@@ -10,16 +10,24 @@
    antiguos.
    ============================================ */
 @font-face {
-  font-family: "suisse-light";
+  font-family: "suisse-thin";
   font-weight: 100;
   font-display: swap;
+  src: local("SuisseIntl-Thin"),
+       url('assets/fonts/suisse-intl-thin.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-thin.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-light";
+  font-weight: 300;
+  font-display: swap;
   src: local("SuisseIntl-Light"),
        url('assets/fonts/suisse-intl-light.woff2') format('woff2'),
        url('assets/fonts/suisse-intl-light.woff') format('woff');
 }
 @font-face {
   font-family: "suisse-regular";
-  font-weight: 300;
+  font-weight: 400;
   font-display: swap;
   src: local("SuisseIntl-Regular"),
        url('assets/fonts/suisse-intl-regular.woff2') format('woff2'),
@@ -27,7 +35,7 @@
 }
 @font-face {
   font-family: "suisse-medium";
-  font-weight: 400;
+  font-weight: 500;
   font-display: swap;
   src: local("SuisseIntl-Medium"),
        url('assets/fonts/suisse-intl-medium.woff2') format('woff2'),
@@ -35,12 +43,28 @@
 }
 @font-face {
   font-family: "suisse-semibold";
-  font-weight: 500;
+  font-weight: 600;
   font-display: swap;
   src: local("SuisseIntl-SemiBold"),
        url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'),
        url('assets/fonts/suisse-intl-semibold.woff') format('woff');
 }
+@font-face {
+  font-family: "suisse-mono-regular";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseIntlMono-Regular"),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-mono-bold";
+  font-weight: 700;
+  font-display: swap;
+  src: local("SuisseIntlMono-Bold"),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff') format('woff');
+}
 /* Suisse Works (serif) — reservado para el tema Limited */
 @font-face {
   font-family: "suisse-works-regular";
@@ -70,9 +94,7 @@
 /* ============================================
    RESET Y BASE
    ============================================ */
-* {
-  scroll-behavior: smooth;
-}
+/* Scroll nativo (sin suavizado): los saltos de ancla son instantáneos. */
 
 body {
   margin: 0;
@@ -96,14 +118,14 @@ h2 {
   margin-left: 0;
   flex: 1;
   padding: 0;
-  padding-bottom: 10rem;
+  padding-bottom: 4rem;
   max-width: 100%;
 }
 
 .guide-main-content h2 {
-  font-size: 50px;
-  padding-bottom: 40px;
-  margin-bottom: 40px;
+  font-size: 34px;
+  padding-bottom: 12px;
+  margin-bottom: 8px;
   font-weight: 500;
   color: #000;
   font-family: var(--hg-typo-font-family-primary-bold);
@@ -114,27 +136,27 @@ h2 {
   font-family: var(--hg-typo-font-family-primary-regular);
   color: #000;
   font-size: 16px;
-  line-height: 28px;
-  margin: 80px 0 12px;
+  line-height: 1.4;
+  margin: 2rem 0 0.75rem;
 }
 
 @media (min-width: 768px) {
   .guide-main-content h2 {
-    font-size: 64px;
-    padding-bottom: 40px;
-    margin-bottom: 10px;
+    font-size: 44px;
+    padding-bottom: 12px;
+    margin-bottom: 8px;
   }
 
   .guide-main-content h3 {
     font-family: var(--hg-typo-font-family-primary-regular);
     color: #000;
-    font-size: 20px;
-    line-height: 28px;
-    margin: 80px 0 12px;
+    font-size: 18px;
+    line-height: 1.4;
+    margin: 2rem 0 0.75rem;
   }
-  
+
   .guide-section-description {
-    font-size: 28px;
+    font-size: 18px;
   }
 }
 
@@ -147,20 +169,40 @@ h2 {
   border-radius: 8px;
 }
 
+/* Compactación / unificación del ritmo vertical de la guía.
+   Las cabeceras de sección usan `.row.mb-120` (120px) como separador;
+   aquí lo reducimos a un valor coherente y mucho más pegado. También
+   homogeneizamos el espacio entre secciones y el del separador <hr>. */
+.guide-section .row.mb-120,
+.guide-section--highlighted .row.mb-120 {
+  margin-bottom: 1.5rem;
+}
+.guide-section + .guide-section,
+.guide-section--highlighted + .guide-section,
+.guide-section + .guide-section--highlighted {
+  margin-top: 2.5rem;
+}
+.guide-section .row.mb-120 hr,
+.guide-section hr {
+  margin: 0.5rem 0 0;
+  border: 0;
+  border-top: 1px solid #e9e9e9;
+}
+
 .guide-section.guide-section--highlighted {
   background: #fff;
-  padding: 5rem 0 2rem 0;
+  padding: 2rem 0 1rem 0;
 }
 @media (min-width: 768px) {
   .guide-section.guide-section--highlighted {
-    padding: 5rem 0;
+    padding: 2.5rem 0 1.5rem 0;
   }
 }
 
 .guide-section-title {
   font-size: 1.5rem;
   font-weight: 500;
-  padding-bottom: 2rem;
+  padding-bottom: 1rem;
   line-height: 1.2;
   display: flex;
   justify-content: space-between;
@@ -170,34 +212,19 @@ h2 {
 
 @media (min-width: 768px) {
   .guide-section-title {
-    margin-top: 3rem;
-    flex-direction: row;
+    margin-top: 1.25rem;
+    /* Se mantiene en columna: el contenido (cajas explicativas) queda
+       debajo del titular y alineado a la izquierda, no en la mitad derecha. */
   }
 }
 
 .guide-section-description {
-  margin-top: 1rem;
-  font-size: 28px;
-  color: #000000;
-  font-family: var(--hg-typo-font-family-primary-light);
-  margin-bottom: 20px;
-
-  line-height: 1.2;
-  width: 100%;
-  margin-left: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.guide-section-description {
-  margin-top: 1rem;
-  font-size: 28px;
+  margin-top: 0.5rem;
+  font-size: 18px;
   color: #000000;
   font-family: var(--hg-typo-font-family-primary-light);
-  margin-bottom: 20px;
-
-  line-height: 1.2;
+  margin-bottom: 8px;
+  line-height: 1.35;
   width: 100%;
   margin-left: 0;
   display: flex;
@@ -543,14 +570,14 @@ h2 {
   color: #919191;
   letter-spacing: 0.05em;
   border-bottom: 1px solid #ddd;
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   padding-left: 0;
   text-align: left;
   z-index: 10;
 }
 
 .guide-table td {
-  padding: 0.75rem;
+  padding: 0.38rem 0.75rem;
   padding-left: 0;
   border-bottom: 1px solid #efefef;
   vertical-align: middle;
@@ -578,9 +605,9 @@ h2 {
 
 .guide-table .guide-font-family-preview {
   min-width: 100px;
-  padding: 0.75rem;
-  min-height: 50px;
-  font-size: 1.5rem;
+  padding: 0.4rem;
+  min-height: 34px;
+  font-size: 1.25rem;
   /* Dejamos que cada font-family muestre su peso natural. En
      esta convención (una familia por peso) cada @font-face
      declara un único font-weight, así que forzar un weight
@@ -677,7 +704,6 @@ h2 {
 .guide-text-bold,
 .guide-table .guide-table-name,
 .guide-layout-class-name {
-  font-weight: 600;
   color: #000000;
   font-family: var(--hg-typo-font-family-primary-regular);
 }
@@ -1295,15 +1321,18 @@ h2 {
   gap: var(--hg-spacing-24);
   max-width: 100%;
   margin-left: 0;
-  margin-bottom: 10rem;
+  margin-bottom: 2rem;
 }
 
+/* Las cajas explicativas van debajo del titular + línea, alineadas a la
+   IZQUIERDA (antes: max-width 50% + margin-left 50% las empujaba a la
+   mitad derecha de la página). */
 @media (min-width: 768px) {
   .demo-section-2 {
     grid-template-columns: repeat(2, 1fr);
-    max-width: 50%;
-    margin-left: 50%;
-    margin-bottom: 10rem;
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 2rem;
   }
 }