astro-theme-popular 0.3.0

package/src/styles/base.css

@@ -0,0 +1,113 @@
+/* ============================================================
+   POPULAR: base.css
+   Resets, document defaults, and layout utilities.
+   Everything references the design tokens (tokens/*.css) so a
+   site can re-theme purely by overriding CSS custom properties.
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text-body);
+  background: var(--surface-page);
+  -webkit-font-smoothing: antialiased;
+}
+
+img, svg, video { max-width: 100%; display: block; }
+
+a { color: var(--text-link); text-decoration: none; }
+a:hover { color: var(--text-link-hover); }
+
+h1, h2, h3, h4 {
+  color: var(--text-strong);
+  letter-spacing: var(--tracking-tight);
+  line-height: var(--leading-tight);
+  margin: 0 0 0.6em;
+}
+h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
+h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
+h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
+
+p { margin: 0 0 1rem; }
+
+/* Inline code: Python-docs style, mono font on a soft grey chip.
+   Code inside pre blocks keeps the highlighter's own background. */
+pre, code, kbd { font-family: var(--font-mono); }
+code {
+  font-size: 0.875em;
+  background: var(--surface-code);
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-sm);
+}
+pre code { font-size: inherit; background: none; padding: 0; border-radius: 0; }
+
+:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
+
+/* --- Layout utilities --- */
+.g-container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
+.g-narrow { max-width: 52rem; margin: 0 auto; padding-inline: var(--gutter); } /* legacy self-centering column */
+/* Reading-measure column. Use inside .g-container so the text's left edge
+   lines up with the page hero and every other page type. */
+.g-article { max-width: 52rem; }
+.g-section { padding-block: var(--section-pad-y); }
+.g-section--sm { padding-block: var(--space-5); }
+
+/* Surface bands */
+.g-bg-white { background: var(--surface-page); }
+.g-bg-wash { background: var(--surface-wash); }
+.g-bg-wash-soft { background: var(--surface-wash-soft); }
+.g-bg-tertiary { background: var(--surface-tertiary); }
+.g-bg-ink { background: var(--surface-ink); color: var(--ink-200); }
+
+/* Eyebrow (Quantico display accent) */
+.g-eyebrow {
+  display: inline-block;
+  font-family: var(--font-display);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--color-primary);
+}
+
+/* Section heading block */
+.g-section-head { display: flex; flex-direction: column; gap: 0.6rem; max-width: 46rem; }
+.g-section-head--center { align-items: center; text-align: center; margin-inline: auto; }
+.g-section-head h2 { margin: 0; }
+.g-section-head .g-lead { margin: 0; font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-normal); }
+
+.g-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
+.g-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
+.g-stack { display: flex; flex-direction: column; gap: 1.2rem; }
+.g-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
+
+.g-prose { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); }
+/* Underline prose links so color is never the only distinguisher (WCAG 1.4.1);
+   matters for adopters whose brand link color is close to the body text.
+   Only bare markdown links: components inside prose (buttons, tags) carry a
+   class and are already visually distinct. */
+.g-prose a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
+.g-prose > * + * { margin-top: 1.1rem; }
+.g-prose ul, .g-prose ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
+.g-prose h2 { margin-top: 1.8rem; }
+.g-prose img { border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
+/* One background for every fenced block, whatever the highlighter did.
+   !important beats the inline background-color that Chroma (Hugo) and
+   Shiki (Astro) emit, and unhighlighted languages get the same canvas. */
+.g-prose pre { overflow-x: auto; padding: 1rem 1.2rem; border-radius: var(--radius-lg); background: var(--surface-code-block) !important; color: var(--ink-100); }
+
+/* Skip link for a11y */
+.g-skip { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-md); z-index: 100; }
+.g-skip:focus { left: 0.5rem; top: 0.5rem; color: #fff; }
+
+@media (max-width: 920px) {
+  :root { --text-4xl: 2.75rem; --text-3xl: 2.25rem; --text-2xl: 1.9rem; --section-pad-y: 3rem; }
+  .g-grid-3, .g-grid-2 { grid-template-columns: 1fr; }
+}

package/src/styles/components.css

@@ -0,0 +1,310 @@
+/* ============================================================
+   POPULAR: components.css
+   Class-based ports of the theme's components. Pair with a
+   FontAwesome 6 stylesheet for icons (loaded in head).
+   ============================================================ */
+
+/* ---------- Buttons ---------- */
+.g-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
+  min-height: var(--control-height-md);
+  padding: 0.6rem 1.4rem;
+  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold);
+  line-height: 1.1; letter-spacing: 0.01em;
+  border: var(--border-width-thick) solid transparent;
+  border-radius: var(--radius-pill);
+  cursor: pointer; white-space: nowrap; text-decoration: none;
+  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out),
+              transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
+}
+.g-btn:hover { transform: translateY(-1px); }
+.g-btn--sm { min-height: var(--control-height-sm); padding: 0.4rem 0.95rem; font-size: var(--text-sm); }
+.g-btn--lg { min-height: var(--control-height-lg); padding: 0.85rem 1.9rem; font-size: var(--text-md); }
+.g-btn--block { display: flex; width: 100%; }
+
+.g-btn--primary { background: var(--color-primary); color: var(--text-on-brand); }
+.g-btn--primary:hover { background: var(--color-primary-hover); color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
+.g-btn--secondary { background: var(--color-secondary); color: var(--text-on-brand); }
+.g-btn--secondary:hover { background: color-mix(in srgb, var(--color-secondary) 80%, #000); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
+.g-btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
+.g-btn--outline:hover { background: var(--color-primary); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
+.g-btn--ghost { background: transparent; color: var(--text-link); }
+.g-btn--ghost:hover { background: var(--color-primary-subtle); color: var(--text-link); }
+.g-btn--accent { background: var(--color-accent); color: var(--text-on-brand); }
+.g-btn--accent:hover { background: var(--color-accent-hover); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
+.g-btn--dark { background: var(--ink-800); color: var(--text-on-brand); }
+.g-btn--dark:hover { background: var(--ink-900); color: var(--text-on-brand); box-shadow: var(--shadow-sm); }
+
+/* ---------- Badges & tags ---------- */
+.g-badge {
+  display: inline-flex; align-items: center; gap: 0.4em;
+  padding: 0.28em 0.7em; font-size: var(--text-xs); font-weight: var(--weight-semibold);
+  line-height: 1.2; letter-spacing: 0.01em; border-radius: var(--radius-pill); white-space: nowrap;
+  background: var(--color-primary); color: #fff;
+}
+.g-badge--soft { background: var(--gold-50); color: var(--gold-700); }
+.g-badge--secondary { background: var(--color-secondary); }
+.g-badge--secondary.g-badge--soft { background: var(--gold-50); color: var(--gold-700); }
+.g-badge--success { background: var(--green-500); }
+.g-badge--success.g-badge--soft { background: #e6f3ec; color: #0f6e44; }
+.g-badge--warning { background: var(--amber-500); color: #142a36; }
+.g-badge--warning.g-badge--soft { background: #fff7e0; color: #946a00; }
+.g-badge--ink { background: var(--ink-800); }
+
+.g-tag {
+  display: inline-flex; align-items: center;
+  padding: 0.2em 0.65em; font-size: var(--text-xs); font-weight: var(--weight-medium);
+  border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-subtle);
+  color: var(--text-muted); background: var(--surface-card);
+  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
+}
+.g-tag::before { content: "#"; opacity: 0.55; margin-right: 0.05em; }
+a.g-tag:hover { background: var(--gold-50); border-color: var(--color-primary); color: var(--gold-700); }
+
+/* Blog filter buttons */
+.g-filter { font-family: var(--font-sans); padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium); border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); color: var(--text-body); cursor: pointer; }
+.g-filter:hover { border-color: var(--color-primary); color: var(--gold-700); }
+.g-filter.is-active { background: var(--gold-50); border-color: var(--color-primary); color: var(--gold-700); }
+
+/* Pager (list pagination) */
+.g-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; margin-top: var(--space-5); }
+.g-pager__num, .g-pager__nav {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
+  min-width: 2.2rem; min-height: 2.2rem; padding: 0.3rem 0.8rem;
+  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium);
+  border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); color: var(--text-body);
+}
+a.g-pager__num:hover, .g-pager__nav:hover { border-color: var(--color-primary); color: var(--gold-700); }
+.g-pager__num.is-active { background: var(--gold-50); border-color: var(--color-primary); color: var(--gold-700); }
+
+/* ---------- Testimonials ---------- */
+.g-quote {
+  display: flex; flex-direction: column; gap: 1rem; height: 100%; margin: 0;
+  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
+  border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-sm);
+}
+.g-quote blockquote { margin: 0; line-height: var(--leading-relaxed); color: var(--text-body); }
+.g-quote blockquote::before {
+  content: "\201C";
+  display: block; font-family: var(--font-display); font-size: 2.5rem; line-height: 1;
+  color: var(--color-primary);
+}
+.g-quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
+.g-quote figcaption img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
+.g-quote__name { display: block; font-weight: var(--weight-semibold); color: var(--text-strong); }
+.g-quote__role { display: block; font-size: var(--text-sm); color: var(--text-muted); }
+
+/* Year heading for date-grouped lists (events) */
+.g-year { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
+.g-year:first-child { margin-top: 0; }
+
+/* ---------- Cards ---------- */
+.g-card {
+  display: flex; flex-direction: column; height: 100%;
+  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
+  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
+  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
+}
+.g-card:hover { transform: var(--hover-lift); box-shadow: var(--shadow-lg); }
+.g-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gold-100); }
+.g-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
+.g-card:hover .g-card__media img { transform: scale(1.04); }
+.g-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-4); flex: 1; }
+.g-card__eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary); }
+.g-card__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-strong); }
+.g-card__title a { color: inherit; }
+.g-card__title a:hover { color: var(--color-primary); }
+.g-card__text { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); }
+.g-card__footer { margin-top: auto; padding-top: 0.6rem; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+
+/* Icon medallion used in feature cards */
+.g-medallion {
+  display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
+  border-radius: var(--radius-circle); background: var(--gold-50); color: var(--color-primary); font-size: 1.3rem;
+}
+.g-medallion--lg { width: 68px; height: 68px; font-size: 1.7rem; background: var(--surface-wash); }
+
+/* ---------- Persona (organizer / speaker bio) ---------- */
+.g-persona {
+  display: flex; gap: var(--space-4); align-items: flex-start;
+  background: var(--surface-card); border: var(--border-width) solid var(--border-subtle);
+  border-left: 4px solid var(--color-secondary); border-radius: var(--radius-lg);
+  padding: var(--space-4); box-shadow: var(--shadow-sm);
+}
+.g-persona--primary { border-left-color: var(--color-primary); }
+.g-persona__img { flex: 0 0 auto; width: 76px; height: 76px; border-radius: var(--radius-circle); object-fit: cover; border: 3px solid var(--color-secondary); }
+.g-persona--primary .g-persona__img { border-color: var(--color-primary); }
+.g-persona__name { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); line-height: 1.2; }
+.g-persona__role { font-size: var(--text-sm); color: var(--color-secondary); font-weight: var(--weight-medium); }
+.g-persona__bio { margin: 0.35rem 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }
+.g-persona__socials { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
+.g-persona__socials a { color: var(--ink-400); font-size: 1rem; }
+.g-persona__socials a:hover { color: var(--color-primary); }
+
+/* Organizer grid card (photo on top) */
+.g-org { text-align: left; }
+.g-org__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
+.g-org__name { margin: 0.9rem 0 0.1rem; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); }
+.g-org__role { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-medium); }
+.g-org__bio { margin: 0.5rem 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }
+
+/* ---------- Post navigation (older/newer neighbors on blog singles) ---------- */
+.g-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
+.g-postnav__card { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-3); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
+.g-postnav__card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
+.g-postnav__card--next { text-align: right; align-items: flex-end; grid-column: 2; }
+.g-postnav__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
+.g-postnav__title { font-weight: var(--weight-semibold); color: var(--text-strong); }
+@media (max-width: 640px) { .g-postnav { grid-template-columns: 1fr; } .g-postnav__card--next { grid-column: 1; text-align: left; align-items: flex-start; } }
+
+/* ---------- Header / nav ---------- */
+.g-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface-page) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: var(--border-width) solid var(--border-subtle); }
+.g-nav { display: flex; align-items: center; gap: var(--space-4); padding-block: 0.75rem; }
+.g-brand { display: flex; align-items: center; gap: 0.6rem; }
+.g-brand img { height: 44px; width: 44px; border-radius: var(--radius-md); }
+.g-brand__text { display: flex; flex-direction: column; line-height: 1; }
+.g-brand__name { font-weight: var(--weight-bold); color: var(--color-primary); font-size: var(--text-md); }
+.g-brand__sub { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 0.7rem; color: var(--ink-800); }
+.g-navlinks { display: flex; gap: 0.4rem; list-style: none; margin: 0 0 0 auto; padding: 0; align-items: center; }
+.g-navlinks a { display: inline-block; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-body); }
+.g-navlinks a:hover { color: var(--color-primary); }
+.g-navlinks a.is-active { color: var(--color-primary); background: var(--gold-50); }
+.g-navlinks li { position: relative; }
+.g-navlinks__caret { font-size: 0.6em; margin-left: 0.35rem; }
+.g-navlinks__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 11rem; flex-direction: column; gap: 0.15rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
+.g-navlinks li.has-sub:hover > .g-navlinks__sub, .g-navlinks li.has-sub:focus-within > .g-navlinks__sub { display: flex; }
+.g-navlinks__sub a { display: block; border-radius: var(--radius-md); }
+.g-nav__cta { margin-left: 0.4rem; }
+.g-nav__toggle { display: none; margin-left: auto; background: none; border: none; font-size: 1.4rem; color: var(--ink-800); cursor: pointer; padding: 0.4rem; }
+
+/* ---------- Code copy button ---------- */
+pre { position: relative; }
+.g-copy { position: absolute; top: 0.45rem; right: 0.45rem; padding: 0.35rem 0.55rem; border: none; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.12); color: #f8f8f2; font-size: var(--text-sm); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
+pre:hover .g-copy, .g-copy:focus-visible { opacity: 1; }
+.g-copy:hover { background: rgba(255, 255, 255, 0.24); }
+.g-copy.is-copied { color: #6ee7b7; }
+
+/* ---------- Hero ---------- */
+.g-hero { background: var(--surface-wash); }
+.g-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: center; padding-block: var(--space-6); }
+.g-hero__content { display: flex; flex-direction: column; gap: 1.4rem; }
+.g-hero h1 { margin: 0; font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--ink-800); }
+.g-hero__lead { margin: 0; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-700); max-width: 34rem; }
+.g-hero__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid var(--surface-card); }
+.g-hero__media img { width: 100%; aspect-ratio: 16/12; object-fit: cover; }
+
+/* Interior page hero band */
+.g-pagehero { background: var(--surface-wash); }
+.g-pagehero .g-container { padding-block: var(--space-6) var(--space-5); }
+.g-pagehero h1 { margin: 0.6rem 0 0; color: var(--ink-800); max-width: 50rem; }
+.g-pagehero__lead { margin: 1rem 0 0; font-size: var(--text-md); color: var(--ink-700); max-width: 46rem; line-height: var(--leading-normal); }
+
+/* ---------- Stats strip ---------- */
+.g-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-block: var(--space-5); }
+.g-stat { text-align: center; }
+.g-stat__n { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--gold-300); }
+.g-stat__l { font-size: var(--text-sm); color: var(--ink-300); margin-top: 0.2rem; }
+
+/* ---------- Feature (image + text) ---------- */
+.g-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-5); align-items: center; padding-block: var(--section-pad-y); }
+.g-feature__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 4px solid var(--surface-card); }
+.g-feature__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
+.g-feature__body { display: flex; flex-direction: column; gap: 1rem; }
+.g-meta-line { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--text-base); color: var(--text-body); }
+.g-meta-line i { color: var(--color-primary); width: 22px; }
+
+/* ---------- Event row ---------- */
+.g-event { display: grid; grid-template-columns: 160px 1fr auto; gap: var(--space-4); align-items: stretch; background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-sm); }
+.g-event__date { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--surface-wash); border-radius: var(--radius-lg); padding: var(--space-3); }
+.g-event__dow { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-xs); color: var(--color-primary); }
+.g-event__day { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--ink-800); line-height: 1.1; margin-top: 0.2rem; }
+.g-event__time { font-size: var(--text-xs); color: var(--text-muted); margin-top: 0.2rem; }
+.g-event__body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
+.g-event__body h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
+.g-event__body p { margin: 0; font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }
+.g-event__meta { font-size: var(--text-sm); color: var(--text-body); }
+.g-event__meta i { color: var(--color-primary); width: 20px; }
+.g-event__aside { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 0.5rem; }
+
+/* ---------- Get-involved block ---------- */
+.g-involve { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5); align-items: center; padding-block: var(--section-pad-y); border-bottom: var(--border-width) solid var(--border-subtle); }
+.g-involve__body { display: flex; flex-direction: column; gap: 0.6rem; max-width: 42rem; }
+.g-involve__cta { display: flex; flex-direction: column; gap: 0.6rem; min-width: 190px; }
+
+/* ---------- Docs (handbook / runbooks) ---------- */
+.g-doc { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; padding-block: var(--space-5) var(--space-6); }
+.g-doc-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 0.15rem; }
+.g-doc-toc__label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; }
+.g-doc-toc a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.3; color: var(--text-body); border-left: 3px solid transparent; }
+.g-doc-toc a:hover { color: var(--color-primary); }
+.g-doc-toc a.is-active { color: var(--gold-700); background: var(--gold-50); border-left-color: var(--color-primary); font-weight: var(--weight-semibold); }
+.g-doc__content { min-width: 0; }
+.g-doc__content h2 { margin-top: 2.5rem; }
+.g-doc__content h2, .g-doc__content h3, .g-doc__content h4 { scroll-margin-top: 108px; }
+.g-doc__content h2:first-child { margin-top: 0; }
+
+/* ---------- Callout ---------- */
+.g-callout { display: flex; gap: 0.9rem; padding: var(--space-4); border-radius: var(--radius-lg); border: var(--border-width) solid var(--gold-300); background: var(--surface-wash-soft); margin: 1.2rem 0; }
+.g-callout > i { font-size: 1.1rem; margin-top: 0.15rem; color: var(--gold-700); }
+.g-callout__title { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-base); margin-bottom: 0.3rem; }
+.g-callout__body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
+.g-callout__body p:last-child { margin-bottom: 0; }
+.g-callout--tip { background: #e6f3ec; border-color: #a7d7bd; } .g-callout--tip > i { color: #0f6e44; }
+.g-callout--warn { background: #fff7e0; border-color: #f2d488; } .g-callout--warn > i { color: #946a00; }
+/* Tip/warn tints are fixed light colors, so their text stays fixed dark
+   even under dark brand palettes (title/body tokens go light there). */
+.g-callout--tip .g-callout__title, .g-callout--warn .g-callout__title { color: #142a36; }
+.g-callout--tip .g-callout__body, .g-callout--warn .g-callout__body { color: #243a47; }
+
+/* ---------- Checklist ---------- */
+.g-checklist { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin: 1.2rem 0; }
+.g-checklist__head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem var(--space-4); background: var(--surface-tertiary); border-bottom: var(--border-width) solid var(--border-subtle); }
+.g-checklist__head span:first-child { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
+.g-checklist__count { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); }
+.g-checklist__count.is-complete { color: #0f6e44; }
+.g-checklist ul { list-style: none; margin: 0; padding: 0; }
+.g-checklist li { border-bottom: var(--border-width) solid var(--border-subtle); }
+.g-checklist li:last-child { border-bottom: none; }
+.g-check { width: 100%; display: flex; gap: 0.8rem; align-items: flex-start; text-align: left; background: none; border: none; padding: 0.8rem var(--space-4); cursor: pointer; font-family: var(--font-sans); }
+.g-check__box { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 0.1rem; border-radius: 6px; border: 2px solid var(--border-default); background: var(--surface-card); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; transition: all var(--duration-fast) var(--ease-out); }
+.g-check__label { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
+.g-check.is-done .g-check__box { border-color: var(--color-primary); background: var(--color-primary); }
+.g-check.is-done .g-check__label { color: var(--text-muted); text-decoration: line-through; }
+
+/* ---------- Footer ---------- */
+.g-footer { background: var(--surface-ink); color: var(--ink-200); }
+.g-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-block: var(--space-5) var(--space-4); }
+.g-footer__brand { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 240px; max-width: 26rem; }
+.g-footer__brand img { height: 56px; width: 56px; border-radius: var(--radius-md); }
+.g-footer__ack { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-300); }
+.g-footer__col { flex: 1 0 140px; }
+.g-footer__col-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--white); }
+.g-footer__col ul { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+.g-footer__col a { color: var(--ink-300); font-size: var(--text-sm); }
+.g-footer__col a:hover { color: var(--white); }
+.g-footer__bottom { border-top: var(--border-width) solid rgba(255,255,255,0.1); }
+.g-footer__bottom .g-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-block: 1.1rem; font-size: var(--text-xs); color: var(--ink-400); }
+.g-social { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: var(--radius-circle); background: rgba(255,255,255,0.08); color: var(--ink-200); font-size: 1rem; }
+.g-social:hover { background: var(--white); color: #142a36; }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 920px) {
+  .g-hero__grid, .g-feature, .g-doc, .g-event, .g-involve { grid-template-columns: 1fr; }
+  .g-stats { grid-template-columns: repeat(2, 1fr); }
+  /* Narrow screens: the sidebar becomes a pill row of sibling doc pages.
+     The column labels and per-heading anchors only make sense in a sticky
+     sidebar; the headings they point to sit directly below anyway. */
+  .g-doc-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 0.8rem; margin-bottom: 1rem; }
+  .g-doc-toc__label { display: none; }
+  .g-doc-toc a[href^="#"] { display: none; }
+  .g-doc-toc a { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; }
+  .g-doc-toc a.is-active { border-color: var(--color-primary); }
+  .g-involve__cta { min-width: 0; }
+  .g-event__aside { align-items: flex-start; }
+  .g-navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; margin: 0; padding: 0.5rem var(--gutter) 1rem; background: var(--surface-page); border-bottom: var(--border-width) solid var(--border-subtle); box-shadow: var(--shadow-md); }
+  .g-navlinks.is-open { display: flex; }
+  .g-navlinks li.has-sub > .g-navlinks__sub, .g-navlinks li.has-sub:hover > .g-navlinks__sub { display: flex; position: static; min-width: 0; padding: 0 0 0 1rem; background: none; border: none; box-shadow: none; }
+  .g-navlinks__caret { display: none; }
+  .g-nav__toggle { display: block; }
+  .g-nav__cta { display: none; }
+}

