@jxsuite/starters 0.34.0 → 0.35.0

package/sites/event/components/ev-savedate.json

@@ -8,14 +8,18 @@
     "hours": "18",
     "minutes": "05",
     "seconds": "30",
-    "cta": "Get Tickets",
+    "cta": "Get tickets",
     "ctaHref": "/tickets/"
   },
   "style": {
     "display": "block",
-    "background": "linear-gradient(120deg, var(--color-bg-dark) 0%, #3b1e6e 55%, #7c3aed 100%)",
+    "position": "relative",
+    "overflow": "hidden",
     "color": "var(--color-text-white)",
-    "padding": "clamp(2.5rem, 6vw, 4rem) 1.5rem"
+    "borderTop": "1px solid var(--color-border)",
+    "borderBottom": "1px solid var(--color-border)",
+    "background": "radial-gradient(ellipse 60% 120% at 15% 50%, rgba(34,224,255,0.16), transparent 60%), radial-gradient(ellipse 60% 120% at 85% 50%, rgba(255,61,154,0.18), transparent 60%), var(--color-bg-cream)",
+    "padding": "clamp(2.75rem, 6vw, 4rem) 1.5rem"
   },
   "children": [
     {
@@ -24,10 +28,15 @@
         "maxWidth": "var(--max-width)",
         "margin": "0 auto",
         "display": "grid",
-        "gridTemplateColumns": "1.1fr 1fr",
+        "gridTemplateColumns": "1fr auto",
         "gap": "clamp(2rem, 5vw, 3.5rem)",
         "alignItems": "center",
-        "@--md": { "gridTemplateColumns": "1fr", "textAlign": "center" }
+        "@--lg": {
+          "gridTemplateColumns": "1fr",
+          "gap": "2.25rem",
+          "textAlign": "center",
+          "justifyItems": "center"
+        }
       },
       "children": [
         {
@@ -36,24 +45,40 @@
             {
               "tagName": "p",
               "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "gap": "0.55rem",
                 "textTransform": "uppercase",
                 "letterSpacing": "0.18em",
-                "fontSize": "0.8rem",
-                "fontWeight": "600",
-                "color": "var(--color-accent)",
-                "margin": "0 0 0.75rem"
+                "fontSize": "0.78rem",
+                "fontWeight": "700",
+                "margin": "0 0 0.9rem",
+                "color": "var(--color-accent)"
               },
-              "textContent": "${state.eyebrow}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "0.5rem",
+                    "height": "0.5rem",
+                    "borderRadius": "999px",
+                    "background": "var(--color-lime)",
+                    "boxShadow": "0 0 10px var(--color-lime)"
+                  }
+                },
+                { "tagName": "span", "textContent": "${state.eyebrow}" }
+              ]
             },
             {
               "tagName": "h2",
               "style": {
                 "fontFamily": "var(--font-heading)",
-                "fontSize": "clamp(1.8rem, 4vw, 2.6rem)",
-                "fontWeight": "700",
-                "letterSpacing": "-0.02em",
-                "lineHeight": "1.12",
-                "margin": "0 0 0.9rem"
+                "fontSize": "clamp(1.9rem, 4.2vw, 2.9rem)",
+                "fontWeight": "800",
+                "letterSpacing": "-0.03em",
+                "lineHeight": "1.08",
+                "margin": "0 0 0.9rem",
+                "color": "var(--color-text-primary)"
               },
               "textContent": "${state.heading}"
             },
@@ -61,10 +86,10 @@
               "tagName": "p",
               "style": {
                 "fontSize": "1.05rem",
-                "lineHeight": "1.7",
-                "opacity": "0.88",
+                "lineHeight": "1.65",
+                "color": "var(--color-text-muted)",
                 "margin": "0 0 1.75rem",
-                "maxWidth": "46ch"
+                "maxWidth": "44ch"
               },
               "textContent": "${state.text}"
             },
@@ -73,13 +98,14 @@
               "attributes": { "href": "${state.ctaHref}" },
               "style": {
                 "display": "inline-block",
-                "backgroundColor": "var(--color-text-white)",
-                "color": "var(--color-primary)",
-                "padding": "0.85rem 2.25rem",
+                "background": "var(--grad-btn)",
+                "color": "#ffffff",
+                "padding": "0.9rem 2.25rem",
                 "borderRadius": "999px",
                 "fontSize": "1.02rem",
                 "fontWeight": "700",
                 "textDecoration": "none",
+                "boxShadow": "0 12px 34px -8px var(--glow)",
                 "transition": "transform 0.15s",
                 ":hover": { "transform": "translateY(-2px)" }
               },
