@jxsuite/starters 3.4.0 → 3.6.0

package/sites/nonprofit/components/np-impact-band.jxn

@@ -0,0 +1,83 @@
+/- kdl-version 2
+
+np-impact-band {
+    state eyebrow="" heading="" headingAccent=""
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-primary-deep)"
+        color "var(--color-text-white)"
+    }
+    div {
+        style {
+            position absolute
+            top "-9rem"
+            left "-7rem"
+            width "24rem"
+            height "24rem"
+            borderRadius "50%"
+            background "radial-gradient(circle at center, rgba(47,125,85,0.55) 0%, rgba(47,125,85,0) 70%)"
+        }
+    }
+    div {
+        style {
+            position absolute
+            bottom "-11rem"
+            right "-8rem"
+            width "28rem"
+            height "28rem"
+            borderRadius "50%"
+            background "radial-gradient(circle at center, rgba(233,166,61,0.28) 0%, rgba(233,166,61,0) 70%)"
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "2"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(3.5rem, 8vw, 5.5rem) 1.5rem"
+        }
+        div {
+            style {
+                maxWidth "var(--max-width-narrow)"
+                margin "0 auto clamp(2.25rem, 5vw, 3rem)"
+                textAlign center
+            }
+            p "${state.eyebrow}" {
+                style {
+                    display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.35rem 0.95rem"
+                    borderRadius "999px"
+                    backgroundColor "rgba(255,255,255,0.1)"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    fontSize "0.75rem"
+                    fontWeight "800"
+                    color "var(--color-gold)"
+                    margin "0 0 1.1rem"
+                }
+            }
+            h2 {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(2rem, 4.4vw, 2.9rem)"
+                    fontWeight "600"
+                    lineHeight "1.1"
+                    letterSpacing "-0.01em"
+                    margin "0"
+                }
+                span "${state.heading} "
+                span "${state.headingAccent}" {
+                    style fontStyle=italic fontWeight="500" color="var(--color-gold)"
+                }
+            }
+        }
+        div {
+            slot
+        }
+    }
+}

package/sites/nonprofit/components/np-intro.jxn

@@ -0,0 +1,130 @@
+/- kdl-version 2
+
+np-intro {
+    state {
+        eyebrow "Our mission"
+        image type=string format=image default=""
+        imageAlt ""
+        reverse #false
+        signNumber "17"
+        signLabel "years rooted in Rivertown"
+    }
+    style display=block padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1fr 1fr"
+            gap "clamp(2.5rem, 6vw, 5rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.75rem"
+        }
+        div {
+            style position=relative order="${state.reverse ? '2' : '1'}" {
+                @--md order="1" maxWidth="480px"
+            }
+            div {
+                style {
+                    position absolute
+                    inset "-1.1rem 1.25rem 1.25rem -1.1rem"
+                    borderRadius "44% 56% 52% 48% / 55% 45% 55% 45%"
+                    backgroundColor "var(--color-gold-soft)"
+                    opacity "0.75"
+                }
+            }
+            div {
+                style {
+                    position relative
+                    aspectRatio "4 / 3.4"
+                    borderRadius "var(--radius-lg)"
+                    overflow hidden
+                    boxShadow "var(--shadow-card)"
+                }
+                img src="${state.image}" alt="${state.imageAlt}" loading=lazy {
+                    style {
+                        position absolute
+                        inset "0"
+                        width "100%"
+                        height "100%"
+                        objectFit cover
+                        display block
+                    }
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    right "-0.75rem"
+                    bottom "-1rem"
+                    display flex
+                    alignItems center
+                    gap "0.75rem"
+                    padding "0.85rem 1.25rem"
+                    backgroundColor "var(--color-primary)"
+                    color "var(--color-text-white)"
+                    borderRadius "1.1rem"
+                    boxShadow "0 18px 34px -16px rgba(23,58,43,0.8)"
+                }
+                span "${state.signNumber}" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "2rem"
+                        fontWeight "700"
+                        lineHeight "1"
+                    }
+                }
+                span "${state.signLabel}" {
+                    style {
+                        fontSize "0.82rem"
+                        fontWeight "700"
+                        lineHeight "1.2"
+                        maxWidth "12ch"
+                        opacity "0.92"
+                    }
+                }
+            }
+        }
+        div {
+            style order="${state.reverse ? '1' : '2'}" {
+                @--md order="2"
+            }
+            p "${state.eyebrow}" {
+                style {
+                    display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.35rem 0.9rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-primary-soft)"
+                    textTransform uppercase
+                    letterSpacing "0.14em"
+                    fontSize "0.75rem"
+                    fontWeight "800"
+                    color "var(--color-primary)"
+                    margin "0 0 1.25rem"
+                }
+            }
+            div {
+                style {
+                    fontSize "1.12rem"
+                    lineHeight "1.8"
+                    color "var(--color-text-secondary)"
+                    fontWeight "500"
+                    "& h3" {
+                        fontFamily "var(--font-display)"
+                        fontSize "clamp(1.8rem, 3.6vw, 2.5rem)"
+                        fontWeight "600"
+                        lineHeight "1.12"
+                        letterSpacing "-0.01em"
+                        color "var(--color-primary-deep)"
+                        margin "0 0 1.1rem"
+                    }
+                    "& p" margin="0 0 1.1rem"
+                    "& strong" color="var(--color-primary)" fontWeight="800"
+                }
+                slot
+            }
+        }
+    }
+}

