@designcrowd/library.brand-page 6.1.10 → 6.1.11

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

@@ -887,6 +887,9 @@ a:not(.tw-lowercase) {
 .tw-max-h-\[340px\] {
     max-height: 340px
 }
+.tw-max-h-\[6\.875rem\] {
+    max-height: 6.875rem
+}
 .tw-max-h-\[calc\(100\%_-_4rem\)\] {
     max-height: calc(100% - 4rem)
 }
@@ -905,6 +908,9 @@ a:not(.tw-lowercase) {
 .tw-min-h-14 {
     min-height: 3.5rem
 }
+.tw-min-h-\[1\.25rem\] {
+    min-height: 1.25rem
+}
 .tw-min-h-full {
     min-height: 100%
 }
@@ -1148,6 +1154,9 @@ a:not(.tw-lowercase) {
 .tw-min-w-\[310px\] {
     min-width: 310px
 }
+.tw-min-w-\[8rem\] {
+    min-width: 8rem
+}
 .tw-min-w-full {
     min-width: 100%
 }
@@ -1271,6 +1280,9 @@ a:not(.tw-lowercase) {
 .tw-max-w-96 {
     max-width: 24rem
 }
+.tw-max-w-\[16rem\] {
+    max-width: 16rem
+}
 .tw-max-w-\[242px\] {
     max-width: 242px
 }
@@ -2391,6 +2403,9 @@ a:not(.tw-lowercase) {
     --tw-border-opacity: 1;
     border-color: rgb(255 255 255 / var(--tw-border-opacity))
 }
+.tw-border-white\/40 {
+    border-color: rgb(255 255 255 / 0.4)
+}
 .tw-border-t-transparent {
     border-top-color: transparent
 }
@@ -2406,6 +2421,14 @@ a:not(.tw-lowercase) {
     --tw-bg-opacity: 1;
     background-color: rgb(252 237 235 / var(--tw-bg-opacity))
 }
+.tw-bg-error-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 219 215 / var(--tw-bg-opacity))
+}
+.tw-bg-error-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(244 182 174 / var(--tw-bg-opacity))
+}
 .tw-bg-error-500 {
     --tw-bg-opacity: 1;
     background-color: rgb(227 73 53 / var(--tw-bg-opacity))
@@ -2533,6 +2556,12 @@ a:not(.tw-lowercase) {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
+.tw-bg-white\/10 {
+    background-color: rgb(255 255 255 / 0.1)
+}
+.tw-bg-white\/25 {
+    background-color: rgb(255 255 255 / 0.25)
+}
 .tw-bg-white\/50 {
     background-color: rgb(255 255 255 / 0.5)
 }
@@ -2760,10 +2789,17 @@ a:not(.tw-lowercase) {
     padding-top: 2rem;
     padding-bottom: 2rem
 }
+.tw-py-\[11px\] {
+    padding-top: 11px;
+    padding-bottom: 11px
+}
 .tw-py-px {
     padding-top: 1px;
     padding-bottom: 1px
 }
+.\!tw-pb-2 {
+    padding-bottom: 0.5rem !important
+}
 .tw-pb-0 {
     padding-bottom: 0px
 }
@@ -3094,6 +3130,9 @@ a:not(.tw-lowercase) {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity))
 }
+.tw-text-current {
+    color: currentColor
+}
 .tw-text-error-500 {
     --tw-text-opacity: 1;
     color: rgb(227 73 53 / var(--tw-text-opacity))
@@ -3372,6 +3411,26 @@ a:not(.tw-lowercase) {
     -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
             transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
+.placeholder\:tw-text-grayscale-500::-webkit-input-placeholder {
+    --tw-text-opacity: 1;
+    color: rgb(209 209 209 / var(--tw-text-opacity))
+}
+.placeholder\:tw-text-grayscale-500::-moz-placeholder {
+    --tw-text-opacity: 1;
+    color: rgb(209 209 209 / var(--tw-text-opacity))
+}
+.placeholder\:tw-text-grayscale-500:-ms-input-placeholder {
+    --tw-text-opacity: 1;
+    color: rgb(209 209 209 / var(--tw-text-opacity))
+}
+.placeholder\:tw-text-grayscale-500::-ms-input-placeholder {
+    --tw-text-opacity: 1;
+    color: rgb(209 209 209 / var(--tw-text-opacity))
+}
+.placeholder\:tw-text-grayscale-500::placeholder {
+    --tw-text-opacity: 1;
+    color: rgb(209 209 209 / var(--tw-text-opacity))
+}
 .placeholder\:tw-text-grayscale-600::-webkit-input-placeholder {
     --tw-text-opacity: 1;
     color: rgb(96 96 96 / var(--tw-text-opacity))
@@ -3414,6 +3473,10 @@ a:not(.tw-lowercase) {
     --tw-border-opacity: 1;
     border-color: rgb(96 96 96 / var(--tw-border-opacity))
 }
+.focus-within\:tw-border-grayscale-800:focus-within {
+    --tw-border-opacity: 1;
+    border-color: rgb(23 23 23 / var(--tw-border-opacity))
+}
 @media (hover: hover) and (pointer: fine) {
     .hover\:tw-cursor-pointer:hover {
         cursor: pointer
@@ -3450,6 +3513,14 @@ a:not(.tw-lowercase) {
         --tw-border-opacity: 1;
         border-color: rgb(182 128 6 / var(--tw-border-opacity))
     }
+    .hover\:tw-border-white:hover {
+        --tw-border-opacity: 1;
+        border-color: rgb(255 255 255 / var(--tw-border-opacity))
+    }
+    .hover\:tw-bg-error-300:hover {
+        --tw-bg-opacity: 1;
+        background-color: rgb(244 182 174 / var(--tw-bg-opacity))
+    }
     .hover\:tw-bg-grayscale-100:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(250 250 250 / var(--tw-bg-opacity))
@@ -3542,6 +3613,9 @@ a:not(.tw-lowercase) {
         --tw-bg-opacity: 1;
         background-color: rgb(255 255 255 / var(--tw-bg-opacity))
     }
+    .hover\:tw-bg-white\/10:hover {
+        background-color: rgb(255 255 255 / 0.1)
+    }
     .hover\:tw-text-info-500:hover {
         --tw-text-opacity: 1;
         color: rgb(63 89 246 / var(--tw-text-opacity))
@@ -3569,6 +3643,9 @@ a:not(.tw-lowercase) {
     .hover\:tw-underline:hover {
         text-decoration-line: underline
     }
+    .hover\:tw-opacity-60:hover {
+        opacity: 0.6
+    }
     .hover\:tw-opacity-80:hover {
         opacity: 0.8
     }
@@ -3637,7 +3714,13 @@ a:not(.tw-lowercase) {
 .focus-visible\:tw-ring-offset-2:focus-visible {
     --tw-ring-offset-width: 2px
 }
+.disabled\:tw-cursor-not-allowed:disabled {
+    cursor: not-allowed
+}
 @media (hover: hover) and (pointer: fine) {
+    .disabled\:hover\:tw-opacity-100:hover:disabled {
+        opacity: 1
+    }
     .tw-group:hover .group-hover\:tw-visible {
         visibility: visible
     }
@@ -4165,6 +4248,50 @@ a:not(.tw-lowercase) {
         display: inline-block
     }
 }
+
+.no-rounded-l[data-v-b5cf77d3] {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+.no-rounded-r[data-v-b5cf77d3] {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.no-rounded-l[data-v-6582d89c] {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+.no-rounded-r[data-v-6582d89c] {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.no-rounded-l[data-v-b5cf5706] {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+.no-rounded-r[data-v-b5cf5706] {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.no-rounded-l[data-v-31be4617] {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+.no-rounded-r[data-v-31be4617] {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.button-crazy-domains[data-v-a9417e14] {
+  box-shadow: -5px -5px 0 0 #f0f0f5;
+}
+
+.button-crazy-domains[data-v-5fc816be] {
+  box-shadow: -5px -5px 0 0 #f0f0f5;
+}
 @keyframes passing-through{0%{opacity:0;transform:translateY(40px)}30%,70%{opacity:1;transform:translateY(0px)}100%{opacity:0;transform:translateY(-40px)}}@keyframes slide-in{0%{opacity:0;transform:translateY(40px)}30%{opacity:1;transform:translateY(0px)}}@keyframes pulse{0%{transform:scale(1)}10%{transform:scale(1.1)}20%{transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:1px solid rgba(0,0,0,.8);border-radius:5px;padding:20px 20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center;margin:3em 0}.dropzone .dz-message .dz-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom, #eee, #ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#fff}.dropzone .dz-preview.dz-image-preview .dz-details{transition:opacity .2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,.8);background-color:rgba(255,255,255,.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:rgba(255,255,255,.4);padding:0 .4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{transform:scale(1.05, 1.05);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px;background:rgba(0,0,0,.8);border-radius:50%}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px;fill:#fff}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;transition:all .2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;transition:opacity .4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:20px;top:50%;margin-top:-10px;left:15%;right:15%;border:3px solid rgba(0,0,0,.8);background:rgba(0,0,0,.8);border-radius:10px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#fff;display:block;position:relative;height:100%;width:0;transition:width 300ms ease-in-out;border-radius:17px}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;transition:opacity .3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#b10606;padding:.5em 1em;color:#fff}.dropzone .dz-preview .dz-error-message:after{content:"";position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #b10606}
 
 /*# sourceMappingURL=dropzone.css.map */
@@ -4322,50 +4449,6 @@ a:not(.tw-lowercase) {
 }
 }
 
-.no-rounded-l[data-v-b5cf5706] {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-.no-rounded-r[data-v-b5cf5706] {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.no-rounded-l[data-v-31be4617] {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-.no-rounded-r[data-v-31be4617] {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.no-rounded-l[data-v-6582d89c] {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-.no-rounded-r[data-v-6582d89c] {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.no-rounded-l[data-v-b5cf77d3] {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-.no-rounded-r[data-v-b5cf77d3] {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.button-crazy-domains[data-v-5fc816be] {
-  box-shadow: -5px -5px 0 0 #f0f0f5;
-}
-
-.button-crazy-domains[data-v-a9417e14] {
-  box-shadow: -5px -5px 0 0 #f0f0f5;
-}
-
 /*!
  * Cropper.js v1.5.12
  * https://fengyuanchen.github.io/cropperjs
@@ -4767,13 +4850,13 @@ a:not(.tw-lowercase) {
 }
 }
 
-.button-group[data-v-e39022cf] {
+.button-group[data-v-5884ceb9] {
 
     display: inline-flex;
 
     width: 100%
 }
-.button-group-item[data-v-e39022cf] {
+.button-group-item[data-v-5884ceb9] {
 
     cursor: pointer;
 
@@ -4803,7 +4886,7 @@ a:not(.tw-lowercase) {
 
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
-.button-group-icon-button[data-v-e39022cf] {
+.button-group-icon-button[data-v-5884ceb9] {
 
     width: 100%;
 
@@ -4835,7 +4918,7 @@ a:not(.tw-lowercase) {
 
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
-.button-group-image-button[data-v-e39022cf] {
+.button-group-image-button[data-v-5884ceb9] {
 
     width: 100%;
 
@@ -4869,7 +4952,7 @@ a:not(.tw-lowercase) {
 
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
-.button-group-button[data-v-e39022cf] {
+.button-group-button[data-v-5884ceb9] {
 
     width: 100%;
 
@@ -5380,20 +5463,20 @@ a:not(.tw-lowercase) {
     margin-right: 0.75rem
 }
 
-.masonry-wall[data-v-1612e531] {
+.masonry-wall[data-v-7e1f694a] {
   display: flex;
 }
-.masonry-wall[data-v-1612e531]:not(.ready) {
+.masonry-wall[data-v-7e1f694a]:not(.ready) {
   opacity: 0;
 }
-.masonry-column[data-v-1612e531] {
+.masonry-column[data-v-7e1f694a] {
   flex-grow: 1;
   flex-basis: 0;
 
   display: flex;
   flex-direction: column;
 }
-.masonry-bottom[data-v-1612e531] {
+.masonry-bottom[data-v-7e1f694a] {
   flex-grow: 1;
   margin-top: -300px;
   padding-top: 300px;
@@ -5401,19 +5484,19 @@ a:not(.tw-lowercase) {
   z-index: -1;
 }
 
-input[data-v-2ff79c91]::-webkit-outer-spin-button,
-input[data-v-2ff79c91]::-webkit-inner-spin-button {
+input[data-v-42cbcead]::-webkit-outer-spin-button,
+input[data-v-42cbcead]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-input[type='number'][data-v-2ff79c91] {
+input[type='number'][data-v-42cbcead] {
   -moz-appearance: textfield;
 }
-.transparent-slider[data-v-2ff79c91] {
+.transparent-slider[data-v-42cbcead] {
   -webkit-appearance: none;
   background: transparent;
 }
-.transparent-slider[data-v-2ff79c91]::-webkit-slider-runnable-track {
+.transparent-slider[data-v-42cbcead]::-webkit-slider-runnable-track {
   width: 100%;
   height: 6px;
   cursor: pointer;
@@ -5421,7 +5504,7 @@ input[type='number'][data-v-2ff79c91] {
   background: #d0d0d0;
   border: 1px solid rgb(230 230 230);
 }
-.transparent-slider[data-v-2ff79c91]::-webkit-slider-thumb {
+.transparent-slider[data-v-42cbcead]::-webkit-slider-thumb {
   border: 1px solid #d0d0d0;
   height: 30px;
   width: 30px;
@@ -5432,10 +5515,10 @@ input[type='number'][data-v-2ff79c91] {
   -webkit-appearance: none;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
 }
-.transparent-slider[data-v-2ff79c91]:focus::-webkit-slider-thumb {
+.transparent-slider[data-v-42cbcead]:focus::-webkit-slider-thumb {
   border: 1px solid #595959;
 }
-.transparent-slider[data-v-2ff79c91]::-moz-range-track {
+.transparent-slider[data-v-42cbcead]::-moz-range-track {
   width: 100%;
   height: 6px;
   cursor: pointer;
@@ -5443,7 +5526,7 @@ input[type='number'][data-v-2ff79c91] {
   background: #d0d0d0;
   border: 1px solid rgb(230 230 230);
 }
-.transparent-slider[data-v-2ff79c91]::-moz-range-thumb {
+.transparent-slider[data-v-42cbcead]::-moz-range-thumb {
   border: 1px solid #d0d0d0;
   height: 30px;
   width: 30px;
@@ -9506,7 +9589,46 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
     color: rgb(24 24 24 / var(--tw-text-opacity))
 }
 
-.header-settings-panel_option-title[data-v-4c99f2d6] {
+.navigation-type-options[data-v-0fece584] button {
+  padding-top: 8px !important;
+}
+.navigation-type-options[data-v-0fece584] button > p {
+  text-transform: none;
+}
+
+/* Icon-style boxes follow Figma's 84x56 proportion and scale with the sidebar:
+   the grid's 1fr columns set the width, aspect-ratio keeps the 3:2 box, and the
+   icon is sized as a width percentage (Figma: 32px icon / 60px content = 53.33%).
+   Width percentages (not a height:100% chain) because iOS Safari doesn't resolve
+   percentage heights inside aspect-ratio boxes — the icon blew up to full tile
+   width on mobile. Only the 12px padding is a fixed value. */
+.icon-style-options[data-v-6a643dd4] button {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  aspect-ratio: 3 / 2;
+  padding: 12px !important;
+}
+.icon-style-options[data-v-6a643dd4] button div {
+  width: 100%;
+}
+
+/* `div > svg` targets only the outer Icon svg (the nested inner svg's parent
+   is an svg), so the percentage isn't applied twice. */
+.icon-style-options[data-v-6a643dd4] button div > svg {
+  display: block;
+  width: 50%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.header-settings-panel_option-title[data-v-9b4ab8a2] {
     font-family: Inter, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;