@jxsuite/starters 3.3.2 → 3.5.0

package/sites/professional-firm/components/pf-contact-info.jxn

@@ -0,0 +1,101 @@
+/- kdl-version 2
+
+pf-contact-info {
+    state {
+        address "410 Corniche Plaza, Suite 900 · Harborview, NY 10014"
+        phone "(555) 204-8830"
+        phoneHref tel:+15552048830
+        email hello@meridianadvisory.com
+        emailHref mailto:hello@meridianadvisory.com
+        hours1 "Monday – Friday · 8:30am to 5:30pm"
+        hours2 "Saturday – Sunday · by appointment"
+    }
+    style display=grid gap="1.25rem" alignContent=start
+    div {
+        style border="1px solid var(--color-rule)" padding="1.75rem"
+        div Office {
+            style {
+                fontFamily "var(--font-sans)"
+                fontSize "0.7rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.16em"
+                color "var(--color-accent)"
+                marginBottom "0.9rem"
+            }
+        }
+        p "${state.address}" {
+            style margin="0 0 1rem" fontSize="0.98rem" lineHeight="1.6" color="var(--color-ink)"
+        }
+        a href="${state.phoneHref}" "${state.phone}" {
+            style {
+                display block
+                color "var(--color-ink)"
+                textDecoration none
+                fontSize "0.98rem"
+                marginBottom "0.3rem"
+                :hover color="var(--color-accent)"
+            }
+        }
+        a href="${state.emailHref}" "${state.email}" {
+            style display=block color="var(--color-accent)" textDecoration=none fontSize="0.98rem" {
+                :hover color="var(--color-accent-deep)"
+            }
+        }
+    }
+    div {
+        style border="1px solid var(--color-rule)" padding="1.75rem"
+        div Hours {
+            style {
+                fontFamily "var(--font-sans)"
+                fontSize "0.7rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.16em"
+                color "var(--color-accent)"
+                marginBottom "0.9rem"
+            }
+        }
+        p "${state.hours1}" {
+            style margin="0 0 0.35rem" fontSize="0.98rem" color="var(--color-ink)"
+        }
+        p "${state.hours2}" {
+            style margin="0" fontSize="0.98rem" color="var(--color-muted)"
+        }
+    }
+    div {
+        style {
+            backgroundColor "var(--color-ink-deep)"
+            color "var(--color-text-white)"
+            borderTop "3px solid var(--color-accent)"
+            padding "1.75rem"
+        }
+        div "Prefer to read first?" {
+            style {
+                fontFamily "var(--font-serif)"
+                fontSize "1.3rem"
+                fontWeight "500"
+                margin "0 0 0.6rem"
+            }
+        }
+        p "Browse the Quarterly for our latest notes on tax, cash flow, and financial strategy." {
+            style {
+                margin "0 0 1.1rem"
+                fontSize "0.95rem"
+                lineHeight "1.6"
+                color "rgba(244,241,233,0.78)"
+            }
+        }
+        a href="/insights/" "Read the Quarterly →" {
+            style {
+                fontFamily "var(--font-sans)"
+                fontSize "0.72rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                color "var(--color-accent)"
+                textDecoration none
+            }
+        }
+    }
+}

package/sites/professional-firm/components/pf-cta.jxn

