co-op/website
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove kicker labels and numbered flow; replace decision diagram with dialogue + Loomio pie chart

Browse Source
This commit is contained in:
inference-bot committed 2026-09-25 21:31:00 -06:00
1 parent 52b11d4fd0
commit a036ce659a
1 file changed
+28 -98
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+28 -98
View File
@@ -92,15 +92,6 @@
section { padding: 72px 0; }
section.alt { background: var(--wash); }
.kicker {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--green-deep);
margin-bottom: 14px;
}
h2 {
font-size: 32px;
font-weight: 700;
@@ -234,36 +225,15 @@
border-radius: 50%;
background: var(--green-mid);
}
.cogov-visual { flex: 0 0 260px; text-align: center; }
.cogov-visual { flex: 0 0 300px; }
.cogov-visual svg { display: block; margin: 0 auto; }
.cogov-visual .caption {
font-size: 13px;
color: var(--light-muted);
margin-top: 10px;
text-align: center;
}
.flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.flow-step {
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 20px;
}
.flow-step .num {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--green-deep);
margin-bottom: 8px;
}
.flow-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.flow-step p { font-size: 14px; color: var(--muted); }
/* ---------- Membership ---------- */
.membership-grid {
display: grid;
@@ -400,14 +370,12 @@
@media (max-width: 840px) {
.cogov-grid { flex-direction: column; }
.cogov-visual { order: -1; flex-basis: auto; }
.flow { grid-template-columns: repeat(2, 1fr); }
.values-grid, .use-grid, .membership-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
section { padding: 52px 0; }
h2 { font-size: 27px; }
.hero h1 { font-size: 36px; }
.flow { grid-template-columns: 1fr; }
}
</style>
</head>
@@ -462,7 +430,6 @@
<!-- Why we exist -->
<section class="why alt">
<div class="wrap">
<div class="kicker">Why we exist</div>
<h2>AI is becoming infrastructure.</h2>
<p>The models shaping how we work, learn, and talk are owned by a handful of companies — and governed by no one in particular.</p>
<p>We think that's backwards. A tool this consequential should answer to the people who use it. So we're building AI the way we build public institutions: directed by its members, not by shareholders.</p>
@@ -472,7 +439,6 @@
<!-- Cogovernance -->
<section>
<div class="wrap">
<div class="kicker">Cogovernance</div>
<h2>You don't just use it. You help run it.</h2>
<p class="lede">Membership isn't a subscription to a service. It's a seat in a shared institution. When a question comes up, members weigh in, deliberate in the open, and help steer the co-op.</p>
@@ -487,66 +453,33 @@
</ul>
</div>
<div class="cogov-visual">
<svg width="240" height="240" viewBox="0 0 130 130" fill="none" aria-label="Members gathered around a shared decision">
<circle cx="65" cy="65" r="13" fill="#5b8c5a"/>
<circle cx="65" cy="65" r="5" fill="#ffffff"/>
<line x1="65" y1="65" x2="113" y2="65" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="109.3" y2="83.4" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="98.9" y2="98.9" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="83.4" y2="109.3" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="65" y2="113" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="46.6" y2="109.3" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="31.1" y2="98.9" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="20.7" y2="83.4" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="17" y2="65" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="20.7" y2="46.6" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="31.1" y2="31.1" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="46.6" y2="20.7" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="65" y2="17" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="83.4" y2="20.7" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="98.9" y2="31.1" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="109.3" y2="46.6" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<circle cx="113" cy="65" r="4" fill="#6ba86b"/>
<circle cx="109.3" cy="83.4" r="4" fill="#7ab87a"/>
<circle cx="98.9" cy="98.9" r="4" fill="#6ba86b"/>
<circle cx="83.4" cy="109.3" r="4" fill="#7ab87a"/>
<circle cx="65" cy="113" r="4" fill="#6ba86b"/>
<circle cx="46.6" cy="109.3" r="4" fill="#7ab87a"/>
<circle cx="31.1" cy="98.9" r="4" fill="#6ba86b"/>
<circle cx="20.7" cy="83.4" r="4" fill="#7ab87a"/>
<circle cx="17" cy="65" r="4" fill="#6ba86b"/>
<circle cx="20.7" cy="46.6" r="4" fill="#7ab87a"/>
<circle cx="31.1" cy="31.1" r="4" fill="#6ba86b"/>
<circle cx="46.6" cy="20.7" r="4" fill="#7ab87a"/>
<circle cx="65" cy="17" r="4" fill="#6ba86b"/>
<circle cx="83.4" cy="20.7" r="4" fill="#7ab87a"/>
<circle cx="98.9" cy="31.1" r="4" fill="#6ba86b"/>
<circle cx="109.3" cy="46.6" r="4" fill="#7ab87a"/>
</svg>
<div class="caption">Members, gathered around a shared decision</div>
</div>
</div>
<svg width="300" height="300" viewBox="0 0 150 150" fill="none" aria-label="A decision made together, by discussion and vote">
<!-- speech bubbles (dialogue) -->
<path d="M12 14 h34 a4 4 0 0 1 4 4 v10 a4 4 0 0 1 -4 4 H31 l-6 5 v-5 h-13 a4 4 0 0 1 -4 -4 V18 a4 4 0 0 1 4 -4 Z" fill="#e8f5e8" stroke="#6ba86b" stroke-width="1.2"/>
<circle cx="21" cy="22" r="1.4" fill="#5b8c5a"/>
<circle cx="27" cy="22" r="1.4" fill="#6ba86b"/>
<circle cx="33" cy="22" r="1.4" fill="#7ab87a"/>
<rect x="16" y="26" width="30" height="2.2" rx="1.1" fill="#7ab87a" opacity="0.7"/>
<rect x="16" y="30" width="20" height="2.2" rx="1.1" fill="#7ab87a" opacity="0.5"/>
<div class="flow">
<div class="flow-step">
<div class="num">1</div>
<h3>Propose</h3>
<p>Any member opens an idea on the forum or the support repo.</p>
</div>
<div class="flow-step">
<div class="num">2</div>
<h3>Deliberate</h3>
<p>Members discuss it in the open, on Loomio.</p>
</div>
<div class="flow-step">
<div class="num">3</div>
<h3>Decide</h3>
<p>The co-op weighs in and reaches a decision together.</p>
</div>
<div class="flow-step">
<div class="num">4</div>
<h3>Ship</h3>
<p>It goes live in the stack, tracked in our open repos.</p>
<path d="M104 14 h34 a4 4 0 0 1 4 4 v10 a4 4 0 0 1 -4 4 h-15 l-6 5 v-5 h-13 a4 4 0 0 1 -4 -4 V18 a4 4 0 0 1 4 -4 Z" fill="#e8f5e8" stroke="#6ba86b" stroke-width="1.2"/>
<circle cx="113" cy="22" r="1.4" fill="#5b8c5a"/>
<circle cx="119" cy="22" r="1.4" fill="#6ba86b"/>
<circle cx="125" cy="22" r="1.4" fill="#7ab87a"/>
<rect x="108" y="26" width="22" height="2.2" rx="1.1" fill="#7ab87a" opacity="0.7"/>
<rect x="108" y="30" width="28" height="2.2" rx="1.1" fill="#7ab87a" opacity="0.5"/>
<!-- Loomio-style donut (pie) decision -->
<path d="M75 38 A 37 37 0 1 1 63.6 73.2 L 69.8 61.5 A 23 23 0 1 0 75 52 Z" fill="#5b8c5a"/>
<path d="M63.6 73.2 A 37 37 0 0 1 38 75 L 52 75 A 23 23 0 0 0 69.8 61.5 Z" fill="#e0b36a"/>
<path d="M38 75 A 37 37 0 0 1 53.3 49.8 L 60.5 56.3 A 23 23 0 0 0 52 75 Z" fill="#d9822b"/>
<path d="M53.3 49.8 A 37 37 0 0 1 75 38 L 75 52 A 23 23 0 0 0 60.5 56.3 Z" fill="#b3543a"/>
<circle cx="75" cy="75" r="23" fill="#ffffff"/>
<circle cx="75" cy="75" r="23" fill="none" stroke="#ffffff" stroke-width="1"/>
<text x="75" y="72" text-anchor="middle" font-size="11" font-weight="700" fill="#2d3327" font-family="Figtree, sans-serif">55%</text>
<text x="75" y="84" text-anchor="middle" font-size="7.5" fill="#6b7a62" font-family="Figtree, sans-serif">agree</text>
</svg>
<div class="caption">Deliberate in the open, then decide together</div>
</div>
</div>
</div>
@@ -555,7 +488,6 @@
<!-- Membership -->
<section class="alt">
<div class="wrap">
<div class="kicker">Membership</div>
<h2>One membership. A fair price, a full seat.</h2>
<p class="lede">Everyone joins the same way, and everyone gets the same things — the difference is what you can afford to give, not what you get back.</p>
<div class="membership-grid">
@@ -582,7 +514,6 @@
<!-- Values / usage -->
<section>
<div class="wrap">
<div class="kicker">How you use it</div>
<h2>Choose by what you value.</h2>
<p class="lede">Different members care about different things. So we let you route your AI by the value that matters to you — not lock you to a single provider.</p>
@@ -647,7 +578,6 @@
<!-- Built the cooperative way -->
<section class="alt">
<div class="wrap built">
<div class="kicker">How it's built</div>
<h2>Built the cooperative way.</h2>
<p>Everything we run is self-hosted, open source, and free of external dependencies — so the co-op controls its own stack, and members can see exactly how it works.</p>
<ul>