holygrail5 1.0.19 → 1.0.21

package/dist/guide-styles.css

@@ -1,3 +1,72 @@
+/* ============================================
+   FUENTES — Suisse Intl (sans) + Suisse Works (serif)
+   Convención: una font-family por peso (suisse-light/regular/
+   medium/semibold) en lugar de una familia con varios pesos.
+   local() permite usar la fuente instalada en el sistema si
+   existe, evitando la descarga. font-display: swap evita el
+   FOIT — el texto se muestra con la fuente fallback y se
+   sustituye al cargar la web. Servimos woff2 (formato moderno,
+   más comprimido) con fallback a woff para navegadores muy
+   antiguos.
+   ============================================ */
+@font-face {
+  font-family: "suisse-light";
+  font-weight: 100;
+  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-display: swap;
+  src: local("SuisseIntl-Regular"),
+       url('assets/fonts/suisse-intl-regular.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-regular.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-medium";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseIntl-Medium"),
+       url('assets/fonts/suisse-intl-medium.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-medium.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-semibold";
+  font-weight: 500;
+  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');
+}
+/* Suisse Works (serif) — reservado para el tema Limited */
+@font-face {
+  font-family: "suisse-works-regular";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseWorks-Regular"),
+       url('assets/fonts/suisse-works-regular.woff2') format('woff2'),
+       url('assets/fonts/suisse-works-regular.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-works-medium";
+  font-weight: 500;
+  font-display: swap;
+  src: local("SuisseWorks-Medium"),
+       url('assets/fonts/suisse-works-medium.woff2') format('woff2'),
+       url('assets/fonts/suisse-works-medium.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-works-bold";
+  font-weight: 700;
+  font-display: swap;
+  src: local("SuisseWorks-Bold"),
+       url('assets/fonts/suisse-works-bold.woff2') format('woff2'),
+       url('assets/fonts/suisse-works-bold.woff') format('woff');
+}
+
 /* ============================================
    RESET Y BASE
    ============================================ */
@@ -8,7 +77,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
 }
 
 h2 {
@@ -37,12 +106,12 @@ h2 {
   margin-bottom: 40px;
   font-weight: 500;
   color: #000;
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--hg-typo-font-family-primary-bold);
   letter-spacing: 0;
 }
 
 .guide-main-content h3 {
-  font-family: helvetica;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #000;
   font-size: 16px;
   line-height: 28px;
@@ -57,7 +126,7 @@ h2 {
   }
 
   .guide-main-content h3 {
-    font-family: helvetica;
+    font-family: var(--hg-typo-font-family-primary-regular);
     color: #000;
     font-size: 20px;
     line-height: 28px;
@@ -110,7 +179,7 @@ h2 {
   margin-top: 1rem;
   font-size: 28px;
   color: #000000;
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--hg-typo-font-family-primary-light);
   margin-bottom: 20px;
 
   line-height: 1.2;
@@ -125,7 +194,7 @@ h2 {
   margin-top: 1rem;
   font-size: 28px;
   color: #000000;
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--hg-typo-font-family-primary-light);
   margin-bottom: 20px;
 
   line-height: 1.2;
@@ -206,11 +275,14 @@ h2 {
   align-items: center;
 }
 .guide-nav a {
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: 13px;
   color: #666;
   text-decoration: none;
   transition: color 0.2s;
   white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 .guide-nav a:hover {
   color: #000;
@@ -229,7 +301,6 @@ h2 {
   font-size: 10px;
   font-weight: 500;
   transition: background 0.2s ease;
-  margin-left: auto;
   width: 50px;
   height: 50px;
   flex-shrink: 0;
@@ -352,6 +423,102 @@ h2 {
   overflow: auto;
 }
 
+/* ============================================
+   VARIABLES CSS — Grid de 3 columnas compacto
+   ============================================ */
+.guide-variables-grid {
+  column-count: 2;
+  column-gap: 2rem;
+  margin-top: 0;
+  font-family: var(--hg-typo-font-family-primary-regular);
+}
+@media (max-width: 720px) {
+  .guide-variables-grid { column-count: 1; }
+}
+.guide-variables-group {
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  margin: 0 0 1.5rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e9e9e9;
+  border-radius: 6px;
+  background: #fff;
+  display: block;
+}
+.guide-variables-group-title {
+  margin: 0 0 0.5rem;
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #737373;
+}
+.guide-variables-group-count {
+  color: #a9a9a9;
+  font-weight: 400;
+  margin-left: 0.25rem;
+}
+.guide-variables-group-list {
+  display: flex;
+  flex-direction: column;
+}
+.guide-variable-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid #efefef;
+  min-width: 0;
+  font-size: 0.72rem;
+}
+.guide-variables-group-list .guide-variable-item:last-child {
+  border-bottom: 0;
+}
+.guide-variable-item .guide-variable-name {
+  font-weight: 600;
+  color: #000;
+  word-break: break-all;
+  cursor: pointer;
+  line-height: 1.3;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.guide-variable-item .guide-variable-values {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 0.68rem;
+}
+.guide-variable-item .guide-variable-value {
+  color: #333;
+  cursor: pointer;
+  word-break: break-all;
+  max-width: 180px;
+}
+.guide-variable-item .guide-value-center-blue,
+.guide-variable-item .guide-value-center-orange {
+  cursor: pointer;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.guide-variable-item .guide-changed {
+  background: transparent;
+}
+.guide-variable-item .guide-variable-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 1px solid #e3e3e3;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
 .guide-table {
   width: 100%;
   border-collapse: collapse;
@@ -414,7 +581,12 @@ h2 {
   padding: 0.75rem;
   min-height: 50px;
   font-size: 1.5rem;
-  font-weight: 600;
+  /* 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
+     aquí anula la diferencia visual entre light / regular /
+     medium / semibold. */
+  font-weight: normal;
 }
 
 /* Rectángulo de lados afectados (tabla spacing modernas) */
@@ -507,12 +679,12 @@ h2 {
 .guide-layout-class-name {
   font-weight: 600;
   color: #000000;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
 }
 
 .guide-text-regular,
 .guide-table .guide-table-value {
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #333;
   font-size: 13px;
 }
@@ -522,7 +694,7 @@ h2 {
 .guide-table .guide-desktop-value,
 .guide-table .guide-value-center-blue {
   font-weight: 500;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #000000;
 }
 
@@ -530,7 +702,7 @@ h2 {
 .guide-layout-property,
 .guide-color-var-name,
 .guide-color-value {
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #666;
   font-size: 13px;
 }
@@ -554,7 +726,7 @@ h2 {
 
 .guide-table .guide-value-center-orange {
   font-weight: 500;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #cc6600;
 }
 
@@ -662,7 +834,7 @@ h2 {
 .guide-info-box-code-info {
   padding: 0.125rem 0.375rem;
   border-radius: 3px;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: 0.875rem;
 }
 
@@ -672,7 +844,7 @@ h2 {
   padding: 1rem;
   border-radius: 4px;
   overflow-x: auto;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: 12px;
   border-radius: 24px;
 	margin-bottom: 24px;
@@ -771,18 +943,18 @@ h2 {
    ============================================ */
 .guide-colors-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-  gap: 1.5rem;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  gap: 0.75rem;
   margin-top: 2rem;
   padding-inline: 0.5rem;
   padding-bottom: 2rem;
 }
 
-
-@media (min-width: 768px) {
-  .guide-colors-grid {
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  }
+@media (max-width: 1280px) {
+  .guide-colors-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+}
+@media (max-width: 720px) {
+  .guide-colors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
 
@@ -957,7 +1129,7 @@ h2 {
   position: absolute;
   font-size: 0.875rem;
   font-weight: 600;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #333;
   background: white;
   padding: 0.25rem 0.5rem;
@@ -1024,7 +1196,7 @@ h2 {
 }
 
 .guide-typeface-left {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -1189,7 +1361,7 @@ h2 {
 }
 
 .case-study-holygrail-title {
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--hg-typo-font-family-primary-light);
   font-size: clamp(2.5rem, 12vw, 8rem);
   font-weight: 100;
   letter-spacing: 0.2em;