@nascentdigital/funnel-ui 4.4.18

package/dist/styles/blocks/MediaLayout.css

@@ -0,0 +1,215 @@
+@layer components {
+
+    :root {
+        --nd-medialayout-gap: theme('spacing.l8');
+        --nd-medialayout-poster-gap: unset;
+        --nd-medialayout-1col-gap: var(--nd-medialayout-gap);
+        --nd-medialayout-2col-gap: var(--nd-medialayout-gap);
+        --nd-medialayout-brick-gap: var(--nd-medialayout-gap);
+        @media screen(md) {
+            --nd-medialayout-gap: theme('spacing.l9');
+        }
+        @media screen(lg) {
+            --nd-medialayout-gap: theme('spacing.l10');
+        }
+    }
+
+    /* base */
+    .nd-MediaLayout {
+    }
+
+
+    /* poster */
+    .nd-MediaLayout-layout-poster {
+
+        .nd-MediaLayout-content {
+            @apply flex flex-col gap-[var(--nd-medialayout-poster-gap)];
+        }
+        .nd-MediaLayout-itemWrap {
+            @apply w-full aspect-cinema lg:aspect-cinemascope;
+        }
+        .nd-MediaLayout-item {
+            @apply w-full object-cover;
+        }
+    }
+
+    /* 1col */
+    .nd-MediaLayout-layout-1col {
+
+        .nd-MediaLayout-content {
+            @apply container-wide-p flex flex-col gap-[var(--nd-medialayout-1col-gap)];
+        }
+        .nd-MediaLayout-itemWrap {
+            @apply w-full;
+        }
+        .nd-MediaLayout-item {
+            @apply w-full object-cover;
+        }
+    }
+
+    /* 2col */
+    ._nd-MediaLayout-layout-2col-mobile {
+        .nd-MediaLayout-content {
+            @apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-2col-gap)];
+        }
+        .nd-MediaLayout-itemWrap {
+            @apply block max-w-full aspect-tv overflow-hidden;
+        }
+        .nd-MediaLayout-item {
+            @apply w-full h-full object-cover object-center;
+        }
+    }
+    ._nd-MediaLayout-layout-2col-desktop {
+        .nd-MediaLayout-content {
+            @apply container-wide-p grid grid-cols-2 grid-flow-row gap-[var(--nd-medialayout-2col-gap)];
+        }
+        .nd-MediaLayout-itemWrap {
+            @apply w-full col-span-1 aspect-tv overflow-hidden;
+
+            /* make full width if a solo last child */
+            &:nth-child(odd):last-child {
+                @apply col-span-full aspect-cinema;
+            }
+        }
+        .nd-MediaLayout-item {
+            @apply w-full h-full object-cover object-center;
+        }
+    }
+    .nd-MediaLayout-layout-2col {
+        @apply max-md:_nd-MediaLayout-layout-2col-mobile md:_nd-MediaLayout-layout-2col-desktop;
+    }
+
+    /* brick */
+    ._nd-MediaLayout-layout-brick-mobile {
+
+        .nd-MediaLayout-content {
+            @apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-brick-gap)];
+        }
+        .nd-MediaLayout-itemWrap {
+            @apply block max-w-full aspect-widescreen overflow-hidden;
+        }
+        .nd-MediaLayout-item {
+            @apply w-full h-full object-cover object-center;
+        }
+    }
+    ._nd-MediaLayout-layout-brick-desktop {
+
+        /* base */
+        .nd-MediaLayout-content {
+            @apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
+        }
+        .nd-MediaLayout-itemWrap {
+            @apply block max-w-full col-span-1 aspect-tv overflow-hidden;
+
+            /* every 1, 4, 7, 10, 13 and so on images will be full width */
+            &:nth-child(3n + 1) {
+                @apply col-span-full aspect-cinema;
+            }
+        }
+        .nd-MediaLayout-item {
+            @apply w-full h-full object-cover object-center;
+        }
+
+        /* if the total number of images are 2, 5, 8, 11, 14 and so on, then make last 2 single */
+        .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:nth-child(3n+2):last-child) {
+
+            .nd-MediaLayout-itemWrap {
+                &:nth-last-child(1), &:nth-last-child(2) {
+                    @apply col-span-1 aspect-tv;
+                }
+            }
+        }
+    }
+    .nd-MediaLayout-layout-brick {
+        @apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brick-desktop;
+    }
+
+
+    /* brick */
+    ._nd-MediaLayout-layout-brickAlt-desktop {
+
+        /* base */
+        .nd-MediaLayout-content {
+            @apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
+        }
+        .nd-MediaLayout-itemWrap {
+            @apply block max-w-full col-span-1 aspect-tv overflow-hidden;
+
+            /* every 3, 6, 9, 12, 15 and so on images will be full width */
+            &:nth-child(3n) {
+                @apply col-span-full aspect-cinema;
+            }
+        }
+        .nd-MediaLayout-item {
+            @apply w-full h-full object-cover object-center;
+        }
+
+        /* if the total number of images are 1, 4, 7, 10, 13, 16 and so on, then make last 2 single */
+        .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:nth-child(3n+2):last-child) {
+
+            .nd-MediaLayout-itemWrap {
+                &:nth-last-child(1), &:nth-last-child(2) {
+                    @apply col-span-1 aspect-tv;
+                }
+            }
+        }
+
+        /* single image would be full width */
+        .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:first-child:last-child) {
+
+            /* make it full width */
+            .nd-MediaLayout-itemWrap {
+                @apply col-span-full aspect-cinema;
+            }
+        }
+    }
+    .nd-MediaLayout-layout-brickAlt {
+        @apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brickAlt-desktop;
+    }
+}
+
+
+@layer components {
+
+    /* desktop overrides */
+    @media screen(md) {
+        .nd-MediaGrid-root {
+
+            /* brick layout flipped */
+            &.nd-MediaGrid-brickFlipped {
+                .nd-MediaGrid-content {
+                    @apply grid-cols-2;
+
+                    .nd-MediaGrid-visual {
+                        @apply col-span-1;
+
+                        /* every 3, 6, 9, 12, 15 and so on images will be full width */
+                        &:nth-child(3n) {
+                            @apply col-span-full aspect-widescreen;
+                        }
+                    }
+
+                    /* if the total number of images are 1, 4, 7, 10, 13, 16 and so on  */
+                    &:has(.nd-MediaGrid-visual:nth-child(3n+1):last-child) {
+
+                        /* make the last two images take 50-50 of the screen width */
+                        .nd-MediaGrid-visual {
+                            &:nth-last-child(2) {
+                                @apply col-span-1 aspect-tv;
+                            }
+                        }
+                    }
+
+                    /* if there is only one image  */
+                    &:has(.nd-MediaGrid-visual:first-child:last-child) {
+
+                        /* make it full width */
+                        .nd-MediaGrid-visual {
+                            @apply col-span-full aspect-widescreen;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/dist/styles/blocks/Message.css

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

package/dist/styles/blocks/Outcome.css

@@ -0,0 +1,83 @@
+@layer components {
+
+    /* variables */
+    :root {
+        --nd-outcome-gap-x: theme('spacing.l10');
+        --nd-outcome-gap-y: theme('spacing.l13');
+        --nd-outome-intro-gap: theme('spacing.l8');
+        --nd-outome-intro-title-mb: theme('spacing.l3');
+        --nd-outome-intro-headline-mb: unset;
+        --nd-outome-intro-caption-mb: unset;
+        --nd-outome-details-gap: theme('spacing.l11');
+        --nd-outome-detail-gap: theme('spacing.l6');
+        --nd-outome-detail-title-mb: theme('spacing.l2');
+        --nd-outome-detail-headline-mb: unset;
+        --nd-outome-detail-caption-mb: unset;
+    }
+
+    /* base */
+    .nd-Outcome {
+
+        /* content */
+        .nd-Outcome-content {
+            @apply container-p;
+            @apply flex flex-col max-md:gap-[var(--nd-outcome-gap-y)];
+            @apply md:grid md:grid-cols-2 md:gap-x-[var(--nd-outcome-gap-x)] md:gap-y-[var(--nd-outcome-gap-y)];
+        }
+
+        /* intro */
+        .nd-Outcome-introWrap {
+        }
+        .nd-Outcome-intro {
+            @apply flex flex-col;
+        }
+        .nd-Outcome-title {
+            margin-bottom: var(--nd-outome-intro-title-mb, var(--nd-outome-intro-gap));
+        }
+        .nd-Outcome-headline {
+            &:not(:last-child) {
+                margin-bottom: var(--nd-outome-intro-headline-mb, var(--nd-outome-intro-gap));
+            }
+        }
+        .nd-Outcome-caption {
+            &:not(:last-child) {
+                margin-bottom: var(--nd-outome-intro-caption-mb, var(--nd-outome-intro-gap));
+            }
+        }
+        .nd-Outcome-link {
+        }
+
+        /* visual */
+        .nd-Outcome-visualWrap {
+            @apply md:col-start-2 md:row-span-2;
+        }
+        .nd-Outcome-visual {
+            @apply block;
+        }
+
+        /* details */
+        .nd-Outcome-detailsWrap {
+        }
+        .nd-Outcome-details {
+            @apply flex flex-col gap-[var(--nd-outome-details-gap)];
+        }
+        .nd-Outcome-detail {
+            @apply flex flex-col;
+        }
+        .nd-Outcome-detail-title {
+            margin-bottom: var(--nd-outome-detail-title-mb, var(--nd-outome-detail-gap));
+        }
+        .nd-Outcome-detail-headline {
+            &:not(:last-child) {
+                margin-bottom: var(--nd-outome-detail-headline-mb, var(--nd-outome-detail-gap));
+            }
+        }
+        .nd-Outcome-detail-caption {
+            &:not(:last-child) {
+                margin-bottom: var(--nd-outome-detail-caption-mb, var(--nd-outome-detail-gap));
+            }
+        }
+        .nd-Outcome-detail-link {
+        }
+    }
+}

package/dist/styles/blocks/Projects.css

@@ -0,0 +1,18 @@
+@layer components {
+
+    :root {
+    }
+
+    /* base */
+    .nd-Projects {
+
+
+
+
+    }
+
+    /* layout: masonry */
+    .nd-Projects .nd-MasonryLayout {
+        @apply container-p;
+    }
+}

package/dist/styles/blocks/Stat.css

@@ -0,0 +1,45 @@
+@layer components {
+
+    :root {
+        --nd-stat-copy-gap: 0px;
+        --nd-stat-copy-padding: unset;
+
+        --nd-stat-value-font: normal 500 20px/1 Helvetica, Arial, san-serif;
+        --nd-stat-value-letterspacing: unset;
+        --nd-stat-value-color: inherit;
+        --nd-stat-value-margin: unset;
+
+        --nd-stat-label-font: normal 500 20px/1 Helvetica, Arial, san-serif;
+        --nd-stat-label-letterspacing: unset;
+        --nd-stat-label-color: inherit;
+        --nd-stat-label-margin: unset;
+
+        --nd-stat-description-font: normal 500 20px/1 Helvetica, Arial, san-serif;
+        --nd-stat-description-letterspacing: unset;
+        --nd-stat-description-color: inherit;
+        --nd-stat-description-margin: unset;
+    }
+
+    .nd-Stat-copy {
+        @apply flex flex-col gap-[var(--nd-stat-copy-gap)];
+        padding: var(--nd-stat-copy-padding);
+    }
+    .nd-Stat-value {
+        font: var(--nd-stat-value-font);
+        letter-spacing: var(--nd-stat-value-letterspacing);
+        color: var(--nd-stat-value-color);
+        margin: var(--nd-stat-value-margin);
+    }
+    .nd-Stat-label {
+        font: var(--nd-stat-label-font);
+        letter-spacing: var(--nd-stat-label-letterspacing);
+        color: var(--nd-stat-label-color);
+        margin: var(--nd-stat-label-margin);
+    }
+    .nd-Stat-description {
+        --nd-description-font: var(--nd-stat-description-font);
+        --nd-description-letterspacing: var(--nd-stat-description-letterspacing);
+        --nd-description-color: var(--nd-stat-description-color);
+        margin: var(--nd-stat-description-margin);
+    }
+}