@jxsuite/starters 0.34.0 → 0.35.0

package/sites/restaurant/pages/about.md

@@ -2,29 +2,29 @@
 title: "About — Bistro & Café"
 ---
 
-:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::bit-section-header{props.eyebrow="Our story" props.heading="A neighborhood table since 2016" props.subheading="Good food, made by hand, for the people down the street."}
+:::::section{style.padding="clamp(3rem, 6vw, 4.75rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)" style.textAlign="center"}
+::bit-section-header{props.eyebrow="Our story" props.heading="A neighborhood table" props.headingAccent="since 2016" props.subheading="Good food, made by hand, for the people down the street."}
 :::::
 
 :::bit-intro{props.image="/images/about.jpg" props.imageAlt="The kitchen at Bistro & Café" props.reverse="true"}
 
-### From a small kitchen, with big intentions
+### From a small kitchen, with big intentions.
 
 Bistro & Café started with a simple idea: a room where the coffee is honest, the bread is warm, and nobody rushes you out the door. We took over an old storefront on Market Street, put in a wood counter and a proper oven, and started cooking what we'd want to eat.
 
 Nine years later, the regulars have become friends, the growers have become partners, and the menu still changes with whatever's best that week.
 :::
 
-:::::section{style.padding="clamp(3rem, 8vw, 5rem) 1.5rem"}
-::bit-section-header{props.eyebrow="What we care about" props.heading="Three things we won't compromise on"}
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::bit-section-header{props.eyebrow="What we care about" props.heading="Three things we" props.headingAccent="won't compromise on" props.align="left"}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
-::bit-feature{props.icon="🤝" props.title="People first" props.text="Fair wages, real hospitality, and a room that welcomes everyone."}
+::::div{style.maxWidth="var(--max-width)" style.margin="2.5rem auto 0" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="clamp(1.75rem, 4vw, 3rem)" style.--md.gridTemplateColumns="1fr"}
+::bit-feature{props.number="01" props.title="People first" props.text="Fair wages, real hospitality, and a room that welcomes everyone who walks in."}
 
-::bit-feature{props.icon="🌾" props.title="Honest sourcing" props.text="We name our farms because we're proud of them. Seasonal, always."}
+::bit-feature{props.number="02" props.title="Honest sourcing" props.text="We name our farms because we're proud of them. Seasonal, local, always."}
 
-::bit-feature{props.icon="🔥" props.title="Craft over speed" props.text="Slow stocks, long proofs, and dishes we'd happily serve our families."}
+::bit-feature{props.number="03" props.title="Craft over speed" props.text="Slow stocks, long proofs, and dishes we'd happily serve our own families."}
 ::::
 :::::
 
-::bit-cta{props.heading="Come say hello" props.text="We'd love to have you at the table. Reserve ahead, or just stop in." props.cta="Reserve a Table" props.ctaHref="/contact/"}
+::bit-cta{props.eyebrow="Reservations" props.heading="Come say" props.headingAccent="hello" props.text="We'd love to have you at the table. Reserve ahead, or just stop in." props.cta="Reserve a Table" props.ctaHref="/contact/"}

package/sites/restaurant/pages/contact.md

@@ -2,19 +2,19 @@
 title: "Contact & Reservations — Bistro & Café"
 ---
 
-:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::bit-section-header{props.eyebrow="Visit us" props.heading="Reservations & hours" props.subheading="Book a table below, or find us on the corner of Market & 3rd."}
+:::::section{style.padding="clamp(3rem, 6vw, 4.75rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)" style.textAlign="center"}
+::bit-section-header{props.eyebrow="Visit us" props.heading="Reservations &" props.headingAccent="hours" props.subheading="Book a table below, or find us on the corner of Market & 3rd."}
 :::::
 