@@ -90,147 +116,208 @@
         {
           "tagName": "div",
           "style": {
-            "display": "grid",
-            "gridTemplateColumns": "repeat(4, 1fr)",
-            "gap": "0.75rem",
-            "@--sm": { "gap": "0.5rem" }
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "0.5rem",
+            "@--sm": { "gap": "0.3rem" }
           },
           "children": [
             {
               "tagName": "div",
               "style": {
                 "textAlign": "center",
-                "padding": "1.25rem 0.5rem",
-                "borderRadius": "var(--radius)",
-                "background": "rgba(255, 255, 255, 0.1)",
-                "border": "1px solid rgba(255, 255, 255, 0.18)",
-                "backdropFilter": "blur(4px)"
+                "minWidth": "4.6rem",
+                "padding": "1.1rem 0.6rem",
+                "borderRadius": "0.9rem",
+                "background": "rgba(255,255,255,0.03)",
+                "border": "1px solid var(--color-border)",
+                "boxShadow": "0 0 40px -18px var(--glow-cyan)",
+                "@--sm": { "minWidth": "3.7rem", "padding": "0.85rem 0.35rem" }
               },
               "children": [
                 {
                   "tagName": "div",
                   "style": {
                     "fontFamily": "var(--font-heading)",
-                    "fontSize": "clamp(1.75rem, 4vw, 2.5rem)",
-                    "fontWeight": "700",
+                    "fontSize": "clamp(1.9rem, 4.5vw, 2.9rem)",
+                    "fontWeight": "800",
                     "lineHeight": "1",
-                    "fontVariantNumeric": "tabular-nums"
+                    "fontVariantNumeric": "tabular-nums",
+                    "background": "var(--grad)",
+                    "backgroundClip": "text",
+                    "webkitBackgroundClip": "text",
+                    "webkitTextFillColor": "transparent",
+                    "color": "var(--color-accent)"
                   },
                   "textContent": "${state.days}"
                 },
                 {
                   "tagName": "div",
                   "style": {
-                    "marginTop": "0.4rem",
-                    "fontSize": "0.7rem",
+                    "marginTop": "0.45rem",
+                    "fontSize": "0.66rem",
                     "textTransform": "uppercase",
-                    "letterSpacing": "0.1em",
-                    "opacity": "0.75"
+                    "letterSpacing": "0.14em",
+                    "color": "var(--color-text-muted)"
                   },
                   "textContent": "Days"
                 }
               ]
             },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.8rem",
+                "fontWeight": "800",
+                "color": "var(--color-border)",
+                "@--sm": { "display": "none" }
+              },
+              "textContent": ":"
+            },
             {
               "tagName": "div",
               "style": {
                 "textAlign": "center",
-                "padding": "1.25rem 0.5rem",
-                "borderRadius": "var(--radius)",
-                "background": "rgba(255, 255, 255, 0.1)",
-                "border": "1px solid rgba(255, 255, 255, 0.18)",
-                "backdropFilter": "blur(4px)"
+                "minWidth": "4.6rem",
+                "padding": "1.1rem 0.6rem",
+                "borderRadius": "0.9rem",
+                "background": "rgba(255,255,255,0.03)",
+                "border": "1px solid var(--color-border)",
+                "boxShadow": "0 0 40px -18px var(--glow-cyan)",
+                "@--sm": { "minWidth": "3.7rem", "padding": "0.85rem 0.35rem" }
               },
               "children": [
                 {
                   "tagName": "div",
                   "style": {
                     "fontFamily": "var(--font-heading)",
-                    "fontSize": "clamp(1.75rem, 4vw, 2.5rem)",
-                    "fontWeight": "700",
+                    "fontSize": "clamp(1.9rem, 4.5vw, 2.9rem)",
+                    "fontWeight": "800",
                     "lineHeight": "1",
-                    "fontVariantNumeric": "tabular-nums"
+                    "fontVariantNumeric": "tabular-nums",
+                    "background": "var(--grad)",
+                    "backgroundClip": "text",
+                    "webkitBackgroundClip": "text",
+                    "webkitTextFillColor": "transparent",
+                    "color": "var(--color-accent)"
                   },
                   "textContent": "${state.hours}"
                 },
                 {
                   "tagName": "div",
                   "style": {
-                    "marginTop": "0.4rem",
-                    "fontSize": "0.7rem",
+                    "marginTop": "0.45rem",
+                    "fontSize": "0.66rem",
                     "textTransform": "uppercase",
-                    "letterSpacing": "0.1em",
-                    "opacity": "0.75"
+                    "letterSpacing": "0.14em",
+                    "color": "var(--color-text-muted)"
                   },
                   "textContent": "Hours"
                 }
               ]
             },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.8rem",
