@jxsuite/starters 3.4.0 → 3.5.0

package/sites/professional-firm/components/pf-article-header.jxn

@@ -0,0 +1,60 @@
+/- kdl-version 2
+
+pf-article-header {
+    state eyebrow=Insight title="" date="" author="" readingTime=""
+    style display=block marginBottom="clamp(2rem, 4vw, 3rem)"
+    p "${state.eyebrow}" {
+        style {
+            fontFamily "var(--font-sans)"
+            textTransform uppercase
+            letterSpacing "0.2em"
+            fontSize "0.72rem"
+            fontWeight "600"
+            color "var(--color-accent)"
+            paddingBottom "1rem"
+            borderBottom "1px solid var(--color-rule)"
+            margin "0 0 1.5rem"
+        }
+    }
+    h1 "${state.title}" {
+        style {
+            fontFamily "var(--font-serif)"
+            fontSize "clamp(2.1rem, 5vw, 3.2rem)"
+            fontWeight "500"
+            lineHeight "1.1"
+            letterSpacing "-0.02em"
+            margin "0 0 1.5rem"
+            color "var(--color-ink)"
+        }
+    }
+    div {
+        style {
+            display flex
+            flexWrap wrap
+            alignItems center
+            gap "0.6rem"
+            paddingTop "1.25rem"
+            borderTop "1px solid var(--color-hairline)"
+            fontFamily "var(--font-sans)"
+            fontSize "0.8rem"
+            textTransform uppercase
+            letterSpacing "0.1em"
+            color "var(--color-muted)"
+        }
+        span "${state.author}" {
+            style fontWeight="600" color="var(--color-ink)"
+        }
+        span "/" {
+            style color="var(--color-hairline)"
+        }
+        span "${state.date}" {
+            style fontVariantNumeric=tabular-nums
+        }
+        span "/" {
+            style display="${state.readingTime ? 'inline' : 'none'}" color="var(--color-hairline)"
+        }
+        span "${state.readingTime} min read" {
+            style display="${state.readingTime ? 'inline' : 'none'}" fontVariantNumeric=tabular-nums
+        }
+    }
+}

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

@@ -0,0 +1,74 @@
+/- kdl-version 2
+
+pf-contact-form {
+    state {
+        heading "Request a consultation"
+        note "This is a demo form. Wire it to your CRM or email in pages/contact.md."
+    }
+    style display=block
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-serif)"
+            fontSize "1.7rem"
+            fontWeight "500"
+            letterSpacing "-0.01em"
+            margin "0 0 0.4rem"
+            color "var(--color-ink)"
+        }
+    }
+    div {
+        style height="2px" width="3rem" backgroundColor="var(--color-accent)" margin="0 0 1.5rem"
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start {
+            "& input, & textarea" {
+                width "100%"
+                padding "0.8rem 0"
+                border none
+                borderBottom "1px solid var(--color-hairline)"
+                borderRadius "0"
+                backgroundColor transparent
+                fontFamily "var(--font-sans)"
+                fontSize "1rem"
+                color "var(--color-ink)"
+                outline none
+                transition "border-color 0.15s"
+            }
+            "& input:focus, & textarea:focus" borderBottom="1px solid var(--color-accent)"
+        }
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name"
+        input type=email name=email placeholder="Work email" required="true" aria-label="Work email"
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="1rem" {
+                @--sm gridTemplateColumns="1fr"
+            }
+            input type=text name=company placeholder=Company aria-label=Company
+            input type=text name=revenue placeholder="Annual revenue (approx.)" aria-label="Annual revenue"
+        }
+        textarea name=notes rows="4" placeholder="What can we help with?" aria-label="What can we help with?" {
+            style fontFamily="var(--font-sans)"
+        }
+        button type=submit "Request a consultation" {
+            style {
+                marginTop "0.75rem"
+                backgroundColor "var(--color-ink)"
+                color "var(--color-paper)"
+                padding "0.9rem 1.75rem"
+                border none
+                borderRadius "0"
+                fontFamily "var(--font-sans)"
+                fontSize "0.78rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                cursor pointer
+                justifySelf start
+                transition "background-color 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)"
+            }
+        }
+        p "${state.note}" {
+            style fontSize="0.82rem" color="var(--color-muted)" margin="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)"
+                    }
+                }
+            }
+        }
+    }
+}