@jxsuite/starters 0.34.0 → 0.35.0

package/sites/nonprofit/project.json

@@ -8,7 +8,10 @@
   "$head": [
     {
       "tagName": "meta",
-      "attributes": { "name": "viewport", "content": "width=device-width, initial-scale=1" }
+      "attributes": {
+        "name": "viewport",
+        "content": "width=device-width, initial-scale=1"
+      }
     },
     {
       "tagName": "meta",
@@ -19,21 +22,31 @@
     },
     {
       "tagName": "link",
-      "attributes": { "rel": "icon", "href": "/favicon.svg" }
+      "attributes": {
+        "rel": "icon",
+        "href": "/favicon.svg"
+      }
     },
     {
       "tagName": "link",
-      "attributes": { "rel": "preconnect", "href": "https://fonts.googleapis.com" }
+      "attributes": {
+        "rel": "preconnect",
+        "href": "https://fonts.googleapis.com"
+      }
     },
     {
       "tagName": "link",
-      "attributes": { "rel": "preconnect", "href": "https://fonts.gstatic.com", "crossorigin": "" }
+      "attributes": {
+        "rel": "preconnect",
+        "href": "https://fonts.gstatic.com",
+        "crossorigin": ""
+      }
     },
     {
       "tagName": "link",
       "attributes": {
         "rel": "stylesheet",
-        "href": "https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap"
+        "href": "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Nunito:wght@400;500;600;700;800&display=swap"
       }
     }
   ],
@@ -41,31 +54,50 @@
     "--": "1200px",
     "--lg": "(max-width: 1024px)",
     "--md": "(max-width: 768px)",
-    "--sm": "(max-width: 640px)"
+    "--sm": "(max-width: 560px)"
   },
   "style": {
-    "--color-primary": "#15803d",
-    "--color-primary-hover": "#166534",
-    "--color-ink": "#14261c",
-    "--color-bg-dark": "#14312a",
-    "--color-bg-cream": "#f3f7f1",
+    "--color-primary": "#2f7d55",
+    "--color-primary-hover": "#256845",
+    "--color-primary-deep": "#173a2b",
+    "--color-primary-soft": "#e3efe6",
+    "--color-accent": "#f26a3d",
+    "--color-accent-hover": "#e0552b",
+    "--color-accent-soft": "#ffe6da",
+    "--color-gold": "#e9a63d",
+    "--color-gold-soft": "#fbeccf",
+    "--color-ink": "#22332a",
+    "--color-bg-dark": "#173a2b",
+    "--color-bg-cream": "#fbf5ec",
+    "--color-bg-cream-deep": "#f6ecda",
+    "--color-bg-mint": "#eef6ef",
     "--color-bg-white": "#ffffff",
-    "--color-text-primary": "#1a2e22",
+    "--color-text-primary": "#23342b",
+    "--color-text-secondary": "#3f5147",
+    "--color-text-muted": "#61715f",
     "--color-text-white": "#ffffff",
-    "--color-text-muted": "#5b6b60",
-    "--color-border": "#dfe7dc",
-    "--color-accent": "#ea580c",
-    "--color-accent-hover": "#c2410c",
-    "--font-heading": "'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
-    "--max-width": "1200px",
-    "--max-width-narrow": "820px",
-    "--radius": "0.75rem",
+    "--color-border": "#eadfce",
+    "--color-border-strong": "#dccdb4",
+    "--font-display": "'Fraunces', Georgia, 'Times New Roman', serif",
+    "--font-heading": "'Fraunces', Georgia, 'Times New Roman', serif",
+    "--font-body": "'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "--max-width": "1180px",
+    "--max-width-wide": "1300px",
+    "--max-width-narrow": "760px",
+    "--radius": "1.25rem",
+    "--radius-sm": "0.75rem",
+    "--radius-lg": "2rem",
+    "--radius-pill": "999px",
+    "--shadow-card": "0 2px 6px rgba(23,58,43,0.05), 0 20px 44px -26px rgba(23,58,43,0.3)",
+    "--shadow-float": "0 34px 74px -32px rgba(23,58,43,0.4)",
     "margin": "0",
     "padding": "0",
-    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
-    "lineHeight": "1.6",
+    "fontFamily": "var(--font-body)",
+    "fontSize": "17px",
+    "lineHeight": "1.7",
     "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-bg-white)",
+    "WebkitFontSmoothing": "antialiased"
   },
   "imports": {
     "Markdown": "@jxsuite/parser/Markdown.class.json",
@@ -75,7 +107,12 @@
     "optimize": true,
     "widths": [320, 640, 960, 1280, 1920],
     "formats": ["webp", "avif"],
-    "quality": { "webp": 80, "avif": 65, "jpeg": 80, "png": 80 },
+    "quality": {
+      "webp": 80,
+      "avif": 65,
+      "jpeg": 80,
+      "png": 80
+    },
     "sizes": "(max-width: 768px) 100vw, 50vw",
     "lazyLoad": true
   },
