anima-ds-nucleus 1.0.0

package/src/style.css

@@ -0,0 +1,721 @@
+@import "tailwindcss";
+
+/* Importar IBM Plex Sans y IBM Plex Mono desde Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+
+/* ============================================
+   CLASES TIPOGRÁFICAS GENÉRICAS PREDEFINIDAS
+   Basadas en Figma - Sistema Escalable
+   ============================================ */
+
+/* --- HEADINGS (H1-H6) - IBM Plex Sans --- */
+.text-h1 {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 2.5rem; /* 40px */
+  line-height: 3.75rem; /* 60px */
+  font-weight: 700; /* Bold */
+  letter-spacing: 0;
+}
+
+.text-h2 {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 2.25rem; /* 36px */
+  line-height: 3.375rem; /* 54px */
+  font-weight: 700; /* Bold */
+  letter-spacing: 0;
+}
+
+.text-h3 {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 2rem; /* 32px */
+  line-height: 3rem; /* 48px */
+  font-weight: 600; /* Semi Bold */
+  letter-spacing: 0;
+}
+
+.text-h4 {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1.75rem; /* 28px */
+  line-height: 2.625rem; /* 42px */
+  font-weight: 600; /* Semi Bold */
+  letter-spacing: 0;
+}
+
+.text-h5 {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1.5rem; /* 24px */
+  line-height: 2.25rem; /* 36px */
+  font-weight: 500; /* Medium */
+  letter-spacing: 0;
+}
+
+.text-h6 {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1.25rem; /* 20px */
+  line-height: 1.875rem; /* 30px */
+  font-weight: 500; /* Medium */
+  letter-spacing: 0;
+}
+
+/* --- BODY TEXT - IBM Plex Sans --- */
+.text-body-lg {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 0;
+}
+
+.text-body-md {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.3125rem; /* 21px */
+  font-weight: 400; /* Regular */
+  letter-spacing: -0.01em; /* -1% */
+}
+
+.text-body-sm {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.125rem; /* 18px */
+  font-weight: 400; /* Regular */
+  letter-spacing: -0.02em; /* -2% */
+}
+
+/* --- TEXT SIZES ADICIONALES --- */
+.text-xsm {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.125rem; /* 18px */
+}
+
+.text-xxsm {
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.5rem; /* 8px */
+  line-height: 0.75rem; /* 12px */
+}
+
+/* --- NUMBERS - IBM Plex Mono --- */
+.font-numbers {
+  font-family: 'IBM Plex Mono', monospace;
+}
+
+.text-numbers {
+  font-family: 'IBM Plex Mono', monospace;
+}
+
+/* --- COLORS GENÉRICOS (Clases utilitarias) --- */
+.color-black {
+  color: #111827; /* gray-900 */
+}
+
+.color-white {
+  color: #ffffff;
+}
+
+.color-gray-900 {
+  color: #111827;
+}
+
+.color-gray-700 {
+  color: #374151;
+}
+
+.color-gray-600 {
+  color: #4b5563;
+}
+
+.color-gray-500 {
+  color: #6b7280;
+}
+
+.color-gray-400 {
+  color: #9ca3af;
+}
+
+.color-red-600 {
+  color: #dc2626;
+}
+
+.color-red-500 {
+  color: #ef4444;
+}
+
+.color-blue-600 {
+  color: #2563eb;
+}
+
+.color-green-600 {
+  color: #16a34a;
+}
+
+.color-green-100 {
+  color: #dcfce7;
+}
+
+/* --- FONT WEIGHTS PERMITIDOS (según Figma) --- */
+.font-light {
+  font-weight: 300;
+}
+
+.font-regular {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+/* --- TEXT STYLES (según Figma: Normal, Italic) --- */
+.text-italic {
+  font-style: italic;
+}
+
+.text-normal {
+  font-style: normal;
+}
+
+/* ============================================
+   ESCALA DE ESPACIADOS (px a rem)
+   ============================================ */
+
+:root {
+  --space-160: 10rem;   /* 160px */
+  --space-96: 6rem;     /* 96px */
+  --space-80: 5rem;     /* 80px */
+  --space-64: 4rem;     /* 64px */
+  --space-48: 3rem;     /* 48px */
+  --space-40: 2.5rem;   /* 40px */
+  --space-32: 2rem;     /* 32px */
+  --space-24: 1.5rem;   /* 24px */
+  --space-16: 1rem;     /* 16px */
+  --space-12: 0.75rem;  /* 12px */
+  --space-8: 0.5rem;    /* 8px */
+  --space-4: 0.25rem;   /* 4px */
+  --space-2: 0.125rem;  /* 2px */
+}
+
+.space-w-160 { width: var(--space-160); }
+.space-h-160 { height: var(--space-160); }
+.space-160 { width: var(--space-160); height: var(--space-160); }
+
+.space-w-96 { width: var(--space-96); }
+.space-h-96 { height: var(--space-96); }
+.space-96 { width: var(--space-96); height: var(--space-96); }
+
+.space-w-80 { width: var(--space-80); }
+.space-h-80 { height: var(--space-80); }
+.space-80 { width: var(--space-80); height: var(--space-80); }
+
+.space-w-64 { width: var(--space-64); }
+.space-h-64 { height: var(--space-64); }
+.space-64 { width: var(--space-64); height: var(--space-64); }
+
+.space-w-48 { width: var(--space-48); }
+.space-h-48 { height: var(--space-48); }
+.space-48 { width: var(--space-48); height: var(--space-48); }
+
+.space-w-40 { width: var(--space-40); }
+.space-h-40 { height: var(--space-40); }
+.space-40 { width: var(--space-40); height: var(--space-40); }
+
+.space-w-32 { width: var(--space-32); }
+.space-h-32 { height: var(--space-32); }
+.space-32 { width: var(--space-32); height: var(--space-32); }
+
+.space-w-24 { width: var(--space-24); }
+.space-h-24 { height: var(--space-24); }
+.space-24 { width: var(--space-24); height: var(--space-24); }
+
+.space-w-16 { width: var(--space-16); }
+.space-h-16 { height: var(--space-16); }
+.space-16 { width: var(--space-16); height: var(--space-16); }
+
+.space-w-12 { width: var(--space-12); }
+.space-h-12 { height: var(--space-12); }
+.space-12 { width: var(--space-12); height: var(--space-12); }
+
+.space-w-8 { width: var(--space-8); }
+.space-h-8 { height: var(--space-8); }
+.space-8 { width: var(--space-8); height: var(--space-8); }
+
+.space-w-4 { width: var(--space-4); }
+.space-h-4 { height: var(--space-4); }
+.space-4 { width: var(--space-4); height: var(--space-4); }
+
+.space-w-2 { width: var(--space-2); }
+.space-h-2 { height: var(--space-2); }
+.space-2 { width: var(--space-2); height: var(--space-2); }
+
+.space-token {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #22c55e;
+  border-radius: 0.25rem;
+}
+
+.space-token-160 { width: var(--space-160); height: var(--space-160); }
+.space-token-96 { width: var(--space-96); height: var(--space-96); }
+.space-token-80 { width: var(--space-80); height: var(--space-80); }
+.space-token-64 { width: var(--space-64); height: var(--space-64); }
+.space-token-48 { width: var(--space-48); height: var(--space-48); }
+.space-token-40 { width: var(--space-40); height: var(--space-40); }
+.space-token-32 { width: var(--space-32); height: var(--space-32); }
+.space-token-24 { width: var(--space-24); height: var(--space-24); }
+.space-token-16 { width: var(--space-16); height: var(--space-16); }
+.space-token-12 { width: var(--space-12); height: var(--space-12); }
+.space-token-8 { width: var(--space-8); height: var(--space-8); }
+.space-token-4 { width: var(--space-4); height: var(--space-4); }
+.space-token-2 { width: var(--space-2); height: var(--space-2); }
+
+/* ============================================
+   RADIOS (Border Radius)
+   ============================================ */
+
+:root {
+  --radius-4: 0.25rem;   /* 4px */
+  --radius-8: 0.5rem;    /* 8px */
+  --radius-12: 0.75rem;  /* 12px */
+  --radius-16: 1rem;     /* 16px - Base */
+  --radius-24: 1.5rem;   /* 24px */
+  --radius-32: 2rem;     /* 32px */
+}
+
+/* Clases utilitarias para border-radius */
+.radius-4 {
+  border-radius: var(--radius-4);
+}
+
+.radius-8 {
+  border-radius: var(--radius-8);
+}
+
+.radius-12 {
+  border-radius: var(--radius-12);
+}
+
+.radius-16 {
+  border-radius: var(--radius-16);
+}
+
+.radius-24 {
+  border-radius: var(--radius-24);
+}
+
+.radius-32 {
+  border-radius: var(--radius-32);
+}
+
+/* Clase para visualización de tokens de radio */
+.radius-token {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #22c55e;
+}
+
+.radius-token-4 {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-4);
+}
+
+.radius-token-8 {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-8);
+}
+
+.radius-token-12 {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-12);
+}
+
+.radius-token-16 {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-16);
+}
+
+.radius-token-24 {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-24);
+}
+
+.radius-token-32 {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-32);
+}
+
+/* ============================================
+   SOMBRAS
+   ============================================ */
+
+.shadow {
+  box-shadow:
+    0px 15px 35px rgba(0, 0, 0, 0.06),
+    0px 5px 15px rgba(0, 51, 0, 0.08);
+  border-radius: 0.75rem;
+  background-color: #ffffff;
+}
+
+/* ============================================
+   GRID SYSTEM
+   ============================================ */
+
+/* Mobile Grid - Solo aplica en breakpoint Mobile (0-480px) */
+@media (min-width: var(--breakpoint-sm)) and (max-width: var(--breakpoint-sm-max)) {
+  /* Mobile Grid - 2 Columns */
+  .grid-mobile-2 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-mobile-2-columns), 1fr);
+    gap: var(--grid-mobile-2-gutter);
+    padding-left: var(--grid-mobile-2-margin);
+    padding-right: var(--grid-mobile-2-margin);
+  }
+
+  /* Mobile Grid - 3 Columns */
+  .grid-mobile-3 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-mobile-3-columns), 1fr);
+    gap: var(--grid-mobile-3-gutter);
+    padding-left: var(--grid-mobile-3-margin);
+    padding-right: var(--grid-mobile-3-margin);
+  }
+
+  /* Mobile Grid - 4 Columns */
+  .grid-mobile-4 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-mobile-4-columns), 1fr);
+    gap: var(--grid-mobile-4-gutter);
+    padding-left: var(--grid-mobile-4-margin);
+    padding-right: var(--grid-mobile-4-margin);
+  }
+
+  /* Mobile Grid - 8 Columns */
+  .grid-mobile-8 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-mobile-8-columns), 1fr);
+    gap: var(--grid-mobile-8-gutter);
+    padding-left: var(--grid-mobile-8-margin);
+    padding-right: var(--grid-mobile-8-margin);
+  }
+}
+
+/* Desktop Grid - Small/Medium (769px - 1440px) */
+@media (min-width: var(--breakpoint-base)) and (max-width: var(--breakpoint-base-max)) {
+  /* Desktop Grid - 2 Columns */
+  .grid-desktop-2 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-desktop-2-columns), 1fr);
+    gap: var(--grid-desktop-2-gutter);
+    padding-left: var(--grid-desktop-2-margin);
+    padding-right: var(--grid-desktop-2-margin);
+  }
+
+  /* Desktop Grid - 3 Columns */
+  .grid-desktop-3 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-desktop-3-columns), 1fr);
+    gap: var(--grid-desktop-3-gutter);
+    padding-left: var(--grid-desktop-3-margin);
+    padding-right: var(--grid-desktop-3-margin);
+  }
+
+  /* Desktop Grid - 4 Columns */
+  .grid-desktop-4 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-desktop-4-columns), 1fr);
+    gap: var(--grid-desktop-4-gutter);
+    padding-left: var(--grid-desktop-4-margin);
+    padding-right: var(--grid-desktop-4-margin);
+  }
+
+  /* Desktop Grid - 8 Columns */
+  .grid-desktop-8 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-desktop-8-columns), 1fr);
+    gap: var(--grid-desktop-8-gutter);
+    padding-left: var(--grid-desktop-8-margin);
+    padding-right: var(--grid-desktop-8-margin);
+  }
+}
+
+/* Desktop Grid - Large (1441px+) */
+@media (min-width: var(--breakpoint-lg)) {
+  /* Desktop Large Grid - 12 Columns */
+  .grid-desktop-lg-12 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-desktop-lg-12-columns), 1fr);
+    gap: var(--grid-desktop-lg-12-gutter);
+    padding-left: var(--grid-desktop-lg-12-margin);
+    padding-right: var(--grid-desktop-lg-12-margin);
+  }
+
+  /* Desktop Large Grid - 16 Columns */
+  .grid-desktop-lg-16 {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-desktop-lg-16-columns), 1fr);
+    gap: var(--grid-desktop-lg-16-gutter);
+    padding-left: var(--grid-desktop-lg-16-margin);
+    padding-right: var(--grid-desktop-lg-16-margin);
+  }
+}
+@theme {
+  /* Brand colors */
+  --color-brand: #56B676;
+  --color-brand-50: #EDF7F1;
+  --color-brand-100: #D0EAD8;
+  --color-brand-200: #B3DDBE;
+  --color-brand-300: #96D0A6;
+  --color-brand-400: #77C38E;
+  --color-brand-500: #56B676;
+  --color-brand-600: #47915F;
+  --color-brand-700: #376E49;
+  --color-brand-800: #294D34;
+  --color-brand-900: #1A2E20;
+
+  /* Main colors */
+  --color-main: #38656D;
+  --color-main-50: #EEF5F6;
+  --color-main-100: #D3DFE1;
+  --color-main-200: #D3DFE1;
+  --color-main-300: #9EB5B9;
+  --color-main-400: #84A0A5;
+  --color-main-500: #6B8C92;
+  --color-main-600: #52787F;
+  --color-main-700: #38656D;
+  --color-main-800: #29474C;
+  --color-main-900: #1B2B2E;
+  --color-main-950: #091011;
+
+  /* Secondary colors */
+  --color-secondary: #6D3856;
+  --color-secondary-50: #F6EEF3;
+  --color-secondary-100: #E2D2DB;
+  --color-secondary-200: #CEB7C3;
+  --color-secondary-300: #BB9CAC;
+  --color-secondary-400: #A78296;
+  --color-secondary-500: #946980;
+  --color-secondary-600: #80506B;
+  --color-secondary-700: #6D3856;
+  --color-secondary-800: #4C293D;
+  --color-secondary-900: #2E1B25;
+  --color-secondary-950: #11090D;
+
+  /* Tertiary colors */
+  --color-tertiary: #A06F11;
+  --color-tertiary-50: #FEF6E7;
+  --color-tertiary-100: #FBE5C5;
+  --color-tertiary-200: #F6D4A3;
+  --color-tertiary-300: #F0C382;
+  --color-tertiary-400: #E8B261;
+  --color-tertiary-500: #DEA23D;
+  --color-tertiary-600: #D4920A;
+  --color-tertiary-700: #A06F11;
+  --color-tertiary-800: #6E4D11;
+  --color-tertiary-900: #402E0E;
+  --color-tertiary-950: #181101;
+
+  /* Grey colors */
+  --color-grey-50: #F3F3F3;
+  --color-grey-100: #DDDDDD;
+  --color-grey-200: #C4C4C4;
+  --color-grey-300: #AAAAAA;
+  --color-grey-400: #919191;
+  --color-grey-500: #777777;
+  --color-grey-600: #5F5F5F;
+  --color-grey-700: #474747;
+  --color-grey-800: #303030;
+  --color-grey-900: #181818;
+  --color-grey-950: #0C0C0C;
+
+  /* Neutrals */
+  --color-neutrals-white: #FFF;
+  --color-neutrals-black: #000;
+
+  /* Info colors */
+  --color-info-50: #F0F3FC;
+  --color-info-100: #E1E7F9;
+  --color-info-200: #C4D0F3;
+  --color-info-300: #A6B8EE;
+  --color-info-400: #89A1E8;
+  --color-info-500: #6B89E2;
+  --color-info-600: #5873C2;
+  --color-info-700: #455DA2;
+  --color-info-800: #334681;
+  --color-info-900: #203061;
+  --color-info-950: #162551;
+
+  /* Status colors */
+  --color-status-error: #B30808;
+  --color-status-success: #0A742C;
+  --color-status-warning: #CC4908;
+  --color-status-state: #334681;
+
+  /* Breakpoints */
+  --breakpoint-sm: 0px;
+  --breakpoint-sm-max: 480px;
+  --breakpoint-md: 481px;
+  --breakpoint-md-max: 768px;
+  --breakpoint-base: 769px;
+  --breakpoint-base-max: 1440px;
+  --breakpoint-lg: 1441px;
+
+  /* Grid System - Mobile */
+  --grid-mobile-2-columns: 2;
+  --grid-mobile-2-margin: 1.25rem; /* 20px */
+  --grid-mobile-2-gutter: 1.25rem; /* 20px */
+
+  --grid-mobile-3-columns: 3;
+  --grid-mobile-3-margin: 1.25rem; /* 20px */
+  --grid-mobile-3-gutter: 1.25rem; /* 20px */
+
+  --grid-mobile-4-columns: 4;
+  --grid-mobile-4-margin: 1.25rem; /* 20px */
+  --grid-mobile-4-gutter: 1rem; /* 16px */
+
+  --grid-mobile-8-columns: 8;
+  --grid-mobile-8-margin: 1.25rem; /* 20px */
+  --grid-mobile-8-gutter: 0.75rem; /* 12px */
+
+  /* Grid System - Desktop (Small/Medium) */
+  /* Estandarizado: layouts amplios (2-4 cols) usan margin 64px y gutter 32px */
+  /* Layouts densos (8 cols) usan margin 32px y gutter 24px para aprovechar mejor el espacio */
+  --grid-desktop-2-columns: 2;
+  --grid-desktop-2-margin: 4rem; /* 64px */
+  --grid-desktop-2-gutter: 2rem; /* 32px */
+
+  --grid-desktop-3-columns: 3;
+  --grid-desktop-3-margin: 4rem; /* 64px */
+  --grid-desktop-3-gutter: 2rem; /* 32px */
+
+  --grid-desktop-4-columns: 4;
+  --grid-desktop-4-margin: 4rem; /* 64px - Estandarizado */
+  --grid-desktop-4-gutter: 2rem; /* 32px */
+
+  --grid-desktop-8-columns: 8;
+  --grid-desktop-8-margin: 2rem; /* 32px */
+  --grid-desktop-8-gutter: 1.5rem; /* 24px */
+
+  /* Grid System - Desktop (Large) */
+  --grid-desktop-lg-12-columns: 12;
+  --grid-desktop-lg-12-margin: 2rem; /* 32px */
+  --grid-desktop-lg-12-gutter: 1.25rem; /* 20px */
+
+  --grid-desktop-lg-16-columns: 16;
+  --grid-desktop-lg-16-margin: 2rem; /* 32px */
+  --grid-desktop-lg-16-gutter: 1.25rem; /* 20px */
+
+  /* Radius tokens */
+  --radius-4: 0.25rem;   /* 4px */
+  --radius-8: 0.5rem;    /* 8px */
+  --radius-12: 0.75rem;  /* 12px */
+  --radius-16: 1rem;     /* 16px - Base */
+  --radius-24: 1.5rem;   /* 24px */
+  --radius-32: 2rem;     /* 32px */
+}
+
+/* ============================================
+   Animación Charly (abeja IA Nucleus Labs)
+   Flotación suave en el header
+   ============================================ */
+
+@keyframes charly-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.charly-float {
+  animation: charly-float 3.5s ease-in-out infinite;
+}
+
+/* Animación de viaje de Bee desde el header hasta la sección central y regreso (trayectoria más natural, tipo abeja) */
+@keyframes bee-travel {
+  0% {
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+  }
+  12% {
+    transform: translate3d(50px, -6px, 0) rotate(-8deg) scale(1.02);
+  }
+  24% {
+    transform: translate3d(110px, 26px, 0) rotate(6deg) scale(1.04);
+  }
+  38% {
+    transform: translate3d(170px, 70px, 0) rotate(-10deg) scale(1.07);
+  }
+  52% {
+    /* Punto más lejano, cerca de "Bienvenido a Anima DS" */
+    transform: translate3d(230px, 120px, 0) rotate(5deg) scale(1.1);
+  }
+  66% {
+    transform: translate3d(180px, 85px, 0) rotate(-6deg) scale(1.06);
+  }
+  80% {
+    transform: translate3d(90px, 30px, 0) rotate(3deg) scale(1.03);
+  }
+  100% {
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+  }
+}
+
+.bee-travel {
+  animation: bee-travel 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+}
+
+/* Flotación sutil durante el viaje */
+@keyframes bee-travel-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.bee-travel-inner {
+  animation: bee-travel-float 0.8s ease-in-out infinite;
+}
+
+/* ============================================
+   Fondo de panal tenue para el header
+   ============================================ */
+
+.header-honeycomb {
+  position: relative;
+  overflow: hidden;
+}
+
+.header-honeycomb::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='140' height='120' viewBox='0 0 140 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='0.7' stroke-opacity='0.45'%3E%3Cpath d='M20 10 L35 10 L43 24 L35 38 L20 38 L12 24 Z'/%3E%3Cpath d='M48 10 L63 10 L71 24 L63 38 L48 38 L40 24 Z'/%3E%3Cpath d='M76 10 L91 10 L99 24 L91 38 L76 38 L68 24 Z'/%3E%3Cpath d='M34 38 L49 38 L57 52 L49 66 L34 66 L26 52 Z'/%3E%3Cpath d='M62 38 L77 38 L85 52 L77 66 L62 66 L54 52 Z'/%3E%3Cpath d='M90 38 L105 38 L113 52 L105 66 L90 66 L82 52 Z'/%3E%3Cpath d='M20 66 L35 66 L43 80 L35 94 L20 94 L12 80 Z'/%3E%3Cpath d='M48 66 L63 66 L71 80 L63 94 L48 94 L40 80 Z'/%3E%3Cpath d='M76 66 L91 66 L99 80 L91 94 L76 94 L68 80 Z'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: 140px 120px;
+  background-position: center;
+  mix-blend-mode: soft-light;
+  opacity: 0.85;
+}