@invisibleloop/pulse 0.12.3 → 0.14.2

package/docs/public/journey.css

@@ -0,0 +1,528 @@
+/*
+ * journey.css — Journey example
+ *
+ * Token definitions (hex values) + layout styles (var() only).
+ * Deep-night dark palette with gold accent.
+ */
+
+/* ─── Token definitions ──────────────────────────────────────── */
+
+:root {
+  --journey-bg:          #0A0A0F;
+  --journey-surface:     #12121A;
+  --journey-border:      #2A2A38;
+  --journey-text:        #F0EDE8;
+  --journey-muted:       #8A8A9C;
+  --journey-gold:        #C9A96E;
+  --journey-gold-dim:    #8A6F42;
+
+  /* Translucent shells — used once each; defined as tokens for hex-free app styles */
+  --journey-nav-bg:      rgba(10, 10, 15, 0.7);
+  --journey-nav-border:  rgba(42, 42, 56, 0.6);
+
+  /* Pulse-ui token overrides — bare tokens cascade into --ui-* */
+  --bg:      #0A0A0F;
+  --surface: #1A1A26;
+  --text:    #F0EDE8;
+  --muted:   #8A8A9C;
+  --border:  #2A2A38;
+  --accent:  #C9A96E;
+}
+
+/* ─── Base ───────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--journey-bg);
+  color: var(--journey-text);
+  font-family: var(--ui-font, system-ui, sans-serif);
+  line-height: 1.6;
+}
+
+/* ─── Skip link ──────────────────────────────────────────────── */
+
+.j-skip-link {
+  position: absolute;
+  left: -9999px;
+  top: var(--ui-space-2);
+  z-index: 999;
+  padding: var(--ui-space-2) var(--ui-space-4);
+  background: var(--journey-gold);
+  color: var(--journey-bg);
+  font-size: var(--ui-text-sm);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.j-skip-link:focus {
+  left: var(--ui-space-4);
+}
+
+.j-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Nav ────────────────────────────────────────────────────── */
+
+.j-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--ui-space-8);
+  background: var(--journey-nav-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--journey-nav-border);
+}
+
+.j-nav-wordmark {
+  font-size: var(--ui-text-sm);
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--journey-text);
+  text-decoration: none;
+}
+
+/* ─── Hero + Timeline split ──────────────────────────────────── */
+
+.j-hero-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 100svh;
+}
+
+/* ─── Hero ───────────────────────────────────────────────────── */
+
+.j-hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 128px var(--ui-space-8) var(--ui-space-16);
+  position: relative;
+  overflow: hidden;
+  border-right: 1px solid var(--journey-border);
+}
+
+.j-hero-eyebrow {
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--journey-gold);
+  margin-bottom: var(--ui-space-6);
+}
+
+.j-hero-title {
+  font-size: clamp(3.5rem, 11vw, 9.5rem);
+  font-weight: 800;
+  line-height: 0.92;
+  letter-spacing: -0.04em;
+  color: var(--journey-text);
+  max-width: 14ch;
+}
+
+.j-hero-title em {
+  font-style: normal;
+  color: var(--journey-gold);
+}
+
+.j-hero-sub {
+  margin-top: var(--ui-space-8);
+  font-size: var(--ui-text-lg);
+  color: var(--journey-muted);
+  max-width: 42ch;
+  line-height: 1.5;
+}
+
+.j-hero-cta {
+  margin-top: var(--ui-space-10);
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-6);
+}
+
+.j-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  background: var(--journey-gold);
+  color: var(--journey-bg);
+  font-weight: 700;
+  font-size: var(--ui-text-sm);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  text-decoration: none;
+  padding: var(--ui-space-4) var(--ui-space-8);
+  white-space: nowrap;
+  transition: opacity 0.2s;
+}
+
+.j-btn-primary:hover {
+  opacity: 0.85;
+}
+
+.j-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  color: var(--journey-muted);
+  font-size: var(--ui-text-sm);
+  letter-spacing: 0.05em;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.2s;
+}
+
+.j-btn-ghost:hover {
+  color: var(--journey-text);
+}
+
+.j-hero-scroll {
+  position: absolute;
+  bottom: var(--ui-space-8);
+  left: var(--ui-space-8);
+  display: none;
+  align-items: center;
+  gap: var(--ui-space-3);
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--journey-muted);
+}
+
+.j-hero-line {
+  width: 2rem;
+  height: 1px;
+  background: var(--journey-border);
+}
+
+/* ─── Timeline section ───────────────────────────────────────── */
+
+.j-timeline-section {
+  padding: 128px var(--ui-space-8) var(--ui-space-16);
+  position: sticky;
+  top: 0;
+  height: 100svh;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.j-timeline-section::-webkit-scrollbar {
+  display: none;
+}
+
+.j-section-label {
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--journey-gold);
+  margin-bottom: var(--ui-space-16);
+}
+
+.j-timeline {
+  position: relative;
+}
+
+/* Centre thread */
+.j-timeline::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--journey-gold-dim) 5%,
+    var(--journey-gold-dim) 95%,
+    transparent
+  );
+  transform: translateX(-50%);
+}
+
+.j-tl-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: var(--ui-space-10);
+  position: relative;
+}
+
+/* Dot on centre thread */
+.j-tl-item::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 1.25rem;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--journey-gold);
+  border: 2px solid var(--journey-bg);
+  transform: translateX(-50%);
+  box-shadow: 0 0 0 1px var(--journey-gold);
+  z-index: 1;
+}
+
+/* Odd: card on left half */
+.j-tl-item:nth-child(odd) {
+  justify-content: flex-start;
+}
+.j-tl-item:nth-child(odd) .j-tl-card {
+  width: calc(50% - var(--ui-space-8));
+  margin-right: var(--ui-space-8);
+}
+
+/* Even: card on right half */
+.j-tl-item:nth-child(even) {
+  justify-content: flex-end;
+}
+.j-tl-item:nth-child(even) .j-tl-card {
+  width: calc(50% - var(--ui-space-8));
+  margin-left: var(--ui-space-8);
+}
+
+.j-tl-card {
+  background: var(--journey-surface);
+  border: 1px solid var(--journey-border);
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+.j-tl-card:not(.j-tl-card--image) {
+  padding: var(--ui-space-5);
+}
+
+.j-tl-card:hover {
+  border-color: var(--journey-gold-dim);
+}
+
+.j-tl-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+}
+
+.j-tl-content {
+  padding: var(--ui-space-5);
+}
+
+.j-tl-year {
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--journey-gold);
+  margin-bottom: var(--ui-space-2);
+}
+
+.j-tl-title {
+  font-size: var(--ui-text-lg);
+  font-weight: 700;
+  color: var(--journey-text);
+  letter-spacing: -0.02em;
+  margin-bottom: var(--ui-space-2);
+}
+
+.j-tl-body {
+  font-size: var(--ui-text-sm);
+  color: var(--journey-muted);
+  line-height: 1.6;
+}
+
+.j-tl-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  margin-top: var(--ui-space-3);
+  font-size: 0.65rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--journey-gold-dim);
+  border: 1px solid var(--journey-border);
+  padding: 2px var(--ui-space-2);
+}
+
+/* ─── Features strip ─────────────────────────────────────────── */
+
+.j-features {
+  border-top: 1px solid var(--journey-border);
+  border-bottom: 1px solid var(--journey-border);
+  padding: var(--ui-space-12) var(--ui-space-8);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--ui-space-8);
+}
+
+.j-feature-label {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--journey-gold);
+  margin-bottom: var(--ui-space-2);
+}
+
+.j-feature-body {
+  font-size: var(--ui-text-sm);
+  color: var(--journey-muted);
+  line-height: 1.5;
+}
+
+/* ─── CTA section ────────────────────────────────────────────── */
+
+.j-cta {
+  padding: var(--ui-space-16) var(--ui-space-8);
+  text-align: center;
+  background: var(--journey-surface);
+  border-top: 1px solid var(--journey-border);
+}
+
+.j-cta-eyebrow {
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--journey-muted);
+  margin-bottom: var(--ui-space-6);
+}
+
+.j-cta-title {
+  font-size: clamp(2rem, 5vw, 4rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: var(--journey-text);
+  margin-bottom: var(--ui-space-8);
+}
+
+.j-cta-title em {
+  font-style: normal;
+  color: var(--journey-gold);
+}
+
+.j-cta-badges {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-4);
+}
+
+/* ─── Footer ─────────────────────────────────────────────────── */
+
+.j-footer {
+  padding: var(--ui-space-8);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--journey-border);
+}
+
+.j-footer-word {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--journey-muted);
+}
+
+.j-footer-links {
+  display: flex;
+  gap: var(--ui-space-6);
+}
+
+.j-footer-links a {
+  font-size: var(--ui-text-xs);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--journey-muted);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.j-footer-links a:hover {
+  color: var(--journey-text);
+}
+
+/* ─── Responsive ─────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .j-hero-split {
+    grid-template-columns: 1fr;
+  }
+
+  .j-hero {
+    min-height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--journey-border);
+    padding: 104px var(--ui-space-6) var(--ui-space-8);
+  }
+
+  .j-timeline-section {
+    position: static;
+    height: auto;
+    overflow-y: visible;
+    padding: var(--ui-space-10) var(--ui-space-6);
+  }
+
+  .j-hero-scroll {
+    display: flex;
+    position: static;
+    margin-top: var(--ui-space-8);
+  }
+
+  .j-timeline::before {
+    left: 0;
+    transform: none;
+  }
+
+  .j-tl-item::before {
+    left: 0;
+    transform: translateX(-50%);
+  }
+
+  .j-tl-item:nth-child(odd),
+  .j-tl-item:nth-child(even) {
+    justify-content: flex-start;
+  }
+
+  .j-tl-item:nth-child(odd) .j-tl-card,
+  .j-tl-item:nth-child(even) .j-tl-card {
+    width: 100%;
+    margin-left: var(--ui-space-6);
+    margin-right: 0;
+  }
+
+  .j-features {
+    grid-template-columns: 1fr;
+    gap: var(--ui-space-6);
+  }
+
+  .j-footer {
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    text-align: center;
+  }
+
+  .j-nav {
+    padding: 0 var(--ui-space-6);
+  }
+}