package/sites/nonprofit/components/np-nav.jxn

@@ -0,0 +1,157 @@
+/- kdl-version 2
+
+np-nav {
+    state {
+        brand "Rivertown Foundation"
+        notice "Every gift is matched 2× this month — until it's gone."
+    }
+    style display=block position=sticky top="0" zIndex="50"
+    div {
+        style backgroundColor="var(--color-primary-deep)" color="var(--color-text-white)"
+        div {
+            style {
+                maxWidth "var(--max-width-wide)"
+                margin "0 auto"
+                padding "0.5rem 1.5rem"
+                display flex
+                alignItems center
+                justifyContent center
+                gap "0.6rem"
+                fontFamily "var(--font-body)"
+                fontSize "0.82rem"
+                fontWeight "700"
+                textAlign center
+            }
+            span ✦ {
+                style flex=none fontSize="0.95rem" lineHeight="1"
+            }
+            span "${state.notice}" {
+                style color="var(--color-gold-soft)"
+            }
+        }
+    }
+    div {
+        style {
+            backgroundColor "rgba(251,245,236,0.88)"
+            backdropFilter "blur(10px)"
+            borderBottom "1px solid var(--color-border)"
+        }
+        div {
+            style {
+                maxWidth "var(--max-width-wide)"
+                margin "0 auto"
+                padding "0.85rem 1.5rem"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1.5rem"
+            }
+            a href="/" {
+                style {
+                    display flex
+                    alignItems center
+                    gap "0.7rem"
+                    textDecoration none
+                    color "var(--color-text-primary)"
+                }
+                span ❤ {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2.5rem"
+                        height "2.5rem"
+                        borderRadius "999px 999px 999px 4px"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        fontSize "1.2rem"
+                        boxShadow "0 8px 18px -8px rgba(47,125,85,0.8)"
+                    }
+                }
+                span {
+                    style display=flex flexDirection=column lineHeight="1.05"
+                    span "${state.brand}" {
+                        style {
+                            fontFamily "var(--font-display)"
+                            fontSize "1.32rem"
+                            fontWeight "600"
+                            letterSpacing "-0.01em"
+                        }
+                    }
+                    span "Neighbors helping neighbors" {
+                        style {
+                            fontFamily "var(--font-body)"
+                            fontSize "0.68rem"
+                            fontWeight "700"
+                            textTransform uppercase
+                            letterSpacing "0.18em"
+                            color "var(--color-primary)"
+                            @--sm display=none
+                        }
+                    }
+                }
+            }
+            nav {
+                style display=flex alignItems=center gap="1.7rem" {
+                    @--sm gap="0.9rem"
+                }
+                a href="/programs/" Programs {
+                    style {
+                        color "var(--color-text-primary)"
+                        textDecoration none
+                        fontWeight "700"
+                        fontSize "0.96rem"
+                        transition "color 0.15s"
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/about/" About {
+                    style {
+                        color "var(--color-text-primary)"
+                        textDecoration none
+                        fontWeight "700"
+                        fontSize "0.96rem"
+                        transition "color 0.15s"
+                        @--md display=none
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/get-involved/" "Get Involved" {
+                    style {
+                        color "var(--color-text-primary)"
+                        textDecoration none
+                        fontWeight "700"
+                        fontSize "0.96rem"
+                        transition "color 0.15s"
+                        @--sm display=none
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/get-involved/" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.4rem"
+                        backgroundColor "var(--color-accent)"
+                        color "var(--color-text-white)"
+                        padding "0.6rem 1.5rem"
+                        borderRadius "999px"
+                        textDecoration none
+                        fontWeight "800"
+                        fontSize "0.96rem"
+                        boxShadow "0 10px 22px -8px rgba(242,106,61,0.75)"
+                        transition "background-color 0.15s, transform 0.15s"
+                        :hover {
+                            backgroundColor "var(--color-accent-hover)"
+                            transform "translateY(-1px)"
+                        }
+                    }
+                    span ❤ {
+                        style fontSize="0.9rem"
+                    }
+                    span Donate
+                }
+            }
+        }
+    }
+}

package/sites/nonprofit/components/np-program-card.jxn

@@ -0,0 +1,95 @@
+/- kdl-version 2
+
+np-program-card {
+    state {
+        title ""
+        summary ""
+        tag Program
+        href "/programs/"
+        image type=string format=image default=""
+    }
+    style {
+        display flex
+        flexDirection column
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius-lg)"
+        overflow hidden
+        boxShadow "var(--shadow-card)"
+        transition "transform 0.18s, box-shadow 0.18s"
+        :hover transform="translateY(-5px)" boxShadow="var(--shadow-float)"
+    }
+    div {
+        style position=relative aspectRatio="16 / 11" overflow=hidden
+        img src="${state.image}" alt="${state.title}" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+            }
+        }
+        span {
+            style {
+                position absolute
+                left "1rem"
+                top "1rem"
+                display inline-flex
+                alignItems center
+                gap "0.4rem"
+                padding "0.4rem 0.85rem"
+                borderRadius "999px"
+                backgroundColor "rgba(251,245,236,0.92)"
+                backdropFilter "blur(4px)"
+                fontSize "0.74rem"
+                fontWeight "800"
+                textTransform uppercase
+                letterSpacing "0.08em"
+                color "var(--color-primary)"
+            }
+            span 🌿 {
+                style fontSize="0.8rem"
+            }
+            span "${state.tag}"
+        }
+    }
+    div {
+        style padding="1.6rem 1.6rem 1.75rem" display=flex flexDirection=column flex="1"
+        h3 "${state.title}" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "1.5rem"
+                fontWeight "600"
+                lineHeight "1.15"
+                color "var(--color-primary-deep)"
+                margin "0 0 0.6rem"
+            }
+        }
+        p "${state.summary}" {
+            style {
+                margin "0 0 1.35rem"
+                color "var(--color-text-muted)"
+                fontSize "1rem"
+                fontWeight "600"
+                lineHeight "1.65"
+                flex "1"
+            }
+        }
+        a href="${state.href}" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.45rem"
+                color "var(--color-accent)"
+                fontWeight "800"
+                fontSize "0.95rem"
+                textDecoration none
+                transition "gap 0.18s"
+                :hover gap="0.85rem"
+            }
+            span "Learn more"
+            span →
+        }
+    }
+}