@@ -0,0 +1,63 @@
+/- kdl-version 2
+
+pf-cta {
+    state eyebrow=Consultation heading="" text="" cta="Book a consultation" ctaHref="/contact/"
+    style {
+        display block
+        backgroundColor "var(--color-ink-deep)"
+        color "var(--color-text-white)"
+        borderTop "3px solid var(--color-accent)"
+        padding "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    }
+    div {
+        style maxWidth="var(--max-width-narrow)" margin="0 auto" textAlign=center
+        p "${state.eyebrow}" {
+            style {
+                display "${state.eyebrow ? 'block' : 'none'}"
+                fontFamily "var(--font-sans)"
+                fontSize "0.72rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.2em"
+                color "var(--color-accent)"
+                margin "0 0 1.25rem"
+            }
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-serif)"
+                fontSize "clamp(2rem, 4.5vw, 3rem)"
+                fontWeight "500"
+                lineHeight "1.14"
+                letterSpacing "-0.02em"
+                margin "0 auto 1.25rem"
+                maxWidth "18ch"
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontSize "1.1rem"
+                lineHeight "1.7"
+                color "rgba(244,241,233,0.78)"
+                margin "0 auto 2.25rem"
+                maxWidth "52ch"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta}" {
+            style {
+                display inline-block
+                backgroundColor "var(--color-accent)"
+                color "var(--color-ink-deep)"
+                padding "0.9rem 2rem"
+                fontFamily "var(--font-sans)"
+                fontSize "0.78rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                textDecoration none
+                transition "background-color 0.15s"
+                :hover backgroundColor="#b0904c"
+            }
+        }
+    }
+}

package/sites/professional-firm/components/pf-feature.jxn

@@ -0,0 +1,32 @@
+/- kdl-version 2
+
+pf-feature {
+    state step="" title="" text=""
+    style display=block paddingTop="1.5rem" borderTop="2px solid var(--color-rule)"
+    div "Step ${state.step}" {
+        style {
+            display "${state.step ? 'block' : 'none'}"
+            fontFamily "var(--font-sans)"
+            fontWeight "600"
+            fontSize "0.72rem"
+            textTransform uppercase
+            letterSpacing "0.16em"
+            color "var(--color-accent)"
+            marginBottom "1rem"
+            fontVariantNumeric tabular-nums
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-serif)"
+            fontSize "1.4rem"
+            fontWeight "500"
+            lineHeight "1.2"
+            margin "0 0 0.6rem"
+            color "var(--color-ink)"
+        }
+    }
+    p "${state.text}" {
+        style margin="0" color="var(--color-muted)" fontSize="1rem" lineHeight="1.6"
+    }
+}

package/sites/professional-firm/components/pf-footer.jxn