package/src/styles/tokens/colors.css

@@ -0,0 +1,82 @@
+/* ============================================================
+   COLORS: Popular theme
+   The default identity is Popular's own: marquee gold, sunglass
+   black, and periwinkle (the Pop!ular music-video palette).
+   Base palette ramps first, then semantic aliases.
+   ============================================================ */
+:root {
+    /* --- Marquee gold (primary) --- */
+    --gold-50:  #fdf7e7;  /* champagne, soft tint */
+    --gold-100: #f9edc9;  /* champagne, hero wash */
+    --gold-200: #f3dfa4;
+    --gold-300: #d9ba7b;
+    --gold-400: #c3963d;
+    --gold-500: #a16207;  /* theme primary, marquee gold */
+    --gold-600: #8a5303;
+    --gold-700: #713f12;  /* deep gold, links & active states */
+    --gold-800: #5c3610;
+    --gold-900: #3d2408;
+
+    /* --- Ink neutrals (theme dark = sunglass black #141417) --- */
+    --ink-900: #0a0a0d;
+    --ink-800: #141417;  /* theme dark, primary text on light */
+    --ink-700: #243a47;
+    --ink-600: #41535e;
+    --ink-500: #61727c;
+    --ink-400: #8a98a1;
+    --ink-300: #b8c2c9;
+    --ink-200: #dce2e6;
+    --ink-100: #eef1f3;
+    --ink-50:  #f8f9fa;  /* theme light */
+    --white:   #ffffff;
+
+    /* --- Periwinkle accent (a certain music-video blazer) --- */
+    --indigo-500: #7d8ff2;
+    --indigo-400: #93a2f5;
+    --indigo-300: #b3bdf8;
+
+    /* --- Bootstrap semantic hues carried by the theme --- */
+    --green-500:  #198754;  /* success */
+    --cyan-500:   #0dcaf0;  /* info */
+    --amber-500:  #ffc107;  /* warning */
+    --red-500:    #dc3545;  /* danger */
+
+    /* ----------------------------------------------------------
+       SEMANTIC ALIASES: reference these in components
+       ---------------------------------------------------------- */
+    --color-primary:        var(--gold-500);
+    --color-primary-hover:  var(--gold-600);
+    --color-primary-active: var(--gold-700);
+    --color-secondary:      var(--ink-800);        /* sunglass black */
+    --color-accent:         var(--indigo-500);
+    --color-accent-hover:   color-mix(in srgb, var(--indigo-500) 85%, #000);
+
+    --color-primary-subtle: var(--gold-50);        /* tinted fills, 10% vibe */
+    --color-accent-subtle:  #eef0fd;
+
+    /* Text */
+    --text-strong:   var(--ink-800);
+    --text-body:     var(--ink-700);
+    --text-muted:    var(--ink-500);
+    --text-on-brand: var(--white);
+    --text-link:     var(--gold-700);
+    --text-link-hover: var(--gold-500);
+
+    /* Surfaces */
+    --surface-page:      var(--white);
+    --surface-wash:      var(--gold-100);   /* hero / section wash */
+    --surface-wash-soft: var(--gold-50);
+    --surface-card:      var(--white);
+    --surface-tertiary:  var(--ink-50);     /* "body-tertiary" bands */
+    --surface-code:      var(--ink-100);    /* inline code chip */
+    --surface-code-block: var(--ink-900);   /* fenced code blocks */
+    --surface-ink:       var(--ink-800);    /* footer / dark sections */
+
+    /* Borders */
+    --border-subtle:  var(--ink-200);
+    --border-default: var(--ink-300);
+    --border-strong:  var(--ink-800);
+
+    /* Focus ring */
+    --focus-ring: color-mix(in srgb, var(--gold-500) 45%, transparent);
+}

package/src/styles/tokens/elevation.css

@@ -0,0 +1,27 @@
+/* ============================================================
+   ELEVATION & MOTION: Popular theme
+   Soft Bootstrap-style shadows. Cards lift on hover ("card-zoom"
+   in the theme). Motion is gentle: short ease-out fades + lifts,
+   no bounces.
+   ============================================================ */
+:root {
+    /* Shadows */
+    --shadow-xs: 0 1px 2px rgba(20, 42, 54, 0.06);
+    --shadow-sm: 0 2px 8px rgba(20, 42, 54, 0.08);
+    --shadow-md: 0 6px 20px rgba(20, 42, 54, 0.10);
+    --shadow-lg: 0 16px 40px rgba(20, 42, 54, 0.14);
+    --shadow-brand: 0 10px 28px rgba(161, 98, 7, 0.25); /* marquee-gold glow */
+
+    /* Focus ring shadow */
+    --shadow-focus: 0 0 0 0.25rem var(--focus-ring);
+
+    /* Motion */
+    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
+    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);   /* @kind other */
+    --duration-fast: 120ms;   /* @kind other */
+    --duration-base: 200ms;   /* @kind other */
+    --duration-slow: 320ms;   /* @kind other */
+
+    /* Card hover lift */
+    --hover-lift: translateY(-4px);   /* @kind other */
+}

