@designcrowd/library.brand-page 6.2.16 → 6.2.17

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

@@ -896,12 +896,24 @@ a:not(.tw-lowercase) {
 .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)
 }
@@ -914,6 +926,9 @@ a:not(.tw-lowercase) {
 .tw-max-h-screen-90 {
     max-height: 90vh
 }
+.tw-min-h-0 {
+    min-height: 0px
+}
 .tw-min-h-10 {
     min-height: 2.5rem
 }
@@ -1109,6 +1124,9 @@ a:not(.tw-lowercase) {
 .tw-w-96 {
     width: 24rem
 }
+.tw-w-\[12rem\] {
+    width: 12rem
+}
 .tw-w-\[14rem\] {
     width: 14rem
 }
@@ -1612,10 +1630,6 @@ a:not(.tw-lowercase) {
 .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))
 }
@@ -2136,9 +2150,6 @@ a:not(.tw-lowercase) {
 .tw-overflow-visible {
     overflow: visible
 }
-.tw-overflow-scroll {
-    overflow: scroll
-}
 .tw-overflow-x-auto {
     overflow-x: auto
 }
@@ -2228,6 +2239,10 @@ a:not(.tw-lowercase) {
     border-bottom-right-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem
 }
+.tw-rounded-b-lg {
+    border-bottom-right-radius: 0.75rem;
+    border-bottom-left-radius: 0.75rem
+}
 .tw-rounded-l {
     border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem
@@ -2252,6 +2267,10 @@ a:not(.tw-lowercase) {
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px
 }
+.tw-rounded-t-lg {
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem
+}
 .tw-border {
     border-width: 1px
 }
@@ -4138,6 +4157,9 @@ a:not(.tw-lowercase) {
     .lg\:tw-mb-4 {
         margin-bottom: 1rem
     }
+    .lg\:tw-mb-8 {
+        margin-bottom: 2rem
+    }
     .lg\:tw-ml-2 {
         margin-left: 0.5rem
     }
@@ -4224,9 +4246,6 @@ a:not(.tw-lowercase) {
     .lg\:tw-overflow-hidden {
         overflow: hidden
     }
-    .lg\:tw-overflow-visible {
-        overflow: visible
-    }
     .lg\:tw-rounded {
         border-radius: 0.5rem
     }
@@ -4453,58 +4472,10 @@ a:not(.tw-lowercase) {
   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;
 }
 
 /*!
@@ -4806,10 +4777,58 @@ a:not(.tw-lowercase) {
   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 */
@@ -4856,6 +4875,82 @@ a:not(.tw-lowercase) {
 }
 }
 
+/* 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;
@@ -4904,13 +4999,13 @@ a:not(.tw-lowercase) {
 }
 }
 
-.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;
 
@@ -4940,7 +5035,7 @@ a:not(.tw-lowercase) {
 
     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%;
 
@@ -4972,7 +5067,7 @@ a:not(.tw-lowercase) {
 
     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%;
 
@@ -5006,7 +5101,7 @@ a:not(.tw-lowercase) {
 
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
-.button-group-button[data-v-5884ceb9] {
+.button-group-button[data-v-c67077fc] {
 
     width: 100%;
 
@@ -7185,6 +7280,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;