@@ -0,0 +1,171 @@
+/- kdl-version 2
+
+pf-footer {
+    state {
+        brand Meridian
+        sub Advisory
+        tagline "Tax, assurance, and CFO counsel for founders and growing companies — since 2007."
+        address "410 Corniche Plaza, Suite 900 · Harborview, NY 10014"
+        phone "(555) 204-8830"
+        email hello@meridianadvisory.com
+    }
+    style {
+        display block
+        backgroundColor "var(--color-ink-deep)"
+        color "var(--color-text-white)"
+        borderTop "3px solid var(--color-accent)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(3rem, 6vw, 4.5rem) 1.5rem 2rem"
+            display grid
+            gridTemplateColumns "1.6fr 1fr 1fr"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr" gap="2rem"
+        }
+        div {
+            div {
+                style display=flex alignItems=baseline gap="0.55rem" marginBottom="1rem"
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-serif)"
+                        fontSize "1.7rem"
+                        fontWeight "600"
+                        letterSpacing "-0.01em"
+                    }
+                }
+                span "${state.sub}" {
+                    style {
+                        fontFamily "var(--font-sans)"
+                        fontSize "0.68rem"
+                        fontWeight "600"
+                        textTransform uppercase
+                        letterSpacing "0.28em"
+                        color "var(--color-accent)"
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style {
+                    margin "0"
+                    maxWidth "34ch"
+                    color "rgba(244,241,233,0.7)"
+                    fontSize "0.95rem"
+                    lineHeight "1.65"
+                }
+            }
+        }
+        div {
+            div Office {
+                style {
+                    fontFamily "var(--font-sans)"
+                    textTransform uppercase
+                    letterSpacing "0.18em"
+                    fontSize "0.68rem"
+                    fontWeight "600"
+                    color "var(--color-accent)"
+                    paddingBottom "0.75rem"
+                    marginBottom "0.9rem"
+                    borderBottom "1px solid rgba(244,241,233,0.16)"
+                }
+            }
+            p "${state.address}" {
+                style {
+                    margin "0 0 0.4rem"
+                    color "rgba(244,241,233,0.82)"
+                    fontSize "0.9rem"
+                    lineHeight "1.6"
+                }
+            }
+            p "${state.phone}" {
+                style margin="0 0 0.25rem" color="rgba(244,241,233,0.82)" fontSize="0.9rem"
+            }
+            p "${state.email}" {
+                style margin="0" color="rgba(244,241,233,0.82)" fontSize="0.9rem"
+            }
+        }
+        div {
+            div Firm {
+                style {
+                    fontFamily "var(--font-sans)"
+                    textTransform uppercase
+                    letterSpacing "0.18em"
+                    fontSize "0.68rem"
+                    fontWeight "600"
+                    color "var(--color-accent)"
+                    paddingBottom "0.75rem"
+                    marginBottom "0.9rem"
+                    borderBottom "1px solid rgba(244,241,233,0.16)"
+                }
+            }
+            a href="/services/" "Practice areas" {
+                style {
+                    display block
+                    color "rgba(244,241,233,0.82)"
+                    textDecoration none
+                    fontSize "0.9rem"
+                    marginBottom "0.5rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent)"
+                }
+            }
+            a href="/insights/" "The Quarterly" {
+                style {
+                    display block
+                    color "rgba(244,241,233,0.82)"
+                    textDecoration none
+                    fontSize "0.9rem"
+                    marginBottom "0.5rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent)"
+                }
+            }
+            a href="/team/" People {
+                style {
+                    display block
+                    color "rgba(244,241,233,0.82)"
+                    textDecoration none
+                    fontSize "0.9rem"
+                    marginBottom "0.5rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent)"
+                }
+            }
+            a href="/contact/" Contact {
+                style {
+                    display block
+                    color "rgba(244,241,233,0.82)"
+                    textDecoration none
+                    fontSize "0.9rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-accent)"
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "1.5rem"
+            borderTop "1px solid rgba(244,241,233,0.16)"
+            fontFamily "var(--font-sans)"
+            fontSize "0.72rem"
+            textTransform uppercase
+            letterSpacing "0.12em"
+            color "rgba(244,241,233,0.5)"
+            display flex
+            justifyContent space-between
+            gap "1rem"
+            flexWrap wrap
+        }
+        p "© Meridian Advisory · Registered CPAs" {
+            style margin="0"
+        }
+        p "Member, State Society of Accountants" {
+            style margin="0"
+        }
+    }
+}

package/sites/professional-firm/components/pf-hero.jxn

