@jxsuite/starters 0.34.0 → 0.35.1

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

@@ -9,32 +9,34 @@
   },
   "style": {
     "display": "block",
-    "borderBottom": "1px solid var(--color-border)",
-    "paddingBottom": "2rem",
-    "marginBottom": "2.5rem"
+    "marginBottom": "clamp(2rem, 4vw, 3rem)"
   },
   "children": [
     {
       "tagName": "p",
       "style": {
+        "fontFamily": "var(--font-sans)",
         "textTransform": "uppercase",
-        "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
+        "letterSpacing": "0.2em",
+        "fontSize": "0.72rem",
         "fontWeight": "600",
-        "color": "var(--color-primary)",
-        "margin": "0 0 1rem"
+        "color": "var(--color-accent)",
+        "paddingBottom": "1rem",
+        "borderBottom": "1px solid var(--color-rule)",
+        "margin": "0 0 1.5rem"
       },
       "textContent": "${state.eyebrow}"
     },
     {
       "tagName": "h1",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(2rem, 5vw, 3rem)",
-        "fontWeight": "700",
-        "lineHeight": "1.12",
+        "fontFamily": "var(--font-serif)",
+        "fontSize": "clamp(2.1rem, 5vw, 3.2rem)",
+        "fontWeight": "500",
+        "lineHeight": "1.1",
         "letterSpacing": "-0.02em",
-        "margin": "0 0 1.25rem"
+        "margin": "0 0 1.5rem",
+        "color": "var(--color-ink)"
       },
       "textContent": "${state.title}"
     },
@@ -45,32 +47,44 @@
         "flexWrap": "wrap",
         "alignItems": "center",
         "gap": "0.6rem",
-        "fontSize": "0.95rem",
-        "color": "var(--color-text-muted)"
+        "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)"
       },
       "children": [
         {
           "tagName": "span",
-          "style": { "fontWeight": "600", "color": "var(--color-text-primary)" },
+          "style": { "fontWeight": "600", "color": "var(--color-ink)" },
           "textContent": "${state.author}"
         },
         {
           "tagName": "span",
-          "style": { "opacity": "0.5" },
-          "textContent": "·"
+          "style": { "color": "var(--color-hairline)" },
+          "textContent": "/"
         },
         {
           "tagName": "span",
+          "style": { "fontVariantNumeric": "tabular-nums" },
           "textContent": "${state.date}"
         },
         {
           "tagName": "span",
-          "style": { "display": "${state.readingTime ? 'inline' : 'none'}", "opacity": "0.5" },
-          "textContent": "·"
+          "style": {
+            "display": "${state.readingTime ? 'inline' : 'none'}",
+            "color": "var(--color-hairline)"
+          },
+          "textContent": "/"
         },
         {
           "tagName": "span",
-          "style": { "display": "${state.readingTime ? 'inline' : 'none'}" },
+          "style": {
+            "display": "${state.readingTime ? 'inline' : 'none'}",
+            "fontVariantNumeric": "tabular-nums"
+          },
           "textContent": "${state.readingTime} min read"
         }
       ]

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

@@ -11,16 +11,48 @@
     {
       "tagName": "h3",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.6rem",
-        "margin": "0 0 1.25rem"
+        "fontFamily": "var(--font-serif)",
+        "fontSize": "1.7rem",
+        "fontWeight": "500",
+        "letterSpacing": "-0.01em",
+        "margin": "0 0 0.4rem",
+        "color": "var(--color-ink)"
       },
       "textContent": "${state.heading}"
     },
+    {
+      "tagName": "div",
+      "style": {
+        "height": "2px",
+        "width": "3rem",
+        "backgroundColor": "var(--color-accent)",
+        "margin": "0 0 1.5rem"
+      }
+    },
     {
       "tagName": "form",
       "attributes": { "action": "#", "method": "post" },
-      "style": { "display": "grid", "gap": "1rem", "alignContent": "start" },
+      "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)"
+        }
+      },
       "children": [
         {
           "tagName": "input",
@@ -30,13 +62,6 @@
             "placeholder": "Your name",
             "required": "true",
             "aria-label": "Your name"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
           }
         },
         {
@@ -47,18 +72,16 @@
             "placeholder": "Work email",
             "required": "true",
             "aria-label": "Work email"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
           }
         },
         {
           "tagName": "div",
-          "style": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "1rem" },
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "1fr 1fr",
+            "gap": "1rem",
+            "@--sm": { "gridTemplateColumns": "1fr" }
+          },
           "children": [
             {
               "tagName": "input",
@@ -67,13 +90,6 @@
                 "name": "company",
                 "placeholder": "Company",
                 "aria-label": "Company"
-              },
-              "style": {
-                "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
               }
             },
             {
@@ -83,13 +99,6 @@
                 "name": "revenue",
                 "placeholder": "Annual revenue (approx.)",
                 "aria-label": "Annual revenue"
-              },
-              "style": {
-                "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
               }
             }
           ]
