@nascentdigital/funnel-ui 4.4.21 → 4.5.0

package/dist/styles/blocks/Testimonial.css

@@ -1,323 +1,6 @@
 @layer components {
 
-    :root {
-        --nd-testimonial-copy-gap: theme('spacing.l8');
-        --nd-testimonial-ctas-gap: theme('spacing.l8');
-
-        --nd-testimonial-visual-rounding: 0px;
-        --nd-testimonial-visual-gap-x: theme('spacing.l5');
-        --nd-testimonial-visual-gap-y: theme('spacing.l11');
-        --nd-testimonial-visual-padding: theme('spacing.l15');
-
-        @media screen(sm) {
-            --nd-testimonial-visual-gap-x: theme('spacing.l8');
-            --nd-testimonial-visual-gap-y: theme('spacing.l11');
-            --nd-testimonial-visual-padding: theme('spacing.l15');
-        }
-        @media screen(md) {
-            --nd-testimonial-visual-gap-x: theme('spacing.l12');
-            --nd-testimonial-visual-gap-y: theme('spacing.l13');
-            --nd-testimonial-visual-padding: theme('spacing.l18');
-        }
-        @media screen(lg) {
-            --nd-testimonial-visual-gap-x: theme('spacing.l15');
-            --nd-testimonial-visual-gap-y: theme('spacing.l13');
-            --nd-testimonial-visual-padding: theme('spacing.l18');
-        }
-    }
-
-    /* base */
+    /* testimonial */
     .nd-Testimonial {
-        @apply flex items-center;
-
-        .nd-Testimonial-content {
-            @apply w-full;
-        }
-        .nd-Testimonial-visual {
-            @apply block;
-        }
-        .nd-Testimonial-copy {
-            @apply flex flex-col gap-[var(--nd-testimonial-copy-gap)];
-        }
-        .nd-Testimonial-ctas {
-            @apply flex flex-wrap items-center gap-[var(--nd-testimonial-ctas-gap)] mt-l6;
-        }
-    }
-
-
-    /* visual layouts */
-    ._nd-Testimonial-visual-x-mobile {
-        .nd-Testimonial-content {
-            @apply flex flex-col gap-[var(--nd-testimonial-visual-gap-y)];
-        }
-
-        .nd-Testimonial-visualWrap {
-            @apply order-last;
-        }
-        .nd-Testimonial-copyWrap {
-            @apply container-p;
-        }
-        .nd-Testimonial-copy {
-            @apply items-center text-center;
-        }
-        .nd-Testimonial-ctas {
-            @apply justify-center;
-        }
-
-        &:not(.nd-Block-fullbleed) {
-            .nd-Testimonial-visualWrap {
-                @apply container-p;
-            }
-            .nd-Testimonial-visual {
-                @apply overflow-hidden;
-                border-radius: var(--nd-testimonial-visual-rounding);
-            }
-        }
-    }
-    ._nd-Testimonial-visual-x-desktop {
-        .nd-Testimonial-content {
-            @apply stacked;
-        }
-
-        .nd-Testimonial-visualWrap {
-            @apply grid grid-cols-12 items-center gap-[var(--nd-testimonial-visual-gap-x)];
-        }
-        .nd-Testimonial-visual {
-            @apply col-span-6;
-        }
-        .nd-Testimonial-copyWrap {
-            @apply container-p grid grid-cols-12 items-center gap-[var(--nd-testimonial-visual-gap-x)];
-        }
-        .nd-Testimonial-copy {
-            @apply col-span-6 items-start text-left;
-        }
-
-        &:not(:has(.nd-Testimonial-visual)) {
-            .nd-Testimonial-copy {
-                @apply col-span-full;
-            }
-        }
-
-        &:not(.nd-Block-fullbleed) {
-            .nd-Testimonial-visualWrap {
-                @apply container-p;
-            }
-            .nd-Testimonial-visual {
-                @apply overflow-hidden;
-                border-radius: var(--nd-testimonial-visual-rounding);
-            }
-        }
-    }
-    .nd-Testimonial.nd-Block-visual-left {
-        @apply max-md:_nd-Testimonial-visual-x-mobile md:_nd-Testimonial-visual-x-desktop;
-
-        .nd-Testimonial-visual {
-            @apply md:col-start-1;
-        }
-        .nd-Testimonial-copy {
-            @apply md:col-start-7;
-        }
-    }
-    .nd-Testimonial.nd-Block-visual-right {
-        @apply max-md:_nd-Testimonial-visual-x-mobile md:_nd-Testimonial-visual-x-desktop;
-
-        .nd-Testimonial-visual {
-            @apply md:col-start-7;
-        }
-        .nd-Testimonial-copy {
-            @apply md:col-start-1;
-        }
-    }
-    ._nd-Testimonial-visual-y {
-        .nd-Testimonial-content {
-            @apply flex flex-col gap-[var(--nd-testimonial-visual-gap-y)];
-        }
-
-        .nd-Testimonial-visual > * {
-            @apply mx-auto;
-        }
-        .nd-Testimonial-copyWrap {
-            @apply container-p grid grid-cols-12;
-        }
-        .nd-Testimonial-copy {
-            @apply col-start-1 col-span-full items-center text-center;
-        }
-
-        &:not(.nd-Block-fullbleed) {
-            .nd-Testimonial-visualWrap {
-                @apply container-p;
-            }
-            .nd-Testimonial-visual {
-                @apply overflow-hidden;
-                border-radius: var(--nd-testimonial-visual-rounding);
-            }
-        }
-    }
-    .nd-Testimonial.nd-Block-visual-top {
-        @apply _nd-Testimonial-visual-y;
-    }
-    .nd-Testimonial.nd-Block-visual-btm {
-        @apply _nd-Testimonial-visual-y;
-
-        .nd-Testimonial-visualWrap {
-            @apply order-last;
-        }
-    }
-    ._nd-Testimonial-visual-bg-mobile {
-        .nd-Testimonial-content {
-            @apply stacked;
-        }
-
-        .nd-Testimonial-visual img,
-        .nd-Testimonial-visual video {
-            @apply min-h-lvh object-cover;
-        }
-        .nd-Testimonial-copyWrap {
-            @apply z-overlay;
-            @apply container-p grid grid-cols-12 items-center py-[var(--nd-testimonial-visual-padding)];
-        }
-        .nd-Testimonial-copy {
-            @apply col-start-1 col-span-full items-center text-center;
-        }
-        &:not(.nd-Block-fullbleed) {
-            .nd-Testimonial-visualWrap {
-                @apply container-p;
-            }
-            .nd-Testimonial-visual {
-                @apply overflow-hidden;
-                border-radius: var(--nd-testimonial-visual-rounding);
-            }
-        }
-
-        /* copy placement */
-        &.nd-Block-copy-center {
-        }
-        &.nd-Block-copy-top .nd-Testimonial-copyWrap {
-            @apply items-start;
-        }
-        &.nd-Block-copy-btm .nd-Testimonial-copyWrap {
-            @apply items-end;
-        }
-        &.nd-Block-copy-left .nd-Testimonial-copy {
-            @apply col-start-1 items-start text-left;
-        }
-        &.nd-Block-copy-left-top {
-            .nd-Testimonial-copyWrap {
-                @apply items-start;
-            }
-            .nd-Testimonial-copy {
-                @apply col-start-1 items-start text-left;
-            }
-        }
-        &.nd-Block-copy-left-btm {
-            .nd-Testimonial-copyWrap {
-                @apply items-end;
-            }
-            .nd-Testimonial-copy {
-                @apply col-start-1 items-start text-left;
-            }
-        }
-        &.nd-Block-copy-right .nd-Testimonial-copy {
-            @apply col-end-12 items-end text-right;
-        }
-        &.nd-Block-copy-right-top {
-            .nd-Testimonial-copyWrap {
-                @apply items-start;
-            }
-            .nd-Testimonial-copy {
-                @apply col-end-12 items-end text-right;
-            }
-        }
-        &.nd-Block-copy-right-btm {
-            .nd-Testimonial-copyWrap {
-                @apply items-end;
-            }
-            .nd-Testimonial-copy {
-                @apply col-end-12 items-end text-right;
-            }
-        }
-    }
-    ._nd-Testimonial-visual-bg-desktop {
-        .nd-Testimonial-content {
-            @apply stacked;
-        }
-
-        &:not(.nd-Block-fullbleed) {
-            .nd-Testimonial-visualWrap {
-                @apply container-p;
-            }
-            .nd-Testimonial-visual {
-                @apply overflow-hidden;
-                border-radius: var(--nd-testimonial-visual-rounding);
-            }
-        }
-        .nd-Testimonial-copyWrap {
-            @apply z-overlay;
-            @apply container-p grid grid-cols-12 items-center py-[var(--nd-testimonial-visual-padding)];
-        }
-        .nd-Testimonial-copy {
-            @apply col-start-3 col-span-8 items-center text-center;
-        }
-
-        /* copy placement */
-        &.nd-Block-copy-center {
-        }
-        &.nd-Block-copy-top .nd-Testimonial-copyWrap {
-            @apply items-start;
-        }
-        &.nd-Block-copy-btm .nd-Testimonial-copyWrap {
-            @apply items-end;
-        }
-        &.nd-Block-copy-left .nd-Testimonial-copy {
-            @apply col-start-1 items-start text-left;
-        }
-        &.nd-Block-copy-left-top {
-            .nd-Testimonial-copyWrap {
-                @apply items-start;
-            }
-            .nd-Testimonial-copy {
-                @apply col-start-1 items-start text-left;
-            }
-        }
-        &.nd-Block-copy-left-btm {
-            .nd-Testimonial-copyWrap {
-                @apply items-end;
-            }
-            .nd-Testimonial-copy {
-                @apply col-start-1 items-start text-left;
-            }
-        }
-        &.nd-Block-copy-right .nd-Testimonial-copy {
-            @apply col-end-12 items-end text-right;
-        }
-        &.nd-Block-copy-right-top {
-            .nd-Testimonial-copyWrap {
-                @apply items-start;
-            }
-            .nd-Testimonial-copy {
-                @apply col-end-12 items-end text-right;
-            }
-        }
-        &.nd-Block-copy-right-btm {
-            .nd-Testimonial-copyWrap {
-                @apply items-end;
-            }
-            .nd-Testimonial-copy {
-                @apply col-end-12 items-end text-right;
-            }
-        }
-    }
-    .nd-Testimonial.nd-Block-visual-bg {
-        @apply max-md:_nd-Testimonial-visual-bg-mobile md:_nd-Testimonial-visual-bg-desktop;
-
-        &.nd-Block-fullbleed {
-            @apply min-h-0;
-
-            .nd-Testimonial-visual {
-                img, video {
-                    @apply w-full object-cover;
-                }
-            }
-        }
     }
 }

