@jxsuite/starters 0.34.0 → 0.35.1

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

@@ -0,0 +1,144 @@
+{
+  "tagName": "pf-insight-row",
+  "state": {
+    "number": "",
+    "title": "",
+    "excerpt": "",
+    "date": "",
+    "category": "",
+    "readingTime": "",
+    "author": "",
+    "href": "/insights/"
+  },
+  "style": { "display": "block" },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": { "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)"
+        }
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "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"
+          },
+          "textContent": "${state.number}"
+        },
+        {
+          "tagName": "div",
+          "style": { "minWidth": "0" },
+          "children": [
+            {
+              "tagName": "span",
+              "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"
+              },
+              "textContent": "${state.category}"
+            },
+            {
+              "tagName": "h3",
+              "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"
+              },
+              "textContent": "${state.title}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0",
+                "fontFamily": "var(--font-serif)",
+                "fontSize": "1.08rem",
+                "lineHeight": "1.55",
+                "color": "var(--color-muted)",
+                "maxWidth": "60ch"
+              },
+              "textContent": "${state.excerpt}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "textAlign": "right",
+            "fontFamily": "var(--font-sans)",
+            "@--md": { "textAlign": "left", "gridColumn": "2 / -1" }
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontSize": "0.72rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.12em",
+                "color": "var(--color-ink)",
+                "fontVariantNumeric": "tabular-nums",
+                "marginBottom": "0.4rem"
+              },
+              "textContent": "${state.date}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.readingTime ? 'block' : 'none'}",
+                "fontSize": "0.72rem",
+                "letterSpacing": "0.06em",
+                "color": "var(--color-muted)",
+                "fontVariantNumeric": "tabular-nums",
+                "marginBottom": "0.65rem"
+              },
+              "textContent": "${state.readingTime} min read"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontSize": "0.72rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.12em",
+                "color": "var(--color-accent)"
+              },
+              "textContent": "Read →"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -3,6 +3,7 @@
   "state": {
     "image": { "type": "string", "format": "image", "default": "" },
     "imageAlt": "",
+    "kicker": "The practice",
     "reverse": false
   },
   "style": {
@@ -16,15 +17,18 @@
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
         "display": "grid",
-        "gridTemplateColumns": "1fr 1fr",
-        "gap": "clamp(2rem, 5vw, 4rem)",
+        "gridTemplateColumns": "0.85fr 1fr",
+        "gap": "clamp(2rem, 6vw, 5rem)",
         "alignItems": "center",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2rem" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "style": {
+            "order": "${state.reverse ? '2' : '1'}",
+            "position": "relative"
+          },
           "children": [
             {
               "tagName": "img",
@@ -36,9 +40,9 @@
               "style": {
                 "width": "100%",
                 "height": "auto",
-                "borderRadius": "var(--radius)",
                 "display": "block",
-                "boxShadow": "0 12px 40px rgba(15,23,42,0.14)"
+                "border": "1px solid var(--color-rule)",
+                "filter": "grayscale(1) contrast(1.03)"
               }
             }
           ]
@@ -47,11 +51,41 @@
           "tagName": "div",
           "style": {
             "order": "${state.reverse ? '1' : '2'}",
-            "fontSize": "1.08rem",
-            "lineHeight": "1.8",
-            "color": "var(--color-text-primary)"
+            "& 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" }
           },
-          "children": [{ "tagName": "slot" }]
+          "children": [
+            {
+              "tagName": "p",
+              "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)"
+              },
+              "textContent": "${state.kicker}"
+            },
+            { "tagName": "slot" }
+          ]
         }
       ]
     }

package/sites/professional-firm/components/pf-logo-bar.json

