@nascentdigital/funnel-ui 4.4.18

package/dist/styles/blocks/Block-layout.css

@@ -0,0 +1,244 @@
+@layer components {
+
+    /* layout: variables */
+    :root {
+        --nd-block-height-min: calc(min(100dvh, 580px));
+        --nd-block-layout-gap-x: theme('spacing.l10');
+        --nd-block-layout-gap-y: theme('spacing.l13');
+
+        --nd-block-panel-cols-xs: 4;
+        --nd-block-panel-cols-sm: 6;
+        --nd-block-panel-cols-md: 8;
+        --nd-block-panel-cols-lg: 10;
+        --nd-block-panel-cols-full: 12;
+        --nd-block-panel-cols: var(--nd-block-panel-cols-full);
+
+        @media screen(sm) {
+        }
+        @media screen(md) {
+        }
+        @media screen(lg) {
+        }
+        @media screen(xl) {
+        }
+    }
+
+
+    /* layout */
+    .nd-Block {
+        min-height: var(--nd-block-height-min);
+    }
+    .nd-Block-root {
+    }
+
+    /* container/fullbleed */
+    ._nd-Block-containable {
+
+        /* container */
+        &.nd-Block-root > .nd-BlockPanel {
+            @media screen and (max-width: theme('screens.md')) {
+                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-mobile) {
+                    @apply container-p;
+                }
+            }
+            @media screen(md) {
+                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-tablet) {
+                    @apply container-p;
+                }
+            }
+            @media screen(lg) {
+                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-desktop) {
+                    @apply container-p;
+                }
+            }
+        }
+    }
+    ._nd-Block-fullbleed-left {
+        margin-left: calc((100dvw - 100cqw) / -2);
+    }
+    ._nd-Block-fullbleed-right {
+        margin-right: calc((100dvw - 100cqw) / -2);
+    }
+
+
+    /* row layout */
+    ._nd-Block-row-mobile {
+        @apply container-p flex flex-col gap-[var(--nd-block-layout-gap-y)];
+        container-type: inline-size;
+
+        /* fullbleed (l1 only) */
+        &.nd-Block-root > .nd-BlockPanel {
+            &.nd-BlockPanel-fullbleed {
+                @apply _nd-Block-fullbleed-left _nd-Block-fullbleed-right;
+            }
+            &.nd-BlockPanel-fullbleed-mobile {
+                @apply _nd-Block-fullbleed-left _nd-Block-fullbleed-right;
+            }
+        }
+    }
+    ._nd-Block-row-desktop {
+        @apply container-p grid auto-cols-fr gap-[var(--nd-block-layout-gap-x)];
+        container-type: inline-size;
+
+        /* row widths */
+        &.nd-Block-items-1 {
+            @apply grid-cols-1;
+        }
+        &.nd-Block-items-2 {
+            @apply grid-cols-2;
+        }
+        &.nd-Block-items-3 {
+            @apply grid-cols-3;
+        }
+        &.nd-Block-items-4 {
+            @apply grid-cols-4;
+        }
+
+        /* row alignment */
+        &.nd-Block-y-start {
+            @apply items-start;
+        }
+        &.nd-Block-y-center {
+            @apply items-center;
+        }
+        &.nd-Block-y-end {
+            @apply items-end;
+        }
+
+        /* fullbleed (l1 only) */
+        &.nd-Block-root > .nd-BlockPanel {
+            &.nd-BlockPanel-fullbleed {
+                &:first-child {
+                    @apply _nd-Block-fullbleed-left;
+                }
+                &:last-child {
+                    @apply _nd-Block-fullbleed-right;
+                }
+            }
+            @media screen(md) {
+                &.nd-BlockPanel-fullbleed-tablet {
+                    &:first-child {
+                        @apply _nd-Block-fullbleed-left;
+                    }
+                    &:last-child {
+                        @apply _nd-Block-fullbleed-right;
+                    }
+                }
+            }
+            @media screen(lg) {
+                &.nd-BlockPanel-fullbleed-desktop {
+                    &:first-child {
+                        @apply _nd-Block-fullbleed-left;
+                    }
+                    &:last-child {
+                        @apply _nd-Block-fullbleed-right;
+                    }
+                }
+            }
+        }
+    }
+    .nd-Block-row {
+        @apply max-md:_nd-Block-row-mobile md:_nd-Block-row-desktop;
+    }
+
+    /* column layout  */
+    ._nd-Block-column-mobile {
+        @apply flex flex-col gap-[var(--nd-block-layout-gap-y)];
+    }
+    ._nd-Block-column-desktop {
+        @apply grid grid-cols-1 grid-flow-row gap-[var(--nd-block-layout-gap-y)];
+    }
+    .nd-Block-column {
+        @apply w-full max-md:_nd-Block-column-mobile md:_nd-Block-column-desktop _nd-Block-containable;
+    }
+
+    /* column layout  */
+    .nd-Block-stack {
+        @apply stacked _nd-Block-containable;
+
+        /* z-indexing */
+        > *:nth-child(1) {
+            z-index: 1;
+        }
+        > *:nth-child(2) {
+            z-index: 2;
+        }
+        > *:nth-child(3) {
+            z-index: 3;
+        }
+        > *:nth-child(4) {
+            z-index: 4;
+        }
+
+        /* alignment */
+        .nd-BlockPanel {
+
+            /* alignment */
+            &.nd-BlockPanel-x-start > .nd-BlockPanel-content {
+                grid-column-start: 1;
+            }
+            &.nd-BlockPanel-x-center > .nd-BlockPanel-content {
+                grid-column-start: calc((13 - var(--nd-block-panel-cols))/2);
+            }
+            &.nd-BlockPanel-x-end > .nd-BlockPanel-content {
+                grid-column-end: 13;
+            }
+        }
+    }
+
+    /* panel layout */
+    ._nd-BlockPanel-desktop {
+        @apply grid grid-cols-12;
+
+        /* width */
+        > .nd-BlockPanel-content {
+            grid-column: span var(--nd-block-panel-cols) / span var(--nd-block-panel-cols);
+        }
+
+        /* align-x */
+        &.nd-BlockPanel-x-start > .nd-BlockPanel-content {
+            grid-column-start: 1;
+        }
+        &.nd-BlockPanel-x-center > .nd-BlockPanel-content {
+            grid-column-start: calc((13 - var(--nd-block-panel-cols))/2);
+        }
+        &.nd-BlockPanel-x-end > .nd-BlockPanel-content {
+            grid-column-end: 13;
+        }
+
+        /* align-y */
+        &.nd-BlockPanel-y-start {
+            @apply items-start;
+        }
+        &.nd-BlockPanel-y-center {
+            @apply items-center;
+        }
+        &.nd-BlockPanel-y-end {
+            @apply items-end;
+        }
+    }
+    .nd-BlockPanel {
+        @apply md:_nd-BlockPanel-desktop;
+    }
+    .nd-BlockPanel-xs {
+        --nd-block-panel-cols: var(--nd-block-panel-cols-xs);
+    }
+    .nd-BlockPanel-sm {
+        --nd-block-panel-cols: var(--nd-block-panel-cols-sm);
+    }
+    .nd-BlockPanel-md {
+        --nd-block-panel-cols: var(--nd-block-panel-cols-md);
+    }
+    .nd-BlockPanel-lg {
+        --nd-block-panel-cols: var(--nd-block-panel-cols-lg);
+    }
+    .nd-BlockPanel-full {
+        --nd-block-panel-cols: var(--nd-block-panel-cols-full);
+    }
+    .nd-BlockPanel-mobileFirst {
+        @apply max-md:order-first;
+    }
+    .nd-BlockPanel-mobileLast {
+        @apply max-md:order-last;
+    }
+}