package/sites/nonprofit/components/np-section-header.jxn

@@ -0,0 +1,63 @@
+/- kdl-version 2
+
+np-section-header {
+    state eyebrow="" heading="" headingAccent="" subheading="" align=center
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        marginTop "0"
+        marginBottom "clamp(2.25rem, 5vw, 3rem)"
+        marginLeft "${state.align === 'center' ? 'auto' : '0'}"
+        marginRight "${state.align === 'center' ? 'auto' : '0'}"
+        textAlign "${state.align}"
+    }
+    p "${state.eyebrow}" {
+        style {
+            display "${state.eyebrow ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.5rem"
+            padding "0.35rem 0.9rem"
+            borderRadius "999px"
+            backgroundColor "var(--color-primary-soft)"
+            textTransform uppercase
+            letterSpacing "0.14em"
+            fontSize "0.75rem"
+            fontWeight "800"
+            color "var(--color-primary)"
+            margin "0 0 1rem"
+        }
+    }
+    h2 {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "clamp(2rem, 4.4vw, 2.9rem)"
+            fontWeight "600"
+            lineHeight "1.1"
+            letterSpacing "-0.015em"
+            color "var(--color-primary-deep)"
+            margin "0"
+        }
+        span "${state.heading} "
+        span "${state.headingAccent}" {
+            style {
+                display "${state.headingAccent ? 'inline' : 'none'}"
+                fontStyle italic
+                fontWeight "500"
+                color "var(--color-accent)"
+            }
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.12rem"
+            lineHeight "1.7"
+            color "var(--color-text-muted)"
+            fontWeight "600"
+            margin "1rem auto 0"
+            maxWidth "${state.align === 'center' ? '52ch' : 'none'}"
+            marginLeft "${state.align === 'center' ? 'auto' : '0'}"
+            marginRight "${state.align === 'center' ? 'auto' : '0'}"
+        }
+    }
+}