+                "fontWeight": "800",
+                "color": "var(--color-border)",
+                "@--sm": { "display": "none" }
+              },
+              "textContent": ":"
+            },
             {
               "tagName": "div",
               "style": {
                 "textAlign": "center",
-                "padding": "1.25rem 0.5rem",
-                "borderRadius": "var(--radius)",
-                "background": "rgba(255, 255, 255, 0.1)",
-                "border": "1px solid rgba(255, 255, 255, 0.18)",
-                "backdropFilter": "blur(4px)"
+                "minWidth": "4.6rem",
+                "padding": "1.1rem 0.6rem",
+                "borderRadius": "0.9rem",
+                "background": "rgba(255,255,255,0.03)",
+                "border": "1px solid var(--color-border)",
+                "boxShadow": "0 0 40px -18px var(--glow-cyan)",
+                "@--sm": { "minWidth": "3.7rem", "padding": "0.85rem 0.35rem" }
               },
               "children": [
                 {
                   "tagName": "div",
                   "style": {
                     "fontFamily": "var(--font-heading)",
-                    "fontSize": "clamp(1.75rem, 4vw, 2.5rem)",
-                    "fontWeight": "700",
+                    "fontSize": "clamp(1.9rem, 4.5vw, 2.9rem)",
+                    "fontWeight": "800",
                     "lineHeight": "1",
-                    "fontVariantNumeric": "tabular-nums"
+                    "fontVariantNumeric": "tabular-nums",
+                    "background": "var(--grad)",
+                    "backgroundClip": "text",
+                    "webkitBackgroundClip": "text",
+                    "webkitTextFillColor": "transparent",
+                    "color": "var(--color-accent)"
                   },
                   "textContent": "${state.minutes}"
                 },
                 {
                   "tagName": "div",
                   "style": {
-                    "marginTop": "0.4rem",
-                    "fontSize": "0.7rem",
+                    "marginTop": "0.45rem",
+                    "fontSize": "0.66rem",
                     "textTransform": "uppercase",
-                    "letterSpacing": "0.1em",
-                    "opacity": "0.75"
+                    "letterSpacing": "0.14em",
+                    "color": "var(--color-text-muted)"
                   },
                   "textContent": "Mins"
                 }
               ]
             },
