@designcrowd/library.brand-page 5.17.27 → 5.17.28-ast-padding

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

@@ -5573,20 +5573,14 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       flex-shrink: 0;
 }
 
-.c-shape-background[data-v-c7dfe9d2] {
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
-  position: fixed;
+.c-shape-background[data-v-51358a1a] {
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
-}
-.template-preview .c-shape-background[data-v-c7dfe9d2],
-.device-wrapper .c-shape-background[data-v-c7dfe9d2] {
   height: 100%;
 }
-.c-shape[data-v-c7dfe9d2] {
+.c-shape[data-v-51358a1a] {
   fill: currentColor;
 }
 
@@ -5603,80 +5597,49 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   height: 2rem;
 }
 
-.c-shape[data-v-c999aec0] {
+.c-shape[data-v-11f3a516] {
   fill: currentColor;
 }
 
-.c-placeholder[data-v-51d8de03] {
+.c-placeholder[data-v-6ed918ee] {
   background-color: #fff;
   display: block;
 }
-.c-placeholder__content[data-v-51d8de03] {
+
+/*
+ * Provide a positioning context for the absolute SVG icon — but only when the
+ * caller hasn't already positioned the placeholder itself. Some callers pass
+ * `tw-absolute` (e.g. the big-image banner uses it to fill the banner as a
+ * background); a blanket `position: relative` here would out-specify that
+ * utility and break the layout. An already-positioned placeholder is its own
+ * containing block, so the SVG fills it either way.
+ */
+.c-placeholder[data-v-6ed918ee]:not(.tw-absolute):not(.tw-fixed) {
   position: relative;
-  display: block;
 }
-.c-placeholder__content[data-v-51d8de03]::after {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--height) / 2);
-  --border-left: calc(var(--n-size) * 2 + var(--width) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  top: calc(var(--size) * 2);
-  left: var(--size);
-  content: ' ';
-  border-top: var(--border) solid transparent;
-  border-bottom: var(--border) solid transparent;
-  border-left: var(--border-left) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
-}
-.c-placeholder__content[data-v-51d8de03]::before {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--height) / 2);
-  --border-right: calc(var(--n-size) * 2 + var(--width) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  top: calc(var(--size) * 2);
-  right: var(--size);
-  content: ' ';
-  border-top: var(--border) solid transparent;
-  border-bottom: var(--border) solid transparent;
-  border-right: var(--border-right) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
-}
-.c-placeholder[data-v-51d8de03]::after {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--width) / 2);
-  --border-right: calc(var(--n-size) * 2 + var(--height) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  left: calc(var(--size) * 2);
-  top: var(--size);
-  content: ' ';
-  border-left: var(--border) solid transparent;
-  border-right: var(--border) solid transparent;
-  border-top: var(--border-right) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
-}
-.c-placeholder[data-v-51d8de03]::before {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--width) / 2);
-  --border-bottom: calc(var(--n-size) * 2 + var(--height) / 2);
-  --tw-border-opacity: 0.5;
+
+/*
+ * The X icon is drawn as an SVG with preserveAspectRatio="none" so the
+ * diagonals always run corner-to-corner regardless of the box aspect ratio
+ * (square thumbnails through full-width 2/1 banners). vector-effect keeps the
+ * stroke an even width while the viewBox is stretched non-uniformly. The SVG
+ * is absolutely positioned so it fills the box sized by min-height / the
+ * caller's aspect-ratio class rather than driving the height itself.
+ */
+.c-placeholder__icon[data-v-6ed918ee] {
   position: absolute;
-  left: calc(var(--size) * 2);
-  bottom: var(--size);
-  content: ' ';
-  border-left: var(--border) solid transparent;
-  border-right: var(--border) solid transparent;
-  border-bottom: var(--border-bottom) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
 }
