@jxsuite/starters 0.34.0 → 0.35.0

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

@@ -2,15 +2,15 @@
   "tagName": "pv-footer",
   "state": {
     "brand": "Aperture Studio",
-    "tagline": "An image-forward photography studio telling honest, timeless stories.",
+    "tagline": "Available light, unhurried days, prints worth keeping.",
     "email": "hello@aperturestudio.example",
     "phone": "(555) 204-7788"
   },
   "style": {
     "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
-    "color": "var(--color-text-white)",
-    "padding": "4rem 1.5rem 2rem"
+    "backgroundColor": "var(--color-bg)",
+    "borderTop": "1px solid var(--color-line)",
+    "padding": "clamp(3.5rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) 2.5rem"
   },
   "children": [
     {
@@ -18,10 +18,11 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "display": "grid",
-        "gridTemplateColumns": "2fr 1fr 1fr",
+        "display": "flex",
+        "alignItems": "flex-end",
+        "justifyContent": "space-between",
         "gap": "2.5rem",
-        "@--md": { "gridTemplateColumns": "1fr" }
+        "flexWrap": "wrap"
       },
       "children": [
         {
@@ -31,93 +32,105 @@
               "tagName": "div",
               "style": {
                 "fontFamily": "var(--font-heading)",
-                "fontSize": "1.6rem",
-                "fontWeight": "600",
-                "marginBottom": "0.75rem"
+                "fontWeight": "400",
+                "fontSize": "clamp(2.4rem, 6vw, 4rem)",
+                "lineHeight": "1",
+                "letterSpacing": "-0.01em",
+                "margin": "0 0 0.75rem",
+                "color": "var(--color-text-primary)"
               },
               "textContent": "${state.brand}"
             },
             {
               "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.7", "maxWidth": "34ch", "lineHeight": "1.7" },
-              "textContent": "${state.tagline}"
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "children": [
-            {
-              "tagName": "div",
               "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.12em",
-                "fontSize": "0.72rem",
-                "opacity": "0.55",
-                "marginBottom": "0.85rem"
+                "margin": "0",
+                "fontFamily": "var(--font-heading)",
+                "fontStyle": "italic",
+                "fontSize": "1.15rem",
+                "color": "var(--color-text-muted)"
               },
-              "textContent": "Studio"
-            },
-            {
-              "tagName": "p",
-              "style": { "margin": "0 0 0.4rem", "opacity": "0.8" },
-              "textContent": "${state.email}"
-            },
-            {
-              "tagName": "p",
-              "style": { "margin": "0", "opacity": "0.8" },
-              "textContent": "${state.phone}"
+              "textContent": "${state.tagline}"
             }
           ]
         },
         {
           "tagName": "div",
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "0.6rem",
+            "textAlign": "right",
+            "@--sm": { "textAlign": "left" }
+          },
           "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "textTransform": "uppercase",
-                "letterSpacing": "0.12em",
-                "fontSize": "0.72rem",
-                "opacity": "0.55",
-                "marginBottom": "0.85rem"
-              },
-              "textContent": "Explore"
-            },
             {
               "tagName": "a",
-              "attributes": { "href": "/work/" },
+              "attributes": { "href": "mailto:${state.email}" },
               "style": {
-                "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.8",
+                "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "marginBottom": "0.4rem"
+                "fontSize": "0.82rem",
+                "letterSpacing": "0.04em",
+                "transition": "color 0.15s",
+                ":hover": { "color": "var(--color-primary)" }
               },
-              "textContent": "Work"
+              "textContent": "${state.email}"
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "/about/" },
+              "tagName": "span",
               "style": {
-                "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.8",
-                "textDecoration": "none",
-                "marginBottom": "0.4rem"
+                "color": "var(--color-text-muted)",
+                "fontSize": "0.82rem",
+                "letterSpacing": "0.04em"
               },
