@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

package/dist/components/section/section.css

@@ -11,7 +11,7 @@
   --dsa-section__col--min-width_medium: var(--dsa-tile--width_medium);
   --dsa-section__col--min-width_large: var(--dsa-tile--width_large);
   --dsa-section__col--min-width_largest: var(--dsa-tile--width_largest);
-  --dsa-section--space_default: var(--ks-spacing-xxl);
+  --dsa-section--space_default: var(--dsa-content--vertical-spacing);
   --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
   --dsa-section--gutter_small: var(--ks-spacing-s);
   --dsa-section--gutter_default: var(--ks-spacing-m);
@@ -22,10 +22,22 @@
   --dsa-section__content--width_wide: var(--dsa-content--width_wide);
   --dsa-section__content--width_max: 100vw;
   --dsa-section__content--width_full: 100vw;
-  --dsa-section__content--padding: var(--dsa-content--spacing);
+  --dsa-section__content--padding: var(--dsa-content--horizontal-spacing);
   --dsa-section--background-color_default: var(--ks-background-color-default);
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
+  --dsa-section--transition_to-default: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default) 75%
+  );
+  --dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
+  --dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
+  --dsa-section--transition_to-inverted: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default-inverted) 75%
+  );
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
@@ -33,48 +45,12 @@
   --dsa-section__slider-arrow--opacity_hover: 1;
   --dsa-section__slider-arrow--opacity_disabled: 0.3;
   --dsa-section__slider-arrow--background: transparent;
-  --dsa-section_stagelights--background-image: radial-gradient(
-      50% 150% at 100% -50%,
-      var(--ks-color-primary-inverted-alpha-3) 0%,
-      transparent 100%
-    ),
-    radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
-  --dsa-section_anchor-glow--background-image: radial-gradient(
-    50% 50% at 50% 100%,
-    var(--ks-color-secondary-alpha-5) 0%,
-    transparent 100%
-  );
-  --dsa-section_symmetric-glow--background-image: radial-gradient(
-      20% 50% at 100% 50%,
-      var(--ks-color-primary-alpha-5) 0%,
-      transparent 100%
-    ),
-    radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%);
-  --dsa-section_accent-transition--background-image: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ks-background-color-accent) 100%
-  );
-  --dsa-section_bold-transition--background-image: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ks-background-color-bold) 100%
-  );
-  --dsa-section_vertical-gradient--background-image: linear-gradient(
-    0deg,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-secondary-alpha-5) 100%
-  );
-  --dsa-section_horizontal-gradient--background-image: linear-gradient(
-    90deg,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-secondary-alpha-5) 100%
-  );
-  --dsa-section__spotlight--size: 150px;
-  --dsa-section__spotlight--blur: 100%;
+  --dsa-section__spotlight--size: 50px;
+  --dsa-section__spotlight--blur: 0%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
 
+.l-section.dsa-section [ks-inverted],
 .l-section.dsa-section {
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
   --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
@@ -128,6 +104,18 @@
 .l-section.dsa-section.l-section--bold {
   background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
 }
+.l-section.dsa-section.dsa-section--transition-to-accent {
+  background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-bold {
+  background-image: var(--dsa-section--transition_to-bold, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-default {
+  background-image: var(--dsa-section--transition_to-default, linear-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-inverted {
+  background-image: var(--dsa-section--transition_to-inverted, linear-gradient(180deg, transparent 80%, var(--ks-background-color-default-inverted) 80%));
+}
 .l-section.dsa-section--header-spacing {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space_default));
 }
@@ -137,26 +125,22 @@
 .l-section.dsa-section--header-spacing.l-section--space-before-small {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
 }
-.l-section.dsa-section-style--stagelights {
-  background-image: var(--dsa-section_stagelights--background-image, radial-gradient(50% 150% at 100% -50%, var(--ks-color-primary-inverted-alpha-3) 0%, transparent 100%), radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%));
+.l-section.dsa-section-style--framed {
+  --frame-background-color: var(--ks-background-color-accent);
 }
-.l-section.dsa-section-style--anchor-glow {
-  background-image: var(--dsa-section_anchor-glow--background-image, radial-gradient(50% 50% at 50% 100%, var(--ks-color-secondary-alpha-5) 0%, transparent 100%));
+.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
+  padding: var(--dsa-section--space_default);
+  background-color: var(--frame-background-color, var(--ks-background-color-default));
+  border-radius: var(--ks-border-radius-surface);
 }
-.l-section.dsa-section-style--symmetric-glow {
-  background-image: var(--dsa-section_symmetric-glow--background-image, radial-gradient(20% 50% at 100% 50%, var(--ks-color-primary-alpha-5) 0%, transparent 100%), radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%));
+.l-section.dsa-section-style--framed.l-section--accent, .l-section.dsa-section-style--framed.l-section--bold {
+  --frame-background-color: var(--ks-background-color-default);
 }
-.l-section.dsa-section-style--accent-transition {
-  background-image: var(--dsa-section_accent-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
+.l-section.dsa-section-style--deko {
+  background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
 }
-.l-section.dsa-section-style--bold-transition {
-  background-image: var(--dsa-section_bold-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
-}
-.l-section.dsa-section-style--vertical-gradient {
-  background-image: var(--dsa-section_vertical-gradient--background-image, linear-gradient(0deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
-}
-.l-section.dsa-section-style--horizontal-gradient {
-  background-image: var(--dsa-section_horizontal-gradient--background-image, linear-gradient(90deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+.l-section.dsa-section-style--colorful {
+  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
 }
 .l-section.dsa-section--spotlight {
   position: relative;
@@ -187,9 +171,12 @@
   --l-section_tile-width--largest: var(--dsa-section__col--min-width_largest, var(--dsa-tile--width_largest));
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
 }
+.l-section.dsa-section .l-section__content--tiles-full {
+  --l-section_col--min-width: 100%;
+}
 .l-section.dsa-section .l-section__content--slider {
   padding: var(--ks-spacing-s) 0;
 }
 .l-section.dsa-section .l-section__content--slider:after {
-  min-width: calc(50vw - var(--dsa-section_col--min-width) / 2 - var(--dsa-section--gutter) * 1.25);
+  min-width: calc(50vw - var(--l-section_col--min-width) / 2 - var(--l-section--gutter) * 1.25);
 }