feat: add IOTA-inspired steering portal

docs/index.md

@@ -1,6 +1,6 @@
 ---
 id: index
-slug: /
+slug: /overview/
 title: Corp v1 Steering Committee
 sidebar_position: 1
 ---

src/css/custom.css

@@ -1,33 +1,78 @@
-@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');
-@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/style.css');
 
 :root {
-  --ifm-font-family-base: 'Geist', system-ui, sans-serif;
+  --ifm-font-family-base: 'Inter', system-ui, sans-serif;
-  --ifm-font-family-monospace: 'Geist Mono', monospace;
+  --ifm-font-family-monospace: 'JetBrains Mono', monospace;
-  --ifm-color-primary: #2563eb;
+  --ifm-color-primary: #0f766e;
-  --ifm-color-primary-dark: #1d4ed8;
+  --ifm-color-primary-dark: #115e59;
-  --ifm-color-primary-darker: #1e40af;
+  --ifm-color-primary-darker: #134e4a;
-  --ifm-color-primary-darkest: #1e3a8a;
+  --ifm-color-primary-darkest: #042f2e;
-  --ifm-color-primary-light: #3b82f6;
+  --ifm-color-primary-light: #14b8a6;
-  --ifm-color-primary-lighter: #60a5fa;
+  --ifm-color-primary-lighter: #2dd4bf;
-  --ifm-color-primary-lightest: #93c5fd;
+  --ifm-color-primary-lightest: #5eead4;
   --ifm-global-radius: 0;
   --ifm-code-border-radius: 0;
-  --ifm-button-border-radius: 0;
+  --ifm-pre-border-radius: 0;
   --ifm-alert-border-radius: 0;
+  --ifm-button-border-radius: 0;
+  --ifm-badge-border-radius: 0;
+  --ifm-card-border-radius: 0;
+  --ifm-pagination-nav-border-radius: 0;
 }
 
 [data-theme='dark'] {
-  --ifm-background-color: #09090b;
+  --ifm-background-color: #08101b;
-  --ifm-background-surface-color: #111113;
+  --ifm-background-surface-color: #101722;
-  --ifm-color-primary: #60a5fa;
+  --ifm-color-primary: #5eead4;
-  --ifm-color-content: #ededed;
+  --ifm-color-primary-dark: #2dd4bf;
-  --ifm-color-content-secondary: #a1a1aa;
+  --ifm-color-primary-darker: #14b8a6;
+  --ifm-color-primary-darkest: #0f766e;
+  --ifm-color-primary-light: #99f6e4;
+  --ifm-color-primary-lighter: #ccfbf1;
+  --ifm-color-primary-lightest: #f0fdfa;
+  --ifm-color-content: #f5f7fa;
+  --ifm-color-content-secondary: #a5b0c2;
+  --ifm-toc-border-color: #283345;
 }
 