package/src/styles/tokens/fonts.css

@@ -0,0 +1,9 @@
+/* ============================================================
+   FONTS: Popular theme
+   The live site uses Inter as its single workhorse typeface
+   (Hinode/Bootstrap theme). Quantico is an OPTIONAL geometric
+   display accent that echoes the squared "VANCOUVER" lettering
+   in the logo wordmark: use sparingly for hero/section accents.
+   Swap or extend these via the brand config or your own fonts.css.
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,200..800;1,14..32,400..600&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap");

package/src/styles/tokens/spacing.css

@@ -0,0 +1,39 @@
+/* ============================================================
+   SPACING & RADIUS: Popular theme
+   Bootstrap-rooted 0.25rem spacer scale (the theme is Bootstrap 5),
+   plus radii echoing the theme's rounded cards & pill buttons.
+   ============================================================ */
+:root {
+    /* Spacing: Bootstrap spacer scale (4px base) */
+    --space-0: 0;
+    --space-1: 0.25rem;   /* 4 */
+    --space-2: 0.5rem;    /* 8 */
+    --space-3: 1rem;      /* 16 */
+    --space-4: 1.5rem;    /* 24 */
+    --space-5: 3rem;      /* 48 */
+    --space-6: 4.5rem;    /* 72 */
+    --space-7: 6rem;      /* 96 */
+
+    /* Section rhythm */
+    --section-pad-y: 4.5rem;
+    --container-max: 1140px;  /* Bootstrap xl container */
+    --gutter: 1.5rem;
+
+    /* Radius: theme uses Bootstrap defaults + pills */
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;   /* Bootstrap default */
+    --radius-lg: 0.5rem;
+    --radius-xl: 1rem;       /* image / hero corners */
+    --radius-pill: 50rem;    /* buttons, badges */
+    --radius-circle: 50%;
+
+    /* Control sizing */
+    --control-height-sm: 2rem;
+    --control-height-md: 2.625rem;
+    --control-height-lg: 3.25rem;
+    --tap-target-min: 44px;
+
+    /* Border widths */
+    --border-width: 1px;
+    --border-width-thick: 2px;
+}

