@jxsuite/starters 0.34.0 → 0.35.1

package/sites/home-services/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=Manrope:wght@500;600;700;800&display=swap"
+        "href": "https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap"
       }
     }
   ],
@@ -44,27 +57,61 @@
     "--sm": "(max-width: 640px)"
   },
   "style": {
-    "--color-primary": "#ea580c",
-    "--color-primary-hover": "#c2410c",
-    "--color-ink": "#1c1917",
-    "--color-bg-dark": "#1c1917",
-    "--color-bg-cream": "#f5f5f4",
+    "--color-primary": "#f4511e",
+    "--color-primary-hover": "#d84315",
+    "--color-primary-soft": "rgba(244, 81, 30, 0.12)",
+    "--color-ink": "#0e1a23",
+    "--color-steel": "#122430",
+    "--color-steel-2": "#1a3341",
+    "--color-steel-line": "#28414f",
+    "--color-bg-dark": "#0e1a23",
+    "--color-bg-steel": "#122430",
+    "--color-bg-cream": "#eef1f4",
+    "--color-bg-concrete": "#e5eaee",
     "--color-bg-white": "#ffffff",
-    "--color-text-primary": "#1c1917",
+    "--color-text-primary": "#14212b",
     "--color-text-white": "#ffffff",
-    "--color-text-muted": "#57534e",
-    "--color-border": "#e7e5e4",
-    "--color-accent": "#ea580c",
-    "--font-heading": "'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "--color-text-muted": "#5c6b77",
+    "--color-text-steel-muted": "#9fb2be",
+    "--color-border": "#d9e0e6",
+    "--color-border-strong": "#c1cbd3",
+    "--color-accent": "#f4511e",
+    "--hazard": "repeating-linear-gradient(-45deg, #f4511e 0 16px, #0e1a23 16px 32px)",
+    "--font-heading": "'Oswald', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif",
+    "--font-body": "'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
     "--max-width": "1200px",
     "--max-width-narrow": "820px",
     "--radius": "0.5rem",
+    "--radius-sm": "0.35rem",
+    "--shadow-card": "0 2px 4px rgba(14,26,35,0.05), 0 16px 40px -22px rgba(14,26,35,0.35)",
+    "--shadow-float": "0 34px 70px -30px rgba(14,26,35,0.5)",
     "margin": "0",
     "padding": "0",
-    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontFamily": "var(--font-body)",
+    "fontSize": "17px",
     "lineHeight": "1.6",
     "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-bg-white)",
+    "WebkitFontSmoothing": "antialiased",
+    "h1": {
+      "fontFamily": "var(--font-heading)"
+    },
+    "h2": {
+      "fontFamily": "var(--font-heading)"
+    },
+    "h3": {
+      "fontFamily": "var(--font-heading)"
+    },
+    "h4": {
+      "fontFamily": "var(--font-heading)"
+    },
+    "strong": {
+      "color": "var(--color-text-primary)"
+    },
+    "a": {
+      "color": "var(--color-primary)",
+      "fontWeight": "600"
+    }
   },
   "imports": {
     "Markdown": "@jxsuite/parser/Markdown.class.json",
@@ -75,7 +122,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 +138,18 @@
       "schema": {
         "type": "object",
         "properties": {
-          "name": { "type": "string" },
-          "summary": { "type": "string" },
-          "icon": { "type": "string" },
-          "order": { "type": "number" }
+          "name": {
+            "type": "string"
+          },
+          "summary": {
+            "type": "string"
+          },
+          "icon": {
+            "type": "string"
+          },
+          "order": {
+            "type": "number"
+          }
         },
         "required": ["name", "summary"]
       }

package/sites/nonprofit/components/np-contact-form.json

@@ -4,15 +4,22 @@
     "heading": "Send us a message"
   },
   "style": {
-    "display": "block"
+    "display": "block",
+    "padding": "clamp(1.75rem, 4vw, 2.5rem)",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius-lg)",
+    "boxShadow": "var(--shadow-card)"
   },
   "children": [
     {
       "tagName": "h3",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.6rem",
-        "margin": "0 0 1.25rem"
+        "fontFamily": "var(--font-display)",
+        "fontSize": "1.75rem",
+        "fontWeight": "600",
+        "color": "var(--color-primary-deep)",
+        "margin": "0 0 1.5rem"
       },
       "textContent": "${state.heading}"
     },
@@ -32,10 +39,12 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
+            "padding": "0.85rem 1rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-cream)"
           }
         },
         {
@@ -49,10 +58,12 @@
           },
           "style": {
             "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
+            "padding": "0.85rem 1rem",
+            "border": "1px solid var(--color-border-strong)",
+            "borderRadius": "var(--radius-sm)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-cream)"
           }
         },
         {
@@ -60,11 +71,11 @@
           "attributes": { "name": "interest", "aria-label": "I'm interested in" },
           "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-border-strong)",
+            "borderRadius": "var(--radius-sm)",
             "fontSize": "1rem",
-            "backgroundColor": "var(--color-bg-white)",
+            "backgroundColor": "var(--color-bg-cream)",
             "fontFamily": "inherit"
           },
           "children": [
@@ -100,11 +111,12 @@
           },
           "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-border-strong)",
+            "borderRadius": "var(--radius-sm)",
             "fontSize": "1rem",