-::::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
-:::::div{style.display="grid" style.gridTemplateColumns="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.--md.gridTemplateColumns="1fr"}
+::::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.75rem) 1.5rem"}
+:::::div{style.display="grid" style.gridTemplateColumns="1.15fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
 
 ::bit-reservation{props.heading="Request a table"}
 
-::::div
-::bit-hours{props.heading="Hours"}
+::::div{style.display="grid" style.gap="1.5rem"}
+::bit-hours{props.heading="Hours" props.status="Open today"}
 
-:::div{style.marginTop="1.5rem" style.padding="2rem" style.backgroundColor="var(--color-bg-cream)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)"}
+:::div{style.padding="clamp(1.75rem, 3.5vw, 2.5rem)" style.backgroundColor="var(--color-bg-white)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.fontFamily="var(--font-heading)" style.fontSize="1.2rem" style.lineHeight="1.6" style.color="var(--color-text-primary)"}
 
 ### Find us
 

package/sites/restaurant/pages/index.md

@@ -8,56 +8,66 @@ state:
     sort:
       field: order
       order: asc
-    limit: 4
+    limit: 5
 ---
 
-::bit-hero{props.eyebrow="Riverbend · Est. 2016" props.heading="A table worth lingering at." props.subheading="Seasonal plates, house-made pastries, and small-batch coffee — served in a warm room just off Market Street." props.cta="Reserve a Table" props.ctaHref="/contact/" props.cta2="View the Menu" props.cta2Href="/menu/" props.bg="/images/hero.jpg"}
+::bit-hero{props.eyebrow="Riverbend · Est. 2016" props.heading="A table worth" props.headingAccent="lingering" props.headingTail=" at." props.subheading="Seasonal plates, house-made pastries, and small-batch coffee — served in a warm room just off Market Street." props.hours="Open today · 8am – 3pm · Walk-ins welcome" props.caption="The dining room · Market & 3rd" props.cta="Reserve a Table" props.ctaHref="/contact/" props.cta2="View the Menu" props.cta2Href="/menu/" props.bg="/images/hero.jpg"}
 
-:::bit-intro{props.image="/images/intro.jpg" props.imageAlt="Chef plating a seasonal dish"}
+::::div{style.backgroundColor="var(--color-espresso)" style.color="var(--color-text-white)"}
+:::p{style.margin="0" style.maxWidth="var(--max-width-wide)" style.marginLeft="auto" style.marginRight="auto" style.padding="0.85rem 1.5rem" style.textAlign="center" style.fontFamily="var(--font-body)" style.fontSize="0.76rem" style.fontWeight="600" style.textTransform="uppercase" style.letterSpacing="0.2em" style.color="var(--color-text-white)"}
+Seasonal plates　·　House-baked pastry　·　Small-batch coffee　·　Open seven days　·　Est. 2016
+:::
+::::
 
-### More than a meal
+:::bit-intro{props.image="/images/intro.jpg" props.imageAlt="A chef plating a seasonal dish in the kitchen"}
 
-We opened Bistro & Café to build a room worth slowing down in. Everything on the menu starts with what's good this week — from the farm up the road, roasted, baked, and plated by hand.
+### More than a meal — a room worth slowing down in.
 
-Come for the coffee, stay for the roast chicken.
+We opened Bistro & Café to build a place worth staying in. Everything on the menu begins with what's good this week — from the farm up the road — then roasted, baked, and plated by hand.
+
+Come for the coffee at eight, stay for the roast chicken at eight. Nobody will rush you out the door.
 :::
 
 :::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::bit-section-header{props.eyebrow="Our kitchen" props.heading="Cooked with care, sourced with intention"}
+::bit-section-header{props.eyebrow="Our kitchen" props.heading="Cooked with care," props.headingAccent="sourced with intention" props.align="left"}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
-::bit-feature{props.icon="🌿" props.title="Seasonal & local" props.text="The menu changes with the harvest. We buy from growers we know by name."}
+::::div{style.maxWidth="var(--max-width)" style.margin="2.5rem auto 0" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="clamp(1.75rem, 4vw, 3rem)" style.--md.gridTemplateColumns="1fr"}
+::bit-feature{props.number="01" props.title="Seasonal & local" props.text="The menu changes with the harvest. We buy from growers we know by name and cook whatever's best that week."}
 
-::bit-feature{props.icon="🥖" props.title="Made in-house" props.text="Bread, pastry, stocks, and sauces — all made from scratch every morning."}
+::bit-feature{props.number="02" props.title="Made in-house" props.text="Bread, pastry, stocks, and sauces — all made from scratch every morning before the doors open."}
 
-::bit-feature{props.icon="☕" props.title="Small-batch coffee" props.text="A rotating single-origin, roasted locally and pulled to order."}
+::bit-feature{props.number="03" props.title="Small-batch coffee" props.text="A rotating single-origin, roasted just up the street and pulled to order behind the counter."}
 ::::
 :::::
 
 :::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
-::bit-section-header{props.eyebrow="From the menu" props.heading="A few favorites"}
+::bit-section-header{props.eyebrow="From the menu" props.heading="A few of our" props.headingAccent="favorites"}
 
-::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.padding="clamp(1.75rem, 4vw, 2.75rem)" style.backgroundColor="var(--color-bg-white)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.boxShadow="0 24px 60px -42px rgba(30,21,15,0.5)"}
 :::Array{items.ref="#/state/popular"}
 ::bit-menu-item{props.name="${item.data.name}" props.price="${item.data.price}" props.description="${item.data.description}"}
 :::
 ::::
 
-::::div{style.textAlign="center" style.marginTop="2rem"}
-:::a{href="/menu/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+::::div{style.textAlign="center" style.marginTop="2.25rem"}
+:::a{href="/menu/" style.display="inline-flex" style.alignItems="center" style.gap="0.5rem" style.color="var(--color-primary)" style.fontFamily="var(--font-body)" style.fontWeight="700" style.textTransform="uppercase" style.letterSpacing="0.14em" style.fontSize="0.82rem" style.textDecoration="none" style.borderBottom="1px solid var(--color-primary)" style.paddingBottom="0.4rem"}
 See the full menu →
 :::
 ::::
 :::::
 
-::bit-gallery{props.img1="/images/gallery-1.jpg" props.img2="/images/gallery-2.jpg" props.img3="/images/gallery-3.jpg" props.img4="/images/gallery-4.jpg" props.alt="Dishes and the dining room at Bistro & Café"}
+:::::section{style.padding="0 0 clamp(3.5rem, 8vw, 6rem)"}
+::bit-section-header{props.eyebrow="In the room" props.heading="A place to" props.headingAccent="slow down"}
 
-:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1fr 1fr" style.gap="2.5rem" style.alignItems="center" style.--md.gridTemplateColumns="1fr"}
-::bit-hours{props.heading="Hours"}
+::bit-gallery{props.img1="/images/gallery-1.jpg" props.img2="/images/gallery-2.jpg" props.img3="/images/gallery-3.jpg" props.img4="/images/gallery-4.jpg" props.alt="Dishes, coffee, and the dining room at Bistro & Café"}
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1fr 1.15fr" style.gap="clamp(2.5rem, 6vw, 4.5rem)" style.alignItems="center" style.--md.gridTemplateColumns="1fr"}
+::bit-hours{props.heading="Hours" props.status="Open today"}
 
 ::bit-review{props.quote="The kind of neighborhood spot you wish was on your corner. The roast chicken is worth the trip." props.author="Dana R." props.role="Regular since 2019"}
 ::::
 :::::
 
-::bit-cta{props.heading="Save your table" props.text="Weekends fill up fast. Reserve online, or just walk in and say hello." props.cta="Reserve a Table" props.ctaHref="/contact/"}
+::bit-cta{props.eyebrow="Reservations" props.heading="Save your" props.headingAccent="table" props.text="Weekends fill up fast. Reserve online in a minute, or just walk in and say hello." props.cta="Reserve a Table" props.ctaHref="/contact/"}

package/sites/restaurant/pages/menu.md

@@ -47,34 +47,34 @@ state:
       order: asc
 ---
 
-:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::bit-section-header{props.eyebrow="Breakfast · Lunch · Dinner" props.heading="The Menu" props.subheading="Our menu shifts with the seasons — here's what we're serving right now."}
+:::::section{style.padding="clamp(3rem, 6vw, 4.75rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem)" style.backgroundColor="var(--color-bg-cream)" style.textAlign="center"}
+::bit-section-header{props.eyebrow="Breakfast · Lunch · Dinner" props.heading="The" props.headingAccent="Menu" props.subheading="Our kitchen shifts with the seasons — here's what we're serving this week. Served daily; the kitchen closes half an hour before we do."}
 :::::
 
-:::::section{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
-::::bit-menu-group{props.heading="Starters"}
+:::::section{style.columnCount="2" style.columnGap="clamp(2.5rem, 5vw, 5rem)" style.maxWidth="1020px" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.75rem) 1.5rem" style.--md.columnCount="1" style.--md.maxWidth="var(--max-width-narrow)"}
+::::bit-menu-group{props.heading="Starters" props.note="To begin — small, bright plates."}
 :::Array{items.ref="#/state/starters"}
 ::bit-menu-item{props.name="${item.data.name}" props.price="${item.data.price}" props.description="${item.data.description}"}
 :::
 ::::
 
-::::bit-menu-group{props.heading="Mains"}
+::::bit-menu-group{props.heading="Mains" props.note="From the pass — hearty and seasonal."}
 :::Array{items.ref="#/state/mains"}
 ::bit-menu-item{props.name="${item.data.name}" props.price="${item.data.price}" props.description="${item.data.description}"}
 :::
 ::::
 
-::::bit-menu-group{props.heading="Desserts"}
+::::bit-menu-group{props.heading="Desserts" props.note="Something sweet to finish."}
 :::Array{items.ref="#/state/desserts"}
 ::bit-menu-item{props.name="${item.data.name}" props.price="${item.data.price}" props.description="${item.data.description}"}
 :::
 ::::
 
-::::bit-menu-group{props.heading="Drinks"}
+::::bit-menu-group{props.heading="Drinks" props.note="Coffee, and the good stuff."}
 :::Array{items.ref="#/state/drinks"}
 ::bit-menu-item{props.name="${item.data.name}" props.price="${item.data.price}" props.description="${item.data.description}"}
 :::
 ::::
 :::::
 
-::bit-cta{props.heading="Hungry yet?" props.text="Join us for breakfast, lunch, or dinner — or reserve a table for the weekend." props.cta="Reserve a Table" props.ctaHref="/contact/"}
+::bit-cta{props.eyebrow="Reservations" props.heading="Hungry" props.headingAccent="yet?" props.text="Join us for breakfast, lunch, or dinner — or reserve a table for the weekend." props.cta="Reserve a Table" props.ctaHref="/contact/"}

package/sites/restaurant/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=Playfair+Display:wght@500;600;700&display=swap"
+        "href": "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Mulish:wght@300;400;500;600;700;800&display=swap"
       }
     }
   ],
@@ -44,27 +57,39 @@
     "--sm": "(max-width: 640px)"
   },
   "style": {
-    "--color-primary": "#b45309",
-    "--color-primary-hover": "#92400e",
-    "--color-ink": "#1c1917",
-    "--color-bg-dark": "#1c1917",
-    "--color-bg-cream": "#faf6f0",
-    "--color-bg-white": "#ffffff",
-    "--color-text-primary": "#1c1917",
-    "--color-text-white": "#ffffff",
-    "--color-text-muted": "#78716c",
-    "--color-border": "#e7e5e4",
-    "--color-accent": "#b45309",
+    "--color-primary": "#bd5a34",
+    "--color-primary-hover": "#a44827",
+    "--color-amber": "#c98a3c",
+    "--color-ink": "#241b14",
+    "--color-espresso": "#1e150f",
+    "--color-bg-dark": "#1e150f",
+    "--color-bg-cream": "#efe3d1",
+    "--color-bg-paper": "#f6ecdb",
+    "--color-bg-white": "#fffaf2",
+    "--color-text-primary": "#2a1f17",
+    "--color-text-white": "#f6ecdb",
+    "--color-text-muted": "#7c6a58",
+    "--color-border": "#e2d5bf",
+    "--color-border-strong": "#cbb99d",
+    "--color-accent": "#bd5a34",
     "--font-heading": "'Playfair Display', Georgia, 'Times New Roman', serif",
+    "--font-body": "'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif",
     "--max-width": "1200px",
-    "--max-width-narrow": "820px",
-    "--radius": "0.5rem",
+    "--max-width-wide": "1320px",
+    "--max-width-narrow": "780px",
+    "--radius": "0.25rem",
     "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-paper)",
+    "& a": {
+      "color": "var(--color-primary)",
+      "textUnderlineOffset": "0.2em",
+      "textDecorationColor": "var(--color-border-strong)"
+    }
   },
   "imports": {
     "Markdown": "@jxsuite/parser/Markdown.class.json",
@@ -75,7 +100,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,12 +116,25 @@
       "schema": {
         "type": "object",
         "properties": {
-          "name": { "type": "string" },
-          "course": { "type": "string" },
-          "price": { "type": "string" },
-          "description": { "type": "string" },
-          "image": { "type": "string", "format": "image" },
-          "order": { "type": "number" }
+          "name": {
+            "type": "string"
+          },
+          "course": {
+            "type": "string"
+          },
+          "price": {
+            "type": "string"
+          },
+          "description": {
+            "type": "string"
+          },
+          "image": {
+            "type": "string",
+            "format": "image"
+          },
+          "order": {
+            "type": "number"
+          }
         },
         "required": ["name", "course"]
       }

package/sites/saas/components/sa-feature-card.json

@@ -3,18 +3,25 @@
   "state": {
     "icon": "",
     "title": "",
-    "text": ""
+    "text": "",
+    "col": "2"
   },
   "style": {
-    "display": "block",
-    "padding": "1.75rem",
-    "backgroundColor": "var(--color-bg-white)",
+    "display": "flex",
+    "flexDirection": "column",
+    "gridColumn": "span ${state.col}",
+    "padding": "1.9rem",
+    "backgroundColor": "var(--color-bg-elev)",
     "borderRadius": "var(--radius)",
     "border": "1px solid var(--color-border)",
-    "transition": "border-color 0.15s, box-shadow 0.15s",
+    "position": "relative",
+    "overflow": "hidden",
+    "transition": "border-color 0.18s, transform 0.18s, box-shadow 0.18s",
+    "@--md": { "gridColumn": "span 1" },
     ":hover": {
-      "borderColor": "var(--color-primary)",
-      "boxShadow": "0 12px 32px rgba(99, 102, 241, 0.12)"
+      "borderColor": "rgba(124, 116, 255, 0.5)",
+      "transform": "translateY(-3px)",
+      "boxShadow": "0 18px 44px -20px var(--glow)"
     }
   },
   "children": [
@@ -24,13 +31,14 @@
         "display": "inline-flex",
         "alignItems": "center",
         "justifyContent": "center",
-        "width": "2.75rem",
-        "height": "2.75rem",
-        "borderRadius": "0.6rem",
-        "backgroundColor": "var(--color-accent-soft)",
-        "fontSize": "1.4rem",
+        "width": "2.9rem",
+        "height": "2.9rem",
+        "borderRadius": "0.7rem",
+        "background": "linear-gradient(150deg, rgba(124,116,255,0.28), rgba(34,211,238,0.14))",
+        "border": "1px solid var(--color-border)",
+        "fontSize": "1.45rem",
         "lineHeight": "1",
-        "marginBottom": "1rem"
+        "marginBottom": "1.1rem"
       },
       "textContent": "${state.icon}"
     },
@@ -38,10 +46,11 @@
       "tagName": "h3",
       "style": {
         "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
+        "fontSize": "1.22rem",
         "fontWeight": "600",
         "letterSpacing": "-0.01em",
-        "margin": "0 0 0.5rem"
+        "margin": "0 0 0.5rem",
+        "color": "var(--color-text-primary)"
       },
       "textContent": "${state.title}"
     },
@@ -51,7 +60,8 @@
         "margin": "0",
         "color": "var(--color-text-muted)",
         "fontSize": "0.98rem",
-        "lineHeight": "1.65"
+        "lineHeight": "1.65",
+        "maxWidth": "46ch"
       },
       "textContent": "${state.text}"
     }