package/dist/styles/blocks/Block-spacing.css

@@ -0,0 +1,150 @@
+@layer components {
+
+    /* spacing: variables */
+    :root {
+        --nd-section-pt: theme('spacing.l17');
+        --nd-section-pb: theme('spacing.l17');
+        --nd-section-gap-sm: theme('spacing.l13');
+        --nd-section-gap-md: theme('spacing.l15');
+        --nd-section-gap-lg: theme('spacing.l17');
+
+        @media screen(sm) {
+            --nd-section-pt: theme('spacing.l17');
+            --nd-section-pb: theme('spacing.l17');
+            --nd-section-gap-sm: theme('spacing.l13');
+            --nd-section-gap-md: theme('spacing.l15');
+            --nd-section-gap-lg: theme('spacing.l17');
+        }
+        @media screen(md) {
+            --nd-section-pt: theme('spacing.l18');
+            --nd-section-pb: theme('spacing.l18');
+            --nd-section-gap-sm: theme('spacing.l14');
+            --nd-section-gap-md: theme('spacing.l16');
+            --nd-section-gap-lg: theme('spacing.l18');
+        }
+        @media screen(lg) {
+            --nd-section-pt: theme('spacing.l18');
+            --nd-section-pb: theme('spacing.l18');
+            --nd-section-gap-sm: theme('spacing.l15');
+            --nd-section-gap-md: theme('spacing.l17');
+            --nd-section-gap-lg: theme('spacing.l18');
+        }
+        @media screen(xl) {
+            --nd-section-pt: theme('spacing.l18');
+            --nd-section-pb: theme('spacing.l18');
+            --nd-section-gap-sm: theme('spacing.l15');
+            --nd-section-gap-md: theme('spacing.l17');
+            --nd-section-gap-lg: theme('spacing.l18');
+        }
+    }
+
+    /* spacing + gaps */
+    .nd-Block {
+
+        /* standard gap */
+        --nd-section-gap: var(--nd-section-gap-md);
+
+        /* calculated value (used for layout - allows us to transform spacing) */
+        --nd-section-pt-value: var(--nd-section-pt);
+        --nd-section-pb-value: var(--nd-section-pb);
+        --nd-section-gap-value: var(--nd-section-gap);
+
+        /* tight gap */
+        &.nd-Block-spacing-sm + .nd-Block {
+            --nd-section-gap: var(--nd-section-gap-sm);
+        }
+        + .nd-Block.nd-Block-spacing-sm {
+            --nd-section-gap: var(--nd-section-gap-sm);
+        }
+        + .nd-Block.nd-Block-spacing-top-sm {
+            --nd-section-gap: var(--nd-section-gap-sm);
+        }
+        &.nd-Block-spacing-bottom-sm + .nd-Block {
+            --nd-section-gap: var(--nd-section-gap-sm);
+        }
+
+        /* loose gap */
+        &.nd-Block-spacing-lg + .nd-Block {
+            --nd-section-gap: var(--nd-section-gap-lg);
+        }
+        + .nd-Block.nd-Block-spacing-lg {
+            --nd-section-gap: var(--nd-section-gap-lg);
+        }
+        + .nd-Block.nd-Block-spacing-top-lg {
+            --nd-section-gap: var(--nd-section-gap-lg);
+        }
+        &.nd-Block-spacing-bottom-lg + .nd-Block {
+            --nd-section-gap: var(--nd-section-gap-lg);
+        }
+
+        /* no gap */
+        &.nd-Block-spacing-none + .nd-Block {
+            --nd-section-gap: 0;
+        }
+        + .nd-Block.nd-Block-spacing-none {
+            --nd-section-gap: 0;
+        }
+        + .nd-Block.nd-Block-spacing-top-none {
+            --nd-section-pt: 0;
+            --nd-section-gap: 0;
+        }
+        &.nd-Block-spacing-bottom-none {
+            --nd-section-pb: 0;
+
+            + .nd-Block {
+                --nd-section-gap: 0;
+            }
+        }
+    }
+    .nd-Block:first-child {
+        padding-top: var(--nd-section-pt-value);
+    }
+    .nd-Block:last-child {
+        padding-bottom: var(--nd-section-pb-value);
+    }
+
+    /* crawl-up */
+    .nd-Block:has(+ .nd-Block.nd-Block-crawlUp):not(:first-child) {
+        --nd-section-pb-value: calc(2 * var(--nd-section-pb));
+
+        + .nd-Block.nd-Block-crawlUp {
+            @apply py-0;
+
+            > * {
+                @apply -translate-y-[var(--nd-section-pb)];
+            }
+        }
+    }
+
+    /* tight overrides */
+    .nd-Block-tight-above {
+        &.nd-Block {
+            --nd-section-pt: 0;
+        }
+    }
+    .nd-Block-tight-below {
+        &.nd-Block {
+            --nd-section-pb: 0;
+        }
+    }
+    .nd-Block-tight-both {
+        &.nd-Block {
+            --nd-section-pt: 0;
+            --nd-section-pb: 0;
+        }
+    }
+
+    /* fullbleed overrides */
+    .nd-Block.nd-Block-fullbleed {
+
+        &.nd-Block-visual-top {
+            @apply !pt-0;
+        }
+        &.nd-Block-visual-btm {
+            @apply !pb-0;
+        }
+        &.nd-Block-visual-bg {
+            @apply !py-0;
+        }
+    }
+}

