@designcrowd/library.brand-page 6.2.2 → 6.2.3-ast-faq

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

@@ -7173,6 +7173,113 @@ select[data-v-665b8067] {
   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-b3bc4090] {
+  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-b3bc4090] {
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+.c_faq__item[data-v-b3bc4090] {
+  padding: 16px 0;
+}
+.c_faq__item + .c_faq__item[data-v-b3bc4090] {
+  /* ADR 0009: color-mix without a fallback is accepted. */
+  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+}
+.c_faq__question[data-v-b3bc4090] {
+  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-b3bc4090] {
+  -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 (D9). */
+  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-b3bc4090] {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.c_faq__answer[data-v-b3bc4090] {
+  margin-top: 8px;
+}
+.c_faq__grid[data-v-b3bc4090] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+@container (min-width: 640px) {
+.c_faq--split[data-v-b3bc4090]:not(.c_faq--stacked) {
+    -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:not(.c_faq--stacked) .c_faq__heading[data-v-b3bc4090] {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 0px;
+            flex: 1 1 0;
+    min-width: 0;
+}
+.c_faq--split:not(.c_faq--stacked) .c_faq__items[data-v-b3bc4090] {
+    -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-b3bc4090] {
+    grid-template-columns: 1fr;
+}
+}
+
+/* brand.page / brand.contact always stack split and grid. */
+.c_faq--stacked .c_faq__grid[data-v-b3bc4090] {
+  grid-template-columns: 1fr;
+}
+
 .root[data-v-c23d864e] {
   --logo-width: var(--v62a07554);
   --logo-max-width: 20rem;
@@ -9584,11 +9691,11 @@ body {
   contain-intrinsic-size: auto 36px;
 }
 
-.rich-text-editor[data-v-7272d264]:focus-within {
+.rich-text-editor[data-v-327c614c]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(96 96 96 / var(--tw-border-opacity));
 }
-.style-editor[data-v-7272d264] {
+.style-editor[data-v-327c614c] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9599,7 +9706,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-7272d264] button:not(.c-button-style) {
+.style-editor[data-v-327c614c] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9609,16 +9716,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-7272d264] {
+.style-editor-button[data-v-327c614c] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-7272d264] {
+.toolbar-editor-button.active[data-v-327c614c] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-7272d264] {
+.toolbar-editor-button[data-v-327c614c] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -9636,7 +9743,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-7272d264] .ProseMirror {
+[data-v-327c614c] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -9649,13 +9756,13 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-.editor-compact[data-v-7272d264] .ProseMirror {
+.editor-compact[data-v-327c614c] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-7272d264] .ProseMirror:focus {
+[data-v-327c614c] .ProseMirror:focus {
   outline: none;
 }
-[data-v-7272d264] .ProseMirror * {
+[data-v-327c614c] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -9664,29 +9771,29 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-7272d264] .ProseMirror a s,[data-v-7272d264] .ProseMirror a strike,[data-v-7272d264] .ProseMirror a [data-strike] {
+[data-v-327c614c] .ProseMirror a s,[data-v-327c614c] .ProseMirror a strike,[data-v-327c614c] .ProseMirror a [data-strike] {
   text-decoration: line-through !important;
 }
-[data-v-7272d264] .ProseMirror a,[data-v-7272d264] .ProseMirror a * {
+[data-v-327c614c] .ProseMirror a,[data-v-327c614c] .ProseMirror a * {
   /* Keep in sync with DEFAULT_LINK_COLOR (src/constants/rich-text-editor.constants.ts) — scoped CSS can't import it. */
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.error-message[data-v-7272d264] {
+.error-message[data-v-327c614c] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-7272d264] {
+.popup-container[data-v-327c614c] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.hyperlink-preview[data-v-7272d264] {
+.hyperlink-preview[data-v-327c614c] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-7272d264] {
+.popup-panel[data-v-327c614c] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9694,17 +9801,17 @@ body {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.popup-panel[data-v-7272d264] input {
+.popup-panel[data-v-327c614c] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-7272d264] {
+.border[data-v-327c614c] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-7272d264] .text-dropdown-title {
+[data-v-327c614c] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9713,7 +9820,7 @@ body {
   color: rgb(38 38 38 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-7272d264] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-327c614c] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(209 209 209 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -9722,56 +9829,56 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-7272d264],
-  .style-editor-button-textstyle[data-v-7272d264] {
+.style-editor-button-font[data-v-327c614c],
+  .style-editor-button-textstyle[data-v-327c614c] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-7272d264] {
+.style-editor-button.stepper[data-v-327c614c] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-7272d264] {
+.style-editor-button-stepper[data-v-327c614c] {
     max-width: 100%;
 }
-.border.desktop[data-v-7272d264] {
+.border.desktop[data-v-327c614c] {
     display: none;
 }
-.border.mobile[data-v-7272d264] {
+.border.mobile[data-v-327c614c] {
     display: block;
 }
-[data-v-7272d264] .left-align {
+[data-v-327c614c] .left-align {
     -webkit-transform: translateX(-48%);
             transform: translateX(-48%);
 }
-.hyperlink-popup[data-v-7272d264] {
+.hyperlink-popup[data-v-327c614c] {
     z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-7272d264] {
+.style-editor-button.stepper[data-v-327c614c] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-7272d264] {
+.style-editor-button-font[data-v-327c614c] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-7272d264] {
+.style-editor-button-stepper[data-v-327c614c] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-7272d264] {
+.style-editor-button-textstyle[data-v-327c614c] {
     max-width: 25%;
 }
-.border.desktop[data-v-7272d264] {
+.border.desktop[data-v-327c614c] {
     display: block;
 }
-.border.mobile[data-v-7272d264] {
+.border.mobile[data-v-327c614c] {
     display: none;
 }
-[data-v-7272d264] .left-align {
+[data-v-327c614c] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-7272d264]:hover {
+.drop-down-item[data-v-327c614c]:hover {
   background-color: #eee;
 }
 

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

@@ -7143,6 +7143,113 @@ select[data-v-665b8067] {
   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. */
+.bp .c_faq[data-v-b3bc4090] {
+  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;
+}
+.bp .c_faq--centered .c_faq__items[data-v-b3bc4090] {
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+.bp .c_faq__item[data-v-b3bc4090] {
+  padding: 16px 0;
+}
+.bp .c_faq__item + .c_faq__item[data-v-b3bc4090] {
+  /* ADR 0009: color-mix without a fallback is accepted. */
+  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+}
+.bp .c_faq__question[data-v-b3bc4090] {
+  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;
+}
+.bp .c_faq__toggle[data-v-b3bc4090] {
+  -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 (D9). */
+  margin-left: auto;
+}
+
+/* A long unbroken word wraps instead of pushing the +/- out of the row. */
+.bp .c_faq__question > [data-component='text-wrapper'][data-v-b3bc4090] {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.bp .c_faq__answer[data-v-b3bc4090] {
+  margin-top: 8px;
+}
+.bp .c_faq__grid[data-v-b3bc4090] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+@container (min-width: 640px) {
+.bp .c_faq--split[data-v-b3bc4090]:not(.c_faq--stacked) {
+    -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. */
+.bp .c_faq--split:not(.c_faq--stacked) .c_faq__heading[data-v-b3bc4090] {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 0px;
+            flex: 1 1 0;
+    min-width: 0;
+}
+.bp .c_faq--split:not(.c_faq--stacked) .c_faq__items[data-v-b3bc4090] {
+    -webkit-box-flex: 2;
+        -ms-flex: 2 1 0px;
+            flex: 2 1 0;
+    min-width: 0;
+}
+}
+@container (max-width: 640px) {
+.bp .c_faq__grid[data-v-b3bc4090] {
+    grid-template-columns: 1fr;
+}
+}
+
+/* brand.page / brand.contact always stack split and grid. */
+.bp .c_faq--stacked .c_faq__grid[data-v-b3bc4090] {
+  grid-template-columns: 1fr;
+}
+
 .bp .root[data-v-c23d864e] {
   --logo-width: var(--v62a07554);
   --logo-max-width: 20rem;
@@ -9554,11 +9661,11 @@ to {
   contain-intrinsic-size: auto 36px;
 }
 
-.bp .rich-text-editor[data-v-7272d264]:focus-within {
+.bp .rich-text-editor[data-v-327c614c]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.bp .style-editor[data-v-7272d264] {
+.bp .style-editor[data-v-327c614c] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9569,7 +9676,7 @@ to {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.bp .style-editor[data-v-7272d264] button:not(.c-button-style) {
+.bp .style-editor[data-v-327c614c] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9579,16 +9686,16 @@ to {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.bp .style-editor-button[data-v-7272d264] {
+.bp .style-editor-button[data-v-327c614c] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.bp .toolbar-editor-button.active[data-v-7272d264] {
+.bp .toolbar-editor-button.active[data-v-327c614c] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.bp .toolbar-editor-button[data-v-7272d264] {
+.bp .toolbar-editor-button[data-v-327c614c] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -9606,7 +9713,7 @@ to {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-7272d264] .ProseMirror {
+[data-v-327c614c] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -9619,13 +9726,13 @@ to {
   max-height: 14rem;
   overflow: auto;
 }
-.bp .editor-compact[data-v-7272d264] .ProseMirror {
+.bp .editor-compact[data-v-327c614c] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-7272d264] .ProseMirror:focus {
+[data-v-327c614c] .ProseMirror:focus {
   outline: none;
 }
-[data-v-7272d264] .ProseMirror * {
+[data-v-327c614c] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -9634,29 +9741,29 @@ to {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-7272d264] .ProseMirror a s,[data-v-7272d264] .ProseMirror a strike,[data-v-7272d264] .ProseMirror a [data-strike] {
+[data-v-327c614c] .ProseMirror a s,[data-v-327c614c] .ProseMirror a strike,[data-v-327c614c] .ProseMirror a [data-strike] {
   text-decoration: line-through !important;
 }
-[data-v-7272d264] .ProseMirror a,[data-v-7272d264] .ProseMirror a * {
+[data-v-327c614c] .ProseMirror a,[data-v-327c614c] .ProseMirror a * {
   /* Keep in sync with DEFAULT_LINK_COLOR (src/constants/rich-text-editor.constants.ts) — scoped CSS can't import it. */
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.bp .error-message[data-v-7272d264] {
+.bp .error-message[data-v-327c614c] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.bp .popup-container[data-v-7272d264] {
+.bp .popup-container[data-v-327c614c] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.bp .hyperlink-preview[data-v-7272d264] {
+.bp .hyperlink-preview[data-v-327c614c] {
   position: absolute;
   z-index: 10;
 }
-.bp .popup-panel[data-v-7272d264] {
+.bp .popup-panel[data-v-327c614c] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9664,17 +9771,17 @@ to {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.bp .popup-panel[data-v-7272d264] input {
+.bp .popup-panel[data-v-327c614c] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.bp .border[data-v-7272d264] {
+.bp .border[data-v-327c614c] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-7272d264] .text-dropdown-title {
+[data-v-327c614c] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9683,7 +9790,7 @@ to {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-7272d264] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-327c614c] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -9692,56 +9799,56 @@ to {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.bp .style-editor-button-font[data-v-7272d264],
-  .bp .style-editor-button-textstyle[data-v-7272d264] {
+.bp .style-editor-button-font[data-v-327c614c],
+  .bp .style-editor-button-textstyle[data-v-327c614c] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.bp .style-editor-button.stepper[data-v-7272d264] {
+.bp .style-editor-button.stepper[data-v-327c614c] {
     max-width: 40%;
 }
-.bp .style-editor-button-stepper[data-v-7272d264] {
+.bp .style-editor-button-stepper[data-v-327c614c] {
     max-width: 100%;
 }
-.bp .border.desktop[data-v-7272d264] {
+.bp .border.desktop[data-v-327c614c] {
     display: none;
 }
-.bp .border.mobile[data-v-7272d264] {
+.bp .border.mobile[data-v-327c614c] {
     display: block;
 }
-[data-v-7272d264] .left-align {
+[data-v-327c614c] .left-align {
     -webkit-transform: translateX(-48%);
             transform: translateX(-48%);
 }
-.bp .hyperlink-popup[data-v-7272d264] {
+.bp .hyperlink-popup[data-v-327c614c] {
     z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.bp .style-editor-button.stepper[data-v-7272d264] {
+.bp .style-editor-button.stepper[data-v-327c614c] {
     max-width: 32%;
 }
-.bp .style-editor-button-font[data-v-7272d264] {
+.bp .style-editor-button-font[data-v-327c614c] {
     max-width: 28%;
 }
-.bp .style-editor-button-stepper[data-v-7272d264] {
+.bp .style-editor-button-stepper[data-v-327c614c] {
     max-width: 100%;
 }
-.bp .style-editor-button-textstyle[data-v-7272d264] {
+.bp .style-editor-button-textstyle[data-v-327c614c] {
     max-width: 25%;
 }
-.bp .border.desktop[data-v-7272d264] {
+.bp .border.desktop[data-v-327c614c] {
     display: block;
 }
-.bp .border.mobile[data-v-7272d264] {
+.bp .border.mobile[data-v-327c614c] {
     display: none;
 }
-[data-v-7272d264] .left-align {
+[data-v-327c614c] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.bp .drop-down-item[data-v-7272d264]:hover {
+.bp .drop-down-item[data-v-327c614c]:hover {
   background-color: #eee;
 }