package/dist/styles/blocks/ValueProp.css

@@ -1,135 +1,9 @@
 @layer components {
 
     :root {
-        --nd-valueprop-content-gap: theme('spacing.l12');
-        --nd-valueprop-copy-gap: theme('spacing.l6');
-        --nd-valueprop-cards-gap-usp: theme('spacing.l8');
-        --nd-valueprop-riverflow-gap-copy: theme('spacing.l10');
-        --nd-valueprop-riverflow-gap-usp: theme('spacing.l11');
-        --nd-valueprop-lineup-gap: theme('spacing.l13');
-
-        @media screen(sm) {
-            --nd-valueprop-content-gap: theme('spacing.l13');
-            --nd-valueprop-cards-gap-usp: theme('spacing.l8');
-            --nd-valueprop-riverflow-gap-usp: theme('spacing.l13');
-        }
-        @media screen(md) {
-            --nd-valueprop-content-gap: theme('spacing.l16');
-            --nd-valueprop-cards-gap-usp: theme('spacing.l8');
-            --nd-valueprop-riverflow-gap-usp: theme('spacing.l15');
-            --nd-valueprop-lineup-gap: theme('spacing.l12');
-        }
-        @media screen(lg) {
-            --nd-valueprop-content-gap: theme('spacing.l16');
-            --nd-valueprop-cards-gap-usp: theme('spacing.l9');
-            --nd-valueprop-riverflow-gap-usp: theme('spacing.l16');
-        }
     }
 
     /* base */
     .nd-ValueProp {
     }
-    .nd-ValueProp-content {
-        @apply container-p flex flex-col gap-[var(--nd-valueprop-content-gap)];
-    }
-    .nd-ValueProp-copy {
-        @apply flex flex-col gap-[var(--nd-valueprop-copy-gap)];
-    }
-
-    /* layout: cards */
-    ._nd-ValueProp-cards-mobile {
-        .nd-ValueProp-usps {
-            @apply flex flex-col gap-[var(--nd-valueprop-cards-gap-usp)];
-        }
-        .nd-UniqueSellingPoint {
-            @apply flex flex-col gap-[var(--nd-valueprop-cards-gap-copy)];
-        }
-    }
-    ._nd-ValueProp-cards-desktop {
-
-        .nd-ValueProp-usps {
-            @apply grid grid-cols-3 auto-cols-fr gap-[--nd-valueprop-cards-gap-usp];
-        }
-
-        .nd-UniqueSellingPoint {
-
-            .nd-UniqueSellingPoint-content {
-                @apply flex flex-col;
-            }
-            .nd-UniqueSellingPoint-copyWrap {
-            }
-            .nd-UniqueSellingPoint-visualWrap {
-            }
-      }
-    }
-    .nd-ValueProp.nd-ValueProp-layout-cards {
-        @apply max-md:_nd-ValueProp-cards-mobile md:_nd-ValueProp-cards-desktop;
-    }
-
-    /* layout: riverflow */
-    ._nd-ValueProp-riverflow-mobile {
-        .nd-ValueProp-usps {
-            @apply flex flex-col gap-[var(--nd-valueprop-riverflow-gap-usp)];
-        }
-        .nd-UniqueSellingPoint {
-            @apply flex flex-col gap-[var(--nd-valueprop-riverflow-gap-copy)];
-
-            .nd-UniqueSellingPoint-visualWrap {
-                @apply order-last;
-            }
-        }
-    }
-    ._nd-ValueProp-riverflow-desktop {
-
-        .nd-ValueProp-usps {
-            @apply flex flex-col gap-[--nd-valueprop-riverflow-gap-usp];
-        }
-
-        .nd-UniqueSellingPoint {
-
-            /* base */
-            .nd-UniqueSellingPoint-content {
-                @apply grid grid-cols-12 items-center gap-[var(--nd-valueprop-content-copy-gap)];
-            }
-            .nd-UniqueSellingPoint-copyWrap {
-                @apply col-start-1 col-span-6 row-start-1;
-            }
-            .nd-UniqueSellingPoint-visualWrap {
-                @apply col-start-7 col-span-6 row-start-1;
-            }
-
-            /* even items */
-            &:nth-child(even) {
-                .nd-UniqueSellingPoint-copyWrap {
-                    @apply col-start-7;
-                }
-
-                .nd-UniqueSellingPoint-visualWrap {
-                    @apply col-start-1;
-                }
-            }
-        }
-    }
-    .nd-ValueProp.nd-ValueProp-layout-riverflow {
-        @apply max-md:_nd-ValueProp-riverflow-mobile md:_nd-ValueProp-riverflow-desktop;
-    }
-
-
-    /* layout: lineup */
-    ._nd-ValueProp-lineup-mobile {
-        .nd-ValueProp-usps {
-            @apply flex flex-col gap-[var(--nd-valueprop-lineup-gap)];
-        }
-    }
-    ._nd-ValueProp-lineup-desktop {
-        .nd-ValueProp-usps {
-            @apply grid grid-cols-12 gap-[var(--nd-valueprop-lineup-gap)];
-        }
-        .nd-ValueProp-usp {
-            @apply col-span-4;
-        }
-    }
-    .nd-ValueProp.nd-ValueProp-layout-lineup {
-        @apply max-md:_nd-ValueProp-lineup-mobile md:_nd-ValueProp-lineup-desktop;
-   }
 }

package/dist/styles/blocks/_index.css

@@ -10,5 +10,6 @@
 @import "./Projects.css";
 @import "./Stat.css";
 @import "./Stats.css";
+@import "./Summary.css";
 @import "./Testimonial.css";
 @import "./ValueProp.css";

package/dist/styles/layouts/BrickLayout.css

@@ -0,0 +1,43 @@
+@layer components {
+
+    :root {
+        --nd-brick-layout-gap: theme('spacing.l8');
+        --nd-brick-layout-gap-x: var(--nd-brick-layout-gap);
+        --nd-brick-layout-gap-y: var(--nd-brick-layout-gap);
+    }
+
+    ._nd-BrickLayout-mobile {
+        grid-template-columns: 1fr;
+    }
+
+    ._nd-BrickLayout-desktop {
+        grid-template-columns: 1fr 1fr;
+
+        &.nd-BrickLayout-flipped {
+            > * {
+
+                /* third */
+                &:nth-child(3n + 3) {
+                    @apply col-span-full;
+                }
+            }
+        }
+        &:not(.nd-BrickLayout-flipped) {
+            > * {
+
+                /* first */
+                &:nth-child(3n + 1) {
+                    @apply col-span-full;
+                }
+            }
+        }
+    }
+
+    .nd-BrickLayout {
+        display: grid;
+        column-gap: var(--nd-brick-layout-gap-x);
+        row-gap: var(--nd-brick-layout-gap-y);
+
+        @apply _nd-BrickLayout-mobile @panel-md:_nd-BrickLayout-desktop;
+    }
+}