@@ -1,7 +1,7 @@
 {
   "tagName": "pf-logo-bar",
   "state": {
-    "label": "Trusted by teams across the region",
+    "label": "Trusted by founders, operators, and boards",
     "logo1": "Northwind Labs",
     "logo2": "Harbor Freight Co.",
     "logo3": "Cedar & Vine",
@@ -10,29 +10,35 @@
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-cream)",
-    "borderTop": "1px solid var(--color-border)",
-    "borderBottom": "1px solid var(--color-border)",
-    "padding": "2.5rem 1.5rem"
+    "backgroundColor": "var(--color-paper)",
+    "borderBottom": "1px solid var(--color-rule)",
+    "padding": "clamp(1.75rem, 3vw, 2.5rem) 1.5rem"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
         "maxWidth": "var(--max-width)",
-        "margin": "0 auto"
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "auto 1fr",
+        "gap": "clamp(1.5rem, 4vw, 3rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "1.25rem" }
       },
       "children": [
         {
           "tagName": "p",
           "style": {
-            "textAlign": "center",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.14em",
-            "fontSize": "0.75rem",
+            "margin": "0",
+            "maxWidth": "12ch",
+            "fontFamily": "var(--font-sans)",
+            "fontSize": "0.7rem",
             "fontWeight": "600",
-            "color": "var(--color-text-muted)",
-            "margin": "0 0 1.5rem"
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "color": "var(--color-muted)",
+            "lineHeight": "1.5"
           },
           "textContent": "${state.label}"
         },
@@ -42,40 +48,37 @@
             "display": "flex",
             "flexWrap": "wrap",
             "alignItems": "center",
-            "justifyContent": "space-between",
-            "gap": "1.5rem 2.5rem"
+            "gap": "1rem 2.5rem",
+            "@--md": { "gap": "0.75rem 1.75rem" }
           },
           "children": [
             {
               "tagName": "span",
               "style": {
-                "fontFamily": "var(--font-heading)",
+                "fontFamily": "var(--font-serif)",
                 "fontSize": "1.2rem",
-                "fontWeight": "700",
-                "color": "var(--color-text-primary)",
-                "opacity": "0.6"
+                "fontWeight": "500",
+                "color": "var(--color-ink)"
               },
               "textContent": "${state.logo1}"
             },
             {
               "tagName": "span",
               "style": {
-                "fontFamily": "var(--font-heading)",
+                "fontFamily": "var(--font-serif)",
                 "fontSize": "1.2rem",
-                "fontWeight": "700",
-                "color": "var(--color-text-primary)",
-                "opacity": "0.6"
+                "fontWeight": "500",
+                "color": "var(--color-ink)"
               },
               "textContent": "${state.logo2}"
             },
             {
               "tagName": "span",
               "style": {
-                "fontFamily": "var(--font-heading)",
+                "fontFamily": "var(--font-serif)",
                 "fontSize": "1.2rem",
-                "fontWeight": "700",
-                "color": "var(--color-text-primary)",
-                "opacity": "0.6",
+                "fontWeight": "500",
+                "color": "var(--color-ink)",
                 "@--sm": { "display": "none" }
               },
               "textContent": "${state.logo3}"
@@ -83,11 +86,10 @@
             {
               "tagName": "span",
               "style": {
-                "fontFamily": "var(--font-heading)",
+                "fontFamily": "var(--font-serif)",
                 "fontSize": "1.2rem",
-                "fontWeight": "700",
-                "color": "var(--color-text-primary)",
-                "opacity": "0.6",
+                "fontWeight": "500",
+                "color": "var(--color-ink)",
                 "@--md": { "display": "none" }
               },
               "textContent": "${state.logo4}"
@@ -95,11 +97,10 @@
             {
               "tagName": "span",
               "style": {
-                "fontFamily": "var(--font-heading)",
+                "fontFamily": "var(--font-serif)",
                 "fontSize": "1.2rem",
-                "fontWeight": "700",
-                "color": "var(--color-text-primary)",
-                "opacity": "0.6",
+                "fontWeight": "500",
+                "color": "var(--color-ink)",
                 "@--md": { "display": "none" }
               },
               "textContent": "${state.logo5}"

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

@@ -1,16 +1,17 @@
 {
   "tagName": "pf-nav",
   "state": {
-    "brand": "Meridian Advisory"
+    "brand": "Meridian",
+    "sub": "Advisory"
   },
   "style": {
     "display": "block",
     "position": "sticky",
     "top": "0",
     "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.9)",
-    "backdropFilter": "blur(8px)",
-    "borderBottom": "1px solid var(--color-border)"
+    "backgroundColor": "var(--color-paper)",
+    "borderTop": "3px solid var(--color-accent)",
+    "borderBottom": "1px solid var(--color-rule)"
   },
   "children": [
     {
@@ -18,9 +19,9 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "1rem 1.5rem",
+        "padding": "0.9rem 1.5rem",
         "display": "flex",
-        "alignItems": "center",
+        "alignItems": "baseline",
         "justifyContent": "space-between",
         "gap": "1.5rem"
       },
@@ -29,78 +30,102 @@
           "tagName": "a",
           "attributes": { "href": "/" },
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.4rem",
-            "fontWeight": "700",
-            "color": "var(--color-text-primary)",
+            "display": "inline-flex",
+            "alignItems": "baseline",
+            "gap": "0.6rem",
             "textDecoration": "none",
-            "letterSpacing": "-0.01em"
+            "color": "var(--color-ink)"
           },
-          "textContent": "${state.brand}"
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-serif)",
+                "fontSize": "1.5rem",
+                "fontWeight": "600",
+                "letterSpacing": "-0.01em",
+                "lineHeight": "1"
+              },
+              "textContent": "${state.brand}"
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-sans)",
+                "fontSize": "0.68rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.28em",
+                "color": "var(--color-accent)"
+              },
+              "textContent": "${state.sub}"
+            }
+          ]
         },
         {
           "tagName": "nav",
           "style": {
             "display": "flex",
-            "alignItems": "center",
-            "gap": "1.75rem",
-            "@--sm": { "gap": "1rem" }
+            "alignItems": "baseline",
+            "gap": "2rem",
+            "fontFamily": "var(--font-sans)",
+            "fontSize": "0.72rem",
+            "fontWeight": "600",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "@--sm": { "gap": "1.15rem" }
           },
           "children": [
             {
               "tagName": "a",
               "attributes": { "href": "/services/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-ink)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
-                ":hover": { "color": "var(--color-primary)" }
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-accent)" }
               },
-              "textContent": "Services"
+              "textContent": "Practice"
             },
             {
               "tagName": "a",
-              "attributes": { "href": "/team/" },
+              "attributes": { "href": "/insights/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-ink)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
+                "transition": "color 0.15s",
                 "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                ":hover": { "color": "var(--color-accent)" }
               },
-              "textContent": "Team"
+              "textContent": "Insights"
             },
             {
               "tagName": "a",
-              "attributes": { "href": "/insights/" },
+              "attributes": { "href": "/team/" },
               "style": {
-                "color": "var(--color-text-primary)",
+                "color": "var(--color-ink)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.95rem",
+                "transition": "color 0.15s",
                 "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                ":hover": { "color": "var(--color-accent)" }
               },
-              "textContent": "Insights"
+              "textContent": "People"
             },
             {
               "tagName": "a",
               "attributes": { "href": "/contact/" },
               "style": {
-                "display": "inline-block",
-                "backgroundColor": "var(--color-primary)",
-                "color": "var(--color-text-white)",
-                "padding": "0.55rem 1.25rem",
-                "borderRadius": "var(--radius)",
+                "color": "var(--color-ink)",
                 "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.95rem",
-                "transition": "background-color 0.15s",
-                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                "border": "1px solid var(--color-rule)",
+                "padding": "0.5rem 0.9rem",
+                "transition": "background-color 0.15s, color 0.15s",
+                ":hover": {
+                  "backgroundColor": "var(--color-ink)",
+                  "color": "var(--color-paper)"
+                }
               },
-              "textContent": "Book a Consultation"
+              "textContent": "Consult"
             }
           ]
         }

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

