@invisibleloop/pulse 0.12.3 → 0.14.2

package/docs/public/retrowheels.css

@@ -0,0 +1,402 @@
+/*
+ * retrowheels.css — Retro Wheels Co. bicycle shop example
+ *
+ * 1970s enamel-sign aesthetic: cream paper, burnt orange, mustard yellow,
+ * forest green, oxidised navy. Rockwell slab serif + Courier New monospace.
+ * All system fonts — zero external HTTP requests.
+ *
+ * Split into two logical sections:
+ *   1. Token overrides — hex values, palette definitions
+ *   2. Component styles — layout, typography, custom elements (var() only)
+ */
+
+/* ==========================================================================
+   1. Token overrides (hex values live here)
+   ========================================================================== */
+
+/* Named palette — referenced throughout this file via var() */
+:root {
+  --rw-orange:        #c8431f;
+  --rw-orange-dark:   #a8351a;
+  --rw-cream:         #f4e9d3;
+  --rw-cream-deep:    #ead9b8;
+  --rw-navy:          #1f2a3a;
+  --rw-mustard:       #d9a441;
+  --rw-mustard-dark:  #8a6418;
+  --rw-green:         #2f5d3a;
+  --rw-green-dark:    #1f3f27;
+  --rw-ink:           #2b2018;
+}
+
+/* System slab-serif stack for headings — no Google Fonts needed */
+:root {
+  --font:         Georgia, 'Bookman Old Style', serif;
+  --font-display: 'Rockwell', 'Bookman Old Style', Georgia, serif;
+}
+
+[data-theme="light"] {
+  --ui-bg:           #f4e9d3;
+  --ui-surface:      #fbf3df;
+  --ui-surface-2:    #ead9b8;
+  --ui-border:       #c9b890;
+  --ui-text:         #2b2018;
+  --ui-muted:        #6b5d48;
+  --ui-accent:       #a8351a;
+  --ui-accent-hover: #8a2912;
+  --ui-accent-dim:   rgba(168, 53, 26, 0.12);
+  --ui-accent-text:  #fbf3df;
+}
+
+[data-theme="light"] .ui-btn--primary {
+  color: #fbf3df;
+}
+
+/* ==========================================================================
+   2. Component styles (var() only — no hex values below this line)
+   ========================================================================== */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font);
+  line-height: 1.6;
+  color: var(--ui-text);
+  background: var(--ui-bg);
+}
+
+/* Slab-serif for all headings and named component titles */
+h1, h2, h3, h4, h5, h6,
+.ui-hero-title, .ui-section-title, .ui-card-title,
+.ui-cta-title, .ui-feature-title, .ui-stat-value {
+  font-family: var(--ui-font-display);
+  letter-spacing: -0.01em;
+}
+
+/* --------------------------------------------------------------------------
+   Brand logo wordmark
+   -------------------------------------------------------------------------- */
+.rw-logo-text {
+  font-family: var(--ui-font-display);
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  font-size: 1.1rem;
+}
+
+/* --------------------------------------------------------------------------
+   Skip link
+   -------------------------------------------------------------------------- */
+.rw-skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+}
+
+.rw-skip-link:focus {
+  left: var(--ui-space-2);
+  top: var(--ui-space-2);
+  background: var(--rw-cream);
+  color: var(--rw-navy);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  z-index: 1000;
+}
+
+/* --------------------------------------------------------------------------
+   Eyebrow labels
+   -------------------------------------------------------------------------- */
+.rw-eyebrow {
+  font-family: 'Courier New', monospace;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  font-size: var(--ui-text-xs);
+  color: var(--rw-orange-dark);
+}
+
+.rw-eyebrow--on-orange {
+  color: var(--rw-cream);
+}
+
+/* --------------------------------------------------------------------------
+   Decorative rule
+   -------------------------------------------------------------------------- */
+.rw-rule {
+  border: 0;
+  border-top: 3px double var(--ui-border);
+  margin: var(--ui-space-8) 0;
+}
+
+/* --------------------------------------------------------------------------
+   Full-bleed hero
+   -------------------------------------------------------------------------- */
+.rw-hero {
+  position: relative;
+  min-height: 70vh;
+  background:
+    linear-gradient(180deg, rgba(31, 42, 58, 0.55) 0%, rgba(31, 42, 58, 0.85) 100%),
+    url('/images/retrowheels/hero.jpg') center / cover no-repeat;
+  color: var(--rw-cream);
+  padding: var(--ui-space-24) var(--ui-space-6);
+  display: flex;
+  align-items: flex-end;
+}
+
+.rw-hero-inner {
+  max-width: 64rem;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.rw-hero-eyebrow {
+  font-family: 'Courier New', monospace;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  font-size: var(--ui-text-sm);
+  color: var(--rw-mustard);
+  display: inline-block;
+  padding: var(--ui-space-1) var(--ui-space-3);
+  border: 2px solid var(--rw-mustard);
+  margin-bottom: var(--ui-space-6);
+}
+
+.rw-hero-title {
+  font-family: var(--ui-font-display);
+  font-weight: 900;
+  font-size: clamp(2.5rem, 7vw, 5.5rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  margin-bottom: var(--ui-space-5);
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+}
+
+.rw-hero-title em {
+  font-style: italic;
+  color: var(--rw-mustard);
+}
+
+.rw-hero-sub {
+  font-size: var(--ui-text-xl);
+  max-width: 38rem;
+  margin-bottom: var(--ui-space-6);
+  color: var(--rw-cream);
+  opacity: 0.95;
+}
+
+.rw-hero-actions {
+  display: flex;
+  gap: var(--ui-space-3);
+  flex-wrap: wrap;
+}
+
+.rw-hero-image-credit {
+  position: absolute;
+  bottom: var(--ui-space-2);
+  right: var(--ui-space-3);
+  font-size: var(--ui-text-xs);
+  opacity: 0.6;
+  font-family: 'Courier New', monospace;
+}
+
+/* --------------------------------------------------------------------------
+   Stat strip (inverted navy bar)
+   -------------------------------------------------------------------------- */
+.rw-stat-strip {
+  background: var(--rw-navy);
+  color: var(--rw-cream);
+  padding: var(--ui-space-8) var(--ui-space-6);
+}
+
+.rw-stat-strip .ui-stat-label {
+  color: var(--rw-mustard);
+  font-family: 'Courier New', monospace;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  font-size: var(--ui-text-xs);
+}
+
+.rw-stat-strip .ui-stat-value {
+  color: var(--rw-cream);
+  font-family: var(--ui-font-display);
+  font-size: var(--ui-text-4xl);
+}
+
+.rw-stat-strip-inner {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--ui-space-6);
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .rw-stat-strip-inner {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Editorial prose section (drop cap on first paragraph)
+   -------------------------------------------------------------------------- */
+.rw-editorial {
+  max-width: 42rem;
+  margin: 0 auto;
+  padding: var(--ui-space-16) var(--ui-space-6);
+}
+
+.rw-editorial p {
+  font-size: var(--ui-text-lg);
+  margin-bottom: var(--ui-space-5);
+}
+
+.rw-editorial hr + p::first-letter {
+  font-family: var(--ui-font-display);
+  font-size: 3.5rem;
+  font-weight: 900;
+  float: left;
+  line-height: 0.9;
+  padding: 0.25rem var(--ui-space-2) 0 0;
+  color: var(--rw-orange-dark);
+}
+
+/* --------------------------------------------------------------------------
+   Section template
+   -------------------------------------------------------------------------- */
+.rw-section {
+  padding: var(--ui-space-16) var(--ui-space-6);
+}
+
+.rw-section--alt {
+  background: var(--rw-cream-deep);
+}
+
+.rw-section-inner {
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.rw-section-title {
+  font-family: var(--ui-font-display);
+  font-size: var(--ui-text-4xl);
+  font-weight: 900;
+  margin-bottom: var(--ui-space-2);
+  letter-spacing: -0.01em;
+}
+
+.rw-section-deck {
+  color: var(--ui-muted);
+  font-size: var(--ui-text-lg);
+  margin-bottom: var(--ui-space-10);
+  max-width: 36rem;
+}
+
+/* --------------------------------------------------------------------------
+   Services grid
+   -------------------------------------------------------------------------- */
+.rw-service-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--ui-space-6);
+}
+
+@media (max-width: 900px) { .rw-service-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .rw-service-grid { grid-template-columns: 1fr; } }
+
+.rw-service {
+  background: var(--ui-surface);
+  border: 2px solid var(--ui-border);
+  padding: var(--ui-space-6);
+  position: relative;
+}
+
+.rw-service-num {
+  font-family: 'Courier New', monospace;
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.2em;
+  color: var(--rw-orange-dark);
+  margin-bottom: var(--ui-space-3);
+}
+
+.rw-service h3 {
+  font-family: var(--ui-font-display);
+  font-size: var(--ui-text-xl);
+  font-weight: 900;
+  margin-bottom: var(--ui-space-2);
+}
+
+.rw-service p {
+  color: var(--ui-muted);
+  margin-bottom: var(--ui-space-4);
+}
+
+.rw-service-price {
+  font-family: 'Courier New', monospace;
+  font-size: var(--ui-text-sm);
+  color: var(--rw-green-dark);
+  border-top: 1px dashed var(--ui-border);
+  padding-top: var(--ui-space-3);
+}
+
+/* --------------------------------------------------------------------------
+   Visit section — hours + booking card
+   -------------------------------------------------------------------------- */
+.rw-visit-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ui-space-12);
+  align-items: start;
+}
+
+@media (max-width: 720px) {
+  .rw-visit-grid { grid-template-columns: 1fr; }
+}
+
+.rw-hours-heading {
+  font-family: var(--ui-font-display);
+  font-size: var(--ui-text-xl);
+  font-weight: 900;
+  margin-bottom: var(--ui-space-3);
+}
+
+.rw-hours {
+  font-family: 'Courier New', monospace;
+  font-size: var(--ui-text-base);
+  list-style: none;
+}
+
+.rw-hours-row {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--ui-space-2) 0;
+  border-bottom: 1px dashed var(--ui-border);
+}
+
+.rw-hours li:last-child { border-bottom: 0; }
+
+.rw-closed { color: var(--rw-orange-dark); }
+
+.rw-address {
+  margin-top: var(--ui-space-6);
+  line-height: 1.7;
+}
+
+/* --------------------------------------------------------------------------
+   Saturday ride banner (full-bleed burnt orange)
+   -------------------------------------------------------------------------- */
+.rw-ride-banner {
+  background: var(--rw-orange-dark);
+  color: var(--rw-cream);
+  padding: var(--ui-space-16) var(--ui-space-6);
+  text-align: center;
+}
+
+.rw-ride-banner h2 {
+  color: var(--rw-cream);
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 900;
+  margin-bottom: var(--ui-space-3);
+}
+
+.rw-ride-banner p {
+  font-size: var(--ui-text-lg);
+  max-width: 40rem;
+  margin: 0 auto var(--ui-space-6);
+}

package/docs/public/shop.css

@@ -0,0 +1,235 @@
+/*
+ * shop.css — Template: Shop / Product Page
+ * Theme tokens + layout styles for the Tech Stuff Inc. product page template.
+ */
+
+/* ── Theme tokens ─────────────────────────────────────────────────────────── */
+
+[data-theme="light"] {
+  --accent: #1D4ED8;
+  --ui-color-muted: #374151;
+  --ui-surface: #F5F5F5;
+  --cart-bubble-text: #ffffff;
+}
+
+/* ── Base ─────────────────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  line-height: 1.6;
+  background: var(--ui-bg);
+}
+
+#pulse-root {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Constrain content to match nav width (1100px) */
+.page-body {
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+
+/* ── Product display ──────────────────────────────────────────────────────── */
+
+.product-display {
+  padding: var(--ui-space-16) var(--ui-space-6) var(--ui-space-8);
+}
+
+.product-display .ui-display-heading {
+  font-size: clamp(3rem, 10vw, 8rem);
+  line-height: 1;
+  letter-spacing: -0.04em;
+  font-weight: 700;
+  color: var(--ui-text);
+}
+
+.product-display .product-tagline {
+  margin-top: var(--ui-space-4);
+  font-size: var(--ui-text-xl);
+  color: var(--ui-color-muted);
+  max-width: 48ch;
+}
+
+.product-display .product-meta-row {
+  margin-top: var(--ui-space-6);
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-4);
+  flex-wrap: wrap;
+}
+
+/* ── Product photo ────────────────────────────────────────────────────────── */
+
+.product-photo {
+  width: 100%;
+  max-height: 70vh;
+  object-fit: cover;
+  display: block;
+}
+
+/* ── Purchase section ─────────────────────────────────────────────────────── */
+
+.product-purchase {
+  padding: var(--ui-space-10) var(--ui-space-6);
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.product-price {
+  font-size: var(--ui-text-4xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--ui-text);
+  line-height: 1;
+  margin-bottom: var(--ui-space-6);
+}
+
+.qty-control {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  margin-bottom: var(--ui-space-6);
+}
+
+.qty-value {
+  font-size: var(--ui-text-lg);
+  font-weight: 600;
+  min-width: 2ch;
+  text-align: center;
+}
+
+.cart-actions {
+  display: flex;
+  gap: var(--ui-space-3);
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: var(--ui-space-4);
+}
+
+.added-confirm {
+  font-size: var(--ui-text-sm);
+  color: var(--ui-color-muted);
+}
+
+/* ── Specs section ────────────────────────────────────────────────────────── */
+
+.product-specs {
+  padding: var(--ui-space-10) var(--ui-space-6);
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.spec-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: var(--ui-space-6);
+  margin-top: var(--ui-space-6);
+}
+
+.spec-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+}
+
+.spec-label {
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ui-color-muted);
+  font-weight: 600;
+}
+
+.spec-value {
+  font-size: var(--ui-text-base);
+  font-weight: 500;
+  color: var(--ui-text);
+}
+
+/* ── Stats section ────────────────────────────────────────────────────────── */
+
+.product-stats {
+  padding: var(--ui-space-10) var(--ui-space-6);
+}
+
+.product-stats-grid {
+  margin-top: var(--ui-space-6);
+}
+
+/* ── Qty buttons — icon only, hide text span visually ─────────────────────── */
+
+.qty-btn > span:not(.ui-btn-icon) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Nav cart trigger button ──────────────────────────────────────────────── */
+
+.cart-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--ui-space-2);
+  color: var(--ui-text);
+  border-radius: var(--ui-radius);
+}
+
+.cart-trigger:hover { color: var(--ui-accent); }
+
+.cart-bubble {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  background: var(--ui-accent);
+  color: var(--cart-bubble-text);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 3px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Cart modal table ─────────────────────────────────────────────────────── */
+
+.cart-table {
+  width: 100%;
+  margin-top: var(--ui-space-2);
+}
+
+.cart-col-num {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.cart-total-row td {
+  padding-top: var(--ui-space-3);
+  border-top: 2px solid var(--ui-border);
+}
+
+/* ── View error fallback ──────────────────────────────────────────────────── */
+
+.view-error {
+  padding: var(--ui-space-16) var(--ui-space-6);
+  text-align: center;
+  color: var(--ui-color-muted);
+}