blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-NineCanvas/canvas/canvas-panels.css

@@ -0,0 +1,889 @@
+/* ==========================================================================
+   CSS Custom Properties
+   ========================================================================== */
+
+:root {
+  --canvas-transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
+  --viewport-width: 100vw;
+  --viewport-height: 100vh;
+
+  /* Radial colors */
+  --radial-bg-gradient: linear-gradient(#18181b80, #08080a80);
+  --radial-active-bg: linear-gradient(#2b103f, #0c0b10);
+  --radial-border-color: #ffffff52;
+  --radial-border-hover: #ffffff80;
+  --radial-outline-color: #80808080;
+  --radial-glow: #9803e2;
+
+  /* Typography */
+  --font-display: Impact, Haettenschweiler, 'Arial Black', 'Arial Narrow Bold', sans-serif;
+}
+
+/* ==========================================================================
+   Canvas Root & Track
+   ========================================================================== */
+
+.hzCanvasRoot {
+  position: relative;
+  z-index: 10;
+  width: var(--viewport-width);
+  height: var(--viewport-height);
+  overflow: hidden;
+  background: transparent;
+  color: #f5f2ff;
+}
+
+.hzCanvasTrack {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  transition: var(--canvas-transition);
+}
+
+/* Canvas track positions using CSS Grid logic (3×3 matrix) */
+.hzCanvasTrack--canvas_01 {
+  transform: translate(100vw, 100vh);
+}
+
+.hzCanvasTrack--canvas_02 {
+  transform: translate(0, 100vh);
+}
+
+.hzCanvasTrack--canvas_03 {
+  transform: translate(-100vw, 100vh);
+  left: -0.5rem;
+}
+
+.hzCanvasTrack--canvas_04 {
+  transform: translate(100vw, 0);
+}
+
+.hzCanvasTrack--canvas_05 {
+  transform: translate(0, 0);
+}
+
+.hzCanvasTrack--canvas_06 {
+  transform: translate(-100vw, 0);
+}
+
+.hzCanvasTrack--canvas_07 {
+  transform: translate(100vw, -100vh);
+}
+
+.hzCanvasTrack--canvas_08 {
+  transform: translate(0, -100vh);
+}
+
+.hzCanvasTrack--canvas_09 {
+  transform: translate(-100vw, -100vh);
+}
+
+/* ==========================================================================
+   Canvas Panel & Content
+   ========================================================================== */
+
+.hzCanvasPanel {
+  position: absolute;
+  width: var(--viewport-width);
+  height: var(--viewport-height);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Panel X-axis positioning */
+.hzCanvasPanel--x-neg1 {
+  left: -100vw;
+}
+
+.hzCanvasPanel--x-0 {
+  left: 0;
+}
+
+.hzCanvasPanel--x-pos1 {
+  left: 100vw;
+}
+
+/* Panel Y-axis positioning */
+.hzCanvasPanel--y-neg1 {
+  top: 100vh;
+}
+
+.hzCanvasPanel--y-0 {
+  top: 0;
+}
+
+.hzCanvasPanel--y-pos1 {
+  top: -100vh;
+}
+
+/* Active panel scroll modifications */
+.hzCanvasPanel--active {
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.hzCanvasContent {
+  width: var(--viewport-width);
+  height: var(--viewport-height);
+  overflow-x: clip;
+  overflow-y: auto;
+  position: relative;
+  min-height: 0;
+  scrollbar-gutter: auto;
+  /* scrollbar-gutter: stable; */
+}
+
+.hzCanvasContent,
+.hzCanvasPanel--active .hzCanvasContent {
+  overscroll-behavior: contain;
+}
+
+.hzCanvasPanel--active .hzCanvasContent {
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  touch-action: auto;
+  pointer-events: auto;
+}
+
+.hzCanvasContent .renderblock-container {
+  border: 2px solid var(--dd-300);
+  width: calc(100% - 1rem);
+  height: calc(100% - 1rem);
+  max-height: 100%;
+  box-shadow: var(--shadow-3xl);
+  corner-shape: squircle;
+  border-radius: 3rem;
+  margin: auto;
+  top: 1%;
+  left: 0;
+  right: 0;
+  overflow: auto clip;
+  background: var(--background-dark);
+
+  @supports not (corner-shape: squircle) {
+    border-radius: 1rem;
+    overflow: auto clip;
+  }
+}
+
+/* ==========================================================================
+   Canvas Offset
+   ========================================================================== */
+
+.hzCanvasContent section:nth-child(1) {
+  margin-bottom: 1rem;
+}
+
+.hzCanvasContent section:nth-child(n + 2) {
+  top: -0.5rem;
+  margin-top: 2rem;
+}
+
+/* ==========================================================================
+   Canvas Empty State
+   ========================================================================== */
+
+.hzCanvasEmpty {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 2rem;
+  font-family: var(--font-display);
+  font-size: clamp(4rem, 15vw, 14rem);
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  line-height: 0.82;
+  color: transparent;
+  -webkit-text-stroke: 1.6px rgba(255, 255, 255, 0.55);
+  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* ==========================================================================
+   Radial Navigation Root
+   ========================================================================== */
+
+.hzRadialRoot {
+  position: fixed;
+  bottom: 1rem;
+  left: 0;
+  right: 0;
+  z-index: 180;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90px;
+  height: 55px;
+  margin: auto;
+  background: 0 0;
+  border-radius: 999px;
+  outline: none;
+  transform-origin: bottom;
+  background: var(--color-base);
+}
+
+.hzRadialNavIsOpen {
+  width: 150px;
+  height: 75px;
+  filter: drop-shadow(2px 4px 16px #0c0b10b1) brightness(1.2);
+  background: #0c0b10;
+  box-shadow: 0px 0px 64px 8px #0c0b10b1;
+  transition: all 0.2s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .hzRadialRoot:hover {
+    width: 150px;
+    height: 75px;
+    filter: drop-shadow(2px 4px 16px #0c0b10b1) brightness(1.2);
+    background: #0c0b10;
+    box-shadow: 0px 0px 64px 8px #0c0b10b1;
+    transition: all 0.2s;
+  }
+}
+
+/* .hzRadialNavIsOpen .hzCanvasContent .renderblock-container,
+.hzRadialRoot:hover~.hzCanvasContent .renderblock-container {
+  filter: brightness(0.5);
+} */
+.hzCanvasPanel {
+  filter: brightness(1) blur(0);
+  transition: all 0.3s;
+}
+
+body.hasRadialNavOpen .hzCanvasPanel {
+  filter: brightness(0.5) blur(4px);
+  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2);
+  transition: all 0.3s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  body:has(.hzRadialRoot:hover) .hzCanvasPanel {
+    filter: brightness(0.5) blur(4px);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.2);
+    transition: all 0.3s;
+  }
+}
+
+.radialNav-notification {
+  display: none;
+}
+
+.hzRadialNavIsOpen .radialNav-notification {
+  display: flex;
+  position: fixed;
+  top: -100vh;
+
+  @media (max-width: 768px) {
+    transform-origin: center;
+    width: 100vw;
+    min-width: 100vw;
+    margin: 0;
+    padding: 2rem;
+    position: relative;
+    top: -60vh;
+    left: 40vw;
+    right: 0;
+    scale: 0.8;
+  }
+}
+
+/* ==========================================================================
+   Radial Backdrop
+   ========================================================================== */
+
+.hzRadialBackdrop {
+  position: absolute;
+  inset: 0;
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+  background: var(--radial-bg-gradient);
+  border: 1px solid var(--radial-border-color);
+  border-radius: 999px;
+  outline: 0.5rem solid rgba(45, 38, 75, 0.5);
+  outline-offset: 2px;
+  transition: all 0.6s;
+}
+
+/* Backdrop hover & active states */
+:is(.hzRadialBackdrop:hover, .hzRadialRoot:has(.hzRadialItem:hover) .hzRadialBackdrop) {
+  outline: 1px solid var(--radial-outline-color);
+  outline-offset: 8px;
+  border: 1px solid var(--radial-border-hover);
+  background: var(--radial-bg-gradient);
+}
+
+:is(
+  .hzRadialBackdrop:hover,
+  .hzRadialRoot:has(.hzRadialCenterButton) .hzRadialCenterButton--active
+),
+:is(.hzRadialBackdrop:hover, .hzRadialRoot:has(.hzRadialCenterButton) .hzRadialCenterButton) {
+  border: 0px solid #ffffff4d;
+  background: transparent;
+  box-shadow: var(--shadow-xl);
+}
+
+/* ==========================================================================
+   Hamburger Morph into CustomHomeIcon
+   ========================================================================== */
+.hzRadialCenterButton {
+  overflow: visible;
+}
+
+.hzRadialCenterButtonIcon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.hzRadialCenterButtonIcon:hover {
+  transform: rotate(0deg) !important;
+}
+
+.hzMorphIcon {
+  position: relative;
+  display: block;
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+}
+
+.hzMorphIconLayer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  transition:
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+    visibility 0.3s;
+}
+
+.hzMorphIconLayer svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+  max-width: 24px;
+  max-height: 24px;
+  transform: none !important;
+}
+
+.hzMorphIconLayer--hamburger {
+  opacity: 1;
+  visibility: visible;
+  transform: rotate(0deg) scale(1);
+}
+
+.hzMorphIconLayer--home {
+  opacity: 0;
+  visibility: hidden;
+  transform: rotate(-90deg) scale(1.2);
+}
+
+.hzMorphIcon--active .hzMorphIconLayer--hamburger {
+  opacity: 0;
+  visibility: hidden;
+  transform: rotate(90deg) scale(0.6);
+}
+
+.hzMorphIcon--active .hzMorphIconLayer--home {
+  opacity: 1;
+  visibility: visible;
+  transform: rotate(0deg) scale(1.2);
+}
+
+.hzMorphIconHamburger line {
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.15s ease,
+    stroke 0.3s ease;
+  transform-origin: center;
+}
+
+.hzRadialCenterButton:hover .hzMorphIcon--active .hzMorphIconLayer--home {
+  transform: rotate(0deg) scale(1.35);
+}
+
+.hzRadialCenterButton:hover .hzMorphIconHamburger line {
+  stroke: #ffffff;
+}
+
+/* ==========================================================================
+   Radial Items
+   ========================================================================== */
+
+.hzRadialItem {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 10px;
+  color: aliceblue;
+  background: #121216;
+  border: 1px solid var(--radial-border-hover);
+  border-radius: 999px;
+  outline: 0 solid var(--radial-outline-color);
+  filter: brightness(1.1);
+  scale: 1.1;
+  outline-offset: 0;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  transform: translate(-50%, -50%);
+  transition:
+    outline 0.2s,
+    outline-offset 0.3s,
+    background 0.3s,
+    border-color 0.3s,
+    filter 0.3s;
+  z-index: 999;
+}
+
+.hzRadialItem:hover {
+  outline: 3px solid var(--radial-outline-color);
+  outline-offset: 1px;
+}
+
+/* Active radial item states */
+.hzRadialItem--active {
+  outline: 2px solid #9803e266;
+  outline-offset: 1px;
+  transition: all 0.3s;
+}
+
+.hzRadialItem--active:hover {
+  pointer-events: none !important;
+  z-index: 50 !important;
+}
+
+.hzRadialItem--closed {
+  pointer-events: none;
+}
+
+/* Active item label adjustments */
+.hzRadialItem--active .hzRadialItemLabel,
+.hzRadialItem--active.hzRadialItem--id-8 .hzRadialItemLabel {
+  font-size: large;
+  font-weight: 400;
+  line-height: normal;
+  position: relative;
+  top: -1px;
+}
+
+.hzRadialItemLabel {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.hzRadialRoot:not(.hzRadialNavIsOpen) .hzRadialItem--active {
+  opacity: 0 !important;
+  scale: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Item ID-specific active margins */
+/* .hzRadialItem--active.hzRadialItem--id-2 {
+  margin-top: -1rem;
+  margin-left: calc(-40% - 0rem);
+}
+
+.hzRadialItem--active.hzRadialItem--id-7 {
+  margin-top: -8rem;
+  margin-left: calc(40% - 2.5rem);
+}
+
+.hzRadialItem--active.hzRadialItem--id-8 {
+  margin-top: -11rem;
+  margin-left: -40%;
+}
+
+.hzRadialItem--active.hzRadialItem--id-9 {
+  margin-top: -8rem;
+  margin-left: calc(-40% - 4.5rem);
+} */
+
+/* Default ID-8 positioning */
+.hzRadialItem--id-8 {
+  margin-left: -5px;
+  margin-top: -3rem;
+}
+
+/* ==========================================================================
+   Tooltip-related Hiding Behavior
+   ========================================================================== */
+
+/* div[data-slot="tooltip-portal"]:hover,
+.hzRadialRoot:hover .hzRadialItem--active,
+.hzRadialRoot:has(.hzTooltipPanel:hover) .hzRadialItem--active {
+  opacity: 0 !important;
+  margin-top: 100vh;
+  scale: 0;
+  pointer-events: none !important;
+  transition: all 0.3s;
+} */
+
+/* ==========================================================================
+   Radial Center Button
+   ========================================================================== */
+
+.hzRadialCenterButton {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 46px;
+  height: 46px;
+  color: #fff;
+  background: #111;
+  border: 2px solid #ffffff4d;
+  border-radius: 999px;
+  outline: none;
+  cursor: pointer;
+  z-index: 5;
+  isolation: isolate;
+  overflow: visible;
+  transform: translate(-50%, -50%);
+  transition: all 0.35s;
+  box-shadow:
+    0 0 #9803e200,
+    inset 0 0 #fff0;
+}
+
+.hzRadialCenterButton > div {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Glow pseudo-element */
+.hzRadialCenterButton::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 46px;
+  height: 46px;
+  background: radial-gradient(circle, #9803e257 0%, #9803e224 42%, #0000 72%);
+  border-radius: 999px;
+  pointer-events: none;
+  z-index: -1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* Ripple animation pseudo-element */
+.hzRadialCenterButton::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 48px;
+  height: 46px;
+  border: 1px solid #ffffff21;
+  border-radius: 999px;
+  animation: 2.6s ease-out infinite hzCursorRipple;
+  pointer-events: none;
+  z-index: -2;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* Hover state */
+.hzRadialCenterButton:hover {
+  border: 1px solid #ffffff7a;
+  outline: 3px solid var(--radial-outline-color);
+  outline-offset: 1px;
+  transition: all 0.3s;
+}
+
+.hzRadialCenterButton:hover::before {
+  box-shadow:
+    0 0 20px #9803e266,
+    inset 0 0 12px #ffffff14;
+  transition: all 0.3s;
+}
+
+/* Active state */
+.hzRadialCenterButton--active {
+  background: var(--radial-active-bg);
+}
+
+.hzRadialCenterButton.hzRadialCenterButton--active {
+  left: calc(50% - 0px) !important;
+  top: calc(50% - 0px) !important;
+}
+
+.hzRadialReturnButton {
+  position: absolute;
+  left: calc(50% - 20rem);
+  top: calc(50% - 17px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: 34px;
+  padding: 0 8px;
+  gap: 4px;
+  color: rgba(255, 255, 255, 0.88);
+  background: #121216e6;
+  border: 1px solid var(--radial-border-hover);
+  border-radius: 999px;
+  outline: 0 solid var(--radial-outline-color);
+  box-shadow: var(--shadow-xl);
+  cursor: pointer;
+  z-index: 1000;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    outline 0.2s ease,
+    outline-offset 0.2s ease;
+
+  @media (max-width: 768px) {
+    top: calc(100% + 4rem);
+    left: calc(100% - 10rem);
+    scale: 0.8;
+  }
+}
+
+.hzRadialReturnButton:hover,
+.hzRadialReturnButton:focus-visible {
+  color: #fff;
+  background: #1f1a30;
+  border-color: #ffffff7a;
+  outline: 3px solid var(--radial-outline-color);
+  outline-offset: 1px;
+}
+
+.hzRadialRoot:not(.hzRadialNavIsOpen) .hzRadialReturnButton {
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   Radial Item Specific Canvas Positions
+   ========================================================================== */
+
+.hzRadialItem.group.hzRadialItem--canvas_01.hzRadialItem--id-1 {
+  left: calc(50% - 96px) !important;
+  top: calc(50% - 74px) !important;
+}
+
+.hzRadialItem.group.hzRadialItem--canvas_02.hzRadialItem--id-2 {
+  left: calc(50% - 20px) !important;
+  top: calc(50% - 74px) !important;
+}
+
+.hzRadialItem.group.hzRadialItem--canvas_03.hzRadialItem--id-3 {
+  left: calc(50% + 54px) !important;
+  top: calc(50% - 74px) !important;
+}
+
+.hzRadialItem.group.hzRadialItem--canvas_04.hzRadialItem--id-4 {
+  left: calc(50% - 132px) !important;
+  top: calc(50% - 20px) !important;
+}
+
+.hzRadialItem.group.hzRadialItem--canvas_06.hzRadialItem--id-6 {
+  left: calc(50% + 88px) !important;
+  top: calc(50% - 20px) !important;
+}
+
+.hzRadialItem.group.hzRadialItem--canvas_07.hzRadialItem--id-7 {
+  left: calc(50% - 96px) !important;
+  top: calc(50% + 34px) !important;
+}
+
+.hzRadialItem.group.hzRadialItem--canvas_08.hzRadialItem--id-8 {
+  left: calc(50% - 16px) !important;
+  top: calc(50% + 82px) !important;
+}
+
+.hzRadialItem.group.hzRadialItem--canvas_09.hzRadialItem--id-9 {
+  left: calc(50% + 54px) !important;
+  top: calc(50% + 34px) !important;
+}
+
+/* ==========================================================================
+   Tooltip Styles
+   ========================================================================== */
+
+.hzTooltipPanel {
+  position: relative;
+  user-select: none;
+  scale: 1;
+  top: 4px;
+  background: #121216e0 !important;
+  z-index: 9999 !important;
+  transition: all 0.1s !important;
+  opacity: 1 !important;
+  pointer-events: none;
+}
+
+.hzTooltipPanel p {
+  position: relative;
+  user-select: none;
+  font-size: smaller;
+  transition: all 0.1s !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  opacity: 1 !important;
+  z-index: 9999 !important;
+  pointer-events: none;
+}
+
+.z-100.hzToolTip {
+  user-select: none;
+  z-index: 9999 !important;
+  mix-blend-mode: luminosity;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+Keyframes
+========================================================================== */
+
+@keyframes hzCursorRipple {
+  0% {
+    opacity: 0.45;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  65% {
+    opacity: 0.16;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(4.2);
+  }
+}
+
+/* ==========================================================================
+   Responsive
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .hzRadialRoot {
+    bottom: 0.5rem;
+  }
+
+  .hzRadialNavIsOpen {
+    bottom: 4rem;
+    background: #0c0b10;
+    box-shadow: 0px 0px 64px 8px #0c0b10b1;
+    scale: 1.3;
+    transform: all 0.2s;
+  }
+
+  .hzRadialBackdrop {
+    box-sizing: border-box;
+  }
+
+  .hzRadialBackdrop::before {
+    position: absolute;
+    height: auto;
+    width: auto;
+    box-shadow: 0px 0px 64px 8px #0c0b10b1;
+  }
+}
+
+/* Dynamics css */
+
+.glass-button-wrap.heroIntro-iconBtn {
+  min-width: fit-content;
+  width: 6rem;
+  border: 1px solid var(--border);
+  filter: drop-shadow(0px 2px 1px #ffffff80);
+
+  @media (max-height: 700px) {
+    min-width: 5rem;
+  }
+
+  @media (max-width: 768px) {
+    min-width: 5rem;
+  }
+}
+
+.heroIntro-iconBtn:hover {
+  transform: translateY(-0.25rem);
+  box-shadow: var(--shadow-2xl);
+  background: var(--background-dark);
+  transition: all 0.2s;
+}
+
+.container.grid.mx-auto.introContainer {
+  mix-blend-mode: normal;
+}
+
+.gap-2.canvas2btnrow {
+  gap: 1rem;
+
+  @media (max-width: 768px) {
+    gap: 0.5rem;
+  }
+}
+
+span.journey-text-hover {
+  margin-bottom: 1rem;
+}
+
+svg.customJourneyIcon {
+  padding: 0.1rem 1px 0.1rem 0;
+}
+
+section#canvas05-heroIntro {
+  @media (max-height: 700px) {
+    & .heroLens-heading1 {
+      margin-top: 4rem;
+      scale: 0.9;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  section#intro-canvas .text-4xl,
+  section#intro-canvas .text-5xl,
+  section#intro-canvas .text-6xl {
+    filter: none !important;
+  }
+
+  .heroIntro-wrapper.grid.grid-cols-4.gap-2 {
+    gap: 3rem;
+    scale: 0.9;
+  }
+
+  .canvas6btnrow,
+  .canvas3Abtnrow,
+  .gap-2.canvas2btnrow {
+    max-width: 22rem;
+
+    @supports not (corner-shape: squircle) {
+      border-radius: 1rem;
+    }
+  }
+
+  .canvas6btnrow .glass-button-wrap.heroIntro-iconBtn {
+    max-width: 5rem;
+  }
+
+  .canvas6btnrow {
+    left: 0.5rem !important;
+    top: calc(40% + 17rem) !important;
+  }
+}