package/src/styles/tokens/typography.css

@@ -0,0 +1,43 @@
+/* ============================================================
+   TYPOGRAPHY: Popular theme
+   Inter is the workhorse for everything (matches live theme).
+   Quantico is an optional squared display accent echoing the
+   "VANCOUVER" wordmark: uppercase, tracked-out, used sparingly.
+   ============================================================ */
+:root {
+    /* Families */
+    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-display: "Quantico", "Inter", system-ui, sans-serif; /* squared accent */
+    --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
+
+    /* Weights */
+    --weight-extralight: 200;
+    --weight-light: 300;
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-semibold: 600;
+    --weight-bold: 700;
+
+    /* Type scale (1.250 major-third-ish, tuned for web) */
+    --text-xs:   0.75rem;   /* 12px: captions, eyebrow */
+    --text-sm:   0.875rem;  /* 14px: meta, labels */
+    --text-base: 1rem;      /* 16px: body */
+    --text-md:   1.125rem;  /* 18px: lead body */
+    --text-lg:   1.375rem;  /* 22px: card titles */
+    --text-xl:   1.75rem;   /* 28px: h3 */
+    --text-2xl:  2.25rem;   /* 36px: h2 */
+    --text-3xl:  3rem;      /* 48px: h1 */
+    --text-4xl:  4rem;      /* 64px: hero display */
+
+    /* Line heights */
+    --leading-tight: 1.15;
+    --leading-snug: 1.3;
+    --leading-normal: 1.6;
+    --leading-relaxed: 1.75;
+
+    /* Letter spacing */
+    --tracking-tight: -0.02em;
+    --tracking-normal: 0;
+    --tracking-wide: 0.04em;
+    --tracking-wider: 0.12em;  /* Quantico eyebrows / VANCOUVER vibe */
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "preserve"
+  }
+}