+            {
+              "tagName": "span",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.8rem",
+                "fontWeight": "800",
+                "color": "var(--color-border)",
+                "@--sm": { "display": "none" }
+              },
+              "textContent": ":"
+            },
             {
               "tagName": "div",
               "style": {
                 "textAlign": "center",
-                "padding": "1.25rem 0.5rem",
-                "borderRadius": "var(--radius)",
-                "background": "rgba(255, 255, 255, 0.1)",
-                "border": "1px solid rgba(255, 255, 255, 0.18)",
-                "backdropFilter": "blur(4px)"
+                "minWidth": "4.6rem",
+                "padding": "1.1rem 0.6rem",
+                "borderRadius": "0.9rem",
+                "background": "rgba(255,255,255,0.03)",
+                "border": "1px solid var(--color-border)",
+                "boxShadow": "0 0 40px -18px var(--glow)",
+                "@--sm": { "minWidth": "3.7rem", "padding": "0.85rem 0.35rem" }
               },
               "children": [
                 {
                   "tagName": "div",
                   "style": {
                     "fontFamily": "var(--font-heading)",
-                    "fontSize": "clamp(1.75rem, 4vw, 2.5rem)",
-                    "fontWeight": "700",
+                    "fontSize": "clamp(1.9rem, 4.5vw, 2.9rem)",
+                    "fontWeight": "800",
                     "lineHeight": "1",
-                    "fontVariantNumeric": "tabular-nums"
+                    "fontVariantNumeric": "tabular-nums",
+                    "background": "var(--grad)",
+                    "backgroundClip": "text",
+                    "webkitBackgroundClip": "text",
+                    "webkitTextFillColor": "transparent",
+                    "color": "var(--color-primary)"
                   },
                   "textContent": "${state.seconds}"
                 },
                 {
                   "tagName": "div",
                   "style": {
-                    "marginTop": "0.4rem",
-                    "fontSize": "0.7rem",
+                    "marginTop": "0.45rem",
+                    "fontSize": "0.66rem",
                     "textTransform": "uppercase",
-                    "letterSpacing": "0.1em",
-                    "opacity": "0.75"
+                    "letterSpacing": "0.14em",
+                    "color": "var(--color-text-muted)"
                   },
                   "textContent": "Secs"
                 }

package/sites/event/components/ev-section-header.json

@@ -9,32 +9,46 @@
   "style": {
     "display": "block",
     "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 2.5rem",
+    "margin": "0 auto 2.75rem",
     "textAlign": "${state.align}"
   },
   "children": [
     {
       "tagName": "p",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
+        "display": "${state.eyebrow ? 'inline-flex' : 'none'}",
+        "alignItems": "center",
+        "gap": "0.55rem",
         "textTransform": "uppercase",
         "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
-        "fontWeight": "600",
-        "color": "var(--color-primary)",
-        "margin": "0 0 0.75rem"
+        "fontSize": "0.78rem",
+        "fontWeight": "700",
+        "color": "var(--color-accent)",
+        "margin": "0 0 0.85rem"
       },
-      "textContent": "${state.eyebrow}"
+      "children": [
+        {
+          "tagName": "span",
+          "style": {
+            "width": "1.6rem",
+            "height": "2px",
+            "borderRadius": "2px",
+            "background": "var(--grad)"
+          }
+        },
+        { "tagName": "span", "textContent": "${state.eyebrow}" }
+      ]
     },
     {
       "tagName": "h2",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(1.9rem, 4vw, 2.7rem)",
-        "fontWeight": "700",
-        "lineHeight": "1.12",
-        "letterSpacing": "-0.03em",
-        "margin": "0"
+        "fontSize": "clamp(2rem, 4.2vw, 2.9rem)",
+        "fontWeight": "800",
+        "lineHeight": "1.08",
+        "letterSpacing": "-0.035em",
+        "margin": "0",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.heading}"
     },
@@ -45,7 +59,10 @@
         "fontSize": "1.1rem",
         "lineHeight": "1.7",
         "color": "var(--color-text-muted)",
-        "margin": "1rem 0 0"
+        "margin": "1.05rem 0 0",
+        "maxWidth": "${state.align === 'center' ? '60ch' : 'none'}",
+        "marginLeft": "${state.align === 'center' ? 'auto' : '0'}",
+        "marginRight": "${state.align === 'center' ? 'auto' : '0'}"
       },
       "textContent": "${state.subheading}"
     }

package/sites/event/components/ev-session-row.json

