oraculo-ui 0.1.7 → 0.1.9

package/dist/OraculoSeccionDestacados-WQX2GQNY.css

@@ -0,0 +1,397 @@
+/* src/atoms/OraculoButton/OraculoButton.css */
+.orc-btn {
+  --nl-green: #9EE86E;
+  --nl-hover-hex: #D9F6C6;
+  --nl-hover-alpha: .22;
+  --nl-press: #254B0C;
+  --nl-disabled-border: #4a5542;
+  --nl-disabled-fg: #4a5542;
+  --stroke-w: 1.5px;
+  --h: 32px;
+  --pad-x: 12px;
+  --pad-y: 8px;
+  --radius: 12px;
+  box-sizing: border-box;
+  height: var(--h);
+  font-family: var(--clmc-font);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  text-decoration: none;
+  border-radius: var(--radius);
+  outline: none;
+  position: relative;
+  padding: var(--pad-y) var(--pad-x);
+  border: 0;
+}
+.orc-btn__label {
+  color: currentColor;
+  font-size: 14px;
+}
+.orc-btn__icon {
+  color: currentColor;
+  display: inline-flex;
+  line-height: 0;
+  font-size: 18px;
+}
+.orc-btn--primary {
+  background: var(--nl-green);
+  color: #1C1C1C;
+  box-shadow: inset 0 0 0 var(--stroke-w) transparent;
+}
+.orc-btn--primary:hover {
+  background: var(--nl-hover-hex);
+  color: #1C1C1C;
+}
+.orc-btn--primary:active {
+  background: var(--nl-press);
+  color: #FFFFFF;
+  transform: translateY(1px);
+}
+.orc-btn--primary:disabled,
+.orc-btn--primary[aria-disabled=true] {
+  background: transparent;
+  color: var(--nl-disabled-fg);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
+  cursor: not-allowed;
+  transform: none;
+  opacity: 1;
+}
+.orc-btn--secondary {
+  background: transparent;
+  color: var(--nl-green);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green);
+}
+.orc-btn--secondary:hover {
+  background: rgba(229, 244, 219, var(--nl-hover-alpha)) !important;
+  color: var(--nl-hover-hex);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-hover-hex);
+}
+.orc-btn--secondary:active {
+  transform: translateY(1px);
+  color: var(--nl-press);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-press);
+  background: rgba(37, 75, 12, 0.10);
+}
+.orc-btn--secondary:focus-visible {
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green), 0 0 0 3px rgba(197, 228, 177, .45);
+}
+.orc-btn--secondary:disabled,
+.orc-btn--secondary[aria-disabled=true] {
+  background: transparent;
+  color: var(--nl-disabled-fg);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
+  cursor: not-allowed;
+}
+.orc-btn--tertiary {
+  background: transparent;
+  color: var(--nl-green);
+  box-shadow: none;
+}
+.orc-btn--tertiary:hover {
+  color: var(--nl-hover-hex);
+}
+.orc-btn--tertiary:active {
+  color: var(--nl-press);
+  background: rgba(37, 75, 12, 0.08);
+  transform: translateY(1px);
+}
+.orc-btn--tertiary:focus-visible {
+  box-shadow: 0 0 0 3px rgba(197, 228, 177, .45);
+}
+.orc-btn--tertiary:disabled,
+.orc-btn--tertiary[aria-disabled=true] {
+  color: var(--nl-disabled-fg);
+  background: transparent;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.orc-btn--sm {
+  --h: 32px;
+  --pad-y: 8px;
+  --pad-x: 12px;
+  --radius: 12px;
+}
+.orc-btn--md {
+  --h: 40px;
+  --pad-y: 10px;
+  --pad-x: 16px;
+  --radius: 12px;
+}
+.orc-btn--lg {
+  --h: 48px;
+  --pad-y: 12px;
+  --pad-x: 20px;
+  --radius: 16px;
+}
+.orc-btn--sm .orc-btn__label,
+.orc-btn--md .orc-btn__label,
+.orc-btn--lg .orc-btn__label {
+  font-size: 14px !important;
+}
+.orc-btn--iconOnly {
+  width: 40px;
+  min-width: 40px;
+  padding: 0;
+}
+.orc-btn--sm.orc-btn--iconOnly {
+  width: 32px;
+  min-width: 32px;
+}
+.orc-btn--md.orc-btn--iconOnly {
+  width: 40px;
+  min-width: 40px;
+}
+.orc-btn--lg.orc-btn--iconOnly {
+  width: 48px;
+  min-width: 48px;
+}
+.orc-btn--full {
+  width: 100%;
+}
+.orc-btn--fullHeight {
+  height: 100%;
+}
+
+/* src/atoms/OraculoSectionTitle/OraculoSectionTitle.css */
+.orc-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.orc-section-title__icon {
+  width: 40px;
+  height: 40px;
+  object-fit: none;
+}
+.orc-section-title__title {
+  margin: 0;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: #ffffff;
+}
+.orc-section-title--xs .orc-section-title__title {
+  font-size: 14px;
+  line-height: 18px;
+}
+.orc-section-title--sm .orc-section-title__title {
+  font-size: 18px;
+  line-height: 24px;
+}
+.orc-section-title--md .orc-section-title__title {
+  font-size: 32px;
+  line-height: 48px;
+}
+.orc-section-title--lg .orc-section-title__title {
+  font-size: 22px;
+  line-height: 30px;
+}
+.orc-section-title--xs .orc-section-title__icon {
+  width: 24px;
+  height: 24px;
+}
+@media (max-width: 768px) {
+  .orc-section-title__icon {
+    width: 24px;
+    height: 24px;
+  }
+  .orc-section-title--xs .orc-section-title__title {
+    font-size: 14px;
+    line-height: 18px;
+  }
+  .orc-section-title--sm .orc-section-title__title {
+    font-size: 16px;
+    line-height: 22px;
+  }
+  .orc-section-title--md .orc-section-title__title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .orc-section-title--lg .orc-section-title__title {
+    font-size: 20px;
+    line-height: 26px;
+  }
+}
+
+/* src/atoms/OraculoCarouselDots/OraculoCarouselDots.css */
+.orc-dots {
+  --dot-size: 8px;
+  --dot-cell: 20px;
+  --dot-active-h: 8px;
+  --dot-active-w: 20px;
+  --dot-bg: #ffffff;
+  --dot-surface: #ffffff;
+  --dot-accent: #9EE86E;
+  display: flex;
+  gap: 0px;
+  justify-content: center;
+  margin-top: 10px;
+}
+.orc-dots__cell {
+  width: var(--dot-cell);
+  display: inline-flex;
+  justify-content: center;
+}
+.orc-dots__dot {
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 9999px;
+  background: var(--dot-bg);
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+  transition:
+    transform .15s ease,
+    background .15s ease,
+    width .2s ease,
+    height .2s ease;
+}
+.orc-dots__dot:hover {
+  transform: scale(1.06);
+}
+.orc-dots__dot--active {
+  width: var(--dot-active-w);
+  height: var(--dot-active-h);
+  border-radius: 9999px;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+}
+.orc-dots__dot--active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 40%;
+  background: var(--dot-accent);
+  border-radius: inherit;
+}
+.orc-dots__dot--active {
+  outline: 0;
+  outline-offset: 0;
+}
+.orc-dots__dot:focus-visible {
+  outline: 2px solid var(--dot-accent);
+  outline-offset: 2px;
+}
+
+/* src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.css */
+.orc-co-wrap {
+  --orc-co-art-w: 887px;
+  --orc-co-art-h: 510px;
+  --orc-co-text: #ffffff;
+  --orc-co-art-left: clamp(120px, 18vw, 280px);
+  --orc-co-art-top: 20px;
+  --orc-co-logo-left: 163px;
+  --orc-co-logo-top: 120px;
+  --orc-co-logo-w: 220px;
+  --orc-co-content-left: 120px;
+  --orc-co-content-top: 290px;
+  min-height: var(--orc-co-minH, 520px);
+  position: relative;
+}
+.orc-co-fullBleed {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+.orc-co-bottom {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 20px;
+  z-index: 2;
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  border-radius: 12px;
+}
+.orc-co-caption {
+  color: var(--orc-co-text);
+  font-size: 14px;
+  text-align: center;
+  font-weight: 400;
+  text-wrap: balance;
+  line-height: 1.4;
+}
+.orc-co-bgMobile {
+  position: relative;
+  width: 100%;
+  min-height: 360px;
+  overflow: hidden;
+}
+.orc-co-bgMobileImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.orc-co-bgDesktop,
+.orc-co-logo,
+.orc-co-desktopContent {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .orc-co-bgMobile {
+    display: none;
+  }
+  .orc-co-bottom {
+    display: none;
+  }
+  .orc-co-bgDesktop {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: block;
+  }
+  .orc-co-bgDesktop > .orc-co-fillHost {
+    position: absolute;
+    width: var(--orc-co-art-w);
+    height: var(--orc-co-art-h);
+    top: var(--orc-co-art-top);
+    left: var(--orc-co-art-left);
+  }
+  .orc-co-bgDesktopImg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .orc-co-logo {
+    display: block;
+    position: absolute;
+    left: var(--orc-co-logo-left);
+    top: var(--orc-co-logo-top);
+    width: var(--orc-co-logo-w);
+    aspect-ratio: 3 / 2;
+    z-index: 2;
+  }
+  .orc-co-logoImg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+  .orc-co-desktopContent {
+    display: grid;
+    position: absolute;
+    left: var(--orc-co-content-left);
+    top: var(--orc-co-content-top);
+    gap: 16px;
+    justify-items: center;
+    text-align: center;
+    z-index: 2;
+  }
+  .orc-co-captionDesktop {
+    margin: 0;
+    color: var(--orc-co-text);
+    font-family: var(--clmc-font, inherit);
+    font-weight: 400;
+    font-size: clamp(14px, 1.5vw, 18px);
+    max-width: 28ch;
+    text-wrap: balance;
+  }
+}

package/dist/OraculoSeccionTopJuegos-3AR4L7SZ.css

@@ -0,0 +1,59 @@
+/* src/atoms/OraculoSectionTitle/OraculoSectionTitle.css */
+.orc-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.orc-section-title__icon {
+  width: 40px;
+  height: 40px;
+  object-fit: none;
+}
+.orc-section-title__title {
+  margin: 0;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: #ffffff;
+}
+.orc-section-title--xs .orc-section-title__title {
+  font-size: 14px;
+  line-height: 18px;
+}
+.orc-section-title--sm .orc-section-title__title {
+  font-size: 18px;
+  line-height: 24px;
+}
+.orc-section-title--md .orc-section-title__title {
+  font-size: 32px;
+  line-height: 48px;
+}
+.orc-section-title--lg .orc-section-title__title {
+  font-size: 22px;
+  line-height: 30px;
+}
+.orc-section-title--xs .orc-section-title__icon {
+  width: 24px;
+  height: 24px;
+}
+@media (max-width: 768px) {
+  .orc-section-title__icon {
+    width: 24px;
+    height: 24px;
+  }
+  .orc-section-title--xs .orc-section-title__title {
+    font-size: 14px;
+    line-height: 18px;
+  }
+  .orc-section-title--sm .orc-section-title__title {
+    font-size: 16px;
+    line-height: 22px;
+  }
+  .orc-section-title--md .orc-section-title__title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .orc-section-title--lg .orc-section-title__title {
+    font-size: 20px;
+    line-height: 26px;
+  }
+}

package/dist/OraculoSeccionTopJuegos-FZUYQEMC.mjs

@@ -0,0 +1,8 @@
+import {
+  OraculoSeccionTopJuegos
+} from "./chunk-DKP3HTEP.mjs";
+import "./chunk-5GTDKE3I.mjs";
+import "./chunk-VIPLL6XT.mjs";
+export {
+  OraculoSeccionTopJuegos as default
+};

package/dist/OraculoSeccionVirtuales-MGW5X23B.mjs

@@ -0,0 +1,11 @@
+import {
+  OraculoSeccionVirtuales_default
+} from "./chunk-YY5T37WR.mjs";
+import "./chunk-AIT7B2J3.mjs";
+import "./chunk-5GTDKE3I.mjs";
+import "./chunk-VHW77D2M.mjs";
+import "./chunk-IJQLK4NO.mjs";
+import "./chunk-VIPLL6XT.mjs";
+export {
+  OraculoSeccionVirtuales_default as default
+};

package/dist/OraculoSeccionVirtuales-OP2CSKUP.css

@@ -0,0 +1,216 @@
+/* src/atoms/OraculoSectionTitle/OraculoSectionTitle.css */
+.orc-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.orc-section-title__icon {
+  width: 40px;
+  height: 40px;
+  object-fit: none;
+}
+.orc-section-title__title {
+  margin: 0;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: #ffffff;
+}
+.orc-section-title--xs .orc-section-title__title {
+  font-size: 14px;
+  line-height: 18px;
+}
+.orc-section-title--sm .orc-section-title__title {
+  font-size: 18px;
+  line-height: 24px;
+}
+.orc-section-title--md .orc-section-title__title {
+  font-size: 32px;
+  line-height: 48px;
+}
+.orc-section-title--lg .orc-section-title__title {
+  font-size: 22px;
+  line-height: 30px;
+}
+.orc-section-title--xs .orc-section-title__icon {
+  width: 24px;
+  height: 24px;
+}
+@media (max-width: 768px) {
+  .orc-section-title__icon {
+    width: 24px;
+    height: 24px;
+  }
+  .orc-section-title--xs .orc-section-title__title {
+    font-size: 14px;
+    line-height: 18px;
+  }
+  .orc-section-title--sm .orc-section-title__title {
+    font-size: 16px;
+    line-height: 22px;
+  }
+  .orc-section-title--md .orc-section-title__title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .orc-section-title--lg .orc-section-title__title {
+    font-size: 20px;
+    line-height: 26px;
+  }
+}
+
+/* src/atoms/OraculoButton/OraculoButton.css */
+.orc-btn {
+  --nl-green: #9EE86E;
+  --nl-hover-hex: #D9F6C6;
+  --nl-hover-alpha: .22;
+  --nl-press: #254B0C;
+  --nl-disabled-border: #4a5542;
+  --nl-disabled-fg: #4a5542;
+  --stroke-w: 1.5px;
+  --h: 32px;
+  --pad-x: 12px;
+  --pad-y: 8px;
+  --radius: 12px;
+  box-sizing: border-box;
+  height: var(--h);
+  font-family: var(--clmc-font);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  text-decoration: none;
+  border-radius: var(--radius);
+  outline: none;
+  position: relative;
+  padding: var(--pad-y) var(--pad-x);
+  border: 0;
+}
+.orc-btn__label {
+  color: currentColor;
+  font-size: 14px;
+}
+.orc-btn__icon {
+  color: currentColor;
+  display: inline-flex;
+  line-height: 0;
+  font-size: 18px;
+}
+.orc-btn--primary {
+  background: var(--nl-green);
+  color: #1C1C1C;
+  box-shadow: inset 0 0 0 var(--stroke-w) transparent;
+}
+.orc-btn--primary:hover {
+  background: var(--nl-hover-hex);
+  color: #1C1C1C;
+}
+.orc-btn--primary:active {
+  background: var(--nl-press);
+  color: #FFFFFF;
+  transform: translateY(1px);
+}
+.orc-btn--primary:disabled,
+.orc-btn--primary[aria-disabled=true] {
+  background: transparent;
+  color: var(--nl-disabled-fg);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
+  cursor: not-allowed;
+  transform: none;
+  opacity: 1;
+}
+.orc-btn--secondary {
+  background: transparent;
+  color: var(--nl-green);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green);
+}
+.orc-btn--secondary:hover {
+  background: rgba(229, 244, 219, var(--nl-hover-alpha)) !important;
+  color: var(--nl-hover-hex);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-hover-hex);
+}
+.orc-btn--secondary:active {
+  transform: translateY(1px);
+  color: var(--nl-press);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-press);
+  background: rgba(37, 75, 12, 0.10);
+}
+.orc-btn--secondary:focus-visible {
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-green), 0 0 0 3px rgba(197, 228, 177, .45);
+}
+.orc-btn--secondary:disabled,
+.orc-btn--secondary[aria-disabled=true] {
+  background: transparent;
+  color: var(--nl-disabled-fg);
+  box-shadow: inset 0 0 0 var(--stroke-w) var(--nl-disabled-border);
+  cursor: not-allowed;
+}
+.orc-btn--tertiary {
+  background: transparent;
+  color: var(--nl-green);
+  box-shadow: none;
+}
+.orc-btn--tertiary:hover {
+  color: var(--nl-hover-hex);
+}
+.orc-btn--tertiary:active {
+  color: var(--nl-press);
+  background: rgba(37, 75, 12, 0.08);
+  transform: translateY(1px);
+}
+.orc-btn--tertiary:focus-visible {
+  box-shadow: 0 0 0 3px rgba(197, 228, 177, .45);
+}
+.orc-btn--tertiary:disabled,
+.orc-btn--tertiary[aria-disabled=true] {
+  color: var(--nl-disabled-fg);
+  background: transparent;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.orc-btn--sm {
+  --h: 32px;
+  --pad-y: 8px;
+  --pad-x: 12px;
+  --radius: 12px;
+}
+.orc-btn--md {
+  --h: 40px;
+  --pad-y: 10px;
+  --pad-x: 16px;
+  --radius: 12px;
+}
+.orc-btn--lg {
+  --h: 48px;
+  --pad-y: 12px;
+  --pad-x: 20px;
+  --radius: 16px;
+}
+.orc-btn--sm .orc-btn__label,
+.orc-btn--md .orc-btn__label,
+.orc-btn--lg .orc-btn__label {
+  font-size: 14px !important;
+}
+.orc-btn--iconOnly {
+  width: 40px;
+  min-width: 40px;
+  padding: 0;
+}
+.orc-btn--sm.orc-btn--iconOnly {
+  width: 32px;
+  min-width: 32px;
+}
+.orc-btn--md.orc-btn--iconOnly {
+  width: 40px;
+  min-width: 40px;
+}
+.orc-btn--lg.orc-btn--iconOnly {
+  width: 48px;
+  min-width: 48px;
+}
+.orc-btn--full {
+  width: 100%;
+}
+.orc-btn--fullHeight {
+  height: 100%;
+}