@@ -102,34 +111,33 @@
             "placeholder": "What can we help with?",
             "aria-label": "What can we help with?"
           },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontFamily": "inherit"
-          }
+          "style": { "fontFamily": "var(--font-sans)" }
         },
         {
           "tagName": "button",
           "attributes": { "type": "submit" },
-          "textContent": "Request a Consultation",
+          "textContent": "Request a consultation",
           "style": {
-            "backgroundColor": "var(--color-primary)",
-            "color": "var(--color-text-white)",
-            "padding": "0.85rem 1.5rem",
+            "marginTop": "0.75rem",
+            "backgroundColor": "var(--color-ink)",
+            "color": "var(--color-paper)",
+            "padding": "0.9rem 1.75rem",
             "border": "none",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
+            "borderRadius": "0",
+            "fontFamily": "var(--font-sans)",
+            "fontSize": "0.78rem",
             "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.14em",
             "cursor": "pointer",
-            "justifySelf": "start"
+            "justifySelf": "start",
+            "transition": "background-color 0.15s",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
           }
         },
         {
           "tagName": "p",
-          "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)", "margin": "0" },
+          "style": { "fontSize": "0.82rem", "color": "var(--color-muted)", "margin": "0" },
           "textContent": "${state.note}"
         }
       ]

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

@@ -0,0 +1,147 @@
+{
+  "tagName": "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"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "border": "1px solid var(--color-rule)", "padding": "1.75rem" },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "fontFamily": "var(--font-sans)",
+            "fontSize": "0.7rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "color": "var(--color-accent)",
+            "marginBottom": "0.9rem"
+          },
+          "textContent": "Office"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0 0 1rem",
+            "fontSize": "0.98rem",
+            "lineHeight": "1.6",
+            "color": "var(--color-ink)"
+          },
+          "textContent": "${state.address}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.phoneHref}" },
+          "style": {
+            "display": "block",
+            "color": "var(--color-ink)",
+            "textDecoration": "none",
+            "fontSize": "0.98rem",
+            "marginBottom": "0.3rem",
+            ":hover": { "color": "var(--color-accent)" }
+          },
+          "textContent": "${state.phone}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.emailHref}" },
+          "style": {
+            "display": "block",
+            "color": "var(--color-accent)",
+            "textDecoration": "none",
+            "fontSize": "0.98rem",
+            ":hover": { "color": "var(--color-accent-deep)" }
+          },
+          "textContent": "${state.email}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "border": "1px solid var(--color-rule)", "padding": "1.75rem" },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "fontFamily": "var(--font-sans)",
+            "fontSize": "0.7rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "color": "var(--color-accent)",
+            "marginBottom": "0.9rem"
+          },
+          "textContent": "Hours"
+        },
+        {
+          "tagName": "p",
+          "style": { "margin": "0 0 0.35rem", "fontSize": "0.98rem", "color": "var(--color-ink)" },
+          "textContent": "${state.hours1}"
+        },
+        {
+          "tagName": "p",
+          "style": { "margin": "0", "fontSize": "0.98rem", "color": "var(--color-muted)" },
+          "textContent": "${state.hours2}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "backgroundColor": "var(--color-ink-deep)",
+        "color": "var(--color-text-white)",
+        "borderTop": "3px solid var(--color-accent)",
+        "padding": "1.75rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": {
+            "fontFamily": "var(--font-serif)",
+            "fontSize": "1.3rem",
+            "fontWeight": "500",
+            "margin": "0 0 0.6rem"
+          },
+          "textContent": "Prefer to read first?"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "margin": "0 0 1.1rem",
+            "fontSize": "0.95rem",
+            "lineHeight": "1.6",
+            "color": "rgba(244,241,233,0.78)"
+          },
+          "textContent": "Browse the Quarterly for our latest notes on tax, cash flow, and financial strategy."
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "/insights/" },
+          "style": {
+            "fontFamily": "var(--font-sans)",
+            "fontSize": "0.72rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.14em",
+            "color": "var(--color-accent)",
+            "textDecoration": "none"
+          },
+          "textContent": "Read the Quarterly →"
+        }
+      ]
+    }
+  ]
+}

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