package/sites/nonprofit/components/np-stat.jxn

@@ -0,0 +1,51 @@
+/- kdl-version 2
+
+np-stat {
+    state number="" label="" note="" icon=""
+    style {
+        display flex
+        flexDirection column
+        alignItems flex-start
+        gap "0.35rem"
+        padding "1.6rem 1.6rem 1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius)"
+        boxShadow "var(--shadow-card)"
+    }
+    span "${state.icon}" {
+        style {
+            display "${state.icon ? 'inline-flex' : 'none'}"
+            alignItems center
+            justifyContent center
+            width "2.6rem"
+            height "2.6rem"
+            borderRadius "999px"
+            backgroundColor "var(--color-primary-soft)"
+            fontSize "1.3rem"
+            marginBottom "0.5rem"
+        }
+    }
+    div "${state.number}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "clamp(2.4rem, 5vw, 3.4rem)"
+            fontWeight "700"
+            lineHeight "1"
+            letterSpacing "-0.02em"
+            color "var(--color-primary)"
+        }
+    }
+    div "${state.label}" {
+        style fontWeight="800" fontSize="1.02rem" color="var(--color-text-primary)"
+    }
+    p "${state.note}" {
+        style {
+            display "${state.note ? 'block' : 'none'}"
+            margin "0.15rem 0 0"
+            fontSize "0.92rem"
+            fontWeight "600"
+            color "var(--color-text-muted)"
+            lineHeight "1.55"
+        }
+    }
+}

package/sites/nonprofit/components/np-step.jxn

@@ -0,0 +1,73 @@
+/- kdl-version 2
+
+np-step {
+    state {
+        num ""
+        title ""
+        text ""
+        badgeBg "var(--color-primary-soft)"
+        badgeColor "var(--color-primary)"
+        href ""
+        linkText ""
+    }
+    style {
+        display flex
+        flexDirection column
+        padding "2rem 1.9rem 2.1rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius-lg)"
+        boxShadow "var(--shadow-card)"
+        transition "transform 0.18s"
+        :hover transform="translateY(-4px)"
+    }
+    div "${state.num}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "3.5rem"
+            height "3.5rem"
+            borderRadius "999px 999px 999px 6px"
+            backgroundColor "${state.badgeBg}"
+            color "${state.badgeColor}"
+            fontSize "1.6rem"
+            marginBottom "1.25rem"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.4rem"
+            fontWeight "600"
+            color "var(--color-primary-deep)"
+            margin "0 0 0.5rem"
+        }
+    }
+    p "${state.text}" {
+        style {
+            margin "0"
+            color "var(--color-text-muted)"
+            fontSize "1rem"
+            fontWeight "600"
+            lineHeight "1.65"
+            flex "1"
+        }
+    }
+    a href="${state.href}" {
+        style {
+            display "${state.linkText ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.45rem"
+            marginTop "1.35rem"
+            color "${state.badgeColor}"
+            fontWeight "800"
+            fontSize "0.95rem"
+            textDecoration none
+            transition "gap 0.18s"
+            :hover gap="0.85rem"
+        }
+        span "${state.linkText}"
+        span →
+    }
+}