diff --git a/src/pages/pulse.astro b/src/pages/pulse.astro index 8571e67..87af797 100644 --- a/src/pages/pulse.astro +++ b/src/pages/pulse.astro @@ -152,89 +152,94 @@ const members = getAllCabMembers(); /> - + +
+
+ {comingUp.slice(0, 2).map((ev, i) => ( + <> + {i > 0 && } +
+ {dayNum(ev.starts_at)} +
+ {monthShort(ev.starts_at)} · {eventKindLabel(ev.kind).toUpperCase()} + {ev.title} +
+
+ + ))} +
+ All gatherings → +
- - + {featured && ( -
-
+
-
- +
+ -

{featured.title}

-

{featuredPreview}

+

{featured.title}

- Read the full dispatch -
+

{featuredPreview}

- {featured.poll && ( - + {moreDispatches.length > 0 && ( + )} -
+ - {moreDispatches.length > 0 && ( - + {featured.poll && ( + )} - - All updates from Fenja
)} @@ -372,376 +377,264 @@ const members = getAllCabMembers(); .greeting-right { align-items: flex-start; } } - /* ── Events card (--ink) — more air, prominent hero ───────────── */ - .events-card { - background: var(--ink); - color: var(--ink-text); - border-radius: var(--radius-lg); - padding: var(--space-10) var(--space-10); - display: flex; - flex-direction: column; - gap: var(--space-7); - } - .events-card--empty { - align-items: flex-start; - text-align: left; - min-height: 200px; - justify-content: space-between; - } - .events-empty-line { - color: var(--ink-text); - font-family: var(--font-serif); - font-size: 1.25rem; - margin: 0; - max-width: 32rem; - opacity: 0.92; - } - - .hero-body { - display: grid; - grid-template-columns: 150px 1fr; - gap: var(--space-8); - align-items: center; /* vertically align date + detail */ - padding: var(--space-3) 0; - position: relative; - } - .hero-body::after { - content: ''; - position: absolute; - left: 150px; - top: 0; bottom: 0; - width: 0.5px; - background: rgba(232, 224, 208, 0.18); - } - .hero-date { - display: flex; - flex-direction: column; - gap: 6px; - padding-right: var(--space-4); - } - .hero-weekday, .hero-month { - font-family: var(--font-sans); - font-size: var(--text-label-sm); - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - color: rgba(232, 224, 208, 0.75); - } - .hero-day { - font-family: var(--font-serif); - font-weight: 400; - font-size: 3.5rem; - line-height: 1; - color: var(--ink-text); - margin: 2px 0; - } - .hero-detail { padding-left: var(--space-7); } - .hero-title { - font-family: var(--font-serif); - font-weight: 400; - font-size: 2rem; - line-height: 1.2; - color: var(--ink-text); - margin: 0 0 var(--space-4); - } - .hero-desc { - color: rgba(232, 224, 208, 0.92); - margin: 0 0 var(--space-4); - max-width: 50rem; - line-height: var(--leading-relaxed); - } - .hero-meta { - color: rgba(232, 224, 208, 0.7); - font-size: var(--text-body-sm); - margin: 0; - } - - /* Hero foot */ - .hero-foot { - border-top: 0.5px solid rgba(232, 224, 208, 0.18); - padding-top: var(--space-5); + /* ── 'Also coming up' strip (plain text on cream) ─────────────── */ + .also-coming-up { display: flex; justify-content: space-between; align-items: center; - gap: var(--space-4); - flex-wrap: wrap; + padding: 4px 0; + gap: var(--space-5); } - .hero-foot-left { display: flex; align-items: center; gap: var(--space-4); } - .hero-foot-stat { - color: rgba(232, 224, 208, 0.7); + .also-list { + display: flex; + align-items: center; + gap: 18px; + min-width: 0; + } + .also-divider { + display: inline-block; + width: 1px; + height: 28px; + background: rgba(0, 0, 0, 0.08); + transform: scaleX(1); + } + .also-item { + display: flex; + align-items: center; + gap: 12px; + } + .also-day { + font-family: var(--font-serif); + font-weight: 400; + font-size: 22px; + line-height: 1; + color: var(--on-surface); + } + .also-meta-col { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; + } + .also-month-kind { font-family: var(--font-sans); - font-size: var(--text-label-sm); + font-size: 9px; letter-spacing: var(--tracking-wider); text-transform: uppercase; + color: var(--on-surface-variant); } - .hero-foot-right { display: flex; align-items: center; gap: var(--space-3); } - .hero-cta { - background: var(--ink-text); - color: var(--ink); - border: none; - padding: 10px 20px; - border-radius: 999px; - font-family: var(--font-sans); - font-size: var(--text-label-md); - font-weight: 600; - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - cursor: pointer; - transition: opacity var(--duration-fast) var(--ease-standard); + .also-title { + font-size: 13px; + color: var(--on-surface); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 16rem; } - .hero-cta:hover { opacity: 0.85; } - .hero-confirmed { - color: var(--ink-text); + .also-link { font-family: var(--font-sans); - font-size: var(--text-label-md); - font-weight: 600; - letter-spacing: var(--tracking-wide); + font-size: 11px; + letter-spacing: var(--tracking-wider); text-transform: uppercase; - padding: 10px 16px; - border: 0.5px solid rgba(232, 224, 208, 0.4); - border-radius: 999px; + color: var(--pigment-terracotta); + text-decoration: none; + border-bottom: none; } - .hero-change { - background: transparent; - border: none; - color: rgba(232, 224, 208, 0.75); - font-family: var(--font-sans); - font-size: var(--text-label-sm); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - cursor: pointer; - text-decoration: underline; + .also-link:hover { opacity: 0.8; border-bottom: none; } + + /* ── Editorial row: dispatch (1.7fr) + pulse (1fr) ────────────── */ + .editorial-row { + display: grid; + grid-template-columns: 1.7fr 1fr; + gap: 56px; + align-items: start; } - /* Bundled coming-up sub-cards (no RSVP) */ - .coming-up-grid { + /* Dispatch column */ + .dispatch-col { display: flex; flex-direction: column; gap: var(--space-3); } + .dispatch-byline { + display: flex; + align-items: center; + gap: 10px; + } + .dispatch-byline-name { + font-family: var(--font-sans); + font-size: 12px; + font-weight: 600; + color: var(--on-surface); + } + .dispatch-byline-time { + font-family: var(--font-sans); + font-size: 11px; + color: var(--on-surface-variant); + } + .dispatch-kind-pill { + background: color-mix(in oklab, var(--pill) 14%, transparent); + color: var(--pill); + padding: 2px 8px; + border-radius: 3px; + font-family: var(--font-sans); + font-size: 9px; + letter-spacing: var(--tracking-wider); + font-weight: 600; + margin-left: auto; + } + .dispatch-headline { + font-family: var(--font-serif); + font-weight: 400; + font-size: 32px; + line-height: 1.15; + color: var(--on-surface); + margin: 8px 0 0; + letter-spacing: var(--tracking-snug); + } + .dispatch-para-lead { + margin: var(--space-2) 0 0; + font-size: 14px; + line-height: 1.7; + color: var(--on-surface); + } + .dispatch-read { + margin-top: var(--space-2); + align-self: flex-start; + font-family: var(--font-sans); + font-size: 11px; + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--pigment-terracotta); + text-decoration: none; + border-bottom: 1px solid var(--pigment-terracotta); + padding-bottom: 1px; + } + .dispatch-read:hover { opacity: 0.78; border-bottom: 1px solid var(--pigment-terracotta); } + + .earlier-block { + margin-top: 48px; + padding-top: 28px; + border-top: 0.5px solid rgba(0, 0, 0, 0.08); + display: flex; + flex-direction: column; + gap: 14px; + } + .earlier-label { + font-family: var(--font-sans); + font-size: 11px; + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--on-surface-variant); + margin: 0; + } + .earlier-list { list-style: none; padding: 0; margin: 0; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: var(--space-3); - } - .coming-up-card { - background: rgba(232, 224, 208, 0.06); - border: 0.5px solid rgba(232, 224, 208, 0.14); - border-radius: var(--radius-md); - padding: var(--space-5); display: flex; - gap: var(--space-4); - align-items: flex-start; + flex-direction: column; + gap: 14px; } - .cu-date { display: flex; flex-direction: column; gap: 2px; min-width: 36px; } - .cu-day { + .earlier-link { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 16px; + color: var(--on-surface); + text-decoration: none; + border-bottom: none; + } + .earlier-link:hover { border-bottom: none; opacity: 0.7; } + .earlier-title { font-family: var(--font-serif); - font-size: 1.5rem; - line-height: 1; - color: var(--ink-text); + font-size: 15px; + line-height: 1.3; } - .cu-month { + .earlier-meta { font-family: var(--font-sans); - font-size: var(--text-label-sm); + font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; - color: rgba(232, 224, 208, 0.7); - } - .cu-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } - .cu-title { - font-family: var(--font-serif); - font-weight: 400; - font-size: 1rem; - line-height: 1.25; - color: var(--ink-text); - margin: 0; - } - .cu-meta { - font-size: 0.75rem; - color: rgba(232, 224, 208, 0.65); - margin: 0; + color: var(--on-surface-variant); + white-space: nowrap; } - .hero-see-all { align-self: flex-start; color: var(--ink-text); } - .section-link--ink { text-decoration-color: rgba(232, 224, 208, 0.5); } - - /* ── Latest from Fenja: two boxes + 2 minimalist rows below ──── */ - .fenja-section { - display: flex; - flex-direction: column; - gap: var(--space-6); - } - .fenja-row { - display: grid; - grid-template-columns: 1fr; - gap: var(--space-5); - } - .fenja-row--with-poll { - grid-template-columns: 1.6fr 1fr; - } - - .fenja-article-box, - .fenja-poll-box { - background: var(--surface-card); - border: 0.5px solid var(--surface-card-border); - border-radius: var(--radius-lg); - padding: var(--space-7) var(--space-8); - display: flex; - flex-direction: column; - gap: var(--space-4); - } - - .fenja-byline { + /* Pulse column */ + .pulse-col { display: flex; flex-direction: column; gap: 14px; } + .pulse-eyebrow { display: flex; align-items: center; - gap: var(--space-2); - flex-wrap: wrap; - font-size: var(--text-body-sm); - } - .fenja-byline-name { font-weight: 600; color: var(--on-surface); } - .fenja-byline-title { color: var(--on-surface-variant); } - .fenja-byline-time { - color: var(--on-surface-muted); - font-size: var(--text-label-sm); - letter-spacing: var(--tracking-wide); - margin-left: auto; - } - .fenja-kind-pill { - background: color-mix(in oklab, var(--pill) 14%, transparent); - color: var(--pill); - padding: 2px 9px; - border-radius: 999px; + gap: 8px; font-family: var(--font-sans); - font-size: var(--text-label-sm); - letter-spacing: var(--tracking-wide); - font-weight: 600; + font-size: 10px; + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--pigment-terracotta); + margin: 0; } - .fenja-title { + .pulse-eyebrow-dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--pigment-terracotta); + } + .pulse-question { font-family: var(--font-serif); font-weight: 400; - font-size: 1.75rem; + font-size: 22px; line-height: 1.25; color: var(--on-surface); margin: 0; - letter-spacing: var(--tracking-snug); } - .fenja-body { - color: var(--on-surface); - line-height: var(--leading-relaxed); - margin: 0; - font-size: var(--text-body-lg); - } - .fenja-read { margin-top: var(--space-2); align-self: flex-start; } - - /* Poll box */ - .fenja-poll-question { - font-family: var(--font-serif); - font-weight: 400; - font-size: 1.125rem; - line-height: 1.3; - color: var(--on-surface); + .pulse-status { + font-family: var(--font-sans); + font-size: 11px; + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--on-surface-variant); margin: 0; } - .fenja-poll-options { + .pulse-options { display: flex; flex-direction: column; - gap: var(--space-2); + gap: 6px; + margin-top: 6px; } - .fenja-poll-option { - position: relative; + .pulse-option { display: flex; align-items: center; - gap: var(--space-3); - padding: var(--space-3) var(--space-4); - background: var(--background); - border: 0.5px solid var(--surface-card-border); - border-radius: var(--radius-md); + gap: 8px; + padding: 10px 14px; + background: transparent; + border: none; + border-left: 2px solid rgba(0, 0, 0, 0.1); font-family: var(--font-sans); - font-size: var(--text-body-sm); + font-size: 13px; color: var(--on-surface); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); - overflow: hidden; } - .fenja-poll-option:hover:not(.locked) { - border-color: var(--outline); + .pulse-option:hover:not(.locked) { border-left-color: rgba(0, 0, 0, 0.25); } + .pulse-option.chosen { + border-left-color: var(--pigment-terracotta); + background: rgba(185, 107, 88, 0.05); } - .fenja-poll-option.chosen { - border-color: var(--pigment-terracotta); - background: color-mix(in oklab, var(--pigment-terracotta) 6%, var(--surface-card)); - } - .fenja-poll-option.locked:not(.chosen) { + .pulse-option.locked:not(.chosen) { cursor: default; color: var(--on-surface-variant); } - .fenja-poll-option:disabled { opacity: 0.85; } - .fenja-poll-letter { + .pulse-option:disabled { opacity: 0.85; } + .pulse-option-letter { + color: var(--on-surface-variant); + font-family: var(--font-sans); + font-size: 10px; font-weight: 600; - color: var(--on-surface-muted); - font-size: var(--text-label-sm); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-right: 8px; flex-shrink: 0; } - .fenja-poll-option.chosen .fenja-poll-letter { color: var(--pigment-terracotta); } - .fenja-poll-text { flex: 1; } - .fenja-poll-bar { - position: absolute; - left: 0; right: 0; bottom: 0; - height: 2px; - background: var(--surface-container); - } - .fenja-poll-bar-fill { - display: block; - height: 100%; - background: var(--pigment-terracotta); - opacity: 0.55; - transition: width 600ms var(--ease-standard); - } - .fenja-poll-count { - color: var(--on-surface-muted); - font-size: var(--text-label-sm); - letter-spacing: var(--tracking-wide); - margin: 0; - } - - /* 2 minimalist rows below the article */ - .fenja-more { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - } - .fenja-more-row { - border-bottom: 0.5px solid var(--surface-card-border); - } - .fenja-more-row:last-child { border-bottom: none; } - .fenja-more-link { - display: flex; - justify-content: space-between; - align-items: baseline; - gap: var(--space-4); - padding: var(--space-3) 0; - color: var(--on-surface); - text-decoration: none; - border-bottom: none; - } - .fenja-more-link:hover { - border-bottom: none; - opacity: 0.75; - } - .fenja-more-title { - font-family: var(--font-serif); - font-size: var(--text-body-md); - color: var(--on-surface); - } - .fenja-more-meta { - color: var(--on-surface-muted); - font-size: var(--text-label-sm); - letter-spacing: var(--tracking-wide); - text-transform: uppercase; - white-space: nowrap; - } - - .fenja-all { align-self: flex-start; } + .pulse-option.chosen .pulse-option-letter { color: var(--pigment-terracotta); } + .pulse-option-text { flex: 1; } /* ── Roadmap horizontal cards ─────────────────────────────────── */ .roadmap-section { @@ -848,10 +741,7 @@ const members = getAllCabMembers(); /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 880px) { .roadmap-grid { grid-template-columns: 1fr; } - .hero-body { grid-template-columns: 1fr; gap: var(--space-5); } - .hero-body::after { display: none; } - .hero-detail { padding-left: 0; } - .fenja-row--with-poll { grid-template-columns: 1fr; } - .events-card { padding: var(--space-7) var(--space-6); } + .editorial-row { grid-template-columns: 1fr; gap: var(--space-8); } + .also-coming-up { flex-direction: column; align-items: flex-start; gap: var(--space-3); } }