@@ -1,31 +1,52 @@
 {
   "tagName": "pf-cta",
   "state": {
+    "eyebrow": "Consultation",
     "heading": "",
     "text": "",
-    "cta": "Book a Consultation",
+    "cta": "Book a consultation",
     "ctaHref": "/contact/"
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
+    "backgroundColor": "var(--color-ink-deep)",
     "color": "var(--color-text-white)",
-    "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
-    "textAlign": "center"
+    "borderTop": "3px solid var(--color-accent)",
+    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem"
   },
   "children": [
     {
       "tagName": "div",
-      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "style": {
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto",
+        "textAlign": "center"
+      },
       "children": [
+        {
+          "tagName": "p",
+          "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"
+          },
+          "textContent": "${state.eyebrow}"
+        },
         {
           "tagName": "h2",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
-            "fontWeight": "700",
-            "lineHeight": "1.15",
-            "margin": "0 0 1rem"
+            "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"
           },
           "textContent": "${state.heading}"
         },
@@ -34,8 +55,9 @@
           "style": {
             "fontSize": "1.1rem",
             "lineHeight": "1.7",
-            "opacity": "0.85",
-            "margin": "0 0 2rem"
+            "color": "rgba(244,241,233,0.78)",
+            "margin": "0 auto 2.25rem",
+            "maxWidth": "52ch"
           },
           "textContent": "${state.text}"
         },
@@ -44,15 +66,17 @@
           "attributes": { "href": "${state.ctaHref}" },
           "style": {
             "display": "inline-block",
-            "backgroundColor": "var(--color-primary)",
-            "color": "var(--color-text-white)",
-            "padding": "0.9rem 2.25rem",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1.05rem",
+            "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": "var(--color-primary-hover)" }
+            ":hover": { "backgroundColor": "#b0904c" }
           },
           "textContent": "${state.cta}"
         }

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

@@ -7,37 +7,34 @@
   },
   "style": {
     "display": "block",
-    "padding": "1.75rem",
-    "backgroundColor": "var(--color-bg-cream)",
-    "borderRadius": "var(--radius)",
-    "border": "1px solid var(--color-border)"
+    "paddingTop": "1.5rem",
+    "borderTop": "2px solid var(--color-rule)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "display": "${state.step ? 'inline-flex' : 'none'}",
-        "alignItems": "center",
-        "justifyContent": "center",
-        "width": "2.25rem",
-        "height": "2.25rem",
-        "borderRadius": "999px",
-        "backgroundColor": "var(--color-primary)",
-        "color": "var(--color-text-white)",
-        "fontFamily": "var(--font-heading)",
-        "fontWeight": "700",
-        "fontSize": "1rem",
-        "marginBottom": "1rem"
+        "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"
       },
-      "textContent": "${state.step}"
+      "textContent": "Step ${state.step}"
     },
     {
       "tagName": "h3",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
-        "fontWeight": "600",
-        "margin": "0 0 0.5rem"
+        "fontFamily": "var(--font-serif)",
+        "fontSize": "1.4rem",
+        "fontWeight": "500",
+        "lineHeight": "1.2",
+        "margin": "0 0 0.6rem",
+        "color": "var(--color-ink)"
       },
       "textContent": "${state.title}"
     },
@@ -45,9 +42,9 @@
       "tagName": "p",
       "style": {
         "margin": "0",
-        "color": "var(--color-text-muted)",
-        "fontSize": "0.98rem",
-        "lineHeight": "1.65"
+        "color": "var(--color-muted)",
+        "fontSize": "1rem",
+        "lineHeight": "1.6"
       },
       "textContent": "${state.text}"
     }