@designcrowd/library.brand-page 6.2.16 → 6.2.17

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -1287,12 +1287,24 @@ a.maker-anchor {
 .tw-max-h-8 {
   max-height: 2rem;
 }
+.tw-max-h-\[100vh\] {
+  max-height: 100vh;
+}
+.tw-max-h-\[33vh\] {
+  max-height: 33vh;
+}
 .tw-max-h-\[340px\] {
   max-height: 340px;
 }
 .tw-max-h-\[6\.875rem\] {
   max-height: 6.875rem;
 }
+.tw-max-h-\[60vh\] {
+  max-height: 60vh;
+}
+.tw-max-h-\[85vh\] {
+  max-height: 85vh;
+}
 .tw-max-h-\[calc\(100\%_-_4rem\)\] {
   max-height: calc(100% - 4rem);
 }
@@ -1305,6 +1317,9 @@ a.maker-anchor {
 .tw-max-h-screen-90 {
   max-height: 90vh;
 }
+.tw-min-h-0 {
+  min-height: 0px;
+}
 .tw-min-h-10 {
   min-height: 2.5rem;
 }
@@ -1500,6 +1515,9 @@ a.maker-anchor {
 .tw-w-96 {
   width: 24rem;
 }
+.tw-w-\[12rem\] {
+  width: 12rem;
+}
 .tw-w-\[14rem\] {
   width: 14rem;
 }
@@ -2005,10 +2023,6 @@ a.maker-anchor {
 .tw-grid-flow-row {
   grid-auto-flow: row;
 }
-.tw-auto-rows-max {
-  grid-auto-rows: -webkit-max-content;
-  grid-auto-rows: max-content;
-}
 .tw-grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -2529,9 +2543,6 @@ a.maker-anchor {
 .tw-overflow-visible {
   overflow: visible;
 }
-.tw-overflow-scroll {
-  overflow: scroll;
-}
 .tw-overflow-x-auto {
   overflow-x: auto;
 }
@@ -2621,6 +2632,10 @@ a.maker-anchor {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
 }
+.tw-rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
 .tw-rounded-l {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2645,6 +2660,10 @@ a.maker-anchor {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
+.tw-rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
 .tw-border {
   border-width: 1px;
 }
@@ -4684,6 +4703,10 @@ a.maker-anchor {
     margin-bottom: 1rem;
   }
 
+  .lg\:tw-mb-8 {
+    margin-bottom: 2rem;
+  }
+
   .lg\:tw-ml-2 {
     margin-left: 0.5rem;
   }
@@ -4794,10 +4817,6 @@ a.maker-anchor {
     overflow: hidden;
   }
 
-  .lg\:tw-overflow-visible {
-    overflow: visible;
-  }
-
   .lg\:tw-rounded {
     border-radius: 0.25rem;
   }
@@ -5045,58 +5064,10 @@ a.maker-anchor {
   line-height: 1.25rem;
 }
 
-.arc[data-v-dd807356] {
-  animation: ai-loader-circle-dd807356 2000ms infinite linear;
-}
-@keyframes ai-loader-circle-dd807356 {
-0% {
-    transform: rotateZ(0deg);
-}
-100% {
-    transform: rotateZ(360deg);
-}
-}
-.primary[data-v-dd807356] {
-  animation: ai-loader-primary-dd807356 2000ms infinite ease-in-out;
-}
-@keyframes ai-loader-primary-dd807356 {
-0% {
-    transform: scale(1);
-}
-50% {
-    transform: scale(0.5) translate(-7.5px);
-}
-100% {
-    transform: scale(1);
-}
-}
-.top-star[data-v-dd807356] {
-  animation: ai-loader-secondary-top-dd807356 2000ms infinite ease-in-out;
-}
-.bottom-star[data-v-dd807356] {
-  animation: ai-loader-secondary-bottom-dd807356 2000ms infinite ease-in-out;
-}
-@keyframes ai-loader-secondary-bottom-dd807356 {
-0% {
-    transform: scale(1);
-}
-50% {
-    transform: scale(1.5) translate(-7.5px, -7.5px);
-}
-100% {
-    transform: scale(1);
-}
-}
-@keyframes ai-loader-secondary-top-dd807356 {
-0% {
-    transform: scale(1);
-}
-50% {
-    transform: scale(1.5) translate(-7.5px, 7.5px);
-}
-100% {
-    transform: scale(1);
-}
+.done-btn[data-v-6766e446] {
+  box-shadow:
+    0 0 0 1px #d4d4d4,
+    0 8px 16px #d4d4d4;
 }
 
 /*!
@@ -5398,10 +5369,58 @@ a.maker-anchor {
   width: 100%;
 }
 
-.done-btn[data-v-cc85f529] {
-  box-shadow:
-    0 0 0 1px #d4d4d4,
-    0 8px 16px #d4d4d4;
+.arc[data-v-dd807356] {
+  animation: ai-loader-circle-dd807356 2000ms infinite linear;
+}
+@keyframes ai-loader-circle-dd807356 {
+0% {
+    transform: rotateZ(0deg);
+}
+100% {
+    transform: rotateZ(360deg);
+}
+}
+.primary[data-v-dd807356] {
+  animation: ai-loader-primary-dd807356 2000ms infinite ease-in-out;
+}
+@keyframes ai-loader-primary-dd807356 {
+0% {
+    transform: scale(1);
+}
+50% {
+    transform: scale(0.5) translate(-7.5px);
+}
+100% {
+    transform: scale(1);
+}
+}
+.top-star[data-v-dd807356] {
+  animation: ai-loader-secondary-top-dd807356 2000ms infinite ease-in-out;
+}
+.bottom-star[data-v-dd807356] {
+  animation: ai-loader-secondary-bottom-dd807356 2000ms infinite ease-in-out;
+}
+@keyframes ai-loader-secondary-bottom-dd807356 {
+0% {
+    transform: scale(1);
+}
+50% {
+    transform: scale(1.5) translate(-7.5px, -7.5px);
+}
+100% {
+    transform: scale(1);
+}
+}
+@keyframes ai-loader-secondary-top-dd807356 {
+0% {
+    transform: scale(1);
+}
+50% {
+    transform: scale(1.5) translate(-7.5px, 7.5px);
+}
+100% {
+    transform: scale(1);
+}
 }
 
 /* Ensure modal height is not longer than screen */
@@ -5448,6 +5467,82 @@ a.maker-anchor {
 }
 }
 
+/* One transition for all four sides, offset by per-side custom properties. */
+.drawer-root[data-v-f3857282] {
+  --drawer-offset-x: 0;
+  --drawer-offset-y: 0;
+}
+.drawer-root[data-side='bottom'][data-v-f3857282] {
+  --drawer-offset-y: 100%;
+}
+.drawer-root[data-side='top'][data-v-f3857282] {
+  --drawer-offset-y: -100%;
+}
+.drawer-root[data-side='left'][data-v-f3857282] {
+  --drawer-offset-x: -100%;
+}
+.drawer-root[data-side='right'][data-v-f3857282] {
+  --drawer-offset-x: 100%;
+}
+
+/* Safe-area insets are only non-zero on notched iPhones under viewport-fit=cover. */
+.drawer-root[data-side='bottom'] .drawer-panel[data-v-f3857282] {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
+}
+.drawer-root[data-side='top'] .drawer-panel[data-v-f3857282] {
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
+}
+.drawer-root[data-side='left'] .drawer-panel[data-v-f3857282] {
+  padding-left: env(safe-area-inset-left, 0px);
+}
+.drawer-root[data-side='right'] .drawer-panel[data-v-f3857282] {
+  padding-right: env(safe-area-inset-right, 0px);
+}
+
+/* Absolutely positioned against the padding edge, so the close button needs the inset too. */
+.drawer-root[data-side='bottom'] .drawer-close-btn[data-v-f3857282],
+.drawer-root[data-side='right'] .drawer-close-btn[data-v-f3857282] {
+  right: calc(0.5rem + env(safe-area-inset-right, 0px));
+}
+.drawer-root[data-side='top'] .drawer-close-btn[data-v-f3857282] {
+  top: calc(0.5rem + env(safe-area-inset-top, 0px));
+  right: calc(0.5rem + env(safe-area-inset-right, 0px));
+}
+.drawer-enter-active[data-v-f3857282],
+.drawer-leave-active[data-v-f3857282] {
+  transition: opacity 200ms ease;
+}
+.drawer-enter-active .drawer-panel[data-v-f3857282],
+.drawer-leave-active .drawer-panel[data-v-f3857282] {
+  transition: transform 200ms ease;
+}
+.drawer-enter-from[data-v-f3857282],
+.drawer-leave-to[data-v-f3857282] {
+  opacity: 0;
+}
+.drawer-enter-from .drawer-panel[data-v-f3857282],
+.drawer-leave-to .drawer-panel[data-v-f3857282] {
+  transform: translate(var(--drawer-offset-x), var(--drawer-offset-y));
+}
+
+/* Clear the transform too, or the panel flashes at its off-screen offset. */
+@media (prefers-reduced-motion: reduce) {
+.drawer-enter-active[data-v-f3857282],
+  .drawer-leave-active[data-v-f3857282],
+  .drawer-enter-active .drawer-panel[data-v-f3857282],
+  .drawer-leave-active .drawer-panel[data-v-f3857282] {
+    transition: none;
+}
+.drawer-enter-from .drawer-panel[data-v-f3857282],
+  .drawer-leave-to .drawer-panel[data-v-f3857282] {
+    transform: none;
+}
+}
+
 .stripe-acct {
   font-size: 0.7rem;
   opacity: 0.5;
@@ -5496,13 +5591,13 @@ a.maker-anchor {
 }
 }
 
-.button-group[data-v-5884ceb9] {
+.button-group[data-v-c67077fc] {
 
     display: inline-flex;
 
     width: 100%
 }
-.button-group-item[data-v-5884ceb9] {
+.button-group-item[data-v-c67077fc] {
 
     cursor: pointer;
 
@@ -5532,7 +5627,7 @@ a.maker-anchor {
 
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
-.button-group-icon-button[data-v-5884ceb9] {
+.button-group-icon-button[data-v-c67077fc] {
 
     width: 100%;
 
@@ -5564,7 +5659,7 @@ a.maker-anchor {
 
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
-.button-group-image-button[data-v-5884ceb9] {
+.button-group-image-button[data-v-c67077fc] {
 
     width: 100%;
 
@@ -5598,7 +5693,7 @@ a.maker-anchor {
 
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
-.button-group-button[data-v-5884ceb9] {
+.button-group-button[data-v-c67077fc] {
 
     width: 100%;
 
@@ -7777,6 +7872,112 @@ select[data-v-6de658e0] {
   margin: 0 auto;
 }
 
+/* Spacing follows the Figma redlines ("Website — Features & Widgets", FAQ): 32 heading→items,
+   16 above and below each question, dividers only between items. */
+.c_faq[data-v-2b09f1b8] {
+  margin: 0 auto;
+  max-width: var(--brandsite-max-width);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 32px;
+}
+.c_faq--centered .c_faq__items[data-v-2b09f1b8] {
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+.c_faq__item[data-v-2b09f1b8] {
+  padding: 16px 0;
+}
+.c_faq__item + .c_faq__item[data-v-2b09f1b8] {
+  /* `transparent` is a valid pick: the line disappears, with no fallback to the default. */
+  border-top: 1px solid var(--faq-divider-color, currentColor);
+}
+.c_faq__question[data-v-2b09f1b8] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  /* Buttons don't inherit font by default; the question's em sizes need the h3's. */
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.c_faq__toggle[data-v-2b09f1b8] {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  /* Stays on the right when the question is empty and renders nothing. */
+  margin-left: auto;
+}
+
+/* A long unbroken word wraps instead of pushing the +/- out of the row. */
+.c_faq__question > [data-component='text-wrapper'][data-v-2b09f1b8] {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  /* The dcom maker chrome resets every <button> to capitalize (!important); this
+     question holds content text, not a UI label, so reset it back on the child
+     (HeaderNavigationType.vue uses the same technique for the same clash). */
+  text-transform: none;
+}
+.c_faq__answer[data-v-2b09f1b8] {
+  margin-top: 8px;
+}
+.c_faq__grid[data-v-2b09f1b8] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+@container (min-width: 640px) {
+.c_faq--split[data-v-2b09f1b8] {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+}
+
+  /* 1/3 heading · 2/3 items, either side of the 32px gap. */
+.c_faq--split .c_faq__heading[data-v-2b09f1b8] {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 0px;
+            flex: 1 1 0;
+    min-width: 0;
+}
+.c_faq--split .c_faq__items[data-v-2b09f1b8] {
+    -webkit-box-flex: 2;
+        -ms-flex: 2 1 0px;
+            flex: 2 1 0;
+    min-width: 0;
+}
+}
+@container (max-width: 640px) {
+.c_faq__grid[data-v-2b09f1b8] {
+    grid-template-columns: 1fr;
+}
+}
+
 .root[data-v-7c703177] {
   --logo-width: var(--a1839a3c);
   --logo-max-width: 20rem;