-              "textContent": "About"
+              "textContent": "${state.phone}"
             },
             {
-              "tagName": "a",
-              "attributes": { "href": "/contact/" },
+              "tagName": "nav",
               "style": {
-                "display": "block",
-                "color": "var(--color-text-white)",
-                "opacity": "0.8",
-                "textDecoration": "none"
+                "display": "flex",
+                "gap": "1.5rem",
+                "justifyContent": "flex-end",
+                "marginTop": "0.5rem",
+                "fontSize": "0.68rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.18em",
+                "@--sm": { "justifyContent": "flex-start" }
               },
-              "textContent": "Contact"
+              "children": [
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/work/" },
+                  "style": {
+                    "color": "var(--color-text-muted)",
+                    "textDecoration": "none",
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Work"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/about/" },
+                  "style": {
+                    "color": "var(--color-text-muted)",
+                    "textDecoration": "none",
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "About"
+                },
+                {
+                  "tagName": "a",
+                  "attributes": { "href": "/contact/" },
+                  "style": {
+                    "color": "var(--color-text-muted)",
+                    "textDecoration": "none",
+                    ":hover": { "color": "var(--color-primary)" }
+                  },
+                  "textContent": "Contact"
+                }
+              ]
             }
           ]
         }
@@ -127,17 +140,26 @@
       "tagName": "div",
       "style": {
         "maxWidth": "var(--max-width)",
-        "margin": "2.5rem auto 0",
+        "margin": "clamp(3rem, 6vw, 4.5rem) auto 0",
         "paddingTop": "1.5rem",
-        "borderTop": "1px solid rgba(255, 255, 255, 0.14)",
-        "fontSize": "0.82rem",
-        "opacity": "0.55"
+        "borderTop": "1px solid var(--color-line)",
+        "display": "flex",
+        "justifyContent": "space-between",
+        "gap": "1rem",
+        "flexWrap": "wrap",
+        "fontSize": "0.72rem",
+        "letterSpacing": "0.1em",
+        "textTransform": "uppercase",
+        "color": "var(--color-text-muted)"
       },
       "children": [
         {
-          "tagName": "p",
-          "style": { "margin": "0" },
-          "textContent": "© Aperture Studio. Built with Jx."
+          "tagName": "span",
+          "textContent": "© Aperture Studio"
+        },
+        {
+          "tagName": "span",
+          "textContent": "Built with Jx"
         }
       ]
     }

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