-.c-placeholder__content[data-v-51d8de03] > [data-v-51d8de03] {
-  padding-bottom: 0.5rem;
+.c-placeholder__fill[data-v-6ed918ee] {
+  fill: rgb(208 208 208 / 0.5);
+}
+.c-placeholder__icon line[data-v-6ed918ee] {
+  stroke: #fff;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
 }
 
 .c-image {
@@ -5814,7 +5777,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   --logo-spacing: 0.75rem;
 }
 
-.form-error[data-v-62c5e44b] {
+.form-error[data-v-fc0a55a9] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -5825,14 +5788,14 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   height: 100%;
 }
 
-.c-map[data-v-1bb10416] {
+.c-map[data-v-9f1160e6] {
   margin-bottom: 2.5rem;
   max-width: 100%;
 }
-.c-map--brandsite[data-v-1bb10416] {
+.c-map--brandsite[data-v-9f1160e6] {
   margin-top: 2.5rem;
 }
-.c-map__googlemap[data-v-1bb10416] {
+.c-map__googlemap[data-v-9f1160e6] {
   aspect-ratio: 16 / 9;
 }
 
@@ -5885,13 +5848,13 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   overflow-wrap: break-word;
 }
 
-.c-text-container[data-v-f9a4ffd8] {
+.c-text-container[data-v-41340eb9] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.device--mobile .grid-container[data-v-f9a4ffd8] {
+.device--mobile .grid-container[data-v-41340eb9] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5901,7 +5864,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
           flex-direction: column;
 }
 @media (max-width: 767px) {
-.grid-container[data-v-f9a4ffd8] {
+.grid-container[data-v-41340eb9] {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -5912,7 +5875,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 @media (min-width: 767px) {
-.grid-container[data-v-f9a4ffd8] {
+.grid-container[data-v-41340eb9] {
     display: grid;
 }
 }
@@ -6045,15 +6008,15 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   max-height: 90vh
 }
 
-.c-image-gallery[data-v-5ed761de] {
+.c-image-gallery[data-v-449be7b3] {
   --image-size: 8rem;
   --image-spacing: 0.75rem;
 }
 @media (max-width: 1500px) {
-.device-wrapper--desktop .c-carousel-width[data-v-5ed761de] {
+.device-wrapper--desktop .c-carousel-width[data-v-449be7b3] {
     max-width: calc(59rem - (var(--page-padding) * 2));
 }
-.device-wrapper--desktop .c-carousel-full-width[data-v-5ed761de] {
+.device-wrapper--desktop .c-carousel-full-width[data-v-449be7b3] {
     max-width: 59rem;
 }
 }
@@ -6117,7 +6080,7 @@ select[data-v-14e7c7c7] {
   padding: 4px;
 }
 
-.payment-option-prices[data-v-74073561] {
+.payment-option-prices[data-v-88c49b68] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -6128,7 +6091,7 @@ select[data-v-14e7c7c7] {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap
 }
-.payment-option-prices-thumbnail[data-v-74073561] {
+.payment-option-prices-thumbnail[data-v-88c49b68] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -6139,15 +6102,15 @@ select[data-v-14e7c7c7] {
   gap: 0.5rem
 }
 @media (min-width: 768px) {
-.device--mobile .payment-options[data-v-74073561] {
+.device--mobile .payment-options[data-v-88c49b68] {
     display: block
 }
 }
-.device--mobile .payment-option[data-v-74073561] {
+.device--mobile .payment-option[data-v-88c49b68] {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem
 }
-.payment-width[data-v-74073561] {
+.payment-width[data-v-88c49b68] {
   margin: 0.375rem;
   -ms-flex-negative: 1;
       flex-shrink: 1;
@@ -6159,12 +6122,12 @@ select[data-v-14e7c7c7] {
   min-width: calc(16.666667% - 0.5rem)
 }
 
-.c-video[data-v-373a5743] {
+.c-video[data-v-3dac5093] {
   --video-size: 8rem;
   --video-spacing: 0.75rem;
   margin-bottom: 1rem;
 }
-.c-video__frame[data-v-373a5743] {
+.c-video__frame[data-v-3dac5093] {
   aspect-ratio: 16 / 9;
   border-radius: calc(var(--video-size) / 16);
   display: block;
@@ -6172,61 +6135,61 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-eed30d71] {
+.form-error[data-v-e7de4db0] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-eed30d71] {
+.contact-container[data-v-e7de4db0] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-eed30d71] {
+.c-text-padding[data-v-e7de4db0] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-eed30d71] {
+.device-wrapper--mobile .c-divided-container[data-v-e7de4db0] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-eed30d71] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-e7de4db0] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full-width[data-v-eed30d71] {
+.c-button-full-width[data-v-e7de4db0] {
     grid-column: span 2 / span 2;
     width: 100%;
 }
-.c-button-full[data-v-eed30d71] {
+.c-button-full[data-v-e7de4db0] {
     width: 100%;
 }
-.c-col-span-2[data-v-eed30d71] {
+.c-col-span-2[data-v-e7de4db0] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-eed30d71] {
+.c-mobile-padding[data-v-e7de4db0] {
     padding: 1rem;
 }
-.c-text-padding[data-v-eed30d71] {
+.c-text-padding[data-v-e7de4db0] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-py-6[data-v-eed30d71] {
+.c-py-6[data-v-e7de4db0] {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
 }
-.c-divided-container[data-v-eed30d71] {
+.c-divided-container[data-v-e7de4db0] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-eed30d71] {
+.c-divided-container-reverse[data-v-e7de4db0] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6234,16 +6197,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-eed30d71] {
+.c-aspect-square[data-v-e7de4db0] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-eed30d71] {
+.c-divided-container[data-v-e7de4db0] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-eed30d71] {
+.c-divided-container-reverse[data-v-e7de4db0] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -6529,40 +6492,40 @@ select[data-v-14e7c7c7] {
 }
 }
 
-.c_text-media--items[data-v-2e839d0c] {
+.c_text-media--items[data-v-a2d93984] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 2.5rem;
 }
-.c_text-media--item[data-v-2e839d0c] {
+.c_text-media--item[data-v-a2d93984] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 1.5rem;
 }
-.c_text-media-container[data-v-2e839d0c] {
+.c_text-media-container[data-v-a2d93984] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c_text-media-padding[data-v-2e839d0c] {
+.c_text-media-padding[data-v-a2d93984] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.c_text-media--shape[data-v-2e839d0c] {
+.c_text-media--shape[data-v-a2d93984] {
   width: 25%;
 }
-.device--mobile .c_text-media--items[data-v-2e839d0c] {
+.device--mobile .c_text-media--items[data-v-a2d93984] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device--mobile .c_text-media--alternate[data-v-2e839d0c],
-.device--mobile .c_text-media--shape[data-v-2e839d0c] {
+.device--mobile .c_text-media--alternate[data-v-a2d93984],
+.device--mobile .c_text-media--shape[data-v-a2d93984] {
   width: 100%;
 }
-.device--mobile .c_text-media--alternate-container[data-v-2e839d0c] {
+.device--mobile .c_text-media--alternate-container[data-v-a2d93984] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -6570,18 +6533,18 @@ select[data-v-14e7c7c7] {
 }
 .device--mobile
   .c_text-media--items_direction
-  .c_text-media--item[data-v-2e839d0c]:nth-child(even) {
+  .c_text-media--item[data-v-a2d93984]:nth-child(even) {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
 @media (max-width: 767px) {
-.c_text-media--alternate[data-v-2e839d0c],
-  .c_text-media--shape[data-v-2e839d0c] {
+.c_text-media--alternate[data-v-a2d93984],
+  .c_text-media--shape[data-v-a2d93984] {
     width: 100%;
 }
-.c_text-media--alternate-container[data-v-2e839d0c] {
+.c_text-media--alternate-container[data-v-a2d93984] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
@@ -6590,7 +6553,7 @@ select[data-v-14e7c7c7] {
 }
 @media (min-width: 767px) {
 @media (min-width: 768px) {
-.c_text-media--items_direction .c_text-media--item[data-v-2e839d0c]:nth-child(even) {
+.c_text-media--items_direction .c_text-media--item[data-v-a2d93984]:nth-child(even) {
       -webkit-box-orient: horizontal;
       -webkit-box-direction: reverse;
           -ms-flex-direction: row-reverse;
@@ -6907,7 +6870,7 @@ select[data-v-14e7c7c7] {
 }
 }
 
-.c_banner-container[data-v-bcef9bd4] {
+.c_banner-container[data-v-ac0ea8f4] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
@@ -7646,14 +7609,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-05d0eb3b] {
+.brand-page-root[data-v-27b8625d] {
   height: 100%;
 }
-.sortable[data-v-05d0eb3b] {
+.sortable[data-v-27b8625d] {
   outline-color: #b2bdfb;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-05d0eb3b] {
+.brand-page[data-v-27b8625d] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7665,7 +7628,22 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-05d0eb3b] {
+.brand-page__background-shapes-layer[data-v-27b8625d] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  pointer-events: none;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+  contain: layout paint;
+}
+.template-preview .brand-page__background-shapes-layer[data-v-27b8625d],
+.device-wrapper .brand-page__background-shapes-layer[data-v-27b8625d] {
+  height: 100%;
+}
+.brand-page__inner--default[data-v-27b8625d] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7677,16 +7655,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-05d0eb3b] {
+.brand-page__inner--desktop[data-v-27b8625d] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-05d0eb3b] {
+.brand-site__header[data-v-27b8625d] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-05d0eb3b] {
+.brand-page__header[data-v-27b8625d] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-05d0eb3b] {
+.brand-page__content--default[data-v-27b8625d] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7703,7 +7681,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-05d0eb3b] {
+.brand-page__content--desktop[data-v-27b8625d] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7719,15 +7697,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-05d0eb3b] {
+.brand-page__content--inner[data-v-27b8625d] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-05d0eb3b] {
+.brand-page__content--inner--brandsite[data-v-27b8625d] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-05d0eb3b] {
+.brand-page__content--outline-selected[data-v-27b8625d] {
   position: relative;
   z-index: 10;
   outline-color: #b2bdfb;
@@ -7735,20 +7713,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-05d0eb3b] {
+.brand-page__content--outline-footer-selected[data-v-27b8625d] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-05d0eb3b] {
+.brand-page__content--inner--full-width[data-v-27b8625d] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-05d0eb3b] {
+.brand-page__content--inner--full-width[data-v-27b8625d] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }