@nascentdigital/funnel-ui 4.4.18

package/dist/styles/blocks/Stats.css

@@ -0,0 +1,38 @@
+@layer components {
+
+    :root {
+        --nd-stats-content-gap: theme('spacing.l8');
+        --nd-stats-copy-gap: theme('spacing.l8');
+        --nd-stats-stats-gap: theme('spacing.l8');
+        --nd-stats-stats-gap-x: var(--nd-stats-stats-gap);
+        --nd-stats-stats-gap-y: var(--nd-stats-stats-gap);
+    }
+
+    .nd-Stats-content {
+        @apply container-p;
+        @apply flex flex-col gap-[var(--nd-stats-content-gap)];
+    }
+
+    .nd-Stats-copy {
+        @apply flex flex-col gap-[var(--nd-stats-copy-gap)];
+    }
+
+    /* classic layout */
+    .nd-Stats-layout-classic {
+        .nd-Stats-stats {
+            display: grid;
+            column-gap: var(--nd-stats-stats-gap-x);
+            row-gap: var(--nd-stats-stats-gap-y);
+            grid-template-columns: 1fr;
+            overflow-wrap: break-word;
+
+            @media screen(md) {
+                grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
+
+                &[data-stats-count="3"],
+                &[data-stats-count="5"],
+                &[data-stats-count="6"] {--columns: 3}
+            }
+        }
+    }
+}

package/dist/styles/blocks/Testimonial.css

@@ -0,0 +1,323 @@
+@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 */
+    .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

@@ -0,0 +1,135 @@
+@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

@@ -0,0 +1,14 @@
+@import "./Block-layout.css";
+@import "./Block-spacing.css";
+@import "./Block-theming.css";
+@import "./Clients.css";
+@import "./Editorial.css";
+@import "./Form.css";
+@import "./MediaLayout.css";
+@import "./Message.css";
+@import "./Outcome.css";
+@import "./Projects.css";
+@import "./Stat.css";
+@import "./Stats.css";
+@import "./Testimonial.css";
+@import "./ValueProp.css";

package/dist/styles/components/_index.css

@@ -0,0 +1,3 @@
+@import "./embed/_index.css";
+@import "./container.css";
+@import "./divider.css";

package/dist/styles/components/container.css

@@ -0,0 +1,58 @@
+@layer components {
+
+    :root {
+        --nd-container-size: theme('screens.xl');
+        --nd-container-size-wide: 1800px;
+        --nd-container-gutter-xs: 24px;
+        --nd-container-gutter-wide-xs: var(--nd-container-gutter-xs);
+        --nd-container-gutter-sm: 40px;
+        --nd-container-gutter-wide-sm: var(--nd-container-gutter-sm);
+        --nd-container-gutter-md: 80px;
+        --nd-container-gutter-wide-md: var(--nd-container-gutter-md);
+        --nd-container-gutter-lg: 102px;
+        --nd-container-gutter-wide-lg: var(--nd-container-gutter-lg);
+        --nd-container-gutter-xl: 102px;
+        --nd-container-gutter-wide-xl: 80px;
+
+        --nd-container-gutter: var(--nd-container-gutter-xs);
+        --nd-container-gutter-wide: var(--nd-container-gutter-wide-xs);
+        @media screen(sm) {
+            --nd-container-gutter: var(--nd-container-gutter-sm);
+            --nd-container-gutter-wide: var(--nd-container-gutter-wide-sm);
+        }
+        @media screen(md) {
+            --nd-container-gutter: var(--nd-container-gutter-md);
+            --nd-container-gutter-wide: var(--nd-container-gutter-wide-md);
+        }
+        @media screen(lg) {
+            --nd-container-gutter: var(--nd-container-gutter-lg);
+            --nd-container-gutter-wide: var(--nd-container-gutter-wide-lg);
+        }
+        @media screen(xl) {
+            --nd-container-gutter: var(--nd-container-gutter-xl);
+            --nd-container-gutter-wide: var(--nd-container-gutter-wide-xl);
+        }
+    }
+
+    .container {
+        @apply max-w-[var(--nd-container-size)] mx-auto;
+    }
+    .container-wide {
+        @apply max-w-[var(--nd-container-size-wide)] mx-auto;
+    }
+    .container-gutter {
+        @apply px-[var(--nd-container-gutter)];
+    }
+    .container-gutter-wide {
+        @apply px-[var(--nd-container-gutter-wide)];
+    }
+    .container-p {
+        @apply container container-gutter;
+    }
+    .container-wide-p {
+        @apply container-wide container-gutter-wide;
+    }
+    .container-none {
+        @apply max-w-none px-revert;
+    }
+}

package/dist/styles/components/divider.css

@@ -0,0 +1,6 @@
+@layer components {
+
+    .divider {
+        @apply block w-full border-t;
+    }
+}

package/dist/styles/components/embed/VimeoPlayer.css

@@ -0,0 +1,49 @@
+@layer components {
+
+    .nd-VimeoPlayer {
+
+        /* base state */
+        .nd-VimeoPlayer-container {
+            @apply relative w-full h-full;
+
+            .nd-VimeoPlayer-thumbnail {
+                @apply absolute inset-0 z-supersurface select-none;
+            }
+
+            .nd-VimeoPlayer-player {
+                @apply absolute w-full h-full z-surface;
+                iframe {
+                    @apply absolute w-full h-full inset-0 pointer-events-none z-surface;
+                }
+            }
+        }
+
+        /* ready */
+        &.nd-VimeoPlayer-ready {
+
+            .nd-VimeoPlayer-thumbnail {
+                @apply cursor-pointer;
+            }
+        }
+
+        /* started */
+        &.nd-VimeoPlayer-started {
+
+            .nd-VimeoPlayer-thumbnail {
+                @apply opacity-none interpolate-slow;
+            }
+        }
+
+        /* playing */
+        &.nd-VimeoPlayer-playing {
+        }
+
+        /* no controls */
+        &.nd-VimeoPlayer-noControls {
+
+            .nd-VimeoPlayer-thumbnail {
+                @apply !cursor-default;
+            }
+        }
+    }
+}

package/dist/styles/components/embed/YoutubePlayer.css

@@ -0,0 +1,72 @@
+@layer components {
+
+    .nd-YoutubePlayer {
+
+        /* base state */
+        .nd-YoutubePlayer-container {
+            @apply relative w-full h-full overflow-hidden !select-none;
+            @apply flex flex-col justify-center;
+
+            .nd-YoutubePlayer-thumbnail {
+                @apply absolute inset-0 z-supersurface;
+            }
+
+            iframe {
+                @apply absolute w-full h-full border-none outline-none pointer-events-none z-surface;
+            }
+        }
+
+        /* ready */
+        &.nd-YoutubePlayer-ready {
+
+            .nd-YoutubePlayer-thumbnail {
+                @apply cursor-pointer;
+            }
+        }
+
+        /* started */
+        &.nd-YoutubePlayer-started {
+
+            .nd-YoutubePlayer-thumbnail {
+                @apply opacity-none pointer-events-none interpolate-slow;
+            }
+            iframe {
+                @apply pointer-events-auto;
+            }
+        }
+
+        /* playing */
+        &.nd-YoutubePlayer-playing {
+        }
+
+        /* experimental mode (custom controls) */
+        &.nd-YoutubePlayer-experimental {
+
+            /* base */
+            iframe {
+                width: 2400%;
+                height: 100%;
+                margin-left: -1149.95%;
+            }
+
+            /* started */
+            &.nd-YoutubePlayer-started {
+
+                .nd-YoutubePlayer-thumbnail {
+                    @apply pointer-events-auto;
+                }
+                iframe {
+                    @apply pointer-events-none;
+                }
+            }
+        }
+
+        /* no controls */
+        &.nd-YoutubePlayer-noControls {
+
+            .nd-YoutubePlayer-thumbnail {
+                @apply !cursor-default !pointer-events-auto;
+            }
+        }
+    }
+}

package/dist/styles/components/embed/_index.css

@@ -0,0 +1,2 @@
+@import "./VimeoPlayer.css";
+@import "./YoutubePlayer.css";