@@ -8,65 +8,125 @@
   },
   "style": {
     "display": "grid",
-    "gridTemplateColumns": "7rem 1fr auto",
-    "gap": "1.25rem",
-    "alignItems": "center",
-    "padding": "1.15rem 0",
-    "borderBottom": "1px solid var(--color-border)",
-    "@--sm": { "gridTemplateColumns": "1fr", "gap": "0.4rem" }
+    "gridTemplateColumns": "4.2rem 1.6rem 1fr",
+    "gap": "0",
+    "marginBottom": "0.9rem",
+    "@--sm": { "gridTemplateColumns": "3.4rem 1.2rem 1fr" }
   },
   "children": [
     {
       "tagName": "div",
       "style": {
+        "paddingTop": "1.15rem",
+        "textAlign": "right",
+        "paddingRight": "0.15rem",
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.05rem",
-        "fontWeight": "600",
-        "color": "var(--color-primary)",
-        "fontVariantNumeric": "tabular-nums"
+        "fontSize": "0.98rem",
+        "fontWeight": "700",
+        "fontVariantNumeric": "tabular-nums",
+        "background": "var(--grad)",
+        "backgroundClip": "text",
+        "webkitBackgroundClip": "text",
+        "webkitTextFillColor": "transparent",
+        "color": "var(--color-accent)"
       },
       "textContent": "${state.time}"
     },
     {
       "tagName": "div",
+      "style": { "position": "relative" },
       "children": [
         {
-          "tagName": "h3",
+          "tagName": "div",
           "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.15rem",
-            "fontWeight": "600",
-            "margin": "0 0 0.2rem",
-            "lineHeight": "1.3"
-          },
-          "textContent": "${state.title}"
+            "position": "absolute",
+            "left": "50%",
+            "top": "0",
+            "bottom": "-0.9rem",
+            "width": "2px",
+            "transform": "translateX(-50%)",
+            "background": "var(--grad)",
+            "opacity": "0.4"
+          }
         },
         {
-          "tagName": "p",
+          "tagName": "div",
           "style": {
-            "display": "${state.speaker ? 'block' : 'none'}",
-            "margin": "0",
-            "fontSize": "0.92rem",
-            "color": "var(--color-text-muted)"
-          },
-          "textContent": "with ${state.speaker}"
+            "position": "absolute",
+            "left": "50%",
+            "top": "1.5rem",
+            "width": "0.85rem",
+            "height": "0.85rem",
+            "borderRadius": "50%",
+            "transform": "translate(-50%, -50%)",
+            "border": "3px solid var(--color-bg)",
+            "background": "${state.track === 'Design' ? '#ff6bb0' : state.track === 'Workshops' ? 'var(--color-lime)' : 'var(--color-accent)'}",
+            "boxShadow": "0 0 12px ${state.track === 'Design' ? 'rgba(255,61,154,0.7)' : state.track === 'Workshops' ? 'rgba(198,255,77,0.7)' : 'rgba(34,224,255,0.7)'}"
+          }
         }
       ]
     },
     {
-      "tagName": "span",
+      "tagName": "div",
       "style": {
-        "justifySelf": "start",
-        "whiteSpace": "nowrap",
-        "fontSize": "0.78rem",
-        "fontWeight": "600",
-        "letterSpacing": "0.02em",
-        "padding": "0.3rem 0.75rem",
-        "borderRadius": "999px",
-        "color": "${state.track === 'Design' ? '#be185d' : state.track === 'Workshops' ? '#0e7490' : '#6d28d9'}",
-        "backgroundColor": "${state.track === 'Design' ? 'rgba(236, 72, 153, 0.12)' : state.track === 'Workshops' ? 'rgba(6, 182, 212, 0.12)' : 'rgba(124, 58, 237, 0.12)'}"
+        "display": "flex",
+        "flexWrap": "wrap",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "0.75rem",
+        "padding": "1rem 1.25rem",
+        "borderRadius": "0.85rem",
+        "backgroundColor": "var(--color-bg-elev)",
+        "border": "1px solid var(--color-border)",
+        "transition": "border-color 0.18s, transform 0.18s",
+        ":hover": { "borderColor": "rgba(255,61,154,0.4)", "transform": "translateX(3px)" }
       },
-      "textContent": "${state.track}"
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "flex": "1", "minWidth": "14rem" },
+          "children": [
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.1rem",
+                "fontWeight": "700",
+                "margin": "0 0 0.2rem",
+                "lineHeight": "1.3",
+                "color": "var(--color-text-primary)"
+              },
+              "textContent": "${state.title}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "display": "${state.speaker ? 'block' : 'none'}",
+                "margin": "0",
+                "fontSize": "0.9rem",
+                "color": "var(--color-text-muted)"
+              },
+              "textContent": "with ${state.speaker}"
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "whiteSpace": "nowrap",
+            "fontSize": "0.74rem",
+            "fontWeight": "700",
+            "letterSpacing": "0.03em",
+            "textTransform": "uppercase",
+            "padding": "0.32rem 0.8rem",
+            "borderRadius": "999px",
+            "color": "${state.track === 'Design' ? '#ff6bb0' : state.track === 'Workshops' ? 'var(--color-lime)' : 'var(--color-accent)'}",
+            "backgroundColor": "${state.track === 'Design' ? 'rgba(255,61,154,0.14)' : state.track === 'Workshops' ? 'rgba(198,255,77,0.14)' : 'rgba(34,224,255,0.14)'}",
+            "border": "1px solid ${state.track === 'Design' ? 'rgba(255,61,154,0.35)' : state.track === 'Workshops' ? 'rgba(198,255,77,0.35)' : 'rgba(34,224,255,0.35)'}"
+          },
+          "textContent": "${state.track}"
+        }
+      ]
     }
   ]
 }