@@ -86,10 +123,19 @@
       "schema": {
         "type": "object",
         "properties": {
-          "title": { "type": "string" },
-          "summary": { "type": "string" },
-          "image": { "type": "string", "format": "image" },
-          "order": { "type": "number" }
+          "title": {
+            "type": "string"
+          },
+          "summary": {
+            "type": "string"
+          },
+          "image": {
+            "type": "string",
+            "format": "image"
+          },
+          "order": {
+            "type": "number"
+          }
         },
         "required": ["title", "summary"]
       }

package/sites/portfolio/components/pv-about-split.json

@@ -7,7 +7,7 @@
   },
   "style": {
     "display": "block",
-    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    "padding": "clamp(4rem, 10vw, 8rem) clamp(1.5rem, 4vw, 4rem)"
   },
   "children": [
     {
@@ -16,15 +16,15 @@
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
         "display": "grid",
-        "gridTemplateColumns": "5fr 6fr",
-        "gap": "clamp(2rem, 5vw, 4.5rem)",
+        "gridTemplateColumns": "6fr 5fr",
+        "gap": "clamp(2.5rem, 6vw, 6rem)",
         "alignItems": "center",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "@--md": { "gridTemplateColumns": "1fr", "gap": "2.5rem" }
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "style": { "order": "${state.reverse ? '2' : '1'}", "position": "relative" },
           "children": [
             {
               "tagName": "img",
@@ -35,10 +35,22 @@
               },
               "style": {
                 "width": "100%",
-                "height": "auto",
-                "borderRadius": "var(--radius)",
+                "aspectRatio": "4 / 5",
+                "objectFit": "cover",
                 "display": "block",
-                "boxShadow": "0 18px 50px rgba(17,24,39,0.16)"
+                "filter": "grayscale(0.15)"
+              }
+            },
+            {
+              "tagName": "span",
+              "style": {
+                "position": "absolute",
+                "top": "1rem",
+                "left": "1rem",
+                "right": "1rem",
+                "bottom": "1rem",
+                "border": "1px solid rgba(200, 164, 92, 0.4)",
+                "pointerEvents": "none"
               }
             }
           ]
@@ -49,7 +61,7 @@
             "order": "${state.reverse ? '1' : '2'}",
             "fontSize": "1.1rem",
             "lineHeight": "1.85",
-            "color": "var(--color-text-primary)"
+            "color": "var(--color-text-muted)"
           },
           "children": [{ "tagName": "slot" }]
         }

package/sites/portfolio/components/pv-category-pill.json

@@ -5,15 +5,16 @@
   },
   "style": {
     "display": "inline-block",
-    "padding": "0.3rem 0.8rem",
-    "border": "1px solid var(--color-border)",
+    "padding": "0.4rem 1rem",
+    "border": "1px solid var(--color-line)",
     "borderRadius": "999px",
-    "fontSize": "0.72rem",
+    "fontSize": "0.68rem",
     "fontWeight": "600",
-    "letterSpacing": "0.14em",
+    "letterSpacing": "0.16em",
     "textTransform": "uppercase",
-    "color": "var(--color-primary)",
-    "backgroundColor": "var(--color-bg-cream)"
+    "color": "var(--color-text-muted)",
+    "transition": "border-color 0.15s, color 0.15s",
+    ":hover": { "borderColor": "var(--color-primary)", "color": "var(--color-primary)" }
   },
   "children": [
     {

package/sites/portfolio/components/pv-contact-form.json

@@ -4,16 +4,30 @@
     "heading": "Project inquiry"
   },
   "style": {
-    "display": "block"
+    "display": "block",
+    "& input": {
+      "width": "100%",
+      "padding": "0.85rem 1rem",
+      "border": "1px solid var(--color-line)",
+      "backgroundColor": "var(--color-bg-elev)",
+      "color": "var(--color-text-primary)",
+      "borderRadius": "0",
+      "fontSize": "1rem",
+      "fontFamily": "inherit",
+      "outline": "none"
+    },
+    "& input:focus": { "borderColor": "var(--color-primary)" },
+    "& textarea:focus": { "borderColor": "var(--color-primary)" }
   },
   "children": [
     {
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.6rem",
-        "fontWeight": "600",
-        "margin": "0 0 1.25rem"
+        "fontSize": "1.9rem",
+        "fontWeight": "500",
+        "margin": "0 0 1.5rem",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.heading}"
     },
@@ -30,13 +44,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,13 +54,6 @@
             "placeholder": "Email address",
             "required": "true",
             "aria-label": "Email address"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
           }
         },
         {
@@ -67,25 +67,11 @@
                 "name": "type",
                 "placeholder": "Type of project",
                 "aria-label": "Type of project"
-              },
-              "style": {
-                "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
               }
             },
             {
               "tagName": "input",
-              "attributes": { "type": "date", "name": "date", "aria-label": "Preferred date" },
-              "style": {
-                "width": "100%",
-                "padding": "0.75rem 0.9rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem"
-              }
+              "attributes": { "type": "date", "name": "date", "aria-label": "Preferred date" }
             }
           ]
         },