-            "fontFamily": "inherit"
+            "fontFamily": "inherit",
+            "backgroundColor": "var(--color-bg-cream)"
           }
         },
         {
@@ -112,20 +124,36 @@
           "attributes": { "type": "submit" },
           "textContent": "Send message",
           "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "gap": "0.4rem",
             "backgroundColor": "var(--color-accent)",
             "color": "var(--color-text-white)",
-            "padding": "0.85rem 1.5rem",
+            "padding": "0.95rem 1.75rem",
             "border": "none",
             "borderRadius": "999px",
             "fontSize": "1rem",
-            "fontWeight": "600",
+            "fontFamily": "inherit",
+            "fontWeight": "800",
             "cursor": "pointer",
-            "justifySelf": "start"
+            "justifySelf": "start",
+            "boxShadow": "0 12px 26px -12px rgba(242,106,61,0.8)",
+            "transition": "background-color 0.15s, transform 0.15s",
+            ":hover": {
+              "backgroundColor": "var(--color-accent-hover)",
+              "transform": "translateY(-1px)"
+            }
           }
         },
         {
           "tagName": "p",
-          "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)", "margin": "0" },
+          "style": {
+            "fontSize": "0.85rem",
+            "fontWeight": "600",
+            "color": "var(--color-text-muted)",
+            "margin": "0"
+          },
           "textContent": "This is a demo form. Wire it to your email or CRM in pages/contact.md."
         }
       ]

package/sites/nonprofit/components/np-contact-info.json

@@ -16,41 +16,42 @@
       "tagName": "div",
       "style": {
         "padding": "2rem",
-        "backgroundColor": "var(--color-bg-cream)",
-        "border": "1px solid var(--color-border)",
-        "borderRadius": "var(--radius)"
+        "backgroundColor": "var(--color-primary-deep)",
+        "color": "var(--color-text-white)",
+        "borderRadius": "var(--radius-lg)"
       },
       "children": [
         {
           "tagName": "h3",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.4rem",
+            "fontFamily": "var(--font-display)",
+            "fontSize": "1.5rem",
+            "fontWeight": "600",
             "margin": "0 0 1rem"
           },
           "textContent": "Visit us"
         },
         {
           "tagName": "p",
-          "style": { "margin": "0 0 0.35rem" },
+          "style": { "margin": "0 0 0.35rem", "opacity": "0.85", "fontWeight": "600" },
           "textContent": "${state.line1}"
         },
         {
           "tagName": "p",
-          "style": { "margin": "0 0 0.35rem" },
+          "style": { "margin": "0 0 0.35rem", "opacity": "0.85", "fontWeight": "600" },
           "textContent": "${state.line2}"
         },
         {
           "tagName": "p",
-          "style": { "margin": "0.75rem 0 0.35rem" },
+          "style": { "margin": "0.85rem 0 0.35rem" },
           "children": [
             {
               "tagName": "a",
               "attributes": { "href": "${state.phoneHref}" },
               "style": {
-                "color": "var(--color-primary)",
+                "color": "var(--color-gold)",
                 "textDecoration": "none",
-                "fontWeight": "600"
+                "fontWeight": "800"
               },
               "textContent": "${state.phone}"
             }
@@ -64,9 +65,9 @@
               "tagName": "a",
               "attributes": { "href": "${state.emailHref}" },
               "style": {
-                "color": "var(--color-primary)",
+                "color": "var(--color-gold)",
                 "textDecoration": "none",
-                "fontWeight": "600"
+                "fontWeight": "800"
               },
               "textContent": "${state.email}"
             }
@@ -81,14 +82,16 @@
         "padding": "2rem",
         "backgroundColor": "var(--color-bg-cream)",
         "border": "1px solid var(--color-border)",
-        "borderRadius": "var(--radius)"
+        "borderRadius": "var(--radius-lg)"
       },
       "children": [
         {
           "tagName": "h3",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.4rem",
+            "fontFamily": "var(--font-display)",
+            "fontSize": "1.5rem",
+            "fontWeight": "600",
+            "color": "var(--color-primary-deep)",
             "margin": "0 0 1.25rem"
           },
           "textContent": "Office hours"
@@ -99,12 +102,13 @@
             "display": "flex",
             "justifyContent": "space-between",
             "padding": "0.6rem 0",
-            "borderBottom": "1px solid var(--color-border)"
+            "borderBottom": "1px solid var(--color-border)",
+            "fontWeight": "600"
           },
           "children": [
             {
               "tagName": "span",
-              "style": { "fontWeight": "500" },
+              "style": { "fontWeight": "700" },
               "textContent": "Monday – Friday"
             },
             {
@@ -120,10 +124,11 @@
             "display": "flex",
             "justifyContent": "space-between",
             "padding": "0.6rem 0",
-            "borderBottom": "1px solid var(--color-border)"
+            "borderBottom": "1px solid var(--color-border)",
+            "fontWeight": "600"
           },
           "children": [
-            { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Saturday" },
+            { "tagName": "span", "style": { "fontWeight": "700" }, "textContent": "Saturday" },
             {
               "tagName": "span",
               "style": { "color": "var(--color-text-muted)" },
@@ -136,10 +141,11 @@
           "style": {
             "display": "flex",
             "justifyContent": "space-between",
-            "padding": "0.6rem 0"
+            "padding": "0.6rem 0",
+            "fontWeight": "600"
           },
           "children": [
-            { "tagName": "span", "style": { "fontWeight": "500" }, "textContent": "Sunday" },
+            { "tagName": "span", "style": { "fontWeight": "700" }, "textContent": "Sunday" },
             {
               "tagName": "span",
               "style": { "color": "var(--color-text-muted)" },