@@ -0,0 +1,139 @@
+/- kdl-version 2
+
+pf-hero {
+    state {
+        eyebrow "Tax · Assurance · Advisory"
+        marker "Est. 2007"
+        heading ""
+        lede ""
+        aside ""
+        cta "Book a consultation"
+        ctaHref "/contact/"
+        cta2 "Read the Quarterly"
+        cta2Href "/insights/"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-paper)"
+        padding "clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(2.5rem, 6vw, 4rem)"
+    }
+    div {
+        style maxWidth="var(--max-width)" margin="0 auto"
+        div {
+            style {
+                display flex
+                alignItems baseline
+                justifyContent space-between
+                gap "1rem"
+                paddingBottom "0.9rem"
+                borderBottom "1px solid var(--color-rule)"
+                fontFamily "var(--font-sans)"
+                fontSize "0.72rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.18em"
+            }
+            span "${state.eyebrow}" {
+                style color="var(--color-accent)"
+            }
+            span "${state.marker}" {
+                style color="var(--color-muted)"
+            }
+        }
+        h1 "${state.heading}" {
+            style {
+                fontFamily "var(--font-serif)"
+                fontWeight "500"
+                fontSize "clamp(2.6rem, 6.4vw, 5.2rem)"
+                lineHeight "1.04"
+                letterSpacing "-0.02em"
+                margin "clamp(1.75rem, 4vw, 3rem) 0 0"
+                maxWidth "18ch"
+                color "var(--color-ink)"
+            }
+        }
+        div {
+            style {
+                marginTop "clamp(1.75rem, 4vw, 2.75rem)"
+                paddingTop "clamp(1.5rem, 3vw, 2.25rem)"
+                borderTop "1px solid var(--color-hairline)"
+                display grid
+                gridTemplateColumns "1.35fr 1fr"
+                gap "clamp(1.5rem, 5vw, 4rem)"
+                alignItems start
+                @--md gridTemplateColumns="1fr" gap="1.75rem"
+            }
+            div {
+                p "${state.lede}" {
+                    style {
+                        margin "0 0 1.75rem"
+                        fontSize "clamp(1.05rem, 1.6vw, 1.22rem)"
+                        lineHeight "1.65"
+                        color "var(--color-ink)"
+                        maxWidth "48ch"
+                    }
+                }
+                div {
+                    style display=flex gap="0.75rem" flexWrap=wrap
+                    a href="${state.ctaHref}" "${state.cta}" {
+                        style {
+                            display inline-block
+                            backgroundColor "var(--color-ink)"
+                            color "var(--color-paper)"
+                            padding "0.8rem 1.6rem"
+                            fontFamily "var(--font-sans)"
+                            fontSize "0.78rem"
+                            fontWeight "600"
+                            textTransform uppercase
+                            letterSpacing "0.14em"
+                            textDecoration none
+                            transition "background-color 0.15s"
+                            :hover backgroundColor="var(--color-primary-hover)"
+                        }
+                    }
+                    a href="${state.cta2Href}" "${state.cta2} →" {
+                        style {
+                            display "${state.cta2 ? 'inline-flex' : 'none'}"
+                            alignItems center
+                            color "var(--color-ink)"
+                            padding "0.8rem 0.4rem"
+                            fontFamily "var(--font-sans)"
+                            fontSize "0.78rem"
+                            fontWeight "600"
+                            textTransform uppercase
+                            letterSpacing "0.14em"
+                            textDecoration none
+                            borderBottom "1px solid var(--color-accent)"
+                            transition "color 0.15s"
+                            :hover color="var(--color-accent)"
+                        }
+                    }
+                }
+            }
+            div {
+                style {
+                    display "${state.aside ? 'block' : 'none'}"
+                    borderLeft "1px solid var(--color-hairline)"
+                    paddingLeft "clamp(1.25rem, 3vw, 2rem)"
+                    @--md {
+                        borderLeft none
+                        paddingLeft "0"
+                        borderTop "1px solid var(--color-hairline)"
+                        paddingTop "1.5rem"
+                    }
+                }
+                p "${state.aside}" {
+                    style {
+                        margin "0"
+                        fontFamily "var(--font-serif)"
+                        fontStyle italic
+                        fontWeight "400"
+                        fontSize "clamp(1.15rem, 2vw, 1.5rem)"
+                        lineHeight "1.5"
+                        color "var(--color-ink)"
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/professional-firm/components/pf-insight-row.jxn

@@ -0,0 +1,111 @@
+/- kdl-version 2
+
+pf-insight-row {
+    state {
+        number ""
+        title ""
+        excerpt ""
+        date ""
+        category ""
+        readingTime ""
+        author ""
+        href "/insights/"
+    }
+    style display=block
+    a href="${state.href}" {
+        style {
+            display grid
+            gridTemplateColumns "minmax(2.5rem, 3.5rem) minmax(0, 1fr) minmax(0, 15rem)"
+            gap "clamp(1rem, 3vw, 2.5rem)"
+            alignItems start
+            padding "clamp(1.5rem, 3vw, 2rem) 0.5rem"
+            textDecoration none
+            color "var(--color-ink)"
+            borderTop "1px solid var(--color-hairline)"
+            transition "background-color 0.18s, color 0.18s"
+            @--md gridTemplateColumns="auto 1fr" gap="0.6rem 1.25rem"
+            :hover backgroundColor="var(--color-paper-2)" color="var(--color-accent-deep)"
+        }
+        span "${state.number}" {
+            style {
+                fontFamily "var(--font-sans)"
+                fontWeight "600"
+                fontSize "clamp(1.1rem, 2.2vw, 1.5rem)"
+                lineHeight "1.1"
+                color "var(--color-accent)"
+                fontVariantNumeric tabular-nums
+            }
+        }
+        div {
+            style minWidth="0"
+            span "${state.category}" {
+                style {
+                    display "${state.category ? 'inline-block' : 'none'}"
+                    fontFamily "var(--font-sans)"
+                    fontSize "0.68rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    color "var(--color-muted)"
+                    marginBottom "0.6rem"
+                }
+            }
+            h3 "${state.title}" {
+                style {
+                    fontFamily "var(--font-serif)"
+                    fontWeight "500"
+                    fontSize "clamp(1.4rem, 2.6vw, 2rem)"
+                    lineHeight "1.14"
+                    letterSpacing "-0.015em"
+                    margin "0 0 0.55rem"
+                    color inherit
+                }
+            }
+            p "${state.excerpt}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-serif)"
+                    fontSize "1.08rem"
+                    lineHeight "1.55"
+                    color "var(--color-muted)"
+                    maxWidth "60ch"
+                }
+            }
+        }
+        div {
+            style textAlign=right fontFamily="var(--font-sans)" {
+                @--md textAlign=left gridColumn="2 / -1"
+            }
+            div "${state.date}" {
+                style {
+                    fontSize "0.72rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    color "var(--color-ink)"
+                    fontVariantNumeric tabular-nums
+                    marginBottom "0.4rem"
+                }
+            }
+            div "${state.readingTime} min read" {
+                style {
+                    display "${state.readingTime ? 'block' : 'none'}"
+                    fontSize "0.72rem"
+                    letterSpacing "0.06em"
+                    color "var(--color-muted)"
+                    fontVariantNumeric tabular-nums
+                    marginBottom "0.65rem"
+                }
+            }
+            span "Read →" {
+                style {
+                    fontSize "0.72rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    color "var(--color-accent)"
+                }
+            }
+        }
+    }
+}

package/sites/professional-firm/components/pf-intro.jxn

@@ -0,0 +1,68 @@
+/- kdl-version 2
+
+pf-intro {
+    state {
+        image type=string format=image default=""
+        imageAlt ""
+        kicker "The practice"
+        reverse #false
+    }
+    style display=block padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "0.85fr 1fr"
+            gap "clamp(2rem, 6vw, 5rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2rem"
+        }
+        div {
+            style order="${state.reverse ? '2' : '1'}" position=relative
+            img src="${state.image}" alt="${state.imageAlt}" loading=lazy {
+                style {
+                    width "100%"
+                    height auto
+                    display block
+                    border "1px solid var(--color-rule)"
+                    filter "grayscale(1) contrast(1.03)"
+                }
+            }
+        }
+        div {
+            style order="${state.reverse ? '1' : '2'}" {
+                "& h3" {
+                    fontFamily "var(--font-serif)"
+                    fontSize "clamp(1.7rem, 3.4vw, 2.5rem)"
+                    fontWeight "500"
+                    lineHeight "1.15"
+                    letterSpacing "-0.02em"
+                    margin "0 0 1.25rem"
+                    color "var(--color-ink)"
+                }
+                "& p" {
+                    fontSize "1.08rem"
+                    lineHeight "1.75"
+                    color "var(--color-muted)"
+                    margin "0 0 1.1rem"
+                }
+                "& p:last-child" marginBottom="0"
+            }
+            p "${state.kicker}" {
+                style {
+                    fontFamily "var(--font-sans)"
+                    fontSize "0.72rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.2em"
+                    color "var(--color-accent)"
+                    paddingBottom "1rem"
+                    marginBottom "1.5rem"
+                    borderBottom "1px solid var(--color-rule)"
+                }
+            }
+            slot
+        }
+    }
+}