package/dist/styles/layouts/CardLayout.css

@@ -0,0 +1,46 @@
+@layer components {
+
+    :root {
+        --nd-card-layout-gap: theme('spacing.l8');
+        --nd-card-layout-gap-x: var(--nd-card-layout-gap);
+        --nd-card-layout-gap-y: var(--nd-card-layout-gap);
+    }
+
+    ._nd-CardLayout-mobile {
+        grid-template-columns: 1fr;
+    }
+    ._nd_CardLayout-md {
+        grid-template-columns: repeat(var(--nd-card-layout-columns, 3), minmax(0, 1fr));
+
+        &[data-card-count="1"],
+        &[data-card-count="2"],
+        &[data-card-count="4"] {--nd-card-layout-columns: 2}
+    }
+    ._nd_CardLayout-lg {
+        grid-template-columns: repeat(var(--nd-card-layout-columns, 3), minmax(0, 1fr));
+
+        &[data-card-count="4"],
+        &[data-card-count="7"],
+        &[data-card-count="8"],
+        &[data-card-count="10"] {--nd-card-layout-columns: 4}
+    }
+
+    .nd-CardLayout {
+        display: grid;
+        column-gap: var(--nd-card-layout-gap-x);
+        row-gap: var(--nd-card-layout-gap-y);
+
+        /* base layout */
+        @apply _nd-CardLayout-mobile;
+
+        /* small item sizes */
+        &.nd-CardLayout-itemSize-sm {
+            @apply @panel-md:_nd_CardLayout-md @panel-lg:_nd_CardLayout-lg;
+        }
+
+        /* large item sizes */
+        &.nd-CardLayout-itemSize-md {
+            @apply @panel-md:_nd_CardLayout-md;
+        }
+    }
+}

package/dist/styles/layouts/FlexWrapLayout.css

@@ -0,0 +1,38 @@
+@layer components {
+
+    :root {
+        --nd-flex-wrap-layout-gap: theme('spacing.l8');
+        --nd-flex-wrap-layout-gap-x: var(--nd-flex-wrap-layout-gap);
+        --nd-flex-wrap-layout-gap-y: var(--nd-flex-wrap-layout-gap);
+    }
+
+    ._nd-FlexWrapLayout-mobile {
+        .nd-FlexWrapLayout-trailing {
+            @apply contents;
+        }
+    }
+
+    ._nd-FlexWrapLayout-desktop {
+        .nd-FlexWrapLayout-trailing {
+            @apply block;
+        }
+    }
+
+    .nd-FlexWrapLayout {
+        @apply flex flex-row flex-wrap items-center;
+        @apply gap-x-[var(--nd-flex-wrap-layout-gap-x)] gap-y-[--nd-flex-wrap-layout-gap-y];
+
+        /* item alignment */
+        &.nd-FlexWrapLayout-itemAlignment-start {
+            @apply justify-start;
+        }
+        &.nd-FlexWrapLayout-itemAlignment-center {
+            @apply justify-center;
+        }
+        &.nd-FlexWrapLayout-itemAlignment-end {
+            @apply justify-end;
+        }
+
+        @apply _nd-FlexWrapLayout-mobile @panel-md:_nd-FlexWrapLayout-desktop;
+    }
+}