@@ -2,39 +2,62 @@
   "tagName": "pf-section-header",
   "state": {
     "eyebrow": "",
+    "index": "",
     "heading": "",
-    "subheading": "",
-    "align": "center"
+    "subheading": ""
   },
   "style": {
     "display": "block",
-    "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 2.5rem",
-    "textAlign": "${state.align}"
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto clamp(2rem, 4vw, 3rem)"
   },
   "children": [
     {
-      "tagName": "p",
+      "tagName": "div",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
-        "textTransform": "uppercase",
-        "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
+        "display": "flex",
+        "alignItems": "baseline",
+        "justifyContent": "space-between",
+        "gap": "1rem",
+        "paddingBottom": "1rem",
+        "borderBottom": "1px solid var(--color-rule)",
+        "fontFamily": "var(--font-sans)",
+        "fontSize": "0.72rem",
         "fontWeight": "600",
-        "color": "var(--color-primary)",
-        "margin": "0 0 0.75rem"
+        "textTransform": "uppercase",
+        "letterSpacing": "0.18em"
       },
-      "textContent": "${state.eyebrow}"
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.eyebrow ? 'inline' : 'none'}",
+            "color": "var(--color-accent)"
+          },
+          "textContent": "${state.eyebrow}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.index ? 'inline' : 'none'}",
+            "color": "var(--color-muted)",
+            "fontVariantNumeric": "tabular-nums"
+          },
+          "textContent": "${state.index}"
+        }
+      ]
     },
     {
       "tagName": "h2",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
-        "fontWeight": "700",
-        "lineHeight": "1.15",
+        "fontFamily": "var(--font-serif)",
+        "fontSize": "clamp(1.9rem, 4vw, 2.9rem)",
+        "fontWeight": "500",
+        "lineHeight": "1.12",
         "letterSpacing": "-0.02em",
-        "margin": "0"
+        "margin": "1.5rem 0 0",
+        "maxWidth": "20ch",
+        "color": "var(--color-ink)"
       },
       "textContent": "${state.heading}"
     },
@@ -42,10 +65,11 @@
       "tagName": "p",
       "style": {
         "display": "${state.subheading ? 'block' : 'none'}",
-        "fontSize": "1.1rem",
-        "lineHeight": "1.7",
-        "color": "var(--color-text-muted)",
-        "margin": "1rem 0 0"
+        "fontSize": "1.08rem",
+        "lineHeight": "1.65",
+        "color": "var(--color-muted)",
+        "margin": "1rem 0 0",
+        "maxWidth": "56ch"
       },
       "textContent": "${state.subheading}"
     }