package/dist/styles/blocks/Block-theming.css

@@ -0,0 +1,14 @@
+@layer components {
+
+    /* theming: variables */
+    :root {
+        --nd-block-fg: #000;
+        --nd-block-bg: #FFF;
+    }
+
+    /* theming */
+    .nd-Block {
+        color: var(--nd-block-fg);
+        background-color: var(--nd-block-bg);
+    }
+}

package/dist/styles/blocks/Clients.css

@@ -0,0 +1,10 @@
+@layer components {
+
+    :root {
+        --nd-clients-copy-gap: theme('spacing.l8');
+    }
+
+    /* base */
+    .nd-Clients {
+    }
+}

package/dist/styles/blocks/Editorial.css

@@ -0,0 +1,133 @@
+@layer components {
+
+    :root {
+
+        /* spacing */
+        --nd-editorial-header-gap: theme('spacing.l8');
+        --nd-editorial-ctas-gap: theme('spacing.l8');
+        --nd-editorial-title-margin: unset;
+        --nd-editorial-headline-margin: unset;
+        --nd-editorial-caption-margin: unset;
+        --nd-editorial-ctas-margin: unset;
+        --nd-editorial-column-gap: theme('spacing.l8');
+
+        --nd-editorial-visual-rounding: 0px;
+        --nd-editorial-visual-gap-x: theme('spacing.l5');
+        --nd-editorial-visual-gap-y: theme('spacing.l11');
+        --nd-editorial-visual-padding: theme('spacing.l15');
+        --nd-editorial-body-copy-padding: unset;
+
+        @media screen(sm) {
+            --nd-editorial-visual-gap-x: theme('spacing.l8');
+            --nd-editorial-visual-gap-y: theme('spacing.l11');
+            --nd-editorial-visual-padding: theme('spacing.l15');
+        }
+        @media screen(md) {
+            --nd-editorial-visual-gap-x: theme('spacing.l12');
+            --nd-editorial-visual-gap-y: theme('spacing.l13');
+            --nd-editorial-visual-padding: theme('spacing.l18');
+        }
+        @media screen(lg) {
+            --nd-editorial-visual-gap-x: theme('spacing.l15');
+            --nd-editorial-visual-gap-y: theme('spacing.l13');
+            --nd-editorial-visual-padding: theme('spacing.l18');
+        }
+    }
+
+    /* base */
+    .nd-Editorial {
+        @apply flex items-center;
+
+        .nd-Editorial-content {
+            @apply w-full;
+        }
+        .nd-Editorial-headerWrap {
+            @apply container-p relative;
+        }
+        .nd-Editorial-header {
+            @apply flex flex-col gap-[var(--nd-editorial-header-gap)];
+        }
+        .nd-Editorial-title {
+            margin: var(--nd-editorial-title-margin);
+        }
+        .nd-Editorial-headline {
+            margin: var(--nd-editorial-headline-margin);
+        }
+        .nd-Editorial-caption {
+            margin: var(--nd-editorial-caption-margin);
+        }
+        .nd-Editorial-ctas {
+            margin: var(--nd-editorial-ctas-margin);
+        }
+        .nd-Editorial-bodyWrap {
+            @apply container-p relative;
+        }
+        .nd-Editorial-visualWrap {
+            @apply relative;
+        }
+        .nd-Editorial-visual {
+            @apply block overflow-hidden w-full;
+            border-radius: var(--nd-editorial-visual-rounding);
+        }
+        .nd-Editorial-ctas {
+            @apply flex flex-wrap items-center gap-[var(--nd-editorial-ctas-gap)];
+        }
+    }
+
+
+    /* visual layouts */
+    ._nd-Editorial-visual-x-mobile {
+        .nd-Editorial-body {
+            @apply flex flex-col gap-[var(--nd-editorial-visual-gap-y)];
+        }
+
+        .nd-Editorial-columns {
+            @apply flex flex-col gap-[var(--nd-editorial-column-gap)];
+        }
+    }
+    ._nd-Editorial-visual-x-desktop {
+        .nd-Editorial-body {
+            @apply flex flex-row gap-[var(--nd-editorial-visual-gap-x)];
+        }
+        .nd-Editorial-visualWrap {
+            @apply flex-1;
+        }
+        .nd-Editorial-columns {
+            @apply flex-1;
+            @apply p-[var(--nd-editorial-body-copy-padding)];
+        }
+
+        .nd-Editorial-columns {
+            @apply flex flex-col gap-[var(--nd-editorial-copy-gap)];
+        }
+    }
+    .nd-Editorial.nd-Block-visual-left {
+        @apply max-md:_nd-Editorial-visual-x-mobile md:_nd-Editorial-visual-x-desktop;
+    }
+    .nd-Editorial.nd-Block-visual-right {
+        @apply max-md:_nd-Editorial-visual-x-mobile md:_nd-Editorial-visual-x-desktop;
+
+        .nd-Editorial-body {
+            @apply md:flex-row-reverse;
+        }
+    }
+    ._nd-Editorial-visual-y {
+        .nd-Editorial-body {
+            @apply flex flex-col gap-[var(--nd-editorial-visual-gap-y)];
+        }
+
+        .nd-Editorial-columns {
+            @apply flex flex-col md:flex-row gap-[var(--nd-editorial-column-gap)];
+        }
+    }
+    .nd-Editorial.nd-Block-visual-top {
+        @apply _nd-Editorial-visual-y;
+    }
+    .nd-Editorial.nd-Block-visual-btm {
+        @apply _nd-Editorial-visual-y;
+
+        .nd-Editorial-body {
+            @apply md:flex-col-reverse;
+        }
+    }
+}

package/dist/styles/blocks/Form.css

@@ -0,0 +1,13 @@
+@layer components {
+
+    .nd-Form {
+
+        .nd-Form-copyWrap {
+            @apply container-p;
+        }
+
+        .nd-Form-formWrap {
+            @apply container-p;
+        }
+    }
+}