-.navbar {background: #09090b !important; border-bottom: 1px solid #27272a; box-shadow: none;}
+html, body { background: #08101b; }
-.navbar__title {letter-spacing: .08em; font-weight: 700;}
+
-.footer {border-top: 1px solid #27272a;}
+/* Corp v1 has an explicit no-rounding rule. This intentionally overrides
-.button, code, pre, .card, .alert, .pagination-nav__link, .menu, input, select, textarea {border-radius: 0 !important;}
+   Infima and third-party component radii across all rendered shapes. */
+*, *::before, *::after { border-radius: 0 !important; }
+
+.navbar {
+  height: 68px;
+  background: rgba(8, 16, 27, .97) !important;
+  border-bottom: 1px solid #283345 !important;
+  box-shadow: none !important;
+}
+.navbar__brand { margin-right: 2.5rem; }
+.navbar__title { color: #f5f7fa !important; font-size: .87rem; letter-spacing: .09em; font-weight: 700; }
+.navbar__link { color: #a5b0c2 !important; font-size: .86rem; font-weight: 500; }
+.navbar__link:hover, .navbar__link--active { color: #5eead4 !important; }
+.navbar-sidebar { background: #08101b !important; }
+
+.footer { background: #050b12 !important; border-top: 1px solid #283345; }
+.footer__title { color: #f5f7fa; letter-spacing: .04em; }
+.footer__link-item { color: #a5b0c2; }
+.footer__link-item:hover { color: #5eead4; }
+
+.theme-doc-markdown h1,
+.theme-doc-markdown h2,
+.theme-doc-markdown h3 { letter-spacing: -.025em; }
+.theme-doc-sidebar-container { border-right-color: #283345 !important; }
+.menu__link { font-size: .9rem; }
+.menu__link--active { background: rgba(94, 234, 212, .08) !important; }
+.table-of-contents__link--active { color: #5eead4; }
+
+.button, code, pre, .card, .alert, .pagination-nav__link, .menu,
+input, select, textarea, details, summary, table, .dropdown__menu,
+.navbar__search-input, .theme-code-block { border-radius: 0 !important; }
+
 table { display: table; width: 100%; }
 th { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
+
+@media (max-width: 996px) {
+  .navbar { height: 60px; }
+}

src/pages/index.module.css

@@ -0,0 +1,243 @@
+.page {
+  --portal-ink: #f5f7fa;
+  --portal-muted: #a5b0c2;
+  --portal-line: #283345;
+  --portal-panel: #101722;
+  --portal-panel-strong: #151e2c;
+  --portal-accent: #5eead4;
+  background: #08101b;
+  color: var(--portal-ink);
+}
+
+.hero {
+  min-height: 700px;
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  align-items: center;
+  border-bottom: 1px solid var(--portal-line);
+  background:
+    radial-gradient(circle at 78% 22%, rgba(19, 185, 170, .13), transparent 28%),
+    linear-gradient(125deg, #08101b 0%, #0b1522 62%, #0c1a26 100%);
+}
+
+.gridTexture {
+  position: absolute;
+  inset: 0;
+  opacity: .25;
+  background-image:
+    linear-gradient(var(--portal-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--portal-line) 1px, transparent 1px);
+  background-size: 72px 72px;
+  mask-image: linear-gradient(to right, transparent, #000 38%, #000);
+}
+
+.heroInner {
+  width: min(1240px, calc(100% - 64px));
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+  padding: 112px 0 140px;
+}
+
+.kicker,
+.eyebrow {
+  display: block;
+  color: var(--portal-accent);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: .74rem;
+  font-weight: 700;
+  letter-spacing: .16em;
+  margin-bottom: 24px;
+}
+
+.hero h1 {
+  max-width: 900px;
+  font-size: clamp(3.3rem, 7vw, 6.8rem);
+  line-height: .98;
+  letter-spacing: -.055em;
+  margin: 0;
+  text-wrap: balance;
+}
+
+.heroInner > p {
+  max-width: 720px;
+  margin: 36px 0 0;
+  color: var(--portal-muted);
+  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
+  line-height: 1.65;
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 44px;
+}
+
+.primaryAction,
+.secondaryAction {
+  min-height: 52px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  padding: 0 22px;
+  font-size: .9rem;
+  font-weight: 700;
+  border: 1px solid transparent;
+  text-decoration: none !important;
+}
+
+.primaryAction {
+  color: #06110f !important;
+  background: var(--portal-accent);
+  border-color: var(--portal-accent);
+}
+
+.primaryAction:hover { background: #99f6e4; border-color: #99f6e4; }
+
+.secondaryAction {
+  color: var(--portal-ink) !important;
+  background: transparent;
+  border-color: #4a5669;
+}
+
+.secondaryAction:hover { border-color: var(--portal-accent); color: var(--portal-accent) !important; }
+
+.arrow { font-size: 1.05em; line-height: 1; }
+
+.heroRail {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  border-top: 1px solid var(--portal-line);
+  border-left: 1px solid var(--portal-line);
+  background: rgba(8, 16, 27, .88);
+}
+
+.heroRail span {
+  padding: 17px 25px;
+  border-right: 1px solid var(--portal-line);
+  font-family: var(--ifm-font-family-monospace);
+  color: #748196;
+  font-size: .67rem;
+  letter-spacing: .12em;
+}
+
+.portals,
+.principles {
+  width: min(1240px, calc(100% - 64px));
+  margin: 0 auto;
+  padding: 112px 0;
+}
+
+.sectionHeading { max-width: 680px; margin-bottom: 52px; }
+.sectionHeading h2,
+.principlesIntro h2,
+.cta h2 {
+  font-size: clamp(2.25rem, 4vw, 4rem);
+  letter-spacing: -.04em;
+  margin: 0;
+}
+.sectionHeading p { color: var(--portal-muted); font-size: 1.08rem; margin: 18px 0 0; }
+
+.portalGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  border-top: 1px solid var(--portal-line);
+  border-left: 1px solid var(--portal-line);
+}
+
+.portalCard {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--portal-panel);
+  border-right: 1px solid var(--portal-line);
+  border-bottom: 1px solid var(--portal-line);
+}
+
+.cardHeader { flex: 1; min-height: 310px; padding: 36px; }
+.cardHeader h2 { font-size: 2.1rem; letter-spacing: -.035em; margin: 0 0 18px; }
+.cardHeader p { color: var(--portal-muted); line-height: 1.65; margin: 0; }
+.eyebrow { margin-bottom: 46px; color: #718096; }
+.cardLinks { border-top: 1px solid var(--portal-line); }
+
+.cardLink {
+  min-height: 90px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 19px 24px;
+  color: var(--portal-ink) !important;
+  border-bottom: 1px solid var(--portal-line);
+  text-decoration: none !important;
+  transition: background .18s ease, color .18s ease;
+}
+.cardLink:last-child { border-bottom: 0; }
+.cardLink:hover { background: var(--portal-panel-strong); color: var(--portal-accent) !important; }
+.cardLink strong, .cardLink small { display: block; }
+.cardLink strong { font-size: .95rem; }
+.cardLink small { color: var(--portal-muted); font-size: .75rem; margin-top: 5px; }
+
+.principles { border-top: 1px solid var(--portal-line); }
+.principlesIntro { max-width: 700px; margin-bottom: 64px; }
+.principleGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  border-top: 1px solid var(--portal-line);
+  border-left: 1px solid var(--portal-line);
+}
+.principleGrid > div {
+  min-height: 280px;
+  padding: 34px;
+  border-right: 1px solid var(--portal-line);
+  border-bottom: 1px solid var(--portal-line);
+}
+.principleGrid strong { color: var(--portal-accent); font-family: var(--ifm-font-family-monospace); font-size: .78rem; }
+.principleGrid h3 { margin: 72px 0 14px; font-size: 1.35rem; }
+.principleGrid p { color: var(--portal-muted); line-height: 1.6; margin: 0; }
+
+.cta {
+  width: min(1240px, calc(100% - 64px));
+  margin: 0 auto;
+  padding: 64px;
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 40px;
+  border: 1px solid var(--portal-line);
+  border-bottom: 0;
+  background: #0d1724;
+}
+.cta .kicker { margin-bottom: 16px; }
+
+@media (max-width: 996px) {
+  .hero { min-height: 640px; }
+  .heroRail { left: 0; right: auto; grid-template-columns: repeat(4, 1fr); width: 100%; }
+  .heroRail span { padding: 14px 8px; text-align: center; }
+  .portalGrid, .principleGrid { grid-template-columns: 1fr; }
+  .cardHeader { min-height: auto; }
+  .cta { align-items: flex-start; flex-direction: column; }
+}
+
+@media (max-width: 600px) {
+  .heroInner, .portals, .principles, .cta { width: calc(100% - 32px); }
+  .heroInner { padding: 88px 0 120px; }
+  .hero h1 { font-size: clamp(2.75rem, 14vw, 4.4rem); }
+  .heroActions { flex-direction: column; }
+  .primaryAction, .secondaryAction { width: 100%; }
+  .heroRail span { font-size: .54rem; letter-spacing: .05em; }
+  .portals, .principles { padding: 80px 0; }
+  .cardHeader { padding: 28px; }
+  .cta { padding: 36px 28px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cardLink { transition: none; }
+}

src/pages/index.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
+import styles from './index.module.css';
+
+type PortalLink = {label: string; to: string; description: string};
+
+type PortalGroup = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  links: PortalLink[];
+};
+
+const groups: PortalGroup[] = [
+  {
+    eyebrow: 'PORTFOLIO',
+    title: 'Projects',
+    description: 'See every Corp v1 initiative, its accountable owners, lifecycle state, and expected outcomes.',
+    links: [
+      {label: 'Projects registry', to: '/projects/', description: 'Browse the complete project portfolio'},
+      {label: 'Project lifecycle', to: '/governance/project-lifecycle/', description: 'Understand kickoff, steering, and shutdown'},
+    ],
+  },
+  {
+    eyebrow: 'ORGANIZATION',
+    title: 'Teams',
+    description: 'Navigate mandates, responsibilities, leadership, membership, and project allocation.',
+    links: [
+      {label: 'Teams registry', to: '/teams/', description: 'Find teams and their responsibilities'},
+      {label: 'Members registry', to: '/members/', description: 'Review governance roles and assignments'},
+    ],
+  },
+  {
+    eyebrow: 'CONTROL',
+    title: 'Governance',
+    description: 'Follow the decisions that authorize projects and preserve accountability as direction changes.',
+    links: [
+      {label: 'Decision log', to: '/governance/decisions/', description: 'Read authoritative steering decisions'},
+      {label: 'Steering overview', to: '/overview/', description: 'Learn how this committee operates'},
+    ],
+  },
+];
+
+function Arrow(): React.JSX.Element {
+  return <span aria-hidden="true" className={styles.arrow}>↗</span>;
+}
+
+function PortalCard({group}: {group: PortalGroup}): React.JSX.Element {
+  return (
+    <article className={styles.portalCard}>
+      <div className={styles.cardHeader}>
+        <span className={styles.eyebrow}>{group.eyebrow}</span>
+        <Heading as="h2">{group.title}</Heading>
+        <p>{group.description}</p>
+      </div>
+      <div className={styles.cardLinks}>
+        {group.links.map((item) => (
+          <Link className={styles.cardLink} to={item.to} key={item.label}>
+            <span>
+              <strong>{item.label}</strong>
+              <small>{item.description}</small>
+            </span>
+            <Arrow />
+          </Link>
+        ))}
+      </div>
+    </article>
+  );
+}
+
+export default function Home(): React.JSX.Element {
+  return (
+    <Layout
+      title="Corp v1 Steering Committee"
+      description="Authoritative project, team, member, and steering decision registry for Corp v1.">
+      <main className={styles.page}>
+        <section className={styles.hero}>
+          <div className={styles.gridTexture} aria-hidden="true" />
+          <div className={styles.heroInner}>
+            <span className={styles.kicker}>CORP V1 · GOVERNANCE PORTAL</span>
+            <Heading as="h1">Steer projects with<br />clarity and accountability.</Heading>
+            <p>
+              The authoritative workspace for starting, governing, and closing Corp v1 projects—connecting every initiative to its decisions, teams, and members.
+            </p>
+            <div className={styles.heroActions}>
+              <Link className={clsx('button', styles.primaryAction)} to="/projects/">Explore projects <Arrow /></Link>
+              <Link className={clsx('button', styles.secondaryAction)} to="/governance/project-lifecycle/">How steering works</Link>
+            </div>
+          </div>
+          <div className={styles.heroRail} aria-label="Registry areas">
+            <span>PROJECTS</span><span>TEAMS</span><span>MEMBERS</span><span>DECISIONS</span>
+          </div>
+        </section>
+
+        <section className={styles.portals} aria-labelledby="explore-heading">
+          <div className={styles.sectionHeading}>
+            <span className={styles.kicker}>DISCOVER</span>
+            <Heading id="explore-heading" as="h2">Navigate Corp v1</Heading>
+            <p>Start with the registry that matches the decision you need to make.</p>
+          </div>
+          <div className={styles.portalGrid}>
+            {groups.map((group) => <PortalCard group={group} key={group.title} />)}
+          </div>
+        </section>
+
+        <section className={styles.principles} aria-labelledby="principles-heading">
+          <div className={styles.principlesIntro}>
+            <span className={styles.kicker}>OPERATING MODEL</span>
+            <Heading id="principles-heading" as="h2">Governance without ambiguity</Heading>
+          </div>
+          <div className={styles.principleGrid}>
+            <div><strong>01</strong><Heading as="h3">Named accountability</Heading><p>Every active project has a sponsor, accountable lead, and assigned team.</p></div>
+            <div><strong>02</strong><Heading as="h3">Explicit lifecycle</Heading><p>Projects move through documented proposal, approval, active, paused, shutdown, and closure states.</p></div>
+            <div><strong>03</strong><Heading as="h3">Durable decisions</Heading><p>Kickoffs, material changes, and shutdowns are preserved as dated steering decisions.</p></div>
+          </div>
+        </section>
+
+        <section className={styles.cta}>
+          <div>
+            <span className={styles.kicker}>AUTHORITATIVE SOURCE</span>
+            <Heading as="h2">Review the current portfolio.</Heading>
+          </div>
+          <Link className={clsx('button', styles.primaryAction)} to="/projects/">Open projects registry <Arrow /></Link>
+        </section>
+      </main>
+    </Layout>
+  );
+}