package/dist/styles/layouts/GridLayout.css

@@ -0,0 +1,25 @@
+@layer components {
+
+    :root {
+        --nd-grid-layout-gap: theme('spacing.l8');
+        --nd-grid-layout-gap-x: var(--nd-grid-layout-gap);
+        --nd-grid-layout-gap-y: var(--nd-grid-layout-gap);
+        --nd-grid-layout-columns: unset; /* set via js */
+    }
+
+    ._nd-GridLayout-mobile {
+        grid-template-columns: 1fr;
+    }
+
+    ._nd-GridLayout-desktop {
+        grid-template-columns: repeat(var(--nd-grid-layout-columns), minmax(0, 1fr));
+    }
+
+    .nd-GridLayout {
+        display: grid;
+        column-gap: var(--nd-grid-layout-gap-x);
+        row-gap: var(--nd-grid-layout-gap-y);
+
+        @apply _nd-GridLayout-mobile @panel-md:_nd-GridLayout-desktop;
+    }
+}

package/dist/styles/layouts/StackLayout.css

@@ -0,0 +1,46 @@
+@layer components {
+
+    :root {
+        --nd-stack-layout-gap: theme('spacing.l8');
+    }
+
+    ._nd-StackLayout-mobile {
+        grid-auto-flow: row;
+    }
+
+    ._nd-StackLayout-desktop {
+        grid-auto-flow: column;
+
+        &.nd-StackLayout-direction-horizontal {
+            &.nd-StackLayout-itemDistribution-equal {
+                grid-auto-columns: minmax(0, 1fr);
+            }
+            &.nd-StackLayout-itemDistribution-even {
+                grid-auto-columns: auto;
+            }
+            &.nd-StackLayout-itemDistribution-none {
+                grid-auto-columns: auto;
+                justify-content: start;
+            }
+        }
+
+        &.nd-StackLayout-direction-vertical {
+            grid-auto-flow: row;
+
+            &.nd-StackLayout-itemDistribution-equal {
+                grid-auto-rows: minmax(0, 1fr);
+            }
+            &.nd-StackLayout-itemDistribution-even {
+            }
+            &.nd-StackLayout-itemDistribution-none {
+            }
+        }
+    }
+
+    .nd-StackLayout {
+        display: grid;
+        gap: var(--nd-stack-layout-gap);
+
+        @apply _nd-StackLayout-mobile @panel-md:_nd-StackLayout-desktop;
+    }
+}

package/dist/styles/layouts/_index.css

@@ -1 +1,6 @@
-@import "./MasonryLayout.css";
+@import "./CardLayout.css";
+@import "./BrickLayout.css";
+@import "./FlexWrapLayout.css";
+@import "./GridLayout.css";
+@import "./MasonryLayout.css";
+@import "./StackLayout.css";

package/dist/styles/panels/ListPanel.css

@@ -0,0 +1,3 @@
+@layer components {
+
+}