@@ -13,8 +13,10 @@
   "style": {
     "display": "block",
     "position": "relative",
-    "minHeight": "88vh",
+    "height": "100vh",
+    "minHeight": "620px",
     "color": "var(--color-text-white)",
+    "backgroundColor": "var(--color-bg)",
     "backgroundImage": "url('${state.bg}')",
     "backgroundSize": "cover",
     "backgroundPosition": "center"
@@ -25,7 +27,7 @@
       "style": {
         "position": "absolute",
         "inset": "0",
-        "background": "linear-gradient(180deg, rgba(17,24,39,0.30) 0%, rgba(17,24,39,0.78) 100%)"
+        "background": "linear-gradient(180deg, rgba(12,12,13,0.6) 0%, rgba(12,12,13,0.1) 26%, rgba(12,12,13,0.3) 62%, rgba(12,12,13,0.92) 100%)"
       }
     },
     {
@@ -34,95 +36,100 @@
         "position": "relative",
         "zIndex": "10",
         "display": "flex",
-        "alignItems": "flex-end",
-        "minHeight": "88vh",
+        "flexDirection": "column",
+        "justifyContent": "flex-end",
+        "height": "100%",
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "4rem 1.5rem 5rem"
+        "padding": "0 clamp(1.5rem, 4vw, 4rem) clamp(3rem, 7vw, 5.5rem)"
       },
       "children": [
         {
           "tagName": "div",
-          "style": { "maxWidth": "720px" },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "1rem",
+            "marginBottom": "1.5rem"
+          },
           "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "width": "3rem",
+                "height": "1px",
+                "backgroundColor": "var(--color-primary)"
+              }
+            },
             {
               "tagName": "p",
               "style": {
+                "margin": "0",
                 "textTransform": "uppercase",
-                "letterSpacing": "0.24em",
-                "fontSize": "0.78rem",
-                "fontWeight": "600",
-                "marginBottom": "1.25rem",
+                "letterSpacing": "0.28em",
+                "fontSize": "0.72rem",
+                "fontWeight": "500",
                 "color": "var(--color-primary)"
               },
               "textContent": "${state.eyebrow}"
-            },
-            {
-              "tagName": "h1",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "clamp(2.75rem, 7vw, 5rem)",
-                "fontWeight": "600",
-                "lineHeight": "1.04",
-                "margin": "0 0 1.5rem",
-                "letterSpacing": "-0.01em"
-              },
-              "textContent": "${state.heading}"
-            },
+            }
+          ]
+        },
+        {
+          "tagName": "h1",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontWeight": "400",
+            "fontSize": "clamp(3rem, 8.5vw, 7rem)",
+            "lineHeight": "0.98",
+            "letterSpacing": "-0.01em",
+            "margin": "0 0 1.5rem",
+            "maxWidth": "16ch"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "alignItems": "flex-end",
+            "justifyContent": "space-between",
+            "gap": "2rem",
+            "flexWrap": "wrap"
+          },
+          "children": [
             {
               "tagName": "p",
               "style": {
-                "fontSize": "clamp(1.1rem, 2vw, 1.35rem)",
-                "lineHeight": "1.65",
-                "margin": "0 0 2.25rem",
-                "opacity": "0.92",
-                "maxWidth": "50ch"
+                "margin": "0",
+                "fontSize": "clamp(1rem, 1.6vw, 1.2rem)",
+                "lineHeight": "1.6",
+                "color": "var(--color-text-white)",
+                "opacity": "0.82",
+                "maxWidth": "44ch"
               },
               "textContent": "${state.subheading}"
             },
             {
-              "tagName": "div",
-              "style": { "display": "flex", "gap": "0.85rem", "flexWrap": "wrap" },
-              "children": [
-                {
-                  "tagName": "a",
-                  "attributes": { "href": "${state.ctaHref}" },
-                  "style": {
-                    "display": "inline-block",
-                    "backgroundColor": "var(--color-primary)",
-                    "color": "var(--color-text-white)",
-                    "padding": "0.9rem 2.1rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "0.95rem",
-                    "fontWeight": "600",
-                    "letterSpacing": "0.04em",
-                    "textTransform": "uppercase",
-                    "textDecoration": "none",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "var(--color-primary-hover)" }
-                  },
-                  "textContent": "${state.cta}"
-                },
-                {
-                  "tagName": "a",
-                  "attributes": { "href": "${state.cta2Href}" },
-                  "style": {
-                    "display": "${state.cta2 ? 'inline-block' : 'none'}",
-                    "border": "1px solid rgba(255,255,255,0.6)",
-                    "color": "var(--color-text-white)",
-                    "padding": "0.9rem 2.1rem",
-                    "borderRadius": "var(--radius)",
-                    "fontSize": "0.95rem",
-                    "fontWeight": "600",
-                    "letterSpacing": "0.04em",
-                    "textTransform": "uppercase",
-                    "textDecoration": "none",
-                    "transition": "background-color 0.15s",
-                    ":hover": { "backgroundColor": "rgba(255,255,255,0.14)" }
-                  },
-                  "textContent": "${state.cta2}"
-                }
-              ]
+              "tagName": "a",
+              "attributes": { "href": "${state.ctaHref}" },
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "gap": "0.6rem",
+                "whiteSpace": "nowrap",
+                "fontSize": "0.78rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.18em",
+                "color": "var(--color-text-white)",
+                "textDecoration": "none",
+                "borderBottom": "1px solid var(--color-primary)",
+                "paddingBottom": "0.5rem",
+                "transition": "gap 0.2s, color 0.15s",
+                ":hover": { "gap": "1.1rem", "color": "var(--color-primary)" }
+              },
+              "textContent": "${state.cta} →"
             }
           ]
         }

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