@@ -99,26 +85,29 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
+            "padding": "0.85rem 1rem",
+            "border": "1px solid var(--color-line)",
+            "backgroundColor": "var(--color-bg-elev)",
+            "color": "var(--color-text-primary)",
+            "borderRadius": "0",
             "fontSize": "1rem",
-            "fontFamily": "inherit"
+            "fontFamily": "inherit",
+            "outline": "none"
           }
         },
         {
           "tagName": "button",
           "attributes": { "type": "submit" },
-          "textContent": "Send Inquiry",
+          "textContent": "Send Inquiry →",
           "style": {
             "backgroundColor": "var(--color-primary)",
-            "color": "var(--color-text-white)",
-            "padding": "0.85rem 1.75rem",
+            "color": "var(--color-bg)",
+            "padding": "0.9rem 1.75rem",
             "border": "none",
-            "borderRadius": "var(--radius)",
-            "fontSize": "0.95rem",
-            "fontWeight": "600",
-            "letterSpacing": "0.04em",
+            "borderRadius": "0",
+            "fontSize": "0.8rem",
+            "fontWeight": "700",
+            "letterSpacing": "0.14em",
             "textTransform": "uppercase",
             "cursor": "pointer",
             "justifySelf": "start",
@@ -129,7 +118,7 @@
         {
           "tagName": "p",
           "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)", "margin": "0" },
-          "textContent": "This is a demo form. Wire it to your booking provider or email in pages/contact.md."
+          "textContent": "Demo form — wire it to your booking provider or email in pages/contact.md."
         }
       ]
     }

package/sites/portfolio/components/pv-cta.json

@@ -8,24 +8,38 @@
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
+    "backgroundColor": "var(--color-bg-elev)",
+    "borderTop": "1px solid var(--color-line)",
     "color": "var(--color-text-white)",
-    "padding": "clamp(4rem, 9vw, 6.5rem) 1.5rem",
+    "padding": "clamp(5rem, 12vw, 9rem) 1.5rem",
     "textAlign": "center"
   },
   "children": [
     {
       "tagName": "div",
-      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "style": { "maxWidth": "760px", "margin": "0 auto" },
       "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "textTransform": "uppercase",
+            "letterSpacing": "0.28em",
+            "fontSize": "0.7rem",
+            "fontWeight": "500",
+            "color": "var(--color-primary)",
+            "margin": "0 0 1.5rem"
+          },
+          "textContent": "Commissions open"
+        },
         {
           "tagName": "h2",
           "style": {
             "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(2rem, 4.5vw, 3.25rem)",
-            "fontWeight": "600",
-            "lineHeight": "1.12",
-            "margin": "0 0 1.1rem"
+            "fontSize": "clamp(2.5rem, 6vw, 4.5rem)",
+            "fontWeight": "400",
+            "lineHeight": "1.04",
+            "letterSpacing": "-0.01em",
+            "margin": "0 0 1.5rem"
           },
           "textContent": "${state.heading}"
         },
@@ -33,9 +47,10 @@
           "tagName": "p",
           "style": {
             "fontSize": "1.15rem",
-            "lineHeight": "1.7",
-            "opacity": "0.82",
-            "margin": "0 0 2.25rem"
+            "lineHeight": "1.75",
+            "color": "var(--color-text-muted)",
+            "margin": "0 auto 2.5rem",
+            "maxWidth": "48ch"
           },
           "textContent": "${state.text}"
         },
@@ -43,20 +58,21 @@
           "tagName": "a",
           "attributes": { "href": "${state.ctaHref}" },
           "style": {
-            "display": "inline-block",
-            "backgroundColor": "var(--color-primary)",
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.7rem",
             "color": "var(--color-text-white)",
-            "padding": "0.95rem 2.4rem",
-            "borderRadius": "var(--radius)",
-            "fontSize": "0.95rem",
+            "fontSize": "0.8rem",
             "fontWeight": "600",
-            "letterSpacing": "0.05em",
             "textTransform": "uppercase",
+            "letterSpacing": "0.2em",
             "textDecoration": "none",
-            "transition": "background-color 0.15s",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+            "borderBottom": "1px solid var(--color-primary)",
+            "paddingBottom": "0.5rem",
+            "transition": "gap 0.2s, color 0.15s",
+            ":hover": { "gap": "1.2rem", "color": "var(--color-primary)" }
           },
-          "textContent": "${state.cta}"
+          "textContent": "${state.cta} →"
         }
       ]
     }