@@ -1,16 +1,18 @@
 {
   "tagName": "pv-nav",
   "state": {
-    "brand": "Aperture Studio"
+    "brand": "Aperture"
   },
   "style": {
-    "display": "block",
-    "position": "sticky",
+    "position": "fixed",
     "top": "0",
+    "left": "0",
+    "right": "0",
     "zIndex": "50",
-    "backgroundColor": "rgba(255, 255, 255, 0.85)",
-    "backdropFilter": "blur(10px)",
-    "borderBottom": "1px solid var(--color-border)"
+    "display": "block",
+    "backgroundColor": "rgba(12, 12, 13, 0.55)",
+    "backdropFilter": "blur(14px)",
+    "borderBottom": "1px solid rgba(255, 255, 255, 0.08)"
   },
   "children": [
     {
@@ -18,23 +20,26 @@
       "style": {
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
-        "padding": "1.1rem 1.5rem",
+        "padding": "1.1rem 2rem",
         "display": "flex",
         "alignItems": "center",
         "justifyContent": "space-between",
-        "gap": "1.5rem"
+        "gap": "1.5rem",
+        "@--sm": { "padding": "0.9rem 1.25rem" }
       },
       "children": [
         {
           "tagName": "a",
           "attributes": { "href": "/" },
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.5rem",
-            "fontWeight": "600",
+            "fontFamily": "var(--font-label)",
+            "fontWeight": "400",
+            "fontSize": "0.95rem",
+            "letterSpacing": "0.42em",
+            "textTransform": "uppercase",
             "color": "var(--color-text-primary)",
             "textDecoration": "none",
-            "letterSpacing": "0.01em"
+            "paddingLeft": "0.42em"
           },
           "textContent": "${state.brand}"
         },
@@ -43,8 +48,12 @@
           "style": {
             "display": "flex",
             "alignItems": "center",
-            "gap": "1.75rem",
-            "@--sm": { "gap": "1.1rem" }
+            "gap": "2.25rem",
+            "fontSize": "0.7rem",
+            "fontWeight": "500",
+            "letterSpacing": "0.2em",
+            "textTransform": "uppercase",
+            "@--sm": { "gap": "1.25rem" }
           },
           "children": [
             {
@@ -53,11 +62,9 @@
               "style": {
                 "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.9rem",
-                "letterSpacing": "0.04em",
-                "textTransform": "uppercase",
-                ":hover": { "color": "var(--color-primary)" }
+                "opacity": "0.85",
+                "transition": "opacity 0.15s, color 0.15s",
+                ":hover": { "color": "var(--color-primary)", "opacity": "1" }
               },
               "textContent": "Work"
             },
@@ -67,12 +74,10 @@
               "style": {
                 "color": "var(--color-text-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.9rem",
-                "letterSpacing": "0.04em",
-                "textTransform": "uppercase",
+                "opacity": "0.85",
+                "transition": "opacity 0.15s, color 0.15s",
                 "@--sm": { "display": "none" },
-                ":hover": { "color": "var(--color-primary)" }
+                ":hover": { "color": "var(--color-primary)", "opacity": "1" }
               },
               "textContent": "About"
             },
@@ -80,21 +85,10 @@
               "tagName": "a",
               "attributes": { "href": "/contact/" },
               "style": {
-                "display": "inline-block",
-                "border": "1px solid var(--color-ink)",
-                "color": "var(--color-text-primary)",
-                "padding": "0.5rem 1.15rem",
-                "borderRadius": "var(--radius)",
+                "color": "var(--color-primary)",
                 "textDecoration": "none",
-                "fontWeight": "500",
-                "fontSize": "0.9rem",
-                "letterSpacing": "0.04em",
-                "textTransform": "uppercase",
-                "transition": "background-color 0.15s, color 0.15s",
-                ":hover": {
-                  "backgroundColor": "var(--color-ink)",
-                  "color": "var(--color-text-white)"
-                }
+                "transition": "opacity 0.15s",
+                ":hover": { "opacity": "0.7" }
               },
               "textContent": "Inquire"
             }